重点:
合理应用"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]网站布局实例二的更多相关文章

  1. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  2. 《CSS网站布局实录》学习笔记(一)

    今天开始,认真学习前端技术,哈哈哈~~~加油~~~ 推荐这本<CSS网站布局实录>(第2版)给初级入门选手,虽然这本书年代有点久远,不过很经典. 注明一下:这里讲述的CSS均为CSS 2. ...

  3. 全新的css网站布局--Grid布局

    Grid布局全新的css网站布局 CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格),items 是 grid( ...

  4. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  5. div,css&table布局有哪些区别

    DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...

  6. 《CSS网站布局实录》学习笔记(二)

    第二章 XHTML与CSS基础 2.1 XHTML基础 XHTML是网页代码的核心内容,标准XHTML代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  7. IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

    首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...

  8. 《CSS网站布局实录》学习笔记(三)

    第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...

  9. 《CSS网站布局实录》读书笔记

    从Web标准.HTML标记.CSS语法基础介绍到实用技巧,事无巨细.实体书已不印刷,只能下载电子版 书的背景: 国内第一本web标准的CSS布局书,2006年9月第一版,作者李超. 环境背景: 当时主 ...

随机推荐

  1. ArcGIS Engine开发之旅08--和查询相关的对象和接口

    原文:ArcGIS Engine开发之旅08--和查询相关的对象和接口 查询在GIS领域应该是一个很频繁的操作,在GIS中除了具有属性查询(和其他关系型数据库的查询类似),还提供了空间查询.在介绍查询 ...

  2. centos linux

    centos 自带apache(httpd)不用安装 1.查看linux 版本号 方法1: cat /etc/redhat-release /etc/redhat-release配置文件用一行内容来声 ...

  3. LintCode Subtree

    原题链接在这里:http://www.lintcode.com/en/problem/subtree/ You have two every large binary trees: T1, with ...

  4. js 传参报错 参数含有数字、字母组合的字符串SyntaxError: identifier starts immediately after numeric literal

    报错的意思是标识符以数字开头,这是因为js是弱类型的语言当发现第一个数字是就自动转化为数字类型的但是其中还含有字符所以报了错,‘ 报错的原因是因为我们想传的字符串,但是js却当成数字,所以需要给传的参 ...

  5. iOS:项目中用到的Cookie

    1.介绍: 做了这么长时间开发,Cookie真是用的不多,可是现在不一样了,这次的项目我用到了Cookie.其实,Cookie的使用在项目中愈加的频繁,一般情况下,提供的接口是用Cookie来识别用户 ...

  6. saltstack之(七)配置管理系统初始化init

    saltstack的配置管理分环境管理:①.base为基础环境,一般会存放一些所有服务器都使用的配置管理信息.②.dev为开发测试环境,一般会存放一些开发测试服务器使用的配置管理信息.③.pro为线上 ...

  7. (转)Eclipse New Server 【无法输入server name】

    I was trying to add Tomcat 7 in my Eclipse in Ubuntu. When I click “Add new server” in Eclipse and s ...

  8. 微信去除 防欺诈盗号请勿支付或输入qq密码 以及 防欺诈或盗号请不要输入qq密码 的方法

    本文介绍如何去除微信顶部的“防欺诈盗号,请勿支付或输入qq密码”.或 “防欺诈或盗号,请不要输入qq密码”如图所示.    一.微信认证 目前只有已经通过微信认证的账号可以去除这个提示.在公众账号下左 ...

  9. jango_modles_views显示

    views #!/usr/bin/env python #__coding:utf-8__ from django.shortcuts import render,render_to_response ...

  10. Java 使用jaxp添加节点

    <?xml version="1.0" encoding="UTF-8"?> <person> <p1> <name& ...