網頁設計總流程之站點設計的八大完整步驟
來源: | 作者:szhuhang | 發布時間: 578天前 | 1155 次瀏覽 | 分享到:
網頁設計詳細說起來可以分為規劃-設計-開發-檢測-上線這幾個大的步驟,今天互航科技就為網頁初學者來整理一套完整的網頁設計流程,希望能對大家有所幫助,下面就從八個點來說明:
     網頁設計詳細說起來可以分為規劃-設計-開發-檢測-上線這幾個大的步驟,今天互航科技就為網頁初學者來整理一套完整的網頁設計流程,希望能對大家有所幫助,下面就從八個點來說明:
一、規劃站點
Web站點是一組具有同享特點(如相關主題、相似的規劃或共同意圖等)的鏈接文檔。
本地站點:是本地硬盤中存放長途網站所有文檔的地方(文件夾)。
樹立網站的一般做法是:在要地硬盤中樹立一個文件夾用來存放網站的所有文件,往后就在該文件夾中創立和修正文檔。待網頁規劃和測驗好之后,再把它們拷貝到網站上供閱讀者閱讀。



1、規劃站點結構
注:規劃站點的結構之前應先用筆繪出站點的結構圖(如下圖所示是一個典型的學校站點的結構圖)


2、規劃站點的閱讀機制
一般可采用以下的辦法:
創立返回主頁的鏈接
顯現網站專題目錄
顯現當時方位
查找和索引
反應(將網頁創作者或網站管理員發布在網頁上,或創立一個E-MAIL超級鏈接,以運用戶能快速地將信息反應到網站中)
二、創立一個站點
步驟:
1、單擊“文件”---“新建”---“站點”指令(或單擊常用東西欄中“新建網頁”按鈕的下拉箭頭,從翻開的下拉菜單中挑選“站點”指令)
2、挑選一種站點模板或向導
3、單擊“確定”按鈕
三、站點的基本操作
1、翻開站點:“文件”---“翻開站點”
2、刪去站點:
辦法一:在Windows資源管理器中刪去一個站點
辦法二:在FrontPage中刪去站點,在“文件夾”視圖或“網頁”視圖的“文件夾列表”中,右擊站點所對應的目錄,在方便菜單中單擊“刪去”指令


3、站點的設置
“東西”----“站點設置”,有“慣例”、“參數”、“高檔”、“語言”、“導航”、“數據庫”六個選項卡
第二節 運用表格進行網頁布局
一、 刺進表格
1、單擊常用東西上的“刺進表格”按鈕
2、單擊“表格”---“刺進”---“表格”指令
3、運用表格東西欄(“查看”—“東西欄”---“表格”指令)
4、由文本轉化(“表格”—“轉化”—“文本到表格”)一般以階段為分行符號,以逗號或句號為分列符號。


二、   單元格的基本操作
1、挑選單元格(“表格”—“選定”—“單元格”)
Ctrl:可挑選不相鄰的單元格
Shift:挑選多個相鄰的單元格
2、刺進單元格(“表格”—“刺進”—“單元格”)
3、兼并單元格(“表格”—“兼并單元格”或“表格東西欄”上的“兼并單元格”按鈕)
4、拆分單元格(“表格”—“拆分單元格”或“表格東西欄”上的“拆分單元格”按鈕)


三、  填充單元格
1、文本與圖畫填充(“刺進”—“圖片”)
2、對齊文本與圖畫(“表格”—“特點”—“單元格”,“水平對齊方法”、“垂直對齊方法”)
3、修正單元格布景(“表格”—“特點”—“單元格”,“布景”)
4、調整邊框色彩(“表格”—“特點”—“單元格”,“邊框”)
5、改動單元格尺度(“表格”—“特點”—“單元格”,“指定寬度”、“指定高度”)


四、修正表格的行與列
1、挑選行與列
2、刺進行與列(“表格”—“刺進”—“行或列”)
3、均分行與列(“表格東西欄”中的“平均分配行高”或“平均分配列寬”)
4、刪去行與列(“表格東西欄”中的“刪去單元格”按鈕或“表格”—“刪去單元格”指令) 
第三節 運用結構規劃網頁布局
一、知道結構網頁1、結構的概念結構網頁是一種特別的網頁,它將本身分紅幾個區域,每個區域稱作一個結構窗口(一般簡稱為結構)
結構具有以下特性:
每個結構都能夠獨登時顯現一個網頁,各個結構窗口之間能夠設立超鏈接。
每個結構窗口能夠賦予一個姓名,以便其他URL作為方針調用。


2、結構的運用場合(如郵箱、論壇)
一般用結構來顯現在同一個站點中的多個超鏈接,這樣能夠不必閱讀器中的“后退”按鈕而方便的進行閱讀。
結構也適用于相似在線書籍的運用,將目錄顯現在左面的結構中,單擊目錄,右邊結構中顯現相關的章節


二、創立結構網頁1、結構網頁的創立
“文件”—“新建”—“網頁”,挑選“結構網頁”選項卡2、結構網頁模板(10種) “設置初始網頁”
“新建網頁”


三、結構網頁的保存和翻開
結構網頁的保存包含結構網頁本身的保存和結構窗口中網頁的保存。1、結構網頁的保存
“文件”—“保存文件”或“結構”—“保存網頁”2、結構網頁的翻開“結構”—“在新窗口中翻開網頁”


四、 結構網頁的特點1、結構網頁的特點“文件”—“特點”
“結構間距”、“顯現邊框”
2、結構的特點“結構”—“結構特點”


五、調整結構布局1、調整結構窗口的巨細(用鼠標拖動或在“結構特點”對話框中調整)2、結構的拆分
辦法一:“結構”—“拆分結構”(按行或按列拆分)
辦法二:用鼠標拖動拆分(按Ctrl鍵)
3、結構的刪去“結構”—“刪去結構”


六、方針結構
當在結構網頁的某一個結構中界說超鏈接時,需求指定被鏈接的網頁顯現在哪一個結構中,即指定超鏈接的方針結構。
挑選要設置超鏈接的文字或圖畫,“刺進”—“超鏈接”,單擊“方針結構”、“更改方針結構”
第四節 運用導航欄
一、界說導航結構
在網頁內添加導航欄之前,先樹立該站點的導航結構
“視圖”—“導航”按鈕
二、知道導航欄特點
“刺進”—“導航欄”按鈕
“父層”:創立指向當時網頁上一級網頁的超鏈接,并將上一級網頁的標題稱號顯現在導航欄內。
三、創立導航欄(要在閱讀器中才可看到實踐導航欄作用)


四、創立同享邊框
用創立導航欄的辦法只能在一個網頁中創立導航欄,若需求導航欄呈現在站點內多個網頁的相同方位,則可將導航欄刺進網頁的同享邊框內。
右擊修正窗口,單擊“同享邊框”指令
操練二、運用結構規劃一個企業網站的布局
要求有如下內容:關于我們、商品展示、在線訂貨、網上留言、聯系我們、產品目錄、友情鏈接等。
第五節 網頁布局功能的運用
一、創立布局表格 1、創立布局表格翻開一個空白網頁,并切換到“規劃”視圖下,單擊“表格”菜單中的“布局表格和單元格”指令,隨后在右側彈出一個使命窗口,在該使命窗口下面程序提供了多種表格布局模板,在此單擊其間需求的模板即可將該模板添加到網頁中。




2.制作布局表格 假如你對模板中提供的布局表格不太滿足,還能夠用手藝制作的辦法創立一個布局表格。創立時首先在“新建表格和單元格”項中單擊“制作布局表格”,隨后將指針移到操作窗口最左端,然后拖動鼠標即可制作表格。


3、設置表格特點 刺進表格后,還需對表格特點進行設置。在“表格特點”項中設置該表格所需的特點?! √崾荊涸諫柚帽碭袷?,假如要想掩蓋網頁的默許邊距,并讓布局表格跨到文檔窗口的邊緣,能夠將表格中的各個邊距的特點都設置為0。
   
在規劃結構時常常需求調整某一行或列的特點,這時能夠通過表格中列寬和行高的標簽來完結。在操作窗口中單擊布局表格需求調整的邊框,每一側都會呈現顯現列寬和行高的標簽。每個標簽都包含一個下拉箭頭,如更改行高度時,單擊此下拉箭頭彈出一個下拉菜單,挑選“更改行高”指令,在彈出的“行特點”對話框中從頭輸入該行高度值即可。
操練三、運用布局功能規劃學校網站  
要求包含有以下內容:學校簡介、學校新聞、教育教學、學生六合、學校論壇、教師之家等
第六節     網頁布局規劃
一、文本的美化(“格局”—“字體”)
1、輸入文本
2、美化文本(設置文本字體、字號)注:字符的巨細共有6級,其間默許級別是3。3、設置文本作用4、改動文本色彩5、設置字符間距


二、運用邊框與暗影(“格局”—“邊框與暗影”)1、設置邊框2、設置暗影


三、 運用列表(“格局”—“項目符號和編號方法”)
1、添加項目列表 。 
項目列表也稱為無序列表,它將在項現在添加標志符號。能夠將圖片作為新的項方針志。常常運用的項目符號有3種:實心黑點、空心圓圈和實心方塊。


2、添加編號列表
在網頁中的內容存在次序關系時,可運用編號列表。
3、添加界說列表
界說列表就是在網頁內界說詞匯、術語的列表,詳細的界說內容將以首行縮進的方法呈現在列表的下一行。(格局東西欄的“樣式”—“界說的術語”,輸入要詞匯、術語,按回車鍵)
4、設置嵌套列表
要樹立組合列表,能夠先生成第1級列表,然后再生成第2級列表,依此類推。 


樹立組合列表的詳細操作步驟如下:(1)先生成第1級列表(2)將光標移動到擁有第2級列表的第1級列表項意圖結尾,然后按回車鍵。將呈現一個空的列表行。
(3)單擊“格局東西欄”中的“添加縮進”圖標。該行變為一個空白行,是沒有列表編號或項目符號的。再單擊一次“添加縮進”圖標。(4)此刻再依照樹立列表的辦法結構第2級列表。
(5)輸入第2級列表。輸入過程中每次接回車鍵就主動生成第2級列表項目。(6)第2級列表輸入結束后,將光標移到別的方位或者用鼠標在頁面的空白處單擊一下即可完結第2級列表的設置操作。


嵌套列表能夠轉變為可折疊綱要,這樣在閱讀器中閱讀時,就能夠翻開或折疊綱要中的各個級次。生成可折疊綱要的詳細操作步驟如下:(l)按生成復合列表的辦法結構好這個復合列表所有的列表級次。
(2)挑選“格局”菜單中的“項目符號和編號方法”指令,翻開“項目符號和編號方法”對話框,或者在列表中單擊右鍵,從彈出的菜單中挑選“列表特點”指令。
(3)在翻開的對話框中,選中“啟用可折疊綱要”復選框。(4)單擊“確定”按鈕。
操練四、規劃一個介紹陽江景色及特產的網頁
要求:規劃一個網頁介紹陽江的景色及特產,要用到折疊列表的方法來分別介紹陽東、陽西、陽春等的不同區域的景色名勝及特產。
第七節  網頁裝飾規劃
一、添加圖畫
在閱讀器中,能處理的圖片格局只有GIF、JPEG格局和PNG格局等少數幾種圖片。
1、GIF格局圖片    GIF格局最多能支持256種色彩(8位色彩)。能夠具有通明、動畫等特別作用。
2、JPEG格局文件    JPEG格局能夠處理高達1670萬種色彩(24位色彩),所以在需求顯現細微的變化和運用很多的色彩處理照片時常常運用這種格局保存文件。
 
刺進本地計算機上的圖畫(“刺進”—“圖片”—“來自文件”,“從計算機挑選一個文件”)
刺進WEB上的圖畫(“刺進”—“圖片”—“來自文件”,“從WEB閱讀器來挑選網頁或文件”)
二、處理圖畫
1、取舍圖畫(“圖片”東西欄—“取舍”按鈕)
2、設置通明布景(“圖片”東西欄—“設置通明色”按鈕)
三、添加文本(“圖片”東西欄—“文本”按鈕)
四、保存圖畫
注:默許情況下,當時站點的圖畫文件保存在Images文件夾中


五、運用特別作用
1、調整圖片的亮度和對比度
2、圖片的翻轉與旋轉
3、圖片的沖蝕和黑白處理
4、凹凸作用


六、設置圖片對齊方法(“圖片特點”—“外觀”—“布局”—“對齊方法”)
七 運用水平線
水平線是貫穿網頁寬度的細灰條,用于分隔文本或加側重符。添加水平線后,能夠修正其特點來更改寬度、高度、對齊方法和色彩。假如網頁運用了主題,則會運用圖形來替代水平線以匹配主題。
1、刺進水平線
2、設置水平線特點
八、 修正網頁布景(“格局”—“布景”)
1、調整布景色彩
2、調整布景圖案
九、創立交流圖畫(DW 2004)
1、刺進交流圖畫(“刺進”—“圖畫目標”—“鼠標通過圖畫”)
“原始圖畫”、“鼠標通過圖畫”、“按下時,前往的URL”
2、預覽交流圖畫:F12
第八節   創立超鏈接
一、與當時站點的鏈接(“刺進”—“超鏈接”,“查找”當時站點的文件夾方位)
二、與空白網頁的鏈接(“刺進”—“超鏈接”,“創立一網頁并鏈接到該網頁”)
三、與電子信箱的鏈接(“刺進”—“超鏈接”,“制造發送電子郵件的超鏈接”)
四、與Web的鏈接(“刺進”—“超鏈接”,“運用WEB閱讀器來挑選網頁或文件”,ALT+TAB,則網頁地址主動添加到URL中)

五、修正鏈接色彩(“網頁特點”—“布景”,“色彩”—“超鏈接”、“已拜訪的超鏈接”、“當時超鏈接”)
   六、運用圖畫地圖
月 1、創立熱門
   在圖片中創立熱門的詳細操作步驟如下:
   選中要樹立熱門的圖片。圖片被選中后,四周將呈現8個控制方塊,并且“圖片東西欄”被激活。
在“圖片東西欄”中,挑選熱門的形狀的圖標。能夠挑選長方形、圓形或多邊形。
將鼠標移動到圖片中。這時,鼠標指針變成一支筆的模樣。
用鼠標左鍵單擊圖片中要樹立熱門的區域并拖動鼠標來制作熱門。盡量讓熱門和圖片上的特征區域相配合
(   熱門制作結束,圖片中將呈現該熱門的邊框。翻開“刺進超鏈接”對話框,樹立到熱門上的超鏈接的過程與樹立到文本上的超鏈接的過程基本相同。
操練五、規劃一個介紹國際聞名景色的網站
 要求:用到嵌套列表、結構、超鏈接、圖畫熱門等技術。
   以上八大步驟完成完后之后,基本上一個網站建設所需要了解的絕大多數地方相信你都已經熟悉了,對于剛從事網頁設計工作的您來說,可以說已經說一個合格的網頁設計入門人員了。
{ganrao}