第章制作页面ppt课件.ppt

3 1案例导入 西部旅游网3 2页面属性的设置3 3文本的修饰3 4设置超级链接3 5使用图像 3 1实例 制作一个旅游网站 该网站实例包含了若干个网页 在网页中添加文本 插入图像 建立超链接 涉及到的知识点有以下几点 页面属性的设置及文本的修饰 插入图像 插入图像对象实现特效 多个网页之间建立超链接 修改 菜单 页面属性 命令 或单击 属性 面板中的 页面属性 按钮 弹出 页面属性 对话框 外观选项卡 设置背景颜色及背景图像 另外还可设置文本 链接 访问过的链接 活动链接 页边距等 标题 编码选项卡 设置网页的标题 输入请到西部来旅游 显示在浏览器的标题栏中 如果未定义 则显示为 UntitledDocument 编码选项卡 选择文档编码 跟踪图像选项卡 跟踪图像是为网页排版的一种辅助手段 在HTML文档不显示 选择跟踪图像的路径及不透明度 3 2页面属性的设置 3 3文本的修饰 操作文本是最基本的网页制作技能 例如 字体的修饰 段落的对齐方式等 输入和修改文本软回车 换行 shift 回车键 和硬回车 另起一个自然段 输入连续的空格 切换到中文全角状态 或是在源代码中输入 nbsp 或是在插入栏中 字符选项 中单击 不换行空格 按钮输入特殊字符插入栏中文本选项中的 字符 选项 单击要输入的字符 另外还有一种方法 利用WORD进行特殊字符的输入 并通过WORD可获得大量文本内容 选择 复制 移动文本拷贝HTML 直接将文件的HTML源代码拷贝至剪贴板 CTRL Z是撤消 CTRL Y重做检查拼写错误 文本菜单 检查拼写 命令 查找和替换文字 编辑 菜单 查找和替换 命令设置文字属性选中文本 在 属性 面板进行文字的设置 或是使用插入栏 文本 选项中的某个按钮进行修饰 更多的可选择 文本 菜单 样式 命令进行修饰 设置段落选中文本 属性 面板中 对段落进行修饰 对齐方式 文本缩进等 列表 有序列表 无序列表 选中文本 在 属性 面板中 单击 列表 按钮 再单击列表项目 弹出 列表属性 对话框 对列表进行样式的修饰 建嵌套列表 进行文本缩进 输入嵌套列表 3 4设置超级链接 超链接是组成网站的基本元素 通过超链接将多个网页组成一个网站 浏览者通过超链接选择阅读路径 一 URL超链接是通过URL 统一资源定位器 来定位目标信息的 URL包括4部分 网络协议 域名或IP地址 路径和文件名 URL地址分为绝对URL和相对URL 绝对URL指在Internet上资源的完整地址 包括完整的协议类型 计算机域名或IP地址 包含路径信息的文档名 书写格式为 协议 计算机域名或IP地址 文档路径 文档名 例如 相对URL文件与当前位置之间的相对位置关系 一般是指同站点内的链接 如链接到同一路径的文档 直接输入文件名即可 如news htm如链接到同一路径下子文件夹的文档 则先输入子文件夹名和斜杠 再输入文件名 如yule news htm如链接到上一级路径中 要在文件名前输入 如 news htm 二 超链接的分类超链接的分类有很多种 按链接目标的不同 超链接分为 页面链接 锚记链接 电子邮件链接 按链接单击对像的不同 超链接分为 文字链接 图像链接 图像映射等 页面链接页面链接是指链接目标是其它网页或文件 浏览者单击超链接时将跳转到相应的网页或显示相应的文件 设置方法 选中创建超链接的文本或图像 在 属性 面板的链接文本框中输入URL地址 或单击链接框右侧的 浏览文件 按钮 弹出 选择文件 对话框 选择相应的文件 在网页中使用锚记锚记又称书签 一个篇幅较长的网页分为许多块 可以通过锚记跳转到网页中不同的部分 定义锚记 将光标定位到要用锚记的位置 单击插入栏中的命名锚记按钮 出现命名锚记的对话框 输入锚记名称 设置带有锚记的超链接 选中文字或图像元素 在属性检查器中 单击链接文本框 在URL文本框中键入 文件名称 锚记名称 如果链接在同一文档中进行 则直接键入 锚记名称 E MAIL链接 插入栏中的电子邮件链接中 E MAIL 文本框中 输入电子邮件地址 或是在属性检查器中链接文本框中输入mailto 图像链接选中图像 在 属性 面板中的 链接 文本框中键入要链接的网址或文件即可 热点链接选中图像 单击属性面板中的热点按钮 可将热点设置为矩形 圆形 多边形等 为链接设立目标在 属性 面板中 设置链接目标 blank 新建窗口 parent 父窗口打开超链接 self 在本窗口或本框架中打开链接 top 在当前浏览器的最外层打开链接 3 4使用图像 一 图像的格式GIF 索引格式 最多支持256色 JPG JPEG 有损压缩格式 支持的是真色彩 PNG 专门针对WEB开发的一种无损压缩格式 二 插入图像 插入 栏 图像 按钮 或是 插入 菜单 图像 命令 打开 选择图像源文件 对话框 选定需要的图像 单击 确定 按钮 三 设置图像属性选中图像 在 属性 面板中设置图像的属性 对图像进行命名 改变图像大小 在 属性 面板直接输入图像的尺寸大小 在 文档 窗口拖动图像的右方 右下方 下方的句柄进行拖动 在 属性 面板中单击重设大小可以恢复图像的大小 图像的对齐方式 垂直 水平方向等 设置图片的边距 垂直边距 水平边距经图像加上文本说明 在 属性 面板中 替代 文本框中输入说明文本 设置低分辨率图像制作两张图像 一个是浏览器最终显示的图像 另一个是它的低分率或者灰度版本 单击图像 在 属性 面板中 低品质源输入低分辨率的图像地址 增加图像边框 在 属性 面板中输入边框宽度 四 使用水平线 加入水平线 插入 栏 常用 选项卡中的 水平线 按钮 选中水平线 在 属性 面板中 修改水平线的属性 五 插入鼠标经过图像及导航条 1 插入鼠标经过图像先在图片处理软件中处理两个图片 单击 插入 栏 鼠标经过图像 按钮或是选择 插入 菜单 图像对象 鼠标经过图像 按钮 弹出 鼠标经过图像 对话框 输入原始图片的名称和位置 输入鼠标经过图片的名称和位置即可 为鼠标经过图像加入一个超链接 前往 URL 文本框中输入超链接地址即可 2 插入导航条导航条在网页中起到了向导的作用 通过导航条的指引 快速地找到所要浏览的信息 导航条由多个导航条元件组成 每个导航条元件链接到相应的链接地址 在网页中一般横排或竖排 每个导航条元件包含一组图像 分别来响应鼠标动作 设置方法如图所示 新建一个空白的网页文件选择 命令 菜单 创建网站相册 命令 弹出一个对话框 设置相册标题 副标题 其它信息等 选择 浏览 按钮 确定源图像文件夹和目标图像文件夹 设置略缩图的大小 格式等 小数点位数可改变图像的尺寸大小 为每张相片建立导览页面 复选框来为每个图像创立导航页 如图所示 六 创建网页相册 本章小结本章主要介绍了网页元素编辑及相关属性的设置 包括以下几个方面 1 网页文本的编辑2 超链接的建立3 图像的插入和图像对象的编辑本章练习题1 选择题 1 网页中常用的图像文件格式包括 A JPG BMP GIFB JPG GIF PNGC BMP PNG GIFD MP3 JPG GIF 2 在插入导航条时 是必须的 A 按下图像B 替换文本C 状态图像D 鼠标经过图像 3 单击 会跳转到当前页面某个位置 却不会打开新的网页文件 A 空链接B 文本链接C 锚记链接D E MAIL链接2 简答题一个完整的URL地址包括哪些内容 超链接中的绝对路径和相对路径有什么区别 一幅图像中创建多个链接区域 如何实现 网页中支持的图像格式有哪些 它们有什么特点 上机实训背景知识根据本章所学的文本编辑 图像及图像对象的插入 网站相册的创建 超链接的设置等知识进行网站的创建 实训准备工作将文本素材和图像素材准备好