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

前几期我们讲解了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 条评论
登录 后参与评论

相关文章

来自专栏编程

《6大爬虫利器,轻松搞定爬虫》

工欲善其事必先利其器,Python之所以流行在于她有非常丰富的第三方包,无论是Web框架还是机器学习框架、抑或是爬虫框架,多得让人眼花缭乱,这给了开发者极大的选...

1848
来自专栏DeveWork

WordPress 开发之使用WordPress 3.8+后台图标(dashicons)

伴随着WordPress 3.8 的新界面,WordPress 官方为后台UI 引进了目前贼流行的webfont(又称 icon font),官方独立项目名为d...

1728
来自专栏谭广健的专栏

【小程序-云开发】手把手教你使用云开发(创建开发环境)

某天一向高傲冷艳的美工妹妹突然跑到程序员哥哥面前大献殷勤,这反常的举动令程序员哥哥受宠若惊。果然,快到下班的时间美工妹妹露出其楚楚可怜的样子跟程序哥哥...

31715
来自专栏前端之路

–[New]Vue项目使用vw实现移动端适配教程

943
来自专栏知晓程序

失敬,我的微信语音总是比一般人多 1 秒 | 晓技巧

1253
来自专栏Hadoop实操

如何在Kerberos的CDH使用Sentry实现Spark SQL的权限控制

1572
来自专栏ATYUN订阅号

像素墨镜,大烟卷—Thug Life风格自动生成项目

AiTechYun 编辑:nanan ? 暴徒生活(Thug Life)是一款非常火热的P图特效,通过加上此特效会让用户的视频或者照片变的非常有趣好玩。其拥有大...

3275
来自专栏程序人生

Vagrant share浅析

好吧,今天的文章只和程序有关,和人生无关。连续喝了几天大馇子粥,该上点清香逸人的咖啡了。 如果你不知道啥是虚拟机(vagrant是一款虚拟机管理软件),看到这里...

3206
来自专栏小狼的世界

几款Linux下的日志书写工具

最近将工作环境切换到了Ubuntu 10.04 下,非常怀念原来的 Liver Writer,于是Google了一下,找找看Linux下是否有同样出色的离线博客...

642
来自专栏子勰随笔

前端开发中常用资源收集(网站小图标、css、js 框架等)

2965

扫描关注云+社区