[div+css]网站布局实例二

重点:

合理应用"xhtml标签"建立良好的页面结构

拿到一份"设计方案"的效果图后不要立即开始编码,而是要

首先理清"各元素之间的关系";

然后思考"以什么标签来组织所需表现的内容".

** 分析页面的基本构成,主要分成5区域:

上部LOGO;

导航菜单;

左侧边栏;

右侧内容;

底部版权区.

** 布局规划:

上部LOGO + 导航菜单 => 头部元素 =>置于header层;

左侧边栏sidebar+右侧边栏container=>置于main层;

底部版权区置于footer层.

<<<

header层(分4块):网站LOGO / 网站标语 / 搜索框 / 网站导航菜单

左侧边栏分两块,

>>>

** 切割和导出图片

[图片是网站设计艺术表现的载体, 它能

美化网页

增强视觉效果

]

** 页面主体元素xhtml编码

页面总体布局需要 5个 div层

header

main(包围){实现内容层和侧边层居中}

container

sider

footer

@@ id与class [命名技巧]

尽可能"以区域所在的含义命名"(如header / footer)

不要"以表现或所在位置命名"(如width500 / left / right) {后期重构如果更改会显得不伦不类}

** 像这样"先container后sider"的顺序在[表格时代{用表格布局定位}]是不可思议的.[表格时代]内容以从左到右的顺序来显示,按照这种编码思路,应该先写sider,再写container.

"现在",分析页面的特点,侧边栏sider不是页面的主体,页面的主体是container(内容区域),因此,现在编码顺序是[把container放在sider前面,通过CSS进行"反向浮动"对它们的位置进行调整]

"反向浮动"具有更好地适应性,灵活性.

这样的"编码次序"主要益处:

1.用户网速慢时可以先将主体呈现出来

2.当使用其他设备时更易于用户浏览

3.搜索引擎蜘蛛  前面的内容更重要

@@ 在编码中添加适当的注释

编码过程中加入适当的注释非常必要.

<!-- header_END -->

<!-- side_END -->

<!-- main_END --> 等

这些可以辅助编码使xhtml结构更清晰.

** 下面开始"各个页面元素的完善"

** 在编码时可以暂且不管xhtml标签是以何种形式呈现,只需要使xhtml编码具有更好地语义,以恰当的标签来组织页面内容,即通常所说的页面的结构.

** 合理的结构 / 合适的标签 / 这是xhtml编码的精髓.

** 而xhtml标记的外观显示, 可以通过css样式表定义,让表现和内容分离.

@@ 为每一个列表项li都赋予独立的id

编码导航列表时,为每一个列表项li都指定独立的id.

这样的编码便于以后的控制,为CSS样式精准的找到目标.

可以通过它{id}来达到一些有别于其他li的样式效果.

## 在编写xhtml代码时,一般可作如下考虑:

1.用<h1>标注文档标题;

2.用<h2>标注各部分的标题或者文档副标题;

以此类推...

可以给网站栏目名称分配不同级别的标题, 这主要取决于整站结构与栏目组织情况.

## 左侧边栏的两个区域构成相似,因此对一个区域解析,编码时用class类选择器,只需一次定义即可 统一它们的外观样式.

"三行两列式""页面布局

整体页面布局CSS

这是典型的"三行两列式布局"

整体布局,需要 对 5个div层定义  以建立初步的页面布局框架,他们是:

header

main

container

sider

footer

应用"反向浮动"-将主要内容置于文档前面部分

应用"无序列表ul"构建[水平横向菜单]

制作"图文混排"的[侧边栏]页面元素

通过"修改CSS文件"实现[页面重构]