网页设计与制作教学资料 项目2 表格的运用.docVIP

项目2 表格的运用（理论部分2课时） 回顾 什么是网站、网页？ Dreamweaver CS3界面主要包括哪几部分？ 如何创建本地站点？ 如何实现文本格式化？ 网页：网页其实就是一个用来传输各种信息的文件，能在网上传输并被浏览识别和翻译成页面，然后显示在浏览者面前。 网站：通俗的理解，网站就是许多网页的集合，将这些网页以一定的相互关系链接起来，就成了一个网站。 网站开发工具Dreamweaver CS3界面各个部分的作用是什么？ 文档工具栏上提供了“代码视图”、“拆分视图”、“设计视图”3种视图选择，还可以设置网页标题，以及“在浏览器中预览/调试”等其它操作功能。 插入栏包含了用于插入网页中各种元素的按钮，集合了“常用”、“布局”、“表单”、“数据”、“Spry”、“文本”、“收藏夹”等类别 。 “文档”窗口底部的状态栏提供与正创建的文档有关的其它信息。 属性检查器主要用于设置网页中各个元素的各种属性。所选择的对象不同，属性检查器所显示的内容也不同。在以后的内容中将会根据不同情况进行具体讲解。 组合在一个标题下面的相关面板的集合，包含“CSS”面板、标签检查器面板、文件面板等。 如何实现文本格式化？ 在属性检查器上设置对应的参数。 任务 制作淘宝首页的公告栏 制作淘宝首页的布局 制作拍拍的商品列表页 制作拍拍首页的布局 目标 会绘制简单的表格 会制作跨行、跨列的复杂表格 会使用表格设计较简单的页面布局 重点 如何使用表格的格式化 如何嵌套表格 掌握网页布局步骤 如何创建表格进行布局 难点 表格的布局 理论案例1—淘宝公告栏 完成案例： 淘宝公告栏 涉及的知识点： 插入表格 插入背景图像 嵌套表格 完成效果 插入文本 理论1—插入表格 讲解： 表格的基本结构 ：行、列、单元格 插入表格的方法： 选择菜单“插入记录”à“表格”命令 选择插入栏的“布局”或“表格”类别中的“表格”按钮 表格常用属性介绍 理论2—单元格的拆分与合并 讲解： 单元格的拆分 单元格的合并 操作步骤： 插入表格 合并单元格 理论3—表格美化格式的设置 讲解： 表格格式化的属性 嵌套表格的使用 插入内容 操作步骤： 表格格式化处理 插入内容，完成案例1 理论案例2—淘宝首页布局 完成案例： 淘宝首页布局 涉及的知识点： 插入表格 表格的格式化 嵌套表格 理论1—页面布局的概述 讲解： 网页布局意义 网页布局原则 条理清晰 主次分明 色彩对比度适当 布局疏密适当 网页布局的步骤 构思 初步布局 填充内容 以淘宝网首页为例 细化布局、内容 理论2—常见的网页布局形式 讲解： “上左右”型布局 “上左中右”型布局 对称布局 pop布局（海报布局） 不规则布局 操作步骤： 制作Body部分 制作Main 部分 细化Main 部分 完成案例 总结 表格的用途主要是什么？ 制作表格页面的主要步骤什么？ 插入表格的两种方法是什么？ 表格布局的主要步骤有哪些？ 项目2 表格的运用（上机部分2课时） 理论回顾 表格有哪些用途？ 表格的格式化包含什么？ 表格布局的应用 上机目标 拍拍首页布局 拍拍商品展示页 实练案例1－拍拍首页布局（30分钟完成） 需求描述 拍拍首页布局 实现思路 插入表格 应用拆分、合并和嵌套生成各个模块的布局 共性问题集中讲解 实练案例2－拍拍商品展示页 （30分钟完成） 需求描述 拍拍???品展示页 实现思路 插入表格 应用拆分、合并和嵌套生成各个模块的布局 共性问题集中讲解