一、网站的结构规划

.

• 知识目标：

1、了解交互网站的不同表现形式。

2、了解交互网站的不同版式结构。

.

• 能力目标：

1、学会分析交互网站的层级结构。

2、能够概括网站的结构和规划网站结构。

.

• 课程重难点：

1、重点：网站树状结构层的分析。

2、难点：分析网站的内容结构。

.

• 课程概况、教学主要内容：

网站我个人的理解是：被设计出来，首先在视觉方面是给人用，给人看的。 那就要好看（简洁）、要好用（高效）。其次就是要把所有的东西讲清楚，你要的我都有，你不要的也可以看看我其他有的最后需要根据现在公司新产品、新文化、新定位、重新整体性建设官网。

.

具体制作步骤：

1、 确定网站主题，网站的具体名字和设计风格

如果是商业网站，需要了解具体客户的需要，第一时间要跟客户交流，了解客户的想法和对该网站的需求和制作网站的最终目的。例子上江西赣江宾馆是为服务类行业的客户所制作的网站，客户的需求是用该网站达到宣传自己宾馆的目的和方便客户的网上订购所需。

2、 分析客户的想法和该网站的具体设计思路和制作方案

赣江宾馆在设计思路上体现的是客户所要求的体现自己江南园林那种幽静秀美的特色，在水字上面下足功夫。设计上运用图片，动画，音乐来营造这种气氛，由于该网站的受众人数不是太庞大，所以对网站速度要求可以适当放低。所以为了动画的精彩，网站的文件可以制作的适当大点。

3、 为该网站绘制树状结构图

了解客户对网站的内容需求，积极跟客户沟通，即时掌握客户要放置的内容信息，把客户所需的信息汇总分析，然后为这些信息归类，制定比较合适的页面数量。赣江宾馆网站在信息归类上，把主要内容分别归为九大类：

（1）宾馆介绍，包含宾馆概况，宾馆沿革，企业文化三部分内容。

（2）餐饮服务，包含餐厅介绍，经典菜肴，宴会专题，美食点评，名厨名菜，宴会预定六部分内容。

（3）客房服务，包括标准房，单人房，套房，客房预定四部分。

（4）会议服务，包括多功能宴会厅，大会议室，小会议室，酒店服务，会议预定五部分。

（5）最新信息，优惠信息，宾馆通讯，人才招聘三个部分。

（6）在线预定，会员，一般客户，常客计划三个部分。

（7）其他产业，包括赣江商场，赣江旅行社，赣江酒店工程有限责任公司，赣江酒店用品销售中心四部分。

（8）康乐服务，包括一枝春茶园，芬兰浴，斯诺克室，健身房，美容厅五部分。

（9）联系我们，包括联系我们，电子邮件两部分。

网站包括片头动画，主页面，九个子页面。绘制的结构图，如图，11-8所示。

 

图11-8网站结构图

4、 收集资料

为我们的网站收集所需的文字，图片的资料。

页面的文字资料基本由客户提供，而且客户也会告知文字资料的来源。我把赣江宾馆里面用到的文字资料整理起来按照一定的级别次序放在Word文件里面，具体可以打开文件夹“导航设置，文字内容”里面的“网页设置内容”Word文档进行参照。

图片资料，如果该公司有网络上现成的图片资料，我们可以直接下载来用。而一些实际的照片资料，我们可以去实际拍摄，比如宾馆的各个客房,商店，餐厅，公园等；为了使真个网站文件不至于太大，也是加快图片在网站里的调入速度。我们要将拍摄来的图片进行图片压缩，把图片文件缩小，图片的文件控制在40KB以内，把图像的大小都设为320*240像素。设置的方法我们在《Photoshop与Flash图形图像制作整合》这一章节里提到过了，这里就不做细说了。将处理过的文件一一放在各自的文件里，具体看 “处理过的图片” 文件夹。

5、 创建存放网页的文件夹

网站是由一个个网页组成，首先我们新建一个文件夹，命名为“赣江宾馆”。网站当中的一切文件都放置在这个文件夹中。我们的网站包括一个片头动画，我们命名为“index”。一个网站首页，我们命名为“main”。下面包括九个子页面，分别为：宾馆介绍、客房服务、餐饮服务、会议服务、康乐服务、在线预定、最新信息、其他产业、联系我们。

Flash文件名分别命名为：“aboutus”，“cate”，“contact”，“entertainment”，“guestroom”，“meeting”，“news”，“order”，“Servation”。

6、 为子页面创建文件夹

为这九个子页面分别新建一个文件夹，放置每个子页面的文字内容，和一些影片剪辑。

u 我们首先把第一个文件夹命名为aboutus，用来放置宾馆介绍页面的文字内容。

u 第二个文件夹命名为“cate”，用来放置餐饮服务的文字内容和一些影片剪辑。

u 第三个文件夹命名为“contact”，放置联系我们页面的文字内容。

u 第四个文件夹命名为“entertainment”，放置康乐服务页面的文字内容。

u 第五个文件夹命名为“guestroom”，放置客房服务页面的文字内容。

u 第六个文件夹命名为“meeting”放置会议服务页面的文字内容。

u 第七个文件夹命名为“news”，放置新闻信息页面的文字内容。

u 第八个文件夹命名为“order”，放置在线预定页面的文字内容等文件。

u 第九个文件夹命名为“servation”,放置其他产业的文字内容等文件。

7、 再分别新建两个文件夹image和loading

Image文件夹主要是放置一些用到的图片，loading文件夹主要放置等待页面的一些小图片。文件放置方法如图11-9所示。

图11-9文件放置方法

 

.

具体网站制作实例：