網(wǎng)頁設(shè)計(jì)與制作教程

西安工業(yè)大學(xué)計(jì)算機(jī)學(xué)院雷聚超1網(wǎng)頁、網(wǎng)站的概念2Web標(biāo)準(zhǔn)3網(wǎng)站的規(guī)劃與設(shè)計(jì)4網(wǎng)站開發(fā)工作流程5網(wǎng)站策劃書撰寫要點(diǎn)6常用網(wǎng)頁制作軟件7網(wǎng)頁設(shè)計(jì)的基本概念8網(wǎng)頁版面設(shè)計(jì)9實(shí)訓(xùn)10網(wǎng)頁的相關(guān)概念第1章網(wǎng)頁設(shè)計(jì)制作概述1.1.1網(wǎng)頁、網(wǎng)站和主頁網(wǎng)頁（WebPage）是存放在Web服務(wù)器上供客戶端用戶瀏覽的文件，可以在Internet上傳輸。網(wǎng)頁是按照網(wǎng)頁文檔規(guī)范編寫的一個或多個文件，這種格式的文件由超文本標(biāo)記語言創(chuàng)建，能將文字、圖片、聲音等各種多媒體文件組合在一起，這些文件被保存在特定計(jì)算機(jī)的特定目錄中。幾乎所有的網(wǎng)頁都包含鏈接，可以方便地跳轉(zhuǎn)到其他相關(guān)網(wǎng)頁或是相關(guān)網(wǎng)站。如果在瀏覽器的地址欄中輸入網(wǎng)站地址，瀏覽器會自動連接到這個網(wǎng)址所指向的網(wǎng)絡(luò)服務(wù)器，并出現(xiàn)一個默認(rèn)的網(wǎng)頁（一般為index.html或default.html），這個最先打開的默認(rèn)頁面就被稱為“主頁”或“首頁”。1.1網(wǎng)頁、網(wǎng)站的概念1.1.2靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁指客戶端的瀏覽器發(fā)送URL請求給WWW服務(wù)器，服務(wù)器查找需要的超文本文件，不加處理直接下載到客戶端，運(yùn)行在客戶端的頁面是已經(jīng)事先做好并存放在服務(wù)器中的網(wǎng)頁。其頁面的內(nèi)容使用的僅僅是標(biāo)準(zhǔn)的HTML代碼，靜態(tài)網(wǎng)頁通常由純粹的HTML/CSS語言編寫。動態(tài)網(wǎng)頁技術(shù)根據(jù)程序運(yùn)行的區(qū)域不同，分為客戶端動態(tài)技術(shù)與服務(wù)器端動態(tài)技術(shù)?？蛻舳藙討B(tài)技術(shù)不需要與服務(wù)器進(jìn)行交互，實(shí)現(xiàn)動態(tài)功能的代碼往往采用腳本語言形式直接嵌入到網(wǎng)頁中。服務(wù)器發(fā)送給瀏覽者后，網(wǎng)頁在客戶端瀏覽器上直接響應(yīng)用戶的動作。常見的客戶端動態(tài)技術(shù)包括JavaScript、ActiveX和Flash等。1.1網(wǎng)頁、網(wǎng)站的概念1.2.1Web標(biāo)準(zhǔn)的概念

Web標(biāo)準(zhǔn)不是某一種標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標(biāo)準(zhǔn)也分為三類：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要為CSS，行為標(biāo)準(zhǔn)主要包括對象模型W3CDOM、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制定的標(biāo)準(zhǔn)，如ECMA（EuropeanComputerManufacturersAssociation）的ECMAScript標(biāo)準(zhǔn)。例如，人體模特?fù)Q衣服和表演。模特就好比數(shù)據(jù)，衣服則是表現(xiàn)形式，模特的表演動作是行為。模特和衣服是分離的，這樣就可以隨意換衣服。1.2Web標(biāo)準(zhǔn)1.2.2建立Web標(biāo)準(zhǔn)的目的簡單地說，建立Web標(biāo)準(zhǔn)的目的是：提供最大利益給最多的網(wǎng)站用戶；確保任何網(wǎng)站文檔都能夠長期有效；簡化代碼，降低建設(shè)成本；讓網(wǎng)站更容易使用，能適應(yīng)更多不同用戶和更多網(wǎng)絡(luò)設(shè)備；當(dāng)瀏覽器版本更新或者出現(xiàn)新的網(wǎng)絡(luò)交互設(shè)備時(shí)，確保所有應(yīng)用能夠繼續(xù)正確執(zhí)行。1.2Web標(biāo)準(zhǔn)1.2.3采用Web標(biāo)準(zhǔn)的優(yōu)點(diǎn)

1．客戶端的優(yōu)點(diǎn)采用Web標(biāo)準(zhǔn)后，客戶端的好處主要體現(xiàn)在以下方面：文件下載與頁面顯示速度更快；內(nèi)容能被更多的用戶所訪問（包括失明、弱視、色盲等殘障人士）；2.服務(wù)器端的優(yōu)點(diǎn)采用Web標(biāo)準(zhǔn)后，服務(wù)器端的好處主要體現(xiàn)在以下方面：更少的代碼和組件，容易維護(hù)；帶寬要求降低（代碼更簡潔），成本降低；更容易被搜尋引擎搜索到；1.2Web標(biāo)準(zhǔn)

在建設(shè)網(wǎng)站之前，需要對網(wǎng)站進(jìn)行一系列的分析和設(shè)計(jì)，然后根據(jù)分析的結(jié)果提出合理的建設(shè)方案，這就是網(wǎng)站的規(guī)劃與設(shè)計(jì)。網(wǎng)站的規(guī)劃與設(shè)計(jì)一般應(yīng)遵循以下三個原則：最大限度地滿足用戶需要；最有效地進(jìn)行資源利用；使用方便，界面友好，運(yùn)行高效；常規(guī)的規(guī)劃與設(shè)計(jì)方法一般有以下三種：自頂向下、自底向上、不斷增補(bǔ)的設(shè)計(jì)方法。1.3網(wǎng)站的規(guī)劃與設(shè)計(jì)

典型的Web開發(fā)工作流程包括以下幾個階段。1）規(guī)劃站點(diǎn)：包括確立站點(diǎn)的策略或目標(biāo)、確定所面向的用戶以及站點(diǎn)的數(shù)據(jù)需求。2）設(shè)置開發(fā)環(huán)境：包括選擇Web應(yīng)用程序服務(wù)器、利用Dreamweaver網(wǎng)頁制作軟件定義站點(diǎn)及數(shù)據(jù)源。3）規(guī)劃頁面設(shè)計(jì)和布局：包括用繪畫工具創(chuàng)建頁面和界面模型，以及使用Dreamweaver、FrontPage布置頁面。4）創(chuàng)建內(nèi)容資源：包括使用Fireworks、Photoshop和Flash創(chuàng)建圖像、視頻等。5）組合、測試和部署站點(diǎn)：包括使用Dreamweaver設(shè)置文本格式、編譯資源，測試代碼將站點(diǎn)發(fā)布到服務(wù)器上。6）維護(hù)站點(diǎn)：包括使用Dreamweaver保持內(nèi)容的更新。1.4網(wǎng)站開發(fā)工作流程案例一：規(guī)劃曙光大學(xué)網(wǎng)站【案例綜述】規(guī)劃曙光大學(xué)網(wǎng)站的結(jié)構(gòu)?！景咐故尽勘緯鴩@著一個完整網(wǎng)站的制作作為主要講解案例，其站點(diǎn)規(guī)劃結(jié)構(gòu)圖及其含義如圖1-1所示。1.4網(wǎng)站開發(fā)工作流程

網(wǎng)站策劃書應(yīng)該盡可能地涵蓋網(wǎng)站規(guī)劃中的各個方面，寫作要科學(xué)、認(rèn)真、實(shí)事求是。以最常見的企業(yè)網(wǎng)站為例，介紹網(wǎng)站策劃書的撰寫要點(diǎn)。1．前期調(diào)研分析2.網(wǎng)站的功能定位3．網(wǎng)站技術(shù)解決方案4．網(wǎng)站內(nèi)容規(guī)劃5．網(wǎng)頁設(shè)計(jì)6．網(wǎng)站維護(hù)7．網(wǎng)站測試8．網(wǎng)站發(fā)布與推廣9．網(wǎng)站設(shè)計(jì)日程表10．費(fèi)用明細(xì)1.5網(wǎng)站策劃書撰寫要點(diǎn)1.6常用網(wǎng)頁制作軟件1.6.1網(wǎng)頁制作工具

網(wǎng)頁制作工具分為“可視化”和“非可視化”兩大類?！翱梢暬本W(wǎng)頁編輯器的優(yōu)點(diǎn)是直觀、使用方便、容易學(xué)習(xí)，在其中制作網(wǎng)頁與在Word中編輯相似，缺點(diǎn)是難以精確達(dá)到與瀏覽器完全一致的顯示效果?！胺强梢暬钡木W(wǎng)頁編輯器，因?yàn)槭怯肏TML代碼來設(shè)計(jì)的，所以控制精確，但是，工作效率太低。1．Dreamweaver2.FrontPage3．AdobeGoLive4．HomeSite5．VisualStudio2008/20106.DelphiIntraweb1.6常用網(wǎng)頁制作軟件1.6.2網(wǎng)頁圖形圖像處理工具使用網(wǎng)頁圖形圖像處理工具可以設(shè)計(jì)、處理適合網(wǎng)頁的圖形圖像。1．Fireworks2.Photoshop3．CorelDRAW1.6常用網(wǎng)頁制作軟件1.6.3網(wǎng)頁動畫制作與特效工具隨著網(wǎng)絡(luò)速度的提高，越來越多的網(wǎng)頁中使用了動畫效果，這些動態(tài)顯示的畫面不僅吸引了瀏覽者的注意力，而且也給原本較呆板的畫面增添了不少生機(jī)。1．Flash2.UleadGIFAnimator1.6常用網(wǎng)頁制作軟件1.6.4網(wǎng)頁上傳工具制作好的網(wǎng)頁要上傳到提供主頁空間的服務(wù)器后，才能讓瀏覽者訪問。上傳工具選擇合適與否將影響對網(wǎng)站更新維護(hù)的效率。1．CuteFTP2.FlashFXP3．LeapFTP4．其他上傳工具（1）UploadNow!上傳工具（2）WS-FTP上傳工具Dreamweaver軟件自身也具有上傳網(wǎng)頁的功能。1.韻6常用鑄網(wǎng)頁旬制作焰軟件1.瞞6.宮5網(wǎng)頁冊設(shè)計(jì)派工具姐的發(fā)哪展動近向20客05年4月18日，坊全球疏知名芬的應(yīng)避用軟牢件公憶司Ad殃ob姓e以34億美拐元的講價(jià)格題收購贊了Ma嚷cr粥om期ed流ia公司研，這賭次收傘購代帽表著國多媒血體產(chǎn)不業(yè)領(lǐng)討域的賭融合塌。隨狡著Ad傻ob蕩e公司獨(dú)對Ma蹦cr返om約ed態(tài)ia公司屠進(jìn)行疫全新術(shù)的整暮合，族勢必夾推出浩更加但強(qiáng)大簡的圖蓄形網(wǎng)乞頁應(yīng)盯用軟牌件，幟為圖蛙形處賤理與慢網(wǎng)頁幻玉制作警開創(chuàng)催出新材的空憶間。膚目前剃網(wǎng)頁甩制作者中的HT舉ML代碼哲與圖填片都豬是單立獨(dú)制估作的短，需顛要美場工人愿員與置網(wǎng)頁擊制作訴人員撤共同辨完成林，但糠是，日隨著爪兩家偽公司倒的合稀并，鞠極有勤可能擴(kuò)推出墻新的炒軟件搬，實(shí)顛現(xiàn)圖顫片與斜網(wǎng)頁嬸的一且體化哀操作疼，提善高網(wǎng)碼頁制憑作的池效率炭。另外籠，F(xiàn)i糕re員wo尚rk關(guān)s和Im銷ag廚eR形ea財(cái)dy在未絮來的緩地位膊，也吵很有老可能邀被已隸經(jīng)強(qiáng)嶼勢的Ph靠ot運(yùn)os屆ho脫p和Fl轉(zhuǎn)as絞h取代方。1.讓7.夏1虛擬惡界面由于危網(wǎng)頁直是通乖過計(jì)迎算機(jī)涌的顯段示通鼠道與故人們挺交流盤的，蝦并不從是現(xiàn)驢實(shí)世速界中買的實(shí)逮際物點(diǎn)體，錯因此欲又被出稱為蔑“虛瞎擬界堂面”型。從竭網(wǎng)絡(luò)丘的角拔度來喂看，腎虛擬鎮(zhèn)界面柄是一角個網(wǎng)退站的丘窗口斬，網(wǎng)攪站中扭的數(shù)街據(jù)庫樓信息鞏、鏈幼接功逢能以優(yōu)及各私種網(wǎng)頭絡(luò)服右務(wù)都栽通過擠這個裁界面盈進(jìn)行劫實(shí)施狡。一遙個網(wǎng)激站的待網(wǎng)頁赤可以脂有多鮮個，枕通常載根據(jù)交需要嘆分層立設(shè)置咬。從平堆面設(shè)援計(jì)的休角度繭來看甩，每挨個虛圖擬界梨面就箭是一營個版乞面，圍可以席利用蹄平面芽設(shè)計(jì)算理念襪對其石進(jìn)行粉設(shè)計(jì)睜。但匆是，書網(wǎng)頁朝畢竟怖是計(jì)煮算機(jī)途技術(shù)區(qū)和多輕媒體補(bǔ)技術(shù)斜的產(chǎn)仰物，湯具有歇某些唐一般側(cè)版面測所沒礎(chǔ)有的鑒特點(diǎn)獵和性腎質(zhì)。飯為了享對虛者擬版誦面進(jìn)休行設(shè)界計(jì)，藝就必蹈須拓逆展設(shè)孫計(jì)的悲范圍嶺，豐站富設(shè)削計(jì)的起手段健，如鞭對于淹版面繡各種戰(zhàn)媒介晝的設(shè)煌計(jì)與詳制作殲，要洞應(yīng)用御一些和新的瓣技術(shù)晃。1.剩7網(wǎng)頁隊(duì)設(shè)計(jì)吐的基漢本概恢念1.搬7.號1虛擬壓界面網(wǎng)頁臺的界隸面通碗過顯派示器灣顯示賣，除金了運(yùn)勸用一烤般版縣面設(shè)硬計(jì)手筍段對匯這個珍虛擬絨界面埋進(jìn)行炒設(shè)計(jì)幸以外凝，還襖需要命針對驕該界青面的堅(jiān)獨(dú)特特之處體進(jìn)行流設(shè)計(jì)態(tài)，這扔就需事要了唉解虛躍擬界肉面的禽獨(dú)特粘之處春。圖2-鳳1包含局多種本多媒踏體的當(dāng)網(wǎng)頁1.某7網(wǎng)頁攪設(shè)計(jì)兼的基宰本概許念1.嘩7.制2網(wǎng)頁連界面都的特褲點(diǎn)網(wǎng)頁抗的界樂面通隨過顯差示器蹄顯示鴉，除口了運(yùn)劍用一認(rèn)般版正面設(shè)蘋計(jì)手齊段對燒這個周虛擬愿界面抗進(jìn)行開設(shè)計(jì)辣以外庸，還稀需要戀針對搬該界爹面的道獨(dú)特候之處你進(jìn)行團(tuán)設(shè)計(jì)斗，這屑就需屬要了望解虛藥擬界月面的添獨(dú)特宇之處隨。其諒主要刑表現(xiàn)棄在以察下幾極個方世面。1．版?zhèn)娉呃沾缫?guī)革范化2.媒介嘆形式立的多崇樣化3．有執(zhí)限的努界面垂顏色袍數(shù)量4．界西面的援嵌套拌性5．具銜有控柜制功罩能1.顧7網(wǎng)頁叫設(shè)計(jì)宅的基剃本概靜念1.冷7.賠2網(wǎng)頁唉界面此的特匙點(diǎn)版面袖尺寸竄規(guī)范算化：身通常楚采用柏顯示舍器的虛標(biāo)準(zhǔn)彎顯示夠模式思。1）80持0像素×6充00像素壇。2）10毛24像素×7蓄68像素跌。3）12世80像素×1蹤蝶02抖4像素氣或更林高。圖2-逮2是采干用不踐同顯介示模燒式顯瓣示的涂迪斯匠尼公惕司網(wǎng)慰站的巨網(wǎng)頁剖。a)陵8們00像素×6雹00像素b)蝴1擇02逮4像素×7領(lǐng)68像素c)前1羊28譜0像素×1電02曉4像素1.岔7網(wǎng)頁助設(shè)計(jì)今的基愚本概淹念1.那7.留3網(wǎng)頁宰的功座能網(wǎng)頁俊是計(jì)準(zhǔn)算機(jī)儀技術(shù)訂和多悟媒體欠技術(shù)斗實(shí)際螞應(yīng)用隸的產(chǎn)屠物，乖因此乳，網(wǎng)侵頁同努時(shí)具劉備計(jì)晨算機(jī)迎技術(shù)撲和多化媒體墳技術(shù)門的基乒本功男能。恒其主缸要功射能包縱括：撞展示退功能迅、超宮鏈接炸功能胸、檢忠索功協(xié)能以撞及統(tǒng)慢計(jì)和截計(jì)算拆功能椅等。1.植7網(wǎng)頁顆設(shè)計(jì)尸的基宰本概權(quán)念1.不8.譯1版面賊編排變原則網(wǎng)頁躁是信欺息傳慨播的優(yōu)一種肢載體虹，在仗設(shè)計(jì)男上同照其他齒出版渾物如淚報(bào)紙者、雜繁志等低有許惱多共德同之糧處，兄也要潮遵循小一些灰設(shè)計(jì)棉的基趨本原垮則。略但是輔，由彼于表腐現(xiàn)形屈式、洗運(yùn)行擔(dān)方式舉不同掩，網(wǎng)局頁設(shè)千計(jì)同霞時(shí)又跑具有湊其特蘭有的可規(guī)律蜜。網(wǎng)豬頁的斤藝術(shù)夸設(shè)計(jì)糊，是營技術(shù)省與藝槽術(shù)的裙結(jié)合卵、內(nèi)寸容與俯形式顯的統(tǒng)枕一。版面沃編排施的首遺要任初務(wù)就吩是根辰據(jù)網(wǎng)癥頁傳叼達(dá)內(nèi)訊容的浸需要惱，將紹不同權(quán)的文亭字和敏圖片委按照鎮(zhèn)一定薦的次夠序用景最合仇理的蘿編排孔和布種局組古成一激個有超機(jī)的胃整體曾并展享現(xiàn)出朝來。歸版面沿編排嘴應(yīng)注滴意以京下幾局點(diǎn)。1．突圈出中態(tài)心，膊理清警主次2.搭配槳合理股，大嫂小呼霸應(yīng)3．圖懂文并鋸茂，沸相得品益彰1.艷8網(wǎng)頁館版面弊設(shè)計(jì)1.頁8.誤2網(wǎng)頁聞排版緞布局鮮的一西般步籍驟（1）構(gòu)份思根據(jù)雙網(wǎng)站嚴(yán)內(nèi)容粘的整圖體風(fēng)袋格，醉設(shè)計(jì)脹版面桃布局著。（2）初頸步填威充內(nèi)鞭容這一施步就烏要把積一些洋主要蔥的內(nèi)櫻容放誦到網(wǎng)潑頁中謎，例廢如，無網(wǎng)站貼的標(biāo)過志、溉廣告禿條、險(xiǎn)菜單呆、導(dǎo)住航條聲、計(jì)僵數(shù)器牢等。（3）細(xì)低化在將遺各主意要元悼素確時(shí)定好蝴之后乘，下隔面就駁可以瀉考慮含文字夕、圖僚像、另表格蓋等頁覆面元縱素的喝排版賞布局菠了。醉在這扛一步襖，設(shè)罰計(jì)者槽可以咽利用儉網(wǎng)頁右編輯為工具喬把草簽案做芒成一視個簡冤略的朵網(wǎng)頁尋，當(dāng)散然，犁對每度一種季元素瓜所占食的比勾例也膽要有哲一個吹詳細(xì)資的數(shù)浙字，嗽以便販以后鬧修改搭。1.鬼8網(wǎng)頁炕版面精設(shè)計(jì)1.為8.蝦3版面躍典型蘿風(fēng)格網(wǎng)頁段的版抹面風(fēng)鬼格與叔廣告搭設(shè)計(jì)遲的版朽面風(fēng)醉格是激統(tǒng)一餅的，訊其目沾的都血是為云了產(chǎn)勻生美耐感、侵提高傾閱讀珠興趣繭、吸替引人勞們的煩注意壟力。封網(wǎng)頁傻的設(shè)擦計(jì)首勤先要營考慮抓風(fēng)格籌的定機(jī)位。陵任何哄網(wǎng)頁激都要豬根據(jù)瞎主題頸的內(nèi)小容來步?jīng)Q定艇其風(fēng)推格與彩形式慶，因姑為只客有形勇式與割內(nèi)容堤的完委美統(tǒng)量一才冠能達(dá)仍到理兇想的筒效果坐。主祥頁風(fēng)傳格的嘉形成跟主要規(guī)依賴鄰于主作頁的替版式翁設(shè)計(jì)辯，依減賴于菌頁面仇的色者調(diào)處胖理，粒還有秤圖片幸與文脆字的田組合追形式眨等。歌這些醬問題范看似吐簡單代，但拉往往肅需要賣主頁嘆的設(shè)愛計(jì)和漲制作移者具刊有一遺定的絮美術(shù)機(jī)素質(zhì)蠟和修姥養(yǎng)。孟與平稻面廣墾告相按比，毯網(wǎng)頁概的總跌體風(fēng)革格是蒙：文憶字較饅多，符可進(jìn)襯行超麻鏈接琴，使異用動勵畫、飛視頻祝、聲危音，衣其信瘦息量歐遠(yuǎn)遠(yuǎn)泛大于痰廣告討。比岡較典招型的何網(wǎng)頁距風(fēng)格腿主要峽有：卷對稱卡型、燙偏置宮型、蜻標(biāo)題眨型和兄混合輕型等態(tài)。1.剝8網(wǎng)頁享版面禽設(shè)計(jì)1.脊8.傘3版面昆典型剃風(fēng)格1.出8網(wǎng)頁筍版面戲設(shè)計(jì)對稱廟型偏置們型標(biāo)題舌型1.見8.睬4網(wǎng)頁悼排版閘布局康的常超用技刺術(shù)（1）CS逢S（層夕疊樣掙式表田）布耕局使用CS昌S布局倦技術(shù)盟能完揚(yáng)全精翁確地阿定位打文本翅圖片央。CS述S對于界初學(xué)睜者來從說顯卷得有罵點(diǎn)復(fù)款雜，門但它武的確屈是一糟種好拜的布賀局方芒法。（2）表帳格布裂局表格賄布局也的優(yōu)船勢在猜于它咱能對說不同璃對象河加以吧處理航，而語又不洗用擔(dān)謙心不侵同對趕象之秘間的險(xiǎn)影響瞧，而把且表踢格在饒定位竊圖片弱和文陶本上怒比用CS末S更加啊方便純。表輔格布拒局惟員一的幣缺點(diǎn)處是，終當(dāng)設(shè)已計(jì)者項(xiàng)使用漏了過紫多的璃表格桶時(shí)，宮會影脈響頁登面的呢下載急速度慎。（3）框遇架布貝局從布怪局上坦考慮越，框莊架結(jié)哪構(gòu)不婚失為職一個支好的首布局辟方法焦。1.陶8網(wǎng)頁鞠版面房誠設(shè)計(jì)1.斷8.苗5色彩毀搭配色彩別是人隨的視立覺中居最敏落感的跟東西切，把趙握好劍頁面撲的色侮彩，香頁面更設(shè)計(jì)秤就成睛功了碼一半窩。好泥的色奪彩運(yùn)剪用能叔使瀏缸覽者掠對網(wǎng)炮站留個下較購深的團(tuán)印象溫。色紫彩和獅諧與麻否，烘是整莖個網(wǎng)顯頁設(shè)恰計(jì)是繳否成桿功的送關(guān)鍵援。色朋彩總芒的應(yīng)撒用原鈔則是楊“總周體協(xié)爭調(diào)，妙局部饒對比肅”，喘網(wǎng)頁披的整贈體色夏彩效南果應(yīng)組該是繩和諧右的，捏只在怖局部定的、湊小范階圍的烘地方瓣突出茄一些緞強(qiáng)烈任色彩績的對龍比。1.濟(jì)8網(wǎng)頁淘版面毫設(shè)計(jì)1.闊8.屠5色彩旱搭配1．首殃屏頁遙面的叢設(shè)計(jì)所謂老首屏蓄頁面霧，是億指在成打開朝一個撫網(wǎng)站錢首頁棟時(shí)，衫不拖裕動畫嘴面右談側(cè)的吊滾動搞條能都夠看證到的龜部分輝，如遼圖2-弦6所示徑。1.角8網(wǎng)頁母版面否設(shè)計(jì)1.胸8.異5色彩跳搭配2.導(dǎo)航其欄的裁設(shè)計(jì)導(dǎo)航世欄是呢網(wǎng)頁訂非常層重要蔽的組仗成部鐵分，拴是引秒導(dǎo)閱龜讀、惕擴(kuò)大漲信息凝量的業(yè)有力指手段沉。圖2-碎7是網(wǎng)崇站的璃導(dǎo)航麗欄。1.論8網(wǎng)頁館版面域設(shè)計(jì)1.春8.卸6設(shè)計(jì)達(dá)規(guī)則網(wǎng)頁知設(shè)計(jì)次與廣姨告、億報(bào)刊耽等平啦面設(shè)贈計(jì)有務(wù)著共督同的炊要求殲，下牽面主流要介盒紹網(wǎng)庭頁的雀特殊瓜之處宰。1．首禮屏頁撐面的罪設(shè)計(jì)2.導(dǎo)航趨欄的炎設(shè)計(jì)3．媒粒介規(guī)免格設(shè)遣計(jì)4．網(wǎng)鳴頁效旋果與估網(wǎng)頁寧效率5．強(qiáng)莖調(diào)整拘體6．網(wǎng)媽頁與扇讀者睜群7．網(wǎng)利頁命科名規(guī)卵則8．及享時(shí)更違新網(wǎng)區(qū)頁1.晚8網(wǎng)頁享版面繼設(shè)計(jì)1.分8.輕7設(shè)計(jì)肅誤區(qū)在設(shè)扯計(jì)網(wǎng)筑頁時(shí)到，如寬果設(shè)陸計(jì)不悉當(dāng)，劑就會員造成單網(wǎng)頁透雖美塘觀，貼但運(yùn)轉(zhuǎn)行緩訪慢，術(shù)甚至呈無法障正常掘運(yùn)行奶的現(xiàn)拴象。綠為了借避免隔上述但現(xiàn)象壇發(fā)生稈，列榴舉幾績個常懂見的沾設(shè)計(jì)趁誤區(qū)壟，以顫便引今起重畝視。1．片棚面追界求版末面效愧果2.使用根縱向罷的導(dǎo)筍航欄3．使略用多浴種媒勾體形狂式4．規(guī)辦則化1.踐8網(wǎng)頁均版面悼設(shè)計(jì)1.明8.砍8案例仇一：扁設(shè)計(jì)狼曙光棕大學(xué)嗓網(wǎng)站體首頁詳版面【案例構(gòu)綜述】使用宮網(wǎng)頁音版面叼設(shè)計(jì)既技術(shù)楚設(shè)計(jì)個曙光呼大學(xué)惡網(wǎng)站團(tuán)首頁晚版面席?！景咐谡故尽渴锕饪勾髮W(xué)辛網(wǎng)站造首頁借版面醫(yī)的效栗果如儀圖2-磚8所示賢。1.湊8網(wǎng)頁愁版面組設(shè)計(jì)1.時(shí)9.宮1實(shí)訓(xùn)都一：碎設(shè)計(jì)逼“愛將家美值食”艙網(wǎng)站濤首頁狐版面【實(shí)訓(xùn)復(fù)綜述】使用菌網(wǎng)頁竭版面襲設(shè)計(jì)爆技術(shù)彈設(shè)計(jì)糧“愛賀家美大食”饑網(wǎng)站諷首頁宇版面柿。【實(shí)訓(xùn)囑展示】“愛家猾美食惡”網(wǎng)址站首堂頁版仆面的若效果允如圖2-欄9所示侄。1.厘9實(shí)訓(xùn)圖2-先9實(shí)例忌效果1．簡適述網(wǎng)動頁、鞏網(wǎng)站敘和主毫頁的黃異同轉(zhuǎn)。2.輪W辜eb標(biāo)準(zhǔn)蝦主要棚由哪3部分盤組成皆？分轎別解貫釋其住含義斤。3．簡碑述網(wǎng)刪站開貴發(fā)的蛾工作猾流程爐。4．簡句述怎帽樣撰基寫網(wǎng)握站策擾劃書握？5．常她用的主網(wǎng)頁野制作扛工具孟有哪慎些？頸分別丟有哪紗些特滅點(diǎn)？6．對逝于現(xiàn)蚊在普護(hù)遍使引用的19協(xié)in顯示優(yōu)器，籮網(wǎng)頁販的版突面尺儲寸設(shè)蜂置為鐘多少負(fù)像素輝合適齡？為簽什么嫌？7．上否網(wǎng)瀏秋覽網(wǎng)賠頁，柳指出蔥這些全網(wǎng)頁端版面擦屬于董哪種劇類型堵。8．色蝕彩搭毛配有糞哪些世原則邀？請溝給出挨幾組傍匹配鉗的色恥彩。9．如桃圖2-栽10所示溜是“獅韻魅疏”網(wǎng)原站的愈首頁德，請閑讀者嫌談?wù)勎r該頁黨面網(wǎng)稼頁版半面設(shè)僻計(jì)的鍛步驟奧。1.凳9習(xí)題1.草10網(wǎng)頁醬的相勵關(guān)概帽念1.苗10誰.1瀏覽匪器1.楚10植.2網(wǎng)頁啟與HT添ML1.政10版.3匯UR務(wù)L、域名與IP地址1.干10橋.4網(wǎng)站上傳伴和下末載1.1灶0.縫5網(wǎng)頁心的HT飽ML構(gòu)成1.蘇10察.6萍H狠TM嚷L常用窯標(biāo)記1.蛛10前.1瀏覽帝器瀏覽呼器是指指將箭互聯(lián)梁網(wǎng)上非的文史本文降檔（糧或其成他類午型的竭文件秀）翻布譯成蔬網(wǎng)頁仙，并剪讓用襖戶與醫(yī)這些賤文件刃交互鞠的一血種軟贏件工黎具，等主要禮用于珍查看鏟網(wǎng)頁辦的內(nèi)繩容?；ヂ?lián)乖網(wǎng)（In步te嫂rn呈et）又臺稱為誦因特倚網(wǎng)，坐是一爪個把夢分布所于世廁界各貪地的內(nèi)計(jì)算晝機(jī)用急傳輸話介質(zhì)蔑互相荒連接射起來壟的網(wǎng)君絡(luò)。In朱te恨r(nóng)n帥et主要扁提供狐的服替務(wù)有竄萬維抓網(wǎng)（WW世W）、臨文件中傳輸痕協(xié)議告（FT嚇P）、膽電子差郵件朝（E-泥ma圾il）及奇遠(yuǎn)程趁登錄血（Te圍ln幅et）等璃。1.具10厚.2網(wǎng)頁甲與HT登MLHT哪ML（Hy校pe蜘r氧Te錯xt刮M脹ar摔ke肉d著La佛ng仇ua少ge）即昌超文嗽本標(biāo)肆記語啊言，很是一狐種用姥來制腦作超剖文本蓮文檔用的簡噸單標(biāo)俱記語號言，墳也是裳制作刺網(wǎng)頁舅的最販基本兵的語桐言，衫它可坐以直污接由往瀏覽籠器執(zhí)乏行。1.凳10石.3倍UR懂L、域蘇名與IP地址UR里L(fēng)也就脊是網(wǎng)饅絡(luò)地摧址，仇是在In物te儀rn舉et上用爆來描們述信鍵息資瞧源，皆并將In無te章rn固et提供傳的服恐務(wù)統(tǒng)濤一編勝址的院系統(tǒng)姑。域名筒類似芝于In綢te壘rn渣et上的貓門牌渡號，令相對擋于IP地址符而言植，更嗚便于哪使用鋒者理仔解和無記憶鼠。IP地址岸是給業(yè)因特飽網(wǎng)上若的每掛臺計(jì)饑算機(jī)某和其困他設(shè)歷備分才配的詳一個朽唯一椅的地石址。逆在IE瀏覽無器的賽地址蔬欄中屯輸入IP地址游“20基1.仗10鍋.3牛8.綠64攀.9黎”，按勵下回挺車鍵灑。1.表10涉.4網(wǎng)站上傳樸和下膚載上傳導(dǎo)（Up員lo兄ad）是脫從本做地計(jì)貫算機(jī)桌（一籃般稱蕉客戶翠端）吸向遠(yuǎn)歇程服煌務(wù)器脅（一巧般稱浮服務(wù)浙器端排）傳即送數(shù)寇據(jù)的撈行為引。下劍載（Do側(cè)wn殊lo駝ad）是渡從遠(yuǎn)汽程服勿務(wù)器擦取回殿數(shù)據(jù)哥到本恩地計(jì)巧算機(jī)憑的過桿程。1.村10衛(wèi).5網(wǎng)頁述的HT堤ML構(gòu)成1.型10嫂.5劣.1文檔標(biāo)記1.日10去.5賭.2頭部標(biāo)記1.割10給.5踏.3主體標(biāo)記1.慰10咸.5耀.4段落提標(biāo)記1.翼10拆.5溫.5文字侮標(biāo)記1.齡10研.5西.1文檔標(biāo)記文檔標(biāo)記奸的語霞法格香式如面下。<H疾TM咱L>..岸..葛..避..援..迷..鄙..減..上..劫..竭..鞏..虜..岔..膽..槽..腹..巡壽..紹..似..專..布..</確HT仰ML王>（1.仁3.竹1）1.果10豬.5輸.2頭部貸標(biāo)記頭部觸標(biāo)記逢（<H暢EA掙D>串…<勇/H僚EA愿D>）包牧含文貧檔的敏標(biāo)題欲信息，頭部勾標(biāo)記達(dá)都不暴可或黃缺，趣但是令其起尖始和紙結(jié)尾渣標(biāo)記奇可省。頭部脾標(biāo)記中最脫常用工的是<T什IT計(jì)LE無>，用耽于給候出文敏檔的校標(biāo)題眉，并治在IE瀏覽耀器中舊顯示常出來會。每膏個文貍檔在<H政EA機(jī)D>跑…<割/H雄EA眠D>中僅徒存在資一個<T幟IT屢LE晝>。（1.炭3.旁2）1.毒10癢.5梢.3主體標(biāo)記主體盯標(biāo)記思（<B蕉OD頭Y>顧…<撲/B品OD滲Y>）包湖含了興文檔珍的內(nèi)欲容，堤用若漿干個呼屬性兇來規(guī)嗽定文庸檔中推顯示歸的背靜景和咽顏色泄。為該點(diǎn)標(biāo)記豆添加王屬性盈的代門碼格充式如篩下。<B漆OD島Y瞧BG毀CO推LO煉R=辛”C鼻ol舊or以“其>..騾..懸..斃..號..悶..不..證..壓..營..輕..冶..檔..仍..騰..欠..受..宜..臂..桿..制..涂..</逝BO扁DY騙>(1銜.3胳.3狹)注意舒背景假顏色扎和文溫字顏至色的特變化川。1.濤10文.5翠.4頸.1注釋挑標(biāo)記<!員--允..斬.-蠻->注釋登標(biāo)記督的格號式為益：<!塌--注釋翼內(nèi)容--裕>注釋第并不央局限棋于一且行，葉長度顫不受毯限制輸。結(jié)窗束標(biāo)財(cái)記與顧開始喇標(biāo)記趴可以只不在灣一行弓上。1.支10選.5騰.4識.2強(qiáng)制雪換行歉和不下?lián)Q行片標(biāo)記<br>、<no韻br>.風(fēng)..鍛</no內(nèi)br>要用HT違ML的標(biāo)壘記來求強(qiáng)制親換行虧、分陰段。<br>放在澡一行疼的末岡尾，毯可以嘴使后亂面的啞文字符、圖溜片、技表格擋等顯才示于經(jīng)下一殺行，篩而又照不會虧在行農(nóng)與行益之間叫留下至空行易，即倍強(qiáng)制暮文本刮換行禿。強(qiáng)任制換括行標(biāo)快記的罵格式駛為：文字<br>不換紅行標(biāo)害記可拾令文仆字不橡能因醬太長唱使瀏冬覽器根無法躍顯示賴而換掀行，鄰它對邁住址梢、數(shù)莖學(xué)公竄式、緣瑞一行顛數(shù)字涌等尤最其有橡用。禿其格瞧式為講：<no幟br>文字</no捷br>(1種.3嗎.4反)1.塞10含.5類.4段落標(biāo)記在網(wǎng)勢頁中段為了啞增強(qiáng)限頁面才的層僚次，卸其中豎的文爬字可中以用啄不同度的大訪小、玩字體炒、字據(jù)型、抗色彩界。用<f耕on傳t>標(biāo)記爬設(shè)置寶字號鄙（<f會on蟻t>被W3旱C列為嶼不建烤議使悲用的堂標(biāo)記騾，以珠后將邀學(xué)習(xí)乎用CS紡S來設(shè)梢定字鏡體）咐。設(shè)柴置文糊字大建小的刃格式羨為：<f殺on赤t余si張ze亂="數(shù)字"暮fa慎ce御="字體遇名"源co密lo燦r=島"色彩">被設(shè)跑置的晌文字</曬fo浮nt所><f隆on鍋t>標(biāo)記郵可設(shè)峽定文屑字的蹤蝶字體然、字詳號和渠色彩軟。si圖ze用來額設(shè)置夾文字叉的大湊小。怠數(shù)字但的取握值范甩圍從1～7，si吼ze取1時(shí)最氏小，園取7時(shí)最遵大。fa禾ce用來逝設(shè)置堡字體很。如郵黑體嗓、宋全體、偏楷體_G愛B2燭31賽2、隸書寒、Ti秘me超s包Ne澡w閘Ro另ma塞n等。co魄lo泊r用來靈設(shè)置份文字涉色彩刺。【1帶.3慢.5潑—1耕.3攀.8面】1.刻10歇.5而.5文字辜標(biāo)記字體拉標(biāo)記<f也on鳳t>正..庫.<廢/f槽on蓬t>1.向10萄.6賠HT旨ML常用勻標(biāo)記1.揚(yáng)10筑.6所.1鏈接鎖標(biāo)記<銀LI矮NK鮮>1.奸10氏.6趕.2段落巨標(biāo)記<P棵>1.膊10恥.6炒.3通用柿塊標(biāo)臣記<D刻IV門>1.摘10肺.6腎.4行內(nèi)年標(biāo)記<S鎮(zhèn)PA盡N>1.輕10眼.6成.5元數(shù)岔據(jù)標(biāo)飼記<M衛(wèi)ET我A>1.滲10萍.6挖.6圖像便標(biāo)記<I名MG撫>1.笛10尋.6嘆.7框架昆容器觸標(biāo)記<F后RA略ME順SE傳T>1.置10啦.6吸.8子框落架標(biāo)掙記<F膜RA悼ME愛>1.址10際.6架.9表格制標(biāo)記<T賄AB伏LE協(xié)>1.謀10殘.6劈燕.1館0浮動拐幀標(biāo)早記<I匠FR惕AM隨E>1.優(yōu)10叛.6日.1貫1滾動內(nèi)標(biāo)記<m墳ar餐qu角ee離>1.失10筋.6傷HT姿ML常用拆標(biāo)記1.拔10著.6葛.1鏈接制標(biāo)記<L登IN劣K>鏈接蠅標(biāo)記<L偶IN奮K>定義黨了文晴檔的辟關(guān)聯(lián)泰，在頭部叫標(biāo)記中可辮包含鉆任意配數(shù)量咐的<L當(dāng)IN享K>。<L師IN乓K初RE無L=臂Gl巡壽os墾sa閑ry蠅H鍋RE池F=”a1橫.h杏tm睡l”>表示足“a1春.h宋tm容l”是沿當(dāng)前沒文檔烘的詞紹匯表茂。<L罩IN扒K海RE育V=遷Su婦bs務(wù)ec邪ti時(shí)on儲H同RE跡F=”a1銜.1免0.窯ht催ml”>表示駕當(dāng)前艱文檔紋是“a1剖.h仰tm昂l”的藥詞匯袖表。1.樹10羊.6見.2段落利標(biāo)記<P威><P紗>…玩</蒜P>定義農(nóng)了一敏個段的塊級犬標(biāo)記，所阻使用層的屬峽性是住“ID喚”屬性徑和“LA萬NG薦”屬性亦。塊標(biāo)惠記是挖相對雜于行繳內(nèi)標(biāo)烈記來雞講的吼，可獻(xiàn)以換字行。拴在沒盯有任跑合布像局屬蘿性的改作用候時(shí)，欣標(biāo)記曲中的勵內(nèi)容習(xí)是自靠動換移行的仿。而達(dá)行內(nèi)斜標(biāo)記蕉的內(nèi)愁容默今認(rèn)時(shí)稿是同波行排佳列，墊直到膝寬度局超出蛙它的綁容器床寬度笑才自瓦動換停行。<p夠a飯li助gn昌="le冶ft油|c枯en艷te蘆r|乏ri襖gh荷t">“I悶D”屬性ID屬性吉為文漫檔指國定了伐一個逃唯一普的身香份標(biāo)告識。<P胖I艦D=嘩F1副>M督y(tǒng)刷fi普rs遞t連Pa紐奉ra晝gr尚ap巖h.社</萬P><P飾I趟D=定F2販>M躺y腸se預(yù)co筐nd趣P石ar震ag裳ra揭ph鼻.<扒/P遙>“L否AN劇G”屬性LA燒NG屬性框指定酒了內(nèi)蝴容所吵使用莊的語檔言。<P務(wù)L濱AN功G=皮en歉>T助hi專s帽pa蹄ra凡gr得ap績h運(yùn)is術(shù)i挪n熔En貝gl序is掉h.柄</請P>(1.沃4.曬2舞2)1.寇10濫.6側(cè).3通用燒塊標(biāo)殼記<D知IV朽><D辭IV肆>…肢</芽DI傷V>可以辰把文窯檔分菊割為肆獨(dú)立宗的部銳分，儉可以航包含他任何芽行內(nèi)洪或塊頃級標(biāo)卻記，煙以及矩多個習(xí)嵌套奇。與很多通用胸屬性睜的聯(lián)標(biāo)合使坊用非濟(jì)常有易效，“CL構(gòu)AS滑S”屬紫性在<D墨I(xiàn)V糾>…流</趴DI鑼V>標(biāo)記腫中的運(yùn)使用酬方法專如下：<D緩IV鉛C從LA申SS課=”斜ne按ws趴”><P豪>T盟hi睡s撲is賢t奸he圍f假ir弄st固n估ew膨s<冰/P侵></泳DI資V><D質(zhì)IV蒼C倉LA殺SS超=”君ne扛ws裳”><P捏>T朝hi度s球is握t躁he籃s汽ec這on美d超ne群ws碎</膊P></里DI煮V>(1.齊4.杜3涼1)1.云10不.6揭.4行內(nèi)紐奉標(biāo)記<S喊PA稠N><S惱PA榮N>肯…<份/S網(wǎng)PA咸N(yùn)>可以甜通過戀使用兆通用跳屬性窮來提翅供外哲加的確結(jié)構(gòu)千，和胸包含扮塊級拋元素蠢的DI絮V相對男應(yīng)?！癝T強(qiáng)YL粥E”屬筍性允督許為乖一個畏單獨(dú)牢出現(xiàn)惰的元療素指豆定樣翼式，嘗比如耀下面縱的例跌子。<P鎮(zhèn)>A公po揚(yáng)pu稅la記r子fo揮nt脫f娘or稱o瘦n-惹sc暗re禿en組r哥ea紙di能ng費(fèi)i遵s<S炮PA橋N占ST冷YL眾E=花”f捉on毀t-fa借mi要ly乒:V花er共da截na”>輝Ve陶rd驕an扛a<遲/S防PA欣N></希P>(1.住4.董4戲1)如果冤想對零例子故中的膚一些肝文字旅進(jìn)行進(jìn)行到加黑壟，看殃例1.怠4.筍4線21.舉10繭.6流.5元數(shù)內(nèi)據(jù)標(biāo)頃記<M夾ET夕A>元數(shù)奸據(jù)標(biāo)討記<M改ET輸A>定義HT崇ML頁面蓮中的鏟相關(guān)喬信息，語法烈格式科如下：<M偏ET伍A他NA孤ME戀="醉"喊CO瘋NT襖EN神T=喜""神>使用烤元數(shù)蜘據(jù)標(biāo)擋記還貴可以企指定藍(lán)編碼壁格式瀉，以僅保證賭網(wǎng)頁麻中的踢漢字步正常虧顯示今，比如棒：<M翻ET望A枝ht粗tp脹-e聾qu楚iv銹="甲Co烏nt駝en敏t-稀Ty默pe膝"瀉co讓nt毀en米t=倒"t握ex動t/顧ht皂ml央;ch盟ar蟲se可t=g萍b2傾31聯(lián)2"毯/爺>（1.凡4.爺5慎1）1.喇10殿.6乓.6圖像慚標(biāo)記<I使MG測><I謝MG嚴(yán)>行內(nèi)戚標(biāo)記抄定義畜了一脫個行項(xiàng)內(nèi)圖狹像，問使用叔格式誦如下段所示姥。<im薪gsr今c="lo著tu螺s.余jp承g(shù)"猛al識t=槽"蓮花荷之美"擾bo挽rd顏er宿=1偵0換wi獎dt濃h=客40斜0肉he欠ig梯ht棵=3灰00醒a(bǔ)尺li孟gn去=l頓ef菜t>（1.宗4.切6星1）1.擇10煙.6蓮.7框架賀容器依標(biāo)記<F卻RA掩ME洗SE爭T><F鉗RA壓ME韻SE卵T>趟…<扒/F肯RA喂ME誕SE妖T>是一牢個框?qū)懠苋莘财?，螞取代城?lt;B并OD版Y>刃…<賞/B描OD寬Y>的位飄置，傅緊接<H闊EA紗D>標(biāo)記止之后怖。該標(biāo)記悠要用駛到的或?qū)傩杂小癛O哨WS訊”、“CO鄉(xiāng)豐LS暑”、“ON筋LO德AD房誠”、“ON規(guī)UN事LO智AD余”以及除了盟“LA魔NG”和敞“DI舟R”屬違性之簽外的殃通用筋屬性?？蚣転⑷萜髟试S墨在一誤個窗庸口展液現(xiàn)多遵個獨(dú)裂立的紹文檔臨。RO桌WS：多末重框胡架的會高度男值CO達(dá)LS：泄多治重框殲架的供寬度替值1.愁10鼠.6慚.8子框要架標(biāo)安記<F儲RA