29/08/2012
1
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Giảng Viên: Trần Anh Tuấn
1
LẬP TRÌNH WEB
TRƯỜNG CAO ĐẲNG SƯ PHẠM DAKLAK
KHOA NGOẠI NGỮ - TIN HỌC
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Chương 4
DREAMWEAVER
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Giới thiệu về Dreamweaver
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Giới thiệu
 Dreamweaver là chương trình dùng để tạo trang web
tĩnh, web động. Dreamweaver sẽ tự động phát sinh các
tag HTML, CSS, Javascript, PHP, ASP thích hợp.
 Dreamweaver là một công cụ trực quan, trong đó có thể
bổ sung Javascript, biểu mẫu, bảng biểu và nhiều loại đối
tượng khác mà không cần viết một đoạn mã nào
 Dreamweaver có thể thiết kế bằng chế độ Design view
hoặc Code view hoặc Code and Design
 Dreamweaver là một thành phần trong bộ sản phẩm của
hãng Adobe gồm nhiều sản phẩm như: Photoshop,
Dreamweaver, Flash,…
4

cho người xem tìm ngay được thông tin mình muốn tìm.
 Ví du: site tin tức, show sản phẩm, nhạc …
 Website truyền dữ liệu:
 Được thiết kế đặc biệt để thu nhận thông tin từ xa. Một cơ quan, đơn vị có
nhiều cơ sở thay vì phải đến tận đơn vị để lấy thông tin thì nay có thể ngồi
tại chỗ để nhận thông tin qua mạng internet/intranet. Website này thuộc
hàng cao cấp, đòi hỏi nhà thiết kế phải có trình độ trong lãnh vực IT và
chuyên môn.
 Ví dụ: site báo cáo số liệu sản xuất, bán hàng hàng ngày
 Website thương mại:
 Chứa thông tin hàng hoá và dịch vụ, chứa nhiều form và chứa các script
tính toán để người tiêu dùng có thể mua và trả tiền ngay tại website.
6
29/08/2012
2
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Kế hoạch thiết kế một Website
 Các yêu cầu cơ bản khi thiết kế website:
 Xác định yêu cầu và mục đích của Website
 Chuẩn bị nội dung cho các trang
 Phác thảo khuôn mẫu (Template) cho trang, thường các
trang có cùng chủ đề thì sử dụng chung một template
 Xác định cấu trúc của Website, có 3 kiểu cấu trúc:
 Tuyến tính
 Phân cấp
 Hình chóp
7
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web

Template, …
 Layout: Chứa các công cụ trình bày trang, gồm 3 chế độ:
Standard, Expended, Layout
 Forms: Chứa các công cụ tạo Form
 Text: Dùng định dạng văn bản
 HTML: chứa các công cụ tạo trang web
bằng code view
Màn hình Dreamweaver
12
29/08/2012
3
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Document Toolbar: Chứa các nút cho phép xem trang
web ở dạng Design hay dạng Code
 Show code view: Xem dạng trang HTML
 Show Design view: Xem trang dạng thiết kế, sử dụng các
công cụ của Dreamwerver
 Show code and design view: Chia cửa sổ làm 2 phần:
phần trên dạng code view, phần dưới dạng Design view
 Title: tiêu đề của trang Web
 Preview/Debug in Browser:Xem kết quả trang web thông
qua trình duyệt web
 Document Window: Cửa sổ dùng để tạo và hiệu chỉnh
trang Web
Màn hình Dreamweaver
13
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Properties Inspector: Hiển thị các thuộc tính của các

 Bước 2: Đặt tên cho site rồi nhắp nút Next
Tạo site
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thao tác với Website
17
 Bước 3: Chọn công nghệ xây dựng website.
 Nếu làm web động: bạn chọn Yes… và công nghệ thực hiện
(PHP,…).
 Nếu làm site tĩnh: bạn chọn No…
 Chọn No,I do not want to use a server technology
 Nhắp Next
Tạo site
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thao tác với Website
18
 Bước 4: Chỉ định cách thức làm việc với các file
trong site và chỉ định folder chứa site
 Chọn Edit local copies on my machine, then upload…
Tạo site
29/08/2012
4
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thao tác với Website
19
 Bước 5: Chọn phương cách đưa website lên Internet
 How do you connect to your remote server?
chọnNone

nút Export, chọn vị trí và đặt tên
file
 Import
 Import khi muốn tạo lại site từ file
đã Export
 Nhắp nút Import
 Mở site để làm việc
 Chọn site muốn làm việc rồi nhắp
nút Done
Quản lý các site đã tạo
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thao tác với trang
22
 Tạo trang HTML trống hoặc Layout có sẵn
 B1: Menu File  chọn New
 B2: Chọn Blank page  chọn HTML  Chọn None hoặc
layout trong cột Layout  nhắp nút Create để tạo trang
Tạo trang web
1
2
3
4
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thao tác với trang
23
 Tạo trang theo mẫu có sẵn
 B1: Menu File  chọn New
 B2: Chọn Page From Sample  Starter basic  chọn mẫu  nhắp

 Chuyển chế độ của trang:
 Nhắp nút Code, Design, Split ở trên vùng soạn thảo (thanh Document)
Chuyển chế độ Code, Design, Split
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thao tác với trang
26
 Lưu trang web
 Nhắp menu File  Save /Save As / Save All
 Mở trang
 Nếu trang ở trong site: Nhắp đúp vào tên file trong panel
Files.
 Nếu file ở ngoài site: Nhắp menu File  Open è chọn file.
 Đóng trang
 Nhắp menu File  Close / Close All
 Đổi tên file
 Nhắp tên file trong panel Files  gõ phím F2  gõ tên file
mới
 Xóa file
 Nhắp tên file trong panel Files  gõ phím Delete
Các thao tác khác
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thao tác với trang
27
 Nhắp menu Modify  chọn Page Properties
(Hãy mở 1 file có sẵn dữ liệu, ví dụ: page.html để
thử các thuộc tính của trang)
Thuộc tính trang
Khoa NN-TH Trường CĐSP DakLak

 Rollover links: màu chữ khi rê chuột vào liên kết
 Visited links: màu chữ liên kết đã từng xem
 Active links: màu chữ cho liên kết đang chọn
 Underline style: kiểu gạch chân
 Never: không có
 Always: luôn có
 Show: hiện khi chuột chạm vào
 Hide: không hiện khi chuột rê vào
Thuộc tính trang
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
• Paragraph
• Định dạng danh sách
Định dạng nội dung
29/08/2012
6
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Paragraph
31
 Giới thiệu:
 Paragraph là 1 đoạn text gồm 1 hoặc nhiều hàng chữ nằm trong
tag P, tag H1- H6.
 Khi nhập chữ rồi Enter xuống hàng, Dw sẽ tự động bao quanh
vùng text vừa gõ 1 tag p. Có thể thay đổi tag bao quanh đoạn
như sau:
 Chọn đoạn text
 Trên thanh Properties/mục Format: chọn tag (Heading 1 - Heading
6, Paragraph)
 Tag H1-H6 thường dùng khi định dạng các tiêu đề chương, bài, đề

màu. Khi bảng màu hiện ra, thay vì chọn màu trong
bảng, bạn có thể trích màu ở nơi mà bạn thấy. (xem
thêm ở mục dưới)
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Paragraph
34
 Định dạng paragraph và text:
 Chọn chữ rồi dùng các nút trên tranh Properties:
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Paragraph
35
 Sử dụng màu sắc:
 Giá trị màu:
 Một màu được tổng hợp từ ba thành phần màu chính, đó là:
Đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue).
 Trong HTML một giá trị màu là một số dạng hexa (hệ đếm cơ
số 16) có dạng như sau:
 #RRGGBB
 Trong đó:
o RR - là giá trị màu Đỏ, từ 00 đến FF.
o GG - là giá trị màu Xanh lá cây, từ 00 đến FF.
o BB - là giá trị màu Xanh nước biển, từ 00 đến FF.
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Paragraph
36
 Các mã màu:
29/08/2012

dạng này nằm
trong tag OL,
mỗi mục nằm
trong tag li
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Ký tự đặc biệt
40
 Là những ký tự
không gõ được từ
bàn phím
 Chèn: Insert  HTML
Special
Character  Chọn ký
tự hoặc Other
character
 Line break (Shift-
Enter) : Ngắt dòng
 None line break
space: ký tự khoảng
trắng
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Iframe
41
 Iframe là 1 vùng trong trang web chứa 1 trang web
khác.
 Chèn Iframe như sau:
 Vào menu Insert  Tag  HTML Tags  Page
Elements  Iframe  Insert

 B7: Lưu trang web và xem thử.
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Marquee
44
 Các thuộc tính thường dùng:
 Behavior: cách cuộn của marquee. Các giá trị: scroll,
slide, alternate
 Bgcolor: màu nền.
 Direction: chiều cuộn. Các giá trị: up, down, left, right
 Hspace, vspace: khoảng cách từ marquee đến text
xung quanh.
 Loop: số lần lặp (-1 là mãi mãi).
 Scroll amount: khoảng cách nhảy giữa các lần cuộn.
 Scroll delay: thời gian dừng giữa 2 lần cuộn.
 Width, Height: Độ rộng, độ cao của marquee.
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Marquee
45
 Ví dụ:
<marquee loop="-1" width="500" height="20"
behavior="alternate" bgcolor="#CC6666"
direction="right" >
<span class="style2">Welcome to
Dreamweaver</span>
</marquee>
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
• Giới thiệu

(hoặc Insert bar  tab Common Table)
 Chèn :
 Nhắp vị trí muốn chèn rồi vào menu Insert  chọnTable
 Rows: số hàng. Columns: số cột
 Table Width: độ rộng table (tính bằng pixel hoặc %)
 Cell Padding: khoảng cách từ đường viền của ô đến nội
dung trong ô
 Cell Spacing: khoảng cách giữa các ô
 Header: cho biết table có vùng header hay không (top,
left, both, none)
 Caption: Nhãn của Table
 Summary: diễn giải chi tiết table, chỉ hiện ở trong cửa sổ
code
 Nhắp OK
29/08/2012
9
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Chèn table
49
 Chèn table: 3 dòng, 3 cột
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thuộc tính của table
50
Số hàng, số cột
Độ rộng table.
Khoảng cách từ nội dung ô đến viền của ô
Khoảng cách giữa các ô
Cách canh table

 Xóa hàng cột
 Nhắp 1 ô trong hàng/cột muốn xóa rồi nhắp phải  Table
Delete Row hoặc Delete Column
 Chế độ Expanded table
 Gõ phím F6
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Các thao tác với table
53
 Merge cell
 Chọn các ô cần merge
 Nhắp phải Table  Merge Cell (hoặc nhắp nút
MergeCell trên thanh Properties)
 Split cell
 Chọn ô cần chia
 Nhắp phải Table  Split Cell (hoặc nhắp nút Split cell
trên thanh Properties)
 Chọn split theo hàng hoặc cột, số hàng/cột cần split
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Ví dụ các thao tác
54
29/08/2012
10
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Ví dụ các thao tác
55
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web

 Style: Là 1 tập hợp các đặc điểm định dạng.
 Ví dụ: P { Color: Red; font-size:16; font-weight:Bold; }
 Sheet: Là 1 tập hợp nhiều style
 Vị trí lưu style: style dùng để định dạng đối tượng trong
trang web. Style có thể lưu trong chính trang HTML hiện
hành hoặc có thể lưu ở file riêng (.CSS)
 Các kiểu style:
 Style định dạng cho 1 tag trong toàn trang .
 Ví dụ : style P { Color:blue} để đ.dạng cho mọi tag P trong trang
web có màu chữ xanh
 Style định dạng cho 1 đối tượng cụ thể có tên.
 Ví dụ: style #tinxemnhieu { background-color: cyan} để định
dạng cho đối tượng tên là tinxemnhieu có màu nền là cyan
 Style định dạng cho 1 tag cho 1 vùng nào đó trong trang web.
 Ví dụ: style #tinxemnhieu a { color: magenta} để định dạng cho
mọi tag a trong đối tượng tên là tinxemnhieu có màu chữ là magenta
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Giới thiệu
59
 Class:
 Một class CSS là 1 tập hợp nhiều đặc điểm định dạng
như: màu chữ, màu nền, cách hiển thị, khung viền,…
 đặt cho các đặc điểm đó 1 cái tên.
 Có thể sử dụng class định dạng cho các đối tượng
khác.
 Ví dụ: .tieudetin { font-size:16; font-
weight:bold}
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web

 This document: Style đặt trong trang web hiện hành
 New Style Sheet: Đặt style trong file CSS bên ngoài trang web
hiện hành
 Nhắp OK
 Chỉ định các thuộc tính cần định dạng (font, nền, border, kích
thước, align…) rồi nhắp OK
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Định dạng cho 1 tag trong toàn trang
63
 Cách tạo:
1
2
3
(1) Select type: chọn Tag
(2) Seletor Name: tên của style (TênTag )
(3) Rule Definition: Chọn nơi đặt style
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Định dạng cho 1 đối tượng cụ thể có tên
64
 Tên style:
 #TênĐốiTượng
 Ví dụ:
 Muốn định dạng cho đối tượng tên là quangcao, tạo style tên
là #quangcao
 Cách tạo
 Nhắp + trong CSS panel
 Select type: chọn Compound
 Selector Name: đặt tên style (#TênĐốiTượng)

 Select type: chọn Compound
 Selector Name: đặt tên style (#TênĐốiTượng TênTag)
 Rule Definition: Chọn nơi đặt style
 This document : Style đặt trong trang web hiện hành
 New Style Sheet: Đặt style trong file CSS bên ngoài trang web hiện hành
 Nhắp OK
 Chỉ định các thuộc tính cần định dạng (font, nền, border, kích
thước, align…)  OK
29/08/2012
12
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Định dạng cho 1 tag bên trong 1 đối tượng có tên
67
 Cách tạo:
1
2
3
(1) Select type: chọn Compound
(2) Seletor Name: tên của
style (#Tênđốitượng Tag )
(3) Rule Definition: Chọn nơi đặt style
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Class
68
 Tên style:
 .TênClass (Là “.” kèm với tênClass )
 Ví dụ:
 Style tên .tinhchinh

sẽ thấy đối tượng có thuộc tính Class= Tên của Class
 Bỏ set class
 Chọn đối tượng rồi nhắp phải chuột tại tên tag trên
thanh Tag  chọnSet Class  chọn None
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Quản lý style
71
 Chỉnh sửa Style
 Nhắp đúp tên style trong CSS panel hoặc chọn style trong CSS
panel rồi nhắp nút Edit
 Đổi tên style
 Nhắp tên style rồi gõ F2 hoặc nhắp 2 lần vào tên của style.
 Xóa Style
 Nhắp tên style trong CSS panel  gõ phím Delete.
 Chú ý:
 Nếu xóa class. Các đối tượng vẫn còn gắn với class
 Sao chép style
 Nhắp phải tên Style  Duplicate  cho tên mới
 Kiểm tra sự tương thích với trình duyệt
 Không phải thuộc tính nào của CSS cũng được mọi trình duyệt hỗ
trợ. Ví dụ: thuộc tính blink của text (Firefox hỗ trợ)
 Để kiểm tra sự tương tính của các thuộc tính CSS đã dùng, thực
hiện như sau:
 Nhắp menu File  Check Page  Check Browser Compability hoặc nhắp
nút Check Page trên toolbar Document
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Attach file CSS
72

75
 #menu A:link định dạng cho tất cả liên kết chưa được nhắp
trong vùng có tên là menu
 #menu A:visited định dạng cho tất cả liên kết đã được nhắp
trong vùng có tên là menu
 #menu A:hover định dạng cho liên kết đang được đưa chuột vào
trong vùng có tên là menu
 #menu A định dạng cho tất cả liên kết trong vùng có tên là
menu
 .menu A:link định dạng cho tất cả liên kết chưa được nhắp trong
vùng có class là menu
 .menu A:visited định dạng cho tất cả liên kết đã được nhắp trong
vùng có class là menu
 .menu A:hover định dạng cho liên kết đang được đưa chuột vào
trong vùng có class là menu
 .menu A định dạng cho tất cả liên kết trong vùng có class là menu
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Định dạng liên kết
76
 .menu A:link định dạng cho tất cả liên kết chưa được
nhắp trong vùng có class là menu
 .menu A:visited định dạng cho tất cả liên kết đã được
nhắp trong vùng có class là menu
 .menu A:hover định dạng cho liên kết đang được đưa
chuột vào trong vùng có class là menu
 .menu A định dạng cho tất cả liên kết trong vùng có
class là menu
 #TênBảng định dạng cho bảng
 #TênBảng td định dạng cho các ô dữ liệu trong bảng

Logo Biểu tượng công ty, cơ quan thường nằm góc trên trái màn hình. Tùy
theo mẫu, có kích thước giao động từ 72 đến 120 pixel
Banner Bảng hiệu thường nằm ở giữa, phía trên màn hình, có thể kết hợp với
logo hay với hệ thống nút định hướng ngang.
Bảng hiệu nhỏ có kích thước 800 x 72 (màn hình 800x600)
Bảng hiệu lớn có kích thước 1024 x 120 (1024 x 768)
Horizontal
Navigation
Hệ thống nút định hướng liên kết ngang, có thể ở phía dưới, hay nằm
trong Banner
Nút nhỏ 20x120. Nút lớn 30x140
Vertical
Navigation
Hệ thống nút định hướng liên kết dọc, có thể ở phía trái màn hình.
Nút nhỏ 20x120. Nút lớn 30x140
Icon Nút chức năng, 20  50 pixel
Picture Tùy thuộc vào chủ đề, minh họa có kích thước riêng
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Hình ảnh
80
 B1: Nhắp vị trí chèn hình
 B2: Menu Insert

Image
(hoặc Insert bar  tab
Common  Images  Images)
 B3: Chọn file hình
(nếu có trên máy của mình)
hoặc gõ

Chỉnh thuộc tính của hình
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Hình ảnh
83
 Chọn hình
 Trên thanh Properties, có thể chỉnh:
 Low src: tên file hình phụ với kích thước nhỏ hơn (màu thường là đen
trắng hay xám).
 Alt: dòng chữ hiện ra khi đưa mouse vào hình hoặc khi browser không hiện
được hình.
 Border: độ dày của đường viền quanh hình. Nếu để bằng 0 thì hình sẽ
không có viền.
 Align: cách canh của hình so với văn bản xung quanh (Left, Right,…)
 Tạo các hotspot: cho phép vẽ 1 vùng trên một hình để tạo nhiều liên kết
đến các trang web khác nhau.
 Crop: dùng để cắt bớt hình (cho nhỏ lại)
 Brightness and Contrast: chỉnh độ sáng và độ tương phản của màu trong
hình
Chỉnh thuộc tính của hình
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Hình ảnh
84
 Chọn hình
 Trên thanh Properties, có thể chỉnh:
Chỉnh sửa hình
Crop Cắt: xén ảnh
Brightness & Constract: Chỉnh độ sáng tối của ảnh
Sharpen: Chỉnh độ sắc nét cho ảnh

 Nên chọn ảnh nền màu nhạt để dễ đọc nội dung.
 Chèn ảnh nền: Menu Modify  Page Properties  Tab
Appearance
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Flash
88
 Flash là 1 kỹ thuật được dùng để tạo các đối tượng
mang nhiều hiệu ứng đồ họa, âm thanh, sự kiện,
hoạt hình… và được lồng vào trong trang web làm
cho trang web đẹp hơn, sinh động hơn (nhưng
trang web sẽ tải nặng hơn).
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Flash
89
 Chèn Flash vào trang web
 Nhắp vị trí muốn chèn
 Menu Insert  Media  Flash
 Chọn file flash hoặc gõ URL của file flash trong mục URL
 Nhắp OK
 Gõ Title cho Flash (nếu cần) rồi nhắp OK
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Flash
90
 Chèn Flash Video
 Nhắp vị trí muốn chèn
 Menu Insert è Media è Flash Video
 Chọn file flash video hoặc gõ URL của file flash trong

 Một liên kết nối từ trang nguồn sang trang đích
gồm 3 thành phần:
 Đối tượng được chọn làm nút liên kết
 Địa chỉ URL của trang cần liên kết đến
 Cửa số (target) hiển thị trang
 Đối tượng làm nút liên kết: text, ảnh,
 Địa chỉ URL của trang liên kết đến:
 Liên kết nội: liên kết các trang trong 1 website
 Liên kết ngoại: liên kết đến trang thuộc website khác
 Liên kết email: liên kết đến chương trình gửi mail
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Các loại địa chỉ
94
 Địa chỉ tuyệt đối:
 Là địa chỉ bao gồm đầy đủ 3 phần
protocol
,
domain
,
file
.
 Thường dùng khi liên kết sang website khác
 Ví dụ:
/> Protocol là http
 Domain là www.nhatnghe.com
 File là ChuongTrinh/CCNA.html
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Các loại địa chỉ

MCSE.html
29/08/2012
17
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Các loại địa chỉ
97
 Địa chỉ gốc (Ký hiệu là /)
 Là địa chỉ bắt đầu bằng dấu /
(tính từ gốc của website)
 Dùng để link trong nội bộ website
NhatNghe/
gioithieu.html
index.html
CHUONGTRINH
ccna.html
MICROSOFT
MCSA.html
MCSE.html
 Ví dụ:
 Từ bất cứ trang nào trong site, muốn tạo liên kết
đến file index.html thì ghi địa chỉ là /index.html
 Từ bất cứ trang nào trong site, muốn tạo liên kết
đến file CCNA.html thì ghi địa chỉ là
ChuongTrinh/CCNA.html
 Từ bất cứ trang nào trong site, muốn tạo liên kết
đến file MCSA.html thì ghi địa chỉ là
ChuongTrinh/Microsoft/MCSA.html
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web

 Cách 5
 Chọn text hoặc hình
 Menu Insert  Hyperlink
 Text: Dòng text hyperlink
 Link: đích
 Target:trang cửa sổ mà trang đích hiện
 Title: tiêu đề của link
 Access Key: nhấn Alt + ký tự và nhấn Enter để liên kết
 Tab Index: trình tự chọn nút khi nhấn phím tab
Tạo liên kết thường
Địa chỉ trang đích
Point to file
Browser for file
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Tạo liên kết
101
 Mục đích: cho phép người dùng tải tập tin về máy.
 Cách tạo:
 Chọn text hay hình ảnh
 Trong Properties nhập vào ô link tên tập tin cần liên
kết.
 Nên nhấn vào để mở hộp thoại Select File để chọn tập tin
cần liên kết.
 Chú ý: nếu tập tin không cùng thư mục của site
hiện thời thì hộp thoại khác yêu cầu sao chép tập
tin này vào trong thư mục của site hiện thời.
Tạo liên kết đến tập tin
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web

Lập trình Web
Hiệu chỉnh liên kết
105
 Bỏ link:
 Kích phải tại text  Remove Tag <a> hoặc Remove
Link
 Chỉnh đích:
 Chọn text
 Chỉnh đích trong mục Link trên thanh Properties
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Link bên trong trang web
106
 Mục đích: xem các mục trong một trang web dài
nhanh chóng.
 Các bước tạo:
 B1: Tạo 1 tên điểm dừng (Anchor Name)
 B2: Link tới Anchor name
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Link bên trong trang web
107
 B1: Tạo Anchor Name
 Nhắp vị trí
 Nhắp menu Insert  Named Anchor (
hoặc Insert bar 
tab Common  nút name Anchor)
 Đặt tên rồi nhắp OK
 B2: Link tới Anchor name
 Chọn text

Lập trình Web
Bản đồ liên kết ảnh (Hotspot)
110
 Một ảnh có nhiều vùng, mỗi vùng liên kết đến một trang web khác.
Dạng này gọi bản đồ liên kết.
 Tạo hotspot
 B1: Chọn hình
 B2: chọn kiểu hotspot (ở góc dưới trái của thanh Properties) rồi vẽ
chuột trên hình
 B3: Nhập địa chỉ liên kết trong mục Link trên thanh Properties
 Sửa hotspot
 B1: Chọn hình
 B2: Chọn hotspot trên hình
 B3: Chỉnh (kích thước, vị trí)
 Xóa hotspot
 B1: Chọn hình
 B2: Chọn hotspot
 B3: Gõ Delete
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Bản đồ liên kết ảnh (Hotspot)
111
 Ví dụ: liên kết đến các trang ứng chi nhánh.
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Các nhóm nút liên kết
112
 Nút biến đổi hình (Rollover Image)
 Flash button
 Flash Text

Flash Button
115
 Là chức năng tạo 1 file flash hoạt động như 1
button.
 Cách tạo:
 Nhắp vị trí muốn chèn
 Menu Insert  Media  Flash Button
 Style: Chọn kiểu nút
 Button text: chữ trong nút (không gõ dấu
unicode, chỉ gõ được với bảng mã vni, font vni)
 Bgcolor: màu nền
 Save as: tên file flash sẽ được tạo ra
 Link: địa chỉ file liên kết (trong site)
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
• Giới thiệu
• Tạo Form
• Thuộc tính của Form
• Các thành phần của Form
FORM
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Giới thiệu
117
 Form dùng để tạo các biểu mẫu thu thập thông tin
của người xem trang web.
 Một Form có thể chứa nhiều thành phần như
TextField, CheckBox, RadioButton, ComboBox,
List/Menu, TextAera…
 Mỗi form phải có ít nhất 1 nút đóng vai trò submit

 Action: tên của file tiếp nhận dữ liệu của Form (URL).
 Method: Là phương thức truyền dữ liệu lên server.
 Có 2 phương thức: Post và get
 Get: Kết hợp giá trị từng phần tử theo cặp tên-giá trị vào phía sau URL của file
nhận dữ liệu.
 Ví dụ: action là file login.php.
 Khi submit sẽ ghép như sau login.php ?username=abc&pass=123
 Post: dữ liệu được ẩn đi khi truyền về server (cũng theo theo dạng key-value).
 Enctype: có giá trị là :
 Application : mặc định, không cần gán
 Mutipart: dùng khi form có 1 file cần upload. Mỗi lần thêm 1 file field vào form,
dw sẽ tự động chỉnh entype thành multipart
 Class: Class css định dạng form
29/08/2012
21
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Các thành phần của Form
121
 Text field
 Radio button
 Radio group
 Check Box
 Select (List/Menu)
 Gửi kèm tâp tin (File field)
 Text area
 Button
 Image Field
 Hidden field
 Field set

Lập trình Web
Thuộc tính Text Field
123
Char width: độ rộng text field tính theo ký tự
Max chars: Số ký tự tối đa mà user có thể nhập
Type: Single line/Multi line/Password ~ dòng
đơn/nhiều hàng chữ/mật khẩu
Init val: Giá trị ban đầu.
Class: class css
Disabled: vô hiệu hóa
Read-only: chỉ đọc
ID
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Radio button
124
 Chọn 1 trong các mục được đưa ra. Nhóm nút này cùng
tên với nhau.
 Cách chèn:
 Nhắp vị trí (trong form) muốn chèn
 Menu Insert  Form  Radio button
(hoặc Insert bar

Tab
form

Radio button)
ID: Tên của Radio Button
Label: Nhãn của Radio Button
Style: cách đặt nhãn.


Radio Group)
Name: Tên chung của các
mục
Label: Nhãn của từng mục
Value: Giá trị của mỗi mục
Layout: chọn xuống hàng
dùng br hoặc table
Xong nhắp OK
29/08/2012
22
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Check Box
127
 Cho phép chọn nhiều mục trong các mục đưa ra.
 Cách chèn:
 Nhắp vị trí (trong form) muốn chèn
 Vào menu Insert  Form  Checkbox
(hoặc Insert bar

Tab
form

Checkbox)
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Select (List/Menu)
128
 Select (List/Menu) là đối tượng dạng box chứa nhiều

 Vào menu Insert  Form  Text Area
(hoặc Insert
bar

Tab form

Text Area)
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thuộc tính của Text area
132
Char width: độ rộng
Num lines: độ cao tính theo số dòng text
Type: Multi line: nhiều hàng chữ
Init val: Giá trị ban đầu.
Class: class css
Disabled: vô hiệu hóa
Read-only: chỉ đọc
ID
29/08/2012
23
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Button
133
 Button là nút lệnh, có thể là: submit dùng để gởi dữ
liệu trong form lên server, reset: xóa dữ liệu trong
form,
 Cách chèn:
 Nhắp vị trí (trong form) muốn chèn

Lập trình Web
Hidden field
137
 Hidden field là đối tượng ẩn, user không thấy, chỉ
có ý nghĩa với người lập trình.
 Ví dụ:
 Trong form đăng ký thành viên, đối tượng
NgayDangKy nên để dạng hidden field
 Trong form để khách đặt hàng, đối tượng NgayMua
nên để dạng hidden field
 Cách chèn:
 Nhắp vị trí (trong form) muốn chèn
 Vào menu Insert  Form  Hidden Field
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thuộc tính của Hidden field
138
Hidden Field: Tên của hidden field Value: Giá trị của hidden field
29/08/2012
24
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Field Set
139
 Dùng để tổ chức các thành phần trong trang
theo từng nhóm.
 Cách chèn:
 Chọn vùng dữ liệu muốn bao quanh bởi fieldset
 Vào menu Insert  Form  Fieldset  Đặt nhãn 
OK

 Để mở cửa sổ khác khi chọn thành phần trong jump
menu:
 Sang Code sửa như sau:
function MM_jumpMenu(targ,selObj,restore)
 Bỏ dòng:
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
 Thay bởi dòng:
var s = selObj.options[selObj.selectedIndex].value;
window.open(s);
 Kết quả code sau khi sửa
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
• Giới thiệu:
• Pannel Behavior
• Pannel Behavior
• Tạo behavior
• Bỏ Behavior
• Các loại behavior
BEHAVIORS TRONG REAMWEAVER
29/08/2012
25
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Giới thiệu
145
 Behavior là các đoạn mã lệnh Javascript được tạo
sẵn.
 Có thể gán 1 behavior cho các đối tượng trong
trang web, mã lệnh javascipt trong behavior sẽ thi
hành khi có 1 sự kiện xảy ra với đối tượng.

 Tác dụng: Gọi 1 lệnh hoặc 1 hàm Javascript.
 Thông số: là các lệnh javascript
 Ví dụ:
alert('Chào bạn');
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Các loại behavior
150
 Change Property:
 Tác dụng: Thay đổi thuộc tính của 1 đối tượng
 Các thông số:
 Type of Element: Tag của đối tượng chịu tác động của hiệu
ứng
 Element ID: Tên của đối tượng chịu tác động của hiệu ứng
 Property: Tên thuộc tính sẽ thay đổi
 New Value: Giá trị ấn định cho thuộc tính

Trích đoạn TẠO MENU BẰNG SPRY MENU BAR

---