《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块11 综合案例

模块十一综合案例具体任务学校网站页面设计具体任务学校网站页面设计本任务设计一个完整的学校网站页面，包括网站和网页的建立、CSS样式的设计和网页相关信息功能的设计，网页效果如图所示。我们能够清晰地看到页面的整体结构分布，其顶部为导航信息栏，中间是关于学校的相关介绍及学校、学院的最新消息展示等，底部为网站信息、版权声明等内容。整个页面的设计涵盖了本书各个模块的知识，通过实现本任务，可以较好地将理论知识转化为实践能力。任务实现学校网站页面设计（1）启动HBuilderX软件，执行“文件”→“新建”命令，输入站点名称和本地站点文件夹路径，单击“保存”按钮即可成功建立一个名称为“学校网站”的站点任务实现学校网站页面设计（1）启动HBuilderX软件，执行“文件”→“新建”命令，输入站点名称和本地站点文件夹路径，单击“保存”按钮即可成功建立一个名称为“学校网站”的站点学校网站文件夹下包含网站的index.html主页文件、course.html子页文件，以及CSS和images两个文件夹，分别用于存放网站需要的CSS样式文件和图片文件。任务实现学校网站页面设计（2）建立CSS样式文件，如图所示。

编辑层级样式表内容，然后保存到CSS文件夹下，方便整体管理网站的代码。任务实现学校网站页面设计（3）导航的代码设计与分析。①导航页面设计的代码如下：<divclass="header"><divclass="header-top"> <divclass="container"> <divclass="detail"> <ul> <li><iclass="glyphiconglyphicon-earphone"aria-hidden="true"></i>+66666666666</li> <li><iclass="glyphiconglyphicon-time"aria-hidden="true"></i>周一到周五9:00到18:00</li> </ul> </div> <divclass="indicate"> <p><iclass="glyphiconglyphicon-map-marker"aria-hidden="true"></i>学校路666号</p> </div> <divclass="clearfix"></div> </div></div><divclass="container"> <navclass="navbarnavbar-default"> <divclass="container-fluid"> <!---Brandandtogglegetgroupedforbettermobiledisplay---> <divclass="navbar-header"> <buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"> <spanclass="sr-only">Togglenavigation</span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> <divclass="navbar-brand"> <h1><ahref="index.html">学校<span>主页</span></a></h1> </div> </div> <!--Collectthenavlinks,forms,andothercontentfortoggling--> <divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"> <navclass="link-effect-2"id="link-effect-2"> <ulclass="navnavbar-nav"> <liclass="active"><ahref="index.html"><spandata-hover="Home">主页</span></a></li> <li><ahref="about.html"><spandata-hover="About">关于我们</span></a></li> <li><ahref="services.html"><spandata-hover="Services">提供服务</span></a></li> <li><ahref="projects.html"><spandata-hover="Projects">计划与安排</span></a></li> <li><ahref="courses.html"><spandata-hover="Courses">课程</span></a></li> <li><ahref="codes.html"><spandata-hover="Codes">资源库</span></a></li> <li><ahref="contact.html"><spandata-hover="Contact">联系我们</span></a></li> </ul> </nav> </div> </div> </nav></div></div>任务实现学校网站页面设计（3）导航的代码设计与分析。通过使用<ul>和<li>标记，可以实现网站导航栏列表，对于导航中的各个条目，填入需要表现的导航信息，展示导航内容。通过<nav>标记定义导航中的链接部分，将导航中的各条目内容转化为链接，实现不同内容主页的跳转。任务实现学校网站页面设计②导航CSS样式设计的代码如下：定义<nav>标签的样式，通过position，display等属性控制导航栏内位置显示等属性。对于每个条目，通过background属性，设置整个header内的背景颜色，进一步还可通过padding属性设置对应区域内边距。nava{ position:relative; display:inline-block; outline:none; text-decoration:none;}nava:hover,nava:focus{ outline:none;}.header{background:#49872E;}.header-top{padding:1em0;background:#2e353f;}任务实现学校网站页面设计通过上述代码可以得到如图所示的效果。任务实现学校网站页面设计（4）主体部分的代码设计与分析。①学校宣传信息的代码如下：通过<img>标记设置区块背景，用于展示学校风景。 <divclass="banner"><div><imgsrc="image/1.jpg"alt=""width="100%"/></div> </div>任务实现学校网站页面设计②学校宣传信息底部条幅页面设计的代码如下：通过<h4>标记设置标题，通过<i>标记设置文本斜体。<divclass="banner-bottom"> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>师资力量</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-user"></i> </div> <divclass="clearfix"></div> </div> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>视频课程</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-facetime-video"></i> </div> <divclass="clearfix"></div> </div> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>图书馆</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-book"></i> </div> <divclass="clearfix"></div> </div> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>在线课程</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-blackboard"></i> </div> <divclass="clearfix"></div> </div> <divclass="clearfix"></div></div>任务实现学校网站页面设计③学校宣传信息底部条幅CSS设计的代码如下：.banner-bottom{text-align:center;background:#EDF7FF;}.ban-gridi{font-size:2.5em;color:#373737; transition:0.5sall; -webkit-transition:0.5sall; -moz-transition:0.5sall; -o-transition:0.5sall; -ms-transition:0.5sall;}.ban-gridh4{ font-size:2em;color:#F58703;text-transform:capitalize;}.ban-gridp{font-size:1em; line-height:1.8em; margin-top:0.5em}.ban-grid:hoverdiv.ban-righti{color:#49872E;}.ban-left{float:left;width:70%;}.ban-right{float:left;width:30%;}.ban-grid{padding:2em0;}任务实现学校网站页面设计该部分主要用于底部条幅的样式设计，通过text-align设置文本对齐方式，通过background设置背景颜色，通过width设置元素宽度，通过float设置元素浮动等。通过上述代码可以得到如图所示的效果。任务实现学校网站页面设计④欢迎展示部分页面设计的代码如下：通过<div>标记合理划分显示区域，通过<h4>标记显示标题信息。<divclass="welcome-w3"> <divclass="container"> <h2class="tittle">欢迎加入我们学校</h2> <divclass="wel-grids"> <divclass="col-md-4wel-grid"> <divclass="port-7effect-2"> <divclass="image-box"> <imgsrc="图片/8.jpg"class="img-responsive"alt="Image-2"> </div> <divclass="text-desc"> <h4>学习生活</h4> </div> </div> <divclass="port-7effect-2"> <divclass="image-box"> <imgsrc="图片/6.jpg"class="img-responsive"alt="Image-2"> </div> <divclass="text-desc"> <h4>学习生活</h4> </div> </div> </div> <divclass="col-md-4wel-grid"> <imgsrc="图片/7.jpg"class="img-responsive"alt="Image-2"> <divclass="text-grid"> <h4>学习生活</h4> </div> </div> <divclass="col-md-4wel-grid"> <divclass="port-7effect-2"> <divclass="image-box"> <imgsrc="图片/9.jpg"class="img-responsive"alt="Image-2"> </div> <divclass="text-desc"> <h4>学习生活</h4> </div> </div> <divclass="port-7effect-2"> <divclass="image-box"> <imgsrc="图片/10.jpg"class="img-responsive"alt="Image-2"> </div> <divclass="text-desc"> <h4>学习生活</h4> </div> </div> </div> <divclass="clearfix"></div> </div> </div></div>任务实现学校网站页面设计⑤欢迎展示部分CSS设计的代码如下：通过上述代码可以得到如图所示的效果。.welcome-w3,.new-w3agile,.about-w3,.services-w3l,.projects-agile,.courses-w3ls,.statistics-w3,.typo-w3,.contact-w3l{padding:5em0;}.wel-grids,.student-grids,.about-grids,.what-grids,.staff-grids,.statistics-grids,.services-grids,.ourser-grids,.course-grids{margin-top:4em;}任务实现学校网站页面设计⑥学生风貌展示部分页面设计的代码如下：通过<ul>和<li>标记展示学生获得的荣誉列表，通过<p>标记和<h4>标记展示段落和标题信息。<divclass="student-w3ls"> <divclass="container"> <h3class="tittle">我们的学生</h3> <divclass="student-grids"> <divclass="col-md-6student-grid"> <h4>学生荣誉墙</h4> <p>学生在校期间可参加社团活动、专业竞赛、人文比赛、公益活动等有趣的校园活动，同时学校为优秀学生提供相应的学校、企业以及国家等奖学金，同时提供一些国内外大学的交流。</p> <p>在每年都有很多学生在不同领域取得优异的成果。</p> <ulclass="grid-part"> <li><iclass="glyphiconglyphicon-ok-sign"></i>2023年10月小明同学获得机器人比赛一等奖</li> <li><iclass="glyphiconglyphicon-ok-sign"></i>2023年9月小红同学获得校园唱歌比赛二等奖</li> <li><iclass="glyphiconglyphicon-ok-sign"></i>2023年9月小张同学获得国家奖学金</li> <li><iclass="glyphiconglyphicon-ok-sign"></i>2023年7月小王同学获赴美交流机会</li> <li><iclass="glyphiconglyphicon-ok-sign"></i>2023年6月小杨同学获得田径、100米等多项比赛一等奖</li> </ul> </div> <divclass="col-md-6student-grid"> <imgsrc="图片/20.jpg"class="img-responsive"alt="Image-2"> </div> <divclass="clearfix"></div> </div> </div></div>任务实现学校网站页面设计⑦学生风貌展示部分CSS样式设计的代码如下：通过上述代码可以得到如图所示的效果。.student-w3ls{padding:5em0; background:#EDF7FF}.student-gridh4{font-size:2em;color:#F58703;}.student-gridp{font-size:1em;padding-top:1em;}任务实现学校网站页面设计⑧名人名言展示部分页面设计的代码如下：通过<p>标记和<h5>标记展示段落和标题信息，凸显文字内容。<divclass="testimonials-w3"> <divclass="container"> <h3class="tittle2">名人名言</h3> <divclass="test-grid"> <imgsrc="images/quote.png"alt=""/> <h5>人生就是学校。在那里，与其是幸福，毋宁是不幸才是好的教师。因为，生存是在深渊的孤独里。</h5> <p><i>海德格尔</i></p> </div> </div></div>任务实现学校网站页面设计⑨名人名言展示部分CSS样式设计的代码如下：通过上述代码可以得到如图所示的效果。.testimonials-w3{background:url(../images/ba.jpg)no-repeat0px0px;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;-ms-background-size:cover;min-height:500px;text-align:center;padding:5em00;}.testimonials-w3h5{font-size:2.5em;color:#fff;width:66%;margin:.5emauto0;line-height:1.5em;}.testimonials-w3p{color:#fff;font-size:1.2em;text-align:right;}任务实现学校网站页面设计⑩新闻动态展示部分页面设计的代码如下：通过<p>标记和<h5>标记展示段落和标题信息，凸显文字内容。<divclass="new-w3agile"> <divclass="container"> <divclass="new-grids"> <divclass="col-md-4new-left"> <h3class="tittle1">学院要闻</h3> <divclass="new-top"> <h5>9月14日</h5> <p>计算机学院开展计算机技能比赛</p> </div> <divclass="new-top1"> <h5>9月13日</h5> <p>计算机学院邀请张教授进行专家讲座</p> </div> <divclass="new-top"> <h5>9月12日</h5> <p>人文学院开展读书月活动</p> </div> <divclass="new-top1"> <h5>9月11日</h5> <p>外语学院开设英语角</p> </div> <divclass="new-top"> <h5>9月10日</h5> <p>自动化学院师生代表下企业交流</p> </div> </div> <divclass="col-md-8new-right"> <h3class="tittle1">校园动态</h3> <h4>我校联合五个企业组织交流学习</h4> <p>我校与9日和创新科技,创新银行,创新互联,创新网络，创新金融五家企业达成联合培养方案，我校计算机专业学生会在大二下学期选择其中一家企业进行实习，提供交流学习机会。</p> <divclass="new-bottom"> <divclass="new-bottom-left"> <imgsrc="图片/11.jpg"class="img-responsive"alt=""> </div> <divclass="new-bottom-right"> <h5>新生军训圆满结束</h5> <p>我校新生经过15天的军训，在12日进行汇报演出，在汇报演出中，新生们朝气蓬勃展现了学生们的良好精神状态，此次军训汇报圆满落幕，他们即将开启全新的大学生活。</p> </div> <divclass="clearfix"></div> </div> <h4>第5届校园招聘会召开</h4> <p>此次校园招聘会一共有58家企业参加，其中计算机类40家，自动化专业企业12家，人文类外语类6家。</p> </div> <divclass="clearfix"></div> </div> </div></div>任务实现学校网站页面设计11新闻动态展示部分CSS样式设计的代码如下：通过上述代码可以得到如图所示的效果。.welcome-w3,.student-w3ls,.new-w3agile,.about-w3,.what-w3,.staff-w3l,.services-w3l,.our-services-w3,.projects-agile,.courses-w3ls,.statistics-w3,.typo-w3,.contact-w3l{padding:4em0;}.wel-grids,.student-grids,.about-grids,.test-grid,.what-grids,.staff-grids,.statistics-grids,.services-grids,.ourser-grids,.course-grids{margin-top:3em;}任务实现学校网站页面设计（5）底部信息展示部分的代码设计与分析。①底部信息展示部分页面设计的代码如下：<divclass="footer-w3"> <divclass="container"> <divclass="footer-grids"> <divclass="col-md-4footer-grid"> <h4>关于我们</h4> <p>希望你可以加入我们，创造属于你的美丽明天。<span>如果你对我们感兴趣欢迎前来咨询</span></p> </div> <divclass="col-md-4footer-grid"> <h4>美丽校园</h4> <divclass="footer-grid1"> <imgsrc="图片/14.jpg"alt=""class="img-responsive"> </div> <divclass="footer-grid1"> <imgsrc="图片/13.jpg"alt=""class="img-responsive"> </div> <divclass="footer-grid1"> <imgsrc="图片/20.jpg"alt=""class="img-responsive"> </div> <divclass="footer-grid1"> <imgsrc="图片/12.jpg"alt=""class="img-responsive"> </div> <divclass="footer-grid1"> <imgsrc="图片/11.jpg"alt=""class="img-responsive"> </div> <divclass="footer-grid1"> <imgsrc="图片/10.jpg"alt=""class="img-responsive"> </div> <divclass="clearfix"></div> </div> <divclass="col-md-4footer-grid"> <h4>学校信息</h4> <ul> <li><iclass="glyphiconglyphicon-map-marker"aria-hidden="true"></i>学校路666号</li> <li><iclass="glyphiconglyphicon-earphone"aria-hidden="true"></i>66666666666</li> <li><iclass="glyphiconglyphicon-envelope"aria-hidden="true"></i><ahref="mailto:example@">666666@</a></li> <li><iclass="glyphiconglyphicon-time"aria-hidden="true"></i>周一到周五09:00到18:00</li> </ul> </div> <divclass="clearfix"></div> </div> </div></div>任务实现学校网站页面设计②底部信息展示部分CSS样式设计的代码如下：通过上述代码可以实现如图11-10所示的底部信息显示效果。.footer-w3{background:#212121;padding:4em0;}.footer-gridh4{font-size:2em;color:#fff;margin-bottom:1em;}.footer-gridulli{list-style:none;color:#BBB9B9;line-height:2em;font-size:1em;}.footer-gridullii{color:#BBB9B9;line-height:2em;font-size:1em; margin-right:1em;}.footer-gridullia{color:#999;text-decoration:none;}.footer-grid1{float:left;width:31.45%;margin:00.3em.3em0em;}.footer-gridp{font-size:1em;color:#BBB9B9;}.footer-gridpspan{display:block;margin:1em00;}任务实现学校网站页面设计（6）子页面代码的设计与分析。根据主页用到的标记和CSS样式，我们可以设计各个子页面，展示不同角度的学校风采，下面以课程展示子页面的设计为例。①课程展示子页面设计的代码如下：任务实现学校网站页面设计<!DOCTYPEhtml><html><head><title>Courses</title><!--css--><linkhref="css/bootstrap.css"rel="stylesheet"type="text/css"media="all"/><linkhref="css/style.css"rel="stylesheet"type="text/css"media="all"/><!--css--><metaname="viewport"content="width=device-width,initial-scale=1"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="keywords"content=""/><scripttype="application/x-javascript">addEventListener("load",function(){setTimeout(hideURLbar,0);},false);functionhideURLbar(){window.scrollTo(0,1);}</script><!--webfonts--><linkhref="/css?family=Cagliostro"rel="stylesheet"type="text/css"><linkhref="/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic"rel="stylesheet"type="text/css"><!--webfonts--></head><body> <!--header--> <divclass="header"> <divclass="header-top"> <divclass="container"> <divclass="detail"> <ul> <li><iclass="glyphiconglyphicon-earphone"aria-hidden="true"></i>+66666666666</li> <li><iclass="glyphiconglyphicon-time"aria-hidden="true"></i>周一到周五9:00到18:00</li> </ul> </div> <divclass="indicate"> <p><iclass="glyphiconglyphicon-map-marker"aria-hidden="true"></i>学校路666号</p> </div> <divclass="clearfix"></div> </div> </div> <divclass="container"> <navclass="navbarnavbar-default"> <divclass="container-fluid"> <!---Brandandtogglegetgroupedforbettermobiledisplay---> <divclass="navbar-header"> <buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"> <spanclass="sr-only">Togglenavigation</span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> <divclass="navbar-brand"> <h1><ahref="index.html">学校<span>主页</span></a></h1> </div> </div> <!--Collectthenavlinks,forms,andothercontentfortoggling--> <divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"> <navclass="link-effect-2"id="link-effect-2"> <ulclass="navnavbar-nav"> <liclass="active"><ahref="index.html"><spandata-hover="Home">主页</span></a></li> <li><ahref="about.html"><spandata-hover="About">关于我们</span></a></li> <li><ahref="services.html"><spandata-hover="Services">提供服务</span></a></li> <li><ahref="projects.html"><spandata-hover="Projects">计划与安排</span></a></li> <li><ahref="courses.html"><spandata-hover="Courses">课程</span></a></li> <li><ahref="codes.html"><spandata-hover="Codes">资源库</span></a></li> <li><ahref="contact.html"><spandata-hover="Contact">联系我们</span></a></li> </ul> </nav> </div> </div> </nav> </div> </div> <!--header--> <divclass="banner-w3agile"> <divclass="container"> <h3><ahref="index.html">主页</a>/<span>课程</span></h3> </div> </div> <divclass="serach-w3agile"> <divclass="container"> <h3class="tittle2">查找课程</h3> <divclass="place-grids"> <divclass="col-md-2place-grid"> <selectclass="sel"> <optionvalue="">专业</option> </select> </div> <divclass="col-md-2place-grid"> <selectclass="sel"> <optionvalue="">年级</option> </select> </div> <divclass="col-md-2place-grid"> <selectclass="sel"> <optionvalue="">开课学期</option> </select> </div> <divclass="col-md-2place-grid"> <selectclass="sel"> <optionvalue="">课程名</option> </select> </div> <divclass="col-md-4place-grid"> <formaction="#"method="post"> <inputtype="submit"value="查找"> </form> </div> <divclass="clearfix"></div> </div> </div> </div> <!--content--> <divclass="content"> <divclass="courses-w3ls"> <divclass="container"> <h2class="tittle">主要课程</h2> <divclass="course-grids"> <divclass="col-md-6course-grid"> <divclass="mask"> <imgsrc="图片/15.jpg"class="img-responsivezoom-img"/> </div> </div> <divclass="col-md-6course-grid1gri"> <h4>高等数学</h4> <p>广义地说，初等数学之外的数学都是高等数学，也有将中学较深入的代数、几何以及简单的集合论初步、逻辑初步称为中等数学的，将其作为中小学阶段的初等数学与大学阶段的高等数学的过渡。</p> <p>通常认为，高等数学是由微积分学，较深入的代数学、几何学以及它们之间的交叉内容所形成的一门基础学科。</p> <ulclass="grid-part"> <li><iclass="glyphiconglyphicon-ok-sign"></i>微积分</li> <li><iclass="glyphiconglyphicon-ok-sign"></i>线性代数</li> </ul> </div> <divclass="clearfix"></div> </div> <divclass="course-grids"> <divclass="col-md-6course-grid1"> <h4>编程语言</h4> <p>编程语言（programminglanguage），是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧，用来向计算机发出指令。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据，并精确地定义在不同情况下所应当采取的行动。</p> <p>编程语言（programminglanguage），是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧，用来向计算机发出指令。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据，并精确地定义在不同情况下所应当采取的行动。</p> <ulclass="grid-part"> <li><iclass="glyphiconglyphicon-ok-sign"></i>机器语言</li> <li><iclass="glyphiconglyphicon-ok-sign"></i>汇编语言</li> <li><iclass="glyphiconglyphicon-ok-sign"></i>高级语言</li> </ul> </div> <divclass="col-md-6course-gridgri"> <divclass="mask"> <imgsrc="图片/16.jpg"class="img-responsivezoom-img"/> </div> </div> <divclass="clearfix"></div> </div> <divclass="course-grids"> <divclass="col-md-6course-grid"> <divclass="mask"> <imgsrc="图片/18.jpg"class="img-responsivezoom-img"/> </div> </div> <divclass="col-md-6course-grid1gri"> <h4>大学英语</h4> <p>随着英语的普及，大学生对于英语的掌握程度也要有所提升，所以在大学我们开设了两学期的英语课程。</p> <p>第一学期的英语课主要培养读和写的能力，第二学期的英语可主要培养听和说的能力。</p> <ulclass="grid-part"> <li><iclass="glyphiconglyphicon-ok-sign"></i>听</li> <li><iclass="glyphiconglyphicon-ok-sign"></i>说</li> <li><iclass="glyphiconglyphicon-ok-sign"></i>读</li> <li><iclass="glyphiconglyphicon-ok-sign"></i>写</li> </ul> </div> <divclass="clearfix"></div> </div> </div> </div> </div> <!--content--> <!--footer--> <divclass="footer-w3">