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

学号*****《网页设计与制作》课程设计报告题目：维影影视公司网页设计专业：数字媒体技术班级：12（1）班姓名：*******指导教师：***成绩：计算机与信息工程系二0一四年六月二十日2014-2015学年第一学期计算机与信息工程系《网页设计与制作》课程设计报告目录1设计内容及要求..................................................................................21.1设计内容.............................................................................................................................21.2设计任务及具体要求.........................................................................................................22总体设计...............................................................................................32.1该网站的功能简介.............................................................................................................32.2网站设计概括图................................................................................................................33设计过程...........................................................................................43.1各个模块的设计流程.........................................................................................................43.2对关键代码和效果处理加以分析说明.............................................................................74设计结果与分析.............................................................................115小结...................................................................................................12致谢...........................................................................................................13参考文献...................................................................................................14计算机与信息工程系《网页设计与制作》课程设计报告21设计内容及要求1.1设计内容《维影影视网站》主要根据课程设计要求进行设计，并了解了维影公司的基本情况，该网站主要包括六大模块：1）导航栏模块，主要有首页、产品展示、新闻动态、留言板、关于我们、联系我们。2）新闻动态模块，最近的一些影视方面的信息。3）产品分类模块，主要是些电影的类型分类。4）在线客服模块，为来访者提供一些我们公司的在线服务。5）公司简介模块，介绍公司的一些基本情况。6）热销产品模块，向大家介绍一些我们公司的一些热销电影。1.2设计任务及具体要求主要利用Photoshop和Dreamweaver进行一个小型的影视公司网站开发，网站内容涵盖了维影影视公司的一些最基本情况，以及维影公司的最新电影出台情况，并且提供一系列的人工在线服务为我们的来访者解答这种问题。要求：明确课程设计的目的，能根据课程设计的要求，查阅相关文献，为完成设计准备必要的知识；提高学生用Photoshop和Dreamweaver进行程序设计的能力，重点提高用Dreamweaver进行网页制作技术水平；初步了解软件开发的一般方法和步骤；提高撰写技术文档的能力。计算机与信息工程系《网页设计与制作》课程设计报告32总体设计2.1该网站的功能简介该网站的主要功能是介绍维影公司的基本情况，并作为一个功能型的网站展示给我们大家，包括一些最新电影展示，最终目的还是为一些想做影视的公司提供一些服务，宣传自己。2.2网站设计概括图图1总体布局图计算机与信息工程系《网页设计与制作》课程设计报告43设计过程3.1各个模块的设计流程1）主页模块设计该模块主要是是展示我们网页的基本框架，以及有什么基本功能，通过主页我们可以很清晰的看到我们维影网站的整体布局，以及我们来访者可以从我们网站上获得什么相关的信息，一目了然看到我们是一个实力雄厚的大公司，从网站我们就可以看到该公司是一个结构分明，管理有条不紊。图2主页模块设计图2）产品展示模块设计该模块主要是展示维影公司最近一段时间的所拍摄的电影，通过电影展示我们维影公司的影视实力。计算机与信息工程系《网页设计与制作》课程设计报告5图3产品展示模块设计图3）留言板模块设计该模块主要为供我们来访者提一些关于影视方面的意见，以及他们对电影的看法，以及喜欢看什么类型的电影，好让我们公司通过这些宝贵意见做的更好，是项吸纳民意的好办法。图4旅游宝典模块设计图计算机与信息工程系《网页设计与制作》课程设计报告64）联系我们模块设计该模块主要为将我们的地理坐标告诉来访者，如果有人愿意找我们公司做一些什么关于栏目包装、宣传片什么之类的可以通过该地址找到我们公司。图5联系我们页面设计图5）在线客服模块设计该模块主要为来访者提供一些在线服务，为他们解答一些先关的疑难问题，是我们在线交流的必要手段，不管来访者有什么问题，我们公司都可以一一解答，这是一个仁智的服务。图6旅游景点模块设计图计算机与信息工程系《网页设计与制作》课程设计报告73.2对关键代码和效果处理加以分析说明1）主页部分设计代码htmlheadtitlewangye/titlemetahttp-equiv=Content-Typecontent=text/html;charset=utf-8styletype=text/cssbody,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{计算机与信息工程系《网页设计与制作》课程设计报告8text-decoration:none;}#__01trtdstronga{color:#FFF;}/style/headbodybgcolor=#FFFFFFleftmargin=0topmargin=0marginwidth=0marginheight=0!--SaveforWebSlices(wangye.psd)--tablewidth=1823height=1258border=0align=centercellpadding=0cellspacing=0id=__01trtdcolspan=28imgsrc=images/index_01.jpgwidth=1822height=114alt=/tdtdwidth=1imgsrc=images/分隔符.gifwidth=1height=114alt=/td/trtrtdwidth=447rowspan=25imgsrc=images/index_02.jpgalt=width=447height=1143usemap=#Map5border=0/tdtdcolspan=3rowspan=2ahref=index.htmlimgsrc=images/index_03.jpgwidth=57height=35alt=/a/td计算机与信息工程系《网页设计与制作》课程设计报告9tdcolspan=2rowspan=5imgsrc=images/index_04.jpgwidth=37height=379alt=/tdtdcolspan=3rowspan=2ahref=cpzs.htmlimgsrc=images/index_05.jpgwidth=58height=35alt=/a/tdtdcolspan=2rowspan=5imgsrc=images/index_06.jpgwidth=30height=379alt=/tdtdcolspan=2ahref=xwdt.htmlimgsrc=images/index_07.jpgwidth=65height=27alt=/a/tdtdwidth=22rowspan=6imgsrc=images/index_08.jpgwidth=22height=381alt=/tdtdwidth=69ahref=lyb.htmlimgsrc=images/index_09.jpgwidth=69height=27alt=/a/tdtdwidth=27rowspan=6imgsrc=images/index_10.jpgwidth=27height=381alt=/tdtdcolspan=2rowspan=2ahref=gywm.htmlimgsrc=images/index_11.jpgwidth=63height=35alt=/a/tdtdwidth=15rowspan=6imgsrc=images/index_12.jpgwidth=15height=381alt=/tdtdwidth=71rowspan=2ahref=lxwm.htmlimgsrc=images/index_13.jpgwidth=71height=35alt=/a/tdtdcolspan=8rowspan=3imgsrc=images/index_14.jpgwidth=861height=339alt=/tdtd计算机与信息工程系《网页设计与制作》课程设计报告10imgsrc=images/分隔符.gifwidth=1height=27alt=/td/trtrtdcolspan=2rowspan=5imgsrc=images/index_15.jpgwidth=65height=354alt=/tdtdrowspan=5imgsrc=images/index_16.jpgwidth=69height=354alt=/tdtdimgsrc=images/分隔符.gifwidth=1height=8alt=/td/tr