Dreamweaver网页设计任务5完成首页内容区制作1.ppt

1、Dreamweaver网页设计项目教程机械工业出版社任务5完成首页内容区制作1（建议2学时）01任务分析02任务实施任务分析主内容区的结构如图所示：任务分析 主内容区的主架框为#maincontent，内容包含左右两个部分：#main、#side。在#main中又分成上、中、下3个部分；在.side中也包括上、中、下3个部分。主内容区的层次嵌套得比较多，在制作过程中，要注意各部分之间的嵌套关系和位置关系，如#maincontent中的#main和.side是左右分布，那么就需要设置浮动。而#main中和.side中是上中下结构，则无须设置浮动。网页制作没有顺序要求，可以“先大架、再具体”；也可

2、以按“从左到右、从上到下”的顺序，依个人的习惯而定。本实例按“先布局大框架，再按从左到右、从上到下”的顺序制作完成。任务实施创建外大架框 外大架框结构如图所示：任务实施创建外大架框 1）光标定位在#maincontent中，插入Div标签，插入位置在#maincontent结束标签前，名称为“#main”，如图所示：任务实施创建外大架框 2）插入Div标签，插入位置在#maincontent结束标签前，名称为“#side”，如图所示：任务实施创建外大架框 3）插入Div标签，插入位置在#main结束标签前，名称为“#index_top”，如图所示：任务实施创建外大架框 4）插入Div标签，插入

3、位置在#main结束标签前，名称为“#index_pic”，如图所示：任务实施创建外大架框 5）插入Div标签，插入位置在#main结束标签前，名称为“#index_box”，如图所示：任务实施创建外大架框 6）插入Div标签，插入位置在#side结束标签前，类名称为“.side_box”，如图所示：任务实施创建外大架框 重复步骤6）两次，再插入两个同样的Div标签。在网页代码中的代码如图所示：在index.html中，此段代码：任务实施设置插入Div标签的CSS样式表（1）设置#main的CSS样式 1）创建#main的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新

4、建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。2）在方框样式中，设置它的宽度（width）为664px，左浮动任务实施设置插入Div标签的CSS样式表 2）设置#index_top的CSS样式 1）创建#index_top的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。2）在方框样式中，设置它的高度（height）为255px，下边距（margin-bottom）为8px任务实施设置插入Div标签的CSS样式表 3）在定位样式中，设置它的内容超出（overflow）为隐藏（hid

5、den），如图所示:任务实施设置插入Div标签的CSS样式表 （3）设置#index_pic的CSS样式 1）创建#index_pic的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。2）在方框样式中，设置它的下边距（margin-bottom）为8px 3）在边框样式中，设置它的边框线样式（style）为实线（solid），设置线粗细（width）为1px，设置边框线的颜色（color）为#dbdbdb Layout.css中自动生成相应代码：任务实施设置插入Div标签的CSS样式表 （4）设置#in

6、dex_box的CSS样式 1）创建#index_box的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。2）在方框样式中，设置它的下边距（margin-bottom）为8px Layout.css中自动生成相应代码：任务实施设置插入Div标签的CSS样式表 （5）设置#side的CSS样式 1）创建#side的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。2）在方框样式中，设置它的宽度（width）为228p

7、x，左浮动 任务实施设置插入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:1px solid#dbdbdb;margin-bottom:8px;#index_box margin-bottom:8px;#side float:left;width:228px;.side_box margin-bottom:8px;Thank you!谢谢观赏