Giáo trình thiết kế web bằng dreamweaver

1



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

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
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 ).
3

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.
4

• 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 ).
(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 ).





















5

• 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 ).

6


• 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 )


1

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).
2



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
(
H
5
)
.

3

• 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).

4

• 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).



1


DREAWEAVER 8
SITE CỤC BỘ





BÀI 6 NGÀY 4.8.2006 SOẠN THEO SÁCH KS TRẦN VIỆT AN

I.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.(H0).
























2

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 .

II.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.

III.TẠO SITE CỤC BỘ

1. Cột Giữa Create New > Dreamweaver Site . (H1).

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 (H2).















3

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 . (H3).

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 . (H4).

4

7. Chọn NONE .Vì bạn chỉ tạo Site Cục Bộ > Next . (H5).

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 .
(H6).


1

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).

2

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).

3

• 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).

4

• 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).


5


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).

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 ).
6


















• 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).

7

• 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).


• Đó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.






1

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.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).

2

2. LAYOUT DUAL SCREEN : (H2).

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).
























3

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 .

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).

4

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).

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).

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.