Căn bản về 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.

pdf14 trang | Chuyên mục: HTML | Chia sẻ: dkS00TYs | Lượt xem: 2409 | Lượt tải: 0download
Tóm tắt nội dung Căn bản về Dreamweaver 4.0, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
+ 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. 
C. 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. 
Để định được bộ soạn thảo ảnh bên ngoài (External Image Editor) khi bạn nhấp nút Edit 
bạn hãy vào menu Edit->Preferences chọn External Editor. 
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 
(+) để thêm một kiểu ảnh mà bạn muốn chỉnh sửa, nhấp nút (+) bên Editors sau đó bạn hãy 
chỉ đường dẫn đến tập tin chương trình soạn thảo ảnh(ví dụ như photoshop.exe) 
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. Nhập vào 
một chú thích trên điểm Hotpot khi mouse di chuyển qua nó tại Alt. 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. 
Tạo Rollover Image: 
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. 
+ Ảnh đảo (Rollover Image) : là ảnh sẽ xuất hiện khi mouse di chuyển trên ảnh sơ cấp. 
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. 
Cách tạo: 
+ Hãy đặt con trỏ tại vị trí muốn chèn Rollover. 
+ Chọn Insert->Rollover Image (Dreamweaver 3.0) hoặc Insert -> Interactive Image -> 
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. 
Tạo Navigation Bar: 
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. 
+ Show down Image Initially :Hiển thị ảnh ở trạng thái nhấn mouse khi trang vừa mới tải 
xuống. 
+ Hãy chọn kiểu Navigation bar nằm dọc hay ngang tại Insert. 
+ Hãy chọn Use Tables để chèn các phần tử Navigation bar trong Table. 
+ 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. 
Sau khi tạo xong được Navigation Bar nếu muốn chỉnh sửa lại bạn hãy chọn Menu Modify > 
Navigation. 
=================================================================== 
D. LÀM VIỆC VỚI TABLE 
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 đó. 
Chèn Table : 
Để chèn Table bạn chọn menu Insert -> 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. 
+ Trong hộp Cell Padding hãy chỉ 
định khoảng cách từ Text so với 
cạnh của Table. 
+ Trong hộp Cell Spacing hãy nhập 
vào khoảng cách giữa các Cell. 
+ Trong hộp Width hãy nhập vào chiều rộng của Table dưới dạng số Pixel hoặc dưới dạng 
một tỷ lệ phần trăm của cử sổ trình duyệt. 
+ Trong hộp Border hãy nhập vào đường viền của Table ,nếu bạn muốn Table là dạng lưới 
bạn hãy nhập vào giá trị là 0. 
Đị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 -> Table bạn cũng thấy 
được menu như hình trên. 
Định dạng Table theo các mẫu cho trước (Preset Design) 
Cell 1 Cell 2 Cell 3 
Cell 1 Cell 2 Cell 3 
Cell 1 Cell 2 Cell 3 
1. Chọn bảng sau đó chọn menu Command->Format Table bạn sẽ thấy xuất hiện 
nhiều mẫu table cho sẵn bạn hãy chọn một trong những mẫu này. 
Macromedia Dreamweaver 4.0 Mediaspace Club #13 
2. Trong hộp hội thoại mới xuất hiện bạn hãy chọn một kiểu Table bên danh sách bên 
trái và bạn cũng có thể thay đổi các thuộc tính tùy chọn cho Table. 
Sắp xếp dữ liệu cho Table: 
Columm 1 Columm 2 Columm3 
C 3 300 
B 2 200 
A 1 100 
• Chọn Table sau đó chọn menu Command->Sort Table bạn sẽ thấy hộp thoại sau 
đây: 
• Chọn cột để phân loại tại Sort By 
• Tại Order chọn kiểu sắp xếp theo Alphabe hay theo số và chọn kiểu sắp xếp tăng 
dần Ascending hay giảm dần Descending 
Macromedia Dreamweaver 4.0 Mediaspace Club #14 
• Để thực hiện việc sắp xếp thứ cấp trên cột khác hãy chỉ định các tùy chọn phân loại 
trong menu Then by. 
• Tùy chọn Sort Include First Row cho phép bạn sắp xếp luôn dòng đầu mà thường là 
tiêu đề của Table không được di chuyển,bạn đừng chọn option này nếu Table có tiêu 
đề. 
Chèn Table trong Table: 
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. 
Để thực hiện bạn làm như sau: 
+ Đầ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. 
Biên soạn: Nguyễn Phú Tài ( nptai@yahoo.com ) 
Huu Thanh Design (huuthanh@50g.com ) 

File đính kèm:

  • pdfSuDungDreamweaver.pdf
Tài liệu liên quan