网页设计大作业
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
湖南涉外经济学院《网页设计》期末大作业
设计题目：致我们终将逝去的青春
学号： 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 源代码页头部分：
绿舍园艺
lv she yuan yi