網(wǎng)頁設(shè)計大作業(yè)

湖南涉外經(jīng)濟(jì)學(xué)院

《網(wǎng)頁設(shè)計》期末大作業(yè)

設(shè)計題目：致我們終將逝去的青春

學(xué)號：37

姓名：全新華

院系：文法學(xué)院

專業(yè)班級：漢語言文學(xué)1301班

指導(dǎo)老師：蔣桂蓮

日期：2016年7月1日

1、頁面設(shè)計分析

我設(shè)計的這個網(wǎng)頁主要介紹的是我個人在大學(xué)生活的一個狀態(tài)，作為一名大三學(xué)生，我

想我們每個人都希望做這么一份個人網(wǎng)頁，所以借著我們學(xué)習(xí)的這個機(jī)會，給老師同時也是

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

站的首頁，其頁面應(yīng)需要簡單，明了，給人清晰的感覺。頂頭部分主要放置網(wǎng)頁主題、導(dǎo)

航菜單和網(wǎng)站的LOGO信息等，其log?？梢允且粡垐D片或者文本信息等；頁面主體分為兩個

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

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

頁面主體右側(cè)是個人信息以及閨蜜朋友的簡單介紹,這些可通過頁面頂部導(dǎo)航進(jìn)入相應(yīng)頁面

介紹，底部設(shè)有“友情鏈接”，鏈接了“百度”、”湖南涉外經(jīng)濟(jì)學(xué)院”、“360”等。。。。。。。。。。。。。

2、開發(fā)環(huán)境及軟件

Windows10,MacromediaDreamweaver6,美圖秀秀等

3、系統(tǒng)結(jié)構(gòu)功能圖、頁面結(jié)構(gòu)草圖

3.1系統(tǒng)結(jié)構(gòu)功能圖

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

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

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

（一級頁面）

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

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

那些年我們一起追的狗血?。ǘ夗撁妫?/p>

聯(lián)系——表單（二級頁面）

3.2頁面結(jié)構(gòu)草圖

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

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

圖1css+div設(shè)計截圖

4、頁面制作過程;

4.1主要界面

(1)主頁

綠舍園藝

LVSHEYUANYI

首頁界面公司簡介經(jīng)營范圍植物養(yǎng)護(hù)聯(lián)系我們

公司簡介經(jīng)營范圍

內(nèi)螭二樓248號

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

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

場養(yǎng)護(hù)的設(shè)計與施工。多年來一直為打造精品庭院，為客戶

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

足高品味，銳意創(chuàng)新，追求卓越。精美的設(shè)計方案和細(xì)致的

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

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

司設(shè)立了專屬業(yè)務(wù)部門。從丈量庭院，到專業(yè)設(shè)計和施工，

都由專屬設(shè)計師提供全程跟蹤服務(wù)，保證您的每一個想法和設(shè)計師的每一個理念都完美的呈現(xiàn)在

工程實例

社區(qū)園藝，更貼近居民的生活，就在樓房之1司，應(yīng)有一定的

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

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

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

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

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

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

中生產(chǎn)自食的芽菜，花盆中栽點韭菜和辣椒，養(yǎng)點花也是微

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

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

和品種，植物保護(hù)和施肥等技術(shù)措施應(yīng)當(dāng)符合環(huán)境衛(wèi)生的要求，這些應(yīng)當(dāng)是新的研究課題.

多肉植物養(yǎng)護(hù)

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

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

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

市場上出售的培養(yǎng)土大多有一定的局限性，所以有經(jīng)驗的愛

好者多自行配制.什么樣的培養(yǎng)土算優(yōu)質(zhì)呢7簡單說，應(yīng)是

圖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)子頁面或二級頁面

姓名：

性別：。男?女

密斯

證件號，

家庭住址：

手機(jī)號:

4.2頁面頂部的制作；

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

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

4.3頁面導(dǎo)航區(qū)域的制作；

綠舍園藝

LVSHEYUANYI

首頁界面公司簡介經(jīng)營范圍植物養(yǎng)護(hù)注冊頁面

圖4導(dǎo)航條截圖2

4.4左側(cè)（右側(cè)）區(qū)域的制作;

公司簡介

內(nèi)衡二最48號

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

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

場養(yǎng)護(hù)的設(shè)計與施工。多年來一直為打造精品庭院，為客戶

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

足高品味，銳意創(chuàng)新，追求卓越。精美的設(shè)計方案和細(xì)致的

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

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

司設(shè)立了專屬業(yè)務(wù)部門。從丈量庭院，到專業(yè)設(shè)計和施工，

都由專屬設(shè)計師提供全程跟蹤服務(wù)，保證您的每一個想法和設(shè)計師的每一個理念都完美的呈現(xiàn)在

4.5主體內(nèi)容區(qū)域的制作;

經(jīng)營范圍

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="#'>經(jīng)營范圍</a></li>

<1i><ahref="擲〉植物養(yǎng)護(hù)</a></li>