×

美化我的网页-css+div布局页面教（学）案

下载文档

ID：38499328

大小：3.44 MB

页数：10页

时间：2019-06-13

收藏

资源描述：

《美化我的网页-css+div布局页面教（学）案》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、美化我的网页----------css+div布局页面（教案）实训目的：1、学会css样式的创建、编辑和应用2、学会APdiv的创建和参数的设置3、学会使用css+div布局和美化网页。实训步骤：1、将素材库chaprter3中的SX7文件夹复制到D：根目录下。运行dreamweavercs5,新建站点“网页特效制作”，站点文件夹为D:SX7。打开站点根目录新建空白文档index.html,修改标题为“CSS+DIV布局网页”。2、制作基本结构（1）选择文档工具栏中的“拆分”视图下的标签，将所有页面用一个大的

,既#container包裹起来，代码如图3-

2、--1所示。页面层容器

（2）在#container块中写入div的基本结构，将页面层容器文字替换为如下代码，如图3—2所示：横幅图片

侧边栏

页面主体

页面的底部

3、S规则对话框。在选择器类型中选择“标签（重新定义html元素）“，在选择器名称“文本框中输入”body”,在”规则定义“项中选择”仅限该文档“，如图3—4所示，单击”确定“按钮，弹出”body的CSS规则定义“对话框，如图3—5所示◆图3—4新建CSS规则对话框◆图3—5新建CSS规则对话框在body的CSS规则定义对话框的分类列表中选择方框，设置“填充“全部为0，边界全部为0，设置完成后单击确定按钮。视图如图3—6所示。（4）定义#container块的样式。单击“CSS样式面板“右下方的“新建CSS规则”按钮，打开“新建CSS规则”对话框。在选择器类型中选择“复合内容（基于选

4、择的内容）”，在选择器名称文本框中输入“#container”，在“规则定义”项中选择“仅限于该文档”，如图3—7所示，单击确定按钮，弹出“#container的CSS规则定义对话框。◆图3—7新建CSS规则对话框在“#container的CSS规则定义对话框中的分类列表框中选择方框选项，设置padding全部为0，margin的left为-350ＰＸ，如图３－８所示分类列表框中选择定位选项，设置ｐｏｓｉｔｉｏｎ为ｒｅｌａｔｉｖｅ，ｌｅｆｔ为５０％，如图３－９所示，设置完成后，单击确定按钮，添加＃ｃｏｎｔａｉｎｅｒ样式后的拆分视图如图３－１０所示。图３――８“＃ｃｏｎｔａｉｎｅｒ

5、的ＣＳＳ规则定义”对话框中的方框选项设置图３－９“＃ｃｏｎｔａｉｎｅｒ的ＣＳＳ规则定义”对话框中的“定位”选项设置图３－１０　添加＃ｃｏｎｔａｉｎｅｒ样式后的拆分视图1、充实内容（1）在banner层中插入图片并编辑CSS样式表。①在“设计”视图中将“横幅图片”文字删除。②选择“插入→图像”命令或按【ctrl+alt+I】组合键，打开“选择图像源文件”对话框，选择“images”文件夹中的banner.gif,单击“确定”按钮。③参照步骤2（4），新建#banner的CSS样式表，在“#banner的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding

6、”全部值为0，“margin”的全部为0，如图3—11所示。设置完成后，单击“确定”按钮，完善banner层后的“拆分”视图如图3-12所示。◆图3—11#banner的CSS规则定义对话框◆图3—12完善banner层后的拆分视图（1）在leftbar层中插入图片文字并编辑CSS样式表。①在“设计”视图中将“侧边栏”文字删除。②选择“插入→图像”命令或按【ctrl+alt+I】组合键，打开“选择图像源文件”对话框，插入“图像”，在”选择图像源文件“对话框中选择“images”文件夹中的selfpic.jpg和selfpic2.jpg,单击“确定”按钮。③分别在插入图像下方输入l

7、eftbar.txt中的文字，如图3-13所示◆图3—13在leftbar层中插入图片和文字后的拆分视图④参照步骤2（4），新建#leftbar和#leftbarp的CSS样式表。新建#leftbar的CSS样式表，在#leftbar的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置‘width“为150px,”float”为left，“padding”的值分别为20px,0，30px,0,“margin”的全部为0，在分类列表框中选择“类型”选项，设置“font