giáo trình dreamweaver 8

giáo trình dreamweaver 8 tài liệu, giáo án, bài giảng , luận văn, luận án, đồ án, bài tập lớn về tất cả các lĩnh vực kin...

Trần Việt An

Tài liệu này và việc biên tập nội dung có bản quyền thuộc về Trần Việt An Tài liệu này tuân thủ theo giấy phépCreative Commons Attribution 3.0 (http://creativecommons.org/licenses/by/3.0/).

Tài liệu được hiệu đính ngày: January 11, 2011

Ngày tạo PDF: January 11, 2011

Để biết thông tin về đóng góp cho các module có trong tài liệu này, xem tr 156

1 Start Page của DreamWeaver 8 1

2 Cửa sổ tài liệu 11

3 DreamWeaver 8 Document 19

4 Status Bar , Property Inspector và Panel 25

5 Layout - Quản lý các cửa sổ 43

6 Site cục bộ 51

7 Site từ xa 59

8 FTP , SFTP và Web DAV (1) 67

9 FTP , SFTP và Web DAV (2) 75

10 Hiệu chỉnh Site 89

11 Panel Files trong DreamWeaver 8 93

12 Panel Files trong DreamWeaver 8 (2) 101

13 SYNCHRONIZE Đồng Bộ Hóa 105

14 Trang trang đầu tiên với DreamWeaver 8 109

15 Hyperlink - Siêu liên kết 125

16 Insert Ảnh 139

17 Thuộc tính của Page (Page Properties) 147

Chỉ mục 155

Tham gia đóng góp 156

iv

Start Page của DreamWeaver 81

1.1 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

2 CHƯƠNG 1 START PAGE CỦA DREAMWEAVER 8

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ácgiả đã hiệu chỉnh sẵn

Ra Desktop > Nhấp Shortcut > Chọn Designer > Ok ( Hình 3 )

Hình 1.3

1.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 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ầybạn có thể chọn nội dung của các Folder khác

4 CHƯƠNG 1 START PAGE CỦA DREAMWEAVER 8

Hình 1.6

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ếnbằng cách sử dụng Breeze Web ( Hình7 )

6 CHƯƠNG 1 START PAGE CỦA DREAMWEAVER 8

Hình 1.7

Nhấp lên : Learn About Documentation Resources : Hiển thị tài liệu trực tuyến ( Hình 8 )

Hình 1.8

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 CHƯƠNG 1 START PAGE CỦA DREAMWEAVER 8

Hình 1.9

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 )

Hình 1.10

10 CHƯƠNG 1 START PAGE CỦA DREAMWEAVER 8

Cửa sổ tài liệu1

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ọingười dùng Window đều chọn Designer LayOut (H1)

1 Phiên bản trực tuyện của nội dung này có ở <http://vocw.vn/content/m33993/1.1/>.

11

12 CHƯƠNG 2 CỬA SỔ TÀI LIỆU

Hình 2.1

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

2.1 Cửa sổ tài liệu

Hình 2.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ênkết với ảnh (H3)

14 CHƯƠNG 2 CỬA SỔ TÀI LIỆU

16 CHƯƠNG 2 CỬA SỔ TÀI LIỆU

Hình 2.9

Hình 2.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 > Nhấp Phải > Cho phép bạn chọn lựa để thêmnhững đối tượng thường được sử dụng nhiều nhất (H11)

Hình 2.11

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

Hình 2.12

18 CHƯƠNG 2 CỬA SỔ TÀI LIỆU

DreamWeaver 8 Document1

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áilàm xáo trộn màn hình không trở về Standard được Bạn vô Menu Help > Dreamweaver Help > Nhập ViewStandard > Cột Trái chọn Swithching from Standard To LayOut Mode ( H1)

Hình 3.1

Trở về giao diện chương trình : Menu View > Table Mode > Standard Mode Nếu không thấy ThanhCô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 )

1 Phiên bản trực tuyện của nội dung này có ở <http://vocw.vn/content/m33999/1.1/>.

19

20 CHƯƠNG 3 DREAMWEAVER 8 DOCUMENT

Hình 3.2

2 NÚT SPLIT : Có cả phần Code và Design Mã nằm phía trên Khung xem WYSIWG ( What YouSee 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ểuthiết kế Rê thanh giữa để nới rộng và thu hẹp 2 phần nầy.(H3)

Hình 3.3

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

22 CHƯƠNG 3 DREAMWEAVER 8 DOCUMENT

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ạnchỉ muốn xem Khung màn Hình mặc định (H6)

Hình 3.6

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

24 CHƯƠNG 3 DREAMWEAVER 8 DOCUMENT

Status Bar , Property Inspector và

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

1 Phiên bản trực tuyện của nội dung này có ở <http://vocw.vn/content/m34000/1.1/>.

25

26 CHƯƠNG 4 STATUS BAR , PROPERTY INSPECTOR VÀ PANEL

Hình 4.1

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ểnthị ( 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ìnhduyệ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ọnEdit Sizes từ Menu bật lên H2)

Hình 4.2

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

28 CHƯƠNG 4 STATUS BAR , PROPERTY INSPECTOR VÀ PANEL

Hình 4.3

• Bôi đen chữ THURSDAY (H4)

Hình 4.4

• 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ỉnhsửa (H5)

30 CHƯƠNG 4 STATUS BAR , PROPERTY INSPECTOR VÀ PANEL

Hình 4.5

• Nhấp Tam giác nầy để thu hẹp hay mở rộng Inspector (H6)

Hình 4.6

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

32 CHƯƠNG 4 STATUS BAR , PROPERTY INSPECTOR VÀ PANEL

Hình 4.7

2 Không xuất hiện các Panel : Frames – History – Results – Code Inspector - Time Lines Chỉ xuất hiệnkhi bạn mở chúng ra ( Menu Windown > Nhấp các panel liệt kê trên ) (H8)

Hình 4.8

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)

34 CHƯƠNG 4 STATUS BAR , PROPERTY INSPECTOR VÀ PANEL

Hình 4.9

• Khung xem Category : Nhấp Tag <p> > Tab Attributes : Có 2 Khung xem là Category và List

• Xem Category (H10 )

Hình 4.10

• Xem List ( H11 )

36 CHƯƠNG 4 STATUS BAR , PROPERTY INSPECTOR VÀ PANEL

Hình 4.11

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

38 CHƯƠNG 4 STATUS BAR , PROPERTY INSPECTOR VÀ PANEL

Hình 4.12

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)

40 CHƯƠNG 4 STATUS BAR , PROPERTY INSPECTOR VÀ PANEL

Hình 4.13

• Nhấp Tab Layers > Nút Panel Options > Group Layer with Panel khác Có thể chọn trong Menubật ra hoặc tạo New Panel Group (H14).

Hình 4.14

• Đó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àmviệc theo cách mà bạn mong muốn

42 CHƯƠNG 4 STATUS BAR , PROPERTY INSPECTOR VÀ PANEL

Layout - Quản lý các cửa sổ1

5.1 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 đầubằng cách : Menu Window > WorkSpace Layout > Designer (H1)

1 Phiên bản trực tuyện của nội dung này có ở <http://vocw.vn/content/m34001/1.1/>.

43

44 CHƯƠNG 5 LAYOUT - QUẢN LÝ CÁC CỬA SỔ

Hình 5.1

2 LAYOUT DUAL SCREEN : (H2)

Hình 5.2

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ặcPhím F 4 ( H3)

46 CHƯƠNG 5 LAYOUT - QUẢN LÝ CÁC CỬA SỔ

Hình 5.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 > WorkSpaceLayout > Manage

5.2 Quản lý các cửa sổ

1 XẾP TẦNG :Mở Layout mặc định Designer (H4)

Hình 5.4

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ếptầ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)

48 CHƯƠNG 5 LAYOUT - QUẢN LÝ CÁC CỬA SỔ

Hình 5.5

2 CHIỀU NGANG :Mở Layout mặc định > Window > Title Horizontally > ra cửa sổ tài liệu xếp ngóitheo chiều ngang với khoảng trống tách đều (H6)

Hình 5.6

3 CHIỀU DỌC :Mở Layout mặc định > Window > Title Vertically > Các cửa sổ xếp ngói theo chiềudọc với khoảng trống có sẵn dược tách đều giữa chúng.(H7)

50 CHƯƠNG 5 LAYOUT - QUẢN LÝ CÁC CỬA SỔ

Hình 5.7

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

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)

1 Phiên bản trực tuyện của nội dung này có ở <http://vocw.vn/content/m34003/1.1/>.

51

52 CHƯƠNG 6 SITE CỤC BỘ

Hình 6.1

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 2Site nầy

6.2 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ẫndắ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áctù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

6.3 Tạo Site cục bộ

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

Hình 6.2

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à http://www.pixel.mu2

4 Nhấp Next (H3)

2 http://www.pixel.mu/

54 CHƯƠNG 6 SITE CỤC BỘ

Hình 6.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 (H4)

Hình 6.4

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ùngmặ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 Browsetìm vị trí lưu ( Ở đây chọn Desktop ) > Next (H5)

56 CHƯƠNG 6 SITE CỤC BỘ

Hình 6.5

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

Hình 6.6

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)

58 CHƯƠNG 6 SITE CỤC BỘ

Hình 6.7

• 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

7.2 Định nghĩa Site từ xa bằng FPT hoặc SFPT

1 Menu Site > Manage Sites > Pixel Site > Edit (H1)

1 Phiên bản trực tuyện của nội dung này có ở <http://vocw.vn/content/m34004/1.1/>.

59

60 CHƯƠNG 7 SITE TỪ XA

Hình 7.1

2 Nếu trước đó đã sử dụng HT Site Definition nầy , nó vẫn giữ xác lập trước đó (H2)

• 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

2 http://www.freewebtown.com/

62 CHƯƠNG 7 SITE TỪ XA

Server của bạn (H3)

Hình 7.3

4 Next > Chọn mặc định > Next (H4)

Hình 7.4

5 Bảng SUMMARY xuất hiện với thông tin mà bạn đã nhập cho các Site Cục bộ và Site Từ Xa > Done (H5)

64 CHƯƠNG 7 SITE TỪ XA

Hình 7.5

6 Ra bảng Manage Sites Giải thích sử dụng Bảng nầy : Setting the Manage Sites dialog box

options

The purpose of this dialog box is to let you create a new site, edit a site, duplicate a site, remove a

site, or import or export a site

To create, edit, or delete a site:

a Select a site from the window

b Click a button to select one of the options: New enables you to create a new site

For more information, see Setting up a new Dreamweaver site3

3 http://vocw.vn/content/m34004/latest/mk:@MSITStore:C:%5CProgram%20Files%5CMacromedia%5CDreamweaver%208%5CHelp%5Cdw8help.chm::/03_site4.htm#wp89375

Edit enables you to edit an existing site.

For more information, see Editing settings for a Dreamweaver site4

Duplicate creates a copy of the site you selected

The copy appears in the site list window

Remove deletes the selected site

Dreamweaver alerts you that you cannot undo this action

Export enables you to save the exported site as an XML file

For more information, see Importing and exporting sites5

Import enables you to select an XML file for a site to import

For more information, see Importing and exporting sites6

c Click Done to close the dialog box

4 http://vocw.vn/content/m34004/latest/mk:@MSITStore:C:%5CProgram%20Files%5CMacromedia%5CDreamweaver%208%5CHelp%5Cdw8help.chm::/03_site9.htm#wp88800

5 http://vocw.vn/content/m34004/latest/mk:@MSITStore:C:%5CProgram%20Files%5CMacromedia%5CDreamweaver%208%5CHelp%5Cdw8help.chm::/05_sit34.htm#wp72558

6 http://vocw.vn/content/m34004/latest/mk:@MSITStore:C:%5CProgram%20Files%5CMacromedia%5CDreamweaver%208%5CHelp%5Cdw8help.chm::/05_sit34.htm#wp72558