陈春雨,王明吉,史建峰
(1.大庆师范学院机电工程学院,黑龙江大庆163312;2.东北石油大学电子科学学院,黑龙江大庆163318;3.海湾安全技术有限公司,河北秦皇岛066000)
视觉婚纱摄影网站设计与制作探析
——以HTML5开发语言为例
陈春雨1,王明吉2,史建峰3
(1.大庆师范学院机电工程学院,黑龙江大庆163312;2.东北石油大学电子科学学院,黑龙江大庆163318;3.海湾安全技术有限公司,河北秦皇岛066000)
随着网络信息时代的快速发展,网页设计作为与客户交流与互动的界面设计的漫延,是在新的技术和新的媒体下支持实现一个全新的设计创作领域。该文介绍了基于HTML5开发的视觉婚纱摄影网站设计与制作,希望在今后工作开展有一定借鉴意义。
视觉婚纱摄影;HTML5开发语言;设计;制作
网站设计是打开企业大门的钥匙,网站的布局就好像是宣传栏或者店面,因此网页布局是网站设计最重要的部分。当整个平面网站被确认以后,我们就要使用Dreamweaver软件用代码重构整个网站,利用HTML5开发语言布局整个静态网站,辅助使用CSS3和JavaScript语言让整个网站实现动态效果,更好地在浏览器中显示,更好地与客户实现交互,本文将基于此探讨以HTML5开发语言基础设计与制作视觉婚纱摄影网站。
1)HTML
HTML是一种标记语言,它使用标签来描述网页,HTML文档也被称为网页。HTML文档一般包含实体(Entity),元素(Ele⁃ment),它可分为双标签、单标签[1]。HTML标签是由尖括号包围的关键词,如:、、,HTML标签一般是成对呈现的,如:、等,这种标签中的第一个标签是开始标签,第二个标签是结束标签。HTML是一种超文本标记语言,在网页制作中它起着至关重要的作用,被称为结构层。因为在网页制作中仅仅使用HTML语言就能够勾勒出整个静态网页[2]。2)CSS
CSS就是层叠样式表,引用CSS可以使用导入外部样式表和内嵌样式。CSS对于样式的描述主要由两个部分组成,选择器和一条或多条声明。制作时运用CSS进行网页的布局、字体、颜色、背景和一些其它效果的设置。可以对HTML代码更加精准的调控,所以我们也称CSS样式表为网页的表示层。
3)JavaScript行为层
JavaScript的简写是JS,它是3个部分构成的:ECMAScript解释器,它是中心部分,几乎都没有所为的兼容问题。DOM是文档对象模型的简写,它是表示HTML操作能力的文档对象模型,有些操作不兼容。表示操作HTML的能力,有一些操作不兼容。BOM是浏览器对象模型的简称,是浏览器对象模型,它没有兼容性问题,因为它是完全不兼容的。
JavaScript是一类前台编程语言,是现在最流行的脚本语言。类似C语言一样,它也有变量,循环,函数,除此之外他还有对象,dom操作,事件等。它可以通过以上操作控制网页上的元素(标签),实现各种动画效果,让网页上的元素动起来;JS是客户端浏览器的语言,能够支持其运行的宿主环境(如浏览器)。JS是一种解释语言,每个浏览器的解释器是不同的。JS脚本写在标签中。
2.1 静态网页的设计
2.1.1 各模块的设置
本套网站主要分五个模块:
头部(TOP),一般放公司的logo、公司名称及联系方式;
导航(Navigation),主要有网站首页、关于我们、产品展示、新闻资讯、在线留言。还可根据企业需求增加或修改导航的内容。
海报(banner),主要由背景(可分为纯色背景、渐变背景或图片背景)、主体元素(企业标语或产品)、辅助元素和文案元素等四个元素组成。它主要放置重点内容,一般放在整个banner的1/2或1/4的位置,让浏览者第一眼就能够注意到企业所要宣传的东西。
内容模块(content),一般展示的是导航中的重点菜单:公司简介、产品展示、新闻动态和联系我们等里边详细的内容;
底部(footer),一般放企业的logo、版权、技术支持、二维码、导航、留言板、联系方式、备案号、友情链接、回到顶部等,可根据设计需求选择排版。
2.1.2 图片选择和文字排版[3]
1)图片选择
网站图片的选择要根据该网站所涉及的行业和市场需求等多方面因素,选择一张适合网站的图片。这样才能更好地吸引客户认真地了解到一个公司所要宣传的信息。
2)文字排版
文字排版有大小的区别、颜色的区别、字体的区别等等,我们不仅要把这些文字排版好看,我们也要让浏览者能够看到企业想要向客户传递哪些有用的信息。能够让我们很清晰地看出哪些内容是重点,能让我们第一眼能看出所展示信息内容的重点在哪里。
3)美化静态网页
一个好的网页应该清晰而美观,设计者不仅仅要注重总体效果,而且要注意每个细节,只有这样浏览时才会觉得很清晰,提升网站的整体形象。网站的审美形态映射着美学,网站设计和美学具有共性。网页设计应该将传统美感和现今个性的设计融合,设置优美大方的页面。一般的网站设计,都应显示清晰的条理,协调的配色。
2.2 动态网页的制作
1)静态布局
本设计采用CSS+Div样式布局:在使用CSS+Div样式布局整个网页的过程中,用到的标签为:它通常是用来展现出一大段的文本;这个标签用于特殊文字样式的设置或者一些为了避免重复使用的标签;~这六对标签通常用于设置标题;这个标签使用于链接,它可以链接网站,链接图片或者文字等内容;用来插入图片。在设置样式时,用border-style设置边框样式,值可以是:solid(实框)、dashed(虚框)、groove(渐变)等;border-width设定边框宽度,单位是px;border-color设定边框颜色[4]。2)加入动态效果
网站的动态效果主要包括:鼠标经过导航的效果,鼠标经过导航菜单时可以出现背景色或文字颜色的变化,突出选中的内容,或出现二级导航,来展示导航菜单中的其他内容。内容模块的鼠标经过效果,鼠标经过产品图片时可以使图片产生出现介绍性文字、变换图片尺寸、变换图片颜色等一系列的动态效果。另外,为了在网页中将每个好的作品展示给浏览者,本设计运用了轮播的效果。
3.1 性能优化的目的与步骤
一套网站在整体完成后,最后要做的就是性能优化,性能优化后,大大提高软件或者网站的容错率,进行性能优化,能让它们运行速度得到提高。软件的性能问题,说的就是整体代码在运行的时候,设计页面运行速度的快慢和页面的流畅程度,这只是其一;代码没问题也不代表软件性能就好,其中代码的逻辑性也很重要,逻辑决定代码的质量,这是其二;软件中的图片也会影响其性能,对图片的正确处理,能让浏览速度提高很多,这是其三;最后一点,软件的适应性,软件要能适应在不同的环境下运行,代码到最后再完善,完善代码步骤如下:
减少html、css,js代码数量和大小,提升代码运行速度;图片大小控制,图片多的话运用懒加载技术或者图片合并;js和css使用外部引用的方式;将css引用样式表放在页面顶部,js引用放在页面底部;写js代码的时候全局变量尽量少使用。
3.2 网页测试
在浏览器中测试,对有动态效果和链接的地方进行测试,测试一下网站是否跳转,若点击链接文字后,网站调到相应的页面,则表示网站中的超链接加入成功;如果网页不跳转,则需检查代码是否有误。将原设计有鼠标经过效果的地方依次用鼠标经过,测试经过时的效果是否为原设计的理想效果,若有偏差则需修改代码。如果自己想的动态效果并没有编译出来的效果好,而且没有办法修改,则需要考虑换一种动态效果。要检查该企业网站的建站目标是否都完成,让浏览者进入该网站浏览,并了解其感受,汲取客户意见,并根据实际情况进行修改,尽量达到用户满意的效果。因为设计此项目的时候,用的是谷歌浏览器,它可以使用f12打开谷歌浏览器调试工具,对整个项目进行测试和调试。代码调试如图1所示。
图1 代码调试
论文设计是基于HTML5开发的视觉婚纱摄影网站设计与制作,运用html5构建整套网页,css来设置样式,使用了javas⁃cript脚本语言编写代码实现项目的各部分功能和交互效果。希望对今后的运用有一定的借鉴意义。
[1]陈惠贞.网页程序设计HTML5·JavaScript·CSS·XHTML· Ajax[M].北京:清华大学出版社,2016.
[2]刘玉红,蒲娟.HTML5网页设计案例课堂[M].北京:清华大学出版社,2016.
[3]王薇,张子涵.网络交互设计的视觉体验及其视觉元素设计探析[J].艺术百家,2015(s2):112-114.
[4]马欢.HTML5技术在网页表单制作中的新特性[J].商业故事, 2016(11):35.
TP311
A
1009-3044(2017)21-0097-02
2017-06-25
黑龙江省自然科学基金:声学测温声波飞渡时间高精度快速测量方法研究(A201309)