DIV+CSS布局软件项目化综合实训精品课程网站.ppt

基于工作过程的网页设计与网站开发教程 第十章 DIV+CSS布局网站 项目展示与项目目标 第十章 DIV+CSS布局网站 4. 项目实施 1）继续插入banner标签div class=“banner”/div ，然后编写类.banner的代码如下： .banner { width:960px; height:143px; margin: 0px auto; background-image:url(../images/index_04.gif); border-bottom:3px #FFFFFF solid; } 2）执行“插入”→“媒体”→“Flash”命令，插入flash文件夹中的dh.swf文件，设置其wmode为transparent从而得到透明动画，效果如图10-26所示。 6．页面banner的布局 4. 项目实施 首先对页面主体部分的效果图进行分析，主要目的是区分页面中的内容和修饰，页面主体的效果图如图所示。 7．页面主体main部分的分析 4. 项目实施 从图可以看出，页面主体部分主要分为两部分，可以插入main主体标签，然后在其参数中插入main_left和main_right两个Div标签。 div class=main div class=main_left div id=leftmenu /div /div div class=main_right /div /div main_left和main_right两个Div标签 .main { width:960px; margin:0px auto; background-color:#FFFFFF; border-top:1px #9e9e9e solid; } .main_left { float:left; height:485px; width:207px; border-right:1px #9e9e9e solid; } .main_right { height:753px; width:207px; border-right:1px #9e9e9e solid; } 4. 项目实施 1）在div class=“main_left”/div标签中插入div id=“leftmenu” /divDiv元素并在其中插入无序列表，代码如下所示： div id=leftmenu ul lia href=#首　　页/a/li lia href=#师资队伍/a/li lia href=#教学内容/a/li lia href=#教学方法/a/li lia href=#工学结合/a/li lia href=#教学效果/a/li lia href=#课程规划/a/li /ul /div 8．页面主体mainleft部分的实现 2）设置leftmenu的CSS样式，代码如下： .main_left #leftmenu { width:207px; height:274px; background-image:url(../images/menu.jpg); } 4. 项目实施 3）控制leftmenu的CSS样式表的相关代码编写如下： .main_left #leftmenu { width:207px; height:274px; background-image:url(../images/menu.jpg); } #leftmenu ul { height:12px; margin:0px 0px 0px 95px; } #leftmenu ul li { line-height:40px; list-style-type:none; } #leftmenu ul li a { text-decoration:none; color:#000000; } #leftmenu ul li a:hover { color:#f83800; text-decoration:none;} 4. 项目实施 4）继续在main_left中插入两个Div元素xm和tp，代码如下： div id=xm/div div id=tpimg src=images/zpzs.jpg //div 此时#xm与#tp的CSS编码如下： #xm { width:207px; height:37px; bor