03模块-静态网页基础讲解.ppt

03模块-静态网页基础 静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。静态网页是网站建设的基础，静态网页和动态网页相互依存。本模块主要介绍网页设计工具——Dreamweaver CS5的常用操作，如插入表格、图像、视频和Flash动画等网页元素，同时介绍了HTML的常用标签。另外讲解了CSS(层叠样式表)的基础知识，以及如何用CSS设计超链接的样式和实现网页换肤效果等。 知识1 Dreamweaver CS5的工作环境 (1)应用程序栏 应用程序窗口顶部包含一个工作区切换器、菜单栏(主要包括“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”、“帮助”等菜单)以及其他应用程序控件。单击菜单栏中的命令，在弹出的下拉菜单中选择要执行的命令。 (2)插入栏 包含用于将各种类型的“对象”(如图像、表格和层)插入到文档中的按钮。每个对象都是一段HTML[1]代码，使用户在插入时设置不同的属性。例如，可以在“插入”栏中单击“图像”按钮插入图像。也可以不使用“插入”栏而使用菜单“插入”|“图像”命令插入图像。 (3)文档工具栏 文档工具栏包含一些按钮，它们提供在各种“文档”窗口视图(如“设计”视图、“拆分”视图和“代码”视图)间快速切换的选项、各种查看选项和一些常用操作(如“在浏览器中预览/调试”、“文件管理”、“验证标记”、“检查浏览器兼容性”等)。 (4)文档窗口 文档窗口用于显示当前正在创建和编辑的文档。将鼠标在文档中单击，即可开始在光标位置输入网页元素并进行编辑了。 (5)面板组 面板组是分组在某个标题下面的相关面板的集合，用来帮助用户监控和修改工作。主要包括“插入”面板、“行为”面板、“CSS样式”面板和“文件”面板等。用户可以根据自己的需要，选择隐藏和显示面板。若要展开某个面板，请双击其选项卡。 (6)属性面板 属性检查器用于查看和更改所选对象或文本的各种属性。属性面板会随着选择对象的不同而有所不同。单击“属性”面板右下角的三角箭头可以折叠/展开属性面板。单击“属性”面板右上角的下拉菜单选择“关闭”或“关闭面板组”命令可以关闭“属性”面板。如果要重新打开，可以单击“窗口”|“属性”命令。 (7)标签选择器 标签选择器位于“文档”窗口底部的状态栏中。显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。 (8)文件面板 文件面板类似于Windows资源管理器，用于管理文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是位于远程服务器上。用户还可以通过“文件”面板访问本地磁盘上的全部文件。 知识2 样式表的优点 样式设计是指应用HTML语言和CSS(层叠样式表)设计网页的外观样式。CSS是Cascading Style Sheet的缩写，译为“层叠样式表”或“级联样式表”。虽然CSS在网页里与HTML编写在一起，但是它不属于HTML。它可以扩展HTML的功能，调整字间距、行间距，取消链接的下划线、多种链接效果和固定背景图像等。CSS可以实现原来HTML标签无法实现的效果。—个样式表又称为CSS，由样式规则组成，具有以下特点。 1．同时更新站点的多个页面，更快更容易 2．格式和结构分离 CSS通过将定义结构的部分和定义格式的部分相分离，使用户对页面的布局可以施加更多的控制。 3．制作体积小，下载页面快 知识3 CSS的基本语法 CSS的样式规则由三个部分构成：Selector(选择器)、Property(属性)和Value(属性的取值)。基本的格式如下。 (1)selector：CSS选择器，用来定义样式类型并将其运用到特定的部分，有类选择器、标签选择器、ID选择器和关联选择器四种。 (2)property：就是指将要被设置的属性，例如color。 (3)value：赋给property的值，例如赋给color的值可以为red或者#FF0000。下面是一个典型的例子。 body{backgroundcolor:#FFFFFF;color:#FF0000;} a{color:red;} 该样式定义实现将页面背景颜色设置为白色、文字颜色设置为红色；所有的链接都设置为红色。 通常把所有的样式定义放在style/style标签里，然后再放到head/head标签里面。如下面样式将设置网页背景色为白色，文字颜色为黑色，超链接的颜色为红色带下划线。 style type=text/css !-- body{ background-color:#FFFFFF; color:#000000; } a{ color:#FF0000; text-decoration:underline; } -- /s