可视化网页设计工具-DW-网页设计.ppt

第五章 可视化的网页制作工具,-Dreamweaver,Dreamweaver是美国著名的软件公司Macromedia推出的一个“所见即所得”的可视化网站开发工具。也是深受国内外专业Web开发人员喜欢的一款软件。本章重点介绍Dreamweaver MX的工作界面、站点管理、组织排版、制作网页、网页发布等功能。,5.1 Dreamweaver的工作界面,Dreamweaver MX的工作界面中包括了标题栏、菜单栏、插入栏、工具栏、“属性”面板、功能面板组、状态栏和文档窗口。与Fireworks和Flash的工作界面基本一致。用户可根据需要把这面板组合在一起或折叠起来，从而构造一个方便的工作环境。,5.1 Dreamweaver的工作界面,1.标题栏 2.菜单栏 3.插入栏 4.工具栏,5.1 Dreamweaver的工作界面,5.1 Dreamweaver的工作界面,5.“属性”面板 6.文档窗口 7.面板组,5.2 Dreamweaver的站点管理,5.2.1 关于Web站点 Web站点是一组具有共同属性（如共同的主题、类似的设计或共同的目的）并相互链接的网页文档的集合。使用Dreamweaver当然可以设计单张的网页，但由于网页一般都要通过超级链接互相进行关联，一些具有共同属性的网页，相互链接在一起，就构成了一个Web站点。如一个小公司的Web站点，往往由公司首页、公司概况、产品介绍、联系方式等网页文档互相链接构成。,5.2 Dreamweaver的站点管理,5.2.1 关于Web站点 站点也是网页文档的在本地磁盘的组织形式，它同样是由文档和文档所在的文件夹组成的。建立站点的第一步就是要在本地硬盘上进行规划，创建一个文件夹（例如在D:盘上建立一个mysite的文件夹）作为保存一个站点所有文档的文件夹，然后再分门别类地创建子文件夹来分别存放不同类别的文档。,5.2 Dreamweaver的站点管理,5.2.1 关于Web站点 只有设置和规划好本地站点的结构，以后网站的维护、更新才能轻松地进行。设置站点就是在本地磁盘上创建一个包含站点所有文件的文件夹（也被称为本地站点），然后在该文件夹中创建和编辑文档。一旦用户创建了站点结构，就必须在Dreamweaver中指定新的站点，当在Dreamweaver中建立了本地站点并设置好FTP后，就可以将站点上传到Web服务器上，并能够自动跟踪和维护链接、相互共享文件了。,5.2 Dreamweaver的站点管理,5.2.2在Dreamweaver中创建一个站点 5.2.3管理本地站点 1.向站点中添加内容 （1）添加文件夹 （2）添加主页 （3）添加普通网页,5.2 Dreamweaver的站点管理,5.2.3管理本地站点 2.管理本地站点 （1）打开站点 （2）编辑站点 （3）打开和删除网页文件,5.2 Dreamweaver的站点管理,5.2.4上传和更新Web站点 1.设置远程站点属性,5.2 Dreamweaver的站点管理,5.2.4上传和更新Web站点 1.设置远程站点属性,5.2 Dreamweaver的站点管理,5.2.4上传和更新Web站点 2.连接和上传文件到远程站点 设置好远程站点的属性后，就可以连接到远程站点了。打开站点面板，切换到远程视图，通过站点工具栏，如图5.15所示，可以方便地完成连接、上传、下载文件等工作。,5.2 Dreamweaver的站点管理,5.2.4上传和更新Web站点 2.连接和上传文件到远程站点,5.3 处理基本网页元素,当本地站点创建完成，在站点中建立的一个个网页文件还是空文档。需要在网页中插入文字、图片以及其他的多媒体对象，如动画、影像、连接到其他文件的链接以及声音，才能成为真正的网页，这个过程就是网页设计。这一切操作主要在文档窗口完成，Dreamweaver MX会自动在文件中加入相应的HTML和其他脚本程序代码。,5.3 处理基本网页元素,5.3.1页面基本属性的设定 设置页面基本属性是网页设计的第一步工作。网页的基本属性包括页面标题、背景图像和颜色、文本和链接颜色，还包括在“文件头”选项卡中定义的信息等内容。这些信息对于用户了解了解网页的基本内容、搜索查找网页都起着非常重要的作用。,5.3 处理基本网页元素,5.3.1页面基本属性的设定 1.设置页面属性,5.3 处理基本网页元素,5.3.1页面基本属性的设定 1.设置页面属性,5.3 处理基本网页元素,5.3.1页面基本属性的设定 2.设置文档头部元素,5.3 处理基本网页元素,5.3.2文本处理 1.插入普通文本 2.插入特殊字符 3.插入日期 4.插入水平线,5.3 处理基本网页元素,5.定义文本格式 在一般情况下，插入的文本都是使用默认格式，网页中的文字显得呆板而不美观，因此，需要根据情况对网页中的文本的格式进行设定，这项工作相当于文字处理软件中的格式化文本的过程。文本的格式包括字符属性的设定和段落属性的设定等内容。 (1）设置字符属性 设定字体 示例 属性：size=“”;color=“”;face=“” Face属性给出了一个用逗号分隔的字体样式列表。 设置文本的大小 Size的值是17级，默认是3级，可以在当前级的基础上增大或减小。 设置文本的颜色 设置文本样式 示例 文本样式是指文本的显示方式，如加粗、倾斜、下划线等 加粗 斜体、 下划线 删除线 下标 上标,5.3 处理基本网页元素,5.定义文本格式 （2）设置段落属性 应用段落和标题格式 设置对齐方式 设置段落缩进,5.3 处理基本网页元素,5.定义文本格式 （2）设置段落属性 使用文本列表 符号列表是各项目左边无编号，而是以特殊的符号表示。,5.3 处理基本网页元素,5.定义文本格式 （2）设置段落属性 使用文本列表 标号列表就是各项目左边加上数字符号或其他有序的标号.,5.3 处理基本网页元素,5.3.3图像处理 1.插入图像 2.设置图像的属性,5.3 处理基本网页元素,5.3.4超级链接 1.创建文档链接 2.创建命名锚记链接 （1）创建命名锚记 （2）创建命名锚记链接 3.创建电子邮件链接 4.创建脚本链接 javascript:window.history.back() javascript:window.scroll(0,0),5.3 处理基本网页元素,5.3.4超级链接 5.创建空链接 空链接是指没有目标端点的链接，利用空链接，可以激活文档中链接对应的对象或文本，从而为对象或文本添加一个行为。创建空链接的操作步骤如下： （1）选择需要创建空链接的文字或图片。 （2）在“属性”面板的“链接”后的文本框内输入一个“#”号。 6.创建图像地图链接 图像地图指一个图像被分割为多个链接区域（或称热点），当用户单击某个链接区域时会打开链接目标。使用图像属性面板可以通过图形方式创建或编辑图像地图链接。,5.3 处理基本网页元素,5.3.5 表格 在网页设计中，人们经常感到许多网页元素，如文字、图像等的位置难以控制。而在网页设计中，最好也是最具有兼容性的方法就是使用表格。表格是Web站点中经常使用的一种简洁有序信息的方式。在网页中合理地使用表格，能够快速便捷地处理批量数据，使网页不论是在版式方面，还是在文本、图像方面，都能够呈现更好的视觉效果。,5.3 处理基本网页元素,5.3.5 表格 在网页设计中，人们经常感到许多网页元素，如文字、图像等的位置难以控制。而在网页设计中，最好也是最具有兼容性的方法就是使用表格。表格是Web站点中经常使用的一种简洁有序信息的方式。在网页中合理地使用表格，能够快速便捷地处理批量数据，使网页不论是在版式方面，还是在文本、图像方面，都能够呈现更好的视觉效果。,5.3 处理基本网页元素,5.3.5 表格 （1）布局视图 为了简化使用表格进行排版的过程，Dreamweaver MX提供了布局视图。在布局视图中，用户可以使用表格作为基础结构来设计网页，避免了使用传统的方法创建基于表格的页面布局经常出现的一些难题。在布局视图中，用户可以在页面上方便地绘制布局单元格，然后将这些单元格移动到所需的位置。 （2）表格和布局表格,5.3 处理基本网页元素,5.3.5 表格 2.创建表格 （1）创建普通表格 （2）创建布局表格 3.编辑表格 （1）选择表格,5.3 处理基本网页元素,5.3.5 表格 3.编辑表格 （2）设置单元格属性 （3）拆分与合并单元格 （4）删除行或列,5.3 处理基本网页元素,5.3.5 表格 表格的高级应用 1.制作一个圆角表格 在表格的参数里面增加了 . 2.制作一个无名表格 在参数里面增加了 . 和. 3.制作一个立体表格 在表格参数中增加了bordercolorlight 属性 bordercolorlight 立体边框色 4.制作一个细线表格 5.制作一个正立方表格 在表格参数里面增加了 bordercolordark 和 bordercolorlight 属性,5.3 处理基本网页元素,5.3.6 使用CSS样式 1.Dreamweaver MX中的“CSS样式”面板 2.创建和链接外部CSS样式 （1）创建CSS样式 （2）链接外部CSS样式 3.管理CSS样式表 （1）应用CSS样式 （2）管理CSS样式,5.3 处理基本网页元素,5.3.7 插入其他多媒体对象 1.在网页中加入音频 （1）链接到音频文件 （2）在网页加入背景音乐 （3）在网页中嵌入音频文件 2.在网页中插入Flash动画,5.3 处理基本网页元素,5.3.7 插入其他多媒体对象 3.在网页中插入视频文件 （1）在网页中插入普通视频文件 （2）在网页中嵌入视频文件 （3）在网页中嵌入Real视频文件,5.4 Dreamweaver高级应用,5.4.1 表单 在制作动态网页的过程中，网站的设计者需要了解网络的访问者的一些情况，HTML提供了表单作为网站与访问者之间交流信息的主要工具。 表单工作的基本过程如下： （1）访问者在浏览有表单的网页时，可填写必须的信息，然后按某个按钮提交信息。 （2）这些信息通过Internet传送到服务器上。 （3）服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。 （4）当数据完整无误后，服务器反馈一个输入完成的信息。 从这个工作过程可以看出，表单的开发可以分成两个部分：一是在网页上制作必须的表单项目，这一部分称为前端，主要在Dreamweaver或其他的网页制作软件中完成；另一部分是编制如何处理访问者填入的信息的程序，这一部分称为后端，主要是用网络解释或编译程序（如ASP、PHP、JSP等）制作。,5.4 Dreamweaver高级应用,5.4.1 表单 1.创建表单 对于访问者来说，大多在网上看到的是表单对象，如文本框、下拉菜单、单选框等。实际上，表单中还包括了一些访问者看不到的内容。一个表单基本包括以下几个部分： （1）表单标签：包含了处理表单数据所用的服务器端程序的URL以及数据提交到服务器的方法。 （2）表单域：包含了文本框、菜单、复选框和单选框等元素。 （3）提交按钮：提交按钮是一个特殊的表单域。单击提交按钮后，数据将被传送到服务器上，由服务器程序处理。,5.4 Dreamweaver高级应用,5.4.1 表单 2.添加表单对象 表单中用于输入信息的元素称为表单对象。插入表单后，必须往表单中添加相应的表单对象。插入表单对象可以通过插入栏中的“表单”选项卡进行，也可通过菜单栏中的“插入”|“表单对象”下的子菜单命令来完成。,5.4 Dreamweaver高级应用,5.4.1 表单 3.设置表单对象属性 在表单中插入各种表单对象后，都应该根据具体的需要设置表单对象的属性。 （1）设置文本对象属性 （2）设置文件框对象属性 （3）设置隐藏域对象属性 （4）设置选择框对象属性 （5）设置菜单对象属性 （6）设置表单按钮属性,5.4 Dreamweaver高级应用,5.4.2 框架 框架主要用于将网页分割为多个HTML页面进行显示，即将一个浏览器窗口划分为多个区域，每个区域可以显示不同的文档。在Dreamweaver MX中，可以方便地创建框架集和框架。 框架实际上由两部分组成，即框架与框架集。框架集实际是一个页面，用于定义文档中框架的结构、数量、尺寸及装入框架的页面文件。框架集文件本身不在浏览器中显示，它只是向浏览器提供如何显示框架以及在框架中显示哪些文档的信息，是一个用于存储框架的容器。 如果框架集被称为父框架，框架就可称为子框架。当用户将某个页面划分为若干框架时，即可分别为各框架创建新文档，也可为框架指定已制作好的文档。 使用框架最常见的用途就是导航，在使用了框架以后，用户的浏览器不需要为每个页面重新加载与导航相关的图形，而且每个框架都可以有自己的滚动条，用户浏览时比较方便。但是，并不是所有的浏览器对框架都提供了良好的支持，因此，在设计时应考虑到这些因素，要设计noframes部分，为那些不能查看框架的用户提供支持。另外，使用框架时，对于各个框架中的页面元素难以精确定位也是框架的一个缺陷。,5.4 Dreamweaver高级应用,5.4.2 框架 1.创建框架集 2.设置框架和框架集属性 （1) 选择框架和框架集 （2）设置框架的属性 （3）设置框架集的属性 3.设置框架链接 4.保存框架和框架集,5.4 Dreamweaver高级应用,5.4.3 层 层是一种HTML页面元素，可以放置在页面的任意位置。层中可以包含文本、图像或其他可在HTML文档正文中放入的元素。由于层是透明的，因此在网页排版时可以观察到其他网页元素的定位。另外，由于移动或编辑某个层中的内容时不会影响到其他层，因此，层在网页排版定位方面具有独特的优势。在Dreamweaver MX中，利用层还可以产生一些特殊的效果、制作动画等。,5.4 Dreamweaver高级应用,5.4.3 层 1.层的使用 （1）创建层 （2）嵌套层 通过按住 Alt 键并拖动在现有层中嵌套一个层; 在“文档”窗口的“设计”视图中将插入点放置在一个现有层中，然后选择“插入”“层”; 若要使用“层”面板将现有层嵌套在另一个层中，请执行以下操作： 选择“窗口”“层”，打开“层”面板。 在“层”面板中选择一个层，然后通过按住 Ctrl 键并拖动将层移动到“层”面板上的目标层。 当目标层的名称突出显示时，请松开鼠标按钮。 (3）管理层 层的可见性: default-默认； inherit-继承； visible-可见； hidden-隐藏,5.4 Dreamweaver高级应用,5.4.3 层 2.编辑层 (1)选择层 单击一个层的选择柄; 在一个层中按住Ctrl-Shift 键并单击; 要选择多个层，在“文档”窗口中，在两个或更多个层的边框内（或边框上）按住 Shift 键并单击。 (2)设置层属性 (3)调整层大小 将层转换为表格，选择“修改”“转换”“层到表格 3.层动画,5.4 Dreamweaver高级应用,5.4.4 行为 Macromedia Dreamweaver “行为”将 JavaScript 代码放置在文档中，以允许访问者与 Web 页进行交互，从而以多种方式更改页面或引起某些任务的执行。行为是事件和由该事件触发的动作的组合。用户在浏览网页时进行的一些动作，如单击某个对象、输入数据等。这些动作将触发各种事件。网页可以通过执行不同的动作来处理各种事件，达到和用户交互的目的。行为的代码是运行于客户端的JavaScript，但在Dreamweaver MX中，用户不必掌握很多JavaScript编程知识，就可以用Dreamweaver MX的行为面板插入多种行为。 Dreamweaver 提供大约二十多个行为动作；可以在 Macromedia Exchange Web 站点以及第三方开发人员站点上找到更多的动作；,5.4 Dreamweaver高级应用,5.4.4 行为 1.“行为”面板 选择“窗口”“行为”。 事件是浏览器生成的消息，指示该页的访问者执行了某种操作。例如，当访问者将鼠标指针移动到某个链接上时，浏览器为该链接生成一个 onMouseOver 事件；然后浏览器查看是否存在当为该链接生成该事件时浏览器应该调用的 JavaScript 代码（这些代码是在被查看的页中指定的）。不同的页元素定义了不同的事件；例如，在大多数浏览器中，onMouseOver 和 onClick 是与链接关联的事件，而 onLoad 是与图像和文档的 body 部分关联的事件。 动作是由预先编写的 JavaScript 代码组成的，这些代码执行特定的任务，例如打开浏览器窗口、显示或隐藏层、播放声音或停止 Macromedia Shockwave 影片。随 Dreamweaver 提供的动作是由 Dreamweaver 工程师精心编写的，提供了最大的跨浏览器兼容性。,5.4 Dreamweaver高级应用,5.4.4 行为 2.使用DreamweavercMX的内置行为 (1)“播放声音” 使用“播放声音”动作来播放声音。例如，可能要在每次鼠标指针滑过某个链接时播放一段声音效果，或在页载入时播放音乐剪辑。 (2)“打开浏览器窗口” 使用“打开浏览器窗口”动作在一个新的窗口中打开 URL。可以指定新窗口的属性（包括其大小）、特性（它是否可以调整大小、是否具有菜单栏等）和名称。例如，可以使用此行为在访问者单击缩略图时在一个单独的窗口中打开一个较大的图像； (3)“弹出信息” “弹出消息”动作显示一个带有您指定的消息的 JavaScript 警告。因为 JavaScript 警告只有一个按钮（“确定”），所以使用此动作可以提供信息，而不能为用户提供选择。 (4)“调用JavaScript” (5)“检查插件” 3.通过插件来扩展DreamweavercMX的行为 功能扩展是一些您可以容易地添加到 Dreamweaver 中的新功能。可以使用许多类型的功能扩展，例如用来重新格式化表格、连接到后端数据库或者帮助您为浏览器撰写脚本的功能扩展。,5.4 Dreamweaver高级应用,5.4.5 模板和库 1.模板 (1)创建和删除模板 (2)编辑模板 (3)由模板新建文档 (4)更新模板,5.4 Dreamweaver高级应用,5.4.5 模板和库 2.库 库是一种特殊的 Dreamweaver 文件，其中包含您已创建以便放在 Web 页上的单独的资源 或资源副本的集合。库里的这些资源称为库项目。每当更改某个库项目的内容时，可以更新所有使用该项目的页面。可以在库中存储各种各样的页面元素，如图像、表格、声音和 Flash 文件。 这里有一个如何使用库项目的示例：假定您正在为某公司建立一个大型站点。公司想让其广告语出现在站点的每个页面上，但是销售部门还没有最后确定广告语的文字。如果创建一个包含该广告语的库项目并在每个页面上使用，那么当销售部门提供该广告语的最终版本时，您可以更改该库项目并自动更新每一个使用它的页面。 Dreamweaver 将库项目存储在每个站点的本地根文件夹内的 Library 文件夹中。每个站点都有自己的库。,CSS样式表,什么是样式表： CSS 是 Cascading Style Sheet 的缩写。译作“层叠样式表单”。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。,CSS如何控制页面样式？,1.行内样式： 这是一个在元素中直接使用样式的示例。 行内样式表由HTML中元素的style属性所支持，我们只需要将CSS代码用；分号隔开书写在style=“”之中便可以完成对当前标签的样式定义，是CSS样式定义的一种基本形式。 但需要为每一个标记设置style属性，后期维护成本很高，而且网页代码雍肿，因此不推荐使用。,CSS如何控制页面样式？,从页面头部调用（内嵌式） 将CSS写在页面的head元素中，然后在页面中调用。 选择符属性：属性值； 所有的样式都可以写在和之间。 所有CSS代码部分被集中到了同一个区域，方便后期的维护，页面本身也大大瘦身，但如果是一个网站，拥有很多的面，对于不同的页面上的标记都希望设计同样的风格时，内嵌式的方式就显得略微麻烦，维护成本也很高。,CSS如何控制页面样式？,采用链接的形式调用（链接式） 使用link元素 链接式CSS样式表是使用频率最高，也是最为实用的方法，它将HTML页面本身分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便。,CSS如何控制页面样式？,采用导入式 使用import import url(2.css) 采用导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果，而链接式的表则是在HTML的标记需要格式时才以链接的方式引入。,CSS如何控制页面样式？,4种调用样式表的方法，在作用于页面元素时，优先级是不同的。在元素中直接使用的CSS具有最先的优先级，其次是从页面头部调用的CSS，再次是有用链接式的调用的CSS，最后才是上面提到的import导入式。 链接样式表是CSS应用中最好的一种形式，将CSS样式编码单独编写在一个独立的文件之中，由网页进行调用，多个网页可以调用同一个样式文件，因此能够实现代码的最大化重用及网站文件的最优化配置，推荐方式。,CSS语法结构,CSS的语法结构仅仅由三部分组成：选择符（Selector)、属性（Property）和值（Value）。 选择符：指这组样式编码所要针对的对象，可以是一个HTML标签，如body,h1；也可以是定义了特定id或class的标签，如main选择符表示选择,即一个被指定了main为id的对象。浏览器将对CSS选择符进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。 属性（Property)是CSS格式控制的核心，对于每一个XHTML中的标签，CSS都提供了丰富的样式属性，如颜色、大小、定位、浮动方式等。 值（Value）是指属性的值，形式有两种，一种是指定的范围的值，如float属性，只可能应用left,right,none三种值；另一种为数值，如width能够使用09999px,或其他数学单位来指定。,CSS语法结构,在实际应用中，往往使用以下的形式： bodybackground-color:blue; 除了单个属性的定义，同样可能为一个标签定义一个至更多个属性定义，每个属性之间使用分号隔开。 Ptext-align:center;color:block;font-family:arial; 以上的P标签被我们指定了3个样式属性，包含对齐方式文字颜色及字体。 同样一个id，或一个Class,都能通过相同的编写样式 content text-align:center; color:black; font-family:arial; .title line-height:25px; color:blue; font-family:arial; ,CSS的选择符的类型,标签选择符 是指以网页中已有的标签类型作为名称的选择符，body是网页中的一个标签类型，div也是，span也是。因此以下选择符都是标签选择符，而它们将控制页面中所有的body、div或span; body div span,H1,Color:red;,Font-size:25px；,选择器,声明,属性,属性值,CSS的选择符的类型,标签选择符 包含选择符：仅仅对某一对象中的子对象进行样式指定时，可以使用包含选择符： h1 span font-weight:bold; h1标签下的span标签将被应用font-weight:bold的样式设置。 这样做能够帮助我们避免过多的id及class的设置，直接对所需要设置的元素进行设置。,CSS的选择符的类型,id及class选择符 id选择符及class选择符均是CSS提供的由用户自定义的标签标签名称的一种选择符模式，用户可以使用id及class对页面中的HTML标签进行自定义名称，从而达到扩展HTML标签及组合HTML标签的目的。比如对于HTML中的h1标签而言，对于CSS，如果使用id选择符，那么及对于CSS来讲是两个不同的元素，从而达到扩展的目的。用户自定义的方式也有助于用户细化自身的界面结构，使用符合页面需求的名称来进行结构设计，增强代码可读性。,CSS的选择符的类型,id及class选择符 id选择符 id选择符是根据DOM文档对象模型原理所出现的选择符类型。对于一个网页而言，其中的每一个标签（或其他对象），均可以使用一个id=“”的形式对id属性进行一个名称的指派。Id我们可理解为一个标识，在网页中每个id名称只能使用一次。 如本例所示，HTML中的一个div标签被我们指定了id名为content.在CSS格式中，id选择符使用符号进行标识，如果我们需要对id为content的标签设置样式，应当使用如下格式： content font-size:14px; line-height:130% ,CSS的选择符的类型,id及class选择符 Class(类）选择符 class直译为类或类别，对网页设计而言，我们可以对HTML标签使用一个class=“”的形式对class属性进行名称指派。与id不同的是，class允许重复使用，如网页中的多个元素，都可以使用同一个class定义。 class的格式指定要使用.加上class名称的形式： .p1 margin:10px; background-color:blue; class选择符也是对CSS代码重用的良好体现，众多标签均可以使用同一个class来进行样式指派，不再需要每一个编写样式代码。,CSS的选择符的类型,伪类及伪对象 伪类及伪对象是一种特殊的类和对象，它由CSS自动支持，属CSS的一种扩展类型和对象，名称不能被用户自定义，使用时只能按标准格式进行应用： a:hover background-color:#333333 伪类及伪对象由以下两种形式组成： 选择符：伪类 选择符：伪对象,CSS的选择符的类型,伪类及伪对象 CSS内置了几个标准的伪类用于用户的样式定义。,CSS的选择符的类型,伪类及伪对象 CSS内置了几个标准的伪对象用于用户的样式定义。,CSS复合选择符,以上3种选择符或选择器，是最基本的选择符，以这3种选择器为基础，通过组合，还可以产生更多种类的选择器，实现更强、更方便的选择功能。复合选择器就是基本选择器通过不同的连接方式构成的。 复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器。,CSS复合选择符,交集选择器 交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或ID选择器。这两个选择器之间不能有空格，必须连接书写。,CSS复合选择符,交集选择器,CSS复合选择符,交集选择器 这种方式构成的选择器，将先中同时满足前后二者定义的元素，也就是前者所定义的标记类型，并且指定了后者的类别或者ID的元素，因此被称为“交集”选择器。 例如，声明了p、.special、p.special这3种选择器，它们的选择范围如图：,CSS复合选择符,“并集”选择器 同时选中各个基本选择器所选择的范围，任何形式的选择器，都可以做为并集选择器的一部分。并集选择器是多个选择器通过逗号连接而成的，在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，这时便可以利用并集选择器同是声明风格相同的CSS选择器。 可以利用全局选择器“*”。,CSS复合选择符,后代选择器 在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行声明，例如当与之间还包含标记时，就可以使用后代选择器进行相应的控制。后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就成为外层标记的后代。 后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。下面是一些典型的语句： .special icolor:red; /*使用了属性special的标记里面包含的 */ #one lipadding-left:5px; /*ID为one的标记里面包含的*/ 后代选择器产生的影响不仅限于元素的“直接后代”，而且会到它的“各级后代”。,CSS复合选择符,后代选择器 在CSS 2中，规范的制定者还规定了一种复合选择器，称为子选择器，也就是只对直接后代有影响的选择器，而对“子孙”以及多个层的后代不产生作用。 子选择器和后代选择的语法区别是，使用大于号连接。例如， Pspan color:blue; 但是IE6对于子选择器不支持，IE 7和Firefox都既支持后代选择器，也支持子选择器。,CSS中的长度单位,CSS中的长度单位 绝对长度单位：厘米(cm)、毫米(mm)、英寸(in)、点(pt)、派卡(pc)。 1英寸in2.54厘米 1厘米cm0.3937英寸 1毫米mm0.1厘米 1点pt1/72英寸 1派卡pc12点1/6英寸我国小四号字大小 绝对长度单位，虽然理解起来很容易，介是在网页设计中很少使用。,相对长度单位：像素(px)、行内字高(em)、字高(ex) 1em表示的长度是其父元素中字母m的标准宽度，1ex则表示字母x的标准高度。当父元素的大小变化 ，使用这两个单位的子元素的大小会同比例变化。,CSS的属性,CSS文字样式 在HTML语言中，文字的字体是通过来设置的，而在CSS中字体是通过Font-family属性来控制的。 文字大小 行高 文字的颜色与背景色 文字加粗、倾斜与大小写 文字的装饰效果 文字的水平对齐方式与段首缩进设置；,CSS的属性,CSS图像样式 图片的边框； 图片的对齐； 图文混排；,CSS的盒子模型,JavaScript,JavaScript 是一种新的描述语言，此语言可以被插入 HTML 文件之中，通过浏览器来执行。 它是一种脚本语言，并不需要编译，可以被一般的浏览器解释执行。 通过JavaScript程序，可以使得浏览器的功能加强，使浏览器并不简单地起到显示网页的作用，还可以进行一些和用户的交互。 这种脚本语言有两种，一种是JavaScript，它广泛地被IE和Firefox等浏览器所支持；另一种是VBScript，它由微软推出，目前仅IE对其支持得比较好。,JavaScript,将JavaScript脚本加入文档的格式为： JavaScript语言代码； JavaScript 语言代码; 其中：通过标记.指明脚本源代码的开始和结束。通过属性Language=JavaScript说明使用的是何种语言，这里是JavaScript语言。,JavaScript,将JavaScript脚本加入文档的格式为： JavaScript语言代码； JavaScript 语言代码; 其中：通过标记.指明脚本源代码的开始和结束。通过属性Language=JavaScript说明使用的是何种语言，这里是JavaScript语言。,JavaScript,也可以将JavaScript脚本写到一个文本文件中，保存为扩展名为.js的文件。然后在网页中可以根据需要来调用这个js文件： 例： ,JavaScript,JavaScript举例： function pushbutton() alert(嗨! 你好); ,JavaScript,JavaScript举例： ,JavaScript,JavaScript举例： .任意的页面内容. 这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。 怎么调用呢？ 方法一： 浏览器读页面时弹出窗口； 方法二： 浏览器离开页面时弹出窗口； 方法三：用一个按钮调用： ,JavaScript,如果没有时间学习JavaScript，可以从别人编好的网页中借用JavaScript。因为JavaScript是脚本语言，而且是在客户端执行的，所以打开一个网页后，从其源文件就可以看到JavaScript脚本，可以使用拿来主义的形式为我所用。,JavaScript,另外，也可以通过一些JavaScript软件来自动形成JavaScript脚本，只需要把它们粘贴到网页中去就可以了。 如：网页特效梦工厂、Sothink DHTMLMenu可以方便地使用。,排版架构,模块拆分,导航与banner 左侧列表 内部内容 Footer脚注,