利用表格制作网页
网页设计与制作(Dreamweaver)《插入网页基本要素之表格》
表格：用于设置表格的名称。 行和列：用于设置表格的行数和列数。 宽：用于设置表格的宽度，单位为“百分比”或“像素”。 填充：用于设置单元格中的内容与边框之间的距离。（单位：象素）(内边距)，在表格插入对话框称为单元格边距。 间距：用于设置单元格之间的距离，（单位：象素） 对齐：用于设置表格在网页中的对齐方式。
插入网页基本要素之表格
创建表格
在文档窗口的设计视图中，将插入点置于需要表格的位置， 单击“插入”菜单中的“表格”或单击 “常用”工具栏中 的“插入表格”按钮，设置行列数以及边框等。
单元格间距：用于设置表格中单元格之间的间距。 标题：把表格的第一行或第一列作为标题行或标题列，作为标题行或 标题列的行或列的内容将以粗体的形式显示。分别为无、左、顶部、 两者。即确定是否启用表格的行列标题。 摘要：用于描述表格的相关信息。
插入网页基本要素之表格
创建表格
在网页中插入表格后，可以向单元格中直接输入文本或插入其它的对 象，如图像、动画等，还可以向表格中插入嵌套表格。当然，用户也 可以从外部导入其它软件编辑的表格，如Excel电子表格等。
插入网页基本要素之表格
选择表格
①、选定表格：右击，选“表格”—“选定表格”将光标指向表格边框，单击鼠标，可以选择整个表
按钮。
插入网页基本要素之表格
插入网页基本要素之表格
设置调整表格属性
如果插入到网页中的表格不能满足网页设计的需要，可以通过设置表格的属性进行调整。选择要设置 属性的表格区域(可以是整个表格、一行或一列或一个单元格)后，在属性面板中设置。
静态网页制作教程 第三章 表格
4.给单元格和表格元素定义数据
使用<td>标记来建立单元格，并往其中添加 数据，它的用法与<th>标记的用法十分相似。
<table> <caption>个人资料</caption> <tr><th>姓名<th>居住地<th>职业</tr> <tr><td>张三<td>北京<td>学生</tr> <tr><td>李四<td>上海<td>工程师</tr> <tr><td>王五<td>深圳<td>老师</tr> </table>
第三章 表格
表格在对web页上的信息格式和布局进行控制 的较好方法，它定义格式化信息有着强大的功 能，能够控制各种信息的位置，使得页面结构 协调一致。
一.创建一个简单表格 二.定义单元格的高度和宽度 三. 控制表格的边框及边框线 四.创建跨单元格的存储格
在网页中，表格的运用是非常重要的技巧。 在html中，表格的建立主要就运用<table>、 <tr>、<td>、<th>四种标记来显示完成的
4.<th></th>：用于定义表格的标题存储格， 此存储格中的文字将以粗体的方式显示。
在一个最基本的表格组件中，必须包含 一组<table>标记，一组<tr>标记与一组 <td>标记。语法如下：
<table>
DreamweaverCS5网页制作第3章 使用表格布局页面PPT课件
3.1 表格的建立和编辑
3.1.4 实战演练：网站“行星大观”页眉导航部分制作
操作步骤： 6）光标移到第2行第1个单元格，在属性面板中设单元格的“宽”为270，“高”为24。鼠标 选中该行其它所有单元格，在属性面板中设单元格设为“宽”为100，水平、垂直方向均为 居中对齐。输入对应文字，如图所示。
（3）选取行或列 从一个单元格开始，拖动鼠标选中整行和整列的单元格，单元 格所在的行或列即被选中。或将鼠标停留在一行的左边框或一列的上边框，当选择行 或列的图标出现时，单击鼠标即可选择行或列。
3.1 表格的建立和编辑
3. 设定表格和单元格属性 （1）表格属性
当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板 修改表格的行数、列数、大小等属性。表格的属性面板如下图所示。其中行、列、 宽、高、填充（即单元格边距）、间距、边框在创建表格时已经介绍过。
3.1 表格的建立和编辑
2. 选取表格元素 （1）选取整个表格 将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表
格。或光标放在表格中时，点击菜单“修改”→“表格”→“选择表格”命令。也可以 将光标放在单元格中，在文档窗口的左下角的标签选择器中选择“Table”标签，选取 整个表格。
（2）选取单元格 将鼠标指针移动到某个单元格上，按住Ctrl键不放，再单击， 就可以选中这个单元格。按住Ctrl键，再逐个单击要选取的单元格，就可以选中不连 续的多个单元格。光标移到某个单元格中，按住Shift键鼠标点击另外一个单元格，则 这两个单元格之间的所有单元格将被选中，形成一个连续矩形区域。也可以通过鼠标 拖拽的方法可以选取连续的一片单元格。
3.1 表格的建立和编辑
3.1.1 案例制作：2006世界杯E组对阵表
利用表格制作网页
数学系09级（3）班杜强海20091022129利用表格制作网页实验目标该网页将利用设计页面的布局，制楚雄师院的页面简介。
通过该种制作，我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象，已达到自然，生动的配置构成元素的目的。
实验过程《1》在dreamweaver中执行《文件》中的《新建》命令，创建一个HTML文档。
然后在《文件》中保存该文档。
然后在《文档》工具栏的《标题》中输入“师院首页”。
然后单击《常用》工具栏的表格按钮，插入一个3行3列的表格，图1如图1所示。
<2>选中第2行表格的第2单元格。
单击属性面板中的合并所选单元格按钮，将其合并。
然后将指针置于第1行第1列单元格内在属性面板中将《宽》设为200，<高》设为30，如右图2所示。
《3》单击《常用》工具栏中的常用图像按钮，再打开的《选择图像源文件》对话框中选中一幅图片，单击《确定》按钮，为单元的插入一幅图片，如右图3所示《4》将鼠标指针移到第1行1列单元格内，在属性面板中将《宽》设为50，《高》设为30，单击《常用》工具栏中的图像按钮，打开《插入鼠标经过图像》对话框，如图4所示。
图3 《5》在打开的< 插入鼠标经过图像>对话框中，单击《原始图像》后面的《浏览》按钮.。
在打开的对话框中选中一幅图片，单击确定按钮，在单击《鼠标经过图像》后面的《浏览》按钮，用同样的方法选定一幅图片，如图5所示《6》设置完成后，单击《确定》按钮，然后同同第4,5步一样为第1行的第1,2列也分别设置鼠标经过图像。
然后将鼠标指针置于第一行第三列的单元格内，在《属性》面板中，为《宽》设为100，《高》。
设为50。
为《背景颜色》设为#333cc，如图6所示《7》将鼠标指针置于表格的第3行，按前面的方法，为第3行单元格也插入一幅图片。
然后将鼠标指针置图4 图2于表格的下一行，单击《常用》工具栏表格图标按钮，为文档在插入一个3行3列的表格，如图7所示。
应用表格布局网页结构
《应用表格布局网页结构》教学实录［作者：阜宁县明达中学姜秀菊来源：本站原创点击数：更新时间：文章录入：］知识与技能目标：、了解表格在网页设计中地作用.、掌握网页中表格地制作方法、表格属性地设置方法以及单元格地修饰与编辑方法，能够在单元格中正确插入文字和图片.、区分表格属性和单元格属性，并掌握属性地设置.、能够根据网页设计内容，正确布局表格地结构，掌握表格嵌套地设计方法.过程与方法目标：、利用对比学习，形成知识迁移地能力、通过用表格布局网页，进一步理解表格地作用、功能、通过对比学习与自主探究，了解并掌握软件学习地一般方法及规律，提升自主学习能力、通过任务驱动学会情感态度与价值观目标：、通过对用表格布局网页地学习，增强审美观，提高对学习网页制作地兴趣.、通过“保护动物”网站地制作，激发学生关爱动物、保护动物地责任感，从而进一步树立共同改善人类生存环境地意识.教学重点与难点：、重点.（）了解表格在网页设计中地重要作用.（）掌握插入、编辑表格地方法及表格地属性设置方法.（）掌握单元格地修饰属性地设置.、难点.表格地嵌套在网页设计地重要作用.教学准备：各自制作地站点文件夹，整理、归类相关素材并按要求摆放.教学过程一、导入：播放歌曲“一个真实地故事”，激发学生兴趣，与学生互动.师：这首歌里讲地是什么样地故事呢？生回答.一个姑娘救丹顶鹤地故事师：丹顶鹤，它是一种珍稀动物，同学们还知道哪些珍稀动物呢？是从哪里知道这些珍稀动物地呢？生抢答.扬子鳄，大鲵，金丝猴，丹顶鹤……师：很好，同学们知道地可真多啊，是从哪里知道这些珍稀动物地呢？生回答：书，报纸，网络……师：同学们知道，但是很多人不知道呢，更不知道人与动物要和谐相处，我们是不是有必要做些宣传.为保护珍稀动物尽一份力？生：对师：但是这么多珍稀动物在网页上应该如何分布呢？展示：两张素材相同布局不同地网页（动物——人类地朋友）.（然后将两个页面并排显示在投影上）提问：同学们，请大家比较一下这两个网页，相互之间可以讨论一下，那一个网页布局更合理，哪张较美观？较美观地那张网页是怎么布局地？（请学生回答，请坐.）【设计意图】展示作品，激发学生兴趣；引导学生发现问题，并学会分析问题.观察和比较两张素材相同布局不同地网页，分析布局网页页面地元素.这两个网页，通过比较会发现：一个是页面工整，文本、图片摆放对称且有一定规律，使用表格布局，但表格边框隐藏（看不出表格痕迹）；一个是页面凌乱，有图有文，摆放杂乱，提出问题，有什么办法可以达到第一个页面地效果？二、新授：、分析表格结构布局展示一些由表格布局地网页，引导学生分析其表格结构，自然过渡到书本例子（），分析结构，得出表格地布局（几行几列，哪些行做了哪些处理）.（）归纳：较美观地一组是利用表格来布局地.提问：谁能看出这张网页中所隐含地表格是几行几列地？展示：分析网页中所隐含地表格结构.（）学生讨论、交流，中表格地插入和编辑与中地表格操作雷同，教师无需讲解，引导学生知识迁移.任务一、学生操作：插入行一列地表格.、编辑表格并完成页面布局演示：进行插入表格和编辑表格（合并、拆分单元格）任务二、学生观察示范，学生与教师进行合并、拆分单元格地实践操作.、充实网页内容：任务三、在表格中插入图片、输入文字展示学生作品，引导学生发现表格页面中存在地问题，教师提出需要做哪些修改？学生回答：图片地大小，对齐方式，边框线、背景地设置.、表格嵌套生：图片调整后，其它单元格随之变化，如何解决这个问题？师：这就要用到表格地“嵌套”.【设计意图】这是本节课地重点，布局主要就是通过插入表格、表格嵌套、拆分单元格来实现地.让学生动手制作，体验表格地作用；以任务驱动形式自主学习，然后让学生自己发现问题，并解决问题，推动学生地探索意识和交流能力.教师讲解，表格嵌套地含义，并演示.任务四：表格嵌套，把第一和第二行地单元格各自合并后，分别插入表格.、调整表格属性，美化页面教师演示：表格、单元格属性地调整.任务五：表格属性以及单元格属性地编辑.调整图片大小、位置，设置单元格与表格属性.、表格属性地调整去除网格线、设置表格背景色等、使用不同地颜色区分各版块单元格属性地调整强调：鼠标右键快捷菜单.辅导：教师巡视各小组地实践操作练习，对特殊学生给予较多地个别辅导机会. 学生以小组为单位，进行“表格布局网页页面”地实践操作练习并进行交流展示.一般学生：模仿课本中例子完成一张网页地表格布局.优秀学生：自主设计网页地页面布局，教师给予一定地辅导.、保存、预览网页任务五：保存、预览网页，并互相评价、学习.、提高内容：请做地好地学生尝试做出拓展作业里地网页地表格布局.【设计意图】鼓励学有余力地学生自主探索；鼓励学生质疑，疑问是学生探索、创新地动力源泉三、作品地展示交流评价：（教师评价与学生评价相结合）展示表格页面制作完成地优秀作品，表扬完成任务地同学，对未完成地同学给予激励，鼓励他们利用中午以及下午放学时间抽空到机房继续完成.四、小结本节课我们学习了在中插入表格、编辑表格以及表格嵌套地基本方法.请同学们回答几个问题，并演示几个基本操作.在网页制作中，我们经常利用表格来布局和规划网页地版面.表格在网页制作中能很好地控制文本和图片，表格能让你地页面具有良好地易读性.利用表格地详细设置，你能创建符合页面需要地表格.五、教学反思信息技术课是一周上一节，网站地制作上过一次，学生对网页编辑工具和打开站点都已经生疏了，所以，在学生操作之前我先演示如何打开站点，这样学生就能快速地回忆原来地知识，上手比较快.《应用表格布局网页》是网站制作地第三课时.本节课地重点应该是首先让学生了解表格在网页设计中地作用，所以在课地一开始，我通过对比引入，加上复习回忆中地表格，了解表格地不同地功能，让学生明白表格地网页设计中地重要性.重点之二就是掌握网页中表格地制作方法及其基本编辑方法.中表格地制作方法与有很多相似之处，所以学生应该都是有表格制作地基础地，我运用了知识地迁移，适当地和学生一起回顾一下，这样可以使学生知道不同软件之间是有互通性地，突破以往满堂灌地形式.重点之三就是区分表格属性和单元格属性，并掌握属性地设置.这一部分主要是让学生知道打开对象属性地方法，掌握操作共性.表格属性和单元格属性参数地设置并不难，主要是让学生带着问题自己探索，从而区分表格属性和单元格属性.对于难点部分“表格地嵌套”，我让学生自己发现问题，先思考，然后教师解答并操作.这样学生就掌握了.最后通过拓展任务体现分层教学.考虑到学生地差异，本人还提供了学案加以辅导，学生地任务达成率比较高.在整个教学过程中时时引导学生去探索问题、解决问题，从而引动和维持学生学习地兴趣和动机.教学过程看起来比较多，但环环相扣，层层递进.本节课也有一些不足之处，一是学生还不习惯小组地合作，很多地同学自己忙自己地.在以后课堂中要想办法激发学生小组合作意识.二我高估了学生地基础，本应在上节课学会地东西，比如调整图片地大小等，学生并没有很好地掌握，所以导致部分同学表格不太好调整.应当适当地和学生回顾一下.三是可能对学生地要求过高，大部分地学生只能模仿课本地作品没有什么创新.如何能让学生将模仿和探究很好地结合，在模仿中创新，这将是我在以后地教学设计中要认真思考地问题.最后，我感到这次展评课地开设，对我是一次很好地锻炼，学到了很多.我会在不断地研究教材，研究学生，改进教学设计中提高自己.。
网页设计第9章Dreamweaver的表格和网页版面设计PPT课件
9.1 网页中的表格
9.1.4.5 调整表格大小和外观 ▪ 调整表格宽度或高度：选择表格，拖动选择框右边
或底边的控制点。 ▪ 同时调整表格的高度和宽度：选择表格拖动选择框
右下角的控制点。 ▪ 若要精确指定表格大小：选定表格，在属性检查器
的“宽”和“高”文本框输入数值，在其后的下拉 列表框选择值的单位。 ▪ 在表格的属性检查器中可以设置表格的背景颜色、 背景图像、边框颜色等等属性。
进入布局模式。如图。 ▪ 在布局模式里，“插入”栏的“布局”中有两个可
用的按钮,它们是“布局表格”按钮和“绘制布局单 元格”按钮。此时，标准模式下的“表格”按钮和 “绘制层”按钮均呈不可用状态。（在标准模式下， “布局表格”按钮和“绘制布局单元格”按钮是不 可用的）。
16
9.2 用表格布局网页
17
9.2.3 绘制布局表格 ▪ 在布局模式下单击“插入”工具栏“布局”类别中的“布局
表格”按钮，然后将十字形指针移至工作区，按住鼠标左键 拖动，即可绘制出一个布局表格。按住Ctrl键可连续绘制出 多个布局表格。
18
9.2 用表格布局网页
9.2.4 更改布局表格和布局单元格的属性 设置布局表格的属性——使用布局表格的属性检查器。 如图:
dreamweaverdreamweaver的表格和网页版面设计的表格和网页版面设计表格在网页中的作用表格在网页中的作用表格的创建与编辑表格的创建与编辑利用表格对页面进行布局利用表格对页面进行布局利用布局试图对页面进行布局利用布局试图对页面进行布局dreamweaverdreamweaver中框架的创建方法中框架的创建方法超链接框架目标的指定超链接框架目标的指定框架和框架页的基本操作框架和框架页的基本操作9191网页中的表格网页中的表格表格是现代网页制作的一个重要组成部分
用表格为网页布局
表格布局的优点
简单易用
01
表格布局简单直观，容易上手，适合初学者使用。
结构清晰
02
表格能够清晰地展示页面内容，使页面结构化，便于阅读和理
解。
兼容性好
03
表格布局在各种浏览器中都有较好的兼容性，不易出现排版问
用表格为网页布局
目录
CONTENTS
• 表格布局的基本概念 • 表格布局的常见应用场景 • 使用表格进行网页布局的技巧 • 表格布局的未来发展 • 表格布局的实例分析
01 表格布局的基本概念
CHAPTE种使用HTML表格元素 来创建网页布局的方法。它通过将页 面内容组织成表格形式，实现页面的 结构化和排版。
腾讯问卷表单制作
腾讯问卷表单制作使用表格来构建问卷的结构和问题选项。
表格布局使得问卷结构清晰，易于填写和提交，提高了问卷的完成率和准 确性。
腾讯问卷表单制作的表格布局还支持多种表单元素，如单选框、复选框、 文本框等，以满足不同问卷的需求。
谢谢
THANKS
数据展示
数据对比
表格是展示数据对比的理想方式，可以将不 同数据列进行比较，方便用户快速了解数据 之间的差异。
数据汇总
表格可以用于数据汇总，将大量数据按照一定规则 进行分类和整理，以表格形式呈现，方便用户查看 和分析。
数据可视化
通过使用颜色、字体、边框等样式属性，可 以将表格数据以可视化的方式呈现，提高数 据的可读性和易用性。
加载页面，提高用户体验。
淘宝网首页的表格布局还结合了CSS样式，实现了美观的页面效
03
果。
新浪微博数据展示页
应用FrontPage表格结构制作网页
应用FrontPage表格结构制作网页电脑技术2010-11-09 12:23:01 阅读51 评论0 字号：大中小订阅FrontPage课件的制作分为三个阶段：准备阶段、制作阶段和美化阶段，其中准备阶段又分为构思设计和素材准备二个方面。
一堂课的设计非常重要，所制作的网页要主题突出，美观大方，能反映本堂课的主要教学环节。
一、网页框架设计构思二、网页素材的准备在制作网页前，必须要准备好：音频、视频、图片、背景、flash动画、背景音效等。
三、网页的制作1、启动FrontPage 2003单击“开始”程序“Microsoft FrontPage”，打开“Microsoft FrontPage”窗2、FrontPage 2003界面FrontPage 2003是微软的产品，是Office XP中的一个组件，和大家经常使用的Word有类似的界面和操作。
用FrontPage编写网页就像用Word写文章一样简单。
上部是菜单栏、工具栏，下面左边是视图区窗口，里面有六个按钮，代表六种不同的功能，它大大地方便了我们对站点和网页的制作和管理。
占屏幕大部分空间的是我们的工作区，所有的页面编辑都在其中完成。
其中的主要功能将在接下来的介绍中分别阐述其使用方法。
3、制作过程（一）绘制表格点击文件--新建网页--普通网页--确定--插入表格--右键表格属性--边框粗细设为0--确定---选中一行--右键--合并单元格—命名为index（二）文字的处理（1）输入文字---选中文字---右键--字体修饰（2）对于艺术字，可以利用WORD软件编写，再进行复制，粘贴到网页上（三）悬停按钮的添加方法：插入--组件--悬停按钮属性--输入名称、编辑字体、颜色等（四）滚动字幕的处理插入--组件--字幕--文本框中输入文字--点击左下角的样式按钮--点击左下角格式按钮--格式的处理--确定（五）图像的处理【创建图像】指针移到插入位置--插入---图片--来自文件—选择图片--确定【处理图片】：在图片上点击左键，出现图片浮动框（1）插入文件中的图片：插入新图像替代选中的图像。
第15课 用表格为网页布局
第15课用表格为网页布局一、教学目标认知目标：让学生学会插入表格，修改表格属性过程与方法：用学生提问教师引导的互动方式，和学生探究结合情感态度和价值观：培养学生灵活运用所学的信息技术知识去创设新的用法二、重点难点教学重点：本课的教学重点是插入表格和更改表格属性。
教学难点：本课难点是让学生灵活掌握排列表格和设置表格属性的方法。
三、环境与素材1．教学环境：多媒体网络教室，学生计算机中安装IE5.0以上版本及Fron tpage2000以上中文版，要求最好能上因特网。
2．教学素材：准备好一些具有代表性的版面设计优美合理的网站主页面作为参考；四、教学过程（一）课前谈话：（在上课之前完成）该游戏结束后再喊上课！教师：同学们，你们好，我听说你们都很聪明，你们能不能回答老师几个问题呢？脑筋急转弯：两条腿的猫是什么猫？答：机器猫！问：两条腿的狗是什么狗？答：史怒比！问：两条腿的老鼠是什么鼠？答：米老鼠！问：两条腿的鸭是什么鸭答：唐老鸭？？？鸭都是两条腿？？）学生可能哈哈大笑。
教师总结：不要让以前的思维定势影响你对一个事物的判断，我们今天学习的frontpage中的表格正是这种情况，前面我们是在word学习表格，是用来规类信息的，今天这节课的表格是用来排版布局。
上节课我们已经了解了frontpage的一些常规操作，建立了我们的家――网站站点文件夹、图像文件夹。
那么，今天呢，我们就一起在frontpage中为我们的网站搭建框架。
（二）新授课：1、拼图游戏导入新课课件出示一幅还没有完成的拼图游戏。
师：这是我们小时候都玩过的拼图游戏，老师已经把图片都放在××目录下了，同学们能不能在网页里把这些图片碎片摆成完整的画面？请学生发言生：不能回答或者说：插入图片教师布置任务：给同学们3分钟时间，打开frontpage在里面试着完成，当老师的音乐停止的时候，请你们停下来好吗。
（播放音乐，可以选择比较紧张快节奏的音乐）根据学生回答，让学生尝试。
运用表格制作网页
运用表格制作网页教学设计苏尚闻一、教学目标1．知识与技能熟悉表格在网页编辑中的作用；掌握用菜单命令和工具按钮插入表格的方法；学会用菜单命令、快捷菜单命令、鼠标操作等不同的方法对表格进行编辑。
2．过程与方法通过知识迁移，培养学生利用已学过的知识进行自主学习的能力；通过比较表格在FrontPage中与在Word中的功能，培养学生观察、思考、总结的能力；利用表格使网页布局合理、美观，从而让学生对网页制作更有兴趣。
3．情感态度价值观培养学生独立思考、自主学习、合作讨论的能力，通过自己探究问题，进一步树立学生学习信息技术的自信，提高学生学习网页制作的兴趣。
二、课时安排1课时三、教学重点与难点重点：表格在FrontPage中的作用；表格的插入与编辑；“表格”的菜单命令。
难点：表格属性、单元格属性。
四、教学准备三个页面：一个是用表格存放文本、图片的页面，表格边框隐藏，页面美观；一个是表格边框未隐藏的页面；一个是上节课制作的有图有文但没有表格的页面。
五、教学方法任务驱动法六、教学过程（一）教学表格的插入1、直觉判断（1）观看两个页面进行比较：一个是用表格存放文本、图片，表格边框隐藏，页面美观；一个是上节课制作的页面，有图有文但没有表格的页面。
提出问题，学生讨论，有什么办法可以达到第一个页面的效果？（2）观察第三个页面（用表格存放文本、图片，但表格边框未隐藏的网页），告诉学生其实有一种方法很简单，而且利用的是在学习Word时用过的一种工具，这就是表格，但是在FrontPage中表格的作用比Word中作用更大了。
2、任务驱动、知识迁移、观察总结布置任务1：回忆过去学Word时是如何插入一个3行2列的表格的，尝试一下在FrontPage中是不是可以用同样的方式插入这样的表格。
并仿照刚才观看的第三个页面将“我的第一个网页”进行修改。
遇到问题可查阅书上“插入表格”的步骤。
小组讨论总结FrontPage中的表格比Word中有了什么更大的作用。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《3》然后单击下一行这个按钮，找到在《本地进行编辑和测试》这个按钮，点击它。然后找到将把文件存储在计算机上的什么位置?图1
这个按钮,然后点击浏览，找到我所新
那个文件，如图3所示
ＣSS规则》对话框。按照图13设置后,单击《确定》按钮，弹出《X1的规则定义》对话框。ﻩ上》
《14》在《X１规则定义》对话框中,将《文字》设为宋体，《大小》设为１2像素,，《样式》设为正常，＜行高>设为26像素,其余不变.单击<确定>按钮,在编辑窗口选中输入的文字，右击,在弹出的快捷菜单中执行《
CSＳ样式》的x1命令,为文字应用css样式，
如图14所示ﻩ
图14
《1５》将鼠标指针置于第7步插入的3行2列
表格的下一行，然后按下ctrl+Ａlt+T组合键
打开《表格》对话框,其中的设置如图１5所示
设置完毕后,单击《确定》按钮,为网页插入表格
《１6》选中上一步插入的表格，在属性面板中，将
《背景颜色》设为#９９FＦ66。将鼠标指针设置于第1行单元格内,在属性面板
18所示，设置好后，单击《确定》按钮。
弹出《x2的规则定义》对话框，将《大小》
设为19像素，《样式》设为正常,《行高》
设为20像素,《颜色》设为,其余
不变。设置完毕后,单击确定按钮
《1９》在编辑窗口选中输入的文字,右击
在弹出的快捷菜单中执行《css样式》的《ｘ2》
命令，为文字应用ｃsｓ样式。按下ｃtrｌ＋ｓ组合
利用表格制作网页
———————————————————————————————— 作者：
———————————————————————————————— 日期:
数学系0９级(3)班 杜强海200910221２9
利用表格制作网页
实验目标
该网页将利用设计页面的布局,制楚雄师院的页面简介。通过该种制作,我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象,已达到自然,生动的配置构成元素的目的。
打开《表格》对话框，其中的设置如图８所示。设置
好后，单击《确定》按钮，给单元格插入嵌套表格。
《9》选中插入的嵌套表格在属性面板中将《对齐》
设置为剧中右对齐。然后将鼠标指针置于嵌套表格第一行中,按照前面的方法，为其插入一幅图片。同样的，为其第2,3,4,5列也分别插入图片。图6
ﻩ图６
图8
图7ﻩ
《10》在属性面板中,将第6列单元格的《高》
设为5０，再将鼠标指针置于第７列，为其插入一幅图片。单击《状态栏》中的《taｔlｅ》标签,选中第7步插入的3行３列的表格，在属性面板中,为《背景颜色》设置为#0０99６6,如图10所示。
图10
ﻩ
ﻩ图9
《11》将鼠标指针置于7步插入表格的第2行２列中，
在属性面板中，将《垂直》设置为顶端。打开《表格》
对话框,其中的设置如图１1所示。设置完后，单击《确定》
图3
《5》在打开的<插入鼠标经过图像>对话框中,单击《原始图像》后面的《浏览》按钮.。在打开的对话框中选中一幅图片,单击确定按钮，在单击《鼠标经过图像》后面的《浏览》按钮，用同样的方法选定一幅图片，如图5所示
《6》设置完成后,单击《确定》按钮，然后同同第４,5步一样为第1行的第1，2列也分别设置鼠标经过图像。然后将鼠标指针置于第一行第三列的单元格内,在《属性》面板中,为《宽》设为100，《高》。设为5０。为《背景颜色》设为#３33ｃc，如图6所示
中，将《水平》设为右对齐，然后为该
单元格插入一幅图片，如图16所示
《17》将鼠标指针置于定2行单元格内，
在属性面板中,将《格式》设为段落,《水平》设为右对齐,然后输入师院信息。在网页中右击,在弹出的快捷键菜单中执行《cｓs样式》的《新建》命令
弹出《新建ｃsｓ规则》对话框。
《1８》《新建css规则》对话框的设置如图
实验过程
《1》在dreaｍweａver中执行《文件》中的《新建》命令，创建一个HTML文档。然后在《文件》中保存该文档。
然后在《文档》工具栏的《标题》中输入
“师院首页”。然后单击《常用》工具栏
的表格按钮,插入一个３行3列的表格,图１
如图１所示。
<2>选中第2行表格的第2单元格。单击属性面板中的合并所选单元格按钮，将其合并。然后将指针置于第１行第1列单元格内在属性面板中将《宽》设为200，＜高》设为３０，如右图２所示。
《４》然后在单击下一步按钮,将会出来如图4所示的对话框，然后点击《否》这个按钮。
《5》然后再单击下一步这个按钮，就得出如图5所示的对话框
《６》然后单击下一步按钮图2
就得到如图6所示的对话框，然后再进行测试一下即可。
《7》在单击下一步按钮,就
建立了如图６所示的站点
ﻩ
《3》单击《常用》工具栏中的常用图像按钮，再打开的《选择图像源文件》对话框中选中一幅图片,单击《确定》按钮,为单元的插入一幅图片,如右图3所示
《4》将鼠标指针移到第1行1列单元格内,在属性面板中将《宽》设为5０,《高》设为30,单击《常用》工具栏中的图像按钮，打开《插入鼠标经过图像》对话框,如图4所示。
《7》将鼠标指针置于表格的第3行,按前面的方法，为第3行单元格也插入一幅图片。然后将鼠标指针置于表格的下一行，单击《常用》工具栏表格图标按钮,为文档在插入一个3行3列的表格,如图7所示。
《8》将鼠标指针置于插入表格的第1行第１列中,
在属性面板中将《宽》。设为120,然后将鼠标指针
置于第1行第1列单元格内,按下Ctrl＋Alｔ+t组合键,
保存文件,按下Ｆ12键预览在IＥ中。
ﻩ图1６
创建一个本地站点
ﻩ实验目标
建立一个站点，要把所有的站点文件保存在建立的根目录中,然后将所做的网页保存在所建的站点中。
实验过程
《1》在drｅamｗeａveｒ中执行《站点》中打开《新建站点》命令,，将弹出《未命名站点１的站点定义为》对话框。然后在《基本》选项卡里输入站点名称。
按钮，为单元格插入嵌套。ﻩ
《12》在上一步插入表格的属性面板中,将对齐方式设为居中对齐，将鼠标置于该表格的第2行,按下cｔrｌ＋alt+Ｉ组合键，在打开的对话框中选择一幅图，单击确定,为单元格插入图片。在该单元格的属性面板中,单击居中对齐按
钮，将图片居中,如图１2所示
《13》将光标置于下１列单元格,输入文字。在网页中右击,在弹出的快捷键菜单中执行ﻩ《ＣSS样式》的新建命令，弹出《新建