第八章 网页制作

1. 第八章 网页制作 贵州师范大学网络中心 2005年

2. 本章内容 8.1 网站规划与设计 8.2 Dreamweaver MX基础知识 8.3 在网页中添加对象 8.4 在网页中使用行为和层 8.5 在网页中使用模板 8.6 网站制作实例

3. home 8.1 网站规划与设计 8.1.1 概述 8.1.2 网站设计 8.1.3 内容搜集与组织

4. home 8.1.1 概述 1. 网站设计的基本知识 2. 网页基本构成元素 3. 网站分类与设计风格 4. 网站制作步骤

5. 下一页 1. 网站设计的基本知识 • WWW（World Wide Web）服务： • World Wide Web（万维网），简称WWW，是Internet上最重要的信息服务之一，WWW是以Internet上众多WWW服务器所发布的无数网页及它们之间的链接为基础构成的一个庞大的多媒体信息网。 • WWW信息发布模式： • WWW信息发布：采用客户端/服务器（Client / Server）模式。WWW服务器程序运行在WWW服务器上，用于发布存放在WWW服务器中的网页；WWW客户端程序运行在用户计算机上的网页浏览器，通过Internet与WWW服务器进行通信，将网页传送到用户计算机上并显示出来。

6. 下一页 上一页 1. 网站设计的基本知识 • HTTP协议 • 超文本传输协议HTTP（Hyper Text Transfer Protocol）是WWW服务所使用的信息传输协议，即访问Internet上的Web页面所用协议。 • 打开Internet上某一网页：HTTP://<WWW服务器的域名或ip地址>/<目录路径>/<文件名> 如：http://www.gznu.edu.cn/wlzx/index.htm 或者：http://210.40.64.7/wlzx/index.htm

7. 下一页 上一页 1. 网站设计的基本知识 • 网页（Web Page） • 通过WWW发布的包含有文本、图片、声音、动画等多媒体信息的页面，是WWW的基本单位。 • 网页文件就是普通的文本文件，但规定其后缀为.htm或.html。 • 在IE浏览器中查看网页文件的实际内容：执行菜单栏“查看”|“源文件”命令。

8. 下一页 上一页 1. 网站设计的基本知识 • 超文本标记语言HTML • HTML（Hyper Text Markup Language）：HTML文件是WWW中使用的主要文件类型，通常以“.html”或“.htm”为文件后缀。 • 是一种用于描述超文本内容的标签系统，是最基本的网页编写语言。 • HTML文件使用一些约定的标记对WWW上的各种信息进行标记，这些被标记的信息以网页文件形式发布在Web服务器上，在用户请求的情况下，下载到用户的机器上，用户的浏览器会自动解释这些标记的含义，按照一定的格式在屏幕上显示出来，而HTML标记本身并不在浏览器中显示。

9. 下一页 上一页 1. 网站设计的基本知识 • 网站（Web Site） • 是一组具有共享属性（如相关主题、类似的设计或共同目的）的链接文档。网站由众多的网页组成的，它们存储在某一个Web服务器上

10. 上一页 home 1. 网站设计的基本知识 • 首页 • 网站的默认页面，也称为主页。 • Web服务器都有自己默认的主页名称，输入地址时仅指定WWW服务器域名或IP地址时打开的页面就是首页。 • 主页是一个网站最重要的网页，通常包含最新的信息及指向各分栏目的超链接。 • 常见的首页名称有index.htm（index.html） 或default.htm（default.html）。

11. home 2. 网页基本构成元素 • 网页基本构成元素 • 文本：最基本的构成元素，表现信息内容的主体。占用空间小，信息量大 • 超链接：相关网页及其他网络资源之间联系的纽带。 • 图片、动画：静态和动态的图形文件。 • 声音和视频：音乐，在线广播，在线影视 • 信息提交表单：提供网上交互功能的基本元素，用来收集浏览者提供的信息并提交给Web服务器进行处理。

12. 下一页 3. 网站分类与设计风格 • 新闻门户类

13. 下一页 上一页 3. 网站分类与设计风格 • 工商企业类

14. 下一页 上一页 3. 网站分类与设计风格 • 文化教育类

15. 下一页 上一页 3. 网站分类与设计风格 • 运动休闲类

16. 下一页 上一页 3. 网站分类与设计风格 • 游戏娱乐类

17. 下一页 上一页 3. 网站分类与设计风格 • 生活时尚类

18. 上一页 home 3. 网站分类与设计风格 • 兴趣爱好类

19. home 4. 网站制作步骤

20. home 8.1.2 网站设计 1. 网站题材选择及内容的确定 2. 网站结构设计 3. 网站风格设计 4. 确定网站首页的创意设计

21. home 1.网站题材选择及内容的确定 （1）主题范围不能过大，要有特色。 （2）题材最好是自己擅长或者喜爱的内容。

22. 下一页 2. 网站结构设计 (1) 确定栏目和版块 • 突出特点 • 设置最近更新、网站指南和交互栏目 (2) 确定网站的目录结构 • 将所有的文件都放在站点根目录下的相应目录中。 • 按栏目内容建立子目录。每个主要的目录下都建立独立的“images”目录。 • 不要使用中文作为目录或文件的名字，命名的名称不能过长，应简单明了。

23. 下一页 上一页 2. 网站结构设计 (3) 确定网站的链接结构 我们研究网站的链接结构的目的在于：用最少的链接，使得浏览最有效率。 一般的，建立网站的链接结构有三种基本方式： 线形链接结构：用于组织本身是线性顺序形式存在的信息，可以引导浏览者象翻阅书籍一样按顺序浏览整个网站。 优点是网络浏览具有连续性。 缺点是当网页量大时，不能灵活的访问。 home

24. 下一页 上一页 2. 网站结构设计 (3) 确定网站的链接结构 树状链接结构：类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。 优点是条理清晰，访问者明确知道自己在什么位置，不会“迷”路。 缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。

25. 下一页 上一页 2. 网站结构设计 (3) 确定网站的链接结构 非线性链接结构：该类结构主体是树状链接结构，并将小的栏目交叉连接。 优点是使网站具有条理，并且可以实现某些相互交叉链接的栏目之间的快速跳转。 缺点是如果规划没有做好可能使浏览者在浏览时不知道位于何处。 home

26. 上一页 home 2. 网站结构设计 网站链接结构设计常用方法如下： • 方法一：使用线性链接结构。 • 方法二：在新窗口打开链接指向的网页。 • 方法三：在网页中增加一条关于所处网页位置的栏目，并在位置的说明中加入链接，帮助浏览者明确所处的位置，并快速转向上级网页。 • 即经常看到许多网站页面顶部的，类似这样： “您现在的位置是：首页->网络中心->计算机基础教育->文科计算机基础课课件”

27. 下一页 3. 网站风格设计 (1) 网页色彩的搭配 • 色彩是人的视觉最敏感的东西，网页中色彩的选择和搭配是树立网站形象的关键之一。 • 色彩总的应用原则应该是“总体协调，局部对比”。

28. 下一页 上一页 3. 网站风格设计 (1) 网页色彩的搭配 home

29. 下一页 上一页 3. 网站风格设计 (1) 网页色彩的搭配 home

30. 下一页 上一页 3. 网站风格设计 色彩与人的心理感觉和情绪也有一定的关系，利用这一点可以在设计网页时形成自己独特的色彩效果，给浏览者留下深刻的印象。一般情况下，各种色彩给人的感觉是 红色代表热情、活泼、热闹、温暖、幸福、吉祥 橙色代表光明、华丽、兴奋、甜蜜、快乐 橙色较温和, 是一种很活泼、辉煌的色彩.富足的、快乐的色彩.稍加黑则较稳重.蓝橙对比时较生动. 黄色代表明朗、愉快、高贵、希望 绿色代表新鲜、平静、和平、柔和、安逸、青春 蓝色代表深远、永恒、沉静、理智、诚实、寒冷 紫色代表优雅、高贵、魅力、自傲 白色代表纯洁、纯真、朴素、神圣、明快 灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 灰色是色彩中最被动的颜色.受有彩色影响极大, 靠邻近的色彩获得自己的生命.近冷暖, 近暖则冷.最有平静感（中性）, 是视觉中最安静的色彩.有很强的调和对比的作用. 　黑色代表崇高、坚实、严肃、刚健、粗莽 黑与白:非常对立而又有共性, 是色彩最后的抽象.能够用来表达富有哲理性的东西. home

31. 下一页 上一页 3. 网站风格设计 (1) 网页色彩的搭配 ① 使用单色 　　尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。 ② 使用邻近色 　　所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。

32. 下一页 上一页 3. 网站风格设计 (1) 网页色彩的搭配 ③ 使用对比色 　　对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。 ④ 背景色的使用 　　背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。

33. 下一页 上一页 3. 网站风格设计 (2)确定网站的版面设计 “T”结构布局 所谓“T”结构:就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母“T”,所以我们称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。 优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。 缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。

34. 下一页 上一页 3. 网站风格设计 (2)确定网站的版面设计 “口”型布局 所谓“口”结构：就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。也有将四边空出，只用中间的窗口型设计。 优点是充分利用 版面，信息量大 缺点是页面拥挤， 不够灵活。

35. 下一页 上一页 3. 网站风格设计 (2)确定网站的版面设计 对称对比布局 所谓“对称对比”结构：顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。 优点是视觉冲击力强 缺点是将两部分有机的结合比较困难。

36. 上一页 home 3. 网站风格设计 (2)确定网站的版面设计 4.POP布局（自由布局） 所谓“POP布局”结构：POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点。 优点漂亮吸引人。 缺点就是速度慢。

37. 下一页 4. 确定网站首页的创意设计 首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页设计的“功力”了。所以，首页的设计和制作是绝对要重视和花心思的。首页的制作风格也决定了整个网站将要延续的风格。一般首页设计和制作占整个制作时间相当大的比重。 “Cover sells book”

38. 下一页 上一页 4. 确定网站首页的创意设计 1、书籍封面式首页 有些大型网站往往有一个书籍封面式的首页，上面只有一个“进入”的链接，点击之后才可进入到网站。 这种首页设计精美、考究。 home

39. 下一页 上一页 4. 确定网站首页的创意设计 2、期刊杂志式首页 与书刊封面式首页相似，但在首页上有网站全部内容的目录索引，图文并茂，看上去就像期刊杂志的封面。 这种首页漂亮、又使网站的主要内容一目了然，是一种值得推荐的形式。

40. 上一页 home 4. 确定网站首页的创意设计 3、报纸式首页 采用报纸式的首页设计，将栏目索引、功能模块、具体内容一并显示在首页，看上去就像报纸的头版一样。 这种首页，多用于电子商务网站、搜索引擎网站和新闻信息网站，速度快、操作简便。

41. home 8.2 Dreamweaver MX基础知识 8.2.1 Dreamweaver MX的新功能 8.2.2 Dreamweaver MX的安装、启动和卸 载 8.2.3 Dreamweaver MX的编辑环境

42. home 8.2.3 Dreamweaver MX的编辑环境 1. Dreamweaver MX 工作区布局 2. Dreamweaver MX 窗口简介 (1) 标题栏 (2) 菜单栏 ① 文件菜单 ② 编辑菜单 ③ 查看菜单 ④ 插入菜单 ⑤ 修改菜单 ⑥ 文本菜单 ⑦ 命令菜单 ⑧ 站点菜单 ⑨ 窗口菜单 ⑩ 帮助菜单 (3) 插入栏 (4) 文档工具栏 (5) 文档窗口 (6) 状态栏 (7) 属性面板 (8) 面板组

43. home 8.3 在网页中添加对象 8.3.1 对站点及文档的操作 8.3.2 在网页中编辑文本 8.3.3 在网页中使用图像 8.3.4 在网页中使用表格 8.3.5 在网页中添加超链接 8.3.6 网页中使用框架

44. 下一页 8.3.1 对站点及文档的操作 一、新建站点 “站点”→“管理站点”→“新建”→“站点”→按提示操作 二、使用“站点面板”管理站点 “文件面板”→“文件”选项卡→“本地视图”

45. 上一页 home 8.3.1 对站点及文档的操作 （1）新建网页 “文件”---“新建”==“创建” 注意：首页的名称一般为index.htm、index.html、default.htm、default.html （2）保存网页文件 “文件”→“保存” （3）另存网页文件 “文件”→“另存为” （4）关闭当前打开的网页文件 “文件”→“关闭”

46. home 8.3.2 在网页中编辑文本 1、直接输入文本 2、对文字进行修饰 选中文字→在属性面板中进行设置 3、注意事项 • 如果要输入空格，请将输入法设为中文并且为全角状态 • 如果要自己手动换行请用Shift+回车 4、删除文本，直接删除即可 5、特效字的设置

47. home 8.3.3 在网页中使用图像 1、插入图片 “插入” →“图片” →选择图片→“确认” 2、给网页设置背景图像 “修改”→“页面属性” 3、修改图片 选中图片→在属性中面板进行设置 4、删除图片 选中图片→按Delete 注意：图片如果没有在系统默认的文件夹下面系统会提示您将其放入相应的文件夹中。

48. home 8.3.4 在网页中使用表格 1、创建表格 “插入”→“表格” 2、选择表格 (1) 选择整个表格 “修改”→“表格”→“选择表格” (2) 选择单元格 (3) 特殊方法选定表格 3、修改表格 选中表格→在属性面板中进行设置 4、删除表格 选中表格→按Delete

49. 下一页 8.3.5 在网页中添加超链接 一、链接的目标 1、如果是Email地址，则在“链接”的文本框中输入： mailto:wlzx@gznu.edu.cn 2、如果是网址，则在“链接”的文本框中直接输入网址 3、如果是自己的文档，则单击“链接”旁边的文件夹图 标，直接选择。 4、如果是文件，则单击“链接”旁边的文件夹图标，直 接选择。 5、如果输入的是#，则表示目标为本页 6、如果是锚点则先输入#然后加上锚点的名字

50. 上一页 home 8.3.5 在网页中添加超链接 二、链接的对象 1、文本 选中文本→确定目标后使用刚才所讲方法 2、图像 选中图像→确定目标后使用刚才所讲方法 3、图像热区 选中图像→建立图像热区→确定目标后使用刚才所讲方法