web课程设计报告.docx
- 文档编号:2452890
- 上传时间:2023-05-03
- 格式:DOCX
- 页数:19
- 大小:1.21MB
web课程设计报告.docx
《web课程设计报告.docx》由会员分享,可在线阅读,更多相关《web课程设计报告.docx(19页珍藏版)》请在冰点文库上搜索。
web课程设计报告
重庆科技学院
课程设计报告
院(系):
电气与信息工程学院专业班级:
计科普0901
学生姓名:
邱娟学号:
2009441601
设计地点(单位)___电气与信息工程学院___________
设计题目:
___个人网站设计与制作____________
完成日期:
2010年12月25日
指导教师评语:
_______________________________________
____________________________________________________________________________________________________________________________________________________________________________________________________________________
成绩(五级记分制):
________________
指导教师(签字):
________________
重庆科技学院
课程设计任务书
设计题目:
个人网站设计与制作
学生姓名
邱娟
课程名称
Web程序设计基础课程设计
专业班级
计科09-01
地点
I515、I524
起止时间
2010.12.20-12.24
设计内容及要求
为了表达个人在商业、科技、交际、生活等方面的信息需求或者进行信息的交流,展示自己的风采、分享自己的心得与经验,找准一个自己最感兴趣内容,设计制作具有明确主题的个人网站。
要求:
1、网站主题明确:
可以是关于学习、文学、各种艺术、体育、旅游、娱乐等健康、文明的主题即可;
2、在导航上要尽量清晰明了,布局合理,层次分明,要明确主次,主要的可放在显要位置,页面链接层次不要太深,尽量让用户用最短的时间找到需要的资料;
3、采用CSS+DIV进行网页设计,为了使整个网站风格统一、方便修改,整个页面采用CSS;
4、首页上加入日期时间显示;
5、正确规划网站的栏目结构,合理建立站点目录,见设计指导书。
设计
参数
1、整个网站页面个数不少于5个;
2、采用CSS+DIV进行页面布局、整个网站采用统一的CSS;
3、站点目录规划合理,比如,图片放在images下,CSS文件放在css目录下,各栏目放在对应的栏目文件下;
4、至少一段JavaScript代码;
5、建议色彩搭配不多余三种。
进度
要求
12月20日:
了解设计任务、收集资料、考虑网站栏目设计
12月21日:
素材设计与制作或收集;
12月22日-23日:
页面设计与制作;
12月24日:
撰写课程设计报告,作品检查、提交、答辩
参考资料
[1]房爱莲.《网页设计与制作案例教程》[M].北京:
清华大学出版社,2009年.
[2]文谦、赵位等.《网页制作综合技术教程》[M].北京:
人民邮电出版社,2010年.
[3]
[4]
摘要
随着计算机网络通信技术和Interne的飞速发展,全球信息化已成为必然的趋势。
现在网络已然成为了我们学生学习和交流的一个必不可少的平台,学生渴望从网络中学习知识、结交朋友、查询信息以及展示自己,21世纪是个个性化的时代,因此这个个人网站应运而生。
这个个人网站为了表带个人在学习、科技、交际、生活、旅游健康等方面的信息需求或者进行信息的交流,展示自己的风采、分享自己的心得与经验,针对与学习和生活两方面制作了这个主题明确的个人网站。
导航菜单清晰明了,布局合理,层次分明,主次明确,链接不深,可以让用户用最短的时间找到需要的资料。
关键词:
个人网站学习生活科技
目录
第1章《邱娟的小屋》个人网站的规划与设计1
1.1需求分析1
1.2网站的结构规划1
第2章个人网站的设计与制作4
2.1素材的准备4
2.2站点建立4
2.3主页面的制作5
2.3.1主页面的div框架结构5
2.3.2主页面的基本设计6
2.3.3重要div的编写6
2.4二级页面的制作9
2.4.1计算机页面的制作9
2.4.2阅读空间页面的制作9
2.4.3音乐收藏页面的制作9
2.4.4相册页面的制作9
2.4.5留言板页面的制作10
2.4.6旅游美食页面的制作10
2.5JavaScript功能代码的编写10
网页时间显示的代码10
第3章网站的测试11
3.1主页面的测试11
3.1.1主页的展示11
3.1.2“阅读空间”的展示12
3.1.3“留言板”的展示13
3.1.7“旅游美食”的展示14
3.2JavaScript功能的测试14
网页时间的功能检测14
总结15
参考文献16
第1章《邱娟的小屋》个人网站的规划与设计
1.1需求分析
现在网络越来越发达,因此网络的作用也更显重要。
现在同学们渴望从网络中获得自己想要的最新的信息,网络成了我们生活中必不可少的元素,各种各样的网站便如雨后春笋般出现。
在21世纪这个最求个性的时代,个人网站便应运而生了。
为了表达个人在学习、生活、科技、交际、生活等方面的信息需求或者进行信息的交流,展示自己的风采、分享自己的心得与经验,针对生活、学习两方面感兴趣的内容进行了设计制作。
1.2网站的结构规划
这个个人网站由多个页面组成,由主页的各种功能分别延伸到主页、计算机、阅读空间、音乐收藏、相册、留言板、旅游美食等相应的页面上,也同时链接最新歌曲、最新科技、美食天下、日志大全、旅游大全、健康美食等到不同的网站里。
主页采用了层的布局规划,主要分为上下四个部分。
而且导航菜单采用了单独的层布局。
最上面是通过flash修改后的网页标题图片,采用了单独的一个层。
紧接着是导航菜单,包括七个导航项,也是单独的一个层设计。
再下面也是一个层,主要包括最新音乐、最新科技、美食动态等三大板块,各有其链接。
最下面也是一个层,设计与上一个层一样,包括最新相册、最新读物、最新留言三大板块。
点击文字进入相应链接。
图1.1网站案例栏目框架
表1.1网站的栏目结构及说明
编码
一级页面
二级页面
栏目内容及功能说明
1
首页
歌曲排行榜
介绍近期的各项信息资讯等
科技资讯网
美食天下
最新出版物
2
计算机
展示近期有关计算机的信息
3
阅读空间
日志大全
展示近期所有文章等供阅读
4
音乐收藏
展示收藏的所有音乐
5
相册
显示近期相片和所有相册展示
6
留言板
展示最新留言
7
旅游美食
旅游景点
展示最好旅游路线和美景等
健康饮食
展示一些健康营养的美食
表1.2网站的链接结构
主页
一级页面
阅读空间
日志大全.html
最新读物
最新出版物.html
最新音乐
歌曲排行榜.html
最新科技
科技资讯翁网.html
美食动态
美食天下.html
旅游大全
旅游景点.html
健康美食
健康饮食网.html
为了方便网站的管理和维护,对本网站的目录结构设计如下:
Web课程设计----------网站根目录
images------------存放图片的位置
site------------存放模板的位置
第2章个人网站的设计与制作
2.1素材的准备
按任务书的要求,首先了解了个人网站的性质,明确了需要制作的主题(学习、生活)。
开始着手收集相关的素材,浏览大量同类网页,针对主题收集筛选素材图片,并用flash等工具将图片进行处理。
如下在主页头上插入图片,并且在图片上插入文字。
图2.1首页头图片
1.选取图片;
2.用flash在图片上写上需要的文字,并对文字进行相应的处理;
3.将图片插入网页头。
2.2站点建立
1.在Dreamweaver8中选择“新建站点”并输入站点的名字(如图四);
2.一直点“下一步”,直到需要选择某一个文件夹作为站点,如“C:
\DocumentsandSettings\Administrator\桌面\web基础课程设计”(如图五);
3.点击下一步,并在询问你是否需要网络链接服务的时候,选择“无”;(如图六)
4.点击“下一步”然后点击“完成”。
这样
图2.2输入站点名就成功建立了新的站点。
图2.3选择文件夹图2.4选择不链接网络
2.3主页面的制作
2.3.1主页面的div框架结构
图2.5主页面的div框架
2.3.2主页面的基本设计
1.用Dreamweaver中在站点中点击新建,创建一个新的页面,并保存为“主页.html”;
2.在top这个层中,插入之前准备好的图片在meun层中设置导航菜单,在文字的热点链接中,链接好对应名字的网页;
3.在bottom层中,设定宽度为300px的三个层,分别对三个层再进行设计,并进行各种相应连接。
4.在bottom1层中,按照bottom层的设计样式进行设计,同样包括三大板块,并超链接。
5.关于整体进行美化处理。
2.3.3重要div的编写
总页面的div设置:
body{
background:
#FFFF66;
text-align:
center;
}
container层的重要div设置
#container{
position:
relative;
width:
930px;
left:
142px;
top:
16px;
}
top层的重要div设置;
#top{
position:
relative;
width:
900px;
top:
0px;
}
meun层的重要div设置:
#menu{
position:
relative;
width:
931px;
font-family:
Arial;
font-size:
14px;
text-align:
center;
margin-top:
0px;
}
#container,#menuul{
padding:
0px;
list-style-type:
none;
margin:
0px;
}
#container,#menulia{
text-decoration:
none;
display:
block;
width:
130px;
padding-top:
5px;
padding-bottom:
5px;
color:
#000000;
}
#container,#menuli{
float:
left;
background-color:
#CC9966;
}
#container,#menulia:
hover{
background-color:
#FFFFCC;
}
bottom层的重要div设置:
#bottom{
position:
relative;
width:
930px;
height:
12px;
top:
0px;
}
bottom1的重要div设置:
#bottom1{
position:
relative;
width:
930px;
height:
115px;
}
2.4二级页面的制作
2.4.1计算机页面的制作
1.在站点中的新建一个页面,采用工具和代码对页面进行设计处理,背景,以及插入所需要的图片;
2.设置完成后,进行美化处理,然后保存为“计算机.html”。
2.4.2阅读空间页面的制作
1.通过拷贝首页面的部分设置代码,进行本页面的设计,采用工具和代码对页面进行设计处理,背景,以及插入所需要的图片。
2.设置完成后,进行美化处理,然后保存为“阅读空间.html”。
2.4.3音乐收藏页面的制作
1.在计算机二级页面的设计基础上加以修改,在风格一致的基础上将计算机的内容该为音乐。
2.设置完成后,进行美化处理,然后保存为“音乐收藏.html”
2.4.4相册页面的制作
1.在计算机二级页面的设计基础上加以修改,在风格一致的基础上将计算机的内容该为音乐。
2.设置完成后,进行美化处理,然后保存为“相册.html”
2.4.5留言板页面的制作
1.在阅读空间的设计基础上,对代码加以修改,在风格一致的基础上将新的留言加入进去。
2.设置完成后,进行美化处理,然后保存为“留言板.html”。
2.4.6旅游美食页面的制作
1.通过拷贝首页面的部分设置代码,进行本页面的设计,采用工具和代码对页面进行设计处理,背景,以及插入所需要的图片。
2.采用了多个层进行布局,总的分四大块,顶部、导航菜单、旅游、美食四大模块,展示了两大方面的内容。
3.设置完成后,进行美化处理,然后保存为“阅读空间.html”。
2.5JavaScript功能代码的编写
网页时间显示的代码
functiontestDate()
{
varnowTime=newDate();
document.write("欢迎来到邱娟的小屋,今天是:
"+nowTime.toLocaleString()+"
");
}
testDate();
第3章网站的测试
3.1主页面的测试
3.1.1主页的展示
图3.1主页
3.1.2“阅读空间”的展示
图3.3阅读空间
3.1.3“留言板”的展示
图3.6留言板
3.1.7“旅游美食”的展示
图3.7旅游美食
3.2JavaScript功能的测试
网页时间的功能检测
图3.15时间功能的测试
总结
本网站采用模板的方式建立,采用了统一的CSS+DIV样式,站点目录规划合理,方便修改;网站主题鲜明,内容健康,构思新颖,有特别之处;网站页面和超链接形成清晰合理的框架;在设计中运用了JavaScript功能,在首页上实现了电脑日期时间的同步显示;各个模块的设计丰富了个人网站的内容,网站还链接到了其他网站,在连接互联网的时候可以通过这个个人网站进入其他网站,功能多样。
但是由于一些技术原因,该网站还有很多不足的地方,界面上的素材和颜色搭配并不理想,并且一些,美观性还有待改进;网站中的一些内容和图片由于时间原因,显得不是及其合理;内容太少不够充实。
这个网站的大体性能上还是很不错的,虽然美观性较许多网站要差一点,但是实用性和功能确达到了要求,关于美工方面需要改进。
通过这次课程设计,我学到了很多,也掌握了很多网页设计技巧。
网页与图像处理时离不开的,要想设计出优秀的网页就要熟练的掌握这些工具。
网络真是个神奇的东西,只要想得到的都可以在网络上找到,网络有着具大的潜力,是值得我们学习和运用的。
参考文献
[1]房爱莲.《网页设计与制作案例教程》[M].北京:
清华大学出版社,2009年.
[2]文谦、赵位等.《网页制作综合技术教程》[M].北京:
人民邮电出版社,2010年
[3]http:
//61.233.135.30:
93/wwwroot/
[4]
[5]
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- web 课程设计 报告
![提示](https://static.bingdoc.com/images/bang_tan.gif)