1 / 100

网页制作技术 ( 三剑客 )

网页制作技术 ( 三剑客 ). 第 3 章 动态网页制作技术实例集锦. 3.1 使用层与行为制作可移动的面板 3.1.1 最终效果. 第 1 章 网站制作入门. 必做作业： 制作移动层面板网页. CSS 概述. 一、 CSS 基本概念 CSS 是 Cascading Style Sheet 的缩写，一般称为 “ 层叠样式表 ” 或 “ 级联样式表 ” 。使用 CSS 能简化网页的格式代码，加快下载显示速度，也减少需要上传的代码数量，从而大大减少了重复劳动的工作量。 层叠样式表（ CSS ）是一系列格式设置规则，主要用于控制 Web 页面内容的外观。

vadin
Download Presentation

网页制作技术 ( 三剑客 )

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页制作技术(三剑客)

  2. 第3章 动态网页制作技术实例集锦 3.1 使用层与行为制作可移动的面板 3.1.1 最终效果

  3. 第1章 网站制作入门 必做作业： 制作移动层面板网页

  4. CSS概述 一、CSS基本概念 CSS是Cascading Style Sheet的缩写，一般称为“层叠样式表”或“级联样式表”。使用CSS能简化网页的格式代码，加快下载显示速度，也减少需要上传的代码数量，从而大大减少了重复劳动的工作量。 层叠样式表（CSS）是一系列格式设置规则，主要用于控制Web页面内容的外观。 使用CSS设置页码格式时，会将页面内容与表现形式分开。页面内容（HTML代码）驻留在

  5. CSS概述 HTML文件自身中，而用于定义代码表现形式的CSS形式则驻留在另一个文件（外部样式表）或 HTML文档的另一个部分（通常为文件头部分）中。

  6. CSS概述 ● 在Dreamweaver中可以定义以下样式类型： ① 自定义CSS规则(也称为类样式)：可以将样式属性应用于任何文本范围或文本块。 ② HTML标签样式重定义特定标签(如h1)的格式：创建或更改该标签(如h1)的CSS样式时，所有用该标签(如h1)设置了格式的文本都会立即更新。 ③ CSS选择器样式(高级样式)重新定义特定元素组合的格式设置，或重新定义CSS允许的其他选择器表单的格式设置。 高级样式还可以重新定义包含特定id属性标签的格式设置(例如,#myStyle定义的样式可应用于包含属性值为id=‘myStyle’的所有标签)。

  7. CSS概述 ● CSS规则可以位于以下的位置： ① 外部CSS样式表是一系列存储在一个单独的外部CSS (.css)文件中的CSS规则。利用HTML文档文件头部分中的链接，该文件可以被链接到 Web站点中的一个或多个页面。

  8. CSS概述 ② 内部(或嵌入式)CSS样式表是一系列包含在HTML文档文件头部分的style标签内的CSS规则。 ③ 内联样式是标签的特定实例中在整个HTML文档内定义的。

  9. CSS概述 二、CSS基本语法 CSS定义由3部分构成： 选择器(selector)、属性(properties)和属性的取值(value)。 基本格式如下： selector { property: value} //选择器 {属性：值} 说明：① 选择器是标识格式元素的术语； ②属性和属性值都属于声明部分，声明部分用于定义元素样式。

  10. CSS概述 示例： H1{ font-size: 16 pixels; font-family: “华文楷体”; font-weight: bold; } 注释：① H1是选择器，介于{ }之间的所有内容都是声明。 ②声明包括了：属性(如 font-family)和值(如“华文楷体”)。

  11. CSS概述 ③ 上例中CSS规则为H1标签创建一个特定的样式：使用此样式的所有H1标签的文本都将被设置为16像素大小、‘华文楷体’字体和粗体。

  12. CSS概述 例： body { color: black } 选择器body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值。 此例的效果是：使页面的文字变成黑色。

  13. CSS概述 ● 如果属性的值是由多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合。 例：P { font-family: “sans serif”} // 定义段落字体为sans serif

  14. CSS概述 ● 如果需要对一个选择器指定多个属性时，可以用分号将所有的属性和值分开。 例：P { text-align：center ；color：red } // 段落居中排列，并且段落中的文字为红色。 为了定义的样式表方便阅读，也可以采用分行书写格式： P { text-align：center ； color：red }

  15. CSS概述 ● 在HTML页面中直接引用样式表的方法是：将样式表信息包含在<style>…</style>标签中，为了使样式表在整个页面中产生作用，应将该组标签及其内容放到<head>…</head>中。 例： 该实例中要设置HTML页面中所有H1标题字显示为蓝色。 代码如下：

  16. CSS概述 <html> <head> <title>This is a CSS sample</title> <style type= “text/css”> <! - - H1 {color : blue } --> </style> </head> <body>…页面内容…</body> </html>

  17. 说明： 有些低版本的浏览器不能识别style标签，这意味着低版本的浏览器会忽略style标签里的内容，并把style标签里的内容以文本的方式直接显示到页面上，为了避免这样的情况发生，则通过加 HTML注释的方式(<!—注释-->)隐藏内容而不让它显示。

  18. CSS概述 ● 在使用样式表过程中，经常会有几个标签用到同一个属性，例如规定HTML页面中凡是粗体字、斜体字、1号标题字都显示为红色，按照上面方法书写为： B {color : red} I {color：red} H1 {color ：red} 显然这样书写十分麻烦，可简写为： B，I，H1 {color：red} //用逗号分隔各标签

  19. CSS概述 三、在网页中插入CSS的代码实现 1、链接外部样式表 链接外部样式表是把样式表保存为一个样式表文件，然后在页面中用<link>标签链接到这个样式表文件，这个<link>标签必须放在页面的<head>区内。如下： <head> <link rel=“stylesheet” type=“text/css” href=“slstyle.css” > …….. <head>

  20. CSS概述 上面这个例子表示浏览器从slstyle.css文件中以文档格式读出定义的样式表。 其中：rel=“stylesheet”表示在页面中使用外部样式表；type=“text/css”是指文件的类型是样式表文件；href=“slstyle.css”表示文件所在的位置。 ● 一个外部样式表文件可以应用于多个页面。当改变这个样式表文件时，所有页面的样式都随着改变。 ●样式表文件可以用任何文本编辑器(例如记事本)打开并编辑。 ●一般样式表文件扩展名为.css，内容是定义的样式表，不包含HTML标签。

  21. CSS概述 2、内部样式表 内部样式表是把样式表放到页面的<head>区内，这些定义的样式就应用到页面中了，样式表用 <style>标签插入。如下： <head> <style type=“text/css” > .hg {font-size: 12px; line-height: 22px} body{background-image: url(“images/bg.jpg”)} </style> …….. </head>

  22. CSS概述 3、内嵌样式 内嵌样式是混合在HTML标签里使用的，用这种方法可以为某个标签单独定义样式。内嵌样式的使用是直接在HTML标签里加入style参数，而style参数的内容就是CSS的属性和值。示例如下： <p style=“color: blue; margin-right: 50px”> ……. </p>

  23. CSS概述 以上示例对一个段落标签<p>进行样式定义，定义该段落标签内的文本颜色为蓝色，右边距为50像素。 注： 在style参数后面的引号中的内容相当于在样式表大括号里的内容。

  24. CSS概述 四、应用CSS样式表的操作方法 1、链接外部样式表 外部样式表是包含了样式格式信息的一个单独文件。编辑外部样式表时，链接到该CSS样式表的所有文档也会随之更新以反映所做的编辑。 链接外部CSS文件的具体操作步骤如下： ① 打开网页文档。 ② 选择【窗口】—>【CSS样式】，调出CSS样式面板。(Shift+F11)

  25. CSS概述 ③ 在【CSS样式】面板中单击鼠标右键，在弹出的快捷菜单中选择【附加样式表】。 ④ 弹出【链接外部样式表】对话框。在该对话框中单击“文件/URL”文本框右边的“浏览…”按钮，在弹出的【选择样式表文件】对话框中选择样式表文件，点击“确定”。将样式表文件添加到文本框中，在“添加为”选项区中选择“链接”单选按钮。点击【确定】。即可实现链接外部样式表。

  26. CSS概述 2、创建新样式表 创建新样式表的具体操作步骤如下： ① 打开网页文档。 ② 选择【文本】—>【CSS样式】—>【新建】 ③在弹出的【新建CSS规则】对话框的“选择器类型”选项区中选中“类”单选按钮，在“名称”文本框中输入样式名称(如：.z)，在“定义在”选项区中选中“仅对该文档”。 ④ 单击【确定】，则弹出【.z的CSS规则定义】对话框。

  27. CSS概述 ⑤ 在【.z的CSS规则定义】对话框中进行样式设置。

  28. CSS概述 五、CSS的规则定义 如果要设计CSS样式，可以在【CSS规则定义】对话框中进行设置。其中包括八个选项，如：类型、背景、区块、方框、边框、列表、定位和扩展。 在每个选项中，都可以设置该类型的属性值。定义CSS样式的属性操作都是相同的，只要在【分类】列表框中选择一种类型，然后在右侧的属性中进行相关设置，最后单击【确定】按钮即可。

  29. 将所选定内容中的每个单词的首字母大写或将文本设置为全部大写或小写将所选定内容中的每个单词的首字母大写或将文本设置为全部大写或小写 指定字体的显示样式，包括正常、斜体和偏斜体。 1、定义CSS类型属性

  30. 确定背景图像是固定在它的原始位置还是随内容一起移动。确定背景图像是固定在它的原始位置还是随内容一起移动。 2、定义CSS背景属性

  31. 设置图像浮于页面的左边距或右边距。 指定是否可以在元素的某个侧边使用分层。 用于设置元素之间的间隔值。 用于设置元素内容和元素边界之间的间距距离。 3、定义CSS方框属性

  32. 设置边框的颜色。 设置元素边框的粗细。取消选择【全部相同】可设置全部各个边的边框宽度。 设置边框的样式外观。取消选择【全部相同】可设置元素各个边的边框样式。 4、定义CSS边框属性

  33. 设置项目符号或编号的外观。 设置列表项文本是否换行和缩进(外部)以及文本是否换行到左边距(内部)。 为项目符号指定自定义图像，单击【浏览】按钮通过选择图像，或输入图像的路径。 5、定义CSS列表属性

  34. 6、定义CSS定位属性

  35. 6、定义CSS定位属性

  36. 6、定义CSS定位属性

  37. 7、定义CSS扩展属性

  38. 7、定义CSS扩展属性 【扩展】样式属性包括【滤镜】、【分页】和【光标】选项，使用这些选项可以做出很多特殊效果。 CSS扩展面板中各项参数名称及功能描述如下： ● 滤镜 对样式所控制的对象应用特殊效果。 ● 分页 打印期间，在样式所控制的对象之前或之后强行分页。在下拉列表框中可选择要设置的选项。 ● 光标 当指针位于样式所控制的对象上时，改变指针图像。可以通过下拉列表选择选项。

  39. 第3章 动态网页制作技术实例集锦 3.2 使用CSS制作一个背景图片居中固定的页面 3.2.1 最终效果(css_bjgd.html)

  40. 第2章 网站制作入门 〓制作过程详解〓 1.新建文件（css_bjgd.html） 2.在新建网页文件中输入一篇较长的文章，需要产生下拉条。 3. 设置CSS样式 ① 调出CSS样式面板 方法一：菜单【窗口】—>【CSS样式】 方法二：快捷键Shift+F11 打开CSS样式面板 ② 设置CSS样式(.hg) 单击【新建CSS样式】按钮 ，在弹出的【新建CSS规则】对话框中设置各参数，具体见下图：

  41. 第2章 网站制作入门 〓制作过程详解〓 设置完毕后，单击‘确定’ —>在弹出的【.hg的CSS样式定义】对话框中做如下设置：

  42. 第2章 网站制作入门 〓制作过程详解〓 设置完毕后，单击‘确定’

  43. 第2章 网站制作入门 〓制作过程详解〓 ③ 运用CSS样式(.hg) 选择文本，在【属性】面板中单击【样式】后的下拉条， 选择【.hg】样式。 ④ 新建CSS样式(body) 单击【新建CSS样式】按钮 ，在弹出的【新建CSS规则】对话框中设置各参数，具体见下图：

  44. 第2章 网站制作入门 〓制作过程详解〓 设置完毕后，单击【确定】按钮，在弹出的【body的CSS样式定义】对话框中做如下设置： 单击【确定】完成设置。

  45. 第2章 网站制作入门 〓制作过程详解〓 4、保存文件，并浏览效果。

  46. 第1章 网站制作入门 必做作业： 1、使用CSS制作一个背景图片固定的网页。 2、制作‘达芬奇密码图书’网页。

  47. 第3章 动态网页制作技术实例集锦 3.3 利用层制作网页动画---相思落叶动画 3.3.1 最终效果(相思落叶动画.html)

More Related