Web前端设计基础教程：综合实例PPT教学课件.pptx

模块四综合实例

模块四综合实例前面我们全面学习了HTML、CSS和JavaScript的知识,本模块通过一个综合实例来展示这些技术的综合应用。图4-0-1展示了扬州工业职业技术学院的主页,下面通过具体的步骤使用已学过的知识来模仿制作出一个同样的网页。图4-0-1扬州工业职业技术学院主页

4.1准备工作打开HBuilder开发环境,新建Web项目,项目命名为ypi,在css文件夹中新建maincss文件,用作项目的主样式文件,将素材文件夹模块4中提供的所有图片复制到img文件夹中,js文件夹暂时先留空,等后续实现动态效果时补充。项目目录结构如图4-1-1所示。图4-1-1项目目录结构

4.2静态页面实现4.2.1页面结构分析和初始化代码对扬州工业职业技术学院主页进行结构分析,可以将整个页面从上往下分为8个区域,如图4-2-1所示,为了方便设置样式,将每一块的id分别命名为header、logo、menu、main、news、department、slogan和footer。图4-2-1页面整体结构划分

4.2静态页面实现4.2.1页面结构分析和初始化代码在index.html文件中的body区域添加8个div,id分别与上文所述一一对应,关键代码如下:

4.2静态页面实现4.2.1页面结构分析和初始化代码在maincss中设置样式,按照常规操作,先将默认内外边距清空,链接取消下划线,列表取消样式,设置默认字体和颜色等,具体代码如下:

4.2静态页面实现4.2.1页面结构分析和初始化代码为了便于观察结构设置是否正确,在CSS文件中先添加一条规则,把页面8个div统一加上黑色边框,高度先设为50px,代码如下:保存代码后,在浏览器中打开界面,当前页面效果如图4-2-2所示。图4-2-2页面结构图

4.2静态页面实现4.2.1页面结构分析和初始化代码通过观察可以发现,在每个区域中,实际内容都是居中显示的,如图4-2-3中线框区域所示,因此有必要在每个区域中统一设置内嵌居中div。图4-2-3居中区域

4.2静态页面实现4.2.1页面结构分析和初始化代码在HTML页面8个区域中统一内嵌一个div,class统一设置为container,这样便于在样式文件中统一设置居中,代码如下:具体的代码见P197.

4.2静态页面实现4.2.1页面结构分析和初始化代码在样式文件中添加一条针对container类的选择器代码,通过margin来设置居中,宽度统一设置为980px,为了便于观察,统一设置红色边框,代码如下:

4.2静态页面实现4.2.1页面结构分析和初始化代码保存文件后在浏览器中打开,当前效果如图4-2-4所示,由于未设置container对应的高度,所有现在居中的div高度均为0,显示为一条红线。图4-2-4居中区域

4.2静态页面实现4.2.2header区域实现header区域的实现比较简单,将区域高度设置为45px,背景色设置为#F5F5F5,在居中container区域中设置两个p段落,添加上对应文字,通过浮动一个靠左,一个靠右,同时通过CSS设置字体大小和颜色,通过行高来设置垂直居中,对应HTML代码如下:

4.2静态页面实现4.2.2header区域实现对应的CSS代码如下:效果如图4-2-5所示。图4-2-5header区域效果

4.2静态页面实现4.2.3logo区域实现首先通过CSS将logo区域整体高度设置为119px,logo区域分左、右两块内容,左边为学校logo图片,通过img标签载入即可,右边为一个右浮动的div标签,内部并列一个文本框和一个搜索图片,通过CSS设置对应的边框宽度和颜色,字体大小和颜色以及通过外边距来控制显示位置,具体设置请参照代码,HTML代码如下:

4.2静态页面实现4.2.3logo区域实现对应的CSS代码如下:

4.2静态页面实现4.2.3logo区域实现从这里开始,为了显示效果,将刚才设置的居中div的红色边框取消,目前网页效果如图4-2-6所示。图4-2-6logo区域效果

4.2静态页面实现4.2.4menu区域实现menu区域的HTML代码较简单,只需要用一个ul无序列表,每个列表项中放一个对应的文字菜单链接即可,代码如下:

4.2静态页面实现4.2.4menu区域实现在CSS代码中,首页将区域高度设置为55px,中间居中区域背景色设为#B3051C,边框弧度为5px,接着重点是通过浮动将列表项从垂直显示改为水平显示,同时通过代码设置字体的大小、颜色、每个列表项的宽度和居中等属性,以及当鼠标指针悬浮在链接上方时,改变链接的字体颜色和背景色,代码如