網頁設計之愛家窗簾

夏洋

【摘 要】進入二十一世紀，互聯網進一步普及，人們的網絡生活進一步豐富，網絡已經成為人們之間溝通交流的另一種方式。作為一名大學生，學習如何設計和制作網頁變成了一項必不可少的過程。經過幾個月的學習，我對網頁設計有了一些初步的認識。在網頁設計過程中，我借鑒學習了國內外優秀網頁的設計方法，運用dreamweaver和firworks進行圖片的處理和網頁的制作，設計了一個窗簾的網頁。

【關鍵詞】網頁設計；愛家；圖片的制作

一、選題原因及優勢

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

二、網頁設計概述

1.查找資料

網頁設計技術方面的主要資料來自于課本《網頁設計與制作》，同時在《網頁配色100%》中學習了配色；網頁設計內容方面知識主要來自于家里窗簾的宣傳板和圖片，部分來自于網絡。

2.開發工具

本次網頁設計使用了firworks和Dreamweaver軟件。

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

3.設計理念

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

4.基本框架

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

5.總體選材

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

三、對于網站中圖片的處理

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

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

2.圖片批處理

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

3.導航條的設計（如圖3.3 1，3.3 2所示）

（1）為主導航條，每一個鏈接都可實現（鏈接到下一個網頁）。（2）為副導航條，位于首頁的最下方，提供瀏覽窗簾之外的一些服務。

主導航條是熒光效果的導航，采用黑白搭配的方式，當鼠標放上時，對應文字會由暗白變成亮白，有一種被點亮的感覺。副導航條當鼠標放上時，文字會呈現出加粗的效果。

四、分說每一內容頁的制作過程

1.首頁

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

2.新品頁

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

3.熱賣經典款頁

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

4.遮光窗簾頁

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

5.棉麻窗簾頁

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

6.窗紗頁

窗紗也是窗簾大類的一種，白天拉上窗紗，既可以讓陽光照進室內，也可以適當地起到遮擋的作用；窗紗頁采用div進行布局，頁頂是logo以及主導航條，緊接著是運用firworks實現文字和窗簾圖片合成的一張窗紗樣圖（如圖4.6 1），然后在下方介紹了一款窗紗“玫瑰心語”，介紹該窗紗的方式與窗簾相同，從材質、風格、原料、情景展示、產品實拍等多方面進行介紹，如果買家看中，可進行收藏購買。

7.配飾頁

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

8.副導航條——訂單查詢頁和了解店鋪頁

在訂單查詢頁上有一個登錄界面，登錄賬號和密碼即可進行查詢，若已登錄可直接進行查詢。了解店鋪頁就是對店鋪進行介紹，店鋪大小、位置、發展狀況等。

9.副導航條——售后服務頁和窗簾百科頁

這兩頁是全文本的形式，對售后服務和窗簾百科進行了介紹。

10.副導航條——聯系我們頁

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

五、設計中遇到的重點與難點

在專業知識，軟件使用的過程中發現的難點與不足的同時，更要說明的是一種常識問題以及一些周邊學科知識的空白。

說到常識，自然是網頁的結構，在我們平時的學習生活中，也會看到很多的網站，但大多大家都是關注它的實用內容，即使美觀也是抱著欣賞的態度去看，并沒有靜下心來看一看，網站是如何布局的？字體大小如何設置的？而這都是在平時制作過程中所發現的不足。

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

【參考文獻】

【1】《網頁設計與制作》，清華大學出版社，第三版.

【2】《網頁布局與配色實戰》，清華大學出版社，2017.