VNP Community

Tags
This content has not been tagged yet
> Giới thiệu về Web Frame, HTML Frame, Cách làm Web bằng Frame, IFrame  
 Reply to this topicStart new topic
NASA
post Jan 12 2008, 07:27 PM
Post #1


Junior Member
Group Icon

Group: VNP Home
Posts: 2
Cash: 0k
Age: N/A
Joined: 21-September 07
Member No.: 27,844
Yahoo! Status: N/A
Nói một cách ngắn gọn thì Frame là web trong web. Nó chia cửa sổ trình duyệt web ra nhiều phần và mỗi phần sẽ tải 1 trang web riêng lên đó. Nói thế sẽ có nhiều bạn cho rằng khó hiểu, nhưng bạn thử nghĩa xem. Nếu làm 1 trang web thường có phần banner ở trên và menu ở bên trái. Mỗi trang con của trang đó cũng thiết kế tượng tự sẽ rất mất thời gian. Một điều nữa là nếu bạn muốn thay đổi menu hay phần banner trên bạn sẽ phải thya code của tất cả các trang web có chứa phần đó. Nhưng với Frame bạn sẽ thiết kế menu thành 1 trang riêng và Banner thành 1 trang riêng rồi cùng tải lên Frame với nội dung chính của trang cũng ở dạng 1 trang riêng nốt. Nếu bạn cần thay đổi menu hay banner chỉ cần thay đổi 1 lần duy nhất trên trang chứa menu hay banner đó. Trăm nghe không bằng một thấy, bạn hãy thử tìm hiểu phần này xem.

* Tạo frame:

Đầu tiên xin nói rõ hơn một chút về các frame. Như đã nói ở trên là frame chia trình duyệt ra làm nhiều khung nhỏ hơn và mỗi khung cho phép hiện 1 trang web riêng biệt vì thế bạn phải tạo một trang web chứa các khung đó. Trang đó gọi là frame set, nếu mỗi frame như 1 quyển sách thì frame set chính là cái tủ sách để xếp các quyển sách chung với nhau, bản thân nó không phải là sách.

+ Tạo frame set cơ bản:
Sau đây là cách tạo frame set:
Sau tag đóng </head> dùng tag <frameset> với các thông số phụ sau:
- cols="a, b": Chia trình duyệt ra làm nhiều cột với các giá trị a, b, c, ... là phần rộng của mỗi cột có thể tính bằng pixel hay % của cửa sổ trình duyệt.
- rows="a, b": Tương tự trên nhưng là chia theo hàng.
Ngoài 2 giá trị là pixel và % còn có 1 giá trị nữa là *, nghĩa là phần còn lại. Nếu bạn chọn frame 1 là 40%, frame 2 là 40%, frame 3 dùng * có nghĩa là 20%.
Sau đó dùng tag con <frame> ấn định cho từng frame riêng biệt với các thông số phụ:
- name: bí danh của khung, cái này khá quan trọng vì nó giúp chỉ định đúng frame khi ta muốn tải 1 trang khác thay thế vào.
- src: đường dẫn đến trang web được chọn để hiển thị trong frame.
Chú ý là tag <frame> không có khoá đóng.
Sau cùng kết thúc bằng </frameset>
Chú ý thứ tự chia frame, vì nếu chia theo hàng trước rồi chia cột sẽ khác với chia cột trước rồi chia hàng. Sau này bạn có thể thử để xem nó khác nhau ra sao.
Một điều đặc biệt là trang frame set được save với định dạng html nhưng nó hoàn toàn không có nội dung. Nó có bố cục như sau:

<html>
<head>
<title> Trang chủ </title>
</head>
<frameset>
<frame>
<frame>
........
<frame>
</frameset>
</html>
+Tạo frame set chia theo dòng và cột:
Nếu bạn muốn tạo frame chia theo dòng và cột chung thì phải tạo theo dạng lồng nhàu, nếu không nó sẽ ra như 1 table.
Cách làm như sau:
Nếu bạn muốn chia theo dòng trước cột sau thì hãy làm nbhư thế này:
<frameset rows="30%,*">
<frame>: Định dạng cho hàng 1.
<frameset cols="40%,*">: Chia hàng 2 thành 2 cột.
<frame>: Định dạng cho cột 1
<frame>: Định dạng cho cột 2
</frameset>: Đóng frame set chia cột
</frameset>: Đóng frame set chia hàng
Nếu bạn muốn tạo hàng trước cột sau thì cứ làm ngược lại.

* Định dạng cho frame:

Sau khi tạo khung và gắn web vào đầy đủ ta sẽ định dạng và trang trí lại cho các frame.
+ Chỉnh lề cho frame:
Với chỉ số mặc địng thì mỗi frame sẽ cách các lề của cửa sổ trình duyệt là 8 pixel. Nếu bạn muồn tuỳ chỉnh lại cho chúng sát lề hơn hay cách xa lề hơn thì bạn dùng thông số phụ sau trong tag <frame>:
- Marginwidth: Chỉnh cho 2 bên khung frame với đơn vị tính là pixel.
- Marginheight: Chỉnh cho khoảng trên dưới khung frame tính bằng pixel.
+ Chỉnh màu đường viền cho frame:
Dùng thông số phụ là bordercolor với hệ màu RGB và nếu bạn đặt trong tag <frameset> thì qui định cho toàn bộ tất cả frame, nếu bạn đặt trong tag <frame> thì chỉ có tác dụng trong frame đó.
+ Hiệu chỉnh đường viền cho frame:
Các frame thường có khoảng trống mặc định là 5 pixel khoảng cách với nhau. Nếu bạn muốn điều chỉnh thì dùng thông số phụ border trong tag <frameset>, thông số này tính bằng pixel và nếu bạn muốn giữa các frame không có khoảng trống thì cho nó là 0.
Nếu bạn muốn che giấu đường viền của frame thì dùng thông số frameborder=0 trong tag <frameset> và bạn cũng có thể tuỳ chỉnh độ lớn của đường viền khung bằng thông số này.
+ Cố định frame:
Các độ lớn của frame mà bạn qui định là % hay pixel đầu có thể bị người truy cập thay đổi độ lớn. Nếu bạn muốn ngăn chặn điều này thì dùng câu lệnh noresize trong tag frame mà bạn muốn cố định độ lớn.

* Link cho frame:

Vì frame là cấu trúc đặc biệt nên link dùng cho frame cũng có vài điểm cần lưu ý.
+ Chọn frame hiển thị cho link:
Nếu bạn muốn người truy cập click vào link trên frame chứa menu mà web mới lại hiển thị trên khung chứa nội dung thì bạn hãy làm như sau:
Trong web chứa link gõ link như sau:
<a href="link" target="bí danh frame"> Nội dung link </a>
Lưu ý là bí danh chính là phần name mà bạn qui định trước đây. Bạn muốn trang web mới hiển thị trong frame nào chỉ cần cho bí danh của frame đó vào target.
+ Thay đổi đích mặc định cho link:
Nếu bạn thấy làm theo cách trên hơi rắc rối thì bạn có thể dùng cách này trong trường hợp bạn có nhiều link. Trong tag <head> của trang chứa link (không phải trang chứa frame set) dùng tag <base> như sau:
<base target="bí danh frame">
giờ thì tất cả các link của trang web này sẽ hiển thị ở frame đã chỉ định mà không cần dùng thông số target nữa.

Sưu tầm
Go to the top of the page
 
+Quote Post
Game Online
NASA
post Jan 12 2008, 07:29 PM
Post #2


Junior Member
Group Icon

Group: VNP Home
Posts: 2
Cash: 0k
Age: N/A
Joined: 21-September 07
Member No.: 27,844
Yahoo! Status: N/A
Đây là bài về frame set nên cần phải tạo nhiều trang web. Bạn hãy tạo 1 folder tên là web rồi tạo trong đó các trang web sau:

***Top.html:
HTML
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<title> Top </title>
</head>
<body bgcolor="#FF0000">
<Center><b><font size="6" color="#FFFFFF"> Welcome to my web page </font></b><br><br>
<font size="4" color="#CCCCCC"><marquee> Chào mừng đến với trang web của tui </marquee></center>
</body>
</html>


***Page1.html:
HTML
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<title> page 1 </title>
</head>
<body bgcolor="#FFCC00">
<Center><b><font size="6" > Trang thứ I </font></b>
</center>
</body>
</html>


***Page2.html:
HTML
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<title> page 2 </title>
</head>
<body bgcolor="#FFCC00">
<Center><b><font size="6" > Trang thứ II </font></b>
</center>
</body>
</html>


***Page3.html:
HTML
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<title> page 3 </title>
</head>
<body bgcolor="#FFCC00">
<Center><b><font size="6" > Trang thứ III </font></b>
</center>
</body>
</html>


***Menu.html:
HTML
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<title> Menu </title>
<base target="main">
</head>
<body bgcolor="#FFCC00">
<b><font size="6" > MENU </font></b><br><br>
<a href="page1.html"> Trang I </a><br>
<a href="page2.html"> Trang II </a><br>
<a href="page3.html"> Trang III </a><br>
</body>
</html>


***Index.html:
HTML
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<title> Trang chủ </title>
</head>
<frameset rows="25%,*">
<frame src="top.html" name="top" noresize>
<frameset cols="30%,*">
<frame src="menu.html" name="left" noresize>
<frame src="page1.html" name="main" noresize>
</frameset>
</frameset>
</html>

Chú ý, tag <marquee> trong top.html là tag qui định chữ chạy, như bạn đã thấy chữ được bao bởi tag này sẽ chạy như 1 đoạn quảng cáo. Bạn thử bấm các link trên menu sẽ thấy tác dụng của chúng. Bạn hãy thay đổi các thông số trang trí như phần trên đã nói để th6áy tác dụng của chúng. Giờ nếu bạn muốn thay đổi trên menu hay top bạn có thể làm 1 lần duy nhất. Rất tiện lợi và không mất nhiều thời gian để chỉnh từng trang như với web thường.
Go to the top of the page
 
+Quote Post
PETER
post Jan 12 2008, 07:37 PM
Post #3


Ψ Yahoo-69 Power Ψ
Group Icon

Group: Owner
Posts: 2,708
Cash: 68,497k
Age: 24
Joined: 11-June 07
From: Saigon
Member No.: 1
Yahoo! Status:



Đây là một số mẫu frame để các bạn tham khảo:

1. HTML Frame Basic:
HTML
<html>
<head>
<title>Yahoo! 360° - PETER's Profile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset cols="100%,*" framespacing="0" frameborder="0" border="0">
<frame src="http://360.yahoo.com/index.aspx" scrolling="auto" noresize="noresize">
</frameset>
</html>


1. Frame by java-script: Dựa vào mẫu Frame trên ta chế thêm java-script.
- Cách này đòi hỏi trinh duyệt phải bật java-script.
- Cách này có dụng ý riêng nên thông thường bạn không cần dùng cách này.
HTML
<html>
<head>
<title>Yahoo! 360° - PETER's Profile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
if (top != self)
top.location.href = location.href;
var blog_source
if (location.search) {
blog_source = location.search.substring(1)
}
else {
blog_source = "http://360.yahoo.com/index.aspx"
}
</script></head>
<script type="text/javascript">
document.write('<frameset cols="100%,*" framespacing="0" frameborder="0" border="0">')
document.write('<frame src="' + blog_source + '" name="right" scrolling="auto" noresize="noresize" />')
document.write('</frameset>')
</script>
</html>


2. FRAMESET:
HTML
<html>
<head>
<title>Yahoo! 360° - PETER's Profile</title>
</head>
<frameset cols="100%,*">
<frame src="http://360.yahoo.com/index.aspx">
</frameset>
</html>


3. IFRAME:
HTML
<html>
<head>
<title>Yahoo! 360° - PETER's Profile</title>
</head>
<iframe src="http://360.yahoo.com/index.aspx" width="100%" height="100%" frameborder="0"></iframe>
</html>


Hoặc đơn giản nhất:
HTML
<iframe src="http://360.yahoo.com/index.aspx" width="100%" height="100%" frameborder="0"></iframe>


Và 101 cách sử dụng frame tùy kiến thức và óc sáng tạo của bạn.

Lưu ý: Đối bới những trình duyệt không hỗ trợ frame hoặc không bật frame thì ta cần làm 1 thông báo để người xem biết. Để làm điều này ta thêm nội dung vào tag <noframes>:

HTML
<noframes><body>
<p>Your browser does not seem to support frames or frame support has been disabled.<br>
Please click <a target="_blank" href="http://360.yahoo.com/index.aspx">here</a> to continue.</p>
</body></noframes>


VD:

HTML
<html>
<head>
<title>Yahoo! 360° - PETER's Profile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset cols="100%,*" framespacing="0" frameborder="0" border="0">
<frame src="http://360.yahoo.com/index.aspx" scrolling="auto" noresize="noresize">
</frameset>
<noframes><body>
<p>Your browser does not seem to support frames or frame support has been disabled.<br>
Please click <a target="_blank" href="http://360.yahoo.com/index.aspx">here</a> to continue.</p>
</body></noframes>
</html>
Go to the top of the page
 
+Quote Post
begins
post Aug 13 2008, 11:07 AM
Post #4


Junior Member
Group Icon

Group: Member
Posts: 1
Cash: 1k
Age: N/A
Joined: 13-August 08
Member No.: 113,610
Yahoo! Status: N/A
Em mới bắt đầu tự học về html nên mọi cái đối với em còn rất mới mẻ. Nên mong các anh chị hướng dẫn cho em với.

''Nói một cách ngắn gọn thì Frame là web trong web. Nó chia cửa sổ trình duyệt web ra nhiều phần và mỗi phần sẽ tải 1 trang web riêng lên đó. Nói thế sẽ có nhiều bạn cho rằng khó hiểu, nhưng bạn thử nghĩa xem. Nếu làm 1 trang web thường có phần banner ở trên và menu ở bên trái. Mỗi trang con của trang đó cũng thiết kế tượng tự sẽ rất mất thời gian. Một điều nữa là nếu bạn muốn thay đổi menu hay phần banner trên bạn sẽ phải thya code của tất cả các trang web có chứa phần đó. Nhưng với Frame bạn sẽ thiết kế menu thành 1 trang riêng và Banner thành 1 trang riêng rồi cùng tải lên Frame với nội dung chính của trang cũng ở dạng 1 trang riêng nốt. Nếu bạn cần thay đổi menu hay banner chỉ cần thay đổi 1 lần duy nhất trên trang chứa menu hay banner đó. Trăm nghe không bằng một thấy, bạn hãy thử tìm hiểu phần này xem.''


Em đang đọc tới phần về frames ở topic này và thực hành theo ví dụ trên : tạo 1 folder tên là web và trong đó gồm các file notepad đã được save lại với các code trên: các trang gồm có : Top.html, Page1.html, Page2.html, Page3.html, Menu.html, Index.html .


Em đã thử delete đi file Page3.html và sau đó mở trang index.html thì trên trang index.html nó vẫn còn link Trang 3 . Như vậy nếu muốn chỉnh sửa một cái gì đó thì phải làm trên cả các file có liên quan đến page3 (vd như Page3.html, Menu.html, Index.html) vì các file này đều có dòng Trang Thứ 3 .
Như vậy nếu dùng frames thì vẫn phải thay đổi rất nhiều file chứ?

Hơn nữa cho em hỏi là: trong file Index.html thì các code
CODE
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<title>Trang chu</title>
</head>
<frameset rows="25%,*">
<frame src="top.html" name="top" noresize>
<frameset cols="30%,*">
<frame src="menu.html" name="left" noresize>
<frame src="page1.html" name="main" noresize></frameset>
</frameset>
</html>


Em chưa hiểu tại sao dòng code {<frame src="page1.html" name="main" noresize>} này lại chỉ dùng page1.html nhưng khi ta mở trang Index.html ra thì lại có thể click trên link Trang 1, Trang 2, Trang 3 thì nó vẫn ra được các trang 2, 3 trong khi trên đoạn code ta chỉ thể hiện có file page1.html ?

Thắc mắc của em chắc mắc cười lắm nhỉ. Nhưng thật sự vì thời gian và hoàn cảnh nên chỉ tự học nên có nhiều cái tuy đơn giản nhưng vì không có thầy nên mày mò chưa ra.
Go to the top of the page
 
+Quote Post
WOLFBOY
post Aug 13 2008, 12:04 PM
Post #5


The L0n3ly \\//\\//OLF
Group Icon

Group: Admin
Posts: 2,560
Cash: 1,673k
Age: 20
Joined: 27-February 07
From: 1 Nơi Xa Lắm
Member No.: 22,139
Yahoo! Status:



QUOTE
Em đã thử delete đi file Page3.html và sau đó mở trang index.html thì trên trang index.html nó vẫn còn link Trang 3 . Như vậy nếu muốn chỉnh sửa một cái gì đó thì phải làm trên cả các file có liên quan đến page3 (vd như Page3.html, Menu.html, Index.html) vì các file này đều có dòng Trang Thứ 3 .
Như vậy nếu dùng frames thì vẫn phải thay đổi rất nhiều file chứ?
Ý ở đây, thay đổi không phải là xoá đi như bạn nói mà thay đổi nghĩa là thay đổi cái file .html là Banner hay là Menu ấy, chỉ cần thay đổi đường dẫn tới Banner hay Menu đó bằng đường dẫn tới Banner hay Menu khác! Bạn hiểu chứ!
Còn việc tác động liên kết với nhau thì tất nhiên đã thay đổi đường dẫn của một trang .html thì phải thay đổi luôn cả đường dẫn ở những cái liên quan rồi!

Còn vấn đề thứ 2 thì nên coi lại file Menu.html
QUOTE
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<title> Menu </title>
<base target="main">
</head>
<body bgcolor="#FFCC00">
<b><font size="6" > MENU </font></b><br><br>
<a href="page1.html"> Trang I </a><br>
<a href="page2.html"> Trang II </a><br>
<a href="page3.html"> Trang III </a><br>
</body>
</html>

Bạn chú ý dòng in đậm fía trên và dòng in đậm dưới đây sẽ hiểu:
QUOTE
<frame src="page1.html" name="main" noresize>
Go to the top of the page
 
+Quote Post
rosewhite
post Oct 9 2008, 09:13 PM
Post #6


Junior Member
Group Icon

Group: Member
Posts: 3
Cash: 3k
Age: N/A
Joined: 6-May 08
Member No.: 107,481
Yahoo! Status: N/A
Anh ơi làm ơn cho em hỏi
QUOTE
<html>
<script language="JavaScript">function chay()
{

}
</script>
<script language="JavaScript">function ForLoop()
{
var i=2965;
for(i=2965;i>=15;i=i-15)
{
document.write("<frameset cols='10%'>");
document.write("<iframe src='http://abc.com/?id="+i);
document.write("&cat=1'></frameset>");
}
}
</script>
<input id="btnForClick"
type="button" value="For Loop" onclick="ForLoop()"
/>



cái code này, em muốn nó load lần lượt từng trang theo ID nhưng mà nó cứ load hết 1 lượt tất cả các trang, anh có thể sửa lại cho em được không ạ ?
Go to the top of the page
 
+Quote Post
 
BBCode:
HTML:
  Digg this topic · Save to del.icio.us · Slashdot It · Post to Technorati · Post to Furl · Submit to Reddit · Share on Facebook · Fark It · Googlize This Post · Add to ma.gnolia · Tag to Wink · Add to MyWeb · Add to Netscape
 Reply to this topicStart new topic
2 User(s) are reading this topic [2 Guests and 0 Anonymous Users]
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   0 PETER 1,648 9th July 2007 - 12:04 PM
Last post by: PETER
No New Posts   2 PETER 2,208 4th August 2007 - 02:42 PM
Last post by: PETER
No New Posts   2 PETER 1,982 28th September 2007 - 03:50 PM
Last post by: __boy__
No New Posts   0 PETER 2,814 2nd December 2007 - 12:15 PM
Last post by: PETER
No New Posts   0 PETER 961 22nd February 2008 - 06:05 PM
Last post by: PETER

Collapse

> Links to this thread

Page             Date Hits
iframe khng link - Tm với Google 28th November 2008 - 08:22 AM   1
gioi thieu ve web - Tm với Google 28th November 2008 - 10:24 AM   1
thiết kế iframe - Tm với Google 28th November 2008 - 08:55 PM   1
html frame in frame - Tm với Google 29th November 2008 - 09:55 AM   1
tao frame trong website - Tm với Google 30th November 2008 - 10:15 AM   1

RSS Lo-Fi Version Time is now: 5th December 2008 - 09:48 AM
VNPower
Powered By IP.Board 2.3.6 © 2008  IPS, Inc.
VNP © 2008 :: Founded by PETER :: Developed by VNP's members.