基于HTML5的网页设计与制作研究
2018-02-22陈颖段敏娟
陈颖 段敏娟
摘 要：文章对网页设计的语言进行简要介绍，以响应式Web设计理念为基础，从校园网的模块设计、网页素材的选择与处理以及网页的结构设计、表现、行为、网页测试进行详细介绍，希望能为从事Web程序设计的工作者提供一定的借鉴作用。
关键词：HTML5；Web设计；校园网
随着互联网技术的飞速发展与普及，人们利用个人电脑或移动设备在网页上获取信息越来越容易，设计出响应式、美观大方、交互性好的电脑端或移动端网页显得尤为重要。HTML5标准的产生使互联网端的格局发生了很大的变化，UI设计师把网站界面设计好，Web前端工程师需要利用前端开发语言将网站界面设计成网页。本文以校园网为例，对基于HTML5的网页设计与制作进行探讨。
1 开发语言的介绍
1.1 HTML5
HTML是一种用来对网页元素进行整理和分类，对网页进行结构设计的标记语。是由一对“<>”和一个关键词组成，主要分为双标记和单标记，双标记与单标记主要的区别是单标记直接用/闭合标记结束，如
，而双标记是用/闭合标记加<>结束，如
。可通过在HTML标记中添加相关属性对网页元素进行设计，相同的属性在HTML标记中不能重复出现。标记不区分大小写，且可以相互嵌套。HTML5是HTML的最新修订版本，其设计目的是为了在移动设备上支持多媒体，其为移动应用开发提供了另外一种技术方案。HTML5相比之前的HTML版本，提供了一些新的元素和属性，这些新的元素和属性有利于搜索引擎的索引整理，同时可以更好地帮助小屏幕装置和视障人士使用。1.2 CSS
CSS是层叠样式表，主要是对网页进行布局，控制网页的表现。在网页中可通过多种方式来引用CSS样式，但链入式是最常用的使用方式。CSS是通过CSS選择器和属性来定义的，CSS具有优先级，还具有层叠性和继承性。CSS布局与XHTML相结合，可以实现表现与结构的分离，使网站的访问及维护更加容易。
1.3 JavaScript
JavaScript是一种基于对象和事件驱动，并具有相对安全性的客户端脚本语言，广泛用于Web开发，常用来给HTML网页添加动态功能，用来改进设计、验证表单、检测浏览器、创建Cookies，以及更多的Web应用。现在JavaScript框架有很多，而jQuery是应用最广泛的JavaScript框架，jQuery大大地提高了JavaScript编程效率。
2 校园网的设计
2.1 各模块的设计
本网站主要分为三大模块：（1）头部模块（Header），头部包含网站Logo和导航两大部分。（2）主体模块（Content），主体包括视频点播、专题网入口、Banner图片、部门导航以及一些栏目的详细内容。其中栏目主要包括热点专题、职教动态、信息公开、学校新闻4个栏目。（3）底部模块（Footer），底部主要放置友情链接、学院地址、邮编、版权、备案号等信息。
2.2 网页元素的选择与处理
2.2.1 图片素材
在网页设计时，主页图片素材的选择必须具有代表性，让用户在浏览主页时通过图片就能获取学院一些直观的信息。Banner图片主要放置了学院的风景图片、实训图片以及学生公寓、食堂、实训大楼等图片。
2.2.2 视频素材
在视频素材的选择上，必须考虑视频放在主页中的效果，比如视频的清晰度，视频播放效果等。
2.2.3 文字素材
文字是信息传递的主要方式，文字的格式对网页的布局、美观非常重要，其设置的状态直接影响到用户对网页信息的获取。
3 校园网的实现
3.1 网页的结构
校园网采用HTML5进行结构设计，头部利用div标签进行结构设计，定义其类名为.Header，通过img标记将Logo图片放入头部。利用无序列表ul标记设置导航菜单，在li列表项目项中设置菜单项。代码如下：
主体利用div标签进行结构设计，定义其类名为. Content，利用HTML5中的video标记设置视频，利用video标记中的子标记source将视频路径放入网页，在网页载入时可以读取视频源文件。通过HTML5+CSS3+JavaScript设置Banner轮播图片，利用定义列表dl标记设置其他栏目信息，在dt标记中放入栏目名称，在dd标记放入相应栏目下的内容，一对dl标记中只允许一对dt标记出现，但允许一对或多对dd标记出现。底部也利用div标签进行结构设计，定义其类名为. Footer，友情链接也可以通过ul标记来布局。
3.2 网页的表现
校园网通过CSS来设置其各种表现。对头部类.Header设置其宽度为1200像素，外边距设置为自动auto，对Logo图片设置float属性为left。设置导航菜单的CSS样式代码如下：
