新媒体网页设计与制作-Dreamweaver-CS6基础、案例、技巧实用教程第1-4章课件

1、新媒体网页设计与制作Dreamweaver CS6基础、案例、技巧实用教程新媒体网页设计与制作Dreamweaver CS6基础、目 录 第1章 网页设计基础 第2章 认识Dreamweaver CS6 第3章 制作绚丽多彩的网页 第4章 使用CSS样式美化网页 第5章 新媒体网页布局 第6章 网页中的超级链接 第7章 新媒体网页中的多媒体元素 目 录 第1章 网页设计基础 目 录 第8章 在新媒体网页中添加动态特效 第9章 站点风格的统一 第10章 表单 第11章 综合实训-家具联盟网站 第12章 创建移动设备网页及应用程序 第13章 站点的整理维护与上传 目 录 第8章 在新媒体网页中添加

2、动态特效 第1章 网页设计基础本章学习要点： 1网页和网站的基本概念 2新媒体网站的色彩选择与搭配、 策划与创建原则 3网站制作的基本流程第1章 网页设计基础本章学习要点：1.1 认识网页1.1.1 网页与网站概念静态网页：标准HTML文件。动态网页：在发送到浏览器之前由应用程序服务器自定义的网页。 网站：即网页的集合 。1.1 认识网页1.1.1 网页与网站概念1.1.2 网页的基本要素LOGO 标题 导航栏页眉 /页脚 功能区 主体内容 1.1.2 网页的基本要素LOGO 1.1.3 新媒体网页的设计元素文字：是网页信息传递的主要手段。 图片 ：用于提供信息、展示作品、装饰网 页等。 多媒

3、体：包括音频、视频、动画等元素 。 互动：实现信息的远距离实时传递。 版式设计：“同”字型布局 、“国”字型布局 、“T”型布局 、“三”字型布局 、对比布局 、POP布局 、Flash布局 。1.1.3 新媒体网页的设计元素文字：是网页信息传递的主要1.1.4 新媒体网页的布局方式固定布局流式布局 弹性布局 伸缩 响应式 自适应 1.1.4 新媒体网页的布局方式固定布局1.2 新媒体网站的色彩选择与搭配1.2.1 色彩理论 色彩是艺术表现的要素之一，是光刺激眼睛传导到大脑中枢而产生的一种感觉。网页设计师在决定了一个网站风格的同时也决定了网站的情感，而情感的表达很大程度上取决于颜色的选择。而网

4、站给人的第一印象来自视觉冲击，因此确定网站的标准色彩是新媒体网页设计中最重要的一个方面。 1.2 新媒体网站的色彩选择与搭配1.2.1 色彩理论 1.2.1 色彩理论在HTML中，颜色有3种表示方式 ：十六进制的数 颜色常量 rgb(r，g，b) 1.2.1 色彩理论在HTML中，颜色有3种表示方式 ：1.2.2 选择色彩 网页设计中，色彩的选择往往是和情感联系在一起的，比如温暖、冷静或严肃的情感。暖色能带来阳光明媚的情绪，让人感觉到温暖，例如红色、黄色和橙色；冷色可以表达出权威、明确和信任的感觉，让人联想到凉爽和寒冷，例如蓝色，绿色和紫色；中性色，只是给用户一种淡淡的感受，没有过多的情绪，平

5、静，淡然，像灰色和棕色就是中性色。1.2.2 选择色彩 网页设计中，色彩的选择往1.2.3 搭配色彩 标准色彩是指能体现网站形象和延伸内涵的色彩，不同的色彩搭配可以产生不同的效果，并可能影响到访问者的情绪。单一色 相似色 互补色 1.2.3 搭配色彩 标准色彩是指能体现网站形象1.2.4 精彩网页赏析IBM中国站 1.2.4 精彩网页赏析IBM中国站 1.2.4 精彩网页赏析可口可乐中国站 1.2.4 精彩网页赏析可口可乐中国站 1.2.4 精彩网页赏析何园网站1.2.4 精彩网页赏析何园网站1.3 新媒体网站的策划与创建原则1.3.1 定位网站主题和名称 定位网站主题 ：网站的题材和内容应紧

6、扣主题，要突出个性和特色。网站定位要准确，内容要精练，题材不要太宽泛或者目标太高。网站名称：网站名称最好使用中文，字数控制在6个字以内，名称要见名知义，且能代表本站特色。1.3 新媒体网站的策划与创建原则1.3.1 定位网站主题1.3.2 网站风格 网站的风格是指网站的整体外观带给用户的综合感受，包括版面布局、浏览方式、交互性等诸多因素。1.3.2 网站风格 网站的风格是指网站的整体1.3.3 网站的CI形象 所谓CI，是借用的广告术语，意思是通过视觉来统一企业的形象。设计网站标志确定网站标准色彩确定网站标准字体 设计网站的宣传标语1.3.3 网站的CI形象 所谓CI，是借用的1.4 HTML

7、5简介 HTML5是定义HTML标准的最新的版本，它既是一个新版本的HTML语言，具有新的元素、属性和行为，还有更大的技术集，允许更多样化和强大的网站和应用程序。它不但强化了Web网页的表现性能，还追加了本地数据库等 Web 应用的功能。 1.4 HTML5简介 HTML5是定义H1.4.1 HTML5特性语义特性 本地存储特性 设备兼容特性 连接特性 网页多媒体特性 三维、图形及特效特性 性能与集成特性 CSS3特性 1.4.1 HTML5特性语义特性 1.4.2 HTML5新增功能取消了一些过时的HTML4标记 将内容和展示分离 表单元素的升级 新增audio 和video 标签 新增ca

8、nvas标签 新增一些API（主要是供js使用的） 1.4.2 HTML5新增功能取消了一些过时的HTML4标记1.5 网站制作的基本流程1.5.1 网站的前期策划1.5.2 收集素材1.5.3 规划站点1.5.4 制作网页1.5.5 测试并上传网站1.5.6 网站的更新与维护1.5 网站制作的基本流程1.5.1 网站的前期策划第2章 认识Dreamweaver CS6本章学习要点：1Dreamweaver CS6的工作界面2Dreamweaver CS6文档视图3本地站点的创建和管理4网页文件的基本操作 第2章 认识Dreamweaver CS6本章学习要点：2.1 Dreamweaver

9、CS6工作界面2.1.1 界面布局2.1 Dreamweaver CS6工作界面2.1.1 界2.1.2 浮动面板 【插入】面板 2.1.2 浮动面板 【插入】面板 2.1.2 浮动面板【文件】面板和【资源】面板 2.1.2 浮动面板【文件】面板和【资源】面板 2.1.3 属性检查器文本【属性】检查器 表格【属性】检查器 2.1.3 属性检查器文本【属性】检查器 表格【属性】检查器2.2 Dreamweaver CS6的新功能和改进功能2.2.1 针对智能手机和平板电脑的设计强大的jQuery Mobile和PhoneGap支持基于流体网格的CSS布局 支持CSS3和HTML5代码 更新的多屏

10、幕预览面板 2.2 Dreamweaver CS6的新功能和改进功能 简捷而高效的操作改良的FTP 性能 Business Catalyst集成 CSS3过渡 站点特定的代码提示 2.2.2 简捷而高效的操作改良的FTP 性能 2.3 创建本地站点 Dreamweaver CS6对同一网站中的文件是以“站点”为单位来进行有效组织和管理的，因此在创建网站之前，首先需要创建一个本地站点，用于存储和管理网站中的各种网页文档以及相关的资源等数据，使网站设计者对网站的结构有一个整体的把握。2.3 创建本地站点 Dreamweaver CS6对2.3.1 站点管理器 选择【站点】/【管理站点

11、】命令，进入【管理站点】界面，如下图所示： 2.3.1 站点管理器 选择【站点】/【管理站点】2.3.2 定义新站点 选择【窗口】/【文件】命令，打开【文件】面板，在【桌面】下拉列表中选择“管理站点”选项，如下图所示 。2.3.2 定义新站点 选择【窗口】/【文件】2.3.3 创建文件或文件夹 在【文件】面板中，右键单击站点根文件夹或任意一个文件夹，在弹出的快捷菜单中选择【新建文件】或【新建文件夹】命令，即在选定位置创建一个新的文件或文件夹 。2.3.3 创建文件或文件夹 在【文件】面板中2.3.4 编辑文件或文件夹1删除文件夹或文件 右键单击要删除的文件或文件夹，在弹出的快捷菜单中选择【编辑

12、】/【删除】命令，在确认对话框中选择【是】按钮，如下图所示。2.3.4 编辑文件或文件夹1删除文件夹或文件2.3.4 编辑文件或文件夹2重命名文件或文件夹 在【文件】面板中，右键单击要重命名的文件或文件夹，在弹出的快捷菜单中选择【编辑】/【重命名】命令，待重命名的文件或文件夹在站点中名称以高亮方式显示时，用户直接输入新的名称即可。2.3.4 编辑文件或文件夹2重命名文件或文件夹2.3.4 编辑文件或文件夹3移动文件或文件夹 在【文件】面板中，右键单击要移动的文件或文件夹，在弹出的快捷菜单中选择【编辑】/【剪切】命令，选择目标文件或文件夹并右键单击，在弹出的快捷菜单中选择【编辑】/【粘贴】命令，

13、完成移动操作，如下图所示。2.3.4 编辑文件或文件夹3移动文件或文件夹2.4 管理本地站点2.4.1 打开站点 选择【窗口】/【文件】命令，打开【文件】面板，单击【桌面】下拉列表框，在弹出的列表中选择【管理站点】，如下图所示：2.4 管理本地站点2.4.1 打开站点2.4.2 编辑站点 在管理站点对话框中选择需要编辑的站点“Myhome ”，打开【站点设置对象】对话框，在打开窗口的右侧将【站点名称】修改为“浪漫之旅”，如下图所示 。2.4.2 编辑站点 在管理站点对话框中选择需2.4.2 编辑站点2.4.2 编辑站点2.4.2 编辑站点编辑后的站点列表2.4.2 编辑站点编辑后的站点列表2.

14、4.3 复制站点 在管理站点窗口中选择“Mysite”站点，单击窗口下方“复制当前选定的站点”按钮，在站点列表中出现“Mysite 复制”站点，如下图所示。2.4.3 复制站点 在管理站点窗口中选择“Mys2.4.4 删除站点 在【管理站点】对话框中，选择“古韵”站点，单击按钮，弹出【删除站点】的提示对话框，如下图所示。2.4.4 删除站点 在【管理站点】对话框中，选1导出站点（1）在【站点管理】对话框中，选择“Mysite”站点。（2）单击按钮，弹出【导出站点】对话框。（3）在【保存在】下拉列表框中选择保存文件路径，在【文件名】下拉文本框中设置文件名为“Mysite.ste”，如下图所示。2

15、.4.5 导入和导出站点 1导出站点2.4.5 导入和导出站点 2.4.5 导入和导出站点2.4.5 导入和导出站点2导入站点（1）在【站点管理】对话框中，单击【导入站点】按钮 ，弹出【导入站点】对话框，如下图所示。（2）选择需要导入的站点文件，并单击【打开】按钮，完成站点文件的导入。2.4.5 导入和导出站点2导入站点2.4.5 导入和导出站点2.5 网页文件的基本操作2.5.1 新建网页 打开Dreamweaver CS6，选择【文件】/【新建】命令，在弹出的【新建文档】对话框中选择【空白页】选项卡，在【页面类型】列表中选择【HTML】，同时选择【布局】规划网页，最后选择【文档类型】，单击

16、【创建】按钮，完成网页的创建，如下图所示。2.5 网页文件的基本操作2.5.1 新建网页2.5 网页文件的基本操作2.5 网页文件的基本操作2.5.2 保存网页 在Dreamweaver CS6中对文档进行编辑后，需要对文档进行保存以备浏览和修改。选择【文件】/【保存】命令，弹出【另存为】对话框，在【保存在】下拉列表框中选择文档的保存位置，并在【文件名】下拉列表框中输入网页名称，单击【保存】按钮，完成网页的保存。2.5.2 保存网页 在Dreamweaver2.5.3 预览网页 对网页进行编辑后，如果想查看网页在浏览器中的显示效果，可以通过以下方法实现预览：1选择【文件】/【在浏览器中预览】/

17、【IExplore】。2单击文档工具栏的按钮。3按F12快捷键。2.5.3 预览网页 对网页进行编辑后，如果想2.5.4 设置页面属性 选择【修改】/【页面属性】命令或单击【属性】面板上的【页面属性】按钮，弹出【页面属性】对话框，在窗口左侧的【分类】列表中选择相应类别后，在右侧窗口对各属性进行详细设置，如下图所示： 2.5.4 设置页面属性 选择【修改】/【页面2.6 课堂案例-设置网页页面属性具体操作步骤：1打开素材“examplechapter02booklist.html”文件。2单击属性检查器上的【页面属性】按钮，打开【页面属性】对话框。2.6 课堂案例-设置网页页面属性具体操作步骤：

18、设置属性如下图所示：2.6 课堂案例-设置网页页面属性设置属性如下图所示：2.6 课堂案例-设置网页页面属性2.6 课堂案例-设置网页页面属性2.6 课堂案例-设置网页页面属性2.6 课堂案例-设置网页页面属性预览网页2.6 课堂案例-设置网页页面属性预览网页第3章 制作绚丽多彩的网页本章学习要点：1页面属性的设置2网页文本对象的添加3文本格式的设置4特殊字符的插入第3章 制作绚丽多彩的网页本章学习要点：3.1 网页文本的基本操作3.1.1 输入文本 1直接输入文本 2复制文本 3导入文本3.1 网页文本的基本操作3.1.1 输入文本3.1.2 设置文本属性 文本属性的设置主要有【HTML】和

19、【CSS】两种不同的方式，它们分别采用不同的方式实现对文本的格式设置，其包含的设置项也有所不同。通过单击【属性】检查器左侧的和进行切换。3.1.2 设置文本属性 3.1.3 课堂案例网页文本操作具体操作步骤：1录入网页文本（1）打开素材文件“examplechapter03index.html”，如下图所示。3.1.3 课堂案例网页文本操作具体操作步骤：3.1.3 课堂案例网页文本操作（2）定义页脚。将鼠标光标定位到页脚编辑区域，输入文本“版权所有 Copyright 2018 WuYunYoGa All Rights Reserved.”，如下图所示：（3）复制文本。打开素材文件“examp

20、lechapter03yoga.doc”，选取要复制的文本信息，选择【复制】命令或按“Ctrl+C”组合键。 3.1.3 课堂案例网页文本操作（2）定义页脚。将鼠标光标（4）粘贴文本。返回Dreamweaver文档中，鼠标光标定位到主设计窗口的中间区域，执行【粘贴】命令或按“Ctrl+V”组合键，将文本粘贴到网页文档中，如下图所示：3.1.3 课堂案例网页文本操作（4）粘贴文本。返回Dreamweaver文档中，鼠标光标定3.1.3 课堂案例网页文本操作（5）导入文本。将鼠标光标定位到主设计窗口的左侧位置，执行【文件】/【导入】/【Excel文档】命令，选择“menu1.xls”文档，完成文本

21、的导入操作，如下图所示：3.1.3 课堂案例网页文本操作（5）导入文本。将鼠标光标3.1.3 课堂案例网页文本操作（6）设置嵌套表格宽度。单击“分类列表”中任意一个单元格边线，选中整个表格，在【属性】检查器中设置表格属性【宽】的值为“100”，单位选择“%”。3.1.3 课堂案例网页文本操作（6）设置嵌套表格宽度。单3.1.3 课堂案例网页文本操作2设置文本格式及属性（1）设置页面属性。单击【属性】检查器中的【页面属性】按钮，设置【页面字体】为“楷体”，【大小】为“14pt”，如下图所示： 3.1.3 课堂案例网页文本操作2设置文本格式及属性3.1.3 课堂案例网页文本操作（2）设置标题。选择

22、左侧列表文本“分类列表”，选择属性检查器上的按钮，在【格式】中选择“标题3” 。（3）设置文本样式。选中“分类列表”下的文本“传统瑜伽”，选择【格式】/【样式】/【代码】，再选择【格式】/【样式】/【粗体】命令，然后设置列表中的其他项目执行同样的操作，如下图所示。3.1.3 课堂案例网页文本操作（2）设置标题。选择左侧列3.1.3 课堂案例网页文本操作（4）设置特殊文本样式。 选中文档主设计区域中间部分，即瑜伽内容介绍的开头文字“瑜伽”二字，即瑜伽内容介绍的开头文字“瑜伽”二字，选择按钮，设置文字【大小】为“30pt”，如下图所示。3.1.3 课堂案例网页文本操作（4）设置特殊文本样式。 3.

23、1.3 课堂案例网页文本操作设置“.First” CSS样式文本样式效果，如下图所示：3.1.3 课堂案例网页文本操作设置“.First” CS3.2 设置文本换行与段落版式3.2.1 强制文本换行 1换行：标签 2分段 ：标签 3.2.2 设置段落对齐 段落文本的对齐在网页布局中十分重要，在Dreamweaver CS6中，提供了“左对齐”、“居中对齐”、“右对齐”和“两端对齐”4种对齐方式。3.2 设置文本换行与段落版式3.2.1 强制文本换行 3.2.3 课堂案例设置段落样式具体操作步骤： 1设置文本换行。打开素材文件“examplechapter03index.html”，将鼠标光标定

24、位到主设计窗口中间区域“瑜伽源于古印度”之前，同时按下“Shitf+Enter”快捷键，使文本换行。 2设置段落。将鼠标光标定位到“瑜伽姿势运用古老而易于掌握的技巧”文本之前，按下“Enter”键，将文本划分成两个段落，如下图所示：3.2.3 课堂案例设置段落样式具体操作步骤：3.2.3 课堂案例设置段落样式3.2.3 课堂案例设置段落样式3.2.3 课堂案例设置段落样式3设置文本的对齐方式。将鼠标光标定位到页脚处文本中，单击【属性】检查器中的居中对齐按钮 ，设置页脚文本居中对齐，如下图所示。3.2.3 课堂案例设置段落样式3设置文本的对齐方式。将3.3 创建列表 列表是指将具有相似特性或某种

25、顺序的文本进行有规则的排列，是网页中最常见的一种文本排列方式，常用于为文档设置自动编号、项目符号等格式信息。3.3 创建列表 列表是指将具有相似特性或某种顺3.3.1 创建定义列表 定义列表也称作列表，因为它同字典具有相同的格式。在定义列表中，每个列表项带有一个缩进的字段，就好像字典对文字进行解释一样。选中需要创建定义列表的段落文本，选择【格式】/【列表】/【定义列表】命令，即可创建一个定义列表，如下图所示。3.3.1 创建定义列表 定义列表也称作列表3.3.2 创建项目列表 项目列表前面一般用项目符号作为前导字符，并且列表项目前的项目符号相同，各列表项之间是平行的关系。 将鼠标光标置于目标位

26、置，选中需要创建项目列表的段落文本，选择【格式】/【列表】/【项目列表】命令，即可创建一个项目列表，如下图所示。3.3.2 创建项目列表 项目列表前面一般用3.3.3 创建编号列表 编号列表前面通常有数字前导字符，这些字符可以是英文字母、阿拉伯数字或罗马数字等。 选中需要创建编号列表的段落文本，选择【格式】/【列表】/【编号列表】命令，即可创建一个编号列表，如下图所示。3.3.3 创建编号列表 编号列表前面通常有数 在创建了项目列表或编号列表后，如果需要改变列表样式，可以将鼠标光标定位到任意一个项目列表或编号列表的段落中，选择【格式】/【列表】/【属性】命令，打开【列表属性】对话框，如下图所示

27、。3.3.4 设置列表样式 在创建了项目列表或编号列表后，如果需要改变列表样式，3.3.4 设置列表样式 1设置项目列表样式3.3.4 设置列表样式 1设置项目列表样式3.3.4 设置列表样式 2设置编号列表样式3.3.4 设置列表样式 2设置编号列表样式1设置文本缩进 选中需要设置段落缩进的文本，单击【属性】检查器左侧的按钮，切换到【HTML】分类属性检查器中，单击【缩进】按钮，可增加所选文本的段落缩进；单击【凸出】按钮，即可减少所选文本的段落缩进。3.3.5 设置文本缩进格式1设置文本缩进3.3.5 设置文本缩进格式2设置嵌套列表 选中需要设置段落缩进列表的项目，单击【属性】检查器中的【缩

28、进】按钮，使指定列表向右缩进并创建一个单独的列表，以形成不同级的子列表项。然后，对缩进的文本应用新的列表样式或类型即可。如下图所示。3.3.5 设置文本缩进格式2设置嵌套列表3.3.5 设置文本缩进格式3.3.5 设置文本缩进格式3.3.5 设置文本缩进格式3.3.6 课堂案例创建段落与列表具体操作步骤：1设置段落。打开素材文件“examplechapter03index.html”，将鼠标光标定位到主设计窗口中间区域段落文本的开头两字“瑜伽”之后，输入“Enter”，创建了两个新的段落，如下图所示。3.3.6 课堂案例创建段落与列表具体操作步骤：3.3.6 课堂案例创建段落与列表2创建定义列

29、表。选中刚刚创建的两个段落，选择【插入】/【HTML】/【文本对象】/【定义列表】命令，效果如下图所示。3.3.6 课堂案例创建段落与列表2创建定义列表。选中刚3.3.6 课堂案例创建段落与列表 3设置文本及段落。在主设计窗口右侧输入几段文本，并将窗口中间的第二个段落设置成多个段落，如下图所示。3.3.6 课堂案例创建段落与列表 3设置文本及段落。在3.3.6 课堂案例创建段落与列表 4创建项目列表。选中主设计窗口中间新建的所有段落，单击【属性】检查器中的项目列表按钮，创建新的项目列表，预览结果如下图所示。5创建编号列表。选中主窗口右侧“瑜伽新闻”下的所有段落，单击【属性】检查器中的编号列表按

30、钮，创建新的编号列表，如下图所示。3.3.6 课堂案例创建段落与列表 4创建项目列表。选中3.3.6 课堂案例创建段落与列表6创建嵌套列表。将鼠标光标放在2级项目列表或编号列表文本的任意位置，单击【属性】检查器上的缩进按钮，完成文本的缩进。如果要返回上级列表，通过单击凸出按钮返回。7修改列表样式。将鼠标光标定位到编号列表的第3项，单击【属性】检查器上的【列表项目】按钮，打开【列表属性】对话奇框，选择【样式】为“大写罗马字母”，如下图所示。3.3.6 课堂案例创建段落与列表6创建嵌套列表。将鼠标3.3.6 课堂案例创建段落与列表效果如下图所示。 3.3.6 课堂案例创建段落与列表效果如下图所示。

31、 将鼠标光标置于目标位置，选择【插入】/【日期】命令，弹出【插入日期】对话框，可以选择【星期格式】、【日期格式】和【时间格式】，如下图所示。3.4 插入日期 将鼠标光标置于目标位置，选择【插入】/【日期】命3.5 插入水平线 将鼠标光标置于目标位置，选择【插入】/【HTML】/【水平线】命令，即可在指定位置插入一条水平线。选中水平线，可以通过【属性】检查器对水平线进行属性设置，如下图所示。3.5 插入水平线 将鼠标光标置于目标位置，选择【插入3.6 插入特殊字符 将鼠标光标置于目标位置，选择【插入】/【HTML】/【特殊字符】/【其他字符】命令，弹出【插入其他字符】对话框，如图所示，选择相应的

32、字符即可在指定位置插入一个特殊字符。3.6 插入特殊字符 将鼠标光标置于目标位置3.7 输入连续的空格选择【插入】/【HTML】/【特殊字符】/【不换行空格】命令。单击【插入】浮动面板的【文本】面板，选择【字符】命令，在弹出的列表中选择【不换行空格】。通过同时按下“Ctrl+Shitf+Space”快捷键插入。3.7 输入连续的空格选择【插入】/【HTML】/【特殊字符3.8 课堂案例插入其它文本1插入日期。 2插入水平线。3.8 课堂案例插入其它文本1插入日期。 3.8 课堂案例插入其它文本 3设置水平线颜色。 3.8 课堂案例插入其它文本 3设置水平线颜色。 3.8 课堂案例插入其它文本

33、4插入特殊字符。 5插入不换行空格。 3.8 课堂案例插入其它文本 4插入特殊字符。第4章 使用CSS样式美化网页本章学习要点：1CSS基础知识2创建CSS样式3管理CSS样式4应用CSS样式第4章 使用CSS样式美化网页本章学习要点：4.1 认识CSS样式 CSS样式即层叠样式表，是Cascading Style Sheets的缩写，它能够控制网页样式、统一站点风格，并允许网页样式与内容相分离。通过使用CSS样式，能够节省许多重复性的格式设置，使用户很轻松地设置网页元素的显示格式和位置，从而提高了网页的整体美观。4.1 认识CSS样式 CSS样式即层叠样式表4.1.1 认识【CSS样式】面板

34、 4.1.1 认识【CSS样式】面板 4.1.2 CSS样式表分类 根据CSS样式表存放的位置以及其应用范围，CSS样式表分为以下三种： 1外部CSS 2内部CSS 3内联CSS4.1.2 CSS样式表分类 根据CSS样式表 4.1.3 CSS基本语法 CSS格式设置规则由两部分组成：选择器和声明。选择器需要标识已设置格式元素（如A标签、类名称、ID或复合内容）的术语，而声明则用于定义样式元素。 4.1.3 CSS基本语法 CSS格式设置规 声明由属性和值两部分组成，中间使用半角英文下的冒号“:”分隔 如 “.txt”类的定义：.txt color: #FFF;background-color

35、: #39C; font-size: 18px;line-height: 15px; 4.1.3 CSS基本语法 声明由属性和值两部分组成，中间使用半4.2 创建CSS样式 单击【CSS面板】右下角的按钮，弹出【新建CSS规则】对话框，如下图所示。4.2 创建CSS样式 单击【CSS面板】右下4.2 创建CSS样式1类：可用于HTML中的任何元素。 2ID：只能应用于唯一的标签，并且该标签的ID也是唯一的。 3标签：用于重新定义某个HTML标签的格式，即定义某种类型页面元素的格式。 4复合内容：用于创建或改变一个或多个类、ID或标签的复合规则样式表。 4.2 创建CSS样式1类：可用于HTML

36、中的任何元素。 4.2.1 建立内部CSS样式表1内联CSS样式 内联CSS样式是所有CSS样式中比较简单和直观的方法，即直接把CSS样式代码添加到HTML的标签中，作为HTML标签的属性存在。 例如：“蓝色18像素显示的内联CSS样式文本信息”。4.2.1 建立内部CSS样式表1内联CSS样式4.2.1 建立内部CSS样式表2内部CSS样式 内部CSS样式即将CSS样式代码添加到“”标签之间，并且用“”标签进行声明。 内部CSS样式即在【新建CSS规则】对话框中，选择【选择器类型】，并输入或选择【选择器名称】，在【规则定义】中选择“仅限该文档”选项 。4.2.1 建立内部CSS样式表2内部C

37、SS样式4.2.2 建立外部CSS样式表 建立外部样式表的方法与内部样式表的过程相同，只是在【规则定义】中要选择“新建样式表文件”选项 。4.2.2 建立外部CSS样式表 建立外部样式表4.3 应用CSS样式4.3.1 应用内部CSS样式表1应用【类】规则2应用【ID】规则3应用【标签】规则4应用【复合内容】规则4.3 应用CSS样式4.3.1 应用内部CSS样式表4.3.2 应用外部CSS样式表 外部样式表创建并保存后，可以随时调用该样式表，并应用在任意所需的文档中。若用户需要将外部CSS文件导入到打开的网页文档中，则可以在【CSS样式】面板中单击按钮，打开【链接外部样式表】对话框，如下图所

38、示。 4.3.2 应用外部CSS样式表 外部样式表创4.3.2 应用外部CSS样式表 通过单击【浏览】按钮，在弹出的【选择样式表文件】对话框中查找外部的样式表文件，如下图所示。 4.3.2 应用外部CSS样式表 通过单击【浏4.4 利用CSS样式表美化网页4.4.1 设置【类型】属性4.4 利用CSS样式表美化网页4.4.1 设置【类型】属性4.4.2 设置【背景】属性4.4.2 设置【背景】属性4.4.3 设置【区块】属性4.4.3 设置【区块】属性4.4.4 设置【方框】属性4.4.4 设置【方框】属性4.4.5 设置【边框】属性4.4.5 设置【边框】属性4.4.6 设置【列表】属性4.

39、4.6 设置【列表】属性4.4.7 设置【定位】属性4.4.7 设置【定位】属性4.4.8 设置【扩展】属性4.4.8 设置【扩展】属性4.4.9 设置【过渡】属性4.4.9 设置【过渡】属性4.5 课堂案例CSS应用具体操作步骤：1打开素材文件“examplechapter04index1.html”，如下图所示。4.5 课堂案例CSS应用具体操作步骤：4.5 课堂案例CSS应用2创建内联CSS样式（1）在标签选择器选择“”后的“”标签（2）单击【拆分】按钮，进入拆分视图（3）将鼠标光标定位到左侧代码窗口已选区域的“”标签内部，输入一个空格，在展开的提示列表中选择“style”（4）根据提示

40、输入或选择“style”的“background”属性值，即“”。 内联CSS样式是直接在HTML标签中使用style属性，因此无需套用即可显示样式，网页效果如下图所示。 4.5 课堂案例CSS应用2创建内联CSS样式4.5 课堂案例CSS应用 应用内联CSS样式4.5 课堂案例CSS应用 应用内联CSS样4.5 课堂案例CSS应用2创建内部CSS样式 选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，单击面板底部按钮，打开【新建CSS规则】对话框，通过选取不同的【选择器类型】来创建不同的CSS样式。4.5 课堂案例CSS应用2创建内部CSS样式4.5 课堂案例CSS应用 (1)类： .hd的CSS规则定义 4.5 课堂案例CSS应用 (1)类： .hd的CSS规则4.5 课堂案例CSS应用 (1)类： .txt的CSS规则定义 4.5 课堂案例CSS应用 (1)类： .txt的CSS规4.5 课堂案例CSS应用 (1)类： .txt的CSS规则定义 4.5 课堂案例CSS应用 (1)类： .txt的CSS规4.5 课堂案例CSS应用应用CSS样式 （1）选中设计窗口中“