導航:首頁 > 萬維百科 > 網頁設計製作框架

網頁設計製作框架

發布時間:2020-12-25 03:31:37

1、網頁製作中框架的作用

框架可以把瀏覽器窗口分成幾個獨立的部分,每部分顯示單獨的頁面,頁面的內容是互相聯系的。如3框架網頁,頂端框架顯示網頁標題,下面左右兩個框架,左邊顯示導航欄,右邊顯示鏈接目標網頁。單擊左邊框架導航欄中的超級鏈接,在右邊框架里顯示超級鏈接的對象。內容非常多的網頁不宜採用框架式結構,所以大網站中幾乎所有的網頁都不是框架式網頁。

2、網頁框架製作模板的問題

■ 什麼是框架型網頁?
如果一個網頁的左邊導航菜單是固定的,而頁面中間的信息可以上下移動,這一般就可以認為是一個框架型網頁。此外,一些框架型站點的模板在其頁面上方放置了公司的LOGO或圖片。不過這一塊也是位置固定的。而頁面的其它部分則可以上下左右移動。有的框架型站點模板還會在其固定區域中放入鏈接或導航按鈕。

在一些關於搜索引擎優化方面的文章中,基本上都認為網站用框架來設計是極不可取的。這是由於大多數的搜索引擎都無法識別網頁中的框架,或者無法對框架中的內容進行遍歷或搜索。

■ 為什麼使用框架的網頁無法被正確索引?
我們將向大家解釋為何使用框架的網頁無法被使用網路蜘蛛(spiders)或網路爬蟲(crawlers) 的搜索引擎(如Google)正確索引的主要原因。在一個框架網頁的後台代碼中,我們一般能夠看到的是網頁的標題標記(Meta Title)、描述標記(Meta Description)、關鍵字標記(Meta Keywords)及其它原標記(Meta Tags),同時你還會看到一個框架集標記(Frameset Tag)。框架中的內容在後台代碼中是無法被體現的,而對於那些主要搜索引擎的搜索程序來說,如Google的GoogleBot和Freshbot,其設計思路都是完全忽略某些HTML代碼,轉而直接鎖定網頁上的實際內容進行索引。這樣一來,網路蜘蛛在那些一般性的框架網頁上根本找不到要搜索的內容。這是由於那些具體內容都被放到我們稱之為「內部網頁」中去了。

使用「Noframes」標記進行優化
使用了框架型網頁並不意味著就完全無法對其網頁進行優化。實際上在HTML標記中,有一個叫做NOFRAME的標記,如果使用得當的話我們就可以有效地對頁面進行優化了,從而使得搜索引擎能夠正確索引你框架網頁上的內容信息。也有網站這樣使用NOFRAMES標記:他們在NOFRAMES標記里放上這么一段話:「本網頁使用了框架,但您的瀏覽器不支持框架。請下載新的瀏覽器觀看。」

讓我們看看那些專業的搜索引擎優化公司是怎麼做的吧。他們在使用了框架的網頁中,有效的提供含有豐富關鍵字和關鍵短語的重要文字和內容,從而有效幫助網站在SERP(搜索引擎搜索結果頁)中取得較高的排名(頁面等級)。

這樣優化的結果,其實就是讓主要搜索引擎不但讀取了你的網頁後台代碼中的標題和其它原標記,而且對那些不支持框架的瀏覽器所無法顯示的頁面內容信息,也進行了索引。如果你出於某種原因非要使用框架結構,那麼請緊記:在你的後台代碼中一定要正確的使用NOFRAMES標記,這一點非常重要。

很顯然,我們所說的這些優化措施,只有對那些網頁內容經過精心撰寫,並且在內容中充分使用了重要關鍵字和關鍵短語的網站才起作用。

綜上所述,不管是使用框架技術的網站還是非框架技術的網站,只要你採用的是恰當的技術和正確的技巧,都可以進行完美的優化從而取得理想的頁面等級。
什麼是框架

前面我們介紹了很多網站的頁面是用表格製作的,還有一種更方便的工具,就是使用框架。
框架的作用就是把瀏覽器窗口劃分為若干個區域,每個區域可以分別顯示不同的網頁。

<iframe></iframe>

將文檔分割為幾個框架後,Dreamweaver會自動產生一個沒名字的框架體文件,比如我們看到的一個簡單的左右框架頁面,實際上包含3個不同的文件,一個是框架體文件,還有兩個在框架中顯示內容的文件。

框架體文件中保存頁面中框架的數量,框架的尺寸、位置及每個框架的網頁源文件和其它可定義的屬性

3、如何製作一個左右框架的網頁

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

4、html網頁框架製作軟體有哪些

以下是主流網頁製作軟體:DREAMWEAVER、FLASH、PHOTOSHOP:
安全下載(中文)
http://.網路.com/question/372608786.html
安全無毒,安裝完成即可永久使用專
支持所有WINDOWS,包括屬XP、WIN7、WIN8 32位和64位

5、網頁製作 怎樣寫框架?

那個也可以使用標簽做的,不過是使用js腳本做的

6、用 DW 做框架 網頁的製作 怎麼弄

所謂框架,就是一個規定位置的文件,和幾個分文件(這幾個文件都是普通的文件,只不過被規定位置的文件調用在同一界面顯示的不同位置罷了)。那上下結構的來說主文件就是通過規定上下兩個Iframe的位置來吧頁面劃成兩塊的,兩個iframe的目標文件分別是兩個分文件。

建立框架的時候DW會要求你命名各個文件的名稱,拿上下結構來說,首先會要你命名主文件,然後會通過虛框在視圖窗口顯示代命名的另外兩個文件
DW默認框架結構各文件是.htm的,你點擊每塊,他會在新窗口打開該文件讓你編輯,保存的時候,要是只想保存各個塊的話就在新窗k口保存,
也可以在主文件上選擇保存全部,把所有的修改都保存

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文件,在瀏覽器中瀏覽效果了,如圖:

8、網頁製作中框架是什麼意思?

框架可以把瀏覽器窗口分成幾個獨立的部分,每部分顯示單獨的頁面,頁面的內容是互相聯系的。框架網頁,頂端框架顯示網頁標題,下面左右兩個框架,左邊顯示導航欄,右邊顯示鏈接目標網頁。單擊左邊框架導航欄中的超級鏈接,在右邊框架里顯示超級鏈接的對象。內容非常多的網頁不宜採用框架式結構,所以大網站中幾乎所有的網頁都不是框架式網頁。

9、如何製作框架網頁?

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

10、怎樣製作框架網頁(急!!!!!!!!)

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

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

與網頁設計製作框架相關的知識