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

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

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

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

學(xué)號(hào)：37

姓名：全新華

院系：文法學(xué)院

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

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

日期：2016年7月1日

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

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

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

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

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

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

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

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

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

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

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

Windows10,MacromediaDreamweaver6,美圖秀秀等

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

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

那些年我們一起瘋狂的照片（二級(jí)頁(yè)面）

那些年我們一起過的明星（二級(jí)頁(yè)面）

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

（一級(jí)頁(yè)面）

那些年我們一起見證的青澀女孩（二級(jí)頁(yè)面）

那些年我們一起擁有的青春故事（二級(jí)頁(yè)面）

那些年我們一起追的狗血?jiǎng)。ǘ?jí)頁(yè)面）

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

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

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

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

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

4、頁(yè)面制作過程;

4.1主要界面

(1)主頁(yè)

綠舍園藝

LVSHEYUANYI

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

公司簡(jiǎn)介經(jīng)營(yíng)范圍

內(nèi)螭二樓248號(hào)

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

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

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

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

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

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

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

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

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

工程實(shí)例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖2主頁(yè)截圖

給出頁(yè)面(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)子頁(yè)面或二級(jí)頁(yè)面

姓名：

性別：。男?女

密斯

證件號(hào)，

家庭住址：

手機(jī)號(hào):

4.2頁(yè)面頂部的制作；

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

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

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

綠舍園藝

LVSHEYUANYI

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

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

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

公司簡(jiǎn)介

內(nèi)衡二最48號(hào)

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

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

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

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

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

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

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

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

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

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

經(jīng)營(yíng)范圍

4.7源代碼頁(yè)頭部分：

<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="#'>首頁(yè)界面</a></li>

<1i><a巾6￡="#'>公司簡(jiǎn)介</2></1i>

<1i><ahref="#'>經(jīng)營(yíng)范圍</a></li>

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