文档介绍：武汉工程职业技术学院实训报告专业:电子商务班级:10级电商(2)班姓名:刘德辉指导老师:彭莉2011年12月《互联网与网页设计》实训报告一、实训目的1、通过综合实训进一步巩固,深化和加强学生的理论知识于专业技能。(1)掌握规划网站的内容结构,目录结构,链接结构的方法。(2)熟练掌握网页制作软件DreamweaverCS4和基本操作和使用技能。(3)掌握页面的整体控制和头部内容设置的方法。(4)熟练掌握网页页面布局的各种方法。(5)熟练掌握在网页中输入,设置标题和正文文字的方法。(6)熟练掌握在网页中插入图像,Flash动画和背景音乐的方法。(7)熟练建立各种形式的超级链接的方法。2、训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。3、培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。4、培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。二、实训内容策划并建立一个小型网站,上机检查评分。要求:,站点文件夹中所有文件与文件夹命名均符合要求;(20分),页面之间可以实现互访;(20分),不出现“该页无法显示”;(10分)、动画、视频等能正常显示;(10分),分页面内容围绕主题;每个页面都有合适的标题。(10分);至少二级导航;(10分),超链接显示明晰;内容区域划分合理,各个页面风格统一;文字编排不拥挤,排版合理;多媒体特效使用得当。(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张依次自动翻页的图片组成的,代码如下:<DIVstyle="LEFT:0px;OVERFLOW:hidden