Dreamweaver网页设计项目教程王雪松项目二任务5完成首页内容区制作1章节.pptVIP

PPT研究院 POWERPOINT ACADEMY * * * * * * Dreamweaver网页设计项目教程 机械工业出版社 任务5完成首页内容区制作1（建议2学时） 01 任务分析 02 任务实施 任务分析 主内容区的结构如图所示 ： 任务分析 主内容区的主架框为#maincontent，内容包含左右两个部分：#main、#side。 在#main中又分成上、中、下3个部分；在.side中也包括上、中、下3个部分。 主内容区的层次嵌套得比较多，在制作过程中，要注意各部分之间的嵌套关系和位置关系，如#maincontent中的#main和.side是左右分布，那么就需要设置浮动。而#main中和.side中是上中下结构，则无须设置浮动。 网页制作没有顺序要求，可以“先大架、再具体”；也可以按“从左到右、从上到下”的顺序，依个人的习惯而定。本实例按“先布局大框架，再按从左到右、从上到下”的顺序制作完成。 任务实施 创建外大架框 外大架框结构如图所示： 任务实施 创建外大架框 1）光标定位在#maincontent中，插入Div标签，插入位置在#maincontent结束标签前，名称为“#main”，如图所示： 任务实施 创建外大架框 2）插入Div标签，插入位置在#maincontent结束标签前，名称为“#side”，如图所示： 任务实施 创建外大架框 3）插入Div标签，插入位置在#main结束标签前，名称为“#index_top”，如图所示： 任务实施 创建外大架框 4）插入Div标签，插入位置在#main结束标签前，名称为“#index_pic”，如图所示： 任务实施 创建外大架框 5）插入Div标签，插入位置在#main结束标签前，名称为“#index_box”，如图所示： 任务实施 创建外大架框 6）插入Div标签，插入位置在#side结束标签前，类名称为“.side_box”，如图所示： 任务实施 创建外大架框 重复步骤6）两次，再插入两个同样的Div标签。在网页代码中的代码如图所示： 在index.html中，此段代码： div id=maincontent div id=main div id=index_top /div div id=index_pic /div div id=index_box /div /div div id=side div class=side_box /div div class=side_box /div div class=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规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮。 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）为8px 3）在边框样式中，设置它的边框线样式（style）为实线（solid），设置线粗细（width）为1px，设置边框线的颜色（color）为#dbdbdb Layout.css中自动生成相应代码： 任务实施 设置插入Div标签的CSS样式表 （4）设置#index_box的CSS样式 1）创建#index_box的CSS样式。单击CSS样式面板下方的“新建