周欣然《网页设计技术与应用》第3章　网页的基本编辑与HTML语言简介 2013.pptVIP

第3章　网页的基本编辑 与HTML语言简介 3.1?? 图文混排示例 3.2? HTML网页文件结构简介 3.3?? 文本的输入和属性设置 3.4 图片的插入和属性设置 3.5 设置网页头部信息 3.1????图文混排示例 1 实例综述　　 3.1?图文混排示例 1）新建或打开网页 2）设置页面属性 3）设置头部信息 插入作者信息 插入“关键字” 插入“说明” 插入“刷新” 4）规划页面布局 5）添加页面元素 插入文本 插入图像 图像文字的混排 图像的编辑 6）设置超链接 7）保存网页 3.2　HTML网页文件结构简介 1 空白网页的HTML （Hyper Text Markup Language）代码 3.3　文本的输入和属性设置 1 插入文本 文件→导入 复制→粘贴或选择性粘贴 直接输入 3.3　文本的输入和属性设置 段落标签p……/p 定义一个段落。 属性：align用来设定段落的对齐方式，其值有left、right、center 标题格式标签hn……/hn 指明n级标题格式，其中n=1～6，其中 H1…/H1 最大的标题； H6…/H6最小的标题。 属性：align用来设定段落的对齐方式。其值有left、right、center 3.3　 文本的输入和属性设置 2 插入特殊符号 3.3　文本的输入和属性设置 3）其它特殊符号 选择菜单栏【插入】|【HTML】|【特殊字符】，从子菜单中选择要插入的特殊字符名称。 在“插入”工具栏的“文本”类别中，单击“字符”按钮，从弹出的子菜单中选择一种字符。 如果在子菜单中没有找到需要插入的特殊字符，可以单击“其他字符”图标，打开“插入其他字符”对话框，这里提供了更多的可选择的特殊字符。 3.3　文本的输入和属性设置 4 设置文本格式 3.3　文本的输入和属性设置 5 插入其它文本类对象 3.4　图片的插入与属性设置 1 图像格式 支持的图像格式有3种： GIF→对色彩要求不高的地方可使用（可透明） JPEG→用于色彩丰富的图片 PNG→保留所有原始层、矢量、颜色和效果信息（可透明） 3.4　 图片的插入与属性设置 2 插入图像 插入→图像 插入面板→常用→图像 直接将图像文件拖入编辑区 注意： 在插入图像前应先将网页文件已保存，从而使所插图像引用正确。 图像插入网页后，应确定图像文件已存入站点，否则在下次打开网页时，会出现看不到图像的情况。 3.4　 图片的插入与属性设置 3 设置图像的属性 图像→设置的名称 宽、高→可缩小和放大图片的显示尺寸。 源文件→图片的路径和名称。 链接→图像超链接的URL地址。 替代→图像的说明文字 对齐→在一行中图形和文本的对齐方式（图文混排技巧） 地图→创建热区的工具 3.4　 图片的插入与属性设置 3.4　 图片的插入与属性设置 3.4　 图片的插入与属性设置 3.5 设置网页头部信息 实 验 建图文混排网页 1 效果 2 制作要求 1) 创建本地站点及相关文件及文件夹。 2) 利用photoShop图像编辑软件，完成对图片的艺术处理。 3) 右边的图片具有鼠标经过后翻转成另外一幅图像的效果。 总 结 文本、图像的插入及属性设置、 图文混排 HTML结构、标签 * 在制作网页时， 需要以下几下步骤： 新建或打开网页 设置页面属性 设置头部信息 规划页面布局 添加页面元素 (文字和图像) 制作超链接 保存网页 “我与足球网”页面 2 实现步骤 html /html head /head body /body 2 网页文件结构 属性=“属性值” title 标题 /title …… p 第一段内容 /p img src=“image/oldmm.gif alt=old MM 文件头 文件体 …… 元素用标签(Tag)标记 3.2　HTML网页文件结构简介 插入、修改元素、标签方式 在设计视图可视化操作 在代码视图直接输入 学习参考资料： 《完整版W3CSchool线下教程.chm》 文本的几种预定义格式： 中南大学 p中南大学/p h1中南大学/h1 1) 换行 Enter→分段（隔一行） Shift+Enter→换行（不分段） 具体操作， br/ 2) 空格 汉字全角符号输入状态下输入 Shift+Ctrl+空格 编辑→首选参数→常规→允许多个连续的空格 nbsp 用右键/快捷菜单 用CSS规则（后面讲） 注释标签!--……--说明：在HTML文件中加入注释可以