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

模块十一综合案例

具体任务学校网站页面设计

具体任务学校网站页面设计本任务设计一个完整的学校网站页面，包括网站和网页的建立、CSS样式的设计和网页相关信息功能的设计，网页效果如图所示。我们能够清晰地看到页面的整体结构分布，其顶部为导航信息栏，中间是关于学校的相关介绍及学校、学院的必威体育精装版消息展示等，底部为网站信息、版权声明等内容。整个页面的设计涵盖了本书各个模块的知识，通过实现本任务，可以较好地将理论知识转化为实践能力。

任务实现学校网站页面设计（1）启动HBuilderX软件，执行“文件”→“新建”命令，输入站点名称和本地站点文件夹路径，单击“保存”按钮即可成功建立一个名称为“学校网站”的站点

任务实现学校网站页面设计（1）启动HBuilderX软件，执行“文件”→“新建”命令，输入站点名称和本地站点文件夹路径，单击“保存”按钮即可成功建立一个名称为“学校网站”的站点学校网站文件夹下包含网站的index.html主页文件、course.html子页文件，以及CSS和images两个文件夹，分别用于存放网站需要的CSS样式文件和图片文件。

任务实现学校网站页面设计（2）建立CSS样式文件，如图所示。编辑层级样式表内容，然后保存到CSS文件夹下，方便整体管理网站的代码。

任务实现学校网站页面设计（3）导航的代码设计与分析。①导航页面设计的代码如下：divclass=headerdivclass=header-top divclass=container divclass=detail ul liiclass=glyphiconglyphicon-earphonearia-hidden=true/i+66666666666/li liiclass=glyphiconglyphicon-timearia-hidden=true/i周一到周五9:00到18:00/li /ul /div divclass=indicate piclass=glyphiconglyphicon-map-markeraria-hidden=true/i学校路666号/p /div divclass=clearfix/div /div/divdivclass=container navclass=navbarnavbar-default divclass=container-fluid !---Brandandtogglegetgroupedforbettermobiledisplay--- divclass=navbar-header buttontype=buttonclass=navbar-togglecollapseddata-toggle=collapsedata-target=#bs-example-navbar-collapse-1aria-expanded=false spanclass=sr-onlyTogglenavigation/span spanclass=icon-bar/span spanclass=icon-bar/span spanclass=icon-bar/span /button divclass=navbar-brand h1ahref=index.html学校span主页/span/a/h1 /div /div !--Collectthenavlinks,forms,andothercontentfortoggling-- divclass=collapsenavbar-collapseid=bs-example-navbar-collapse-1 navclass=link-effect-2id=link-effect-2 ulclass=navnavbar-nav liclass=activeahref=index.htmlspandata-hover=Home主页/span/a/li liahref=about.htmlspandata-hover=About关于我们/span/a/li liahref=services.htmlspandata-hover=Services提供服务/span/a/li liahref=projects.htmlspandata-hover=Projects计划与安排/span/a/li liahref=c