1、如何製作框架網頁
小編以前也不會框架網頁的,但是前段時間小編需要考試。遇到了有關框架網頁的問題,也就去學習了。接下來小編就用接下來的實例來教大家如何製作框架網頁。希望能夠幫助到你們。
我們今天就以下面的例題來學習一下。
請建立一個目錄框架網頁,並按照要求將此文件保存名為page2.html。
要求:在目錄框架網頁建立一個4行1列的表格(高300像素、寬100像素),表格居中,邊框為黃色、背景為綠色;表格中的文字為華文楷體、14磅、加粗、黑色;單元格內容水平方向居右對齊,垂直方向相對底邊對齊;在主框架網頁中新建網頁並插入素材包內的圖片8139.jpg;設置"美食介紹"與素材包內sc7.htm 文件的鏈接,設置"相關新聞"與網站www.sina.com.cn鏈接,設置"相關圖片"與素材包內bg7.jpg文件的鏈接,設置"網路高手"與郵箱[email protected]鏈接
第一步:新建網頁
首先我們打開軟體,選擇菜單欄下「修改」——「框架集」——「拆分為左右框架」。進行三個網頁的保存。
1.整個框架網頁。
選中框架最中間的豎線,當我們看到代碼欄中有「<frameset cols="597,598">」代表我們選取成功。
2.框架網頁的左側
選中左側空白區域即可
3.是框架網頁的右側。
選中右側空白區域即可
如圖:
第二步:製作左邊的框架網頁
首先插入表格並設置基本屬性
1.選擇主菜單下的「插入」——「表格」如圖。
2.接著設置表格的屬性
(4行1列的表格「高300像素、寬100像素」,表格邊框為黃色、背景為綠色。)其中的高,邊框顏色都是使用代碼輸入的。如圖:
3.至於背景和居中我們可以到屬性面板的頁面布局進行設計就可以了。如圖:
第三步:設置css樣式
1.首先打開css面板,選擇該面板的下面的「+」號,出現下圖所示的效果。
2.設置樣式。選擇「id」類型,取名為「stlye1」,保存了「僅存為該文檔」。如圖:
3.設置樣式屬性。「華文楷體、14磅、加粗、黑色」。如圖:
第四步:使用css樣式
1.在表格中書寫相應的文字。如圖:
2.使用樣式。選中所有的文字,然後來到屬性面板。選擇「類」——「stlye1」,我們就設置好css樣式了。如圖:
第五步:設置文字的位置。
選中文字,來到屬性面板,設置「水平」,「垂直」的屬性。如圖:
第六步:設置文字鏈接。
選中「美食介紹」,來到屬性面板,選擇「鏈接」,將我們要鏈接的地址輸入進去就可以了。接下來依次選中其他文字就可以了。效果如下:
(注意:我們先前選中的網頁文件,圖片文件是可以直接填寫的。而網址我們要在前面加上「http://」,郵箱地址要加上"mail to:")
第七步:設置右側網頁
選中右側網頁,選擇「插入」——「圖片」,選擇我們想要插入的圖片我們就完成了。如圖:
此時我們就可以打開htm文件,在瀏覽器中瀏覽效果了,如圖:
2、如何設計這個框架網頁
TM的CF TM的RNM
3、怎樣製作框架網頁(急!!!!!!!!)
先建立框架頁,主要代碼如下:
<frameset cols="131,16,*" framespacing="0" frameborder="NO" border="0" id="mainFrameset">
<frame src="左邊的頁面" name="leftFrame" scrolling="yes" >
<frame scrolling=no noresize="true" name=toogle marginwidth=0 marginheight=0 src="bar.html">
<frame src="右邊的頁面" name="mainFrame" scrolling="yes">
</frameset>
</frameset>
**********************
bar.html 頁面的代碼如下:
<html>
<head>
<style type="text/css">
.o1 {background-color:#718BD6; font-size:10px; color:#ffffff; text-decoration:none;}
body {margin: 0px; background-color: #ffffff; }
</style>
<script language="javascript">
<!--
var iniCols, noCols, o_mf, o_ms, s, o_bt, ImageSrc;
function ini() {
o_mf = parent.document.getElementById("mainFrameset");
o_ms = document.getElementById("menuSwitch");
noCols = iniCols = o_mf.cols;
nn = document.getElementById('img1');
nnSrc = iniSrc = nn.src;
if ((pos = noCols.indexOf(",")) != -1) {
noCols = "0" + noCols.substring(pos);
}
if ((pos = nnSrc.indexOf("bbbb")) != -1) {
nnSrc = "asnew/u" + nnSrc.substring(pos);
}
s = false;
}
function changeLeft(){
s = !s;
o_mf.cols = s ? noCols : iniCols;
nn.src = s? nnSrc : iniSrc;
}
//-->
</script>
</head>
<body onload="ini()" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="10" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="18" background="asnew/bar.gif"><a href="#"><img id="img1" src="asnew/bbbb.gif" width="18" height="8" alt="" onclick="javascript:changeLeft();" border="0"></a></td>
</tr>
</table>
</body></html>
***********
就可以實現了
4、html網頁框架設計。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>四行,第三行三列</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div{
border:10px solid #ccc;
height:250px;
text-align:center;
font-size:50px;
}
.f3 div{
width:31%;
float:left;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div class="f3">
<div>31</div>
<div>32</div>
<div>33</div>
</div>
<div>4</div>
</body>
</html>
5、網頁設計,只用一個網頁怎麼實現框架的功能?
只用一個頁面的話只能用層吧,點擊導航,顯示一個層,隱藏其他層。
網上有許多就js+css寫的滑動門也可以實現類似效果
6、網頁設計中怎麼用框架集設計網頁
首先要了解框架集的概念。
框架集是構造整個框架結構的文檔,它不包含具體顯示的文本和圖像,而只包含如何組織安排各個框架位置、大小和初始頁面信息的設計。
它是框架使用中最基礎的文檔,常稱之為整個框架顯示時的主文檔。
框架集的基本格式如下:
注意到,框架組文檔中,用標記符代替了標記符。而標記符則用來指定每一個子窗口的內容。
1)窗口的分割用來分割瀏覽器窗口,它使用COLS和ROWS這2個屬性項把整個窗口按垂直方向或水平方向分割為多個框架。例如:。該標記符把窗口分成3個垂直的框架,指定左框架寬度值為150象素、中間框架占總寬度的50%,餘下的寬度留給右框架。
由上例可見,框架尺寸除使用象素值和百分數外,還可以使用*和n* ;使用*表示剩餘部分;當使用n*(如2*)時,n值確定框架之間的比例。例如:"*,2*,3*"表示左邊(或上邊)的框架占窗口寬度(或高度)的1/6,中間框架佔1/3,右邊(或下邊)框架佔1/2。
2)標記符的嵌套標記符可以嵌套使用。以構造包含橫向和縱向框架的窗口。以下代碼用嵌套框架結構建立一個多層框架的窗口。框架的實現
3)框架的初始化標記符用於對各個框架進行初始化設置。使用標記符中的SRC屬性指定需要在框架中顯示的頁面的文 褂肗AME屬性指定框架的名稱,以便在指定超級鏈接的目標框架時引用該框架名。標記符的個數應等於框架個數,並依出現的次序和層次先行後列對框架進行初始化。
例如:若要在指定框架顯示某頁面,則必須在SRC指定的URL位置存在指定的HTML文件。這就意味著要在所設計的框架中完整顯示出所有內容,總共要編制頁面個數為「框架數+1」。
7、如何設計網頁框架?
沒有最好的的框架
只有最適合網站定位和內容的框架
一切從實際出發
8、如何製作框架網頁?
框架就是 這個好說,以下是框架:
<html>
<head>
<title>框架示範</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<frameset framespacing="0" rows="80,*" border="0" frameborder="0" >
<frame name="top" scrolling="no" noresize target="contents" src="top.aspx">
<frameset id="mainframe" cols="178,1,*">
<frame name="menu" target="main" scrolling="auto" src="menu.aspx">
<frame name="blank" scrolling="auto" src="blank.aspx">
<frame name="main" scrolling="auto" src="main.aspx">
</frameset>
<frame name="bottom" scrolling="no" noresize target="contents" src="bottom.aspx">
<noframes>
<body topmargin="0" leftmargin="0" >
<p>此網頁使用了框架,但您的瀏覽器不支持框架。</p>
</body>
</noframes>
</frameset>
<body>
</body>
</html>