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

1、* 2014-2015学年第一学期 学号 网页设计与制作 课程设计报告 题目:维影影视公司网页设计 专业:数字媒体技术 班级：12 (1)班 姓 名:* 指导教师：* 成绩: 计算机与信息工程系 二0四年六月二十日 1设计内容及要求2 设计内容2 设计任务及具体要求2 2总体设计3 该网站的功能简介3 网站设计概括图3 3 设计过程4 各个模块的设计流程4 对关键代码和效果处理加以分析说明9 4 设计结果与分析11 5 小结12 致谢13 参考文献14 1设计内容及要求 设计内容 维影影视网站主要根据课程设计要求进行设计，并了解了维影公司的基 本情况，该网站主要包括六大模块： 1）导航栏模块，

2、主要有首页、产品展示、新闻动态、留言板、关于我们、 联系我们。 2）新闻动态模块，最近的一些影视方面的信息。 3）产品分类模块，主要是些电影的类型分类。 4）在线客服模块, 为来访者提供一些我们公司的在线服务。 5）公司简介模块, 介绍公司的一些基本情况。 6）热销产品模块, 向大家介绍一些我们公司的一些热销电影。 设计任务及具体要求 主要利用Photoshop和Dreamweaver进行一个小型的影视公司网站开发，网 站内容涵盖了维影影视公司的一些最基本情况，以及维影公司的最新电影出台情 况，并且提供一系列的人工在线服务为我们的来访者解答这种问题。 要求：明确课程设计的目的，能根据课程设计的

3、要求，查阅相关文献，为完 成设计准备必要的知识；提髙学生用Photoshop和Dreamweaver进行程序设计 的能力，重点提高用Dreamweaver进行网页制作技术水平；初步了解软件开发的 一般方法和步骤；提髙撰写技术文档的能力。 2总体设计 该网站的功能简介 该网站的主要功能是介绍维影公司的基本情况，并作为一个功能型的网站展 示给我们大家，包括一些最新电影展示，最终目的还是为一些想做影视的公司提 供一些服务，宣传自己。 网站设计概括图 首页 产品展示新闻动态留言板 关于我们联系我们 热销产品 公司简介 图1总体布局图 3设计过程 各个模块的设计流程 1）主页模块设计 该模块主要是是展示

4、我们网页的基本框架，以及有什么基本功能，通过主页 我们可以很清晰的看到我们维影网站的整体布局，以及我们来访者可以从我们网 站上获得什么相关的信息，一目了然看到我们是一个实力雄厚的大公司，从网站 我们就可以看到该公司是一个结构分明，管理有条不紊。 图2主页模块设计图 2）产品展示模块设计 该模块主要是展示维影公司最近一段时间的所拍摄的电影，通过电影展 示我们维影公司的影视实力。 R.MtKS 1TTW1 K9JMI QW 咸-1 I AA，1X zwrntg, TUbf 图3产品展示模块设计图 3）留言板模块设计 该模块主要为供我们来访者提一些关于影视方面的意见，以及他们对电影的 看法，以及喜欢

5、看什么类型的电影，好让我们公司通过这些宝贵意见做的更好， 是项吸纳民意的好办法Q 图4旅游宝典模块设计图 4）联系我们模块设计 该模块主要为将我们的地理坐标告诉来访者，如果有人愿意找我们公司做一 些什么关于栏目包装、宣传片什么之类的可以通过该地址找到我们公司。 0堆畝嫩 99WMWHO 图5联系我们页面设计图 图6旅游景点模块设计图 5）在线客服模块设计 该模块主要为来访者提供一些在线服务，为他们解答一些先关的疑难问题, 是我们在线交流的必要手段，不管来访者有什么问题，我们公司都可以一一解答, 这是一个仁智的服务。 对关键代码和效果处理加以分析说明 1) 主页部分设计代码 wangye cha

6、rset=utf-8,r meta http-equiv二Content-Type content=,rtext/html: body,td,th font-size： 14px； color： #FFF； a：link text-decoration： none； a：visited text-decoration： none； color： #003； a：hover text-decoration： none； a：active text-decoration： none； #_ 01 tr td strong a color： #FFF； td col span二8 rowspaW 4

7、设计结果与分析 在进行网页设计与制作的过程中，并不是一帆风顺的，总会遇到很多在想象 不到的错误。 1.首先在PS里进行设计时要事先想好各个模块该怎么摆放，怎么设置，整 个页面是否倾斜等都应考虑，否则在Dreamweaver里会带来很多的麻烦。 2 .要为每个页面添加居中操作。 3. 应先把所有页面在ps里设计好，再导入到Dreamweaver里进行代码设计, 否则会为后来增加更多的工作量。 4. 修改页面的背景颜色，可以在修改一-页面属性进行设置。 5. 在对页面添加链接时，切记要使用链接的相对地址，否则会使网站传送到 服务器端将无法显示的问题。 6. 最好将所有网页中使用到的图片放置在同一个

8、文件夹下，这样便于后期查 错的管理和修改。 7. 在使用ps导出为web格式时，要事先将各个模块切割好，便于到 Dreamweaver里进行代码设计。 8. 设计好后要对整个网站进行调试与测试。 5小结 随着互联网技术的发展和日益更新，网络为人们的生活带来了各种各样的便 利，人们足不出户便可以买到自己想要的东西，看自己想看的视频，浏览各种各 样的新闻，这一切都归功于互联网，但是仅仅有互联网是远远不够的，如果只有 互联网人们并不能获得自己想要的东西，所以网站作为互联网中的一个关键节点 起着至关重要的作用，通过各种网站人们才能找到自己想要的东西，而网页作为 网站的内容与载体更是起到了不可小觑的作用

9、。 一个网站的网页制作的是否精美，是否符合网站主题，关系到客户的直接感 受，关系到人们是否愿意访问并停留在这个页面，最终的是关系到网站最后的整 体收益，当今，网站大多是作为一种盈利性的手段而存在的，所以在对其网页进 行设计时，应尽可能多的从客户和收益方面考虑，当然一些公益性的网站除外， 但是即使如此网站也应做到尽善尽美，毕竟他是面向整个互联网的，是全球化的。 所以通过此次课程设计我深刻的体会到，要想将一个网站设计的精美，不是 一朝一夕就能完成的事情，我们需要先做好前期的策划与设计，确定好网站的主 题，围绕着主题进行一系列的页面设计，在设计的时候一定要在脑海中有个基本 的雏形，最好是将整个设计的

10、思路通过图形化的方式，绘制到图纸上或是电脑中， 便于后期使用软件进行图形化制作时提供便利。 在使用Dreamweaver进行这个页面的代码设计时，切记要对整个页面进行居 中操作，为热点添加链接时，最好一次性将整个网页的链接添加，否则二次打开 进行添加会大大增加工作量。 最后最重要的就是要对整个网站进行测试与调整，只有完成了这些才算是真 正的完成了一个网站网页的设计与制作。 致谢 在这次网页制作课程设计中，我的老师和同学给了我及大的帮助。特别是我 的指导老师樊郁徽老师，还有我的网页制作任课老师章功干老师。在此，我对他 们表示感谢！感谢他们在我面对困难时给了我帮助和支持。也感谢那些给我帮助 的所有同学! 参考文献 1 郝军启，刘治国，赵喜来等著.Dreamweaver cs4网页设计与网