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

1、請問一個大型網站的框架是怎麼做出來的，是用photoshop先把整個的首頁設計好嗎？

（先要dreamweaver打出框架，再把你ps好的圖片放到你設想好的位置。dreamweaver才是網頁設計軟體，能將圖片，flash等其他元素組合在一起，還能添加鏈接等等。）
photoshop就是處理圖片，最多能夠切片，能更好應用於dreamweaver，
而dreamweaver打框架是復雜的過程，不是三言兩語能說清楚的，到網上去找視頻看，慢慢學。

2、在網頁設計中，什麼是子框架，父框架和兄弟框架，麻煩各位高手指導下，最好給兩張圖，謝謝了

A與B，來C的關自系：A為BC的父框架，BC為A的子框架；

B，C的關系：BC互為兄弟框架。（希望能幫助到你）。

另外，關於css的特徵繼承的問題：

如果父框架規定，而子框架沒有規定的css屬性，子框架就繼承父框架；

如果父框架，子框架都規定了這個屬性，那麼網頁就讀取子框架的屬性；

3、如何製作框架網頁

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

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

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

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

5、網頁設計圖片和框架都弄好了,該怎麼做了,

寫前台代碼用DW，然後在你的後台開始搭建。

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、利用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>

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

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

9、網頁設計如何在框架下面放入完整的背景圖片不受框架影響

看好了，有志青年~

<!DOCTYPE HTML>

<body>

<img style="top:0;left:0;height:100%;width:100%;position:fixed" src="我是圖片的URL【隨便選擇一張圖片地址替換本段文字】">

<div style="position:relative;">

回<h1><center><font color=#000000>我是內答容【你的內容放在這里】</font></center></h1>

</div>

</body>

</html>

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

網頁框架設計圖

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