第4章 网页的文本元素(ppt).ppt

第4章 网页的文本元素 4.3.5 CSS3.0中文字的新增属性 + 4.3 使用CSS控制页面文本 1．text-shadow 该属性用来设置文本是否具有阴影及模糊效果。 2．word-wrap 该属性用来设置当前行超过指定容器的边界时是否断开转行。 【教与练4-9】：CSS3.0中文字的新增属性。 由于IE8并不支持text-shadow属性，这里使用火狐6进行预览 该容器使用了word-wrap属性，此处长单词被强行换行 该容器没有使用word-wrap属性，此处模拟的长单词溢出容器外 第4章 网页的文本元素 4.4.1 布局规划 + 4.4 案例精粹——环保公司主页 图4-49 页面最终效果 图4-50 布局示意图 第4章 网页的文本元素 + 4.5 举一反三——微型博客 图4-76 页面效果 图4-77 布局示意图 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 清华大学 网页设计与制作实用教程 吴 丰 主编 清华大学出版社 第4章 网页的文本元素 4.1.1 插入文本 + 4.1 插入并编辑文本 1．直接输入文本 将光标定位在“设计”视图中需要插入文本的地方，通过键盘直接输入的方法即可输入文本。 （1）换行 如果使用组合键〈Shift+Enter〉进行换行 （2）输入多个空格 使用〈Ctrl+Shift+Space〉组合键增加空格。 2．复制粘贴 第4章 网页的文本元素 4.1.2 插入特殊字符、水平线和日期 + 4.1 插入并编辑文本 插入版权字符“?” 1．插入特殊字符 2．插入水平线 水平线可以分隔页面内容，使得页面元素相互区分。在与此相对应的“代码”视图中，水平线用hr/标签表示。 3．插入时间日期 Dreamweaver提供了一个方便的日期对象，该对象使设计人员可以以喜欢的格式插入日期，并且可以选择在每次保存文件时都自动更新该日期。 第4章 网页的文本元素 4.1.3 设置文本格式 + 4.1 插入并编辑文本 第4章 网页的文本元素 4.1.4 批量替换与浏览器兼容性检查 + 4.1 插入并编辑文本 1．批量替换 Dreamweaver CS5的批量替换功能可以在“当前文档”、“当前本地站点”和“打开的文档”等多种范围中搜索并替换. 图4-16 “查找和替换”对话框 第4章 网页的文本元素 2．浏览器兼容性检查 + 4.1 插入并编辑文本 Dreamweaver CS5的浏览器兼容性检查功能，能够很好的检查网页文件中影响最终效果的因素，为用户提供进一步完善的便捷途径。 图4-17 浏览器兼容性检查 2．浏览器兼容性检查 4.1.4 批量替换与浏览器兼容性检查 第4章 网页的文本元素 4.2.1 文本链接 + 4.2 创建超链接 超链接根据目标的不同，又可以分为内部链接、外部链接和空链接。 图4-20 通过属性检查器创建超链接 图4-21 创建超链接 第4章 网页的文本元素 4.2.2 邮件链接 + 4.2 创建超链接 邮件链接是一种特殊的链接，单击这种链接，可以启动电子邮件程序。 图4-24 通过“属性”面板创建邮件链接 图4-23 “电子邮件链接”对话框 第4章 网页的文本元素 4.2.3 锚链接 + 4.2 创建超链接 浏览网页时，用户肯定都有这种体验：当浏览的页面内容较多，需要连续滚动多次才能完整阅读时，网页设计者通常会增加诸如“返回页面顶部”的超链接，为用户提供方便。对于这种用户体验，就是采用锚链接完成的。 图4-27 创建锚链接 图4-28 单击底部锚链接 图4-29 返回页面顶部 第4章 网页的文本元素 4.3.1 CSS的字体和文本属性 + 4.3 使用CSS控制页面文本 CSS字体属性解释 Font:该属性是简写属性，其作