DIV+CSS布局入门解析.ppt

单击“分类”列表中的区块选项，对相关选项进行设置，单击确定，既可以看到效果 在页面中插入名称为box的DIV，位置点选择“在插入点” 打开“css”面板并选择div.css，新建css规则，在选择类型器中选择ID（仅用于一个HTML元素，在选择名称中输入box） 在弹出的“CSS规则定义”对话框中，分别选择“区块”和“方框”选项，对相关选项进行设置。 删除多余的文本，点击“插入Div标签”，在该Div中插入名称为top的DIV 以相同的方法新建css规则，对“背景”和“方框”的相关选项进行设置，并删除多余的文本 插入FLASH动画，并将该动画的Wmode属性为“透明”，保存页面并保存外部样式表文件 在名为top的DIV后插入名为main的DIV，并用相同方法新建css规则，对“背景”和“方框”的相关选项进行设置 在名为left的DIV中插入图像，并在该DIV后插入名为right的DIV，并以相同的方式建立css规则，其中选择器名称为right css规则定义，分别选择“类型”、“背景”、“方框”的相关选项进行设置 在名为right的DIV文件中输入相应的文本内容，并以同法新建css规则，在选择器类型中选择“类”（可用于任何HTML元素），选择名称为font01 css规则定义，对“类型”的相关选项进行设置，选中相应的文本，在“属性”中的类选择刚定义的样式表font01 新建css规则，设置选择器名称为“font2”，在“css规则定义”中对“方框”的相关选项进行设置 选中相应的文本内容，在“属性”的“类”中应用样式表font2，相同方法，完成页面版底信息部分内容的制作 完成整个页面制作，保存并保存相关的外部样式表 5.4制作流程2 分别新建一个空白的HTML文件和两个CSS文件，并保存 切换到5-5.html文件，打开“CSS样表”面版，单击“附加样式表”按钮，在“链接外部样式表”中，将刚刚新建的两个CSS文件链接到文件 选中CSS.CSS样式表，新建CSS规则，并在弹出的对话框的选择器类型下拉表选择“标签（重新定义HTML元素）”，在选择器名称处输入* 在“CSS规则定义”对话框的“分类”列表中选择“方框”，设置Padding和Margin均为0，然后选择边框选项并设置width为0 用相同的方法新建css规则，在选择器名称中选择body标签，单击确定 在弹出的“CSS规则定义”对话框中，在“分类”列表中分别选择“类型”和“背景”选项，对相关选项进行设置 5.5案例小结 本实例中主要学习了DIV+CSS布局方法，制作过程中要熟练掌握插入DIV的方法和建立CSS规则，以及通过CSS“规则定义”对话框设置常见的CSS属性。通过CSS规则控制页面中文字的格式和对齐方式，为以后直接书写CSS代码做好铺垫 6 课后作业——制作个人网站页面 6.1案例分析 制作过程:1、制作出页面的背景效果 2、 制作页面的主题内容及信息 在制作过程中，注意对导航菜单图像的处理方法 效果图如下： ·6.2技能剖析 实现效果 使用方法 页面的背景图像 #box{ width：1005px height：726px background-image:url(../images/007.jpg)； background-repeat：no-repeat； } 1、 剖析步骤： 2、 实现效果 使用技术 页面主体布局 #left{ width：540px； height：681px； margin:10px 0px 0px 53px; } 通过名为left的DIV布局页面主体，在left种插入多个DIV，通过CSS样式进行控制，并分别在各DIV中制作相应的内容。 3、 实现效果 使用技术 版底信息内容格式 #bottom{ width：1005px； height：20px； txt-align：center； padding-top：15px; } 版式信息内容分隔 #bottom span{ margin:0px 5px 0px 5px * 课本：P268—P277 * 2.3相对定位 Position的参数：static、relative、absolute、fixed、inherit static 无特殊定位，静态 relative 相对，对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 absolute 绝对，将对象从文档流中拖出 ，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位 fixe