設計網頁框架圖_網頁設計頁面線形圖和框架結構圖的區別

1、網頁設計中怎麼用框架集設計網頁

首先要了解框架集的概念。

框架集是構造整個框架結構的文檔，它不包含具體顯示的文本和圖像，而只包含如何組織安排各個框架位置、大小和初始頁面信息的設計。

它是框架使用中最基礎的文檔，常稱之為整個框架顯示時的主文檔。

框架集的基本格式如下：

注意到，框架組文檔中，用標記符代替了標記符。而標記符則用來指定每一個子窗口的內容。

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」。

2、幾種常見網頁布局設計

網站是有網頁構成，這點相信很多的從事網站建設或者是接觸過網站開發的站長應該都清楚，但是你現在的問題是，雖然很多的企業都想要建設網站，但是對於網站的布局了解的並不清楚，下面就跟著我們沃然一起來了解一下網站建設中幾種常見的布局吧。
1、區塊型

2、國字型
3、門戶型
4、Flash型
5、左右框架型
6、拐角型
7、封面型
8、標題正文型
9、上下框架型
10、綜合框架型

3、網頁設計頁面線形圖和框架結構圖的區別

框圖的製作是快速而廉價的，特別是當你使用諸如UXPin、Balsamiq、Axure這樣的軟體來製作的時內候。當容然，線框圖也理當是在設計之初就使用這些工具來製作。
比起創建一個完整細致高保真的線框圖，搜集反饋信息來得更加重要。為什麼這么說呢？
一般而言，大家更注重軟體的功能、信息架構、用戶體驗、用戶交互流程圖、可用性，這些東西，而不是考慮這些因素的美學特徵。同時，在這種情況下，根據需求進行修改也無需涉及代碼調整和圖形編輯。

4、網頁設計應該如何布局

網頁布局類型

網頁布局大致可分為「國」字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型，下面分別論述。 1.

「國」字型:也可以稱為「同」字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內

2. 拐角型:這種結構與上一種其實只是形式上的區別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。

3. 標題正文型:這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。

4. 左右框架型:這是一種左右為分別兩頁的框架結構，一般左面是導航鏈接，有時最上面會有一個小的標題或標致，右面是正文。我們見到的大部分的大型論壇都是這種結構的，有一些企業網站也喜歡採用。這種類型結構非常清晰，一目瞭然。

5. 上下框架型:與上面類似，區別僅僅在於是一種上下分為兩頁的框架。

6. 綜合框架型:上頁兩種結構的結合，相對復雜的一種框架結構，較為常見的是類似於「拐角型」結構的，只是採用了框架結構。 7.

封面型:這種類型基本上是出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個「進入」的鏈接甚至直接在

首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現在企業網站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。

8. Flash型:其實這與封面型結構是類似的，只是這種類型採用了目前非常游戲行的Flash，與封面型不同的是，由於Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果如果處理得當，絕不差於傳統的多媒體。

9. 變化型:即上面幾種類型的結合與變化，比如本站在視覺上是很接近拐角型的，但所實現的功能的實質是那種上、左、右結構的綜合框架型。

5、利用div設計網頁框架結構代碼截圖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>鏃犳爣棰樻枃妗?/title>

</head>

<body>

</div>

<div id="Visiting">First Time Visiting?</div>

<div id="loginbar_conter_left">Sign up for special sales letter and shop with Myeglobal.com

<label>

</label>

</div>

<label>

</label>

</div>

or know more about Myeglobal.com</div>

</div>

</form>

</div>

<div id="banner_right_btn"><a href="#">click here to dress yourself up</a></div>

</div>

<div id="main_title1_conter"><a href="#">BRIDAL FASHION</a><a name="1" id="1"></a></div>

<div id="main_title1_text">From classic A-line to modern mermaid style and ball gowns too, no matter you're glamorous or romantic, we sorted through 1000s of dress designs to pick the wedding dresses you're dreaming for.</div>

</div>

<ul>

<p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1417970">Ball Gown Spaghetti Straps

Bridal Gown</a></p>

<span>Price:US$101.20</span></li>

<p> <a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1432184">Classic Sweatheart Neck Wedding Gown</a></p>

<span>Price: US$88.00</span><br />

</li>

<p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1435490">Sweetheart Pricess Wedding Dresses</a></p>

<span>Price: US$83.60</span><br />

<p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1435520">Custom Strapless Ruffles Wedding Gown</a></p>

<span>Price: US$88.00</span></li>

</ul>

<ul>

<p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1438611">New Princess Style Strapless Wedding Dress</a></p>

<span>Price:US $95.70</span><br />

</li>

<p> <a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1438627">Strapless Custom Made Wedding Dress</a></p>

<span>Price: US$95.70</span></li>

<p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1438739">Simple V Neck Ruffly Bridal Dresses</a></p>

<span>Price: US$91.85</span> </li>

<p><a href="http://www.myeglobal.com/Browse/proct/proctdetail.aspx?flag=1&pid=1440235">Elegant Empire Waistline Bridal Dress</a></p>

<span>Price: US$84.50</span></li>

</ul>

</div>

</div>

<div id="main_title2_conter"><a href="#">FORMAL EVENT</a><a name="2" id="2"></a></div>

<div id="main_title2_text">Got a sociality event invitation? Find your perfect formal gown from DressilyMe formal affair selection. It ranges from black tie affair to cocktail party, and hundreds of designs you're guaranteed to be attractive.</div>

<ul>

<p><a href="http://www.myeglobal.com/proctdetail-1427112-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html">Elegant Deep-V Raised Waistline Dress</a></p>

<span>Price: US$82.50</span></li>

<p> <a href="http://www.myeglobal.com/proctdetail-1427153-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html">Custom Stylish V Neck Floor Length Dress</a></p>

<span>Price: US$82.50</span> </li>

<p><a href="http://www.myeglobal.com/proctdetail-1429448-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html">Glamorous Black Basque Evening Dress</a></p>

<span>Price: US$83.60</span><br />

<p><a href="http://www.myeglobal.com/proctdetail-1431618-china-09Newest-fashion-sytel-Sexy-Beautiful-girls--Prom-Dress-Evening-Dress-top-qualit.html">Custom Sweethear Ruffly Cocktail Dress</a></p>

<span>Price: US$83.60</span><br />

</ul>

<ul>

<p><a href="http://www.myeglobal.com/proctdetail-1436892-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html">Strapless Knee Length A-line Cocktail Dress</a></p>

<span>Price: US$55.00</span><br />

</li>

<p> <a href="http://www.myeglobal.com/proctdetail-1437023-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html">Elegant Queen Anne Neckline Formal Gown</a></p>

<span>Price: US$71.50</span></li>

<p><a href="http://www.myeglobal.com/proctdetail-1437032-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html">Satin Halter Neck Mermaid Dresses</a></p>

<span>Price: US$71.50</span><br />

</li>

<p><a href="http://www.myeglobal.com/proctdetail-1437045-china-Brand-New-Custom-Made-Prom-Dress-Evening-Dress-with-top-quality-and-fashion-styl.html">Spaghetti Straps Evening Dress With Sashes</a></p>

<span>Price:US $71.50</span></li>

</ul>

</div>

</div>

<div id="main_title3_conter"><a href="#">GIRLS'PROM DRESSES</a><a name="3" id="3"></a></div>

<div id="main_title3_text">Ask any girl what is the most important aspect in their long plans for prom night and chances are that you will always hear prom dress. Now it is the time to go prom dress shopping simply online from DressilyMe prom collection.</div>

</div>

</body>

</html>

6、如何製作框架網頁

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

7、網頁設計用框架

這個可以用HTML代碼以及PHP就可以實現的。一般來講，可以通過錨點鏈接或者是Dreamweaver進行。
<a href="鏈接跳轉地址" target="_blank"><img src="圖片地址"/></a>

8、製作網頁，怎麼給框架設一個大的背景圖片？

連接到CSS文件
<link href="style.CSS" type="text/css" rel="stylesheet">
CSS文件裡面:
body{background-img:url(這里是圖片相對位置)}

也可以直接在html文件裡面寫:
<body background-img="圖片相對位置">

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

設計網頁框架圖

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