《使用HTML5实现响应式布局》第十二章-综合项目：传奇互动游戏公司网站（二）学习资料.pptxVIP

第十二章游戏公司网站（二）

理论内容制作公司信息页面制作案例展示页面

1.制作公司信息页面公司信息页面的完成效果

制作公司信息页面（1）在DreamweaverCC中新建HTML5文档，保存为about.html，然后编写公司信息页面布局的页面结构主体代码bodydivclass=boxnews_box1/divdivclass=boxnews_box3/divdivclass=boxnews_box2/div/body单列布局

制作公司信息页面打开css.css文件，编写公司信息页面布局的样式代码.news_box1{ height:104px; background:url(../images/topnav_bg2.png)topcenterno-repeat;}/*省略*/div高度和背景图片news_box1news_box2

制作公司信息页面（2）在about.html中，添加公司信息页面页头和页脚的结构主体代码divclass=boxnews_box1divclass=wrap divid=logo!--省略--/div divid=nav!--省略--/div/div/divdivclass=boxnews_box3!--省略--/divdivclass=boxnews_box2!--省略--/divLOGO页脚导航菜单正文

制作公司信息页面页头和页脚效果

制作公司信息页面（3）编写正文部分左边栏结构主体代码divclass=boxnews_box3divclass=wrapdivid=news_left h2imgsrc=images/gsxx.png/h2 ul!--省略--/ul pid=news_left_bottomnbsp;/p pid=news_left_contactnbsp;/p/div/div/div侧边栏背景图联系我们侧边栏列表

制作公司信息页面在css.css文件中，添加正文部分左边栏的样式代码#news_left{ float:left; /*省略*/}#news_left_bottom{ float:left; /*省略*/}#news_left_contact{ float:left; /*省略*/}

制作公司信息页面（4）编写正文部分右边栏的页面结构代码divclass=wrap divid=news_left!--省略--/divdivid=news_rightdivid=contentclass=company_content/divdivid=news_right_bottomnbsp;/div/divdivclass=clear/div/div公司简介正文段落左边栏结构

制作公司信息页面在css.css文件中，添加正文部分右边栏的样式代码#news_right{ float:right;/*省略*/}#pany_content{ height:220px;}#news_right_bottom{ float:left; /*省略*/}.clear{ clear:both;}清除浮动，避免影响后面的定位

2.制作案例展示页面案例展示页面完成效果如图

制作案例展示页面（1）在DreamweaverCC中新建HTML5文档，保存为sample.html，然后编写案例展示页面布局的页面结构主体代码bodydivclass=boxcase_box1/divdivclass=boxnews_box3/divdivclass=boxnews_box2/div/body.case_box1{height:104px;background:url(../images/topnav_bg.png)no-repeattopcenter;}

制作案例展示页面运行sample.html页面，效果如下news_box2case_box1

制作案例展示页面（2）在sample.html中，编写页头和页脚的结构主体代码、CSS3代码，其内容类似公司信息页面的页头和页脚，可以重用部分相同代码，然后保存文档。（3）在divclass=boxnews_box3中，编写正文部分页面结构主体代码divclass=boxnews_box3divclass=wrapdivclass=case_list divclass=case_imgpngfix/div divclass=case_info/div/div/div/div一个游戏案例展示区块案例图片案例文字

制作案例展示页面需要使