网页设计之如何插入表格.

怎么使用dreamweaver制作网页教程 dw建站设计网页Dreamweaver是一款专业的网页制作软件，被广泛应用于网页设计师的日常工作中。

它是一款视觉化网页开发工具，可以轻松制作出跨越平台和浏览器限制的充满动感的网页。

在本文中，我们将为您介绍如何使用Dreamweaver制作网页。

一、定义站点1.在任意一个根目录下创建一个文件夹（例如E盘），并为其命名（例如MyWeb）。

2.打开Dreamweaver，选择“站点-新建站点”，在对话框中输入网站名称和本地根文件夹路径（E:web），然后确定。

此时再次打开Dreamweaver，会自动找到刚才设立的站点。

二、创建页面1.在本地文件夹E:\MyWeb下，右键点击空白处，选择“新建文件”，建立一个页面。

默认的文件名为untitled.htm，将其改名为index.htm。

2.双击index.htm进入该页面的编辑状态。

在标题空格里输入网页名称，按右键选页面属性，打开“页面属性”窗口。

在这里可以设置网站的标题、背景颜色或背影图像，超级链接的颜色（一般默认即可），其他都保持默认即可。

3.在页面中添加文字，可用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间。

4.如果需要选取字体，则选择字体中的最后一项“编辑字体列表”，在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。

三、为页面添加图片在页面中添加图片，可用菜单“插入/图片”，选择本地图片路径，然后将其拖拽到页面中即可。

Dreamweaver是一款非常强大的网页制作软件，通过本文的教程，相信您可以轻松上手制作出精美的网页。

1、在本地文件夹E:\MyWeb下新建文件夹，用于存放图片，可更名为tu、pic或images。

2、打开对象面板，选择“插入图像”，在对话框中选择要插入的图片。

若出现对话框“是否将该文件复制到根文件夹中？”，需选择“是”，并保存到刚建立的文件夹中。

数学系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所示。

Dreamweaver是Adobe公司推出的一款网页制作软件，它广泛应用于网页设计和开发领域。

在Dreamweaver中，表格标记是网页设计中常见的一种元素，它可以用于展示和组织网页上的各种信息。

在这篇文章中，我将介绍在Dreamweaver中使用表格标记的基本结构，希望能帮助读者更好地掌握这一技巧。

在Dreamweaver中，表格标记的基本结构包括表格标签、行标签和单元格标签。

下面我将逐一介绍它们的用法：1. 表格标签在HTML中，表格使用`<table>`标签来定义，其中包括表格的基本属性和整体样式。

在Dreamweaver中，可以通过插入菜单或者直接手动输入`<table>`来插入一个表格标签。

表格标签中可以设置一些基本属性，如边框宽度、背景颜色等。

也可以设置表格的尺寸和对齐方式等属性。

2. 行标签在表格中，使用`<tr>`标签来定义每一行，`<tr>`标签必须包含在`<table>`标签内部。

通过插入行标签，可以在表格中添加新的行，每一行中可以包含若干个单元格。

在Dreamweaver中，可以通过插入菜单或者直接手动输入`<tr>`来插入一个行标签。

3. 单元格标签在每一行中，使用`<td>`标签来定义每个单元格，`<td>`标签也必须包含在`<tr>`标签内部。

通过插入单元格标签，可以在表格中添加新的单元格，并在其中填充文本、图片或者其他元素。

在Dreamweaver 中，可以通过插入菜单或者直接手动输入`<td>`来插入一个单元格标签。

在适当的情况下，也可以使用`<th>`标签来定义表格中的表头单元格，它和`<td>`标签的用法类似，但是会显示为加粗的文本，以示区分。

通过以上介绍，我们可以看到，在Dreamweaver中使用表格标记的基本结构是通过`<table>`标签定义整个表格，然后在其中添加`<tr>`标签和`<td>`标签来定义行和单元格。

课程教案项目效果【任务一】布局主页 index.html——表格的基本应用所谓表格（Table）就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在XHTML语言中以<tr>标签开始，</tr>标签结束），垂直的多个单元格称为列（以<td>标签开始，</td>标签结束），如图5—1所示。

行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。

（一）插入表格Dreamweaver CS3提供了非常完善的表格编辑功能，首先介绍如何在网页文档中插入表格。

步骤 1 首先在文档页面上要插入表格的位置单击，以确定插入点位置。

步骤 2 单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格，如图所示。

下面简单介绍一下“表格”对话框中几个重要选项的意义。

●表格宽度（Width）：设置表格宽度值，否则，其宽度将随其中的内容而改变。

●在Dreamweaver中，最常使用的单位是像素和百分比。

像素使用0或大于0的整数表示；百分比是相对于浏览器而言的，使用 0 或百分比表示。

●边框粗细（Border）：是指整个表格边框的粗细，标准单位是像素。

整个表格外部的边框叫外边框，表格内部单元格周围的边框叫内边框。

●单元格边距（Cell padding）：也叫单元格填充，是指单元格内部的文本或图像与单元格边框之间的距离，标准单位是像素。

●单元格间距（Cell spacing）：是指相邻单元格之间的距离，标准单位是像素。

（二）选择表格和单元格在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。

当表格外框显示为黑色粗实线时，就表示该表格被选中，另外，还可以通过“标签选择器”选择表格。

具体做法是：在表格内部任意处单击鼠标，然后在“标签选择器”中单击对应的“<table>”标签，该表格便处于选中状态。

竭诚为您提供优质文档/双击可除dw如何在div中插入表格篇一：dreamweaver8系列diV+css教程表格一列布局一列布局web标准(div+css)》的一列布局，包含以下几种形式：一列固定宽度一列固定宽度居中一列自适应宽度一列自适应宽度居中一列二至多块布局前一节我们回顾了xhtml基础和css基础部分，今天我们正式开始使用网页制作软件——adobe公司出品的dreamweaver来开始网页设计之旅。

相信之前您已经用过这个软件了，具体怎么使用我就不讲了。

为了照顾部分朋友，今天课程的css部分我们是以可视化生成方式，不过建议大家能手写的尽量还是手写，这样有助于提高效率。

一、一列固定宽度我们先看一下一列固定宽度，首先要新建一个页面：注意：这里的文档类型是过渡型，目前我们采用这种宽松验证方式。

接下来在页面中插入一个div标签，我们可以点击工具栏的“插入diV标签”按钮，在打开的对话框中id项给这个div命一下名，我们给它起个名叫layout（名称根据自己需要命名）。

插入div后，在右侧的css样式面板中，定义id为layout 的样式，确定后在打开的css编辑对话框的方框选项中设计宽度500，高度300。

为了看清楚起见，我们把这个div设置个背景色，这样就能预览出大小和位置了。

这里选择高级，然后在选择器中填写：#layout，如果是选中div后，再点击添加，它会自动添加上。

因为是定义id，所以前面需要加#，后面会有id和class的详细讲解的margin:auto;时，可以让这个盒模型居中。

我们下边在css样式表中加上这个属性看看效果：#layout{height:300px;width:400px;background:#99FFcc ;margin:auto;}在dreamweaver的设计视图中我们选中看看，是不是已经居中了，我们再在ie下预览一下，同样居中。

篇二：如何用dw创建表格一、创建基本的表格一个表由＜table＞开始，＜/table＞结束，表的内容由＜tr＞,＜th＞和＜td＞定义。

2021《网页设计与制作》习题库及答案《网页设计与制作》习题及答案1一、选择(1)通过( C )，可以对一个网页的名称、网页背景、网页链接文字属性、网页边界等进行设置。

A、站点管理窗口B、对象面板C、页面属性窗口D、属性面板(2)在网页的空白处点击鼠标右键，在弹出的快捷菜单中选择“页面属性”或按( A )快捷键打开“页面属性”窗口。

A、【Ctrl+J】B、【Ctrl+T】C、【Ctrl+L】D、Alt+J(3)通过( A )旁边的颜色按钮，可以选取一种颜色作为链接文字在鼠标按下时的颜色。

A、活动链接B、链接C、访问过的链接D、文本(4)样式定义类型中的(A )主要用来作背景色或背景图片的各项设置。

A、背景B、区块C、列表D、扩展(5)主要用来作页面上的文字段落或图片的放置位置的设置。

(C)A、盒子B、边框C、区块D、定位(6)CSS样式表只能工作在(A )及以上版本的浏览器中。

A、3.0B、4.0C、3.5D、2.0(7)(A )几乎可以控制所有文字的属性，它也可以套用到多个网页，甚至整个网站的网页上。

A、CSS样式B、HTML样式C、页面属性D、文本属性面板(8)几种CSS方式各有用途，在统一整个站点风格上，用(A )方式。

A、外部文件式B、内嵌入式C、独立式(9)外部CSS样式文件的引用是通过(B )来实现的。

A、新建样式B、附加样式C、编辑样式D、自动应用(10)CSS样式表存在于文档的( C)区域中。

A、HTMLB、BODYC、HEADD、TABLE二、填空题(1)页面属性如果设置不理想，可以通过( 取消)按钮，恢复到这之前设置保存过的状态。

(2)如果文本属性面板没有在界面上出现，可通过选择主菜单“窗口”/“属性”命令或使用( ctrl+f3 )快捷键调出来。

(3)如果使用表格进行页面布局，通常将边框宽度设为( 0 )。

(4)单击( 合并所选单元格，使用跨度)按钮将选定的单元格、行或列合并为一个单元格。

将素材图片复制到images文件夹下，将css_chapter6.css复制到future文件夹中。

（一）创建表格并合并、拆分表格1．在future文件夹下新建index6.html，双击打开该网页。

设置如下的页面属性。

2. 选择菜单栏中的“插入记录”—“表格”，插入如下的表格。

（也可用工具栏中的相关选项）。

3．按上述的方法插入1行3列，2行2列和3行1列的表格。

4．把上述创建的第三个表格（如下图所示），通过拆分和合并单元格制作出如下形式的表格。

步骤：选中第一列的单元格，将其合并为一个单元格，并调整合并后的列宽为120像素。

如下：将光标放在第2列、第1行的单元格中，将其拆分为两个单元格。

结果如下：（二）在表格中插入页面元素5．在第一个表格的第一行单元格中插入img6_1.jpg图片，如下所示。

在第一个表格的第二行单元格中插入一个内嵌的表格（导航条表格），相关参数如下：依次在该单元格中输入如下文字（可从txt6.txt中复制过来）并为导航条中相应的文本添加超链接。

如下图：6．在第二个表格中插入页面元素。

在第1个单元格中插入img6_login.gif图像，在第2个单元格中插入“用户登录”表格（由ex6_login.html提供），在第3个单元格中插入如下的表格并在该表格的第1个单元格中插入img6_inform.gif图像，在第2个单元格中添加相应的文本。

如下图。

7．在第三个表格中插入页面元素a.在第1列的单元格中插入如下的表格。

在第1行的单元格中插入img6_6.gif，在第2行的单元格中插入一个内嵌的表格，参数如下。

在其左侧的各个单元格中插入img6_icon.gif，在右侧的各个单元格中插入相应的文本（可从ex6_remenhuati.html中复制），结果如下。

b.在第1行的中间单元格中插入内嵌的如下参数的表格并在相应的单元格内插入文本和图像（img6_3.jpg和img6_7.jpg）仿照此过程在其在右侧单元格也制作出类似的嵌套表格，制作出未来都市和未来旅游栏目。

124③插入行和列的结果，如图7-47所示。

另外，若在表格中的最后一个单元格中按Tab键，则自动在表格中最后一行之后添加一个新行。

若要插入多行多列时，操作如下。

①将光标定位在作为参照的某一单元格上。

②在菜单栏中选择“修改”→“表格”→“插入行或列”命令。

③弹出“插入行或列”对话框，在“插入”中选择“行”或“列”，在“行数”或“列数”文本框中输入所需要的行或列的数目，在“位置”中选择在参照光标之上还是之下单选选项，如图7-48所示。

单击“确定”按钮后，结果如图7-49所示。

图7-48 多行多列图7-49 插入两行两列7.3.3 单元格的操作在Dreamweaver CS6中，可以对单元格执行合并与拆分操作，还可以剪切、复制、粘贴单元格并存留单元格的格式。

在对网页中的单元格进行操作时，首先要选中单元格，可以用以下方法选择单元格。

1．选取单元格方法①将光标定位在某一单元格内，此时标签栏会显示出表格标签，单击<td>即可选取单元格，如图7-50所示。

②按住Ctrl键并单击要选取的单元格。

如果按住Ctrl键不放，依次单击单元格，可以选取多个单元格，选取的单元格可以是不连续的，也可以是连续的。

③按“Ctrl+[”组合键选取当前光标所在的单元格。

④将光标定位在单元格中，或者单击一个单元格，在菜单栏中选择“编辑”→“全选”命令，如图7-51所示。

图7-50 选择单元格图7-51 菜单操作⑤若要选择一个矩形的单元格区域，可以使用以下方法实现。

●从一个单元格手动拖到另一个单元格。

●单击一个单元格，然后按住Shift键并单击另一个单元格，这两个单元格定义的直线或矩形区域中的所有单元格将被选中。

图7-47 插入行和列125 ● 在按住Ctrl 键的同时单击要选择的行或列。

2．拆分单元格在Dreamweaver 中，可以根据网页的具体布局，利用表格中将一个单元格拆分成多个单元格的功能，以实现不同文本内容或排版的需求。