网页设计实训报告

湖南科技经贸职业学院计算机科学技术学院实训报告
实训课程：网页设计
班级：计网二班
学号：*********
*名：**
指导老师：***
提交日期：2010-6-21
前言
至于我为什么选择酒店设计题材，因为本人就是想以后自己能办一个很品牌一点的酒店。

在选择好题目和网站的风格之后，我就进行了分工，希望能在最短的时间内做到最好的效果。

接下来的步骤就是准备素材，搜集与主题相关的文字、图像、动画、音乐等资料。

再是设计网站的内容结构、目录结构和链接结构，设计首页及其页面的版式结构。

然后创建本地网站，建立网站的目录结构。

制作首页、创建超级链接。

最后就是测试与浏览网页。

对于酒店网站的设计，我结合了国内外很多知名品牌酒店的网站页面的设计前沿。

取其精华，去其糟粕，在网站内容上删减了很多的在外观上的美，整体讲究整体美和简洁美，对于本网站的设计凝聚了本人长达三个星期的时间，完成网站静态设计后，从总体上对网站动态上进行动态设计，希望本网站能在我们这个年纪的领域有一个很好的炫美。

目录
✧实训目的 (3)
✧实训任务 (4)
✧实训项目（网页设计思路及详细说明） (5)
✧实训中遇到的问题与解决问题的方法 (6)
✧实训心得与体会 (7)
一．实训目的
进一步熟悉和掌握网站建设的基本流程和技术规范；
巩固运用Dreamweaver网页制作软件制作网页、特别是制作动态网页的
知识；
巩固运用PhotoShop图像处理软件进行网页中图形制作和运用flash动画
制作软件设计网页中动画的知识；
巩固综合运用Dreamweaver、PhotoShop、flash三个软件完成网站建设任
务的方法，能独立设计一个内容完整、图文并茂、技术运用得当的网站；
具备独立撰写实训报告等科技文件的基本能力；
在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流
的能力，培养创新能力和团队意识；
为今后从事网站开发、维护和管理奠定基础。

二、实训任务
➢站点规划，搜集资料。

确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。

➢进行主页设计。

构思主页布局，进行主页标题图片的设计（要求原创），进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化
设计。

➢网页设计。

除主页以外的网页设计，首先设计网页模版，一部分网页由模版生成，一部分为单独设计（依据实际需要确定哪些网页由模版生成，确定哪些网页单独设计）。

包括版面设计和图形设计、内容录入等。

➢动画设计。

主页动画设计和其余页面动画设计，充分运用所掌握技术，效果好。

➢综合优化。

链接正确、得当，动态效果好（时间轴动画、行为、代码的嵌入等）
➢网站测试并递交。

在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画是否丢失等。

三、实训项目（网页设计思路及详细说明）
项目：《中国室内设计网》网站设计
项目设计说明：
◆站点结构与命名。

✓站点文件夹为班级学号姓名（如：09计网二班XXX）
✓站点文件夹中所包含文件夹：Images（存放图片文件）
✓Templates（存放模板文件）
✓Library（存放库文件）
✓Other（存放其它文件）
✓原文件（存放自己设计的图形、动画文件，但最终要用的图形、动画文件还是要放到Images文件夹下）其余视文件夹需要而添加，全部用英文命名✓站点文件夹中所包含文件：index(首页)
✓*.css（样式表文件）其余视文件夹需要而添加，全部用英文命名
例如：
\
◆网站题材选择。

✓制作个人网站
✓制作班级网站
✓制作学校网站
✓制作教学资源网站
✓制作旅游网站
✓制作公司网站
◆网站技术要求。

✓页面布局合理，色彩和谐，链接正确，图文并茂并茂。

网站页面大小满足800*600分辨率的客户。

✓主要图片和动画为原创（保存有源文件），主页标题图片（动画）必须为原创。

✓必须且合理使用动态技术（包括行为、时间轴动画、嵌入代码等），必须且合理运用模版、库文件。

✓站点中要有一个首页，二级网页总数不少于10页。

三级页面数目不限，结构为：
◆ 网站设计详细说明
➢ 设计一个模板：（如图1所示）
图1
➢ 将所建模板保存，利用模板新建一个HTML 页面，并在模板中的可编辑区域中插入表
格，再往表格中插入图片：（如图2所示）
栏目2 栏目1 栏目3 主页
栏目4
内容2 内容1 内容3
图2
图3
预览效果如图a所示：
图a
➢在下一行表格中插入视频文件：（如图4所示）
图4
预览效果如图b所示：
图b
➢在下一行表格中插入背景图片，并在里面输入文本：（如图书5所示）
图5 预览效果如图c所示：
预览效果如图e所示：
图e
➢在下一行表格中插入表格，并输入图片：（如图8所示）
图8
预览效果图果f所示：
➢运用以上方法完成其它表格的制作，最终页面效果预览如图g所示：
图g
四、实训中遇到的问题和解决方法
✧路径问题
现象：预览时文件不能显示预览效果。

解决方法：在文件夹或文件存放过程中，应注意存放和命名的规范，要明白绝对路径和相对路径的区别。

✧表格的布局问题
现象：预览时表格被衬大或缩小、显示页面混乱。

解决方法：在运用表格布局的过程中，应注意合理的插入表格、设置表格的属性，关键是要懂得合理运用表格中的百分比与像素。

✧Style样式运用的问题
现象：背景运用CSS样式时，在预览中不能显示。

解决方法：在一个网站站点中，通常都使用相对的链接路径，在CSS样式表中，如果在其中一个CSS样式表中设置了“背景图像”，一定要注意检查背景图像所链接的相对路径的正确与否。

✧超链接运用的问题
现象：对文本或图片设置链接后，在预览效果中依然不能有效进行链接。

解决方法：超链接样式表只有应用于超链接标签<a>内才会对超链接的文本起作用。

如果样式表应用在其它的位置，如<td>、<span>等，将不会对超链接文本起到任何作用。

✧模板运用的问题
现象：网页不能在IE浏览器中预览以及在模板文件下新建的页面不能进行更改。

解决方法：在运用模板时应注意不能直接在模板文件中进行编辑；打开模板文件，在模板中
进行需要的修改，然后再更新到其它文件。

✧边框编辑的问题
现象：给边框在属性中设置最小值还是不能满足需要
解决方法：在样式面板中，添加自己定义的样式，在自己定义的过程中可将边框的值定义得更小，以达到自己的目的。

✧Div层的运用问题
现象：在预览效果中，有一部分文本不能显示出来
解决方法：在该层的属性面板的中，在“益出”下拉列表中选择“hidden”，问题即可解决。

五、心得体会
通过本次的实训，在老师的热心指导和精心培养下，我不仅在知识上有了很大的提升而且在心得上也是收获颇多。

本次实训的目的旨在检验我们在平常学习中所学知识、将上课所学的理论知识在实践中巩固掌握以及进一步熟悉和掌握网页设计与网页制作的基本流程。

回顾这次课程设计，至今我仍感慨颇多，的确，从选题到开始制作，从理论到实践，在5天实训的日子里，可以说得是苦多于甜，但是可以学到很多很多的的东西，同时不仅可以巩固了以前所学过的知识，而且学到了很多在书本上所没有学到过的知识。

通过这次课程设计使我懂得了理论与实际相结合是很重要的，只有理论知识是远远不够的，只有把所学的理论知识与实践相结合起来，从理论中得出结论，才能真正为掌握技术，从而提高自己的实际动手能力和独立思考的能力。

在设计的过程中遇到问题，可以说得是困难重重，这毕竟是第一次独自设计网站、制作网站，难免会遇到过各种各样的问题，同时在设计的过程中发现了自己的不足之处，对以前所学过的知识理解得不够深刻，掌握得不够牢固，比如说拖动层的设置，时间轴与层的显示与隐藏的综合应用，在CSS的具体应用还不是和很熟练，没有能完全达到自己预期的效果，还好通过老师的细心指导才能达到最终效果……通过这次网页设计与制作实训，一定把以前所学过的知识重新温故。

此次实训中我发现了在网页设计与制作的过程中存在许多的细节问题，也从中学到了很多课本上没有的知识。

关键是从自己单独设计与制作网页的过程中，培养了自己主动学习、敢干动手与自己发现问题、解决问题的能力，这为以后进一步的学习网页制作与网站开发打下了一个良好的基础，也给以后的工作作了一个良好的铺垫。

本次实训自己设计的室内设计网网站实现了布局清晰、有条理，视觉效果较好，涉及的知识点较全面等目标，但是在连接数据库等方面还是存在一些问题，这是开发动态网站的重要基础，我认为自己以后应该在静态网页到动态网页的转变方面多钻研、多努力，使自己在静态、动态网站开发上的水平有一个质的提升。

希望通过对本网站的建设，可以提升自己以后在网站建设方面的一部分能力，我相信，现在在努力是为以后的成功的事业打下一个坚实的基础，为自己美好的人生铺好一条阳光而灿烂的道路。

通过这次实训是自己的真实能力有了一次质的飞跃。

实训人：彭论
2101年6月21号。