《网页制作教程》课件.pptVIP

《网页制作技术》 教学大纲、教材与教参 教学大纲、教材与教参 教材特点： 1、本教材适合高职高专的网页设计与规划教学； 2、教材采用模块化教学、目标任务驱动、案例操作步骤、知识点详解四层结构引导学生完成网页设计的每一环节。 任务一 网页基础 主要内容 任务二 使用表格规划网页布局 主要内容 认识表格 创建表格 编辑表格 使用表格规划网页布局 一、认识表格 表格的HTML标记 表格的标记 表格的HTML标记 表格、单元格的属性 表格的HTML标记 表格、单元格的属性 表格的HTML标记 表格、单元格的属性 二、创建表格 要在网页中创建表格，选择“插入记录”|“表格”命令，打开“表格”对话框。 或者单击“常用”插入栏上的“表格”按钮，打开“表格”对话框，如图所示。 三、编辑表格 创建表格后，可以对表格进行编辑，包括合并和拆分单元格、添加和删除单元格、设置单元格和表格属性等，并且可以导入和导出表格。 选择表格 编辑表格和单元格 （调整大小、添加删除、合并拆分、属性设置、剪切复制粘贴单元格） 表格的其他操作（排序、导入导出表格式数据） 四、使用表格规划网页布局 在网页设计中，页面布局是一个非常重要的部分。有了好的布局，整个网页才可能美观、大方、实用。Dreamweaver CS3提供了多种方法来创建和控制网页布局，使用表格的“布局模式”就是最常用、最实用的方式之一。 表格的“布局模式”来源于表格，但是在布局模式中简化了使用表格进行网页布局的过程，避免了使用传统的方法创建基于表格的页面布局时经常出现的一些问题，如定位不准、不易调整等。 使用布局单元格和表格 （布局模式） 设置布局表格和单元格格式 五、小结 表格的heml标记 如何插入一个表格 如何编辑表格的形式（属性设置、拆分合并单元格） 如何使用表格布局 布局表格和单元格格式的设置 任务三 插入文本和图像 复习 表格布局 本章要点 插入文本 设置文本格式 创建列表 插入图像 设置图像属性 创建鼠标经过图像 创建网页导航条 一、插入文本 1、认识“文本”插入栏 使用【文本】工具栏，可以快速的插入各种类型的文本。单击插入栏上的【文本】选项卡，打开【文本】插入栏，如图所示。 2、插入文本 在Dreamweaver CS3中输入文本是非常简单的，其输入方式与其它文本处理软件中的文本输入方式十分类似。 直接输入文本 排列方式自左向右，自动换行。 段落结束时，用Enter键分段（p…/p）。 段落中分行，用Shift+Enter键输入换行符（br /）。 复制和粘贴文本（粘贴与选择性粘贴） 导入文本（文件/导入/Word文档、Excel文档） 输入特殊字符（“插入”工具栏中“文本”选项卡中的 ） 复制和粘贴Html代码 3、插入水平线 将光标定位在要插入水平线的位置，选择“插入记录/HTML/水平线”命令。 在Html代码相应位置输入hr /。 在属性面板中设置水平线属性。（或者直接编写Html代码） 设置水平线颜色： 在Html代码中，hr /里，添加color属性。 例如：hr color=“#FF0000” 或hr color=“red” 4、插入日期 将鼠标光标定位到需要添加日期或时间的位置，选择“插入记录/日期”命令，打开“插入日期”对话框。 或选中“插入”工具栏中的“常用”选项卡，单击“日期”按钮 ，打开“插入日期”对话框。 可进行星期、日期和时间格式的设置。 若选中“储存时自动更新”复选框可在每次保存文档时都更新添加的日期。 二、编辑文本 1、文本格式的设置 设置字体——使用属性检查器中的【字体】下拉列表框。 设置字形——使用属性检查器中的【粗体】和【斜体】按钮。 设置字号——使用属性检查器中的【大小】下拉列表框。 3、段落格式的设置 对齐方式——使用属性检查器中的【左对齐】、【居中对齐】、【右对齐】、【两端对齐】按钮。 凸出与缩进——使用属性检查器中的【文本凸出】和【文本缩进】按钮。 4、查找和替换文本 选择“编辑/查找和替换”命令，打开“查找和替换”对话框。完成相关设置后，按需要单击【查找下一个】、【查找全部】、【替换】或【替换全部】按钮，以完成查找或替换。 三、创建列表 列表是指将具有相似特性或某种顺序的文本进行有规则的排列。 列表常应用在条款或列举等类型的文本中，用列表的方式进行罗列可使内容更直观。 在文档窗口中，可以用现有文本或新文本创建编号列表、项目列表和定义列表。 1、编号列表 编号列表前面通常有数字前导字符，可以是英文字母、阿拉伯数字或罗马数字等符号。 将鼠标光标定位在要创建编号列表的位置，单击属性面板中的【编号列表】按钮 或选择【文本】/【列表】/【编号列表】命令，然