基于“Div+CSS盒模式”的分屏式网页设计与实现
——以电商购物网站为例
2021-06-26黄杰
黄杰
(常德职业技术学院,湖南 常德415000)
信息全球化时代背景下,互联网已经融入到社会各个领域,深刻影响着人们生活的方方面面。网站作为互联网的信息交互窗口,页面布局的表现方式对访客接收信息具有决定作用。作为当前网页设计主流技术的“Div+CSS盒模式”,在外观样式、网页布局、模块搭建等方面展现了强大的工作特性,通过“Div+CSS盒模式”实现分屏式网页布局,能够大大提升网页设计效率,同时引领了一种新的网页布局理念。
1 DIV+CSS技术概述
“Div+CSS盒模式”作为目前互联网市场主流的网页布局技术,引领了一股新的网页设计趋势。打破了以往采用表格、框架、模板等手段进行网页布局的观念,将网页内容和外观样式进行独立编辑。DIV是网页编辑语言中的一个盒标签,具有搭建网页模块的作用,形成一个独立的网页容器,存放不同的网页内容；CSS是层叠样式标签,能够改变网页元素的基本属性以及定义元素规则,通过嵌入代码、内联标签、外部链接等方式添加网页外观样式；Div+CSS盒模式融合了二者的功能特性,建立一个相对灵活的盒子模型作为页面容器,通过在容器中填充网页内容,确定层级关系之后借助CSS层叠样式表为目标元素定义规则属性,并实现网页元素准确定位,能够有效提升网页布局效果。除此之外,“Div+CSS盒模式”更是一种促进数据交互的手段,对于分屏式网页设计具有重要意义。
2 “Div+CSS盒模式”对于网页分屏设计的优势
2.1 减少代码重复编写,简化结构体系
网页设计的繁复性造成了大量冗长的代码结构出现,对于分屏式网页来说,无可避免会产生重复性代码,在技术要求上必须保证页面访问的流畅性和模块的独立性。运用“Div+CSS盒模式”将网页源代码划归为块级结构,一方面,大幅减少了网页代码的重复编写,保持代码结构清晰、工整,有利于提高工作效率；另一方面,便于快速查找编写错误,及时修改代码,压缩了后期网页运维过程中成本消耗。与此同时,结构简化后的网页界面的运载速度增强,用户操作响应及时,尤其是图片、视频等大存储文件的缓存无需用户长时间等待,有利于提升用户浏览体验感。
2.2 分层级嵌套,统一样式管理
分屏式网页设计拓宽了信息传递渠道,同时也加大了网页代码编写的工作量,造成众多网页元素的管理工作较为复杂。“Div+CSS盒模式”把同类型或同样式的网页元素划分为块级单位,建立一种CSS样式表可供多个块级单位同时调用,省略了很多不必要的代码写入环节。在遇到修改问题时,如背景、文字、色彩等参数设置,即可在CSS样式表中进行修改,调用该样式表的块级单位则会自动检测新指令并完成网页元素的更新。由此可见,“Div+CSS盒模式”将网页元素统一规划管理,很大程度上促进了分屏式网页布局的有序性和系统性。
2.3 灵活构建模块,表现形式多样化
“Div+CSS盒模式”在网页布局方面表现出灵活性和多样性的特点,将内容和样式从以往的编写公式中划分出来。在分屏式网页布局中,页面划分为不同的区域,每个区域显示不同的界面,界面之间可以同步运行浏览器窗口。依靠“Div+CSS盒模式”搭建页面模块,模块中可填充多种形式内容,并且可变换多种表现样式。配合CSS样式表对模块的外观及位置进行参数设置,例如自定义大小、颜色、边框粗细等属性,以及自由调整模块位置与间距。进一步缩小了分屏式网页设计排版的局限性,网页的交互性空间大幅提升。
3 “Div+CSS盒模式”在电子商务网站的应用
3.1 确定网站主题合理布局页面
电子商务网站的定位应该是为用户提供商品销售服务,那么网页设计始终围绕两个深层内涵,一是让用户能够了解网站销售的商品,二是让用户购买商品。如图1所示,“Div+CSS盒模式”应用于在百货商城网站中,根据主题需要,商城页面由两个分屏板块构成,为左右并列布局。左边为商城主页,包含导航栏、菜单栏、活动banner以及部分商品陈列等基本内容；右边为店铺子页,主要是商品详情展示,包含价格、细节图片、参数以及评价详情等内容。
图1 百货商城网站
项目来源:2019年常德职业技术学院重点课题“基于Div+CSS盒模式的分屏式网页设计与实现”,课题编号ZY1905。
作者简介:黄杰(1991,1-),男,回族,籍贯:湖南常德,学历:研究生,硕士学位,讲师,研究方向:电子商务。
3.2 DIV+CSS技术在网站首页的框架设计
创建商城网站的分屏式网页布局,首先应对商城首页框架结构设计,利用“Div+CSS盒模式”能够快速、有效地建立网站框架体系并进行框架结构调整。以百货商城网站为例,左右分屏均采用“三”字型布局结构对页面内容进行
图2 百货商城框架结构图
3.3 利用“Div+CSS盒模式”划分页面区块
百货商城网页设计完成分级嵌套容器后,用
图3 页面结构区域图
第一,顶部为商城标志区域,展示商城名称及品牌标志；第二,顶部下方建立网页导航栏区域,设置页面主菜单等；第三,中间部分建立商城主体区域,展示商品分类条目和部分商品图片；第四,尾部为网站版权信息以及合作方链接等。
以上代码标签是对页面布局结构的基本描述,详细区块的划分需要建立多个相应的
结束语
分屏式网页设计的初衷是拓宽信息传递途径和方式,致使网页信息呈现多样化的表现形式,有效增强用户体验感。采用“Div+CSS盒模式”能够灵活划分页面区块,构建分屏式网页布局整体结构,同时“Div+CSS盒模式”将标签和样式表相分离,简化网页代码编写过程与组成公式。总体来看,分屏式网页中采用“Div+CSS盒模式”缩短了页面浏览过程中网页元素的加载时间,有效提高信息传输效率,网页可读性大幅增强,为网站运营提供了诸多便利。虽然“Div+CSS盒模式”在页面布局中具有明显优势,但是对于分屏式网页布局而言不能一概而论,更应该不断更新和完善技术理论体系,促进网页设计领域迈向更高的水平。
