第四章  制作简单网页（文本和图像在网页中的使用）
本章要点：
● 网页中插入文本
● 编辑文本
● 网页中插入图像
● 编辑图像
● 创建网页导航条
一、 在网页中插入文本
1、 插入文本
（1） 直接输入文本：
注意 分段的两种方式Enter，Shift+Enter
（2） 复制和粘贴文本：
例：复制记事本中的一段文本内容
注意 尽量减少使用快捷键，有些内容只能通过菜单命令进行操作
（3） 导入文本：
【命令】文件-导入-Word/Excel文档
例4-1：新建一个网页文档，导入一个Excel文档到网页文档中，添加文本内容
      （标题：收入比较表，表格背景天蓝，居中对齐）
（4） 输入特殊字符：
版权符号，货币符号，注册商标号及直线等
【命令】插入-文本-字符：标点类（不换行空格，换行符），货币类，版权类，其他字符
（5） 复制和粘贴HTML代码：
如制作鼠标特效
● 在代码视图中制作鼠标特效
【命令】查看-代码/代码视图 在</body>标记前输入鼠标特效代码
例：紧随鼠标的流动彩字串
● 使用记事本制作鼠标特效
【命令】记事本-另存为-保存类型（所有文件）-文件名.html
例：跟随鼠标的时钟
2、 插入水平线和日期
（1） 插入水平线
水平线：对信息的组织很有用，可使用水平线来分隔文本和对象，比使用段落更加分明，具有层次感
插入记录-HTML-水平线
例：导入word文件（目录），在每章节分隔处添加水平线（<hr />）
（2） 插入日期
插入-常用-日期
例4-2：打开一个网页文档，在文档中插入日期和时间
二、 编辑文本
1、 应用标准格式：段落，标题
2、 设置文本字体：编辑字体列表
3、 设置文本字号：
4、 设置文本颜：改变网页文本默认颜（修改-页面属性）
5、 设置文本对齐方式
例4-3：新建一个网页文档，在文档中插入文本内容，设置文本内容属性
      标题：大小24像素，蓝，粗体，华文行楷，居中对齐
正文：楷体，18像素，缩进
三、 在网页中插入图像
1、 图像格式：
● Gif：256，适合显示调不连续或具有大面积单一颜的图像（导航条，按钮，图标等具有统一彩的图像）
● JPEG：用于摄影或连续调的图像。
● PNG：具备对索引，灰度，真彩图像及alpha通道透明的支持。
2、 插入图像
（1） 插入图像
（2） 插入图像占位符：
在网页制作过程中，如果所需插入的图像未制作完成，可以使用图像占位符的方式来插入图像。
常用-图像-图像占位符
● 名称：字母和数字
● 宽度，高度，颜
● 替换文本：描述该图像的文本
替换图像占位符的方法：
● 双击-【打开图像源文件】
● 属性面板中【源文件】
      例4-4：打开一个网页（index.htm），在网页中插入大小为720*143像素的图像占位符
（LOGO），并在网页中替换图像占位符。
（3） 设置网页背景图像：
属性面板中【页面属性】-分类-外观
例：设置上述网页背景图片为bg.gif
（4） 插入鼠标经过图像：当鼠标经过时，原始图像会变成另一张图像，两张图像必须大小相同（如不相同，系统会自动将第二张图像调整为第一张大小）
常用-图像-鼠标经过图像
● 图像名称，原始图像，鼠标经过图像
● 预载鼠标经过图像：预先加载图像到浏览器缓存中，加快图像显示速度
● 替换文本：当鼠标经过时显示的文本内容
● 按下时，前往的URL：链接地址
例4-5：打开一个网页文档，在文档中插入鼠标经过图像
四、 编辑图像
1、 设置图像属性
（1） 基本属性：属性面板
● 图像：名称
● 宽高：数值加粗，恢复按钮
● 源文件：浏览；在文件面板中将图像文件拖入到该文本框
● 链接：浏览；在文件面板中将要链接的文档拖入到该文本框
● 类：CSS样式
● 替换：图像说明
● 地图和热点工具：标注和创建客户端图像地图
● 边距：为图像边缘添加边距
● 目标：链接页面的位置
● 对齐按钮：设置图像的水平对齐方式
● 对齐列表框：设置相对于同一段落中其他元素的对齐方式
● 边框：默认0
● 编辑：裁剪，亮度和对比度，锐化等
（2） 对齐图像
● 默认值：通常指定基线对齐。（根据站点访问者的浏览器的不同，默认值也会有所不同。）
● 基线和底部：将文本（或同一段落中的其它元素）的基线与选定对象的底部对齐。
● 顶端：将图像的顶端与当前行中最高项（图像或文本）的顶端对齐。
● 居中：将图像的中部与当前行的基线对齐。
● 文本上方：将图像的顶端与文本行中最高字符的顶端对齐。
● 绝对居中：将图像的中部与当前行中文本的中部对齐。
● 绝对底部：将图像的底部与文本行（这包括字母下部，例如在字母g中）的底部对齐。
● 左对齐：将所选图像放置在左边，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。
● 右对齐：将图像放置在右边，文本在对象的左侧换行。如果右对齐文本在行上处于对象之前，它通常强制右对齐对象换到一个新行。
（3） 调整大小：3个控制点
例4-6：新建一个网页文档，插入图像，设置图像属性并添加相应的文本说明。
2、 使用图像编辑器
（1） 使用内部编辑器
● 优化
● 裁剪
● 重新取样
● 亮度和对比度
● 锐化
（2） 使用外部编辑器
编辑-首选参数-分类-文件类型/编辑器
右击正在编辑的图像，在快捷菜单中可显示指定的编辑器名称（右键-编辑以…）
使用外部图像编辑器编辑图像的方法：
● 右键-编辑以…
● 属性面板-编辑按钮
● 文件面板-双击需编辑的图像
例4-7：插入一个图像文件，设置外部编辑器为Photoshop，在外部编辑器中修改图像
图文混排，为图像添加注释，图像热区，图像占位符
五、 创建网页导航条
导航条由一个或多个图像组成，它的显示随着动作的改变而改变，因此，在使用导航条命令前，应首先创建一个用于导航条的图像集。根据鼠标的动作，导航条的图像通常有以下4种状态：
【一般】：尚未单击时所显示的初始图像
【滑过】：当指针从图像上经过时出现的图像。
【按下】：单击导航条图像时显示的图像。
【按下时鼠标经过】：单击图像后，当指针滑过按下该图像时显示的图像。
1、 插入导航条
【插入】-常用-图像-导航条
【+】、【-】按钮 ：在导航条元件文本框中添加/删除一个导航条元件，使用箭头键可以在列表中上移或下移元件。
项目名称：输入导航条项目的名称。
状态图像：最初显示的图像（此项必填，其他图像状态可选填）
鼠标经过图像：当指针从图像上经过时出现的图像
按下图像：单击导航条图像时显示的图像
按下时鼠标经过图像：鼠标点击后当鼠标再次移动到这个部位上的图像
替换文本：输入导航条项目的描述性特征。
怎么制作网页图片
按下时前往的URL：链接地址
预先载入图像：载入页面时就下载全部图像
页面载入时就显示“鼠标按下图像”：在显示页面时，以“按下”状态显示初始图像。
插入：水平或垂直
使用表格：是否使用表格规划导航条
在：设置导航条项目链接的URL地址在主窗口中显示。
一般地，每部位只设一到两种状态的图像。因为图像太多了，会影响网页页面的访问、浏览的速度。
2、 编辑导航条
【修改】-导航条
例4-8：制作一个导航条
六、 本章综合练习：制作简单网页
例4-11
PS：第一次作业要求

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。