Hướng dẫn sủ dụng Dreamweaver
CĂN BẢN VỀ DREAMWEAVER 4.0 A.TỔNG QUAN VỀ MACROMEDIA DREAMWEAVER 4.0 Dreamweaver chương trình Visual Editor chuyên nghiệp để tạo quản lý trang web Dreamweaver cung cấp công cụ phác thảo trang web cao cấp, hỗ trợ tính DHTML (Dynamic HTML) mà khơng cần viết dịng lệnh giúp bạn khơng biết lập trình web thiết kế trang web động cách dễ dàng, trực quan.Với Dreamweaver bạn dễ dàng nhúng sản phẩm chương trình thiết kế web khác Flash, Fireworks, Shockwave, Generator, Authorwave vv Với Dreamweaver bạn quản lý Local Remote site giúp cho việc quản lý trang web site cục website điều khiển từ xa đồng Ngồi Dreamweaver cịn cho phép bạn chỉnh sửa trực tiếp HTML.Với Quick Tag Editor bạn nhanh chóng bổ sung xóa bỏ HTML mà khơng cần thoát khỏi cửa sổ tài liệu.Chế độ soạn thảo trang web HTML giúp bạn thiết kế trang trực tiếp ngơn ngữ HTML Dreamweaver cịn hổ trợ HTML Styles Cascading Style Sheet giúp bạn định dạng trang web nhằm tăng tính hấp dẫn duyệt trang web Vùng làm việc chương trình Deamweaver linh động dễ sử dụng gồm thành phần sau: Document, Launcher, Object Palette, Property Inspector, Floating Palette context menu(menu ngữ cảnh) để mở thành phần bạn vào menu Window-> chọn tên thành phần cần hiển thị Document Macromedia Dreamweaver 4.0 Mediaspace Club #1 + Launcher: có chứa nút để mở đóng Inspector Palette dùng thường xuyên nhất.Bạn truy cập Launcher Mini Launcher góc phải cửa sổ Document + Object Palette: có chứa nút để tạo đối tượng khác hình ảnh, table, lớp vv + Propery inspector: hiển thị thuộc tính đối tượng Text chọn,và cho phép bạn chỉnh sửa thuộc tính + Floating Palette: Floating Palette neo cố định nhằm giúp bạn kết hợp với nhiều cửa sổ di động, Inspector Palette thành nhiều cửa sổ đính nhãn Object Palette vv + Context menu: menu ngữ cảnh giúp bạn nhanh chóng truy cập vào mục chọn Object Palette có chứa đối tượng dùng thường xuyên như: Common Panel, Forms Panel, Frames Panel, Characters Panel, Head Panel, Invisibles Panel, Special Panel ================================================================ B LÀM VIỆC VỚI VĂN BẢN Đặt trỏ vị trí muốn nhập văn cửa sổ tài liệu (Document) sau nhập liệu vào Để nhập văn có tiếng việt bạn cài đặt tham chiếu Font sau (Hiện phiên 4.0 chưa hổ trợ Font Unicode): a) Cài đặt tham chiếu Fonts / Encoding Sử dụng tham chiếu Fonts/Encoding để cài đặt việc tạo mã font mặc định dành cho trang tài liệu cài đặt font mà Dreamweaver dùng để hiển thị chế độ tạo mã font Việc tạo mã cho tài liệu (trang web) xác định cách mà trang web hiển thị trình duyệt Chọn Edit->Preferences, chọn chế độ tạo mã từ select box Default Encoding Chế độ tạo mã mặc định lưu lúc với tài liệu thẻ chèn đầu tài liệu Ví dụ bạn định Western(Latin1) thẻ phát sinh bên source code ngôn ngữ HTML : Để định font dùng cho US English tất thứ tiếng Tây Âu chọn Western Để cài đặt font cho thứ tiếng Châu Á chọn Japanese Macromedia Dreamweaver 4.0 Mediaspace Club #2 Hãy chọn kiểu tạo mã chẳng hạn Western (Latin 1) Japaness từ Font Settings Tại Proportional Font chọn font kích thước hiển thị soạn thảo trang web (ví dụ: Times New Roman, size=12pt) + Fixed Font font mà Dreamweaver dùng nhằm hiển thị văn bên thẻ ,, + HTML/Code Inspector font dùng cho tất text (văn bản) bên HTML Source Inspector + Tại hộp thoại Property Inspector select box Default font chọn Edit font list chọn menu Text->Font->Edit Font list xuất hộp thoại sau: + Tại Available Fonts chọn fonts tiếng việt thường dùng (ví dụ font VNI-Times vntime) sau Click nút Properties Lưu ý:Trong lúc định dạng văn bạn sử dụng hộp Property Inspector bạn sử dụng menu Text để định dạng văn có chức mà hộp thuộc tính Property Inspector khơng xây dựng sẵn cho bạn (ví dụ văn gạch dưới,gạch ngang bạn sử dụng chế độ thiết kế web ngôn ngữ HTML để thiết kế thêm thuộc tính cần thiết (ví dụ bạn muốn văn đựoc canhNế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: Macromedia Dreamweaver 4.0 Mediaspace Club #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 ngồi 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 Macromedia Dreamweaver 4.0 Mediaspace Club #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 đuờ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: Macromedia Dreamweaver 4.0 Mediaspace Club #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 vng(Rectangular Hotpot Tool), tròn (Oval Hotpot Tool) hay (Polygon Hotpot Tool)trên hộp Property Inspector hình ảnh Macromedia Dreamweaver 4.0 Mediaspace Club #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 khơng có 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 Macromedia Dreamweaver 4.0 Mediaspace Club #8 + Tạ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 Macromedia Dreamweaver 4.0 Mediaspace Club #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ẽ Macromedia Dreamweaver 4.0 Mediaspace Club #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 ngồi 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 Macromedia Dreamweaver 4.0 Mediaspace Club #11 Để chỉnh sửa Table Cell bạn cị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 Macromedia Dreamweaver 4.0 Mediaspace Club #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 liệ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 · Macromedia Dreamweaver 4.0 Mediaspace Club #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 ln 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 Biên soạn: Nguyễn Phú Tài ( nptai@yahoo.com ) Huu Thanh Design (huuthanh@50g.com ) Macromedia Dreamweaver 4.0 Mediaspace Club #14 ... đườ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 đuờng dẫn. .. ứng chọn Macromedia Dreamweaver 4.0 Mediaspace Club #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... bạn sử dụng hộp Property Inspector bạn sử dụng menu Text để định dạng văn có chức mà hộp thuộc tính Property Inspector khơng xây dựng sẵn cho bạn (ví dụ văn gạch dưới,gạch ngang bạn sử dụng chế
