杜文博 网页设计实践设计分析.docx
- 文档编号:29188050
- 上传时间:2023-07-21
- 格式:DOCX
- 页数:20
- 大小:2.14MB
杜文博 网页设计实践设计分析.docx
《杜文博 网页设计实践设计分析.docx》由会员分享,可在线阅读,更多相关《杜文博 网页设计实践设计分析.docx(20页珍藏版)》请在冰豆网上搜索。
杜文博网页设计实践设计分析
网页设计与制作
设计说明书
姓名:
学号:
班级:
指导教师:
完成日期:
设计要求
考核
目的
通过课程设计,考查学生对dreamweaver网页设计的综合应用能力,要求学生能够独立制作出独特的网页作品,突出强调知识的系统性与制作方法的实用性。
考核
项目
要求
1、制作主题明确,内容健康。
2、网页色彩搭配协调,布局合理。
3、创意新颖,风格独特,具有现实意义。
4、网站的层次结构和链接结构合理。
5、整体效果好,实用性较强。
6、站点命名准确,网站的可移植性强。
7、网站必须由作者本人亲自构思,采集素材,整理加工,不得抄袭他人作品。
网页设计与制作课程设计说明书
内容首行缩进2个字符,小四号字,宋体,1.5倍行距,上下左右边距分别为2.5厘米。
一、规划网站
1、策划网站主题
2、确定网站风格
3、构思网站栏目结构
4、规划网站目录结构和链接结构
5、设计主要页面的布局
二、准备素材
1、准备文本
2、准备logo
3、准备图片及按钮
4、准备动画
5、建立库项目
三、创建网站
1、创建本地站点
2、网站目录结构的搭建
四、网站首页的设计与制作
1、网站首页的布局设计
2、编辑CSS样式文件
3、编辑美化网站首页
五、制作二级栏目网页和内容网页
1、制作模板
(1)新建一个网页文件
(2)定义可编辑区域
2、制作基于模板的二级栏目网页
3、制作框架网页
例子
科比二十年无悔青春网站设计说明书
第一章网站规划1
1、网站介绍1
2、网站风格2
3、网页布局2
第二章备用素材4
1、文本4
2、Logo5
3、图片6
第三章创建网站9
1、网站布局9
2、创建网站9
第四章网站首页的设计与制作10
1、网站首页的布局设计10
2、为导航制作下拉菜单11
第五章 二级页面的制作
参考文献13
第一章网站规划
1、网站介绍
“曼巴”精神激励了我们这一代篮球人,辉煌荣誉书写了我们这个时代的神话,无悔青春诠释了伟大的定义。
在一个伟大传奇巨星科比·布莱恩特二十年职业篮球生涯的精彩演出宣布落下帷幕时,谨此“科比20年无悔青春”网站献给那些热爱运动,热爱篮球,热爱科比,为自己的梦想不断拼搏不放弃的人们!
此网站的主题是:
“飞侠高光生涯青春无悔,曼巴精神历史永传承”。
该网站为广大篮球迷,科比粉丝提供了一个资讯专题,和交流互动的平台。
全方位分析整合了科比的职业生涯,以及科比退役的各方反响和重要意义,努力打造成为一个具有对于科比巨星的辉煌总结和伟大曼巴精神的传承代表性的网站。
2、网站风格
在做本网站时,我选择了以黑色同时以暗红色调为主色调,能够体现出科比的孤傲冷酷,衬托出“曼巴”精神的坚忍不拔和伟大,让球迷粉丝广大网友有一种激情澎湃的青春热血情感。
在本网站如图1-1所示。
图1-1
3、网页布局
整个的网页布局传统,层次分明,图文并茂,动静结合,整体大致分为7行,详细布局如图1-2所示。
滚动时间日期
Logo
导航
Flash动画
标题图片
论坛图片
文字
表单、文字
主题图片
文字(项目列表)
图片
文字
图片
图片
图片
文字
文字
文字
文字、图片
滚动图片
版权所有作者信息
图1-2
该网站导航分为九大块,分别为首页、新闻、新生、赛程、战况、装备、图片、专访、历史。
如图1-3所示。
图1-3
整个网页纵向布局分为左中右三块,左边部分为图片、flash动画。
动态轮换图片效果。
如图1-4所示。
图1-4
中间半部分为“热点新闻”的项目列表,包含一些比较新的报道和的新闻,供人们浏览。
如图1-5所示。
图1-5
下半部由一个标题栏背景图片和图文并茂组成,标题栏的内容为“科比观天下”
各个单元格都是以图文混排的方式编辑。
如图1-6所示。
图1-6
再下面是滚动图片,如图1-7所示。
图1-7
右半部分是用户登录界面,讨论区以表单的形式编辑,如图1-8所示。
最后是版权声明部分,如图1-9所示
第二章备用素材
1、文本
我从XX网上搜集了一些关于女性健康的文章,在做网页的时候,只写上标题,再加上一小段的简介,配以相应的图片就完成了。
主要的文本内容如下:
标题:
女性生理期不能碰的七种食物
简介:
月经期间,很多女性都会出现肚子绞痛,头昏脑胀,浑身乏力,食欲欠佳等症状。
此时如果饮食上不注意,更是会加重经期不适症状。
女性月经期间有什么饮食注意?
什么东西不能吃?
.巧克力:
巧克力除了会引起发胖之外......
标题:
丰胸必吃的6种水果
简介:
青木瓜很多人都误以为是木瓜能丰胸,其实不然,木瓜中具有丰胸作用的是木瓜酶,就是弄破木瓜时会流出白白的乳状物这种木瓜酶青木瓜中含量丰富,但熟木瓜就很少,故想吃木瓜丰胸一定要选青木瓜......
标题:
找出月经失调的罪魁祸手
简介:
每个月的那几天,都是女性颇为烦恼的日子。
殊不知,许多你往往没意识到的不良习惯,都可能是导致月经失调的罪魁祸首。
检查自己不良的生活方式及习惯,是跟月经失调彻底说Bye~bye的前提哦......
标题:
蜂花粉:
女人永保青春的秘密“武器”
简介:
蜂蜜一直被人们称之为女性养生保健的最佳饮品,除此之外,和蜜蜂有关的养颜产品,还有蜂王浆,蜂花粉。
现在,蜂花粉更被公认为天然美容佳品。
它不但可以......
标题:
女性美容:
肌肤补水的正确方法
简介:
很多MM会盲目的使用保湿产品,以为多次使用就能有效,其实这样对肌肤又是否真正起到补水保湿的作用呢?
现在跟小编来分辨补水保湿方法的正确与错误吧......
标题:
快速减肚子 秀出平坦小蛮腰
简介:
拥有平坦的小蛮腰不仅能够更性感,穿衣服也能穿出身材,但是肚子上的肉肉实在是恼人,怎么运动都减不下去。
今天小编就教给大家几个减肚子最有效方法,只需要简单5招,就能够减去肚子瘦出平坦小腹,变身小腰精......
标题:
文胸到底穿好还是不穿好
简介:
网上流传长时间戴文胸易致癌的说法,穿文胸真的会致癌吗?
到底穿文胸好还是不穿文胸好...
标题:
夏日叹空调 如何预防寒邪入侵
简介:
炎热的夏天,让人们酷爱呆在空调房里。
家里、办公室、商场......空调无处不在。
然而,长时间呆在空......
标题:
每天运动半小时为何还瘦不了?
简介:
有研究称要靠运动来减肥,每天至少要花费半小时以上运动,否则效果很难体现,但还是会有部分人抱怨说自己明明很努力做运动了,为什么还是没瘦下去?
其实......
另一部分是只要文章标题,如下所示:
【皮肤暗黄、没有光泽怎么调理?
】【女性气血足不足?
教你几招判断】
【20岁的女生用什么品牌的护肤品】【青春期少女如何防止面部痤疮】
【如何在少女时期锻炼你的形体】【女孩应考别乱吃药避月经】
【姨妈来了,必须SayNo的17种食物】【微量元素影响少女健美】
【找出月经失调的罪魁祸首】【每个月的丰胸时期是什么时候呢】
【女性泡温泉的六大惊人好处】【青春期一定要养成的七大习惯】
【少女怎样才算健美】
2、Logo
我采用的是英文和中文相结合的方式,颜色清新亮丽。
用Photoshop做处理,处理的方法是:
先新建一个文件,大小为1425px×517px,然后把找到的图片用移动工具移到新建的文件当中去。
用椭圆工具,按住shift键画圆,用文字工具写英文字母womens,再写健康两个字。
中间的空白用中英文来代替,也就是主题:
呵护女性健康,绽放美丽青春。
在做的过程中,字体可以随自己的想法来改变,找到“切换字符和段落”面板,就可改动。
最后,得到如图2-1所示。
图2-1
3、图片
每一张图片都有相应的内容来对照,第一张是巧克力,对应的标题是:
女性生理期不能碰的七种食物。
众所周知,女性生理期间,巧克力可是大禁忌。
如图2-2所示。
图2-2 图2-3 图2-4 图2-5
第二张图片是木瓜,对应的标题是:
丰胸必吃的六种水果。
当然,木瓜,是最好的丰胸食材,这可是每个女人都想得到的。
如图2-3所示。
第三张是一张女性趴在桌子上冥想美好事物的图片。
对应的标题是:
找出月经失调的罪魁祸手,我想,写这个标题必然要找一副与它相对的图片,当女人听到这个消息后,心中会感到很欣慰。
于是就选择了这张图片。
如图2-4所示。
第四张图片是蜂蜜,对应的标题是:
蜂花粉,女人永葆青春的秘密武器。
蜂蜜能都是女人皮肤变得白皙,而且还可以帮助体内排毒。
如图2-5所示。
第五张图片是女性补水的图片,其对应的标题是:
女性美容,肌肤补水的正确方法。
女性皮肤易干燥,使用对的护肤产品是极为重要的。
如图2-6所示。
图2-6 图2-7
第六章图片是女性纤细的腰,对应的标题是:
快速减肚子 秀出平坦小蛮腰。
意在教女性朋友们如何保持纤细的小蛮腰。
如图2-7所示。
最底下一部分分别是:
每张图片多对应的标题
加班族养颜蔬果汁,对于加班的人来说,自己能学会做一杯养颜蔬果汁是做好不过的了,在家就可以自己做,不用东奔西跑。
如图2-8所示。
蜂蜜护肤功效多,蜂蜜可是天然的护肤品,受到了广大女性朋友们的喜爱。
如图2-9所示。
夏季如何祛痘痘、痘印,夏季,天气闷热潮湿,尤其是沿海地区。
对于我来说,在青岛上学,天气虽然不如别的地方热,但是脸上也照样起了不少的痘痘,所以,特此写这篇文章来为广大女性朋友们支招。
希望能对女性朋友们有更好的帮助。
如图2-10所示。
图2-8 图2-9 图2-10
茶叶水洗脸有功效,生活中的茶叶水可是有大功效的哦,可不要白白的把它浪费掉,从日常生活中的点滴做起。
如图2-11所示。
玫瑰花美容养颜,玫瑰花具有养颜的功效,用它可以制作面膜,珍珠粉等,可是上好的良药啊。
如图2-12所示。
图2-11 图2-12
第三章创建网站
1、创建本地站点
先打开Dreamweaver软件,找到“站点”,点击,新建站点。
如图3-1所示。
图3-1
然后输入名称和文件夹的名字,用英文字母。
文件夹选择自己的U盘就可。
如图3-2所示。
图3-2
2、网站布局
点击“插入”,找到“表格”,创建,行和列可以按照自己的需求来制定,还可以设置表格的大小,边框。
然后把鼠标移到表格的左上角,当出现一个田字格的时候,点击选中,在属性面板中对齐方式选为居中对齐。
如图3-3所示。
图3-3
第四章网站首页的设计与制作
1、网站首页的布局设计
整个的网站布局如图4-1所示。
Logo
导航
图片
文字
文章
图片
图片
文字
文字
图片
图片
文字
文字
文字
跑马灯
图片
文字
版权所有作者信息
图4-1
2、编辑CSS样式文件
在网页的导航当中,如图4-2所示。
添加了css样式。
设置好一个字体的样式后,可以为其他的字来套用这一样式,也就是说,选中想要改变的字,在属性面板中找到“类”,然后选择,就套用成功了。
如图4-3所示。
图4-2
图4-3
3、为导航制作下拉菜单
在主页,有了总的导航项之后,还需要添加子页导航。
我自己从网上找了一个制作子页导航的视频来学习,有以下步骤:
(1)在第一个导航项“首页”中,选中这两个字,然后选择“插入”→布局对象→APdiv,看到出来蓝色的框,名叫“层”,然后选中层,在下面的“属性”面板中,调整左、上、宽、高。
如图4-4所示。
图4-4
(2)在层里面,添加表格,大小设置和层相一致,顺便再”属性“面板中,选择背景颜色,字体颜色。
如图4-5所示。
图4-5
(3)在DW的面板中,右半部分选择标签,点击行为,如图4-6所示。
图4-6
点击加号→显示与隐藏元素,弹出对话框,如图4-7所示
图4-7
(4)先给这个标签添加显示,点击确定。
在右侧的面板中改成onmouseover,,也就是鼠标滑过的时候。
如图4-8所示。
图4-8
(5)继续添加行为,同第(4)步,但是,要把标签改为隐藏,点击确定。
在右侧的面板中改成onmouseOut。
(6)再次,就是对APdiv进行添加层,步骤同上。
(7)添加完之后,选中蓝色的框,为他设置,把左的距离给消除,可见性改为hidden,hidden意为“当鼠标滑过的时候”。
如图4-9所示。
图4-9
(8)其他的导航项也如上添加。
第5章二级页面的制作
1、模板的设计
2、子页的制作
参考文献
[1]徐丽萍.网页设计与制作从零开始完全精通.上海科学普及出版社.2013.4
[2]李彪,杨仁毅.Dreamweaver网页设计与制作.人民邮电出版社.2010.4
[3]徐丽萍.photoshop图像处理高手秘笈138招.上海科学普及出版社.2013.9
信息工程学院
《网页设计与制作》实践考核标准与成绩报告单
2015-2016学年度第一学期期末
排课编号:
(2015-2016-1)-Z120726-09132-1批阅日期:
年月日
姓名
毕冬梅
班级
13文专13班
学号
20131141302
评分标准及
得分
评价项目
评分标准
满分
得分
备注
网站完成情况
未完成设计功能,运行有误,每发现一处扣2-5分。
40
色彩搭配情况
颜色不协调等问题每处扣1-2分
10
页面布局情况
页面设计中出现的问题,每处扣2-5分
15
链接情况
链接不准确每处扣1-2分
15
作品创新功能
作品设计有要求之外的新功能5分
5
设计说明书的书写情况
内容介绍不清楚扣2-5分
10
格式不规范扣1-3分
5
合计
考核成绩
任课教师签名
李淑娟
复核人签名
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 杜文博 网页设计实践设计分析 网页 设计 实践 分析