Lập trình web .Chương 4: Dreamweaver pptx

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

Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Các loại website
 Xét về kỹ thuật thực hiện: Có thể chia như sau:
 Static website: Là Website tĩnh, nội dung các trang web sẽ
không thay đổi nếu không được người thiết kế hiệu chỉnh lại.
 Dynamic Website: Là Website động, nội dung các trang web
sẽ tự động thay đổi nếu dữ liệu trong cơ sở dữ liệu mà
website kết nối được cập nhật.
 Xét về vị trí lưu: Có thể chia như sau:
 Local Site: Là website đang được lưu trên máy tính của
người thiết kế, chưa đưa lên internet.
 Remote Site: Là website nằm trên máy chủ WebServer. Sau
khi cài đặt một RemoteSite, bạn có thể upload local website
lên đó, để các máy trong hệ thống mạng có thể truy cập
được.
5
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Các loại website
 Xét về tính chất thông tin: Có thể chia như sau:
 Website giới thiệu:
 Là website căn bản và đơn giản nhất, dùng để giới thiệu về một cá nhân
hay một đơn vị.
 Ví dụ: một website của ca sĩ chứa các thông tin về lý lịch, bài hát ưa thích,
lịch diễn của ca sĩ đó
 Website loại này chứa ít trang, ít tốn kém vì dễ làm nhất.
 Website thông tin:
 Chứa nhiều thông tin, được sắp xếp thành nhiều đề mục dễ tra cứu.
Website được cập nhật thường xuyên thông tin mới và được sắp xếp sao

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

 Khi thiết kế Website cần lưu ý 2 vấn đề:
 Nội dung chủ đề chính  chọn bố cục, hệ màu cho
tương ứng, (ví dụ: Website thương mại phải sáng sủa,
rõ ràng về bố cục, …)  thu thập đầy đủ tài liệu, phân
nhóm theo nội dung  quyết định cần bao nhiêu trang,
nội dung của từng trang
 Chọn hình ảnh, logo, Banner, hệ thống nút liên kết, ảnh
minh hoạ, ảnh bố cục, ảnh trang trí…
 Phác họa sơ đồ liên kết trên giấy để thấy rõ mối liên kết
giữa các trang đơn trong một website
Kế hoạch thiết kế một Website (tt)
8
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Một số kiểu liên kết giữa các trang:
9
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Khởi động Dreamweaver
 Start Programs Abobe Dreamweaver
10
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Màn hình Dreamweaver
11
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
 Insert Bar: Gồm các chức năng tiện ích dùng để chèn
các đối tượng vào trang web
 Common: Chèn các đối tượng: Image, Flash, Date,

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

đối tượng đang được chọn, đồng thời cho phép chỉnh
sửa các thuộc tính đó
Panel groups: nhóm các Panel cho phép quản lý các đối
tượng trong trang Web
 Bật / tắt các thanh Panel: Chọn menu Window  Chọn
thanh Panel tương ứng
 Mở rộng các thanh Panel: Click vào mũi tên ở góc trái của
mỗi Panel
Màn hình Dreamweaver
14
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Status bar: Thanh trạng thái, nằm dưới đáy của
Document Window, hiển thị Tag Selector, Window size,
Document size và Download time.
 Tag Selector: Hiển thị các tag HTML tại vị trí hiện hành
của con trỏ
 Document size and Download time: Kích cở ước chừng
của tài liệu và thời gian tải tài liệu xuống
 Window size: Hiển thị kích thước hiện tại của tài liệu,
được tính bằng Pixel. Khi định kích thước của trang web
phải tính đến việc sao cho an toàn đối với mọi độ phân
giải.
Màn hình Dreamweaver
15
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thao tác với Website
16
 Bước 1: Menu Site  New Site

 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

 Nhắp Next
(Sẽ khai báo cách thức nết nối sau)
 Bước 6: Nhắp nút Done kết thúc tạo site
Tạo site
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thao tác với Website
20
 Menu Site  Manage Sites
 Chỉnh site đã tạo:
 Chọn site muốn chỉnh rồi nhắp nút Edit.
Bạn sẽ được dẫn qua các câu hỏi đã gặp
lúc tạo site. Muốn chỉnh thông số nào
thì chỉnh khi thấy nó.
 Sao chép cấu hình của site
 Chọn site muốn sao chép rồi nhắp
nút Duplicate.
 Xóa cấu hình site
 Chọn site muốn xóa rồi nhắp
nút Remove. Các thông số về site sẽ
mất, nhưng folder chứa site vẫn còn.
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 Website
21
 Export
 Export khi muốn xuất những thông
số về site ra 1 file text
 Chọn site muốn export rồi nhắp

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

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
24
 Xem thử trang web
 Nhấn phím F12 để xem thử
 Hoặc
 Thiết lập Browser khác: (Mặc định là IE)
Preview Web
1
2
3
29/08/2012
5
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thao tác với trang
25
 Các chế độ làm việc với trang web:
 Chế độ Code: Là chế độ để xem và làm việc với code HTML của trang.
 Chế độ Design: Là chế độ chủ yếu để xem và làm việc với trang. Trang
web sẽ hiện gần giống hệt theo ý của bạn ở chế độ này.
 Chế độ Split: chia đôi màn hình. Phía trên hiện code HTML, phía dưới là
chế độ Design.

 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

Lập trình Web
Thao tác với trang
28
 Tab Apperrance
 Page font: Font mặc định cho trang.
 Size: Cỡ chữ mặc định cho trang.
 Text color: Màu chữ mặc định cho trang.
 Background color: Màu nền cho trang.
 Background image: Ảnh nền trang web
 Repeat: Cách lặp lại ảnh nền
 No Repeat: Không lặp lại ảnh nền
 Repeat-x: Lặp lại ảnh nền theo chiều ngang trang web
 Repeat-y: Lặp lại ảnh nền theo chiều dọc trang web
 Repeat : Lặp lại ảnh nền theo chiều ngang và chiều dọc trang web
 Left margin: lề trái trang web
 Right margin: lề phải trang web
 Top margin: lề trên trang web
 Bottom margin: lề dưới trang web
 Tab Title/Encoding
 Title: Tiêu đề của trang web
 Encoding: chọn Unicode (UTF-8)
Thuộc tính trang
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thao tác với trang
29
 Tab Links:
 Link font: font chữ liên kết (cùng với font của trang)
 Size: cỡ chữ liên kết (pixel)
 Link color: màu liên kết

 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ục
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Paragraph
32
 Định dạng paragraph và text:
 Chọn chữ rồi dùng các nút trên thanh Properties:
Công cụ Ý nghĩa
Kiểu trình bày (tag) chứa đoạn: Heading1, Heading2,
Font (Arial, Tahoma, Time New Roman, Vernada,…)
Chọn các style CSS đã định nghĩa
Cỡ chữ.
Màu chữ. Mỗi màu là con số hệ 16, bắt đầu bằng dấu #.
Có thể chọn bảng màu khác, hoặc hiện bảng chọn mọ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
33
 Định dạng paragraph và text:
 Chọn chữ rồi dùng các nút trên thanh Properties:
Công cụ Ý nghĩa
Chữ đậm
Chữ nghiêng
Chọn các style CSS đã định nghĩa
Cỡ chữ.
Màu chữ. Mỗi màu là con số hệ 16, bắt đầu bằng dấu #.
Có thể chọn bảng màu khác, hoặc hiện bảng chọn mọ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

7
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Sử dụng hộp màu trong Dreamweaver
37
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Định dạng danh sách
38
 UnOdered list
 Là list gồm nhiều mục dạng liệt kê. Mỗi mục có 1 ký
hiệu (bullet) ở đầu
 Thực hiện : Chọn text rồi vào menu Text  List 
UnOrdered List
Chú ý :
List dạng này
nằm trong
tag UL, mỗi
mục nằm
trong tag li
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Định dạng danh sách
39
 Ordered list
 Là list gồm nhiều mục dạng liệt kê. Mỗi mục có 1 con
số ở đầu
 Thực hiện: Chọn text rồi vào menu Text  List 
Ordered List
Chú ý : List

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

 Cho biết các thông số của iframe:
 Source: Địa chỉ trang web nằm trong iframe, trang ở website
khác cũng được. Ví dụ: các file thông tin chứng khoán, thời
tiết, giá vàng, ngoại tệ ở site khác
 Name: tên iframe Width: độ rộng
 Height: độ cao Alignment: cách canh
 Scrolling: có hiện thanh cuộn không.
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Iframe
42
 Xong OK
 Nhắp Close
29/08/2012
8
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Marquee
43
 Marquee là thanh cuộn, các đối tượng có thể đặt
vào đó các hình ảnh, text … có thể được cuộn qua
trái, qua phải, cuộn lên, cuộn xuống…
 Thực hiện:
 B1: Nhắp vị trí muốn chèn trong trang web.
 B2: Chuyển qua cửa sổ code.
 B3: Gõ tag marquee rồi gõ phím spacebar (khoảng
trắng)  chọn thuộc tính của đối tượng marquee.
 B4: Khi gõ xong các thuộc tính thì nhớ gõ dấu “>”
 B5: Bạn gõ bất kỳ Text hoặc chèn hình vào.
 B6: Gõ </marquee> để kết thúc tag marquee.

 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

• Chèn table
• Thuộc tính của table
• Các thao tác với table
TABLE
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Giới thiệu
47
 Dùng để tạo dữ liệu dạng bảng hoặc thiết kế layout
 Mỗi table có cấu trúc html như sau:
<table>
<tr>
<!—Mỗi hàng trong tag tr >
<th> Dữ liệu trong ô 1</th>
<th> Dữ liệu trong ô 2 </th>
…
</tr>
<tr>
<!—Mỗi ô trong trong tag th hoặc td >
<td> Dữ liệu trong ô 1</td>
<td> Dữ liệu trong ô 2 </td>
…
</tr>
</table>
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Chèn table
48
 Nhắp vị trí muốn chèn rồi vào menu Insert 
Table

(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

Độ dày khung viền
Tên class css định dạng table
Xóa thuộc tính width của các cột
Xóa thuộc tính height của các hàng
Chuyển đơn vị tính bề rộng cột thành pixels, %
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thuộc tính của Ô (Cell)
51
Trộn ô
Tách ô
Canh nội dung theo chiều dọc
Độ cao của ô
Chuyển ô dữ liệu thành ô tiêu đề
Canh nội dung theo chiều ngang
Độ rộng của ô
Cho/Không cho text tự động xuống dòng trong ô.
Màu nền cho ô.
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Các thao tác với table
52
 Thêm xóa hàng, cột
 Thêm hàng, cột
 Chọn 1 ô trong hàng/cột hiện hành rồi nhắp phải 
Table  chọn lệnh:
 Insert Row: chèn hàng phía trên
 Insert Column: chèn cột bên trái
 Insert Rows or Column: chèn hàng hoặc cột ở phía trên/phía
dưới, bên trái hoặc bên phải ô hiện hành

 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

• Giới thiệu
• Panel CSS
• Tạo Style
• Quản lý style
• Attach file CSS
• Các thuộc tính CSS
CSS - Cascade Style Sheet
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Giới thiệu
57
 CSS là 1 kỹ thuật dùng để định nghĩa cách thể hiện của
các đối tượng trong trang web. CSS cho phép bạn định
dạng các đối tượng với rất nhiều đặc điểm (thuộc tính)
mở rộng mà HTML thông thường không có.
 CSS còn có những lợi điểm khác:
 Định dạng trang web rất nhanh nhờ các style định dạng các tag,
các style dạng class.
 Giúp cho website của bạn có một sự nhất quán về cách trình bày
các trang web.
 Việc hiệu chỉnh trên CSS sẽ tự động cập nhật trên tất cả các nơi
có dùng CSS.
 Các định nghĩa css có thể được đặt trong 1 file riêng với các
trang web, do đó giúp cho công việc trình bày trang web được
độc lập với thiết kế cấu trúc trang web, thích hợp với các dự án
làm việc nhiều người.
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Giới thiệu
58

 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

Panel CSS
60
 Là panel dùng để tạo và quản lý các style.
 Mở panel CSS bằng cách:
 C1: Nhắp menu Window  chọn CSS Styles  All
 C2: Gõ phím Shift + F11.
 C3: Nhắp chữ CSS bên phải của vùng soạn thảo
29/08/2012
11
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Tạo Style
61
 Định dạng cho 1 tag trong toàn trang
 Định dạng cho 1 đối tượng cụ thể có tên
 Định dạng cho 1 tag bên trong 1 đối tượng có tên
 Class
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Định dạng cho 1 tag trong toàn trang
62
 Tên style:
 Giống tên của tag muốn định dạng
 Ví dụ:
 Muốn định dạng cho tag p, tạo style tên là p
 Cách tạo:
 Nhắp + trong panel CSS
 Select type: chọn Tag
 Seletor Name: tên của style (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…) 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)

 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
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
65
 Cách tạo:
1
2
3
(1) Select type: chọn Compound
(2) Seletor Name: tên của style (#Tên )
(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 tag bên trong 1 đối tượng có tên
66
 Tên style:
 #TênĐốiTượng TênTag (Là #TênĐốiTượng kèm với
tênTag muốn định dạng)
 Ví dụ:
 Muốn định dạng cho tag img trong đối tượng tên là quangcao, tạo style tên
là #quangcao img
 Cách tạo:
 Nhắp + trong CSS panel

 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

 Cách tạo
 Nhắp + trong CSS panel
 Select type: chọn Class
 Selector Name: đặt tên style (.TênClass)
 Rule Definition: Chọn nơi đặt style. (This document, New
Style Sheet)
 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
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
69
 Cách tạo:
1
2
3
(1) Select type: chọn Class
(2) Seletor Name: tên của style (.TênClass )
(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 tag bên trong 1 đối tượng có tên
70
 Set Class:
 C1: Chọn đối tượng rồi nhắp phải tại tên của tag (trên
thanh Tag)  chọn Set Class  chọn class
 C2: nhắp phải tại đối tượng  CSS Styles  chọn
class
 Chú ý: Khi set class cho 1 đối tượng, nếu qua code bạn

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

 Dùng khi muốn liên kết trang web hiện tại với 1 file
CSS đã có
 Thực hiện:
 C1: Nhắp nút Attach (hình số 8 nằm ngang) trong CSS
panel  nhắp nút Browse để chọn file CSS
 C2: Nhắp menu Text  CSS Styles  Attach Style
Sheet  nhắp nút Browse để chọn file CSS
29/08/2012
13
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Các thuộc tính CSS
73
 Trong hộp CSS Rule
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Định dạng liên kết
74
 A:link định dạng cho tất cả liên kết chưa được
nhắp trong trang
 A:visited định dạng cho tất cả liên kết đã được
nhắp trong trang
 A:hover định dạng cho liên kết trong trang đang
được đưa chuột vào
 A:active định dạng cho liên kết trong trang đang
được nhắp (chưa nhả chuột)
 A định dạng cho tất cả liên kết trong trang
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Định dạng liên kết

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

 #TênBảng th định dạng cho các ô tiêu đề trong bảng
 #TênBảng caption định dạng cho nhãn của bảng
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
• Tổng quan
• Chèn ảnh vào trang web
• Ảnh nền trang
• Chèn flash
MEDIA
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Tổng quan
78
 Hình ảnh được sử dụng trong trang trí, bố cục trang
như logo, banner,
 Có 2 nhóm hình ảnh: minh họa và ảnh nền.
 Tùy thuộc từng yêu cầu cụ thể mà chọn ảnh có kích
thước, KB phù hợp
 Các kiểu hình ảnh: GIF, JPG,
 Lưu ảnh vào một thư mục riêng  dễ quản lý
 Kích thước hình ảnh: tùy thuộc vào nhóm hình ảnh
minh họa, ảnh nền mà xử lý kích thước cho phù
hợp.
29/08/2012
14
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Tổng quan
79
 Một số loại hình ảnh

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õ

địa chỉ của hình trong mục URL
(nếu hình có trên
Internet)
 B4: Alternate Text: Text thay thế cho hình
(nếu cần)
 Long description: gõ url của file mô tả hình
(nếu cần)
. Muốn cho
user đến đó thì dùng javascript.
 Xong nhắp OK
Chèn hình
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Hình ảnh
81
Chèn hình
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Hình ảnh
82
 Chọn hình
 Trên thanh Properties, có thể chỉnh:
 Vspace/Hspace: Khoảng cách từ hình tới chữ theo chiều dọc/ chiều
ngang
 W: bề rộng của hình.
 H: bề cao của hình.
 Src: địa chỉ, tên file hình.
 Link: địa chỉ trang web sẽ hiện khi user nhắp vào hình.
 Target: chỉ định “nơi” mà trang web liên kết sẽ mở ra. Nếu chỉ định
là _blank thì trang liên kết sẽ được mở ra trong một cửa sổ mới.

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

29/08/2012
15
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Hình ảnh
85
 Mục đích: chiếm chỗ trước cho 1 ảnh chưa có trong
trang web.
 Cách chèn:
 Menu Insert  Image Object  Image Placeholder
Chèn khung ảnh
 Name: Tên đại diện
 Width: chiều rộng
 Height: chiều cao
 Color: màu cho khung
 Alternate text: nội dung câu
thông báo khi rê chuột vào
khung
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Hình ảnh
86
 Kích đúp vào khung ảnh cần chèn ảnh
 Hộp thoại Select Image source, chọn ảnh cần chèn.
Chèn ảnh vào khung ảnh
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Ảnh nền trang
87
 Ảnh nền là ảnh được tự động lợp đầy trang web.

 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ục URL.
 Ví dụ: chọn file MuaRoiBangTay.flv trong folder media
 Chỉ định rộ rộng, độ cao
 Nhắp OK
29/08/2012
16
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Chèn nhạc và phim
91
 Nhắp vị trí
 Menu Insert è Media è Plugin è chọn file nhạc/phim
 Chỉnh kích thước : kéo cho rộng ra, cao lên
 Kết quả trình duyệt hiện trang web :
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
1. Giới thiệu về liên kết
2. Tạo một liên kết
3. Kiểm tra liên kết
4. Hiệu chỉnh liên kết
5. Liên kết bên trong trang web
6. Bản đồ liên kết ảnh
7. Các nhóm nút liên kết
HYPERLINK – TẠO LIÊN KẾT GIỮA CÁC TRANG
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Giới thiệu về liên kết
93
 Liên kết (hyperlink) nhằm nối các trang đơn thành
một website.

 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ỉ

95
 Địa chỉ tương đối:
 Là địa chỉ không đầy đủ. Không có protocol
và domain
 Thường dùng để liên kết giữa các trang trong nội bộ
website
 Khi dùng địa chỉ tương đối, phải biết mình đang ở
đâu, liên kết đến đâu.
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Các loại địa chỉ
96
 Ví dụ Địa chỉ tương đối:
 gioithieu.html tạo liên kết đến index.html thì địa
chỉ: index.html
 gioithieu.html tạo liên kết đến CCNA.html thì địa
chỉ: ChuongTrinh/ccna.html
 gioithieu.html tạo liên kết đến MCSA.html thì
địa chỉ: ChuongTrinh/Microsoft/MCSA.html
 CCNA.html tạo liên kết đến index.html thì địa
chỉ là /index.html
 MCSA.html tạo liên kết đến index.html thì địa
chỉ là / /index.html
NhatNghe/
gioithieu.html
index.html
CHUONGTRINH
ccna.html
MICROSOFT
MCSA.html

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

Tạo liên kết
98
 Tạo liên kết thường
 Tạo liên kết đến tập tin
 Tạo liên kết đến địa chỉ email
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Tạo liên kết
99
 Cách 1:
 Chọn text hoặc hình
 Gõ địa chỉ trong mục Link trên thanh Properties (dùng khi link đến
site khác)
 Cách 2:
 Chọn text
 Nhắp nút Browse (sau mục Link trên thanh Properties) để chọn file
 Cách 3:
 Chọn text hoặc hình
 Kéo file bỏ vào mục Link
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
100
 Cách 4:
 Chọn text hoặc hình
 Kéo nút Point-to-File trỏ đến file đích

 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

Tạo liên kết
102
 Mục đích: tạo liên kết đến chương trình gửi thư điện
tử.
 Cách tạo:
 Chọn text hoặc ảnh
 Menu Insert  Email Link
 Text: Dòng text hyperlink
 Email: địa chỉ mail
 OK
 Hoặc: gõ trực tiếp vào ô link trong properties theo cú
pháp sau:
 mailto: địa chỉ email
Tạo liên kết đến địa chỉ email
29/08/2012
18
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Kiểm tra liên kết
103
 Kiểm tra một liên kết trong DESIGN VIEW
 Kiểm tra tất cả liên kết CHECK LINKS
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Kiểm tra liên kết
104
 Kiểm tra một liên kết trong DESIGN VIEW
 Kiểm tra tất cả liên kết CHECK LINKS
Kiểm tra trong DESIGN VIEW
Khoa NN-TH Trường CĐSP DakLak

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

 Mục Link gõ #TênAnchor

Chú ý
: Anchor Name có phân biệt chữ hoa thường,
không khoảng trắng, không trùng nhau
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Link bên trong trang web
108
 Ví dụ: tạo liên kết cho phân loại và sử dụng
1: Insert  Named Anchor
2: OK
2
1
2
1
29/08/2012
19
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Link bên trong trang web
109
 Ví dụ: tạo liên kết cho phân loại và sử dụng
1: Gõ Anchor Name vào Link
2: Kết quả trong trình duyệt
2
1
2
1
Khoa NN-TH Trường CĐSP DakLak

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

Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Nút biến đổi hình (Rollover Image)
113
 Rollover Images là hiệu ứng khi đưa chuột vào thì hình đó sẽ đổi
thành 1 hình khác, khi chuột ra ngoài nó sẽ trở lại hình cũ.
 Cách tạo:
 B1: Nhắp vị trí muốn chèn
 B2: Menu Insert  Image Object  RollOver Image hoặc Insert bar 
tab Common  Images  RollOver Images
 B3: Khai báo thông số
 Image Name: đặt tên.
 Original image: chọn hình thứ nhất , hình này hiện ra trước tiên.
 Rollover image: chọn hình 2, hình này sẽ hiện ra khi đưa chuột vào hình 1.
 Preload rollover image: load 2 hình khi trang web vừa nạp xong
 Alternate text: chữ hiện ra thay thế cho hình khi hình chưa/không hiện.
 URL: địa chỉ trang web liên kết đến khi người xem nhắp chuột vào.
 Chú ý:
 Nếu muốn đổi địa chỉ của hình 2 thì chuyển sang chế độ code.
 2 hình không nhất thiết giống cỡ nhau
 URL là tuyệt đối nếu như link đến ngoài site
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Nút biến đổi hình (Rollover Image)
114
 Ví dụ: chuyển đổi 2 hình
29/08/2012
20
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web

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

(đưa dữ liệu lên server)
 Mỗi form có thể có 1 nút giúp xóa hết dữ liệu được
gõ trong form (nút Reset)
 Mỗi form nằm trong tag form
 Một trang web có thể có nhiều Form, các form
không được lồng nhau
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Giới thiệu
118
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Tạo Form
119
 Nhắp vị trí muốn chèn form
 Menu Insert  Form  Form
(hoặc Insert bar

tab Form

Form)
Chú ý: Khi chèn xong form thấy 1 hình chữ nhật đỏ đánh dấu
form trong cửa sổ Dreamveaver. Tuy nhiên hình chữ nhật này sẽ
không hiện trong cửa sổ Browser.
Tag Form trong chế độ Code
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thuộc tính của Form
120
 Form Name: là tên của form (duy nhất, không khoảng trắng)

 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

 JumpMenu
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Text Field
122
 Là thành phần trong form cho phép user gõ 1 hàng chữ
 Cách chèn:
 Nhắp vị trí (trong form) muốn chèn
 Vào menu Insert  Form  Text Field
(hoặc Insert bar

Tab
form

Text field)
ID: Tên của text field
Label: Nhãn của text field
Style: cách đặt nhãn.
• Wrap with label tag: tag label bao trùm
nhãn và tag input
•Attach label tag: nhãn nằm trong tag
label, tách biệt với tag input
•No label tag: Không có tag label
Position: vị trí nhãn so với text field
(Before, After)
Access key: Phím tắt (Gõ Alt +
Access key)
Tab Index: thứ tự tab để user di
chuyển qua các đối tượng có thứ tự.
Khoa NN-TH Trường CĐSP DakLak

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.

• Wrap with label tag: tag label bao trùm
nhãn và tag input
•Attach label tag: nhãn nằm trong tag
label, tách biệt với tag input
•No label tag: Không có tag label
Position: vị trí nhãn (Before, After)
Access key: Phím tắt (Alt + Access
key)
Tab Index: thứ tự tab
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thuộc tính của Radio button
125
Checked value: giá trị của đối tượng.
Nếu có check thì giá trị này truyền về server.
Nếu không check thì giá trị không truyền về server
Initial state: Giá trị khởi đầu. Checked hoặc Unckecked
Class: Tên Css
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Radio Group
126
 Giúp chèn 1 lần nhiều nút Radio.
 Cách chèn:
 Nhắp vị trí (trong form) muốn chèn
 Menu Insert  Form  Radio Group
(hoặc Insert bar

Tab
form


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

item (mục) bên trong và cho phép chọn hoặc nhiều mục
trong box.
 Cách chèn:
 Nhắp vị trí (trong form) muốn chèn
 Vào menu Insert  Form  Select (List/Menu)
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thuộc tính của Select (List/Menu)
129
List Values: Thêm bớt các mục (name, value)
Type: cách hiển thị
Allow multiple: cho phép user chọn nhiều mục
Initially selected: mục chọn mặc định
Height: Chiều cao box
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Gửi kèm tập tin (File field)
130
 Cho phép chọn file trên máy để đưa lên server.
 Cách chèn:
 Nhắp vị trí (trong form) muốn chèn
 Vào menu Insert  Form  File Field
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Text area
131
 Là thành phần trong form cho phép nhiều hàng
chữ
 Cách chèn:
 Nhắp vị trí (trong form) muốn chèn

 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

 Vào menu Insert  Form  Button
Label: Không gõ
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thuộc tính của Button
134
Value: Dòng chữ trong nút.
Action: chức năng của nút submit, reset, none
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Image Field
135
 Image Field là hình đóng vai trò như nút submit nhưng có hình.
 Cách chèn:
 Nhắp vị trí (trong form) muốn chèn
 Vào menu Insert  Form  Image Field  Chọn file.
 Chú ý:
 Đối tượng này nằm trong tag input, không phải là hình thông
thường
(Hình thông thường nằm trong tag img)
 Không Image field đóng vai trò reset
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Thuộc tính của Image Field
136
Alt: Dòng chữ khi chuột lướt qua
Src: Đường dẫn tới ảnh
Align: vị trí ảnh với các đối tượng khác
Edit Image: Gọi chương trình xử lý ảnh
Khoa NN-TH Trường CĐSP DakLak

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

 Chú ý: Fieldset không nhất thiết dùng trong
form, có dùng để bao quanh các đối tượng bình
thường
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Ví dụ Field Set
140
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Jump Menu
141
 Dùng để tạo ra 1 select box để user chọn mà
chuyển đến site khác.
 Cách chèn:
 Nhắp vị trí muốn chèn
 Vào menu Insert  Form  Jump Menu
 Nhập tên và địa chỉ các website
 OK
 Chú ý:
 JumpMenu không nhất thiết dùng trong form, có thể
đặt bên ngoài form
 URL: phải gõ đầy đủ (ví dụ )
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Ví dụ Jump Menu
142
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Jump Menu
143

 Để 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.

 Có thể gán cho một đối tượng nhiều behavior.
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Pannel Behavior
146
 Là nơi liệt kê các behavior của các đối tượng. Nơi
bạn có thể tạo, chỉnh, xoá các behavior
 Hiện pannel Behavior: Vào menu Window 
Behavior
Thêm
Behavior
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Tạo behavior (các bước chung)
147
 B1: Chọn 1 đối tượng HTML sẽ có behavior
 B2: Nhắp dấu + trong panel Behavior rồi chọn loại
behavior
 B3: Khai báo các tham số cho Behavior
 B4: Chọn sự kiện muốn áp behavior
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Xóa bỏ Behavior
148
 Nhắp Behavior Delete
Khoa NN-TH Trường CĐSP DakLak
Lập trình Web
Các loại behavior
149
 Call Javascript:

 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