留言板记得邮件哦 arthuridea[at]gmail.comRSS订阅
<<  [桌面设计]Lucky☆Star [>_<最爱小镜，嘛~ 爱屋及乌的小司] | 首页 | [南瓜节涂鸦]寻找爱的巫女。。treat or trick =v=  >>

[教程]Blogbus模板制作（3）——页面布局篇（下） - [电脑技术]

      上一讲说到了页面布局的几种方案。这一次说一说布局的具体策略。

      blog的布局，如果不追求猎奇的风格的话，大致分为顶部的Header，分类/Tag菜单栏（其实这个是可有可无的），侧边拦Sidebar，最后就是blog最核心的内容部分MainContent。分块标示如下图所示：

点击查看原图

      分好区域，代码自然就一目了然了。作页面设计，如果没有先前的设计稿的话，首先要画效果图，这样能够在整体上把握页面的特征，并把页面的细节效果在图片上表现出来。如是才能成竹在胸。接下来的工作就是搭框架——用简单的HTML告诉浏览器：我的页面结构是什么样的。这一点要特别强调的是，很多初学者总喜欢一边写页面一边琢磨着用什么效果，于是一会儿是页面标记一会儿是CSS的写。最后往往是见树不见林，自己都转晕了。俗话讲，磨刀不误砍柴工。尤其是当前倡导“结构与表现分离”的主旋律下。因此，在这个阶段，我们只要像盖楼房一样，先把钢混的外骨架造好，至于精装修那都是买房之后的事了。

      在写页面之前（对，你没看错。的确是“写”页面，我坚信好的页面是写出来的）强烈建议在制作页面的时候使用直接书写源代码的方式。我有充足的理由说明：在页面设计技术手段没有极大丰富之前，不要相信任何所谓的“所见即所得”——即使是DW这样专业的软件也远不能实现“所见即所得”。好的页面编辑器：首推DW，建议用DW8或者是更易用的DW CS3。然后是记事本（速度就是优势），对页面简单的修改可以用它，或者用UE、Editplus（不过新建一个web页不推荐使用UE或Editplus，它们生成的代码不标准）。另外微软的VS WebDeveloper（就是VS2005的IDE环境）做毕设的时候用过一段时间，感觉在标签嵌套完成还有代码提示上做的相当出色——尤其是它还有简单的javascript调试功能，如果你手头有不妨用用，没有的话建议直接用DW就好。

      说了这么多，按照之前的思路，我们应该很容易的构建起这个框架。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body class=".E_Magic">
<div id="container">
  <div id="header">
    <p id="toggle"></p>
    <div id="description"></div>
    <div id="tag"></div>
    <br class="clearfloat" /> <!--这个用来清除浮动-->
  </div>
  <div id="sidebar">
    <div class="pannel"></div>
  </div>
  <div id="mainContent"></div>
  <br class="clearfloat" /><!--这个用来清除浮动-->
  <div id="footer"></div>
</body>
</html>

      在书写的过程中最好的教材就是优秀的现有页面。循序渐进，框架就搭好了，细节的页面内容可以在页面设计过程中逐步完善。其实那些清除浮动的元素也可以后面根据需要再添加。我这里顺便加上是因为考虑到将来肯定会用浮动元素的缘故。呃，不明白什么是“清除浮动”？那么请继续关注后续的“样式美化篇”。


随机文章：


收藏到：Del.icio.us




Tag：电脑技术 设计 blog模板 blogbus模板 Web标准
引用地址：
Arthuridea 发表于22:48:19 | 编辑 | 继续话题 | 转发 | 分享　0

关闭

RSS 什么是RSS？
用IM提醒我内容更新
订阅到QQ邮箱
订阅到鲜果阅读器
订阅到Google阅读器
订阅到抓虾阅读器

关闭

Arthuridea[at]gmail.com

Replace [at] with @