Aelous-Blog

养一猫一狗,猫叫夜宵,狗叫宵夜

0%

网页设计之结构表现原则

前端三大基础,HTML+CSS+JavaScript:HTML 为结构,CSS 为表现,JavaScript 为行为。

前端设计需要遵循结构、表现、行为分离原则,此处的分离说的不仅仅是将文件分开来放置!!!

分离不单单是一种方法,更是一种思想,并不是网页设计最初就需要分离,而是随着技术满满发展,演变出更为复杂的需求,使得分离的原则必不可少。

分离原则:首先将重点放在 HTML 结构和语义化上面,其次考虑 CSS,JS 等,以便于后期维护和分析。

HTML 结构和语义化就相当于房子的结构,一个合理的结构,才能经得起后期的装修(当然房屋结构也有样式~但是结构一定是最基本的)。CSS 就相当于对房屋进行的后期装修。

一个网页如何能做到换肤效果呢?一定是 HTML 样式不变,改变 CSS 样式。所以如何来布局好网页?

一句话总结

一般遵循原则: 先考虑文字内容和内容模块之间的关系,重点放在编写 HTML 结构和语义化,然后考虑布局和表现形式。

对同一个页面,会有不同的制作思路和方法,分为初级中级高级。

  1. 初级的制作方式:div 层层嵌套
    1. 将页面切块
    2. 向不同的块中添加内容
    3. 从上到下编写各自的 CSS 样式
  2. 中级的制作方式:去掉多余的 div,进行简化
    1. 将页面切块(有些单独的标签,会单独保留,不多切块)
    2. 向不同的块中添加内容(与初级不同的是,没有多余的容器)
    3. 从上到下编写各自的 CSS 样式(没有多余的容器,稍微简洁一些)
  3. 高级的制作方式:最大化的简化 html 的结构
    1. 按照结构语义编写 HTML,不切块。
    2. 直接进行 CSS 样式设置,减少 HTML 与 CSS 的契合度。

BTW:很多复杂的网页,如果说不分块,会导致 CSS 样式过于复杂,所以我觉得,这种方式,适合在每个小的模块中间使用。小的模块内部,先编写结构,减少 HTML 与 CSS 契合度,这样大的模块之间的契合度也会随之减弱。

End~~ 撒花= ̄ω ̄=花撒
如果您读文章后有收获,可以打赏我喝咖啡哦~