一、框架

搭建一个完整的网页,首先要考虑网页的框架:

常用的框架有:页头+主体+页尾;

所以主体部分代码应该为:

<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

Leave a Reply

邮箱地址不会被公开。 必填项已用*标注