Web开发，如何设计页面布局？
时间：2024-02-09 01:15:01 | 来源：网站运营
时间：2024-02-09 01:15:01 来源：网站运营
Web开发，如何设计页面布局？：
学习了常见的布局方案，将讲解开发一个整页的布局，从规划到制作的整页制作设计图。如图所示。
结构划分与公共样式首先确定整页的结构该如何划分，这样有利于后期分段进行处理，大概可划分为头部、导航、广告、列表、信息、尾部等模块。
然后提取整页中公共部分的样式，这样做的好处是可以复用样式代码，节省代码量，提高性能。如网页中清除浮动的.clear样式就是公共样式，同样CSS reset部分也是属于公共部分的样式。
结构划分和公共样式都确定好后，可以先通过注释的方式，把区域确定出来，方便后续操作。示例代码如下。
网页模块命名规范网页模块的命名，如果没有统一的命名规范对其进行必要的约束（自由地命名），会使后续工作难以进行。因此，命名规范很重要，读者应予以重视。通常网页模块的命名需要遵循以下三个原则：
l 命名避免使用中文字符（如id=”内容”）。
l 命名不能以数字开头（如id=”1header”）。
l 命名不能使用关键字（如id=”div”）。
命名应尽量用最少的字母表达含义，使之简明、易懂。
在网页开发中，常用驼峰式命名和帕斯卡命名两种命名方式。其具体解释如下所述。
l 驼峰式命名：除第一个单词后面的单词首字母都要大写，其余小写，如navOne。
l 帕斯卡命名：每个单词之间用“_”连接，如nav_one。
下面列举网页中常用的一些命名。具体如表所示。
表 常用命名
| 模块 | 命名 | 模块 | 命名 |
| 头部 | header | 标签页 | tab |
| 内容 | content/container | 文章列表 | list |
| 尾部 | footer | 提示信息 | msg |
| 导航 | nav | 小技巧 | tips |
| 子导航 | subnav | 栏目标题 | title |
| 侧栏 | sidebar | 加入 | joinus |
| 栏目 | column | 指南 | guild |
| 左右中 | left right center | 服务 | service |
| 登录条 | loginbar | 注册 | regsiter |
| 标志 | logo | 状态 | status |
| 广告 | banner | 投票 | vote |
| 页面主体 | main | 合作伙伴 | partner |
| 热点 | hot | CSS文件 | 命名 |
| 新闻 | news | 主要的 | master.css |
| 下载 | download | 模块 | module.css |
| 菜单 | menu | 基本共用 | base.css |
| 子菜单 | submenu | 布局，版面 | layout.css |
| 搜索 | search | 主题 | themes.css |
| 友情链接 | frIEndlink | 专栏 | columns.css |
| 页眉 | header | 文字 | font.css |
| 页脚 | footer | 表单 | forms.css |
| 版权 | copyright | 补丁 | mend.css |
| 滚动 | scroll | 打印 | print.css |
头部制作头部采用固定布局方案，通过Photoshop工具可测量出容器大小为950px。头部包含logo和菜单两部分，其HTML结构实现，示例代码如下。
logo的位置可以通过盒子模型的margin值来控制。菜单的父容器采用右浮动，菜单子项采用左浮动，这样菜单可以采用整体靠右的形式进行排序。菜单项的文字与图标之间的空隙可以通过盒子模型的padding属性来调整。
导航制作导航部分采用混合布局方式，里面的内容是固定布局，父容器是自适应布局。导航分为左边的主导航、右侧的分享导航和下方的子导航。其实现HTML结构。
主导航整体左浮动，分享导航整体右浮动。这里要注意，主导航有个选中的状态，需要添加一个单独的样式，即active样式。具体代码如下。
整页制作广告制作广告主要以图片展示为主，HTML+CSS结构都比较简单，属于一列布局方式，具体代码如下。
展示效果如图所示。
列表制作列表属于三列固定布局，采用浮动+固定宽的方式来实现。根据不同的展现内容，采用合理的语义化标签展示。其实现HTML结构，代码示例如下。
代码中用到一个CSS3中操作子项的方法，即nth-of-type，这个可以针对一组元素进行不同样式的操作，此操作会在CSS3章节中进行详细讲解，这里暂时先使用一下。
信息制作消息区域采用两列固定布局来实现。一列靠左，一列靠右，这里HTML+CSS比较简单。
尾部制作尾部部分与导航部分类似，同样采用混合布局方式，即内容区域采用固定布局，父容器采用自适应布局。
在线咨询
