第5章__修饰网页各种元素

1,第5章 修饰网页各种元素,虽然网页中的各种元素均可以通过可视化操作插入网页中，并且还可以通过相应的【属性】面板编辑这些元素。但是在操作过程中，难免还是会需要运用到这些元素的各种标签，比如选择表格等，所以了解HTML语言，才是真正地学会制作网页。 而网页制作最重要的方面之一就是格式控制，虽然HTML提供了各个网页元素的标签与参数来修饰网页，但是要想制作具有特殊效果的网页元素，例如模糊或者半透明图像等，就需要利用Dreamweaver中的CSS样式来实现。,2,本章知识要点:,HTML信息 各种元素标签 CSS创建方法 CSS样式属性,3,5.1 网页各种元素标签,HTML为一种普通文件中某些字句加上标示的语言，其目的在于运用标签使文件达到预期的显示效果。HTML不是程序语言，只是标示语言，只要明白了各种标签的用法便了解了HTML。HTML的格式非常简单，只是由文字及 标签组合而成，任何文字编辑器都可以对其进行编辑，当然最好使用专业的网页编辑软件。,5.1.1 HTML信息,HTML是一种简单易学的标示语言，分为文档头与文档体两个部分，在文档头中对这个文档进行一些必要的定义，文档体才是要显示各种文档信息。,4,5.1.2 文本标签,在浏览器中，任何HTML标签都看不到，但是在浏览器中所看到的网页效果却都是由这些标签生成的。标签是用来分割和标识文本的元素，使用HTML标签可以设置链接、标题、段落、列表和字符加亮区域等。,5,5.1.3 图像标签,标签并不能真正地将图像加入到HTML文档中，而是为标签中的src属性赋值，这个值是图像文件的文件名，也是图像文件在网页中的路径，这个路径可以是相对路径，也可以是网址。该标签属于空标签，即不需要关闭标签。网页的图像有两种，一种是插入式，一种是背景式。,6,5.1.4 表格标签,因为一个最简洁的表格，也包括表格本身、行、列与单元格，所以表格标签也包括这些相应的标签。并且这些标签都是围堵标签，需要关闭标签。,7,5.1.5 链接标签,在所有超级链接中，大致上可以分为两大类：一类是最基本的超级链接，标签为，另外一类为地图式链接，标签为。,8,5.2 CSS基础和应用,CSS（Cascading Style Sheets）即为级联样式表或层叠样式表，通常用名字或者HTML标签表示，在HTML文档中的CSS样式表可以控制大多数传统的文本格式。因为CSS样式在几乎所有的浏览器上都可以使用，所以可以轻松地控制页面的布局。,9,5.2.1 创建CSS规则,在网页中创建CSS规则，不仅方法众多，而且非常简单。下面从不同的途径介绍如何创建CSS规则。 1自动创建CSS规则 2在空白网页中创建CSS规则 3直接创建具有CSS规则的网页,10,11,5.2.2 在网页中插入CSS,CSS规则具有两种方式，一种是只定义在当前网页中，一种是建立独立的CSS文件。这时就需要根据不同的方式选择不同的应用，从可以在网页显示出效果。,12,5.3 CSS规则定义,无论是创建当前网页中的CSS样式，还是创建外部CSS样式，都只是创建了一个空样式，并没有具体内容。要想设置更详细的样式内容，需要在创建样式后的相应【CSS规则定义】对话框中设置。在该对话框中包括八个选项，每个选项中都可以设置该类型的属性值。,5.3.1 基本属性设定,网页中最基本的属性设置为网页背景设置与文本设置，所以在【CSS规则定义】对话框中，这两种属性也被放置在所有选项的最前方。,13,5.3.2 区域属性设定,为了更精确地确定网页元素所在网页中的位置，CSS样式中提供了各种元素显示位置的设置方法。比如【区块】属性可以设置字与字之间的距离；【方框】属性可以设置表格与表格之间的距离；【定位】属性则可以设置层在网页中的位置等。,14,5.3.3 元素特效设定,网页中的元素除了自身的属性外，还可以通过CSS样式为其添加其他效果，使其显示效果更加丰富。例如为各种元素添加不同形式的边框，或者使用图片代替呆板的项目符号等。,15,5.3.4 扩展属性设定,【扩展】样式属性包括滤镜、分页和指针选项。使用其中的选项可做出很多特殊效果。其中，【分页】选项是设置显示页面时强制分页的位置，在【之前】和【之后】下拉列表框中设置分页之前和分页之后的位置；光标为当指针位于样式所控制的对象上时改变指针图像；滤镜为对样式所控制的对象应用特殊效果。 1光标样式 2滤镜效果,16,5.4 Spry框架中的CSS设置,在为网页添加Spry构件时，只是简单地在【属性】面板中更改文字与添加内容，并没有更改Spry构件样式。在创建Spry构件的同时也创建了相应的CSS样式，Spry构件是通过自带的CSS样式来显示效果的。所以要想更改Spry构件显示效果，只要打开相应的CSS样式对话框即可。,17,5.4.1 Spry面板样式设置,在四种Spry构件中，Spry选项卡式面板、Spry折叠式与Spry可折叠面板虽然展示效果不同，但是构件样式基本相同，比如面板的宽度、背景颜色以及内部的文本样式的。下面以Spry折叠式构件为例介绍如何更改构件样式。 1限制面板宽度 2更改折叠构件的背景颜色 3设置折叠构件文本的样式,18,5.4.2 Spry菜单栏样式设置,Spry菜单栏与其他Spry构件有所不同，该菜单是一个具有多重等级的菜单栏，所以出现的显示状态更加复杂。首先Spry菜单栏名称为MenuBar，然后根据不同的布局形式其CSS规则名称也会有所不同。水平布局菜单的CSS规则名称为ul.MenuBarHorizontal；垂直布局菜单的CSS规则名称为ul.MenuBarVertical。下面以垂直布局菜单栏为例具体介绍如何设置菜单样式。,19,5.5 课堂练习：背景图案居中固定,说起网页背景图片，就会联想到覆盖整个网页的小图案背景。在Dreamweaver中有一种背景图案可以固定在网页中的某个位置，并且不会随着网页下拉条的移动而移动。,20,5.6 课堂练习：竖排诗歌,在网页中不仅能够显示横排的文字，还可以显示竖排文字。竖排文字能够体现古香古色效果，经常被应用到诗词网页当中。而这种效果不用通过图片的形式显示在网页中，通过Dreamweaver中CSS样式即可制作完成。,21,5.7