设计制作基本网页.pptx

《设计制作基本网页.pptx》由会员分享，可在线阅读，更多相关《设计制作基本网页.pptx（38页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、目录一、页面的布局设计二、表格布局三、文本和图片元素的添加与设置四、媒体元素的添加与设置第1页/共38页一、页面的布局设计就像报纸杂志的设计编辑一样，制作网页的第一步 就是布局。布局是整个网站构思过程中最重要的一部分，因为好的布局不但会给浏览者留下美好的第印象，而且还会带来一个好心境。所谓好的心境，是指网站希望给浏览者带来的心情。如果所做的是娱乐站点,那么布局应该明快、亮丽，让浏览者一进人该网站，就能产生很愉快的心情，从而带着这种愉快的心情去浏览网站。第2页/共38页第3页/共38页二、表格布局表格是网页设计中一个非常有用的工具，它不仅可以将相关数据有序地排列在一起，还可以精确地定位文字、图像

2、等网页元素在页面中的位置，使得页面在形式上丰富多彩又条理清楚，在组织上井然有序而不显单调。使用表格进行页面布局的最大好处是，即使浏览者改变计算机的分辨率也不会影响网页的浏览效果。因此，表格是网站设计人员必须掌握的工具。表格运用得是否熟练，是划分专业制作人士和业余爱好者的一个重要标准。第4页/共38页52.1 插入表格 表格是网页布局设计的常用工具，其在网页中的表格是网页布局设计的常用工具，其在网页中的应用已经突破了传统的用来记载大量数据的功能，应用已经突破了传统的用来记载大量数据的功能，它可以使插入页面中的图像和文本等对象被限定它可以使插入页面中的图像和文本等对象被限定在某一固定位置。相对于没

3、有使用表格的页面，在某一固定位置。相对于没有使用表格的页面，使用表格的页面显得更加整齐有序。合理使用布使用表格的页面显得更加整齐有序。合理使用布局表格，会使网页对象被组织得更加紧密，使整局表格，会使网页对象被组织得更加紧密，使整个页面看起来更加紧凑，如图个页面看起来更加紧凑，如图4-14-1所示的页面就是所示的页面就是使用表格将大量的网页元素对象定位在网页特定使用表格将大量的网页元素对象定位在网页特定的位置上的效果。的位置上的效果。第5页/共38页6第6页/共38页7 在设计网页时，可以直接绘制表格，也可以导入表格在设计网页时，可以直接绘制表格，也可以导入表格数据，并将其转化为表格。数据，并将

4、其转化为表格。表格是网页中对文本和图像布局的强有力的工具。一表格是网页中对文本和图像布局的强有力的工具。一个表格通常由行、列和单元格组成，每行由一个或多个表格通常由行、列和单元格组成，每行由一个或多个单元格组成。表格中的横向称为行，纵向称为列，个单元格组成。表格中的横向称为行，纵向称为列，一行与一列相交所产生的区域则称为单元格。要将相一行与一列相交所产生的区域则称为单元格。要将相关数据有序地组织在一起，必须先插入表格，然后才关数据有序地组织在一起，必须先插入表格，然后才能有效组织数据。能有效组织数据。绘制表格的具体操作步骤如下：绘制表格的具体操作步骤如下：（1 1）在）在“文档文档”窗口的窗口

5、的“设计设计”视图中，将插入点放视图中，将插入点放在需要表格出现的位置。在需要表格出现的位置。提示：提示：如果您的文档是空白的，则只能将插入点放置如果您的文档是空白的，则只能将插入点放置在文档的开头。在文档的开头。第7页/共38页8（2 2）通过以下几种方法启用）通过以下几种方法启用【表格表格】对话框。对话框。在菜单栏中选择在菜单栏中选择【插入插入】【表格表格】命令。命令。在在【插入插入】面板的面板的【常用常用】模式中，单击模式中，单击【表格表格】按钮按钮 。弹出弹出【表格表格】对话框，如图所示。其中，各选项的含义对话框，如图所示。其中，各选项的含义如下：如下：第8页/共38页9 行数：确定表

6、格行的数目。行数：确定表格行的数目。列数：确定表格列的数目。列数：确定表格列的数目。表格宽度：以像素为单位或按占浏览器窗口宽度的百表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。分比指定表格的宽度。边框粗细：指定表格边框的宽度（以像素为单位）。边框粗细：指定表格边框的宽度（以像素为单位）。单元格间距：决定相邻的表格单元格之间的像素数。单元格间距：决定相邻的表格单元格之间的像素数。如果没有明确指定边框粗细或单元格间距和单元格边如果没有明确指定边框粗细或单元格间距和单元格边距的值，则大多数浏览器都按边框粗细和单元格边距距的值，则大多数浏览器都按边框粗细和单元格边距设置为设置为 1

7、 1、单元格间距设置为、单元格间距设置为 2 2 来显示表格。若要确来显示表格。若要确保浏览器显示表格时不显示边距或间距，请将保浏览器显示表格时不显示边距或间距，请将“单元单元格边距格边距”和和“单元格间距单元格间距”设置为设置为 0 0。单元格边距：确定单元格边框与单元格内容之间的像单元格边距：确定单元格边框与单元格内容之间的像素数。素数。第9页/共38页10 无：对表格不启用列或行标题。无：对表格不启用列或行标题。左对齐：可以将表格的第一列作为标题列，以便可为左对齐：可以将表格的第一列作为标题列，以便可为表格中的每一行表格中的每一行 输入一个标题。输入一个标题。顶对齐：可以将表格的第一行作

8、为标题行，以便可为顶对齐：可以将表格的第一行作为标题行，以便可为表格中的每一列表格中的每一列 输入一个标题。输入一个标题。两者兼有：使您能够在表格中输入列标题和行标题。两者兼有：使您能够在表格中输入列标题和行标题。标题：提供一个显示在表格外的表格标题。最好使用标题：提供一个显示在表格外的表格标题。最好使用标题以方便使用屏幕阅读器的标题以方便使用屏幕阅读器的 Web Web 站点访问者。屏站点访问者。屏幕阅读器读取表格标题并且帮助屏幕阅读器用户跟踪幕阅读器读取表格标题并且帮助屏幕阅读器用户跟踪表格信息。表格信息。对齐标题：指定表格标题相对于表格的显示位置。对齐标题：指定表格标题相对于表格的显示位

9、置。摘要：给出了表格的说明。屏幕阅读器可以读取摘要摘要：给出了表格的说明。屏幕阅读器可以读取摘要文本，但是该文本不会显示在用户的浏览器中。文本，但是该文本不会显示在用户的浏览器中。第10页/共38页11（3 3）根据需要选择新建表格的大小、行列数值等，）根据需要选择新建表格的大小、行列数值等，单击单击【确定确定】按钮按钮,完成如图所示的表格，这里一完成如图所示的表格，这里一切选择默认设置。切选择默认设置。第11页/共38页122.2 设置表格属性 在绘制表格或者导入表格数据后，根据需要可能在绘制表格或者导入表格数据后，根据需要可能要对表格属性项进行修改设置才能达到设计的要要对表格属性项进行修改

10、设置才能达到设计的要求。下面就来介绍一下表格属性的设置方法。求。下面就来介绍一下表格属性的设置方法。第12页/共38页13选择表格1 1、选择整个表格选择整个表格 选择整个表格的方法有很多种，可以参照下列方选择整个表格的方法有很多种，可以参照下列方法之一进行操作：法之一进行操作：将鼠标指针移动到表格的上方，当鼠标指针的形将鼠标指针移动到表格的上方，当鼠标指针的形状变为表格形状状变为表格形状 时，单击鼠标左键即可选中整时，单击鼠标左键即可选中整个表格，如图所示。个表格，如图所示。第13页/共38页14 将鼠标指针移动到表格的格线处，当鼠标指针的将鼠标指针移动到表格的格线处，当鼠标指针的形状变为上

11、下方向的箭头时，单击鼠标左键即可形状变为上下方向的箭头时，单击鼠标左键即可选中整个表格，如图所示。选中整个表格，如图所示。第14页/共38页15 将光标置于表格中，单击窗口左下角的将光标置于表格中，单击窗口左下角的标记即可选中整个表格。标记即可选中整个表格。将光标置于表格中，在菜单栏中选择将光标置于表格中，在菜单栏中选择【修改修改】【表格表格】【选择表格选择表格】菜单命令，即可选中整菜单命令，即可选中整个表格。个表格。将光标置于表格之外，按住将光标置于表格之外，按住【shiftshift】键，然后在键，然后在表格中的任意处单击鼠标左键即可选择整个表格。表格中的任意处单击鼠标左键即可选择整个表格

12、。选中表格后，表格的外框变成粗黑色，并在右方、选中表格后，表格的外框变成粗黑色，并在右方、下方和右下方各会显示一个黑色控制点，下方和右下方各会显示一个黑色控制点，【属性属性】面板也会变为表格面板也会变为表格【属性属性】面板，在其中可以面板，在其中可以设置表格的属性。设置表格的属性。第15页/共38页16 2 2、选择单元格选择单元格 选择单元格既可以选择单个单元格，也可以选择选择单元格既可以选择单个单元格，也可以选择一整行或者一整列，还可以选择不连续的多个单一整行或者一整列，还可以选择不连续的多个单元格。元格。选择单个单元格，直接单击要选择的单元格即可。选择单个单元格，直接单击要选择的单元格即

13、可。选择行（或列），可按如下几种操作方法进行：选择行（或列），可按如下几种操作方法进行：(1)(1)将鼠标指针置于所要选择的行的左方（或列的将鼠标指针置于所要选择的行的左方（或列的上方），待鼠标指针形状变为向右（或向下）的上方），待鼠标指针形状变为向右（或向下）的箭头时，单击鼠标左键，则可以选中该行（或该箭头时，单击鼠标左键，则可以选中该行（或该列）。将鼠标指针置于所要选择的行的左方（或列）。将鼠标指针置于所要选择的行的左方（或列的上方），待鼠标指针形状变为向右（或向下）列的上方），待鼠标指针形状变为向右（或向下）的箭头时，拖曳鼠标可以选中连续的多行（或多的箭头时，拖曳鼠标可以选中连续的多行（

14、或多列）。列）。第16页/共38页17(2)(2)将鼠标置于待选择的单元格中，然后按住鼠标将鼠标置于待选择的单元格中，然后按住鼠标左键不放并拖动鼠标，横向拖动可以选择一行，左键不放并拖动鼠标，横向拖动可以选择一行，纵向拖动可以选择一列，如果向对角线方向拖动，纵向拖动可以选择一列，如果向对角线方向拖动，行和列可以同时选择。行和列可以同时选择。(3)(3)通过与通过与【ctrlctrl】键的结合使用，可以选择多个键的结合使用，可以选择多个不连续单元格。按住不连续单元格。按住【ctrlctrl】键，然后单击需要选键，然后单击需要选择的单元格，即可选中该单元格。如果想取消选择的单元格，即可选中该单元格

15、。如果想取消选择某单元格，只需在按住择某单元格，只需在按住【ctrlctrl】键的同时，再次键的同时，再次单击该单元格即可。单击该单元格即可。第17页/共38页18设置行数和列数 1 1、通过通过【属性属性】面板面板 2 2、通过快捷菜单通过快捷菜单 3 3、通过菜单栏命令通过菜单栏命令第18页/共38页19设置表格大小 1 1、相对大小和绝对大小相对大小和绝对大小 2 2、改变表格大小改变表格大小 3 3、相对、绝对大小之间的转换相对、绝对大小之间的转换 4 4、清除行高和列宽清除行高和列宽 5 5、设置填充和间距设置填充和间距第19页/共38页20设置表格对齐方式 表格同网页中的其他元素对

16、象一样，有三种对齐表格同网页中的其他元素对象一样，有三种对齐方式，即左对齐、右对齐和居中对齐，默认情况方式，即左对齐、右对齐和居中对齐，默认情况下是左对齐，为表格设置对齐方式的操作方法如下是左对齐，为表格设置对齐方式的操作方法如下：下：（1 1）选中要设置对齐方式的表格。）选中要设置对齐方式的表格。（2 2）在表格）在表格【属性属性】面板上的面板上的“对齐对齐”下拉列表下拉列表框中选择一种对齐方式。框中选择一种对齐方式。第20页/共38页21设置表格边框 表格中的一些效果是通过设置表格边框的属性来表格中的一些效果是通过设置表格边框的属性来实现的，对于表格边框，可以设置它的粗细和颜实现的，对于表

17、格边框，可以设置它的粗细和颜色。色。1 1）边框的粗细）边框的粗细 在表格在表格【属性属性】面板上的面板上的“边框边框”问半框用来设问半框用来设置表格边框的粗细，默认情况下设置为置表格边框的粗细，默认情况下设置为1 1，即如果，即如果没有明确指定边框的值，则大多数浏览器按边框没有明确指定边框的值，则大多数浏览器按边框值为值为1 1的设置显示表格。通过改变该文本框中的数的设置显示表格。通过改变该文本框中的数值，可以调整表格边框的粗细。如下图所示为分值，可以调整表格边框的粗细。如下图所示为分别将表格的边框设置为别将表格的边框设置为0 0、1 1和和1010的效果。的效果。第21页/共38页22第2

18、2页/共38页23 2 2）边框的颜色）边框的颜色 表格的边框颜色默认情况下是灰色的，通过表格的边框颜色默认情况下是灰色的，通过【CSSCSS样式样式】面板或面板或HTMLHTML代码可以为表格的边框代码可以为表格的边框选择其他的颜色。为表格边框设置颜色的操作方选择其他的颜色。为表格边框设置颜色的操作方法如下：法如下：（1 1）选中要改变边框颜色的表格。）选中要改变边框颜色的表格。（2 2）切换到）切换到“代码代码”视图或视图或“拆分拆分”视图，在对视图，在对应的表格代码的应的表格代码的“tabletable”后按空格后输入后按空格后输入“bordercolor=”bordercolor=”将

19、弹出一个颜色选择面板，将弹出一个颜色选择面板，如下图所示。如下图所示。（3 3）在弹出的调色板中选择一种颜色。）在弹出的调色板中选择一种颜色。第23页/共38页24第24页/共38页25 设置完成后的效果如图所示。设置完成后的效果如图所示。第25页/共38页26设置表格背景 在网页中，表格是一个独立的对象，不仅可以设在网页中，表格是一个独立的对象，不仅可以设置表格边框的颜色，还可以为其添加背景色或者置表格边框的颜色，还可以为其添加背景色或者选择背景图像。选择背景图像。1 1）添加背景色）添加背景色 为表格添加背景色的操作方法如下：为表格添加背景色的操作方法如下：（1 1）选中要添加背景色的表格

20、。）选中要添加背景色的表格。（2 2）在）在【CSSCSS样式样式】面板中，单击面板中，单击 【新建新建CSSCSS规则规则】按钮按钮 ，将弹出，将弹出【新建新建CSSCSS规则规则】对话框，对话框，在该对话框中，在该对话框中，“选择器类型选择器类型”选择选择“标签（重标签（重新定义新定义HTMLHTML元素）元素）”，“选择器名称选择器名称”选择选择“tabletable”。第26页/共38页27（3 3）单击）单击【确定确定】按钮，将弹出按钮，将弹出【CSSCSS规则定义规则定义】对话框。在该对话框中，选择对话框。在该对话框中，选择“背景背景”分类，分类，设置设置“Background-c

21、olor Background-color”（即背景色），如（即背景色），如图所示。图所示。第27页/共38页28（4 4）选择一种适合的背景色后，单击）选择一种适合的背景色后，单击【确定确定】按按钮，即可为表格添加背景色。为表格添加背景色钮，即可为表格添加背景色。为表格添加背景色的效果如图所示。的效果如图所示。第28页/共38页29 2 2）选择背景图像）选择背景图像 将图像设置为表格的背景，具体操作方法同上述将图像设置为表格的背景，具体操作方法同上述背景色的方法，只是：选中表格后，在背景色的方法，只是：选中表格后，在 “Background-imageBackground-image”文本

22、框中输入图像的文本框中输入图像的存放路径，或者单击存放路径，或者单击 按钮按钮 ，将弹出，将弹出【选选择图像源文件择图像源文件】对话框，在该对话框中选择一幅对话框，在该对话框中选择一幅图像作为表格的背景图像。图像作为表格的背景图像。单击单击【确定确定】按钮返回，这时可以看到表格中已按钮返回，这时可以看到表格中已经插入了一副背景图像，如下图所示。经插入了一副背景图像，如下图所示。第29页/共38页30 提示：还可以用表格标记提示：还可以用表格标记提示：还可以用表格标记提示：还可以用表格标记的属性代码的属性代码的属性代码的属性代码bgcolorbgcolorbgcolorbgcolor和和和和ba

23、ckgroundbackgroundbackgroundbackground来设置表格的背景色和背来设置表格的背景色和背来设置表格的背景色和背来设置表格的背景色和背景图像。景图像。景图像。景图像。第30页/共38页312.3 设置单元格的属性 单元格的拆分与合并单元格的拆分与合并1 1）合并单元格）合并单元格2 2）拆分单元格）拆分单元格 设置单元格的对齐属性设置单元格的对齐属性第31页/共38页324.4 表格的嵌套 表格可以进行嵌套操作，并且嵌套的层数没有限制，表格可以进行嵌套操作，并且嵌套的层数没有限制，但嵌套的层数过多将使导致页面打开速度变慢，实际但嵌套的层数过多将使导致页面打开速度变

24、慢，实际应用中表格的嵌套层数通常以不超过应用中表格的嵌套层数通常以不超过3 3层为宜。表格嵌层为宜。表格嵌套在使用表格进行页面布局的时候尤其又用。表格嵌套在使用表格进行页面布局的时候尤其又用。表格嵌套的操作方法如下：套的操作方法如下：（1 1）在需要嵌套表格父表格单元格中定位插入点。）在需要嵌套表格父表格单元格中定位插入点。（2 2）在菜单栏中选择）在菜单栏中选择【插入插入】【表格表格】命令。命令。（3 3）在打开的）在打开的【表格表格】对话框中设置要插入的表格属对话框中设置要插入的表格属性。性。（4 4）单击）单击【确定确定】按钮。按钮。另外在目标单元格中定位插入点后，另外在目标单元格中定位

25、插入点后，在在【插入插入】面板面板的的【常用常用】模式中，单击模式中，单击【表格表格】按钮按钮 ，也可实现表，也可实现表格的嵌套操作。格的嵌套操作。第32页/共38页332.5 表格的数据导入导出 有时需要将有时需要将WordWord文档中的内容或文档中的内容或ExcelExcel文档中的文档中的表格数据导入到网页中进行发布，或将网页中的表格数据导入到网页中进行发布，或将网页中的表格数据导出到表格数据导出到WordWord文档或文档或ExcelExcel文档中进行编文档中进行编辑，辑，Dreamweaver CS4Dreamweaver CS4提供了实现这种操作的提供了实现这种操作的功能。功能

26、。导入表格数据导入表格数据 表格数据的导出表格数据的导出第33页/共38页342.6表格的排序 对表格数据进行排序的具体操作方法如下：对表格数据进行排序的具体操作方法如下：提示：不能对包含提示：不能对包含提示：不能对包含提示：不能对包含 colspan colspan colspan colspan 或或或或 rowspan rowspan rowspan rowspan 属性的表格（即属性的表格（即属性的表格（即属性的表格（即包含合并单元格的表格）进行排序。包含合并单元格的表格）进行排序。包含合并单元格的表格）进行排序。包含合并单元格的表格）进行排序。(1)(1)选中要排序的表格或单击该表格的任意单元格。选中要排序的表格或单击该表格的任意单元格。(2)(2)选择选择【命令命令】菜单下的菜单下的【排序表格排序表格】命令，将弹出命令，将弹出【排排序表格序表格】对话框。对话框。第34页/共38页三、文本和图片元素的添加与设置3.1文本插入和设置3.2图像对象、图像的插入与设置第35页/共38页四、媒体元素的添加与设置4.1 关于媒体文件4.2 媒体对象的插入与设置第36页/共38页End第37页/共38页感谢您的观看！第38页/共38页