HTML

CHƯƠNG TR�NH JAVASCRIPT D�NH CHO SINH VI�N HỌC SINH

PHẦN II: TẠO KHUNG

C�ch tạo c�c khung (frame)cho c�c tại liệu WEB.Sử dụng c�c khung hợp l� tạo cho c�c trang web của bạn nh�n r� r�ng hơn,hấp dẫn l�m cho ch�ng dễ định vị hơn. zatrabeoj chia trang th�nh c�c khung hết sức đơn giản.Kh�i ni�m căn bản như sau: Mỗi khung l� một t�i liệu html thong thường .Nếu bạn muốn chia trang của m�ng ra l�m đ�i,sau đ� bạn sẽ đưa t�an bộ t�i liệu html v�o khung b�n tr�i v� một t�i liệu html kh�c v�o khung b�n phải.Ng�ai ra,bạn cần viết v�o một t�i liệu html thứ ba. Trang MASTER PAGE (trang ch�nh)c� c�c thẻ <FRAME> ấn định những g� được ghi v�o đ�u.V� thế đ� l� chức năng duy nhất của n� .chỉ c� hai thẻ khung ch�nh gốm:<Frameset>v�<frane>.C�ch dễ nhất để giải th�ch ch�ng l� t�m hiểu s�u hơn v� bắt đầu tạo một số khung .

Nếu bạn muốn t�m hiểu c�c t�i liệu html chất lượng, th� bạn cần bỏ thời gian ra t�n hiểu c�c thẻ. Nếu chỉ dựa v�o "Frame Wizards" bạn sẽ bị giới hạn v� kết quả cuối c�ng bạn kh�ng đạt được.Tốt nhất l� sử dụng c�c tr�nh sọan thảohtmldựa v�o văn bản.Một số tr�nh sọan thảo tốt sẽ được đề cập ở đ�y.C�c tr�ng sọan thảo n�y tạo cho bạn dễ d�ng viết m� html.

B�I 1 : T�I LIỆU HTML

K�ch họat notepad v� ch�p c�c thẻ sau để bạn bắt đầu.

<HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> </BODY> </HTML>

Ch�ng ta sẽ cho mỗi t�i liệu một t�n.trong table v� form của ch�ng ta đ� sử dụng c�c t�n của người ấy.B�y giờ l� l�c th�m một số t�n phụ nữ v�o đ�u

<HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> Nguyễn Thị Tr�c Linh </BODY> </HTML>

Tạo một thư mục mới ở nơi lưu t�i liệu n�y l� Linh.html(c�c người d�ng Win3x lưu n� l� Linh.htm)

Tạo một t�i liệu kh�c:

<HTML> <HEAD> <TITLE>My Framz Page</TITLE> </HEAD> <BODY> L� Thị H�a </BODY> </HTML>

Lưu t�i liệu n�y v�o c�ng thư mục trước l� Hoa.html

B�y giờ thực hiện tương tự đối với Joeng Kim, V� Thị Hồng Yến, Nguyễn Thị B�ch Nga, L� Thị Minh Thu.Lưu họ giống như c�c t�i liệu trước.Bạn sẽ c� thư mục gồm 6 t�i liệu html h�an chỉnh ri�ng biệt

Tạo trang ch�nh của bạn.Bắt đầu bằng :

<HTML> <HEAD> <TITLE>My Framz Page- The Master Page</TITLE> </HEAD> <BODY> </BODY> </HTML>

Bỏ c�c thẻ <BODY>.Trang ch�nh kh�ng sử dụng ch�ng ,thay v�o đ� l� sử dụng c�c thẻ <FRAMESET>

<HTML> <HEAD> <TITLE>My Framz Page- The Master Page</TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML>

Giờ lưu n� .Lưu n� trong t�i liệu của bạn(với tất cả c�c t�n c� g�i)bằng index.html. Nếu b�y giờ bạn cố mở n� bằng tr�nh duyệt,n� sẽ trống rỗng . Tất cả được l�m ở đ�y l� " Đ�y l� Master Page của t�i"

ch�ng ta h�y bắt đầu x�c định những g� sẽ được tr�nh b�y.Cho tr�nh duyệt biết để t�ch cửa sổ ch�nh th�nh hai cột,mỗi cột chiếm 50% cửa sổ

Cột n�y c�n trống , ch�ng ta c�n một điều nửa để thực hiện trước khi hệ thống họat động l� :

Linh

Hoa

Giờ bạn đ� c� một khung h�a chỉnh.

B�I 2 : CHIA KHUNG

Thẻ <Frameset>chia trang th�nh c�c cửa sổ .N� x�c định c�ch chia ch�ng , do đ� ch�ng ta sử dụng <frameset> để chia .ch�ng ta c� thể chia trang th�nh nhiều phần. Chỉ cần ấn định trang cho mỗi phần ,nếu kh�ng tr�nh duyệt sẽ bị lầm lẫn.

Linh

Hoa

Kim

Yen

Thu

Nếu ch�ng ta x�c định chia th�nh c�c h�ng (ROWS) thay v� th�nh c�c cột(COLS) ch�ng ta sẽ thấy h�an t�an kh�c.

Linh

Hoa

Kim

Yen

Thu

Ở điểm n�y ch�ng ta n�i về tr�nh duyệt : tạo 3 khung .Khung thứ nhất c� chiều rộng 50 pixel. Phần c�n lại chia th�nh c�c khung 2 v� 3 nhưng tạo khung thứ 3 lớn gấp đ�i khung thứ 2.Đưa Linh v�o khung thứ nhất , Hoa v�o khung thứ 2 v� ch�ng ta chia th�m khung thứ 3. Giờ ch�ng ta ấn định c�ch chia khung thứ 3

ch�ng ta chia n� ra l�m 2 theo chiều ngang :

v� ch�ng ta đưa Kim v�o phần tr�n c�ng v� Yen v�o phần dưới

Linh

Hoa

Kim

Yen

Giờ ch�ng ta sẽ chia Linh theo chiều ngang th�nh 3 phần. Cửa sổ tr�n c�ng c� chiều cao 50 pixel.Hai cửa sổ kia l�m 2 phần bằng nhau.Ch�ng ta sẽ đưa Linh v�o tất cả 3 cửa sổ

sau đ�y l� tất cả thay đổi:

<FRAMESET COLS="50,*,2*"> <FRAMESET ROWS="50,*,*"> <FRAME SRC="Linh.html"> <FRAME SRC="Linh.html"> <FRAME SRC="Linh.html"> </FRAMESET> <FRAME SRC="terri.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> </FRAMESET> </FRAMESET

Linh	Hoa	Kim
Linh
		Yen
Linh

B�I 3: PHƯƠNG PH�P CHIA KHUNG

Ch�ng ta trở lại c�ch chia khung thực hiện đơn giản hơn.

Linh

Hoa

Ch�ng ta c� thể đưa h�nh v�o c�c khung nếu muốn. trong thư mục c� t�n'examples' c� một ảnh được gọi l� Linh.jpg. Tiến h�nh v� sao ch�p v�o thư mục họat động của bạn

Hoa

Nhớ phải c� c�c thuộc t�nh HEIGHT & WIDTH đối vớio một thẻ ảnh bất kỳ

B�I 4 : C�C HIỆU ỨNG KHUNG

Kế tiếp ch�ng ta thử tạo một số hiệu ứng nhỏ. Tuy nhi�n , kh�ng phải tất cả ch�ng đều c� t�c dụng đối với tất cả c�c tr�nh duyệt.Nếu tr�nh duyệt khong hiểu thuộc t�nh đ� ,n� sẽ bỏ qua

Trước hết ch�ng ta thay đổi độ d�y của đường viền

Hoa

Linh

Ch�ng ta c� thể thay đổi m�u sắc c�c đường viền

Hoa

linh

B�I 5: TẠO TRANG C� KHUNG

Trước khi bắt đầu, h�y duy tr� n� đơn giản !Một site c� nhiều khung v� li�n kết nhiều khung sẽ l�m cho tạo khung bị rối v� kh� định vị.

Điều cần quan t�m l� kết quả cuối c�ng của ch�ng ta .Một thiết kế đơn giản gồm ti�u đề lớn ở tr�n c�ng , cửa sổ thư mục ở b�n tr�i v� cửa sổ ch�nh ở b�n phải.ch�ng ta bắt đầu Master Page đầu ti�n

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD> <FRAMESET> </FRAMESET> </HTML>

Tạo một thư mục mới kh�c v� lưu thư mục n�y l� index.html. Ng�ai ra ảnh m� ch�ng ta sử dụng cho ti�u đề lớn l� ảnh "INT". N� được gọi l� int.gifva trong thư mục framz.ch�p n� v�o thư mục họat động m� bạn vừa tạo

chia m�n h�nh theo chiều ngang :

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD> <FRAMESET ROWS="83,*"> </FRAMESET> </HTML>

Lưu � ch�ng ta c� được tổng 83 bằng c�ch bổ sung 8 v�o chiều cao của ảnh (75+8=83).Hơn nữa, v� ch�ng ta đang sử dụng k�ch thước h�an t�an c� cả khung co gi�n

Kế tiếp ấn định banner.html để v�o khung tr�n c�ng (ch�ng sẽ tạo t�i liệu trong một v�i ph�t).Ng�ai ra đưa n� v�o trong thẻ<frameset> bởi v� ch�ng ta sẽ chia phần dưới th�m

<HTML> <HEAD> <TITLE>A Practice Page</TITLE> </HEAD> <FRAMESET ROWS="83,*"> <FRAME SRC="banner.html"> <FRAMESET> </FRAMESET> </FRAMESET> </HTML>