Dreamweaver-CS6网页设计案例教程-课件.ppt

1、 本章简介：本章简介： 层叠样式表（层叠样式表（CSSCSS）是）是W3CW3C组织批准的一个辅助组织批准的一个辅助HTMLHTML设计设计的新特性，能保持整个的新特性，能保持整个HTMLHTML的的统一外观。统一外观。CSSCSS的功能强大、的功能强大、操作灵活，用操作灵活，用CSSCSS改变一个文改变一个文件就可以改变数百个文件的外件就可以改变数百个文件的外观，而且个性化的表现更能吸观，而且个性化的表现更能吸引访问者。引访问者。第8章CSS样式课堂学习目标CSSCSS样式的概念样式的概念 CSSCSS样式样式 样式的类型与创建样式的类型与创建 编辑样式编辑样式 CSSCSS的属性的属性 过

2、滤器过滤器 8.1国画展览馆网页案例分析案例分析设计理念设计理念操作步骤操作步骤相关工具相关工具8.1.1案例分析 国画主要指的是画在绢、宣纸、帛上并加以装裱的卷轴画。国国画主要指的是画在绢、宣纸、帛上并加以装裱的卷轴画。国画是汉族的传统绘画形式，在内容和艺术创作上，体现了古人对自画是汉族的传统绘画形式，在内容和艺术创作上，体现了古人对自然、社会及与之相关联的政治、哲学、宗教、道德、文艺等方面的然、社会及与之相关联的政治、哲学、宗教、道德、文艺等方面的认识。要求网页设计要体现出国画的特色和传统文化的魅力。认识。要求网页设计要体现出国画的特色和传统文化的魅力。 8.1.2设计理念 在网页设计和制

3、作过程中，使用纯白色作为底色，搭配大幅的国画在网页设计和制作过程中，使用纯白色作为底色，搭配大幅的国画图片，使整个画面具有大气古朴的风格特色；前方的黑白透明圆形与背图片，使整个画面具有大气古朴的风格特色；前方的黑白透明圆形与背景搭配适宜，使文字内容突出显示让人一目了然；整体设计简单、大气，景搭配适宜，使文字内容突出显示让人一目了然；整体设计简单、大气，具有中国传统文化特色，能够使人印象深刻。具有中国传统文化特色，能够使人印象深刻。 国画展览馆网页效果图8.1.3操作步骤1 23 48.1.4相关工具1.CSS样式概念样式概念 CSS CSS（Cascading Style SheetCasca

4、ding Style Sheet），一般译为），一般译为“层叠样式表层叠样式表”或或“级级联样式表联样式表”。层叠样式表是对。层叠样式表是对HTML3.2HTML3.2之前版本语法的变革，将某些之前版本语法的变革，将某些HTMLHTML标签属性简化。标签属性简化。 层叠样式表是层叠样式表是HTMLHTML的一部分，它将对象引入到的一部分，它将对象引入到HTMLHTML中，可以通过脚中，可以通过脚本程序调用和改变对象的属性，从而产生动态效果。本程序调用和改变对象的属性，从而产生动态效果。 2.“CSS2.“CSS样式样式” ” 面板面板 使用使用“CSSCSS样式样式” ” 面板可以创建、编辑和

5、删除面板可以创建、编辑和删除CSSCSS样式，并且可以样式，并且可以将外部样式表附加到文档中。将外部样式表附加到文档中。 打开打开“CSSCSS样式样式” ” 面板面板 样式表的功能样式表的功能3.3.CSS样式的类型样式的类型 层叠样式表是一系列格式规则，它们控制网页各元素的定位和外观，层叠样式表是一系列格式规则，它们控制网页各元素的定位和外观，实现实现HTMLHTML无法实现的效果。在无法实现的效果。在Deamweaver CS6Deamweaver CS6中可以运用的样式分为重中可以运用的样式分为重定义定义HTMLHTML标签样式、标签样式、CSSCSS选择器样式和自定义样式选择器样式和

6、自定义样式3 3类。类。 重定义重定义HTMLHTML标签样式标签样式 CSS CSS选择器样式选择器样式 自定义样式自定义样式4.4.创建重定义创建重定义HTMLHTML标签样式标签样式 当重新定义某当重新定义某HTMLHTML标签默认格式后，网页中的该标签默认格式后，网页中的该HTMLHTML标签元素都标签元素都会自动变化。因此，当需要修改网页中某会自动变化。因此，当需要修改网页中某HTMLHTML标签的所有样式时，只标签的所有样式时，只需重新定义该需重新定义该HTMLHTML标签样式即可。标签样式即可。 打开打开“新建新建CSSCSS规则规则”对话框对话框 重新定义重新定义HTMLHTM

7、L标签样式标签样式5.5.创建创建CSSCSS选择器选择器 若要为具体某个标签组合或所有包含特定若要为具体某个标签组合或所有包含特定IdId属性的标签定义格式，属性的标签定义格式，只需创建只需创建CSSCSS选择器而无须应用。一般情况下，利用创建选择器而无须应用。一般情况下，利用创建CSSCSS选择器的选择器的方式设置链接文本的方式设置链接文本的4 4种状态，分别为鼠标指针单击时的状态种状态，分别为鼠标指针单击时的状态“a:active”a:active”、鼠标指针经过时的状态、鼠标指针经过时的状态“a:hover”a:hover”、未单击时的状态、未单击时的状态“a:link”a:link”

8、和已访问过的状态和已访问过的状态“a:visited”a:visited”。 重定义链接文本的状态重定义链接文本的状态 某个特定的网页对象定义样式某个特定的网页对象定义样式6.6.创建和应用自定义样式创建和应用自定义样式 若要为不同网页元素设定相同的格式，可先创建一个自定义样式，然若要为不同网页元素设定相同的格式，可先创建一个自定义样式，然后将它应用到文档的网页元素上。后将它应用到文档的网页元素上。 创建自定义样式创建自定义样式 应用样式应用样式7.7.创建和引用外部样式创建和引用外部样式 如果不同网页的不同网页元素需要同一样式时，可通过引用外部样式如果不同网页的不同网页元素需要同一样式时，可

9、通过引用外部样式来实现。首先创建一个外部样式，然后在不同网页的不同来实现。首先创建一个外部样式，然后在不同网页的不同HTMLHTML元素中引用元素中引用定义好的外部样式。定义好的外部样式。 创建外部样式创建外部样式 引用外部样式引用外部样式8.8.编辑样式编辑样式 网站设计者有时需要修改应用于文档的内部样式和外部样式，如果修网站设计者有时需要修改应用于文档的内部样式和外部样式，如果修改内部样式，则会自动重新设置受它控制的所有改内部样式，则会自动重新设置受它控制的所有HTMLHTML对象的格式；如果修对象的格式；如果修改外部样式文件，则自动重新设置与它链接的所有改外部样式文件，则自动重新设置与它

10、链接的所有HTMLHTML文档。文档。 编辑样式有以下编辑样式有以下3 3种方法。种方法。 （1 1）先在）先在“CSSCSS样式样式” ” 面板中单击选中某样式，然后单击位于面板底部面板中单击选中某样式，然后单击位于面板底部的的“编辑样式编辑样式”按钮，弹出按钮，弹出 “ “.bg.bg的的CSSCSS规则定义（在规则定义（在style.css.css中）中）”对话对话框。根据需要设置框。根据需要设置CSSCSS属性，单击属性，单击“确定确定”按钮完成设置。按钮完成设置。 （2 2）在）在“CSSCSS样式样式” ” 面板中用鼠标右键单击样式，然后从弹出的快捷菜面板中用鼠标右键单击样式，然后

11、从弹出的快捷菜单中选择单中选择“编辑编辑”命令，弹出命令，弹出“.bg.bg的的CSSCSS规则定义（在规则定义（在style.css.css中）中）”对对话框。根据需要设置话框。根据需要设置CSSCSS属性，单击属性，单击“确定确定”按钮完成设置。按钮完成设置。 （3 3）在）在“CSSCSS样式样式” ” 面板中选择样式，然后在面板中选择样式，然后在“CSSCSS属性检查器属性检查器”面板面板中编辑它的属性。中编辑它的属性。8.1.5 实战演练-葡萄酒网页使用使用“CSSCSS样式样式”命令，改变文字的大小和行距。命令，改变文字的大小和行距。 效果图8.2打印机网页案例分析案例分析设计理念

12、设计理念操作步骤操作步骤相关工具相关工具8.2.1案例分析 打印机是计算机的输出设备之一，用于将计算机处理结果打印打印机是计算机的输出设备之一，用于将计算机处理结果打印在相关介质上。目前打印机已经成为现代办公不可或缺的办公设备，在相关介质上。目前打印机已经成为现代办公不可或缺的办公设备，页面设计要求表现出打印机的技术与特色。页面设计要求表现出打印机的技术与特色。8.2.2设计理念 在网页设计和制作过在网页设计和制作过程中，使用灰色作为网页程中，使用灰色作为网页的背景，很好地衬托出前的背景，很好地衬托出前方的图形与文字内容，方的图形与文字内容，4 4组组色彩条的运用，使画面充色彩条的运用，使画面

13、充满空间感和韵律感，并且满空间感和韵律感，并且能够对文字信息进行分类能够对文字信息进行分类与规划，使画面具有统一与规划，使画面具有统一性和条理性，时尚创新的性和条理性，时尚创新的页面设计体现出产品的特页面设计体现出产品的特色和魅力，让人耳目一新。色和魅力，让人耳目一新。 打印机网页效果图8.2.3操作步骤 1 23 48.2.4相关工具1.1.类型类型 “类型类型”分类主要是定义网页中文字的字体、字号、颜色等。分类主要是定义网页中文字的字体、字号、颜色等。“类型”选项面板2.2.背景背景“背景背景”分类用于在网页元素后加入背景图像或背景颜色。分类用于在网页元素后加入背景图像或背景颜色。“背景”

14、选项面板3.3.区块区块“区块区块”分类用于控制网页中块元素的间距、对齐方式和文字缩进等分类用于控制网页中块元素的间距、对齐方式和文字缩进等属性。块元素可以是文本、图像、层等。属性。块元素可以是文本、图像、层等。“区块”选项面板4.4.方框方框“方框方框”分类用于控制网页中块元素的内容距区块边框的距离、区块分类用于控制网页中块元素的内容距区块边框的距离、区块的大小、区块间的间隔等。块元素可为文本、图像、层等。的大小、区块间的间隔等。块元素可为文本、图像、层等。“方框”选项面板5.5.边框边框“边框边框”分类主要针对块元素的边框。分类主要针对块元素的边框。“边框”选项面板6.6.列表列表“列表列

15、表”分类用于设置项目符号或编号的外观。分类用于设置项目符号或编号的外观。“列表”选项面板7.7.定位定位“定位定位”分类用于精确控制网页元素的位置，主要针对层的位置进行分类用于精确控制网页元素的位置，主要针对层的位置进行控制。控制。“定位”选项面板8.8.扩展扩展“扩展扩展”分类主要用于控制鼠标指针形状、控制打印时的分页以及为分类主要用于控制鼠标指针形状、控制打印时的分页以及为网页元素添加滤镜效果。网页元素添加滤镜效果。“扩展”选项面板9.9.过渡过渡“过渡过渡”分类主要用于控制动画属性的变化，以响应触发器事件，如分类主要用于控制动画属性的变化，以响应触发器事件，如悬停、单击、聚焦等。悬停、单

16、击、聚焦等。“过渡”选项面板8.2.5实战演练-室内设计网页 使用使用“项目列表项目列表”按钮创建项目符号；使用按钮创建项目符号；使用“属性属性”面板，为文面板，为文字添加空链接，使用字添加空链接，使用“CSSCSS样式样式”命令，制作鼠标经过的显示效果。命令，制作鼠标经过的显示效果。 效果图8.3爱晚工程网页案例分析案例分析设计理念设计理念操作步骤操作步骤相关工具相关工具8.3.1案例分析 “爱晚工程爱晚工程”是一个关爱老年人，帮助老年人的一个公益组织。是一个关爱老年人，帮助老年人的一个公益组织。在设计网页时要注意界面的美观、布局的合理搭配，并体现出其公在设计网页时要注意界面的美观、布局的合

17、理搭配，并体现出其公益的目的和温馨的视觉感受。益的目的和温馨的视觉感受。 8.3.2设计理念 在网页设计和制作过程中，使用红色渐变背景营造出温暖的氛在网页设计和制作过程中，使用红色渐变背景营造出温暖的氛围，同时也象征着夕阳的美好；流畅的线条带给人辽阔平静心理感围，同时也象征着夕阳的美好；流畅的线条带给人辽阔平静心理感受；照片使用心形框使画面更加温馨有爱，版面设计简洁，文字清受；照片使用心形框使画面更加温馨有爱，版面设计简洁，文字清晰，导航栏明确，使人阅读方便。晰，导航栏明确，使人阅读方便。 爱晚工程网页效果图8.3.3操作步骤1 23 48.3.4相关工具1.1.可应用过滤的可应用过滤的HTM

18、LHTML标签标签 CSS CSS过滤器不仅可以施加在图像上，而且可以施加在文字、表格、图过滤器不仅可以施加在图像上，而且可以施加在文字、表格、图层等网页元素上，但并不是所有的层等网页元素上，但并不是所有的HTMLHTML标签都可以施加标签都可以施加CSSCSS过滤器，只有过滤器，只有BODYBODY（网页主体）、（网页主体）、BUTTONBUTTON（按钮）、（按钮）、DIVDIV（层）、（层）、IMGIMG（图像）、（图像）、INPUTINPUT（表单的输入元素）、（表单的输入元素）、MARQUEEMARQUEE（滚动）、（滚动）、SPANSPAN（段落内的独立行元素）、（段落内的独立行元

19、素）、TABLETABLE（表格）、（表格）、TDTD（表格内单元格）、（表格内单元格）、TEXTAREATEXTAREA（表单的多行输入元（表单的多行输入元素）、素）、TFOOTTFOOT（当做注脚的表格行）、（当做注脚的表格行）、THTH（表格的表头）、（表格的表头）、THEADTHEAD（表格（表格的表头行）、的表头行）、TRTR（表格的一行）等（表格的一行）等HTMLHTML标签上可以施加标签上可以施加CSSCSS过滤器。过滤器。 2. CSS2. CSS的静态过滤器的静态过滤器 静态过滤器使被施加的对象产生各种静态的特殊效果。静态过滤器使被施加的对象产生各种静态的特殊效果。IEIE浏

20、览器浏览器4.04.0以上版本支持以下以上版本支持以下1313种静态过滤器种静态过滤器 3. CSS3. CSS的动态过滤器的动态过滤器 动态过滤器也叫做转换过滤器。动态过滤器也叫做转换过滤器。Dreamweaver CS6Dreamweaver CS6提供的动态过滤器提供的动态过滤器可以设定产生翻换图片的效果。可以设定产生翻换图片的效果。 BlendTrans BlendTrans过滤器过滤器 RevealTrans RevealTrans过滤器过滤器8.3.5实战演练-汽车配件网页使用使用“图像图像”按钮插入图像；使用按钮插入图像；使用GrayGray滤镜把图像设定为黑白效果。滤镜把图像设

21、定为黑白效果。 效果图8.4综合演练- GPS导航仪网页案例分析案例分析设计理念设计理念知识要点知识要点GPSGPS导航仪能够帮助用户准确定位当前位置，并且根据既定的导航仪能够帮助用户准确定位当前位置，并且根据既定的目的地计算行程，广泛用于交通、旅游等方面。本例将制作目的地计算行程，广泛用于交通、旅游等方面。本例将制作GPSGPS导导航仪网页，要求体现出航仪网页，要求体现出GPSGPS导航仪的技术和功能。导航仪的技术和功能。8.4.1案例分析在网页设计和制作过程中，背景采用蓝白黑的色彩搭配，给人在网页设计和制作过程中，背景采用蓝白黑的色彩搭配，给人轻松和自在的感觉；将产品照片作为网页设计的主体

22、，醒目直观地轻松和自在的感觉；将产品照片作为网页设计的主体，醒目直观地展示出网页的宣传主题，网站分类明确，与背景颜色相呼应；简洁展示出网页的宣传主题，网站分类明确，与背景颜色相呼应；简洁直观的设计让人一目了然，易于查看浏览。直观的设计让人一目了然，易于查看浏览。8.4.2设计理念使用使用“属性属性”面板，为文字添加空白链接；使用面板，为文字添加空白链接；使用“CSSCSS样式样式”命令，设置超链接的显示及鼠标经过的显示效果。命令，设置超链接的显示及鼠标经过的显示效果。效果图8.4.3知识要点8.5综合演练-抒情散文网页案例分析案例分析设计理念设计理念知识要点知识要点抒情散文以抒发主观情感为出发

23、点，以空灵飘逸见长，着力点抒情散文以抒发主观情感为出发点，以空灵飘逸见长，着力点在于准确表达感情色彩的语言运用上。本例将制作抒情散文网页，在于准确表达感情色彩的语言运用上。本例将制作抒情散文网页，在设计上希望体现出作者清新、自然、悠闲的心境。在设计上希望体现出作者清新、自然、悠闲的心境。8.5.1案例分析在网页设计和制作过程中，采用淡雅的色彩作为背景，通过优在网页设计和制作过程中，采用淡雅的色彩作为背景，通过优美的画面处理，营造出自然、闲适的氛围，给人清新、悠闲的感觉，美的画面处理，营造出自然、闲适的氛围，给人清新、悠闲的感觉，符合抒情散文的特色；图文的合理搭配，增添了画面的美感，与宣符合抒情散文的特色；图文的合理搭配，增添了画面的美感，与宣传的主题相呼应；整个设计简洁直观，没有多余的修饰，让浏览者传的主题相呼应；整个设计简洁直观，没有多余的修饰，让浏览者一目了然。一目了然。8.5.2设计理念使用使用“CSSCSS样式样式”命令，设置文字的样式显示。命令，设置文字的样式显示。效果图8.5.3知识要点