《网页制作》模块2页面的基本操作课件.ppt

1、目录目录模块模块2 页面的基本操作页面的基本操作目录目录模块模块2 页面的基本操作页面的基本操作站点管理。页面的基本操作。设置页面属性。了解页面中的HTML代码。设置页面的头部内容。知识目标知识目标目录目录模块模块2 页面的基本操作页面的基本操作能创建本地站点。能创建基本页面。能够对页面进行基本设置。能力目标能力目标目录目录模块模块2 页面的基本操作页面的基本操作任务1：站点的创建与设置。任务2：站点文件管理。任务3：了解网页中的HTML代码。任务4：设置页面头部内容。具体任务具体任务目录目录任务任务1 站点的创建与设置站点的创建与设置2.1.1任务分析任务分析为了管理和使用站点，需要掌握如下

2、内容。创建站点创建站点操作站点操作站点目录目录任务任务1 站点的创建与设置站点的创建与设置2.1.2相关知识相关知识1.创建新站点创建新站点目录目录任务任务1 站点的创建与设置站点的创建与设置14“站点站点”选项选项“服务器服务器”选项选项“版本控制版本控制”选项选项23“高级设置高级设置”选项选项目录目录任务任务1 站点的创建与设置站点的创建与设置目录目录任务任务1 站点的创建与设置站点的创建与设置2.站点操作站点操作查看站点查看站点管理站点管理站点目录目录任务任务1 站点的创建与设置站点的创建与设置目录目录任务任务1 站点的创建与设置站点的创建与设置(2)(3)(4)(5)(1)(6)“新

3、建”按钮“复制”按钮“导出”按钮“编辑”按钮“删除”按钮“导入”按钮对“管理站点”对话框中各按钮的说明如下目录目录任务任务1 站点的创建与设置站点的创建与设置2.1.3任务实施任务实施1.具体任务具体任务（1）创建一个名为study的本地站点，在本地计算机的任一分区中创建一个名为study的文件夹，将站点文件保存在该文件夹中。（2）创建站点后，导出该站点，导出文件名与站点名相同。目录目录任务任务1 站点的创建与设置站点的创建与设置2.实施步骤实施步骤（1）执行“站点”“新建站点”命令，在弹出的对话框中默认选中“站点”选项，在“站点名称”文本框中输入study，设置“本地站点文件夹”为已经新建的

4、study文件夹，如图2-7所示。完成后单击“保存”按钮。目录目录任务任务1 站点的创建与设置站点的创建与设置（2）执行“站点”“管理站点”命令，弹出“管理站点”对话框，在列表框中选择study站点，如图2-8所示。单击“导出”按钮，将导出文件以study.ste为文件名保存在站点文件夹中，如图2-9所示。目录目录任务任务1 站点的创建与设置站点的创建与设置2.1.4任务小结任务小结创建本地站点是网页制作的基础步骤，熟练、正确地对站点进行操作是网页制作的保障，应熟练掌握对站点的各项操作。目录目录任务任务2 站点文件管理站点文件管理2.2.1任务分析任务分析 (1) (2) (3)创建新文件创建

5、新文件利用利用“文件文件”面板处理文件面板处理文件页面的属性设置页面的属性设置站点中的文件管理主要包括以下内容目录目录任务任务2 站点文件管理站点文件管理2.2.2相关知识相关知识1.创建新文件创建新文件2)创建新文件创建新文件1)3)新建文件夹新建网页文件文件命名规则目录目录任务任务2 站点文件管理站点文件管理在在Dreamweaver CS5中新建文件有很多方法，常中新建文件有很多方法，常用的有以下用的有以下3种种 (1) (2) (3)使用使用“文件文件”面板面板创建新文件创建新文件使用欢迎界使用欢迎界面新建文件面新建文件使用使用“新建文档新建文档”对话框新建文件对话框新建文件目录目录任

6、务任务2 站点文件管理站点文件管理网站中的文件命名规则如下网站中的文件命名规则如下（1）最好使用小写英文名称（或汉语拼音）。（2）尽量不要大小写混用。（3）不要使用中文文件名。（4）可以使用数字、下划线或分割线。（5）不允许使用特殊字符。目录目录任务任务2 站点文件管理站点文件管理（6）网页的扩展名既可以是.htm，也可以是.html，但一定要选定其中一种，而不要两种交叉使用，否则很容易造成混乱。（7）需要特别强调的是，不论是文件、文件夹还是其他网站文件的命名，一定要让其名称具有清楚明确的含义，而不要用一些无法理解其含义的字符序列。目录目录任务任务2 站点文件管理站点文件管理2.利用利用“文件

7、文件”面板处理文件面板处理文件在“文件”面板中可以方便地利用鼠标右键快捷菜单进行文件相关操作，如剪切、复制、删除、重命名等。也可以使用鼠标拖动文件的方式来实现文件夹的移动。目录目录任务任务2 站点文件管理站点文件管理3.页面的属性设置页面的属性设置1）设置CSS页面的字体、背景颜色和背景图像属性目录目录任务任务2 站点文件管理站点文件管理2）设置CSS链接属性目录目录任务任务2 站点文件管理站点文件管理3）设置CSS页面标题属性目录目录任务任务2 站点文件管理站点文件管理4）设置标题和编码页面属性目录目录任务任务2 站点文件管理站点文件管理5）设置HTML页面属性目录目录任务任务2 站点文件管

8、理站点文件管理6）使用跟踪图像设计页面目录目录任务任务2 站点文件管理站点文件管理2.2.3任务实施任务实施1.具体任务具体任务（1）在站点study中创建一个名为images的文件夹，并在站点中创建页面soft.html。（2）设置页面soft.html的属性，“页面字体”默认为“宋体”，“大小”为12 px，黑色字，上、下、左、右页面边距均为0 px；网页标题为“软件介绍”，“编码”为“简体中文（GB2312）”。目录目录任务任务2 站点文件管理站点文件管理2.实施步骤目录目录任务任务2 站点文件管理站点文件管理2.2.4任务小结任务小结对站点中各类文件的操作是指对站点管理的基本内容、规范

9、的定义和管理站点中的各类文件的操作，是开发符合Web标准网站的基础。目录目录任务任务3 了解网页中的了解网页中的HTML代码代码2.3.1任务分析任务分析 (1) (2) (3)HTML的基本概念的基本概念HTML的基本的基本结构结构Dreamweaver CS5的的“代码代码”视图模式视图模式掌握HTML，需要首先掌握以下内容目录目录任务任务3 了解网页中的了解网页中的HTML代码代码2.3.2相关知识相关知识1.HTML的基本概念的基本概念HTML（hypertext markup language，超文本标记语言）是用来描述网页的一种标记语言。用HTML编写的超文本文档称为HTML文档，

10、它能独立于各种操作系统平台（如UNIX、Windows等）。目录目录任务任务3 了解网页中的了解网页中的HTML代码代码2.HTML的基本结构的基本结构目录目录任务任务3 了解网页中的了解网页中的HTML代码代码3.Dreamweaver CS5的的“代码代码”视图模式视图模式使用使用“代码代码”视图视图使用快速标使用快速标签编辑器签编辑器目录目录2.3.3任务小结任务小结HTML是网页设计的基础语言之一，当在可视化环境中遇到无法解决的问题时，就需要转换到“代码”视图中进行设计。因此，认识和学习HTML有助于用户学习和使用Dreamweaver CS5进行网页制作。任务任务3 了解网页中的了解

11、网页中的HTML代码代码目录目录2.4.1任务分析任务分析任务任务4 设置页面头部内容设置页面头部内容(2)(3)(4)(5)(1)(6)插入META插入说明插入基础URL地址插入关键字插入自动刷新插入页面链接关系设置网页头部内容，需要掌握以下内容目录目录2.4.2相关知识相关知识任务任务4 设置页面头部内容设置页面头部内容1.插入META2.插入关键字目录目录任务任务4 设置页面头部内容设置页面头部内容3.插入说明4.插入刷新目录目录任务任务4 设置页面头部内容设置页面头部内容5.插入基础URL地址6.插入链接目录目录任务任务4 设置页面头部内容设置页面头部内容2.4.3任务实施任务实施1.

12、具体任务具体任务（1）设置前面制作的soft.html页面的头部内容，添加页面作者信息，作者为“王丹”。（2）插入页面关键字“软件，Adobe”。（3）给页面添加内容为“网页制作软件介绍”的说明。（4）设置页面每间隔5 s自动刷新一次。目录目录任务任务4 设置页面头部内容设置页面头部内容2.实现步骤目录目录任务任务4 设置页面头部内容设置页面头部内容2.4.4任务小结任务小结页面文件头内容包括作者、关键字、刷新等内容，正确设置页面文件头内容是制作网页的必要前提。文件头部分包含在页面的和标签中。目录目录思考与练习思考与练习1.在本地站点中创建网站首页，保存为index.html。2.参照本模块介绍的相关知识，设置页面index.html的属性。3.为index.html页面添加头部信息，并设置经过3 s跳转到页面soft.html。目录目录