Giới thiệu tổng quan về Dream Weaver

Nếu bạn thao tác với Bullets hay Numbering bạn Click nút List Item Property Inspector để cài đặt số thông số sau: Vietebooks #4 + Chọn kiểu List Type Bullet hay Numbering, chọn kiểu Style Nếu bạn thao tác với numbering bạn cho số tăng từ Start Count Tại Reset Count to bạn nhập vào giá trị số trở (thường 1) Để chế độ thiết kế trang web ngôn ngữ HTML bạn click nút < > show code Inspector (hoặc show HTML) Mini-Launcher góc phải hình c) Tạo siêu liên kết (Hyperlink) cho văn bản: Với Dreamweaver bạn có nhiều cách để tạo siêu liên kết đến trang web khác tập tin tài liệu, hình ảnh, âm (Sound), Phim(Video) chương trình tải xuống (Download) Thường có loại siêu liên kết sau: Internal Link :Liên kết đến tài liệu Website (Local Site) External Link :Liên kết tài liệu bên Local website (ví dụ link tới WebServer khác Internet, FTP Server khác Internet, Telnet Server, News Server vv ) E-mail Link :tạo siêu liên kết cho phép người sử dụng gởi Email Link to Name Anchors (còn gọi Bookmark) :Tạo siêu liên kết nhảy đến vị trí trang web hành Nguyên tắc chung bạn tạo siêu liên kết cho văn bản(text), hình ảnh(image), Hotpot đồ hình ảnh(hotpot of Image map): chọn văn hình ảnh Hotpot muốn tạo siêu liên kết sau click nút Browse For file (tạo Internal Link) hộp thuộc tính Property Inspector đối tượng tương ứng chọn Vietebooks #5 Khi bạn đường dẫn tới trang web bạn thấy địa trang web địa URL hình vẽ Tại hộp link hộp Property Inspector xuất đường dẫn tập tin bạn liên kết tới theo kiểu cục bộ(trên đóa cứng ) bạn save lại có tên bạn có kiểu đường dẫn tương đối Bạn nên lưu trang web lại trước tạo siêu liên kết để không thông báo nhắc nhở tạo siêu liên kết Sử dụng đường dẫn cục bạn chưa lưu trang web trước tạo Hyperlink Sử dụng đøng dẫn kiểu tương đối Bạn định Target cho siêu liên kết (nơi hiển thị nội dung trang web click vào) Ta có loại Target sau: • _bank :nội dung trang web cửa sổ (New Window) • _parent:nội dung trang cha • _self:nội dung trang hành • _top:nội dung toàn trang (Whole page) Chú ý: Nếu bạn tạo External link tới Web Server,FTP Server,News Server vv bạn không cần Click nút Browse For File mà nhập vào địa Server (máy chủ) mà bạn muốn liên kết tới Ví dụ: http://www.mediaspace.250x.com/ , ftp:// www.mediaspace.250x.com/,vv Tạo siêu liên kết để Reply Email:( nptai@yahoo.com, huuthanh@50g.com ) + Hãy Click nút Insert Email Link bạn thấy hộp thoại sau: + Tại hộp thoại Text nhập vào chuổi hiển thị + Tại hộp E-mail:hãy nhập vào địa Email muốn gởi đến C LÀM VIỆC VỚI CÁC HÌNH ẢNH: Vietebooks #6 Với Dreamweaver bạn chèn hình GIF JPG vào trang web định ảnh cho trang web ảnh cho lớp (Layer) Để chèn hình ảnh vào trang web: đặt trỏ vị trí muốn chèn ảnh,chọn menu Insert -> Images Click nút Insert Image hộp Object Pallete sau đường dẫn đến hình ảnh mà bạn muốn chèn vào Sau chèn ảnh vào đươc trang Web bạn Click chuột chọn ảnh để xuất hộp thuộc tính Property Inspector để định nghóa thuộc tính hình ảnh Để định soạn thảo ảnh bên (External Image Editor) bạn nhấp nút Edit bạn vào menu Edit->Preferences chọn External Editor Trong hộp Extensions chọn kiểu ảnh mà bạn muốn chỉnh sửa bạn Click dấu (+) để thêm kiểu ảnh mà bạn muốn chỉnh sửa, nhấp nút (+) bên Editors sau bạn đường dẫn đến tập tin chương trình soạn thảo ảnh(ví dụ photoshop.exe) Tạo đồ hình ảnh (Image Map / Hotpot): Hãy chọn ảnh sau chọn công cụ vẽ Hotpot vuông(Rectangular Hotpot Tool), tròn (Oval Hotpot Tool) hay (Polygon Hotpot Tool)trên hộp Property Inspector hình ảnh Vietebooks #7 sau vẽ tọa độ ảnh mà bạn muốn tạo có siêu liên kết xuất hộp thuộc tính Hotpot hình vẽ Hãy Click nút Browse For File để đường dẫn đến tập tin cần Link tới, bạn muốn tạo External Link nhãy nhập địa Webserver hay FTP Server hộp Link Nhập vào thích điểm Hotpot mouse di chuyển qua Alt Bạn định Target cho nội dung siêu liên kết (tham khảo loại Target phần trên) Trong lúc thao tác với Hotpot bạn dùng biểu tượng mũi tên để chọn Hotpot để di chuyển hay thay đổi kích thước tọa độ điểm siêu liên kết Chú ý:Nếu bạn sử dụng nhiều đồ hình ảnh trang Web bạn phải đồ phải có tên nhất.Bạn đặt tên đồ hộp Textbox Map Tạo Rollover Image: Rollover Image hình ảnh thay đổi mouse di chuyển qua nó.Một Rollover chứa hình ảnh: + Ảnh sơ cấp (Primary Image) :là hình ảnh hiển thị trang load + Ảnh đảo (Rollover Image) : ảnh xuất mouse di chuyển ảnh sơ cấp Chú ý : bạn tạo Rollover hai hình ảnh phải có kích thước giống nhau, hình kích thước giống Dreamweaver tự động định lại kích thước hình ảnh thứ hai để kết với tính chất hình ảnh thứ Cách tạo: + Hãy đặt trỏ vị trí muốn chèn Rollover + Chọn Insert->Rollover Image (Dreamweaver 3.0) Insert -> Interactive Image -> Rollover Image(Dreamweaver 4.0) từ menu Insert Click nút Insert Rollover Image Object Palette, bạn thấy xuất hộp thoại sau: + Tại Original Image Click nút Browse để tìm ảnh gốc (Primary Image) + Tại Rollover Image Click nút Browse để tìm ảnh đảo (Rollover Image) + Hãy chọn Preload Rollover Image bạn muốn Dreamweaver tải trước hình ảnh Rollover vào cache duyệt để tăng nhanh tốc độ load trang web Vietebooks #8 + Taïi When Click, Go To URL Click nút Browse để tìm tập tin muốn tạo siêu liên kết nhập vào địa URL textbox Tạo Navigation Bar: Bạn tạo Navigation bar theo chiều ngang chiều đứng cách chọn mục Insert -> Navigation Bar Click nút Insert Navigation Bar hộp Object Pallette xuất hộp thoại sau: + Trong trường Element Name nhập vào tên phần tử Navigation bar + Tại Up Image nhấp Browse đường dẫn đến hình ảnh hiển thị ban đầu (ví dụ a1.gif) + Tại Over Image nhấp Browse đường dẫn đến hình ảnh hiển thị mouse di chuyển qua ảnh (ví dụ a2.gif) + Tại Down Image nhấp Browse đường dẫn đến hình ảnh hiển thị mouse Click vào ảnh (ví dụ a2.gif ,hoặc bạn thiết kế thêm ảnh a3.gif) + Tại Over While Down Image nhấp Browse đường dẫn đến hình ảnh hiển thị mouse Click vào ảnh lúc di chuyển trỏ lên hình ảnh (bạn không cần thiết kế trạng thái này) + Tại When Clicked,Go to URL Click nút Browse để đường dẫn đến tập tin mà mà bạn muốn Link tới nhập vào địa External URL mà bạn muốn Link tới Vietebooks #9 + Hãy chọn tùy chọn Preload Image.Nếu bạn không chọn tùy chọn tạo chậm trễ mouse Over qua ảnh + Show down Image Initially :Hiển thị ảnh trạng thái nhấn mouse trang vừa tải xuống + Hãy chọn kiểu Navigation bar nằm dọc hay ngang Insert + Hãy chọn Use Tables để chèn phần tử Navigation bar Table + Hãy nhấp nút + để thêm phần tử Navigation click nút - để loại bỏ phần tử Navigation chọn + Để xếp phần tử bạn Click nút mũi tên lên hay xuống * Lưu ý: Bạn chèn Navigation Bar trang Web Sau tạo xong Navigation Bar muốn chỉnh sửa lại bạn chọn Menu Modify > Navigation =================================================================== D LÀM VIỆC VỚI TABLE Table công cụ thiết kế Web nhằm xếp liệu hình ảnh trang HTML.Với Dreamweaver bạn dễ dàng chuyển đổi thiết kế Table thiết kế Lớp Cả Table lớp cho phép bạn điều khiển vị trí phần tử trang Web lớp không hổ trợ trình duyệt từ 3.0 trước Chèn Table : Để chèn Table bạn chọn menu Insert -> Table Click nút Insert Table Object Palette bạn thấy hộp thuộc tính Table sau: + Trong hộp Rows nhập vào số hàng Table + Trong hộp Columns nhập vào số cột Table + Trong hộp Cell Padding định khoảng cách từ Text so với cạnh Table + Trong hộp Cell Spacing nhập vào khoảng cách Cell + Trong hộp Width nhập vào chiều rộng Table dạng số Pixel dạng tỷ lệ phần trăm cử sổ trình duyệt + Trong hộp Border nhập vào đường viền Table ,nếu bạn muốn Table dạng lưới bạn nhập vào giá trị Định dạng Table: Để định dạng Table bạn di chuyển Mouse vào cạnh sau cho xuất hình mũi tên đầu sau Click chọn Table bạn thấy xuất hộp thuộc tính Table hình vẽ Vietebooks #10 Định dạng Cell: Để định dạng cell bạn Drag chọn Cell muốn định dạng bạn thấy xuất hộp thuộc tính Cell sau: Chú ý: Khi bạn định dạng Cell thuộc tính Cell hộp thuộc tính bạn chọn Cell muốn định dạng cách Drag mouse chọn sau Click phím phải chuột vào Cell chọn sau chọn menu Table chọn lệnh thích hợp menu Vietebooks #11 Để chỉnh sửa Table Cell bạn chọn menu Modify -> Table bạn thấy menu hình Định dạng Table theo mẫu cho trước (Preset Design) Cell Cell Cell Cell Cell Cell Cell Cell Cell Chọn bảng sau chọn menu Command->Format Table bạn thấy xuất nhiều mẫu table cho sẵn bạn chọn mẫu Vietebooks #12 Trong hộp hội thoại xuất bạn chọn kiểu Table bên danh sách bên trái bạn thay đổi thuộc tính tùy chọn cho Table Sắp xếp lieäu cho Table: Columm Columm Columm3 C 300 B 200 A 100 • Chọn Table sau chọn menu Command->Sort Table bạn thấy hộp thoại sau đây: • Chọn cột để phân loại Sort By Tại Order chọn kiểu xếp theo Alphabe hay theo số chọn kiểu xếp tăng dần Ascending hay giảm dần Descending • Vietebooks #13 Để thực việc xếp thứ cấp cột khác định tùy chọn phân loại menu Then by • Tùy chọn Sort Include First Row cho phép bạn xếp dòng đầu mà thường tiêu đề Table không di chuyển,bạn đừng chọn option Table có tiêu đề Chèn Table Table: Một Table nằm Table khác, nhiên chiều rộng bị giới hạn chiều rộng ô qua xuất • Để thực bạn làm sau: + Đầu tiên bạn chèn vào trang Web Table menu Insert->Table Click nút Insert Table hộp Object.Hãy đặt vị trí trỏ ô mà bạn muốn có Table thứ chọn Insert->Table Nguyễn Phú Tài ( nptai@yahoo.com ) Biên soạn: Huu Thanh Design (huuthanh@50g.com ) huuthanh@50g.com Vietebooks #14 ... thước giống Dreamweaver tự động định lại kích thước hình ảnh thứ hai để kết với tính chất hình ảnh thứ Cách tạo: + Hãy đặt trỏ vị trí muốn chèn Rollover + Chọn Insert->Rollover Image (Dreamweaver... thước hiển thị soạn thảo trang web (ví dụ: Times New Roman, size=12pt) + Fixed Font laø font maø Dreamweaver dùng nhằm hiển thị văn bên thẻ ,, + HTML/Code Inspector font dùng cho tất... (hoặc show HTML) Mini-Launcher góc phải hình c) Tạo siêu liên kết (Hyperlink) cho văn bản: Với Dreamweaver bạn có nhiều cách để tạo siêu liên kết đến trang web khác tập tin tài liệu, hình ảnh,

Định dạng
Số trang	14
Dung lượng	382,8 KB