field
Uploaded by
39 SLIDES
524 VIEWS
390LIKES

计算机网络 与网页制作 Chapter 09 ：添加文本和 图像

DESCRIPTION

计算机网络 与网页制作 Chapter 09 ：添加文本和 图像. 复旦大学计算机学院. 肖川 cxiao@fudan.edu.cn. 目标. 预览页面 添加文本 理解样式 创建超链接 创建列表 插入及编辑 图像. 效果. 1. 添加文本. 选中文本，单击“属性”面板的“ HTML ”按钮或“ CSS ”按钮. 设置文本为特定的页面元素 —— 标题. 文本所处的 HTML 标签发生变化. 设置标题的 样式. 在标题 文本 内单击，再单击“ CSS ”标签，从 “字体” 下拉列表中选择 “华文新魏”. 新建 CSS 规则.

1 / 39

Download Presentation

计算机网络 与网页制作 Chapter 09 ：添加文本和 图像

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 计算机网络与网页制作Chapter 09：添加文本和图像 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn

  2. 目标 • 预览页面 • 添加文本 • 理解样式 • 创建超链接 • 创建列表 • 插入及编辑图像

  3. 效果

  4. 1. 添加文本 选中文本，单击“属性”面板的“HTML”按钮或“CSS”按钮

  5. 设置文本为特定的页面元素——标题 文本所处的HTML标签发生变化

  6. 设置标题的样式 在标题文本内单击，再单击“CSS”标签，从“字体”下拉列表中选择“华文新魏”

  7. 新建CSS规则 新建CSS规则所自动添加的内容 光标位于标题内

  8. 修改CSS规则 修改CSS规则自动引发的代码变化 光标位于标题内

  9. 2. 样式简介 • HTML用标签定义页面元素 • 标题1：<h1>…</h1> • 段落：<p>…</p> • 列表：<ul>和<li> • … … • 每种元素有默认格式 • CSS为HTML页面元素创建规则或样式命令 • 重设页面元素的格式

  10. 新建针对页面元素(段落<p>)的CSS规则 新建CSS规则引起的代码变化 在段落内单击，再单击“属性”面板的“CSS”按钮，选择字体的“大小”

  11. 手工修改代码 手工修改CSS规则的代码 单击“属性”面板内的“刷新”按钮可在网页的设计视图看到效果

  12. 修改针对页面元素(段落<p>)的CSS规则 修改样式引起的CSS代码变化 在设计视图的段落内单击

  13. 3. 在浏览器中预览页面 选择菜单 文件>>在浏览器中预览

  14. “实时视图”也能预览页面 可以手工编辑，并且效果立即在设计视图中展示 非编辑工作区

  15. 4. 超链接 • 超链接 • 北京/西城/百万庄大街/24号/张三 • www.marketplace.com/photos/canon.jpg

  16. 创建超链接——方法1 超链接对应的代码 在设计视图内选中要添加链接的文本，再单击“属性”面板内的“HTML”按钮

  17. 创建超链接——方法2 把光标定位于某个位置，选择菜单 插入>>超级链接

  18. 创建超链接——方法3 若之前选中文本，则“文本”框自动填充，否则内容为空。 将在一个新的、空白的浏览器窗口内打开链接 在设计窗口选中文字，单击“插入”面板的“常用”区域内“超级链接”图标

  19. 5. 相对链接和绝对链接 网页引用同一站点内的文件一般使用相对链接。 网页引用站点外部的文件使用绝对链接。

  20. 6. 链接至一个电子邮箱 选中文本，菜单 插入>>电子邮件链接 或者 面板 插入>>常用>>电子邮件链接

  21. 7. 创建项目列表 页面元素的含义 ul: unordered list li: list item 选中文本，单击“属性”面板的“HTML”按钮。

  22. 创建编号列表 页面元素的含义 ol: ordered list li: list item

  23. 设置列表的强调符号 项目列表用<ul>和<li>标签表示，而之前只设置了<h1>和<p>标签的样式，故设计视图内项目列表与其他文字的格式不同。 单击列表项，菜单 格式>>列表>>属性

  24. 新建项目列表的样式 新建样式引起的CSS代码变化 在列表内单击，再单击“属性”面板的“CSS”按钮，选择字体的“大小”

  25. 修改项目列表的样式 修改样式引起的CSS代码变化 光标位于设计视图的项目列表内

  26. 8.使用文本插入面板 光标定位于某处，面板 插入>>文本>>字符：版权

  27. 使文本变成斜体 方法1：选中文本，面板 插入>>文本>>斜体 方法2：选中文本，菜单 插入>>HTML>>文本对象>>斜体 方法3：选中文本，面板 属性>>HTML>>斜体图标

  28. 9. 添加图像的方法一 禁用图像时显示的文本信息 定位光标，再菜单 插入>>图像

  29. 页面元素——图像 对应的HTML代码

  30. 添加图像的其他方法 • 方法二：定位光标，再把图像文件从“文件”面板拖至设计窗口内 • 方法三：定位光标，再面板 插入>>常用>>图像：图像

  31. 使用HTML方法修改图像边框 border属性用于设置图像的边框 选中图像，再面板 属性>>“边框”文本框

  32. 10. 链接图像 方法一：选中图像，面板 属性>>“链接”文本框右侧的“浏览文件”图标 方法二：选中图像，面板 属性>>“链接”文本框右侧的“指向文件”图标

  33. 11. 使用图像占位符 定位光标，再菜单 插入>>图像对象>>图像占位符

  34. 填实图像占位符 选中图像，面板 属性>>“源文件”文本框右侧的“浏览文件”或“指向文件”图标

  35. 12. 调整图像亮度与对比度 选中图像，面板 属性>>“亮度和对比度”图标

  36. 13. 调整图像大小 在“文件”面板内复制文件，便于以后恢复

  37. 编辑图像设置 选中图像， 再面板 属性>>“编辑图像设置”图标

  38. 14. 更换图像 选中图像，面板 属性>>“源文件”文本框右侧的“浏览文件”或“指向文件”图标

  39. 小结 • 插入HTML页面元素 • 文本 <p> • 标题 <h1> • 超链接 <a> • 列表 <ul>或<ol> • 图像 <img> • 选中页面元素，“属性”面板 • 添加CSS样式 • 设置HTML属性

More Related