网页设计大作业

湖南涉外经济学院

《网页设计》期末大作业

设计题目：致我们终将逝去的青春

学号：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>