html 使用 div 分区布局。
html 5 有相应的用于布局的标签。
1. html 文档的基本结构
header
- 通常是一个大长条, 包括 heading , logo , tagline
- 从一个网页到另一个网页,显示相同.
navigation bar
- 链接网站的主要部分
- 通常用 menu button , links , 或者 tabs 表示.
- separate from header is better
main content
- 网页的主要内容
sidebar
- peripheral info , links ,quotes , ads, etc.
- 通常是与主要内容相关的内容. 例如一篇新闻, sidebar 可能包含 作者简介, 或者相关文章链接
- 也有的情况是, 作为二级navigation system
``
footer
- 网页底部的一条
- 主要包含 fine print , copyright notices, or contact info.
- 也提供快速访问的链接
典型的网页布局如下图：
image.png
html为各个部分, 都提供了相应的语义标签
- header
<header>
header 是简介形式的内容
是全局的页眉，或者 article section 的页眉
- navigation bar
<nav>
nav 页面主导航功能， 其中不应包含二级链接等内容。
- main content
<main>
main 存放每个页面独有的内容。 每个页面上只能用一次。
main 直接嵌入body 中，最好不要将他嵌套进其他元素。
article
article 包含一篇文章
section
与article 类似，更适用于组织页面使其按功能分块（比如迷你地图，一组文章标题和摘要）。
一般用法： 以标题开头， 把一篇文章 article 分成若干部分分别置于不同的section， 也可以把一个区段section 分成若干部分并分别置于不同的 article 中。
div
- sidebar
aside
aside 经常放在 <main> 里
aside 包含一些间接信息，如 术语条目、作者简介、相关链接、等等。
- footer
footer
找不到适合的语义的标签 把一组items 放在一起, 可以使用 <div> 和 <span> 添加 class 属性,
设计一个网站的流程
尽可能带给用户最好的体验，需要哪些页面，如何排列组合这些页面，如何互相链接等问题不可忽略，这些工作称为
信息架构。
1. 大多数页面会使用一些相同的元素： 导航菜单，页脚。
如果网站为商业站点，不妨在所有页面的页脚都加上联系方式。
所有页面都通用的内容：
页眉： 标题 、 logo
页脚： 联系方式 、版权声明
超链接：
- 术语 、状态
- 站点语言选择
- 无障碍访问策略
2. 为页面结构绘制草图， 记录每一块的作用。
image.png
3. 对于期望添加进站点的所有其他非通用内容的内容展开头脑风暴，直接罗列出来。
image.png
4. 试着对这些内容进行分组，这样可以让你了解哪些内容可以放在同一个页面。这种做法和 卡片分类法 非常相似。
image.png
5. 绘制一个站点地图的草图，使用一个气泡代表网站的一个页面，并绘制连线来表示页面间的一般工作流。主页面一般置于中心，且链接到其他大多数页面；小型网站的大多数页面都可以从主页的导航栏中链接跳转。也可记录下内容的显示方式
image.png
Note down what you want to have common to every page
such as naviagetion menu , footer content ,
- Draw a rough sketch of what you might want the structure of each page to look like. Note what each block is going to be.
- Brainstorm all the other (not common to every page ) content you want to have on your website.
Write a big list down. - Try to sort all these content items into groups , to give you an idea of what parts might live together on different pages.
- Try to sketch a rought sitemap .
Have a bubble for each page on your site,
and draw lines to show the typical workflow between pages.
The homepage will probably be in the center,
and link to most if not all of the others.
most of the pages in a small site should be available from the main navigation, although there are exceptions.
You might also want to include notes about how things might be presented.
网友评论