《网页制作》模块2页面的基本操作教学教材.ppt

任务3 了解网页中的HTML代码 2.3.1任务分析 (1) (2) (3) HTML的基本概念 HTML的基本结构 Dreamweaver CS5的“代码”视图模式 掌握HTML，需要首先掌握以下内容 模块2 目录 模块2 目录 模块2 页面的基本操作 模块2 页面的基本操作 站点管理。 页面的基本操作。 设置页面属性。 了解页面中的HTML代码。 设置页面的头部内容。 知识目标 模块2 页面的基本操作 能创建本地站点。 能创建基本页面。 能够对页面进行基本设置。 能力目标 模块2 页面的基本操作 任务1：站点的创建与设置。 任务2：站点文件管理。 任务3：了解网页中的HTML代码。 任务4：设置页面头部内容。 具体任务 任务1 站点的创建与设置 2.1.1任务分析 为了管理和使用站点，需要掌握如下内容。 创建站点 操作站点 任务1 站点的创建与设置 2.1.2相关知识 1.创建新站点 任务1 站点的创建与设置 1 4 “站点”选项 “服务器”选项 “版本控制”选项 2 3 “高级设置”选项 任务1 站点的创建与设置 任务1 站点的创建与设置 任务1 站点的创建与设置 (2) (3) (4) (5) (1) (6) “新建”按钮 “复制”按钮 “导出”按钮 “编辑”按钮 “删除”按钮 “导入”按钮 对“管理站点”对话框中各按钮的说明如下 任务1 站点的创建与设置 2.1.3任务实施 1.具体任务 （1）创建一个名为study的本地站点，在本地计算机的任一分区中创建一个名为study的文件夹，将站点文件保存在该文件夹中。 （2）创建站点后，导出该站点，导出文件名与站点名相同。 任务1 站点的创建与设置 2.实施步骤 （1）执行“站点”→“新建站点”命令，在弹出的对话框中默认选中“站点”选项，在“站点名称”文本框中输入study，设置“本地站点文件夹”为已经新建的study文件夹，如图2-7所示。完成后单击“保存”按钮。 任务1 站点的创建与设置 （2）执行“站点”→“管理站点”命令，弹出“管理站点”对话框，在列表框中选择study站点，如图2-8所示。单击“导出”按钮，将导出文件以study.ste为文件名保存在站点文件夹中，如图2-9所示。 任务1 站点的创建与设置 2.1.4任务小结 创建本地站点是网页制作的基础步骤，熟练、正确地对站点进行操作是网页制作的保障，应熟练掌握对站点的各项操作。 任务2 站点文件管理 2.2.1任务分析 (1) (2) (3) 创建新文件 利用“文件”面板处理文件 页面的属性设置 站点中的文件管理主要包括以下内容 任务2 站点文件管理 2.2.2相关知识 1.创建新文件 2) 创建新文件 1) 3) 新建文件夹 新建网页文件 文件命名规则 任务2 站点文件管理 在Dreamweaver CS5中新建文件有很多方法，常用的有以下3种 (1) (2) (3) 使用“文件”面板创建新文件 使用欢迎界面新建文件 使用“新建文档”对话框新建文件 任务2 站点文件管理 网站中的文件命名规则如下 （1）最好使用小写英文名称（或汉语拼音）。 （2）尽量不要大小写混用。 （3）不要使用中文文件名。 （4）可以使用数字、下划线或分割线。 （5）不允许使用特殊字符。 任务2 站点文件管理 （6）网页的扩展名既可以是.htm，也可以是.html，但一定要选定其中一种，而不要两种交叉使用，否则很容易造成混乱。 （7）需要特别强调的是，不论是文件、文件夹还是其他网站文件的命名，一定要让其名称具有清楚明确的含义，而不要用一些无法理解其含义的字符序列。 任务2 站点文件管理 2.利用“文件”面板处理文件 在“文件”面板中可以方便地利用鼠标右键快捷菜单进行文件相关操作，如剪切、复制、删除、重命名等。 也可以使用鼠标拖动文件的方式来实现文件夹的移动。 任务2 站点文件管理 3.页面的属性设置 1）设置CSS页面的字体、背景颜色和背景图像属性 任务2 站点文件管理 2）设置CSS链接属性 任务2 站点文件管理 3）设置CSS页面标题属性 任务2 站点文件管理 4）设置标题和编码页面属性 任务2 站点文件管理 5）设置HTML页面属性 任务2 站点文件管理 6）使用跟踪图像设计页面 任务2 站点文件管理 2.2.3任务实施 1.具体任务 （1）在站点study中创建一个名为images的文件夹，并在站点中创建页面soft.html。 （2）设置页面soft.html的属性，“页面字体”默认为“宋体”，“大小”为12 px，黑色字，上、下、左、右页面边距均为0 px；网页标题为“软件介绍”，“编码”为“简体中文（GB2312）”。