›
›

Bài giảng Thiết kế Web - Bài 5: Frame - Phan Thanh Sơn

Download
THIẾT KẾ WEB  
Phan Thanh Sơn  
Khoa Công nghệ thông tin  
Email: webmaster.tsq[email protected]  
Tel: 0989.937.737  
NỘI DUNG  
I. GIỚI THIỆU  
II. CÁCH TẠO MỘT FRAME LAYOUT  
III. CÁC THUỘC TÍNH CỦA FRAME  
IV. LIÊN KẾT FRAME  
V. PHẦN TỬ NOFRAMES  
VI. PHẦN TỬ IFRAME  
2/30  
I. GIỚI THIỆU FRAMES(KHUNG)  
a. Khcần hiển thtrên trì nh duyệt nhiều nộdungchủ  
đề khá c nhau trên cùng mộtrang thmộgiảphá p có  
thể đáp ứng cho trường hợp này là frame (khung.  
b. Có thể phâ n chia một trang thành cá c khung, cho  
phé p ngườtruy cập cùng một lúc có thể xem nhiều  
trang mà khô ng cần cuốn màn hì nhmỗkhung chứa  
mộtrang web riên.  
c. Nếu trong trang đã sử dụng Frame thì khô ng sử tag  
Body  
d. Vdcần tạo mộtrang web mà khung bên trá chứa  
cá c mục liên kếtbên phảhiển thnộdung của cá c  
trang liên kếtphần trên của trang chứa logo  
3/30  
Cách thực hiện:  
Trước hết ta tạo các trang web riêng: trang logo, trang  
chứa các liên kết và các trang nội dung chính, sau đó đưa  
các trang này vào các khung của frame  
5/30  
6/30  
II. CÁCH TẠO MỘT FRAME LAYOUT  
A. Tạo trang web chứa cá c khun:  
a. Thay thẻ <body</body> bằn:  
<frameset>  
các khung  
</frameset>  
<noframes>  
nội dung trong trường hợp trình  
duyệt không hỗ trợ khung  
</noframes>  
7/30  
II. CÁCH TẠO MỘT FRAME LAYOUT  
a. Cú phá :  
<HTML>  
<HAED>  
<TITLE>Page Title</TITLE>  
</HEAD>  
<FRAMESET>  
Frame Definitions  
</FRAMESET>  
</HTML>  
8/30  
ACá c dạng fram:  
a. Tạo frame theo dò ng  
Cú phá :  
<HTML>  
<HEAD><TITLE>Nộdung tiêu đề</TITLE></HEAD>  
<FrameseRows=”a…” >  
<Frame name=”Nam” Src=”Contenhtm>  
<Frame name=”Nam” Src=”Contenhtm>  
…..  
<Frame name=”Name_n” Src=”Content_htm>  
</Frameset>  
</HTML>  
9/30  
– alà độ cao của cá c dò ng thứ thứ 2 …có  
thể tí nh bằng pixehoặc bằng %  
– Nam: tên khung, (xá c định chức năng của  
khung)  
– Contenhtđịa chtrang web xuấhiện đầu tiên  
trong khung  
a. Vd:  
<HTML>  
<HEAD><TITLE>Frame</TITLE></HEAD>  
<FrameseRows2%6%2% >  
<Frame name=”HeadSrc=”heahtm>  
<Frame name=”ContenSrc=”Contenhtm>  
<Frame name=”ContenSrc=”Contenhtm>  
</Frameset>  
</HTML>  
10
a. Tạo frame theo cột  
Cú phá :  
<HTML>  
<HEAD><TITLE>Nộdung tiêu đề</TITLE></HEAD>  
<FrameseCols=”a…” >  
<Frame name=”Nam” Src=”Contenhtm>  
<Frame name=”Nam” Src=”Contenhtm>  
…..  
<Frame name=”Name_n” Src=”Content_htm>  
</Frameset>  
</HTML>  
11/30  
– alà độ cao của cá c dò ng thứ thứ 2 …có thể  
tí nh bằng pixehoặc bằng %  
– Namtên khung(xá c định chức năng của khung)  
– Contenhtđịa chtrang web xuấhiện đầu tiên  
trong khung  
Vd:  
<HTML>  
<HEAD><TITLE>Frame</TITLE></HEAD>  
<FrameseCols3%3%* >  
<Frame name=”Baner” Src=”heahtm>  
<Frame name=”Conten” Src=”Contenhtm>  
<Frame name=”Conten” Src=”Contenhtm>  
</Frameset>  
</HTML>  
12/30  
III. CÁC THUỘC TÍNH CỦA FRAME  
A. NoresizKhô ng đổkí ch thước  
B. Scrollincó /khô ng có thanh cuộn  
Aut: Xuất hiện thanh cuộn khi nội dung dài  
Yeluô n xuấhiện thanh cuộn  
Nkhô ng xuấhiện thanh cuộn  
C. Vd:  
<frameserows=8,*frameborder="NOborder=>  
<frame noresize src="topFramescrolling="NO>  
<frame noresize src="leftFramescrolling="NO>  
</frameset>  
D. Frameborde: đường viền của khung mặc định là , muốn  
giữa cá c khung khô ng cò n đường viền thtrong tag Frameset  
nhập thêm Border,  
13/3
a. Marginwidt: hiệu chỉnh khoảng cá ch từ nội  
dung đến lề trá và phảcủa khung (tí nh bằng  
pixel)  
b. Marginheigh: hiệu chỉnh khoảng cá ch từ nội  
dung đến lề trên và dướcủa khung (tí nh bằng  
pixel)  
E. Cá c frame lồng nha:  
<Framese>  
<Frame name=”name” src=”Paghtm”>  
<Frameset>  
<Frame name=”name” src=”Paghtm”>  
…
</Frameset>  
…
14/3</Frameset>  
IV. LIÊN KẾT FRAME  
A. Trang đầu tiên của khung được chra trong thuộc  
tí nh SRCta có thể chỉnh cá c trang khá c cùng xuất  
hiện trong khung đó bằng cá ch chra vtrtrang đích  
(Target)  
B. Tạtrang muốn tạo liên kết với khung, ta nhập cú  
phá :  
<a Href=”Paghtm Target=”name”>  
Nhã n mục liên kết  
</a>  
rong đó :  
Target=Name : tên của khung mà trang muốn liên  
kếđến trong tag <Frame>  
15/30 Paghtmtrang hiển thtrong khung liên kết  
C. Tag <Base:  
Nếu có nhiều liên kết đến cá c trang  
xuất hiện trong cùng một khung thì  
thuộc tí nh targemặc định đặt trong tag  
<Base>  
D. Cú phá :  
<Head>  
<Base target=”name”>  
</Head>  
16/30  
V. PHẦN TỬ NOFRAMES  
A. Phần tử NOFRAMES được sử dụng để chnội  
dung thay thế cho frame khtrì nh duyệkhô ng hổ  
trợ fram.  
B. Cú phá :  
<HTML>  
<HEAD><TITLE>Page title</TITLE></HEAD>  
<FRAMESET>  
Frame Definitions  
</TRAMESET>  
<NOFRAME>  
<BODY>  
Page Layout  
</BODY>  
</NOFRAME>  
</HTML>  
17/30  
VI. PHẦN TỬ IFRAME  
A. Nếu muốn trộn văn bản và khung trong cùng mộtrang thì  
phảtạo một khung bên trong trang bằng tag <iframe>,  
khtrì nh duỵêkhô ng hổ trợ thnộdung trong IFRAME sẽ  
btrả lại  
B. Cú phá Tạvtrmuốn chè n framenhập cú phá :  
<Iframe Src=”Paghtm” Name=”name” Width= x  
Height=y Align=leftright>  
Nộdung thay thế khtrì nh duyệkhô ng chấp nhận khung  
</Iframe>  
Trong đ:  
Paghtmlà trang đầu tiên xuấhiện trong khung  
Namtên của khung  
xkí ch thước của khung  
Aligcanh lề  
18/30  
VÍ DỤ:  
19/30  
Tạo FRAMESETS bằng DW  
A. Trang khung (frameset):  
− Là trang HTML đặc biệt. Trang khung khô ng  
mang nội dung, khô ng có thẻ <BODY>. Trang  
khung chia viền khung cho trang web.  
− Muốn tạo trang khung ta phải xá c định rõ cá c  
yêu cầu sau:  
❖ Số khung (frame) trong một trang khung (frameset)  
❖ Tên cho từng khung cụ thể.  
❖ Cá c tập tin HTML làm nội dung cho từng khung.  
20/30  
Tải về để xem bản đầy đủ
ppt 30 trang baolam 20921 Free
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế Web - Bài 5: Frame - Phan Thanh Sơn", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pptbai_giang_thiet_ke_web_bai_5_frame_phan_thanh_son.ppt