【文档说明】Dreamweaver网页设计任务5完成首页内容区制作1.ppt，共(21)页，2.032 MB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-2876.html

以下为本文档部分文字说明：

Dreamweaver网页设计项目教程机械工业出版社任务5完成首页内容区制作1（建议2学时）01任务分析02任务实施任务分析主内容区的结构如图所示：左侧#main，包括3个div：Index_topI

ndex_picIndex_boxIndex_top中包括两个div：pichot_newsIndex_中包括两个一样的div.box外大框架#maincontent#side包括：3个一样的div.side_box任务分析主内容区的主架框为#maincontent，内容包含左右两个

部分：#main、#side。在#main中又分成上、中、下3个部分；在.side中也包括上、中、下3个部分。主内容区的层次嵌套得比较多，在制作过程中，要注意各部分之间的嵌套关系和位置关系，如#maincontent中的#mai

n和.side是左右分布，那么就需要设置浮动。而#main中和.side中是上中下结构，则无须设置浮动。网页制作没有顺序要求，可以“先大架、再具体”；也可以按“从左到右、从上到下”的顺序，依个人的习惯而定。本实例按“先布局大框架，再按

从左到右、从上到下”的顺序制作完成。任务实施创建外大架框外大架框结构如图所示：maincontentmain#sideindex_top.side_boxindex_pic.side_box.side_boxindex_box任务实施创

建外大架框1）光标定位在#maincontent中，插入Div标签，插入位置在#maincontent结束标签前，名称为“#main”，如图所示：②插入Div标签。④按“确定”。③输入插入位置、ID名称。①定位光标任务实施创建外大架框2）插入Div标签，插入位置在#maincontent结

束标签前，名称为“#side”，如图所示：任务实施创建外大架框3）插入Div标签，插入位置在#main结束标签前，名称为“#index_top”，如图所示：任务实施创建外大架框4）插入Div标签，插入位置在#m

ain结束标签前，名称为“#index_pic”，如图所示：任务实施创建外大架框5）插入Div标签，插入位置在#main结束标签前，名称为“#index_box”，如图所示：任务实施创建外大架框6）插入Div标签，插入位置在#side结束标签前，类名称为

“.side_box”，如图所示：任务实施创建外大架框重复步骤6）两次，再插入两个同样的Div标签。在网页代码中的代码如图所示：在index.html中，此段代码：<divid="maincontent"><divid="main"><divid="inde

x_top"></div><divid="index_pic"></div><divid="index_box"></div></div><divid="side"><divclass="side_box"></div><divclass="side_b

ox"></div><divclass="side_box"></div></div></div>任务实施设置插入Div标签的CSS样式表（1）设置#main的CSS样式1）创建#main的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所

示的设置，设置完成后单击“确定”按钮。2）在方框样式中，设置它的宽度（width）为664px，左浮动任务实施设置插入Div标签的CSS样式表2）设置#index_top的CSS样式1）创建#index_top的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建C

SS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。2）在方框样式中，设置它的高度（height）为255px，下边距（margin-bottom）为8px任务实施设置插入Div标签的CSS样式表3）

在定位样式中，设置它的内容超出（overflow）为隐藏（hidden），如图所示:①选择“定位”②设置超出内容隐藏任务实施设置插入Div标签的CSS样式表（3）设置#index_pic的CSS样式1）创建#index_pic的CSS样式。单击CSS样式面板下方的“新建CSS规则

”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。2）在方框样式中，设置它的下边距（margin-bottom）为8px3）在边框样式中，设置它的边框线样式（style）为实线（so

lid），设置线粗细（width）为1px，设置边框线的颜色（color）为#dbdbdbLayout.css中自动生成相应代码：任务实施设置插入Div标签的CSS样式表（4）设置#index_box的CSS样式1）创建#index

_box的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。2）在方框样式中，设置它的下边距（margin-bottom）为8

pxLayout.css中自动生成相应代码：任务实施设置插入Div标签的CSS样式表（5）设置#side的CSS样式1）创建#side的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所

示的设置，设置完成后单击“确定”按钮。2）在方框样式中，设置它的宽度（width）为228px，左浮动任务实施设置插入Div标签的CSS样式表（6）设置.side_box的CSS样式1）创建.side_box的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对

话框中做如图所示的设置，设置完成后单击“确定”按钮此处选择类型为“类”此处名称前为“.”任务实施设置插入Div标签的CSS样式表2）在方框样式中，设置它的下边距（margin-bottom）为8px上述操作在Layout.css中自

动生成相应代码如下：#main{float:left;width:664px;}#index_top{height:255px;overflow:hidden;margin-bottom:8px;}#index_pic{border:1pxsolid#dbdbdb;margin-bo

ttom:8px;}#index_box{margin-bottom:8px;}#side{float:left;width:228px;}.side_box{margin-bottom:8px;}Thankyou!谢谢观赏