DreamweaverCS5网页制作第3章 使用表格布局页面PPT课件

第4章 制作表格布局的网页

表格是常用的页面元素之一，制作网页时经常借助表格进行布局，通过设置表格及单元格的属性，对页面中的元素进行准确定位，灵活地使用表格的背景、边框等属性可以得到更加美观的效果，表格还能有序地排列数据。

【教学导航】

教学目标 （1）学会正确地插入表格，并合理地设置表格的属性

（2）学会正确地在表格中插入嵌套表格，并合理地设置嵌套表格的属性

（3）掌握单元格的合并、拆分、插入和删除的操作方法

（4）学会正确地设置表格中行和列的属性

（5）学会正确设置表格、单元格的背景图像和背景颜色

（6）学会正确地在表格中输入文字并定位

（7）学会正确地在表格中插入图像并定位

（8）学会正确地在表格中插入flash动画并定位

（9）了解设置滚动文本效果的方法

（10）了解网页文件头内容的设置方法

本章重点 （1）插入表格、设置表格的属性

（2）合并或拆分单元格

（3）设置表格、单元格的背景图像和背景颜色

（4）在表格中输入文字、插入图像和flash动画

本章难点 （1）在表格中插入嵌套表格，并设置嵌套表格的属性

（2）设置滚动文本效果

（3）设置网页文件头内容

教学方法 任务驱动法、分组讨论法、三步训练法

课时建议 6课时（含课堂同步训练）

4.1 课前准备

（1）在本地硬盘创建文件夹

（2）启动Dreamweaver CS3

通过Windows的【开始】菜单或桌面的快捷方式启动Dreamweaver CS3。

（3）创建名称为“江湖游”的本地站点

（4）新建一个网页文档

应用【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“index0401.html”的网页文档。

（5）设置网页标题 Dreamweaver CS3网页制作案例教程

74 （6）保存该网页。

4.2 课堂引导训练及评价

【课堂引导训练任务描述】

1、网页制作任务卡

网页制作任务卡如表4-1所示。

表4-1 网页制作任务卡

Dreamweaver网页制作教案

第一章：Dreamweaver概述

1.1 课程介绍

了解Dreamweaver作为网页制作工具的优势

熟悉Dreamweaver的工作界面

1.2 创建和管理网页

创建新文档

打开和保存网页

管理标签库

1.3 实践操作

制作一个简单的网页

学会使用Dreamweaver的实时视图和代码视图

第二章：网页基本结构

2.1 网页元素

文本

图像

表格

表单

2.2 排版和格式化

字体和大小

颜色和样式

段落对齐和间距 2.3 实践操作

制作一个包含文本、图像和的网页

学习使用Dreamweaver的排版和格式化工具

第三章：CSS样式

3.1 CSS介绍

了解CSS的作用和优势

熟悉CSS的基本语法

3.2 创建和应用CSS样式

创建样式表

应用样式到网页元素

编辑和删除样式

3.3 实践操作

制作一个使用CSS样式的网页

学习使用Dreamweaver的CSS面板

第四章：网页布局

4.1 布局技术

表格布局

CSS布局

框架布局

4.2 常用布局方法

固定布局

可变布局 响应式布局

4.3 实践操作

制作一个使用表格布局的网页

学习使用CSS布局和响应式布局

第五章：表单和交互

5.1 表单元素

表单标签

输入框

选择框

文件

5.2 验证和提交表单

表单验证方法

提交表单到服务器

接收服务器返回的数据

5.3 实践操作

制作一个简单的表单页面

学习表单的验证和交互功能

第六章： Dreamweaver 网站管理

6.1 网站结构规划

了解网站结构的重要性

学习如何规划网站结构

熟悉网站的目录和文件组织方式 6.2 站点设置和管理

创建和定义站点

管理站点文件和目录

更新和网站文件

6.3 实践操作

规划并创建一个简单的网站结构

配置和管理 Dreamweaver 站点

第七章： Dreamweaver 模板和框架

7.1 模板的概念和应用

理解模板的作用

第4章 应用表格

在浏览网页时可以发现，网页特别是首页的版面就像报纸排版一样，被划分成了很多区

域和版块，而且非常的精美。那么在网页制作中，使用什么方法可以实现区域和版块的划分

呢？表格（Table）是网页排版的灵魂，是页面布局的重要方法，它利用行、列、单元格来

定位和排列页面中的各种元素，从而使页面更加有条理、更加美观。

【学习目标】

 掌握表格的3种创建方法。

 掌握表格属性的设置方法。

 掌握单元格属性的设置方法。

 掌握不规则表格的设计方法。

 掌握表格布局的操作方法。

4.1 应用表格排版网页

表格通常由标题、行、列、单元格、边框组成，如图4-1所示。标题位于表格第一行，

用来说明表格的主题；表格中的每一个格就是单元格；水平方向的一系列单元格组合在一起

就是行；垂直方向的一系列单元格组合在一起就是列；边框是分隔单元格的线框。

图4-1 表格的组成

4.1.1 表格的基本操作方法

在Dreamweaver CS5中对表格的基本操作包括插入表格、插入嵌套表格、设置表格和

单元格的属性、添加与删除行和列、单元格的拆分与合并等操作。下面将以设计“666

招聘标题栏

单元格

边框 行

列 Dreamweaver CS5中文版基础教程

82网”网页为例来讲解表格的基本操作，设计效果如图4-2所示。

一、 创建表格

1. 运行Dreamweaver CS5，打开本书附盘文件“素材\第4章\666招聘网\index.html”，如图4-3所示。

图4-2 设计“666招聘网”网页 图4-3 打开素材文件 2. 将光标置于主体部分的空白文档中，然后选择菜单命令【插入】/【表格】，打开【表

格】对话框，设置【行数】为“25”，【列】为“5”，【表格宽度】为“98%”，【边框粗

细】为“1”，【单元格边距】、【单元格间距】都为“0”，如图4-4所示。 创建表格的快捷键为“++”。 3. 单击按钮，即可在文档中插入一个25行5列的表格，如图4-5所示。

2009年全国技工教育和职业培训优秀教研成果评选活动参评教案

《一个简单网页的制作》教案参评组别：B组专业分类：计算机与信息技术课程名称：网页设计与制作课 题一个简单网页制作学 时2学时教学设备多媒体备课时间9.26授课时间知识目标学习制作网页的基本方法，掌握网页制作的一些技术和方法，能制作一个简单的网页。能力目标培养学生自学、合作学习和动手能力。学生通过亲身经历，提高分析和解决实际问题的能力。教学目标

情感目标培养学生与他人协作的能力，加强集体主义的观念；培养学生审美能力、创新能力。教学重点网页制作中的各种元素及其制作技术和方法教学难点站点的创建教学方法任务驱动法、讲授法、演示法、操作实践法、分组讨论法【教学过程及设计思想】教学环节教师活动学生活动设计思想时间

新课导入随着网络技术的发展和Internet的普及，我们通过浏览网页可方便地获取信息，在浏览器中所看到的每一幅画面都是一个网页，这些网页色彩丰富，内容充实，个性鲜明。那么我们自己能不能制作出具有自己风格的网页，并在网上发布，以便进行广泛的信息交流呢？学生回答老师所提问题设疑引入本课主要内容，激发学生的求知欲。约5分【教学过程及设计思想】教学环节教师活动学生活动设计思想时间

布置任务[任务一]通过展示新浪网站的主页，由同学从网站或者是课本中获取网站知识，提出关于网站的几个概念。

网页的概念? 超链接标志? 主页？[任务二]开始制作网页前的准备在开始网页制作之前，首先确定网站的主题，根据主题需要有多少网页表现，以及网页之间的链接方式，需要哪些素材？怎么收集？教师总结搜集的办法有哪些[任务三]创建站点创建站点是难点，教师先讲解。学生仔细观察，认真学习、思考，完成并回答老师所提问题。布置任务，以探索问题来引导和维持学生学习的兴趣约15分

新课学习

难点讲解教师讲解创建站点的步骤：[第一步]在Dreamweaver窗口中， 单击“站点”菜单→“新建站点”命令； [第二步]在“空站点名称”框中输入所建站点名称；然后在“本地根文件夹”框中输入保存网页的文件夹的路径和名称，本例输入“D：\北京故宫”；[第三步]单击“确定”。1、学生认真听老师的讲解及操作，自己完成空网站的创建。2、各小组协作。重点、难点由教师讲授提高学生的学习效率，和学习质量。约25分【教学过程及设计思想】教学环节教师活动学生活动设计思想时间