- Macromedia Dreamweaver 4.0 Mediaspace Club #1.
- A.TỔNG QUAN VỀ MACROMEDIA DREAMWEAVER 4.0.
- Dreamweaver là một chương trình Visual Editor chuyên nghiệp để tạo và quản lý các trang web.
- Dreamweaver cung cấp các công cụ phác thảo trang web cao cấp, hỗ trợ các tính năng DHTML (Dynamic HTML) mà không cần viết các dòng lệnh giúp các bạn không biết lập trình web cũng có thể thiết kế được các trang web động một cách dễ dàng, trực quan.Với Dreamweaver bạn có thể dễ dàng nhúng các sản phẩm của các chương trình thiết kế web khác như Flash, Fireworks, Shockwave, Generator, Authorwave vv....
- Với Dreamweaver bạn có thể quản lý các Local và Remote site giúp cho việc quản lý các trang web trong các site cục bộ và các website điều khiển từ xa có thể đồng bộ..
- Ngoài ra Dreamweaver còn cho phép bạn chỉnh sửa trực tiếp HTML.Với Quick Tag Editor bạn có thể nhanh chóng bổ sung hoặc xóa bỏ một HTML mà không cần thoát khỏi cửa sổ tài liệu.Chế độ soạn thảo trang web bằng HTML giúp các bạn có thể thiết kế trang trực tiếp bằng ngôn ngữ HTML..
- Dreamweaver còn hổ trợ các HTML Styles và Cascading Style Sheet giúp bạn định dạng trang web nhằm tăng tính hấp dẫn khi duyệt các trang web này..
- để mở các thành phần này bạn có thể vào menu Window->.
- Macromedia Dreamweaver 4.0 Mediaspace Club #2 + Launcher: có chứa các nút để mở và đóng các Inspector và các Palette được dùng thường xuyên nhất.Bạn cũng có thể truy cập Launcher tại Mini Launcher tại góc phải của cửa sổ Document..
- Propery inspector: hiển thị các thuộc tính của các đối tượng hoặc Text.
- được chọn,và nó cho phép bạn chỉnh sửa các thuộc tính này..
- Floating Palette: các Floating Palette có thể được neo cố định nhằm giúp bạn kết hợp được với nhiều cửa sổ di động, các Inspector và các Palette thành một hoặc nhiều cửa sổ được đính nhãn như Object Palette vv....
- Việc tạo mã cho tài liệu (trang web) sẽ xác định cách mà trang web được hiển thị trong trình duyệt..
- Macromedia Dreamweaver 4.0 Mediaspace Club #3 Hãy chọn kiểu tạo mã chẳng hạn như Western (Latin 1) hoặc Japaness từ Font Settings .
- Tại Proportional Font chọn font và kích thước hiển thị mặc nhiên khi soạn thảo trang web (ví dụ: Times New Roman, size=12pt)..
- Tại Available Fonts hãy chọn fonts tiếng việt thường dùng (ví dụ font VNI-Times hoặc .vntime) sau đó Click nút <<.
- Macromedia Dreamweaver 4.0 Mediaspace Club #4 font trong hộp thuộc tính Property Inspectorthì mới phát sinh được thuộc tính face<font face="VNI-Times".
- thì mới hiện được font tiếng việt khi duyệt trang web trong trình duyệt..
- b) Định dạng văn bản:.
- Bạn có thể định dạng text trong cửa sổ tài liệu Document bằng cách cài đặt các thuộc tính trong hộp Property Inspector.
- Để định dạng văn bản trước tiên hãy bôi đen văn bản muốn định dạng rồi sau đó chọn các thay đổi trên hộp thuộc tính Property Inspector.
- Nếu hộp Property Inspector không mở hãy chọn menu Window->Properties.
- Lưu ý:Trong lúc định dạng văn bản bạn có thể sử dụng hộp Property Inspector hoặc bạn có thể sử dụng menu Text để định dạng văn bản vì có những chức năng mà hộp thuộc tính Property Inspector không xây dựng sẵn cho bạn (ví dụ như văn bản được gạch dưới,gạch ngang hoặc bạn có thể sử dụng chế độ thiết kế web bằng ngôn ngữ HTML để thiết kế thêm những thuộc tính cần thiết (ví dụ như bạn muốn văn bản đựoc canh đều <p align="justify".
- Nếu bạn đang thao tác với các Bullets hay Numbering bạn có thể Click nút List Item trên thanh Property Inspector để cài đặt một số thông số sau:.
- Macromedia Dreamweaver 4.0 Mediaspace Club #5 + Chọn kiểu List Type là Bullet hay Numbering, chọn kiểu Style.
- Nếu bạn đang thao tác với numbering bạn có thể cho số tăng từ mấy tại Start Count.
- Tại Reset Count to bạn có thể nhập vào giá trị số trở về mặc nhiên (thường là 1)..
- Để hiện chế độ thiết kế trang web ở ngôn ngữ HTML bạn có thể click nút <.
- 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 các trang web khác hoặc các tập tin tài liệu, hình ảnh, âm thanh (Sound), Phim(Video) hoặc các chương trình có thể tải xuống (Download)..
- Thường có các loại siêu liên kết sau:.
- Internal Link :Liên kết đến các tài liệu trong cùng Website (Local Site).
- External Link :Liên kết các tài liệu bên ngoài Local website (ví dụ như link tới các WebServer khác trên Internet, FTP Server khác trên Internet, các Telnet Server, các News Server vv...).
- E-mail Link :tạo một siêu liên kết cho phép người sử dụng gởi Email..
- Link to Name Anchors (còn có thể gọi là Bookmark) :Tạo siêu liên kết nhảy đến một vị trí nào đó trong trang web hiện hành..
- Nguyên tắc chung khi bạn tạo một siêu liên kết cho văn bản(text), hình ảnh(image), Hotpot của bản đồ hình ảnh(hotpot of Image map): hãy chọn văn bản hoặc hình ảnh hoặc Hotpot muốn tạo siêu liên kết sau đó click nút Browse For file (tạo Internal Link) trên hộp thuộc tính Property Inspector của đối tượng tương ứng đang chọn..
- Macromedia Dreamweaver 4.0 Mediaspace Club #6 Khi bạn chỉ đường dẫn tới trang web bạn sẽ thấy địa chỉ của trang web này hiện tại địa chỉ URL như hình vẽ..
- Tại hộp link của hộp Property Inspector xuất hiện đường dẫn của tập tin bạn đang liên kết tới theo kiểu cục bộ(trên đĩa cứng ) nhưng nếu bạn đã save lại có tên bạn sẽ có kiểu đường dẫn là tương đối.
- Bạn nên lưu trang web lại trước khi tạo siêu liên kết để không hiện thông báo nhắc nhở mỗi khi tạo siêu liên kết..
- Sử dụng đường dẫn cục bộ nếu bạn chưa lưu trang web trước khi tạo Hyperlink.
- Bạn có thể định Target cho siêu liên kết (nơi hiển thị nội dung của trang web khi click vào)..
- _bank :nội dung trang web sẽ hiện ra ở cửa sổ mới (New Window)..
- bạn không cần Click nút Browse For File mà hãy nhập vào địa chỉ của Server (máy chủ) mà bạn đang muốn liên kết tới..
- Ví dụ: http://www.mediaspace.250x.com.
- www.mediaspace.250x.com/,vv....
- Tạo siêu liên kết để Reply Email:(
[email protected],
[email protected].
- Hãy Click nút Insert Email Link bạn sẽ thấy hộp thoại sau:.
- Tại hộp thoại Text hãy nhập vào chuổi hiển thị..
- Tại hộp E-mail:hãy nhập vào địa chỉ Email muốn gởi đến..
- LÀM VIỆC VỚI CÁC HÌNH ẢNH:.
- Macromedia Dreamweaver 4.0 Mediaspace Club #7 Với Dreamweaver bạn có thể chèn các hình GIF và JPG vào trong trang web hoặc có thể định ảnh nền cho các trang web hoặc ảnh nền cho các lớp (Layer)..
- Để chèn hình ảnh vào trang web: đặt con trỏ tại vị trí muốn chèn ảnh,chọn menu Insert ->.
- Images hoặc Click nút Insert Image trên hộp Object Pallete sau đó chỉ đường dẫn đến hình ảnh mà bạn muốn chèn vào..
- Sau khi chèn ảnh vào đươc trang Web bạn có thể Click chuột chọn ảnh để xuất hiện hộp thuộc tính Property Inspector để định nghĩa các thuộc tính của hình ảnh..
- Trong hộp Extensions hãy chọn kiểu ảnh mà bạn muốn chỉnh sửa hoặc bạn có thể Click dấu.
- Tạo bản đồ 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 bất kỳ (Polygon Hotpot Tool)trên hộp Property Inspector của hình ảnh.
- Macromedia Dreamweaver 4.0 Mediaspace Club #8 sau đó vẽ một tọa độ trên ảnh mà bạn muốn tạo đó có siêu liên kết sẽ xuất hiện hộp thuộc tính của Hotpot như hình vẽ..
- Hãy Click nút Browse For File để chỉ đường dẫn đến tập tin cần Link tới, nếu bạn muốn tạo External Link thì nhãy nhập địa chỉ của Webserver hay FTP Server tại hộp Link.
- Bạn có thể chỉ định Target cho nội dung của siêu liên kết (tham khảo các loại Target ở phần trên)..
- Trong lúc thao tác với Hotpot bạn có thể 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 độ của điểm siêu liên kết..
- Chú ý:Nếu bạn sử dụng nhiều bản đồ hình ảnh trong cùng một trang Web thì bạn phải chắc rằng mỗi bản đồ phải có một tên duy nhất.Bạn có thể đặt tên bản đồ tại hộp Textbox Map..
- Rollover Image là một hình ảnh thay đổi khi mouse di chuyển qua nó.Một Rollover chứa 2 hình ảnh:.
- Ảnh sơ cấp (Primary Image) :là hình ảnh được hiển thị khi trang đầu tiên được load..
- Chú ý : khi bạn tạo một Rollover thì cả hai hình ảnh phải có kích thước giống nhau, nếu các hình không có kích thước giống nhau thì Dreamweaver tự động định lại kích thước hình ảnh thứ hai để kết với các tính chất của hình ảnh thứ nhất..
- Chọn Insert->Rollover Image (Dreamweaver 3.0) hoặc Insert ->.
- Rollover Image(Dreamweaver 4.0) từ menu Insert hoặc Click nút Insert Rollover Image trên thanh Object Palette, bạn sẽ thấy xuất hiện hộp thoại sau:.
- Tại Original Image hãy Click nút Browse để tìm ảnh gốc (Primary Image)..
- Tại Rollover Image hãy Click nút Browse để tìm ảnh đảo (Rollover Image)..
- Hãy chọn Preload Rollover Image khi bạn muốn Dreamweaver tải trước hình ảnh Rollover vào cache của bộ duyệt để tăng nhanh tốc độ load trang web..
- Macromedia Dreamweaver 4.0 Mediaspace Club #9 + Tại When Click, Go To URL hãy Click nút Browse để tìm tập tin muốn tạo siêu liên kết hoặc nhập vào địa chỉ URL tại textbox này..
- Bạn có thể tạo một Navigation bar theo chiều ngang hoặc chiều đứng bằng cách chọn mục Insert ->.
- Navigation Bar hoặc Click nút Insert Navigation Bar trên hộp Object Pallette sẽ xuất hiện hộp thoại sau:.
- Trong trường Element Name hãy nhập vào tên của phần tử Navigation bar..
- Tại Up Image hãy nhấp Browse và chỉ đường dẫn đến hình ảnh được hiển thị ban đầu (ví dụ a1.gif)..
- Tại Over Image hãy nhấp Browse và chỉ đường dẫn đến hình ảnh được hiển thị khi mouse di chuyển qua ảnh (ví dụ a2.gif)..
- Tại Down Image hãy nhấp Browse và chỉ đường dẫn đến hình ảnh được hiển thị khi mouse Click vào ảnh (ví dụ a2.gif ,hoặc bạn có thể thiết kế thêm một ảnh a3.gif)..
- Tại Over While Down Image hãy nhấp Browse và chỉ đường dẫn đến hình ảnh được hiển thị khi mouse Click vào ảnh trong lúc di chuyển con trỏ lên hình ảnh đó (bạn có thể không cần thiết kế trạng thái này)..
- Tại When Clicked,Go to URL hãy Click nút Browse để chỉ đường dẫn đến tập tin mà mà bạn muốn Link tới hoặc nhập vào địa chỉ External URL mà bạn muốn Link tới..
- Macromedia Dreamweaver 4.0 Mediaspace Club #10 + Hãy chọn tùy chọn Preload Image.Nếu bạn không chọn tùy chọn này sẽ tạo ra sự chậm trễ khi mouse Over qua ảnh..
- Hãy nhấp nút + để thêm một phần tử Navigation mới hoặc click nút - để loại bỏ phần tử Navigation đang chọn..
- Để sắp xếp các phần tử bạn có thể Click nút mũi tên lên hay xuống..
- Lưu ý: Bạn chỉ chèn được một Navigation Bar trong cùng một trang Web..
- Table là một công cụ thiết kế Web nhằm sắp xếp dữ liệu và các hình ảnh trên một trang HTML.Với Dreamweaver bạn có thể dễ dàng chuyển đổi giữa một thiết kế Table và thiết kế Lớp.
- Cả Table và lớp đều cho phép bạn điều khiển vị trí của các phần tử của trang Web nhưng các lớp thì không được hổ trợ trong các trình duyệt từ 3.0 và trước đó..
- Table hoặc Click nút Insert Table trên thanh Object Palette bạn sẽ thấy hộp thuộc tính của Table như sau:.
- Trong hộp Rows hãy nhập vào số hàng của Table..
- Trong hộp Columns hãy nhập vào số cột của Table..
- Định dạng Table:.
- Để định dạng Table bạn hãy di chuyển Mouse vào các cạnh của nó sau cho xuất hiện được hình mũi tên 4 đầu sau đó Click chọn Table bạn sẽ thấy xuất hiện hộp thuộc tính của Table như hình vẽ.
- Macromedia Dreamweaver 4.0 Mediaspace Club #11 Định dạng Cell:.
- Để định dạng cell bạn hãy Drag chọn các Cell muốn định dạng bạn sẽ thấy xuất hiện hộp thuộc tính của Cell như sau:.
- Chú ý: Khi bạn định dạng Cell ngoài các thuộc tính của Cell trên hộp thuộc tính bạn có thể chọn các Cell muốn định dạng bằng cách Drag mouse chọn sau đó Click phím phải chuột vào các Cell đã chọn sau đó chọn menu Table và chọn các lệnh thích hợp trên menu này..
- Macromedia Dreamweaver 4.0 Mediaspace Club #12 Để chỉnh sửa Table hoặc Cell bạn còn có thể chọn menu Modify ->.
- Định dạng Table theo các mẫu cho trước (Preset Design).
- Macromedia Dreamweaver 4.0 Mediaspace Club #13 2.
- trái và bạn cũng có thể thay đổi các thuộc tính tùy chọn cho Table..
- Macromedia Dreamweaver 4.0 Mediaspace Club #14.
- Một Table có thể nằm trong một Table khác, tuy nhiên chiều rộng của nó bị giới hạn bởi chiều rộng của ô qua đó xuất hiện..
- Đầu tiên bạn hãy chèn vào trang Web một Table bằng menu Insert->Table hoặc Click nút Insert Table trên hộp Object.Hãy đặt vị trí con trỏ tại ô mà bạn muốn có Table thứ 2 rồi cũng chọn Insert->Table.