PS切图+DIV布局.doc

上节课简单学习了CSS的基础知识。 一、介绍了在DW中新建CSS样式的方法： 通过单击CSS面板上的新建按钮。 通过文件|新建按钮进行新建。 两者所新建的CSS样式文件的区别在于，第一种方法所新建的CSS样式，是直接嵌入到网页源文件中的。 其HTML的嵌入标签的嵌套格式如下： style type=text/css /style 上节课还介绍了通过CSS样式来控制网页的尺寸大小，通过设置boby标签的宽度和高度属性来设置网页文件的大小。 通过作业，练习了如何CSS来修改文字样式，并掌握了HTML中的新标签span。新建CSS样式的时候，其选择器的类型有4种：标签、类、ID、复合内容。大家一定要注意这四种选择器所使用的场合。 本次课在CSS学习的基础上，继续学习CSS样式新建的第二种方法，利用该方法所新建的CSS，是以外部文档的方式存放，后面通过链接或导入的方法在将其应用到网页文件中。其后缀名是.css 有两种办法可以实现引用外部样式表。 （一）使用 LINK 标记链接外部样式表 　　 LINK REL=STYLESHEET HREF=example.css 　　 HREF 中应包含路径信息。 　　一个 HTML 文档可引用多个外部样式表，例如： 　　 LINK REL=STYLESHEET HREF=example.css 　　 LINK REL=STYLESHEET HREF=style/other.css 　　首先链接的 example.css 作为该文档缺省样式表，当样式定义产生冲突时首先满足前者。 （二）使用 @IMPORT 导入样式表信息  　　存在于在 STYLE 和 /STYLE 标记中 例如： STYLE TYPE=“text/css” @import “example.css”; @import “style/other.css”; /STYLE 　　样式表产生作用的优先级按照导入的先后顺序来设定。样式表信息规则一多，就比较容易产生冲突。这时就看哪一个样式表被引用在前，它就是具有第一优先权的。 本次课我们讲解PS切图与DIV+CSS布局（一） 切图，是一种网页制作技术，他是将美工效果图转换为页面效果 图的重要技术。 Fireworks 也提供了切图技术， Flash 则直接提供了网 页格式输出技术（不需要切图）。 切片，是切图的直接结果，切图实际上就将图切分为一系列的切 片 二，切图操作过程 切图工具图标的识别 切图基本操作 1）基本操作有两个：划分切片和编辑切片 划分切片，是使用切片工具，在原图上进行切分的操作。 编辑切片，是对切分好的切片进行编辑的操作，编辑包括对切片的名 称、尺寸等的修改等等 下面我们看一下这两个操作 2）基本操作 如果想移动某个切片，可以使用“切片选择工具”选择某个切片，并用 鼠标进行拖动，也可以使用实现，另外如果想精确的细微移动，则可 以使用实现 如果想将某个切片存为某个图片输出， 可以使用“切片选择工具”选择 某个切片，然后选择“文件”菜单，并选择“存储为 Web 所用格式 (W)...”，然后在弹出的界面中...? 三、切图注意事项 1.背景的切割：若为渐变色，切宽为1px的窄条，然后在DIV的背景中设置为平铺。 2.所切图片，尽可能保持水平线整齐。 3.圆角背景的切图方法： 五、在DW中进行布局： 1.掌握如何使整个DIV居中； 为了适应不同浏览用户的分辨率，网页设计师要始终保证页面整体内容在页面居中。使用HTML表格布局页面时，只需要设置布局表格的align属性为center即可。而div居中没有属性可以设置，只能通过CSS控制其位置。 在布局页面前，网页制作者一定要把页面的默认边距清除。为了方便操作，常用的方法是使用通配选择符*，将所有对象的边距清除，即margin属性和padding属性。margin属性代表对象的外边距（上、下、左、右），padding属性代表对象的内边距，也叫填充（上、下、左、右）。 说明：margin属性和padding属性类似于表格单元格的cellspacing属性和cellpadding属性，不过margin属性和padding属性作用于所有块状元素。 使div元素水平居中的方法有多种，常用的方法是用CSS设置div的左右边距，即margin-left属性和margin-right属性。当设置div左外边距和右外边距的值为auto，即自动时，左外边距和右外边距将相等，即达到了div水平居中的效果。在D:\web\目录下创建网页文件（XHTML1.0），命名为div_align.htm，编写div_align.htm文件代码如代码11.5所示。 代码11.5? 设置div水平居中：div_alig