网页设计实训报告

湖南科技经贸职业学院计算机科学技术学院实训报告

实训课程：网页设计

班级：计网二班

学号：*********

*名：**

指导老师：***

提交日期：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样式表中设置了“背景图像”，一定要注意检查背景图像所链接的相对路径的正确与否。

✧超链接运用的问题

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

解决方法：超链接样式表只有应用于超链接标签内才会对超链接的文本起作用。如果样式表应用在其它的位置，如、等，将不会对超链接文本起到任何作用。

✧模板运用的问题

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

解决方法：在运用模板时应注意不能直接在模板文件中进行编辑；打开模板文件，在模板中