SlideShare a Scribd company logo
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
CHƯƠNG 1. TẠO TRANG WEB VỚI HTML
1.1. Mở đầu
1.1.1. Giới thiệu về các công cụ thiết kế Web
a/ Khái niệm về Web
WWW ( World Wide Web) hay Web là một dịch vụ thông tin; một phần
của Internet, bao gồm nhiều máy chủ Web server trên khắp thế giới. Các Web
server này chứa thông tin mà người dùng ở bất kỳ đâu cũng có thể truy nhập
được.
ng.
Website là tập hợp của rất nhiều trang web - một loại siêu văn bản (tập tin
dạng HTML hoặc XHTML)
HomePage (Trang chủ): là trang mà bộ trình duyệt web sẽ mở ra đầu tiên mỗi
khi người dùng bắt đầu dùng website.
Web Page (Trang Web): trang thông tin có chứa các siêu văn bản..
Web site: Là một số các trang Web liên kết với nhau.
World Wide Web (www): Là dịch vụ toàn cầu của Internet mà HTML là nền
tảng.
b/ Các công cụ thiết kế web
 Sử dụng trình soạn thảo NotePad có sẵn trong Windows:
Start --> Programs --> Accessories --> NotePad
1
Internet
HTMLHTML……
……………………………………
………………...………………...
......
http://www.tlttp.edu.vnhttp://www.tlttp.edu.vn
Xử lý yêuXử lý yêu cầucầu
Web
Server
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 FrontPage, DreamWare, Visual Studio, Notepadd++,…
1.1.2. Trang Web tĩnh, trang web động
a/ Trang Web tĩnh
- Trang web tĩnh thường được xây dựng bằng các ngôn ngữ HTML, PHP,…
- Trang web tĩnh thường được dùng để thiết kế các trang web có nội dung ít
cần thay đổi và cập nhật.
- Website tĩnh là website chỉ bao gồm các trang web tĩnh và không có cơ
sở dữ liệu đi kèm.
- Website tĩnh thích hợp với cá nhân, tổ chức, doanh nghiệp vừa và nhỏ
mới làm quen với môi trường Internet.
* Ưu điểm cơ bản:
- Thiết kế đồ hoạ đẹp
- Tốc độ truy cập nhanh
- Thân thiện hơn với các máy tìm kiếm (search engine)
- Chi phí đầu tư thấp
* Nhược điểm cơ bản:
- Khó khăn trong việc thay đổi và cập nhật thông tin .
- Thông tin không có tính linh hoạt, không thân thiện với người dùng
- Khó tích hợp, nâng cấp, mở rộng: Khi muốn mở rộng, nâng cấp một
website tĩnh hầu như là phải làm mới lại website.
b/ Trang web động
- Web động là thuật ngữ được dùng để chỉ những website có cơ sở dữ liệu
và được hỗ trợ bởi các phần mềm phát triển web.
- Web động thường được phát triển bằng các ngôn ngữ lập trình tiên tiến
như PHP, ASP, ASP.NET, Java và sử dụng các cơ sở dữ liệu quan hệ mạnh như
Access, My SQL, MS SQL, Oracle,
- Thông tin trên web động luôn luôn mới vì nó dễ dàng được bạn thường
xuyên cập nhật thông qua việc sử dụng các công cụ cập nhật của các phần mềm
2
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
quản trị web . Thông tin luôn được cập nhật trong một cơ sở dữ liệu và người
dùng Internet có thể xem những chỉnh sửa đó ngay lập tức.
1.1.3. Các bước thiết kế website
Website là một thứ không thể thiếu của mỗi doanh nghiệp trong nền kinh
tế hiện nay, nó là nơi để khách hàng của doanh nghiệp có thể tìm kiếm sản
phẩm, là cầu nối giữa khách hàng và doanh nghiệp, và tất nhiên nó cũng là nơi
để doanh nghiệp quảng bá sản phẩm tới khách hàng của mình
a/ Để có được một Website hoạt động cần phải thực hiện các công việc sau:
Bước 1: Đăng ký tên miền
Tên miền (Domain name) là một tên dễ nhớ để gán cho một địa chỉ trên
internet, thí dụ: http://www.tlttp.edu.vn, www.business.com ... Nó thay thế cho
một dải những địa chỉ IP (gọi là Internet Protocol numbers). Có thể hiểu tên
miền như là địa chỉ (số nhà) trên mạng Interrnet. Nếu đơn vị có Website tham
gia hoạt động trên mạng internet thì đăng ký một tên miền là việc đầu tiên cần
làm, tên miền riêng khẳng định vị trí, giúp khách hàng dễ tìm đến trang web của
đơn vị, vừa bảo vệ thương hiệu của đơn vị đó trên Interrnet.
Bước 2: Thuê máy chủ (web hosting):
Web hosting là không gian trên máy chủ có cài dịch vụ Internet như ftp,
www,... nơi đó có thể chứa nội dung trang web hay dữ liệu. Lý do chúng ta phải
thuê Web Hosting để chứa nội dung trang web, dịch vụ mail, ftp,... vì những
máy tính đó luôn có một địa chỉ cố định khi kết nối vào Internet (đó là địa chỉ IP
tĩnh), còn như nếu ta truy cập vào internet như thông thường hiện nay thông qua
các IPS (Internet Service Provider - Nhà cung cấp dịch vụ Internet) thì địa chỉ IP
trên máy bạn luôn bị thay đổi, do đó dữ liệu trên máy của bạn không thể truy cập
được từ những máy khác trên Internet
Bước 3: Thiết kế website
Tuỳ theo quy mô và nhu cầu của từng cá nhân, đơn vị và doanh nghiệp,
các website sẽ có các chức năng, và độ phức tạp khác nhau.
Bước 4: Duy trì website
3
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
Website sau khi được xây dựng, cần thường xuyên cập nhật thông tin để
đảm bảo độ tươi mới của nó.
Bước 5: Quảng bá Website
Để website của bạn hoạt động có hiệu quả nhất, ngoài việc in địa chỉ
website trên danh thiếp của công ty, còn có thể quảng bá trên các phương tiện
thông tin đại chúng, các mạng thương mại, báo chí và các trang web điện tử.
b/ Các bước thiết kế một Website
Một website thông thường được chia làm 2 phần:
- giao diện người dùng (front-end)
•
• Phần Back-end là phần lập trình của website lưu trữ trên máy chủ.
• Sự khác nhau ở phần lập trình back-end của website làm phân ra 2 loại
website: Website tĩnh và Website động
Các bước để thiết kế một website gồm 7 giai đoạn
Giai đoạn 1: Thu thập thông tin từ khách hàng
- Tìm hiểu yêu cầu thực tế của khách hàng.
- Xác nhận các yêu cầu của khách hàng về trang Web và các thông tin
khách hàng cung cấp.
Giai đoạn 2: Giai đoạn phân tích
- Dựa vào những thông tin và yêu cầu thiết kế website của khách
hàng, phân tích rõ ràng mục đích, yêu cầu, nguyện vọng của khàch hàng.
- Lập kế hoạch thực hiện dự án
- Căn cứ trên kết quả khảo sát, thông tin do khách hàng cung cấp thiết kế
lập cấu trúc cho website và thiết kế chung cho toàn hệ thống.
Giai đoạn 3: Giai đoạn thiết kế
- Xem xét chi tiết yêu cầu và tiến hành thiết kế website
- Tiến hành xử lý hiệu ứng ảnh, thu thập tài liệu liên quan
- Kiểm tra sản phẩm để đảm bảo tính thẩm mỹ và thống nhất.
4
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
Giai đoạn 4: Giai đoạn xây dựng
- Xây dựng cơ sở dữ liệu dựa trên thiết kế.
- Soạn thảo nội dung tài liệu, chỉnh sửa hoàn thiện nội dung rồi đưa lên
trang web.
- Tiến hành kiểm tra, chỉnh sửa và thực hiện nghiệm thu nội bộ
Giai đoạn 5: Giai đoạn chạy thử
- Tổng hợp nội dung, xây dựng hệ thống theo thiết kế.
- Kiểm tra và sửa lỗi.
- Lắp ghép thiết kế với phần mềm, đảm bảo không sai lệch với thiết kế và
phần mềm hoạt động tốt.
- Chạy thử hệ thống trong vòng 01 tuần.
Kiểm tra và sửa.
Giai đoạn 6: Giai đoạn nghiệm thu
- Khách hàng duyệt dự án: khách hàng duyệt chất lượng dự án.
- Đăng tải hệ thống: đảm bảo hệ thống chạy tốt.
Giai đoạn 7: Giai đoạn chuyển giao
1.1.5. Tổ chức một website
- Tổ chức tài liệu: tựa đề, tiêu đề, đoạn văn, đường kẻ ngang, danh sách,
bảng.
- Thu ngắn văn bản.
- Bố trí hình ảnh nhỏ gọn, hợp lý.
1.1.6. Các trình duyệt Web (Web browser)
1.2. HTML
1.2.1. Giới thiệu HTML
a/ HTML là gì ?
5
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
HyperText Markup Language (HTML) – Ngôn ngữ đánh dấu siêu văn
bản. Bao gồm các đoạn mã chuẩn với các quy ước được thiết kế để tạo các trang
Web và được hiển thị bởi các trình duyệt Web.
Đánh dấu (Markup): HTML là ngôn ngữ của các thẻ đánh dấu - Tag. Các thẻ
này xác định cách thức trình bày đoạn văn bản tương ứng trên màn hình.
(Language): HTML là một ngôn ngữ tương tự như các ngôn ngữ lập trình, tuy
nhiên đơn giản hơn. Nó có cú pháp chặt chẽ để viết các lệnh thực hiện việc trình
diễn văn bản. Các từ khoá có nghĩa xác định được cộng đồng Internet thừa nhận
và sử dụng. Ví dụ b = bold, ul = unordered list, ...
(Text): HTML đầu tiên và trước hết là để trình bày văn bản và dựa trên nền tảng
là một văn bản. Các thành phần khác như hình ảnh, âm thanh, hoạt hình.. đều
phải cắm neo vào một đoạn văn bản nào đó.
(Hyper): HTML cho phép liên kết nhiều trang văn bản rải rác khắp nơi trên
Internet. Nó có tác dụng che dấu sự phức tạp của Internet đối với người sử dụng.
Người dùng Internet có thể đọc văn bản mà không cần biết đến văn bản đó nằm
ở đâu, hệ thống được xây dựng phức tạp như thế nào. HTML thực sự đã vượt ra
ngoài khuôn khổ khái niệm văn bản cổ điển.
b/ Những ứng dụng của HTML
Các trang Web đầy sinh động mà chúng ta thấy trên World Wide Web là
các trang siêu văn bản được viết bằng ngôn ngữ đánh dấu siêu văn bản. HTML
cho phép bạn tạo ra các trang phối hợp hài hòa văn bản thông thường với hình
ảnh, âm thanh, video, các mối liên kết đến các trang siêu văn bản khác...
1.2.2. Tạo một trang Web mới
- Mở môi trường mà bạn muốn soạn thảo tài liệu HTML..
Start -> Program -> Accessories -> NotePad.
Chú ý:
+ Khi ghi tài liệu HTML vào ổ đĩa nhớ ghi đầy đủ phần mở rộng là HTM
hoặc HTML
6
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
+ Nếu sử dụng môi trường soạn thảo là NotePad trên Windows thì ghi ghi tài
liệu HTML vào ổ đĩa phải chọn Encoding là UTF-8 để hiển thị tiếng Việt.
+ Nhiều dấu cách liền nhau cũng chỉ có tác dụng như một dấu cách, phải sử
dụng thẻ để thể hiện nhiều dấu giãn cách liền nhau..
+ Enter để xuống dòng được xem như một dấu cách, để xuống hàng thì phải
sử dụng thẻ tương ứng.
+ Có thể viết tên thẻ không phân biệt chữ in thường và in hoa.
+ Vì các kí tự dấu lớn hơn > , dấu nhỏ hơn < đã được dùng làm thẻ đánh
dấu, do đó để hiển thị các kí tự này HTML quy định cách viết &gt(cho dấu lớn
hơn); &lt(cho dấu nhỏ hơn).;
+ Có thể chèn các dòng bình luận, chú thích vào trang mã nguồn bằng cách
đặt chúng giữa cặp dấu <!-- và -- >
1.2.3. Các thành phần của một trang HTML
a/ Tag (thẻ) HTML là gì?
Không giống như khi lập trình, nếu bạn mắc lỗi cú pháp HTLM sẽ không
có một thông báo lỗi nào báo cho biết mà trình duyệt sẽ hiểu lầm và trình bày
trang Web không như bạn muốn.
Một tài liệu HTML tạo nên từ nhiều thành phần HTML. Một thành phần
HTML được đánh dấu bằng một cặp thẻ mở và thẻ đóng hay con gọi là Tag.
Để soạn thảo tài liệu HTML đúng cú pháp, cần nắm vững cấu trúc của
từng thành phần HTML.
Khi một trình duyệt Web hiển thị một trang Web, trình duyệt Web sẽ đọc từ
một file văn bản đơn giản và tìm kiếm những đoạn mã đặc biệt hay những Tag
được đánh dấu bởi ký hiệu < và ký hiệu >
* Tag mang thông tin:
<tag_name> String of text </tag_name>
Trong đó: <tag_name>: tên tag bắt đầu.
</tag_name>: tên tag kết thúc.
* Tag rỗng: <tag_name>
Ví dụ: Muốn cho từ Chào bạn hiển thị ra kiểu chữ đậm ta làm như sau:
7
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<b> Chào bạn </b>
b/ Các thành phần cơ bản của trang HTML
* Cấu trúc chính của một trang HTML như sau:
<HTML>
<HEAD>
<TITLE> ...........</TITLE>
</HEAD>
<BODY>
...................
</BODY>
</HTML>
* Các thành phấn cơ bản
 Thẻ HTML:
Cú pháp: <HTML>
.............
</HTML>
Thẻ đầu tiên trong tài liệu HTML là <HTML>. Thẻ này nói cho trình
duyệt biết đây là điểm khởi đầu của một tài liệu HTML. Thẻ cuối cùng của tài
liệu là </HTML>, thẻ này nói cho trình duyệt biết đây là điểm kết thúc của văn
bản. Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML, tức là
nó có sử dụng các thẻ HTML để trình bày. Toàn bộ nội dung của tài liệu được
đặt giữa cặp thẻ này.
 Thẻ HEAD:
Cú pháp: <HEAD>
..........
</HEAD>
 Thẻ TITLE:
Cú pháp: <TITLE> .........</TITLE>
Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, tức là nó
phải nằm trong thẻ phạm vi giới hạn bởi cặp thẻ <HEAD>. Giữa cặp thẻ tiêu đề
8
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<TITLE>... </TITLE> là dòng chữ sẽ hiện lên trên thanh tiêu đề của cửa sổ khi
trình duyệt đọc tài liệu. Nếu bỏ trống thì trình duyệt sẽ cho hiện tên tệp thay vào
đó.
 Thẻ BODY:
Cú pháp: <BODY>
........
</BODY>
Thẻ này được sử dụng để xác định phần nội dung chính của tài liệu - phần
thân (BODY) của tài liệu. Trong phần thân có thể chứa các thông tin định dạng
nhất định để đặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết, tạo
bảng, đặt lề cho trang tài liệu... Những thông tin này được đặt ở phần tham số
của thẻ.
– Các thuộc tính của <BODY>
 BgColor: thiết lập màu nền của trang
 Text: thiết lập màu chữ
 Link: màu của siêu liên kết
 Vlink: màu của siêu liên kết đã xem qua
 Background: dùng load một hình làm nền cho trang
 LeftMargin: Canh lề trái
 TopMargin: Canh lề trên của trang
Ví dụ 1: Tạo một trang web đầu tiên đơn giản như sau:
Bước 1:
- Mở chương trình soạn thảo NotePad
- Sử dụng Font gõ chữ tiếng việt: Unicode
Bước 2:
<html>
<head>
<title> Học tập HTML</title>
9
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
</head>
<body>
Toàn bộ nội dung của tài liệu nằm đây: Các đoạn văn bản xen lẫn
hình ảnh, âm thanh, video, các liên kết đến vị tr khác, tài liệu khác... !
</body>
</html>
Bước 3: Lưu lại với tên “MoDau.html” (vào trong thư mục của mình), với phần
Encoding là UTF-8.
Lưu ý: phần mở rộng có thể là html hoặc htm đều được.
Bước 4:
1.2.4. Lưu trang Web
Sau khi soạn thảo xong nội dung trang Web, ta tiến hành lưu trang Web
bằng cách nhấn tổ hợp phím Ctrl + S, cửa sổ Save As hiện ra như sau:
10
Gõ tên
trang
Web
vào
đây
Chọn phần mở
rộng là html
chọn mục
này là UTF-
8
Nhấn vào
nút Save
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
1.2.5. Hiển thị trang Web trong trình duyệt
Vào thư mục mà các trang web được lưu trong đó, chạy tệp HTML mà ta
vừa tạo, xem kết quả nhận được. Có thể sử dụng các trình duyệt khác nhau để
hiển thị trang Web.
1.2.6. Thêm các thành phần cơ bản vào trang Web
a/ Thẻ P
Cú pháp: <P> Nội dung đoạn văn bản cần hiển thị</P>
Ý nghĩa: thẻ <P> dùng để định dạng một đoạn văn bản như tách một dòng văn
bản (hoặc một đoạn) thành các dòng ( hoặc các đoạn)
Các thuộc tính quan trọng của thẻ <P>...</P>:
 Align:
 Left: Canh trái
 Center: Canh giữa
 Right: Canh phải
 justify: Canh đều
 Style:
 Margin-top: Canh lề trên của đoạn
 Margin-left: Canh lề trái của đoạn
 Margin-right: Canh lề phải của đoạn
 Margin-bottom: Canh lề dưới của đoạn
 Direction: Chỉ định chiều văn bản (từ trái sang phải “ltr” hoặc từ
phải sang trái “rtl”)
Ví dụ 2: Căn lề văn bản
11
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<html>
<head>
<title> Học tập HTML</title>
</head>
<body>
<P> Công cha như núi Thái Sơn </P>
<P Align="center"> Nghĩa mẹ như nước trong nguồn chảy ra </P>
<P Align=“Right” >Một lòng thờ mẹ kính cha </P>
<P> Cho tròn chữ hiếu mới là đạo con </P>
<P Align="center"> Sin<Sup>2</Sup>x + Cos<Sup>2</Sup>x = 1</P>
<P Align="center"> H<Sub>2</Sub> + O<Sub>2</Sub> à
H<Sub>2</Sub>O </P>
</body>
</html>
Lưu và chạy chương trình ta được kết quả như sau:
b/ Các thẻ định dạng văn bản
12
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
Tên thẻ Giải thích Ví dụ
<B>…</B> Dạng chữ đậm <B>Hello world !</B>
<I>…</I> Dạng chữ nghiêng <I>Hello world !</I>
<U>…</U> Dạng chữ gạch chân <U>Hello world !</U>
<S>…</S> Dạng chữ gạch giữa <S>Hello world!</S>
<Font color=RGB
face=tên font
Size=“N”> ……
</Font>
Định dạng font chữ:
Color: chỉ định màu chữ
Face: Chỉ định font chữ
Size: kích thước
<Font color=“Blue”
face=“Arial” Size = 14>
Hello world
</Font>
<Sup>…</Sup> Tạo chỉ số trên X<Sup>2</Sup> è X2
<Sub>…</Sub> Tạo chỉ số dưới H<Sub>2</Sub>O è H2O
<BR> Xuống dòng
<HR Align=“…”
Color = “…”
SIZE = “…”
WIDTH = “…” />
Tạo đường kẻ
Color: màu
Size: độ dày (tính bằng
pixel)
Width: độ dài (tính bằng
pixel)
<HR Color=“Red” Size=“10”
Width=“200” />
Các ký tự đặc biệt:
Dấu lớn hơn: &gt;
Dấu nhỏ hơn: &lt;
Dấu nháy kép:
&quot;
If A &gt; B Then <BR>
A = A + 1
Bảng giá trị màu:
Giá trị Tên màu Tên tiếng anh
#FFFFFF màu trắng white
#000000 màu đen black
#FF0000 màu đỏ red
#00FF00 màu xanh lục lime
#0000FF màu xanh nước biển blue
#888888 màu xám gray
#008888 màu xanh lục lam cyan
#880088 màu tím magenta
13
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
Ví dụ 3: Định dạng Font, xuống hàng
<html>
<head>
<title> Học tập HTML</title>
</head>
<body>
<br><b> Công cha như núi Thái Sơn
<br> Nghĩa mẹ như nước trong nguồn chảy ra
<br> Một lòng thờ mẹ kính cha
<br> Cho tròn chữ hiếu mới là đạo con</b>
<p><i><font color=red> Con kiến mà leo cành đa
<br>Leo phải cành cộc leo ra leo vào
<br> Con kiến mà leo cành đào
<br>Leo phải cành cộc leo vào leo ra </font></i></p>
</body>
</html>
Lưu và chạy chương trình ta được kết quả như sau:
14
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
Ví dụ 4: Tạo đường kẻ
<html>
<head>
<title>Học tập HTML</title>
</head>
<body>
<P><b> Công cha như núi Thái Sơn </b></P>
<P><i>Nghĩa mẹ như nước trong nguồn chảy ra </i></P>
<P>Một lòng thờ mẹ kính cha </P>
<P> Cho tròn chữ hiếu mới là đạo con </P>
<HR Color=red Size=20 Width=500 />
<HR Color=blue Size=500 Width=20 />
<HR Color=green Size=20 Width=500 >
<P align="center">Sin<Sup>2</Sup>x + Cos<Sup>2</Sup>x = 1 </P>
<P align="center">H<Sub>2</Sub>+ O<Sub>2</Sub>àH<Sub>2</Sub>O
</P>
15
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
</body>
</html>
Lưu và chạy chương trình ta được kết quả như sau:
c/ Thẻ định dạng đề mục
Cú pháp Ý nghĩa
<h1> Nội dung đề mục </h1> Định dạng đề mục cấp 1
<h2> Nội dung đề mục </h2> Định dạng đề mục cấp 2
<h3> Nội dung đề mục </h3> Định dạng đề mục cấp 3
<h4> Nội dung đề mục </h4> Định dạng đề mục cấp 4
<h5> Nội dung đề mục </h5> Định dạng đề mục cấp 5
<h6> Nội dung đề mục </h6> Định dạng đề mục cấp 6
16
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
Để tiêu đề ở giữa: <hN align=“center”> Tiêu đề </hN>
Để tiêu đề bên phải: <hN align=“right”> Tiêu đề </hN>
Với 1<= N <= 6
Ví dụ 5: Tạo các thẻ đề mục
<html>
<head>
<title> Học tập HTML</title>
</head>
<body>
<h1 align="center"> CÔNG TY TNHH MINH THẮNG </h1>
<h2 align="left"> Địa chỉ: 168 Lạch Tray - Hải Phòng
<h2 align="left"> Điện thoại: 0313.583.799
<h2> Fax: 0313.583.798
<h3> Giới thiệu các mặt hàng kinh doanh
<h4> - Hàng điện tử
<h4> - Hàng hóa chất
<h5> Chi tiết
</body>
<html>
17
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
Lưu và chạy chương trình ta được kết quả như sau:
g/ Tạo danh sách
Đây là một danh sách các lý do cho thấy tại sao danh sách lại rất có ích.
Bởi vì: Nó có tính hấp dẫn trực quan; Nó có thể được sử dụng để nhóm các yếu
tố hoặc ý kiến tương tự; Chúng ta có thể dễ dàng đọc lướt qua các danh sách và
ghi nhớ các yếu tố tương ứng.
HTML cung cấp một nhóm khá đa dạng các kiểu danh sách khác nhau.
Mỗi loại danh sách này có một cấu trúc định dạng riêng. Chúng bao gồm:
* Danh sách có thứ tự
Là danh sách được Web browser đánh thứ tự từ 1 cho đến kết thúc danh
sách.
Dùng tag <OL>...</OL>
<OL start=N type = *>
18
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<LI> Mục thứ nhất
<LI> Mục thứ hai
<LI> Mục thứ ba
.........
</OL>
Trong đó: N là chỉ định số bắt đầu.
‘*’ =1 Các mục được sắp xếp theo thứ tự 1, 2, 3...
= a Các mục được sắp xếp theo thứ tự a, b, c...
= A Các mục được sắp xếp theo thứ tự A, B, C...
= i Các mục được sắp xếp theo thứ tự i, ii, iii...
= I Các mục được sắp xếp theo thứ tự I, II, III...
Ví dụ 6: Tạo danh sách có thứ tự
<html>
<head>
<title> TRƯỜNG TRUNG HỌC NGHIỆP VỤ QUẢN LÝ LTTP </title>
</head>
<ol type=1>
<li><b>Lịch sử hình thành và sự phát triển</b></p>
<li><b>Hệ điều hành MS-DOS</b></p>
<li><b>Hệ điều hành WINDOWS</b></p>
<ol type=a>
<li>Hệ điều hànhWindows 3.1</p>
<li>Hệ điều hành Windows 95</p>
<li>Hệ điều hành Windows 98</p>
<li>Hệ điều hành Windows ME</p>
<li>Hệ điều hành Windows XP</p>
</ol>
<li><b>Ứng dụng của WINDOWS</b></p>
</ol>
</body>
19
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
</html>
Lưu và chạy chương trình ta được kết quả như sau:
* Danh sách không có thứ tự
Sử dụng tag <UL>...</UL>: cho một danh sách các mục với những ký
hiệu được đánh dấu phía trước (không được đánh số).
Tag <LI> chỉ ra từng mục cho một danh sách.
<UL type = * >
<LI> Mục thứ nhất
<LI> Mục thứ hai
<LI> Mục thứ ba
.........
</UL>
Trong đó: ‘*’ có thể là:
circle (vòng tròn)
20
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
square (hình vuông)
disk (dấu hinh tròn đậm)
Ví dụ 7: Tạo danh sách không có thứ tự
<html>
<head>
<title> TRƯỜNG TRUNG HỌC NGHIỆP VỤ QUẢN LÝ LTTP </title>
</head>
<p align="center"><b><font size="5">Chương 1: Căn bản về hệ điều hành
</font></b></p>
<ul type=disk>
<li><b>Lịch sử hình thành và sự phát triển</b></p>
<li><b>Hệ điều hành MS-DOS</b></p>
<li><b>Hệ điều hành WINDOWS</b></p>
<ul type=square>
<li>Hệ điều hànhWindows 3.1</p>
<li>Hệ điều hành Windows 95</p>
<li>Hệ điều hành Windows 98</p>
<li>Hệ điều hành Windows ME</p>
<li>Hệ điều hành Windows XP</p>
</ul>
<li><b>Ứng dụng của WINDOWS</b></p>
</ul>
</body>
</html>
Lưu và chạy chương trình ta được kết quả như sau:
21
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
* Danh sách định nghĩa
Nằm giữa các tag <DL>...</DL>.
Mỗi yếu tố của danh sách bao gồm hai thành phần:
Tiêu đề được căn lề phía trái (chỉ ra bởi thẻ <DT>)
Phần giải nghĩa được căn lề thụt hơn sang phía phải (chỉ ra bởi thẻ <DD>)
Cú pháp: <DL>
<DT> Yếu tố 1
<DD> Chú giải cho yếu tố 1
<DT> Yếu tố 2
22
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<DD> Chú giải cho yếu tố 2
…….
</DL>
Ví dụ 8: Tạo danh sách định nghĩa
<html>
<head>
<title> Học tập HTML</title>
</head>
<body>
<dl>
<dt>Lemon (n):
<dd> Cây chanh; quả chanh
<dt>Mango (n):
<dd> Quả xoài; cây xoài
<dt>Orange (n):
<dd> Quả cam
<dt>Banana (n):
<dd> Quả chuối
</dl>
</body>
</html>
Lưu và chạy chương trình ta được kết quả như sau:
23
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
* Danh sách lồng nhau
Danh sách có thứ tự, không thứ tự và danh sách định nghĩa có thể lồng
vào nhau theo nhiều mức độ khác nhau. Ngoài lồng các danh sách lại với nhau,
ta con có thể trộn lẫn các loại danh sách.
Ví dụ 9: Tạo danh sách hỗn hợp
<html>
<head>
<title> Học tập HTML</title>
</head>
<body>
<ol type=1>
<li><b>Từ mới</b></p>
<dl>
<dt>Lemon (n):
<dd> Cây chanh; quả chanh
<dt>Mango (n):
<dd> Quả xoài; cây xoai
<dt>Orange (n):
24
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<dd> Quả cam
<dt>Banana (n):
<dd> Quả chuối
</dl>
<li><b>Ngữ pháp </b></p>
<li><b>Bài tập </b></p>
<ul type=disk>
<li><b>Điền từ vào chỗ trống</b></p>
<li><b>Viết lại câu cho hoàn chỉnh</b></p>
</ul>
</ol>
</body>
</html>
Lưu và chạy chương trình ta được kết quả như sau:
25
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
h/ Tạo bảng
Bảng thường được sử dụng để tạo các văn bản nhiều cột hoặc phân chia
trang thành nhiều vùng khác nhau rất tiện lợi trong thiết kế và trình bày trang
web.
Cú pháp: <TABLE>
<TR>
<TH> ....</TH>
<TD> .... </TD>
<TD> .... </TD>
...
</TR>
<TR>
<TH> ....</TH>
<TD> ....</TD>
<TD>....</TD>
...
</TR>
....
</TABLE>
Trong đó:
Thẻ <TABLE>...</TABLE> dùng để khởi tạo một bảng.
Thẻ <TR>...</TR> dùng để khởi tạo một hàng (một dòng) của bảng.
Thẻ <TD>...</TD> dùng để khởi tạo một ô chứa dữ liệu của bảng.
Thẻ <TH> ....</TH> dùng để khởi tạo tiêu đề của hàng hay tiêu đề cột
trong bảng.
Ví dụ 10: Tạo một bảng có 2 hàng, 2 cột
<html>
<head>
<title> Học tập HTML</title>
26
Dòng 1
Dòng 2
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
</head>
<body>
<table border=1>
<tr>
<td> Hàng 1, cột 1 </td>
<td> Hàng 1, cột 2 </td>
</tr>
<tr>
<td> Hàng 2, cột 1 </td>
<td> Hàng 2, cột 2 </td>
</tr>
</table>
</body>
</html>
Lưu và chạy chương trình ta được kết quả như sau:
27
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<TH>... </TH> cũng giống tag <TD> nhưng dùng cho tiêu đề của bảng và
dòng text... sẽ được viết chữ đậm và căn giữa ô.
<TH> có những thuộc tính sau:
 align = left | center | right: để chỉnh lề trái/giữa/phải dữ liệu trong ô.
 valign = top | middle | bottom: để chỉnh lề trên/giữa/dưới dữ liệu trong ô.
 width = n | n%: đặc tả độ rộng của ô.
 hight = n | n%: đặc tả chiều cao của ô.
 nowrap: thiết lập cho những ô không muốn có dòng nào bị gãy để dữ liệu
vừa khít với ô tiêu đề.
 colspan = n: đặc tả số cột của bảng mà ô này sẽ trộn lại thành 1(mặc định
=1)
Ví dụ 11: Tạo bảng có tiêu đề hàng và cột
<html>
<head>
<title> Học tập HTML</title>
</head>
<body>
<table border=1>
<tr>
<th> STT </th>
<th> Lớp </th>
<th> Phòng học</th>
<th> Thời gian</th>
</tr>
<tr>
<th> 1 </th>
<td> TinAk5 </td>
<td> C101 </td>
28
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<td> Sáng </td>
</tr>
<tr>
<th> 2 </th>
<td> TinBk5 </td>
<td> C102 </td>
<td> Sáng </td>
</tr>
<tr>
<th>3 </th>
<td> Toánk5 </td>
<td> C101 </td>
<td> Chiều </td>
</tr>
<tr>
<th> 4 </th>
<td> SPAk5 </td>
<td> C101 </td>
<td> Chiều </td>
</tr>
</table>
</body>
</html>
Lưu và chạy chương trình ta được kết quả như sau:
29
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<TABLE (các thuộc tính) >...</TABLE> trong đó các thuộc tính gồm::
 border = n: tạo viền xung quanh bảng
 align = left | right: Cho phép bảng dóng lề trái hoặc phải.
 valign = top | bottom: để chỉnh lề trên hoặc giữa hoặc dưới.
 bgcolor = #xxyyzz: thiết lập màu nền của bảng.
 bordercolor = #xxyyzz: thiết lập màu viền cho bảng.
 bordercolorlight = #xxyyzz : thiết lập màu nhạt hơn cho viền bảng 3 chiều.
 bordercolordark = #xxyyzz : thiết lập màu đậm hơn cho viền bảng 3 chiều.
 background = "...image.gif | jpg": thiết lập nền cho các ô văn bản là hình
ảnh với địa chỉ của nó.
 cellpadding = N: cho biết có bao nhiêu khoảng trắng giữa khối bên trong
phần tử và vách ngăn.
 cellspacing = M: Cho biết độ rộng của những đường bên trong bảng để
chia các phần tử.
30
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 width = n | n%, height = m | m% : định trước kích thước rộng/cao cho
bảng.
<CAPTION ..>....</CAPTION>: tạo tiêu đề bảng
Ví dụ 12: Tạo bảng với các thuộc tính của bảng
<html>
<head>
<title> Học tập HTML</title>
</head>
<body>
<table border=1 align="center" bgcolor=yellow bordercolor=red>
<caption align="center" font size = 20><i>Bảng giá học phí áp dụng từ
9/2014</i></caption>
<tr>
<th>Tên chương trình </th>
<th> Học phí </th>
<th> Miễn giảm</th>
<th> Ghi chú</th>
</tr>
<tr>
<th> Cử nhân Tin </th>
<td> 7.000.000 </td>
<td> 5% </td>
<td> Đóng vào đầu năm học</td>
</tr>
<tr>
<th> Cử nhân QTKD</th>
<td> 6.900.000 </td>
<td> 5% </td>
<td> Đóng vào đầu năm học</td>
</tr>
31
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<tr>
<th> Cử nhân Anh văn </th>
<td> 8.000.000 </td>
<td> 10% </td>
<td> Đóng vào đầu năm học</td>
</tr>
<tr>
<th> Thư ký cao cấp </th>
<td> 8.000.000 </td>
<td> 5% </td>
<td> Đóng vào cuối học kỳ</td>
</tr>
</table>
</body>
</html>
Lưu và chạy chương trình ta được kết quả như sau:
32
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<TR (các thuộc tính)> Đặc tả dòng của bảng </TR>
Số dòng của bảng bằng số phần tử <TR> trong cặp <table>...</table>.
Một số thuộc tính:
 align = left | center | right: để chỉnh lề trái/giữa/phải.
 valign = top | middle | bottom: để chỉnh lề trên/giữa/dưới.
 bgcolor: đặc tả màu nền của hàng.
 bordercolor: đặc tả màu viền của bảng.
 bordercolorlight: thiết lập màu nhạt hơn cho màu viền 3 chiều.
 bordercolordark: thiết lập màu đậm hơn cho màu viền 3 chiều.
<TD>...</TD> Đại diện cho ô dữ liệu trong bảng,
 align = left | center | right: để chỉnh lề trái/giữa/phải dữ liệu trong ô.
 valign = top | middle | bottom: để chỉnh lề trên/giữa/dưới dữ liệu trong ô.
 width = n | n%: đặc tả độ rộng của ô.
33
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 hight = n | n%: đặc tả chiều cao của ô.
 colspan = N: Tạo một ô bằng N ô liền kề theo dòng.
 rowspan = M: Tạo một ô bằng M ô liền nhau theo cột.
 Ngoài ra còn có các thuộc tính:
bgcolor = #xxyyzz.
bordercolor = #xxyyzz.
bordercolorlight = #xxyyzz.
bordercolordark = #xxyyzz.
background = "...image...".
Ví dụ 13: Tạo bảng sử dụng thuộc tính Colspan và Rowspan
<Table border="1" bgcolor= “fuschia” bordercolor=”red” align=”center”
Width=50% Height=30%>
<caption> Properties of Table</caption>
<tr>
<th colspan="3"> Colspan</th>
</tr>
<tr>
<th Rowspan=”2”> Rowspan</th>
<td align=center>Cell 1</td>
<td align=center>Cell 2</td>
</tr>
<tr>
<td align=center> Cell 3</td>
<td align=center> Cell 4</td>
</tr>
</table>
Ví dụ 14: Tạo bảng theo mẫu như hình dưới đây
34
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<html>
<head>
<title> Trinh bay trang</title>
</head>
<body>
<Table width="68%" height="135" border="1" cellspacing="0"
bordercolor="#990033">
<tr>
<th colspan="2" bgcolor="#FFCCFF">
<div align="center">Computer Model </div>
</th>
</tr>
<tr>
<td width="24%" height="98" valign="top">
<table width="100%" border="1" cellspacing="0">
<tr>
<td>Tin tuc</td>
</tr>
<tr>
<td>Giai tri</td>
</tr>
<tr>
<td>Quang cao</td>
35
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
</tr>
<tr>
<td height="23">The thao</td>
</tr>
</table>
</td>
<td width="76%" align="center">
<img src="../images/h2.jpg" width="106" height="92">
</td>
</tr>
</table>
</body>
</html>
i/ Thêm hình ảnh vào trang Web
* Các dạng hình ảnh của Web
- Có nhiều dạng tệp tin hình ảnh như: gif, tiff, bmp, jpg, png
- Dạng chuẩn để hiển thị trong một trang Web là gif
- Một số dạng hình ảnh khác sử dụng trong trang Web gồm: bmp, jpg
* Vài điểm cần biết khi sử dụng đồ hoạ
- Kích thước hình ảnh càng nhỏ càng tốt, nên nhỏ hơn 100Kb.
- Các hình ảnh không nên rộng hơn 480 điểm và cao hơn 300 điểm.
- Hình ảnh là những thứ tạo thêm nghĩa cho tài liệu.
- Một hình ảnh nhỏ có thể xuất hiện nhiều lần trong một trang mà chỉ tốn
rất ít thời gian.
* Đưa hình ảnh vào trang web
Nên để các hình ảnh vào một thư mục riêng (Ví dụ như thư mục Image).
Cú pháp: <img src=đường dẫn đến FileName.gif> Trong đó FileName.gif
là tên một hình ảnh dạng gif hoặc jpg hoặc bmp để ở cùng thư mục với tài liệu
HTML
36
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
Ví dụ:
<img src=“Image/chu thap.jpg”>
Để hình ảnh xuất hiện riêng một dòng, ta chỉ cần thêm tag <p>.
Ví dụ:
<p><img src=“Image/chu thap.jpg”><p>
* Định dạng hình ảnh:
 Chiều cao, độ rộng của ảnh:
Cú pháp: <img src="filename.gif" width=X height=Y >
Trong đó: X là chiều rộng của ảnh;
Y là chiều cao của ảnh
Khi thêm hai thuộc tính width và height giúp cho web hiển thị nhanh hơn.
 Tạo đường viền hoặc không cho ảnh
Cú pháp: <img boder =" n" src="filename.gif" width=X height=Y >
trong đó: n chỉ độ dày của đường viền ảnh;
n = 0 : ảnh không có đường viền.
* Ví dụ về chiều cao, độ rộng của ảnh
37
<img src="Image/WTP6.jpg"
width=300 height=200>
<img src="Image/WTP9.jpg"
width=200 height=120>
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
* Ví dụ về đường viền của ảnh:
<img align=left src="Image/chu thap.jpg" border=5> cho kết quả
38
<img align=right src="Image/chu thap.jpg" border=1> cho kết quả
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 Mô tả hình ảnh:
Tức là khi người sử dụng đưa chuột đến hình ảnh thì sẽ xuất hiện "Dòng mô tả
hình ảnh" mà vẫn xem được hình ảnh
Cú pháp: <img src="filename.gif" alt="Dòng mô tả hình ảnh">
Ví dụ:
<img src="Image/WTP6.jpg" width=300 height=200 alt="Gấu câu cá kìa">
 Sắp xếp hình ảnh so với văn bản bao quanh
Cú pháp:
<img align= "kiểu sắp xếp" src="filename.gif" alt="Dòng mô tả hình ảnh"
width=X height=Y >
trong đó:
Kiểu sắp xếp = Left: hình ảnh chèn vào bên trái văn bản
Center: hình ảnh chèn vào giữa văn bản
Right: hình ảnh chèn vào bên phải văn bản
39
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 Sắp xếp trong hàng của văn bản và hình ảnh
Cú pháp:
<img align= "value" src="filename.gif" alt="Dòng mô tả hình ảnh"
width=X height=Y >
trong đó:
Value = Top: Chỉnh đáy của dòng văn bản ngang với đỉnh của ảnh.
Middle: Chỉnh đáy của dòng văn bản nằm khoảng giữa ảnh.
Bottom: Chỉnh đáy của dòng văn bản bằng với đáy của ảnh (lmặc
định)
Ví dụ 1: <img align=middle src=“Image/chu thap.jpg”>
Ví dụ 2: <img align=top src=“Image/chu thap.jpg”>
Ví dụ 3: <img align=bottom src=“Image/chu thap.jpg”>
 Liên kết đến các phần của trang
Anchor là gì?
• Anchor được đặt tên là một dấu hiệu tham khảo ẩn cho một phần của tập
tin html.
• Được sử dụng để tạo liên kết đến phần khác trong cùng một trang khi
trang đó dài.
• Liên kết này thường dùng để xây dựng mục lục.
Dạng html cho vệc tạo anchor
Cú pháp: <a name=“tên”>text to link </a>
Chú ý: text to link có thể có hoặc không
Ví dụ:
<a name="I">I. Lý thuyết </a>
Viết một liên kết đến một Anchor được đặt tên.
Cú pháp:
<a href=“#tên”>text to hypertext </a>
Ví dụ: <a name="I"></a>
40
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<a href="#I">I.Lý thuyết</a></p>
 Thêm liên kết tới Anchor được đặt tên trong tài liệu khác
Dạng mã:
<a href=“FileName.html#Name”>text link</a>
Ví dụ:
<a href="liên kết đến một điểm trong cùng một trang.html#I"> Học
tập</a></p>
 Danh thiếp và địa chỉ liên kết đến Email
* .Dạng tag address
Ở cuối một trang web thường cung cấp thông tin về tác giả và tài liệu. Và
cũng có thể gửi Email cho tác giả.
Cú pháp: <address>
Đánh địa chỉ ở đây.....
</address>
Ví dụ:
<address>
Theo thông tin của <b>Lê Anh Nhật</b>, điện thoại <tt> 0912.844.866 </tt>
</address>
 Liên kết đến Email
Để người đọc có thể gửi Email cho tác giả, ta chỉ cần thêm liên kết siêu
văn bản, trong đó có sử dụng từ khoá “mailto:”.
Cú pháp:
<A Href = “mail to: địa chỉ email” > Nội dung </A>
Ví dụ:
E-mail: <a href = "mailto:leanhnhat@yahoo.com">leanhnhat@yahoo.com</a>
l/ Giới thiệu frame
Frame mở rộng khả năng hiển thị trang web bằng cách cho phép chia miền
hiển thị thành nhiều vùng. Mỗi vùng như vậy được gọi là frame và có những
đặc điểm sau:
41
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 Nó có thể truy cập tới một URL một cách độc lập với các frame
khác.
 Mỗi frame có thể đặt tên, dùng làm đích trong liên kết.
 Nó có thể tự thay đổi kích thước khung nhìn, hoặc có thể không
thay đổi đối với người sử dụng.
* Thẻ Frameset
<Frameset rows = "n1, n2, ... "
cols = "m1, m2, ..."
border = "N"
framespacing = "N"
bordercolor = #xxyyzz
frameborder = "yes/no">
Trong đó: rows: chỉ chia hàng, tuỳ theo tham số.
cols: chỉ chia cột, tuỳ theo tham số.
border: độ dày đường viền.
framespacing: khoảng cách các frame.
frameborder: thiết lập đường viền cho toàn bộ tập frame, có
giá trị yes hoặc no
 Ví dụ:
<frameset rows = "30%, *"> chia thành 2 hàng, hàng thứ nhất chiếm 30%
màn hình, còn lại là hàng thứ 2.
<frameset cols = "*, 100, *"> chia 3 cột, cột thứ 2 có độ rộng 100 điểm, các
cột còn lại sẽ tự động phân chia.
<frameset rows = "30%, *" border=0 framespacing = 5 frameborder = 0>: đặt
đường viền, khoảng cách, ...
* Thẻ frame
Cú pháp:
42
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
<frame src="URL"
name="tên cửa sổ"
width = "N"
height = "M"
scrolling = "yes/no/auto"
frameborder = "yes/no"
framespacing = "N"
bordercolor = #xxyyzz
noresize >
Ví dụ: tạo trang web có 4 frame như sau:
43
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
CHƯƠNG 2. TẠO TRANG WEB VỚI FONTPAGE
2.1. Giới thiệu Fontpage
2.1.1. Tạo một trang web trắng
 Mở FrontPage 2003: Start à Programs à Microsoft Office à Microsoft
FrontPage 2003
 Màn hình làm việc của FrontPage 2003:
2.1.2. Tạo một trang web đơn giản
 Mở MS.FrontPage
 Click vào hình mũi tên bên cạnh biểu tượng New à Web site
Thanh tiêu đề Thanh Menu Thanh công cụ chuẩn
Thanh định dạng
Page tab
Chế độ
làm việc
Đóng trang
web hiện tại
Thanh cuộn
ngang – dọc
Task pane
Vùng thiết kế
44
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
è Hộp thoại Web site Templates xuất hiện
Chú ý: Phải tạo thư mục chứa web site trước khi tạo web site
Sau khi tạo web site xong màn hình như sau xuất hiện:
3.Click Ok để
tạo website
mới
2.Click chọn
mẫu web site
1.Nhập đường dẫn
chứa web site. Hoặc
click vào nút Browse
để chọn
45
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
Cần tạo thêm thư mục “Media” để chứa các file âm thanh, các đoạn video, các
file flash
`
Tạo thư mục
mới
Trang chủ của
web site
Thư mục chứa
các hình ảnh
Tạo trang
web mới
2. Nhập tên thư mục
là “Media”  ấn Enter
1. Click tạo thư mục mới
46
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
2.1.3. Định dạng nội dung
 Định dạng font chữ, kích thướt, màu chữ mặc định:
 Mở hộp thoại Page properties
 Chọn tab Advanced
 Click chọn nút Body style. Hộp thoại Modify style xuất hiện
 Click nút Format  Font
 Chọn các giá trị cần thiết rồi click OK để thiết lập
è Các bước như sau:
1. Click vào Body style để mở hộp
thoại modify style
47
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
Býớc 2:
2. Click Format Font để mở hộp
thoại Font
6. Click Ok để thiết
lập
Chọn màu chữ
5. Nhập vào kích cỡ
chữ (ví dụ: 12px)
3. Chọn font chữ
4. Chọn kiểu
chữ: bình
thường, đậm,
nghiêng,……
48
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 Định dạng đoạn: gồm các định dạng sau:
 Canh lề đoạn (trái, phải, giữa, đều)
 Khoảng cách giữa các đoạn
 Khoảng cách giữa các dòng
 Thực hiện: Chọn đoạn cần định dạng  Format  Paragraph
 Định dạng ký tự gồm các định dạng sau
1.
Chọn
đoạn
2. Click
Format 
Paragraph
Click OkClick Ok
Canh lề cho
đoạn
Khoảng
các giữa
các dòng
trong
đoạn
Định
khoảng
cách
trên,
dưới của
đoạn
49
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 Font chữ, kiểu chữ, kích thướt
 Màu chữ, màu nền
 Thực hiện: Chọn đoạn cần định dạng  Format  Font. Hộp thoại
Font xuất hiện và thực hiện định dạng như trước
2.1.3.2. Định dạng trang
 Thiết đặt thuộc tính cho trang web: Sau khi tạo trang web xong, công việc
đầu tiên là ta thiết đặt thuộc tính cho nó. Bao gồm các thuộc tính chính:
 Tiêu đề trang web
 Định dạng lề cho trang web
 Font chữ, kích thướt, màu chữ mặc định của trang web
 Màu nền, ảnh nền và nhạc nền (nếu cần thiết)
Để thiết đặt các thuộc tính này ta thực hiện: Click phải vào vùng trống trên
trang web  Page properties để mở hộp thoại Page properties.
 Đặt tiêu đề cho trang web: Chọn tab General  nhập nội dung vào mục
Title  click OK
Click Ok để thiết lập
Chọn màu chữ
Nhập vào kích cỡ
chữ (ví dụ: 12px)
Chọn font chữ
Chọn kiểu
chữ: bình
thường, đậm,
nghiêng,……
50
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 Định dạng lề cho trang web:
 Mở hộp thoại Page properties
 Chọn tab Advanced
 Định lề trên: nhập giá trị vào ô Top Margin
 Định lề trái: nhập giá trị vào ô Left Margin
 Định lề dưới: nhập giá trị vào ô Bottom Margin
 Định lề phải: nhập giá trị vào ô Right Margin
3. Click
OK
2. Nhập
tiêu đề
51
1. Chọn tab General
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
,
2.1.3.3. Chèn ảnh
 Chèn ảnh nền:
 Mở hộp thoại Page properties
 Chọn tab Formatting  Background picture  Browse để chọn ảnh nền
 OK
3. Click Ok
1. Chọn tab Advanced
2. Nhập giá trị để
định lề, trên, trái,
dưới, phải
52
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 Thiết đặt màu nền:
 Mở hộp thoại Page properties
 Chọn tab Formatting  Background  Chọn màu  OK

Chú ý: Phải đảm bảo rằng ảnh đã được lưu trong
thư mục Images trước khi chọn nó làm ảnh nền



53
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 Đưa nhạc nền vào trang web:
 Mở hộp thoại Page properties
 Chọn tab Formatting  Background picture  Browse để chọn nhạc nền
 OK
Chú ý:
 Phải đảm bảo rằng file nhạc đã được lưu trong thư mục Media trước khi
chọn nó làm nhạc nền
 Nếu muốn bài hát tự động lặp lại: Bỏ chọn mục Forever  nhập vào số
lần lặp lại trong ô Loop



54
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
2.1.4. Lưu trang web
 Click chọn biểu tượng save (hình chiếc đĩa mềm). Hộp thoại Save as xuất
hiện



Nhập tên
trang web
Click save để lưu
trang web
55
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
2.2 Tạo bảng trang web
2.2.1 . Tạo bảng
 Table cho phép hiển thị danh sách theo dòng, cột
 Table cho phép ta tạo các ô để đặt các đối tượng vào đúng vị trí của
chúng (table chính xác hơn layer)
Để chèn Table vào trang web: click Table  Insert  Table
Hộp thoại Insert xuất hiện
2.2.2. Định dạng văn bản trong bảng
Click OK
Chọn ảnh nền
Nhập số dòng
(rows), số cột vào
ô (columns)
Canh lề table (trái,
phải, giữa)
Thiết đặt độ rộng
và độ cao
Độ rộng và màu
của đường viền
Chọn màu nền
56
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
2.2.3 . Định dạng bảng
 Định dạng table: gồm các dịnh dạng chính
 Định dạng đường viền (border)
 Định dạng ảnh nền, màu nền
Thực hiện: click vào table cần định dạng  Table Properties.



57
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 Định dạng ảnh nền, màu nền
2.3. Siêu liên kết Hyperlink
2.3.1. Khái niệm về siêu liên kết
 Các siêu liên kết (Hyperlink): có 2 loại
 Liên kết trong là liên kết đến các Bookmark nằm trong chính trang
đó.
5. Click OK
4. Khoảng cách
từ đường viền
đến chữ
3. Độ rộng
đường viền
2. Chọn màu
đường viền
1. Chọn mẫu
đường viền
Click OK để thiết
đặt
Chọn màu nền
Chọn ảnh nền
58
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 Liên kết ngoài: là liên kết đến các trang web khác
2.3.2 . Địa chỉ tương đối và tuyệt đối
 Địa chỉ tương đối
Nếu liên kết đến một tệp ở ngay trên máy chủ của bạn thì không cần dùng
địa chỉ U L tuyệt đối mà dùng địa chỉ tương đối. Thay cho URL là tên tệp cùng
với đường đẫn đến thư mục nơi chứa tệp đích.
<A HREF="path & filename">... </A>
Ví dụ:
<A HREF="examples/exam .htm">Ví dụ 1</A>
 Địa chỉ tuyệt đối
Khi liên kết tới một tệp nằm ở ngoài máy tính cục bộ ta phải nêu rõ giao
thức và đầy đủ địa chỉ U L của tệp đích.
<A HREF="full URL">... </A>
Ví dụ:
<A HREF="http://www.vn .edu .vn/index.html>ĐHQG Hà Nội</A>
<A HREF="http://www.dantri.com.vn/index.html>Báo dân trí</A>
2.3.3. Phối hợp màu cho văn bản siêu liên kết
Mở hộp thoại Page Properties, chọn thẻ Formatting, tại mục Color:
- Để đổi màu của hyperlink, chọn màu từ danh sách thả xuống (drop-down
list) của Hyperlink hoặc chọn Custom để định nghĩa màu mới.
- Để đổi màu của của active Hyperlink, chọn màu từ danh sách thả xuống
(drop-down list) của Active Hyperlink hoặc chọn Custom để định nghĩa màu
mới.
- Để đổi màu của của Visited Hyperlink, chọn màu từ danh sách thả xuống
(drop-down list) của Visited Hyperlink hoặc chọn Custom để định nghĩa màu
mới.
59
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
2.3.4. Đánh dấu trang Bookmark
 Tạo các Bookmark trong trang:
 Bookmark: là các điểm đánh dấu của một đoạn
 Được dùng để tạo các điểm đến của các liên kết trong
 Thực hiện: Chọn các ký tự làm tiêu đề của đoạn  Insert 
Bookmark. Hộp thoại Bookmark xuất hiện
60
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com



Nhập tên Bookmark
Click OK
61

Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
.
2.3. 5. Tạo một trang web từ một siêu liên kết
 Chèn liên kết ngoài:
 Chọn các ký tự làm liên kết
 Chọn Insert  Hyperlink (hoặc ấn tổ hợp phím “Ctrl” + K)
 Hoặc click biểu tượng hyperlink trên thanh công cụ
 Hộp thoại Insert hyperlink xuất hiện  click chọn trang web cần
liên kết  OK
 Hoặc nhập vào địa chỉ (của trang web trên mạng) vào ô Address 
click OK
2.3.6. Liên kết tới một trang trong web
 Chèn liên kết trong:
 Chọn các ký tự làm liên kết
 
62
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 Chọn Insert  Hyperlink ( hoặc ấn tổ hợp phím “Ctrl” + K)
 Hoặc click biểu tượng hyperlink trên thanh công cụ
 Hộp thoại Insert hyperlink xuất hiện  click nút Bookmark
 Chọn tên Bookmark cần liên kết đến  click OK
2.3.7. Tạo hình ảnh siêu liên kết
Như ở phần trên, cấu trúc thành phần HTML mối liên kết siêu văn bản là:
<A HREF="Đầu mối liên kết">
Để thay “đầu mối liên kết” bởi một biểu tượng, hay một hình ảnh... Ta chỉ
cần chèn một hình ảnh hay biểu tượng đó vào vị trí của “đầu mối liên kết”.
Ví dụ:
<A HREF=”http://www.vn .edu .vn”><IMG SRC=” logo.gif”></A>
2.4 Đồ họa trong trang web
2.4.1. Định dạng JPEG
Dạng JPEG chứa các ảnh có chất lượng ảnh chụp vốn có thể chứa hàng
ngàn màu khác nhau. Để làm cho kích cỡ file trở nên hợp lý, làm cho ảnh tải
nhanh hơn trên Web hoặc được truyền tải bởi phương tiện khác, JPEG sử dụng
63
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
một kỹ thuật nén dữ liệu nhằm làm cho kích cỡ file nhỏ hơn nhưng bù lại chất
lượng ảnh bị mất.
Khi một file JPEG được tạo ra bởi một camera kỹ thuật số, máy quét hoặc
phần mềm thì người ta cần đạt được sự cân bằng giữa kích cỡ và chất lượng. Độ
rõ nét và chiều sâu ảnh càng cao thì kích cỡ của file càng lớn.
Do nén, JPEG thường là lựa chọn thích hợp nhất cho các ảnh phức tạp với
số màu lớn. Các file JPEG thích hợp đối với việc hiển thị các ảnh chụp được
quét vốn không có các vùng màu đồng nhất.
JPEG thường là lựa chọn kém cho các ảnh với các vùng lớn có một màu
đơn. Do cách xử lý việc nén, các đường gợn sóng (thường được gọi là “răng
cưa”) sẽ xuất hiện trông mờ hơn.
2.4.2. Định dạng GIF
Dạng GIF chứa các ảnh được giới hạn chỉ 256 màu. Dạng này lý tưởng
cho các ảnh có nhiều màu đồng nhất (các nút menu), các ảnh đồ họa nhỏ (các
biểu tượng, quảng cáo) và những hình ảnh khác vốn không đòi hỏi chi tiết rõ nét.
Nếu một ảnh chụp được hiển thị dưới dạng GIF, đầu tiên nó phải được làm giảm
sao cho không quá 256 màu xuất hiện khác nhau trong ảnh.
Dạng GIF hỗ trợ hai hiệu ứng đặc biệt thường thấy trên Web: độ trong
suốt và hoạt hình.
Độ trong suốt (transparency) là một kỹ thuật nhằm làm cho một phần của
một ảnh hòa hợp với nền của trang, nền có thể là một màu đồng nhất hoặc một
ảnh. Độ trong suốt sẽ làm việc bằng cách chỉ định một màu trong một ảnh GIF
lmà màu trong suốt, màu này sẽ không được hiển thị khi ảnh được hiển thị trên
một trang Web.
2.4.3. Chèn ảnh vào trang web
 Insert  Picture
 Chọn “Clip art”: nếu ta muốn chèn từ bộ sưu tập ảnh của FrontPage
 Chọn “From File”: nếu file ảnh đã tồn tại trên đĩa. (Chú ý: ảnh phải
được chép vào thư mục “Images” của web site).
64
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
2.4.4. Nhập ảnh từ ClipArt
Chú ý:
 Sau khi chèn xong ta phải save trang web lại



65
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
 Nếu file ảnh vừa chèn chưa có trong web site thì màn hình Save
embedded files xuất hiện để yêu cầu chúng ta lưu lại file ảnh vừa chèn
2.4.5. Lấy một ảnh từ www
Đặt trỏ text tại nơi muốn chèn ảnh.
1. Chọn Insert/Picture.
2. Kích nút World Wide Web. Trình duyệt Web được mở.
3. Trong trình duyệt Web, gõ vị trí và tên của ảnh bạn muốn chèn
và ấn ENTER để hiện ảnh.
Đổi tên file nếu
cần thiết
1. Click
Change Folder
4. Click OK
2. Chọn thư mục
Images
3. Click OK
66
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
4. Quay về hộp hội thoại Picture và kích OK để chèn ảnh.
2.4.6 . Lưu hình ảnh
2.4.7. Chuyển đổi ảnh đồ họa
* Chuyển thành ảnh GIF
Chọn ảnh muốn chuyển, chọn Edit/Picture Properties, chọn mục General.
Tại phần Type, nhấn chọn GIF, sau đó nhấn OK.
* Chuyển thành ảnh JPEG
Chọn ảnh muốn chuyển, chọn Edit/Picture Properties, chọn mục General.
Tại phần Type, nhấn chọn JPEG, sau đó nhấn OK.
2.4.8. Tạo bo viền và đặt vòng đệm cho ảnh
2.4.9. Tạo nhãn cho ảnh
Chọn ảnh cần xử lý. Trên thanh công cụ Picture, chọn nút Text, sau đó gõ
text trong hình chữ nhật trên ảnh. Có thể thay đổi kích thước miền text và di
chuyển nó tới các vị trí khác như các đối tượng đồ họa thông dụng. Việc chèn
text vào ảnh không làm thây dởi file ảnh trong trang web.
2.4.10. Các thao tác định dạng ảnh trong Fontpage
2.4.11. Thay đổi kích thước, hình dạng, cắt xén hình ảnh
Để định lại kích cỡ một ảnh, thực hiện các bước sau:
1. Click vào ảnh. Các núm chọn xuất hiện xung quanh các mép của ảnh.
Khi ta đặt chuột lên trên một trong các núm này, con trỏ biến thành một mũi tên,
điều này biểu thị rằng ta có thể kéo các núm xung quanh.
2. Để thay đổi kích cỡ của ảnh, kéo một núm đến một ví trí mới:
a. Để thay đổi chiều cao, giữ núm tại phần chính giữa của đỉnh
hoặc đáy của ảnh.
b. Để thay đổi chiều rộng, giữ núm tại phần chính giữa của cạnh
trái và phải.
c. Để thay đổi kích cỡ trong khi duy trì chiều rộng và chiều cao,
giữ bất kỳ góc nào.
Ảnh thay đổi kích cỡ khi các núm được di chuyển, cho phép ta xem trước
việc thay đổi trước khi nó được hoàn tất.
67
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
3. Nhả núm. Một hộp nhỏ xuất hiện kế bên ảnh. Click hộp này để mở một
menu thả xuống vốn quyết định ảnh sẽ được định lại kích cỡ như thế nào.
4. Chọn Only Modify Size Attributes để thay đổi kích cỡ hiển thị của
ảnh.
5. Chọn Resample Picture to Match Size để định lại kích cỡ ảnh một
cách cố định.
Để thay đổi kích cỡ, hãy kéo hộp đến một vị trí mới để làm cho ảnh lớn
hoặc nhỏ hơn,
2.4.12. Lật và xoay hình ảnh
Chọn ảnh cần xử lý. Trên thanh công cụ Picture:
- Chọn nút Flip để lật dọc ảnh;
- Chọn nút Reserse để lật ngược ảnh;
- Chọn nút Rotate Left để quay ảnh 900
ngược chiều kim đồng hồ;
- Chọn nút Rotate Right để quay ảnh 900
theo chiều kim đồng hồ;
2.4.13. Tạo các hiệu ứng
2.4.14. Dán văn bản lên hình ảnh
2.5. T¹o Frame trong trang web
2.5.1. Tạo Frame
 Tạo một trang web có frame ta thực hiện:
 Click mũi tên bên cạnh biểu tượng New à Page
 Hộp thoại Page template xuất hiện à Frames pages
68
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
2.5.2. Tìm hiểu menu Frame
Chọn mẫu
Hiển thị mẫu
của trang
Click OK
Chèn trang web đã
có vào frame
Tạo trang web mới
cho frame
69
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
Tại frame muốn thay đổi thuộc tính, thực hiện lệnh Frame/Frame Properties.
Xuất hiện hộp hội thoại Frame Properties.
- Name: Tên của frame, được dùng để thiết lập đích trong liên kết. Ban đầu, hộp
Name được gán tên mặc định bởi FrontPage Editor.
- Options: Phần này thiết lập frame có thay đổi kích thước và có hay không có
thanh cuộn frame hay không.
- Resizable in Browser: Cho phép người sử dụng thay đổi kích thước.
- Show Scrollbars: Lựa chọn khả năng xuất hiện thanh cuộn frame:
 If Needed: Hiển thị thanh cuộn nếu dữ liệu của trang lớn hơn vùng hiển thị
của frame.
 Never: Không xuất hiện thanh cuộn.
 Always: Luôn xuất hiện thanh cuộn.
- Frame Size: Đặc tả chiều cao và chiều rộng của frame tại Width và Row
Height. Tuy nhiên, bạn có thể thay đổi kích thước của frame bằng cách rê
chuột trên đường viền của frame ở chế độ view Normal của FrontPage.
Kiểu giá trị của đặc tả này gồm 3 loại:
- Relative: Tính tương đối với các frame cùng cạnh theo chiều cao hoặc chiều
rộng.
- Percent: Tính tương đối % theo chiều cao và chiều rộng của màn hình trình
duyệt Web.
- Pixels: Tính chính xác bằng đơn vị điểm.
- Margins: Đặc tả lề của frame tính bằng điểm, với Width là lề trái và lề phải,
Height là lề trên và dưới.
- Initial Page: Đặc tả trang khởi tạo của frame hiện thời. Gõ URL của trang hoặc
kích vào nút Browse để chọn trang khởi tạo mới.
* Thay đổi khoảng cách giữa các frame
- Thực hiện lệnh Frame/Frame Page Properties.
- Chọn Frames, vào giá trị khoảng cách giữa các frame tại Frames
Spacing. Khoảng cách này được tính bằng điểm, giá trị ngầm định là 2 pixels.
* Tạo viền cho frame
70
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
- Thực hiện lệnh Frame/Frame Page Properties.
- Chọn Frames, kích Show Borders.
CHƯƠNG 3: THIẾT KẾ WEBSITE VỚI CÔNG CỤ DREAMWEAVER
3.1. Giới thiệu DREAMWEAVER
3.1.1. Cài đặt
3.1.2. Màn hình giao diện DREAMWEAVER
* Insert Bar:
- Common: Chèn các đối tượng: Hyperlink, Table, Image, Flash, Date, Template
71
Insert Bar
Panel groupsProperties Inspector
Document Bar
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
– 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: Tạo trang web bằng code view…
Document Window: Cửa sổ dùng để tạo và
* Document Bar:
- Show code view: hiển thị mã HTML
– Show Design view: chế độ thiết kế, sử dụng các công cụ của Dreamwerver.
– Show code and design view: hiển thị mã HTML và chế độ 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.
* Properties Inspector:
– Hiển thị các thuộc tính của các đối tượng đang được chọn.
- Cho phép hiệu chỉnh các thuộc tính của đối tượng được chọn.
* Panel groups: nhóm các Panel dùng để 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.
3.2. Làm việc với các site Dreamweaver MX 2004
3.2.1. Tạo site mới
Trước khi xây dựng một Website ta cần phải tạo một mục Site tương
ứng. Các bước thực hện việc định nghĩa Site như sau:
1. Chọn Site à Manage Sites… àNew àSite. Màn hình sau xuất
hiện:
72
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
73
Gõ tên Site vào
đây (VD: Mysite)
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
74
Nhấn vào đây để chọn nơi
lưu các Site
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
75
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
76
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
3.2.2. Quản lý các site
Do phải làm việc với nhiều Site nên DW cũng cung cấp các chức năng
để quản lý chúng. Để mở cửa sổ quản lý các mục Site ta chọn Site à Edit
Sites. Cửa sổ Edit Sites xuất hiện, chức năng của các nút như sau:
3.2.3. Che giấu các folder và file trong site
3.2.4 .Kiểm tra site
77
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
3.3. Thiết kế các trang trong Dreamweaver MX 2004
3.3.1. Thiết kế các trang với CSS
* Tạo CSS cục bộ:
– Chọn Text à CSS Styles à New…
– Hoặc Window àCSS Style, mở CSS Panel, Click New CSS Style.
- Selector type: chọn loại CSS
- Define in:
+ This document only: Tạo style (dạng internal style), sử dụng
trong trang hiện hành.
+ New Style Sheet file: Tạo tập tin CSS mới (dạng External style).
* Có 3 loại style:
- Class: style dạng lớp. Name: nhập tên lớp, bắt đầu bằng dấu chấm (.)
78
Một Website sau khi đã tạo thành
công thì trong site panel phải có
nhành thư mục trong đó các biểu
tượng file/folder có màu xanh dạng
như hình bên.
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
- Tag: định nghĩa tag, Tag: chọn tên tag
- Advanced: định dạng các tag riêng biệt, Selector: nhập #idName (bắt đầu
bằng dấu #). Chọn xong click OK à cửa sổ CSS style definition xuất hiện:
+ Khung Category: chọn nhóm định dạng
+ Khung Style: chọn các định dạng
* Cách sử dụng Style cục bộ:
– Chọn nội dung văn bản cần định dạng
– Trong CSS Style Panel, chọn tên CSS
– Hoặc chọn tên style trong Properties inspector
– Nếu loại tag định dạng riêng biệt thì đối tượng sử dụng style phải
có tên định danh ID.
* Tạo tập tin CSS:
– Text à CSS Styles à New
– Trong hộp thoại New CSS Style.
– Selector Type: Chọn loại style
– Define in: Chọn New Style Sheet file OK
– Hộp thoại yêu cầu lưu tập tin CSS, có phần mở rộng .CSS
79
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
– Chọn các thuộc tính định dạng trong cửa sổ CSS Style definition à
Apply à OK.
Trong CSS panel xuất hiện tập tin Style vừa tạo như sau:
* Áp dụng CSS từ tập tin CSS:
– Mở trang HTML cần sử dụng tập tin CSS
– Chọn Text à CSS Style à Manage Style.
– Hoặc Click nút Attach Style Sheet trong Style Panel
– Chọn tập tin CSS cần kết nối, Click nút Browse…
– Link: Chỉ liên kết với tập tin CSS để sử dụng
– Import : Chép tập tin CSS vào trang.
* Xoá một CSS Styles:
– Khi xoá một CSS Style thì những nội dung áp dụng CSS Style bị xoá
sẽ trở về trạng thái ban đầu.
– Chọn CSS Style cần xoá.
80
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
– Click nút Delete CSS Style trong CSS Style Panel, Hoặc Click
chuột phải, chọn Delete.
3.3.2. Làm việc với bảng biểu
 Tạo bảng:
- Đặt con trỏ ở vị trí cần tạo bảng.
- Vào menu Insert à Chọn Table hoặc click nút Table trên tab
Common của thanh công cụ Insert.
Trong đó:
- Rows: số dòng; Columns: số cột;
- Table width: chiều rộng của bảng;
- Border thickness: độ dày đường viền;
- Cell padding: khoảng cách giữa đường biên của ô với nội dung trong ô;
- Cell spacing: khoảng cách giữa các ô trong bảng;
 Định dạng cho bảng:
- Đặt con trỏ bên trong bảng cần chọn.
Công cụ Table
81
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
- Click phải chuột à chọn Table à Select Table (hoặc vào menu Modify à
Table à Select Table)
- Hiệu chỉnh các thông số của bảng trong cửa sổ Properties:
+ Bg color: chọn màu nền cho bảng;
+ Bg Image: chọn ảnh làm nền cho bảng
+ Brdr color: chọn màu cho đường viền của bảng
- Trộn nhiều ô thành 1 ô:
+ B1: Quét chọn các liên tiếp cần trộn
+ B2: Vào menu Modify à Table à Merge cells
- Tách 1 ô thành nhiều ô:
+ B1: Click chuột vào ô cần tách
+ B2: Vào menu Modify à Table à Split cell. Xuất hiện hộp thoại Split
cell
+ B3: Chọn tùy chọn Split cell into
à Rows: tách ô thành nhiều dòng
à Columns: tách ô thành nhiều cột
à Number of …: số lượng cần tách
 Định dạng ô trong bảng:
- B1: Click chuột vào ô cần định dạng•
- B2: Chọn các tùy chọn định dạng trong vùng Cell của cửa sổ Properties
• Horz: canh lề theo chiều ngang
• Vert: canh lề theo chiều dọc
• W: chiều rộng của ô
• H: chiều cao của ô
• Bg: chọn màu, tập tin ảnh làm nền cho ô
• Brdr: chọn màu cho đường viền của ô
 Thuộc tính của bảng
82
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
Trong đó:
- Rows: số hàng; Cols: số cột; W: Chiều rộng; H: chiều cao
- Border: độ dày khung; Align: canh biên; Border color: màu của khung
- BG color: màu nền; Bg Image: ảnh nền;
- Và một số thuộc tính khác…
3.3.3. Làm việc với form
 Công dụng: - Giúp người dùng giao tiếp với Webserver bằng các thành
phần trên Form.
 Các thành phần của Form:
- Label, Text Field, Text Area, Password Field
- Check Box, Radio Button, Radio Group.
- List/Menu
- Button, Image Field
- Jump Menu
 Chèn Form mới vào trang web:
- Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn
Form.
- Trên thanh công cụ Insert, chọn tab Forms à Form
Sau đó chèn các thành phần vào trong Form (tùy theo yêu cầu công việc) bằng
cách sử dụng các công cụ trên thanh công cụ Insert – tab Forms/menu Insert
-Form.
 Thay đổi các thuộc tính của Form:
83
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
- B1: Click chuột trên đường viền đỏ thể hiện form
- B2: Hiệu chỉnh các thuộc tính của form trên cửa sổ Properties:
• Action: địa chỉ trang web sẽ nhận các dữ liệu trên form
• Method: phương thức gửi dữ liệu
• Target: đối tượng cửa sổ (hoặc frame) hiển thị kết quả
3.3.4. Sử dụng các khung
 Công dụng:
- Chia màn hình thành nhiều phần khác nhau, mỗi vùng thể hiện một trang
web khác nhau.
- Giảm được phần trùng lắp trên nhiều trang web khác nhau.
Lưu ý: hình ảnh có thể bị biến dạng khi thu nhỏ hoặc phóng to cửa sổ trình
duyệt
 Cách tạo Frame:
Trên thanh công cụ Insert: chọn tab Layout → Frames → chọn kiểu Frame
Hoặc chọn tab HTML à Frames à chọn kiểu Frame
3.4. Thêm nội dung vào các trang
3.4.1. Làm việc với các trang
 Tạo trang web mới:
- Chọn File à New…
- Trong danh sach Category à Chọn Basic Page.
- Trong Basic Page à Chọn HTML.
- Nhấn nút Create
 Định dạng tổng thể cho trang web:
- B1: Vào menu Modify -> Page Properties (Ctrl-J). Xuất hiện hộp thoại Page
Properties
- B2: Category Appearance (CSS)
84
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
o Page font: Chọn font chữ mặc định cho trang web
o Size: Chọn kích thước và đơn vị cho mặc định cho ký tự
o Text color: Chọn màu mặc định cho ký tự
o Background color: Chọn màu nền cho trang web
o Background image: Chọn tập tin ảnh làm nền cho trang web
o Repeat: Chọn chế độ lập lại ảnh nền
o Left margin: Canh lề trái
o Right margin: Canh lề phải
o Top margin: Canh lề trên
o Bottom margin: Canh lề dưới
- B3: Category Link (CSS)
o Link font: Chọn font chữ cho văn bản liên kết
o Size: Chọn kích tước chữ cho văn bản liên kết
o Link color: Chọn màu mặc định cho văn bản liên kết
o Rollover link: Chọn màu cho văn bản liên kết khi rê chuột đến
o Visited links: Chọn màu mặc định cho văn bản liên kết đã được
click
o Active links: Chọn màu mặc định cho văn bản liên kết hiện tại
o Underline style: Chọn định dạng gạch chân cho văn bản liên kết
o Always underline: định dạng gạch chân
o Nerver underline: không gạch chân
o Show underline only on rollover: chỉ gạch chân khi rê chuột đến văn
bản liên kết
o Hide underline on rollerver: không gạch chân cho văn bản liên kết
nhưng khi rê chuột đến thì gạch chân.
- B4: Category Title/Encoding
o Titlte: Văn bản tiêu đề trang (hiển thị trên thanh tiêu đề của trình
duyệt)
85
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
o Encoding: Chọn mã hóa văn bản. Luôn luôn chọn Unicode (UTF-8)
- B5 : Chon Apply vào nhấn OK để hoàn tất.
3.4.2. Chèn và định dạng text
 Chèn Text: Trên thanh công cụ Insert: chọn tab Text
 Định dạng text:
- B1: Dùng chuột chọn khối văn bản cần định dạng
- B2: Vào menu Format:
• Align: Canh lề văn bản
o Left: canh trái
o Center: canh giữa
o Right: canh phải
o Justify: canh đều
• List: Định dạng danh sách đề mục
o None: không định dạng đề mục
o Unordered List: định dạng đề mục (không đánh số thứ tự)
o Ordered List: định dạng đánh số thứ tự đề mục
• Font: Chọn font chữ cho văn bản
o Sau khi chọn font, xuất hiện hộp thoại New CSS Rule
o Chọn lớp định dạng (Class)
o Chọn tên lớp định dạng hoặc nhập tên mới
o Chọn OK
• Style: Chọn định dạng
o Bold: chữ đậm
o Italic: chữ nghiêng
o Underline: chữ gạch chân
• Color: Chọn màu cho văn bản
3.4.3. Chèn hình ảnh
* Ảnh trong thư mục Images của Site:
86
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
– Đặt dấu nháy tại vị trí cần chèn ảnh.
– Drag chuột kéo tập tin ảnh trong Site Panel thả vào trang.
* Ảnh ngoài Site:
– Chọn Insert à Image.
– Xuất hiện hộp thoại Select Image Source, chọn đường dẫn nơi lưu file
hình ảnh.
– Chọn tập tin ảnh cần chèn à OK.
* Hiệu chỉnh thuộc tính của ảnh:
Chọn ảnh cần thay đổi thuộc tính: Window à Properties
– Image: tên ảnh
– W (Width), H (Height): Độ rộng và chiều cao của ảnh, tính bằng Pixel
– Src: đường dẫn tương đối đến tập tin ảnh
– Alt: câu thông báo xuất hiện trên trình duyệt khi rê chuột vào ảnh.
– Link: Địa chỉ URL nơi cần liên kết đến.
– Edit: Chuyển qua Macromedia Fire Works hiệu chỉnh ảnh.
– Crop: Cắt xén ảnh.
– Brightness/Contrast: Chỉnh độ sáng tối của ảnh.
– Sharpen: Chỉnh độ sắc nét cho ảnh.
– Resample:Lưu lại kích thước đã điều chỉnh.
– Optimize in Fireworks: chuyển qua Macromedia FireWoks để hiệu
chỉnh.
– Map: bản đồ liên kết ảnh
– VSpace, Hspace: Khoảng cách trên, dưới, trái, phải giữa phần nội
dung văn bản đến ảnh
– Target: Khung chứa trang liên kết đến
87
Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com
– Low Src: tên tập tin ảnh phụ có độ phân giải thấp, làm ảnh thay thế
khi chờ hiển thị ảnh chính trên trình duyệt.
– Border: đường viền ảnh
– Align: canh lề trái, phải, giữa
3.5. Làm việc với Page Code
3.5.1. Tạo mã trong Dreamweaver
3.5.2. Hiệu chỉnh mã trong khung xem Design
88

More Related Content

What's hot

Báo cáo đồ án tôt nghiệp: Xây dựng Website bán hàng thông minh
Báo cáo đồ án tôt nghiệp: Xây dựng Website bán hàng thông minhBáo cáo đồ án tôt nghiệp: Xây dựng Website bán hàng thông minh
Báo cáo đồ án tôt nghiệp: Xây dựng Website bán hàng thông minh
nataliej4
 
[Athena]Nghiên Cứu Và Xây Dựng Website Bằng Wordpress
[Athena]Nghiên Cứu Và Xây Dựng Website Bằng Wordpress[Athena]Nghiên Cứu Và Xây Dựng Website Bằng Wordpress
[Athena]Nghiên Cứu Và Xây Dựng Website Bằng Wordpress
Cương Trần
 
Báo Cáo Đồ Án 2 : Thiết Kế Web Bán Đồng Hồ
Báo Cáo Đồ Án 2 : Thiết Kế Web Bán Đồng HồBáo Cáo Đồ Án 2 : Thiết Kế Web Bán Đồng Hồ
Báo Cáo Đồ Án 2 : Thiết Kế Web Bán Đồng HồzDollz Lovez
 
Bai tap chia_dia_chi_ip
Bai tap chia_dia_chi_ipBai tap chia_dia_chi_ip
Bai tap chia_dia_chi_ip
Nguyễn Chí Hiền
 
Đề tài: Xây dựng phần mềm quản lý quán cà phê, HOT, 9đ
Đề tài: Xây dựng phần mềm quản lý quán cà phê, HOT, 9đĐề tài: Xây dựng phần mềm quản lý quán cà phê, HOT, 9đ
Đề tài: Xây dựng phần mềm quản lý quán cà phê, HOT, 9đ
Dịch vụ viết bài trọn gói ZALO 0917193864
 
Báo Cáo Cuối Ký Thực Tập Tốt Nghiệp Xậy Dựng Web Bán Hàng Trực Tuyến bằng Ope...
Báo Cáo Cuối Ký Thực Tập Tốt Nghiệp Xậy Dựng Web Bán Hàng Trực Tuyến bằng Ope...Báo Cáo Cuối Ký Thực Tập Tốt Nghiệp Xậy Dựng Web Bán Hàng Trực Tuyến bằng Ope...
Báo Cáo Cuối Ký Thực Tập Tốt Nghiệp Xậy Dựng Web Bán Hàng Trực Tuyến bằng Ope...hoainhan1501
 
Đề Tài Thiết Kế Phần Mềm Quản Lý Sinh Viên
Đề Tài Thiết Kế Phần Mềm Quản Lý Sinh Viên Đề Tài Thiết Kế Phần Mềm Quản Lý Sinh Viên
Đề Tài Thiết Kế Phần Mềm Quản Lý Sinh Viên
nataliej4
 
báo cáo bài tập lớn phân tích thiết kế hệ thống quản lý khách sạn
báo cáo bài tập lớn phân tích thiết kế hệ thống quản lý khách sạnbáo cáo bài tập lớn phân tích thiết kế hệ thống quản lý khách sạn
báo cáo bài tập lớn phân tích thiết kế hệ thống quản lý khách sạn
nataliej4
 
Giáo trình phân tích thiết kế hệ thống thông tin
Giáo trình phân tích thiết kế hệ thống thông tinGiáo trình phân tích thiết kế hệ thống thông tin
Giáo trình phân tích thiết kế hệ thống thông tin
Võ Phúc
 
PHÂN TÍCH THIẾT KẾ HỆ THỐNG BÁN HÀNG QUA MẠNG
PHÂN TÍCH THIẾT KẾ HỆ THỐNG BÁN HÀNG QUA MẠNGPHÂN TÍCH THIẾT KẾ HỆ THỐNG BÁN HÀNG QUA MẠNG
PHÂN TÍCH THIẾT KẾ HỆ THỐNG BÁN HÀNG QUA MẠNG
Thùy Linh
 
Slide báo cáo đồ án tốt nghiệp "Website cửa hàng điện thoại trực tuyến"
Slide báo cáo đồ án tốt nghiệp "Website cửa hàng điện thoại trực tuyến"Slide báo cáo đồ án tốt nghiệp "Website cửa hàng điện thoại trực tuyến"
Slide báo cáo đồ án tốt nghiệp "Website cửa hàng điện thoại trực tuyến"
Tú Cao
 
Đề tài: Quản lý cửa hàng vật liệu xây dựng, HAY, 9đ
Đề tài: Quản lý cửa hàng vật liệu xây dựng, HAY, 9đĐề tài: Quản lý cửa hàng vật liệu xây dựng, HAY, 9đ
Đề tài: Quản lý cửa hàng vật liệu xây dựng, HAY, 9đ
Dịch vụ viết bài trọn gói ZALO 0917193864
 
đồ áN xây dựng website bán laptop 1129155
đồ áN xây dựng website bán laptop 1129155đồ áN xây dựng website bán laptop 1129155
đồ áN xây dựng website bán laptop 1129155
nataliej4
 
Xây dựng hệ thống quản lý sân bóng sử dụng Yii Framework
Xây dựng hệ thống quản lý sân bóng sử dụng Yii FrameworkXây dựng hệ thống quản lý sân bóng sử dụng Yii Framework
Xây dựng hệ thống quản lý sân bóng sử dụng Yii Framework
GMO-Z.com Vietnam Lab Center
 
Giới thiệu về Rational Rose và Các diagram
Giới thiệu về Rational Rose và Các diagramGiới thiệu về Rational Rose và Các diagram
Giới thiệu về Rational Rose và Các diagram
Huy Vũ
 
đồ áN phân tích thiết kế hệ thống quản lý bán hàng siêu thị
đồ áN phân tích thiết kế hệ thống quản lý bán hàng siêu thịđồ áN phân tích thiết kế hệ thống quản lý bán hàng siêu thị
đồ áN phân tích thiết kế hệ thống quản lý bán hàng siêu thị
Thanh Hoa
 
Bài 6: Thiết kế cơ sở dữ liệu - Giáo trình FPT
Bài 6: Thiết kế cơ sở dữ liệu - Giáo trình FPTBài 6: Thiết kế cơ sở dữ liệu - Giáo trình FPT
Bài 6: Thiết kế cơ sở dữ liệu - Giáo trình FPT
MasterCode.vn
 
Đề tài: Xây dựng phần mềm quản lý nhà hàng ăn uống
Đề tài: Xây dựng phần mềm quản lý nhà hàng ăn uốngĐề tài: Xây dựng phần mềm quản lý nhà hàng ăn uống
Đề tài: Xây dựng phần mềm quản lý nhà hàng ăn uống
Dịch Vụ Viết Thuê Khóa Luận Zalo/Telegram 0917193864
 
Httt bai tap
Httt bai tapHttt bai tap
Httt bai tap
duong duong
 
Báo cáo xây dựng và phát triển phần mềm
Báo cáo xây dựng và phát triển phần mềmBáo cáo xây dựng và phát triển phần mềm
Báo cáo xây dựng và phát triển phần mềm
ytthuan
 

What's hot (20)

Báo cáo đồ án tôt nghiệp: Xây dựng Website bán hàng thông minh
Báo cáo đồ án tôt nghiệp: Xây dựng Website bán hàng thông minhBáo cáo đồ án tôt nghiệp: Xây dựng Website bán hàng thông minh
Báo cáo đồ án tôt nghiệp: Xây dựng Website bán hàng thông minh
 
[Athena]Nghiên Cứu Và Xây Dựng Website Bằng Wordpress
[Athena]Nghiên Cứu Và Xây Dựng Website Bằng Wordpress[Athena]Nghiên Cứu Và Xây Dựng Website Bằng Wordpress
[Athena]Nghiên Cứu Và Xây Dựng Website Bằng Wordpress
 
Báo Cáo Đồ Án 2 : Thiết Kế Web Bán Đồng Hồ
Báo Cáo Đồ Án 2 : Thiết Kế Web Bán Đồng HồBáo Cáo Đồ Án 2 : Thiết Kế Web Bán Đồng Hồ
Báo Cáo Đồ Án 2 : Thiết Kế Web Bán Đồng Hồ
 
Bai tap chia_dia_chi_ip
Bai tap chia_dia_chi_ipBai tap chia_dia_chi_ip
Bai tap chia_dia_chi_ip
 
Đề tài: Xây dựng phần mềm quản lý quán cà phê, HOT, 9đ
Đề tài: Xây dựng phần mềm quản lý quán cà phê, HOT, 9đĐề tài: Xây dựng phần mềm quản lý quán cà phê, HOT, 9đ
Đề tài: Xây dựng phần mềm quản lý quán cà phê, HOT, 9đ
 
Báo Cáo Cuối Ký Thực Tập Tốt Nghiệp Xậy Dựng Web Bán Hàng Trực Tuyến bằng Ope...
Báo Cáo Cuối Ký Thực Tập Tốt Nghiệp Xậy Dựng Web Bán Hàng Trực Tuyến bằng Ope...Báo Cáo Cuối Ký Thực Tập Tốt Nghiệp Xậy Dựng Web Bán Hàng Trực Tuyến bằng Ope...
Báo Cáo Cuối Ký Thực Tập Tốt Nghiệp Xậy Dựng Web Bán Hàng Trực Tuyến bằng Ope...
 
Đề Tài Thiết Kế Phần Mềm Quản Lý Sinh Viên
Đề Tài Thiết Kế Phần Mềm Quản Lý Sinh Viên Đề Tài Thiết Kế Phần Mềm Quản Lý Sinh Viên
Đề Tài Thiết Kế Phần Mềm Quản Lý Sinh Viên
 
báo cáo bài tập lớn phân tích thiết kế hệ thống quản lý khách sạn
báo cáo bài tập lớn phân tích thiết kế hệ thống quản lý khách sạnbáo cáo bài tập lớn phân tích thiết kế hệ thống quản lý khách sạn
báo cáo bài tập lớn phân tích thiết kế hệ thống quản lý khách sạn
 
Giáo trình phân tích thiết kế hệ thống thông tin
Giáo trình phân tích thiết kế hệ thống thông tinGiáo trình phân tích thiết kế hệ thống thông tin
Giáo trình phân tích thiết kế hệ thống thông tin
 
PHÂN TÍCH THIẾT KẾ HỆ THỐNG BÁN HÀNG QUA MẠNG
PHÂN TÍCH THIẾT KẾ HỆ THỐNG BÁN HÀNG QUA MẠNGPHÂN TÍCH THIẾT KẾ HỆ THỐNG BÁN HÀNG QUA MẠNG
PHÂN TÍCH THIẾT KẾ HỆ THỐNG BÁN HÀNG QUA MẠNG
 
Slide báo cáo đồ án tốt nghiệp "Website cửa hàng điện thoại trực tuyến"
Slide báo cáo đồ án tốt nghiệp "Website cửa hàng điện thoại trực tuyến"Slide báo cáo đồ án tốt nghiệp "Website cửa hàng điện thoại trực tuyến"
Slide báo cáo đồ án tốt nghiệp "Website cửa hàng điện thoại trực tuyến"
 
Đề tài: Quản lý cửa hàng vật liệu xây dựng, HAY, 9đ
Đề tài: Quản lý cửa hàng vật liệu xây dựng, HAY, 9đĐề tài: Quản lý cửa hàng vật liệu xây dựng, HAY, 9đ
Đề tài: Quản lý cửa hàng vật liệu xây dựng, HAY, 9đ
 
đồ áN xây dựng website bán laptop 1129155
đồ áN xây dựng website bán laptop 1129155đồ áN xây dựng website bán laptop 1129155
đồ áN xây dựng website bán laptop 1129155
 
Xây dựng hệ thống quản lý sân bóng sử dụng Yii Framework
Xây dựng hệ thống quản lý sân bóng sử dụng Yii FrameworkXây dựng hệ thống quản lý sân bóng sử dụng Yii Framework
Xây dựng hệ thống quản lý sân bóng sử dụng Yii Framework
 
Giới thiệu về Rational Rose và Các diagram
Giới thiệu về Rational Rose và Các diagramGiới thiệu về Rational Rose và Các diagram
Giới thiệu về Rational Rose và Các diagram
 
đồ áN phân tích thiết kế hệ thống quản lý bán hàng siêu thị
đồ áN phân tích thiết kế hệ thống quản lý bán hàng siêu thịđồ áN phân tích thiết kế hệ thống quản lý bán hàng siêu thị
đồ áN phân tích thiết kế hệ thống quản lý bán hàng siêu thị
 
Bài 6: Thiết kế cơ sở dữ liệu - Giáo trình FPT
Bài 6: Thiết kế cơ sở dữ liệu - Giáo trình FPTBài 6: Thiết kế cơ sở dữ liệu - Giáo trình FPT
Bài 6: Thiết kế cơ sở dữ liệu - Giáo trình FPT
 
Đề tài: Xây dựng phần mềm quản lý nhà hàng ăn uống
Đề tài: Xây dựng phần mềm quản lý nhà hàng ăn uốngĐề tài: Xây dựng phần mềm quản lý nhà hàng ăn uống
Đề tài: Xây dựng phần mềm quản lý nhà hàng ăn uống
 
Httt bai tap
Httt bai tapHttt bai tap
Httt bai tap
 
Báo cáo xây dựng và phát triển phần mềm
Báo cáo xây dựng và phát triển phần mềmBáo cáo xây dựng và phát triển phần mềm
Báo cáo xây dựng và phát triển phần mềm
 

Viewers also liked

Cartilla lina guillin
Cartilla lina guillinCartilla lina guillin
Cartilla lina guillin
Lina Guillin
 
Mu0013 hr audit
Mu0013 hr auditMu0013 hr audit
Mu0013 hr audit
consult4solutions
 
Eu projects of Mehmet Çeli̇kel Li̇sesi̇
Eu projects of Mehmet Çeli̇kel Li̇sesi̇Eu projects of Mehmet Çeli̇kel Li̇sesi̇
Eu projects of Mehmet Çeli̇kel Li̇sesi̇
Youngtourismtr
 
Interfaces
InterfacesInterfaces
Interfaces
Larry Nelson
 
かねぐら個人版
かねぐら個人版かねぐら個人版
かねぐら個人版
Manabu Kondo
 
English cv 3
English cv 3English cv 3
English cv 3
fatimah alfaqeeh
 
Seguridad informática
Seguridad informáticaSeguridad informática
Seguridad informática
Ambar Lopez
 
DHW Planning for Growth copy
DHW Planning for Growth copyDHW Planning for Growth copy
DHW Planning for Growth copy
Brett Lear
 
Wizard Food: sweets, butterbeer, and childhood tastes
Wizard Food: sweets, butterbeer, and childhood tastesWizard Food: sweets, butterbeer, and childhood tastes
Wizard Food: sweets, butterbeer, and childhood tastes
Emily Truman
 
Is My Life Balanced?
Is My Life Balanced?Is My Life Balanced?
Is My Life Balanced?
irishuanng
 
математика иац
математика иацматематика иац
математика иац
Сания Боранбаева
 
Rishav_QA
Rishav_QARishav_QA
Rishav_QA
Rishav Singh
 
TOURISM AND HOSPITALITY MARKETING
TOURISM AND HOSPITALITY MARKETINGTOURISM AND HOSPITALITY MARKETING
TOURISM AND HOSPITALITY MARKETING
Janine Chong
 
Alliaud historia del magisterio en argentina
Alliaud historia del magisterio en argentinaAlliaud historia del magisterio en argentina
Alliaud historia del magisterio en argentina
Cristian Emiliano Valenzuela Issac
 
Mis vacaciones LILIANA MORALES
Mis vacaciones LILIANA MORALESMis vacaciones LILIANA MORALES
Mis vacaciones LILIANA MORALES
yiyismorales
 
Personal Data Law Update, Kazakhstan, 2015
Personal Data Law Update, Kazakhstan, 2015Personal Data Law Update, Kazakhstan, 2015
Personal Data Law Update, Kazakhstan, 2015
Galina Pogrebnaya
 

Viewers also liked (16)

Cartilla lina guillin
Cartilla lina guillinCartilla lina guillin
Cartilla lina guillin
 
Mu0013 hr audit
Mu0013 hr auditMu0013 hr audit
Mu0013 hr audit
 
Eu projects of Mehmet Çeli̇kel Li̇sesi̇
Eu projects of Mehmet Çeli̇kel Li̇sesi̇Eu projects of Mehmet Çeli̇kel Li̇sesi̇
Eu projects of Mehmet Çeli̇kel Li̇sesi̇
 
Interfaces
InterfacesInterfaces
Interfaces
 
かねぐら個人版
かねぐら個人版かねぐら個人版
かねぐら個人版
 
English cv 3
English cv 3English cv 3
English cv 3
 
Seguridad informática
Seguridad informáticaSeguridad informática
Seguridad informática
 
DHW Planning for Growth copy
DHW Planning for Growth copyDHW Planning for Growth copy
DHW Planning for Growth copy
 
Wizard Food: sweets, butterbeer, and childhood tastes
Wizard Food: sweets, butterbeer, and childhood tastesWizard Food: sweets, butterbeer, and childhood tastes
Wizard Food: sweets, butterbeer, and childhood tastes
 
Is My Life Balanced?
Is My Life Balanced?Is My Life Balanced?
Is My Life Balanced?
 
математика иац
математика иацматематика иац
математика иац
 
Rishav_QA
Rishav_QARishav_QA
Rishav_QA
 
TOURISM AND HOSPITALITY MARKETING
TOURISM AND HOSPITALITY MARKETINGTOURISM AND HOSPITALITY MARKETING
TOURISM AND HOSPITALITY MARKETING
 
Alliaud historia del magisterio en argentina
Alliaud historia del magisterio en argentinaAlliaud historia del magisterio en argentina
Alliaud historia del magisterio en argentina
 
Mis vacaciones LILIANA MORALES
Mis vacaciones LILIANA MORALESMis vacaciones LILIANA MORALES
Mis vacaciones LILIANA MORALES
 
Personal Data Law Update, Kazakhstan, 2015
Personal Data Law Update, Kazakhstan, 2015Personal Data Law Update, Kazakhstan, 2015
Personal Data Law Update, Kazakhstan, 2015
 

Similar to Bài giảng thiết kế website - truongkinhtethucpham.com

Tong quanthietkeweb
Tong quanthietkewebTong quanthietkeweb
Tong quanthietkeweb
Lương Nguyên
 
[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầu[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầu
Tin Học KEY
 
Web1012 slide 1
Web1012   slide 1Web1012   slide 1
Web1012 slide 1
Cà Rốt
 
Tìm hiểu về website
Tìm hiểu về websiteTìm hiểu về website
Tìm hiểu về website
Thông Quan Logistics
 
Tailieu.vncty.com thiet ke web dai hoc
Tailieu.vncty.com   thiet ke web dai hocTailieu.vncty.com   thiet ke web dai hoc
Tailieu.vncty.com thiet ke web dai hoc
Trần Đức Anh
 
Tailieu.vncty.com thiet ke web dai hoc
Tailieu.vncty.com   thiet ke web dai hocTailieu.vncty.com   thiet ke web dai hoc
Tailieu.vncty.com thiet ke web dai hoc
Trần Đức Anh
 
Chuong 1 tongquanve web&amp;htm-lcanban
Chuong 1  tongquanve web&amp;htm-lcanban Chuong 1  tongquanve web&amp;htm-lcanban
Chuong 1 tongquanve web&amp;htm-lcanban
Quý Nguyễn
 
Chuong 1 tongquanve web&amp;htm-lcanban
Chuong 1  tongquanve web&amp;htm-lcanban Chuong 1  tongquanve web&amp;htm-lcanban
Chuong 1 tongquanve web&amp;htm-lcanban
Quý Nguyễn
 
Baocaodoanhocphan vanquocthinh_11253321_ncth5b
Baocaodoanhocphan vanquocthinh_11253321_ncth5bBaocaodoanhocphan vanquocthinh_11253321_ncth5b
Baocaodoanhocphan vanquocthinh_11253321_ncth5b
quocthinh072
 
Lập trình web - HTML cơ bản
Lập trình web - HTML cơ bảnLập trình web - HTML cơ bản
Lập trình web - HTML cơ bản
Nhóc Nhóc
 
Website Bán Hàng Laptop Online cho công ty FPT.ppt
Website Bán Hàng Laptop Online cho công ty FPT.pptWebsite Bán Hàng Laptop Online cho công ty FPT.ppt
Website Bán Hàng Laptop Online cho công ty FPT.ppt
NguynQun487564
 
6-Kiểm tra mạng, World wide web.pptx
6-Kiểm tra mạng, World wide web.pptx6-Kiểm tra mạng, World wide web.pptx
6-Kiểm tra mạng, World wide web.pptx
HQucMinh
 
Báo cáo hoan chỉnh
Báo cáo hoan chỉnhBáo cáo hoan chỉnh
Báo cáo hoan chỉnhCuong Nguyen
 
Chuyên đề thực tập học phần Phần mềm mã nguồn mở: Website bán giày Vans
Chuyên đề thực tập học phần Phần mềm mã nguồn mở: Website bán giày VansChuyên đề thực tập học phần Phần mềm mã nguồn mở: Website bán giày Vans
Chuyên đề thực tập học phần Phần mềm mã nguồn mở: Website bán giày Vans
OnTimeVitThu
 
Lap trinh web la gi bat dau hoc lap trinh web tu dau
Lap trinh web la gi bat dau hoc lap trinh web tu dauLap trinh web la gi bat dau hoc lap trinh web tu dau
Lap trinh web la gi bat dau hoc lap trinh web tu dau
tuananh1896
 
Báo cáo hoan chỉnh
Báo cáo hoan chỉnhBáo cáo hoan chỉnh
Báo cáo hoan chỉnh
Cuong Nguyen
 
Cv le hoang anh
Cv   le hoang anhCv   le hoang anh
Cv le hoang anhThem Dao
 
Bao cao web cake php
Bao cao web cake phpBao cao web cake php
Bao cao web cake php
laonap166
 
E Com Ch00 Internet Web
E Com Ch00 Internet WebE Com Ch00 Internet Web
E Com Ch00 Internet WebChuong Nguyen
 
Luận văn xây dựng cổng thông tin điện tử ubnd tỉnh quảng bình bằng wordpress
Luận văn xây dựng cổng thông tin điện tử ubnd tỉnh quảng bình bằng wordpressLuận văn xây dựng cổng thông tin điện tử ubnd tỉnh quảng bình bằng wordpress
Luận văn xây dựng cổng thông tin điện tử ubnd tỉnh quảng bình bằng wordpress
nataliej4
 

Similar to Bài giảng thiết kế website - truongkinhtethucpham.com (20)

Tong quanthietkeweb
Tong quanthietkewebTong quanthietkeweb
Tong quanthietkeweb
 
[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầu[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầu
 
Web1012 slide 1
Web1012   slide 1Web1012   slide 1
Web1012 slide 1
 
Tìm hiểu về website
Tìm hiểu về websiteTìm hiểu về website
Tìm hiểu về website
 
Tailieu.vncty.com thiet ke web dai hoc
Tailieu.vncty.com   thiet ke web dai hocTailieu.vncty.com   thiet ke web dai hoc
Tailieu.vncty.com thiet ke web dai hoc
 
Tailieu.vncty.com thiet ke web dai hoc
Tailieu.vncty.com   thiet ke web dai hocTailieu.vncty.com   thiet ke web dai hoc
Tailieu.vncty.com thiet ke web dai hoc
 
Chuong 1 tongquanve web&amp;htm-lcanban
Chuong 1  tongquanve web&amp;htm-lcanban Chuong 1  tongquanve web&amp;htm-lcanban
Chuong 1 tongquanve web&amp;htm-lcanban
 
Chuong 1 tongquanve web&amp;htm-lcanban
Chuong 1  tongquanve web&amp;htm-lcanban Chuong 1  tongquanve web&amp;htm-lcanban
Chuong 1 tongquanve web&amp;htm-lcanban
 
Baocaodoanhocphan vanquocthinh_11253321_ncth5b
Baocaodoanhocphan vanquocthinh_11253321_ncth5bBaocaodoanhocphan vanquocthinh_11253321_ncth5b
Baocaodoanhocphan vanquocthinh_11253321_ncth5b
 
Lập trình web - HTML cơ bản
Lập trình web - HTML cơ bảnLập trình web - HTML cơ bản
Lập trình web - HTML cơ bản
 
Website Bán Hàng Laptop Online cho công ty FPT.ppt
Website Bán Hàng Laptop Online cho công ty FPT.pptWebsite Bán Hàng Laptop Online cho công ty FPT.ppt
Website Bán Hàng Laptop Online cho công ty FPT.ppt
 
6-Kiểm tra mạng, World wide web.pptx
6-Kiểm tra mạng, World wide web.pptx6-Kiểm tra mạng, World wide web.pptx
6-Kiểm tra mạng, World wide web.pptx
 
Báo cáo hoan chỉnh
Báo cáo hoan chỉnhBáo cáo hoan chỉnh
Báo cáo hoan chỉnh
 
Chuyên đề thực tập học phần Phần mềm mã nguồn mở: Website bán giày Vans
Chuyên đề thực tập học phần Phần mềm mã nguồn mở: Website bán giày VansChuyên đề thực tập học phần Phần mềm mã nguồn mở: Website bán giày Vans
Chuyên đề thực tập học phần Phần mềm mã nguồn mở: Website bán giày Vans
 
Lap trinh web la gi bat dau hoc lap trinh web tu dau
Lap trinh web la gi bat dau hoc lap trinh web tu dauLap trinh web la gi bat dau hoc lap trinh web tu dau
Lap trinh web la gi bat dau hoc lap trinh web tu dau
 
Báo cáo hoan chỉnh
Báo cáo hoan chỉnhBáo cáo hoan chỉnh
Báo cáo hoan chỉnh
 
Cv le hoang anh
Cv   le hoang anhCv   le hoang anh
Cv le hoang anh
 
Bao cao web cake php
Bao cao web cake phpBao cao web cake php
Bao cao web cake php
 
E Com Ch00 Internet Web
E Com Ch00 Internet WebE Com Ch00 Internet Web
E Com Ch00 Internet Web
 
Luận văn xây dựng cổng thông tin điện tử ubnd tỉnh quảng bình bằng wordpress
Luận văn xây dựng cổng thông tin điện tử ubnd tỉnh quảng bình bằng wordpressLuận văn xây dựng cổng thông tin điện tử ubnd tỉnh quảng bình bằng wordpress
Luận văn xây dựng cổng thông tin điện tử ubnd tỉnh quảng bình bằng wordpress
 

Recently uploaded

vật lý 1 k23 cuối kì c10-11- Nam Lê.pptx
vật lý 1 k23 cuối kì c10-11- Nam Lê.pptxvật lý 1 k23 cuối kì c10-11- Nam Lê.pptx
vật lý 1 k23 cuối kì c10-11- Nam Lê.pptx
LinhTrn115148
 
Diễn giải Tâm lý - Chiêm tinh Thầy Minh Tuệ
Diễn giải Tâm lý - Chiêm tinh Thầy Minh TuệDiễn giải Tâm lý - Chiêm tinh Thầy Minh Tuệ
Diễn giải Tâm lý - Chiêm tinh Thầy Minh Tuệ
Little Daisy
 
4. Lý luận nhận thức.pptx ở hanu nhé, học triết thầy thiệu
4. Lý luận nhận thức.pptx ở hanu nhé, học triết thầy thiệu4. Lý luận nhận thức.pptx ở hanu nhé, học triết thầy thiệu
4. Lý luận nhận thức.pptx ở hanu nhé, học triết thầy thiệu
NguynNgcHuyn27
 
CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - CHÂN TRỜI SÁNG TẠ...
CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - CHÂN TRỜI SÁNG TẠ...CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - CHÂN TRỜI SÁNG TẠ...
CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - CHÂN TRỜI SÁNG TẠ...
Nguyen Thanh Tu Collection
 
Bài 4. Khảo sát mạch dao động điện từ.doc
Bài 4. Khảo sát mạch dao động điện từ.docBài 4. Khảo sát mạch dao động điện từ.doc
Bài 4. Khảo sát mạch dao động điện từ.doc
phamvanchinhlqd
 
Giải phẫu sinh lý Hệ sinh sản DH Y duoc TPHCM
Giải phẫu sinh lý Hệ sinh sản DH Y duoc TPHCMGiải phẫu sinh lý Hệ sinh sản DH Y duoc TPHCM
Giải phẫu sinh lý Hệ sinh sản DH Y duoc TPHCM
LinhChu679649
 
NHO GIÁO VÀ ẢNH HƯỞNG ĐẾN ĐỜI SỐNG TINH THẦN
NHO GIÁO VÀ ẢNH HƯỞNG ĐẾN ĐỜI SỐNG TINH THẦNNHO GIÁO VÀ ẢNH HƯỞNG ĐẾN ĐỜI SỐNG TINH THẦN
NHO GIÁO VÀ ẢNH HƯỞNG ĐẾN ĐỜI SỐNG TINH THẦN
lamluanvan.net Viết thuê luận văn
 
CHỮ “TRÍ” THEO TƯ TƯỞNG NHO GIÁO VÀ Ý NGHĨA TRONG ĐỔI MỚI GIAÓ DỤC Ở VIỆT NAM...
CHỮ “TRÍ” THEO TƯ TƯỞNG NHO GIÁO VÀ Ý NGHĨA TRONG ĐỔI MỚI GIAÓ DỤC Ở VIỆT NAM...CHỮ “TRÍ” THEO TƯ TƯỞNG NHO GIÁO VÀ Ý NGHĨA TRONG ĐỔI MỚI GIAÓ DỤC Ở VIỆT NAM...
CHỮ “TRÍ” THEO TƯ TƯỞNG NHO GIÁO VÀ Ý NGHĨA TRONG ĐỔI MỚI GIAÓ DỤC Ở VIỆT NAM...
lamluanvan.net Viết thuê luận văn
 
Từ khoá Địa Lí giup ban dat 9 diem .docx
Từ khoá Địa Lí giup ban dat 9 diem .docxTừ khoá Địa Lí giup ban dat 9 diem .docx
Từ khoá Địa Lí giup ban dat 9 diem .docx
Nguyntrnhnganh
 
CD6_DAI_CUONG_KIMLOAI_12CB218LTTTHU5.pdf
CD6_DAI_CUONG_KIMLOAI_12CB218LTTTHU5.pdfCD6_DAI_CUONG_KIMLOAI_12CB218LTTTHU5.pdf
CD6_DAI_CUONG_KIMLOAI_12CB218LTTTHU5.pdf
Nguyntrnhnganh
 
CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - KẾT NỐI TRI THỨC ...
CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - KẾT NỐI TRI THỨC ...CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - KẾT NỐI TRI THỨC ...
CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - KẾT NỐI TRI THỨC ...
Nguyen Thanh Tu Collection
 
Atomic Habits - Thay Đổi Tí Hon, Hiệu Quả Bất Ngờ - James Clear & L...
Atomic Habits - Thay Đổi Tí Hon, Hiệu Quả Bất Ngờ - James Clear & L...Atomic Habits - Thay Đổi Tí Hon, Hiệu Quả Bất Ngờ - James Clear & L...
Atomic Habits - Thay Đổi Tí Hon, Hiệu Quả Bất Ngờ - James Clear & L...
williamminerva131
 
GƯƠNG ĐIỂN HÌNH NGƯỜI TỐT - VIỆC TỐT DƯƠNG THU NGA - NỮ KỸ THUẬT VIÊN PHỤC HỒ...
GƯƠNG ĐIỂN HÌNH NGƯỜI TỐT - VIỆC TỐT DƯƠNG THU NGA - NỮ KỸ THUẬT VIÊN PHỤC HỒ...GƯƠNG ĐIỂN HÌNH NGƯỜI TỐT - VIỆC TỐT DƯƠNG THU NGA - NỮ KỸ THUẬT VIÊN PHỤC HỒ...
GƯƠNG ĐIỂN HÌNH NGƯỜI TỐT - VIỆC TỐT DƯƠNG THU NGA - NỮ KỸ THUẬT VIÊN PHỤC HỒ...
lamluanvan.net Viết thuê luận văn
 
Tóm tắt Tư tưởng Hồ Chí Minhhhhhhhhhhhhh
Tóm tắt Tư tưởng Hồ Chí MinhhhhhhhhhhhhhTóm tắt Tư tưởng Hồ Chí Minhhhhhhhhhhhhh
Tóm tắt Tư tưởng Hồ Chí Minhhhhhhhhhhhhh
nnguyenthao204
 
TÀI LIỆU DẠY THÊM HÓA HỌC 12 - SÁCH MỚI (BẢN HS+GV) (FORM BÀI TẬP 2025 CHUNG ...
TÀI LIỆU DẠY THÊM HÓA HỌC 12 - SÁCH MỚI (BẢN HS+GV) (FORM BÀI TẬP 2025 CHUNG ...TÀI LIỆU DẠY THÊM HÓA HỌC 12 - SÁCH MỚI (BẢN HS+GV) (FORM BÀI TẬP 2025 CHUNG ...
TÀI LIỆU DẠY THÊM HÓA HỌC 12 - SÁCH MỚI (BẢN HS+GV) (FORM BÀI TẬP 2025 CHUNG ...
Nguyen Thanh Tu Collection
 
kltn_Nâng Cao Chất Lượng Đội Ngũ Công Chức Cấp Phường Trên Địa Bàn Quận Hà Đô...
kltn_Nâng Cao Chất Lượng Đội Ngũ Công Chức Cấp Phường Trên Địa Bàn Quận Hà Đô...kltn_Nâng Cao Chất Lượng Đội Ngũ Công Chức Cấp Phường Trên Địa Bàn Quận Hà Đô...
kltn_Nâng Cao Chất Lượng Đội Ngũ Công Chức Cấp Phường Trên Địa Bàn Quận Hà Đô...
Luận Văn Uy Tín
 
thuvienhoclieu.com-De-thi-thu-TN-THPT-2024-Tieng-Anh-phat-trien-tu-de-minh-ho...
thuvienhoclieu.com-De-thi-thu-TN-THPT-2024-Tieng-Anh-phat-trien-tu-de-minh-ho...thuvienhoclieu.com-De-thi-thu-TN-THPT-2024-Tieng-Anh-phat-trien-tu-de-minh-ho...
thuvienhoclieu.com-De-thi-thu-TN-THPT-2024-Tieng-Anh-phat-trien-tu-de-minh-ho...
HngNguyn2390
 
Tiểu luận Chiến dịch Chính nữ - Vì bạn xứng đáng
Tiểu luận Chiến dịch Chính nữ - Vì bạn xứng đángTiểu luận Chiến dịch Chính nữ - Vì bạn xứng đáng
Tiểu luận Chiến dịch Chính nữ - Vì bạn xứng đáng
lamluanvan.net Viết thuê luận văn
 
TỔNG HỢP 135 CÂU HỎI DI TRUYỀN PHÂN TỬ LUYỆN THI HỌC SINH GIỎI THPT MÔN SINH ...
TỔNG HỢP 135 CÂU HỎI DI TRUYỀN PHÂN TỬ LUYỆN THI HỌC SINH GIỎI THPT MÔN SINH ...TỔNG HỢP 135 CÂU HỎI DI TRUYỀN PHÂN TỬ LUYỆN THI HỌC SINH GIỎI THPT MÔN SINH ...
TỔNG HỢP 135 CÂU HỎI DI TRUYỀN PHÂN TỬ LUYỆN THI HỌC SINH GIỎI THPT MÔN SINH ...
Nguyen Thanh Tu Collection
 
BÁO CÁO MARKETING CUỐI KÌ CÔNG TY ORIJEN DOG AND CAT FOOD
BÁO CÁO MARKETING CUỐI KÌ CÔNG TY ORIJEN DOG AND CAT FOODBÁO CÁO MARKETING CUỐI KÌ CÔNG TY ORIJEN DOG AND CAT FOOD
BÁO CÁO MARKETING CUỐI KÌ CÔNG TY ORIJEN DOG AND CAT FOOD
Man_Ebook
 

Recently uploaded (20)

vật lý 1 k23 cuối kì c10-11- Nam Lê.pptx
vật lý 1 k23 cuối kì c10-11- Nam Lê.pptxvật lý 1 k23 cuối kì c10-11- Nam Lê.pptx
vật lý 1 k23 cuối kì c10-11- Nam Lê.pptx
 
Diễn giải Tâm lý - Chiêm tinh Thầy Minh Tuệ
Diễn giải Tâm lý - Chiêm tinh Thầy Minh TuệDiễn giải Tâm lý - Chiêm tinh Thầy Minh Tuệ
Diễn giải Tâm lý - Chiêm tinh Thầy Minh Tuệ
 
4. Lý luận nhận thức.pptx ở hanu nhé, học triết thầy thiệu
4. Lý luận nhận thức.pptx ở hanu nhé, học triết thầy thiệu4. Lý luận nhận thức.pptx ở hanu nhé, học triết thầy thiệu
4. Lý luận nhận thức.pptx ở hanu nhé, học triết thầy thiệu
 
CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - CHÂN TRỜI SÁNG TẠ...
CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - CHÂN TRỜI SÁNG TẠ...CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - CHÂN TRỜI SÁNG TẠ...
CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - CHÂN TRỜI SÁNG TẠ...
 
Bài 4. Khảo sát mạch dao động điện từ.doc
Bài 4. Khảo sát mạch dao động điện từ.docBài 4. Khảo sát mạch dao động điện từ.doc
Bài 4. Khảo sát mạch dao động điện từ.doc
 
Giải phẫu sinh lý Hệ sinh sản DH Y duoc TPHCM
Giải phẫu sinh lý Hệ sinh sản DH Y duoc TPHCMGiải phẫu sinh lý Hệ sinh sản DH Y duoc TPHCM
Giải phẫu sinh lý Hệ sinh sản DH Y duoc TPHCM
 
NHO GIÁO VÀ ẢNH HƯỞNG ĐẾN ĐỜI SỐNG TINH THẦN
NHO GIÁO VÀ ẢNH HƯỞNG ĐẾN ĐỜI SỐNG TINH THẦNNHO GIÁO VÀ ẢNH HƯỞNG ĐẾN ĐỜI SỐNG TINH THẦN
NHO GIÁO VÀ ẢNH HƯỞNG ĐẾN ĐỜI SỐNG TINH THẦN
 
CHỮ “TRÍ” THEO TƯ TƯỞNG NHO GIÁO VÀ Ý NGHĨA TRONG ĐỔI MỚI GIAÓ DỤC Ở VIỆT NAM...
CHỮ “TRÍ” THEO TƯ TƯỞNG NHO GIÁO VÀ Ý NGHĨA TRONG ĐỔI MỚI GIAÓ DỤC Ở VIỆT NAM...CHỮ “TRÍ” THEO TƯ TƯỞNG NHO GIÁO VÀ Ý NGHĨA TRONG ĐỔI MỚI GIAÓ DỤC Ở VIỆT NAM...
CHỮ “TRÍ” THEO TƯ TƯỞNG NHO GIÁO VÀ Ý NGHĨA TRONG ĐỔI MỚI GIAÓ DỤC Ở VIỆT NAM...
 
Từ khoá Địa Lí giup ban dat 9 diem .docx
Từ khoá Địa Lí giup ban dat 9 diem .docxTừ khoá Địa Lí giup ban dat 9 diem .docx
Từ khoá Địa Lí giup ban dat 9 diem .docx
 
CD6_DAI_CUONG_KIMLOAI_12CB218LTTTHU5.pdf
CD6_DAI_CUONG_KIMLOAI_12CB218LTTTHU5.pdfCD6_DAI_CUONG_KIMLOAI_12CB218LTTTHU5.pdf
CD6_DAI_CUONG_KIMLOAI_12CB218LTTTHU5.pdf
 
CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - KẾT NỐI TRI THỨC ...
CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - KẾT NỐI TRI THỨC ...CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - KẾT NỐI TRI THỨC ...
CHUYÊN ĐỀ DẠY THÊM TOÁN LỚP 12 THEO FORM THI MỚI BGD 2025 - KẾT NỐI TRI THỨC ...
 
Atomic Habits - Thay Đổi Tí Hon, Hiệu Quả Bất Ngờ - James Clear & L...
Atomic Habits - Thay Đổi Tí Hon, Hiệu Quả Bất Ngờ - James Clear & L...Atomic Habits - Thay Đổi Tí Hon, Hiệu Quả Bất Ngờ - James Clear & L...
Atomic Habits - Thay Đổi Tí Hon, Hiệu Quả Bất Ngờ - James Clear & L...
 
GƯƠNG ĐIỂN HÌNH NGƯỜI TỐT - VIỆC TỐT DƯƠNG THU NGA - NỮ KỸ THUẬT VIÊN PHỤC HỒ...
GƯƠNG ĐIỂN HÌNH NGƯỜI TỐT - VIỆC TỐT DƯƠNG THU NGA - NỮ KỸ THUẬT VIÊN PHỤC HỒ...GƯƠNG ĐIỂN HÌNH NGƯỜI TỐT - VIỆC TỐT DƯƠNG THU NGA - NỮ KỸ THUẬT VIÊN PHỤC HỒ...
GƯƠNG ĐIỂN HÌNH NGƯỜI TỐT - VIỆC TỐT DƯƠNG THU NGA - NỮ KỸ THUẬT VIÊN PHỤC HỒ...
 
Tóm tắt Tư tưởng Hồ Chí Minhhhhhhhhhhhhh
Tóm tắt Tư tưởng Hồ Chí MinhhhhhhhhhhhhhTóm tắt Tư tưởng Hồ Chí Minhhhhhhhhhhhhh
Tóm tắt Tư tưởng Hồ Chí Minhhhhhhhhhhhhh
 
TÀI LIỆU DẠY THÊM HÓA HỌC 12 - SÁCH MỚI (BẢN HS+GV) (FORM BÀI TẬP 2025 CHUNG ...
TÀI LIỆU DẠY THÊM HÓA HỌC 12 - SÁCH MỚI (BẢN HS+GV) (FORM BÀI TẬP 2025 CHUNG ...TÀI LIỆU DẠY THÊM HÓA HỌC 12 - SÁCH MỚI (BẢN HS+GV) (FORM BÀI TẬP 2025 CHUNG ...
TÀI LIỆU DẠY THÊM HÓA HỌC 12 - SÁCH MỚI (BẢN HS+GV) (FORM BÀI TẬP 2025 CHUNG ...
 
kltn_Nâng Cao Chất Lượng Đội Ngũ Công Chức Cấp Phường Trên Địa Bàn Quận Hà Đô...
kltn_Nâng Cao Chất Lượng Đội Ngũ Công Chức Cấp Phường Trên Địa Bàn Quận Hà Đô...kltn_Nâng Cao Chất Lượng Đội Ngũ Công Chức Cấp Phường Trên Địa Bàn Quận Hà Đô...
kltn_Nâng Cao Chất Lượng Đội Ngũ Công Chức Cấp Phường Trên Địa Bàn Quận Hà Đô...
 
thuvienhoclieu.com-De-thi-thu-TN-THPT-2024-Tieng-Anh-phat-trien-tu-de-minh-ho...
thuvienhoclieu.com-De-thi-thu-TN-THPT-2024-Tieng-Anh-phat-trien-tu-de-minh-ho...thuvienhoclieu.com-De-thi-thu-TN-THPT-2024-Tieng-Anh-phat-trien-tu-de-minh-ho...
thuvienhoclieu.com-De-thi-thu-TN-THPT-2024-Tieng-Anh-phat-trien-tu-de-minh-ho...
 
Tiểu luận Chiến dịch Chính nữ - Vì bạn xứng đáng
Tiểu luận Chiến dịch Chính nữ - Vì bạn xứng đángTiểu luận Chiến dịch Chính nữ - Vì bạn xứng đáng
Tiểu luận Chiến dịch Chính nữ - Vì bạn xứng đáng
 
TỔNG HỢP 135 CÂU HỎI DI TRUYỀN PHÂN TỬ LUYỆN THI HỌC SINH GIỎI THPT MÔN SINH ...
TỔNG HỢP 135 CÂU HỎI DI TRUYỀN PHÂN TỬ LUYỆN THI HỌC SINH GIỎI THPT MÔN SINH ...TỔNG HỢP 135 CÂU HỎI DI TRUYỀN PHÂN TỬ LUYỆN THI HỌC SINH GIỎI THPT MÔN SINH ...
TỔNG HỢP 135 CÂU HỎI DI TRUYỀN PHÂN TỬ LUYỆN THI HỌC SINH GIỎI THPT MÔN SINH ...
 
BÁO CÁO MARKETING CUỐI KÌ CÔNG TY ORIJEN DOG AND CAT FOOD
BÁO CÁO MARKETING CUỐI KÌ CÔNG TY ORIJEN DOG AND CAT FOODBÁO CÁO MARKETING CUỐI KÌ CÔNG TY ORIJEN DOG AND CAT FOOD
BÁO CÁO MARKETING CUỐI KÌ CÔNG TY ORIJEN DOG AND CAT FOOD
 

Bài giảng thiết kế website - truongkinhtethucpham.com

  • 1. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com CHƯƠNG 1. TẠO TRANG WEB VỚI HTML 1.1. Mở đầu 1.1.1. Giới thiệu về các công cụ thiết kế Web a/ Khái niệm về Web WWW ( World Wide Web) hay Web là một dịch vụ thông tin; một phần của Internet, bao gồm nhiều máy chủ Web server trên khắp thế giới. Các Web server này chứa thông tin mà người dùng ở bất kỳ đâu cũng có thể truy nhập được. ng. Website là tập hợp của rất nhiều trang web - một loại siêu văn bản (tập tin dạng HTML hoặc XHTML) HomePage (Trang chủ): là trang mà bộ trình duyệt web sẽ mở ra đầu tiên mỗi khi người dùng bắt đầu dùng website. Web Page (Trang Web): trang thông tin có chứa các siêu văn bản.. Web site: Là một số các trang Web liên kết với nhau. World Wide Web (www): Là dịch vụ toàn cầu của Internet mà HTML là nền tảng. b/ Các công cụ thiết kế web  Sử dụng trình soạn thảo NotePad có sẵn trong Windows: Start --> Programs --> Accessories --> NotePad 1 Internet HTMLHTML…… …………………………………… ………………...………………... ...... http://www.tlttp.edu.vnhttp://www.tlttp.edu.vn Xử lý yêuXử lý yêu cầucầu Web Server
  • 2. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  FrontPage, DreamWare, Visual Studio, Notepadd++,… 1.1.2. Trang Web tĩnh, trang web động a/ Trang Web tĩnh - Trang web tĩnh thường được xây dựng bằng các ngôn ngữ HTML, PHP,… - Trang web tĩnh thường được dùng để thiết kế các trang web có nội dung ít cần thay đổi và cập nhật. - Website tĩnh là website chỉ bao gồm các trang web tĩnh và không có cơ sở dữ liệu đi kèm. - Website tĩnh thích hợp với cá nhân, tổ chức, doanh nghiệp vừa và nhỏ mới làm quen với môi trường Internet. * Ưu điểm cơ bản: - Thiết kế đồ hoạ đẹp - Tốc độ truy cập nhanh - Thân thiện hơn với các máy tìm kiếm (search engine) - Chi phí đầu tư thấp * Nhược điểm cơ bản: - Khó khăn trong việc thay đổi và cập nhật thông tin . - Thông tin không có tính linh hoạt, không thân thiện với người dùng - Khó tích hợp, nâng cấp, mở rộng: Khi muốn mở rộng, nâng cấp một website tĩnh hầu như là phải làm mới lại website. b/ Trang web động - Web động là thuật ngữ được dùng để chỉ những website có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm phát triển web. - Web động thường được phát triển bằng các ngôn ngữ lập trình tiên tiến như PHP, ASP, ASP.NET, Java và sử dụng các cơ sở dữ liệu quan hệ mạnh như Access, My SQL, MS SQL, Oracle, - Thông tin trên web động luôn luôn mới vì nó dễ dàng được bạn thường xuyên cập nhật thông qua việc sử dụng các công cụ cập nhật của các phần mềm 2
  • 3. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com quản trị web . Thông tin luôn được cập nhật trong một cơ sở dữ liệu và người dùng Internet có thể xem những chỉnh sửa đó ngay lập tức. 1.1.3. Các bước thiết kế website Website là một thứ không thể thiếu của mỗi doanh nghiệp trong nền kinh tế hiện nay, nó là nơi để khách hàng của doanh nghiệp có thể tìm kiếm sản phẩm, là cầu nối giữa khách hàng và doanh nghiệp, và tất nhiên nó cũng là nơi để doanh nghiệp quảng bá sản phẩm tới khách hàng của mình a/ Để có được một Website hoạt động cần phải thực hiện các công việc sau: Bước 1: Đăng ký tên miền Tên miền (Domain name) là một tên dễ nhớ để gán cho một địa chỉ trên internet, thí dụ: http://www.tlttp.edu.vn, www.business.com ... Nó thay thế cho một dải những địa chỉ IP (gọi là Internet Protocol numbers). Có thể hiểu tên miền như là địa chỉ (số nhà) trên mạng Interrnet. Nếu đơn vị có Website tham gia hoạt động trên mạng internet thì đăng ký một tên miền là việc đầu tiên cần làm, tên miền riêng khẳng định vị trí, giúp khách hàng dễ tìm đến trang web của đơn vị, vừa bảo vệ thương hiệu của đơn vị đó trên Interrnet. Bước 2: Thuê máy chủ (web hosting): Web hosting là không gian trên máy chủ có cài dịch vụ Internet như ftp, www,... nơi đó có thể chứa nội dung trang web hay dữ liệu. Lý do chúng ta phải thuê Web Hosting để chứa nội dung trang web, dịch vụ mail, ftp,... vì những máy tính đó luôn có một địa chỉ cố định khi kết nối vào Internet (đó là địa chỉ IP tĩnh), còn như nếu ta truy cập vào internet như thông thường hiện nay thông qua các IPS (Internet Service Provider - Nhà cung cấp dịch vụ Internet) thì địa chỉ IP trên máy bạn luôn bị thay đổi, do đó dữ liệu trên máy của bạn không thể truy cập được từ những máy khác trên Internet Bước 3: Thiết kế website Tuỳ theo quy mô và nhu cầu của từng cá nhân, đơn vị và doanh nghiệp, các website sẽ có các chức năng, và độ phức tạp khác nhau. Bước 4: Duy trì website 3
  • 4. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com Website sau khi được xây dựng, cần thường xuyên cập nhật thông tin để đảm bảo độ tươi mới của nó. Bước 5: Quảng bá Website Để website của bạn hoạt động có hiệu quả nhất, ngoài việc in địa chỉ website trên danh thiếp của công ty, còn có thể quảng bá trên các phương tiện thông tin đại chúng, các mạng thương mại, báo chí và các trang web điện tử. b/ Các bước thiết kế một Website Một website thông thường được chia làm 2 phần: - giao diện người dùng (front-end) • • Phần Back-end là phần lập trình của website lưu trữ trên máy chủ. • Sự khác nhau ở phần lập trình back-end của website làm phân ra 2 loại website: Website tĩnh và Website động Các bước để thiết kế một website gồm 7 giai đoạn Giai đoạn 1: Thu thập thông tin từ khách hàng - Tìm hiểu yêu cầu thực tế của khách hàng. - Xác nhận các yêu cầu của khách hàng về trang Web và các thông tin khách hàng cung cấp. Giai đoạn 2: Giai đoạn phân tích - Dựa vào những thông tin và yêu cầu thiết kế website của khách hàng, phân tích rõ ràng mục đích, yêu cầu, nguyện vọng của khàch hàng. - Lập kế hoạch thực hiện dự án - Căn cứ trên kết quả khảo sát, thông tin do khách hàng cung cấp thiết kế lập cấu trúc cho website và thiết kế chung cho toàn hệ thống. Giai đoạn 3: Giai đoạn thiết kế - Xem xét chi tiết yêu cầu và tiến hành thiết kế website - Tiến hành xử lý hiệu ứng ảnh, thu thập tài liệu liên quan - Kiểm tra sản phẩm để đảm bảo tính thẩm mỹ và thống nhất. 4
  • 5. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com Giai đoạn 4: Giai đoạn xây dựng - Xây dựng cơ sở dữ liệu dựa trên thiết kế. - Soạn thảo nội dung tài liệu, chỉnh sửa hoàn thiện nội dung rồi đưa lên trang web. - Tiến hành kiểm tra, chỉnh sửa và thực hiện nghiệm thu nội bộ Giai đoạn 5: Giai đoạn chạy thử - Tổng hợp nội dung, xây dựng hệ thống theo thiết kế. - Kiểm tra và sửa lỗi. - Lắp ghép thiết kế với phần mềm, đảm bảo không sai lệch với thiết kế và phần mềm hoạt động tốt. - Chạy thử hệ thống trong vòng 01 tuần. Kiểm tra và sửa. Giai đoạn 6: Giai đoạn nghiệm thu - Khách hàng duyệt dự án: khách hàng duyệt chất lượng dự án. - Đăng tải hệ thống: đảm bảo hệ thống chạy tốt. Giai đoạn 7: Giai đoạn chuyển giao 1.1.5. Tổ chức một website - Tổ chức tài liệu: tựa đề, tiêu đề, đoạn văn, đường kẻ ngang, danh sách, bảng. - Thu ngắn văn bản. - Bố trí hình ảnh nhỏ gọn, hợp lý. 1.1.6. Các trình duyệt Web (Web browser) 1.2. HTML 1.2.1. Giới thiệu HTML a/ HTML là gì ? 5
  • 6. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com HyperText Markup Language (HTML) – Ngôn ngữ đánh dấu siêu văn bản. Bao gồm các đoạn mã chuẩn với các quy ước được thiết kế để tạo các trang Web và được hiển thị bởi các trình duyệt Web. Đánh dấu (Markup): HTML là ngôn ngữ của các thẻ đánh dấu - Tag. Các thẻ này xác định cách thức trình bày đoạn văn bản tương ứng trên màn hình. (Language): HTML là một ngôn ngữ tương tự như các ngôn ngữ lập trình, tuy nhiên đơn giản hơn. Nó có cú pháp chặt chẽ để viết các lệnh thực hiện việc trình diễn văn bản. Các từ khoá có nghĩa xác định được cộng đồng Internet thừa nhận và sử dụng. Ví dụ b = bold, ul = unordered list, ... (Text): HTML đầu tiên và trước hết là để trình bày văn bản và dựa trên nền tảng là một văn bản. Các thành phần khác như hình ảnh, âm thanh, hoạt hình.. đều phải cắm neo vào một đoạn văn bản nào đó. (Hyper): HTML cho phép liên kết nhiều trang văn bản rải rác khắp nơi trên Internet. Nó có tác dụng che dấu sự phức tạp của Internet đối với người sử dụng. Người dùng Internet có thể đọc văn bản mà không cần biết đến văn bản đó nằm ở đâu, hệ thống được xây dựng phức tạp như thế nào. HTML thực sự đã vượt ra ngoài khuôn khổ khái niệm văn bản cổ điển. b/ Những ứng dụng của HTML Các trang Web đầy sinh động mà chúng ta thấy trên World Wide Web là các trang siêu văn bản được viết bằng ngôn ngữ đánh dấu siêu văn bản. HTML cho phép bạn tạo ra các trang phối hợp hài hòa văn bản thông thường với hình ảnh, âm thanh, video, các mối liên kết đến các trang siêu văn bản khác... 1.2.2. Tạo một trang Web mới - Mở môi trường mà bạn muốn soạn thảo tài liệu HTML.. Start -> Program -> Accessories -> NotePad. Chú ý: + Khi ghi tài liệu HTML vào ổ đĩa nhớ ghi đầy đủ phần mở rộng là HTM hoặc HTML 6
  • 7. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com + Nếu sử dụng môi trường soạn thảo là NotePad trên Windows thì ghi ghi tài liệu HTML vào ổ đĩa phải chọn Encoding là UTF-8 để hiển thị tiếng Việt. + Nhiều dấu cách liền nhau cũng chỉ có tác dụng như một dấu cách, phải sử dụng thẻ để thể hiện nhiều dấu giãn cách liền nhau.. + Enter để xuống dòng được xem như một dấu cách, để xuống hàng thì phải sử dụng thẻ tương ứng. + Có thể viết tên thẻ không phân biệt chữ in thường và in hoa. + Vì các kí tự dấu lớn hơn > , dấu nhỏ hơn < đã được dùng làm thẻ đánh dấu, do đó để hiển thị các kí tự này HTML quy định cách viết &gt(cho dấu lớn hơn); &lt(cho dấu nhỏ hơn).; + Có thể chèn các dòng bình luận, chú thích vào trang mã nguồn bằng cách đặt chúng giữa cặp dấu <!-- và -- > 1.2.3. Các thành phần của một trang HTML a/ Tag (thẻ) HTML là gì? Không giống như khi lập trình, nếu bạn mắc lỗi cú pháp HTLM sẽ không có một thông báo lỗi nào báo cho biết mà trình duyệt sẽ hiểu lầm và trình bày trang Web không như bạn muốn. Một tài liệu HTML tạo nên từ nhiều thành phần HTML. Một thành phần HTML được đánh dấu bằng một cặp thẻ mở và thẻ đóng hay con gọi là Tag. Để soạn thảo tài liệu HTML đúng cú pháp, cần nắm vững cấu trúc của từng thành phần HTML. Khi một trình duyệt Web hiển thị một trang Web, trình duyệt Web sẽ đọc từ một file văn bản đơn giản và tìm kiếm những đoạn mã đặc biệt hay những Tag được đánh dấu bởi ký hiệu < và ký hiệu > * Tag mang thông tin: <tag_name> String of text </tag_name> Trong đó: <tag_name>: tên tag bắt đầu. </tag_name>: tên tag kết thúc. * Tag rỗng: <tag_name> Ví dụ: Muốn cho từ Chào bạn hiển thị ra kiểu chữ đậm ta làm như sau: 7
  • 8. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <b> Chào bạn </b> b/ Các thành phần cơ bản của trang HTML * Cấu trúc chính của một trang HTML như sau: <HTML> <HEAD> <TITLE> ...........</TITLE> </HEAD> <BODY> ................... </BODY> </HTML> * Các thành phấn cơ bản  Thẻ HTML: Cú pháp: <HTML> ............. </HTML> Thẻ đầu tiên trong tài liệu HTML là <HTML>. Thẻ này nói cho trình duyệt biết đây là điểm khởi đầu của một tài liệu HTML. Thẻ cuối cùng của tài liệu là </HTML>, thẻ này nói cho trình duyệt biết đây là điểm kết thúc của văn bản. Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML, tức là nó có sử dụng các thẻ HTML để trình bày. Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này.  Thẻ HEAD: Cú pháp: <HEAD> .......... </HEAD>  Thẻ TITLE: Cú pháp: <TITLE> .........</TITLE> Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, tức là nó phải nằm trong thẻ phạm vi giới hạn bởi cặp thẻ <HEAD>. Giữa cặp thẻ tiêu đề 8
  • 9. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <TITLE>... </TITLE> là dòng chữ sẽ hiện lên trên thanh tiêu đề của cửa sổ khi trình duyệt đọc tài liệu. Nếu bỏ trống thì trình duyệt sẽ cho hiện tên tệp thay vào đó.  Thẻ BODY: Cú pháp: <BODY> ........ </BODY> Thẻ này được sử dụng để xác định phần nội dung chính của tài liệu - phần thân (BODY) của tài liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết, tạo bảng, đặt lề cho trang tài liệu... Những thông tin này được đặt ở phần tham số của thẻ. – Các thuộc tính của <BODY>  BgColor: thiết lập màu nền của trang  Text: thiết lập màu chữ  Link: màu của siêu liên kết  Vlink: màu của siêu liên kết đã xem qua  Background: dùng load một hình làm nền cho trang  LeftMargin: Canh lề trái  TopMargin: Canh lề trên của trang Ví dụ 1: Tạo một trang web đầu tiên đơn giản như sau: Bước 1: - Mở chương trình soạn thảo NotePad - Sử dụng Font gõ chữ tiếng việt: Unicode Bước 2: <html> <head> <title> Học tập HTML</title> 9
  • 10. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com </head> <body> Toàn bộ nội dung của tài liệu nằm đây: Các đoạn văn bản xen lẫn hình ảnh, âm thanh, video, các liên kết đến vị tr khác, tài liệu khác... ! </body> </html> Bước 3: Lưu lại với tên “MoDau.html” (vào trong thư mục của mình), với phần Encoding là UTF-8. Lưu ý: phần mở rộng có thể là html hoặc htm đều được. Bước 4: 1.2.4. Lưu trang Web Sau khi soạn thảo xong nội dung trang Web, ta tiến hành lưu trang Web bằng cách nhấn tổ hợp phím Ctrl + S, cửa sổ Save As hiện ra như sau: 10 Gõ tên trang Web vào đây Chọn phần mở rộng là html chọn mục này là UTF- 8 Nhấn vào nút Save
  • 11. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 1.2.5. Hiển thị trang Web trong trình duyệt Vào thư mục mà các trang web được lưu trong đó, chạy tệp HTML mà ta vừa tạo, xem kết quả nhận được. Có thể sử dụng các trình duyệt khác nhau để hiển thị trang Web. 1.2.6. Thêm các thành phần cơ bản vào trang Web a/ Thẻ P Cú pháp: <P> Nội dung đoạn văn bản cần hiển thị</P> Ý nghĩa: thẻ <P> dùng để định dạng một đoạn văn bản như tách một dòng văn bản (hoặc một đoạn) thành các dòng ( hoặc các đoạn) Các thuộc tính quan trọng của thẻ <P>...</P>:  Align:  Left: Canh trái  Center: Canh giữa  Right: Canh phải  justify: Canh đều  Style:  Margin-top: Canh lề trên của đoạn  Margin-left: Canh lề trái của đoạn  Margin-right: Canh lề phải của đoạn  Margin-bottom: Canh lề dưới của đoạn  Direction: Chỉ định chiều văn bản (từ trái sang phải “ltr” hoặc từ phải sang trái “rtl”) Ví dụ 2: Căn lề văn bản 11
  • 12. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <html> <head> <title> Học tập HTML</title> </head> <body> <P> Công cha như núi Thái Sơn </P> <P Align="center"> Nghĩa mẹ như nước trong nguồn chảy ra </P> <P Align=“Right” >Một lòng thờ mẹ kính cha </P> <P> Cho tròn chữ hiếu mới là đạo con </P> <P Align="center"> Sin<Sup>2</Sup>x + Cos<Sup>2</Sup>x = 1</P> <P Align="center"> H<Sub>2</Sub> + O<Sub>2</Sub> à H<Sub>2</Sub>O </P> </body> </html> Lưu và chạy chương trình ta được kết quả như sau: b/ Các thẻ định dạng văn bản 12
  • 13. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com Tên thẻ Giải thích Ví dụ <B>…</B> Dạng chữ đậm <B>Hello world !</B> <I>…</I> Dạng chữ nghiêng <I>Hello world !</I> <U>…</U> Dạng chữ gạch chân <U>Hello world !</U> <S>…</S> Dạng chữ gạch giữa <S>Hello world!</S> <Font color=RGB face=tên font Size=“N”> …… </Font> Định dạng font chữ: Color: chỉ định màu chữ Face: Chỉ định font chữ Size: kích thước <Font color=“Blue” face=“Arial” Size = 14> Hello world </Font> <Sup>…</Sup> Tạo chỉ số trên X<Sup>2</Sup> è X2 <Sub>…</Sub> Tạo chỉ số dưới H<Sub>2</Sub>O è H2O <BR> Xuống dòng <HR Align=“…” Color = “…” SIZE = “…” WIDTH = “…” /> Tạo đường kẻ Color: màu Size: độ dày (tính bằng pixel) Width: độ dài (tính bằng pixel) <HR Color=“Red” Size=“10” Width=“200” /> Các ký tự đặc biệt: Dấu lớn hơn: &gt; Dấu nhỏ hơn: &lt; Dấu nháy kép: &quot; If A &gt; B Then <BR> A = A + 1 Bảng giá trị màu: Giá trị Tên màu Tên tiếng anh #FFFFFF màu trắng white #000000 màu đen black #FF0000 màu đỏ red #00FF00 màu xanh lục lime #0000FF màu xanh nước biển blue #888888 màu xám gray #008888 màu xanh lục lam cyan #880088 màu tím magenta 13
  • 14. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com Ví dụ 3: Định dạng Font, xuống hàng <html> <head> <title> Học tập HTML</title> </head> <body> <br><b> Công cha như núi Thái Sơn <br> Nghĩa mẹ như nước trong nguồn chảy ra <br> Một lòng thờ mẹ kính cha <br> Cho tròn chữ hiếu mới là đạo con</b> <p><i><font color=red> Con kiến mà leo cành đa <br>Leo phải cành cộc leo ra leo vào <br> Con kiến mà leo cành đào <br>Leo phải cành cộc leo vào leo ra </font></i></p> </body> </html> Lưu và chạy chương trình ta được kết quả như sau: 14
  • 15. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com Ví dụ 4: Tạo đường kẻ <html> <head> <title>Học tập HTML</title> </head> <body> <P><b> Công cha như núi Thái Sơn </b></P> <P><i>Nghĩa mẹ như nước trong nguồn chảy ra </i></P> <P>Một lòng thờ mẹ kính cha </P> <P> Cho tròn chữ hiếu mới là đạo con </P> <HR Color=red Size=20 Width=500 /> <HR Color=blue Size=500 Width=20 /> <HR Color=green Size=20 Width=500 > <P align="center">Sin<Sup>2</Sup>x + Cos<Sup>2</Sup>x = 1 </P> <P align="center">H<Sub>2</Sub>+ O<Sub>2</Sub>àH<Sub>2</Sub>O </P> 15
  • 16. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com </body> </html> Lưu và chạy chương trình ta được kết quả như sau: c/ Thẻ định dạng đề mục Cú pháp Ý nghĩa <h1> Nội dung đề mục </h1> Định dạng đề mục cấp 1 <h2> Nội dung đề mục </h2> Định dạng đề mục cấp 2 <h3> Nội dung đề mục </h3> Định dạng đề mục cấp 3 <h4> Nội dung đề mục </h4> Định dạng đề mục cấp 4 <h5> Nội dung đề mục </h5> Định dạng đề mục cấp 5 <h6> Nội dung đề mục </h6> Định dạng đề mục cấp 6 16
  • 17. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com Để tiêu đề ở giữa: <hN align=“center”> Tiêu đề </hN> Để tiêu đề bên phải: <hN align=“right”> Tiêu đề </hN> Với 1<= N <= 6 Ví dụ 5: Tạo các thẻ đề mục <html> <head> <title> Học tập HTML</title> </head> <body> <h1 align="center"> CÔNG TY TNHH MINH THẮNG </h1> <h2 align="left"> Địa chỉ: 168 Lạch Tray - Hải Phòng <h2 align="left"> Điện thoại: 0313.583.799 <h2> Fax: 0313.583.798 <h3> Giới thiệu các mặt hàng kinh doanh <h4> - Hàng điện tử <h4> - Hàng hóa chất <h5> Chi tiết </body> <html> 17
  • 18. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com Lưu và chạy chương trình ta được kết quả như sau: g/ Tạo danh sách Đây là một danh sách các lý do cho thấy tại sao danh sách lại rất có ích. Bởi vì: Nó có tính hấp dẫn trực quan; Nó có thể được sử dụng để nhóm các yếu tố hoặc ý kiến tương tự; Chúng ta có thể dễ dàng đọc lướt qua các danh sách và ghi nhớ các yếu tố tương ứng. HTML cung cấp một nhóm khá đa dạng các kiểu danh sách khác nhau. Mỗi loại danh sách này có một cấu trúc định dạng riêng. Chúng bao gồm: * Danh sách có thứ tự Là danh sách được Web browser đánh thứ tự từ 1 cho đến kết thúc danh sách. Dùng tag <OL>...</OL> <OL start=N type = *> 18
  • 19. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <LI> Mục thứ nhất <LI> Mục thứ hai <LI> Mục thứ ba ......... </OL> Trong đó: N là chỉ định số bắt đầu. ‘*’ =1 Các mục được sắp xếp theo thứ tự 1, 2, 3... = a Các mục được sắp xếp theo thứ tự a, b, c... = A Các mục được sắp xếp theo thứ tự A, B, C... = i Các mục được sắp xếp theo thứ tự i, ii, iii... = I Các mục được sắp xếp theo thứ tự I, II, III... Ví dụ 6: Tạo danh sách có thứ tự <html> <head> <title> TRƯỜNG TRUNG HỌC NGHIỆP VỤ QUẢN LÝ LTTP </title> </head> <ol type=1> <li><b>Lịch sử hình thành và sự phát triển</b></p> <li><b>Hệ điều hành MS-DOS</b></p> <li><b>Hệ điều hành WINDOWS</b></p> <ol type=a> <li>Hệ điều hànhWindows 3.1</p> <li>Hệ điều hành Windows 95</p> <li>Hệ điều hành Windows 98</p> <li>Hệ điều hành Windows ME</p> <li>Hệ điều hành Windows XP</p> </ol> <li><b>Ứng dụng của WINDOWS</b></p> </ol> </body> 19
  • 20. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com </html> Lưu và chạy chương trình ta được kết quả như sau: * Danh sách không có thứ tự Sử dụng tag <UL>...</UL>: cho một danh sách các mục với những ký hiệu được đánh dấu phía trước (không được đánh số). Tag <LI> chỉ ra từng mục cho một danh sách. <UL type = * > <LI> Mục thứ nhất <LI> Mục thứ hai <LI> Mục thứ ba ......... </UL> Trong đó: ‘*’ có thể là: circle (vòng tròn) 20
  • 21. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com square (hình vuông) disk (dấu hinh tròn đậm) Ví dụ 7: Tạo danh sách không có thứ tự <html> <head> <title> TRƯỜNG TRUNG HỌC NGHIỆP VỤ QUẢN LÝ LTTP </title> </head> <p align="center"><b><font size="5">Chương 1: Căn bản về hệ điều hành </font></b></p> <ul type=disk> <li><b>Lịch sử hình thành và sự phát triển</b></p> <li><b>Hệ điều hành MS-DOS</b></p> <li><b>Hệ điều hành WINDOWS</b></p> <ul type=square> <li>Hệ điều hànhWindows 3.1</p> <li>Hệ điều hành Windows 95</p> <li>Hệ điều hành Windows 98</p> <li>Hệ điều hành Windows ME</p> <li>Hệ điều hành Windows XP</p> </ul> <li><b>Ứng dụng của WINDOWS</b></p> </ul> </body> </html> Lưu và chạy chương trình ta được kết quả như sau: 21
  • 22. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com * Danh sách định nghĩa Nằm giữa các tag <DL>...</DL>. Mỗi yếu tố của danh sách bao gồm hai thành phần: Tiêu đề được căn lề phía trái (chỉ ra bởi thẻ <DT>) Phần giải nghĩa được căn lề thụt hơn sang phía phải (chỉ ra bởi thẻ <DD>) Cú pháp: <DL> <DT> Yếu tố 1 <DD> Chú giải cho yếu tố 1 <DT> Yếu tố 2 22
  • 23. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <DD> Chú giải cho yếu tố 2 ……. </DL> Ví dụ 8: Tạo danh sách định nghĩa <html> <head> <title> Học tập HTML</title> </head> <body> <dl> <dt>Lemon (n): <dd> Cây chanh; quả chanh <dt>Mango (n): <dd> Quả xoài; cây xoài <dt>Orange (n): <dd> Quả cam <dt>Banana (n): <dd> Quả chuối </dl> </body> </html> Lưu và chạy chương trình ta được kết quả như sau: 23
  • 24. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com * Danh sách lồng nhau Danh sách có thứ tự, không thứ tự và danh sách định nghĩa có thể lồng vào nhau theo nhiều mức độ khác nhau. Ngoài lồng các danh sách lại với nhau, ta con có thể trộn lẫn các loại danh sách. Ví dụ 9: Tạo danh sách hỗn hợp <html> <head> <title> Học tập HTML</title> </head> <body> <ol type=1> <li><b>Từ mới</b></p> <dl> <dt>Lemon (n): <dd> Cây chanh; quả chanh <dt>Mango (n): <dd> Quả xoài; cây xoai <dt>Orange (n): 24
  • 25. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <dd> Quả cam <dt>Banana (n): <dd> Quả chuối </dl> <li><b>Ngữ pháp </b></p> <li><b>Bài tập </b></p> <ul type=disk> <li><b>Điền từ vào chỗ trống</b></p> <li><b>Viết lại câu cho hoàn chỉnh</b></p> </ul> </ol> </body> </html> Lưu và chạy chương trình ta được kết quả như sau: 25
  • 26. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com h/ Tạo bảng Bảng thường được sử dụng để tạo các văn bản nhiều cột hoặc phân chia trang thành nhiều vùng khác nhau rất tiện lợi trong thiết kế và trình bày trang web. Cú pháp: <TABLE> <TR> <TH> ....</TH> <TD> .... </TD> <TD> .... </TD> ... </TR> <TR> <TH> ....</TH> <TD> ....</TD> <TD>....</TD> ... </TR> .... </TABLE> Trong đó: Thẻ <TABLE>...</TABLE> dùng để khởi tạo một bảng. Thẻ <TR>...</TR> dùng để khởi tạo một hàng (một dòng) của bảng. Thẻ <TD>...</TD> dùng để khởi tạo một ô chứa dữ liệu của bảng. Thẻ <TH> ....</TH> dùng để khởi tạo tiêu đề của hàng hay tiêu đề cột trong bảng. Ví dụ 10: Tạo một bảng có 2 hàng, 2 cột <html> <head> <title> Học tập HTML</title> 26 Dòng 1 Dòng 2
  • 27. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com </head> <body> <table border=1> <tr> <td> Hàng 1, cột 1 </td> <td> Hàng 1, cột 2 </td> </tr> <tr> <td> Hàng 2, cột 1 </td> <td> Hàng 2, cột 2 </td> </tr> </table> </body> </html> Lưu và chạy chương trình ta được kết quả như sau: 27
  • 28. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <TH>... </TH> cũng giống tag <TD> nhưng dùng cho tiêu đề của bảng và dòng text... sẽ được viết chữ đậm và căn giữa ô. <TH> có những thuộc tính sau:  align = left | center | right: để chỉnh lề trái/giữa/phải dữ liệu trong ô.  valign = top | middle | bottom: để chỉnh lề trên/giữa/dưới dữ liệu trong ô.  width = n | n%: đặc tả độ rộng của ô.  hight = n | n%: đặc tả chiều cao của ô.  nowrap: thiết lập cho những ô không muốn có dòng nào bị gãy để dữ liệu vừa khít với ô tiêu đề.  colspan = n: đặc tả số cột của bảng mà ô này sẽ trộn lại thành 1(mặc định =1) Ví dụ 11: Tạo bảng có tiêu đề hàng và cột <html> <head> <title> Học tập HTML</title> </head> <body> <table border=1> <tr> <th> STT </th> <th> Lớp </th> <th> Phòng học</th> <th> Thời gian</th> </tr> <tr> <th> 1 </th> <td> TinAk5 </td> <td> C101 </td> 28
  • 29. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <td> Sáng </td> </tr> <tr> <th> 2 </th> <td> TinBk5 </td> <td> C102 </td> <td> Sáng </td> </tr> <tr> <th>3 </th> <td> Toánk5 </td> <td> C101 </td> <td> Chiều </td> </tr> <tr> <th> 4 </th> <td> SPAk5 </td> <td> C101 </td> <td> Chiều </td> </tr> </table> </body> </html> Lưu và chạy chương trình ta được kết quả như sau: 29
  • 30. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <TABLE (các thuộc tính) >...</TABLE> trong đó các thuộc tính gồm::  border = n: tạo viền xung quanh bảng  align = left | right: Cho phép bảng dóng lề trái hoặc phải.  valign = top | bottom: để chỉnh lề trên hoặc giữa hoặc dưới.  bgcolor = #xxyyzz: thiết lập màu nền của bảng.  bordercolor = #xxyyzz: thiết lập màu viền cho bảng.  bordercolorlight = #xxyyzz : thiết lập màu nhạt hơn cho viền bảng 3 chiều.  bordercolordark = #xxyyzz : thiết lập màu đậm hơn cho viền bảng 3 chiều.  background = "...image.gif | jpg": thiết lập nền cho các ô văn bản là hình ảnh với địa chỉ của nó.  cellpadding = N: cho biết có bao nhiêu khoảng trắng giữa khối bên trong phần tử và vách ngăn.  cellspacing = M: Cho biết độ rộng của những đường bên trong bảng để chia các phần tử. 30
  • 31. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  width = n | n%, height = m | m% : định trước kích thước rộng/cao cho bảng. <CAPTION ..>....</CAPTION>: tạo tiêu đề bảng Ví dụ 12: Tạo bảng với các thuộc tính của bảng <html> <head> <title> Học tập HTML</title> </head> <body> <table border=1 align="center" bgcolor=yellow bordercolor=red> <caption align="center" font size = 20><i>Bảng giá học phí áp dụng từ 9/2014</i></caption> <tr> <th>Tên chương trình </th> <th> Học phí </th> <th> Miễn giảm</th> <th> Ghi chú</th> </tr> <tr> <th> Cử nhân Tin </th> <td> 7.000.000 </td> <td> 5% </td> <td> Đóng vào đầu năm học</td> </tr> <tr> <th> Cử nhân QTKD</th> <td> 6.900.000 </td> <td> 5% </td> <td> Đóng vào đầu năm học</td> </tr> 31
  • 32. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <tr> <th> Cử nhân Anh văn </th> <td> 8.000.000 </td> <td> 10% </td> <td> Đóng vào đầu năm học</td> </tr> <tr> <th> Thư ký cao cấp </th> <td> 8.000.000 </td> <td> 5% </td> <td> Đóng vào cuối học kỳ</td> </tr> </table> </body> </html> Lưu và chạy chương trình ta được kết quả như sau: 32
  • 33. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <TR (các thuộc tính)> Đặc tả dòng của bảng </TR> Số dòng của bảng bằng số phần tử <TR> trong cặp <table>...</table>. Một số thuộc tính:  align = left | center | right: để chỉnh lề trái/giữa/phải.  valign = top | middle | bottom: để chỉnh lề trên/giữa/dưới.  bgcolor: đặc tả màu nền của hàng.  bordercolor: đặc tả màu viền của bảng.  bordercolorlight: thiết lập màu nhạt hơn cho màu viền 3 chiều.  bordercolordark: thiết lập màu đậm hơn cho màu viền 3 chiều. <TD>...</TD> Đại diện cho ô dữ liệu trong bảng,  align = left | center | right: để chỉnh lề trái/giữa/phải dữ liệu trong ô.  valign = top | middle | bottom: để chỉnh lề trên/giữa/dưới dữ liệu trong ô.  width = n | n%: đặc tả độ rộng của ô. 33
  • 34. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  hight = n | n%: đặc tả chiều cao của ô.  colspan = N: Tạo một ô bằng N ô liền kề theo dòng.  rowspan = M: Tạo một ô bằng M ô liền nhau theo cột.  Ngoài ra còn có các thuộc tính: bgcolor = #xxyyzz. bordercolor = #xxyyzz. bordercolorlight = #xxyyzz. bordercolordark = #xxyyzz. background = "...image...". Ví dụ 13: Tạo bảng sử dụng thuộc tính Colspan và Rowspan <Table border="1" bgcolor= “fuschia” bordercolor=”red” align=”center” Width=50% Height=30%> <caption> Properties of Table</caption> <tr> <th colspan="3"> Colspan</th> </tr> <tr> <th Rowspan=”2”> Rowspan</th> <td align=center>Cell 1</td> <td align=center>Cell 2</td> </tr> <tr> <td align=center> Cell 3</td> <td align=center> Cell 4</td> </tr> </table> Ví dụ 14: Tạo bảng theo mẫu như hình dưới đây 34
  • 35. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <html> <head> <title> Trinh bay trang</title> </head> <body> <Table width="68%" height="135" border="1" cellspacing="0" bordercolor="#990033"> <tr> <th colspan="2" bgcolor="#FFCCFF"> <div align="center">Computer Model </div> </th> </tr> <tr> <td width="24%" height="98" valign="top"> <table width="100%" border="1" cellspacing="0"> <tr> <td>Tin tuc</td> </tr> <tr> <td>Giai tri</td> </tr> <tr> <td>Quang cao</td> 35
  • 36. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com </tr> <tr> <td height="23">The thao</td> </tr> </table> </td> <td width="76%" align="center"> <img src="../images/h2.jpg" width="106" height="92"> </td> </tr> </table> </body> </html> i/ Thêm hình ảnh vào trang Web * Các dạng hình ảnh của Web - Có nhiều dạng tệp tin hình ảnh như: gif, tiff, bmp, jpg, png - Dạng chuẩn để hiển thị trong một trang Web là gif - Một số dạng hình ảnh khác sử dụng trong trang Web gồm: bmp, jpg * Vài điểm cần biết khi sử dụng đồ hoạ - Kích thước hình ảnh càng nhỏ càng tốt, nên nhỏ hơn 100Kb. - Các hình ảnh không nên rộng hơn 480 điểm và cao hơn 300 điểm. - Hình ảnh là những thứ tạo thêm nghĩa cho tài liệu. - Một hình ảnh nhỏ có thể xuất hiện nhiều lần trong một trang mà chỉ tốn rất ít thời gian. * Đưa hình ảnh vào trang web Nên để các hình ảnh vào một thư mục riêng (Ví dụ như thư mục Image). Cú pháp: <img src=đường dẫn đến FileName.gif> Trong đó FileName.gif là tên một hình ảnh dạng gif hoặc jpg hoặc bmp để ở cùng thư mục với tài liệu HTML 36
  • 37. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com Ví dụ: <img src=“Image/chu thap.jpg”> Để hình ảnh xuất hiện riêng một dòng, ta chỉ cần thêm tag <p>. Ví dụ: <p><img src=“Image/chu thap.jpg”><p> * Định dạng hình ảnh:  Chiều cao, độ rộng của ảnh: Cú pháp: <img src="filename.gif" width=X height=Y > Trong đó: X là chiều rộng của ảnh; Y là chiều cao của ảnh Khi thêm hai thuộc tính width và height giúp cho web hiển thị nhanh hơn.  Tạo đường viền hoặc không cho ảnh Cú pháp: <img boder =" n" src="filename.gif" width=X height=Y > trong đó: n chỉ độ dày của đường viền ảnh; n = 0 : ảnh không có đường viền. * Ví dụ về chiều cao, độ rộng của ảnh 37 <img src="Image/WTP6.jpg" width=300 height=200> <img src="Image/WTP9.jpg" width=200 height=120>
  • 38. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com * Ví dụ về đường viền của ảnh: <img align=left src="Image/chu thap.jpg" border=5> cho kết quả 38 <img align=right src="Image/chu thap.jpg" border=1> cho kết quả
  • 39. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  Mô tả hình ảnh: Tức là khi người sử dụng đưa chuột đến hình ảnh thì sẽ xuất hiện "Dòng mô tả hình ảnh" mà vẫn xem được hình ảnh Cú pháp: <img src="filename.gif" alt="Dòng mô tả hình ảnh"> Ví dụ: <img src="Image/WTP6.jpg" width=300 height=200 alt="Gấu câu cá kìa">  Sắp xếp hình ảnh so với văn bản bao quanh Cú pháp: <img align= "kiểu sắp xếp" src="filename.gif" alt="Dòng mô tả hình ảnh" width=X height=Y > trong đó: Kiểu sắp xếp = Left: hình ảnh chèn vào bên trái văn bản Center: hình ảnh chèn vào giữa văn bản Right: hình ảnh chèn vào bên phải văn bản 39
  • 40. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  Sắp xếp trong hàng của văn bản và hình ảnh Cú pháp: <img align= "value" src="filename.gif" alt="Dòng mô tả hình ảnh" width=X height=Y > trong đó: Value = Top: Chỉnh đáy của dòng văn bản ngang với đỉnh của ảnh. Middle: Chỉnh đáy của dòng văn bản nằm khoảng giữa ảnh. Bottom: Chỉnh đáy của dòng văn bản bằng với đáy của ảnh (lmặc định) Ví dụ 1: <img align=middle src=“Image/chu thap.jpg”> Ví dụ 2: <img align=top src=“Image/chu thap.jpg”> Ví dụ 3: <img align=bottom src=“Image/chu thap.jpg”>  Liên kết đến các phần của trang Anchor là gì? • Anchor được đặt tên là một dấu hiệu tham khảo ẩn cho một phần của tập tin html. • Được sử dụng để tạo liên kết đến phần khác trong cùng một trang khi trang đó dài. • Liên kết này thường dùng để xây dựng mục lục. Dạng html cho vệc tạo anchor Cú pháp: <a name=“tên”>text to link </a> Chú ý: text to link có thể có hoặc không Ví dụ: <a name="I">I. Lý thuyết </a> Viết một liên kết đến một Anchor được đặt tên. Cú pháp: <a href=“#tên”>text to hypertext </a> Ví dụ: <a name="I"></a> 40
  • 41. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <a href="#I">I.Lý thuyết</a></p>  Thêm liên kết tới Anchor được đặt tên trong tài liệu khác Dạng mã: <a href=“FileName.html#Name”>text link</a> Ví dụ: <a href="liên kết đến một điểm trong cùng một trang.html#I"> Học tập</a></p>  Danh thiếp và địa chỉ liên kết đến Email * .Dạng tag address Ở cuối một trang web thường cung cấp thông tin về tác giả và tài liệu. Và cũng có thể gửi Email cho tác giả. Cú pháp: <address> Đánh địa chỉ ở đây..... </address> Ví dụ: <address> Theo thông tin của <b>Lê Anh Nhật</b>, điện thoại <tt> 0912.844.866 </tt> </address>  Liên kết đến Email Để người đọc có thể gửi Email cho tác giả, ta chỉ cần thêm liên kết siêu văn bản, trong đó có sử dụng từ khoá “mailto:”. Cú pháp: <A Href = “mail to: địa chỉ email” > Nội dung </A> Ví dụ: E-mail: <a href = "mailto:leanhnhat@yahoo.com">leanhnhat@yahoo.com</a> l/ Giới thiệu frame Frame mở rộng khả năng hiển thị trang web bằng cách cho phép chia miền hiển thị thành nhiều vùng. Mỗi vùng như vậy được gọi là frame và có những đặc điểm sau: 41
  • 42. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  Nó có thể truy cập tới một URL một cách độc lập với các frame khác.  Mỗi frame có thể đặt tên, dùng làm đích trong liên kết.  Nó có thể tự thay đổi kích thước khung nhìn, hoặc có thể không thay đổi đối với người sử dụng. * Thẻ Frameset <Frameset rows = "n1, n2, ... " cols = "m1, m2, ..." border = "N" framespacing = "N" bordercolor = #xxyyzz frameborder = "yes/no"> Trong đó: rows: chỉ chia hàng, tuỳ theo tham số. cols: chỉ chia cột, tuỳ theo tham số. border: độ dày đường viền. framespacing: khoảng cách các frame. frameborder: thiết lập đường viền cho toàn bộ tập frame, có giá trị yes hoặc no  Ví dụ: <frameset rows = "30%, *"> chia thành 2 hàng, hàng thứ nhất chiếm 30% màn hình, còn lại là hàng thứ 2. <frameset cols = "*, 100, *"> chia 3 cột, cột thứ 2 có độ rộng 100 điểm, các cột còn lại sẽ tự động phân chia. <frameset rows = "30%, *" border=0 framespacing = 5 frameborder = 0>: đặt đường viền, khoảng cách, ... * Thẻ frame Cú pháp: 42
  • 43. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com <frame src="URL" name="tên cửa sổ" width = "N" height = "M" scrolling = "yes/no/auto" frameborder = "yes/no" framespacing = "N" bordercolor = #xxyyzz noresize > Ví dụ: tạo trang web có 4 frame như sau: 43
  • 44. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com CHƯƠNG 2. TẠO TRANG WEB VỚI FONTPAGE 2.1. Giới thiệu Fontpage 2.1.1. Tạo một trang web trắng  Mở FrontPage 2003: Start à Programs à Microsoft Office à Microsoft FrontPage 2003  Màn hình làm việc của FrontPage 2003: 2.1.2. Tạo một trang web đơn giản  Mở MS.FrontPage  Click vào hình mũi tên bên cạnh biểu tượng New à Web site Thanh tiêu đề Thanh Menu Thanh công cụ chuẩn Thanh định dạng Page tab Chế độ làm việc Đóng trang web hiện tại Thanh cuộn ngang – dọc Task pane Vùng thiết kế 44
  • 45. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com è Hộp thoại Web site Templates xuất hiện Chú ý: Phải tạo thư mục chứa web site trước khi tạo web site Sau khi tạo web site xong màn hình như sau xuất hiện: 3.Click Ok để tạo website mới 2.Click chọn mẫu web site 1.Nhập đường dẫn chứa web site. Hoặc click vào nút Browse để chọn 45
  • 46. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com Cần tạo thêm thư mục “Media” để chứa các file âm thanh, các đoạn video, các file flash ` Tạo thư mục mới Trang chủ của web site Thư mục chứa các hình ảnh Tạo trang web mới 2. Nhập tên thư mục là “Media”  ấn Enter 1. Click tạo thư mục mới 46
  • 47. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 2.1.3. Định dạng nội dung  Định dạng font chữ, kích thướt, màu chữ mặc định:  Mở hộp thoại Page properties  Chọn tab Advanced  Click chọn nút Body style. Hộp thoại Modify style xuất hiện  Click nút Format  Font  Chọn các giá trị cần thiết rồi click OK để thiết lập è Các bước như sau: 1. Click vào Body style để mở hộp thoại modify style 47
  • 48. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com Býớc 2: 2. Click Format Font để mở hộp thoại Font 6. Click Ok để thiết lập Chọn màu chữ 5. Nhập vào kích cỡ chữ (ví dụ: 12px) 3. Chọn font chữ 4. Chọn kiểu chữ: bình thường, đậm, nghiêng,…… 48
  • 49. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  Định dạng đoạn: gồm các định dạng sau:  Canh lề đoạn (trái, phải, giữa, đều)  Khoảng cách giữa các đoạn  Khoảng cách giữa các dòng  Thực hiện: Chọn đoạn cần định dạng  Format  Paragraph  Định dạng ký tự gồm các định dạng sau 1. Chọn đoạn 2. Click Format  Paragraph Click OkClick Ok Canh lề cho đoạn Khoảng các giữa các dòng trong đoạn Định khoảng cách trên, dưới của đoạn 49
  • 50. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  Font chữ, kiểu chữ, kích thướt  Màu chữ, màu nền  Thực hiện: Chọn đoạn cần định dạng  Format  Font. Hộp thoại Font xuất hiện và thực hiện định dạng như trước 2.1.3.2. Định dạng trang  Thiết đặt thuộc tính cho trang web: Sau khi tạo trang web xong, công việc đầu tiên là ta thiết đặt thuộc tính cho nó. Bao gồm các thuộc tính chính:  Tiêu đề trang web  Định dạng lề cho trang web  Font chữ, kích thướt, màu chữ mặc định của trang web  Màu nền, ảnh nền và nhạc nền (nếu cần thiết) Để thiết đặt các thuộc tính này ta thực hiện: Click phải vào vùng trống trên trang web  Page properties để mở hộp thoại Page properties.  Đặt tiêu đề cho trang web: Chọn tab General  nhập nội dung vào mục Title  click OK Click Ok để thiết lập Chọn màu chữ Nhập vào kích cỡ chữ (ví dụ: 12px) Chọn font chữ Chọn kiểu chữ: bình thường, đậm, nghiêng,…… 50
  • 51. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  Định dạng lề cho trang web:  Mở hộp thoại Page properties  Chọn tab Advanced  Định lề trên: nhập giá trị vào ô Top Margin  Định lề trái: nhập giá trị vào ô Left Margin  Định lề dưới: nhập giá trị vào ô Bottom Margin  Định lề phải: nhập giá trị vào ô Right Margin 3. Click OK 2. Nhập tiêu đề 51 1. Chọn tab General
  • 52. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com , 2.1.3.3. Chèn ảnh  Chèn ảnh nền:  Mở hộp thoại Page properties  Chọn tab Formatting  Background picture  Browse để chọn ảnh nền  OK 3. Click Ok 1. Chọn tab Advanced 2. Nhập giá trị để định lề, trên, trái, dưới, phải 52
  • 53. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  Thiết đặt màu nền:  Mở hộp thoại Page properties  Chọn tab Formatting  Background  Chọn màu  OK  Chú ý: Phải đảm bảo rằng ảnh đã được lưu trong thư mục Images trước khi chọn nó làm ảnh nền    53
  • 54. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  Đưa nhạc nền vào trang web:  Mở hộp thoại Page properties  Chọn tab Formatting  Background picture  Browse để chọn nhạc nền  OK Chú ý:  Phải đảm bảo rằng file nhạc đã được lưu trong thư mục Media trước khi chọn nó làm nhạc nền  Nếu muốn bài hát tự động lặp lại: Bỏ chọn mục Forever  nhập vào số lần lặp lại trong ô Loop    54
  • 55. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 2.1.4. Lưu trang web  Click chọn biểu tượng save (hình chiếc đĩa mềm). Hộp thoại Save as xuất hiện    Nhập tên trang web Click save để lưu trang web 55
  • 56. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 2.2 Tạo bảng trang web 2.2.1 . Tạo bảng  Table cho phép hiển thị danh sách theo dòng, cột  Table cho phép ta tạo các ô để đặt các đối tượng vào đúng vị trí của chúng (table chính xác hơn layer) Để chèn Table vào trang web: click Table  Insert  Table Hộp thoại Insert xuất hiện 2.2.2. Định dạng văn bản trong bảng Click OK Chọn ảnh nền Nhập số dòng (rows), số cột vào ô (columns) Canh lề table (trái, phải, giữa) Thiết đặt độ rộng và độ cao Độ rộng và màu của đường viền Chọn màu nền 56
  • 57. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 2.2.3 . Định dạng bảng  Định dạng table: gồm các dịnh dạng chính  Định dạng đường viền (border)  Định dạng ảnh nền, màu nền Thực hiện: click vào table cần định dạng  Table Properties.    57
  • 58. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  Định dạng ảnh nền, màu nền 2.3. Siêu liên kết Hyperlink 2.3.1. Khái niệm về siêu liên kết  Các siêu liên kết (Hyperlink): có 2 loại  Liên kết trong là liên kết đến các Bookmark nằm trong chính trang đó. 5. Click OK 4. Khoảng cách từ đường viền đến chữ 3. Độ rộng đường viền 2. Chọn màu đường viền 1. Chọn mẫu đường viền Click OK để thiết đặt Chọn màu nền Chọn ảnh nền 58
  • 59. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  Liên kết ngoài: là liên kết đến các trang web khác 2.3.2 . Địa chỉ tương đối và tuyệt đối  Địa chỉ tương đối Nếu liên kết đến một tệp ở ngay trên máy chủ của bạn thì không cần dùng địa chỉ U L tuyệt đối mà dùng địa chỉ tương đối. Thay cho URL là tên tệp cùng với đường đẫn đến thư mục nơi chứa tệp đích. <A HREF="path & filename">... </A> Ví dụ: <A HREF="examples/exam .htm">Ví dụ 1</A>  Địa chỉ tuyệt đối Khi liên kết tới một tệp nằm ở ngoài máy tính cục bộ ta phải nêu rõ giao thức và đầy đủ địa chỉ U L của tệp đích. <A HREF="full URL">... </A> Ví dụ: <A HREF="http://www.vn .edu .vn/index.html>ĐHQG Hà Nội</A> <A HREF="http://www.dantri.com.vn/index.html>Báo dân trí</A> 2.3.3. Phối hợp màu cho văn bản siêu liên kết Mở hộp thoại Page Properties, chọn thẻ Formatting, tại mục Color: - Để đổi màu của hyperlink, chọn màu từ danh sách thả xuống (drop-down list) của Hyperlink hoặc chọn Custom để định nghĩa màu mới. - Để đổi màu của của active Hyperlink, chọn màu từ danh sách thả xuống (drop-down list) của Active Hyperlink hoặc chọn Custom để định nghĩa màu mới. - Để đổi màu của của Visited Hyperlink, chọn màu từ danh sách thả xuống (drop-down list) của Visited Hyperlink hoặc chọn Custom để định nghĩa màu mới. 59
  • 60. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 2.3.4. Đánh dấu trang Bookmark  Tạo các Bookmark trong trang:  Bookmark: là các điểm đánh dấu của một đoạn  Được dùng để tạo các điểm đến của các liên kết trong  Thực hiện: Chọn các ký tự làm tiêu đề của đoạn  Insert  Bookmark. Hộp thoại Bookmark xuất hiện 60
  • 61. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com    Nhập tên Bookmark Click OK 61 
  • 62. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com . 2.3. 5. Tạo một trang web từ một siêu liên kết  Chèn liên kết ngoài:  Chọn các ký tự làm liên kết  Chọn Insert  Hyperlink (hoặc ấn tổ hợp phím “Ctrl” + K)  Hoặc click biểu tượng hyperlink trên thanh công cụ  Hộp thoại Insert hyperlink xuất hiện  click chọn trang web cần liên kết  OK  Hoặc nhập vào địa chỉ (của trang web trên mạng) vào ô Address  click OK 2.3.6. Liên kết tới một trang trong web  Chèn liên kết trong:  Chọn các ký tự làm liên kết   62
  • 63. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  Chọn Insert  Hyperlink ( hoặc ấn tổ hợp phím “Ctrl” + K)  Hoặc click biểu tượng hyperlink trên thanh công cụ  Hộp thoại Insert hyperlink xuất hiện  click nút Bookmark  Chọn tên Bookmark cần liên kết đến  click OK 2.3.7. Tạo hình ảnh siêu liên kết Như ở phần trên, cấu trúc thành phần HTML mối liên kết siêu văn bản là: <A HREF="Đầu mối liên kết"> Để thay “đầu mối liên kết” bởi một biểu tượng, hay một hình ảnh... Ta chỉ cần chèn một hình ảnh hay biểu tượng đó vào vị trí của “đầu mối liên kết”. Ví dụ: <A HREF=”http://www.vn .edu .vn”><IMG SRC=” logo.gif”></A> 2.4 Đồ họa trong trang web 2.4.1. Định dạng JPEG Dạng JPEG chứa các ảnh có chất lượng ảnh chụp vốn có thể chứa hàng ngàn màu khác nhau. Để làm cho kích cỡ file trở nên hợp lý, làm cho ảnh tải nhanh hơn trên Web hoặc được truyền tải bởi phương tiện khác, JPEG sử dụng 63
  • 64. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com một kỹ thuật nén dữ liệu nhằm làm cho kích cỡ file nhỏ hơn nhưng bù lại chất lượng ảnh bị mất. Khi một file JPEG được tạo ra bởi một camera kỹ thuật số, máy quét hoặc phần mềm thì người ta cần đạt được sự cân bằng giữa kích cỡ và chất lượng. Độ rõ nét và chiều sâu ảnh càng cao thì kích cỡ của file càng lớn. Do nén, JPEG thường là lựa chọn thích hợp nhất cho các ảnh phức tạp với số màu lớn. Các file JPEG thích hợp đối với việc hiển thị các ảnh chụp được quét vốn không có các vùng màu đồng nhất. JPEG thường là lựa chọn kém cho các ảnh với các vùng lớn có một màu đơn. Do cách xử lý việc nén, các đường gợn sóng (thường được gọi là “răng cưa”) sẽ xuất hiện trông mờ hơn. 2.4.2. Định dạng GIF Dạng GIF chứa các ảnh được giới hạn chỉ 256 màu. Dạng này lý tưởng cho các ảnh có nhiều màu đồng nhất (các nút menu), các ảnh đồ họa nhỏ (các biểu tượng, quảng cáo) và những hình ảnh khác vốn không đòi hỏi chi tiết rõ nét. Nếu một ảnh chụp được hiển thị dưới dạng GIF, đầu tiên nó phải được làm giảm sao cho không quá 256 màu xuất hiện khác nhau trong ảnh. Dạng GIF hỗ trợ hai hiệu ứng đặc biệt thường thấy trên Web: độ trong suốt và hoạt hình. Độ trong suốt (transparency) là một kỹ thuật nhằm làm cho một phần của một ảnh hòa hợp với nền của trang, nền có thể là một màu đồng nhất hoặc một ảnh. Độ trong suốt sẽ làm việc bằng cách chỉ định một màu trong một ảnh GIF lmà màu trong suốt, màu này sẽ không được hiển thị khi ảnh được hiển thị trên một trang Web. 2.4.3. Chèn ảnh vào trang web  Insert  Picture  Chọn “Clip art”: nếu ta muốn chèn từ bộ sưu tập ảnh của FrontPage  Chọn “From File”: nếu file ảnh đã tồn tại trên đĩa. (Chú ý: ảnh phải được chép vào thư mục “Images” của web site). 64
  • 65. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 2.4.4. Nhập ảnh từ ClipArt Chú ý:  Sau khi chèn xong ta phải save trang web lại    65
  • 66. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com  Nếu file ảnh vừa chèn chưa có trong web site thì màn hình Save embedded files xuất hiện để yêu cầu chúng ta lưu lại file ảnh vừa chèn 2.4.5. Lấy một ảnh từ www Đặt trỏ text tại nơi muốn chèn ảnh. 1. Chọn Insert/Picture. 2. Kích nút World Wide Web. Trình duyệt Web được mở. 3. Trong trình duyệt Web, gõ vị trí và tên của ảnh bạn muốn chèn và ấn ENTER để hiện ảnh. Đổi tên file nếu cần thiết 1. Click Change Folder 4. Click OK 2. Chọn thư mục Images 3. Click OK 66
  • 67. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 4. Quay về hộp hội thoại Picture và kích OK để chèn ảnh. 2.4.6 . Lưu hình ảnh 2.4.7. Chuyển đổi ảnh đồ họa * Chuyển thành ảnh GIF Chọn ảnh muốn chuyển, chọn Edit/Picture Properties, chọn mục General. Tại phần Type, nhấn chọn GIF, sau đó nhấn OK. * Chuyển thành ảnh JPEG Chọn ảnh muốn chuyển, chọn Edit/Picture Properties, chọn mục General. Tại phần Type, nhấn chọn JPEG, sau đó nhấn OK. 2.4.8. Tạo bo viền và đặt vòng đệm cho ảnh 2.4.9. Tạo nhãn cho ảnh Chọn ảnh cần xử lý. Trên thanh công cụ Picture, chọn nút Text, sau đó gõ text trong hình chữ nhật trên ảnh. Có thể thay đổi kích thước miền text và di chuyển nó tới các vị trí khác như các đối tượng đồ họa thông dụng. Việc chèn text vào ảnh không làm thây dởi file ảnh trong trang web. 2.4.10. Các thao tác định dạng ảnh trong Fontpage 2.4.11. Thay đổi kích thước, hình dạng, cắt xén hình ảnh Để định lại kích cỡ một ảnh, thực hiện các bước sau: 1. Click vào ảnh. Các núm chọn xuất hiện xung quanh các mép của ảnh. Khi ta đặt chuột lên trên một trong các núm này, con trỏ biến thành một mũi tên, điều này biểu thị rằng ta có thể kéo các núm xung quanh. 2. Để thay đổi kích cỡ của ảnh, kéo một núm đến một ví trí mới: a. Để thay đổi chiều cao, giữ núm tại phần chính giữa của đỉnh hoặc đáy của ảnh. b. Để thay đổi chiều rộng, giữ núm tại phần chính giữa của cạnh trái và phải. c. Để thay đổi kích cỡ trong khi duy trì chiều rộng và chiều cao, giữ bất kỳ góc nào. Ảnh thay đổi kích cỡ khi các núm được di chuyển, cho phép ta xem trước việc thay đổi trước khi nó được hoàn tất. 67
  • 68. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 3. Nhả núm. Một hộp nhỏ xuất hiện kế bên ảnh. Click hộp này để mở một menu thả xuống vốn quyết định ảnh sẽ được định lại kích cỡ như thế nào. 4. Chọn Only Modify Size Attributes để thay đổi kích cỡ hiển thị của ảnh. 5. Chọn Resample Picture to Match Size để định lại kích cỡ ảnh một cách cố định. Để thay đổi kích cỡ, hãy kéo hộp đến một vị trí mới để làm cho ảnh lớn hoặc nhỏ hơn, 2.4.12. Lật và xoay hình ảnh Chọn ảnh cần xử lý. Trên thanh công cụ Picture: - Chọn nút Flip để lật dọc ảnh; - Chọn nút Reserse để lật ngược ảnh; - Chọn nút Rotate Left để quay ảnh 900 ngược chiều kim đồng hồ; - Chọn nút Rotate Right để quay ảnh 900 theo chiều kim đồng hồ; 2.4.13. Tạo các hiệu ứng 2.4.14. Dán văn bản lên hình ảnh 2.5. T¹o Frame trong trang web 2.5.1. Tạo Frame  Tạo một trang web có frame ta thực hiện:  Click mũi tên bên cạnh biểu tượng New à Page  Hộp thoại Page template xuất hiện à Frames pages 68
  • 69. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 2.5.2. Tìm hiểu menu Frame Chọn mẫu Hiển thị mẫu của trang Click OK Chèn trang web đã có vào frame Tạo trang web mới cho frame 69
  • 70. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com Tại frame muốn thay đổi thuộc tính, thực hiện lệnh Frame/Frame Properties. Xuất hiện hộp hội thoại Frame Properties. - Name: Tên của frame, được dùng để thiết lập đích trong liên kết. Ban đầu, hộp Name được gán tên mặc định bởi FrontPage Editor. - Options: Phần này thiết lập frame có thay đổi kích thước và có hay không có thanh cuộn frame hay không. - Resizable in Browser: Cho phép người sử dụng thay đổi kích thước. - Show Scrollbars: Lựa chọn khả năng xuất hiện thanh cuộn frame:  If Needed: Hiển thị thanh cuộn nếu dữ liệu của trang lớn hơn vùng hiển thị của frame.  Never: Không xuất hiện thanh cuộn.  Always: Luôn xuất hiện thanh cuộn. - Frame Size: Đặc tả chiều cao và chiều rộng của frame tại Width và Row Height. Tuy nhiên, bạn có thể thay đổi kích thước của frame bằng cách rê chuột trên đường viền của frame ở chế độ view Normal của FrontPage. Kiểu giá trị của đặc tả này gồm 3 loại: - Relative: Tính tương đối với các frame cùng cạnh theo chiều cao hoặc chiều rộng. - Percent: Tính tương đối % theo chiều cao và chiều rộng của màn hình trình duyệt Web. - Pixels: Tính chính xác bằng đơn vị điểm. - Margins: Đặc tả lề của frame tính bằng điểm, với Width là lề trái và lề phải, Height là lề trên và dưới. - Initial Page: Đặc tả trang khởi tạo của frame hiện thời. Gõ URL của trang hoặc kích vào nút Browse để chọn trang khởi tạo mới. * Thay đổi khoảng cách giữa các frame - Thực hiện lệnh Frame/Frame Page Properties. - Chọn Frames, vào giá trị khoảng cách giữa các frame tại Frames Spacing. Khoảng cách này được tính bằng điểm, giá trị ngầm định là 2 pixels. * Tạo viền cho frame 70
  • 71. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com - Thực hiện lệnh Frame/Frame Page Properties. - Chọn Frames, kích Show Borders. CHƯƠNG 3: THIẾT KẾ WEBSITE VỚI CÔNG CỤ DREAMWEAVER 3.1. Giới thiệu DREAMWEAVER 3.1.1. Cài đặt 3.1.2. Màn hình giao diện DREAMWEAVER * Insert Bar: - Common: Chèn các đối tượng: Hyperlink, Table, Image, Flash, Date, Template 71 Insert Bar Panel groupsProperties Inspector Document Bar
  • 72. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com – 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: Tạo trang web bằng code view… Document Window: Cửa sổ dùng để tạo và * Document Bar: - Show code view: hiển thị mã HTML – Show Design view: chế độ thiết kế, sử dụng các công cụ của Dreamwerver. – Show code and design view: hiển thị mã HTML và chế độ 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. * Properties Inspector: – Hiển thị các thuộc tính của các đối tượng đang được chọn. - Cho phép hiệu chỉnh các thuộc tính của đối tượng được chọn. * Panel groups: nhóm các Panel dùng để 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. 3.2. Làm việc với các site Dreamweaver MX 2004 3.2.1. Tạo site mới Trước khi xây dựng một Website ta cần phải tạo một mục Site tương ứng. Các bước thực hện việc định nghĩa Site như sau: 1. Chọn Site à Manage Sites… àNew àSite. Màn hình sau xuất hiện: 72
  • 73. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 73 Gõ tên Site vào đây (VD: Mysite)
  • 74. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 74 Nhấn vào đây để chọn nơi lưu các Site
  • 75. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 75
  • 76. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 76
  • 77. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 3.2.2. Quản lý các site Do phải làm việc với nhiều Site nên DW cũng cung cấp các chức năng để quản lý chúng. Để mở cửa sổ quản lý các mục Site ta chọn Site à Edit Sites. Cửa sổ Edit Sites xuất hiện, chức năng của các nút như sau: 3.2.3. Che giấu các folder và file trong site 3.2.4 .Kiểm tra site 77
  • 78. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com 3.3. Thiết kế các trang trong Dreamweaver MX 2004 3.3.1. Thiết kế các trang với CSS * Tạo CSS cục bộ: – Chọn Text à CSS Styles à New… – Hoặc Window àCSS Style, mở CSS Panel, Click New CSS Style. - Selector type: chọn loại CSS - Define in: + This document only: Tạo style (dạng internal style), sử dụng trong trang hiện hành. + New Style Sheet file: Tạo tập tin CSS mới (dạng External style). * Có 3 loại style: - Class: style dạng lớp. Name: nhập tên lớp, bắt đầu bằng dấu chấm (.) 78 Một Website sau khi đã tạo thành công thì trong site panel phải có nhành thư mục trong đó các biểu tượng file/folder có màu xanh dạng như hình bên.
  • 79. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com - Tag: định nghĩa tag, Tag: chọn tên tag - Advanced: định dạng các tag riêng biệt, Selector: nhập #idName (bắt đầu bằng dấu #). Chọn xong click OK à cửa sổ CSS style definition xuất hiện: + Khung Category: chọn nhóm định dạng + Khung Style: chọn các định dạng * Cách sử dụng Style cục bộ: – Chọn nội dung văn bản cần định dạng – Trong CSS Style Panel, chọn tên CSS – Hoặc chọn tên style trong Properties inspector – Nếu loại tag định dạng riêng biệt thì đối tượng sử dụng style phải có tên định danh ID. * Tạo tập tin CSS: – Text à CSS Styles à New – Trong hộp thoại New CSS Style. – Selector Type: Chọn loại style – Define in: Chọn New Style Sheet file OK – Hộp thoại yêu cầu lưu tập tin CSS, có phần mở rộng .CSS 79
  • 80. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com – Chọn các thuộc tính định dạng trong cửa sổ CSS Style definition à Apply à OK. Trong CSS panel xuất hiện tập tin Style vừa tạo như sau: * Áp dụng CSS từ tập tin CSS: – Mở trang HTML cần sử dụng tập tin CSS – Chọn Text à CSS Style à Manage Style. – Hoặc Click nút Attach Style Sheet trong Style Panel – Chọn tập tin CSS cần kết nối, Click nút Browse… – Link: Chỉ liên kết với tập tin CSS để sử dụng – Import : Chép tập tin CSS vào trang. * Xoá một CSS Styles: – Khi xoá một CSS Style thì những nội dung áp dụng CSS Style bị xoá sẽ trở về trạng thái ban đầu. – Chọn CSS Style cần xoá. 80
  • 81. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com – Click nút Delete CSS Style trong CSS Style Panel, Hoặc Click chuột phải, chọn Delete. 3.3.2. Làm việc với bảng biểu  Tạo bảng: - Đặt con trỏ ở vị trí cần tạo bảng. - Vào menu Insert à Chọn Table hoặc click nút Table trên tab Common của thanh công cụ Insert. Trong đó: - Rows: số dòng; Columns: số cột; - Table width: chiều rộng của bảng; - Border thickness: độ dày đường viền; - Cell padding: khoảng cách giữa đường biên của ô với nội dung trong ô; - Cell spacing: khoảng cách giữa các ô trong bảng;  Định dạng cho bảng: - Đặt con trỏ bên trong bảng cần chọn. Công cụ Table 81
  • 82. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com - Click phải chuột à chọn Table à Select Table (hoặc vào menu Modify à Table à Select Table) - Hiệu chỉnh các thông số của bảng trong cửa sổ Properties: + Bg color: chọn màu nền cho bảng; + Bg Image: chọn ảnh làm nền cho bảng + Brdr color: chọn màu cho đường viền của bảng - Trộn nhiều ô thành 1 ô: + B1: Quét chọn các liên tiếp cần trộn + B2: Vào menu Modify à Table à Merge cells - Tách 1 ô thành nhiều ô: + B1: Click chuột vào ô cần tách + B2: Vào menu Modify à Table à Split cell. Xuất hiện hộp thoại Split cell + B3: Chọn tùy chọn Split cell into à Rows: tách ô thành nhiều dòng à Columns: tách ô thành nhiều cột à Number of …: số lượng cần tách  Định dạng ô trong bảng: - B1: Click chuột vào ô cần định dạng• - B2: Chọn các tùy chọn định dạng trong vùng Cell của cửa sổ Properties • Horz: canh lề theo chiều ngang • Vert: canh lề theo chiều dọc • W: chiều rộng của ô • H: chiều cao của ô • Bg: chọn màu, tập tin ảnh làm nền cho ô • Brdr: chọn màu cho đường viền của ô  Thuộc tính của bảng 82
  • 83. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com Trong đó: - Rows: số hàng; Cols: số cột; W: Chiều rộng; H: chiều cao - Border: độ dày khung; Align: canh biên; Border color: màu của khung - BG color: màu nền; Bg Image: ảnh nền; - Và một số thuộc tính khác… 3.3.3. Làm việc với form  Công dụng: - Giúp người dùng giao tiếp với Webserver bằng các thành phần trên Form.  Các thành phần của Form: - Label, Text Field, Text Area, Password Field - Check Box, Radio Button, Radio Group. - List/Menu - Button, Image Field - Jump Menu  Chèn Form mới vào trang web: - Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn Form. - Trên thanh công cụ Insert, chọn tab Forms à Form Sau đó chèn các thành phần vào trong Form (tùy theo yêu cầu công việc) bằng cách sử dụng các công cụ trên thanh công cụ Insert – tab Forms/menu Insert -Form.  Thay đổi các thuộc tính của Form: 83
  • 84. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com - B1: Click chuột trên đường viền đỏ thể hiện form - B2: Hiệu chỉnh các thuộc tính của form trên cửa sổ Properties: • Action: địa chỉ trang web sẽ nhận các dữ liệu trên form • Method: phương thức gửi dữ liệu • Target: đối tượng cửa sổ (hoặc frame) hiển thị kết quả 3.3.4. Sử dụng các khung  Công dụng: - Chia màn hình thành nhiều phần khác nhau, mỗi vùng thể hiện một trang web khác nhau. - Giảm được phần trùng lắp trên nhiều trang web khác nhau. Lưu ý: hình ảnh có thể bị biến dạng khi thu nhỏ hoặc phóng to cửa sổ trình duyệt  Cách tạo Frame: Trên thanh công cụ Insert: chọn tab Layout → Frames → chọn kiểu Frame Hoặc chọn tab HTML à Frames à chọn kiểu Frame 3.4. Thêm nội dung vào các trang 3.4.1. Làm việc với các trang  Tạo trang web mới: - Chọn File à New… - Trong danh sach Category à Chọn Basic Page. - Trong Basic Page à Chọn HTML. - Nhấn nút Create  Định dạng tổng thể cho trang web: - B1: Vào menu Modify -> Page Properties (Ctrl-J). Xuất hiện hộp thoại Page Properties - B2: Category Appearance (CSS) 84
  • 85. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com o Page font: Chọn font chữ mặc định cho trang web o Size: Chọn kích thước và đơn vị cho mặc định cho ký tự o Text color: Chọn màu mặc định cho ký tự o Background color: Chọn màu nền cho trang web o Background image: Chọn tập tin ảnh làm nền cho trang web o Repeat: Chọn chế độ lập lại ảnh nền o Left margin: Canh lề trái o Right margin: Canh lề phải o Top margin: Canh lề trên o Bottom margin: Canh lề dưới - B3: Category Link (CSS) o Link font: Chọn font chữ cho văn bản liên kết o Size: Chọn kích tước chữ cho văn bản liên kết o Link color: Chọn màu mặc định cho văn bản liên kết o Rollover link: Chọn màu cho văn bản liên kết khi rê chuột đến o Visited links: Chọn màu mặc định cho văn bản liên kết đã được click o Active links: Chọn màu mặc định cho văn bản liên kết hiện tại o Underline style: Chọn định dạng gạch chân cho văn bản liên kết o Always underline: định dạng gạch chân o Nerver underline: không gạch chân o Show underline only on rollover: chỉ gạch chân khi rê chuột đến văn bản liên kết o Hide underline on rollerver: không gạch chân cho văn bản liên kết nhưng khi rê chuột đến thì gạch chân. - B4: Category Title/Encoding o Titlte: Văn bản tiêu đề trang (hiển thị trên thanh tiêu đề của trình duyệt) 85
  • 86. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com o Encoding: Chọn mã hóa văn bản. Luôn luôn chọn Unicode (UTF-8) - B5 : Chon Apply vào nhấn OK để hoàn tất. 3.4.2. Chèn và định dạng text  Chèn Text: Trên thanh công cụ Insert: chọn tab Text  Định dạng text: - B1: Dùng chuột chọn khối văn bản cần định dạng - B2: Vào menu Format: • Align: Canh lề văn bản o Left: canh trái o Center: canh giữa o Right: canh phải o Justify: canh đều • List: Định dạng danh sách đề mục o None: không định dạng đề mục o Unordered List: định dạng đề mục (không đánh số thứ tự) o Ordered List: định dạng đánh số thứ tự đề mục • Font: Chọn font chữ cho văn bản o Sau khi chọn font, xuất hiện hộp thoại New CSS Rule o Chọn lớp định dạng (Class) o Chọn tên lớp định dạng hoặc nhập tên mới o Chọn OK • Style: Chọn định dạng o Bold: chữ đậm o Italic: chữ nghiêng o Underline: chữ gạch chân • Color: Chọn màu cho văn bản 3.4.3. Chèn hình ảnh * Ảnh trong thư mục Images của Site: 86
  • 87. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com – Đặt dấu nháy tại vị trí cần chèn ảnh. – Drag chuột kéo tập tin ảnh trong Site Panel thả vào trang. * Ảnh ngoài Site: – Chọn Insert à Image. – Xuất hiện hộp thoại Select Image Source, chọn đường dẫn nơi lưu file hình ảnh. – Chọn tập tin ảnh cần chèn à OK. * Hiệu chỉnh thuộc tính của ảnh: Chọn ảnh cần thay đổi thuộc tính: Window à Properties – Image: tên ảnh – W (Width), H (Height): Độ rộng và chiều cao của ảnh, tính bằng Pixel – Src: đường dẫn tương đối đến tập tin ảnh – Alt: câu thông báo xuất hiện trên trình duyệt khi rê chuột vào ảnh. – Link: Địa chỉ URL nơi cần liên kết đến. – Edit: Chuyển qua Macromedia Fire Works hiệu chỉnh ảnh. – Crop: Cắt xén ảnh. – Brightness/Contrast: Chỉnh độ sáng tối của ảnh. – Sharpen: Chỉnh độ sắc nét cho ảnh. – Resample:Lưu lại kích thước đã điều chỉnh. – Optimize in Fireworks: chuyển qua Macromedia FireWoks để hiệu chỉnh. – Map: bản đồ liên kết ảnh – VSpace, Hspace: Khoảng cách trên, dưới, trái, phải giữa phần nội dung văn bản đến ảnh – Target: Khung chứa trang liên kết đến 87
  • 88. Tài liệu THIẾT KẾ WEBSITE – truongkinhtethucpham.com – Low Src: tên tập tin ảnh phụ có độ phân giải thấp, làm ảnh thay thế khi chờ hiển thị ảnh chính trên trình duyệt. – Border: đường viền ảnh – Align: canh lề trái, phải, giữa 3.5. Làm việc với Page Code 3.5.1. Tạo mã trong Dreamweaver 3.5.2. Hiệu chỉnh mã trong khung xem Design 88