3.1在网页中输入与编辑文本(课件）-高二《网页设计与制作》同步教学（北京理工版）

项目活动三　休闲运动网站设计:输入与编辑网页元素 任务一　在网页中输入与编辑文本 任务二　在网页中插入与编辑图像 任务三　休闲运动网站建设 返回 1 任务一　在网页中输入与编辑文本　 一、输入文本 应用Ｄｒｅａｍｗｅａｖｅｒ ＣＳ６ 编辑网页时， 如果需要在空白网页中输入文本， 可直接在光标所在位置输入文本， 输入方法与其他文本编辑器一样。 如果需要编辑一个已经有内容的网页， 则可打开该网页， 将光标定位到需要输入文字的位置， 输入文本即可。 二、输入空格 在默认情况下， Ｄｒｅａｍｗｅａｖｅｒ ＣＳ６ 只允许网站设计者输入一个空格， 若要连续输入多个空格， 则需要进行设置或通过特定的方式实现。 下面将介绍多种插入空格的方法。 １) 先在“插入” 面板中找到“文本” 选项卡， 然后单击其最后面的“字符” 按钮，弹出一个下拉列表， 选择“不换行空格” 命令就可以为文本添加一个空格， 如图３ －１ 所示。 如果需要添加多个空格则可以在这个按钮上一直单击， 直到达到需要的数目为止。 下一页 返回 任务一　在网页中输入与编辑文本　 ２) 直接在键盘上按“Ｃｔｒｌ ＋ Ｓｈｉｆｔ ＋ Ｓｐａｃｅ” 组合键来实现空格的输入。 ３) 在代码视图中进行空格的添加。 打开代码视图， 可以看到使用前述方法添加的空格在代码视图中显示为“＆ｎｂｓｐ.”。 这就是说， 在代码视图中空格的代码就是“＆ｎｂｓｐ.”。这时， 只需将空格的代码复制， 然后根据所需的数量进行粘贴就可以任意添加空格。 ４) 使用全角模式来输入空格。 一般情况下， 当用户使用中文输入法进行中文的输入时， 有半角和全角两种模式。 将半角切换为全角后， 再按下空格键也可以添加多个空格。 ５) 还有一个更简单的空格输入方法。 在菜单栏上执行“编辑” → “首选参数” 命令， 打开“首选参数” 对话框， 选择“分类” 列表中的“常规” 选项， 接着再将右边的“允许多个连续的空格” 选项选中， 如图３ －２ 所示。 这样当需要添加空格的时候， 就可以直接按空格键输入了。 上一页 下一页 返回 任务一　在网页中输入与编辑文本　 三、输入特殊字符 在Ｄｒｅａｍｗｅａｖｅｒ 中除了添加空格， 还需要添加一些特殊符号， 如＆、©、￥、®等。一种方法可单击“插入” 面板中的“文本” 选项卡， 然后单击其最后的“字符” 按钮，弹出下拉列表， 选择相应的命令即可， 如图３ －１ 所示. 还有一种方法可用代码， 特殊符号的代码表示方法和空格的有些相似， 也是由前缀“＆” 加上字符对应的名称， 再加上后缀“.” 组成， 一些常用特殊符号的源代码， 如表３ －１ 所示。 除了上述常用的特殊符号外， 如果还需要输入其他的特殊符号， 则可单击“插入” →“ＨＴＭＬ” → “特殊字符” → “其他字符” 选项， 弹出“插入其他字符” 对话框， 选择相应的字符， 单击“确定” 按钮即可， 如图３ －３ 所示。 上一页 下一页 返回 任务一　在网页中输入与编辑文本　 四、文字换行与分段 在Ｄｒｅａｍｗｅａｖｅｒ 中输入文字， 按Ｅｎｔｅｒ 键可以分段， Ｄｒｅａｍｗｅａｖｅｒ 中段落与段落之间是隔行换行的。 如果希望前后两行文字之间能够没有距离， 则可以在按着Ｓｈｉｆｔ 键的同时按下Ｅｎｔｅｒ 键， 进行强制换行， 这样前后两行文字就可以紧挨着了。 强制换行是一个没有结尾的标记， 不用< / ｐ > 表示， 而用< ｂｒ > 来表示。 ＨＴＭＬ 文件的任何位置只要使用了< ｂｒ > 标记， 当文件显示在浏览器中时， 该位置之后的文字将显示在下一行， 如图３ －４ 和图３ －５ 所示。 上一页 下一页 返回 任务一　在网页中输入与编辑文本　 五、文字属性的设置 对文字属性的设置是在“属性” 面板中完成的。 首先输入一段文字， 然后将这些文字选中， “属性” 面板变为文本的属性， 有ＨＴＭＬ 和ＣＳＳ 两种模式， 分别如图３ －６ 和图３ －７所示。 如果在Ｄｒｅａｍｗｅａｖｅｒ ＣＳ６ 界面上不显示“属性” 面板， 则可通过执行菜单命令“窗口” → “属性”， 打开“属性” 面板。 图３ －６中的“格式” 选项用于设置标题和段落. 如果定义了ＣＳＳ 样式， 可以通过“类” 选项为文本选择已经设置好的ＣＳＳ 样式 按钮用于设置文 本的加粗与否. 按钮用于设置文本的倾斜与否。 上一页 下一页 返回 任务一　在网页中输入与编辑文本　 六、文本选项卡的设置 用户除了可以使用“属性” 面板来对文字进行设置， 还可以使用“插入” 面板的“文本” 选项卡来设置文字。 单击“插入” 面板中的“文本” 选项卡， “文本” 选项卡的文字设置选项如图３ －９ 所示 在“文本” 选项卡中， 粗