项目10 综合设计.

Presentation on theme: "项目10 综合设计."— Presentation transcript:

1 项目10 综合设计

2 任务1 站点创建流程 任务2 站点目录结构的规划和设置 项目1 了解网站的概念 任务3 制作含按钮、导航拦、表单的交互式网页 任务4 制作子页，完善网站 项目总结

3 任务1 站点创建流程 任务分析 本项目以“茗香绿长”香茗专卖链锁公司的小型企业网站为例，完成相应任务。
任务1 站点创建流程 任务分析 本项目以“茗香绿长”香茗专卖链锁公司的小型企业网站为例，完成相应任务。 本任务要求完成“茗香绿长”网站制作前的策划工作，策划内容包括网站的主题、名称、内容、栏目、布局和色彩等。

4 任务1 站点创建流程 相关知识 一．网站制作的基本流程 1．了解客户的需求 制作网站前必须先与客户进行沟通，了解客户对网站的要求，和客
任务1 站点创建流程 相关知识 一．网站制作的基本流程 1．了解客户的需求 制作网站前必须先与客户进行沟通，了解客户对网站的要求，和客 户协商网站基本功能需求和基本设计要求,根据网站的主要功能规划网站 的结构，调查网站的浏览群体

5 任务1 站点创建流程 相关知识 一．网站制作的基本流程 2．网站设计 网站的制作都是从设计开始的，网站的设计包括：主题和名称的确
任务1 站点创建流程 相关知识 一．网站制作的基本流程 2．网站设计 网站的制作都是从设计开始的，网站的设计包括：主题和名称的确 定，内容的组织，栏目的划分，Logo设计，界面布局设计，色彩的搭配， 选择制作网页的软件工具，站点文件夹的结构设计。若规划为动态网站， 还需要进行数据库设计等。

6 任务1 站点创建流程 相关知识 一．网站制作的基本流程 3．制作网站 根据前期的设计思路，使用各类辅助软件来制作网站，
任务1 站点创建流程 相关知识 一．网站制作的基本流程 3．制作网站 根据前期的设计思路，使用各类辅助软件来制作网站， 例如：Photoshop、Flash、Dreamweaver等。

7 任务1 站点创建流程 相关知识 一．网站制作的基本流程 4．测试网站 一个网站制作完成后，首先要进行测试以保证该网站能顺利运
任务1 站点创建流程 相关知识 一．网站制作的基本流程 4．测试网站 一个网站制作完成后，首先要进行测试以保证该网站能顺利运 行。测试主要包括功能测试和可用性测试。功能测试包括链接测试、 表单测试等；可用性测试包括导航测试、图形测试、内容测试、整体 界面测试等。由于本书涉及的只是静态网页，因此不涉及表单测试 的内容。

8 任务1 站点创建流程 相关知识 一．网站制作的基本流程 5．发布网站 网站制作完成并测试合格后，需要上传到互联网上的某台服务器，
任务1 站点创建流程 相关知识 一．网站制作的基本流程 5．发布网站 网站制作完成并测试合格后，需要上传到互联网上的某台服务器， 同时还要提供一个域名供访问者访问时使用。

9 任务1 站点创建流程 相关知识 一．网站制作的基本流程 6．维护网站 根据客户的需求，后期对网站的内容进行及时更新。

10 任务1 站点创建流程 相关知识 二．网站的设计 1．网站内容的设计 网站内容的设计包括网站主题的选定、内容的组织和栏目
任务1 站点创建流程 相关知识 二．网站的设计 1．网站内容的设计 网站内容的设计包括网站主题的选定、内容的组织和栏目 的设计等。网站的主题要明确，组织内容要合理，栏目划分要清 晰。制作网站的最终目的是发布信息，因此作为信息载体的网页， 最重要的是做到便于阅读。只有科学地分类和合理地组织内 容，网站要表现的内容才能被方便地查找和阅读。

11 任务1 站点创建流程 相关知识 二．网站的设计 2．网站色彩的设计 网站的色彩选用不当，会使人产生视觉疲劳，影响网站的访问量，
任务1 站点创建流程 相关知识 二．网站的设计 2．网站色彩的设计 网站的色彩选用不当，会使人产生视觉疲劳，影响网站的访问量， 所以合理选用网站色彩是设计者必须考虑的问题。一个网站不能只用单 一的色彩，那会让人感觉单调乏味，但也不能将所有的色彩都用到网站 中，这样会显得太过花俏。网站的色彩应尽量控制在四种以内。一个网 站必须有一种或两种主色调，给人总体的色彩感觉；也可以使用一种色 彩，然后通过调整透明度或饱和度，将色彩变淡或加深，这样使页面看 起来色彩和谐统一、有层次感。背景和前文的对比要强烈，尽量不要用 图案复杂的图像做背景。网站各个页面的色调应该保持一致，主色调之 外的其他色彩可以用来点缀和衬托，但是不能给人喧宾夺主的感觉。

12 任务1 站点创建流程 相关知识 二．网站的设计 2．网站色彩的设计 网页配色可以参考以下几种方案：
任务1 站点创建流程 相关知识 二．网站的设计 2．网站色彩的设计 网页配色可以参考以下几种方案： 暖色系网站：多用红色、橙色、黄色等色彩的搭配。 这种色调的使用可使页面呈现出温暖、热情的氛围。 冷色系网站：多用青色、绿色、蓝色等色彩的搭配。 这种色调的使用可使页面呈现出宁静、清新、高雅的氛围。 对比色系网站：将色差对比强烈的色彩搭配在网页里，如红与绿、黄与紫、橙 与蓝等。这种色彩的搭配可以产生对比性强的视觉效果，但 是如果用得不好，则会显得俗气、刺眼。 不同的颜色搭配会给浏览者不同的心理感受。

13 任务1 站点创建流程 相关知识 二．网站的设计 2．网站色彩的设计 网页配色可以参考以下几种方案：
任务1 站点创建流程 相关知识 二．网站的设计 2．网站色彩的设计 网页配色可以参考以下几种方案： 暖色系网站：多用红色、橙色、黄色等色彩的搭配。 这种色调的使用可使页面呈现出温暖、热情的氛围。 冷色系网站：多用青色、绿色、蓝色等色彩的搭配。 这种色调的使用可使页面呈现出宁静、清新、高雅的氛围。 对比色系网站：将色差对比强烈的色彩搭配在网页里，如红与绿、黄与紫、橙 与蓝等。这种色彩的搭配可以产生对比性强的视觉效果，但 是如果用得不好，则会显得俗气、刺眼。 不同的颜色搭配会给浏览者不同的心理感受。

14 任务1 站点创建流程 相关知识 二．网站的设计 3．网页的布局设计 合理恰当的网页布局，会使网站的访问者耳目一新，同样也可以使访问者比
任务1 站点创建流程 相关知识 二．网站的设计 3．网页的布局设计 合理恰当的网页布局，会使网站的访问者耳目一新，同样也可以使访问者比 较容易在网站中找到所需要的信息。一般来讲，普通的页面通常包含的内容有： Logo(网站标志)、Banner(横幅广告，用于显示网站名称或广告信息)、导航 栏(方便用户在网站内的各个栏目之间跳转)、内容区和版权信息区等。

15 任务1 站点创建流程 相关知识 二．网站的设计 3．网页的布局设计 这几项内容可以按照不同的布局方式组织到页面中，网页常用的布局有如下几种：
任务1 站点创建流程 相关知识 二．网站的设计 3．网页的布局设计 这几项内容可以按照不同的布局方式组织到页面中，网页常用的布局有如下几种： “T”型布局：主要特点是页面顶部为横幅广告区 (网站标志+广告条)，下方左侧为导航菜单，右侧显 示网页主体内容的布局。它是网页设计中比较常见的 一种布局，优点是页面结构清晰、主次分明。如果 网站的栏目偏少，可以考虑采用此布局方式。 “T”型布局网页如图10-1所示。 ◆图10-1 “T”型布局

16 任务1 站点创建流程 相关知识 二．网站的设计 3．网页的布局设计 这几项内容可以按照不同的布局方式组织到页面中，网页常用的布局有如下几种：
任务1 站点创建流程 相关知识 二．网站的设计 3．网页的布局设计 这几项内容可以按照不同的布局方式组织到页面中，网页常用的布局有如下几种： “口”型布局：主要特点是页面上侧有—个广告条， 下侧是版权区，左侧和右侧都有相关信息，如导航菜 单、友情链接等，页面的中间是主体内容，形成一个 “El”字型。这种布局的优点是页面利用得比较充分， 展示的信息较多。 “口”型布局网页如图10-2所示。 ◆图10-2 “口”型布局

17 任务1 站点创建流程 相关知识 二．网站的设计 3．网页的布局设计 这几项内容可以按照不同的布局方式组织到页面中，网页常用的布局有如下几种：
任务1 站点创建流程 相关知识 二．网站的设计 3．网页的布局设计 这几项内容可以按照不同的布局方式组织到页面中，网页常用的布局有如下几种： “三”型布局：主要特点是页面上横向几条色块或区 间，将页面整体分割为水平方向的几部分。 “三”型布局网页效果如图10-3所示。 ◆图10-3 “三”型布局

18 任务1 站点创建流程 相关知识 二．网站的设计 3．网页的布局设计 这几项内容可以按照不同的布局方式组织到页面中，网页常用的布局有如下几种：
任务1 站点创建流程 相关知识 二．网站的设计 3．网页的布局设计 这几项内容可以按照不同的布局方式组织到页面中，网页常用的布局有如下几种： ◆图10-4 对称对比布局 对称对比布局：采取左右或者上下对称的结构，一 般用于设计型站点。优点是视觉冲击力强，缺点是将 两部分有机的结合比较困难。 对称对比布局网页效果如图10-4所示。

19 任务1 站点创建流程 相关知识 二．网站的设计 3．网页的布局设计 这几项内容可以按照不同的布局方式组织到页面中，网页常用的布局有如下几种：
任务1 站点创建流程 相关知识 二．网站的设计 3．网页的布局设计 这几项内容可以按照不同的布局方式组织到页面中，网页常用的布局有如下几种： “宣传单”布局：也称POP布局。主要特点是整个 页面像一张宣传海报，通常以一张精美图像作为页面 的设计中心，常用于时尚型站点，页面整体清新且吸 引人。 “宣传单”布局网页效果如图10-5所示。 ◆图10-5 “宣传单”布局

20 任务1 站点创建流程 相关知识 二．网站的设计 4．网站的结构设计 网站目录的结构对于网站的上传和维护有着重要的作用，不要将所有的文
任务1 站点创建流程 相关知识 二．网站的设计 4．网站的结构设计 网站目录的结构对于网站的上传和维护有着重要的作用，不要将所有的文 件都不分类别地存在站点根目录下，应该将文件进行分类。例如，存放图像的 文件夹命名为“images”，存放除了主页之外网页的文件夹命名为“pages”， 存放CSS样式的文件夹命名为“style”，存放Fish的文件夹命名为“nash”， 主页命名为“index．htnl”，分门别类地存放在站点根目录下，目录的层次 不要过多，建议不要超过三层。站点中切忌使用中文目录，文件的名字尽量 使用字母。

21 任务1 站点创建流程 相关知识 三．提高网站的打开速度 在设计网页时最基本的要求是美观且精简，保证用户访问网页时有较高的
任务1 站点创建流程 相关知识 三．提高网站的打开速度 在设计网页时最基本的要求是美观且精简，保证用户访问网页时有较高的 访问速度。针对页面的打开速度，有一个“8秒钟法则”：当某个页面在8秒钟内 还没有打开时，用户就会感到厌倦继而放弃对该页面的访问。所以在制作网站时， 在保证页面基本质量的情况下，要尽量减小网页的体积。网页的体积为一个网页 中的所有文件大小的总和，包括HTML文件和所有嵌入对象(图像、声音、动画 等)的体积。

22 任务1 站点创建流程 相关知识 三．提高网站的打开速度 减小网页体积可以通过以下几个方法来实现： (1)网页布局尽量采用DIV+CSS方式。
任务1 站点创建流程 相关知识 三．提高网站的打开速度 减小网页体积可以通过以下几个方法来实现： (1)网页布局尽量采用DIV+CSS方式。 (2)通过外部文件的形式使用CSS文件和JavaScript脚本文件。 (3)减小网页中各种多媒体文件的体积，如网页中的图像、动画等， 通过图形图像处理软件和动画软件进行优化，尽量将它们的大小控 制在50KB以内。

23 任务1 站点创建流程 任务实施 一．了解用户需求 该网站的客户是“茗香绿长”香茗专卖链锁公司，现需要在网络平台上来展示
任务1 站点创建流程 任务实施 一．了解用户需求 该网站的客户是“茗香绿长”香茗专卖链锁公司，现需要在网络平台上来展示 本公司的商品，希望通过网站能让更多的人了解公司和公司的茶叶、茶具制品， 扩大公司的知名度，推销公司商品，宣传茶文化。网站的浏览群体为普通消费者。

24 任务1 站点创建流程 任务实施 二．网站设计 根据客户所提供的素材和要求，将“茗香绿长”作为网站的名称。将网站的栏目进
任务1 站点创建流程 任务实施 二．网站设计 根据客户所提供的素材和要求，将“茗香绿长”作为网站的名称。将网站的栏目进 行划分，栏目的主要结构如10-6所示。 网站主页 公司介绍 最新动态 知名茶品 茶叶知识 在线预订 加盟连锁 招聘信息 绿茶 红茶 乌龙茶 普耳茶 茉莉花茶 立体茶包 保健茶 茶食品 ◆图10-6 网站栏目的主要结构

25 任务1 站点创建流程 任务实施 二．网站设计 结合栏目主要结构示意图、各栏目的功能规划，详细地安排各功能模块的具
任务1 站点创建流程 任务实施 二．网站设计 结合栏目主要结构示意图、各栏目的功能规划，详细地安排各功能模块的具 体功能。当然所有栏目的内容均需要使用到动态网页技术，涉及后台数据库的设 计与连接，本书对此不做说明，只介绍客户端界面的设计。 分析客户所提供的作品特点后，我们要对网站的色彩进行选定。根据茶叶 的特点，使用绿色为主色调。背景色使用白色或浅淡的绿色。这样既保持一网 页色彩的一致性，也能衬托页面翠绿清新的意境。在整个网站中还可以使用几 种配色，用来对网页进行点缀和装饰。 由于该网站为小型网站，栏目数量有限，主页和子页面在布局上主要采用 “T”型布局，布局结构如图10-7所示。具体网页如图10-8和10-9所示。

26 任务1 站点创建流程 任务实施 二．网站设计 Banner ◆图10-7 网站布局结构
任务1 站点创建流程 任务实施 二．网站设计 Banner 导航区 网页内容 辅助链接及版权区 ◆图10-7 网站布局结构 网页布局时不能只局限于某一种模型，对于内容较多的页面可能会是多 种模型的组合使用。本网站的具体网页可参照如图10-8和图10-9所示的布局 样式。这些网页在前面的技能巩固练习中均已经制作完成。

27 任务1 站点创建流程 任务实施 二．网站设计 ◆图10-8 网站主页布局结构 ◆图10-9 网站子页布局结构
任务1 站点创建流程 任务实施 二．网站设计 ◆图10-8 网站主页布局结构 ◆图10-9 网站子页布局结构 网站中还有一些其他布局方式的网页，如“博客”网页采用了“口”型布局等。 在实际制作中应根据具体内容和功能的需要灵活选用布局方式。 返回

28 任务2 站点目录结构的规划和设置 任务分析 根据任务1中网站各栏目录的分析结果，规划“茗香绿长”香茗专卖链锁公司网站的文件目录结构，收集网页素材。

29 任务2 站点目录结构的规划和设置 相关知识 一．站点目录规划 站点目录就是存放当前网站中所有网页文件和相关文件的文件夹（目录）。
任务2 站点目录结构的规划和设置 相关知识 一．站点目录规划 站点目录就是存放当前网站中所有网页文件和相关文件的文件夹（目录）。 例如：我们在前面的学习为“每味美味”网站创建的mwmw子目录以及为“茗香 绿长”网站建立的练习文件夹exercise。 目录的结构是初学者容易忽视的问题，在前面的学习中我们没有明确提出 规划站点目录的重要性。但目录结构的好坏，对站点内网页文件及相关文件的 维护、编辑、扩充、移植等有着至关重要的影响。要注意以下几点。

30 任务2 站点目录结构的规划和设置 相关知识 一．站点目录规划 1．站点根目录中的文件存放要合理
任务2 站点目录结构的规划和设置 相关知识 一．站点目录规划 1．站点根目录中的文件存放要合理 Web服务器是以站点根目录为基础进行目录检索的。站点根目录就是站点 目录，如前面介绍的mwmw和exercise文件夹。将所有文件都放在站点根目 录下容易造成文件管理混乱，不便于今后的编辑、修改。 另外，文件组织混乱也影响网页及相关文件的上传速度。Web服务器一 般都会为根目录建立一个文件索引。将所有文件都放在站点根目录下，就会增 大文件量，造成索引时间的延长。所以，站点根目录中存放的的文件数不宜太 多，一般存放网站的首页等经常使用的网页文件。

31 任务2 站点目录结构的规划和设置 相关知识 一．站点目录规划 2．根据划分的栏目来建立相应的文件夹
任务2 站点目录结构的规划和设置 ◆图 mwmw站点的目录结构 相关知识 一．站点目录规划 2．根据划分的栏目来建立相应的文件夹 子目录一般是按网页功能分类和资源类别来建立的。例如，网页中要实现 “博客”功能，就应该为此项功能建立一个子目录。在mwmw站点中，我们建 立了bolg目录来组织博客网页文件。网页中的图片资源，我们使用images目 录来组织。CSS目录则用来组织CSS样式表文件……等等。 为了便于今后的维护，这些子目录的命名要易读易懂，可取对应的英文单 词或汉语拼音缩写。但不要直接使用汉字，因为不是所有服务器和浏览器都能 支持中文网址的。为了便于表述，目录名不宜太长。如图10-10所示就是 mwmw站点的目录结构。

32 3．在每个栏目文件夹下建立独立的资源文件夹
任务2 站点目录结构的规划和设置 相关知识 一．站点目录规划 3．在每个栏目文件夹下建立独立的资源文件夹 通常一个站点根目录下都有一个images目录，有以组织图片资源。初学者 可能会将所有图片都存放在这个目录里。随着网站的不断丰富，这样做就会很不 方便。当我们需要对某个栏目的网页文件进行编辑修改时，那些图片资源却不在 这个栏目的目录中，图片管理相当麻烦。 通常，我们可以在每个栏目的目录中再建立一个独立的images目录，方便 图片资源管理。而根目录下的images目录只是用来放首页和一些次要栏目的图片。 当然，其他资源关文件夹（如CSS、SWF等目录）的建立与images类似。

33 任务2 站点目录结构的规划和设置 相关知识 一．站点目录规划 4．目录的层次不要太深
任务2 站点目录结构的规划和设置 相关知识 一．站点目录规划 4．目录的层次不要太深 普通网站的各级目录层次一般不要超过3层。这样便于管理维护。超链接表述 也会更方便些。

34 任务2 站点目录结构的规划和设置 相关知识 二．素材的收集、制作和整理 通过前面的内容学习，我们知道网站中经常使用的素材有：文字、
任务2 站点目录结构的规划和设置 相关知识 二．素材的收集、制作和整理 通过前面的内容学习，我们知道网站中经常使用的素材有：文字、 图片、动画、声音、视频等。这些素材需要我们在制作网站之前去收 集和制作的。收集素材主要是从网站客户处获取。 文字是网页的主要表现内容，要能体现网站及各栏目的主题，充分表达用户创 建网站的用意。制作过程中可以围绕网站主题对文字进行增、删、改等处理。 图片是网页中最重要的元素之一，使用图片可以使网页更加形象生动，绚丽 的视觉冲击，使得网页更具吸引力。收集方式主要有：通过网络搜索，使用数码 相机拍摄，扫描纸质图片，使用PhotoShop、Fireworks等专业软件制作。 网页中常用的图片文件格式主要有：GIF、JPG、PNG三种。

35 任务2 站点目录结构的规划和设置 相关知识 二．素材的收集、制作和整理 动画元素进一步丰富了网页的页面效果，增强表现力。网页中常用的动画
任务2 站点目录结构的规划和设置 相关知识 二．素材的收集、制作和整理 动画元素进一步丰富了网页的页面效果，增强表现力。网页中常用的动画 文件主要有：SWF和GIF两种格式。 声音元素为网页增添了听觉功能，让言语、音乐等日常元素进入到网页，丰 富了网页的信息传播方式。网页中常用的声音文件主要有：MP3、WMV、RM等。 视频元素实现了在网页中看电影（视频）的功能，进一步强化了网页的信 息传播能力。网页中常用的视频主要有：RMVB、MPG4、MOV、FLV等。 所有这些素材都要分门别类的存放在各自的文件夹中，以便网页调用和今 后的编辑修改。比如我们在MWMW网站目录中就建立有swf目录用以存 放Flash动画文件。

36 1．在Dreamveaver CS3中打开站点文件夹exercise。
任务2 站点目录结构的规划和设置 任务实施 1．在Dreamveaver CS3中打开站点文件夹exercise。 2．在右侧的“文件”面板中浏览当前站点文件夹。站点中大多 数文件夹都已在之前的练习中创建了。参照图10-11所示，整 理文件夹：缺少的添加，多余的删除，名称有异的更名。 ◆图 exercise站点的目录结构

37 任务2 站点目录结构的规划和设置 任务实施 3．文件夹的作用如下： activities：存放公司举办活动的公告。
任务2 站点目录结构的规划和设置 任务实施 3．文件夹的作用如下： activities：存放公司举办活动的公告。 blog：存放网友博客网页。 conn：为今后制作动态网页预留，用以存放数据库链接文件。 css：用以存放CSS外部样式表文件。 data：为今后制作动态网页预留，用以存放数据库。 images：用以存放站点根目录中各网页所使用的图片文件。 js：用以存放JavaScript脚本文件。 Library：Dreamweaver CS3自动创建的目录，用以存放库文件。 manage：为今后制作动态网页预留，用以存放后台管理系统。 music：网页如果要使用声音（音乐）文件，则将其存放在这里。 swf：用以存放扩展名为SWF的Flash动画文件。 Tea：存放“知名茶品”板块的内容。 Templates：Dreamweaver CS3自动创建的目录，用以存放模板文件。

38 任务2 站点目录结构的规划和设置 任务实施 4．网站中文件的创建、删除、更名、移动等操作应在Dreamweaver
任务2 站点目录结构的规划和设置 任务实施 4．网站中文件的创建、删除、更名、移动等操作应在Dreamweaver CS3环境中进行。离开此环境所进行的文件操作将会引起网页资源引用的 错误，给网站维护造成不必要的麻烦。 具体的组织方式，可参照教材素材文件夹中的练习文件夹exercise。 5．不局恨于教材所提供的素材，根据各人对此网站的理解，可增添素材， 制作一些有各自特点的素材，拓宽表现手法。 返回

39 任务3 制作含按钮、导航拦、表单的交互式网页
任务3 制作含按钮、导航拦、表单的交互式网页 网页主菜单 辅助导航 任务分析 规划“茗香绿长”香茗专卖链锁公司网站的网页导航，和表单交互网页。 网页导航在前面的练习中已经基本完成了，本任务是对之前制作的模板文件、元件库、博客网页、后台管理网页进行导航和交互功能的检查和完善。 “茗香绿长”网站的导航主要有网页主菜单和辅助导航菜单方式，如图10-12所示。另外在显示板块网页时，还采用“面包屑导航”方式，如图10-13所示。 ◆图 网站的主要导航方式 ◆图 “面包屑导航”方式

40 任务3 制作含按钮、导航拦、表单的交互式网页
任务3 制作含按钮、导航拦、表单的交互式网页 任务分析 为了美化导航界面，还可使用Dreamweaver的Spry菜单栏制作美观的下拉菜单、按钮菜单。在项目8的任务2中我们已经学习过这种菜单的制作方法，可应用在“茗香绿长”网站中，以丰富网页的导航方式。 表单在网页中主要用于实现数据的输入、输出交互。表单对象中的文本框、图片、按钮等控件用以接受用户的输入，并将输入内容提交给服务器处理。标签控件用以显示输出。在静态网页制作中，我们主要考虑表单控件的布局样式，一般通过CSS来进行样式控制。“在线预订”网页中使用多种表单控件可以方便用户进行数据输入。如图10-14所示就是mark.html网页中的表单交互界面。 ◆图 表单控件的使用

41 任务3 制作含按钮、导航拦、表单的交互式网页
任务3 制作含按钮、导航拦、表单的交互式网页 任务实施 一．建立导航栏超链接 1．打开站exercise中的ex_dwt.dwt模板文件。设置主菜单导航如表10-1所示。 表10-1 导航主菜单的超链接设置 栏目 超链接目标 网站首页 home.html 在线预订 mark.html 公司介绍 company.html 加盟连锁 case.html 最新动态 news.html 招聘信息 job.html 知名茶品 product.html 联系我们 contact.html 茶叶知识 knowledge.html

42 任务3 制作含按钮、导航拦、表单的交互式网页
任务3 制作含按钮、导航拦、表单的交互式网页 任务实施 一．建立导航栏超链接 2．将home.html文件中的主菜单导航和辅助导航也设置成与 表10-1和表10-2所示。 表10-2 辅助导航的超链接设置 栏目 超链接目标 关于我们 company.html 信息反馈 feedback.html 联系方式 contact.html 投诉建议 suggestion.html 茶道交流 blog/blog.html 友情链接 link.html 保存模板文件后，相应的网页文件中导航设置也会随模板文件的改变而自动改变。

43 任务3 制作含按钮、导航拦、表单的交互式网页
任务3 制作含按钮、导航拦、表单的交互式网页 任务实施 一．建立导航栏超链接 3．home.html文件的左侧有“知名茶叶”的分类目录导航，这是一个辅 助导航栏，用于介绍我国各类知名茶叶品种。独立成为一个模块，其相关 网页和资源文件存放在站点文件夹中的tea子文件夹中。 图10-15所示就是“绿茶”子页的结构。 ◆图 “绿茶”子网页

44 任务3 制作含按钮、导航拦、表单的交互式网页
任务3 制作含按钮、导航拦、表单的交互式网页 任务实施 一．建立导航栏超链接 茶品导航的相关链接如表10-3所示。 表10-3 茶品导航的超链接设置 栏目 超链接目标 绿茶 lucha.html 花茶 huacha.html 红茶 hongcha.html 立体茶包 ltcb.html 乌龙茶 wlcha.html 保健茶 bjcha.html 普洱茶 puercha.html 茶食品 csp.html 茉莉花茶 mlhcha.html

45 任务3 制作含按钮、导航拦、表单的交互式网页
任务3 制作含按钮、导航拦、表单的交互式网页 任务实施 二．在网页中使用表单 “茗香绿长”网站中的“在线预订”（如图10-14所示）和“信息反馈”网页中 均需使用表单来收集客户信息。图10-16所示就是“信息反馈”页的表单布 局部分。 ◆图 “信息反馈”页的表单布局 返回

46 任务4 制作子页，完善网站 任务分析 “茗香绿长”网站首页是home.html，通过首页的导航可以方便地进入各专题板块和子页。在各专题板块中，我们可以根据自己对茶叶知识的认识以及收集相关素材制作相应的子页。子页的文件名可以自行设定，但一定要与板块中的导航相一致，避免链接错误的发生。 通过浏览站点可以检验导航是否正确，以及相应的子页是否已经完成。 任务1中的图10-6已经清楚地列出了当前站点的结构，本任务根据此结构整理当前站点的网页文件，通过浏览网页来发现问题，并修改完善。对缺失的网页文件进行补充添加。

47 任务4 制作子页，完善网站 任务实施 1．在Windows环境中，打开站点首页home.html。
任务4 制作子页，完善网站 任务实施 1．在Windows环境中，打开站点首页home.html。 2．测试首页中各链接是否正常，如果有不能正常打开的网页，应分析 是超链接书写错，还是缺失网页文件。 3．如果是超链接书写错则通过Dreamweaver修改超链接。如果是 网页缺失，则使用Dreamweaver来补充完善。 4．所有应用过网页模板的网页，只需测试其中一个就可以了，如 compnay.html。

48 任务4 制作子页，完善网站 任务实施 5．“茶道交流”只是对当前网页的一个简单扩展，只要能正常链接就算
任务4 制作子页，完善网站 任务实施 5．“茶道交流”只是对当前网页的一个简单扩展，只要能正常链接就算 成功。练习时，本板块的更多内容可根据自己的兴趣进行扩充。 6．“知名茶品”板块中子页较多，要对各种类型的茶叶制作相关网页。 7．manager文件夹中保存着网站的后台管理系统。在案例中只是一 个模拟网页，采用的是框架结构。 8.全面测试各网页正确无误后，在通过Dreamweaver将所有使用 到网页模板和为的网页文件“从模板中分离”以及“从源文件中分离”。 9．发布网页。 返回

49 任务4 制作子页，完善网站 本项目介绍了网站制作的基本流程，并通过“茗香绿长”网站的实作来体会创建网站的全过程。重点在站点目录结构的规划和设置、导航设置、交互功能、板块设置、完善网页等方面加强实作提高。 这是一个综合训练，实作中还需要各人多多收集相关资料，不局于书本，充分发挥自己的个性，制作出风格各异的 优秀网页。 项 目 总 结 返回

50 Thank You !