Giáo trình DreamWeaver 8 - Trần Việt An

Giáo trình DreamWeaver 8
Biên tập bởi:
Trần Việt An
Giáo trình DreamWeaver 8
Biên tập bởi:
Trần Việt An
Các tác giả:
Trần Việt An
Phiên bản trực tuyến:
MỤC LỤC
1. Start Page của DreamWeaver 8
2. Cửa sổ tài liệu
3. DreamWeaver 8 Document
4. Status Bar , Property Inspector và Panel
5. Layout - Quản lý các cửa sổ
6. Site cục bộ
7. Site từ xa
8. FTP , SFTP và Web DAV (1)
9. FTP , SFTP và Web DAV (2)
10. Hiệu chỉnh Site
11. Panel Files trong DreamWeaver 8
12. Panel Files trong DreamWeaver 8 (2)
13. SYNCHRONIZE Đồng Bộ Hóa
14. Trang trang đầu tiên với DreamWeaver 8
15. Hyperlink - Siêu liên kết
16. Insert Ảnh
17. Thuộc tính của Page (Page Properties)
Tham gia đóng góp
1/146
Start Page của DreamWeaver 8
Nguồn cung cấp tài liệu
- Mua dỉa Macromedia _AIO _ V2 ( AIO là All In One gồm nhiều Phần mềm
Macromedia trong 1 đĩa ) tại các cửa hàng Vi Tính . Bạn đưa danh sách họ sẽ truy lục
trên máy và lấy dỉa bán cho bạn . Trong đó có Chương Trình Dreamweaver 8 nầy.
- Bạn cũng có thể download DreamWeaver 8 ở trên mạng .
Cài đặt
Mở đĩa chứa Chương Trình ALL IN ONE > Folder DREANWEAVER > Dung lượng
67.20 MB , nhấp File Setup.exe. ( Hình 2 )
2/146
Next > I Accept  > Next > Nhấp chọn Create Shortcut On Desktop > Next > Nhấp
chọn Select All > Next > Install > Chạy cài đặt > Finish . Trong dia nầy khi cài đặt
không cần Paste File Keygen do Tác giả đã hiệu chỉnh sẵn.
Ra Desktop > Nhấp Shortcut > Chọn Designer > Ok . ( Hình 3 ).
Mô tả giao diện Start Page
OPEN A RECENT NEW :
Chứa danh sách 10 Mục được mở gần đây . Nếu mở ít hơn 10 Mục , nó chỉ hiển thị số .
Nếu chưa sử dụng Dreaweaver ( D ) , nỏ chỉ xuất hiện Folder Open.
CREATE NEW :
3/146
Chọn 1 trong những tùy chọn sẽ tạo 1 File HTML , Cold Fusion , PHP , ASP VB
Script , ASP NET C# , JavaScript , XML , XSLT ( Entire Page ) , CSS , Tạo 1 Site
Dreamweaver.
Chọn More để hiển thị Hộp Thoại New Document cung cấp nhiều lựa chọn .
CREATE FROM SAMPLES :
Phần giúp bạn chỉ học về xây dựng các Website .
Chứa các Folder , từng Folder chứa nhiều Trang mẫu trình bày đẹp
Nhấp bất cứ Folder nào sẽ mở Hộp thoại New Document. Nhấp Folder Css Style Sheets
> Trong HT nầy bạn có thể chọn nội dung của các Folder khác.
4/146
EXTEND : Mở Rộng .
Bạn có thể thêm chức năng vào Dreaweaver vốn chưa được đưa vào bằng cách thực
hiện thông qua 1 công nghệ gọi là Extensions. Extensions là 1 phần mềm nhằm mở rộng
những tính năng của Dreaweaver.
Có thể nhận thêm Extensions của Macromedia Dreaweaver Exchange . Khi nhấp vào
chữ :Dreamweaver Exchange.( Xem phần Phụ lục cuối quyển sách ).
5/146
QUICK TOUR : Khảo sát nhanh và cần thiết .
Nhấp lên : Take a Quick Tour of Dreaweaver : Sẽ liên kết đến Trang Web .Công cụ trợ
giáo trực tuyến bằng cách sử dụng Breeze Web ( Hình7 ).
6/146
Nhấp lên : Learn About Documentation Resources : Hiển thị tài liệu trực tuyến .( Hình
8 ).
7/146
Nhấp lên : Find Authorized Training mở Trang Web cung cấp các tài nguyên đào tạo . (
Hình 9 ).
8/146
Nếu không thích mở giao diện START PAGE nầy nhấp lên : Don`t Show Again. ( Hình
10 )
9/146
10/146
Cửa sổ tài liệu
1. Khi nhấp Shortcut hiện ra Bảng WorkSpace Setup > Chọn Designer > Ok. Nếu
thay đổi chọn lựa trên > Menu Window > WorkSpace LayOut . Ra 3 Mục để
bạn chọn lựa .Sách nầy giả định tất cả mọi người dùng Window đều chọn
Designer LayOut . (H1).
11/146
• Cột Create New giúp bạn tạo 1 Trang hoặc 1 Site mới . Có nhiều lực chọn bên
dưới cột.
Cửa sổ tài liệu
Thí dụ ta chọn HTML
12/146
1. Đây là 1 Cửa sổ tài liệu Dreamweaver đơn giản . Ban có thể chỉnh sửa nó để
thích hợp với những thói quen của bạn .
2. Nếu mở nhiều Files cùng lúc , bạn sẽ thấy các Tables nằm dọc ở phần trên cùng
cửa sổ . Bạn nhấp vào 1 Table để chỉnh sửa . Bạn có thể Delate Table.(H2).
13/146
3. Nhấp Nút Restore Down ( Góc Phải trên ) > Trở lại nhấp Nút Maximize.
4. Thanh Menu : Nói về những gì mà bạn mong đợi thấy trên nền.
5. Thanh INSERT : Dứoi Thanh Menu.
◦ COMMON : Tập hợp nầy chứa các Đối Tượng thường được sử dụng
nhiều nhất như các liên kết với ảnh . (H3).
◦ LAYOUT : nhấp nút xổ xuống chọn Layout . Hiện ra gồm các Tables –
Div – Layer – Khung ( Frame ) . Các Đối tượng nầy giúp bạn mô tả
cách bạn muốn trình bày Trang . (H4).
◦ FORM : Gồm các thành phần Form như Trường Text , Nút và Hộp
kiểm (H5).
◦ TEXT : Giúp tạo Style cho Text đã nằm trên Trang tốt hơn là dùng
Property Inspector ( Nằm ở đáy ). (H6).
◦ HTML : Ít hữu dụng , cho phép bạn chèn các đối tượng như Table –
Khung – Script vốn được thực hiện tốt hơn ở nơi khác .(H7).
14/146
◦ APPLICATION : Giúp cho bạn làm việc với các cơ sở dữ liệu bên
ngoài (H8).
◦ FLASH ELEMENTS : Chỉ chứa 1 Đối tượng bộ xem ảnh Flash.Nếu
muốn thêm các thành phần Flash như Nút Flash – Text – Video hãy
quay về Common > Nút Media . ( H9+10).
◦ FAVORITES : Chỉ là rổng không . Dùng để chỉnh sửa , dùng để chứa
những gì bạn muốn nó có . Để làm điều nầy > Chọn Tập hợp Favorites
15/146
> Nhấp Phải > Cho phép bạn chọn lựa để thêm những đối tượng thường
được sử dụng nhiều nhất. (H11).
◦ Chức năng của từng Nút và nút xổ xuống kế bên : Để con trỏ lên Nút
sẽ thấy Text mô tả chức năng của Nút đó . Nhấp Nút xổ xuống kế bên
ra chức năng phụ. (H12).
16/146
DreamWeaver 8 Document
Vì đây là giai đoạn đầu bạn và tôi cùng tìm hiểu vể Giao Diện của Dreamweaver 8 nên
đôi khi tháy mái làm xáo trộn màn hình không trở về Standard được .Bạn vô Menu Help
> Dreamweaver Help > Nhập View Standard > Cột Trái chọn Swithching from Standard
To LayOut Mode ( H1).
Trở về giao diện chương trình : Menu View > Table Mode > Standard Mode. Nếu không
thấy Thanh Công Cụ Document > Nhấp Phải Thanh Insert > Chọn Document.
THANH CÔNG CỤ : Có 3 phần :
1. NÚT CODE : Gồm diện mạo Markup và Tag ( Thẻ ) . Có nhiều người tạo ra
Trang Web đẹp mà chưa sử dụng Khung xem Code.( H2 ).
17/146
2. NÚT SPLIT : Có cả phần Code và Design .Mã nằm phía trên . Khung xem
WYSIWG ( What You See Is You Get ) phía dưới .Dùng tìm hiểu về Markup ,
tinh chỉnh các Tag xem diện mạo của kiểu thiết kế. Rê thanh giữa để nới rộng
và thu hẹp 2 phần nầy.(H3)
18/146
• NÚT DESIGN : Nơi bạn nhập dữ liệu .Khi xem trong Trình Duyệt ( Browser )
cũng giống như thế . Gọi là : What You See Is You Get .Là nơi bạn thao tác
thực hiện thiết kế Trang Web . Bạn có thể xem trên các chế độ : Design – Code
– Split.(H4).
19/146
• CÁC LOẠI NÚT PHỤ : Chứa mọi thứ , bạn nhấp lên để tìm hiểu thêm. Đáng
chú ý Nút Preview In Browser đang liên kết đến các trình duyệt của bạn đang
sử dụng. ( H5 )
• TITTLE : Nhập Tiêu đề Trang.
CÁC THANH CÔNG CỤ KHÁC :
20/146
Khi nhấp Phải trong Thanh Document hay Thanh Insert , bạn sẽ thấy có 2 Thanh trong
bảng nầy :
1. THANH STYLE RENDERING : Bạn sẽ sử dụng để chuyển đổi giữa 2 Style
Rendering . Phần lớn bạn chỉ muốn xem Khung màn Hình mặc định (H6).
• THANH STANDARD : Khi nhấp Phải để chọn Style Rendering có các chức
năng New – Open – Save – Print – Cut – Copy – Paste . bạn có thể tắt thanh
Insert và Thanh Document . Để mở lại : View > Toolbars > Chọn các thanh.
21/146
Status Bar , Property Inspector và Panel
Status Bar (Thanh trạng thái)
Undo : Ctrl+Z – REDO : CTRL+Y.
1. Nhập Text vào .
2. Góc đáy bên Trái là Bộ Chọn Thẻ ( Tag Selector ):
◦ Nhấp là chọn toạn bộ nội dung trang .
◦ Nhấp bất cứ nơi nào trong một tài liệu > Sẽ hiện ra Thẻ hiện hành của
vị trí mà bạn đang nhấp > Nhấp lên Thẻ nầy > Bạn sẽ có các dữ liệu của
Thẻ đó trong Properties. ( H1)
22/146
.
3. Góc Đáy Phải : Công cụ Select – Hand – Zoom – Tỉ lệ % đang hiển thị - Kích
cở của cửa sổ đang hiển thị ( Kế bên có nút xổ xuống để chọn Size của cửa sổ
có sẵn ) – Ô chót : Ước tính thời gian mà trình duyệt Download trang nầy .Nếu
không thích 2 Ô cuối cùng nầy , bạn có thể thay đổi bằng cách chọn Edit Sizes
từ Menu bật lên . H2).
23/146
Property Inspector
Căn cứ những gì được chọn trong cửa sổ tài liệu , các tùy chọn mô tả sẽ xuất hiện trong
cửa sổ nầy .
24/146
• Bôi đen chọn AUGUST 3.2006 . (H3).
• Bôi đen chữ THURSDAY . (H4).
25/146
• Chọn 1 Ảnh các tùy chọn xuất hiện . PROPERTY INSPECTOR được sử dụng
vừa xem , vừa chỉnh sửa .(H5).
26/146
• Nhấp Tam giác nầy để thu hẹp hay mở rộng Inspector . (H6).
27/146
Panel
Bên Phải màn Hình là các Panel
1. Các Panel có khi bị mất , chọn Menu Window > Arrange Panels để chúng xuất
hiện lại . Thường mặc định hiện hữu là : Application – Tag Inspector – CSS –
File . (H7).
28/146
2. Không xuất hiện các Panel : Frames – History – Results – Code Inspector -
Time Lines . Chỉ xuất hiện khi bạn mở chúng ra ( Menu Windown > Nhấp các
panel liệt kê trên ) . (H8).
29/146
3. Mỗi Panel có tính năng riêng của nó , giúp dễ dàng khảo sát – chỉnh sửa những
đối tượng liên quan đến chúng .
4. Các Panel có chung vài thứ như sau :
◦ Nhấp Nút xổ để mở nội dung Panel.
◦ Kẹp Panel : Rê Panel đến nơi khác .
◦ Thanh Tiêu Đề : Nhấp Tab mở nội dung của nó .
◦ Nút Panel Options : Mở Menu để chọn.
◦ Nút Panel chứa 2 hay nhiều Tab.(H9).
30/146
◦ Khung xem Category : Nhấp Tag > Tab Attributes : Có 2 Khung
xem là Category và List .
◦ Xem Category . (H10 ).
31/146
◦ Xem List ( H11 )
32/146
◦ Nút Panel Options sẽ xuất hiện Menu dựa vào Panel và Tab mà bạn
đang làm việc.(H12).
33/146
5. Ví Dụ : Sử dụng Panel CSS :
◦ Mở Panel CSS : Nhấp Thẻ CSS – Menu Window > CSS Styles.
◦ Nhấp Phải lên CSS Styles bật ra Menu để bạn có thể : Group CSS with
– Close CSS – Rename – Maximize – Close Panel Options . (H13).
34/146
◦ Nhấp Tab Layers > Nút Panel Options > Group Layer with Panel khác
.Có thể chọn trong Menu bật ra hoặc tạo New Panel Group. (H14).
35/146
◦ Đóng các Tab – Di chuyển các Tab từ Panel nầy đến Panel khác sẽ xác
lập Dreamweaver để làm việc theo cách mà bạn mong muốn.
36/146
Layout - Quản lý các cửa sổ
Layout
1. LAYOUT DESIGNER :
Trong Window , bạn có 2 Layout mặc định để chọn : Designer và Code > Nếu
trước đó bạn đã thêm , xóa di chuyển các Panel và các tài liệu , bạn có thể trở
về Layout ban đầu bằng cách : Menu Window > WorkSpace Layout > Designer.
(H1).
37/146
2. LAYOUT DUAL SCREEN : (H2).
38/146
3. CHỈNH SỬA LAYOUT : Nới Rộng Cửa sổ > Nhấp Nút Tam Giác Nhỏ ở Đáy
hay hông Cửa sổ hoặc Phím F 4 ( H3).
39/146
4. Bạn thiết lập theo cách bạn mong muốn , sau đó Save bằng cách Menu Window
> WorkSpace Layout > Save Current > Nhập đặt tên . sau nầy muốn đổi tên
khác , bạn chọn Menu Window > WorkSpace Layout > Manage .
Quản lý các cửa sổ
1. XẾP TẦNG :
40/146
Mở Layout mặc định Designer (H4)
Mở Layout có kiểu Xếp Tầng : Window > Cascade .Các Cửa Sổ Tài Liệu sẽ xuất
hiện theo kiểu xếp tầng . Mỗi cửa sổ hơi thấp hơn và nằm bên Phải so với cửa sổ
nằm ngang đằng sau nó . ( H5).
41/146
2. CHIỀU NGANG :
Mở Layout mặc định > Window > Title Horizontally > ra cửa sổ tài liệu xếp
ngói theo chiều ngang với khoảng trống tách đều . (H6).
42/146
3. CHIỀU DỌC :
Mở Layout mặc định > Window > Title Vertically > Các cửa sổ xếp ngói theo
chiều dọc với khoảng trống có sẵn dược tách đều giữa chúng.(H7).
43/146
4. CHÚ Ý :
◦ Nhấp nút maximize cửa sổ của bất cứ tài liệu nào để đặt trở lại tất cả
cửa sổ đang mở vào vị trí của chúng .
◦ Muốn tìm tài liệu đang mở > Menu Window > Tài liệu nằm cuối Menu.
◦ Dùng Menu bật lên ở đáy Phải cửa sổ liệt kê các kích cở cửa sổ có sẵn.
44/146
Site cục bộ
Một số định nghĩa
1. FOLDER GỐC CỤC BỘ : Thiết kế Web lưu trong 1 Folder ở ổ cứng , mở ra
xem Folder nầy . Folder nầy chứa các Files và Folder con.
2. Folder gốc cục bộ có tên ( Ví Dụ ) MY COMPANY , gồm có :
◦ Folder CompanyInfo.
◦ Folder Images .
◦ Folder Products.
3. Khi mở Trang Web : Trang index ( Nằm trong Folder Gốc cục bộ ).
4. Các Site Tỉnh : Đó là các Site trong Folder ở Ổ Cứng , sau đó sẽ Upload lên
Web Server.
5. Các Site Động : Khi mở Trang Web amazon.com và thấy các Trang chào đón
bạn và đưa ra đề nghị mang tính cá nhân .Các Trang nầy được tạo và được phục
vụ chỉ cho bạn , dựa vào việc lập trình cơ sở dữ liệu của amazon.(H1).
45/146
6. Sách nầy đề cập xây dựng các Site Tỉnh bằng Dreamweaver . Bản sao trên Web
Server là Site Từ Xa .
7. Site Từ Xa là ảnh gương của Site Cục Bộ . Dreaweaver có những công cụ để có
thể Đồng Bộ Hóa 2 Site nầy .
46/146
Sử dụng hộp thoại Site Definition
Việc thiết lập Site Cục Bộ và Site Từ Xa có nhiều bước .Dreamweaver cung cấp Hộp
Thoại nầy nhằm dẫn dắt các bạn tiến trình từng bước . Trong HT nầy cung cấp cho bạn
2 chế độ Basic và Advanced .
• Chế độ BASIC : Sử dụng nhiều màn Hình ( Witzard ).
• Chế Độ Advanced cho phép bạn nhập thông tin trên màn Hình với 1 số Hạng
mục và cung cấp các tùy chọn chi tiết hơn trong mỗi hạng mục.
• Sử dụng HT Definition để tạo Site Cục Bộ và Site Từ xa.
Tạo Site cục bộ
1. Cột Giữa Create New > Dreamweaver Site . (H2).
47/146
2. HT Site Definition xuất hiện , mặc định với Tab Basic , màn hình Editing Files
.
3. Nhập : pixels site và 
4. Nhấp Next (H3).
48/146
5. Dreamweaver hỏi bạn có muốn làm việc với 1 công nghệ sử dụng chẳng hạn
như ColdFusion , ASP , NET . JSP hoặc PHP hay không ? Chọn NO , I do not
want to use a Server Technology > Next . (H4).
49/146
6. Dreamweaver hỏi bạn muốn làm việc với các Files như thế nào trong suốt quá
trình phát triển . Dùng mặc định . Dreamweaver hỏi bạn lưu trử các Files ở đâu
trong máy tính ? > Nhấp biểu tượng Browse tìm vị trí lưu ( Ở đây chọn
Desktop ) > Next . (H5).
50/146
7. Chọn NONE .Vì bạn chỉ tạo Site Cục Bộ > Next . (H6).
51/146
8. Màn Hình SUMMARY xuất hiện tóm lược quá trình chọn lựa của bạn . Nhấp
DONE . (H7).
52/146
53/146
Site từ xa
Định nghĩa Site từ xa
1. Site Từ xa hoạt động trên Web Server , là đích của các Files , các Folder Con
trong Folder Web ở Ổ Cứng của Bạn.
2. Dreamweaver kết nối với Web Server bằng 1 số cách :
◦ FTP.
◦ SFTP ( Secure FTP ).
◦ Kết nối qua 1 giao thức là Web DAV.
3. Trước khi kết nối bạn cần biết một số thông tin về Web Server :
◦ Loại kết nối : FTP – SFTP – Web DAV.
◦ Địa chỉ FTP – SFTP – Web DAV .
◦ Password .
◦ Đường dẫn của Folder trên Server.
Định nghĩa Site từ xa bằng FPT hoặc SFPT
1. Menu Site > Manage Sites > Pixel Site > Edit . (H1).
54/146
2. Nếu trước đó đã sử dụng HT Site Definition nầy , nó vẫn giữ xác lập trước đó
.(H2).
55/146
3. Tab Basic > Next> Next > Next hiện ra : How do you connect to your remote
server chọn FTP.
◦ Nhập FTP.
◦ What is the hostname FTP address of your Web Server : Ở đây bạn
đang sử dụng 1 Host Server Free là : www.freewebtown.com. Bạn nhập
địa chỉ trang Web nầy vào đây .
◦ What Folder on the Server do you want to store your files in ? Nhập :
WEBSITES10.
◦ What is your FTP login ? Nhập : utbinh021.
◦ What is your FTP password ? Nhập : 000000000.
◦ Nhấp Nút Test Connection để bảo đảm rằng Dreamweaver có thể kết
nối thành công với Web Server của bạn .(H3).
56/146
4. Next > Chọn mặc định > Next .(H4).
57/146
5. Bảng SUMMARY xuất hiện với thông tin mà bạn đã nhập cho các Sit ...  Web sử dụng phần khai báo DocType để xác định cách trang được kết
xuất như thế nào . Mặc định Dreamweaver chèn Doctype XHTML 1.0Transitional và
mã mà nó tạo nhất quán với chuẩn đó.(Hình 6).
105/146
SỬ DỤNG CÁC TRANG MẪU :
• Mở HT New Document > Cột Category > Chọn Mục CSS Style Sheets là các
tài liệu Style Sheet CSS > Chọn bất kỳ Style Sheet mẫu > Thấy Ảnh xem trước
và phần Mô tả . (Hình 7).
106/146
• Mở HT New Document > Cột category > Chọn Frameset> Có 15 Frameset tạo
sẵn với các kiể Khung khác nhau .(Hình 8).
107/146
• Hạng Mục Page Designs(CSS) cung cấp 6 mẫu tốt hoàn toàn dựa vào CSS cho
kiểu trình bày của chúng.(Hình 9).
108/146
• Starter page cung cấp cho bạn hàng chục trang để bạn sử dụng để tạo toàn
bộ các Site .(Hình 10).
109/146
◦ Có một số Hạng Mục Site như : Entertaiment, Travel . Spa và
nhiều hơn nửa.
◦ Mỗi loại Site có 1 Trang chủ - 1 Trang sản phẩm - 1 Trang văn bản
-1 Trang Catalog – 1 Trang Calendar.
Tất cả chia sẻ cùng 1 kiểu thiết kế cơ bản . Những loại nầy hữu dụng nhưng được
tạo dựa vào các Table để trình bày.(Hình 11).
110/146
• Page Designs cho các kiểu trình bày (Layout) cơ bản : Một cửa sổ Đăng
nhập – 1 Trang Catalog – 1 mẫu biểu chú giải . Những Layout nầy cũng
được tạo bằng cách sử dụng các tables để trình bày .(Hình 12).
111/146
Tạo 1 trang từ 1 Trang Mẫu :
• File > New .(Ctrl+N).
• Chọn 1 Mục trong Cột Category > Cột Phải thay đổi theo .
• Chọn Mục ở Cột Phải > Preview cho bạn xem Ảnh trước có phần mô tả bên
dưới .
• Nhấp Create.(Hình 13).
112/146
• Chỉnh sửa Trang Mẫu theo ý muốn.
113/146
114/146
Hyperlink - Siêu liên kết
Tạo các Site cục bộ tại Desktop
1. Tạo Folder Web Site tại Desktop : Nhấp Phải Desktop > New > Folder >
Gỏ : website11 > Enter.
2. Mở Dreamweaver > Menu Site > Manage Sites > New > Site > Cột
Category chọn Local Info >> Cột Phải gỏ : website11 > Nhấp Biểu tượng
Browse > Desktop > Nhấp Đúp website11 > Select > Ok> Ok > Done.(Hình
1).
3. Ra Bảng Manage Site có kê website11 hiện diện > Nhấp Edit .(Hình 2).
115/146
4. Cột Trái Category chọn Remote Info > Cột Phải Access chọn FTP > hàng
FTP Host nhập : www.freewebtown.com > Login nhập : utbinh026 >
Password nhập : ooo > Chọn Save > Nhấp Test để kiểm tra sự kết nối
Dreamweaver và Host Freewebtown > Dreamweaver ra bảng Thông Báo
kết nối hoàn tất > OK .OK > Done . (Hình 3).
116/146
5. Panel Files có website11.
Tạo trang Web
1. Hàng Create New nhấp HTML > Ra Khung Stag để nhập nội dung vào >
Trường Tittle nhập : Chào Mứng Các bạn đến website11 của UTBINH.
2. Nhấp Nút Menu ( Tam Giác Đen nhỏ ) của Common trong Thanh Insert >
Text . Bạn sử dụng Thanh Insert nầy và Property Inspector để gỏ nhập
Text.(Hình 4).
117/146
118/146
Tạo liên kết hyperlink
Liên kết với 1 Trang WEB
Bôi đen Số 1 Liến Kết với Báo Thanh Niên > Copy > Paste Link của Báo nầy vào
Trường Link > Sau khi tạo liến kết Số 1 nầy có gạch đít báo cho biết đã có Liên
Kết > F12 > Yes > Save > Hiện ra File nầy ở Desktop > Nhấp vô số 1 > Báo Thanh
Niên hiện ra > Close .(Hình 5).
119/146
Liên kết với 1 Hình
Bôi đen Số 2 Liên Kết với 1 Hình > Nhấp Nút Browse For File > Tìm đến Hình cần
Liên kết > Ok .(Hinh 6).
120/146
Dreamweaver cho biết Hình nầy ở ngoài Folder Web Site Cục bộ và đề nghị chép
vào > Yes > Save > F12 > Save > Nhấp lên số 2 Liên kết Hình > Hình hiện ra .>
Close .(Hình 7).
Liên Kết với 1 Bản Nhạc MP3
Bỏ dỉa Nhạc MP3 vào Ổ > Bôi đen Số 3 liên kết với 1 Bản Nhạc MP3 > Nhấp Biểu
tượng Browse For File > Tím đến bản MP3 trong Ổ E > Chọn 1 bản > OK > Yes >
Save >Test thử giống trên.(Hình 8).
121/146
Liên kết Hộp Thư của bạn
Bôi đen Số 4 Send Me Email > Menu Insert > Email Link > Test đã có sẵn 4.Send
Me Email > Hàng E- mail nhập địa chỉ Email của bạn > Ok.(Hình 9).
Liên kết với Trang Web Cá Nhân
Bôi đen Số 5 Liên Kết Trang Web của UTBINH > Copy > Paste Link của Trang
Web vào Trường LINK.(Hình 10).
122/146
Các động tác khi bạn Test để xem kết quả của từng Link là bạn đồng thời Save các
thay đổi các nội dung của Trang Web > Nhấp Phải Tab Untitled-1.html > Save As
> Desktop > website11 > File name gỏ : index.html> Save.
123/146
Upload
Chương Trình Thiết kế Web Dreamweaver có sẵn Upload bằng FTP.
1. Trong Panel Files bạn chọn tất cả Files và Folders của website11 > Chọn
Remote View ( Đề làm động tác Upload lên Host ) > Nhấp Mủi tên PUT
FILE chỉa lên . Bạn sẽ Upload các File và Folder trong Website 11 lên
Host. (Hình 11).
124/146
Bảng Background File Activity – website11 chạy Upload .
• Menu Site > Manage Site > Đã chọn website11 > Edit > Remote Info > Test >
Ok > Done .
125/146
Kết quả
1. Mở Trình Duyệt nhập : 
index.html
2.
Ra Trang Web website11 vừa tạo > Nhấp vào các hàng số 1-2-3- 4-5 lập
tức liên kết đến các Trang mà bạn đã tạo Hyperlink.(12).
3. Mời các bạn nhấp vào Link nầy để xem website11 áp dụng bài học tạo
HYPERLINK của Dreamwearver 8.
126/146
Insert Ảnh
Tạo Folder Website mới Website12 trên Desktop
1. Mở Dreamweaver > Create From Samples> Hàng Create From Samples
chọn Page Designs (CSS) > Ra bảng New Document> Bên Phải chọn Mẫu
TWO-COLUMN LEFT NAV > Create .(Hình 1).
2. Ra Bảng Save As > Desktop > Create New Folder > Gỏ : website12 > Nhấp
Đúp lên > File name gỏ : index.html > Ra Bảng Copy Dependent Files >
Copy . Khung làm việc có Tab index.html.(Hình 2).
127/146
3. Nhấp chọn Khung 280x200 > Nhấp Nút Image (Hàng Thanh Insert ) >
Image > Chọn 1 Hình > Ok.(Hình 3).
128/146
4. Nhấp Phải Tab index.html > Save As > Save > Yes.
5. Định Nghĩa Ổ Dỉa và Site :
◦ Menu Site > New > Site > Site Name gỏ : website12 > Nhấp Biểu
tượng Browse> Desktop > Nhấp Đúp Folder website12 > Select >
Ok > Ok > Done.
129/146
◦ Menu Site > Manage Sites > Edit > Remote Info > Access chọn FTP
> FTP gỏ : www.freewebtown.com > Login : utbinh 026 > Password
: ooo > Chọn Save > Nhấp Test kiểm tra sự liên kết giữa
Dreamweaver và Host > Ok > Ok > Done .(Hình 4).
6. Panel Files hiện ra website12 với các Files và Folders của nó . Nhấp lên
Hình vừa Insert vào hiện ra các chi tiết liên quan đến Hình.(Hình 5).
130/146
131/146
Insert Ảnh
Đặt con trỏ lên Hình hiện ra TEXT
• Khi nhấp OK sẽ hiện ra HT Image Tag Accessibility Attributes > Hàng
Alternate Text nhập Text thay thế Ảnh khi nhấp vào Ảnh > Hàng Long
Description thêm URL dẫn đến 1 Trang có mô tả chi tiết về Ảnh > OK.
• Muốn không hiện ra HT nầy > Menu Edit > Preferences > Accessibility >
Hủy chọn Hộp kiểm Images.
• Khi bạn nhập TEXT trong Hàng Alternate Text , Text được đính kèm vào
Ảnh để người khiếm thị đọc . Họ đọc bằng cách sử dụng bộ đọc màn hình
dành riêng cho họ hoặc dành cho những người duyệt xem ảnh được tắt
không nhận ra.
• HT nầy không hiển thị ra cho UTBINH ( Không biết tại sao – có thể phiên
bản cài đặt nầy không FULL – Xin các bạn cho biết tại sao không hiện ra
HT ? ).
• Nhấp vào Ảnh > Trang Property Inspector gỏ nhập Text thay thế trong
Hộp ALT : Claudia Schiffer > Enter . Ctrl+Z nhiều lần để Undo nhiều bậc
. Ctrl+Y nhiều lần để REDO nhiều bậc.
• Xóa 1 Ảnh : Nhấp lên Ảnh > Phím SpaceBar > Ctrl+z > Ảnh Hiện ra lại.
• Ảnh có thể Cắt – Copy - Paste – như thường thực hiện với TEXT.
Sử Dụng PANEL ASSET
Các Ảnh đã sử dụng đều được liệt kê trong Panel Assets ( Tab Assets kế Tab Files
trong Panel Files ) . Cột Trái Hạng Mục đầu tiên là :
• Images > Nhấp lên > Hiện ra các ảnh trong Site của bạn .
• Chọn 1 Folder ảnh > Tab Assets > Chọn 1 Ảnh > Nhấp Nút Insert đáy File ảnh
> Insert .(Hình 6).
132/146
Đặt tên và lưu trang
1. Sau khi tạo xong Trang Web ( index,html chẳn hạn ) đặt tên cho trang và
lưu trong Folder Web Site.
2. Nên tập thói quen nhấp Phải Tab và Save thường xuyên vì nếu bạn quên động
tác nầy những gì bạn hiệu chỉnh trong Trang Web trở thành công cóc.
3. Cần phân biệt :
◦ Chào mừng các bạn viếng thăm Trang Web của UTBINH : là tiêu đề
Trang . Nó hiển thị trên cùng của màn Hình .
◦ Index.html : Là tên của Trang.
4. Lưu Trang lần đầu tiên :
◦ File > Save As (Ctrl+S) > Desktop > Create New Folder , gỏ :
website Enter > File name gỏ : index.html > Save. Như vậy là bạn
đã tạo 1 Folder Web Site ở Desktop ( Dreamweaver gọi là Site Cục
Bộ ) . Hiện Folder nầy ở trong ỔCứng của bạn ( Cục Bộ ) . Từ xa là
Ở trên Host Server ( Dreamweaver gọi là Site Từ Xa ) . Trong
Folder Web Site nầy chứa Index.html mà bạn vừa tạo .
◦ Dreamweaver cho tên trang mặc định là Unititled-x( x là số trang mà
bạn đã tạo ).
133/146
Thuộc tính của Page (Page Properties)
Mở một trang
1. Trong Panel Files > Tìm Trang muốn mở > Nhấp Đúp nó.
2. Hoặc Menu File > Open > ( Ctrl+O ) > HT Open hiện ra > Chọn File >
Open. (Hình 1)
134/146
3. Nếu muốn mở một Trang mà bạn đã làm việc gần đây > Hạng Mục Open a
Recent Item trong Start Page và nhấp nó.
135/146
Xem trước một trình duyệt
1. Phím F12 > Dreamweaver đòi hỏi bạn phải lưu Trang bạn vừa tạo trước
khi mở xem trước bằng Trình Duyệt . Nó hiện ra HT > Yes. (Hình2+ Hình
3) .
136/146
2. Phím F12 > Mở Trình Duyệt xem trước mặc định . Hoặc : Menu File >
Preview in Browse > Chọn 1 Trình Duyệt > Trang mở ra theo Trình Duyệt
mà bạn đã chọn .(Hình 4).
137/146
Xác lập các trình duyệt trong danh sách Browser
Menu File > Preview in Browse > Edit Browse List > HT Preferences hiện ra >
Thực hiện 1 hoặc nhiều điều sau đây :
138/146
• Thêm 1 Trình Duyệt : Nhấp + > Điền Thông Tin vào HT Add
Browse.(Hình 5).
• Loại bỏ 1 Trình Duyệt : Chọn 1 Trình Duyệt > Nhấp - .
• Chọn 1 Trình Duyệt ưu tiên xem trước > Chọn nó và nhấp Nút Primary
Browse.
• Chọn 1 Trình Duyệt ưu tiên 2 : Nhấp nút Secondary Browse.
Xác lập các thuộc tính trang
Menu Modify > Page Properties > HT page Properties hiện ra > Nhấp Hạng Mục
mà bạn muốn.
1. Chọn mục Apperance
Menu Modify > Page Properties > HT page Properties hiện ra > Mục
Appearance :
◦ Page Font : Chọn 1 Font mặc định của D.
139/146
◦ Size : Chọn kích cở Tuyệt đối là 9,10,12> Được phép chọn tiếp
Đơn vị Tính – Chọn kích cở tương đối là Small , Medium , Large 
◦ Text Color : Chọn màu cho Text.
◦ Background Color : Cho phép bạn Insert vào 1 Ảnh nằm dưới Text >
Nhấp Nút Browse để tìm vị trí ảnh cần Insert vào > Ok. Khi bạn chọn
Ảnh làm nền , nó sẽ thay thế màu nền .
◦ Repeat : Xác lập ảnh nền sẽ hiển thị như thế nào nếu nó không vừa
toàn bộ trang. Chọn Repeat để xếp ngói ảnh theo chiều ngang (
Repeat –x ) và dọc ( Repeat-y ).
◦ Margin : Xác lập lề Phải – Trái – Trên – Dưới của Trang > Chọn
Đơn vị Tính > Ok .(H6+7).( Hình MH số 7 chưa nhập TEXT nên
chưa có tác dụng ).
140/146
2. Chọn hạng mục Link
Menu Modify > Page Properties > HT page Properties hiện ra > Mục LINK .
◦ Link Font : Xác định Font mặc định ( D sẽ sử dụng Foont nầy trừ
khi được ghi đề bởi 1 Style Sheet CSS ) – Xác định In đậm – In
Nghiêng.
141/146
◦ Size : Giống trên.
◦ Link Color : Xác lập màu.
◦ Visited Links : Màu cho Text liên kết được tham quan . Có nghĩa là
sau khi Link được mở ra Text liên kết – Nhấp tiếp vào Liên kết
trong Text nầy ,ra text kế tiếp được xác định sẵn màu .
◦ Rollover Links : Đổi màu khi đặt con trỏ lên.
◦ Active Links : Nhấp Text hiện màu .
◦ Underline Style : Sẽ được gạch dưới.(H8).
142/146
Tham gia đóng góp
Tài liệu: Giáo trình DreamWeaver 8
Biên tập bởi: Trần Việt An
URL: 
Giấy phép: 
Module: Start Page của DreamWeaver 8
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: Cửa sổ tài liệu
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: DreamWeaver 8 Document
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: Status Bar , Property Inspector và Panel
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: Layout - Quản lý các cửa sổ
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: Site cục bộ
Các tác giả: Trần Việt An
URL: 
143/146
Giấy phép: 
Module: Site từ xa
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: FTP , SFTP và Web DAV (1)
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: FTP , SFTP và Web DAV (2)
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: Hiệu chỉnh Site
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: Panel Files trong DreamWeaver 8
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: Panel Files trong DreamWeaver 8 (2)
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: SYNCHRONIZE Đồng Bộ Hóa
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
144/146
Module: Trang trang đầu tiên với DreamWeaver 8
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: Hyperlink - Siêu liên kết
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: Insert Ảnh
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
Module: Thuộc tính của Page (Page Properties)
Các tác giả: Trần Việt An
URL: 
Giấy phép: 
145/146
Chương trình Thư viện Học liệu Mở Việt Nam
Chương trình Thư viện Học liệu Mở Việt Nam (Vietnam Open Educational Resources
– VOER) được hỗ trợ bởi Quỹ Việt Nam. Mục tiêu của chương trình là xây dựng kho
Tài nguyên giáo dục Mở miễn phí của người Việt và cho người Việt, có nội dung phong
phú. Các nội dung đểu tuân thủ Giấy phép Creative Commons Attribution (CC-by) 4.0
do đó các nội dung đều có thể được sử dụng, tái sử dụng và truy nhập miễn phí trước
hết trong trong môi trường giảng dạy, học tập và nghiên cứu sau đó cho toàn xã hội.
Với sự hỗ trợ của Quỹ Việt Nam, Thư viện Học liệu Mở Việt Nam (VOER) đã trở thành
một cổng thông tin chính cho các sinh viên và giảng viên trong và ngoài Việt Nam. Mỗi
ngày có hàng chục nghìn lượt truy cập VOER (www.voer.edu.vn) để nghiên cứu, học
tập và tải tài liệu giảng dạy về. Với hàng chục nghìn module kiến thức từ hàng nghìn
tác giả khác nhau đóng góp, Thư Viện Học liệu Mở Việt Nam là một kho tàng tài liệu
khổng lồ, nội dung phong phú phục vụ cho tất cả các nhu cầu học tập, nghiên cứu của
độc giả.
Nguồn tài liệu mở phong phú có trên VOER có được là do sự chia sẻ tự nguyện của các
tác giả trong và ngoài nước. Quá trình chia sẻ tài liệu trên VOER trở lên dễ dàng như
đếm 1, 2, 3 nhờ vào sức mạnh của nền tảng Hanoi Spring.
Hanoi Spring là một nền tảng công nghệ tiên tiến được thiết kế cho phép công chúng dễ
dàng chia sẻ tài liệu giảng dạy, học tập cũng như chủ động phát triển chương trình giảng
dạy dựa trên khái niệm về học liệu mở (OCW) và tài nguyên giáo dục mở (OER) . Khái
niệm chia sẻ tri thức có tính cách mạng đã được khởi xướng và phát triển tiên phong
bởi Đại học MIT và Đại học Rice Hoa Kỳ trong vòng một thập kỷ qua. Kể từ đó, phong
trào Tài nguyên Giáo dục Mở đã phát triển nhanh chóng, được UNESCO hỗ trợ và được
chấp nhận như một chương trình chính thức ở nhiều nước trên thế giới.
146/146