当前位置: 首页 > >

网页设计与制作课程设计报告

发布时间:

网页设计与制作课程设计报告

学号 *****

2014-2015 学年 第一学期

《网页设计与制作》
课程设计报告

题 目 : 维影影视公司网页设计 专 业 : 数字媒体技术 班 级 : 12(1)班 姓 名 : ******* 指导教师: *** 成绩:
计算机与信息工程系 二 0 一四年六月二十日
sevralgoupnmb,thwi±=cyxfz.P-2~3dqFG

计算机与信息工程系 《网页设计与制作》课程设计报告
目录
1 设计内容及要求 ............................................... 错误!未定义书签。
1.1 设计内容................ 错误!未定义书签。 1.2 设计任务及具体要求错误!未定义书签。
2 总体设计 ........................................................... 错误!未定义书签。
2.1 该网站的功能简介 错误!未定义书签。 2.2 网站设计概括图 ... 错误!未定义书签。
3 设计过程 ...........................................................................................0
3.1 各个模块的设计流程..............................0 3.2 对关键代码和效果处理加以分析说明 ..3
4 设*峁敕治 ...............................................................................7 5 小 结.....................................................................................................8 致谢 ............................................................................................................. 9 参考文献 ..................................................................................................10
sevralgoupnmb,thwi±=cyxfz.P-2~3dqFG

计算机与信息工程系 《网页设计与制作》课程设计报告
sevralgoupnmb,thwi±=cyxfz.P-2~3dqFG

计算机与信息工程系 《网页设计与制作》课程设计报告 0

计算机与信息工程系 《网页设计与制作》课程设计报告 0

计算机与信息工程系 《网页设计与制作》课程设计报告 0

计算机与信息工程系 《网页设计与制作》课程设计报告


体布局

3 设计过程

3.1 各个模块的设计流程

1)主页模块设计
该模块主要是是展示我们网页的基本框架,以及有什么基本功能,通过主 页我们可以很清晰的看到我们维影网站的整体布局,以及我们来访者可以从我 们网站上获得什么相关的信息,一目了然看到我们是一个实力雄厚的大公司, 从网站我们就可以看到该公司是一个结构分明,管理有条不紊。

图 2 主页模块设计图
0

计算机与信息工程系 《网页设计与制作》课程设计报告
2)产品展示模块设计
该模块主要是展示维影公司最*一段时间的所拍摄的电影,通过电影展 示我们维影公司的影视实力。
图 3 产品展示模块设计图
3)留言板模块设计
该模块主要为供我们来访者提一些关于影视方面的意见,以及他们对电影 的看法,以及喜欢看什么类型的电影,好让我们公司通过这些宝贵意见做的更 好,是项吸纳民意的好办法。
1

计算机与信息工程系 《网页设计与制作》课程设计报告
图 4 旅游宝典模块设计图
4)联系我们模块设计
该模块主要为将我们的地理坐标告诉来访者,如果有人愿意找我们公司做 一些什么关于栏目包装、宣传片什么之类的可以通过该地址找到我们公司。
图 5 联系我们页面设计图
5)在线客服模块设计
2

计算机与信息工程系 《网页设计与制作》课程设计报告
该模块主要为来访者提供一些在线服务,为他们解答一些先关的疑难问题, 是我们在线交流的必要手段,不管来访者有什么问题,我们公司都可以一一解 答,这是一个仁智的服务。
图 6 旅游景点模块设计图
3.2 对关键代码和效果处理加以分析说明
1) 主页部分设计代码 <html> <head> <title>wangye</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> body,td,th {
font-size: 14px; color: #FFF; } a:link { text-decoration: none; }
3

计算机与信息工程系 《网页设计与制作》课程设计报告
a:visited { text-decoration: none; color: #003;
} a:hover {
text-decoration: none; } a:active {
text-decoration: none; } #__01 tr td strong a {
color: #FFF; } </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- Save for Web Slices (wangye.psd) --> <table width="1823" height="1258" border="0" align="center" cellpadding="0" cellspacing="0" id="__01">
<tr> <td colspan="28"> <img src="images/index_01.jpg" width="1822" height="114"
alt=""></td> <td width="1">
4

计算机与信息工程系 《网页设计与制作》课程设计报告
<img src="images/&#x5206;&#x9694;&#x7b26;.gif" width="1" height="114" alt=""></td>
</tr>
<tr>
<td width="447" rowspan="25">
<img src="images/index_02.jpg" alt="" width="447" height="1143" usemap="#Map5" border="0"></td>
<td colspan="3" rowspan="2"><a href="index.html"><img src="images/index_03.jpg" width="57" height="35" alt=""></a></td>
<td colspan="2" rowspan="5">
<img src="images/index_04.jpg" width="37" height="379" alt=""></td>
<td colspan="3" rowspan="2"><a href="cpzs.html"><img src="images/index_05.jpg" width="58" height="35" alt=""></a></td>
<td colspan="2" rowspan="5">
<img src="images/index_06.jpg" width="30" height="379" alt=""></td>
<td colspan="2"><a href="xwdt.html"><img src="images/index_07.jpg" width="65" height="27" alt=""></a></td>
<td width="22" rowspan="6">
<img src="images/index_08.jpg" width="22" height="381" alt=""></td>
<td width="69"><a href="lyb.html"><img src="images/index_09.jpg" width="69" height="27" alt=""></a></td>
<td width="27" rowspan="6">
<img src="images/index_10.jpg" width="27" height="381" alt=""></td>
<td colspan="2" rowspan="2"><a href="gywm.html"><img src="images/index_11.jpg" width="63" height="35" alt=""></a></td>
5

计算机与信息工程系 《网页设计与制作》课程设计报告
<td width="15" rowspan="6"> <img src="images/index_12.jpg" width="15" height="381"
alt=""></td> <td width="71" rowspan="2"><a href="lxwm.html"><img
src="images/index_13.jpg" width="71" height="35" alt=""></a></td> <td colspan="8" rowspan="3"> <img src="images/index_14.jpg" width="861" height="339"
alt=""></td> <td> <img src="images/&#x5206;&#x9694;&#x7b26;.gif" width="1"
height="27" alt=""></td> </tr> <tr> <td colspan="2" rowspan="5"> <img src="images/index_15.jpg" width="65" height="354"
alt=""></td> <td rowspan="5"> <img src="images/index_16.jpg" width="69" height="354"
alt=""></td> <td> <img src="images/&#x5206;&#x9694;&#x7b26;.gif" width="1"
height="8" alt=""></td> </tr>
6

计算机与信息工程系 《网页设计与制作》课程设计报告
4 设*峁敕治
在进行网页设计与制作的过程中,并不是一帆风顺的,总会遇到很多在想 象不到的错误。
1.首先在 ps 里进行设计时要事先想好各个模块该怎么摆放,怎么设置,整 个页面是否倾斜等都应考虑,否则在 Dreamweaver 里会带来很多的麻烦。
2.要为每个页面添加居中操作。 3.应先把所有页面在 ps 里设计好,再导入到 Dreamweaver 里进行代码设计, 否则会为后来增加更多的工作量。 4.修改页面的背景颜色,可以在修改---页面属性进行设置。 5.在对页面添加链接时,切记要使用链接的相对地址,否则会使网站传送 到服务器端将无法显示的问题。 6.最好将所有网页中使用到的图片放置在同一个文件夹下,这样便于后期 查错的管理和修改。 7. 在 使 用 ps 导 出 为 web 格 式 时 ,要 事先 将 各 个 模 块切 割 好, 便 于 到 Dreamweaver 里进行代码设计。 8.设计好后要对整个网站进行调试与测试。
7

计算机与信息工程系 《网页设计与制作》课程设计报告
5 小结
随着互联网技术的发展和日益更新,网络为人们的生活带来了各种各样的 便利,人们足不出户便可以买到自己想要的东西,看自己想看的视频,浏览各 种各样的新闻,这一切都归功于互联网,但是仅仅有互联网是远远不够的,如 果只有互联网人们并不能获得自己想要的东西,所以网站作为互联网中的一个 关键节点起着至关重要的作用,通过各种网站人们才能找到自己想要的东西, 而网页作为网站的内容与载体更是起到了不可小觑的作用。
一个网站的网页制作的是否精美,是否符合网站主题,关系到客户的直接 感受,关系到人们是否愿意访问并停留在这个页面,最终的是关系到网站最后 的整体收益,当今,网站大多是作为一种盈利性的手段而存在的,所以在对其 网页进行设计时,应尽可能多的从客户和收益方面考虑,当然一些公益性的网 站除外,但是即使如此网站也应做到尽善尽美,毕竟他是面向整个互联网的, 是全球化的。
所以通过此次课程设计我深刻的体会到,要想将一个网站设计的精美,不 是一朝一夕就能完成的事情,我们需要先做好前期的策划与设计,确定好网站 的主题,围绕着主题进行一系列的页面设计,在设计的时候一定要在脑海中有 个基本的雏形,最好是将整个设计的思路通过图形化的方式,绘制到图纸上或 是电脑中,便于后期使用软件进行图形化制作时提供便利。
在使用 Dreamweaver 进行这个页面的代码设计时,切记要对整个页面进行 居中操作,为热点添加链接时,最好一次性将整个网页的链接添加,否则二次
8

计算机与信息工程系 《网页设计与制作》课程设计报告
打开进行添加会大大增加工作量。 最后最重要的就是要对整个网站进行测试与调整,只有完成了这些才算是
真正的完成了一个网站网页的设计与制作。
致谢
在这次网页制作课程设计中,我的老师和同学给了我及大的帮助。特别是 我的指导老师樊郁徽老师,还有我的网页制作任课老师章功干老师。在此,我 对他们表示感谢!感谢他们在我面对困难时给了我帮助和支持。也感谢那些给我 帮助的所有同学!
9

计算机与信息工程系 《网页设计与制作》课程设计报告
参考文献
[1]郝军启,刘治国,赵喜来等著.Dreamweaver cs4 网页设计与网站建设标准 教程.北京:清华大学出版社,2010 [2]丁士峰等编著. 网页制作与网站建设实战大全.北京:清华大学出版社,2013 [3] Patrick McNeil 著,石华耀 译. 网页设计创意书(卷 3).北京:人 民邮电出版社,2014 [4] 崔建成 等编著. 网页美工——网页设计与制作(全彩) .北京:电子工业出版社,2014
10




友情链接: