首页 > 代码库 > [div+css]网站布局实例二

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

2024-08-07 22:45:43   220人阅读

重点:
合理应用"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文件"实现[页面重构]

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


联系
我们