新闻网页设计与管理.ppt

新闻网页设计与管理,主讲教师：陈訸玮2012年9月,第1章初识DreamweaverCS5,1.1网页基础知识1.2了解DreamweaverCS5界面1.3网站建设流程1.4创建站点1.5创建网页文档,1.1网页基础知识,1、网页基本构成元素网站Logo：也叫网站标志，是一个站点的象征，也是一个网站是否正规的标志之一。网站标志一般放在网站的左上角，访问者一眼就能看到。成果的网站标志有着独特的形象标识，在网站的推广和宣传中起到事半功倍的效果。网站标志应体现该网站的的特色、内容以及其内在的文化内涵和理念。网站Banner：Banner是一种网络广告形式，Banner一般放在网页的顶部位置。最常用的是48660像素的标志广告。,1.1网页基础知识,导航栏：是整个网站设计中的一个较独立的部分，在页面中的位置是固定的，一般有4中常见的现实位置，页面左侧、右侧、顶部和底部。在同一个页面中可以运用多种导航栏，例如在顶部设置主菜单，在页面左侧设置折叠菜单，同时在页面底部设置多种链接。文本：网页中的信息主要以文本为主，在网页中可以通过字体、大小、颜色、底纹、边框等来设置文本的属性。图像：用于网页的图像文件一般为JPG和GIF格式。动画：通常认为制作优秀、创意出总的动画是吸引浏览者的最有效方法。常见的有GIF动画和Flash动画。,1.1网页基础知识,超级链接：实现从一个网页指向另一个目的端的链接。例如指向两一个网页或相同网页上的不同位置。这个目的端通常是另一个网页，也可以是一幅图片、一个电子邮件地址、一个程序等。表格：网页排版的灵魂。通过表格可以精确控制网页元素在网页中的位置。表单：用于收集站点访问者信息。站点访问者填表单的方式输入文本、单击单选按钮与复选框以及从下拉菜单中选择选项，填好表单后，站点访问者便送出所输入的数据，该数据就会根据访问者设置的表单处理程序。,1.1网页基础知识,2、网页的种类静态网页：静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；运行于客户端的程序、网页、插件、组件，均属于静态网页，例如html页、Flash、JavaScript、VBScript等等，它们是永远不变的，常见其文件后缀名为.html。优点：静态网页页面上的内容和格式一般不会改变，只有网络管理员可根据需要更新页面，因此静态网页的内容相对稳定，容易被搜索引擎检索。缺点：由于没有数据库的支持，静态网页在网站制作和维护方面工作量较大，这也使得静态网页的交互性在功能方面有较大的限制。,1.1网页基础知识,动态网页动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返还一个完整的网页；在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、CGI等。其常见文件后缀名为.asp、.jsp、.php等，且通常在后缀名后加问号。如动态网页以数据库技术为基础，可以大大降低网站维护的工作量；交互性强，可以实现如用户注册、用户登录、在线调查、用户管理、订单管理等等功能。,1.1网页基础知识,静态网页是网站建设的基础：内容与格式相对稳定，容易被搜索引擎检索；设计与管理的工作量大，交互功能低。动态网页以数据库为基础：交互性强，网站管理工作难度降低。为了网站适应搜索引擎检索的需要，在采用动态网站技术的同时可以将网页内容转化为静态网页发布，在同一个网站上，动态网页内容和静态网页内容同时存在是很常见的事情。,1.1网页基础知识,3、HTML语言HTML（HyperTextMark-upLanguage）：超文本标记语言，是网络的通用语言，是WWW的描述语言。HTML格式：文字+标记（标签，tag，一个HTML文档就是由一系列的元素和标签组成的。）例如：文字HTML用标记来规定元素的属性和它在文件中的位置。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。任何文字编辑器均可进行HTML语言的编写。如记事本。,1.1网页基础知识,-开始标签-头部标签一个简单的HTML示例-文件头结束-文件主体开始-文件主体结束-结尾标签标记在使用时必须用必须用“”括起来，标记拥有单标记和双标记之分。,1.1网页基础知识,单标记：指的是只需单独使用就能完整地表达意思的标记。这类标记的语法是。最常用的单标记如，表示换行。双标记：由“始标记”与“尾标记”两部分构成，是必须成对使用的标记。始标记前加一个斜杠（/）即成为尾标记。双标记的语法是内容，其中“内容”指要被这对标记施加作用的部分。如：一个简单的HTML示例。,1.1网页基础知识,HTML超文本文档的结构主要包括头部（Head）和主体（Body）两个部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。（1）在文档的最外层，文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。（2）是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记，用以说明文件的标题和整个文件的一些公共属性。若不需头部信息则可省略此标记，良好的习惯是不省略。,1.1网页基础知识,（3）和是嵌套在头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。（4）标记之间的文本是正文，是在浏览器要显示的页面内容。注意：上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在HTML标签中的。,1.2了解DreamweaverCS5界面,1.2了解DreamweaverCS5界面,1、【菜单】栏2、【应用程序】栏3、【文档】工具栏4、【文档】窗口5、【标签】选择器6、【属性】检查器7、【面板】组,1.3网站建设流程,1、前期策划前期调研：用户调查、竞争对手调查、企业自身情况调查。网站策划：定位网站内容、划分网站栏目。资源整理：收集网站共享发布的文本、图像、动画、声音和视频。2、中期制作前台设计：网站的整体色彩风格设计，绘制网站图标、按钮、导航等界面元素，动画设计，网站页面布局和整体效果。页面代码的编写：使用DW将设计好的页面转换为浏览器可识别的代码。后台程序的开发：数据库系统的设计。,1.3网站建设流程,3、后期维护网站测试：测试网站页面链接的有效性、网站文档的完整性、正确性及后台程序和数据库的稳定性。网站发布：上传到服务器进行对外服务，宣传和推广。网站维护：服务器的软、硬件维护，系统升级，数据库优化和网站内容更新。设计、制作与管理网站涉及多门学科：版面构图（平面设计）；程序开发（网页应用程式）；网站内容管理（内容管理系统、资讯架构学）。编辑、美工、程序员是一个网站的基本配备人员。,1.4创建站点,问题1：为什么要先新建一个文件夹？站点是一系列文档的组合，它的作用是存储、管理网站中各种的网页文档以及相关的素材如Flash、图像、视频等等。素材、文档通过各种链接建立逻辑关系。由于素材的种类太多，必须使用多个文件夹进行存储和管理，为了防止文件丢失，通常建立一个站点文件夹（根文件夹父文件夹）统一保存网站所有的文档和素材。站点文件夹、站点名称、站点内所有文件的文件名应以英文加数字的方式来命名。,1.4创建站点,问题2：为什么要进行主目录和默认文档的设置IIS的功能是将网页发布在网络上供他人浏览，即让其他的主机访问你保存在站点文件夹中的网页文档。当访问一个网站时，用户默认访问进入的目录（站点文件夹保存在你的电脑中的哪个硬盘）即为主目录，IIS预设的主目录是“c:inetpubwwwroot”。从安全角度看，网站的数据不宜放到系统盘，需要修改IIS默认主目录。,1.4创建站点,当进入一个网站或网站目录时，不需要输入具体文件名，只需要输入网站目录，浏览器即可直接访问文件。比如我们输入-，实际上它缺省了index.asp，它的全称是-不同的网站默认文档不一样，而且同一个网站也可有多个默认文档，默认文档之间存在着优先次序。我们学习制作的是静态站点，它的首页文档名称一般为index.html，为了让其他用户访问你的站点时看到首页文件，要调整默认文档的优先级次序再制作首页。,1.4创建站点,问题3：站点建立中的设置问题【站点名称】必须设置；本地站点文件夹即事先创建的根文件夹（主目录文件夹）。【服务器名称】一般与站点文件夹相同（以英文数字命名）；当前以学生机作为服务器使用，在本机浏览网页效果，因此设置【连接方法】为“本地/网络”；【服务器文件夹】即站点文件夹；【WebURL】可以省略。由于创建的是静态网站，不涉及交互性的问题，所以【服务器模型】设置为无，两点可以省略。,1.4创建站点,1、IIS配置IIS（InternetInformationServices）：指互联网信息服务，是由微软公司提供的基于运行MicrosoftWindows的互联网基本服务。IIS是一个文件和应用程序服务器，是在Windows上建立Internet服务器的基本组件，其中包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器，分别用于网页浏览、文件传输、新闻服务和邮件发送等方面,1.4创建站点,安装IIS（1）点击【开始】/【控制面板】，运行【控制面板】中的【添加或删除程序】，点击【添加/删除Windows组件】按钮，出现下图所示的“Windows组件向导”对话框。,1.4创建站点,（2）选择【Internet信息服务(IIS)】复选框，单击【详细信息】，出现如下图所示的对话框，选择【万维网服务】，单击【详细信息】，取消默认选中的【打印机虚拟目录】选项，单击【确定】后返回对话框，选择【下一步】开始安装，之后单击【完成】结束。,1.4创建站点,（3）系统自动安装组件，完成安装后，系统在【开始】/【控制面板】（性能与维护）/【管理工具】程序组中会出现一项【Internet信息服务】，单击它打开如下图所示的窗口。,1.4创建站点,配置IIS服务（1）从【控制面板】的【管理工具】目录中选择【Internet信息服务】图标，将打开如下图的窗口。,1.4创建站点,（2）右击【默认网站】选项，选中【属性】命令，打开如下图的【默认网站属性】对话框。,1.4创建站点,（3）选择【主目录】标签，设置【本地路径】为创建的站点根文件夹。,1.4创建站点,（4）选择【文档】标签，将index.html设置为【默认文档】的首选项。,1.4创建站点,2、建立站点（1）在F盘新建文件夹xnml。（2）打开DW软件，执行【站点】/【新建站点】命令，打开【站点设置对象XNML】对话框，这是站点名称为XNML，设置【本地站点文件夹】为“F:xnml”。效果如下图所示。注意：站点文件夹、站点名称、站点内所有文件的文件名应以英文加数字的方式来命名。,1.4创建站点,1.4创建站点,（3）在左侧列表中选择【服务器】项目，单击【添加新服务器】按钮。设置【连接方法】为“本地/网络”，【服务器文件夹】为“F:xnml”，其他采用默认设置。如下图所示。,1.4创建站点,（4）选择【高级】选项卡，设置【测试服务器】的【服务器模型】为“无”，单击【保存】。返回上一级对话框后再次单击【保存】并最终完成站点设置。,1.5创建网页文档,1、新建首页每个网站必须有一个首页，一般情况下，网站首页以index.htm、index.html、index.asp、default.asp、default.htm、default.html为文件名。（1）启动DW软件，在默认打开的【Dreamweaver起始页】中，单击【新建】栏中的“HTML”，表示创建的是一个文件后缀名为.html的静态空白页面。（2）执行【编辑】/【首选参数】命令，在弹出的对话框中选择【新建文档】选项，设置网页文档的属性。一般采用默认设置。,1.5创建网页文档,（3）设置网页标题：每一个网页都有标题，在浏览页面时，标题会显示在浏览器的标题栏；将页面保存在浏览器的收藏夹时，网页标题将作为收藏夹项目的名称。标题不宜过长或过短，一般以610个汉字比较理想，最好不要超过30个汉字；网页标题应能概括网页的核心内容；网页标题应含有丰富的关键字。在文档工具栏的【标题】文本框中输入设计好的文字标题。,1.5创建网页文档,（4）插入关键字：网页关键字可以间接地宣传网站，提高访问量。一般情况下，关键字是对网页的主题、内容、风格或者作者等内容的概括。单击文档工具栏上的【代码】按钮，将文档窗口切换为代码视图。将鼠标指针放在标签中，选择“插入/HTML/文件头标签/关键字”命令，打开“关键字”对话框，如下图所示。,1.5创建网页文档,在对话框中输入相应的中文或英文关键字，如果关键字较多，应注意关键字间要用半角的逗号分隔。假定关键字为“网络红人”，文字输入完毕后单击【确定】，此时观察“代码视图”，会发现标签内多了下述代码：,1.5创建网页文档,【练习】制作文本网页1、在F盘中新建文件夹，用学号命名；创建静态网站站点，站点根文件夹为学号文件夹。2、启动DW软件，执行【文件】/【新建】命令，在弹出的【新建文档】对话框中选择【示例中的页】选项，再选择【示例文件夹】中的CSS样式表选项，选择名为“颜色：黄色/棕色”的【示例页】，单击【创建】按钮，将创建一个名称为untitled-1的样式表文件，文件内容将展示在文档窗口中。效果如下图。,1.5创建网页文档,1.5创建网页文档,3、执行【文件】/【保存】命令，将该文件保存到站点根文件夹中，文件后缀名为.css。4、执行【文件】/【新建】命令，在【新建文档】对话框中选择【空白页】项目，选择“HTML”【页面类型】，再选择“”【布局】，单击【新建文档】右下侧的【附加样式表】按钮，如右图。,附加样式表,1.5创建网页文档,5、在弹出的【链接外部样式表】对话框中单击【浏览】按钮，选择之前保存的样式表文件，设置【添加为】为“链接”，再选择【媒体】为“screen”，单击【确定】按钮。如下图所示。,1.5创建网页文档,6、在【新建文档】对话框中单击【创建】按钮，即可创建带有CSS样式的网页文档。7、在【属性】检查器中设置【格式】为“标题3”，输入“前出师表”文本。8、按回车键换行，在【属性】检查器中设置【格式】为“段落”，从记事本中复制文章第一个段落，将其粘贴到文档窗口中。9、重复步骤8，将记事本中的第二个段落复制粘贴到文档窗口中。10、设置网页标题为“前出师表”，设置网页关键字为“诸葛亮出师表”。网页制作完成后，在IE浏览器中查看效果：保存文件，按F12键在IE浏览器中预览网页。,1.5创建网页文档,1.5创建网页文档,问题1：文本的样式设置为什么只能使用CSS？DW8版本软件中，对于文本的基本属性如字体、大小、颜色等以快捷按钮的方式放置在【属性检查器】面板中，只需要选中文字即可单击改变样式，并且可以多次改变或改变部分文字样式。DWCS5版本取消相关设置，对于网页页面的效果一律采用CSS样式表链接的方式，这是为了让子页面的样式与首页样式保持一致，同一个样式表可以多次链接使用。（仅对外部样式表而言）CSS样式表一旦设置完成并对文字进行了设置，则无法随意改变，若修改了CSS属性则修改了应用文字的样式，要对部分样式进行设置必须设置新的样式表。,1.5创建网页文档,问题2：【页面设置】中【外观（HTML）】的作用以HTML代码的方式规定网页文档中某些元素的基本样式，如文字的颜色、字体、大小、超链接颜色等等。一旦确定，则整个页面中的文本属性是一致的，若要修改，必须重新设置【外观（HTML）】选项。相关代码书写在头部标签中。问题：【页面设置】中【外观（CSS）】的作用类似于【外观（HTML）】的作用，使用CSS样式表设置网页中超链接的样式属性，保存为外部样式表时可以多次链接使用，保证子页面与首页基本格式一致。,1.5创建网页文档,【练习】制作简单的index.html页面1、在F盘新建文件夹，命名为practice2，作为站点根文件夹。在practice2文件夹中新建image文件夹，将提供的图片复制到该文件夹中。2、新建站点。3、新建文件名为index.html的静态网页；网页标题为“视友(4u2v)视频教学网”；关键字为“电脑学习网”。4、页边距为“0px”，背景颜色为“灰色（#CCCCCC）”。5、页面分为三个部分：第一部分是标题“欢迎光临电脑学习网站”，使文字居中对齐。设置文字大小为“36”，颜色为“红色（#FF0000）”，字体加粗显示；第二部分插入图像并使其居中对齐；第三部分分为3列，分别输入“进入视频学习网”，“进入官方网站”，“关于我们”；设置文本居中对齐，大小为“14”，颜色为“红色（#FF0000）”。最终效果类似下图。,1.5创建网页文档,【提示】1、单击【属性检查器】的【页面属性】按钮，选择【外观CSS】，设置背景颜色与页边距。2、执行【插入/表格】菜单命令，在跳出的对话框中设置插入3行1列的表格，【边框粗细】为0px，其他选项采用默认值。类似右图。,1.5创建网页文档,3、选中整个表格，在属性检查器中设置【对齐】为“居中对齐”。4、表格的第一行输入文本；第二行执行【插入/图像】命令，插入图像；将插入点放在第三行的空白处，单击属性检查器上的【拆分单元格】按钮，将第三行拆分为三列，输入相应的文字。5、选中第一行文字，在属性检查器上单击【CSS】按钮，再单击【编辑规则】按钮，在跳出的对话框中设置选择器名称为是s1，其余采用默认；单击【确定】按钮，在跳出的对话框中选择【类型】分类，设置Font-size（大小）为36px，Font-weight（样式）为bold（粗体），Corlor（颜色）为#FF0000；选择【区块】类型，设置Text-align（文本对齐方式）为center（居中）。单击【确定】，文字样式改变；同理新建规则s2，应用于第三行的文字。,1.5创建网页文档,【练习】设置“中友百货”页面属性1、将共享文件夹中的page文件夹复制到学号文件夹中。2、启动DW软件，打开page.html页面，将插入点置于原始页面的空白位置。3、执行【修改】/【页面属性】命令，打开页面属性对话框，单击【背景图像】右侧的“浏览”按钮，设置背景图片为images_filesbg.png；在【重复】下来列表中选择背景图像的重复方式为“repeat-x（横向重复）”；设置【左边距】、【上边距】为0px。4、选择【标题/编码】选项，设置【标题】为“中友百货”，设置【编码】为“简体中文GB2312”。,1.5创建网页文档,5、切换到【链接CSS】，设置【链接字体】为宋体，【大小】为9pt，【链接颜色为】#000000，【已访问链接】#000000，【活动链接】#FF0000，【变化图像链接】#001EFF，【下划线式样】为“始终无下划线”。6、单击【确定】按钮，页面的背景图像、页面边距、标题等发生了变化。页面效果类似下图。,1.5创建网页文档,修改后,1.5创建网页文档,问题1：使用【文本居中】按钮设置表格居中，为什么在不同的IE浏览器中效果不同？不同的浏览器对代码的识别会产生一定的偏差，这是由代码书写的格式多样造成的。一般来讲，设置某个对象的样式，通常都会将代码书写在对应的对象代码中。例如表格的代码，是表格居中的代码应该书写在其中。选中整个表格，设置【属性检查器】中的【对齐】为“居中对齐”，表格代码从变成，表示使用对齐代码对当前的表格对象进行了样式设置，则无论任何浏览器在识别该代码时都会将其识别为表格居中显示。,1.5创建网页文档,问题2：修改【页面属性】中的【链接CSS】，为什么文本没有发生改变？样式表有三种，外部样式表、内部样式表和内嵌样式表。优先级顺序为内嵌样式表内部样式表外部样式表。内部样式表一般显示在头部标记中，如本案例中：.style2color:#FFFFFF;font-size:12px;，表示文字大小12像素，颜色白色。对某段文字应用该样式时，代码书写为。,1.5创建网页文档,内嵌样式表一般显示在主体代码中，用来规定部分文本的样式，如本案例中：中友功能店，表示文字颜色为白色。注意：在案例中，该部分链接文字的代码表示中，中友功能店包含在代码之内，二者优先级顺序为优于。页面属性设置的效果转换成代码将自动添加在头部标签中，由于样式表优先级属性的影响，必须修改.style2并删除代码，才能让修改后的效果正常显示出来。,第2章表格布局,2.1网页布局类型2.2应用表格,2.1网页布局类型,1、“国”字型：也可以称为“同”字型或“口”字型，是一些大型网站所喜欢的类型。它的结构是最上面是网站的标题以及横幅广告条，接下来的主体就是网站的主要内容，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的最多的一种结构类型。优点：重复利用版面，信息量大；缺点：页面拥挤，不够灵活。例：,2.1网页布局类型,“国”字型,2.1网页布局类型,2、拐角型：网页头部是标题及广告横幅，接下来的左侧是窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息，多用于导航网站，有时亦称为“T”型结构。优点：页面结构清晰，主次分明；缺点：规矩呆板，在细节色彩上不注意，易令人“看之无味”。例：。,2.1网页布局类型,拐角型布局,2.1网页布局类型,3、“三”型：这种结构多用于国外站点尤其是商业网站，国内用的不多。特点是页面上横向两条色块将页面整体分割为四部分，色块中大多放广告条和版权等。例：http:/www.e-。,2.1网页布局类型,“三”型布局,2.1网页布局类型,4、对称对比型：这种网页结构是采取左右或者上下对称的一种布局方法，通常一半深色，一半浅色，一般用于设计型站点。优点：视觉冲击力强；缺点：将网页部分有机的结合较困难。例：。,2.1网页布局类型,对称对比布局,2.1网页布局类型,对称对比布局,2.1网页布局类型,5、标题正文型：这种结构类型的最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面就是这种。例：,2.1网页布局类型,标题正文型,2.1网页布局类型,6、框架型：框架型又可以分为左右框架型、上下框架型、综合框架型。左右框架型指一种左右分隔的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标记，右边是正文，大部分的大型论坛都采用这种结构，部分企业网站也喜欢采用这种结构。优点：结构非常清晰，一目了然。例：,2.1网页布局类型,左右框架型,2.1网页布局类型,7、封面型：也称为“POP”型。这种结构常用于时尚类站点和个人网站的首页，大部分为一些精美的平面设计结合一些小动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做上栏目链接。优点：漂亮吸引人；缺点：速度有时比较慢。例:,2.1网页布局类型,8、Flash型：Flash型与封面型结构类似，只是Flash型采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体，例：,2.2应用表格,1、关于表格表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格。HTML代码用、分别指代表格、行、单元格。,2.2应用表格,2、设置表格属性在“设计”视图中对表格进行格式设置时，可以设置整个表格或表格中所选的行、列或单元格的属性。如果将整个表格的某个属性（例如背景颜色或对齐）设置为一个值，而将单个单元格的属性设置为另一个值，则单元格格式设置优先于行格式设置，行格式设置又优先于表格格式设置。三者优先级关系表现为：单元格行表格,2.2应用表格,3、表格基本属性：（1）边框：指定表格边框的宽度（以像素为单位）。注意：如果没有明确指定边框粗细的值，则大多数浏览器按边框粗细设置为1显示表格。若要确保浏览器显示的表格无边框，将边框粗细设置为0。（2）单元格间距（间距）：确定相邻的表格单元格之间的像素数。,2.2应用表格,（3）单元格边距（填充）：确定单元格边框和单元格内容之间的像素数。注意：如果没有明确指定单元格间距和单元格边距的值，大多数浏览器按单元格边距都设置为1，单元格间距设置为2显示表格。若要确保浏览器不显示表格中的边距和间距，将“单元格边距”和“单元格间距”设置为0。,2.2应用表格,（4）水平：指定单元格、行或列内容的水平对齐方式。（通常常规单元格为左对齐，标题单元格为居中对齐）。（5）垂直：指定单元格、行或列内容的垂直对齐方式。（通常是居中对齐）。（6）宽和高：是以像素（px）为单位或按占整个表格宽度或高度百分比计算的所选单元格的宽度和高度。若要指定百分比，在值后面使用百分比符号(%)。若要让浏览器根据单元格的内容以及其他列和行的宽度和高度确定适当的宽度或高度，将此域留空（默认设置）。提示：在默认情况下，浏览器选择一列的宽度来容纳列中最宽的图像或最长的行。这就是为什么当用户将内容添加到某个列时，该列有时变得比表格中其他列宽得多的原因。,2.2应用表格,（7）“背景”颜色框：使用颜色选择器选择的单元格、列或行的背景颜色。（8）“合并单元格”按钮：可以将所选的单元格、行或列合并为一个单元格。只有当单元格形成矩形或直线的块时才可以合并这些单元格。（9）“拆分单元格”按钮：可以将一个单元格分成两个或更多单元格。一次只能拆分一个单元格；如果选择的单元格多于一个，则此按钮将禁用。（10）表格ID：定义表格在网页中的编号。由于嵌套表格的层数较多，每插入一个表格应适当的设置数字编号。,2.2应用表格,4、【插入】工具面板选择【窗口/插入】菜单命令，将打开插入面板，如右图。使用插入面板可以快捷地插入表格、图像、音视频、超链接等网页元素。,2.2应用表格,【练习】嵌套表格1、插入1行1列的表格1，宽度为500像素，高度为100像素，边框为0，单元格边距为12像素，单元格间距为0；选择一个背景图像1.jpg2、在表格1中插入1行1列的表格2，宽度为100%，高度为100像素，边框为0，单元格边距为12像素，单元格间距为0；选择一个背景图像2.jpg3、在表格二中插入1行1列的表格3，宽度为100%，高度为100像素，边框为10，单元格边距与单元格间距设为8像素；边框颜色设为#FEE4ED，选择一个背景图像3.jpg。4、在表格3中设置单元格背景图像为4.jpg，添加文字“嵌套表格”，字号为68像素，字体为隶书，颜色为#990000（可根据背景设置成适宜的颜色）。效果类似下图。,2.2应用表格,注意：表格布局的嵌套层次应控制在三层左右。嵌套层次过多将严重影响网页的下载速度，建议尽量少用复杂的、嵌套层次多的表格布局。,2.2应用表格,【提示】1、使用代码或CSS设置表格的背景图像，代码是background。2、使用代码或CSS设置单元格的背景图像。3、使用CSS设置文本的样式。,2.2应用表格,问题1：表格的高度、背景颜色、背景图像设置在DW8软件中，在文档窗口插入表格，选中整个表格或将鼠标插入点放在某个单元格内，【属性检测器】面板将显示表格或单元格宽度、高度设置文本框，显示背景颜色、背景图像选择文本框。在DWCS5软件中，对表格的基本属性取消了，要对表格进行高度、背景颜色、背景图像等属性的设置，需要使用CSS样式表进行设置，或直接在代码窗口中输入代码。设置表格属性，应在双标记的开始标记中添加代码；设置单元格属性，可以先将鼠标插入点放在设计窗口的表格单元格中，然后将文档窗口切换为代码/设计双重窗口，在代码窗口中，插入点显示在对应的双标记之间，只需在代码视图中将插入点置于开始标记中添加代码即可。,2.2应用表格,【练习】制作企业网站简介页面1、新建网页，输入网页标题“关于我们”，设置页边距为“0px”，页面字体为“宋体”、“12”、“灰色（#333333）”；保存页面，设置文件名为jieshao.html。2、插入8行1列的表格1，设置边框为1，边距为0，间距为0，居中对齐。3、将光标放在表格1的第一个单元格中，插入1行1列的表格2，宽度为“800px”，边框为0，设置单元格背景色为“灰色（#999999）”。4、将光标放在表格2中，输入文字“视友视频教学网简介”，文字大小“18px”，颜色“#FF9900”，字体“加粗”,居中对齐。,2.2应用表格,5、将光标放在表格1的第3个单元格中，插入1行2列的表格3，宽度800px；将光标放在表格3的第一个单元格中，插入图像，将单元格的分界线调整到最左边；在第二个单元格中插入文本。6、在表格1的第5个单元格中，插入1行2列的表格4，宽度800px；在表格4的第二个单元格中插入图片，将单元格的分界线调整到最右边；第一个单元格中插入文本。7、在表格1的第7个单元格中，插入1行1列的表格5，在表格5中添加文本；在表格1的第8个单元格中，插入1行1列的表格6，插入文本，设置文本“居中对齐”。8、将光标放在表格1的第二个单元格中，设置单元格高度为“5”，背景颜色“#66CCFF”,同样设置第4、6行单元格。保存设置，在IE中效果如下图。,2.2应用表格,2.2应用表格,【练习】制作购物车1、新建HTML网页文档，设置标题为“购物车”。2、打开【页面属性】对话框，设置【外观CSS】中上、下、左、右边距均为0px；设置页面字体为宋体，大小12px，文本颜色为灰色#666。3、在文档窗口插入3行4列的表格1，表格宽度1020px，边框、单元格边距、单元格间距均为0px。4、合并第一行所有单元格，设置单元格高度为5，背景颜色#A902D9。5、将插入点放在合并后的单元格中，切换到代码视图，删除空格编码“”。,2.2应用表格,6、切换到设计视图，合并第1列的第2、3行单元格，设置“水平”居中对齐，“垂直”居中，宽度210，高度70；将光标放在合并后的单元格中，插入图像logo.gif。7、选择第2列第3行单元格，设置宽度80，【水平】居中对齐，插入cart.jpg图像。8、选择第3列第3行单元格，设置【水平】居中对齐，宽度450；插入text_01.jpg、text_02.jpg、text_03.jpg。9、选择第4列第3行表格，将其拆分为3行，输入“欢迎来到SOLUKA购物网”，设置【水平】右对齐。10、在第4行单元格中输入“登陆|注册|帮助中心”，设置【水平】居中对齐。,2.2应用表格,11、在表格1下方插入1行3列的表格2，设置宽度为1020px。12、选择第1列单元格，设置【水平】右对齐，【垂直】居中，宽和高均为40，插入icon.jpg图像。13、选择第2列单元格，设置【水平】居中对齐，宽度130，插入mycart.jpg。14、选择第3列单元格，输入“全场购满100源免快递运费了解配送收费标准”。15、在表格2下方插入6行7列的表格3，宽度1020px，填充与边框为0，间距为1。16、在CSS面板中单击【新建CSS规则】按钮，在【选择器