[精选]电子商务网页制作项目框架网页与样式表培训课件

《[精选]电子商务网页制作项目框架网页与样式表培训课件》由会员分享，可在线阅读，更多相关《[精选]电子商务网页制作项目框架网页与样式表培训课件（34页珍藏版）》请在金锄头文库上搜索。

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

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

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

4、派上用场了。一般情况下使用系统提供的默认值，如mainFrame，topFrame，leftFrame等，这些名称都是约定俗成的。当然，你也可以使用自己定义的名称。,小贴士,选择框架和框架集,对框架和框架集进行操作，首先必须选中它。我们可以在文档窗口中选择框架或框架集，也可以通过“框架”面板进行选择。 1在文档窗口中选择框架或框架集 （1）选择框架 在“设计”视图中，按住Alt键的同时单击某个框架内部，即可选中该框架，此时该框架的边框被虚线环绕。 （2）选择框架集 单击框架集的某一内部框架边框即可选中该框架集，此时该框架集的所有边框被虚线环绕。,要执行这一操作，框架边框必须是可见的。如果看不到

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

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

7、页”命令，单击“保存”按钮，将保存该框架集。,保存框架和框架集,2一次保存 打开“文件”菜单，选择“保存全部”命令，Dreamweaver CS5将打开“另存为”对话框，依次提示要保存的内容。首先要保存的是主框架集，在文档窗口中会以斜线框包围整个框架，并同时弹出“另存为”对话框。,输入要保存的框架集名，单击“保存”后，将打开第二个“另存为”对话框，提示将要保存第一个框架文件，在文档窗口中也会以斜线框包围要保存的框架。 输入要保存的框架文件名称，单击“保存”后，将打开第三个“另存为”对话框，提示将要保存第二个框架文件。就这样，依次保存所有的框架文件。,设置框架和框架集属性,1设置框架的属性 设置

8、框架属性主要是通过设置框架的“属性”面板中的相应参数实现的，当选择某个框架时，“属性”面板中将显示该框架的属性。,框架名称：决定用来作为超级链接目标和脚本引用的当前框架名称。 源文件：设置框架的源文档。 滚动：设置在没有足够空间显示当前框架中的内容时是否使用滚动条。 不能调整大小：使浏览者不能调整框架大小。 边框：控制当前框架的边框是否显示。 边框颜色：设置所有和当前框架相邻的边框颜色。 边界宽度：设置框架左右边框和内容之间的距离（单位为像素）。 边界高度：设置框架上下边框和内容之间的距离（单位为像素）。,设置框架和框架集属性,2设置框架集的属性 要设置框架集的属性，可以选择该框架集，在“属性

9、”面板里设置相应的属性。,边框：控制当前框架集内框架的边框。 选择“是”可以显示三维灰色的边框； 选择“否”可以显示扁平灰色的边框； 选择“默认”可以由浏览器确定如何显示边框。 边框宽度：设置当前框架集中边框的宽度。 边框颜色：设置当前框架集中所有边框的颜色。 值：指所选择的行或列的大小。 单位：指所选择的行或列大小的单位。 行列选定范围：选取框架集的行或列。,CSS样式表,CSS样式表是网页设计中非常重要的技术，运用CSS样式表我们可以实现很多网页的样式和效果，还可以大大提高制作网页的效率，同时运用CSS+DIV进行网页布局则是更为高级和先进的网页布局技术。,什么是CSS样式表,CSS是层叠

10、样式表单（Cascading Style Sheets）的缩写，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。因此它最基本的概念就是层叠。层叠的意思是指在同一个HTML文档中可以有多种样式表存在，不同层次样式表根据其所在的位置拥有不同的优先级。要理解“层叠”的概念，首先应该了解一下CSS样式表的三种定义和使用的优先级。 1CSS样式表的三种定义 （1）外部样式表： 将一些样式信息定义在一个单独的外部文件中，其扩展名为.CSS。整个网站的所有文件都可以链接此文件，并使用其中定义的样式。 （2）内嵌样式表： 内嵌式样式表只在当前网页中起作用，位于区，与网页文件一起保存。只对当前

11、网页文件起作用。 （3）内联样式表： 将样式信息直接定义在网页中特定的标记和元素上，只对该标记和元素起作用。,什么是CSS样式表,2三种定义之间的关系 这三种定义中内联样式表最优先，其次是内嵌样式表，最后是外部样式表。它们之间是互相影响、互相继承的关系。网页元素最终显示的样式是优先级最高的样式定义，同时各元素会自动继承上级父元素中定义的样式。 3CSS样式表的功能 没有使用CSS样式表的网页只能算是初级作品，CSS样式表为网页创新奠定了基石。CSS样式表的功能如下： （1）对布局、字体、颜色、背景和其它图文效果实现更加精确的控制。 （2）只通过修改一个文件就可以改变多个网页的外观和格式。 （3

12、）在所有浏览器和平台之间具备兼容性。不像其它的网络技术，样式表的代码有很好的兼容性，也就是说，即使浏览者丢失了某个插件也不会发生中断，使用老版本的浏览器时，代码也不会出现杂乱无章的情况。 （4）可以与脚本语言相结合，使网页中的元素产生各种动态效果。 （5）更少的编码、更少的页数和更快的下载速度。由于CSS样式表能够简化网页的格式代码，所以能加快页面下载的速度。,CSS样式表的创建,1新建CSS样式表 在Dreamweaver CS3中，打开“格式”菜单，选择“CSS样式”子菜单中的“新建”命令，或者右键单击窗口右侧的“CSS”面板的空白处，在弹出的快捷菜单中选择“新建”，可以打开“新建CSS规

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

14、的参数设置。,CSS样式表的内容,在“新建CSS规则”对话框中作好选择并填写CSS名称后，点击“确定”，将会弹出“的CSS规则定义”对话框（“”即为新建CSS的名称。,在该对话框中我们可以看到左侧的“分类”列表中有八大类别：类型、背景、区块、方框、边框、列表、定位、扩展，每个类别在右侧都有相应的参数设置。,CSS样式表的创建,1选择“类型”类别，该类别中有如下参数可以定义： 【Font-family】（字体），设定时，需考虑浏览器中有无该字体。 【Font-size】（大小），注意度量单位。 【Font-weight】（粗细），除了normal（正常）、bold（粗体）、bolder（特粗）、

15、lighter（细体）外，还有9种以像素为度量为单位的设置方式。 【Font-style】（样式），也就是字体的样式，包括“normal（正常）”、“italic（斜体）”和“oblique（偏斜体）”。 【Line-height】（行高），就是行距。注意，行距只能以是字体大小值为 【Font-variant】（变形），可以将正常文字一半尺寸后大写显示，但IE目前不支持这项属性。 【Text-transform】（大小写），这项属性能轻而易举地控制字母大小写，有capitalize（首字大写）、uppercase（大写）、lowercase（小写）和none（无）4种。 【Text-decor

16、ation】（修饰），用于控制链接文本的显示形态，有underline（下划线）、overline（无下划线）、line-through（删除线）、blink（闪烁）和none（无，使上述效果均不会发生）等5种修饰方式。,CSS样式表的创建,2选择“背景”类别，有如下参数可以定义：,【Background-color】（背景颜色），设置背景颜色。 【Background-image】（背景图像），设置网页背景图像。 【Background-repeat】（重复），控制背景图像的平铺方式，有no-repeat（不重复）、repeat（重复，沿水平、垂直方向平铺）、repeat-X（横向重复，图像沿水平方向平铺）和repeat-Y（纵向重复，沿图像垂直方向平铺）4种选择。,【Background-attachment】（附加），用于控制背景图像是否会随页面的滚动而一起滚动。有fixd（固定，文字滚动时，背景图像保质固定）和scroll（滚动，背景图像随文字内容一起滚动）两种选择。 【Background-position】（水平位置/垂直位置），确定背景图像的水平、垂直位置。,CSS样式表