網(wǎng)頁設計與制作案例教程電子教案第29單元

第15章網(wǎng)站規(guī)劃與網(wǎng)頁設計前面各章主要學習了網(wǎng)頁制造的技術和方法，要制造出優(yōu)美的網(wǎng)頁，首先應對網(wǎng)站進展規(guī)劃，對網(wǎng)頁進展設計。設計網(wǎng)頁應遵照一定的規(guī)那么，學習網(wǎng)頁設計必需了解網(wǎng)頁設計的根本原理和方法，為網(wǎng)頁設計和制造提供實際指點和方法支持。課程引導知識技藝目的〔1〕掌握網(wǎng)站的開發(fā)流程，了解網(wǎng)站的規(guī)劃與組織?！?〕掌握網(wǎng)頁設計的根本原理與方法。網(wǎng)頁閱讀效果展現(xiàn)“長沙世界之窗〞旅游網(wǎng)站首頁index.html的閱讀效果如圖15-1所示。圖15-1“長沙世界之窗〞網(wǎng)站首頁的閱讀效果本章操作義務〔1〕在站點“長沙世界之窗〞下創(chuàng)建文件夾“16網(wǎng)頁設計〞，在該文件夾中創(chuàng)建一個命名為“index.html〞的網(wǎng)頁〔2〕運用本章所學習的方法和技巧對該網(wǎng)頁15.html的頁面規(guī)劃、顏色搭配、文字圖像進展合理調整和優(yōu)化。15.1網(wǎng)站的規(guī)劃與開發(fā)流程15.2網(wǎng)頁的設計原理與技巧15.1網(wǎng)站的規(guī)劃與開發(fā)流程網(wǎng)站的根本開發(fā)流程如下：第一個階段：規(guī)劃和預備階段〔1〕需求分析、決議網(wǎng)站的主題、風格〔2〕搜集資料、預備素材并進展整理修正〔3〕規(guī)劃網(wǎng)站構造和頁面版式15.1.1網(wǎng)站的開發(fā)流程第二個階段：網(wǎng)頁設計、制造階段〔1〕網(wǎng)站總體設計〔2〕設計界面、制造網(wǎng)站中的各個網(wǎng)頁〔3〕將各個網(wǎng)頁經(jīng)過超鏈接進展整合第三個階段：網(wǎng)站的發(fā)布、推行與維護階段〔1〕測試、調試與完善網(wǎng)站〔2〕發(fā)布與推行網(wǎng)站〔3〕維護與更新網(wǎng)站1．網(wǎng)站需求分析15.1.2網(wǎng)站規(guī)劃與組織網(wǎng)站是向閱讀者提供信息的一種方式，必需明確設計網(wǎng)站的目的和用戶需求，從而做出真實可行的設計方案，網(wǎng)站設計的第一步就是進展網(wǎng)站需求分析。在著手設計網(wǎng)站之前，要確定好網(wǎng)站的主題。網(wǎng)站稱號要合法、合情、合理2．謀劃網(wǎng)站主題和內容確定好網(wǎng)站的主題后，就要根據(jù)該主題確定網(wǎng)站的風格，網(wǎng)站風格是指網(wǎng)站的外觀和表現(xiàn)方式，要明確網(wǎng)站的類型，根據(jù)網(wǎng)站類型確定網(wǎng)格的風格，不同類型的網(wǎng)站具有不同的風格，版面設計、顏色搭配也各有特點。3．規(guī)劃網(wǎng)站風格網(wǎng)站風格經(jīng)過網(wǎng)站中的頁面來表達的，最主要的是經(jīng)過首頁來表達的。詳細包括頁面的版式構造、顏色搭配、圖像動畫的運用等方面。規(guī)劃網(wǎng)站構造首先要建立一張站點圖，站點圖中包括站點一切的關鍵頁面、它們之間的相互關主要的鏈接等，設計網(wǎng)頁的主要技術要點也應規(guī)劃好。4．規(guī)劃網(wǎng)站構造〔1〕規(guī)劃網(wǎng)站的欄目構造劃分信息的方法有兩種：一種是自頂向下劃分，另一種是自下而上劃分?！?〕規(guī)劃網(wǎng)站的目錄構造構建目錄構造的根本要求有：不要將一切文件都存放在根目錄下按欄目內容建立子目錄在每個主目錄下都建立獨立的image、flash、music子目錄目錄的層次不要太深〔3〕規(guī)劃網(wǎng)站的鏈接構造網(wǎng)站的鏈接構造常用的有兩種根本方式：樹狀鏈接構造同，網(wǎng)狀鏈接構造。實踐運用中，將兩種鏈接構造混合運用。15.2網(wǎng)頁的設計原理與技巧1．用戶致上原那么2．易用性原那么3．適用性原那么15.2.1網(wǎng)頁設計的根本原那么1．網(wǎng)頁版式類型15.2.2網(wǎng)頁版面規(guī)劃設計〔1〕“國〞字型〔2〕拐角型〔3〕上下型〔4〕左右框架型〔5〕上下框架型〔6〕綜合框架型〔7〕封面型〔8〕Flash動畫型網(wǎng)頁頁面內容主要包括文字和圖像，文字又分為標題和正文，主要思索以下幾點：〔1〕主次清楚、中心突出〔2〕大小搭配、相互呼應〔3〕圖文并茂、相得益彰〔4〕適當留空、明晰易讀2．網(wǎng)頁頁面內容的編排〔1〕利用留空和劃線進展分塊〔2〕利用色塊進展分塊〔3〕利用線框分塊3．網(wǎng)頁版面內容的分塊Logo是網(wǎng)站的標志、名片，好像商標一樣，Logo是網(wǎng)站特征和內涵的集中表達。Logo標志可以是中文、英文字母，也可以是符號、圖案，還可以是動物或者人物等。標志的設計創(chuàng)意來自網(wǎng)站的稱號和內容，可以分為三個方面：15.2.3網(wǎng)站標志Logo設計〔1〕網(wǎng)站有代表性的人物、動物、花草，可以用它們作為設計藍本，加以卡通化和藝術化?！?〕網(wǎng)站有代表性的物品，可以用物品作為標志?！?〕用本人網(wǎng)站的英文稱號作標志，采用不同的字體、字母的變形制造標志?！镎n堂實際★翻開網(wǎng)站“課堂實際〞文件夾“16網(wǎng)頁設計〞中網(wǎng)頁文檔“16.html〞，運用本章所引見的方法和技巧對該網(wǎng)頁的頁面規(guī)劃、顏色搭配、文字圖像進展合理調整和優(yōu)化。然后閱讀其效果，直到本人以為稱心為止。★課外拓展實際★在“湖鐵職院學院網(wǎng)站〞站點文件夾“16網(wǎng)頁設計〞中創(chuàng)建網(wǎng)頁index.html，并運用本章所學習的方法和技巧對網(wǎng)頁的版式構造、導航欄設計、顏色搭配、文字效果、網(wǎng)頁特效等方面進展美化、優(yōu)化?！锉菊滦〗Y★