网页课程设计网站报告
《网站设计与网页制造》设计说明书
课程名称:网页设计
设计题目:我的家乡
院系:xxxxxxx
专业班级:xxxxxxxx
学生姓名:xxx
学号:200913190
指导教师:xxx
起止日期:xxxxxxxxxx
第 1 页共13 页
我的家乡网页制作过程
一、网站开发目的和功能简介
随着网络技术的发展与互联网的普及,网站建设与网页制作
越来越成为各行各业以及个人宣传自己的有利工具,、网站在当
今时代被越来越多的人用来宣传,通过网站的制作可以让老师、同学以及朋友更好的了解自己以及别人想要知道的事情,我现
在做的是关于我的家乡,为别人提供了一个更深入了解自己的
一个平台,本网站主要功能是让更多的人去了解我了解我的家
乡
二、网站的设计
2.1 网站的名称:我的家乡
2.2 网站栏目划分
根据本网站的内容和功能划分为:我的心语、导航链接、各地方的简介、体现家乡的图片、版权声明等。
(1)我的心语——对我们宿舍的六个简介,提示对照网站的主题体现我们的家乡;(2)导航链接——链接到各自设置的网页各自的家乡;(3)各地方的简介——简单介绍了我们各自的家乡,了解了家乡的知识文化;(4)图片——列举了每个地方的代表图片,用另一种方式展现出不同的风采;(5)版权声明——声明了网站的建设者
具体如图所示:
2.3网站导航应用于所有页面提高网站的操作友好性。
2.4网站的风格与色彩选择:页面以浅绿和浅黄色为主。浅绿色体现了活力,字体实用浅棕色和淡淡的灰色给人一种清析、稳重的感觉。所有页面色调统一,布局相似。
2.5网站目录结构设计合理:不同素材采用不同学文件夹分开存放。如图片放在image
文件夹、flash放在flash文件夹内、完成作业放在以自己名字命名的文件夹内等
三、聊城首页的制作过程
3.1首页版图:
首页、导航链接、内容、个网页链接
3-1
整个页面分为四部分,第一部分是以一个flash文件显示动态的图片,主要是网站的突出显示;第二部分是导航栏;第三部分是详细内容,其中网页中的文字排得整齐紧凑,这样能给人一种舒服的感觉。在网页适当的地方加一些图片,每张画面再加一些不同的文字说明,使得网页显得更加的精美;第四部分是各网页链接。采用这种布局,主要是给浏览者一种简单、清晰、明了的感觉,使网站整齐划一。
具体的布局显示如下所示:
3-2
3.2制作过程::本网页制作分为三个部分:顶部是用flash 制作的页头。中部又分为左右两个部分,左边为家乡简单的介绍和链接,制作的动态图片使用时间轴让图片自动播放,还有从顶部滑下的图片自动循环播放;右边为家乡的各景点的见解。我还为网页设置了背景图片,在最后利用spry 选项卡添加的图片。
四、聊城首页制作过程
4.1新建一个页面,命名为聊城首页(index )
4.2在页面属性的外观中设置四边边距为0,文本颜色设为:#9900CC ,大小设为18像素;在链接中设置下划线样式为:有下划线;链接颜色为:#0000FF 。
4.3(1)首页(index)制作
利用样式定义各个部分的高宽,将./image/195911NM-10.gif设为背景图片。页头图片为水城明珠.jpg设置flash动画为左右橘色.swf代码如下:
页头图片的设计代码:(图如上3-2)
|
Flash动画设置代码如下:
AC_FL_RunContent( 'codebase','https://www.doczj.com/doc/c711179929.html,/pub/shockwave/cabs/flash/swf lash.cab#version=7,0,19,0','width','957','height','210','src','../FLASH/左右橘色','quality','high','pluginspage','https://www.doczj.com/doc/c711179929.html,/go/getflashplayer','wmode','transparent' ,'movie','../FLASH/左右橘色' ); //end AC code
(2)景阳冈(jyg)页设计
此网页运用了一些代码实现了文字的滚动代码:
页头图片为聊城.jpg设置flash动画穿越星空.swf、烟花绽放.swf代码如下: | |
Flash文件代码:
AC_FL_RunContent( 'codebase','https://www.doczj.com/doc/c711179929.html,/pub/shockwave/cabs/flash/swf lash.cab#version=9,0,28,0','width','991','height','217','src','../FLASH/穿越星空','quality','high','pluginspage','https://www.doczj.com/doc/c711179929.html,/shockwave/download/download.cgi?P1_Prod _Version=ShockwaveFlash','wmode','transparent','movie','../FLASH/穿越星空' ); //end AC code
AC_FL_RunContent( 'codebase','https://www.doczj.com/doc/c711179929.html,/pub/shockwave/cabs/flash/swf lash.cab#version=9,0,28,0','width','390','height','211','src','../FLASH/烟花绽放','quality','high','pluginspage','https://www.doczj.com/doc/c711179929.html,/shockwave/download/download.cgi?P1_Prod
_Version=ShockwaveFlash','wmode','transparent','movie','../FLASH/烟花绽放' ); //end AC code
完成效果如下
3-3
(3)凤凰苑(fhy)网页设计
凤凰苑网页设计为突出凤凰苑的特色页头采用凤凰园内比较突出的
产品来体现凤凰苑的科技(仙人掌、日本无花果等……)页头采用flash 是左右5.swf、蝴蝶飞飞.swf,此网页插入的是一个由flash做的图片实现图片的从右向左的滚动,使用了上面网页中文字滚动的方法,使用的代码
(
) 改变字母的滚动方向向左(left)实现不同于上一网页的滚动,页头flash的设置,同与上一网页。 完成效果图如下 (4)光岳楼(gyl)、东昌湖(dch)采用同样的设计完成。 五、设计技术总结 为了使我们的网站更加实用、内容丰富,我们在网站里用了很多的技术,包括flash photoshop 等图片处理和动画,运用dreamweaver 中相关知识制作各种特效比如图层运用、时间轴运用等。 5.1在素材收集和处理上本人花费了大量时间处理网站动画、真实照片收集、个人信息。如应用PHOTOSHOP对相片进行整体处理。利用flash制作了滚动动画。 5.2文字滚动效果,代码如下: | 六、实习心得 本次网站主要是运用本学期学过的知识来布局应用、制作动画效果,通过本次的网站设计,运用了本学期所学到的知识这样不仅复习了本学期学过的一些知识,同时也加深所学知识的内容,这次的网页制作使我学会了很多,有关怎么收集资料,怎样用最快的方法收集资料,怎样收集有效的资料,怎样整理资料,怎样使自己的下载的资料便于查找,也学会了网页的制作,学会了运用网页特效,怎样的特效才能凸现网页主题。在制作网站的过程中,也碰到了不少的不明白的地方通过老师同学的帮助也解决了不少问题,通过循序渐进的学习慢慢地完成了本次的网站建设,这次做的网页虽不是很好看,有不足之处,比如动态页面的制作、脚本的运用、一些效果的运用等运用的不够灵活,同时网页布局也不是很完善,可是我花了很多时间来完成它,所以呢,它对我以后做网页有很大的帮助。在此次做网页的过程中也让我学到了很多东西,所以呢从我内心来说我是很满意我的这次经历,同时也要谢谢老师安排这样的实习周,为什么呢?因为在制作过程中我不仅学到了书上没有的东西,也培养了我独立思考问题的能力,同时还增强了同学之间的团结互助的友谊。因此,不论从哪个角度来说,老师此次布置的任务是上大学以来唯一把知识用于实践的第一回,再一次谢谢你老师。总之这次设计就是在不断的“发现问题— —>解决问题——>再发现问题——>再解决问题——>”这个学习过程中完成的。今后我将继续努力,把网页设计的更好。
|