《互联网与网页设计》实训报告.doc

武汉工程职业技术学院实训报告专 业： 电子商务班 级： 10级电商(2)班姓 名： 刘德辉指导老师： 彭 莉 2011年12月 互联网与网页设计实训报告 一、实训目的 1、通过综合实训进一步巩固,深化和加强学生的理论知识于专业技能。(1) 掌握规划网站的内容结构,目录结构,链接结构的方法。(2) 熟练掌握网页制作软件Dreamweaver CS4和基本操作和使用技能。(3) 掌握页面的整体控制和头部内容设置的方法。(4) 熟练掌握网页页面布局的各种方法。(5) 熟练掌握在网页中输入,设置标题和正文文字的方法。(6) 熟练掌握在网页中插入图像,Flash动画和背景音乐的方法。(7) 熟练建立各种形式的超级链接的方法。2、训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。3、培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。4、培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。二、实训内容 策划并建立一个小型网站，上机检查评分。 要求： 1. 网站结构清晰，站点文件夹中所有文件与文件夹命名均符合要求；（20分） 2. 至少三层八个页面，页面之间可以实现互访；（20分） 3. 预览时所有可使用链接均能指向目的页面，不出现“该页无法显示”；（10分） 4. 所有图片、动画、视频等能正常显示；（10分） 5. 网站有明确健康积极向上的主题，分页面内容围绕主题；每个页面都有合适的标题。（10分） 6. 使用导航；至少二级导航；（10分）7. 网页外观整洁，超链接显示明晰；内容区域划分合理，各个页面风格统一；文字编排不拥挤，排版合理；多媒体特效使用得当。（20分）三、实训步骤1、网站主题 我的网站的主旨在于从各个方面全面的介绍轿车，展示不同风格的轿车，包括八种轿车。另外，网站里还包括汽车保养、功能介绍等内容，建立一个展示轿车信息和日常保养的平台。同时，网站里的每一个网页都是相似的风格，每一个网页的主题色彩有一点改变，用以展示自己性格的效果。最重要的是做出自己的风格，给浏览者好的欣赏感受。 2、网站材料 主要在网站上搜集所要的网页信息，包括图片、GIF、mp3、文字、相关的flash。同时，查询相关的书籍、百度等方式收集所需的文字资料,图象资料,flash动画和网页特效等，用以得来更加具有说服力的页面。要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。3、网站规划 我的网站共有6个主页面：首页、联系我们、汽车之家、汽车保养、新品上市、联系我们，每一个页面用统一的黑色背景，以给浏览者一个视觉上的美感。总体结构如下：在汽车之家中又包含了八种车型，分别为宝马、奔驰、奥迪、劳斯莱斯、帕加尼、布加迪、兰博基尼，每一个页面都采用了统一的风格，都是采用的插入3*3（填充，边框，间距都设为0）的表格，再在里面嵌套了一层表格，有的有二层，在八个页面中嵌套的表格间距有的有所改变，这里不一一列举，在外观上外框由上到下是由黑色到白色渐变，中间采用白色的背景(用CSS样式套用的)即每个页面的上面是不同车型的图片，图片下面为导航条，导航条如图：下面为文字和图片，最下面的是版权信息，布局图如下：网站整体色调为黑色，然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用表格，用表格具体定位版面。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，我加入了适当的gif动态图片（不过在次网站中用的很少），用以达到更好的浏览效果。4、网站的制作工具 做网页时主要使用的是Deamweaver。另外，为了处理网页中的其他元素，还使用了Photoshop软件来制作导航条和图片处理。5、制作网站的网页 素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点“汽车”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了“img”文件夹来存放图片。同时，由于“img”页面中的图片太多，于是在里面建立了几个文件夹（如01-04img，05-08img等）存放图片信息，网页中的css 样式文件也应统一管理，做到有条不紊，我设计的欢迎界面是由7张依次自动翻页的图片组成的，代码如下： /DIV且插入了一首背景音乐，网页的背景为黑色的，既突出网站的主题，又给人以良好的感觉，同时增加页面的可看性。在左下角插入的是一张透明的英文的欢迎字母，右下角是自己写的“进入首页”用了css样式并设置了超链接（超链接字体的颜色也用页面属性进行了设置），此页面先先插入一个三行三列的表格（填充，边框，间距都设为0），并在编辑标签对表格进行了相应设置（以后所有的页面都进行了相应的设置），在第二行的中间设置了滚动图片，最下面一行三列合并并插入了一行三列的一个表格。做好后的结构图如下：我设计的网站的首页如下图：以导航栏为界，首页用flash动画，用以给浏览者更快的进入页面。最下方有我的版权。上边为导航条，一方面为了布局合理，弥补下面的空缺，另一方面给浏览者提供一个良好的视觉效果，点击其中任意一个导航条都会连接到其他网页，还用到了显示-隐藏行为，如鼠标移动到新品展示就会出现下面网页：在视屏的下面有一组滚动的图片，分别展示不同的车型，图片如下：在此用到了一些使图片滚动代码，代码如下：var speed=12/速度数值越大速度越慢jsweb8_cn_left2.innerHTML=jsweb8_cn_left1.innerHTMLfunction Marquee3()if(jsweb8_cn_left2.offsetWidth-jsweb8_cn_left.scrollLeft=0)jsweb8_cn_left.scrollLeft-=jsweb8_cn_left1.offsetWidthelsejsweb8_cn_left.scrollLeft+var MyMar3=setInterval(Marquee3,speed)jsweb8_cn_left.onmouseover=function() clearInterval(MyMar3)jsweb8_cn_left.onmouseout=function() MyMar3=setInterval(Marquee3,speed)根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽一般没有超过900像素，以保证左右不出现滚动条。第二个主页面是新品展示，如下图：为了使页面连接清晰，网页中插入了几个导航条，分别是如上图，当点击任一按钮都会连接到相应的网页。导航条是自己用PS制作的，第三个主页面是汽车之家，结构如图： 轿车之家中包含导航条、图片和文字等。在下方插入了漂亮的滚动动画，动画为不同的车型，是为了达到亮眼的效果，又有新意。插入这个动画是为了使页面的整体布局合理，既突出网站的主题，又给人以凝重的感觉，同时增加页面的可看性，滚动代码与首页的一样。第四个主页面是功能介绍，布局和第第六个的风格大体相似，结构图如下：它与其它主页面采用了不同的背景，相同的布局。为了使页面连接清晰，只在最下方用了一个“返回首页”链接到首页面，单击“返回首页”。就可以进入到首页网页。第五个主页面是汽车保养，这个主页面和汽车之家、新品展示的风格大体一样，也在左边插入了一个导航条，这里不再重复，这几个网页既突出网站的主色调，又给人以凝重的感觉，目的都是增加网页的可看性。上面的页面整体美观漂亮，如果出现上面页面就可以倾听动人的音乐了。最后，还要制作各个页面的链接，把整个网页链接起来，形成一个统一的整体，方便浏览者进行各个页面间的跳转。网页制作完毕以后，要进行反复的修改，保存后在IE浏览器上反复运行自己的网站，用以发现设计中的缺陷并及时改正。四、实训总结我通过这次制作网页的机会，通过这次实训，我学到了很多有价值的东西。我独立的完成了网站设计的全过程，把设计中散乱的网页链接成一个体系，使平时学到的知识点有了很高的提高，并且合理的在试验中进行了实践。在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，扩大了知识面，给我在以后的设计过程中能博采众长，制作出好的网页打下了基础。我现在已经掌握文档排版标记的使用熟练使用及其属性设置、特殊符号；我现在已经熟练使用超级链接，合理使用列表；我现在已经掌握图片标记及相关属性的使用、了解表格标记制作表格的方法这次实训充分利用了课堂所学，掌握了许多关键技术，例如合理利用表格，CSS样式，使得制作过程方便了很多。在完成基本要求得基础上，文件夹、文件命名规范；文件存放位置合理；制作完成之后进行过现场清理，当不是很彻底，没有无用的文件、文件夹，当有没有用的图片，没有断链；内容较丰富、自己设计制作的素材应用多；色系、布局合理美观、考虑用户访问方便；采用各种特效、并且运用合理。不过也有些不足，比如一开始没有把两个人制作的文件夹分开，导致后面汇总时比较麻烦。在就是在开始的时候向我的网站里面放了太多的图片，而在制作网页的时候有的并没有用到，由于时间的关系，我没有对这些无用的图片进行处理，使得“img”里面的图片看起来比较零乱。不过总的来说，对这次的作品相