传统企业站开发 - 页面布局

前几期我们讲解了HTML+CSS的基本知识点,也带着大家分析过一些案例。从简单的页面结构到页面布局的实现,再到页面的优化。我们学习到的东西挺多的,但是在实战开发中如何去应用它仍然有很多不理解的地方,所以今天这篇文章就以项目的首页制作来带着大家把之前学习过的知识点运用起来。

本文内容概要:

1 页面的开发流程

2 页面效果展示

3 项目首页的基本布局

4 课后总结

5 课后作业

1 页面的开发流程

——>PSD图的分析

——>基本的前期准备

——>页面的基本布局(一级布局与二级布局)

——>针对公共模块进行开发

——>具体模块开发

——>页面的优化

2 页面效果展示

在开始制作之前,我们先来看看要做的项目首页长什么样,请往下看!

上面的这张图就是我们今天需要完成的内容,在制作之前需要提醒大家一点,那就是之前讲解的东西还不足以完成整个页面的实现,所以我们主要去实现整个页面的大框架布局即可(文字和图片的样式处理后期的文章会进行讲解)。

接下来我们就不再讲解别的了,与大家一起来用代码实现上图吧!~~~

3 项目首页的基本布局

首先需要与大家说明一点的是页面的制作我们是参照页面的PSD图来进行实现的,也就是说小编后面用到的数据是通过把PSD图放到在PS软件里面测量出来的,这一点也是我们前端开发工程师需要严格遵守的规则——保证实现出来的页面是对PSD图的100%还原(1px不差)。

页面的一级布局

参照PSD图,分析页面制作的思路。看上图,我们会发现,页面呈现出来的效果层次分明,分别由头部、导航栏、页面主体、尾部等构成。所以接下来我们的代码实现就比较方便了。一起看下面的代码吧!

页面的结构代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
    <div class="wrap">
        <!-- 头部 -->
        <div class="header"></div>
        <!-- 导航 -->
        <div class="nav"></div>
        <!-- 页面主体 -->
        <div class="main"></div>
        <!-- 尾部 -->
        <div class="copyright"></div>
    </div>
</body>
</html>

相对于页面开发,我们会把CSS样式做成外部引入,即我们上面结构代码里面引入的index.css文件,所以CSS代码如下:

/* layout 书写注释,方便后期查阅*/
/*layout start*/
.wrap {
    width: 980px;
    height: 1046px;
    margin: 0 auto;
    background: black;
}
.header {
    height: 65px;
    border-top: 7px solid #000;
    background-color: yellow;
}
/*导航栏制作*/
.nav {
    height: 34px;
    padding: 4px 0 0 88px;
    background-color: green;
}
.main {
    width: 960px;
    height: 818px;
    padding: 10px;
}
.copyright {
    width: 960px;
    height: 60px;
    margin: 0 auto;
    padding-top: 28px;
    background-color: #044b55;
}

对应的效果展示如下:

在上面的代码文件中,我们完成了页面主体框架的搭建。接下来我们要考虑的就是模块布局的制作了。

页面的二级布局

完成页面一级布局之后,我们需要处理的就是模块部分的布局了,一起来写一写吧~~~

页面的结构代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
    <div class="wrap">
        <!-- 头部 -->
        <div class="header">
        </div>
        <!-- 导航 -->
        <div class="nav">
        </div>
        <!-- 页面主体 -->
        <div class="main clearfix">
            <div class="bigpic"></div>
            <div class="manage">
            </div>
            <div class="message"></div>
            <div class="about indexcom">
            </div>
            <div class="ensure indexcom">
            </div>
            <div class="boater indexcom">
            </div>
            <div class="goods indexcom">
            </div>
            <div class="news">
            </div>
            <div class="contact">
            </div>
        </div>
        <!-- 尾部 -->
        <div class="copyright">
        </div>
    </div>
</body>
</html>

对应的CSS样式如下:

.wrap {
    width: 980px;
    height: 1046px;
    margin: 0 auto;
    background: black;
}
/*页面主体*/
.main {
    width: 960px;
    padding: 10px;
}
/******公共模块布局******/
/*头部*/
.header {
    height: 65px;
    border-top: 7px solid #000;
    background-color: yellow;
}
/*导航*/
.nav {
    height: 38px;
    background-color: green;
}
/*尾部*/
.copyright {
    width: 960px;
    height: 60px;
    margin: 0 auto;
    padding-top: 28px;
    background-color: #044b55;
}
/******具体模块布局******/
.bigpic {
    float: left;
    width: 722px;
    height: 256px;
    margin-bottom: 9px;
    padding: 5px;
}
.manage {
    float: right;
    width: 219px;
    height: 266px;
    margin-bottom: 9px;
}
.message {
    float: left;
    width: 100%;
    height: 35px;
    margin-bottom: 9px;
}
.about {
    float: left;
    width: 276px;
    height: 266px;
    margin-bottom: 9px;
}
.ensure, 
.boater, 
.goods {
    float: left;
    width: 219px;
    height: 266px;
    margin: 0 0 9px 9px;
}
.news {
    float: left;
    width: 732px;
    height: 224px;
}
.contact {
    float: right;
    width: 219px;
    height: 224px;
}
.bigpic,
.manage,
.message,
.about,
.ensure,
.boater,
.goods,
.news,
.contact {
    background-color: #fff;
}

对应的效果展示如下:

写到现在,我们会发现整个页面的基本布局已经基本完成,接下来需要制作并完善的就是每个模块中图片、文字内容等的处理了,那这些我们会在后期的文章再来给大家做讲解。

页面的兼容性测试

测试IE系列、Chrome、Firefox等浏览器

Tips:制作页面的时候,需要及时的测试页面的兼容性,切忌放到最后再进行测试;

4 课程总结

在制作页面之前,我们需要准备大量的前期工作,比如:reset文件的基本调整、典型的布局选用和基本的布局操作等。如果想具体了解HTML5项目开发备忘录的请发送“备忘录”到HTML5学堂公众号。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-05-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

1425
来自专栏QQ会员技术团队的专栏

H5直播避坑指南

面对着产品同学不断的询问:为什么 h5 的体验这么差?为什么不能和 app 的播放体验保持一致?我们对着 h5 不明确的文档和不同浏览器的怪异表现欲哭无泪。

42612
来自专栏腾讯Bugly的专栏

H5 直播避坑指南

本文来自“小时光茶社(Tech Teahouse)”公众号 作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目...

3648
来自专栏腾讯社交用户体验设计

H5动画开发快车道 - AnimateCC与createjs开发实践

3093
来自专栏数据小魔方

论一个图表的自我修养

昨天给大家讲解了商务图表制作中的黄金原则——最大化数据墨水比。 今天继续给大家解构图表的元素布局! 商务图表作为表达业务数据的重要方式,需要遵循基本的元素布局...

33311
来自专栏Alice

js跳转界面

js页面跳转大全 所谓的js页面跳转就是利用javesrcipt对打开的页面ULR进行跳转,如我们打开的是A页面,通过javsrcipt脚本就会跳转到B页面。 ...

3217
来自专栏jojo的技术小屋

原 荐 CSS深入理解之border

作者:汪娇娇 时间:2017年10月20日 前段时间看过有关border比较好的视频,想着就写成博客给大家分享一下吧~ 说起border,想必大家都很熟悉,简单...

2844
来自专栏向治洪

实用Android 屏幕适配方案分享

实用Android 屏幕适配方案分享 真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android 屏幕适配方案,已用在一款成熟互联网应用...

5317
来自专栏前端技术总结

圣杯布局与双飞翼布局

上一篇文章介绍了三种方法实现CSS三栏布局,本文则在此基础上,进一步介绍常用的圣杯布局与双飞翼布局。

95022
来自专栏QQ会员技术团队的专栏

H5直播避坑指南

作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目,...

55610

扫码关注云+社区