製作框架網頁教學設計_如何製作框架網頁

1. 如何製作一個左右框架的網頁

若要製作一個站點，這個站點是左右的框架結構，左側框架顯示導航頁面，右側框架顯示主內容，需要做的是將這兩個頁面合成一個左右框架結構的頁面。步驟一：使用前面介紹的方法，首先將一個新建的空白頁面分割成左右結構的框架。步驟二：選中「框架」面板中的左框架，單擊屬性面板中「源文件」文本框右側的「瀏覽文件」按鈕，在彈出的對話框中選擇左頁面。步驟三：同理，選中「框架」面板中的右框架，單擊屬性面板中個「源文件」文本框右側的「瀏覽文件」按鈕，在彈出的對話框中選擇右頁面。步驟四：這時，框架的左右兩側就將已經製作好的頁面顯示出來了。步驟五：選中「框架」面板中的總框架集，然後執行「文件--保存框架頁」命令，將其保存。步驟六：選擇「框架」面板中的總框架集，在屬性面板中設置「邊框」為「否」，邊框寬度為「0」，選擇縮略圖中的左框架，設置其寬度為「130像素」，然後選擇右框架，設置其寬度為「相對」。步驟七：選擇「框架」面板中的左框架，在屬性面板中，設置「滾動」為「否」，即指定在左側框架中不顯示滾動條。選中「不能調整大小」復選框，令訪問者無法通過拖動框架邊框調整框架大小。將「邊框」設置為「否」，在瀏覽器中將隱藏當前框架的邊框。步驟八：選擇「框架」面板的右框架，在屬性面板中設置：「滾動」為「自動」，當瀏覽器窗口中沒有足夠的空間來顯示當前框架的完整內容時才顯示滾動條。選中「不能調整大小」復選框，將邊框設置為「否」。

2. 框架的網頁設計

框架是網頁中經常使用的頁面設計方式，框架的作用就是把網頁在一個瀏覽器窗口下分割成幾個不同的區域，實現在一個瀏覽器窗口中顯示多個HTML頁面。使用框架可以非常方便的完成導航工作，讓網站的結構更加清晰，而且各個框架之間決不存在干擾問題。利用框架最大的特點就是使網站的風格一致。通常把一個網站中頁面相同的部分單獨製作成一個頁面，作為框架結構的一個子框架的內容給整個網站公用。
一個框架結構有兩部分網頁文件構成：
框架Frame：框架是瀏覽器窗口中的一個區域，它可以顯示與瀏覽器窗口的其餘部分中所顯示內容無關的網頁文件。
框架集Frameset：框架集也是一個網頁文件，它將一個窗口通過行和列的方式分割成多個框架，框架的多少根據具體有多少網頁來決定，每個框架中要顯示的就是不同的網頁文件。
所謂框架就是把網頁分成幾個框窗，同時取得多個 URL。<frameset>用來劃分框窗，每一框窗有一個<frame>，<frame>必須在<frameset>范圍中使用。如：<frameset cols=50%,*><frame name=hello src=1.html> <frame name=hi src=2.html></frameset>此例中 <frameset> 把畫面分成左右兩相等部分，左面顯示 1.html，右面顯示 2.html

3. 做一個簡單框架集網頁

我學過dreamwaver。你需要先建個站點。然後打開軟體，在打開後，你需要自己打開個框架內，一般的我們選擇3 個起名為容TOP。left.mian,然後分別製作你的這些框架。選中某個字或者幾個字然後在找超鏈接的那個圖片或者製作好了的比如，你在top哪個框架里選中幾個字然後鏈接在製作好的left。當你點擊top上選中的超鏈接的幾個字時她們會在left上變動。

4. 怎樣製作框架網頁（急！！！！！！！！）

先建立框架頁，主要代碼如下：
<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">

</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>

***********
就可以實現了

5. 如何製作框架網頁

框架就是這個好說,以下是框架:
<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>

6. 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>

7. 如何製作框架網頁

小編以前也不會框架網頁的，但是前段時間小編需要考試。遇到了有關框架網頁的問題，也就去學習了。接下來小編就用接下來的實例來教大家如何製作框架網頁。希望能夠幫助到你們。
我們今天就以下面的例題來學習一下。
請建立一個目錄框架網頁，並按照要求將此文件保存名為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文件，在瀏覽器中瀏覽效果了，如圖：

導航:首頁 > 視頻設計 > 製作框架網頁教學設計

製作框架網頁教學設計

與製作框架網頁教學設計相關的資料