613331-付军科-计算机系网页设计与制作实训报告【荐】.docVIP

成都航空职业技术学院 《网页设计与制作》 实 训 报 告 专 业： 计算机应用技术 班 级： 613331 学 号： 134034 姓 名： 付军科 指导教师： 陈婉如 2015 年 4 月 《网页设计与制作》实训报告 一、实训项目内容 课程项目内容：计算机工程系网站网页的制作。 二、项目制作目的及要求 目的在于通过前期的课程学习能够熟练运用Dreamweaver做个人网页，设计和制作图片、页面及图标等。 具体要求： 要为网站设计（或仿制）一个具有自己特色的网站logo。 设计风格独特，创意新颖。各个页面统一和谐，色彩搭配协调，页面美观大方。 综合运用现有学过的知识点（表格、框架、模版），布局合理，主页的文件名为：index.html。 链接结构大于二层，下一层必须有返回上层的按钮或链接；页面至少五个，不得出现链接（图像）错误。 保持网站的个性化，体现自已的性格与喜好。 首页添加1个及以上网页特效。 三、课程项目制作时间及进度安排 进度安排如下： 一：选题及构思； 二：相关素材的收集，制作，准备； 三：进行网页制作； 四：撰写课程设计报告，提交作。 小组成员1）付军科?旷心怡?王小童?何凡?冯璐2）负责内容：付军科：网页特效制作?网页后期修改整理?三级页面制作王小童：网页版式布局设计?图片素材处理?首页和二级页面制作旷心怡：PPT制作?文字素材收集?网页特效收集冯璐：制作网页规划书?画网页简图?部分图片素材收集何凡：部分图片素材收集?收集其他高校模板?展示、讲述网页 Dreamweaver制作网页， Adobe Photoshop cs5.5软件，主要用于网页中各素材的裁剪制作等。 五、项目制作步骤及操作方法 1、网页总体介绍 该网页为学院系部网页，通过对整个页面的合理布局及建议清晰的色彩搭配，简单的交互，能使观者了解到人物的信息以及网页整体美感。 2、网页设计介绍 整个网页采用DIV+SS，表格经行布局，网页主页采用简单的导航加图片的搭配； 网站内页设计与首页的风格保持一致，都以蓝白色渐变为主，同时用粉色、黄色作为辅色，使整个色彩搭配透出一丝活力，且简约大方； 网页版面布局采用网页顶部是 代码： div id=banner2 div class=wrap div id=slide-holder div id=slide-runner img id=slide-img-1 src=image/1.jpg class=slide alt= / img id=slide-img-2 src=image/2.jpg class=slide alt= / img id=slide-img-3 src=image/3.jpg class=slide alt= / img id=slide-img-4 src=image/4.jpg class=slide alt= / img id=slide-img-5 src=image/5.jpg class=slide alt= / img id=slide-img-6 src=image/6.jpg class=slide alt= / div id=slide-controls p id=slide-client class=textstrong/strongspan/span/p p id=slide-desc class=text/p p id=slide-nav/p /div 第二步：制作各导航栏内容的二级页面； 代码部分： div id=banner2 table width=1200 border=0 align=center cellpadding=0 cellspacing=0 tr td width=201img src=image/nav-2.png width=201 height=30 //td td width=999div id=top您当前的位置： a href=index.html首页/a gt;gt; a href=xbjs.html系部介绍/a/div/td /tr tr tdimg src=image/bgt-xbjs.jpg width=201 height=100 //td Js语言： script type=text/javascript if(!window.slider) { var slider={}; } slider.data= [