商务网页实例项目08课件.pptx

1、 内容提要在Dreamweaver中，用户可以快速地设置CSS样式，这更突出了使用Dreamweaver来格式化文本的功能。CSS是网页设计中众多样式的集成，使用CSS可以使页面风格统一化和标准化。CSS提供的链接功能可以让所有的网页使用同一种样式，需要改变页面的风格时，只需要改变CSS文件中对样式进行注释的内容即可。本项目将介绍利用Dreamweaver在页面中创建、设置表单和怎样在Dreamweaver中快速地设置CSS样式制作网页。1什么是框架框架网页的主要特点是将浏览器窗口拆分成不同的区域，每个区域呈现出不同的网页内容。框架网页中最大的区域通常作为主框架区，频繁变化的内容一般都安排在该

2、区域中显示，而主框架区之外的其他区域则相对稳定，常用于显示网页的标题和目录等内容。这样，在目录框架中单击某个超级链接时，就可以在主框架区显示相应的内容，避免浏览窗口的频繁切换。例如，如果一个网站的每个页面都具有相同的标题区域、目录区域、网站声明区域，不同的只是更换主要显示区域的文档内容，那么就可以将这些网页设计成框架网页。使用框架网页，更便于网站的维护和数据更新。活动活动1 1 学习使用框架网页学习使用框架网页 2创建框架与框架集在Dreamweaver中可以通过两种方式插入框架集：一种是在现有网页中直接拆分，另外一种是插入预先定义的框架集。利用“插入”工具栏“布局”选项中的“框架”选项，可以

3、随意选择自己需要的框架集类型，如图8-1、图8-2所示。3框架的调整、拆分和删除编辑框架网页与编辑普通的网页相同，也可以在框架网页中添加和格式化文本，设置网页的背景颜色和背景图片，在网页中插入图片和添加组件，还可以调整框架的大小等。（1）在框架网页中添加和格式化文本在框架网页中添加和格式化文本与在普通的网页中添加和格式化文本相同。（2）调整框架的大小在输入文本时，可能输入的文本内容比较多，但框架又比较小，所以输入文本时会有一部分文本不能显示，这样在查看文本时就有可能看不到文本的整体效果，这时可以调整框架的大小来显示文本。通常调整框架大小的方法有两种，即通过拖动框架的边框或指定想要的确切数值来调

4、整框架的大小。1）拖动框架的边框调整框架大小。将光标放在要调整的框架边框上，当光标变为“2”形状时，按住鼠标左键，并向下拖动。按此方法调整上图中右边两个框架的大小，调整后的框架网页如图8-3所示。2）精确设置框架大小。单击框架，将光标置于框架内，单击鼠标右键，从弹出的快捷菜单中选择“框架属性”命令，弹出“框架属性”对话框。在“框架大小”选项组中设置框架大小为固定像素值后，再指定框架的宽度和行高，单击“确定”按钮。3）拆分框架。在框架网页中不但可以调整框架的大小，还可以设置网页中显示的框架的多少。在框架网页中可以任意地拆分框架。拖动边框拆分框架。将光标放在要拆分的框架边框上，按住Ctrl健，同时

5、按住鼠标左键拖动框架边框，拖出一段距离后放开鼠标左键和Ctrl键，出现一个框架。将框架平均分成两行或两列。将光标放在要拆分的框架边框内，选择“框架”“拆分框架”命令弹出“拆分框架”对话框。选择“拆分为行”或“拆分为列”，单击“确定”按钮。4）删除框架。将光标放在要删除的框架中。选择“框架”“删除框架”命令。注意：从框架网页中删除框架时，该框架中显示的网页也会被删除，但是框架网页中其余的内容并没有被删除。若框架网页仅含有一个框架，就不能删除该框架。4设置框架和框架集（1）设置框架网页的背景颜色1）将光标放在要设置背景颜色的框架中。2）单击鼠标右键，从弹出的快捷菜单中选择“网页属性”命令，打开“网

6、页属性”对话框。3）单击“背景”标签，打开“背景”选项卡。4）单击“背景”右侧的按钮，从弹出的颜色面板中选择背景颜色。5）单击“确定”按钮。（2）设置框架网页的背景图片设置框架网页的背景图片与设置框架网页的背景颜色的方法类似。（3）设置框架网页属性设置框架的属性包括设置框架边框的隐藏或显示、设置框架的边距和间距以及设置框架中滚动条的显示和隐藏。1）显示或隐藏框架边框。可以根据所需的网页外观来选择显示或隐藏框架网页的框架边框。显示或隐藏边框的操作步骤如下。将光标放在任意一个框架中。单击鼠标右键，从弹出的快捷菜单中选择“框架属性”命令，弹出“框架属性”对话框；单击“框架网页”按钮，打开“网页属性”

7、对话框。选择或禁用“显示边框”复选框，就显示或隐藏框架边框。单击“确定”按钮，回到“框架属性”对话框。单击“确定”按钮。2）显示或隐藏框架滚动条。在“框架属性”对话框中，从“显示滚动条”的下拉列表中选择“显示”或“不显示”或者“需要时显示”。5保存框架和框架集每一个框架都包含一个文档，因此一个框架集会包含多个文档。在保存文档时不能只简单地保存一个文档，要将整个网页文档都保存下来。1CSS样式的使用CSS（Cascading Style Sheet，层叠样式表）简称样式表。它的推出是为了弥补HTML在界面表现方面的不足，可以对页面布局、字体、颜色、背景和其他图文效果实现更加精确的控制。CSS的功

8、能强大，不但使网页变得更加美观，而且简化了网页的更新工作，使之更易维护。CSS与HTML一样，是一种标记语言，需要通过浏览器解释执行。2CSS样式表概述CSS标准在1996年由W3C组织制定，全称是层叠样式表。样式表是出版商用于管理出版物外观的一种方式，对网页来说，样式表用于控制格式，例如文字的字体、字号、颜色等。层叠是指当同时引用多个样式时，将依据样式的层次处理，解决冲突。活动活动2 2 学习学习CSSCSS样式表相关知识样式表相关知识 HTML语言重视的是文档的内容，而不是显示效果。最初的HTML标准不尽人意，在网页内容的排版布局上也有很多困难，非专业人员很难让网页按自己的构思和创意来显示

9、信息。CSS的出现就是为了弥补HTML在这方面的不足，实现对页面布局、字体、颜色、背景和其他图文效果更加精确的控制。样式表的宗旨是将网页的结构与格式分离。使网页设计者能够很方便地调整网页的结构，而不影响显示效果。同时还可以制作统一的样式表，应用于多个网页，统一显示风格，避免了逐一修改各个网页，减少了重复劳动的工作量。HTML标签原本被设计为用于定义文档内容。通过使用、这样的标签，HTML的初衷是表达“这是标题”“这是段落”“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape和Internet Explorer）不断地将新的HTML

10、标签和属性（比如字体标签和颜色属性）添加到HTML规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C）这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML 4.0之外创造出样式（Style）。所有的主流浏览器均支持层叠样式表。样式表极大地提高了工作效率。样式表定义如何显示HTML元素，就像HTML 3.2的字体标签和颜色属性所起的作用那样。样式通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS可以称得上是WEB设计领

11、域的一个突破。作为网站开发者，能够为每个HTML元素定义样式，并将之应用于希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动更新。多重样式将层叠为一个。样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中第4条内联样式拥有最高的优先权。浏览器默认设置。外部样式表。内部样式表（位于标签内部）。内联样式（在HTM

12、L元素内部）。因此，内联样式（在HTML元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（默认值）。（1）样式表的基本结构样式表由样式规则组成，用以告诉浏览器如何显示一个网页文件。一个样式表可以包含多个规则，每个规则有着固定的格式，通常由两个部分组成，即选择符和样式。选择符是设置规则的对象，通常是一个HTML的元素，例如、等。样式是用来设置选择符的属性，用来描述选择符的显示效果。在网页中可以为一个显示对象设置多个属性，每个属性带一个值，属性与属性之间用“;”分开。样式表规则的格式如下：选择符 属性1:值1;属性2:值

13、2;例如：p color:red;font-size:20pt 这个规则是用来设置和之间的字体颜色和字体大小。（2）CSS样式表的类型根据在HTML文档中的引入方式和作用范围的不同，CSS样式表分为3类：内联样式表、文档级样式表、外部样式表。下面依次介绍这3种样式表。1）内联样式表。内联样式表用在标签和标签之间，主要在HTML标签中引用，用于临时设置某个HTML元素的样式。语法2）文档级样式表。文档级样式表通过标签嵌入在HTML文档的头部，一般位于标签和标签之间。文档级样式表对整个HTML文档都有效，用来设置整个文档的样式。语法 语法说明：可以设置多条CSS规则，每条规则占一行。注释“”用于兼

14、容不支持CSS的浏览器，可以省略。当浏览器不能识别CSS标记时，会自动忽略“”之间的内容。3）外部样式表。外部样式表的作用与文档级样式表相同，但是它定义在独立的CSS文件。使用时再链接到HTML文档中。语法：方法1：方法2：3新建样式表在Dreamweaver CS5中，当用户给网页元素赋予格式时，Dreamweaver CS5不同于以前版本就强制要求用户新建样式表，如图8-4所示。CSS选择器类型，如图8-5所示。在CS5中CSS的选择器类型有4种：类（可应用于任何HTML元素）、ID（仅应用于一个HTML元素）、标签（重新定义HTML元素）、复合内容（基于选择的内容）。（1）类选择符在选择

15、符中，可以指定类名，表示该样式可以应用到具有该类名的元素上。语法：选择符.类名属性1:值1;属性2:值2;语法说明：每个选择符可以拥有多个类，也就是说可以指定多个类名。在HTML元素中通过class属性指定类名。若不指定选择符，则样式可以应用到属于该类的所有HTML元素上，如图8-6所示。（2）ID选择符 选择符可以通过ID来指定，表示样式可以应用于具有该ID值的元素上。因为HTML文档中元素的ID值是唯一的，所以选择符中可省略元素名。ID选择符与类名选择符虽然在标签内的写法不太一样，但其显示在网页上的效果是一样的。语法：#ID值属性1:值1;属性2:值2;语法说明：不要漏掉ID前的“#”。在

16、HTML元素中通过ID属性指定ID名，如图8-7所示。（3）标签（重新定义HTML元素）标签是指原有的HTML元素，通过标签的重定义可以给HTML元素赋予样式。语法：标签属性1:值1;属性2:值2;。如图8-8、8-9所示。（4）复合内容（基于选择的内容）。标签是指原有的HTML元素，通过标签的重定义可以给HTML元素赋予样式。语法：标签属性1:值1;属性2:值2;。如图8-10所示。1）新建HTML空白文档，在里面输入文字，如图8-11所示。2）新建样式，弹出“新建CSS规则”对话框，选择器类型为类（可应用于任何HTML元素），选择器名称中输入“.biaoti”，规则定义选择为“新建样式表文

17、件”，单击“确定”按钮，如图8-12所示。3）保存样式表文件。选择保存路径在CSS文件夹下，对样式文件命名为“yangshi”。单击“保存”按钮，如图8-13所示。4）设置样式。设置字体为宋体、大小为16px、颜色为#F00，如图8-14所示。5）最终效果如图8-15所示。4链接外部CSS样式表1）在网页属性面板上选择CSS视图，单击，在弹出的CSS属性面板上单击鼠标右键，在弹出的快捷菜单中选择“附加样式表”，如图8-16所示。2）打开“链接外部样式表”对话框，选择“链接”单选按钮，如图8-17所示。单击“确定”按钮，就可以给页面添加链接外部样式表。5CSS样式的属性设置1）类型属性，如图8-

18、18所示。“类型”属性有以下9项。“字体”（font-family），设定时，需考虑浏览器中有无该字体。“大小”（font-size），注意度量单位。“粗细”（font-weight），除了normal（正常）、bold（粗体）、bolder（特粗）、lighter（细体）外，还有9种以像素为度量单位的设置方式。“样式”（font-style），也就是字型。“行高”（line-height），就是行距。注意，行距只能以字体大小值为单位。“变形”（font-variant），可以将正常文字一半尺寸后大写显示，但IE目前不支持这项属性。“大小写”（text-transform），这项属性能轻而易举

19、地控制字母大小写，有首字大写（capitalize）、大写（uppercase）、小写（lowercase）和无（none，使所有继承文字和变形参数被忽略，文字将以正常形式显示）4种。“修饰”（text-decoration），用于控制链接文本的显示形态，有下划线（underline）、上划线（overline）、删除线（line-through）、闪烁（blink）和无（none，使上述效果均不会发生）5种修饰方式。但IE4不支持文字闪烁。2）背景属性，如图8-19所示。“背景”属性有以下几项。“背景颜色”（background-color），设置背景颜色。“背景图像”（background

20、-image），设置网页背景图像。“重复”（background-repeat），控制背景图像的平铺方式，有不重复（no-repeat）、重复（repeat，沿水平、垂直方向平铺）、横向重复（repeat-X，图像沿水平方向平铺）和纵向重复（repeat-Y，图像沿垂直方向平铺）4种选择。“附加”（background-attachment），用于控制背景图像是否会随页面的滚动而一起滚动。有固定（fixed，文字滚动时，背景图像保持固定）和滚动（scroll，背景图像随文字内容一起滚动）两种选择。“水平位置”/“垂直位置”（background-position），确定背景图像的水平、垂直位置

21、。共有左对齐（left）、右对齐（right）、顶部（top）、底部（bottom）、居中（center）和值（自定义背景图像的起点位置，可使用户对背景图像的位置做出更精确的控制）6种选择。3）区块属性，如图8-20所示。“区块”属性有以下6项。“单词间距”（word-spacing），主要用于控制文字间相隔的距离。有正常（normal）和值（自定义间隔值）两种选择方式。当选择值时，可用的单位有英寸（in）、厘米（cm）、毫米（mm）、点数（pt）、12pt字（pc）、字体高（em）、字体x的高（ex）、像素（px）。“字母间距”（letter-spacing），其作用与字符间距类似，也有正常

22、（normal）和值（自定义间隔值）两种选择方式。“垂直对齐”（vertical-align），控制文字或图像相对于其母体元素的垂直位置。如将一个23像素的GIF图像同其母体元素文字的顶部垂直对齐，则该GIF图像将在该行文字的顶部显示。共有基线（baseline，将元素的基准线同母体元素的基准线对齐）、下标（sub，将元素以下标的形式显示），上标（super，将元素以上标的形式显示）、顶部（top，将元素顶部同最高的母体元素对齐）、文本顶对齐（text-top，将元素的顶部同母体元素文字的顶部对齐）、中线对齐（middle，将元素的中点同母体元素的中点对齐）、底部（bottom，将元素的底部同

23、最低的母体元素对齐）及值（自定义）9种选择。“文本对齐”（text-align），设置块的水平对齐方式。共有左对齐（left）、右对齐（right）、居中（center）和均分（justify）4种选择。“文字缩进”（text-indent），控制块的缩进程度。“空白间距”（white-space），在HTML中，空格是被省略的；在CSS中则使用属性（white-space）控制空格的输入。共有正常（normal）、保留（pre）和不换行（nowrap）3种选择。4）方框属性，如图8-21所示。“方框”属性有以下6项。“宽”（width），确定盒子本身的宽度，可以使盒子的宽度不依靠它所包含的内

24、容多少。“高”（height），确定盒子本身的高度。“浮动”（float），设置块元素的浮动效果。“清除”（clear），用于清除设置的浮动效果。“边距”（margin），控制围绕边框的边距大小。其中包含4个属性：margin-top控制上边距的宽度、margin-right控制右边距的宽度、margin-bottom控制下边距的宽度、margin-left控制左边距的宽度。“边界”（padding），确定围绕块元素的空格填充数量。其中包含4个属性：padding-top控制上留白的宽度、padding-right控制右留白的宽度、padding-bottom控制下留白的宽度、padding-

25、left控制左留白的宽度。5）边框属性，如图8-22所示。“边框”属性有以下3项。“宽”（border-width），控制边框的宽度，其中分为4个属性：border-top-width顶边框的宽度、border-right-width右边框的宽度、border-bottom-width底边框的宽度、border-left-width左边框的宽度。“颜色”（border-color），设置各边框的颜色。若要使边框的四边显示不同的颜色，可在设置中分别列出。如p:#ff0000#009900#0000ff#55cc00 浏览器将4种颜色依次理解为：上边框、右边框、底边框和左边框（自上开始顺时针）。“

26、样式”（border-style），设定边框的样式，共有无（none）、虚线（dotted）、点划线（dashed）、实线（solid）、双线（double）、槽状（grove）、脊状（ridge）、凹陷（inset）和凸起（outset）9种。6）列表属性，如图8-23所示。“列表”属性有以下3项。“类型”（list-style-type），确定列表每一项前使用的符号，共有圆点（disc）、圆圈（circle）、方形（square）、数字（decimal）、小写罗马数字（lower-roman）、大写罗马数字（upper-roman）、小写字母（lower-alpha）和大写字母（upper

27、-alpha）8种。“项目图像”（list-style-image），其作用是将列表前面的符号换为图形。“位置”（list-style-position），用于描述列表位置，有内（inside）和外（outside）两种选择。7）定位属性，如图8-24所示。“定位”属性有以下6项。“类型”（position），用于确定定位的类型，有绝对（absolute）、相对（relative）和静态（static）3种选择。“Z轴”（z-index），用于控制网页中块元素的叠放顺序，可为元素设置重叠效果。该属性的参数值使用纯整数，值为0时，元素在最下层，适用于绝对定位或相对定位的元素。“显示”（visib

28、ility）使用该属性可将网页中的元素隐藏，共有继承（inherit，继承母体要素的可视性设置）、可见（visible）和隐藏（hidden）3种选择。“溢出”（overflow），在确定了元素的高度和宽度后，如果元素的面积不能全部显示元素中的内容时，该属性就起作用了。其中共有可见（visible，扩大面积以显示所有内容）、隐藏（hidden，隐藏超出范围的内容）、滚动（scroll，在元素的右边显示一个滚动条）和自动（auto，当内容超出元素面积时，显示滚动条）4种选择。“定位”（placement），当为元素确定了绝对定位类型后，该组属性决定元素在网页中的具体位置。该组属性包含4个子属性，

29、分别是“左”（属性名为“left”，控制元素左边的起始位置）、“上”（属性名为“top”，控制元素上面的起始位置）、“宽”或“高”（与“盒子”类属性面板中“宽”或“高”的属性作用相同）。“剪辑”（clip），当元素被指定为绝对定位类型后，该属性可以把元素区域切成各种形状，但目前提供的只有方形一种。属性值为rect（top right bottom left），属性值的单位为任何一种长度单位。8）扩展属性，如图8-25所示。“扩展”属性分为以下两个部分。“分页”其中两个属性的作用是为打印的页面设置分页符。两个属性分别是“之前”（page-break-before）；“之后”（page-break

30、-after）。“视觉效果”其中两个属性的作用是为网页中的元素施加特殊效果。“光标”（cusor），可以指定在某个元素上要使用的光标形状，共有15种选择方式，分别代表鼠标在Windows操作系统中的各种形状。另外它还可以指定指针图标的URL地址。“滤镜”（fiter），可以为网页中元素施加各种奇妙的滤镜效果，共有16种滤镜。6CSS样式表的修改与应用给文字或者其他网页元素赋予样式之后，如果觉得页面效果不是很理想，可以通过修改样式来更改页面效果。1）打开CSS面板，在所使用的样式上面单击鼠标右键，在弹出的快捷菜单中选择“编辑”选项，如图8-26所示。2）在弹出的属性设置面板上进行相应的设置，单击

31、“确定”按钮，即可修改样式，如图8-27所示。3）也可以直接进入代码状态进行编辑，通过代码修改CSS文件中样式表属性，如图8-28所示。4）将新样式赋予其他文本样式。选择要修改的文本或者元素，单击属性面板 命令，在目标规则中选择样式。如图8-29、8-30所示。1活动分析CSS样式可以对页面布局、字体、颜色、背景和其他图文效果实现更加精确的控制。CSS的功能强大，不但使网页变得更加美观，而且简化了网页的更新工作，使之更易维护。CSS与HTML一样，是一种标记语言，需要通过浏览器解释执行。2知识要点 CSS样式的基本操作。掌握CSS美化网页的技巧和方法。3动手操作步骤步骤1 制作制作首页首页头部

32、文件top.html的美化。1）美化搜索框。原文件中搜索文本框和导航都没有美化，如图8-31所示。活动活动3 3 利用利用CSSCSS美化网上商城各页面美化网上商城各页面 2）进入CSS面板，新建类（可用于任何html元素）样式，输入名称为“.sousuowenbenkuang”。在弹出的CSS面板中设置方框属性为width：340px、height：22px。设置边框属性为上style：全部都是实线solid，width：1px、color：#1CABD9。如图8-32、8-33所示。3）选择文本框，在属性面板中给文本框选择样式为：“.sousuowenbenkuang”，预览后的效果为。美

33、化导航条。当我们给导航条上的文字添加链接后，导航条的链接样式会以默认的形式呈现。进入CSS文件，在其中输入以下代码。美化主页左侧商品导航。用Dreamweaver CS5打开index.html文件，在设计视图中选择全部分类下的单元格。选择“插入”“布局对象”“Div标签”。在弹出的“插入Div标签”对话框中选择类，输入“fenlei”，单击“新建CSS规则”按钮，如图8-35所示。在新建CSS规则中选择规则定义位置为：style.css。如图8-36、图8-37、图8-38所示。用同样的方法，新建样式表“.fenlei ul”、“.fenlei1”、“.fenlei2”，代码如下。选择上装、

34、下装、鞋包、配饰文字，给它们都设置为“.fenlei1”样式。给其他文字设置为“.fenlei2”样式。结果显示，如图8-40所示。步骤步骤2 制作商品详情制作商品详情页页1）对页面位置“您现在所在的位置”区域美化。选择单元格，新建样式daohang weizhi_bj，代码如下。.daohangweizhi_bj background-image:url(./images/daohangweizhi_bj.gif);给单元格选择样式“daohangweizhi_bj”，如图8-41所示。最终此区域显示效果，如图8-42所示。2）对页面中间部分区域美化。新建样式“quanbufenlei_bi

35、ankuang”，代码如下。.quanbufenlei_biankuang border:1px solid#4EACD6;padding:0px;text-align:left;vertical-align:top;font-size:12px;line-height:20px;color:#000;中间单元格选择样式，如图8-43所示。页面最终显示效果，如图8-44所示。步骤步骤3 制作商品列表制作商品列表页页1）左侧导航美化和首页左侧导航美化是一样的方法。可以直接复制首页左侧导航样式效果。2）右侧商品列表美化。新建样式“list_page_table”，代码如下。.list_page_t

36、able border:1px solid#1CABD9;给中间大的表格选择新建的样式，如图8-45所示。最终显示效果，如图8-46所示。框架网页是将浏览器窗口拆分成不同的区域，每个区域呈现出不同的网页内容。通常将频繁变化的内容放在主框架区，而将相对稳定的网页的标题和目录等内容放在目录框架区，在目录框架中单击某个超级链接时，就可以在主框架区显示相应的内容，这样可以避免浏览窗口的频繁切换。CSS全称是层叠样式表，它可以对页面布局、字体、颜色、背景和其他图文效果实现更加精确的控制。样式表由样式规则组成，用以告诉浏览器如何显示一个网页文件。一个样式表可以包含多个规则，每个规则有着固定的格式，通常由选择符和样式两个部分组成。在本项目的活动中我们主要学习了框架网页的制作方法和怎样运用CSS美化网上商城各页面。项项 目目 小小 结结