湖南涉外經濟學院

《網頁設計》期末大作業

設計題目：致我們終將逝去的青春

學號：37

姓名：全新華

院系：文法學院

專業班級：漢語言文學1301班

指導老師：蔣桂蓮

日期：2016年7月1日

1、頁面設計分析

我設計的這個網頁主要介紹的是我個人在大學生活的一個狀態，作為一名大三學生，我

想我們每個人都希望做這么一份個人網頁，所以借著我們學習的這個機會，給老師同時也是

給自己交一份滿意的答卷，我相信這一份個人網頁會成為我很珍貴的一份紀念。作為一個網

站的首頁，其頁面應需要簡單，明了，給人清晰的感覺。頂頭部分主要放置網頁主題、導

航菜單和網站的LOGO信息等，其log。可以是一張圖片或者文本信息等；頁面主體分為兩個

部分，頁面主體左側是個人網站介紹并配有自己的照片以及自我對個人青春的總結；其中相

冊、美食、明星、故事、個人、聯系等7個頁面都設置了二級頁面，都是自己青春的積累。

頁面主體右側是個人信息以及閨蜜朋友的簡單介紹,這些可通過頁面頂部導航進入相應頁面

介紹，底部設有“友情鏈接”，鏈接了“百度”、”湖南涉外經濟學院”、“360”等。。。。。。。。。。。。。

2、開發環境及軟件

Windows10,MacromediaDreamweaver6,美圖秀秀等

3、系統結構功能圖、頁面結構草圖

3.1系統結構功能圖

那些年我們一起瘋狂的照片（二級頁面）

那些年我們一起過的明星（二級頁面）

致我們終將逝去的青春那些年我們一起吃過的美食（二級頁面）

（一級頁面）

那些年我們一起見證的青澀女孩（二級頁面）

那些年我們一起擁有的青春故事（二級頁面）

那些年我們一起追的狗血劇（二級頁面）

聯系——表單（二級頁面）

3.2頁面結構草圖

整個設計過程中都用的了css+div布局，整體為1400寬，600高，用頭部、左側，內容,

底部的制作；如下圖所示:

圖1css+div設計截圖

4、頁面制作過程;

4.1主要界面

(1)主頁

綠舍園藝

LVSHEYUANYI

首頁界面公司簡介經營范圍植物養護聯系我們

公司簡介經營范圍

內螭二樓248號

綠舍園藝是一家全方位的園林景觀設計工程公司。我公司主

要從事：園林、屋頂花園、別量庭院、室內景觀，高爾夫球

場養護的設計與施工。多年來一直為打造精品庭院，為客戶

提供寧靜溫磐的居住環境和健康舒適的休閑空間為已任。立

足高品味，銳意創新，追求卓越。精美的設計方案和細致的

施工，盜得了客戶的廣泛認可，公司也不斷的成長和壯大。

設計部一為滿足每一位業主對自己家園的夢想和期望，我公

司設立了專屬業務部門。從丈量庭院，到專業設計和施工，

都由專屬設計師提供全程跟蹤服務，保證您的每一個想法和設計師的每一個理念都完美的呈現在

工程實例

社區園藝，更貼近居民的生活，就在樓房之1司，應有一定的

酬、果樹、花卉和草坪，也可以噌加一些蔬菜種植.家庭

園藝，最早是那些有庭院的家庭才搞得起來的，實際上樓頂

和陽臺也可以進行一定的種植.微型園藝，有人把它限定在

一定容器內的園藝植物栽培，配苴一些小的人工景觀，栽上

一些觀賞價值高的微型植物有人認為很小面積的園藝植物

種植，具一定的產品或觀賞價值，也可以稱微型園藝家庭

中生產自食的芽菜，花盆中栽點韭菜和辣椒，養點花也是微

型園藝,隨著人們居住條件的改善，家家都可以搞微型園藝，一定會有很多的花樣,社區園聯系我們

藝、家庭園藝、微型園藝也不是簡單的植物種植，特別是應當相應地有最適合于這種條件的種類

和品種，植物保護和施肥等技術措施應當符合環境衛生的要求，這些應當是新的研究課題.

多肉植物養護

多肉植物對土壕的基本要求：疏松透氣，排水、保水性好，

含一定量的腐殖質，顆粒度適中，沒有過細的塵土，呈弱酸友情鏈接

性或中性（少效種類可以為微堿性）.對多肉植物來說，

市場上出售的培養土大多有一定的局限性，所以有經驗的愛

好者多自行配制.什么樣的培養土算優質呢7簡單說，應是

圖2主頁截圖

給出頁面(body)的部分CSS代碼如下：

body{

margin:0;

padding:0;

background:#1B3266;

font-family:Arial,Helvetica,sans-serif;

font-size:14px;

color:#181B20;}

hl,h2,h3{

margin:0;

padding:0;

text-transform:uppercase;

font-family:'Oswald’,sans-serif;

font-weight:normal;

color:#2483A6;}

hl{font-size:2em;}

h2{font-size:2.4em;}

h3{font-size:1.6em;}

P,ul,ol{

margin-top:0;

line-height:180%;}

ul,ol{}

a

text-decoration:none;

color:#2483A6;}

a:hover{text-decoration:underline;}

img.border{

border:6pxsolidSEEE7DF;}

img.alignleft{

float:left;

margin-right:25px;}

img.alignright{

float:right;}

img.aligncenter{

margin:Opxauto;}

ttwrapper{

margin:0auto;

padding:0;}

(2)子頁面或二級頁面

姓名：

性別：。男?女

密斯

證件號，

家庭住址：

手機號:

4.2頁面頂部的制作；

頂部沒有采用插入圖片做背景，而是選擇直接在div中加入純色背景色，并配置

“綠舍園藝”字樣。設計簡單、大方。

4.3頁面導航區域的制作；

綠舍園藝

LVSHEYUANYI

首頁界面公司簡介經營范圍植物養護注冊頁面

圖4導航條截圖2

4.4左側（右側）區域的制作;

公司簡介

內衡二最48號

綠舍園藝是一家全方位的園林景觀設計工程公司。我公司主

要從事：園林、屋頂花園、別墅庭院、室內景觀，高爾夫球

場養護的設計與施工。多年來一直為打造精品庭院，為客戶

提供寧靜溫馨的居住環境和健康舒適的休閑空間為已任。立

足高品味，銳意創新，追求卓越。精美的設計方案和細致的

施工，嬴得了客戶的廣泛認可，公司也不斷的成長和壯大。

設計部一為滿足每一位業主對自己家園的夢想和期望，我公

司設立了專屬業務部門。從丈量庭院，到專業設計和施工，

都由專屬設計師提供全程跟蹤服務，保證您的每一個想法和設計師的每一個理念都完美的呈現在

4.5主體內容區域的制作;

經營范圍

4.7源代碼頁頭部分：

<divid="wapper">

<divid-'header-wapper">

<divid-'header">

<divid="logo">

<h1>綠舍園藝</hi>

<p>lvsheyuanyi</p>

</div>

</div>

</div>

<!--end#header-->

<divid-'n$nu-wapper">

<divid="n?nu">

<ul>

<1iclass="current_page_iterfixahref="#'>首頁界面</a></li>

<1i><a巾6￡="#'>公司簡介</2></1i>

<1i><ahref="#'>經營范圍</a></li>

<1i><ahref="擲〉植物養護</a></li>