網(wǎng)絡(luò)編輯（微課版） 課件 第7章 規(guī)劃與設(shè)計(jì)網(wǎng)站

網(wǎng)絡(luò)編輯（微課版）第7章

規(guī)劃與設(shè)計(jì)網(wǎng)站知識(shí)目標(biāo)熟悉網(wǎng)站規(guī)劃建設(shè)流程。熟悉設(shè)計(jì)網(wǎng)站頁面。技能目標(biāo)掌握在網(wǎng)頁中插入圖像。掌握用淘寶助理編輯商品信息。素養(yǎng)目標(biāo)培養(yǎng)誠信品質(zhì)，遵守平臺(tái)規(guī)則。7.1網(wǎng)站規(guī)劃建設(shè)流程3網(wǎng)站規(guī)劃建設(shè)是一個(gè)系統(tǒng)工程，只有按照一定的工作流程，按部就班地操作才能建設(shè)出令人滿意的網(wǎng)站。因此，在具體設(shè)計(jì)網(wǎng)站前，需要先了解網(wǎng)站規(guī)劃建設(shè)基本流程，這樣才能制作出更好、更合理的網(wǎng)站。7.1網(wǎng)站規(guī)劃建設(shè)流程4課堂討論結(jié)合自己的親身經(jīng)歷和看法，談一談如何規(guī)劃網(wǎng)站。7.1.1網(wǎng)站整體規(guī)劃5在設(shè)計(jì)網(wǎng)站之前，需要對(duì)網(wǎng)站進(jìn)行整體規(guī)劃，寫好網(wǎng)站項(xiàng)目規(guī)劃書，在以后的制作過程中將按照這些規(guī)劃進(jìn)行設(shè)計(jì)。創(chuàng)建網(wǎng)站需要從主題、內(nèi)容、美術(shù)效果和程序的構(gòu)思這幾個(gè)方面進(jìn)行網(wǎng)站的整體規(guī)劃。網(wǎng)站要做到主題鮮明突出、要點(diǎn)明確，應(yīng)以簡單、明確的語言和畫面體現(xiàn)網(wǎng)站的主題。網(wǎng)站主題開發(fā)網(wǎng)站前，需要構(gòu)思網(wǎng)站的內(nèi)容，明確哪些是主要內(nèi)容。頁面的美術(shù)效果往往決定一個(gè)網(wǎng)站的檔次，頁面需要有美觀、大方的版面。需要構(gòu)思網(wǎng)站的功能以及網(wǎng)站的功能需要用什么程序?qū)崿F(xiàn)。網(wǎng)站程序的構(gòu)思0102網(wǎng)站內(nèi)容03網(wǎng)頁美術(shù)效果047.1.2收集資料與素材6網(wǎng)站的設(shè)計(jì)需要相關(guān)的資料和素材，有充足的內(nèi)容才可以豐富網(wǎng)站的版面。整理好資料后需要對(duì)資料進(jìn)行篩選和編輯。常用的網(wǎng)站資料與素材如下。圖片?？梢允褂脭?shù)碼相機(jī)拍攝相關(guān)圖片，也可以使用掃描儀掃描已有的紙質(zhì)照片并輸入計(jì)算機(jī)。文檔。收集和整理現(xiàn)有的文件、廣告、電子表格等內(nèi)容。12媒體內(nèi)容。收集和整理現(xiàn)有的音頻、視頻等資料。37.1.3設(shè)計(jì)網(wǎng)頁7在確定好網(wǎng)站的風(fēng)格并搜集資料后就需要設(shè)計(jì)網(wǎng)頁了，網(wǎng)頁設(shè)計(jì)包括Logo、標(biāo)準(zhǔn)色彩、標(biāo)準(zhǔn)字、導(dǎo)航條和首頁布局等的設(shè)計(jì)。可以使用Photoshop或其他軟件來具體設(shè)計(jì)網(wǎng)站中的圖片。有經(jīng)驗(yàn)的網(wǎng)頁設(shè)計(jì)者通常會(huì)在使用網(wǎng)頁制作軟件制作網(wǎng)頁之前，設(shè)計(jì)好網(wǎng)頁的整體布局，這樣在具體的設(shè)計(jì)過程中將會(huì)胸有成竹，大幅節(jié)省工作時(shí)間。圖7-1所示為利用Photoshop設(shè)計(jì)好的網(wǎng)頁。7.1.4制作網(wǎng)頁8在制作網(wǎng)頁時(shí)要靈活運(yùn)用模板和庫，這樣可以大幅提高制作效率。如果很多網(wǎng)頁都使用相同的版面，就應(yīng)該為這個(gè)版面設(shè)計(jì)一個(gè)模板，然后以此模板為基礎(chǔ)創(chuàng)建網(wǎng)頁。以后如果想改變這些網(wǎng)頁的版面，只需簡單地改變模板即可。圖7-2所示為利用模板制作的網(wǎng)頁。7.1.5開發(fā)動(dòng)態(tài)功能模塊9網(wǎng)頁制作完成后，如果需要?jiǎng)討B(tài)功能，就要開發(fā)動(dòng)態(tài)功能模塊。網(wǎng)站中常用的功能模塊包括搜索功能、留言板、新聞發(fā)布系統(tǒng)、購物系統(tǒng)等。1．搜索功能搜索功能可使用戶在短時(shí)間內(nèi)快速從大量的資料中找到需要的資料，這對(duì)資料非常豐富的網(wǎng)站來說非常有用。7.1.5開發(fā)動(dòng)態(tài)功能模塊102．留言板留言系統(tǒng)是網(wǎng)站上用戶進(jìn)行交流的方式之一。在互聯(lián)網(wǎng)創(chuàng)建的初期，留言系統(tǒng)作為一個(gè)重要的交流工具，在網(wǎng)站收集用戶意見方面起到了很重要的作用。留言板是為用戶提供信息交流渠道的組件，用戶可以圍繞個(gè)別的商品、服務(wù)或其他話題進(jìn)行討論，也可以提出問題、提出咨詢，或者得到售后服務(wù)。圖7-4所示為留言板頁面。7.1.5開發(fā)動(dòng)態(tài)功能模塊113．新聞發(fā)布系統(tǒng)新聞發(fā)布系統(tǒng)是網(wǎng)站最基本的模塊之一。大型門戶網(wǎng)站新浪、新華網(wǎng)等每天都要發(fā)布數(shù)以萬條的新聞資訊，為用戶提供大量的、門類齊全的信息。7.1.5開發(fā)動(dòng)態(tài)功能模塊124．購物系統(tǒng)隨著網(wǎng)絡(luò)的飛速發(fā)展，人們已經(jīng)不再滿足于簡單地獲取企業(yè)信息，更迫切需要的是能夠在網(wǎng)上實(shí)現(xiàn)互動(dòng)、交流及足不出戶地購買商品，因此誕生了眾多的購物系統(tǒng)。7.1.6后期更新與維護(hù)13一個(gè)好的網(wǎng)站是不可能一次性制作完美的。由于環(huán)境在不斷變化，網(wǎng)站的內(nèi)容也需要隨之調(diào)整，給人常新的感覺，這樣網(wǎng)站才會(huì)更吸引用戶，給用戶留下很好的印象。這就要求對(duì)網(wǎng)站進(jìn)行長期的、不間斷的維護(hù)和更新。網(wǎng)站的內(nèi)容更新與維護(hù)是網(wǎng)站建設(shè)過程中的重要一環(huán)。我們可以考慮從以下幾個(gè)方面入手，使網(wǎng)站能長期、順利地運(yùn)轉(zhuǎn)。

（1）在網(wǎng)站建設(shè)初期，就要對(duì)后續(xù)維護(hù)給予足夠的重視。

（2）要從管理制度上保證信息渠道的通暢和信息發(fā)布流程的合理性。

（3）在建站過程中要對(duì)網(wǎng)站的各個(gè)欄目和子欄目進(jìn)行細(xì)致的規(guī)劃，在此基礎(chǔ)上確定哪些是經(jīng)常要更新的內(nèi)容，哪些是相對(duì)穩(wěn)定的內(nèi)容。

（4）對(duì)于經(jīng)常變更的信息，建立數(shù)據(jù)庫來管理，以避免出現(xiàn)數(shù)據(jù)雜亂無章的現(xiàn)象。

（5）要選擇合適的網(wǎng)頁更新工具。

（6）網(wǎng)站風(fēng)格的更新。7.2設(shè)計(jì)與制作網(wǎng)站頁面14在具體學(xué)習(xí)設(shè)計(jì)與制作網(wǎng)站頁面前，需要先了解網(wǎng)頁的基本構(gòu)成元素、網(wǎng)頁的版面布局、頁面設(shè)計(jì)創(chuàng)意方法，然后通過Dreamweaver制作網(wǎng)頁。7.2.1網(wǎng)頁的基本構(gòu)成元素15不同性質(zhì)的網(wǎng)站，構(gòu)成網(wǎng)頁的基本元素是不同的。下面介紹常見的網(wǎng)頁的基本構(gòu)成元素。導(dǎo)航欄是網(wǎng)頁的重要組成元素，它的任務(wù)是幫助用戶在站點(diǎn)內(nèi)快速查找信息。好的導(dǎo)航欄應(yīng)該能引導(dǎo)用戶瀏覽網(wǎng)頁而不迷失方向。網(wǎng)頁內(nèi)容是網(wǎng)站的靈魂，網(wǎng)頁中的信息以文本為主。無論制作網(wǎng)頁的目的是什么，文本都是網(wǎng)頁中最基本的、必不可少的元素之一。網(wǎng)站Logo也稱為網(wǎng)站標(biāo)志，就是網(wǎng)站經(jīng)營者為把自己的網(wǎng)站與他人的網(wǎng)站區(qū)分開來而給自己的網(wǎng)站所起的名稱或所加的特殊性標(biāo)志。網(wǎng)站Banner是橫幅廣告，是互聯(lián)網(wǎng)廣告中最基本的廣告形式之一。圖片在網(wǎng)頁中具有提供信息、展示形象、裝飾網(wǎng)頁、表達(dá)個(gè)人情感和風(fēng)格的作用。視頻以影音結(jié)合的方式，用最小的篇幅和最短的時(shí)間將企業(yè)或企業(yè)的重要信息完美地呈現(xiàn)出來，通過增強(qiáng)視聽刺激來激發(fā)買家的購買欲。1．網(wǎng)站Logo2．網(wǎng)站Banner3．導(dǎo)航欄4．文本5．圖片6．視頻7.2.2網(wǎng)頁的版面布局16網(wǎng)站中有很多不同的網(wǎng)頁，如主頁、欄目首頁、內(nèi)容頁等，不同的網(wǎng)頁需要不同的版面布局。與報(bào)紙和雜志不同的是，網(wǎng)站的所有網(wǎng)頁組成的是一個(gè)層次結(jié)構(gòu)，每一層網(wǎng)頁中都需要建立訪問下一層網(wǎng)頁的超鏈接索引，所以網(wǎng)頁所處的層次越高，網(wǎng)頁中的內(nèi)容就越豐富，網(wǎng)頁的布局就越復(fù)雜。1．紙上布局法從事多年網(wǎng)頁制作的人在拿到網(wǎng)頁的相關(guān)內(nèi)容后，也許很快就可以在腦海中形成大概的布局，并且可以直接用網(wǎng)頁制作軟件開始制作。但是對(duì)不熟悉網(wǎng)頁版面布局的人來說，這么做有相當(dāng)大的困難，所以此時(shí)就需要借助其他的方法來進(jìn)行網(wǎng)頁版面布局。7.2.2網(wǎng)頁的版面布局172．軟件布局法有一定設(shè)計(jì)經(jīng)驗(yàn)的人可以用專業(yè)制圖軟件（如Photoshop等）進(jìn)行布局，可以像設(shè)計(jì)圖片、招貼畫、廣告一樣去設(shè)計(jì)一個(gè)網(wǎng)頁的界面，然后再考慮如何用網(wǎng)頁制作軟件去實(shí)現(xiàn)它。利用軟件可以方便地使用顏色、圖形，并且可以利用圖層的功能設(shè)計(jì)出用紙張無法實(shí)現(xiàn)的布局效果。圖7-13所示為使用軟件布局的網(wǎng)頁草圖。7.2.3頁面設(shè)計(jì)創(chuàng)意方法18在頁面設(shè)計(jì)中，要想達(dá)到吸引買家、引起買家購買欲的目的，就必須依靠網(wǎng)站自身獨(dú)特的創(chuàng)意，因此創(chuàng)意是網(wǎng)站存在的關(guān)鍵。好的創(chuàng)意能巧妙、恰如其分地表現(xiàn)主題、渲染氣氛，增強(qiáng)頁面的感染力，讓人過目不忘，并且能夠使頁面具有整體協(xié)調(diào)的風(fēng)格。1．富于聯(lián)想聯(lián)想是藝術(shù)形式中最常用的表現(xiàn)手法之一。在設(shè)計(jì)頁面的過程中通過豐富的聯(lián)想，能突破時(shí)空的界限，擴(kuò)大藝術(shù)形象的容量，加深畫面的意境。7.2.3頁面設(shè)計(jì)創(chuàng)意方法192．巧用對(duì)比對(duì)比是一種趨向于對(duì)立沖突的藝術(shù)美中最突出的表現(xiàn)手法之一。在網(wǎng)站頁面設(shè)計(jì)中，可以通過把網(wǎng)站頁面中所描繪的產(chǎn)品的性質(zhì)和特點(diǎn)放在鮮明的對(duì)比中來表現(xiàn)，互比互襯，來更鮮明地強(qiáng)調(diào)或提示產(chǎn)品的特征，給用戶以深刻的視覺感受。圖7-15所示為巧用對(duì)比的效果。7.2.3頁面設(shè)計(jì)創(chuàng)意方法203．大膽夸張大膽夸張是一種富有創(chuàng)意的藝術(shù)手法，通過虛構(gòu)把對(duì)象的特點(diǎn)和個(gè)性中美的方面進(jìn)行夸大，賦予人們一種新奇與變化。按其表現(xiàn)的特征，夸張可以分為形態(tài)夸張和神情夸張兩種類型。通過夸張手法的運(yùn)用，可以為網(wǎng)站頁面的藝術(shù)美注入濃郁的感情色彩，使頁面的特征鮮明、突出、動(dòng)人。圖7-16所示為大膽夸張突出鉆戒。7.2.3頁面設(shè)計(jì)創(chuàng)意方法214．善用比喻比喻法是指在設(shè)計(jì)過程中選擇兩個(gè)各不相同，而在某些方面又有些相似的事物，“以此物喻彼物”。比喻的事物與主題沒有直接的關(guān)系，但是在某一點(diǎn)上與主題的某些特征有相似之處，因而可以借題發(fā)揮，進(jìn)行延伸轉(zhuǎn)化，獲得“婉轉(zhuǎn)曲達(dá)”的藝術(shù)效果。與其他表現(xiàn)手法相比，比喻法較為含蓄，有時(shí)難以一目了然，但一旦領(lǐng)會(huì)其意，便能給人以意味無窮的感受。圖7-17所示為善用比喻的效果。7.2.3頁面設(shè)計(jì)創(chuàng)意方法225．以小見大“以小見大”中的“小”是頁面中描寫的焦點(diǎn)和視覺興趣中心，它既是頁面創(chuàng)意的濃縮和升華，也是設(shè)計(jì)者匠心獨(dú)具的安排。它不是一般意義上的“小”，而是小中寓大、以小勝大的高度提煉的產(chǎn)物，是簡潔的刻意追求。在圖7-18中，鞋所占用的面積較小，但卻是視覺的中心。7.2.4用Dreamweaver制作網(wǎng)頁23利用Dreamweaver中的可視化編輯功能，可以快速地制作網(wǎng)頁且不需要編寫任何代碼。這使得網(wǎng)頁制作者的工作變得很輕松。下面介紹利用Dreamweaver制作網(wǎng)頁的基本操作，包括插入表格、添加并設(shè)置文本等。1．插入表格在Dreamweaver中插入表格非常簡單，具體操作步驟如下。（1）打開網(wǎng)頁文件，如圖7-19所示，將光標(biāo)放置在要插入表格的位置。7.2.4用Dreamweaver制作網(wǎng)頁242．添加并設(shè)置文本Dreamweaver提供了多種向網(wǎng)頁中添加文本和設(shè)置文本（如設(shè)置字號(hào)、顏色和對(duì)齊屬性等）的方法。在網(wǎng)頁中添加并設(shè)置文本的具體操作步驟如下。（1）啟動(dòng)Dreamweaver，打開素材文件，如圖7-22所示。7.3編輯網(wǎng)店商品信息25網(wǎng)店越來越受到人們的重視。淘寶、京東等都是比較有名的網(wǎng)站，商家可以根據(jù)情況選擇。淘寶是我國深受歡迎的網(wǎng)絡(luò)購物平臺(tái)，目前已經(jīng)成為世界范圍的電子商務(wù)交易平臺(tái)之一。本節(jié)以淘寶平臺(tái)為例講述網(wǎng)店商品信息的編輯。7.3.1商品標(biāo)題的設(shè)置26商品標(biāo)題是由關(guān)鍵詞組合而成的，它往往能反映出買家的搜索意圖。商品標(biāo)題的優(yōu)化原則是盡量符合買家的各種搜索習(xí)慣。一個(gè)完整的商品標(biāo)題應(yīng)該包括3個(gè)部分。第一部分是商品名稱，這個(gè)部分要讓買家一眼就能夠明白該商品是什么東西。第二部分是由一些感官詞組成的，感官詞在很大程度上可以提高買家打開商品鏈接的興趣。第三部分是由優(yōu)化詞組成的，可以使用與商品相關(guān)的優(yōu)化詞來增大商品被搜索到的概率。7.3.2商品類目的設(shè)置27合在淘寶網(wǎng)店中設(shè)置商品類目的具體操作步驟如下。（1）登錄淘寶千牛工作臺(tái)，單擊“店鋪”→“PC店鋪裝修”下的“寶貝分類”按鈕，如圖7-27所示。7.3.2商品類目的設(shè)置28（2）在“分類管理”頁面中，單擊“添加手工分類”按鈕，然后在“分類名稱”下的文本框中輸入分類的名稱，如圖7-28所示。7.3.2商品類目的設(shè)置29（3）單擊“添加圖片”按鈕，會(huì)出現(xiàn)一個(gè)對(duì)話框，如果添加的是網(wǎng)絡(luò)圖片，那么直接在文本框中輸入圖片的地址即可，然后單擊“確定”按鈕，也可以選中“插入圖片空間圖片”單選按鈕插入圖片空間圖片，如圖7-29所示。7.3.2商品類目的設(shè)置30（4）如果要添加子分類，則只需單擊“添加子分類”按鈕，再填寫子分類的內(nèi)容即可，如圖7-30所示。7.3.2商品類目的設(shè)置31（5）單擊向上的箭頭和向下的箭頭可以將寶貝分類上移或下移，如圖7-31所示。7.3.3商品的發(fā)布32在淘寶后臺(tái)發(fā)布商品的具體操作步驟如下。（1）登錄千牛工作臺(tái)，單擊“商品管理”下的“發(fā)布寶貝”按鈕，如圖7-32所示。7.3.3商品的發(fā)布33（2）進(jìn)入“千牛商品發(fā)布”頁面，單擊“上傳商品主圖”下的“添加上傳圖片”按鈕，“商品類型”選擇一口價(jià)，如圖7-33所示。7.3.3商品的發(fā)布34（3）在打開的“圖片空間”中選擇要上傳的商品主圖，如果圖片空間沒有需要的商品主圖，可以單擊“上傳圖片”從本地電腦中選擇圖片上傳，如圖7-34所示。7.4.1在網(wǎng)頁中插入圖片35圖片是網(wǎng)頁中最主要的元素之一，不但能美化網(wǎng)頁，而且與文本相比能夠更直觀地說明問題，使所表達(dá)的意思一目了然。圖片會(huì)為網(wǎng)站增添生命力，同時(shí)也會(huì)加深用戶對(duì)網(wǎng)站的印象?！緦?shí)訓(xùn)目標(biāo)】（1）熟悉用Dreamweaver制作網(wǎng)頁的方法。（2）在網(wǎng)頁中插入圖片。7.4.1在網(wǎng)頁中插入圖片36【實(shí)訓(xùn)內(nèi)容】在Dreamweaver中插入圖片的具體步驟如下。（1）使用Dreamweaver打開素材文件，如圖7-41所示。（2）將光標(biāo)放在要插入圖片的位置，選擇“插入”→“Image”命令，如圖7-42所示。7.4.2用淘寶助理編輯商品信息37淘寶助理是一款功能強(qiáng)大的客戶端軟件，它提供了方便的管理界面。用淘寶助理上傳商品的操作很簡單，編輯完商品后，賣家可以將它們一次性地全部上傳到淘寶網(wǎng)站上?！緦?shí)訓(xùn)目標(biāo)】（1）學(xué)會(huì)淘寶網(wǎng)店商品的發(fā)布。（2）掌握利用淘寶助理發(fā)布商品的方法。7.4.2用淘寶助理編輯商品信息38【實(shí)訓(xùn)內(nèi)容】利用淘寶助理發(fā)布商品，具體操作步驟如下。（1）啟動(dòng)淘寶助理，輸入會(huì)員名和密碼，如圖7-47所示。（2）單擊“登錄”按鈕，登錄淘寶助理，單擊導(dǎo)航菜單中的