網(wǎng)頁(yè)設(shè)計(jì)之愛(ài)家窗簾

夏洋

【摘 要】進(jìn)入二十一世紀(jì)，互聯(lián)網(wǎng)進(jìn)一步普及，人們的網(wǎng)絡(luò)生活進(jìn)一步豐富，網(wǎng)絡(luò)已經(jīng)成為人們之間溝通交流的另一種方式。作為一名大學(xué)生，學(xué)習(xí)如何設(shè)計(jì)和制作網(wǎng)頁(yè)變成了一項(xiàng)必不可少的過(guò)程。經(jīng)過(guò)幾個(gè)月的學(xué)習(xí)，我對(duì)網(wǎng)頁(yè)設(shè)計(jì)有了一些初步的認(rèn)識(shí)。在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，我借鑒學(xué)習(xí)了國(guó)內(nèi)外優(yōu)秀網(wǎng)頁(yè)的設(shè)計(jì)方法，運(yùn)用dreamweaver和firworks進(jìn)行圖片的處理和網(wǎng)頁(yè)的制作，設(shè)計(jì)了一個(gè)窗簾的網(wǎng)頁(yè)。

【關(guān)鍵詞】網(wǎng)頁(yè)設(shè)計(jì)；愛(ài)家；圖片的制作

一、選題原因及優(yōu)勢(shì)

具備充分了解窗簾的家庭條件：父母從事窗簾行業(yè)的個(gè)體經(jīng)營(yíng)工作，所以我對(duì)窗簾了解也比較多，從量尺寸到裁剪布料再到做成成品，以至于安裝，我都有深刻的了解，也曾自己親手做過(guò)，因而在網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn)中選擇窗簾平臺(tái)的建設(shè)；同時(shí)，家里所做的窗簾生意大多都是線下的，我也想將所學(xué)的專業(yè)知識(shí)應(yīng)用于在這里，打造線上出售窗簾的平臺(tái)。

二、網(wǎng)頁(yè)設(shè)計(jì)概述

1.查找資料

網(wǎng)頁(yè)設(shè)計(jì)技術(shù)方面的主要資料來(lái)自于課本《網(wǎng)頁(yè)設(shè)計(jì)與制作》，同時(shí)在《網(wǎng)頁(yè)配色100%》中學(xué)習(xí)了配色；網(wǎng)頁(yè)設(shè)計(jì)內(nèi)容方面知識(shí)主要來(lái)自于家里窗簾的宣傳板和圖片，部分來(lái)自于網(wǎng)絡(luò)。

2.開發(fā)工具

本次網(wǎng)頁(yè)設(shè)計(jì)使用了firworks和Dreamweaver軟件。

其中，firworks主要是對(duì)圖片進(jìn)行處理，使用Dreamweaver的Div和表格為整個(gè)網(wǎng)頁(yè)布局，并用代碼制作網(wǎng)頁(yè)特效。

3.設(shè)計(jì)理念

21世紀(jì)是信息主宰的世紀(jì)，隨著電子商務(wù)的發(fā)展，人們樂(lè)于并習(xí)慣于網(wǎng)購(gòu)；但對(duì)于窗簾方面的電子商務(wù)，因其對(duì)尺寸要求比較嚴(yán)格、需專業(yè)人員安裝等特點(diǎn)，消費(fèi)者對(duì)此的網(wǎng)購(gòu)熱情沒(méi)有完全的被激發(fā)出來(lái)，同時(shí)也沒(méi)有一家窗簾的品牌被廣大網(wǎng)頁(yè)得知，特設(shè)計(jì)此網(wǎng)頁(yè)來(lái)填補(bǔ)這片空白，讓大家能通過(guò)互聯(lián)網(wǎng)選購(gòu)到自己喜愛(ài)的窗簾。

4.基本框架

上方導(dǎo)航欄分為七個(gè)方面，分別為首頁(yè)、新品、熱賣經(jīng)典款、遮光窗簾、棉麻窗簾、窗紗和配飾。在首頁(yè)的最下方還有一個(gè)導(dǎo)航欄，分為新手上路、幫助中心以及客戶服務(wù)三個(gè)方面。

5.總體選材

在選擇材料的過(guò)程中，考慮到主題，顏色的統(tǒng)一，主體的顏色采用黑白兩種顏色；網(wǎng)頁(yè)中的窗簾類型均來(lái)自于家里的窗簾，選取幾款賣的比較好窗簾放到平臺(tái)上；圖片選取與背景比較搭配的，大多都是顏色偏暗的圖片，大多來(lái)自于供應(yīng)商的店鋪網(wǎng)站。

三、對(duì)于網(wǎng)站中圖片的處理

1.對(duì)于logo的制作（如圖3.1 1）

Logo：在logo制作中，采用了三種格式文字搭配的形式，主體是一個(gè)英文形式的AIJIA字樣，在左邊和下邊分別采用新宋體和宋體的文字搭配使用，使得整個(gè)logo看起來(lái)簡(jiǎn)約而不簡(jiǎn)單，讓看到logo的消費(fèi)者能一下子記住我們的品牌--愛(ài)家，同時(shí)也蘊(yùn)含著我們走中高端路線，體現(xiàn)了我們的服務(wù)群體。

2.圖片批處理

在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，圖片處理是很重要的一部分，圖片的批處理更是重要；在很多地方需要放相同規(guī)格的圖片，所以就用到了firworks的批處理功能，文件-批處理-選擇圖片-縮入-添加-scale to size-更改圖片像素。同時(shí)利用firworks對(duì)個(gè)別圖片實(shí)現(xiàn)銳化、模糊、修剪、添加文字等等。

3.導(dǎo)航條的設(shè)計(jì)（如圖3.3 1，3.3 2所示）

（1）為主導(dǎo)航條，每一個(gè)鏈接都可實(shí)現(xiàn)（鏈接到下一個(gè)網(wǎng)頁(yè)）。（2）為副導(dǎo)航條，位于首頁(yè)的最下方，提供瀏覽窗簾之外的一些服務(wù)。

主導(dǎo)航條是熒光效果的導(dǎo)航，采用黑白搭配的方式，當(dāng)鼠標(biāo)放上時(shí)，對(duì)應(yīng)文字會(huì)由暗白變成亮白，有一種被點(diǎn)亮的感覺(jué)。副導(dǎo)航條當(dāng)鼠標(biāo)放上時(shí)，文字會(huì)呈現(xiàn)出加粗的效果。

四、分說(shuō)每一內(nèi)容頁(yè)的制作過(guò)程

1.首頁(yè)

對(duì)于首頁(yè)，整體的框架利用表格和div來(lái)完成的；頁(yè)頂部分添加logo圖片和一個(gè)搜索欄，緊接著是主導(dǎo)航條，在頁(yè)面的中心位置放置了多張firworks生成的圖片，其中第一個(gè)大圖是裁剪出左右部分進(jìn)行模糊處理組合在一起的，同時(shí)通過(guò)在窗簾圖片上加上文字，在個(gè)別窗簾圖片中間放入用firworks做成的文字圖片，使得整個(gè)頁(yè)面更加生動(dòng)和諧，在頁(yè)底，放上設(shè)計(jì)好的副導(dǎo)航條。（如圖所示）

2.新品頁(yè)

新品頁(yè)主要向買家展示最新的窗簾款式，主要采用了div進(jìn)行布局；上方是主導(dǎo)航欄，緊接著是用firworks為新品頁(yè)面做的一個(gè)圖片（如圖4.2 1），展示本店的優(yōu)惠政策，下方展示了兩款新品，用戶可以通過(guò)單擊查看詳情了解更多關(guān)于兩款新品的信息，在對(duì)應(yīng)鏈接的子頁(yè)中詳細(xì)介紹了該款式窗簾。

3.熱賣經(jīng)典款頁(yè)

熱賣經(jīng)典款頁(yè)主要向用戶展示了銷量最好的一款窗簾，頁(yè)頂是logo以及主導(dǎo)航條，緊接著是文字和窗簾圖片合成的一張熱賣經(jīng)典款樣圖（如圖4.3 1），然后在下方重點(diǎn)介紹了“南池秋曉”這款熱賣窗簾，從材質(zhì)、風(fēng)格、貨號(hào)對(duì)它進(jìn)行了全面的介紹；如果用戶在瀏覽過(guò)程中看中了這款窗簾，可以對(duì)它進(jìn)行收藏購(gòu)買。

4.遮光窗簾頁(yè)

遮光窗簾是窗簾大類的一種，遮光效果很好，利于睡眠；遮光窗簾頁(yè)的頁(yè)頂，也和前面保持一致，是logo以及主導(dǎo)航條，緊接著是文字和窗簾圖片合成的一張遮光窗簾樣圖，為使得整個(gè)網(wǎng)頁(yè)簡(jiǎn)單大方，對(duì)于窗簾的介紹都采取統(tǒng)一的模式，即如熱賣經(jīng)典款樣式，對(duì)窗簾的材質(zhì)、風(fēng)格、產(chǎn)品搭配、產(chǎn)品實(shí)拍進(jìn)行了全面的介紹。

5.棉麻窗簾頁(yè)

棉麻窗簾是窗簾大類里面的一種，因其比較薄，容易清洗而廣受大眾喜愛(ài)；棉麻窗簾頁(yè)采用div進(jìn)行布局，頁(yè)頂是logo以及主導(dǎo)航條，緊接著是運(yùn)用firworks實(shí)現(xiàn)文字和窗簾圖片合成的一張棉麻窗簾樣圖，在該圖片的右下角，是了解詳情的超鏈接，鏈接到“浪漫四葉草”子頁(yè)，對(duì)“浪漫四葉草”這一款窗簾進(jìn)行了詳細(xì)的介紹。

6.窗紗頁(yè)

窗紗也是窗簾大類的一種，白天拉上窗紗，既可以讓陽(yáng)光照進(jìn)室內(nèi)，也可以適當(dāng)?shù)仄鸬秸趽醯淖饔茫淮凹嗧?yè)采用div進(jìn)行布局，頁(yè)頂是logo以及主導(dǎo)航條，緊接著是運(yùn)用firworks實(shí)現(xiàn)文字和窗簾圖片合成的一張窗紗樣圖（如圖4.6 1），然后在下方介紹了一款窗紗“玫瑰心語(yǔ)”，介紹該窗紗的方式與窗簾相同，從材質(zhì)、風(fēng)格、原料、情景展示、產(chǎn)品實(shí)拍等多方面進(jìn)行介紹，如果買家看中，可進(jìn)行收藏購(gòu)買。

7.配飾頁(yè)

窗簾配飾主要包括扎帶，窗簾軌道，掛鉤等，在該頁(yè)主要介紹了窗簾軌道；采用div進(jìn)行布局，頁(yè)頂是logo以及主導(dǎo)航條，緊接著是運(yùn)用firworks實(shí)現(xiàn)文字和窗簾圖片合成的一張配飾樣圖，在下方詳細(xì)介紹了窗簾軌道，從貨號(hào)、顏色等基礎(chǔ)信息再到商品實(shí)拍、細(xì)節(jié)展示等，帶領(lǐng)買家充分的了解了該軌道。

8.副導(dǎo)航條——訂單查詢頁(yè)和了解店鋪?lái)?yè)

在訂單查詢頁(yè)上有一個(gè)登錄界面，登錄賬號(hào)和密碼即可進(jìn)行查詢，若已登錄可直接進(jìn)行查詢。了解店鋪?lái)?yè)就是對(duì)店鋪進(jìn)行介紹，店鋪大小、位置、發(fā)展?fàn)顩r等。

9.副導(dǎo)航條——售后服務(wù)頁(yè)和窗簾百科頁(yè)

這兩頁(yè)是全文本的形式，對(duì)售后服務(wù)和窗簾百科進(jìn)行了介紹。

10.副導(dǎo)航條——聯(lián)系我們頁(yè)

該頁(yè)是一個(gè)圖片。介紹了聯(lián)系電話，郵箱，地址等。

五、設(shè)計(jì)中遇到的重點(diǎn)與難點(diǎn)

在專業(yè)知識(shí)，軟件使用的過(guò)程中發(fā)現(xiàn)的難點(diǎn)與不足的同時(shí)，更要說(shuō)明的是一種常識(shí)問(wèn)題以及一些周邊學(xué)科知識(shí)的空白。

說(shuō)到常識(shí)，自然是網(wǎng)頁(yè)的結(jié)構(gòu)，在我們平時(shí)的學(xué)習(xí)生活中，也會(huì)看到很多的網(wǎng)站，但大多大家都是關(guān)注它的實(shí)用內(nèi)容，即使美觀也是抱著欣賞的態(tài)度去看，并沒(méi)有靜下心來(lái)看一看，網(wǎng)站是如何布局的？字體大小如何設(shè)置的？而這都是在平時(shí)制作過(guò)程中所發(fā)現(xiàn)的不足。

還有一點(diǎn)就是周邊學(xué)科知識(shí)的空白，比如在制作過(guò)程中，網(wǎng)頁(yè)的顏色涉及到色彩學(xué)，顏色與主題緊密結(jié)合，什么主題使用什么顏色。不僅僅是主題顏色，還有各個(gè)模塊的協(xié)調(diào)，用什么樣的顏色來(lái)突出關(guān)鍵部分，采用對(duì)比色還是鄰近色還是漸變色…都是我們?cè)谄綍r(shí)學(xué)習(xí)中所欠缺的，專業(yè)知識(shí)固然重要，但周邊知識(shí)的學(xué)習(xí)同樣不可或缺。

【參考文獻(xiàn)】

【1】《網(wǎng)頁(yè)設(shè)計(jì)與制作》，清華大學(xué)出版社，第三版.

【2】《網(wǎng)頁(yè)布局與配色實(shí)戰(zhàn)》，清華大學(xué)出版社，2017.