Giáo trình dreamweaver 8

Start Page của DreamWeaver 8Nguồ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ềmMacromedia trong 1 đĩa tại các cửa hàng Vi Tính.. Nhấp Folder Css

Giáo trình DreamWeaver 8

Biên tập bởi:

Trần Việt An

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ổ

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

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ềmMacromedia trong 1 đĩa ) tại các cửa hàng Vi Tính Bạn đưa danh sách họ sẽ truy lụctrê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ượng67.20 MB , nhấp File Setup.exe ( Hình 2 )

Next > I Accept … > Next > Nhấp chọn Create Shortcut On Desktop > Next > Nhấpchọn Select All > Next > Install > Chạy cài đặt > Finish Trong dia nầy khi cài đặtkhô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ọn 1 trong những tùy chọn sẽ tạo 1 File HTML , Cold Fusion , PHP , ASP VBScript , ASP NET C# , JavaScript , XML , XSLT ( Entire Page ) , CSS , Tạo 1 SiteDreamweaver.

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

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ựchiện thông qua 1 công nghệ gọi là Extensions Extensions là 1 phần mềm nhằm mở rộngnhững tính năng của Dreaweaver

Có thể nhận thêm Extensions của Macromedia Dreaweaver Exchange Khi nhấp vàochữ :Dreamweaver Exchange.( Xem phần Phụ lục cuối quyển sách )

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 )

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

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

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 )

Cửa sổ tài liệu

1 Khi nhấp Shortcut hiện ra Bảng WorkSpace Setup > Chọn Designer > Ok Nếuthay đổ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)

• 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êndưới cột.

Cửa sổ tài liệu

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ùngcửa sổ Bạn nhấp vào 1 Table để chỉnh sửa Bạn có thể Delate Table.(H2)

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)

◦ 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ãyquay về Common > Nút Media ( H9+10)

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

2 NÚT SPLIT : Có cả phần Code và Design Mã nằm phía trên Khung xemWYSIWG ( 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)

• 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ácthực hiện thiết kế Trang Web Bạn có thể xem trên các chế độ : Design – Code– Split.(H4).

• CÁC LOẠI NÚT PHỤ : Chứa mọi thứ , bạn nhấp lên để tìm hiểu thêm Đángchú ý 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

Khi nhấp Phải trong Thanh Document hay Thanh Insert , bạn sẽ thấy có 2 Thanh trongbảng nầy :

1 THANH STYLE RENDERING : Bạn sẽ sử dụng để chuyển đổi giữa 2 StyleRendering 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ứcnăng New – Open – Save – Print – Cut – Copy – Paste bạn có thể tắt thanhInsert và Thanh Document Để mở lại : View > Toolbars > Chọn các thanh

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 < 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ủaThẻ đó 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ổ

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 trongcửa sổ nầy

• Bôi đen chọn AUGUST 3.2006 (H3).

• 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ụngvừa xem , vừa chỉnh sửa (H5).

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

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ấthiệ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 Lines Chỉ xuất hiện khi bạn mở chúng ra ( Menu Windown > Nhấp các

-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 Khungxem là Category và List

◦ 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ể 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áclập Dreamweaver để làm việc theo cách mà bạn mong muốn.

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

2 LAYOUT DUAL SCREEN : (H2).

3 CHỈNH SỬA LAYOUT : Nới Rộng Cửa sổ > Nhấp Nút Tam Giác Nhỏ ở Đáyhay 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

> WorkSpace Layout > Save Current > Nhập đặt tên sau nầy muốn đổi tênkhác , bạn chọn Menu Window > WorkSpace Layout > Manage

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

Mở Layout mặc định Designer (H4)

2 CHIỀU NGANG :

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

3 CHIỀU DỌC :

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ênWeb Server

5 Các Site Động : Khi mở Trang Web amazon.com và thấy các Trang chào đónbạ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)

6 Sách nầy đề cập xây dựng các Site Tỉnh bằng Dreamweaver Bản sao trên WebServer 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

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ộpThoạ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ạngmụ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)

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

4 Nhấp Next (H3)

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ạnnhư ColdFusion , ASP , NET JSP hoặc PHP hay không ? Chọn NO , I do notwant to use a Server Technology > Next (H4).

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 ở đâutrong máy tính ? > Nhấp biểu tượng Browse tìm vị trí lưu ( Ở đây chọn

Desktop ) > Next (H5)

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

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ấpDONE (H7).

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

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

3 Tab Basic > Next> Next > Next hiện ra : How do you connect to your remoteserver 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ếtnối thành công với Web Server của bạn (H3)

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

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)

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:

1 Select a site from the window

Edit enables you to edit an existing site.

For more information, seeEditing settings for a Dreamweaver site

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, seeImporting and exporting sites

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

For more information, seeImporting and exporting sites

3 Click Done to close the dialog box

FTP , SFTP và Web DAV (1)

FTP là gì ?

FTP là File Protocol , là phương pháp thông thường để truyền các Files giữa 2 máy tínhđược kết nối Internet.Web Server chạy 1 chương trình SERVER FTP ngoài phần mềmWeb Server

• Bạn cần 1 Software gọi là FTP Client trên máy tính ( Cute FTP chẳng hạn ) đểchuyển các Files lên Server FTP

• Dreamweaver cũng có sẵn FTP Client Một trong những khuyết điểm của FTP

là : Nó là 1 giao thức không có sự bảo mật cài sẵn Tất cả thông tin đều bị lộ ra

rõ ràng : Tên người dùng – Password – và chính các Files

FTP hoặc file transfer protocol thường được dùng để trao đổi hồ sơ qua mạng lưới truyềnthông dùng giao thứcTCP/IP(chẳng hạn nhưInternet- mạng ngoại bộ - hoặcintranet-mạng nội bộ) Hoạt động của FTP cần có hai máy tính, mộtmáy chủvà mộtmáy khách).Máy chủ FTP, dùng chạy phần mềm cung cấp dịch vụ FTP, gọi là trình chủ, lắng ngheyêu cầu về dịch vụ của các máy tính khác trên mạng lưới Máy khách chạy phần mềmFTP dành cho người sử dụng dịch vụ, gọi là trình khách, thì khởi đầu một liên kết vớimáy chủ Một khi hai máy đã liên kết với nhau, máy khách có thể xử lý một số thao tác

về tập tin, như tải tập tin lên máy chủ, tải tập tin từ máy chủ xuống máy của mình, đổitên của tập tin, hoặc xóa tập tin ở máy chủ v.v Vì giao thức FTP là một giao thức chuẩncông khai, cho nên bất cứ một công typhần mềmnào, hay một lập trình viên nào cũng

có thể viết trình chủ FTP hoặc trình khách FTP Hầu như bất cứ một nền tảng hệ điềuhành máy tính nào cũng hỗ trợ giao thức FTP Điều này cho phép tất cả các máy tính kếtnối với một mạng lưới có nền TCP/IP, xử lý tập tin trên một máy tính khác trên cùngmột mạng lưới với mình, bất kể máy tính ấy dùnghệ điều hànhnào (nếu các máy tính ấyđều cho phép sự truy cập của các máy tính khác, dùng giao thức FTP) Hiện nay trên thịtrường có rất nhiều các trình khách và trình chủ FTP, và phần đông các trình ứng dụngnày cho phép người dùng được

Bộ giao thức TCP/IP Tầng Các giao thức Ứng dụngDNS, ENRP, FTP, HTTP, IMAP,IRC, NNTP, POP3, SIP, SMTP, SNMP, SSH, TELNET, BitTorrent, … PhiênASAP,SMB, …Giao vậnSCTP, TCP,UDP,DCCP, IL, RTP, RUDP, …MạngIPv4,IPv6, …Liên kếtEthernet,Wi-Fi,Token ring,MPLS,PPP, …

trên cổng 21 Đường kết nối trên cổng 21 này tạo nên một dòng truyền điều khiển, chophép các dòng lệnh được chuyển qua trình chủ FTP Để truyền tải tập tin qua lại giữahai máy, chúng ta cần phải có một kết nối khác Tùy thuộc vào chế độ truyền tải được sử

dụng, trình khách (ở chế độ năng động - active mode) hoặc trình chủ (ở chế độ bị động

- passive mode) đều có thể lắng nghe yêu cầu kết nối đến từ đầu kia của mình Trong

trường hợp kết nối ở chế độ năng động, (trình chủ kết nối với trình khách để truyền tải

dữ liệu) , trình chủ phải trước tiên đóng kết vào cổng 20, trước khi liên lạc và kết nối vớitrình khách Trong chế độ bị động, hạn chế này được giải tỏa, và việc đóng kết trước làmột việc không cần phải làm

Trong khi dữ liệu được truyền tải quadòng dữ liệu, dòng điều khiển đứng im Tình trạngnày gây ra một số vấn đề, đặc biệt khi số lượng dữ liệu đòi hỏi được truyền tải là một sốlượng lớn, và đường truyền tải chạy thông qua nhữngbức tường lửa Bức tường lửa làdụng cụ thường tự động ngắt các phiên giao dịch sau một thời gian dài im lặng Tuy tậptin có thể được truyền tải qua hoàn thiện, song dòng điều khiển do bị bức tường lửa ngắtmạch truyền thông giữa quãng, gây ra báo lỗi

Mục đích của giao thức FTP

Mục đích của giao thức FTP, như được phác thảo trong bảnRFC, là:

1 Khuyến khích việc dùng chung tập tin (như chương trình ứng dụng vi tính hoặc

4 Truyền tải dữ liệu một cách đáng tin cậy và có hiệu quả cao