网页设计大作业

湖南涉外经济学院
《网页设计》期末大作业
设计题目：致我们终将逝去的青春
学号： 37
姓名：全新华
院系：文法学院
专业班级：汉语言文学1301班
指导老师：蒋桂莲
日期：2016年7月1日
1、页面设计分析
我设计的这个网页主要介绍的是我个人在大学生活的一个状态，作为一名大三学生，我想我们每个人都希望做这么一份个人网页，所以借着我们学习的这个机会，给老师同时也是给自己交一份满意的答卷，我相信这一份个人网页会成为我很珍贵的一份纪念。

作为一个网站的首页，其页面应需要简单，明了，给人清晰的感觉。

顶头部分主要放置网页主题、导航菜单和网站的LOGO信息等，其logo可以是一张图片或者文本信息等；页面主体分为两个部分，页面主体左侧是个人网站介绍并配有自己的照片以及自我对个人青春的总结；其中相册、美食、明星、故事、个人、联系等7个页面都设置了二级页面，都是自己青春的积累。

页面主体右侧是个人信息以及闺蜜朋友的简单介绍，这些可通过页面顶部导航进入相应页面介绍，底部设有“友情链接”，链接了“百度”、“湖南涉外经济学院”、“360”等。

2、开发环境及软件
Windows10，Macromedia Dreamweaver 6，美图秀秀等
3、系统结构功能图、页面结构草图
3.1系统结构功能图
那些年我们一起疯狂的照片（二级页面）
那些年我们一起过的明星（二级页面）致我们终将逝去的青春那些年我们一起吃过的美食（二级页面）（一级页面）
那些年我们一起见证的青涩女孩（二级页面）
那些年我们一起拥有的青春故事（二级页面）
那些年我们一起追的狗血剧（二级页面）
联系——表单（二级页面）
3.2 页面结构草图
整个设计过程中都用的了css+div布局，整体为1400宽，600高，用头部、左侧，内容，底部的制作；如下图所示：
图1 css+div设计截图
4、页面制作过程；
4.1 主要界面
（1）主页
图2 主页截图
给出页面(body)的部分CSS 代码如下：
body {
margin: 0;
padding: 0;
background: #1B3266;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #181B20;}
h1, h2, h3 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: normal;
color: #2483A6;}
h1 {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: 6px solid #EEE7DF;}
img.alignleft {
float: left;
margin-right: 25px;}
img.alignright {
float: right;}
img.aligncenter {
margin: 0px auto;}
#wrapper {
margin: 0 auto;
padding: 0;}
（2）子页面或二级页面
4. 2 页面顶部的制作；
顶部没有采用插入图片做背景，而是选择直接在div中加入纯色背景色，并配置“绿舍园艺”字样。

设计简单、大方。

4.3 页面导航区域的制作；
图4 导航条截图2
4.4 左侧（右侧）区域的制作；
4.5 主体内容区域的制作；
4.7 源代码页头部分：
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1>绿舍园艺</h1>
<p>lv she yuan yi</p>
</div>
</div>
</div>
<!-- end #header -->
<div id="menu-wrapper">
<div id="menu">
<ul>
<li class="current_page_item"><a href="#">首页界面</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">经营范围</a></li>
<li><a href="#">植物养护</a></li>
<li><a href="#">联系我们</a></li>
<li></li>
</ul>
</div>
</div>
<!-- end #menu -->
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="page-content">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">公司简介</a></h2>
<p class="meta">内街二楼248号 </p>
<div class= "entry">
5、设计总结
期末网页设计经过在每天的奋战终于完成了。

刚开始做的时候，真的什么都感觉不知道，还记得那天晚上刚做的时候，都想哭了，怎么会这么难做呢，后来在室友的指导下自己慢慢的一步步做，感觉有了一点头绪，也才感觉其实自己也可以做好的，这份作业包含了我所有的心血与感情，是我自己特别想做的，觉得会是自己一份很好的留
念，也想把自己的成果展示给老师看。

真的，通过这次作业我才明白学习是一个长期积累的过程，要不是认真的听老师讲课，这份作业可能真的无法入手。

在此要感谢我的指导老师蒋桂莲老师对我悉心的指导，感谢老师给我的帮助。

每次课上都会寻求老师的指导帮助，真的特别感谢老师每次能够不厌其烦的指导，教我怎样才能做得更好。

同时在设计过程中，我与同学交流经验和自学，并向老师请教和看书本等方式，使自己学到了不少知识，培养了我独立工作的能力，树立了对自己工作能力的信心，相信会对今后的学习工作生活有非常重要的影响。

而且大大提高了动手的能力，使我充分体会到了在创造过程中探索的艰难和成功时的喜悦。

虽然这个设计做的可能不是很完美，但却是我每天一点点做出来的并且在设计过程中所学到的东西是这次毕业设计的最大收获和财富，使我终身受益。