网页设计DIV+CSS盒子模型布局的优势

  • 网页设计DIV+CSS盒子模型布局的优势已关闭评论
  • A+

福州网站建设的信息时代, 互联网作为信息传播的重要载体, 凭借快速、高效、便捷、成本低廉等特点, 对人们的生活产生了重要的影响, 已成为人们生活中不可或缺的一部分。网页成为人们获取信息、查找资源、发布消息的重要工具。现代社会, 无论是个人、团体、政府机构、企业单位, 都可以利用自己的主页进行对外沟通、交流。越来越多的人, 甚至是非计算机相关专业或者没有接受高等教育的人, 也在努力掌握网页设计技能。本文正是基于这种背景, 对网页设计方法展开探索, 结合网页设计新模式和方式寻求一种易于人们接受、学习的网页设计方法。

1 相关技术简析

1.1 HTML与CSS的分工

超文本标记语言 (Hyper Text Mark-up Language, 简写HTML) 是网页设计使用的标准语言, 其可以把文本、图片、多媒体等内容通过客户端浏览器呈现出来。一个好的网页不是对内容的无序堆砌, 而是对内容的有序呈现, 从而使用户拥有良好体验。在实际应用中, 将HTML与CSS相结合可以实现此目标。HTML标签负责呈现内容, CSS作为层叠样式表 (Cascading Style Sheets) , 负责格式化、标准化HTML呈现的内容以及维护样式的统一性, 使其更加清晰、美观。例如, 若把一段文字或者一张图片呈现在网页上, 则需要用到HTML中相应的标签 (文本的标签为“<p>”, 图片的标签为“<img>”) , 那么, 我需要设置文本的相关格式, 比如字体、字号或者颜色等, 或者给图片加一个边框、设置大小等, 又或者给网页中所有的文本和图片设置统一格式, 那么则会用到CSS。这就是HTML和CSS的根本区别。

1.2 盒子模型 (Box Model)

在设计网页之前, 我们先要对该页面进行内容空间分配, 即页面的布局。页面布局比较常用的方式有三种:一是传统的表格布局 (Table Layout) , 二是具有特殊用途的框架布局 (Frame Layout) , 三是现在最流行的盒子模型布局, 这种布局在网页设计中应用最为广泛。

为什么称之为“盒子模型”?在网页设计中, 每一个块级元素基本都有内容 (content) 、边框 (border) 、内边距 (padding) 和外边距 (margin) 等属性, 这些属性可以用日常生活中的常见物体——盒子作比喻来理解, 所以叫它盒子模型。理解盒子模型网页设计常用的思维模型, 对于开发拓展性强、可维护性高的页面相当重要, 同时其也是网页前端布局开发的基础。以元素的边框 (border) 为界定, 边框自身有一定的宽度 (例如设置边框宽度为2px) ;边框以外为外边距 (margin) , 即元素与元素之间的距离;边框与元素内容 (content) 之间的距离成为内边距 (padding) 。每个属性都可分为上 (top) 、右 (right) 、下 (bottom) 、左 (left) , 以方便在实际操作中设置。

1.3 CSS的使用方式

CSS作为一种辅助HTML样式的格式化语言, 与HTML的使用需要遵循一定的规则, 当然也可以灵活运用。在HTML中使用CSS的方法有三种, 分别是行内样式、内嵌样式和外部样式。这三种不同的方法有不一样的表达方式和写法, 也可以对代码产生一些影响。

(1) 行内样式。行内样式主要写法是把CSS代码直接内嵌到HTML的具体元素中, 该写法的优点是可以一步到位, 清晰地呈现设置的目标元素;缺点则是会使得代码显得杂乱无章, 可读性下降, 因此不推荐使用该写法。“style”的CSS行内样式代码写法如下:

<div style="float:left;border:2px;background:bla ck;">

(2) 内嵌样式。内嵌样式的写法依然把是HTML代码和CSS代码放在同一个文件中, 与行内样式不同, 内嵌样式写法不把CSS代码直接写在HTML元素中, 而是统一把CSS代码写在一个“<style></style>”元素中, 然后把整个“style”代码放在<head></head>中, 该写法可以实现HTML和CSS代码的分离, 可读性提高, 但该CSS代码只能为它所在文件所用, 其他HTML文件不能引用。

(3) 外部样式。外部样式实现了HTML文件和CSS文件的分离, 它把CSS代码独立成一个“*.css”, 既提高了可读性, 又能实现CSS文件的重用性, 能同时被多个HTML文件加载使用。

2“DIV+CSS”盒子模型网页布局的优势

2.1 高度的可维护性

可维护性是衡量一个网站好与坏的标准之一。高度的可维护性需要代码具有高度可读性, 且代码结构清晰、合理, 当页面出现问题 (例如浏览器兼容出错、页面校对出现偏差等) 时, 可以快速地检索代码, 分析其原因, 找出症结, 使得修改代码更加容易。

2.2 较好的可扩展性

页面的可扩展性表现在两个方面:一是模块的可扩展性, 即可快速、方便地增、减页面模块或者变动模块位置, 保持页面结构的灵活性;二是页面内容的可扩展性, 对页面内容进行调整也相当方便、快捷。

2.3 灵活的可定制性

商业网站对是否可定制有着极高的要求, 其需要面对喜好不同、审美不同, 甚至语言不同的客户, 且需要给客户一定的选择空间, 由客户决定网站的样式、颜色、语言等。基于“DIV+CSS”盒子模型建造的网站可以在一定程度上满足以上要求, 结合JavaScript, 并在网页上进行相应的设置, 就可以达到此效果。

3“DIV+CSS”盒子模型页面布局过程

3.1 盒子式页面布局设计简图

盒子式页面布局设计相当于建立一个完整的页面分模块, 并为每一个模块分配特定的内容。在页面设计开始阶段, 我们可以根据内容的重要程度、内容的量度、内容的性质等因素设计页面布局及尺寸, 即为页面内容确定一个大体的位置。

页面的初始设计图可以灵活变动, 无论是尺寸还是位置皆可视情况而定, 内容部分可根据实际情况增添模块, 在代码上可以简单地用一组DIV块来实现, 可操作性高。代码如下:

添加模块前代码:

网页设计DIV+CSS盒子模型布局的优势

根据代码所示, 在container模块中原本只有con_left模块, 如果需要添加另外一个模块, 则可以利用DIV标签轻松添加一个con_right模块。

3.2 实现盒子式“占位图”

在盒子式网页设计实现的过程中, 我们可以采取“先占位后定位”的原则, 即可以根据盒子式页面设计简图, 用不同颜色的版块为各模块占位, 使用代码实现由简图到“占位图”。在本例中, 我们设计了一个“占位图”, 红色表示页面头部, 黄色表示页面底部, 页面主题内容分为两大部分, 分别用蓝色和绿色占位, 效果如图1所示。

网页设计DIV+CSS盒子模型布局的优势

在代码编写方面, HTML关键代码如下, 其中header模块为页面头部部分, main模块为主体内容部分 (内分为main_left模块和main_right模块) , footer模块为页面底部部分, 另外, nav部分为各模块之间的间隙而设。

网页设计DIV+CSS盒子模型布局的优势

HTML代码中只是利用DIV元素创建了一个空白的框架, 在没有添加任何样式的设置之前, 你会发现什么都看不见, 为了完成如图1所示的“占位图”, 需要在HTML代码中加入相应的CSS样式设置, CSS代码也相对应地对HTML代码中相应模块进行样式设置。

3.3 以“占位图”为基础填充内容

“占位图”的页面布局方法能起到为内容“占位”, 确定内容模块区域的作用。这种做法具有诸多优势, 一是逻辑上非常清晰, 一目了然;二是代码的运用相对简单, 是网页设计中页面布局的经典做法;三是设计模板化, 扩展性强, 可重复使用, 可以提高网页开发的效率, 对于网页设计初学者来说尤其受用。在此“占位图”的基础上, 我们把内容添加在合适的位置, 并对其进行调整使其美化, 一个网页设计即完成。

4 结论

将HTML标签和CSS样式结合, 是网页设计的基础, 如本文中所述实例所示, 通过使用HTML设定内容, 用DIV标签限定内容的区域 (即建立一个“块”) , 用CSS中的颜色、大小标识“块”, 建立一个以颜色为标识的“占位图”, 再在每一“块”中填入相应内容, 就是简单网页设计的整个流程。“DIV+CSS”盒子模型网页布局方法, 相对来讲逻辑更清晰, 入门门槛更低, 对初学者来说相当受用。而要建造一个好看而又受欢迎的网页, 涉及到的因素会很多, 例如内容要具有有足够的吸引力、网页特效够丰富等, 这就对网页设计者提出了更高的技术要求。