美化我的网页cssdiv布局页面教案Word文档下载推荐.docx
- 文档编号:16766856
- 上传时间:2022-11-25
- 格式:DOCX
- 页数:10
- 大小:1.98MB
美化我的网页cssdiv布局页面教案Word文档下载推荐.docx
《美化我的网页cssdiv布局页面教案Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《美化我的网页cssdiv布局页面教案Word文档下载推荐.docx(10页珍藏版)》请在冰豆网上搜索。
\根目录下。
运行dreamweavercs5,新建站点“网页特效制作”,站点文件夹为D:
\SX7。
打开站点根目录新建空白文档index.html,修改标题为“CSS+DIV布局网页”。
2、制作基本结构
(1)选择文档工具栏中的“拆分”视图下的<
body>
标签,将所有页面用一个大的<
div>
既#container包裹起来,代码如图3---1所示。
<
divid=”container”>
页面层容器
/div>
(2)在#container块中写入div的基本结构,将页面层容器文字替换为如下代码,如图3—2所示:
<
divid=”banner”>
横幅图片<
divid=”leftbar”>
侧边栏<
divid=”content”>
页面主体<
divid=”footer”>
页面的底部<
(3)选择“窗口→CSS样式”命令或按【shift+f11】组合键打开“CSS样式”面板,如图3—3所示,
◆图3—3“CSS样式”面板
单击“CSS样式面板右下方”的“新建CSS规则”按钮
,打开新建CSS规则对话框。
在选择器类型中选择“标签(重新定义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规则”对话框。
在选择器类型中选择“复合内容(基于选择的内容)”,在选择器名称文本框中输入“#container”,在“规则定义”项中选择“仅限于该文档”,如图3—7所示,单击确定按钮,弹出“#container的CSS规则定义对话框。
◆图3—7新建CSS规则对话框
在“#container的CSS规则定义对话框中的分类列表框中选择方框选项,设置padding全部为0,margin的left为-350PX,如图3-8所示分类列表框中选择定位选项,设置position为relative,left为50%,如图3-9所示,设置完成后,单击确定按钮,添加#container样式后的拆分视图如图3-10所示。
图3――8“#container的CSS规则定义”对话框中的方框选项设置
图3-9“#container的CSS规则定义”对话框中的“定位”选项设置
图3-10 添加#container样式后的拆分视图
4、充实内容
(1)在banner层中插入图片并编辑CSS样式表。
1在“设计”视图中将“横幅图片”文字删除。
2选择“插入→图像”命令或按【ctrl+alt+I】组合键,打开“选择图像源文件”对话框,选择“images”文件夹中的banner.gif,单击“确定”按钮。
③参照步骤2(4),新建#banner的CSS样式表,在“#banner的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项,设置“padding”
全部值为0,“margin”的全部为0,如图3—11所示。
设置完成后,单击“确定”按钮,完善banner层后的“拆分”视图如图3-12所示。
◆图3—11#banner的CSS规则定义对话框
◆图3—12完善banner层后的拆分视图
(2)在leftbar层中插入图片文字并编辑CSS样式表。
1在“设计”视图中将“侧边栏”文字删除。
2选择“插入→图像”命令或按【ctrl+alt+I】组合键,打开“选择图像源文件”对话框,插入“图像”,在”选择图像源文件“对话框中选择“images”文件夹中的selfpic.jpg和selfpic2.jpg,单击“确定”按钮。
3分别在插入图像下方输入leftbar.txt中的文字,如图3-13所示
◆图3—13在leftbar层中插入图片和文字后的拆分视图
4参照步骤2(4),新建#leftbar和#leftbarp的CSS样式表。
新建#leftbar的CSS样式表,在#leftbar的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项,设置‘width“为150px,”float”为left,“padding”的值分别为20px,0,30px,0,“margin”的全部为0,在分类列表框中选择“类型”选项,设置“font-size”为12px;
在分类列表框中选择”区块”选项,设置”text-align”为center.设置完成后,单击“确定”按钮。
新建#leftbarp的CSS样式表,在#leftbar的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项,设置“padding”的left值为12px,“padding”的right值为30px,设置完成后,单击“确定”按钮。
添加#leftbarp和#leftbar样式后的“拆分”视图如图3-14所示。
◆图3—14添加##leftbar和#leftbarp样式后的拆分视图
(3)在content层中插入文字并编辑CSS样式表
1在“设计”视图中将“页面主体”文字替换成content.txt,并编排格式,如图3-15所示。
◆图3—15在content层中插入文字后的“拆分”视图
2参照步骤2(4),新建#content、#contentp和#contenth4的CSS样式表。
新建#content的CSS样式表,在#content的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项,设置‘width“为550px,”float”为left,“padding”的值分别为20px,0,30px,0,“margin”的全部为0,在分类列表框中选择“类型”选项,设置“font-size”为12px;
在分类列表框中选择”区块”选项,设置”text-align”为center.分类列表框中选择背景选项,设置“background-images”为”images/bg1.jpg,”background-repeat”为no-repeat,”background-position(x)”为right,”background-position(y)”为bottom,设置完成后,单击“确定”按钮。
新建#contentp和#contenth4的CSS样式表,在CSS规则定义”对话框中的“分类”列表框中选择“方框”选项,设置“padding”的left值为20px,“padding”的right值为15px,设置完成后,单击“确定”按钮。
添加#content#contentp和#contenth4样式后的“拆分”视图如图3-16所示。
◆图3—16添加#content、#contentp和#contenth4样式后的“拆分”视图
(4)在#footer层中插入图像并编辑CSS样式表。
1在“设计”视图中将“页面底部”文字删除。
2选择“插入→图像”命令或按【ctrl+alt+I】组合键,打开“选择图像源文件”对话框,插入“图像”,在”选择图像源文件“对话框中选择“images”文件夹中的footer.gif,单击“确定”按钮。
③参照步骤2(4),新建#footer的CSS样式表,在“#footer的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项,设置“padding”
全部值分别为3px,0,3px,0,“margin”的全部为0,”width”为100%,”clear”为both。
设置完成后,单击“确定”按钮,添加#footer样式后的“拆分”视图如图3-17所示。
◆图3—17添加#footer样式后的“拆分”视图
5、div+CSS布局网页效果图
div+CSS布局网页效果图如图3-18所示。
◆图3—18div+CSS布局网页效果图
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 美化 网页 cssdiv 布局 页面 教案
![提示](https://static.bdocx.com/images/bang_tan.gif)