《网页制作ch课程学习.pptx》由会员分享，可在线阅读，更多相关《网页制作ch课程学习.pptx（34页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、会计学1网页网页(wn y)制作制作ch第一页，共34页。4.1 案例案例(n l)10“校园风貌校园风貌校园留言簿校园留言簿1”网页网页n n案例效果n n“校园风貌校园留言簿1”是一个留言网页。利用Dreamweaver软件提供的表单功能，实现访问者和网站之间的交流。下面通过详细的步骤(bzhu)来介绍制作这个网页的过程。第2页/共34页第二页，共34页。4.1 案例案例(n l)10“校园风貌校园风貌校园留言簿校园留言簿1”网页网页n n设计过程n n1新建“案例9.html”网页n n2插入表单n n3插入表格n n4设置(shzh)表格n n5插入表格n n6设置(shzh)表格n
2、n7保存并预览 第3页/共34页第三页，共34页。4.1 案例案例(n l)10“校园风貌校园风貌校园留言簿校园留言簿1”网页网页n n相关知识n n1表单域和插入表单对象n n（1）表单域n n在 Dreamweaver 中，执行“插入”“表单”“表单”命令，如图4-31所示，或者通过从下图显示的“插入”（表单）工具栏中单击“表单”按钮，即可在窗口中插入表单域。n n红线虚框内的区域即为表单域，所有的表单对象都要插入到该红线框内，这样服务器才能(cinng)正确地处理用户所填写的信息。n n如果执行插入表单域的操作后，在窗口中仍看不见表单域，则可执行“查看”“可视化助理”“不可见元素”命令，
3、因为表单域是不可见元素。第4页/共34页第四页，共34页。4.1 案例案例10“校园校园(xioyun)风貌风貌校园校园(xioyun)留言簿留言簿1”网网页页n n相关知识n n1表单域和插入表单对象n n（2）表单对象n n在Dreamweaver 中，表单输入类型称为表单对象。用户可以通过“插入”“表单”菜单(ci dn)命令，从如图4-31所示的级联菜单(ci dn)中选择所需的对象进行插入操作；也可以在如图4-32所示的“插入”栏中的“表单”选项卡中直接单击表单对象按钮来插入表单对象。n n“表单”按钮 。单击该按钮，在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表
4、单之中，这样所有浏览器才能正确处理这些数据。n n“文本字段”按钮 。单击该按钮，在表单中插入文本域。文本域可接受任何类型的字母数字项。输入的文本可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。第5页/共34页第五页，共34页。4.1 案例案例10“校园风貌校园风貌(fngmo)校园留言簿校园留言簿1”网页网页n n相关知识n n1表单域和插入表单对象n n（2）表单对象n n“隐藏域”按钮 。单击该按钮，可以在表单域中插入一个可以存储用户数据的域。使用隐藏域可以存储用户输入的信息，如姓名、电子邮件地址(dzh)或偏爱的查看方式等，以便该用户下次访问站点时可以再次使用这些数据。n
5、 n“文本区域”按钮 。单击该按钮，可以在表单域中插入文本区域，在其中可以输入多行文字。n n“复选框”按钮 。单击该按钮，可以在表单域中插入复选框。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。n n“单选按钮”按钮 。单击该按钮，可以在表单域中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”。第6页/共34页第六页，共34页。4.1 案例案例(n l)10“校园风貌校园风貌校园留言簿校园留言簿1”网页网页n n相关知识n n1表单域和插入表单对象n n（2）表单对象n n“单选按钮组”按钮
6、。单击该按钮，可以在表单域中插入共享同一名称的单选按钮的集合。n n“列表/菜单”按钮 。单击该按钮，可以在表单域中插入列表/菜单。“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值，而且(r qi)只允许用户选择一个选项。n n“跳转菜单”按钮 。单击该按钮，可以在表单域中插入可导航的列表或弹出式菜单。跳转菜单允许您插入一种菜单，在这种菜单中的每个选项都链接到文档或文件。请参见创建跳转菜单。n n“图像域”按钮 。单击该按钮，可以在表单域中插入图像。可以使用图像域替换“提交”按钮，以生成图形化按钮。第7页/共34页第七页，共34页。4.1
7、 案例案例10“校园校园(xioyun)风貌风貌校园校园(xioyun)留言簿留言簿1”网网页页n n相关知识n n1表单域和插入表单对象n n（2）表单对象n n“文件域”按钮 。单击该按钮，可以在表单域中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。n n“按钮”按钮 。单击该按钮，可以在表单域中插入文本按钮。按钮在单击时执行任务，如提交或重置表单。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。n n“标签”按钮 。单击该按钮，可以在表单域中给表单加上标签，以形式开头和结尾。n n“字段集”按钮 。单击该按钮
8、，可以在表单域中添加一个字段集的同时(tngsh)在HTML源代码中添加标签。该标签是表单元素逻辑组的容器标签，在其中可以继续插入单选按钮、复选框、图像以及文件域等对象。第8页/共34页第八页，共34页。4.1 案例案例(n l)10“校园风貌校园风貌校园留言簿校园留言簿1”网页网页n n2 2设置文本字段的属性设置文本字段的属性n n文本字段有文本域和文本区域两种。单击文本字段有文本域和文本区域两种。单击“插入插入”（表单）工具栏中的（表单）工具栏中的“文本域文本域”按钮或按钮或“文本文本区域区域”按钮，即可在表单域中添加文本域或文本区域，例如在文档窗口中添加按钮，即可在表单域中添加文本域或
9、文本区域，例如在文档窗口中添加3 3个文本字段。个文本字段。n n文本字段文本字段“属性属性”面板中各个参数的含义。面板中各个参数的含义。n n文本域。指定文本的名称，是表单识别文本域。指定文本的名称，是表单识别(shbi)(shbi)该文本域的唯一标识。该名称中不能包含空格该文本域的唯一标识。该名称中不能包含空格或特殊字符，可以使用字母、数字和下划线的任意组合。或特殊字符，可以使用字母、数字和下划线的任意组合。n n字符宽度。设置域中最多可以显示的字符个数。字符宽度。设置域中最多可以显示的字符个数。n n最多字符数。设置单行文本域中最多可以输入的字符个数。如果将该文本框处保留空白，用最多字符
10、数。设置单行文本域中最多可以输入的字符个数。如果将该文本框处保留空白，用户则可输入任意数量的文本。如果文本超过域的字符宽度，文本将滚动显示。如果输入超过户则可输入任意数量的文本。如果文本超过域的字符宽度，文本将滚动显示。如果输入超过了最大字符数，表单则会发出警告。了最大字符数，表单则会发出警告。n n类型。指定文本字段为单行、多行还是密码域。类型。指定文本字段为单行、多行还是密码域。n n初始值。指定在首次载入表单时域中显示的值。初始值。指定在首次载入表单时域中显示的值。n n行数。设置多行文本域的高度。行数。设置多行文本域的高度。n n换行。指定用户输入的信息较多，无法在定义的文本区域内显示
11、时，如何显示用户输入的内换行。指定用户输入的信息较多，无法在定义的文本区域内显示时，如何显示用户输入的内容。选择容。选择“关闭关闭”或或“默认默认”选项，可防止文本换行到下一行，当用户输入的内容超过文本区域选项，可防止文本换行到下一行，当用户输入的内容超过文本区域的右边界时，文本将向左侧滚动。选择的右边界时，文本将向左侧滚动。选择“虚拟虚拟”选项，可在文本区域中设置自动换行，当用户选项，可在文本区域中设置自动换行，当用户输入的内容超过文本区域的右边界时，文本换行到下一行；当提交数据进行处理时，自动换输入的内容超过文本区域的右边界时，文本换行到下一行；当提交数据进行处理时，自动换行并不应用于数据
12、，数据作为一个字符串提交。选择行并不应用于数据，数据作为一个字符串提交。选择“实体实体”选项，在文本区域可设置自动换选项，在文本区域可设置自动换行，当提交数据进行处理时，也对这些数据设置自动换行。行，当提交数据进行处理时，也对这些数据设置自动换行。n n类。可以将类。可以将CSSCSS规则应用于对象。规则应用于对象。第9页/共34页第九页，共34页。4.1 案例案例10“校园校园(xioyun)风貌风貌校园校园(xioyun)留言簿留言簿1”网网页页n n相关知识n n3设置(shzh)复选框和单选按钮的属性n n（1）设置(shzh)复选框的属性n n复选框的“属性”面板中的各个参数的含义如
13、下：n n复选框名称。给复选框命名，复选框的名称是表单识别该复选框的唯一标识。n n选定值。设置(shzh)复选框被选中时的取值。当用户提交表单时，该值被传送给服务器端应用程序。n n初始状态。设置(shzh)首次载入表单时复选框是已选中还是未选中。第10页/共34页第十页，共34页。4.1 案例案例10“校园风貌校园风貌(fngmo)校园留言簿校园留言簿1”网页网页n n相关知识n n3设置复选框和单选按钮的属性n n（2）设置单选按钮的属性n n下面以图4-1所示的校园留言簿中的“性别”为例介绍单选按钮的设置方法。在窗口中选择一个单选按钮，在“属性”面板的“单选按钮”和“选定值”文本框的默
14、认值为“radiobutton”，用户可以(ky)自行设定参数，然后在“初始状态”组合框中选中“未选中”单选按钮。n n单选按钮的“属性”面板中的各个参数的含义如下：n n单选按钮名称。给单选按钮命名，该名称是表单识别该单选按钮的唯一标识。n n选定值。设置该单选按钮被选中时发给服务器的值。n n初始状态。确定在浏览器中载入表单时该单选按钮是否被选中。第11页/共34页第十一页，共34页。4.1 案例案例(n l)10“校园风貌校园风貌校园留言簿校园留言簿1”网页网页n n相关知识n n按钮是表单中非常重要的一个表单对象，如果没有按钮的话，就不会把表单中的数据传送出去。按钮属性的设置如下：n
15、n按钮名称。给按钮命名，按钮名称是表单识别该按钮的唯一标识。“提交”和“重置”是两个保留名称，“提交”通知表单将表单数据提交给处理应用程序脚本，“重置”将所有的表单域重置为初始值。n n值。指定显示在按钮上的文本。在Dreamweaver 8中默认的值为“提交”，用户也可以自行设置文字内容。n n动作(dngzu)。指定按钮被单击时发生的动作(dngzu)。共有3个单选按钮提供选择：选中“提交表单”单选按钮，当鼠标单击该按钮时，则将表单数据提交给处理程序或脚本；选中“重设表单”单选按钮，当鼠标单击该按钮时，则将自动地恢复所有表单对象的初值；选中“无”单选按钮，当鼠标单击该按钮时不发生任何动作(
16、dngzu)。第12页/共34页第十二页，共34页。4.1 案例案例(n l)10“校园风貌校园风貌校园留言簿校园留言簿1”网页网页n n相关知识n n5设置列表/菜单和文件域的属性n n（1）设置列表/菜单的属性n n列表/菜单的属性设置如下：n n列表/菜单。为该菜单指定一个表单能够识别的惟一标识。n n类型。指定该菜单是单击时下拉的菜单，还是显示一个列有项目的可滚动列表。如果用户希望表单在浏览器中显示时仅有一个选项可见，则选中“菜单”单选按钮；如果用户希望表单在浏览器中显示时列出部分或全部的选项，或者允许用户选择多个菜单项，则选中“列表”单选按钮。n n高度（仅“列表”类型）。设置菜单中
17、显示的项数。n n选定(xun dn)范围。指定用户是否可以从列表中选择多个项。n n初始化时选定(xun dn)。设置列表中默认的菜单项。单击列表中的一个或多个菜单项即可。第13页/共34页第十三页，共34页。4.2 案例案例(n l)11“校园风貌校园风貌校园留言簿校园留言簿2”网页网页 n n相关知识n n5设置列表/菜单和文件域的属性n n文件域的属性设置如下：n n文件域名称。指定文件域的名称，该名称是表单识别(shbi)文件域的惟一标识。n n字符宽度。指定该域最多显示的字符数。n n最多字符数。指定域中最多可以容纳的字符数。如果用户通过单击“浏览”按钮来确定文件，文件名和路径则可
18、超过指定的“最多字符数”的值。但是如果用户直接在文本框中输入文件名和路径，那么文件域仅允许输入“最多字符数”值所指定的字符数。第14页/共34页第十四页，共34页。4.2 案例案例11“校园风貌校园风貌(fngmo)校园留言簿校园留言簿2”网页网页 n n案例效果n n“校园风貌校园留言簿2”是以“校园风貌校园留言簿1”为基础，加上Dreamweaver提供的表单的图像域和隐藏域功能(gngnng)制作而成。下面通过详细的步骤来介绍制作这个网页的过程。第15页/共34页第十五页，共34页。4.2 案例案例11“校园校园(xioyun)风貌风貌校园校园(xioyun)留言簿留言簿2”网网页页 n
19、 n设计过程n n1拆分单元格n n2插入隐藏域n n3插入图像(t xin)域n n4修改“重置留言”按钮n n5保存并预览 第16页/共34页第十六页，共34页。4.2 案例案例11“校园校园(xioyun)风貌风貌校园校园(xioyun)留言簿留言簿2”网网页页 n n相关知识n n1设置图像域的属性n n图像域的属性设置如下：n n图像区域(qy)。指定图像域的名称，该名称是表单识别图像域的惟一标识。n n源文件。指定图像源文件的路径。n n替换。用于输入描述性文本，如果该图像在浏览器中载入失败就将显示这些文本。n n对齐。设置对象的对齐属性。n n 按钮。启动默认的图像编辑器并打开该
20、图像文件进行编辑，如果用户的电脑上安装了Fireworks 8，系统就会打开Fireworks 8对图像进行编辑。第17页/共34页第十七页，共34页。4.2 案例案例(n l)11“校园风貌校园风貌校园留言簿校园留言簿2”网页网页 n n相关知识n n2设置隐藏预的属性n n单击“插入”（表单）工具栏中的“隐藏域”按钮 在窗口中添加(tin ji)一个隐藏域。选中隐藏域，在“属性”面板的“隐藏区域”文本框中输入“hiddenfield”，在“值”文本框中可以指定其值。第18页/共34页第十八页，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式表 n n案例效果n nCSS（
21、Cascading Style Sheets，层叠样式表）是一种设计网页样式的工具。目前，Internet Explorer 4.0、Netscape Navigator 4.0或更高版本的浏览器都能正确地显示带有CSS样式的网页。使用CSS样式不仅可以轻松地让网页中的对象产生动态的效果，同时还简化了HTML中各种繁琐的标签，使得(sh de)各个标签的属性更具有一般性和通用性。第19页/共34页第十九页，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式表 n n设计(shj)过程 第20页/共34页第二十页，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式
22、表 n n相关知识n n1新建 CSS规则n n在Dreamweaver 8中，“CSS样式”面板被集成(j chn)到浮动面板中，处于浮动面板的最上方，且处于隐藏状态。打开“CSS样式”面板的方法有3种：n n执行“窗口”“CSS样式”命令；n n使用功能组合键“Shift+F11”；n n单击“属性”面板中 的按钮。第21页/共34页第二十一页，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式表 n n相关知识n n1新建 CSS规则n n“CSS样式”面板中各个按钮的具体含义如下：n n“全部”按钮 。单击该按钮，显示当前文档中定义的所有的CSS规则。n n“正在”按钮
23、 。单击该按钮，显示选定的CSS样式的详细属性。n n“显示类别视图”按钮 。单击该按钮，所选样式的属性区域中的各个属性将以类别的形式显示出来。n n“显示列表视图”按钮 。单击该按钮，所选样式的属性区域中的各个属性将以列表的形式显示出来。n n“只显示设置属性”按钮 。仅显示那些已进行设置的属性。n n“附加样式表”按钮 。用于在HTML文档中链接一个外部的CSS文件。n n“新建CSS规则”按钮 。用于创建新的CSS样式。n n“编辑(binj)样式”按钮 。用于编辑(binj)现有的CSS样式。n n“删除CSS规则”按钮 。用于删除(“)CSS样式”面板中选中的规则。第22页/共34页
24、第二十二页，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式表 n n相关知识n n（2）新建 CSS规则n n创建CSS样式可以分为3种,即创建自定义CSS样式（“类（可应用于任何标签）”）、重定义HTML标签（“标签（重新定义特定标签的外观）”）和使用(shyng)CSS选择器（“高级（ID、伪类选择器）”）。n n创建自定义CSS样式（“类（可应用于任何标签）”）n n重定义HTML标签（“标签（重新定义特定标签的外观）”）n n该类型用于重新定义特定的HTML标签的默认格式设置，完成设置后不需进行任何操作就可以应用到重定义的网页中。n n使用(shyng)CSS选择器
25、（高级（ID、伪类选择器）第23页/共34页第二十三页，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式表 n n相关知识相关知识(zh shi)(zh shi)n n2 2设置设置CSSCSS样式表的属性样式表的属性n n在在Dreamweaver 8Dreamweaver 8中中CSSCSS样式表的属性共分为样式表的属性共分为8 8类：类型、背景、区块、方框、边框、列表、类：类型、背景、区块、方框、边框、列表、定位和扩展。定位和扩展。n n（1 1）类型）类型n n“类型类型”选项主要用于定义网页中文本的字体、颜色和字体风格等。选项主要用于定义网页中文本的字体、颜色和字体
26、风格等。n n字体。用于设置该样式的字体样式。字体。用于设置该样式的字体样式。n n大小。用于设置文本的大小。大小。用于设置文本的大小。n n粗细。用于对字体应用特定的粗体量。粗细。用于对字体应用特定的粗体量。n n样式。指定样式。指定“正常正常”、“斜体斜体”或者或者“偏斜体偏斜体”作为字体样式。默认的设置是作为字体样式。默认的设置是“正常正常”。n n变体。用于设置文本的小型大写字母变体。变体。用于设置文本的小型大写字母变体。n n行高。用于设置文本所在行的高度。行高。用于设置文本所在行的高度。n n大小写。用于将所选内容的每个单词的首字母大写或者将文本设置为全部大写或小写。大小写。用于将
27、所选内容的每个单词的首字母大写或者将文本设置为全部大写或小写。n n修饰。用于设置文字的修饰效果，如下划线、删除线和使文本闪烁等。修饰。用于设置文字的修饰效果，如下划线、删除线和使文本闪烁等。n n颜色。用于设置文本的颜色。颜色。用于设置文本的颜色。第24页/共34页第二十四页，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式表n n相关知识n n2设置CSS样式表的属性n n（2）背景n n“背景”选项主要用于对背景元素进行一些高级设置。n n对话框中各个参数的定义如下：n n背景颜色(yns)。用于设置元素的背景颜色(yns)。n n背景图像。用于设置元素的背景图像。n
28、n重复。用于设置是否以及如何重复背景图像。n n附件。用于设置背景图像是固定在其原始位置还是随内容一起滚动。n n水平/垂直位置。用于设置背景图像相对于元素的初始位置。这可以用于将背景图像与页面中心垂直或水平对齐。如果“附件”属性为(“)固定”，位置则相对于“文档”窗口而不是元素。第25页/共34页第二十五页，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式表n n相关知识n n2设置CSS样式表的属性n n（3）区块n n“区块”选项主要用于控制块中内容的间距、对齐方式和文字缩进等。n n对话框中各个参数的定义如下：n n单词间距。用于设置单词之间的距离。选择“正常”选项时
29、，系统根据默认的设置来设定单词之间的距离；选择“值”选项时，可以通过在文本框中输入数值，并在右侧的下拉列表中选择单位的办法设置单词之间的距离。n n字母间距。用于设置字母之间的距离。选择“正常”选项时，系统根据默认的设置来设定字母之间的距离；选择“值”选项时，可以通过在文本框中输入数值，并在右侧的下拉列表中选择单位的办法设置单词之间的距离。n n垂直(chuzh)对齐。用于设置文本或图像相对于其父级元素在垂直(chuzh)方向的对齐方式。下拉列表中有“基线”、“下标”、“上标”、“顶部”、“文本顶对齐”、“中线对齐”、“底部”、“文本底对齐”和“值”等9种对齐方式。第26页/共34页第二十六页
30、，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式表n n相关知识n n2设置CSS样式表的属性n n（3）区块n n文本对齐。用于设置文本的对齐方式，有“左对齐”、“右对齐”、“居中”和“两端对齐”等4种对齐方式。n n文字缩进。用于设置文本的缩进程度。n n空格。用于设置文档中处理空格的方式，下拉列表中3个选项的含义如下：n n“正常”：按正常方法处理空格，即多个(du)空格会被当作一个空格处理；n n“保留”：保留原代码中所有的空格形式；n n“不换行”：当文档中的文本过长时不会自动换行，若想换行则必须使用换行标记。n n显示。用于设置区块的显示方式。第27页/共34页
31、第二十七页，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式表n n相关知识相关知识n n2 2设置设置CSSCSS样式表的属性样式表的属性n n（4 4）方框）方框n n“方框方框”选项主要用于控制元素在页面上的放置方式的标签和属性的设置。选项主要用于控制元素在页面上的放置方式的标签和属性的设置。n n对话框中各个参数的定义如下：对话框中各个参数的定义如下：n n宽宽/高。用于设置方框的宽度和高度。高。用于设置方框的宽度和高度。n n浮动。用于设置块元素的浮动效果。下拉列表中浮动。用于设置块元素的浮动效果。下拉列表中3 3个选项的含义如下：个选项的含义如下：n n“左对齐左
32、对齐”：将元素放到页面的左边空白处；：将元素放到页面的左边空白处；n n“右对齐右对齐”：将元素放到页面的右边空白处；：将元素放到页面的右边空白处；n n“无无”：对页面元素不使用浮动样式。：对页面元素不使用浮动样式。n n清除。用于清除设置的浮动效果，清除。用于清除设置的浮动效果，“左对齐左对齐”：不允许分层出现在元素的左边；：不允许分层出现在元素的左边；“右对齐右对齐”：不允许分层出现在元素的右边；：不允许分层出现在元素的右边；“两者两者”：元素的左边和右边都：元素的左边和右边都不能出现分层；不能出现分层；“无无”：允许分层出现在元素的侧面。：允许分层出现在元素的侧面。n n填充。用于设置
33、元素内容与元素边框之间的距离。分别在填充。用于设置元素内容与元素边框之间的距离。分别在“上上”、“下下”、“左左”、“右右”下拉列表中输入数值，并在右侧的下拉列表中选择相应的单位下拉列表中输入数值，并在右侧的下拉列表中选择相应的单位(dnwi)(dnwi)，即可完成设置。，即可完成设置。n n边界。用于设置一个元素的边框与另一个元素之间的距离。边界。用于设置一个元素的边框与另一个元素之间的距离。第28页/共34页第二十八页，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式表n n相关知识相关知识n n2 2设置设置CSSCSS样式表的属性样式表的属性n n（5 5）边框）边框
34、n n“边框边框”选项主要用于定义元素周围边框的设置。选项主要用于定义元素周围边框的设置。n n对话框中各个参数的定义如下：对话框中各个参数的定义如下：n n样式。用于设置边框的外观。用户可以分别在样式。用于设置边框的外观。用户可以分别在“上上”、“下下”、“左左”、“右右”下拉列表中选择边框格式下拉列表中选择边框格式(g shi)(g shi)。n n宽度。用于设置边框的粗细。具体的设置方法与宽度。用于设置边框的粗细。具体的设置方法与“样式样式”类似。类似。n n颜色。用于设置各个边框的颜色。颜色。用于设置各个边框的颜色。n n（6 6）列表）列表n n“列表列表”选项主要用于为列表标签定义
35、列表设置。选项主要用于为列表标签定义列表设置。n n对话框中各个参数的定义如下：对话框中各个参数的定义如下：n n类型。用于设置项目符号和编号的外观。类型。用于设置项目符号和编号的外观。n n项目符号图形。用于为项目符号设置自定义图像。可以单击按钮进行选择，项目符号图形。用于为项目符号设置自定义图像。可以单击按钮进行选择，也可以直接输入图像的路径。也可以直接输入图像的路径。n n位置。用于设置列表的位置。选择位置。用于设置列表的位置。选择“外部外部”选项列表贴近左侧边框，选择选项列表贴近左侧边框，选择“内部内部”选项列表则缩进。选项列表则缩进。第29页/共34页第二十九页，共34页。4.3 案
36、例案例(n l)12 定义定义CSS样式表样式表n n相关知识相关知识n n2 2设置设置CSSCSS样式表的属性样式表的属性n n（7 7）定位）定位n n“定位定位”选项主要用于设置与选定的选项主要用于设置与选定的CSSCSS样式相关的内容在页面上的定位方式。样式相关的内容在页面上的定位方式。n n对话框中各个参数的定义如下对话框中各个参数的定义如下(rxi)(rxi)：n n类型。用于设置定位的类型，下拉列表中类型。用于设置定位的类型，下拉列表中4 4个选项的含义如下个选项的含义如下(rxi)(rxi)：n n“绝对绝对”：放置层时使用绝对坐标；：放置层时使用绝对坐标；n n“固定固定”
37、：将层的位置固定；：将层的位置固定；n n“相对相对”：放置层时使用相对坐标；：放置层时使用相对坐标；n n“静态静态”：将层的位置设为不可移动。：将层的位置设为不可移动。n n显示。用于设置网页中元素的可见性，下拉列表中显示。用于设置网页中元素的可见性，下拉列表中3 3个选项的含义如下个选项的含义如下(rxi)(rxi)：n n“继承继承”：继承父级层元素的可视性属性；：继承父级层元素的可视性属性；n n“可见可见”：无论父层元素是否可见都显示层内容；：无论父层元素是否可见都显示层内容；n n“隐藏隐藏”：无论父层元素是否可见都隐藏层内容。：无论父层元素是否可见都隐藏层内容。n n宽宽/高。
38、设置层的宽度和高度。高。设置层的宽度和高度。第30页/共34页第三十页，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式表n n相关知识相关知识n n2 2设置设置CSSCSS样式表的属性样式表的属性n n（7 7）定位）定位n nZ Z轴。用于设置层的堆叠顺序。轴。用于设置层的堆叠顺序。Z Z轴值较高的元素显示在轴值较高的元素显示在Z Z轴值较低的元素的上方。轴值较低的元素的上方。n n溢位。用于设置层的内容层边界时的处理方式，下拉列表中溢位。用于设置层的内容层边界时的处理方式，下拉列表中4 4个选项的含义如下：个选项的含义如下：n n“可见可见”：层的内容超出层的边界时，
39、层会自动向下或向右扩展其大小，以使所有的层：层的内容超出层的边界时，层会自动向下或向右扩展其大小，以使所有的层内容都可见；内容都可见；n n“隐藏隐藏”：层的内容超出层的边界时，层不会改变其大小，也不会出现滚动条，超出部：层的内容超出层的边界时，层不会改变其大小，也不会出现滚动条，超出部分不可见；分不可见；n n“滚动滚动”：不论层内容是否超出层的边界，层中都会出现滚动条；：不论层内容是否超出层的边界，层中都会出现滚动条；n n“自动自动”：层的内容超出层的边界时，层不会改变其大小，但会显示滚动条，用户可以：层的内容超出层的边界时，层不会改变其大小，但会显示滚动条，用户可以通过拉动滚动条浏览超
40、出的部分。通过拉动滚动条浏览超出的部分。n n置入。通过对置入。通过对“上上”、“下下”、“左左”、“右右”4”4个下拉列表的设置控制层的位置。个下拉列表的设置控制层的位置。n n裁切。用于设置层的可见部分。如果裁切。用于设置层的可见部分。如果(rgu(rgu)制定了剪辑区域，则可通过脚本语言访问制定了剪辑区域，则可通过脚本语言访问它并操作属性以创建像擦除这样的特殊效果。它并操作属性以创建像擦除这样的特殊效果。第31页/共34页第三十一页，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式表n n相关知识n n2设置CSS样式表的属性n n（8）扩展(kuzhn)n n“扩展(
41、kuzhn)”选项卡包括分页、光标和滤镜3个属性。n n对话框中各个参数的定义如下：n n分页。设置在打印页面时，在样式所控制的对象之前或者之后强行分页。n n光标。设置当鼠标指针指到应用样式的对象上时改变指针图像。n n滤镜。用于对样式所控制的对象应用特殊效果（例如模糊和反转等）。第32页/共34页第三十二页，共34页。4.3 案例案例(n l)12 定义定义CSS样式表样式表n n相关知识n n3CSS样式表的应用(yngyng)n n（1）为图片添加边框效果n n如果网站中的图片周围有一个很细的边框，会显得十分精致。这可以通过在插入图片时，在“属性”面板中将边框属性设置为“1”来实现，默认的颜色为黑色，和默认的文字颜色一样。如果希望边框有更多的效果，利用“属性”面板就不能实现，这时可以借助CSS样式为图片的边框添加更多的效果。n n（2）定义指定范围内的标签样式n n使用“高级（ID、伪类选择器等）”选项也能定义指定范围内的标签样式。例如，可以定义单元格内的水平线为红色，而单元格之外的水平线的样式保持不变。第33页/共34页第三十三页，共34页。感谢您的观看感谢您的观看(gunkn)！第34页/共34页第三十四页，共34页。