电子商务网页制作项目框架网页与样式表培训课件.ppt

1、DW电子商务网页制作框架网页与样式表说出什么是框架；会建立框架与框架集，为各个框架填充内容；会调整框架的外观；熟悉CSS样式表的功能；能够完成样式表的创建和编辑；会创建外部样式表并应用到页面上。框架网页的含义框架是一种布局技术，它是将浏览器窗口划分为若干个独立的区域，每个区域中都有各自的内容，这些区域称为“框架”。框架本身并不包含具体的网页元素，它只是存放文档的容器，每个框架显示不同的页面，并且可以互不干扰地变化。这样的一组框架就构成了框架集。框架集本身不包含任何内容，它只是一个HTML文件，告诉浏览器如何显示一组框架。框架常用于站点导航系统，如网页的导航按钮、网页LOGO和标题等，对于一个网

2、站而言，其中的许多网页一般都具有相同的导航、LOGO等部分，这时我们可以将这些相同的部分做成框架网页，这样就可以在每个页面中重复使用，从而大大提高网页制作的效率。在进行框架网页设计时，应先花一些时间进行版面的安排，分清各个框架页面内容的主次，把最重要的页面放置在面积最大、位置最醒目的框架中。创建框架和框架集在Dreamweaver CS5中可以通过两种方法插入框架集：1通过“插入”栏，在现有网页中直接插入框架。选择“插入”工具栏的“布局”选项中的“框架”选项，可以随意选择自己需要的框架集类型。创建框架和框架集2使用“新建文档”对话框创建新的空框架集。使用“新建文档”对话框创建新框架集的一般步骤

3、如下：（1）打开“文件”菜单，选择“新建”命令，将打开“新建文档”对话框，在“示例中的页”类别中选择“框架页”。创建框架和框架集（2）在“示例页”列表中选择框架集类型，可以在对话框右端看到该框架集的预览效果和相关描述。（3）单击“创建”按钮，在文档窗口可以看到新创建的框架集，同时Dreamweaver CS5会打开一个“框架标签辅助功能属性”对话框。（4）为每个框架输入恰当的标题名称，然后点击“确定”即可成功创建框架页。框架的标题即框架的名称，它用于识别不同的框架，在指定打开链接目标的目标框架或脚本在引用该框架时，框架名称就派上用场了。一般情况下使用系统提供的默认值，如mainFrame，to

4、pFrame，leftFrame等，这些名称都是约定俗成的。当然，你也可以使用自己定义的名称。小贴士选择框架和框架集对框架和框架集进行操作，首先必须选中它。我们可以在文档窗口中选择框架或框架集，也可以通过“框架”面板进行选择。1在文档窗口中选择框架或框架集（1）选择框架在“设计”视图中，按住Alt键的同时单击某个框架内部，即可选中该框架，此时该框架的边框被虚线环绕。（2）选择框架集单击框架集的某一内部框架边框即可选中该框架集，此时该框架集的所有边框被虚线环绕。要执行这一操作，框架边框必须是可见的。如果看不到框架边框，你可以通过打开“查看”菜单，选择“可视化助理”子菜单中的“框架边框”使框架边框

5、可见。小贴士选择框架和框架集2在“框架”面板中选择框架或框架集在文档窗口中选择框架和框架集有时候不是很方便，Dreamweaver CS3提供了“框架”面板，便于对框架和框架集进行选择操作。打开“窗口”菜单，选择“框架”命令，或按快捷键Shift+F2，可以打开“框架”面板。（1）选择框架在“框架”面板中单击框架即可选中该框架，此时在文档窗口中该框架的边框被虚线环绕，在“框架”面板中该框架周围会显示一个选择轮廓。（2）选择框架集在“框架”面板中单击环绕框架集的边框，即可选中该框架集，此时该框架集的所有边框被虚线环绕，在“框架”面板中该框架集周围会显示一个选择轮廓。保存框架和框架集对于初学者来说

6、，为了避免出现混乱，在创建完框架和框架集后，最好立刻保存框架和框架集。使用了框架的页面包含若干个文件。用户在保存网页时不仅需要保存框架中的网页，还要保存框架集文件。在具体操作中可以分别保存或者一次保存所有文件。1分别保存将光标定位在要保存的框架中，打开“文件”菜单，选择“保存框架”命令，将打开“另存为”对话框，输入要保存的文件名，点击“保存”即可。按此方法依次保存其它框架。在保存了所有的框架后，还需要保存框架集。在“框架”面板或文档窗口中选中框架集，打开“文件”菜单，选择“保存框架页”命令，单击“保存”按钮，将保存该框架集。保存框架和框架集2一次保存打开“文件”菜单，选择“保存全部”命令，Dr

7、eamweaver CS5将打开“另存为”对话框，依次提示要保存的内容。首先要保存的是主框架集，在文档窗口中会以斜线框包围整个框架，并同时弹出“另存为”对话框。输入要保存的框架集名，单击“保存”后，将打开第二个“另存为”对话框，提示将要保存第一个框架文件，在文档窗口中也会以斜线框包围要保存的框架。输入要保存的框架文件名称，单击“保存”后，将打开第三个“另存为”对话框，提示将要保存第二个框架文件。就这样，依次保存所有的框架文件。设置框架和框架集属性1设置框架的属性设置框架属性主要是通过设置框架的“属性”面板中的相应参数实现的，当选择某个框架时，“属性”面板中将显示该框架的属性。框架名称：决定用来

8、作为超级链接目标和脚本引用的当前框架名称。源文件：设置框架的源文档。滚动：设置在没有足够空间显示当前框架中的内容时是否使用滚动条。不能调整大小：使浏览者不能调整框架大小。边框：控制当前框架的边框是否显示。边框颜色：设置所有和当前框架相邻的边框颜色。边界宽度：设置框架左右边框和内容之间的距离（单位为像素）。边界高度：设置框架上下边框和内容之间的距离（单位为像素）。设置框架和框架集属性2设置框架集的属性要设置框架集的属性，可以选择该框架集，在“属性”面板里设置相应的属性。边框：控制当前框架集内框架的边框。选择“是”可以显示三维灰色的边框；选择“否”可以显示扁平灰色的边框；选择“默认”可以由浏览器确

9、定如何显示边框。边框宽度：设置当前框架集中边框的宽度。边框颜色：设置当前框架集中所有边框的颜色。值：指所选择的行或列的大小。单位：指所选择的行或列大小的单位。行列选定范围：选取框架集的行或列。CSS样式表CSS样式表是网页设计中非常重要的技术，运用CSS样式表我们可以实现很多网页的样式和效果，还可以大大提高制作网页的效率，同时运用CSS+DIV进行网页布局则是更为高级和先进的网页布局技术。什么是CSS样式表CSS是层叠样式表单（Cascading Style Sheets）的缩写，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。因此它最基本的概念就是层叠。层叠的意思是指在同一

10、个HTML文档中可以有多种样式表存在，不同层次样式表根据其所在的位置拥有不同的优先级。要理解“层叠”的概念，首先应该了解一下CSS样式表的三种定义和使用的优先级。1CSS样式表的三种定义（1）外部样式表：将一些样式信息定义在一个单独的外部文件中，其扩展名为.CSS。整个网站的所有文件都可以链接此文件，并使用其中定义的样式。（2）内嵌样式表：内嵌式样式表只在当前网页中起作用，位于区，与网页文件一起保存。只对当前网页文件起作用。（3）内联样式表：将样式信息直接定义在网页中特定的标记和元素上，只对该标记和元素起作用。什么是CSS样式表2三种定义之间的关系这三种定义中内联样式表最优先，其次是内嵌样式表

11、，最后是外部样式表。它们之间是互相影响、互相继承的关系。网页元素最终显示的样式是优先级最高的样式定义，同时各元素会自动继承上级父元素中定义的样式。3CSS样式表的功能没有使用CSS样式表的网页只能算是初级作品，CSS样式表为网页创新奠定了基石。CSS样式表的功能如下：（1）对布局、字体、颜色、背景和其它图文效果实现更加精确的控制。（2）只通过修改一个文件就可以改变多个网页的外观和格式。（3）在所有浏览器和平台之间具备兼容性。不像其它的网络技术，样式表的代码有很好的兼容性，也就是说，即使浏览者丢失了某个插件也不会发生中断，使用老版本的浏览器时，代码也不会出现杂乱无章的情况。（4）可以与脚本语言相

12、结合，使网页中的元素产生各种动态效果。（5）更少的编码、更少的页数和更快的下载速度。由于CSS样式表能够简化网页的格式代码，所以能加快页面下载的速度。CSS样式表的创建1新建CSS样式表在Dreamweaver CS3中，打开“格式”菜单，选择“CSS样式”子菜单中的“新建”命令，或者右键单击窗口右侧的“CSS”面板的空白处，在弹出的快捷菜单中选择“新建”，可以打开“新建CSS规则”对话框。在该对话框中，可以设定CSS样式表选择器的类型、名称和CSS样式表定义的位置。“选择器类型”用于确定CSS规则的选择器类型；“选择器名称”文本框指定新建CSS样式表的名称；“规则定义”用于指定CSS样式定义

13、的位置，如选择第一项“仅限该文档”则新建内部样式表，选择第二项“新建样式表文件”将新建外部样式表。CSS样式表的内容在“新建CSS规则”对话框中作好选择并填写CSS名称后，点击“确定”，将会弹出“的CSS规则定义”对话框（“”即为新建CSS的名称。在该对话框中我们可以看到左侧的“分类”列表中有八大类别：类型、背景、区块、方框、边框、列表、定位、扩展，每个类别在右侧都有相应的参数设置。CSS样式表的内容在“新建CSS规则”对话框中作好选择并填写CSS名称后，点击“确定”，将会弹出“的CSS规则定义”对话框（“”即为新建CSS的名称。在该对话框中我们可以看到左侧的“分类”列表中有八大类别：类型、背

14、景、区块、方框、边框、列表、定位、扩展，每个类别在右侧都有相应的参数设置。CSS样式表的创建1选择“类型”类别，该类别中有如下参数可以定义：【Font-family】（字体），设定时，需考虑浏览器中有无该字体。【Font-size】（大小），注意度量单位。【Font-weight】（粗细），除了normal（正常）、bold（粗体）、bolder（特粗）、lighter（细体）外，还有9种以像素为度量为单位的设置方式。【Font-style】（样式），也就是字体的样式，包括“normal（正常）”、“italic（斜体）”和“oblique（偏斜体）”。【Line-height】（行高），就是

15、行距。注意，行距只能以是字体大小值为【Font-variant】（变形），可以将正常文字一半尺寸后大写显示，但IE目前不支持这项属性。【Text-transform】（大小写），这项属性能轻而易举地控制字母大小写，有capitalize（首字大写）、uppercase（大写）、lowercase（小写）和none（无）4种。【Text-decoration】（修饰），用于控制链接文本的显示形态，有underline（下划线）、overline（无下划线）、line-through（删除线）、blink（闪烁）和none（无，使上述效果均不会发生）等5种修饰方式。CSS样式表的创建2选择“背景”

16、类别，有如下参数可以定义：【Background-color】（背景颜色），设置背景颜色。【Background-image】（背景图像），设置网页背景图像。【Background-repeat】（重复），控制背景图像的平铺方式，有no-repeat（不重复）、repeat（重复，沿水平、垂直方向平铺）、repeat-X（横向重复，图像沿水平方向平铺）和repeat-Y（纵向重复，沿图像垂直方向平铺）4种选择。【Background-attachment】（附加），用于控制背景图像是否会随页面的滚动而一起滚动。有fixd（固定，文字滚动时，背景图像保质固定）和scroll（滚动，背景图像随文字

17、内容一起滚动）两种选择。【Background-position】（水平位置/垂直位置），确定背景图像的水平、垂直位置。CSS样式表的创建3选择“区块”类别，有如下参数可以定义：【Word-spacing】（单词间距）：设置单词的间距。【Letter-spacing】（字母间距）：设置字母或字符的间距。增大间距设为正值，减小间距设为负值。【Vertical-align】（垂直对齐方式）：指定对象的垂直对齐方式。【Text-align】（文本对齐）：设置对象文本的水平对齐方式。【Text-indent】（文本缩进）：指定第一行文本缩进的程度。【White-space】（空格）：确定如何处理元素中

18、的空白。【Display】（显示）：指定是否显示以及如何显示元素。CSS样式表的创建4选择“方框”类别，有如下参数可以定义：【Width/Height】（宽和高）：设置元素的宽度和高度。【Float】（浮动）：设置其他元素（如文本、层、表格等）在哪个边围绕元素浮动。【Clear】（清除）：清除不允许层的边。【Padding】（填充）：指定元素内容与元素边框之间的间距。选择“全部相同”可设置相同，取消选择“全部相同”可分别设置上、下、左、右各边的填充间距。【Margin】（边界）：指定一个元素的边框与另一个元素之间的间距。CSS样式表的创建5选择“边框”类别，有如下参数可以定义：【Style】（

19、样式）：设置边框的样式外观。【Width】（宽度）：设置边框的精细。【Color】（颜色）：设置边框的颜色。CSS样式表的编辑1CSS样式表代码 在前文的“CSS规则定义”对话框中设置的CSS样式参数会被Dreamweaver以CSS代码的形式记录到HTML网页或CSS文件中。例如，新建一个类样式，名称为“mystyle”，选择“仅限该文档”：CSS样式表的编辑点击“确定”后，在“CSS规则定义”对话框的“类型”类别中设置“Font-size”为12px，“Color”为#666，“Text-decoration”为“none”，点击“确定”。切换到“代码”视图，在代码头部可以看到下图所示的C

20、SS代码：实际上，网页文件本质上是由HTML代码和其它各种代码组成的文档，在编辑器中的各种设置都会生成相应的代码。我们也可以直接在“代码”视图中输入CSS代码，和在对话框中设置的结果是一样的。CSS样式表的编辑Dreamweaver CS5的代码编辑功能很实用，在“代码”视图中编辑代码时，经常会有弹出菜单提示，我们可以利用这些弹出菜单快速地编辑CSS代码。以前面的“mystyle”设置为例，在代码中找到标记对，在其中输入“.style”后就会弹出菜单，菜单中列出了所有可编辑的CSS代码项，在菜单中选择“font-size”后回车即可输入这段代码（输入“f”可快速定位到以“f”开头的项）：在实际

21、工作中，如果对于代码设置CSS样式很熟练的话，对网页设计会更加有利，效率也更高。当然，对代码的掌握相对来说也较难一些，要对各种常用设置的代码单词比较熟悉才行。小贴士CSS样式表的编辑2修改CSS样式表当某个样式创建成功后，就可以在Dreamweaver CS5窗口的“CSS样式”面板中看到该样式的名称。要想修改已经设置过的CSS样式，可以直接双击要修改的样式名称，将打开“CSS规则定义”对话框，在里面可以对样式属性进行修改。当然，我们也可以在“代码”视图中找到要修改的样式，直接在代码里修改。外部样式表的应用前面的CSS样式表是定义在网页内部的，属于内部样式表，它只对该网页对作用。在制作网站时，

22、经常要使用外部样式表，它可以应用到所有关联的网页中。1新建外部样式表文件在前文的图6-8“新建CSS规则”对话框中，在设置了“选择器类型”和“选择器名称”后，如果在“规则定义”里选择“新建样式表文件”，点击“确定”，可以打开“将样式表文件另存为”对话框。选择保存位置、输入文件名后，将新建的CSS文件以单独文档的形式存储在站点中，可以将后面要设置的各种CSS样式都保存在该CSS文件内。外部样式表的应用2链接外部CSS样式表文件创建了外部CSS样式表后，必须将网页链接到样式表文件，才能让样式表文件中的样式设置应用到网页中。链接外部样式表方法如下：（1）首先打开要链接外部样式表的网页文件。（2）打开

23、“格式”菜单，选择“CSS样式”子菜单中的“附加样式表”命令，将打开“链接外部样式表”对话框在“文本/URL”中输入要链接的外部样式表文件的URL，或单击“浏览”查找并指定外部样式表文件；在“添加为”选项中选择“链接”，如果要嵌套样式表则要选择“导入”。（3）点击“确定”后，即可将外部样式表链接到网页中，从而使该外部样式表中的样式设置对当前网页起作用。外部样式表的应用2链接外部CSS样式表文件创建了外部CSS样式表后，必须将网页链接到样式表文件，才能让样式表文件中的样式设置应用到网页中。链接外部样式表方法如下：（1）首先打开要链接外部样式表的网页文件。（2）打开“格式”菜单，选择“CSS样式”

24、子菜单中的“附加样式表”命令，将打开“链接外部样式表”对话框在“文本/URL”中输入要链接的外部样式表文件的URL，或单击“浏览”查找并指定外部样式表文件；在“添加为”选项中选择“链接”，如果要嵌套样式表则要选择“导入”。（3）点击“确定”后，即可将外部样式表链接到网页中，从而使该外部样式表中的样式设置对当前网页起作用。本项目介绍了框架网页与样式表的知识。在同一个站点中有许多网页具有相同的导航栏、标题栏等，如果在制作每个网页时都要重复制作这些相同的内容显得效率较低，框架能够很好的解决这个问题。CSS样式表是一种非常有用的技术，它可以很好的设置网页元素的各种样式，将样式表与网页相关联，关联的网页

25、将自动套用样式表中的格式，使所有网页中都可以应用相同的样式，可以保证站点风格的统一，还能提高网页制作的效率。推荐资源脚本之家之“CSS教程”：http:/ 【解析】【解答】（1）吸烟生成烟雾，烟雾分子因为运动，扩散到空气中，使非吸烟者被动吸入烟雾分子，造成被动吸烟；（2）钢轨由铁原子构成.每两根钢轨间都有一定的间隙，夏天由于气温高，使得钢轨中铁原子的间隔变大，表现为钢轨的体积膨胀，则钢轨间的间隙变小.故答案为：（1）分子是在不断运动的；（2）夏天高温，铁原子间的间隔变小.【分析】微粒观点的主要内容：物质是由分子（或原子构成），分子间有间隔，分子处于永停息的运动状态中.（1）烟雾分子属气体分子，

26、在空气中扩散较快，使非吸烟者被动吸烟；（2）铁原子间有一定的间隔，温度升高，则铁原子间间隔变大，反之则变小，夏天高温状态下，铁原子间间隔变大，使得钢轨体积膨胀，则钢轨间的缝隙变小.【考点】物质的微粒性 【解析】【解答】（1）铁属于金属单质，是由铁原子直接构成；氯化钠是由钠离子和氯离子构成的；二氧化碳是由二氧化碳分子构成的（2）当质子数=核外电子数，为原子，a=2+8=10，该粒子是原子原子序数=质子数=10当a=8时，质子数=8，核外电子数=10，质子数核外电子数，为阴离子。故答案为：原子；离子；分子；10；10；阴离子。【分析】物质有微粒构成，构成物质的微粒有原子、分子、离子是那种，金属、稀

27、有气体由原子构成；常见气体由分子构成；碱和盐由离子构成。当核电荷数等于核外电子数，表示原子，小于时表示阴离子，大于时表示阳离子。25.初中化学学习中，我们初步认识了物质的微观结构。（3）升高温度分子运动速度就加快，只要能说明温度高了运动速度快了的例子都可以，例如阳光下或者温度高衣服干得快，温度高水蒸发的快，糖在热水里比在冷水里溶解的快等；（4）由于注射器装入的药品少，现象明显，又是封闭状态，所以可以控制体积节省药品、可以减少气体挥发造成的污染等故答案为：（1）固体；（2）分子的质量大小或者相对分子质量大小（合理即给分）；（3）阳光下或者温度高衣服干得快，温度高水蒸发的快，糖在热水里比在冷水里溶

28、解的快等；（4）可以控制体积节省药品、可以减少气体挥发造成的污染等【分析】（1）根据实验现象判断氯化铵的状态；（2）根据它们的相对分子质量的区别考虑；（3）根据温度与运动速度的关系考虑；（4）根据注射器的特点考虑【解析】【解答】A、向一定质量的盐酸和氯化钙的混合溶液中逐滴加入碳酸钠溶液至过量的过程中，生成氯化钠的质量不断增大，当碳酸钠与盐酸和氯化钙完全反应时，氯化钠的质量不再增大，A符合题意；B、向稀硫酸中加水，溶液的pH逐渐增大至接近于7，B不符合题意；C、向一定质量的稀硫酸中逐滴加入氢氧化钡溶液至过量的过程中，氢氧化钡不断和硫酸反应生成硫酸钡沉淀和水，溶质的质量减小，质量分数也减小，当氢氧

29、化钡和稀硫酸完全反应时，继续滴加氢氧化钡溶液时，质量分数应该由小变大，C不符合题意；D、加热高锰酸钾时，当温度达到一定程度时，高锰酸钾开始分解生成锰酸钾、二氧化锰和氧气，随着反应的进行，剩余固体的质量不断减少，当高锰酸钾完全反应时，剩余固体的质量不再变化，D符合题意。【解析】【解答】A、可燃物的在着火点是一定的，不会降低，故说法错误，可选；B、爆炸是物质在有限的空间内，发生急剧燃烧，短时间内聚集大量的热，使周围的气体的体积膨胀造成的可见爆炸需要氧气的参与，可使燃烧处于暂时缺氧状态，达到灭火的目的故说法正确，不可选；【解析】【解答】燃烧需要同时满足三个条件：一是要有可燃物，二是可燃物要与氧气接触

30、，三是温度要达到可燃物的着火点；以上三个条件都能满足时，可燃物才能发生燃烧。灭火的原理就是破坏燃烧的条件。根据描述，自动灭火陶瓷砖会喷出氦气和二氧化碳，故灭火的原理是隔绝氧气。【解析】【解答】解：A、从题目中表格知，H2体积分数为10%70%的H2和空气混合气体，点燃时会发生爆炸，故A正确；B、收集的H2能安静燃烧，说明H2的纯度大于等于80%，故B项错误；C、用向下排空气法收集H2 ，保持试管倒置移近火焰，如果没有听到任何声音，表示收集的H2纯度大于等于80%，故C项错误；D、氢气和空气的混合气体点燃不一定发生爆炸，只有在爆炸极限范围内才会发生爆炸，故D项错误故选A【分析】可燃物质（可燃气体

31、、蒸气和粉尘）与空气（或氧气）在一定的浓度范围内均匀混合，遇着火源可能会发生爆炸，这个浓度范围称为爆炸极限可燃性混合物能够发生爆炸的最低浓度和最高浓度，分别称为爆炸下限和爆炸上限，在低于爆炸下限时不爆炸也不着火，在高于爆炸上限同样不燃不爆因此可燃性气体在点燃前需要先检验气体的纯度，以防发生爆炸【解析】【解答】A、通过实验可以知道烧杯中的白磷没有燃烧，说明烧杯中的白磷虽然温度达到着火点，但没有与氧气接触，所以不能燃烧，从而可以判断烧杯中的热水不仅仅是只起到加热的作用，故A说法正确；B、铜片上白磷燃烧是温度达到了着火点且与氧气接触，满足燃烧的条件，故B说法正确；C、铜片上的红磷没有燃烧是温度过低没

32、有达到其着火点，没有满足燃烧的条件，故C说法正确；D、烧杯中的白磷通入空气（氧气）就会燃烧，出现“水火相容”的奇观，故D说法错误故选D24.能源、环境、安全已成为人们日益关注的问题 （1）三大化石燃料包括煤、_、天然气等；它们都是_（填“可再生”或“不可再生”）能源 （2）控制反应的条件可使燃料充分燃烧燃煤发电时，将煤块粉碎成煤粉的目的是_ （3）天然气主要成分为甲烷，写出甲烷充分燃烧的化学方程式_ 下列有关天然气（或甲烷）的说法正确的是_（填字母）A沼气中的主要成分是甲烷B甲烷气体不会产生温室效应C用天然气代替煤作燃料，有利于减少酸雨形成 You and your friends are l

33、eaving a concert on a Friday night.When you get outside,your ears are ringing.You have to shout to be heard.36 So no harm doneright?Not quite.Temporary buzzing may be easy to ignore,but repeated exposure to loud noise will eventually cause serious-and irreversible(无法治愈的)-hearing loss.A new study con

34、ducted by researchers at Brigham and Womens Hospital in Boston shows that one in five people between the ages of 12 and 19 are experiencing slight hearing loss,and one in 20 have mild hearing loss.37 But the good news is that there plenty of ways you can protect your ears from further damage and sti

35、ll listen to the music you love:Ask around.Ask around.Put your earbuds in or your headphones on,and then ask a friend next to you whether or not he or she can hear what youre listening to.38 Turn it down.Buy noise-canceling headphones.Buy noise-canceling headphones.A pair of earbuds or headphones that fits comfortably will limit outside noise so that you can hear your music better at lower volumes.