電子商務(wù)網(wǎng)頁制作-項(xiàng)目一

1、項(xiàng)目一 賞析電子商務(wù)網(wǎng)站頁面項(xiàng)目綜述 通過比較和分析，掌握電子商務(wù)企業(yè)網(wǎng)站和典型電子商務(wù)網(wǎng)站的設(shè)計(jì)需求、頁面組成部分、常見布局方式和配色方法，通過學(xué)習(xí)能夠模仿同類網(wǎng)站進(jìn)行設(shè)計(jì)規(guī)劃。項(xiàng)目目標(biāo)能力目標(biāo)：學(xué)習(xí)完本項(xiàng)目后,學(xué)生應(yīng)當(dāng)能夠依據(jù)不同的網(wǎng)站、網(wǎng)店設(shè)計(jì)需求對(duì)網(wǎng)站進(jìn)行合理的結(jié)構(gòu)規(guī)劃,包括:(1)分析網(wǎng)站的配色方案。(2)分析網(wǎng)站的版式結(jié)構(gòu)。(3)編寫簡(jiǎn)易網(wǎng)站賞析報(bào)告。(4)模仿同類網(wǎng)站進(jìn)行規(guī)劃設(shè)計(jì)。知識(shí)目標(biāo)：(1)網(wǎng)頁基礎(chǔ)知識(shí)。(2)網(wǎng)頁的基本構(gòu)成。(3)網(wǎng)站的構(gòu)成和風(fēng)格設(shè)置。(4)網(wǎng)頁布局的常用結(jié)構(gòu)。(5)網(wǎng)站的規(guī)劃原理。Part 01任務(wù)一借鑒分析典型電商企業(yè)網(wǎng)站的結(jié)構(gòu)任務(wù)引導(dǎo) 本任務(wù)的目標(biāo)是

2、通過分析店慶電商企業(yè)網(wǎng)站的結(jié)構(gòu)掌握電商網(wǎng)站的需求分析、布局結(jié)構(gòu)分析和色彩應(yīng)用分析，然后了解基本的網(wǎng)站需求分析方法、常見排版方式和配色方式。任務(wù)實(shí)施電商企業(yè)網(wǎng)站的需求分析電商企業(yè)網(wǎng)站的布局結(jié)構(gòu)分析電商企業(yè)網(wǎng)站的色彩應(yīng)用030201知識(shí)分析1.網(wǎng)站規(guī)劃的市場(chǎng)調(diào)研 網(wǎng)站的規(guī)劃是指在網(wǎng)站建設(shè)前確定好網(wǎng)站的主題和功能目標(biāo)后，對(duì)網(wǎng)站目標(biāo)定位，進(jìn)行的內(nèi)容規(guī)劃和功能規(guī)劃。其中直接的表現(xiàn)就是網(wǎng)站結(jié)構(gòu)的規(guī)劃，特別對(duì)于網(wǎng)站前端部分而言，更為關(guān)注的是網(wǎng)站的欄目設(shè)計(jì)。 對(duì)于確定網(wǎng)站的主題和功能目標(biāo)而言。就是明確該電商企業(yè)網(wǎng)站建立的目標(biāo)是企業(yè)形象展示，還是用于與用戶之間進(jìn)行交互、社群營(yíng)銷改進(jìn)服務(wù)；還是單純要實(shí)現(xiàn)網(wǎng)絡(luò)營(yíng)銷與

3、在線交易為主的。其次，是分析考慮企業(yè)自身的經(jīng)營(yíng)狀況，包括企業(yè)的主營(yíng)產(chǎn)品的情況，消費(fèi)市場(chǎng)的認(rèn)知程度以及所處行業(yè)狀況。目標(biāo)明確后，就是市場(chǎng)分析，分析網(wǎng)絡(luò)中企業(yè)現(xiàn)有的同類型公司的網(wǎng)站情況。若是比較大的網(wǎng)站，那么往往還需要進(jìn)行調(diào)研面對(duì)市場(chǎng)人群的詳細(xì)情況，進(jìn)行目標(biāo)客戶分析。最后再進(jìn)行可行性分析評(píng)估。知識(shí)分析2. 競(jìng)品分析競(jìng)品分析通常包括背景分析和定位分析兩方面：背景分析主要包括公司的資源、團(tuán)隊(duì)的背景，人員構(gòu)成、組織架構(gòu)、公司愿景、成本構(gòu)成。通過背景分析，可以深入了解公司的現(xiàn)狀，公司的風(fēng)格。 知識(shí)分析3. 基于柵格化設(shè)計(jì)原理的網(wǎng)頁布局 柵格系統(tǒng)應(yīng)用于設(shè)計(jì)領(lǐng)域已經(jīng)至少50年了。柵格化讓眼睛瀏覽信息更加愉悅。

4、從報(bào)紙、雜志，到手機(jī)界面，柵格系統(tǒng)全面滲透到各種信息傳達(dá)的界面當(dāng)中。1692年，法國(guó)國(guó)王路易十四感到法國(guó)的印刷水平強(qiáng)差人意，因此命令成立一個(gè)管理印刷的皇家特別委員會(huì)。他們的首要任務(wù)是設(shè)計(jì)出科學(xué)的、合理的，重視功能性的新字體。知識(shí)分析3. 基于柵格化設(shè)計(jì)原理的網(wǎng)頁布局 （1）960柵格化系統(tǒng) 960柵格化系統(tǒng)是由Nathan Smith創(chuàng)造的，具體來講，就是基于960像素寬度，通過劃分具有規(guī)律的分割，來提高網(wǎng)頁開發(fā)效率。如下圖所示：將960像素的頁面平均分成12分，間隔10像素。960像素12柵格分割示意圖知識(shí)分析3. 基于柵格化設(shè)計(jì)原理的網(wǎng)頁布局 （1）960柵格化系統(tǒng) 960柵格化系統(tǒng)系統(tǒng)（

5、或者說適應(yīng)型css構(gòu)架）早期主要用來進(jìn)行快速原型制作，減少重復(fù)單調(diào)的工作，但是目前，它在網(wǎng)頁設(shè)計(jì)開發(fā)項(xiàng)目中開始扮演非常重要的角色。它為我們的設(shè)計(jì)提供一個(gè)堅(jiān)實(shí)的坐標(biāo)基礎(chǔ)。960像素12柵格分割示意圖知識(shí)分析3. 基于柵格化設(shè)計(jì)原理的網(wǎng)頁布局 （2）柵格計(jì)算方法 在網(wǎng)頁設(shè)計(jì)中，我們把寬度為“W”的頁面分割成n個(gè)網(wǎng)格單元“a”，每個(gè)單元與單元之間的間隙設(shè)為“i”,此時(shí)我們把“a+i”定義“A”。他們之間的關(guān)系如圖所示柵格化計(jì)算方法示意圖W =（an）+（n-1）i由于a+i=A，可得：(An) i = W拓展練習(xí)1.版心 版心是頁面中主要內(nèi)容所在的區(qū)域。版面上除去周圍白邊，剩下的以文字和圖片為主要組

6、成的部分就是版心。在對(duì)網(wǎng)頁進(jìn)行布局設(shè)計(jì)的過程中，也精彩用到版心的概念，而版心的大小通常和顯示器的寬度有關(guān)。面對(duì)不同的顯示器寬度常用的版心尺寸分別由：920像素、960像素、1000像素、1200像素。隨著顯示器的不斷變寬，用戶越來越喜愛寬屏所帶來的視覺體驗(yàn)，1400像素的版心尺寸也逐漸普及。拓展練習(xí)2.網(wǎng)頁設(shè)計(jì)常用尺寸 網(wǎng)頁設(shè)計(jì)因其載體的限制，要充分考慮到設(shè)備的尺寸，在設(shè)計(jì)頁面的過程中，設(shè)計(jì)師往往會(huì)根據(jù)屏幕大小來設(shè)計(jì)頁面每個(gè)部分的寬窄，通常一個(gè)靜態(tài)屏幕所展示頁面的寬高可以稱之為一屏，一個(gè)完整的頁面是由多屏組成的。 一屏的寬度由顯示器寬度決定，再根據(jù)不同的瀏覽器進(jìn)行微調(diào)。在顯示器的尺寸上減去20

7、像素到30像素不會(huì)出現(xiàn)水平滾動(dòng)條。但在實(shí)際操作中，我們通常只會(huì)對(duì)網(wǎng)頁中的主體部分進(jìn)行設(shè)計(jì)，將主體放在屏幕中間，兩邊留白，或者插入大的背景圖。因此網(wǎng)頁的寬度很大程度上會(huì)和版心尺寸保持一致。通常是920像素到1400像素之間。而一屏的高度通常會(huì)在600像素到800像素之間，如果超過800像素，那么該部分內(nèi)容就不能在一個(gè)靜態(tài)屏幕上完整顯示，會(huì)進(jìn)一步影響用戶的體驗(yàn)。拓展練習(xí)3網(wǎng)頁廣告常用尺寸 網(wǎng)頁中，不同類型的廣告通常會(huì)有不同的不同的尺寸，如下表所示。網(wǎng)頁中的廣告并沒有絕對(duì)的尺寸大小，在實(shí)際使用中，可以根據(jù)不同的情況進(jìn)行調(diào)整。序號(hào)尺寸（單位：px）用途1120*120適用于產(chǎn)品或新聞?wù)掌故尽?.12

8、0*60主要用于做LOGO使用。3.120*90主要應(yīng)用于產(chǎn)品演示或大型LOGO。4125*125適于表現(xiàn)照片效果的圖像廣告。5234*60適用于框架或左右形式主頁的廣告鏈接。6392*72主要用于有較多圖片展示的廣告條，用于頁眉或頁腳。7468*60，應(yīng)用最為廣泛的廣告條尺寸，用于頁眉或頁腳。888*31主要用于網(wǎng)頁鏈接，或網(wǎng)站小型LOGO。習(xí)題1.根據(jù)所講5種網(wǎng)頁布局方式，為每種布局尋找一個(gè)具體的網(wǎng)站案例并進(jìn)行分析。2.以“農(nóng)業(yè)電商app”為主題，收集相關(guān)信息，并進(jìn)行競(jìng)品分析。Part 02任務(wù)二借鑒賞析典型電商網(wǎng)站任務(wù)引導(dǎo)無論是作為設(shè)計(jì)師還是使用網(wǎng)站的客戶，我們都需要有一定的審美能力去辨

9、別不同的網(wǎng)頁。本任務(wù)的目標(biāo)是通過瀏覽“名城房產(chǎn)”、“恒生電子”等中小企業(yè)的網(wǎng)站,來分析其頁面布局、網(wǎng)站欄目構(gòu)成、色彩搭配等,以便為同類型企業(yè)規(guī)劃設(shè)計(jì)網(wǎng)站。TEXT HERETEXT HERETEXT HERETEXT HERESupporting text her e.Supporting text her e.Supporting text her e.Supporting text her e.Supporting text her e.Supporting text her e.知識(shí)分析1.WWW WWW是World Wide Web的縮寫,也可以簡(jiǎn)稱為Web,中文名字為萬維網(wǎng)。是Int

10、ernet眾多服務(wù)應(yīng)用中最普及、功能最豐富、最常見的一個(gè)。平時(shí)上網(wǎng)瀏覽的網(wǎng)頁正是萬維網(wǎng)頁面,網(wǎng)頁設(shè)計(jì)與制作也可稱為Web設(shè)計(jì)與制作。 WWW是由遍布在Internet上的許多互相鏈接的超文本文檔組成的系統(tǒng),它將不同信息資源以網(wǎng)頁的形式,由統(tǒng)一資源定位符(Uniform/Universal Resource Locator, URI)進(jìn)行標(biāo)識(shí),通過超鏈接(Hyperlink)和超文本傳輸協(xié)議(HyperText Transfer Protocol,HTTP)有機(jī)地聯(lián)系在一起,可使用Web瀏覽器軟件進(jìn)行瀏覽。 WWW的核心由三個(gè)標(biāo)準(zhǔn)構(gòu)成:統(tǒng)一資源定位符(URL),這是一個(gè)世界通用的負(fù)責(zé)給萬維網(wǎng)上,

11、如網(wǎng)頁這樣的資源定位的系統(tǒng);超文本傳送協(xié)議(HTTP),負(fù)責(zé)規(guī)定瀏覽器和服務(wù)器怎樣互相交流;超文本標(biāo)記語言(HTML),用于定義超文本文檔的結(jié)構(gòu)和格式。知識(shí)分析2.網(wǎng)頁和網(wǎng)站 網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素,是承載各種網(wǎng)站應(yīng)用的平臺(tái)。網(wǎng)站就是由一系列圍繞同一主題的統(tǒng)一風(fēng)格的網(wǎng)頁組成的。網(wǎng)站的具體內(nèi)容就是網(wǎng)頁,訪問網(wǎng)站就是通過網(wǎng)頁瀏覽器來獲取該網(wǎng)站的資源信息或者網(wǎng)絡(luò)服務(wù)。 主頁,也稱為“Home Page”,也是一個(gè)網(wǎng)頁,但是一個(gè)特殊的網(wǎng)頁。一般每一個(gè)網(wǎng)站必須有且只有一個(gè)主頁,該主頁與該網(wǎng)站的URL綁定,當(dāng)在瀏覽器中輸入一個(gè)網(wǎng)站的URL時(shí),在瀏覽器上將顯示該網(wǎng)站的主頁。主頁相當(dāng)于網(wǎng)站的正門。當(dāng)然,訪問

12、一個(gè)網(wǎng)站不一定通過主頁進(jìn)入,但是想要規(guī)范系統(tǒng)地了解一個(gè)屋子,還是需要通過正門進(jìn)入。主頁作為網(wǎng)站的正門,也是一個(gè)標(biāo)志,體現(xiàn)了整個(gè)網(wǎng)站的制作風(fēng)格和主題,主頁上通常還會(huì)包含有整個(gè)網(wǎng)站的導(dǎo)航目錄。知識(shí)分析2.網(wǎng)頁和網(wǎng)站 網(wǎng)站中的網(wǎng)頁一般包括靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁兩種形式。 靜態(tài)網(wǎng)頁是指不和后臺(tái)數(shù)據(jù)庫交互的網(wǎng)頁,是顯示HTML格式的網(wǎng)頁,內(nèi)容相對(duì)固定,當(dāng)需要改變其信息內(nèi)容時(shí),必須重新使用網(wǎng)頁制作工具來對(duì)其進(jìn)行修改,修改后的網(wǎng)頁還要重新上傳到服務(wù)器上覆蓋原來的頁面。在靜態(tài)網(wǎng)頁上,可以出現(xiàn)各種動(dòng)態(tài)的效果,如GIF動(dòng)畫、flash、滾動(dòng)字幕等,這些動(dòng)態(tài)效果并不會(huì)改變頁面本身的內(nèi)容。 動(dòng)態(tài)網(wǎng)頁通常由數(shù)據(jù)庫交互和相應(yīng)

13、的應(yīng)用程序構(gòu)成,采用動(dòng)態(tài)網(wǎng)站技術(shù)生成。動(dòng)態(tài)網(wǎng)頁文件一般以.asp、.aspx、.jsp、.php等為擴(kuò)展名。并且在動(dòng)態(tài)網(wǎng)頁網(wǎng)址中常有一個(gè)標(biāo)志性的符號(hào)-“?”,如“/news_info.asp?id=348”就是一個(gè)典型的動(dòng)態(tài)網(wǎng)頁的URL。知識(shí)分析3.網(wǎng)頁版面布局類型 網(wǎng)頁版面布局大致可分為“同字形”、“拐角形”、“標(biāo)題正文形”、“封面形”、“框架形”、“flash形”等。 “同字形”,也稱為“回字形”,是國(guó)內(nèi)企業(yè)類網(wǎng)站主頁最常用的類型,即分為頂端、主體和底部。頂端常由網(wǎng)站logo、banner和導(dǎo)航條構(gòu)成。主體部分是網(wǎng)站的主要內(nèi)容,一般分為三列,左右分列一些類目,中間是主要部分,有時(shí)也分為均分

14、的四列?！巴中巍弊钪饕奶攸c(diǎn)就是沿中軸線左右大致對(duì)稱。底部是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是一般企業(yè)網(wǎng)站的首選,這種布局能體現(xiàn)出穩(wěn)重的風(fēng)格,同時(shí)也能顯現(xiàn)出大氣。知識(shí)分析3.網(wǎng)頁版面布局類型 “拐角形”分為“左拐角形”和“右拐角形”,國(guó)內(nèi)企業(yè)網(wǎng)站常采用“左拐角形”,這種結(jié)構(gòu)與“同字形”很接近,只是形式上的區(qū)別,主要區(qū)別在主體部分,它分為兩列,“左拐角形”左側(cè)列表為一窄列,右列則很寬,“右拐角形”反之,其余頂端和底部和“同字形”類似。因此,這種布局經(jīng)常和“同字形”結(jié)合運(yùn)用,很多企業(yè)網(wǎng)站主頁采用“同字形”,二級(jí)頁面采用“左拐角形”,能夠很好地體現(xiàn)整個(gè)網(wǎng)站的一貫風(fēng)格。知識(shí)分析3.

15、網(wǎng)頁版面布局類型 “標(biāo)題正文形”,該類型最上面是標(biāo)題或類似的一些東西,然后是分割線,接著就是正文,很像平時(shí)的文章。這種類型多用于網(wǎng)站的新聞頁面中?！胺饷嫘巍?基本上出現(xiàn)在一些網(wǎng)站的首頁,整個(gè)頁面的絕大部分為一個(gè)動(dòng)畫或者精美的圖像,然后通過幾個(gè)簡(jiǎn)單的鏈接或者直接通過點(diǎn)擊可以鏈接到真正的主頁。這種類型主要起著美化和點(diǎn)題的作用,如同雜志的封面?！翱蚣苄巍?就是采用框架的結(jié)構(gòu)布局。常見的是“左右框架”,該結(jié)構(gòu)分左右為兩頁,一般左面是導(dǎo)航鏈接,右面是正文。這種類型結(jié)構(gòu)非常清晰,一目了然,常用于一些大型論壇中。知識(shí)分析3.網(wǎng)頁版面布局類型 “flash形”,該結(jié)構(gòu)與封面形結(jié)構(gòu)類似,只是這種類型采用flas

16、h來設(shè)計(jì)制作,由于flash的強(qiáng)大功能,頁面所表達(dá)的信息更為豐富,也能直接在封面上顯示交互的導(dǎo)航欄,主要用于服裝、娛樂等更注重展示效果的網(wǎng)頁。知識(shí)分析4.構(gòu)成網(wǎng)頁的基本元素網(wǎng)頁是網(wǎng)站的基本元素,而網(wǎng)頁本身也是由一些基本元素構(gòu)成的。做好網(wǎng)站的規(guī)劃和設(shè)計(jì),其實(shí)就是對(duì)各個(gè)網(wǎng)頁的基本元素進(jìn)行規(guī)劃和設(shè)計(jì)。構(gòu)成網(wǎng)頁的基本元素包括logo、banner、導(dǎo)航條、文字、圖像、多媒體、動(dòng)態(tài)特效、表格、框架、超鏈接、表單等。知識(shí)分析4.構(gòu)成網(wǎng)頁的基本元素(1)logo。 網(wǎng)站logo,也叫網(wǎng)站標(biāo)志,它是一個(gè)網(wǎng)站的象征。網(wǎng)站標(biāo)志一般放在網(wǎng)頁的左上角。網(wǎng)站標(biāo)志應(yīng)體現(xiàn)該網(wǎng)站的特色、內(nèi)容以及其內(nèi)在的文化內(nèi)涵和理念。通常企

17、業(yè)網(wǎng)站的logo也就是該企業(yè)的logo。常為代表性的人物、動(dòng)物、物品等,如工行的標(biāo)志、搜狐的狐貍等。(2)banner。 網(wǎng)站banner,也叫網(wǎng)站橫幅,是一種常見的網(wǎng)絡(luò)廣告和企業(yè)宣傳形式。一般放在網(wǎng)頁頂部最顯著的位置,用于引起訪問者注意,常用動(dòng)畫的形式表現(xiàn)。知識(shí)分析4.構(gòu)成網(wǎng)頁的基本元素(3)導(dǎo)航條。 導(dǎo)航條是網(wǎng)頁設(shè)計(jì)中的一項(xiàng)重要內(nèi)容,為訪問者提供訪問所需內(nèi)容的途徑,利用導(dǎo)航條,就可以快速找到想要瀏覽的頁面。同時(shí)導(dǎo)航條能清晰地展示整個(gè)網(wǎng)站的層次結(jié)構(gòu)。一般來說,導(dǎo)航條在一個(gè)網(wǎng)站的各個(gè)頁面中出現(xiàn)的位置是比較固定的,而且風(fēng)格也是一致的。在網(wǎng)站中,導(dǎo)航條通?？煞譃閳D像導(dǎo)航條和文字導(dǎo)航條,也可分為橫向

18、導(dǎo)航條和縱向?qū)Ш綏l。知識(shí)分析4.構(gòu)成網(wǎng)頁的基本元素(4)文字。 網(wǎng)頁的最基本的元素,就是網(wǎng)頁的內(nèi)容。一般企業(yè)網(wǎng)站的網(wǎng)頁中的文字始終是表達(dá)信息的主體。需要注意頁面中文字大小、字體、顏色對(duì)比的組合,背景顏色的襯托,以及與圖像等網(wǎng)頁元素之間的排版。知識(shí)分析4.構(gòu)成網(wǎng)頁的基本元素(5)圖像。圖像在網(wǎng)頁中主要起著表達(dá)信息、展示形象、襯托主題和體現(xiàn)風(fēng)格的作用。在網(wǎng)頁中可以使用多種格式的圖像文件,其中使用最廣泛的是JPEG和GIF兩種格式的圖像。圖像還能作為背景、按鈕、導(dǎo)航條、標(biāo)題等。需要注意頁面中的圖像和網(wǎng)站主題的關(guān)系,以及和頁面內(nèi)容的關(guān)系。知識(shí)分析4.構(gòu)成網(wǎng)頁的基本元素(6)多媒體。多媒體元素主要包含動(dòng)

19、畫、聲音、視頻等,更多的起美化頁面使網(wǎng)頁效果更為豐富的作用。和圖像一樣,多媒體元素也需要注意和網(wǎng)站主題的關(guān)系,以及和頁面內(nèi)容的關(guān)系。還需要注意多媒體的格式,多媒體的格式非常多,盡可能采用主流格式,在常見的網(wǎng)頁瀏覽器中能夠顯示,而不需要再去下載解碼器。動(dòng)畫主要使用GIF動(dòng)畫格式和更為豐富的flash動(dòng)畫,動(dòng)畫的常見格式為.swf等。聲音的常見格式為.mp3、.wma、.rm、.midi、.wav等。視頻的常見格式為.avi、.mpeg、.mp4、.rm等。知識(shí)分析4.構(gòu)成網(wǎng)頁的基本元素(7)動(dòng)態(tài)特效。為了使網(wǎng)頁效果更加豐富,增加與訪問者的互動(dòng),在網(wǎng)頁中也越來越多地使用各種動(dòng)態(tài)特效,如飄浮廣告、廣

20、告圖片自動(dòng)輪換、圖像淡出等。動(dòng)態(tài)特效主要依靠一些控件和腳本語言(如JavaScript、VBScript)生成。(8)表格。表格是網(wǎng)頁中最常見的頁面布局元素?？刂浦渌撁嬖氐奈恢靡约绊撁娴娘@示效果。表格由單元格組成,表格布局完成后,各元素分別填充到表格的單元格中。知識(shí)分析4.構(gòu)成網(wǎng)頁的基本元素(9)框架。框架也是網(wǎng)頁中常見的頁面布局元素,作用就是把網(wǎng)頁在一個(gè)瀏覽器窗口下分割成幾個(gè)不同的區(qū)域,從而實(shí)現(xiàn)在一個(gè)瀏覽器窗口中顯示多個(gè)頁面。使用框架布局可以讓網(wǎng)站的結(jié)構(gòu)更加清晰,而且各個(gè)框架之間不存在干擾問題。(10)超鏈接。超鏈接可以連接不同網(wǎng)頁或站點(diǎn),各個(gè)網(wǎng)頁鏈接在一起后,才能構(gòu)成一個(gè)網(wǎng)站。超鏈接

21、實(shí)質(zhì)是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系,這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置,還可以是圖像、電子郵件地址、文件,甚至是一個(gè)應(yīng)用程序。而在網(wǎng)頁中用于超鏈接的對(duì)象,通常是一段文字或者是一個(gè)圖像文件。知識(shí)分析4.構(gòu)成網(wǎng)頁的基本元素(11)表單。表單是一種特殊的網(wǎng)頁元素,通常用于收集信息或?qū)崿F(xiàn)一些交互式的效果。表單的主要功能是接收用戶在瀏覽器端的輸入信息,然后將這些信息發(fā)送到服務(wù)器端,由服務(wù)器進(jìn)行處理。常見于網(wǎng)頁登錄、注冊(cè)、搜索部分。知識(shí)分析5.網(wǎng)頁設(shè)計(jì)與制作工具 進(jìn)行網(wǎng)頁設(shè)計(jì)與制作,往往通過輔助軟件來完成。教程中所用的輔助軟件主要是:網(wǎng)頁編輯工具Dreamweaver;圖像處理工

22、具Photoshop;動(dòng)畫制作工具Flash。拓展練習(xí)1.CSS網(wǎng)頁布局方式在網(wǎng)頁設(shè)計(jì)時(shí)，除了視覺上的幾種布局方式以外，在網(wǎng)頁實(shí)現(xiàn)發(fā)布到互聯(lián)網(wǎng)上時(shí)，也有常用的布局方式，通常被稱為CSS網(wǎng)頁布局。（1）固定布局固定布局為網(wǎng)頁設(shè)置一個(gè)固定的寬度，通常以px做為長(zhǎng)度單位，常見于PC端網(wǎng)頁。這種布局具有很強(qiáng)的穩(wěn)定性與可控性，也沒有兼容性問題，但不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn)。即如果用戶的屏幕分辨率小于這個(gè)寬度就會(huì)出現(xiàn)滾動(dòng)條，如果大于這個(gè)寬度則會(huì)留下空白。因當(dāng)今設(shè)備的顯示的多元化，該布局方式基本已經(jīng)淘汰。拓展練習(xí)1.CSS網(wǎng)頁布局方式（2）流式布局 流式布局是為網(wǎng)頁設(shè)置一個(gè)相對(duì)的寬度，頁面元素的大小按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變，通常以百分比做為長(zhǎng)度單位，高度通常以像素為單位進(jìn)行固定。流式布局的代表作柵格系統(tǒng)（網(wǎng)格系統(tǒng)）。視覺表現(xiàn)為參差不齊的多欄布局，最早采用此布局的是網(wǎng)站是 Pinterest，后逐漸在國(guó)內(nèi)流行。即多行等寬元素排列，后面的元素依次添加到其后，等寬不等高，根據(jù)圖片原比例縮放直至寬度達(dá)到我們的要求，依次按照規(guī)則放入指定位置。但其自身也有一定的缺點(diǎn)，例如因?yàn)閷挾仁褂?百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕下顯示效果會(huì)變成有些頁面元素寬度被拉的很長(zhǎng)，但是高度、文字大小還是和原來一樣，顯示非常不協(xié)調(diào)。拓展練習(xí)