一、框架
搭建一个完整的网页,首先要考虑网页的框架:
常用的框架有:页头+主体+页尾;
所以主体部分代码应该为:
<body> <header>头部代码</header> <main>主体代码</main> <footer>尾部代码</footer> </body>
页头可以做成两到三部分:顶部,招牌,导航栏;
<header> <div>顶部内容代码</div> <div>网站招牌代码</div> <nav>导航栏代码</nav> </header>
主体也可以做成全宽的和主体+侧边栏的;
全宽的
<main> <section>全宽布局模块/section> <section>全宽布局模块/section> <section>全宽布局模块/section> </main>
主体+侧边栏
<main> <section>全宽布局模块/section> <section>全宽布局模块/section> <section>全宽布局模块/section> </main>
页尾可以做成两到三部分:底部+版权信息;
<footer> <div>底部区域模块</div> <div>版权信息模块</div> </footer>
所以整个网页框架构成应该是这样子的
<body> <header> <div>顶部内容代码</div> <div>网站招牌代码</div> <nav>导航栏代码</nav> </header> <main> <section>全宽布局模块/section> <section>全宽布局模块/section> <section>全宽布局模块/section> </main> <footer> <div>底部区域模块</div> <div>版权信息模块</div> </footer> </body>
二、布局
框架构造好后,就开始布局结构了,要分析一下框架里面有几个大模块,大模块里面又有几个小模块,比如说头部有三个大模块:顶部,招牌,导航栏;顶部也可以分成左右两个小模块或左中右三个小模块,并确定每个小模块的宽度或宽度比例,招牌可以分成logo模块和广告模块和搜索模块左中右三个小模块,同样要确定每个小模块的宽度或宽度比例;这就是布局;如下图
<div style="width:100%"> <div style="width:50%;">日历模块</div> <div style="width:50%;">社会化媒体模块</div> </div>
三、模块
网页的每一个区域都会实现特有的功能,这个功能区域就是模块;
比如说菜单栏;
比如说一篇文字的文章;
比如说各种排版图文组合模块;
比如说幻灯片模块;
比如说日历,最新文章,分类目录,标签模块等小工具
这些都属于模块;
这就是我们构建网页时的基本思路。
注:本网站只是说明一些思路,代码没有使用样式(class或id选择器)部分。
重点:
网页怎么布局?
网页模块怎么制作和修改?
分享创造价值
学习成就梦想
我是前方录
微信/QQ:34419369
加我好友,每天都有不一样的分享!
学习更多网站知识,请加QQ群:632528856;