Dreamweaver+FlashCS6第4章 使用Dreamweaver制作基础网页.pptx

第4章 使用Dreamweaver制作基础网页 2 4.1 课堂案例：创建index.html网页 4.2 课堂案例：制作“学校简介”网页 4.3 项目实训 4.4 课后练习 课堂案例：创建index.html网页 老洪告诉米拉，制作网页第一步是先学会创建基础网页，包括创建新的网页文档、打开已有的网页文档、关闭网页、设置页面属性、保存创建的网页文档等。本例将创建一个index.html，完成后的参考效果如图所示。 Index.html最终效果 4.1.1　创建网页文档 在站点中，新创建的网页类型有多种，如空白页、空模板、流体网格布局、模板中的页和示例中的页等类型网页。下面将介绍在“新建文档”对话框中创建空白网页的方法。 创建空白文档 查看创建的网页 4.1.2　设置页面属性 创建好网页后，可对其进行页面属性设置，如设置标题和编码属性、页面背景颜色和文本字体大小等外观设置，使其具有可观赏性。 设置外观样式 设置链接样式 设置标题级别样式 设置标题 4.1.2　设置页面属性 编辑好的网页可进行保存、预览和关闭操作。 保存网页 保存网页 7 4.1 课堂案例：创建index.html网页 4.2 课堂案例：制作“学校简介”网页 4.3 项目实训 4.4 课后练习 课堂案例：制作“学校简介”网页 老洪让米拉为“小儿郎”早教网站制作一个学校简介网页，要求该网页能显示早教机构的相关基本信息。要完成该任务，除了用到添加文本外，还会涉及文本格式和段落格式的设置，以及添加水平线等操作。 “学校简介”网页参考效果 4.2.1　添加文字 在网页中，文字是网页设计中最基础的部分。在网页中可以通过两种方法进行文字输入，一种直接在网页文档中输入文字；另一种则是通过复制的方法在其他程序中复制需要的文字，然后将其粘贴到当前网页文档中。 输入文本 复制文本 4.2.2　设置文本格式 设置文本属性可以通过HTML基本属性和CSS扩展属性来进行设置，但不管要使用哪种方法进行设置，都需要先将文本选中，然后进行设置。 应用标题样式 设置字体 添加字体 4.2.2　设置文本格式 新建CSS规则 设置字号 设置其他文本格式 4.2.3　添加水平线 在页面中插入水平线可以在不完全分割页面的情况下，以水平线为基准分为上下区域，也可以作为装饰页面应用。 选择命令 添加水平线 4.2.4　添加空格 在网页文档中插入空格，不能像其他文字程序中那样按空格键来进行实现。 选择命令 添加空格 14 4.1 课堂案例：创建index.html网页 4.2 课堂案例：制作“学校简介”网页 4.3 项目实训 4.4 课后练习 4.3.1　制作“优惠券说明”网页 本实训的目标是为落帆婚纱网站制作一个优惠券说明网页，要求清除阐述优惠券的使用要求和使用权利。 1．实训目标 ① 创建网页并输入文本 ② 设置文本样式 4.3.1　制作“优惠券说明”网页 说明类型的网页，通常采用文字来进行解释，目前也有采用图片加文字的方式来制作说明网页，但为了加快网页的加载速度，许多网站仍然采用全文字的方式来制作说明网页。 2. 专业背景 3. 操作思路 4.3.2　制作“服务协议”网页 本实训的目标是为落帆婚纱网站制作一个服务协议网页，要求页面中清楚显示网站服务内容和相关权责。 1．实训目标 ① 导入文本 ② 设置文本样式 4.3.2　制作“服务协议”网页 服务协议类网页是大多网站中都需要使用到的页面，这类网页主要用于展示网站的相关服务协议，因此，最好采用文字展示，且文字最好调理清晰，结构明显，便于用户查看。 2. 专业背景 3. 操作思路 19 4.1 课堂案例：创建index.html网页 4.2 课堂案例：制作“学校简介”网页 4.3 项目实训 4.4 课后练习 练习1：制作“保修服务”网页 制作一个“保修服务”页面，要求通过文本来说明网站的保修服务内容， 要求操作如下。 新 建一个空白网页文件，并将其保存。 打开提供的“保修服务.docx”文档，全选其中的文本并进行复制。 返 回到Dreamweaver中，单击鼠标右键，在弹出的快捷菜单中选择“粘贴”命令粘贴文本。 选择相关的文本，并对其设置相应的格式。 练习2：制作“代金券说明”网页 制作一个关于网站中代金券的使用说明网页，参考效果如图所示。 要求操作如下。 新 建空白网页，然后单击 按钮，打开“页面属性”对话框，在其中设置标题文本字体和颜色。 在 其中输入文本，然后设置文本样式，并应用到其他文本中。 22 Thank you! 海量图书方便查询 免费申请样书 下载配套资源 优惠购书 成为作者 更多样书申请和资源下载需求，请登录人邮教育社区（) 囊括各大品类，您想要的应有尽有 教师免费申