制作一个简单的网页PPT课件

网页设计与制作实用教程 2 2020 4 21 学习目标 掌握在页面中编辑文字的方法 掌握在页面中插入和处理图像的方法 了解在页面中插入其他元素的方法 掌握网页属性的设置方法 3 2020 4 21 目录 制作一个简单的网页本章小结配套实训练习题 4 2020 4 21 制作一个简单的网页 设计目标页面分析实训引导制作步骤 5 2020 4 21 设计目标 制作一个简单网页 浏览效果如图所示 返回 6 2020 4 21 页面分析 本页面由3部分内容组成 logo 主体内容和页脚信息 该简单页面包含了如下基本元素 文本图像水平线特殊字符等并对基本元素进行了相应的设置 教程P28 返回 7 2020 4 21 实训引导 1 本页面用到的2个图像文件 img3 1 jpg logo图像 img3 2 jpg 主体内容中的图像 由配套光盘webcourse chapter03 images文件夹提供 在制作页面之前 先将用到的图像文件拷贝到本地站点future images文件夹中 2 页面中的文字资料由配套光盘webcourse materials文件夹下的txt3 1 txt文件提供 3 页面效果请参见webcourse chapter03文件夹下的index3 html文件 返回 8 2020 4 21 制作步骤 1 设置网页属性 2 在页面中插入和编辑文本 3 在页面中插入和处理图像 4 插入水平线 5 插入其他基本元素 返回 9 2020 4 21 设置网页属性 将页面属性设置为 页面字体为宋体 大小为12像素 文本颜色为 034881 背景颜色为 B8DCF4 上边距为0像素 左右边距的值均为30像素 网页标题 Title 为 畅想未来 操作步骤见教程P30 10 2020 4 21 在页面中插入和编辑文本 在index html页面中输入各段文本 效果如图3 6所示 操作步骤见教程P32 将 未来都市 科幻小说 5行 段 文本设置为 标题2 并为其添加项目符号 操作步骤见教程P34 用同样的方法将页脚信息中的 设为首页 网站管理 文本设置为 标题5 操作步骤见教程P35 将页脚信息文本的对齐方式设置为 居中 操作步骤见教程P35 将最后3行文本颜色设置为灰色 操作步骤见教程P36 将 未来都市 科幻小说 5行 段 文本颜色设置为顶端logo 畅想未来 文本相同的颜色 操作步骤见教程P37 11 2020 4 21 在页面中插入和编辑文本 在Dreamweaver中添加 隶书 华文行楷 等中文字体 操作步骤见教程P37 将 未来都市 科幻小说 5行 段 文本字体设置为 华文行楷 操作步骤见教程P38 12 2020 4 21 在页面中插入和处理图像 在index html页面中插入2张图像 效果如图3 17所示 操作步骤见教程P39 调整图像img3 2 jpg和页面其他元素的对齐方式 操作步骤见教程P40 将图像img3 1 jpg在页面中水平居中对齐 操作步骤见教程P42 调整图像img3 2 jpg的周边间距 操作步骤见教程P43 为图像img3 2 jpg添加提示文本 科幻图像 操作步骤见教程P43 调整图像的大小 操作步骤见教程P43 编辑图像 操作步骤见教程P44 13 2020 4 21 插入水平线 如图3 30所示 在页面中插入水平线 操作步骤见教程P45 将水平线居中对齐 且其宽度为920像素 高度为5 操作步骤见教程P46 将水平线的颜色设置为蓝色 操作步骤见教程P46 14 2020 4 21 插入其他基本元素 在页面底端的页脚中插入 版权 特殊字符 效果如图3 34所示 操作步骤见教程P47 15 2020 4 21 本章小结 本章以 畅想未来 页面的制作为例 介绍了如何在页面中插入基本的页面元素和设置页面的属性 其中 页面属性的设置包括网页标题 背景图像 背景颜色 普通文本和链接文本的默认颜色 页面的左边距和上边距 文档编码等 基本的页面元素包括文本 图像 水平线和日期对象 16 2020 4 21 配套实训 参见教材第4