第2课 文档及文本.ppt

第2课 页面文档与文本 本章学习内容： 1.了解文档和文本，熟悉视图与文档创建。 掌握文本输入方法，熟悉文档保存。 2.重点掌握网页中的文本分段、空格及特殊字符使用与换行 。 3.重点掌握页面设置。 4.重点掌握文本编辑及相关HTML标记。 5.熟悉水平线的应用。 6.了解标尺和网格 2.1 新建文档 1.文档与文本概念 2. 文档的创建方法 3. DW三种视图 4.添加文本方法 5.保存文档方法 1.文档概念 每一个文档就是一个网页，新建文档就是新建一个网页，这里的网页指的是HTML文档。 文档是用来存放信息数据的，这些信息数据指的是网页元素。 网页元素指的是文本、图像、表格、CSS、层、框架、多媒体文件、模板和库等。 所以文本只是文档中的一个组成部分。 2.新建文档的方法 （1）DW主界面中的文件菜单中的新建－－分类－－HTML－－创建。 （2）DW主界面中的起始页－－创建－－HTML－－创建。 （3）目录右键菜单－－新建文件※ 3.DW三种视图 代码视图： 显示文档的源代码,可以直接编写代码,适于编程开发人员和能简单编写代码人员。 拆分视图 同时显示文档和源代码,便于理解源代码的含义,提高学习、使用源代码的水平。 设计视图： 仅显示文档,用于编辑和完善网页的美观以及布局的合理性。 4.添加文本 （1）直接输入。 （2）复制网页上的文本 。 （3）复制WORD文档。 （4）文本文件文本。 ※使用快捷方式： Ctrl+A 全选文本，Ctrl+C复制，Ctrl+V粘贴。 Ctrl+Shift+V选择性粘贴。 （可通过DW的编辑菜单中进行选择操作） 5.保存文档 （1）文件→保存(Ctrl+s)。 （2）利用[文件]下拉菜单中的[另存为](Ctrl+Shift+S)。 新建文档→文件→保存(Ctrl+s)→选择保存目录→起文件名→选文件类型→保存 文件→另存为(Ctrl+Shift+S)→选择保存目录→起文件名→选文件类型→保存 ※注:文件名最好不用中文,可能会出现乱码或图片不显示等状态. 保存文件名index.html 2.2 文本分段、换行、特殊字符 1.文本分段 2.文本换行 3.插入特殊字符 1.文本分段 ※分段步骤： （1）光标定位在要分段的文本位置。 （2）使用Enter键，即按回车符换段。（word中是换行不是分段） （3）查看源代码，段落标记p…/p 2.文本换行 （1）快捷方式为Shift+Enter键※ （2）使用插入面板中的文本选项卡中的 （3）换行符标记br/ 3.插入特殊字符 （1）空格符 A、（ctrl+shift+space）：space指的是空格键 B、C插入面板－－文本选项卡 ※HTML标记 nbsp; 4个空格占两个汉字大小。 C、插入下拉菜单 （2）版权符号 （3）注册商标 （4）其他特殊字符 2.3 页面设置 1.页面设置方法 2.页面属性设置内容 1.页面设置方法 （1）打开修改下拉菜单中的页面属性设置。 （2）打开属性面板中页面属性设置。 2.页面属性设置内容 外观设置 （1）设置网页字体 （2）字体大小 （3）文本颜色（全局文本颜色即整体页面） （4）背景颜色 （5）背景图像 （6）背景图像重复设置（重复，不重复，横向重复，纵向重复） （7）页边距（上下左右） 设置页边距 默认情况下，Dreaweaver将网页的上边距和左边距定为3个像素。 需要修改左、上边距时，单击“修改”下拉菜单中的“页面属性”，打开“页面属性”对话框来进行修改“左边界”和“顶部边界”文本框中的值，默认为3像素。 如，在“左边界”和“顶部边界”文本框中输入“0”。在代码视图中style标记中将添加body { margin-left: 3px; margin-top: 3px; margin-right: 3px; margin-bottom: 3px; } 页面属性设置 HTML源代码 2.4文本编辑及相关HTML标记 1.设置文本外观 文本颜色、文字字体、格式化文字、加粗、倾斜。 2.文字排放 块引用格式、设置文字对齐、使用项目列表、序号列表、文本缩进。 1.设置文本外观 （1）文字颜色 （2）文字字体 （3）格式化文字 （4）加粗、倾斜 2.文字排放 （1）块引用(整体块) blockquote ……/blockquote （2）设置文字对齐 （3）项目列表 （4）序号列表 （5）文本缩进 综合实例 2.5 水平线 1.插入水平线 DW主界面中插入记录下拉菜单－－HTML－－水平线。 F12浏览测试 2.设置水平线 2.6 标尺和网络 标尺和网格是网页的辅助设计工具。 有利于网页格式化内容。 为了方便对网页元素定位，可以显示标尺和网格。 1.标尺