Bai giang mon tk web 1 docx

CSS Styles Trên menu Text, chọn mục Style, chúng ta sẽ có một tập hợp style được định nghĩa trước có thể áp dụng vào khối văn bản đang được chọn.. Nhiều tùy chọn ở đây có thể được sử dụ

CHƯƠNG I – GIỚI THIỆU CHUNG VỀ INTERNET VÀ WORLD WIDE WEB

I.1 Giới thiệu về Internet

- Internet là sự kết hợp của các máy tính trên phạm vi toàn cầu Những máy tính này được liên kết với nhau thông qua một mạng lớn của hệ thống viễn thông Internet cho phép truy cập các nguồn tài nguyên trên máy tính ở các vị trí khác nhau trên toàn thế giới.

- Các máy tính có thể kết nối với nhau thông qua một phương thức truyền dữ liệu gọi chung là giao thức TCP/IP.

- Mỗi máy tính trên Internet được gọi là một host Mỗi host có khả năng như nhau về truyền thông tới máy khác trên Internet Một host được nối tới mạng bằng đường nối dial-up (quay số) tạm thời, số khác được nối bằng đường nối mạng thật sự 100% (như ethnet, Token ring…).

I.2 Một số khái niệm liên quan đến Word Wide Web

- Dịch vụ WWW: Là dịch vụ mạng thông tin toàn cầu, là dịch vụ mới nhất và mạnh nhất của Internet

WWW được xây dựng trên kỹ thuật HyperText HyperText là kỹ thuật trình bày thông tin trên một trang WWW sử dụng ngôn ngữ HTML để xây dựng các trang thông tin đó.

- Định Nghĩa WWW: là một công nghệ cho phép người sử dụng truy xuất thông tin và tài nguyên trên

Internet dựa trên công nghệ HyperText và giao thức chuẩn HTTP.

WWW và HTTP cho phép:

+ Cho phép tạo các "links" từ một tệp văn bản tới tệp văn bản khác.

+ Tích hợp với công nghệ Multimedia như hiển thị hình ảnh, phim, cũng như âm thanh…

+ Giao tiếp được với các chuẩn của Internet như ftp, Gopher, Telnet…

I.3 Một số vấn đề cần quan tâm khi thiết kế và xuất bản trang web

- Trang Web: Những thông tin truyền tải trên Internet được sắp xếp trên những trang văn bản đặc biệt

gọi là trang Web Nó là một tài liệu chứa đựng văn bản, hình ảnh, âm thanh… theo khuôn dạng HTML được truyền tải trên mạng.

- Website: Website là tập hợp các trang Web lại với nhau theo một cấu trúc nhất định, được lưu trữ trong

một phân vùng nào đó.

- WebBrowse: Để xem được các thông tin trên mạng, chúng ta phải sử dụng một phần mềm để xem, nó

đóng vai trò như một giao diện giữa người sử dụng và hoạt động bên trong của hệ thống Internet, phần mềm đó gọi là WebBrowse.

Các WebBrowse thông dụng là: Internet Explore và NetsCape Nivagater

- WebServer:

Hệ điều hành WebServer: Phần mềm WebServer

Nội dung thông tin WebServer được xem như một máy chủ Nó có nhiệm vụ nhận các yêu cầu từ máy khách (Client) sau đó phân tích, phân loại các yêu cầu đó rồi gửi kết quả trả về Client thông qua WebServer.

Trình duyệt WebBrowse có nhiệm vụ kết nối tới Server, gửi các yêu cầu tới Server và nhận trả lời, hiển thị kết quả cho người sử dụng trên màn hình.

Server

Client

Client Client

Client

CHƯƠNG II – NGÔN NGỮ HTML(Hypertext Markup Language) II.1 GIỚI THIỆU VỀ HTML

1 Khái niệm:

- HTML là một ngôn ngữ thể hiện tất cả những gì mà bạn nhìn thấy trên trình duyệt Internet của bạn.

- HTML được sử dụng cho việc đưa các văn bản lên WWW.

- HTML có thể dùng để đưa dữ liệu là ảnh, các mối links

2 Trình soạn thảo.

Để tạo một tài liệu, 1 trang HTML trước hết ta phải lựa chọn một số bộ soạn thảo để làm việc.

Có rất nhiều bộ soạn thảo để chọn: NotePad, WordPad, FrontPage 2000, Macromedia Dreamwawer.

II.2 TẠO MỘT TÀI LIỆU HTML

1 Tạo một tài liệu

- Mở một trình soạn thảo (Ví dụ NotePad)

Start -> Programs -> Accessries -> Notepad -> Xuất hiện màn hình soạn thảo

- Gõ nội dung vào

- Ghi lại với tên : tên.htm hoặc tên.html

2 Chạy

- Nhấp đúp vào tên trang Web đã tạo

II.3 GIỚI THIỆU MỘT SỐ THẺ THÔNG DỤNG

Các thẻ dùng để báo cho trình duyệt cách thức trình bày văn bản trên màn hình hoặc dùng để chèn một mối liên kết đến các trang khác, một đoạn chương trình khác Mỗi thẻ gồm một từ khoá - KEYWORD - bao bọc bới hai dấu "bé hơn" (<) và "lớn hơn" (>).

Hầu hết các lệnh thể hiện bằng một cặp hai thẻ: thẻ mở (<KEYWORD>) và thẻ đóng

(</KEYWORD>) Dấu gạch chéo ("/") kí hiệu thẻ đóng Lệnh sẽ tác động vào đoạn văn bản nằm giữa hai thẻ <KEYWORD> Đoạn văn bản chịu tác động của lệnh</KEYWORD>

Một số thẻ không có cặp, chúng được gọi là các thẻ rỗng hay thẻ đơn

1 Thẻ trình bày trang

HTML sử dụng các thẻ (tag) để phân biệt các phân mục.

Đây là cấu trúc của một trang HTML đơn giản:

<HTML>

<HEAD>

<TITLE>Chứa tiêu đề của trang Web</TITLE>

</HEAD>

<BODY Các tham số nếu có

Chứa nội dung chính của trang Web

</BODY>

</HTML>

Các thành phần của trang Web: được chia làm 2 phần

- Thẻ <HTML> </HTML>: Dùng để thông báo cho trình duyệt biết sự bắt đầu và kết thúc của một

trang Web

- Phần đầu: <HEAD> </HEAD>: Đây là phần có thể có hoặc không của trang Web

- Tiêu đề: <title> </title> : Mô tả tiêu đề trang web

- Phần chính: <BODY> </BODY> Xác định vùng thân của trang web, nơi chứa các thông tin.

<Li> Mục 1 trong danh sách

<Li> Mục 2 trong danh sách

<Li> Mục 3 trong danh sách

</UL>

- Thuộc tính của thẻ <UL>

Type = “Disc”: mặc định, đĩa tròn đen quen thuộc

“Square” : Một hình vuông nhỏ được tô đầy

“Circle” : Một hình tròn không được tô đầy.

Ví dụ: Tạo danh sách theo mấu sau:

Danh sach học sinh lớp chuyên viên

<UL type =””>

<Li> Trần Kim Hoa

<Li> Văn Khánh Linh

<Li> Phạm Thanh Hải

</UL>

b Danh sách có đánh số thứ tự

<OL>

<Li> Mục 1 trong danh sách

<Li> Mục 2 trong danh sách

<Li> Mục 3 trong danh sách

</OL>

Các thuộc tính của thẻ <OL>

Type =”1” : Kiểu đánh danh sách là: 1, 2, 3

”a” : Kiểu đánh danh sách là: a,b,c

”A” : Kiểu đánh danh sách là: A, B, C

”i” : Kiểu đánh danh sách là: i, ii, iii

”I” : Kiểu đánh danh sách là: I, II, III

Start =”giá trị” : Xác định giá trị khởi đầu cho danh sách

Ví dụ: Tạo danh sách theo mấu sau:

Danh sach học sinh lớp chuyên viên

<OL type =”A” start = 6>

<Li> Trần Kim Hoa

<Li> Văn Khánh Linh

<Li> Phạm Thanh Hải

</OL>

Lưu ý:

- Có thể tạo danh sách nhiều cấp bằng cách sử dụng các thẻ <UL> và <OL> lồng nhau:

Ví dụ: Tạo danh sách theo mẫu sau:

<html>

<Font size=5>Muc luc</font>

<OL type ="I">

<li> <font size= 4>Ly thuyet</font>

<ol>

<Li>Khai niem co ban

<Li>Cac thu tuc va ham can ban

<Li>Hang va bien

<Li>Cau truc dieu khien va lap

<ol type ="a">

<Li>Cau lenh re nhanh IF

<Li>Cau lenh Case

<Li>Cau lenh While </ol>

<Li>Tom tat noi dung

</ol>

<li> <font size= 4>Bai tap thuc hanh</font>

<li> <font size= 4>Loi giai…</font>

</OL>

</body>

</html>

3 Các thẻ định dạng ký tự

a.Định dạng Kiểu dáng - Style

<B> Nội dungvăn bản </B>: Nội dung văn bản được in đậm

<Strong> </.Strong>: Nội dung văn bản được in đậm

<I> Nội dung văn bản </I>: Nội dung văn bản được in nghiêng

<U> Nội dung văn bản </U>: Nội dung văn bản được gạch dưới (chân)

<S> Nội dung văn bản </S>: Nội dung văn bản được gạch ngang

b Thay đổi Font, Size

<FONT FACE=“FontName1, FontName2…”> Nội dung văn bản </FONT>

Xác định Font cho Nội dung văn bản, Nếu máy truy cập không có FontName1 sẽ lấy FontName2 sẽ lấy Font mặc định của trình duyệt.

<BASEFONT SIZE=“n”>

Xác định cỡ chữ cho cả tài liệu giá trị n: Từ 1 đến 7 (8,10,12,14,16,24,36) mặc định là 3.

<FONT SIZE=“n”> Nội dung văn bản </FONT>

Xác định cỡ chữ cho nội dung văn bản

VD: Tạo tập tin với nội dung như sau

<HTML> <HEAD> <TITLE>BAI THO CO HAI MO</TITLE> </HEAD>

<BODY>

<P><Font size=4><B>CÔ HÁI MƠ</B></Font></P>

<NOBR><I>

Thơ thẩn đường chiều một khách thơ<BR>

Say nhìn xa rặng núi xanh lơ </I><BR>

<B><i>

Khí trời lặng lẽ và trong trẻo<BR>

Thấp thoáng rừng mơ, cô hái mơ</B></I>

</NOBR>

</BODY>

c Tạo chỉ số Trên/Dưới

<SUP> Văn bản </SUP> : Tạo chỉ số trên cho văn bản

<SUB> Văn bản </SUB> : Tạo chỉ số dưới cho văn bản

a.Xác lập màu chung cho trang Web

Dùng các thuộc tính của thẻ BODY để xác lập: màu nền, màu văn bản, màu các văn bản liên kết

<BODY BgColor=“Màu” Text=“Màu” Link=“Màu” VLink=“Màu” Alink=“Màu”> Nội dung trang Web .</BODY>

BgColor: Màu nền trang

Text: Màu văn bản

Link: Màu liên kết chưa truy cập

VLink: Màu liên kết đã truy cập

Alink: Màu liên kết khi đang trỏ Mouse

b Xác lập màu cho văn bản

Dùng thuộc tính Color của thẻ FONT để xác lập màu: cho nội dung văn bản chỉ định.

<FONT COLOR =“Trịmàu”> Nội dung văn bản </FONT>

VD: <FONT FACE=“Tahoma” COLOR=“Red” SIZE=3> Công nghệ thông tin </FONT>

Các mã màu

<IMG src="địa chỉ" Alt= “Câu chú thích”>

- Src ="địa chỉ" : Chỉ ra nơi chứa ảnh cần chèn vào trang Web

- Alt ="Câu chú thích": Cho phép tạo dòng chữ, khi di chuyển chuột lên ảnh được chèn, dòng chữ text đó sẽ xuất hiện.

- Border =n: Chỉ định đường viền cho ảnh

- Height =n: Chỉ định độ cao cho ảnh

- Width =n : Chỉ định độ rộng cho ảnh

- Ailgn = căn lề: Lề cho ảnh hay văn bản bao quanh ảnh(Top, middle, Bottom left, right)

- Hspace =n: Chỉ định khoảng cách từ ảnh đến văn bản bao quanh nó theo chiều dọc.

- Vspace =n: Chỉ định khoảng cách từ ảnh đến văn bản bao quanh nó theo chiều ngang.

* Đặt ảnh nền cho trang web

Sử dụng thẻ <body Background=‘Image Path’>

b Chèn âm thanh

<Bgsound src ="điạ chỉ" loop =n>

Thuộc tính của tag <bgsound>

- SRC : Đường dẫn đến file âm thanh

- Loop : Số lần lặp (bằng -1 : Lặp vô hạn)

<bgsound> Thường đặt trong tag <head> của trang web.

Ví dụ: <BGSOUND src=‘batman.mid’ LOOP=‘1’>

6 Các thẻ định dạng bảng biểu

a Tạo đường viền.

<TABLE BORDER=n BORDERCOLOR=“Trị màu”> </TABLE>

Sử dùng thuộc tính Border trong thẻ Table, n tính bằng Pixel, mặc định là 2.

b Tạo đường viền có bóng.

<TABLE Border=n BorderColorDark=“Trị màu” BorderColorLight=“Trị màu”> </TABLE>

BorderColorDark: Màu đậm & BorderColorLight: Màu sáng.

b Thiết lập độ rộng và canh lề bảng

<TABLE Widht=n Alight= “Center” / ”Left”/ ”Right” > </TABLE>

n: Độ rộng cố định tính bằng pixel Hoặc độ rộng tương đối % kích thước cửa sổ Center: Canh giữa cửa sổ trình duyệt, Văn bản không cuộn bao quanh.

Left: Canh trái cửa sổ trình duyệt, Văn bản sẽ cuộn bao quanh bên phải bảng.

Right: Canh phải cửa sổ trình duyệt, văn bản sẽ cuộn quanh bên trái bảng.

c Xác lập màu, ảnh nền cho bảng, hàng, ô.

Dùng thuộc tính Bgcolor và Background trong các thẻ tương ứng

<Table Bgcolor=“Trị màu”> Màu nền cho toàn bảng

<Table Background=“Image.gif”> Ảnh nền cho tòan bảng

<TR Bgcolor=“Trị màu”> Màu nền cho tóan hàng

<TR Background=“Image.gif”> Ảnh nền cho tòan hàng

<TD Bgcolor=“Trị màu”> Màu nền cho ô

<TD Background=“Image.gif”> Ảnh nền cho ô

<TH Bgcolor=“Trị màu”> Màu nền cho ô tiêu đề

<TH Background=“Image.gif”> Ảnh nền cho ô tiêu đề

d Định dạng ô.

- Canh lề nội dung trong ô :

Dùng thuộc tính Align cho các thẻ tương ứng

<TD Align=“Hướng”> Canh theo chiều ngang ô các hướng: Left, Right, Center

<TD VAlign=“Hướng”> Canh theo chiều dọc ô các hướng: Top, Bottom, Middle

<TH Align=“Hướng”> Canh hàng tiêu đề theo chiều ngang

<TH VAlign=“Hướng”> Canh hàng tiêu đề theo chiều dọc

<TR Align=“Hướng”> Canh theo chiều ngang các ô trong hàng

<TR VAlign=“Hướng”> Canh theo chiều dọc các ô trong hàng

- Khoảng cách trong ô và giữa các ô

CellSpacing=“n” Khoảng cách giữa các ô

CellPadding=“n” Khỏang cách quanh nội dung ô Pixel mặc định là 2 Pixcel.

- Thiết kế bảng trôn ô:

Dùng thuộc tính RowSpan và ColSpan cho thẻ TD TH để tạo ô có nhiều hàng/cột.

<TD RowSpan=“n”> Tạo ô có độ cao n hàng

<TD ColSpan=“n”> Tạo ô có độ rộng n cột

<TH RowSpan=“n”> Tạo ô tiêu đề có độ cao n hàng

<TH ColSpan=“n”> Tạo ô tiêu đề có độ rộng n cột

VD: Tạo tập tin HTM với nội dung như sau

<HTML>

<BODY>

<TABLE Border=1 BorderColor= "Purple" CellSpacing=0 Width=650>

<Caption><H2> KẾT QUẢ HỌC TẬP</Caption>

<TR VAlign=Middle Align=Center BgColor="Lime">

<TH RowSpan=2 Width=150>Họ V tn<BR>Học Sinh</TH> <TH ColSpan=2 Width=150> Năm Sinh</TH>

</TR>

</TABLE></BODY>

</HTML>

CHƯƠNG III - THIẾT KẾ WEB VỚI DREAMWEARER

I MỞ ĐẦU

1 Giới thiệu

Adobe Dreamweaver là sự lựa chọn hàng đầu của hầu hết nhà phát triển Web hiện nay, xét về cả tính năng thiết kế trực quan lẫn hỗ trợ trong chỉnh sửa code Dreamwaver cho phép người sử dụng thao tác, làm việc với rất nhiều giải pháp công nghệ tiên tiến Dreamweaver giúp rút ngắn thời gian phát triển web site và cung cấp nhiều công cụ để quản lý và bảo trì site.

2 Những cải tiến của Dreamweaver 8

- Tích hợp RSS: với Dreamweaver 8 chúng ta có thể tích hợp các nguồn RSS từ các trang khác bằng

cách thiết lập nguồn và thực hiện thao tác kéo-thả những field ta muốn xuất hiện bằng cách này, chúng

ta có thể thêm dữ liệu XML vào trang một cách dễ dàng.

- Tăng cường hỗ trợ CSS: trong phiên bản này tính tương thích và khả năng xử lý CSS style được

cải tiến Các CSS style đã được xây dựng lại giúp truy cập nhanh hơn đến style của trang Chương trình cũng thiết kế một lưới mới giúp người sử dụng chỉnh sửa mọi thuộc tính của style dễ dàng hơn Thêm vào đó, Dreamweaver 8 có thêm một thanh công cụ cho phép thiết lập các style khác nhau tùy theo phương tiện mà trang web đang được xem (screen, printerm webTV, PDA )

- Truyền file: với Dreamweaver 8 ta có thể tiếp tục làm việc trong khi chương trình upload những tập

tin được chỉnh sửa lên server Khả năng đồng bộ được cải thiện cho phép người sử dụng kiểm soát những file có thay đổi và khóa/mở khóa tập tin nhằm tránh việc ghi đè ngoài ý muốn.

- Giao diện được cải tiến: Người dùng có thể sử dụng tính năng Zoom trong Design View để làm

việc dễ dàng hơn, nhất là khi làm việc với các bảng lồn nhau Các thanh thước được cải tiến giúp đo các thành phần trên trang web từ từng pixel một

- Thanh công cụ mới: Dreamweaver 8 có thêm một thanh công cụ mới, chúng ta sẽ tìm thấy thanh

công cụ này ở bên trái màn hình trong Code View Thanh công cụ này cung cấp nhiều tính năng mới để quản lý code dễ dàng hơn Người dùng có thể thêm chú thích chỉ với một cú click chuột!

- Khả năng tương thích: Dreamweaver tương thích với các phiên bản PHP mới nhất, Coldfusion 8 7

và Video Flash.

3 Không gian làm việc (Workspace)

Để bắt đầu sử dụng Dreamweaver, chúng ta phải làm quen với giao diện và những thiết lập ban đầu cho không gian làm việc của mình Lưu ý là phiên bản trên Windows có khác biệt với phiên bản chạy trên Mac OS Giáo trình này chủ yếu nói về phiên bản chạy trên Windows.

Nếu đây là lần đầu tiên khởi động Dreamweaver 8, hệ thống sẽ hiện hộp thoại cho phép chúng ta

một trong hai loại workspace: Designer và Coder Designer workspace tích hợp tất cả những cửa số và panel vào trong một môi trường được tối ưu hóa cho việc thiết kế web trực quan Coder workspace được

thiết kế hướng đến các lập trình viên, những người thường làm việc chủ yếu với HTML và các ngôn ngữ lập trình Web khác Dù cho chúng ta làm việc ở workspace nào thì chúng ta vẫn có thể truy cập đến tất

cả chức năng của Dreamweaver.

Chúng ta có thể chuyển qua lại giữa Designer workspace và Coder workspace vào bất kỳ lúc nào bằng cách vào trình đơn Window > Workspace Layout và chọn workspace thích hợp.

Khi mở Dreamweaver 8, chúng ta sẽ thấy Start page có những tùy chọn sau:

• Liên kết tới những tập tin được mở gần nhất

• Tùy chọn để tạo tập tin mới Có rất nhiều dạng file để người dùng chọn.

• Tùy chọn để tạo site mới theo mẫu có sẵn

• Những tài nguyên của chương trình, trong đó có Dreamweaver tour và một tutorial.

• Liên kết đến dịch vụ Dreamweaver Exchange có những tài nguyên người dùng có thể sử dụng để thêm tính năng vào Dreamweaver.

II GIAO DIỆN CỦA DREAMWEAVER

1 Màn hình ban đầu

Khi khởi động Dreamweaver một màn hình tương tự như dưới đây sẽ hiện ra, chúng ta sẽ cùng tìm hiểu qua những thành phần của màn hình này.

3 Panels và Inspectors

Dreamweaver còn sử dụng các “floating window” tương tự như các toolbar Các cửa sổ này được

gọi là panel hoặc inspector Điểm khác biệt giữa panel và inspector là, nhìn chung, hình dạng và những

tùy chọn của inspector thay đổi tùy theo đối tượng được chọn

Chúng ta có thể cho phép hiển thị hoặc không hiển thị các panel và inspector thông qua trình đơn Window trên thanh menu Dưới đây là các panel và inspector quan trọng nhất

Properties inspector

Properties inspector hiển thị và cho phép chúng ta chỉnh sửa thuộc tính của đối tượng đang được chọn Chẳng hạn, khi chọn văn bản, properties inspector sẽ hiển thị loại font, canh lề, tình trạng đậm, nghiêng của văn bản, …

Khi ấn vào nút chúng ta có thể thiết lập thêm một số thuộc tính khác của đối tượng Nút này nằm ở góc dưới bên phải properties inspector.

Chắc chắn đây sẽ là công cụ chúng ta sử dụng nhiều nhất trong Dreamweaver.

Insert toolbar (hay còn gọi là panel of objects)

Insert toolbar cho phép thêm các đối tượng vào trang web mà không phải qua hệ thống menu Các đối tượng được phân nhóm theo chức năng: table, text, form,

Chúng ta có thể điều chỉnh để các biểu tượng trên panel này hiển thị dưới dạng nút nhấn (như trong hình trên), dưới dạng tên, hoặc hiện đồng thời cả nút nhấn và tên.

4 Các dạng xem trang web

c Design View

Chế độ Design view cho phép người dùng chỉnh sửa thiết kế của trang web thông qua giao diện trực quan Đây là dạng view mặc nhiên của Dreamweaver và là dạng view được sử dụng nhiều nhất.

5 Phần hướng dẫn

Trên menu Help chúng ta có thể:

- Hiển thị cửa sổ Help Chúng ta có thể chọn mục Using Dreamweaver hoặc nhấn F1.

- Mở các tutorials (Getting Started và Tutorials).

- Mở Reference panel để tham khảo về cú phám và ý nghĩa của các tag HTML

- Chuyển đến Dreamweaver Support Center trên trang web của Macromedia

- Chuyển đến Macromedia Online Forums.

6 Thuộc tính của trang web

Tất cả trang trong cùng một site nên có cùng định dạng, chẳng hạn như màu nền chung, font chữ chung Chúng ta có thể chỉ định định dạng của từng trang bằng cách sử dụng Page properties

Có ba cách để mở cửa sổ trên như sau:

- Ấn tổ hợp phím Ctrl+J.

- Click menu Modify và chọn mục Page Properties.

- Right-click vào phần cuối trang Chọn Page Properties trong menu ngữ cảnh hiện ra Một hộp thoại như sau sẽ xuất hiện:

Trong Appearance category có những thuộc tính sau:

- Background image: cho phép chỉ định hình nền cho trang Hình này sẽ đươc lặp lại

- Background color: cho phép chỉ định màu nền cho trang, nhưng lưu ý là chúng ta chỉ thấy

màu nền khi không có hình nền Về nguyên tắc thì hình nền che phủ màu nền

- Size: xác định font size

- Text color: xác định font color.

- Margins: thiết lập lề của văn bản web Lưu ý là lề không xuất hiện trong cửa sổ tài liệu của

Dreamweaver, chúng chỉ xuất hiện trên trình duyệt.

Trong Title/Codification category có những thuộc tính sau:

- Title: đây là tiêu đề của trang web Tiêu đề này sẽ được hiển thị trên thanh tiêu đề của trình

duyêt và trên của sổ tài liệu của Dreamweaver.

- Encoding: cách thức trang web được mã hóa Với các trang unicode tiếng Việt nên chọn mục

Unicode (UTF-8)

Trong category Links chúng ta có các thuộc tính sau:

- Link color: màu của siêu liên kết.

- Visited links: màu của siêu liên kết đã được nhấn vào.

- Active links: màu của siêu liên kết đang được chọn.

- Underline style: theo mặc nhiên thì đoạn text có siêu liên kết sẽ được gạch dưới Tùy chọn

này cho phép chỉ định cách thức gạch dưới, hoặc đơn giản là không có gạch dưới

Trong Tracing image category có các thuộc tính sau:

- Tracing image: thiết lập hình ảnh làm nền của trang web Tuy nhiên hình ảnh này chỉ xuất hiện trong cửa sổ soạn thảo của Dreamweaver và không xuất hiện trên web browser

- Transparency: thiết lập độ trong suốt của hình ảnh được chọn làm Tracing image.

7 Bảng màu (color palette)

Để chỉ định màu ta phải sử dụng một bảng màu như ở hình

bên cạnh Khi chọn một màu, giá trị hexadecimal của màu đó

được hiển thị ở phía trên bảng màu

Bảng màu của Dreamweaver sử dụng palette 256 màu cho web.

Người dùng có thể chỉ định màu bằng nút

Những nút này xuất hiện ở properties inspector của rất

nhiều đối tượng, cũng như trong rất nhiều cửa sổ chỉ định thuộc

tính (text properties, bottom hoặc tables), tương tự như cửa sổ Page properties mà chúng ta đã thấy ở phía trên phần này.

Có thể chọn màu bằng hai cách Cách đầu tiên là click vào hộp màu xám , để hiển thị Color palette Cách thứ hai là gõ trực tiếp giá trị hexadecimal vào ô chỉ định màu.

III LÀM VIỆC VỚI TEXT

Trong phần này chúng ta sẽ học cách điều chỉnh thuộc tính của văn bản cũng như tạo ra các CSS style, cho phép áp dụng style cho văn bản.

b Font:

Cho phép người thiết kế web chọn một tập hợp font Lưu ý đây là tập hợp fonts thay vì chỉ một font, vì nếu chúng ta chỉ thiết lập một font duy nhất, có khả năng người duyệt web không có font đó trên máy tính của họ.

Nếu người dùng không có font này thì văn bản sẽ được áp dụng một font khác trong tập hợp font ta đã chọn từ trước Chẳng

hạn, nếu chúng ta chọn Arial, Helvetia,Sans-serif, chúng ta sẽ thấy

trang web bằng font Arial, nhưng nếu trên máy tính của chúng ta không có font Arial, chúng ta sẽ thấy văn bản được hiển thị bằng font Helvetia, và tương tự như vậy cho những font còn lại

2 Tạo danh sách (List)

Văn bản trên trang web có thể được hiển thị dưới dạng danh sách Có thể là danh sách được đánh

số thứ tự hoặc danh sách được đánh dấu đầu dòng (bullet list).

Để tạo danh sách từ những dòng văn bản đã được nhập vào cửa sổ soạn thảo, trước hết ta chọn những dòng dó, sau đó click sau đó click vào tùy chọn trên Properties inspector, hoặc trên Text menu.

Bullet list (không có thứ tự) được chọn bằng nút , trong khi danh sách được đánh số (có thứ tự) được chọn bằng nút

Để tạo danh sách lồng trong một danh sách khác, như trong ví dụ trên đây, ta cần phải thêm text indent cho những thành phần của danh sách chúng ta muốn tạo thành danh sách ở mức con.

Trên menu Text > List > Properties, chúng ta có thể truy cập vào thuộc tính của một danh sách đang được chọn Lưu ý là ta pải chọn danh sách từ trước hoặc để con trỏ nằm trong danh sách để kích hoạt mục chọn này.

Trong cửa sổ List properties, chúng ta có thể chỉ định loại danh sách, loại number hoặc bullet được

sử dụng (trong Style field), và trong trường hợp là ordered list, chúng ta có thể chỉ định bắt đầu đánh số

từ số nào.

3 CSS Styles

Trên menu Text, chọn mục Style, chúng ta sẽ có một tập hợp style được định nghĩa trước có thể áp

dụng vào khối văn bản đang được chọn Chúng ta có thể định nghĩa một tập hợp style khác Những style mới này, được gọi là CSS Style, được dùng để kết hợp các giá trị thuộc tính thành một khối Sau đó ta không cần phải thiết lập từng thuộc tính cho một đoạn văn bản khác nữa Ta chỉ cần áp dụng style vừa định nghĩa cho đoạn văn bản đó mà thôi.

Nhiều tùy chọn ở đây có thể được sử dụng để định nghĩa thuộc tính của hình ảnh, hoặc những tính chất khác mà các tag HTML không hỗ trợ.

Một trong những lợi thế lớn của CSS style là chúng có khả năng cập nhật rất đơn giản; khi ta sửa chữa một CSS style, định dạng trên tất cả trang web có sử dụng style đó cũng được tự động cập nhật Một bất lợi của style sheet là một số trình duyệt không hỗ trợ CSS Vì đây đều là những phiên bản trình duyệt cũ nên điều này hiếm khi xảy ra

Những thuộc tính áp dụng cho text được tự động tạo thành các CSS style, khai báo trong phần header của văn bản HTML.

Để tạo một CSS Style:

1 Trên trang web , chọn khối văn bản ta muốn chỉ định định dạng

2 Trong Properties inspector, sửa các thuộc tính định dạng văn bản, thiết lập các thuộc tính về font,

về định dạng đoạn mà ta thấy là phù hợp.

Dreamweaver sẽ tự động tạo một style mới với tên là Style1 hoặc Style2 hoặc Style3, tùy thuộc

vào những tên style sẵn có.

Trong hình sau, style này sẽ xuất hiện với tên là Style1 trong hộp Style của properties panel

Chúng ta nên đổi tên của style, thường thì style nên có tên gợi nhớ đến đối tượng được áp dụng style đó Để làm điều này, click chuột vào mũi tên trên

combo box style list và chọn mục Change name Một hộp thoại sẽ hiện ra cho phép người dùng nhập

vào tên mới của style.

Lưu ý là tên của style không có khoảng trắng trong trường hợp này, tên style được đặt là redstyle

Click OK, chúng ta sẽ thấy một panel có tên Results Close panel đó lại

Mỗi style mới được tạo ra đều được thêm vào style list, và chúng ta có thể truy cập chúng nhanh chóng thông qua menu Text > CSS Styles.

Trong CSS panel chúng ta có thể thấy rằng style mới đã được tự động thêm vào.

HTML code của trang web sẽ tương tự như sau:

Tiếp theo, trong Properties Inspector, chọn style vừa được tạo ra trong danh sách xuất hiện khi click chuột vào ô Style.

IV SIÊU LIÊN KẾT

1 Giới thiệu

Một siêu liên kết, hay còn gọi là hyperlink, là một kết nối giúp chuyển người dùng đến một trang web khác hoặc một tập tin khác khi click lên nó.

Chúng ta có thể chỉ định link cho text, cho image, hoặc một phần của image

2 Tạo siêu liên kết

Cách dễ nhất để tạo siêu liên kết là dùng properties inspector Để làm điều này,tiến hành chọn the

text hoặc đối tượng sẽ được dùng làm đối tượng chứa link, sau đó thiết lập thông số Link trong inspector.

Chẳng hạn ta cần link tới trang www.teacherclick.com, vì đây là tham chiếu tuyệt đối nên đường link bắt buộc phải bắt đầu bằng HTTP://

Chúng ta cũng có thể tạo siêu liên kết “rỗng” – tức là không liên kết đến đâu cả Dạng liên kết này

có thể hữu ích khi sử dụng behaviors Để tạo liên kết rỗng, chỉ cần gõ ký tự # vào mục Link.

Một cách khác để tạo siêu liên kết là vào menu Insert > Hyperlink.

Dưới đây là ý nghĩa của các mục trên hộp thoại này:

- Text: văn bản chứa link

- Link: địa chỉ của trang web/file muốn liên kết đến

- Target: chỉ định muốn mở link ở đâu.

- Title: công dụng tương tự thuộc tính Alt của hình ảnh Đóng vai trò trợ giúp ngữ cảnh cho người sử dụng

- Access key: thiết lập phím tắt cho liên kết Liên kết được xem là nhấn vào khi người dùng ấn

tổ hợp phím Alt + phím do ta chỉ định trong field này

- Tab index : vì chúng ta có thể chuyển từ link này sang link kia bằng phím Tab, Tab index lưu trữ thứ tự của các link trong trang web

3 Link Target

Thông số target chỉ định liên kết sẽ được mở ở cửa sổ nào Thông số này có giá trị gì phụ thuộc

vào việc trang web hiện hành đang sử dụng mẫu frame như thế nào

Thông số target thường nhận một trong các giá trị sau.

- _blank: mở liên kết trong một cửa sổ trình duyệt mới.

- _parent: mở liên kết trong cửa sổ chứa liên kết đó hoặc tập hợp frame ở mức cha của frame hiện tại.

- _self: Đây là lựa chọn mặc nhiên Liên kết được mở trong cùng cửa sổ hoặc frame hiện tại.

- _top: mở liên kết trong toàn bộ cửa sổ trình duyệt.

4 Định dạng link

Thông thường, phần text của một link được gạch dưới Bên cạnh đó, nó còn có thể được hiển thị bằng ba màu khác nhau, những màu này có thể được chỉ định trong Page properties Ba màu này được thiết lập cho ba trạng thái của link : link chưa được nhấn vào, link được chọn và link đã được nhấn vào Khi link được định nghĩa trên một hình ảnh, chúng ta có thể thấy một đường khung có nét đứt xung quanh hình khi click lên nó Khi link được định nghĩa trên một khu vực của hình ảnh (image map), chúng

ta có thể nhìn thấy khu vực khi ở chế độ design view của Dreamweaver.

Ô Border cho phép chúng ta thêm khung vào hình ảnh, điều này không phụ thuộc vào việc hình

ảnh đó có chứa link hay không.

Nếu ta chọn giá trị 0, sẽ không có khung, vì việc gán giá trị đó đồng nghĩa với việc độ rộng của đường kẻ tạo nên khung của hình cũng bằng 0

Nếu trên một đoạn text hoặc trên hình ảnh có link, con trỏ chuột sẽ thay đổi hình dạng khi được đặt trên link Mặc định, hình ảnh này là hình bản tay (pointing hand)

5 Liên kết đến địa chỉ e-mail

Chúng ta có thể liên kết đến địa chỉ e-mail Khi nhấn vào liên kết dạng này, trên máy tính của người dùng web sẽ mở cửa sổ để họ soạn thư điệ tử và gửi đến địa chi do siêu liên kết cung cấp.

Cú pháp của siêu liên kết sẽ là như sau: mailto:e-mailaddress.

Thông số này có thể được chỉ định trong mục link của Link properties inspector, hoặc thông qua

menu Insert > Email link

Trường hợp sử dụng menu, không thể tạo liên kết email cho một hinh ảnh Hộp thoại của Dreaweaver chỉ cho phép gõ text sẽ chứa liên kết vào mà thôi.

V SỬ DỤNG HÌNH ẢNH TRÊN TRANG WEB

Chúng ta sẽ tìm hiểu cách thêm hình ảnh vào trang web Chúng ta cũng sẽ tìm hiểu cách tạo một số dạng hình ảnh đặc biệt, chẳng hạn Rollover và nút nhấn bằng flash, những đối tượng giúp tăng tính trực quan của trang web

1 Chèn hình vào trang web

Vào menu Insert > Image Xuất hiện một cửa sổ cho phép chọn hình muốn chèn vào trang:

File có định dạng BMP sẽ không xuất hiện trong cửa sổ này trừ khi chúng ta chọn All files trong

mục Type of files.

Trong mục Relative to chúng ta có thể chỉ định hình ảnh sẽ liên hệ với trang web hay với thư mục gốc của site Nên chọn tùy chọn này là Document vì nếu chúng ta di chuyển site đến một vị trí khác, có

khả năng chúng ta sẽ không thấy được hình trên trang.

Đường dẫn đến hình sẽ nằm ở mục URL của cửa sổ, và sau khi chèn vào trang, đường dẫn này sẽ nằm ở mục SRC của properties inspector.

Cách thức đường dẫn này sẽ được chèn vào như thế nào phụ thuộc vào việc chúng ta chọn cho hình ảnh có liên hệ với root folder hay với document

Ví dụ, chúng ta cùng tưởng tượng thư mục images và trang web ta muốn chèn hình cùng nằm trong thư mụ gốc của site Một file hình ảnh có tên abc.jpg nằm trong folder images.

Trường hợp mục Relative to có giá trị là Document, đường dẫn sẽ là:

Đây cũng là biểu tượng xuất hiện trong Dreamweaver khi một hình đã được chèn vào không tồn tại theo đường dẫn chỉ định khi chèn hình Điều này có thể xảy ra khi chúng ta sửa tên của file hình, hoặc chuyển nó đến một thư mục khác Trường hợp này, hình ảnh chúng ta nhìn thấy trên browser sẽ như sau:

Đó là một hình chữ nhật với chữ X màu đỏ, cạnh dấu này sẽ là tên của tập tin hình hoặc giá trị của

thuộc tính Alt mà chúng ta đã gán cho hình trong properties inspector.

Có hai cách thay đổi kích cỡ hình ảnh:

Cách đầu tiên là chọn hình và dùng chuột kéo một trong các hình vuông màu đen bao quanh hình.

Cách thứ hai là dùng properties inspector, chúng ta thực hiện chỉnh sửa các thông số W hoặc H Những field này sẽ xuất hiện trên inspector khi một đối tượng image được chọn

3 Chèn Rollover Image

Một rollover là một hình được thay bằng một hình khác khi có chuột trỏ lên Dạng hình này thường được sử dụng trên menu hay nút nhấn

Cách thực hiện như sau: vào menu Insert > Image objects > Rollover Image Trong cửa sổ hiện ra, chỉ định hình nguyên gốc và hình sẽ thay thế cho hình nguyên thủy này

Nên kích hoạt tùy chọn Preload rollover image Nếu chúng ta có chọn mục này, hình rollover sẽ

được tải xuống ngay khi trình duyệt tải trang web về, nhờ thế chúng ta tránh được khoảng thời gian chờ download hình khi con trỏ chuột đi qua hình gốc.

4 Chèn Flash Button

Có một cách khác để tạo hiệu ứng tương tự như rollover Đó là Flash button.

Để chèn một flash button vào trang web, ta vào menu Insert > Media > Flash Button, sẽ có hộp thoại sau:

Trong mục Style chúng ta có thể chọn dạng nút nhấn phù hợp

Trong cửa sổ này chúng ta thiết lập các thuộc tính sau: văn bản hiển thị trên nút nhấn (Button text:), tên của file Flash sẽ được lưu (Save as:) và thông số về liên kết (Link: và Target:).

Lưu ý là nút nhấn sẽ được lưu dưới dạng file Flash (có phần kiểu là SWF+

Trong Properties inspector của flash button, chúng ta có thể thay đổi thuộc tính của nút nhấn:

Hộp thoại Insert Flash Button có thể được mở lại bằng cách click vào nút Edit, và với nút Play

chúng ta có thể xem trước các trạng thái của nút ngay trong Dreamweaver mà không cần phải mở trang trên trình duyệt.

Sau khi kiểm tra xong flash button, chúng ta cần click một lần nữa vào nút Play (vào thời điểm này

đã được chuyển thành nút Stop)

5 Flash text

Flash text giống như rollover, nhưng thay vì thay đổi hình ảnh, nó đổi màu của chữ

Để thêm flash text vào trang web, vào menu Insert > Media > Flash Text.

Trong cửa sổ hiện ra, thiết lập text, link, và tên của đối tượng text cũng như chỉ định màu nguyên thủy và màu rollover.

Properties inspector của flash text giống như của flash button.

6 Navigation bar

Một navigation bar là mọt tập hợp hình ảnh sẽ được sử dụng giống như một menu để duyệt qua WebSite Một web page chỉ được chứa một navigation bar.

Để chèn một browser bar, vào menu Insert > Image Objects > Navigation Bar.

Trong cửa sổ tiếp theo chúng ta có thể chỉ định bốn hình ảnh khác nhau cho bốn trạng thái của mỗi nút nhấn cũng như chỉ định liên kết của chúng.

Sử dụng các nút ở phía trên cửa sổ để tạo hoặc xóa nút nhấn trên navigation bar.

Với nút ta có thể tạo nút mới, với nút ta có thể xóa nút đang được chọn, và hai nút và

có chức năng thay đổi vị trí cuarnuts đang được chọn

Điều đặc biệt ở đây là có đến bốn trạng thái của nút, một điều chúng ta không thể thực hiện được với một rollover.

Trong mục Insert chúng ta có thể quy định các nút nằm theo chiều đứng hay chiều ngang trên trang.

VI THIẾT LẬP BẢNG BIỂU TRÊN TRANG

Trong phần này chúng ta sẽ tìm hiểu cách thức làm việc với table Chúng ta sẽ tìm hiểu cách chèn table, nối cell, chèn thêm dòng ha cột, và cách thay đổi độ rộng khung.

1 Giới thiệu

Mọi đối tượng trên trang web đều được canh trái theo mạc nhiên Tuy nhiên nhờ vào table chúng ta

có thể bố trí text vào các cột, đặt hình cạnh một khối văn bản, và làm nhiều việc khác mà nếu không có table, chúng ta không thể làm được.

Vào thời điểm hiện nay hầu hết website đều dựa trên table Thực tế này là một tất yếu vì table rất hữu ích trong việc thiết kế web.

Table là tập hợp các ô được phân bố thành các cột và các dòng Dưới đây chúng ta có một ví dụ về

table:

2 Chèn table vào trang

Để chèn table vào trang, vào menu Insert >

Table.

Trong cửa sổ hiện ra, chúng ta phả chỉ định

số hàng (Rows), số cột (Columns) và độ rộng

của table (Table width).

Tham số Table width có thể được chỉ định

theo Pixel hoặc theo phần trăm (Percent) Độ

rộng theo Pixel là độ rộng tuyệt đối, không phụ

thuộc vào kích thước của cửa sổ trình duyệt.

Trong khí đó độ rộng theo Percent xác định số

phần trăm của độ rộng của cửa sổ trình duyệt sẽ bị chiếm bởi table và do đó it sẽ được điều chỉnh phụ thuộc vào độ rộng của cửa sổ trình duyệt

Border thickness chỉ định độ dày của khung table theo đơn vị pixel Giá trị 1 được gán mặc định Cell Padding chỉ định khoảng cách giữa nội dung trong ô với lề của ô.

Cell Spacing chỉ định khoảng cách giữa các ô với nhau

Chúng ta cũng có thể thiết lập heading của table Trường hợp người lướt web là người dùng khiếm thị, chương trình đọc màn hình sẽ phát âm heading của table và định hướng cho họ về nội dung của table.

Tùy chọn Caption xác lập tiêu đề của table Tiêu đề sẽ được hiển thị bên ngoài table

Trong mục Align caption chúng ta chỉ định trạng thái canh lề caption so với table

3 Chọn các đối tượng trong bảng.

a Chọn table:

Có nhiều cách để chọn cả table Một trong những cách đó là vào menu Modify sau khi đặt con trỏ

trong table, cách thứ hai là ấn phải chuột trên table Trong cả hai trường hợp, chúng ta sẽ thấy tùy chọn

Table, trong tùy chọn này ta chọn mục Select table.

Chúng ta cũng có thể chọn table bằng cách click vào khung của table, hoặc click vào nhãn <table> trên thanh trạng thái.

Khi ta chọn table hoặc khi ta đặt con trỏ trong nó, Dreamweaver sẽ hiển thị độ rộng của table và

của các cột trong một khu vực màu xanh Cùng với độ rộng là các panel kéo xuống Những menu này

cho phép chúng ta truy cập nhanh đến những lệnh chuyên dùng cho table

Nếu đặt con trỏ trong bảng nhưng không nhìn thấy vùng màu xanh này, chúng ta có thể kích hoạt tính

năng này bằng cách chọn Table widths trong mục chọn Table của menu phím phải trên table, hoặc bằng

cách vào menu View > Visual aids > Table widths Thao tác thôi kích hoạt được thực hiện tương tự Nếu chúng ta vẫn không thấy được độ rộng của table hay của cột, điều đó có nghĩa là table hoặc cột chưa được chỉ định độ rộng trường hợp độ rộng được thể hiện bằng hai con số, số đầu tiên là con số được chỉ

định trong thuộc tính của table hay cột, còn con số thứ hai là độ rộng thực tế trong design view Chẳng

hạn, trong hình bên đây, cột thứ ba có độ rộng 139 Như vậy cột này có độ rộng 139 pixel, những nếu

trên cột có chứa một hình cần nhiều không gian hơn, cột sẽ được chỉnh lại độ rộng mới là 142 pixel (đây

là độ rộng của cột người ta nhìn thấy trên màn hình).

Chúng ta có thể thay đổi điều này bằng cách chọn Make All Widths Consistent trong menu xổ

xuống từ table heading.

b Chọn cột và chọn dòng

Chúng ta có thể chọn cột và dòng trong bảng theo một trong các cách sau:

• Tùy chọn Select column trong heading menu của cột Cách này chỉ chọn được cột

• Click-and-maintain, kéo chuột đến khi chọn được cả cột hoặc cả dòng

• Dặt con trỏ chuột lên phía trên hoặc bên trái của cột hay dòng muốn chọn Con trỏ chuột sẽ chuyển thành mũi tên màu đen Khi click chuột, chúng ta sẽ chọn nguyên dòng hoặc nguyên cột

• Để chọn một dòng, đặt con trỏ trong dòng đó và click nhãn <tr> trên status bar, (hoặc nhãn <td>

để chọn cột)

c Chọn ô

Để chọn nhiều ô cạnh nhau, nhấn chuột, giữ chuột và kéo để chọn

Để chọn nhiều ô không nằm cạnh nhau, phải giữ phím Ctrl trong khi click chọn các ô

4 Định dạng bảng

Những thuộc tính của bảng được chỉ định trong inspector.

Trong properties inspector chúng ta có thể thay đổi những giá trị đã chỉ ddnhj khi chèn table vào trang Chúng ta cũng có thể chỉ định những thông số khác như Align (chỉ định cah table về bên trái, ở giữa hay ở bên phải), màu nền, hoặc hình nền

Nếu chúng ta chỉ chọn một ô hoặc một tập hợp ô, properties inspector thay đổi để ta có thể chỉ định thêm những màu khác.

Phần trên của properties inspector trong trường hợp này được dùng để chỉ định các thông số của văn bản sẽ được nhập vào ô

Phần dưới được sử dụng để xác định giá trị thuộc tính của mỗi ô chẳng hạn như màu nền, hình nền của ô, màu khung của ô,

Có hai mục chúng ta có thể hay dùng là Horz và Vert, những mục này canh vị trí của nội dung trong ô theo chiều ngang và theo chiều đứng

5 Thay đổi kích cỡ của table và của ô

Như chúng ta đã biết, độ rộng của một table có thể được quy định theo Pixel hoặc theo phần trăm Việc thay đổi kích cỡ của table được thực hiện trên properties inspector thông qua việc thiết lập giá trị của các thuộc tính W (Width) và H (Height) Thông thường chúng ta chỉ chỉ định chiều rộng mà không chỉ định chiều cao

Giá trị W và H của một ô luôn là Pixel Thường thì không cần thiết lập những giá trị này cho ô trừ phi ta muốn cố định kích cỡ của ô và không muốn chúng bị thay đổi theo kích cỡ của cửa sổ trình duyệt Việc thay đổi kích cỡ của table và của cell không chỉ được thực hiện trên properties inspector Chúng ta còn có thể thực hiện bằng cách trỏ chuột vào đường biên của table hoặc ô, click chuột và kéo đến vị trí mình muốn

6 Thêm hoặc xóa dòng và cột

Việc đầu tiên phải làm là đặt con trỏ trong một ô hoặc kéo chuột và chọn nhiều ô, sau đó click phải lên vùng chọn, hoặc mở menu Modify Trong cả hai trường hợp, ta đều sẽ thấy mục chọn Table

Để thêm một dòng hoặc một cột, click mục Insert row hoặc Insert column Dòng mới được thêm

vào sẽ nằm ở phía trên vùng chọn, và cột mới được thêm vào sẽ nằm bên trái vùng chọn

Chúng ta có thể chỉ định cụ thể hơn bằng cách vào mục chọn Insert rows or columns

Để xóa một dòng hoặc cột, đặt con trỏ chuột trên dòng hay cột đó và chọn Delete row hoặc Delete column trên mục Table của menu phím phải hoặc menu Modify.

Chúng ta cũng có thể chọn dòng hoặc cột muốn xóa và ấn phím DEL.

7 Gộp ô và tách ô

Chúng ta có thể chèn table vào bên trong một table khác Điều này được gọi là Nest table.

Dưới đây chúng ta có một ví dụ về việc lồng table trong table Trong ô đầu tiên có một table khác được chèn vào Để lồng table, đặt con trỏ trong ô muốn chèn thêm table, thực hiện chèn table theo cách chúng ta đã biết

Gộp ô là việc nối 2 hay nhiều ô thành một ô duy nhất Việc gộp ô sẽ xóa đường phân cách giữa các

ô với nhau và các ô dược gộp thành một ô duy nhất

Chia ô là việc tách một ô thành nhiều ô

Một trong những cách để gộp ô hay chia ô là dùng properties inspector.

Nếu có nhiều ô được chọn, những ô này có thể được gộp lại bằng nút trên properties inspector

(nút này nằm ở góc dưới bên trái inspector), hoặc bằng cách chọn tùy chọn Merge cells trong mục Table Như chúng ta đã biết, mục Table nằm trên menu ngữ cảnh và trên menu Modify.

Chúng ta chỉ có thể gộp những ô ở cạnh nhau.

Chẳng hạn, tropng bảng dưới đây ô 1 và 4 không thể được gộp với nhau, cũng như các ô 1, 2 và 3 không thể được kết nối thành một ô mới

Để tách một ô, click vào nút trên properties inspector, hoặc click mục Split cell trên submenu Table.

Trong cả hai trường hợp, chúng ta đều sẽ thấy cửa sổ dưới đây Trên cửa sổ này chúng ta chỉ định ô sẽ được tách thành các dòng hay các cột, và số dòng hay số cột sẽ được tạo ra

8 Các chế độ làm việc trên table

Dreamweaver cung cấp cho người sử dụng nhiều chế độ view table Từ đầu đến nay chúng ta đang làm việc ở Standard mode, và chúng ta sẽ tiếp tục làm việc ở chế độ này Tuy nhiên, chúng ta vẫn có thể chuyển sang một chế độ khác bằng cách vào menu View > Table mode và chọn dạng view phù hợp Chúng ta có ba tùy chọn: Standard mode, Expanded Tables mode và Layout mode

Layout mode được sử dụng để thiết kế trang bằng table Sử dụng chế độ view này, table không còn

bị bó buộc vào các dòng text như từ đầu đến nay nữa Table có thể được chèn vào bất kỳ đâu trên trang,

và Dreamweaver sẽ tạo nên những ô trống để table có thể hiể thị được ở nơi chúng ta muốn

Expanded Tables mode tạo thêm không gian tạm thời cho các ô trong table Chế độ này cũng tăng

độ rộng khung của table giúp cho công việc chỉnh sửa dễ dàng hơn Chế độ view này có thể được dùng

để chọn các thành phần trong table hoặc để lấy được vị trí để chèn dữ liệu, nhưng trong chế độ này chúng

ta sẽ không thấy thực tế trang web hiển thị thế nào

có 2 frame Frame bên trái chứa file

menu.htm, và frame bên phải chứa file

dogs.htm.

Để xem được trang, trên cửa sổ trình

duyệt mở trang frames.htm, đây là trang

tổng hợp của hai trang trên

2 Tạo frames

Để tạo frame, trước hết chúng ta mở

một file Đây có thể là file mới hoặc đang

có sẵn

Sau đó, vào menu Insert > HTML >

Frames Tại đây chúng ta có thể chọn dạng

frame phù hợp

Nếu chúng ta click vào mục Left, một

frame sẽ được tạo ở phía bên trái trang web.

Như chúng ta thấy trong hình dưới đây, có một

đường kẻ chia đôi văn bản.

là Main Frame.

Để chọn file chứa tập hợp frame chúng ta click lên đường phân chia frame Khi lưu file, tổ hợp phím Ctrl + S chỉ lưu frame đang được chọn Trường hợp muốn lưu một lần toàn bộ file thì ta phải chọn tùy

chọn File > Save All.

Trong trường hợp chúng ta chèn vào một frame bên phải thay vì frame bên trái như ví dụ trên, frame trống sẽ được hiển thị ở bên phải file ban đầu.

Trong hình bên chúng ta có một ví dụ về right frame

Một frame đã được thêm vào bên phải file hiện

có, menu.htm.

Trong trường hợp trước, chúng ta có ba file:

left, right, và file chung chứa tập hợp frame Trong trường hợp này file ta có ban đầu là frame bên trái,

trong khi trong trường hợp trước file ta có ban đầu là frame bên phải Vì lý do này, trong trường hợp này, Main frame sẽ ở bên trái

Main frame luôn là frame chứa file ban đầu.

3 Chọn frame

Để chọn frame, vào Frames panel thông qua menu Window Nếu tùy chọn Frame không có trong menu này, có thể nó nằm trong mục Others Chúng ta cũng có thể mở Frames panel bằng cách ấn tổ hợp phím Shift+F2

Các frame trong một trang frame sẽ được nhìn thấy trong Frames panel, chúng ta có thể chọn frame bằng cách click lên chúng trong panel Chúng ta có thể chọn frame bằng cách click lên khung bao quanh frame.

Chúng ta có thể chỉ định các thông số của từng frame sau khi chọn chúng

4 Lưu Frames

Mỗi frame đều có một trang web tương ứng với nó Điều này lý giải vì sao khi tạo frame, mặc nhiên một trang mới hoàn toàn được load vào frame đó (ngoại trừ frame chứa trang ban đầu)

Những trang mới này có thể được thay thế bằng những trang sẵn có

Nếu chúng ta lưu trang chứa tập hợp frame, mỗi trang ở trong nó cũng sẽ được lưu.

Không nên dùng tùy chọn Save all trong lần đầu tiên lưu frame, vì chúng ta có thể đặt tên file sai.

Để lưu từng trang, đặt con trỏ trong frame muốn lưu và click nút Save

5 Thiết lập các thông số của Frame

Sau khi chọn frame trong Frames panel, những thuộc tính của nó có thể đươc thiết lập trên properties inspector.

Mỗi frame có một tên name và chúng ta có thể sửa trong mục Frame name Tên không được phép

có khoảng trắng

Src là tên file HTML được hiển thị trong frame

Trong mục Borders người dùng có thể chọn môt đường phân chia frame khỏi những frame còn lại.

Trường hợp có border, màu của đường này có thể chọn trong mục Border color.

Mục Scroll chỉ định các thông số về thanh cuộn Tùy thuộc vào quy định ở mục này mà các

scrolling bar có được hiển thị hay không khi nội dung của frame dài hoặc rộng hơn khung nhìn.

Nếu mục No resize được chọn, người xem trang web sẽ không thể thay đổi kích cỡ frame trên browser Các tham số Margin width và Margin height tạo khoảng cách giữa nội dung của frame với các

khung trên-dưới, phải-trái của nó.

Nếu file tập hợp frame được chọn, Properties inspector sẽ hiển thị như sau:

Trong mục Borders người dùng có thể chọn một đường phân chia frame khỏi những frame còn lại.

Trường hợp có border, màu của đường này có thể chọn trong mục Border color Độ rộng sẽ được chọn tại mục Border width.

Mục Column (hoặc Row) được dùng để thiết lập kích cỡ của frame, và chúng ta có thể nhập giá trị Pixel, Percent (của cửa sổ) hoặc Relative.

Nếu chúng ta dùng hai frame, frame chứa browser bar thường được đặt kích cỡ theo Pixel, và frame còn lại sẽ có độ rộng Relative, để chỉ định cho frame này lấy hết phần còn lại của của sổ trình duyệt

6 Nội dung của frame

Nội dung của frame có thể được thiết lập thông qua field Src trên properties inspector.

Thông qua field Src trên properties inspector, chúng ta chỉ có thể chỉ định file được load vào frame

vào lúc đầu, nhưng dĩ nhiên sau này chúng ta có thể load những file khác vào frame bằng hyperlink.

VIII FORMS

1 Giới thiệu

Form được dùng để nhận dữ liệu từ phía người dùng Những ứng dụng cụ thể nhất của form là làm công cụ để khách hàng đặt hàng trên mạng, tổ chức điều tra, thăm dò ý kiến, nhận câu hỏi, ý kiến của người dùng

Một khi người dùng đã điền dữ liệu vào

form và nhấn vào một nút để chuyển đi, một

chương trình sẽ bắt đầu chạy và nhận dữ liệu được

chuyển đến để có các bước xử lý tiếp theo

Hình bên phải là một ví dụ về form

Một form có thể chứa các nhãn, text field,

drop-down menu, button…

2 Cấu trúc của một form

menu Insert > Form

a Text Field:

Cho phép chèn vào form một text box Text

field chỉ cho phép người dùng nhập một dòng dữ liệu, trong khi Text Area cho phép nhập nhiều dòng.

Chúng ta có thể chuyển Text Field thành Text Area thông qua properties inspector

Chúng ta cũng có thể chỉ định Text field trở thành một Password field, lúc đó những ký tự nhập

vào sẽ bị che đi và hiển thị như dưới đây.

Trong propierties inspector chúng ta có thể chỉ định độ rộng của text box, số dòng hoặc số ký tự tối

đa có thể nhập vào, và giá trị khởi tạo của box

b Button:

Có ba dạng button: Submit (kết thúc nhập liệu và chuyển đi), Reset (trả dữ liệu trên các field về trạng thái mặc định), hoặc None (button dạng này được dùng để gán một behavior khác với hai dạng trên)

Chúng ta có thể thay đổi chữ trên thông qua tùy chọn Label trên properties inspector.

c Check box:

Là một ô vuông nhỏ có thể nhận một trong hai trạng thái: kích hoạt và không kích hoạt:

I want to receive information

Trạng thái ban đầu có thể được thiết lập là Checked hoặc Unchecked.

d Radio button :

Is a little circlular button that can be selected or deselected If there are many in the same form only one can be activated When you activate one, the others are automatically deactivated.

e List/Menu:

Một list hay một menu là một thành phần trên form có chứa danh sách các lựa chọn

Các lựa chọn này được thêm vào bằng nút List Values trên properties inspector

Khi sử dụng menu, chúng ta chỉ có thể sử dụng một trong các giá trị, nhưng khi sử dụng list có thể

lựa chọn nhiều mục cùng một lúc Sử dụng tùy chọn Selections trên properties inspector để điều chỉnh

Để tạo form, vào menu Insert > Form > Form

Một khi đã tạo form, Dreamweaver sẽ thể hiện form đó dưới hình dạng một box với đường kẻ đứt quãng màu đỏ, tương tự như hình dưới đây

Chúng ta có thể chèn các đối tượng vào form bằng cách đặt con trỏ trong form rồi vào menu Insert

> Form và chọn dạng đối tượng tương ứng.

Nên dùng table để sắp xếp các thành phần trên form.

4 Form validation

Form validation được sử dụng để bảo đảm dữ liệu trên form là hợp lệ trước khi chuyển đi

Để thiết lập form validation, chúng ta phải mở Behaviors

panel Chúng ta có thể vào menu Window > Behaviors, hoặc

nhấn Shift+F4

Trên panel này, click nút Trong menu do nút này tạo

ra, trên mục Show events for, chọn phiên bản trình duyệt phù

hợp Chẳng hạn chúng ta chọn IE 6.0.

Sau đó, chúng ta lại click , và chọn Valid form.

Lưu ý là trước khi làm bước này ta phải chọn form.

Một cửa sổ như dưới đây sẽ hiện ra, chúng ta sẽ thấy liệt kê các đối tượng trên form

Hãy chọn từng thành phần trên form và chỉ định yêu cầu tương ứng

Chúng ta có thể quy định việc nhập dữ liệu trên field là bắt buộc, hoặc dữ liệu phải là con số, hoặc e-mail address, …

IX THÊM MULTIMEDIA VÀO TRANG WEB

1 Flash Movies

Flash movie là những file động có phần kiểu SWF giống như flash button và flash text.

Những đoạn phim này thường được tạo bằng Adobe Flash, và người dùng cần phải có cài đặt sẵn plug-in trên máy tính để có thể xem được flash movie

Flash movie có thể được chèn vào trang qua menu Insert > Media > Flash, hoặc bằng cách ấn tổ hợp phím Ctrl+Alt+F

Flash movie có thể được chèn vào trang bằng cách ấn vào mục Flash trên Insert panel, tab

Common, nút Media

Properties inspector của Flash movies tương tự như của button và flash text, nhưng có thêm hai tùy chọn mới :

Tùy chọn Loop cho phép lặp lại từ đầu khi một lượt trình diễn kết thúc

Tùy chọn Autoplay cho phép flash movie được tự động chạy khi load trang

Nếu tùy chọn này không được chọn, chỉ có frame hình đầu tiên của phim được hiển thị.

Phải disable tùy chọn này nếu muốn việc chơi đoạn phim được kích họa bởi một behavior nào đó

2 Âm thanh

Âm thanh ít khi được chèn vào trang web, vì một số người dùng có thể đang nghe nhạc của chính

họ, và đôi khi nhạc trên trang web không phù hợp với hoàn cảnh người dùng lướt web

Tuy nhiên, một đoạn âm thanh phù hợp lại làm cho trang web trở nên cuốn hút hơn Nhiều trang web có âm thanh cũng cấp cả tùy chọn để người dùng điều khiển theo ý mình.

Những định dạng âm thanh phổ biến nhất trên Internet là MP3, WAV và MIDI, mặc dù vẫn có những định dạng khác được dùng Lý tưởng nhất là sử dụng những tập tin âm thanh nhẹ nhưng cho chất lượng tốt.

Để thêm âm thanh vào trang, vào menu Insert > Media > Plugin.

Audio control không được hiển thị trên Dreamweaver Tất cả những file được chèn vào

trang dưới dạng plug-in được hiển thị trong Dreamweaver bằng một hình giống như hình

bên

Trong properites inspector chiều cao và độ rộng của audio controls có thể được chỉnh sửa qua các tham số W và H.

Trường hợp người thiết kế không thiết lập size, trình duyệt sẽ hiển thị control với kích cỡ mặc định Trường hợp ta muốn cho người dùng nghe nhạc nhưng không nhìn thấy audio control, giá trị của W và H cần được set là 0

Âm thanh được tự động chơi khi trang web được tải xuống Trên properties inspector ta không thay đổi được điều này nhưng có thể thay đổi trên code

Ví dụ, ta có đoạn code HTML sau <embed src="others/audio.MID"></embed>.

Để tránh cho file nhạc tự động chơi ta thêm vào thiết lập autostart="false", và để cho file nhạc chơi lặp ta thêm vào loop="true"

Đoạn code được chuyển thành:

<embed src="others/audio.MID" autostart="false" loop="true"></embed>

Nếu ta muốn chèn nhạc nền cho trang web và không cho người dùng thấy control chơi nhạc, chèn

đoạn code sau đây vào trang web, sau label </title>.

<bgsound src="song1.wav" loop="-1">

Với tham số loop chúng ta có thể chỉ định file âm thanh sẽ chạy bao nhiêu lần, riêng giá trị -1 cho

phép chơi lặp liên lục).

3 Movies và Video File

Các video format được dùng phổ biến nhất là AVI, MPEG và MOV.

Để thêm video vào trang, vào menu Insert > Media > Plugin.

Properties inspector của video file tương tự như inspector của audio file: cả hai đều là file dưới dạng Plug-in.

Video cũng được tự động chơi khi load trang, và chỉ chơi một lần mà thôi Chúng ta chỉnh sửa những tham số này trong code, tương tự như với audio file, chẳng hạn thêm vào các cặp thuộc tính/giá trị autostart="false" và loop="true"

Mọi đối tượng được chèn vào dưới dạng Plug-in đều cần có chương trình cài sẵn trên máy tính của người duyệt web để có thể chơi được.

Mục Src của properties inspector chứa liên kết đến file multimedia gắn với control đang được chọn Trường hợp người dùng chưa cài sẵn plug-in, ta có thể thiết lập thông số Plg URL là địa chỉ của

trang web chứa plug-in

X Sử dụng Dreamweaver Templates

1 Giới thiệu

Mỗi lần chúng ta muốn tạo một web site thường thì chúng ta phải tuân theo một khuôn dạng thống nhất Cách chúng ta thường làm là sao chép những tập tin đã được làm xong từ trước và tiến hành chỉnh sửa nội dung của trang này để tạo thành một trang mới Đây là cách dễ nhất để tạo một trang theo cấu trúc đã tạo từ trước.

Template là một dạng bản sao của trang web như vậy Cả phần con lại của web site được xây dựng dựa trên bản sao này Tuy nhiên, template có khả năng tạo ra những khu vực có thể chỉnh sửa được và những khu vực không chỉnh sửa được

Chúng ta không thể chỉnh sửa thuộc tính của một trang dựa trên template, ngoại trừ tiêu đề của trang Khi chúng ta muốn tạo một trang có những thuộc tính khác biệt, chẳng hạn với màu nền khác, chúng ta cần một template khác với thiết lập màu khác và tạo trang dựa trên template đó

Khi chỉnh sửa thiết kế của một template, chúng ta có thể cập nhật tất cả các trang dựa trên nó Template là những tập tin có phần kiểu DWT được lưu trong web site trong một thư mục có tên là

Templates.

2 Tạo Template

Template có thể được tạo từ đầu, hoặc dựa trên một trang có sẵn

Một cách để tạo template từ đầu là sử dụng Assets panel

Assets panel có thể được mở từ menu Window > Assets hoặc nhấn phím F11.

Khi đã mở panel chúng ta phải click vào nút Từ đây chúng ta

bắt đầu làm việc với template

Phần phía dưới của Templates Assets panel có các button tương

tự như của CSS Styles panel

Đểm khác biệt duy nhất là nút nhấn đầu tiên bên trái, trên

Templates Assets panel nút này được dùng để cập nhật danh sách

template Những nút còn lại cho phép tạo template mới, chỉnh sửa

template đang được chọn, hoặc xóa template đó

Để tạo template mới ta ấn vào nút (nếu nút này không được

kích oạt, hãy ấn phải chuột và chọn New Template)

Khi đã ấn vào button, một file mới xuất hiện trong templates list.

Lúc này là lúc chúng ta tiến hành đổi tên (Name) cho template.

Để chỉnh sửa một template, hãy chọn template đó trong danh

sách và click vào nút

Để xóa một template khỏi danh sách, hãy chọn template đó trong danh sách và click vào nút

Template được lưu trong thư mục Templates trong web site Thư mục này được tạo tự động

Để tạo template từ một file có sẵn, hãy mở file đó, lưu lại dưới dạng template thông qua menu File

> Save as template.

Chúng ta sẽ thấy một cửa sổ tương tưh như cửa sổ dưới đây:

Cần phải chỉ định tên của template cần lưu ở mục Save as, sau đó chọn site để lưu template vào trong danh sách Site

3 Khu vực được phép chỉnh sửa trên template (editable zone).

Theo mặc nhiên thì hầu hết thành phần trên template đều bị khóa, và do đó chúng không thể chỉnh sửa được

Chúng ta phải tạo ra những khu vực trên trang web có thể chỉnh sửa được dựa trên template này

Để sửa một template ta phải mở nó trên Dreamweaver Một cách để mở template trên Assets panel

là nhắp đúp vào nó, hoặc chọn và click nút , như chúng ta đã biết

Khi template đã được mở, chúng ta có thể thiết lập thuộc tính của nó thông qua Page properties Chúng ta có thể mở Page properties bằng một trong các cách sau:

• Nhấn tổ hợp phím Ctrl+J.

• Vào menu Modify > Page properties

• Nhấn phải chuột trên file đang mở trong Dreamweaver và chọn Page properties

Để thêm một editable zone ta phải đặt con trỏ tại vị trí muốn chèn, sau đó vào menu Insert > Templates objects > Editable region.

Một editable zone được hiển thị trên Dreamweaver dưới dạng một box có nhãn màu xanh Tên của editable zone hiển thị trên nhãn

Chúng ta có thể chèn các đối tượng vào trong cửa sổ, và những đối tượng đó sẽ xuất hiện mặc định trên các file dựa trên template này Những đối tượng nằm trong editable zone thì có thể chỉnh sửa được trên trang

Tất cả những đối tượng trong các editable zone sẽ được lưu trong site, nhưng không thể thay đổi những đối tượng đó.

Trong trường hợp dưới đây, đối tượng image sẽ có mặt trên tất cả các file sử dụng template, trong khi những đối tượng trên EmailForm thì không

4 Sử dụng template

Việc sử dụng template có thể hơi phức tạp vào lúc đầu Chúng ta hãy cùng xem làm thế nào để tạo một site mới dựa trên một template

Một khi đã mở file, vào menu Modify > Templates > Apply template to Page

Sau khi click mục Apply Template to Page, chúng ta sẽ thấy một cửa sổ giống như dưới đây, chọn

template từ danh sách các template có trong site.

Nên chọn mục Update page when template changes, điều này bảo đảm rằng trang web cũng sẽ

được cập nhật một khi templte gốc được cập nhật

Bên cạnh việc áp dụng template lên một trang web rỗng, chúng ta cũng có thể áp dụng template lên một file sẵn có.

Giả sử ta áp dụng template test.dwt cho trang mypage.html đã có sẵn nội dung như sau:

Khi ta áp dụng template, tên của những khu vực trên trang web hiện có không tồn tại trong tập hợp tên khu vực trên template sẽ được hiển thị trong cửa sổ sau:

Trên cửa sổ này ta thiết lập sự tương ứng giữa tên khu vực trên file hiện có với tên khu vực của template mới

Cụ thể, trong ví dụ trên, khu vực trên file không có khu vực nào tương ứng trên template là khu vực Document body

Trong mục Move content to the new region phần testZone của template đã được chọn để chuyển dữ

liệu vào.

Sau khi đã thiết lập được sự tương ứng, template được load vào file Kết quả như sau:

Bây giờ ta không thể thay đổi màu nền hay các thuộc tính khác của file (trừ phần tiêu đề trang), dù

vậy chúng ta vẫn thay đổi được tất cả nội dung trong testZone, vì đó là khu vực cho phép chỉnh sửa.

Nếu không muốn dùng template cho trang nữa, hãy vào menu Modify > Templates > Separe template.

Khi tách một file khỏi template, nội dung và hình thức của trang vẫn giữ nguyên, tuy nhiên những quy định như khi sử dụng template không còn được áp dụng nữa

XI Làm việc với Layer (lớp)

1 Giới thiệu

Layer là những hình chữ nhật có thể đặt ở bất kỳ đâu trên trang, và chúng ta có thể chèn nội dung vào chúng Layer có thể được ẩn đi hoặc nằm chồng lên nhau Tính năng này cho chúng ta rất nhiều không gian sáng tạo trong thiết kế trang web.

Layer có thể được thay đổi vị trí dễ dàng chỉ bằng cách click

chuột vào hình vuông ở góc trên trái của nó, giữ chuột vào kéo đến vị trí mới

Việc thay đổi kích cỡ của layer cũng rất dễ dàng, chỉ việc click vào những hình vuông màu đen và

rê chuột đến khi vừa ý

Biểu tượng được sử dụng để chọn layer khi click lên nó, và khi xóa biểu tượng này, ta cũng xóa

cả layer

2 Chèn layer vào trang

Layer được chèn vào trang qua menu Insert > Layout Objects > Layer

Khi layer đã được chèn vào, chúng ta có thể tiến hành thay đổi thuộc tính của đối tượng

Có thể chọn layer bằng nhiều cách Một trong số đó là click vào biểu tượng Cách này sẽ không thích hợp khi có nhiều layer nằm sát hoặc chồng lên nhau, vì lúc đó sẽ rất dễ chọn nhầm.

Khi có nhiều layer trên cùng một trang web, nên chọn layer trên tab Layers trong CSS panel; truy

cập panel này bằng menu Window > Layers Cũng có thể ấn F2 để mở panel này.

Tên của tất cả layer tồn tại trong trang web đều được liệt ke ở đây Chúng ta chỉ cẩn click chuột lên tên layer để chọn nó

3 Định dạng layer

Thuộc tính của layer được hiển thị trong properties inspector

Layer ID chính là tên layer Chúng ta có thể sửa tên ngay tại đây hay tại Layers panel bằng cách

nhắp đúp lên tên layer tại panel đó.

L và T mô tả khoảng cách giữa giới hạn trái (left) và giới hạn trên (top) của văn bản với layer.

W và H xác định chiều rộng và chiều cao của layer.

Index là độ sâu của layer Giá trị này cũng có thể được chỉnh sửa trên Layers panel Layer có

Z-index lớn hơn sẽ phủ lên layer có Z-Z-index nhỏ hơn.

Vis xác định trạng thái view đầu tiên của layer Chấp nhận bốn giá trị sau:

• Default (Browser view),

• Inherit (layer được hiển thị khi trang chứa nó được hiển thị)

• Visible (layer được hiển thị dù trang chứa nó không được hiển thị)

• Hidden (layer bị ẩn).

Chúng ta cũng có thể sửa dạng view này trên Layers panel bằng cách click vào biểu tượng con mắt Mắt mở tương ứng với giá trị Visible, và mắt nhắm tương ứng với giá trị Hidden.

Bg Image và Bg Color xác định hình nền và màu nền của layer

Overflow điều khiển việc layer sẽ xuất hiện trên trình duyệt như thế nào khi nội dung vượt ra khỏi

kích cỡ định trước của layer Chấp nhận những giá trị sau:

• Visible : layer sẽ được điều chỉnh để có thể nhìn thấy toàn bộ nội dung.

• Hidden: phần nội dung dư ra sẽ không được hiển thị trên trình duyệt

• Scroll: trình duyệt sẽ thêm thanh cuộn vào layer dù có cần phải có thanh cuộn hay không

• Auto: trình duyệt sẽ thêm thanh cuộn vào layer khi cần thiết (khi nội dung vượt qua giới hạn

kích thước của layer).

XI Làm việc với Behaviors

1 Giới thiệu

Behavior là những hành động xảy ra khi người dùng làm

một điều gì đó trên đối tượng, chẳng hạn đưa con trỏ chuột lên

trên một tấm hình trên trang web, click lên một đoạn văn bản,

double-click lên một image map, …

Behavior không phải là mã HTML, chúng được viết bằng

JavaScript Dreamweaver cho phép chúng ta chèn mã JavaScript

thông qua Behaviors panel, chúng ta không phải viết code

JavaScript để tạo behavior.

Behavior panel được mở bằng cách vào menu Window >

Behaviors, hoặc nhấn tổ hợp phím Shift+F4.

Trong panel này, click vào nút , và trong mục Show

events for hãy chọn một phiên bản trong danh sác trình duyệt

Một số behavior không làm việc với một vài trình duyệt tùy thuộc vào trình duyệt, chúng ta có thể thấy hoặc không thấy một số behavior.

Có rất nhiều behavior cho Internet Explorer nhưng chúng không làm việc với Netscape Vì hầu hết mọi người đều dùng Internet Explorer, chúng ta hãy chọn trình duyệt này Hãy chọn phiên bản gần đây nhất của họ mà chương trình cho phép chọn.

Khi browser đã được chọn thì không cần phải chọn lại sau này

2 Thêm vào một behavior

Khi đã chọn browser xong, chúng ta có thể bắt đầu thêm vào các behavior.

Điều đầu tiên phải làm là chọn đối tượng sẽ áp dụng behavior Đối tượng này có thể là image, một nhóm text,

Khi click vào nút trong Behavior panel chúng ta sẽ thấy mục Show Events for Chúng ta cũng sẽ

thấy một danh sách các hành động (action) có thể thực hiện được trên trình duyệt mà ta đã chọn ở bước trên Hãy chọn một action phù hợp

Tùy thuộc vào đối tượng chúng ta muốn áp dụng behavior, chúng ta có thể chọn một số action, một

Như chúng ta thấy, mỗi behavior có một action và một sự kiện (event) liên hệ với nó.

Action là hành động đã được chọn ở bước trên, và sự kiện mô tả thời điểm xảy ra action Chọn sự kiện bằng cách click vào ô ở bên trái ô hành động trong Behaviors panel