Hướng dẫn sử dụng Macromedia Dreamweaver 8

BÀI 1 NGÀY 19.7.2006 SOẠN THEO KS
TRẦN VIỆT AN .
CHƯƠNG TRÌNH DREAMWEAVER 8 LÀ MỘT CHƯƠNG TRÌNH THIẾT KẾ WEB , MẠNH ,
GIÀU TÍNH NĂNG ,CHUYÊN NGHIỆP , DỄ SỬ DỤNG VÀ THÔNG DỤNG NHẤT HIỆN NAY ,
KHÔNG CẦN PHẢI BIẾT NHIỀU VỀ HTML , JAVASCRIPT . ĐÂY LÀ PHIÊN BẢN MỚI
NHẤT CÙNG VỚI CÁC TÍNH NĂNG HAY CỦA CHƯƠNG TRÌNH GIÚP CÁC BẠN THAM
KHẢO VÀ ÁP DỤNG VÀO CÔNG VIỆC HỌC VÀ THỰC HÀNH THIẾT KẾ CÁC TRANG
WEB .
CÓ MỘT HỌC GIẢ NÓI RẰNG : MÌNH MUỐN HỌC CÁI GÌ THÌ DẠY CHO NGƯỜI HỌC CÁI
ĐÓ. Ở ĐÂY UTBINH KHÔNG DÁM DẠY CHO CÁC BẠN MÀ LÀ CHIA SẺ CÁC BÀI BIÊN
SOẠN TỰ HỌC VỚI CÁC BẠN ĐỂ CÙNG NHAU HỌC HỎI RÚT KINH NGHIỆM DO ĐÓ SẼ
CÓ NHIỀU ĐOẠN NGÂY NGÔ , ẤU TRỈ ĐỐI VỚI CÁC BẠN VỐN RÀNH RẼ NHƯNG VỚI
PHONG CÁCH CỐ HỮU CHI TIẾT VÀ DÀI DÒNG MONG SẼ GIÚP ĐƯỢC CÁC BẠN TÌM
HIỂU VÀ THỰC HÀNH CHƯƠNG TRÌNH THIẾT KẾ WEB
RẤT HAY NẦY. Và điều cuối cùng là utbinh mong đón nhận được các ý kiến phản hồi để utbinh sửa
chữa những khiếm khuyết giúp cho giáo án nầy dược hoàn hảo.
I.NGUỒN CUNG CẤP TÀI LIỆU :
1. Mua dỉa Macromedia _AIO _ V2 ( AIO là All In One gồm nhiều Phần mềm
Macromedia trong 1 dỉ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.
( Hình 0 ).
2. utbinh tham khảo sách DREAWEAVER 8 của tác giả KS Trần Việt An , xuất bản
4.2006 : Sách viết rất chi tiết , rõ ràng , mạch lạc , dễ hiểu cho người tự học . tự tìm
1
hiểu như utbinh khi viết các bài Tutorials đều dựa theo sách nầy và trực quan trên
máy vi tính. Mua sách tại cửa hàng Nhà Sách Quỳnh Mai ( Giảm 30% ) : 478 Nguyễn Thị
- Minh Khai ,Quận 3 , ĐT 8888183-8304393 , giá 60 ngàn.
II.CÀI ĐẶT :
1. Mở Dỉ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 1 ).
2. 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.
3. Ra Desktop > Nhấp Shortcut > Chọn Designer > Ok . ( Hình 2 ).
III. MÔ TẢ GIAO DIỆN : START PAGE
1. 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.
2. CREATE NEW :
• 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 .
( Hình 3 ).
2
3. 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.
( Hình 4 )
4. 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
3
nhấp vào chữ :Dreamweaver Exchange.( Xem phần Phụ lục cuối quyển sách ).
(Hình 5 ).
5. 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ình 6 ).
4
• Nhấp lên : Learn About Documentation Resources : Hiển thị tài liệu trực
tuyến .( Hình 7 ).
• Nhấp lên : Find Authorized Training mở Trang Web cung cấp các tài nguyên
đào tạo . ( Hình 8 ).
5
• Nếu không thích mở giao diện START PAGE nầy nhấp lên : Don`t Show Again.
( Hình 9 )
6
DREAMWEAVER 8
BÀI 2 NGÀY 23.7.2006
Sách KS TRẦN VIỆT AN
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).
2. 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.
I.CỬA SỔ TÀI LIỆU : THí dụ Chọn HTML
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).
7
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).
8
• 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).
• 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).
9
• 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 >
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).
10
DREAMWEAVER 8
DOCUMENT
Bài 3 NGÀY 25.7.2006KS TRẦN VIỆT AN
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 ( HO).
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.
I.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.( H1 ).
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
11
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.
(H2)
3. 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.(H3).
12
4. 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. ( H4 )
5. TITTLE : Nhập Tiêu đề Trang.
II.CÁC THANH CÔNG CỤ KHÁC :
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 (H5).
2. 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.
13
DREAMWEAVER 8

STATUS BAR
PROPERTY INSPECTOR
PANEL
BÀI 4 NGÀY 3.8.2006 SOẠN THEO SÁCH KS TRẦN
VIỆT AN
I. 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 < body > 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).
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).
14
II.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 .
• Bôi đen chọn AUGUST 3.2006 . (H3).
15
• Bôi đen chữ THURSDAY . (H4).
• 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).
16
• Nhấp Tam giác nầy để thu hẹp hay mở rộng Inspector . (H6).
III.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).
2. Không xuất hiện các Panel : Frames – History – Results – Code Inspector - Time
17
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).
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).
• Khung xem Category : Nhấp Tag <p> > Tab Attributes : Có 2 Khung xem là
Category và List .
• Xem Category . (H10 ).
18
• Xem List ( H11 )
• 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).
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).
• Nhấp Tab Layers > Nút Panel Options > Group Layer with Panel khác .Có thể
19
chọn trong Menu bật ra hoặc tạo New Panel Group. (H14).
• Đó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.
20

LAYOUT
QUẢN LÝ CÁC CỬA SỔ
BÀI 5 NGÀY 3.8.2006 SOẠN THEO SÁCH KS TRẦN VIỆT AN
I.LAY OUT :
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).
2. LAYOUT DUAL SCREEN : (H2).
21
3. CHỈNN 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).
4. Bạn thiết lập theo cách bạn mong muốn , sau đó Save bằng cách Menu Window >
22
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 .
II.QUẢN LÝ CÁC CỬA SỔ :
1. XẾP TẦNG :
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).
2.
23
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).
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).
24
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.
25