網(wǎng)頁設(shè)計之愛家窗簾

夏洋

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

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

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

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

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

1.查找資料

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

2.開發(fā)工具

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

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

3.設(shè)計理念

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

4.基本框架

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

5.總體選材

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

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

1.對于logo的制作（如圖3.1 1）

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

2.圖片批處理

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

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

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

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

四、分說每一內(nèi)容頁的制作過程

1.首頁

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

2.新品頁

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

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

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

4.遮光窗簾頁

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

5.棉麻窗簾頁

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

6.窗紗頁

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

7.配飾頁

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

8.副導(dǎo)航條——訂單查詢頁和了解店鋪頁

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

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

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

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

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

五、設(shè)計中遇到的重點與難點

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

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

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

【參考文獻(xiàn)】

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

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