嵌入式样式表的建立(图).doc

嵌入式样式表的建立(图)嵌入式样式表是内嵌于网页内的一段HTML语言代码，它统一定义了当前网页的样式。可以在网页中创建一个嵌入式样式表使得网页具有统一的风格。嵌入式样式表与外接样式表的不同之处在于，嵌入式样式表只能作用于当前的网页，而不能覆盖链接到当前站点的其他网页中。其实，所谓的嵌入式样式表只不过是网页中各种元素的格式的一个集合，通过创建一个嵌入式样式表可以使网页具有统一的风格。 在FrontPage2000中创建一个嵌入式样式表的操作十分简单，在“格式”菜单中选择“样式”项，然后在弹出的“样式”对话框中就可以创建嵌入式样式表。单击对话框中的“新建”按钮，FrontPage2000会弹出一个嵌入式样式表的容器。在该对话框中首先应该输入新建的样式表的名称，而这个名称可以任意定义。接下来单击“格式”按钮为新建的样式表定义样式，在这里可定义的样式包括：字体、段落、边框、编号方式以及定位。 （1）在“文件”菜单中选择“新建”项，然后在右面弹出的子菜单中选择“站点”项，在弹出的“新建”对话框中把站点名称改为“样式表”，单击“确定”按钮。 （2）在文件夹列表视图中双击文件“defaulthtm”把该文件打开，然后把鼠标放到网页视图中，在“格式”某单中选择“样式”项，这时候FrontPage2000就会弹出标题为“样式”的对话框，如图1所示。 图1“样式”窗口 （3）在弹出的“样式”对话框中单击其中的“新建”按钮，从而为当前网页新建一个嵌入式样式表，这时候FrontPage20002000就会弹出一个标题为“新样式”的对话框，如图2所示。 图2“新样式”窗口 （4）在弹出的“新样式”对话框中有一栏为“名称”，在“名称”栏下面的文本框中输入所新建的嵌入式样式表的名称，在这里输人文本“mystyle”作为新建的样式表的名称。如图3所示。 图3“新样式”中名称的输入 （5）单击“新样式”对话框中的“格式”按钮，在按钮下面会弹出一个子菜单，如图4所示。在该子菜单中列出了新建的样式表中可以设置项。选择要设置的项，然后对其进行修改。 图4格式字菜单 （6）把所有样式都修改好之后，单击“新样式”对话框中的“确定”按钮返回“样式”对话框，这时候在“样式”对话框中左面的列表中列出了刚才新建的样式表的名称“mystyle”。如图5所示。 图5新样式的建立目前，比较流行的网页制作工具有Frontpage 2000和Dreamweaver 4.0，通过这2款所见即所得的网页编辑器，用户只要掌握简单的操作方法，不用编写HTML代码即可制作出整洁美观的网页。要使制作的网页具有良好的稳定性，使浏览者在采用不同分辨率和改变浏览器字体大小时都能看到您所设定格式的网页，从而始终保持网页版面的整洁美观，就需要使用样式表来锁定网页文字。 Frontpage 2000和Dreamweaver 4.0都可以通过创建样式表在网页中加入特定的HTML标记，从而使网页中文字始终显示为固定格式。样式表分为外部样式表和嵌入式样式表2种。外部样式表是保存在一个扩展名为.css的CSS文件中，它是对HTML语言的扩展，可应用于所有网页，但当网页被另存为HTML文件或在指定位置找不到CSS文件时，网页文字就不能被其控制; 内嵌样式表是嵌入在网页文件中的一段HTML代码，它只能用于当前编辑的单个网页，但因为不需要CSS文件的控制，网页文字始终被嵌入的代码所控制。在Frontpage 2000中，您既可以使用外部样式表、也可以使用嵌入式样式表; 而在Dreamweaver 4.0中，只能使用外部样式表。下面就是如何在Dreamweaver 4.0和Frontpage 2000中创建、应用样式表的具体步骤。 在Dreamweaver 4.0中使用样式表 一、创建样式表 1选择Window*CSS Styles，打开CSS Styles窗口(如图1所示)。 2单击CSS Styles窗口右下角的新建按钮，打开New Style对话框。在Selector栏输入样式选择器名称，例如设定9磅字体用.Font9、设定16磅字用.Font16。同时选中Make Custom Style (class)或Use CSS Selector单选项(如图2所示)。 3单击OK按钮，打开Save Style Sheet File As对话框，输入名称和路径以保存该样式表。注意: 样式表的保存位置可以是相对路径，也可以是绝对路径，但最好和网页文件保存在同一文件夹内，并和网页文件一同上传。 4单击确定按钮，系统弹出Style Definition对话框。在Category栏中选择Type选项，在Type栏中的Size栏中选择文字规格，如9或16。然后在其后的单位栏选择Points(磅)。在Line栏输入行距规格125150，单位选择%(如图3所示)。 5单击OK按钮，样式选择器名称就出现在CSS Styles窗口中了。同时，样式选择器名称还以操作命令的方式自动出现在Text*CSS Styles子菜单中。 您只需重复第25步的操作，就可以在一个样式表中设置多种文字样式。 二、链接和修改样式表 如果要使用过去编辑好的样式表文件，用户可以在CSS Styles窗口中单击链接按钮，找到过去保存的CSS文件，即可将它链接到当前编辑的网页文件中进行应用。 用户在编辑或链接CSS文件后，单击CSS Styles窗口的编辑按钮可以对此文件或文件中的某一样式进行修改。 在CSS Styles窗口中，鼠标右键单击一个样式选择器，选择其快捷菜单中Edit选项，可以退回到Style Definition对话框，对已设定的参数进行修改。 三、应用样式表 在网页编辑窗口点出光标，然后单击CSS Styles对话框中的一个样式选择器，以后输入的文字就被设定为该样式规定的文字规格。在已经输入文字的网页中，在任意位置点出光标并应用一个样式，该样式就对全部文字起作用; 如果是在表格中使用样式，该样式仅对当前单元格中的文字起作用。在一个或相邻段落中连续选中一些文字后应用一个样式，该样式只对选中的文字起作用。另外，应用样式表也可以在点出光标或选中文字后，执行Text*CSS Styles子菜单中相应的样式选择器名称完成。 在Frontpage 2000中使用样式表 一、创建外部样式表 1选择文件*新建*网页，打开新建对话框。 2单击样式表选项卡，选中普通样式表模板图标，然后单击确定按钮，进入new_page_1.css编辑窗口。 3选择格式*样式，打开样式对话框，其中样式栏显示的是所有默认HTML标记的名称。 4单击新建按钮，打开新样式对话框。在名称(选择器)栏中输入样式选择器名称，如font9，然后单击格式按钮，打开样式项目选择菜单(如图4所示)。 5选择样式项目选择菜单的字体选项，打开字体对话框，在大小栏中输入文字规格，例如9pt(9磅)，然后单击确定按钮返回新样式对话框。 6选择样式项目选择菜单的段落选项，打开段落对话框，在行距大小栏输入行距规格，如120%，然后单击确定按钮返回新样式对话框。 7单击确定按钮返回样式对话框，设定的样式选择器.font9就显示在样式栏中了。单击确定按钮即返回编辑窗口。 8重复第47步，直至设定好编辑网页所需的各种不同文字、行距规格。 9保存样式表，将文件保存在所编辑网页的保存位置即可。 二、创建嵌入式样式表 执行创建外部样式表的第37步，即可在当前网页中加入内嵌样式表。进入编辑窗口的HTML视图方式，我们就会看到，在网页的HTML代码的 段前出现了这样几段代码: 其中的.font9是样式选择器名称，font-size:9pt是文字规格，line-height:120%是行距规格。在此您还可以根据实际需要，修改创建新的样式选择器或直接编辑其中的数据。 三、应用样式表 链接样式表开始编辑网页时，如果要使用外部样式表，可以在编辑窗口的普通视图方式下选择格式*样式表链接，打开链接样式表对话框，单击添加按钮，在选择超链接对话框里选择要链接的样式表，如果要将该样式表链接到同一站点的全部网页，还应选中所有网页选项。单击确定按钮返回编辑窗口，即开始应用样式表。如果使用嵌入式样式表，创建样式表后可直接应用样式表。 应用样式表创建并链接好样式表后，Frontpage 2000就会把样式表中自定义的样式加入格式工具栏左端样式按钮的下拉列表中。在一个段落的任意位置点出光标，单击样式按钮，从下拉列表中选择一个样式选择器，即可将该样式应用于指定段落。需要说明的是: 网页文件段落开头的HTML代码为，段落结尾代码为; 编辑过程中按一次回车键Enter产生一个，标志着上一段的结束和下一段的开始。而按ShiftEnter按钮产生的HTML代码为，它只是表示在段落中插入了一个换行符，是同一段落另起一行后的延续。 注意事项 1在Frontpage 2000中，可以使用外部样式表和嵌入式的样式表; 而在Dreamweaver 4.0中，则只能使用外部样式表。 2Frontpage 2000应用一次样式表，只对光标所在的段落(即代码至之间而非至之间)的文字起作用。 3Frontpage 2000不能对选定的文字单独设置样式，但可以在HTML视图方式下以手工编写HTML代码的方法为指定文字单独应用样式。用户在指定文字开始处加入代码，在指定文字结尾处加入代码，即可使该样式应用于指定的文字，即使后来对该段落改设其他样式，为指定文字手动设置的样式也不会改变。 另外，HTML语言规定的字号只有7种(即8pt36pt)，而在样式表中，则可以不受此限制，您可以随心所欲地设定文字规格，直接输入所需的值即可，并且您还可以用像素、cm、mm等非标准单位来限定文字大小。 在设置文字样式的步骤中，您还可以同时设定字体、颜色、文字修饰(如斜体、粗体、下划线)等属性，不过，这些属性最好不要在样式表中设定，因为在样式表中设定过的属性，将无法用其他操作命令改变; 如果不在样式表中进行这些属性的设定，则可以随时使用设置文字属性的相关命令来设定除规格之外的其他文字属性，从而使网页设计更加灵活。定义HTML标记的样式 在Frontpage2000下，选择菜单“格式/样式”，会弹出一个定义样式的窗口，在CSS列表下拉菜单（位于左下）中，选“所有的HTML标记”， 这时在左边的列中会出现大部分常用的HTML标记，选中一个，然后点右下的“修改”， 会弹出一个“修改样式”窗口，在该窗口左下方有一个“格式”按钮，点击该按钮，会出现一个下拉菜单，一共有五个选项： 字体：顾名思义，这里就是定义字体的地方。 段落：跟“字体”差不多，点进去后根据提示定义就可以了。 边框：定义边框和背景等，根据提示定义就可以了。进入后有有“；边框”和“阴影”两个选项卡，在“边框”中定义边框，在“阴影”中定义前景和背景。 编号方式：共有三个选项卡，根据字面意义去定义就可以了。 定位：这就是CSS定位啦，但一般用在具体的网页元素当中。 是不很容易？当然，定义这些您最好要有一定的CSS的基础，不然您可能不知道定义的是什么。但是您只要了解一些语法规则就可以喽，剩下的就让Frontpage2000去做吧！ 有两个较为特殊的： 1、在网页任何位置点击鼠标右键，选“网页属性”，在属性面板的下侧有一个“样式”按钮，在这里可以定义body的样式，这样定义在形式上是内嵌式的，事实上这跟直接定义body是没有什么区别的，因为一个网页中只有一个body。 2、仍然在“网页属性”面板当中，选“背景”选项卡，在中上的位置有一个“启用超链接翻转效果”，选中它前面的复选框，然后点击它下面的“翻转样式”按钮，就可以定义一些字体了，事实上这样定义的是a:hover(即鼠标县停到超链接时的样式 )。 定义class或ID 这个仍然是在菜单“格式/样式”中，在右下的“列表”中选择“用户定义的样式”，这时，你以前定义的标记会出现在右侧的列表中。下面我们开始定义一个class(伪类)，点击右下的“新建”按钮，在最上面的“名称（选择器）”中输入一个名字，比如“.mycss”，注意，前面有一个“.”表明是定义一个class（如果定义ID前面是“#”），但在引用时并不算名字的一部分，只有“.”(或“#”)后面的才做为名字“！”名字! 取好名字后，就开始定义格式了，仍然点“格式”按钮，剩下的就跟上面所讲述的方法一样啦！这里就不再赘述。至于如何在网页的具体元素中引用我们接下来就会讲述。 定义内嵌式的样式 在大部分的属性面板的下侧，都会有一个样式按钮，点击后，就可以定义内嵌式的CSS样式了。比如，先建一个表格，在表格的一个单