安徽工程大学web程序设计第二章.ppt

CSS补充知识,一、CSS盒子模型 SampleCSSbox_1.html padding(填充)是边框到内容的距离 border(边框)是盒子的边框,可以对边框的宽度、边框样式、边框颜色加以定义 margin(边界)定义元素周围的空间。可以用负值对内容进行叠加,border,padding,content,margin,图1,由外到内依次是:margin、border、padding 、content。 如果对一个box设置背景属性，指的是content区域和padding区域，而width属性、height属性指的是content区域，不包括padding和margin。 css的margin、border和padding属性都分为上、下、右、左四部分，每个部分都可以单独存在。,SampleCSSbox_2.html SampleCSSbox_3.html margin定义了页边距或者与其他层之间的距离，可以简写为margin:20px 30px 40px 50px(顺序为上右下左)。分开写就是margin-top:20px、margin-right:30px;margin-bottom:40px;margin-left:50px;如果所有边界都一样，可以写为margin:20px。 border 有颜色、粗细、样式三个属性，对左边框设定属性可以写成border-left:#000000 thin solid. 分开写: border-left-color:#000000; border-left-width:thin; border-left-style:solid 如果上右下左一样，就写为border:#000000 thin solid (两个顺序 上右下左 颜色 宽度 样式) width定义的为内容的宽度,边框风格,二 绝对定位和相对定位 绝对定位是一种常用的CSS定位方法，层布局就是一种简单的CSS绝对定位方法。绝对定位在CSS中的写法为:postion:absolute。应用top、right、bottom、left进行定位，默认父标签的坐标起始点为原点；对整个网页进行定位布局时其父标签为body,其坐标原点在浏览器左上角。 如果一个box的宽度和高度固定，那么给定top和left两个属性就可以对box在网页中进行定位。 如果一个网页有包含多个box,根据box的宽度的位置要求以及大小进行计算，来进行绝对定位。 相对定位 相对是相对于静止定位时层的位置。,除了绝对和相对定位之外，还有固定定位。所谓固定定位就是将元素保持在同一位置，即使文档滚动也如此。但是ie浏览器不支持固定定位。 元素的默认的是静态定位，这意味着在文档中的连续的显示该元素。 。,SampleCSSbox_4.html #relative采用相对定位，其位置由属性top和left的值以及父对象#head的位置来决定，当#haed位置发生改变时，#relative相对于#head 的位置不发生变化。 SampleCSSbox_5.html 尝试用相对定位的方式进行整个页面，页面中有三个层，都采用相对定位，实现的关键是计算各个层的坐标，或者说各层top和left两个属性的值。 本例尝试用相对定位的方式进行这个页面的布局，这种布局方法没有使用价值，目的在于掌握计算各个层的相对坐标。,SampleCSSbox_5.html 本实例尝试用相对定位的方式进行整个页面的布局，这种布局没有使用价值。目的是进一步学习相对定位。 注意： 相对定位坐标=绝对定位坐标(absolute)-静止定位坐标(static),三 浮动 浮动是一种常用的css定位方式，首先要理解display属性和block属性。 1)块元素和内嵌元素 HTML元素分为两种，一种是块元素，一种是内嵌元素。 块元素总是从新行开始；元素的宽、高、padding、margin属性都可在css中进行控制；默认宽度为容器的100%。常见的块元素有、 、。 内嵌元素可和其他元素在同一行上；宽、高、padding、margin等不可改变；常见的内嵌元素有、。,用display:inline或display:block可以改变HTML元素的显示特性。Sample让inline元素从新行开始，让block元素不换行。 2）浮动 层(div)标签的默认属性display为block,在应用Div标签进行布局时，很多时候需要多个层在一行，完成一种多列效果的设计。在进行这种多列效果设计的时候还需要保持Div的一些属性，如宽度、高度等。在这种情形下就要使用float。 CSS的浮动属性，作用就是改变元素(block)对象的默认显示方式。Block对象设置了float属性之后，就可以在保持block 对象特性的基础上，使多个block对象在同一行中显示。,使用浮动的时候经常会使用一个容器把各个浮动的盒子组织在一起，是一个盒子中包含多个盒子，达到更好的布局效果。 浮动的取值有左对齐、右对齐、无。左对齐使浮动对象靠近其容器的左边，可以有多个对象左浮动，当一个浮动对象的宽度小于容器剩余的宽度时，它就会自动另起一行。,使用浮动完成多列效果时，浏览器的宽度变化会使页面显示效果发生较大的变化，这在大多数情形下是应该避免的。最常用的解决方法将需要多列显示的盒子放在一个宽度固定的容器（盒子）中，代码如下： float:left fllat:right fllat:right fllat:right container也是一个盒子，通常称为容器。SampleOfFloat4.html为一个常见的两列布局。,多列的布局使用容器，容器内只装盒子，其他的文字删去。 margin-left和margin-right都为auto,可以使盒子居中。在IE浏览器中，可以通过 body text-align:center; 来使盒子居中。 在上面的例子中，我们同时使用了两种方法，故在IE中、火狐、Opera中都是居中的。对body设置了text-align使盒子居中，也使容器中的文字居中，这里需要对容器中的text-align重新设定。 （我们做好了一个网页，为了考虑兼容性，可以用多个浏览器来看一下效果 ）,3）clear属性 在使用css+div进行布局的时候，还有一种情形是在多列后面要另起一行，这个时候就需要用到特殊的属性(clear) SampleOfClear.css 为了另起一行开始新的布局，需要使用clear属性，清除浮动。Clear取值如下： none:默认值，允许两边都可以有浮动对象 left:不允许左边有浮动对象 right:不允许右边有浮动对象 Both不允许有浮动对象 在进行页面布局的时候，清除浮动通常采用clear:both。,注意： Div标签不能有嵌套错误。 定位的方法有绝对定位、相对定位和浮动定位。在现实应用中，通长需要三种都使用。 在布局的时候，需要考虑到多种浏览器的显示效果，尽量让页面在多种浏览器下都能显示。,四 DIV+CSS设计思想 DIV+CSS是一种网页设计的思想，其最基本的思路就是实现网页的内容和表现相分离。DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素，DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的。其中包含元素的标签由DIV标签的属性来控制。 DIV+CSS的基本过程是先布局，对网页进行总体设计；再设计内容，对布局的每一部分进行设计。 DIV+CSS应用盒模型进行布局，盒子在CSS中描述，然后把CSS样式应用到DIV标签上，就完成了布局的过程。 DIV+CSS对内容的设计也体现内容和表现分离的思想，对内容的表现都描述在CSS中，内容可以应用CSS样式，不需要额外的HTML标签对内容的修饰。,在DIV+CSS中和CSS配合使用的HTML元素有H1、H2、H3、H4、H5、ul、Li等，通过CSS样式对这些Html标签重新定义，达到以内容和表现分离的方法完成网页内容设计的目的。 【例】导航条设计 SampleOfNav.html 典型的导航条实现，可以在此基础上进行自由的扩展，实现更美观的导航条。 在这个例子中，#menu ul和#menu li a都用到了display属性，他们的值分别为inline和block,这也是display属性最常用的两个值。 display为inline的元素是内嵌元素，display为block的元素为块元素，独占一行。,float:left;(左浮动)指定元素脱离普通的文档流，可以使多个块元素在一行中显示。float 必须应用在块元素上，不应用于内嵌元素。 导航条设计要点： 将a标签设置为block,并设定宽度、padding属性；li设置为float;ul设置为list-style-type:none。其他的设置，大多是为了实现更加美观的效果。,第二章 使用网页工具制作静态网页,2.1Dreamweaver入门 2.1.1 DreamweaverCS4的界面 1.菜单栏与工作区切换器 单击设计器按钮，可选的工作区模式有：应用程序开发人员（高级)、经典、编码器、编码人员(高级)、设计器、设计人员(紧凑)、双屏幕，默认的是设计器工作区模式。 2.视图切换栏和文档标签 代码视图就是整个文档都显示代码，设计视图就是整个文档窗口都是可视化编辑空间，拆分视图就是将文档拆成两部分，一半是代码区、一般是设计区。实时视图就是模拟网页在浏览器中的显示效果，这是DMCS4新增的一种视图。选中实时视图时，实时代码就被激活。 3.文档工具栏 设置网页标题、在浏览器中预览等,第二章 使用网页工具制作静态网页,4.文档窗口 5.标签选择器和状态栏 “标签选择器”的功能是显示与当前光标位置内容相关的所有标签，在”标签选择器”中单击某个标签，网页里与该标签相对应的页面元素即被选中。 6.属性面板 标签选择器下面是属性面板，属性面板用于查看和设置所选元素的属性，选择不同类的元素时，属性面板中的属性项不同。在DM4中，元素的属性分为HTML属性和CSS属性。HTML主要设置元素内容，CSS主要设置元素的显示样式。 7.面板组 面板组中默认有插入、css样式、AP元素、绑定、服务器行为、组件、文件、资源等面板，每一个面板都有一个标签名。更多面板通过窗口菜单下的按钮来调用。,2.1.1建立本地站点 使用高级选项进行站点的定义 2.1.3新建html网页 2.2文本编排与CSS样式 2.2.1文本输入及HTML属性 三种空格输入方法 选择菜单“插入”-”html”-“特殊字符”-“不换行空格” 在“代码”视图中，输入” 使用快捷键Ctrl+Shift+Space,2.2.2CSS样式的创建与应用 在Dreamweaver中，创建CSS样式可以通过css样式面板，或者通过属性面板来进行。 2.2.3CSS样式表文件 1.直接单独新建CSS样式文件 2.在创建CSS样式的同时新建一个CSS样式表文件 3.将新建的CSS样式保存到已有的外部CSS样式表文件中 2.3插入图像、动画与媒体元素,2.3.1插入并编辑图像 1.插入图像 通常使用哪些图像格式(jpeg、gif、png等) 2.图像属性编辑 图像基本属性 设置宽、高来改变图像的大小 通过设置“源文件”来选择图像 替换的含义为：当浏览网页时把光标放在图像上会显示文字提示。 图像占位符是在准备好讲最终图形添加到网页之前使用的图形，在网页布局时经常用到。,图像扩展属性： 简单图像处理工具可以对图像进行修改，这里的修改直接针对原文件，会实质性的改变图像文件。 热点工具按钮是用于设置图像的热点区域，热点主要用于连接。 3.图像占位符的使用 图像站位符是在准备好将最终的图形添加到网页前使用的图形，在网页布局时经常用到。可以设置占位符的大小、颜色，并为占位符提供文本标签。 插入图像占位符 替换图像占位符 2.3.2插入动画和其他多媒体元素,2.4插入超链接 给文本设置链接 锚点链接 电子邮件链接 图像热点区域链接 2.5网页表格 创建一个表格 使用表格进行网页布局,第三章 网页图形与图像处理,3.1Fireworks基础 Adobe Fireworks(以前是Macromedia Fireworks)是用来设计和制作专业化网页图形的终极解决方案。可以再Fireworks这个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像，从而创建非凡的网页图像。 3.1.1Fireworks CS4的新功能 3.1.2Fireworks CS4的安装、启动与退出 3.1.3Fireworks CS4的界面,1.中文版Fireworks CS4的界面 2.常用工具栏和修改工具栏 3.绘图工具箱 组合工具的选取 4.属性面板 在Fireworks中，使用工具时要学会看”属性”。”属性”检查器是Fireworks中非常重要的一个面板，可以通过”属性”面板看所选对象的属性，方便快速的修改对象属性。 当选择一种工具时，”属性“检查器将显示该工具选项。有些工具选项在使用该工具工作时仍然保持显示。 它有两种显示方式：办高方式打开，只显示两行属性；全高方式打开，显示四行属性。,可以将”属性“放置任意放置。如果要将“属性”检查器放到工作区其他的部分，用鼠标单击其左上角的专区器即可。默认情形下显示的是画布的属性。 5.浮动面板组 浮动面板组可以展开，也可以折叠为图标，单击浮动面板组右上方的箭头来进行切换。浮动面板组中主要有优化、层、状态、历史记录、形状、样式、公用库等面板。这些面板都是可拖动的，可以根据需要来讲面板排列在一起。没显示出来的面板可以通过“窗口”菜单来调用显示相应的面板。 历史记录面板： 列出最近使用过的命令，以便能够快速实现撤销和重做命令。另外，也可以选择多个动作，然后将其作为命令保存和从新使用。 6.查看和切换文档 在Fireworks中，通过控制文档的缩放比率、视图数目和显示模式，可以快速查看；如果打开多个文档，可以通过文档选项卡切换文档。,使用文档选项卡 当文档窗口处于最大化时，可以使用文档窗口顶部的文档选项卡，轻松地在多个打开的文档之间进行选择切换。每个被打开文档的文件名都会显示在视图按钮上方的选项卡上。 缩放和移动 在Fireworks中，可以对文档及图像按照预设的或者用户定义的缩放百分比进行放大和缩写。在菜单的右侧有个视图工具，可以缩放和移动对象，也可以自定义缩放比例。 3.1.4创建Fireworks文件 在fireworks中创建的文件，其默认格式为png,即可移植网页图形文件。 1)创建新文件。,创建文件时，以像素/英寸或像素/厘米为单位输入画布的宽度和高度值。 2）打开文件 在Fireworks中，可以很容易的打开、导入和编辑在其他图形程序中创建的图形。 3)保存文件 3.2图形的绘制与编辑 3.2.1绘图工具简介 3.2.2基本图形绘制与变形 1.基本矢量图形的绘制 什么是矢量图形，所谓矢量图形，是指由一组数学公式描述的点、线、面信息构成的图形，任意缩放不影响图形的质量，矢量图