Bài giảng Dreamweaver

76 trang hapham 2640

Download

Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Dreamweaver", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

bai_giang_dreamweaver.ppt

Nội dung text: Bài giảng Dreamweaver

DREAMWEAVER
I. GIỚI THIỆU 1. Dreamweaver MX là một công cụ thiết kế web chuyên nghiệp, phần cốt lõi của nó là HTML 2. Dreamweaver MX là một công cụ trực quan, trong đó có thể bổ sung Javascrip, biểu mẫu, bảng biểu và nhiều loại đối tượng khác mà không cần viết một đoạn mã nào 3. Dreamweaver MX có thể thiết kế bằng chế độ Design view hoặc Code view hoặc Code and Design
II. CÀI ĐẶT 1. Dreamweaver MX 2004 là một chương trình trong bộ Macromedia MX, bạn nên cài đặt trên máy trọn bộ Macromedia MX 2. Sau khi cài đặt, khởi động Draemvaerver MX: Start→ Programs→ Macromedia → Macromedia Dreamweaver MX 2004
III. MÀN HÌNH DREAMWEAVER 1. Insert Bar: Gồm các chức năng tiện ích dùng để chèn các đối tượng vào trang web a) Common: Chèn các đối tượng: Image, Flash, Date, Template, b) Layout: Chứa các công cụ trình bày trang, gồm 3 chế độ: Standard, Expended, Layout c) Forms: Chứa các công cụ tạo Form d) Text: Dùng định dạng văn bản e) HTML: chứa các công cụ tạo trang web bằng code view
2. Document Toolbar: Chứa các nút cho phép xem trang web ở dạng Design hay dạng Code a) Show code view: Xem dạng trang HTML b) Show Design view: Xem trang dạng thiết kế, sử dụng các công cụ của Dreamwerver c) Show code and design view: Chia cửa sổ làm 2 phần: phần trên dạng code view, phần dưới dạng Design view d) Title: tiêu đề của trang Web e) Preview/Debug in Browser:Xem kết quả trang web thông qua trình duyệt web f) Document Window: Cửa sổ dùng để tạo và hiệu chỉnh trang Web
3. Properties Inspector: Hiển thị các thuộc tính của các đối tượng đang được chọn, đồng thời cho phép chỉnh sửa các thuộc tính đó 4. Panel groups: nhóm các Panel cho phép quản lý các đối tượng trong trang Web a) Bật / tắt các thanh Panel: Chọn menu Window → Chọn thanh Panel tương ứng b) Mở rộng các thanh Panel: Click vào mũi tên ở góc trái của mỗi Panel 5. Status bar: Thanh trạng thái, nằm dưới đáy của Document Window, hiển thị Tag Selector, Window size, Document size và Download time.
a) Tag Selector: Hiển thị các tag HTML tại vị trí hiện hành của con trỏ b) Document size and Download time: Kích cở ước chừng của tài liệu và thời gian tải tài liệu xuống c) Window size: Hiển thị kích thước hiện tại của tài liệu, được tính bằng Pixel. Khi định kích thước của trang web phải tính đến việc sao cho an toàn đối với mọi độ phân giải.
IV. KẾ HOẠCH THIẾT KẾ MỘT WEBSITE 1. Các yêu cầu cơ bản khi thiết kế website: a) Xác định yêu cầu và mục đích của Website b) Chuẩn bị nội dung cho các trang c) Phác thảo khuôn mẫu (Template) cho trang, thường các trang có cùng chủ đề thì sử dụng chung một template d) Xác định cấu trúc của Website, có 3 kiểu cấu trúc: – Tuyến tính – Phân cấp – Hình chóp Tuỳ theo mục đích của Website mà chọn kiểu phù hợp
2. Khi thiết kế Website cần lưu ý 2 vấn đề: a) Nội dung chủ đề chính, từ đó chọn bố cục, hệ màu cho tương ứng, (ví dụ: Website thương mại phải sáng sủa, rõ ràng về bố cục, ) sau đó thu thập đầy đủ tài liệu, phân nhóm theo nội dung, từ đó quyết định cần bao nhiêu trang, nội dung của từng trang b) Chọn hình ảnh, logo, Banner, hệ thống nút liên kết, ảnh minh hoạ, ảnh bố cục, ảnh trang trí Phác hoạ sơ đồ liên kết trên giấy để thấy rỏ mối liên kết giữa các trang đơn trong một website Một số kiểu liên kết giữa các trang:
V. TẠO WEBSITE BẰNG DREAMWEAVER 1. Cách tạo một Website mới: Trong Document Window, chọn Site→ Manage sites →New → Site→ xuất hiện hộp thoại Site Definition → Chọn Tab Advance, trong mục Local info: a) Site name: đặt tên WebSite b) Local Root Folder: Khai báo đường dẫn của folder lưu trữ Website trên ổ đĩa cứng bằng cách – Nhập đường dẫn hoặc – Click vào biểu tượng Folder, Chỉ đường dẫn đến folder lưu website c) Default Images folder: khai báo đường dẫn đến thư mục chứa các hình ảnh của Website, thư mục này phải nằm trong Local root Folder đã khai báo ở trên, tât cả các hình ảnh trong trang web mặc định được lưu trong thư mục này
a) Refresh Local file list Automatically: Nếu chọn Dreamweaver tự động cập nhật cấu trúc file trong bảng Local Folder của Site Panel, việc cập nhật này sẽ sử dụng một ít tài nguyên của hệ thống, ta có thể cập nhật khi cần bằng cách chọn View → Refresh Local files trong Site Window b) HTTP Address: Nhập địa chỉ của site, để quản lý site và liên kết các file trong site c) Enable Cache: khi được chọn, Dreamweaver tạo một file lưu trữ các thông tin về link giữa các file trong site. Sau khi chọn xong Click OK→ Click Done để hoàn tất công việc tạo site mới
2. Kiểm tra website đã tạo: Một website sau khi tạo thành công thì trong site panel phải có nhánh thư mục như sau trong đó các biểu tượng file/folder có màu xanh
3. Mở một site đã tạo: Cách 1: Click vào menu hiển thị tên Site trên Toolbar của Site Panel, chọn tên Site muốn mở Cách 2: Chọn menu Site→ Manage Sites → Chọn tên Site muốn mở → Done 4. Hiệu chỉnh Site: – Chọn menu Site→ Manage Sites – Chọn tên Site cần hiệu chỉnh → Click nút Edit – Xuất hiện hộp thoại Site Definition→ thực hiện hiệu chỉnh → OK → Done
Tạo một Site mới Hiệu chỉnh Site Tạo một Site mới giống site đang chọn Xoá Site Xuất thông tin một Site ra tập tin .ste Dẫn nhập thư mục, tập tin vào Site
VI. THIẾT KẾ TRANG WEB ĐƠN – Tại màn hình khởi động chọn Create new → HTML – Xuất hiện Document Window, đây là nơi thiết kế trình bày nội dung của từng trang web đơn, sau khi thiết kế xong mỗi trang trang web được lưu dưới dạng một tập tin có phần mở rộng mặc định là .HTM (hoặc .HTML) trong thư mục HTML đã được khai báo trong mục Local Root Folder
VII. LIÊN KẾT CÁC TRANG WEB ĐƠN 1. Cách tạo: – Để tạo liên kết, cần phân biệt trang nguồn và trang đích. – Trang nguồn: chứa các nút liên kết – Trang đích là trang cần liên kết đến – Mở trang nguồn →Chọn nút liên kết – Trong Properties Inspector, tại mục link, thực hiện một trong hai cách sau: – Cách 1: Click nút kéo mũi tên chỉ đến tên tập tin cần liên kết trong Site Panel – Cách 2: Click nút mở hộp thoại Select File
 Look in: Chọn tên Site  File name: Chọn tên trang Web cần liên kết đến 2. Kiểm tra liên kết: File→ Check Page→Check link – Check links for entire Site: kiểm tra liên kết cho tất cả các trang trong site – Check links for Selected files /folders in Site: kiểm tra nhóm tập tin/ thư mục được chọn trong Site 3. Xem kết quả bằng trình duyệt và hiệu chỉnh – Chọn File / Preview in Browser / iexplore – Hoặc Click nút Preview /Debug in Browser
I. KẾT NỐI VÀ ĐƯA WEBSITE LÊN WEB SERVER 1. Cách thực hiện: – Cần phải lưu lại tất cả các tập tin trước khi xuất bản Website. Xuất bản Website là chép thư mục gốc (root) của Site lên Server của các nhà cung cấp dịch vụ Internet (ISP). – Trong Macromedia Dremwearver MX 2004, xuất bản Website cần có bước kết nối với Server trước rồi mới Put File lên sau  Kết nối với Remote Site:Nếu khi tạo Site mới ta chưa xác định Remote Site (Thư mục chứa Site trên Server), nên sau khi click Put File sẽ xuất hiện thông báo yêu cầu kết nối với Remote Site
– Chọn Yes, Xuất hiện hộp thoại Site Definition – Chọn mục Remote Info, trong khung Access, chọn Local/ Network (giả lập một thư mục trên mạng cục bộ, hoặc trên một thư mục khác của ổ đĩa cứng) – Tại mục Remote Folder, Click biểu tượng Folder, để tìm thư mục mới chứa Site  Xuất bản Site lên Remote Site: – Trong Site Panel, chọn lại tên Site cần xuất bản – Click nút Put File – Xuất hiện hộp thoại: Are you sure you wish to put the entire site? Click OK – Xuất hiện hộp thoại kết nối, các tập tin và thư mục của Site lần lượt được chép từ site lên Remote Site
2. Kiểm tra lại trên Remote Site – Click nút Expand trong Site Panel: Màn hình chia làm 2 phần: Bên trái là Remote Site, Bên phải là Local Site
VIII. SITE MAP 1. GIỚI THIỆU: Site map là một sơ đồ cấu trúc WebSite, nó hiển thị vị trí và sự phân cấp của các tập tin trong WebSite. Một WebSite khi được tạo đầy đủ liên kết, có thể xem dưới dạng Site map Cần phải định nghĩa trang HomePage trước hoặc trong Site phải có trang Index.htm 2. Xem một Site Map: – Trong Site Panel, chọn Map view trong khung Site view
3. Tạo liên kết trong Site Map:Có thể tạo liên kết trang một cách trực quan và đơn giản bằng cách sử dụng Site Map. Cách tạo: a) Chỉ định đường dẫn đến trang home page – Tạo Site mới trong đó phải có trang Index.htm hoặc Home Page – Chọn Site→ Manage Sites→ Click nút Edit – Xuất hiện cửa sổ Definition→ Chọn Site Map Layout – Home Page: đường dẫn đến tập tin Index→ OK→Done
b) Tạo liên kết bằng SiteMap – Click nút Expand/Collapse để mở rộng Site Panel – Click chọn nút SiteMap – Màn hình xuất hiện trang Index.htm trong site
◼ Tạo liên kết phân cấp: – Click phải trên file Index → chọn Link to new File →Xuất hiện hộp thoại Link to New File:  File Name: Nhập tên file  Title: tiêu đề của trang  Text of Link: dòng text để liên kết Liên kết đến File mới Liên kết đến File đã
◼ Tạo liên kết nhanh: – Chọn tập tin cần tạo liên kết – Click biểu tượng liên kết bên cạnh tập tin được chọn – Kéo mũi tên liên kết đến tập tin liên kết đến
CHƯƠNG IX ĐỊNH DẠNG VĂN BẢN- SỬ DỤNG CSS TRONG DREAMWEAVER
I. ĐỊNH DẠNG VĂN BẢN 1. Cách nhập giống như các trình soạn thảo văn bản khác: – Ngắt đoạn: Enter – Xuống dòng trong cùng một đoạn: Shift + Enter. 2. Sử dụng thanh công cụ Properties Inspector để hiệu chỉnh văn bản, bằng cách đánh dấu khối văn bản → chọn kiểu định dạng
3. Định dạng font chữ: Cách 1:Tại mục format Chọn các heading, đây là các định dạng mẫu, bao gồm Font chữ, kiểu chữ, size, thường dùng làm tiêu đề Cách 2: chọn nhóm Font chữ: – Chọn văn bản: 1. Chọn nhóm Font trên Font menu của Properties Inspector 2. Hoặc chọn menu Text → Font. Trong Dreamweaver, kiểu Font chữ được định thành từng nhóm, mỗi nhóm gồm nhiều font, một Font chính và các Font dự phòng. Có thể tạo ra các nhóm Font tuỳ ý bằng cách tại muc Font→ Chọn Edit Font List
❖ Font size: Chọn khối văn bản: – Trong mục Size của Properties Inspector – Hoặc chọn Text→ Size. Size chữ trong Dreamweaver gồm 17 Size, trong đó có 8 mức thể hiện bằng số, từ 9 đến 36 và 9 mức thể hiện bằng chữ 1. Font Color: – Chọn khối văn bản, Click nút Text Color trong properties inspector→ chọn màu – Hoặc chọn Text→ Color
Click chọn màu 4. Canh lề đoạn văn bản – Chọn Text → Align hoặc Click công cụ
5. Danh sách dạng liệt kê: ❖ Tạo danh sách dạng liệt kê:Chọn Text→ List – Unordered List: Chèn Bulletted đầu dòng – Ordered List: Đánh số thứ tự đầu dòng – Definition list: Danh sách định nghĩa ❖ Thay đổi thuộc tính liệt kê: – Đặt dấu nháy trong danh sách liệt kê – Chọn Text→ List→ Properties – Hoặc click nút List Item trong thanh properties
– List Type: Chọn kiểu danh sách (Bullets hoặc Numbered) – Start count: Số bắt dầu cho danh sách liệt kê ❖ List item: – New Style: liệt kê nhiều cấp – Reset count to: số bắt đầu cho danh sách con
II. SỬ DỤNG CSS 1. GIỚI THIỆU: – Dreamweaver cung cấp công cụ để tạo style một cách đơn giản và nhanh chóng – CSS (Cascading Style Sheets) cũng là một dạng HTML Style. Nhưng phong phú hơn về thuộc tính và ứng dụng. Một CSS không những tập hợp các định dạng, mà còn có thể giúp định vị, viền khung, đặt màu nền – CSS có thể đính kèm trong trang hoặc lưu riêng thành một tập tin kiểu CSS phục vụ cùng lúc cho nhiều trang
2. Tạo CSS cục bộ: Style được tạo trong trang hiện hành a) Cách tạo: – Chọn Text →CSS Styles→ New →Xuất hiện hộp thoại New CSS Style: – Hoặc Window→ CSS Style, mở CSS Panel, Click nút New CSS rule Cilck nút New CSS rule
❖ Selector type: chọn loại CSS ❖ Define in: Chọn This document only: Tạo style (dạng internal style), sử dụng trong trang hiện hành
❖ Có 3 loại style: – Class: Style dạng lớp • Name : Nhập tên lớp, bắt đầu bằng dấu (.) – Tag: Định nghĩa tag • Tag: Chọn tên tag – Advanced: Định dạng các tag riêng biệt • Selector: Nhập #IDName (bắt đầu bằng dấu #) – Chọn xong,Click OK → Cửa sổ CSS Style definition : • Khung category: Chọn nhóm định dạng • Khung style: chọn các định dạng
Chọn xong,Click Apply → OK Trong CSS Panel xuất hiện Style vừa tạo
b) Cách sử dụng Style cục bộ: – Chọn nội dung văn bản cần định dạng – Trong CSS Style Panel, chọn tên CSS – Hoặc chọn tên style trong Properties inspector – Nếu loại tag định dạng riêng biệt thì đối tượng sử dụng style phải có tên định danh ID
3. Tạo một tập tin CSS: Tập tin kiểu .CSS là một tập tin phụ trợ cho webSite, nằm trong thư mục root của Site a) Cách tạo: – Text→ CSS Styles→ New – Trong hộp thoại New CSS Style – Selector Type: Chọn loại style – Define in: Chọn New Style Sheet file→ OK – Hộp thoại yêu cầu lưu tập tin CSS, có phần mở rộng .CSS – Cửa sổ CSS Style definition : • Khung category: Chọn nhóm định dạng • Khung style: chọn các định dạng giống style cục bộ
Chọn xong,Click Apply → OK Trong CSS Panel xuất hiện tập tin Style vừa tạo
b) Áp dụng CSS từ tập tin CSS: – Mở trang HTML cần sử dụng tập tin CSS – Chọn Text→ CSS Style→ Attach Style Sheet. – Hoặc Click nút Attach Style Sheet trong Style Panel. – Chọn tập tin CSS cần kết nối, Click nút Browse – Link: Chỉ liên kết với tập tin CSS để sử dụng – Import : Chép tập tin CSS vào trang
4. Hiệu chỉnh một CSS: – Click phải trện tên CSS trong CSS Style Panel – Chọn Edit, thực hiện hiệu chỉnh 5. Xoá một CSS Styles: Khi xoá một CSS Style thì những nội dung áp dụng CSS Style bị xoá sẽ trở về trạng thái ban đầu – Chọn CSS Style cần xoá – Click nút Delete CSS Style trong CSS Style Panel – Hoặc Click chuột phải, chọn Delete
Attach Style Sheet Delete Style New Style Sheet
CHƯƠNG X HÌNH ẢNH VÀ LIÊN KẾT TRANG TRONG DREAMWEAVER
III. HÌNH ẢNH VÀ LIÊN KẾT TRANG TRONG DREAMWEAVER 1. Chèn ảnh vào trang: a) Ảnh trong thư mục Images của Site: – Đặt dấu nháy tại vị trí cần chèn ảnh – Drag chuột kéo tập tin ảnh trong Site Panel thả vào trang b) Ảnh ngoài Site: – Chọn Insert → Image – Xuất hiện hộp thoại Select Image Source – Chọn tập tin ảnh cần chèn→OK
2. Hiệu chỉnh thuộc tính của ảnh: – Chọn ảnh đã chèn – Window→ Properties – Image: tên ảnh – W (Width), H (Height): Độ rộng và chiều cao của ảnh, tính bằng Pixel – Src: đường dẫn tương đối đến tập tin ảnh – Alt: câu thông báo xuất hiện trên trình duyệt khi rê chuột vào ảnh
– Link: Địa chỉ URL nơi cần liên kết đến – Edit: Chuyển qua Macromedia Fire Works hiệu chỉnh ảnh – Crop: Cắt xén ảnh – Brightness/Contrast: Chỉnh độ sáng tối của ảnh – Sharpen: Chỉnh độ sắc nét cho ảnh – Resample:Lưu lại kích thước đã điều chỉnh – Optimize in Fireworks: chuyển qua Macromedia FireWoks để hiệu chỉnh
– Map : bảng đồ liên kết ảnh – VSpace, Hspace: Khoảng cách trên, dưới, trái, phải giữa phần nội dung văn bản đến ảnh – Target: Khung chứa trang liên kết đến – Low Src: tên tập tin ảnh phụ có độ phân giải thấp, làm ảnh thay thế khi chờ hiển thị ảnh chính trên trình duyệt – Border: đường viền ảnh – Align: canh lề trái, phải, giữa
3. Chèn khung ảnh: – Trong thiết kế, nhiều lúc cần dự phòng trước cho ảnh trang trí, nhưng chưa có ảnh thích hợp, ta có thể chèn trước một khung ảnh với kích thước xác định để giữ chổ – Chọn Insert→Image Objects→ Image Placeholder – Xuất hiện hộp thoại Image Placeholder – Nhập tên, kích thước, màu cho khung ảnh
3. Chèn ảnh vào khung ảnh: – Double click vào khung cần chèn ảnh – Xuất hiện hộp thoại Select Image Source, chọn tập tin ảnh cần chèn vào khung 4. Insert Rollover Image: Khi đưa chuột vào hình sẽ đổi sang hình khác a) Insert → Image Objects→Rollover Image, Xuất hiện hộp thoại Rolloveer Image
– Original Image: ảnh gốc – Rollover Image: ảnh khi rê chuột vào 5. Chèn Flash: – Insert → Media → Flash – Chọn tập tin kiểu .swf – Tại vị trí chèn xuất hiện biểu tượng Flahs ❖ Hiệu chỉnh thuộc tính của Flash: chọn hình flash→ hiệu chỉnh thuộc tính trong thanh properties inspector
6. Ảnh nền trang – Ảnh nền là ảnhh tự động lợp đầy trang Web. Khi thiết kế, bạn nên chọn những mẫu nền thật nhạt, chữ sậm hoặc nền thật sậm, chữ màu sáng – Ảnh nền với số Kb càng nhỏ thì trang hiển thị càng nhanh 7. Cách tạo ảnh nền: – Đặt trỏ trong trang – chọn Modify→Page Properties – Bacground Images : nhập đường dẫn đến tập tin ảnh làm nền – Repeat: Chọn kiểu lặp
8. Tạo Web Photo album: – Chức năng: Tạo bộ sưu tập các hình ảnh hay cuốn Album giúp người sử dụng quản lý và chọn xem từng hình một cách nhanh nhất – Cách tạo: Để thực hiện chức năng này cần phải cài đặt Macromedia Fireworks và một thư mục chứa các hình photo • Chọn Commands → Create Web Photo album • Xuất hiện hộp thoại Create Web Photo Album • Nhập các thông số→ click OK, chờ kết quả, xuất hiện thông báo Album đã được tạo. • Trong Site Panel xuất hiện thêm các folder:
– Folder Thumbnail: chứa các file JPG – Folder Page chứa các file .HTM cho mỗi Image tương ứng (trang con) – Tập tin Index.htm trong Folder chứa Website, đây là tập tin Album chính – Mở tập tin Index.htm và di chuyển giữa các trang bằng các Hyperlink: Next Previous, Home
9. Tạo Library Item: a) Khái niệm: Library chứa các thành phần của trang như hình ảnh, văn bản có nhu cầu sử dụng lại hoặc cần cập nhật thường xuyên. Các thành phần này gọi là Library Items. b) Cách tạo: Trong Assets Panel, Click nút Library, Chọn thành phần muốn tạo Library Item và thực hiện một trong các cách sau – Drag chuột kéo thành phần được chọn thả vào khung Library→ Đặt tên – Click nút New Library Item và đặt tên – Chọn Modify → Library→ Add Object to Library và đặt tên
c) Nhập Library Item vào trang mới: – Đặt dấu nháy vào nơi muốn nhập Library Item – Kéo Library Item từ Assets Panel thả vào document Window d) Hiệu chỉnh Library Item: – Chọn Library Item trong khung Library→Edit – Xuất hiện hộp thoại cho phép hiệu chỉnh library Item – Click Save→ cập nhật tất cả trang Web có sử dụng Library trong site – Có thể cập nhật bằng cách chọn Modify→ Library→ Update pages: cập nhật tất cả những trang có sử dụng Library Item
a) Tách Library Item trong Document khỏi Library: – Chọn Library Item trong trang Web hiện hành – Click nút Detach from Original trên Properties Inspector f) Tạo lại Library Item bằng một library đang sử dụng trong trang – Có thể dùng một Library trong trang để tạo lại một Library Item, nếu Library Item bị mất – Chọn Library trên trang Web hiện hành – Click nút Recreate trên Properties Inspector
IV. LIÊN KẾT TRANG TRONG DREAMWEAVER 1. Giới thiệu: Một liên kết nối từ trang nguồn đến trang đích gồm 2 thành phần: – Đối tượng được chọn làm nút liên kết:Text, Image,Button. Trong Dreamweaver cung cấp thêm một số đối tượng đặc biệt làm nút liên kết như Flash Text, Flash Button, Navigation bar, Rollover Images – Địa chỉ URL của trang cần liên kết đến3 loại liên kết • Liên kết nội • Liên kết ngoại • Liên kết Email
2. Các dạng liên kết: a) Dạng liên kết vòng:Là dạng liên kết nối đuôi nhau, trang1 liên kết đến trang 2, trang n liên kết đến trang 1, đảm bảo người xem có thể xem tất cả các trang, nhưng bất lợi là phải duyệt hết một vòng. a) Dạng liên kết đầy đủ: Tại mổi trang đều tạo liên kết đầy đủ đến tất cả các trang còn lại, đây là dạng liên kết trong site có độ phân cấp thấp
a) Dạng liên kết cây phân cấp:Trong các Site lớn, mức độ quan trong của từng trang được phân cấp theo từng mức, với trang gốc là trang chủ, mức 1 là nhóm chủ đề chính, mức 2 là nhóm chủ đề con, mức 3 là trang chứa các thông tin chi tiết, Ở dạng này tồn tại liên kết giữa các trang cùng mức (Same Level), liên kết về mức trên (Parent Level), liên kết về mức dưới (Child level).
d) Liên kết tiện nghi: Ngoài các dạng liên kết trên, để thuận tiện cho người xem khi lật trang, có thể tạo thêm một số liên kết phụ, như liên kết đến điểm dừng (Bookmark) e) Liên kết trang chủ: Trang chủ thường chứa các nút liên kết đến các trang con, do đó cần phải tạo liề kết từ trang con trở về trang chủ
3. Cách tạo: – Mở trang nguồn – Chọn Insert → Hyperlink • Text: nội dung văn bản làm nút liên kết • Link: Địa chỉ URL của trang cần liên kết đến • Target: Khung chứa trang đích • Title: Câu ghi chú khi chuột chạm vào nút • Access Key: Khi xem trang, nhấn tổ hợp phím Alt + Ký tự nhập để chọn nút và nhấn Enter để liên kết. • Tab Index: trình tự chọn nút khi nhấn phím Tab
4. Liên kết điểm dừng (Named Anchor) a) Tạo liên kết điểm dừng cùng trang: Đối với các trang Web dài, hoặc trang có nhiều mục, thì nên tạo các điểm dừng. Cách tạo gồm 2 bước: ❖ Đặt tên cho điểm dừng: Trong Document window, đặt dấu nháy tại vị trí sẽ làm điểm dừng 1. Chọn Insert → Named Anchor (Ctrl+Alt+A) hoặc Click nút Insert Named Anchor trong bảng Common của thanh Insert 2. Trong hộp thoại Insert Anchor: Nhập tên cho Anchor (không thừa khoảng trắng, không có ký tự lạ)
❖ Tạo liên kết điểm dừng: ◼ Trong Document Windows, chọn một đoạn văn bản hoặc một hình để tạo link đến điểm dừng ◼ Nếu điểm dừng nằm cùng trang thì tại ô link nhập #tên Anchor b) Tạo liên kết điểm dừng của trang khác: Thao tác tạo liên kết đến điểm dừng ở trang khác giống như liên kết đến trang khác, nhưng tại mục link phải chỉ ra điểm dừng nào. Theo cấu trúc: #
5. Hiệu chỉnh liên kết: – Chọn nút liên kết cần thay đổi – Chọn menu Modify→ Change Link – Hộp thoại Select file cho phép chọn tập tin trang cần liên kết đến – Nếu biết rõ tập tin liên kết mới thì có thể nhập trực tiếp trong ô link của Properties Inspector 6. Xoá liên kết – Chọn nút muốn loại bỏ liên kết – Chọn Modify→ Remove Link. Hoặc xoá tên trang liên kết trong ô link của Properties Inspector
7. Bản đồ ảnh liên kết : – Khi chọn ảnh làm liên kết, thì có một số ảnh kích thước lớn, thường chia nhỏ ảnh đó ra thành nhiều vùng mỗi vùng liên kết đến một trang Web khác, dạng này gọi là bản đồ ảnh liên kết. ❖ Những thuận tiện khi sử dụng bản đồ ảnh liên kết: – Giúp tạo nhanh các liên kết – Hình ảnh trực quan, dễ liên tưởng đến trang tương ứng. – Giúp bố cục các liên kết nhanh, không chiếm nhiều khu vực nút trên trang Web
a) Cách tạo: – Chèn ảnh vào trang, click chọn ảnh – Trong Properties inspector, hiển thị công cụ Map – Chọn công cụ muốn chia vùng – Drag chuột quanh phần trên hình mà ta muốn chia vùng để tạo liên kết – Trong Properties inspector, tại mục link, nhập địa chỉ của trang cần liên kết đến
b) Hiệu chỉnh bản đồ liên kết: – Di chuyển vùng liên kết – Click chọn công cụ để chọn vùng cần di chuyển – Drag chuột kéo đến vị trí mới c) Thay đổi kích thước vùng liên kết – Chọn vùng liên kết – Click vào một trong các nút chọn của vùng liên kết – Drag chuột để thay đổi kích thước d) Xoá vùng liên kết – Chọn vùng liên kết – Nhấn Delete
8. Chèn nút biến đổi hình: Trước hết phải có 2 tập tin ảnh, n1.gif màu cam, n2.gif màu xanh trong folder Images của Site – Đặt dấu nháy tại vị trí cần chèn nút động – Chọn Insert → Image Objects→ Rollover Image. Hộp thoại Insert Rollover Image: • Image Name: Nhập tên ảnh • Original Image: tên tập tin ảnh gốc đại diện khi hiển thị (ví dụ n1.gif) • Rollover Image : tên tập tin ảnh hiển thị khi rê chuột vào (ví dụ n2.gif ) • Alternate Text: câu ghi chú kèm theo • When Click, go to URL: Địa chỉ của trang liên kết đến
9. Chèn hệ thống nút biến đổi hình: – Dreamweaver có thể giúp bạn cùng một lúc chèn vào cả một hệ thống nút biến hình – Chọn Insert→ Image Objects→ Navigation bar
10. Chèn nút Flash: ◼ Macromedia Dreamweaver và Macromedia Flash là một bộ chương trình có thể sử dụng dữ liệu qua lại với nhau rất thuận tiện, do đó có thể dùng các nút Flash được thiết kế sẳn để làm nút liên kết trong Dreamweaver ◼ Cách tạo: Chọn Insert→Media→ Flash Button – Sample: Ví dụ mẫu nút Flash – Style: danh sách tên các nút mẫu Flash – Button Text: văn bản trên nút Flash – Font: kiểu chữ, Size: Cở chữ – Link: Địa chỉ liên kết đến – Target: Tên khung trang liên kết – Bg: Màu nền
11. Chèn nút Flash Text: – Insert → Media → Flash Text – Hộp thoại Insert Flash Text, nhập vào các thông số: • Font, Size: Font và cở chữ • Color: màu chữ • Rollover Color: Màu chữ thay đổi chi rê chuột qua nút • Text : Nội dung văn bản làm nút • Link: Địa chỉ trang Web liên kết đến • Target: Tên khung trang • Bg Color: màu nền của văn bản nút