网页设计与制作课程设计报告文档格式.doc
- 文档编号:6978709
- 上传时间:2023-05-07
- 格式:DOC
- 页数:15
- 大小:3.43MB
网页设计与制作课程设计报告文档格式.doc
《网页设计与制作课程设计报告文档格式.doc》由会员分享,可在线阅读,更多相关《网页设计与制作课程设计报告文档格式.doc(15页珍藏版)》请在冰点文库上搜索。
2总体设计 3
2.1该网站的功能简介 3
2.2网站设计概括图 3
3 设计过程 4
3.1各个模块的设计流程 4
3.2对关键代码和效果处理加以分析说明 9
4 设计结果与分析 11
5小结 12
致谢 13
参考文献 14
1设计内容及要求
1.1设计内容
《维影影视网站》主要根据课程设计要求进行设计,并了解了维影公司的基本情况,该网站主要包括六大模块:
1)导航栏模块,主要有首页、产品展示、新闻动态、留言板、关于我们、联系我们。
2)新闻动态模块,最近的一些影视方面的信息。
3)产品分类模块,主要是些电影的类型分类。
4)在线客服模块,为来访者提供一些我们公司的在线服务。
5)公司简介模块,介绍公司的一些基本情况。
6)热销产品模块,向大家介绍一些我们公司的一些热销电影。
1.2设计任务及具体要求
主要利用Photoshop和Dreamweaver进行一个小型的影视公司网站开发,网站内容涵盖了维影影视公司的一些最基本情况,以及维影公司的最新电影出台情况,并且提供一系列的人工在线服务为我们的来访者解答这种问题。
要求:
明确课程设计的目的,能根据课程设计的要求,查阅相关文献,为完成设计准备必要的知识;
提高学生用Photoshop和Dreamweaver进行程序设计的能力,重点提高用Dreamweaver进行网页制作技术水平;
初步了解软件开发的一般方法和步骤;
提高撰写技术文档的能力。
2总体设计
2.1该网站的功能简介
该网站的主要功能是介绍维影公司的基本情况,并作为一个功能型的网站展示给我们大家,包括一些最新电影展示,最终目的还是为一些想做影视的公司提供一些服务,宣传自己。
2.2网站设计概括图
图1总体布局图
3 设计过程
3.1各个模块的设计流程
1)主页模块设计
该模块主要是是展示我们网页的基本框架,以及有什么基本功能,通过主页我们可以很清晰的看到我们维影网站的整体布局,以及我们来访者可以从我们网站上获得什么相关的信息,一目了然看到我们是一个实力雄厚的大公司,从网站我们就可以看到该公司是一个结构分明,管理有条不紊。
图2主页模块设计图
2)产品展示模块设计
该模块主要是展示维影公司最近一段时间的所拍摄的电影,通过电影展示我们维影公司的影视实力。
图3产品展示模块设计图
3)留言板模块设计
该模块主要为供我们来访者提一些关于影视方面的意见,以及他们对电影的看法,以及喜欢看什么类型的电影,好让我们公司通过这些宝贵意见做的更好,是项吸纳民意的好办法。
图4旅游宝典模块设计图
4)联系我们模块设计
该模块主要为将我们的地理坐标告诉来访者,如果有人愿意找我们公司做一些什么关于栏目包装、宣传片什么之类的可以通过该地址找到我们公司。
图5联系我们页面设计图
5)在线客服模块设计
该模块主要为来访者提供一些在线服务,为他们解答一些先关的疑难问题,是我们在线交流的必要手段,不管来访者有什么问题,我们公司都可以一一解答,这是一个仁智的服务。
图6旅游景点模块设计图
3.2对关键代码和效果处理加以分析说明
1)
主页部分设计代码
<
html>
head>
title>
wangye<
/title>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
>
styletype="
text/css"
body,td,th{
font-size:
14px;
color:
#FFF;
}
a:
link{
text-decoration:
none;
visited{
#003;
hover{
active{
#__01trtdstronga{
/style>
/head>
bodybgcolor="
#FFFFFF"
leftmargin="
0"
topmargin="
marginwidth="
marginheight="
!
--SaveforWebSlices(wangye.psd)-->
tablewidth="
1823"
height="
1258"
border="
align="
center"
cellpadding="
cellspacing="
id="
__01"
<
tr>
<
tdcolspan="
28"
<
imgsrc="
images/index_01.jpg"
width="
1822"
114"
alt="
"
/td>
tdwidth="
1"
images/&
#x5206;
&
#x9694;
#x7b26;
.gif"
/tr>
447"
rowspan="
25"
images/index_02.jpg"
1143"
usemap="
#Map5"
3"
2"
ahref="
index.html"
images/index_03.jpg"
57"
35"
/a>
5"
images/index_04.jpg"
37"
379"
cpzs.html"
images/index_05.jpg"
58"
images/index_06.jpg"
30"
xwdt.html"
images/index_07.jpg"
65"
27"
22"
6"
images/index_08.jpg"
381"
69"
lyb.html"
images/index_09.jpg"
images/index_10.jpg"
gywm.html"
images/index_11.jpg"
63"
15"
images/index_12.jpg"
71"
lxwm.html"
images/index_13.jpg"
8"
images/index_14.jpg"
861"
339"
td>
images/index_15.jpg"
354"
tdrowspan="
images/index_16.jpg"
4 设计结果与分析
在进行网页设计与制作的过程中,并不是一帆风顺的,总会遇到很多在想象不到的错误。
1.首先在ps里进行设计时要事先想好各个模块该怎么摆放,怎么设置,整个页面是否倾斜等都应考虑,否则在Dreamweaver里会带来很多的麻烦。
2.要为每个页面添加居中操作。
3.应先把所有页面在ps里设计好,再导入到Dreamweaver里进行代码设计,否则会为后来增加更多的工作量。
4.修改页面的背景颜色,可以在修改---页面属性进行设置。
5.在对页面添加链接时,切记要使用链接的相对地址,否则会使网站传送到服务器端将无法显示的问题。
6.最好将所有网页中使用到的图片放置在同一个文件夹下,这样便于后期查错的管理和修改。
7.在使用ps导出为web格式时,要事先将各个模块切割好,便于到Dreamweaver里进行代码设计。
8.设计好后要对整个网站进行调试与测试。
5小结
随着互联网技术的发展和日益更新,网络为人们的生活带来了各种各样的便利,人们足不出户便可以买到自己想要的东西,看自己想看的视频,浏览各种各样的新闻,这一切都归功于互联网,但是仅仅有互联网是远远不够的,如果只有互联网人们并不能获得自己想要的东西,所以网站作为互联网中的一个关键节点起着至关重要的作用,通过各种网站人们才能找到自己想要的东西,而网页作为网站的内容与载体更是起到了不可小觑的作用。
一个网站的网页制作的是否精美,是否符合网站主题,关系到客户的直接感受,关系到人们是否愿意访问并停留在这个页面,最终的是关系到网站最后的整体收益,当今,网站大多是作为一种盈利性的手段而存在的,所以在对其网页进行设计时,应尽可能多的从客户和收益方面考虑,当然一些公益性的网站除外,但是即使如此网站也应做到尽善尽美,毕竟他是面向整个互联网的,是全球化的。
所以通过此次课程设计我深刻的体会到,要想将一个网站设计的精美,不是一朝一夕就能完成的事情,我们需要先做好前期的策划与设计,确定好网站的主题,围绕着主题进行一系列的页面设计,在设计的时候一定要在脑海中有个基本的雏形,最好是将整个设计的思路通过图形化的方式,绘制到图纸上或是电脑中,便于后期使用软件进行图形化制作时提供便利。
在使用Dreamweaver进行这个页面的代码设计时,切记要对整个页面进行居中操作,为热点添加链接时,最好一次性将整个网页的链接添加,否则二次打开进行添加会大大增加工作量。
最后最重要的就是要对整个网站进行测试与调整,只有完成了这些才算是真正的完成了一个网站网页的设计与制作。
致谢
在这次网页制作课程设计中,我的老师和同学给了我及大的帮助。
特别是我的指导老师樊郁徽老师,还有我的网页制作任课老师章功干老师。
在此,我对他们表示感谢!
感谢他们在我面对困难时给了我帮助和支持。
也感谢那些给我帮助的所有同学!
12
参考文献
[1]郝军启,刘治国,赵喜来等著.Dreamweavercs4网页设计与网站建设标准教程.北京:
清华大学出版社,2010
[2]丁士峰等编著.网页制作与网站建设实战大全.北京:
清华大学出版社,2013
[3]Patrick
McNeil
著,石华耀
译.网页设计创意书(卷3).北京:
人民邮电出版社,2014
[4]崔建成 等编著.网页美工——网页设计与制作(全彩)
.北京:
电子工业出版社,2014
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 课程设计 报告