Thứ Tư, 22 tháng 1, 2014
Lập trình web với dreamweaver MX
4
Bài 2 : Dreamweaver MX | 9/26/2007
2. Các chế độ View
Với một trang web, Dreamweaver cung cấp cho người lập trình 3 giao diện hiển thị
a) Chế độ hiển thị Code View
Chỉ hiển thị mã lệnh HTML, CSS, Javascript, … Phù hợp với việc lập trình và chỉnh
sửa những chi tiết trên trang web.
b) Chế độ hiển thị Design View
Hiện thị trang web trực quan, phù hợp với việc thiết kế giao diện. Đây là chế độ thiết kế
WYSIWYG (What you see is what you get).
5
Bài 2 : Dreamweaver MX | 9/26/2007
c) Chế độ hiển thị Split View
Chia màn hình thiết kế thành 2 phần, phần trên hiện thị mã lệnh (code), phần dưới hiện
thị kết quả thiết kế dưới dạng Design. Chế độ này sẽ hạn chế tầm nhìn thiết kế giao
diện. Phù hợp với việc dùng để kiểm chứng một số thành phần trong giao diện khi thiết
kế.
6
Bài 2 : Dreamweaver MX | 9/26/2007
II. Các thao tác chính trên trang web trong DW
1. Tạo 1 Website mới
- Từ màn hình chính của DW, trong vùng cửa sổ File Panel (G), tại combo box
đầu tiên, chọn chức năng Manage Site Chọn New (trong cửa sổ Manage
Sites) Site.
- Chuyển qua chể độ Advanced trong cửa sổ Site Definition.
7
Bài 2 : Dreamweaver MX | 9/26/2007
- Thiết lập các thông tin cho website rồi xác nhận OK.
Category
Thuộc tính
Giá trị
Local Info
Site name
Tên của website “Lập trình web 1”
Local root folder
Thư mục chứa website [Tùy ý sinh viên]
Default Images
Folder
Thư mục chứa hình ảnh nên chọn thư mục Images là
thư mục con của thư mục Local root folder
Links relative to
Chọn Documents
Cache
Đánh dấu check
- Sau khi quay lại cửa sổ Manage Sites, chọn website vừa mới tạo nhấn Done.
- Lúc này, cửa sổ File Panal (G) sẽ chứa cây thư mục của website vừa mới tạo.
- Lưu ý, mọi thao tác sửa tên file (HTML, image, ), di chuyển file giữa các thư
mục con, ĐỀU PHẢI thực hiện trong cửa sổ (G) này. Với việc thực hiện vậy, DW
sẽ tự động cập nhật đường dẫn liên kết, đường dẫn của các đối tượng trong cả
website một cách TỰ ĐỘNG.
2. Mở một website đã tạo
- Nếu website chưa được add vào DW, thì thực hiện như phần 1
- Nếu Website đã được add vào DW, thì thực hiện các bước sau:
o Từ cửa sổ File Panel (G) mở combo box chọn Manage Sites.
o Trong cửa sổ Manage Sites, chọn Website cần mở Done.
8
Bài 2 : Dreamweaver MX | 9/26/2007
3. Tạo một trang web mới cho Website
- Từ menu File New
- Trong cửa sổ xuất hiện, chọn Blank Page
- Trong mục Page Type, chọn HTML.
- Trong mục Layout, chọn <none>.
- Nhấn nút Create
- Lưu ý: Sau khi tạo xong, phải Save trang web mới + đặt tên thì trang web mới
chính thức xuất hiện trong File Panal (G). Lời khuyên – Nên save trang web
ngay sau khi tạo.
9
Bài 2 : Dreamweaver MX | 9/26/2007
4. Thiết lập thông tin chung của trang web mới
Cách 1:
- Từ menu Modify Page
Properties
Cách 2 :
- Nhấn phím tắt : Ctrl + J
Cách 3 :
- Chuyển qua chế độ Design.
- R-Click chọn Page Properties
- Trong cửa sổ Page Properties, thiết
lập các thông số cho webpage sau:
Category
Thuộc tính
Giá trị
Apprearance
Page Font
Chọn font chữ cho trang web
Size
Kích thước font chữ mặc định cho trang web
Text Color
Màu chữ mặc định cho trang web
Background Color
Màu nền cho trang web (thẻ <body>)
Background Image
Ảnh nền cho trang web (thẻ <body>)
Repeat
Chế độ lập lại khi chọn ảnh nền cho webpage
Left, right, Top,
Bottom Margin
Khoảng cách nội dung của thẻ <body> so với biên của
cửa sổ trình duyệt web.
Links
Link fonts, Size,
Color, …
Thiết lập màu của liên kết, cở chữ, màu các trạng thái của
liên kết, …
Title
Encoding
Title
Nội dung title của trang web (tag <Title>)
Encoding
Chọn UTF-8 : Mã chữ mặc định khi trang web được nạp
vào trình duyệt.
Tracing
Image
Tracing Image /
Transparency
10
Bài 2 : Dreamweaver MX | 9/26/2007
Ví dụ :
- Thay đổi màu nền, màu chữ trang web
- Thay đổi tiêu đề, Mã chữ của trang web
- Thay đổi ảnh nền cho trang web
11
Bài 2 : Dreamweaver MX | 9/26/2007
5. Chèn ngày tháng vào trang web
- Vào chế độ Design View
- Chọn vị trí cần đặt ngày tháng trong vùng thiết kế.
- Từ menu Insert Date
- Chọn kiểu ngày tháng cần chèn vào web.
6. Chèn đường kẻ ngang vào trang web
- Vào chế độ Design View
- Chọn vị trí cần đặt ngày tháng trong vùng thiết kế.
- Từ menu Insert HTML Horizontal rule
- Sau khi đã chèn được đường kẻ ngang vào webpage, sử dụng cửa sổ Property
Inspector (F) để thay đổi các thuộc tính của Đường kẻ ngang
7. Kiểm tra kết quả thiết kế bằng trình duyệt
- Trên thanh công Document Bar (B) chọn button Preview/Debug in Browser
Chọn trình duyệt để kiểm tra trang web (Phím tắt cho IE là F12)
12
Bài 2 : Dreamweaver MX | 9/26/2007
III. Làm việc với hình ảnh trong DW
1. Chèn hình ảnh vào trang web
Cách 1:
- Chọn menu Insert Image
- Khi cửa số Open Image xuất hiện, chọn đường dẫn đến file hình ảnh
- Lưu ý:
o Select File name From chọn File System
o URL : hiện thị đường dẫn tương đối của file ảnh so với trang web hiện
hành (nếu trang web chưa được save lần nào thì URL sẽ chỉ định đường
dẫn tuyệt đốt Không nên vậy)
o Relative to chọn Document
- Điền thêm thông tin cho hình ảnh (Tool tip [Alternative text], ….)
13
Bài 2 : Dreamweaver MX | 9/26/2007
Cách 2:
- Chọn button Image trên thanh công cụ Inserted Bar (A)
- Chọn đường dẫn đến file image cần chèn (như cách 1)
2. Thay đổi các thuộc tính của hình ảnh
- Trong chế độ Design View
- Chọn hình cần thay đổi thước tính
- R-Click Properties
- Thay đổi các thuộc tính của ảnh cửa sổ Properties Inspector (F)
3. Tạo Image Map
- Vào chế độ Design View
- Chọn hình ảnh cần tạo Image Map R-Click Properties
- Trong cửa sổ Properties Inspector (F) sử dụng các hotspot hyperlink
- Sử dụng 1 trong 3 button để tạo hình dạng hotspot
- Sau khi chọn được kiểu Hotspot, vẽ hình hotspot tương ứng trên vùng hình ảnh
đã được chọn ban đầu.
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét