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

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.

WWW dựa trên một kỹ thuật biểu diễn thông tin có tên gọi là siêu văn bản

(Hypertext), tức là nội dung thông tin không chỉ ở trong một trang mà nó còn

được mở rộng bằng cách liên kết tới nhiều tài liệu khác (hnh ảnh, âm thanh, hoạt

họa, ..) chứa thông tin bổ sung.

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.

1

Internet

HTMLHTML…………………………………………………………....………………........

http://www.tlttp.edu.vnhttp://www.tlttp.edu.vn

Xử lý yêuXử lý yêu cầucầu

Web Server


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

Hoặc một trnh soạn thảo bất kỳ trong windows: 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.

- Thông tin hiển thị được gọi ra từ một cơ sở dữ liệu khi người dùng truy

vấn tới một trang web. Trang web được gửi tới trnh duyệt gồm những câu chữ,

2


hình ảnh, âm thanh hay những dữ liệu số hoặc ở dạng bảng hoặc ở nhiều hnh

thức khác nữa.

- 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

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

3

http://lamtrangweb.vn/


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

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)

- các chương trình được lập trnh để website hoạt động (back-end).

Giao diện người dùng là định dạng trang web được trnh bày trên

màn hình của máy tính của người xem (máy khách) được xem bằng các phần

mềm trình duyệt web như Internet Explorer, Firefox,...

Việc trnh bày một website phải đảm bảo các yếu tố về thẩm mỹ đẹp, ấn

tượng; bố cục đơn giản, dễ hiểu và dễ sử dụng, các chức năng tiện lợi cho người

xem. Đặc biệt ngày nay, website trở nên sống động với những hiệu ứng đa dạng

của hình ảnh và chữ kết hợp với âm thanh.

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

4

http://www.ticsoft.com/website/Khach-hang/35/


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.

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.

- Tích hợp hệ thống: lắp ghép phân tích thiết kế, nội dung lập trnh thành

một sản phẩm.

- 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

5

http://www.ticsoft.com/dich-vu-phan-mem/

http://www.ticsoft.com/tu-van-quang-ba-website/Noi-dung-diem-mau-chot-cua-ky-thuat-quang-ba-web/145/

http://www.ticsoft.com/thiet-ke-website/


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)

Gồm có các trnh duyệt Microsoft Internet Explorer, FireFox, Google

Chorm, Opera, Netscape...

1.2. HTML

1.2.1. Giới thiệu HTML

a/ HTML là gì ?

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

6


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..

- Sử dụng chương trnh soạn thảo NotePad:

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

+ 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.

7


Để 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:

<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

8


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 đề

<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

9


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: Tại cửa sổ của trnh soạn thảo NotePad thực hiện soạn thảo đoạn mã sau:

<html>

<head>

<title> Học tập HTML</title>

</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: Vào thư mục của mnh chạy tệp HTML mà ta vừa tạo, xem kết quả

nhận được.

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


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

11

Gõ tên trang Web vào đây

Chọn phần mở rộng là html

hoặc htm

chọn mục này là UTF-

8

Nhấn vào nút Save


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

<html>

<head>


</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:

12


b/ Các thẻ định dạng văn bản

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 = “…”

Tạo đường kẻ

Color: màu

<HR Color=“Red” Size=“10”

Width=“200” />

13


SIZE = “…”

WIDTH = “…” />

Size: độ dày (tính bằng

pixel)

Width: độ dài (tính bằng

pixel)

Các ký tự đặc biệt:

Dấu lớn hơn: >

Dấu nhỏ hơn: <

Dấu nháy kép:

"

If A > 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

Ví dụ 3: Định dạng Font, xuống hàng

<html>

<head>


</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

14


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


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>

15


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

</body>

</html>


16


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






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


</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



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 = *>

<LI> Mục thứ nhất

<LI> Mục thứ hai

<LI> Mục thứ ba

.........

</OL>

18


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 ME</p>

<li>Hệ điều hành Windows XP</p>

</ol>

<li><b>Ứng dụng của WINDOWS</b></p>

</ol>

</body>

</html>


19


* 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)

square (hình vuông)

disk (dấu hinh tròn đậm)

20


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


21


* 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


<DD> Chú giải cho yếu tố 2

…….

</DL>

Ví dụ 8: Tạo danh sách định nghĩa

<html>

<head>


</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>


23


* 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>


</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


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


25


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>


26

Dòng 1

Dòng 2


</head>

<body>

<table border=1>

<tr>

<td> Hàng 1, cột 1 </td>


</tr>

<tr>



</tr>

</table>

</body>

</html>


27


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


</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


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


29


<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


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>


</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>


</tr>

31


<tr>

<th> Cử nhân Anh văn </th>

<td> 8.000.000 </td>

<td> 10% </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>


32


<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


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


<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


</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


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>


* 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ả


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

Sắp xếp trong hàng của văn bản và hình ảnh

39


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>

<a href="#I">I.Lý thuyết</a></p>

40


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:[email protected]">[email protected]</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


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


<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


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


è 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


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


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


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


Đị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


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


Định dạng lề cho trang web:


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


,

2.1.3.3. Chèn ảnh

Chèn ảnh nền:


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


Thiết đặt màu nền:


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


Đưa nhạc nền vào trang web:


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

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

54


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

Nhập tên

trang web

Click save để lưu

trang web

55


2.2.2. Định dạng văn bản trong bảng

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.

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


Đị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


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


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


Nhập tên Bookmark

Click OK

61


* Liên kết đến Bookmark:

Để liên kết đến Bookmark trong cùng trang web, bạn chọn cụm từ cần liên

kết, mở menu Insert/Hyperlink, chọn Bookmark.

Để liên kết đến Bookmark trong một trang web khác, bạn chọn cụm từ cần

liên kết, mở menu Insert/Hyperlink. Chọn trang web đích trong ô liệt kê rồi bấm

nút Bookmark. Trong danh sách Bookmark có trong trang web đích, chọn một

Bookmark đích.

Chú ý: Liên kết bookmark có dạng là “#tên bookmark” (thí dụ: weblh/

tv/ctvlk.htm#lvd) trong mã lệnh và có biểu tượng lá cờ khi đang soạn thảo trong

bảng Normal.

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

62


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

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

63


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

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.

64


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).

2.4.4. Nhập ảnh từ ClipArt

65


Chú ý:

Sau khi chèn xong ta phải save trang web lại

66


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ết1. Click

Change Folder

4. Click OK

2. Chọn thư mục

Images

3. Click OK

67


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.

68


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

69


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

70


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

71


- 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

72

Insert Bar

Panel groupsProperties Inspector

Document Bar


– 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:

73


74

Gõ tên Site vào

đây (VD: Mysite)


75

Nhấn vào đây để chọn nơi

lưu các Site


76


77


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

78


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 (.)

79

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.


- 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

– Chọn các thuộc tính định dạng trong cửa sổ CSS Style definition à

Apply à OK.

80


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á.

– 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:

81


- Đặ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.

- 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;

Công cụ Table

82


+ 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

Trong đó:

- Rows: số hàng; Cols: số cột; W: Chiều rộng; H: chiều cao

83


- 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:

- 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:

84


- 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)

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

85


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)

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

86


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:

– Đặ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

87


– 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

– 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

88


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

89

Education

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