html页面设计的论文

html页面设计的论文（共10篇）（共10篇）

1.html页面设计的论文 篇一

页面布局也称页面构图设计,其主要任务是将WEB页面合理分割成用于安排文字、图像等各种屏幕元素的区间。一个精美的网页,不仅体现在页面内容的精彩,还要有效地利用页面的有效显示空间,创造出合理的布局模式。

随着网页制作技术和浏览者需求的提高,访问者不再愿意看到只注重内容的站点,设计者只有将网页内容和色彩通过合理布局、协调搭配,将网页中具有闪光性的内容加以强化,这样既可以将设计者的思路淋漓尽致的表达出来,同时也可以留住太过“挑剔”的访问者。由此可见,页面的布局在网页设计中起着举足轻重的作用,那么如何才能使页面布局合理分配?这恰恰是网页设计者感到最棘手的问题,本文对网页设计的布局进行简要分析。

1 网页布局类型

在进行网页布局之前,首先要明确页面布局设计成何种类型,常见的网页布局类型有“国”字型布局、“厂”字型布局、“框架”型布局、“封面”型布局、“flash”型布局,下面分别论述。

(1)“国”字型布局。又称为“同”字型布局,即最上面是网站的标题以及横幅广告条,接下来是网站的主要内容,左右分别列出一些栏目,中间是主要部分,最下面是网站的一些基本信息、联系方式、版权声明等,这种结构是一些大中型网站常用的布局类型。这种布局的优点是充分利用版面,信息量大。缺点是页面拥挤,不够灵活。

(2)“厂”字型布局。也称拐角型,指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,因为菜单条背景较深,整体效果类似英文字母“T”,所以又称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰,主次分明,是初学者最容易上手的布局方法。缺点是规矩呆板,如果细节色彩上不注意,很容易让人“看之无味”。

(3)“框架”型布局。左右框架型:这是一种左右分为两页的框架结构,一般左面是导航链接,有时最上面会有一个小的标题或标志,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清晰,一目了然。

上下框架型:与上面类似,区别仅仅在于它是把页面分为上下两页的框架。

综合框架型:上面两种结构的组合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”布局,只是采用了框架结构。

几种框架结构的一个共同特点就是浏览方便,速度快,但结构变化不灵活。

(4)封面型布局。这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接。这种类型大部分出现在企业网站和个人主页,如果处理得好,会给人带来赏心悦目的感觉。优点显而易见,漂亮吸引人。缺点是速度慢,作为版面布局还是值得借鉴的。

(5)Flash型布局。其实这与封面型结构是类似的,只是这种类型采用了目前非常流行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,如果其视觉效果及听觉效果处理得当,绝不亚于传统的多媒体。

综上所述,在进行网页布局时,应根据具体情况选取不同的布局结构,如果内容比较多,可以考虑用“国”字型;页面内容不太多或者初学者,可以考虑用“厂”字型布局;如果做一个时尚类站点,Flash型和封面型是首选。在实际应用中也可以把几种布局结合在一起并稍做变化,即变化型布局。

2 网页布局技术

目前,网页设计的软件大多使用Dreamweaver,在使用Dreamweaver设计网页时,一般用于页面布局技术的有以下几种。

(1)表格布局。早期的网站很多都是采用表格布局,其实表格主要是用来组织和显示数据的,而不是承载网页布局的重任,优势在于可以有效地定位网页中不同的元素,而又不用担心不同元素之间的影响。表格布局直观,设置方便,初学者容易上手,使用表格的一个有利方面是众多浏览器全都支持。缺点是table会造成页面代码的可读性非常差,在多重嵌套的时候不仅代码比较乱,而且页面下载速度受到影响,不符合W3C网页标准,网站不便于维护,现在大中型网站一般不用表格来布局。

(2)框架布局。框架可以非常方便地完成网页的导航工作,可以把网页划分为若干个区域,每个区域可以分别显示不同的网页内容,而且不存在相互干扰的问题。如果能有效的运用框架,能使网页更加整洁、清晰。同时每个框架内容的改变不会刷新其他框架的内容,从而节约了网络数据流量,减少了页面下载次数,提高网页速度。

使用单独的框架只能完成简单的页面布局,通过框架互相嵌套使用,可以实现多方向的区域分割能力,但每个网页所使用的框架数量最好不要超过3到5个,采用过多的框架会增加下载网页所需的时间,影响网页的浏览速度,对于内容多、布局复杂的网站不宜采用框架布局,且框架结构的页面兼容性不好。

(3)DIV+CSS布局。随着网络技术的不断发展,早期的表格、框架布局方式越来越不能适应新的要求。新的web标准逐渐普及,一种基于DIV+CSS的新型网页布局方式开始流行,一些大型门户网站都已经完成了网站重构。

DIV是HTML中的一个元素,是容器性质的,DIV元素是用来为HTML文档内大块的内容提供结构和背景的,不用CSS技术,可以有效地页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。简单地说,DIV用于搭建网站结构(框架)、CSS用于创建网站表现(样式/美化)。

DIV+CSS网页布局最主要的优势体现在:表现和内容相分离,将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息,大大提高页面浏览速度;易于维护和改版,只要简单修改几个CSS文件就可以重新设计整个网站的页面;提高搜索引擎对网页的索引效率,搜索引擎将更有效地搜索到你的网页内容。

DIV+CSS布局虽然功能强大,但是完全都用它来做,太费时费力,对于初学者来说,需要一个深入学习的过程,才能灵活掌握,笔者认为用table+CSS也是不错的组合。table+CSS布局方案即HTML表格和CSS的混合使用,可以实现表格布局,CSS修饰页面效果,这样既利用了HTML表格的方便性与兼容性,又利用了CSS的修饰效果美化页面。使用table+CSS布局,对于构建小型个人网站来说,是个比较快捷方便的办法。

3 网页布局方法

网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。下面分别加以介绍。

(1)纸上布局。准备若干张白纸和一只铅笔,在纸上画出页面的布局图,可按照以下三个步骤进行:

草案:尽可能发挥想象力,将想到的“景象”画上去,这属于创造阶段,不讲究细腻工整,不必考虑细节功能,只以粗陋的线条勾画出创意的轮廓即可,尽可能多画几张,最后选定一个满意的作为继续创作的蓝本。

粗略布局:在草案的基础上,将需要放置的功能模块安排到页面上,这里必须遵循突出重点、平衡谐调的原则,网站标志、主菜单等重要的模块放在最显眼、最突出的位置,然后再考虑次要模块的摆放。

定案:将粗略布局精细化,具体化,反复调整后确定最终的布局方案。根据智慧和经验,旁敲侧击多方联想,才能制作出具有创意的布局。

(2)软件布局。如果不喜欢用纸来画出你的布局意图,那么还可以利用软件Photoshop来完成这些工作。Photoshop所具有的对图像的编辑功能用到设计网页布局上更加得心应手。不像用纸来设计布局,利用Photoshop可以方便的使用颜色,使用图形,并且可以利用层的功能设计出用纸张无法实现的布局意念。

无论用哪种方法进行页面具体布局,都需要考虑以下几方面的问题:

(1)页面尺寸。由于页面尺寸和显示器大小及分辨率有关系,一般分辨率在800x600的情况下,页面的显示尺寸为:780x428个象素;分辨率在1024X768的情况下,页面的显示尺寸为:1007x600。从以上数据可以看出,分辨率越高,页面尺寸越大。

在网页设计过程中,向下拖动页面是唯一给网页增加更多内容的方法。除非能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,最好能加上页面内部链接,方便访问者浏览。

(2)整体造型的选择。整体造型是指页面的整体形象。对于页面的造型,可以充分运用自然界中的不同形状以及它们的组合:矩形、圆形、三角形、菱形等。

对于不同的形状,所代表的意义是不同的。如矩形代表正式、规则,很多ICP和政府网页都是以矩形为整体造型;圆形象征柔和、团结、温暖、安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表力量、权威、牢固、侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形代表平衡、协调、公平,一些交友站点常运用菱形作为页面整体造型。在实际应用中,一般会综合多种图形进行设计,可能某种图形的构图比例占的多一些。

(3)页头的设置。页头又可称之为页眉,页眉的作用是定义页面的主题。一个站点的名字大多都显示在页眉里,这样,访问者能很快知道站点的内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。

(4)文本的位置。文本在页面中多以数行或者块出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置的位置灵活性非常小,而随着dhtml的兴起,文本已经可以按照自己的要求放置到页面的任何位置。

(5)图片和多媒体的利用。图片和文本是网页的两大构成元素,缺一不可,也是美化页面和说明内容必须的媒体。处理好图片和文本的位置成了整个页面布局的关键,而你的布局思维也将体现在这里。除了文本和图片,还有声音、动画、视频等其它媒体。虽然不是经常被利用到,但随着动态网页的兴起,它们在网页布局上也将变得非常重要。

4 结束语

当前,网络的飞速发展使网页设计技术不断提高,也给网页设计人员带来了更大的挑战,如何把网页的内容与形式完美地结合,增强网站的吸引力,不仅要精通网页制作的技术,还需要设计者具有较高的艺术修养和审美情趣,页面布局的好坏在很大程度上取决于设计者的艺术修养水平和创新能力。熟悉网页布局的技巧,具有较高的艺术修养水平,制作出适合用户的、具有个性风格的精美网页,是每个网页设计人员的追求。

摘要：网页是网站构成的基本元素,决定网页是否吸引浏览者的重要因素之一是网页的合理布局。本文阐述了在整体上把握好页面布局的重要性,介绍了网页布局的常见类型,对网页布局的技术和方法做了详细地分析。

关键词：网页设计,网页布局,技术,方法

参考文献

[1]刘霆雨.完美网页设计与制作[M].北京:人民邮电出版社,2007:13-15.

[2]扬森香,聂志勇.网页设计与制作案例教程[M].北京:北京大学出版社,2009:7-9.

2.html页面设计的论文 篇二

本文并以具有代表性的经营地方特产和地域性文创产品为主的网店为例，分析了此类网店页面设计中存在的特色不鲜明和版面设计不合理等问题，并针对这些问题提出相应的解决办法。

随着经济和科技的发展，网购已经成为现代人生活中的一种常态化的购物模式。《第35次中国互联网络发展状况统计报告》显示，截至2014年12月，我国网购用户规模达3.61亿。很多创业者在《电子商务“十二五”发展规划》、《国务院办公厅关于加快电子商务发展的若干意见》等国家政策的指引下，结合自身的优势开设网店，目前在淘宝、京东、亚马逊等主流电商平台上运营的各类网店的数量已超过1000万个；但是目前大部分网络店铺都是利用电商平台提供的基本功能建设店铺，外观极为近似，对产品的营销极为不利。本文以具有代表性的经营地方特产和地域性文创产品为主的网店为例，分析在网店设计中存在的问题，并针对这些问题提出相应的解决办法。

1.存在问题

目前大部分网店的设计都有很大欠缺，主要集中在两个问题上：缺乏设计或者设计过度。主要表现在两个方面：一是没有明显的地域文化符号，很难给人留下地方特色印象。二是版式设计杂乱无章，色彩搭配混乱。

2.解决方案

对于经营地方特产和地域性文创产品为主的网店而言，如果能够掌握版面设计基本常识，合理运用地域文化符号，设计出简洁美观并与经营产品相匹配、具有地域文化特色的网店页面，可以更有效的树立和塑造网店形象，推动产品的营销，这是此类网店发展的必然趋势。针对以上问题，主要从两个方面来解决：一是根据店铺商品选择恰当的特色文化符号作为页面设计元素，凸显店铺特色和产品特点；二是运用版面设计基本方法，合理排版设计，使用简洁的网页界面来衬托商品。

3.具体措施

（1）以特色文化符号作为页面设计元素

大多网上店铺在首页设计上为了符合民俗文化或者销售商品的商业形象，大多简单罗列剪纸、红灯笼、兵马俑之类的图案，没有在如何让这些文化符号和店铺商品更好地结合上进行设计，在装饰手法上也大多是简单的堆砌，不但没有美化页面的效果，反而显得杂乱无章，很难给浏览者留下深刻的印象。在网店页面设计中合理地运用地域特色文化符号作为设计元素，以这些元素与经营的商品相互呼应，能够对浏览者产生更为强烈的刺激、吸引消费者的注意、激发浏览者对于地域文化的兴趣。

淘宝网店“汉声巷网店” （http：//bj-hansheng.taobao.com）是一家经营民俗艺术品和书籍的专业网店，该店铺的页面设计在文化符号选用和设计上做得比较成功。首页上使用店铺经营的商品分类图册作为主要视觉元素，展示商品种类的同时将地域文化符号直观地展示给浏览者。

该店中的陕西库淑兰剪纸艺术相关商品页面，则以库淑兰剪纸作品作为页面主要装饰元素，将库淑兰的代表作“剪花娘子”作为版面主要视觉中心，底层为虚化了的折窗花图，商品链接均为剪纸、剪纸衍生文创产品或以剪纸元素设计包装的其他商品。这些元素相互呼应，清晰准确的传达了相关商品的信息。

还有一类地方特产商品网店选用与商品相关的民俗文化作为页面主要视觉符号，例如销售北京特产的京味儿零食店铺（https：//xiuxianship.taobao.com）。该店铺选用传统食品的制作过程或是相关传说的图像作为店铺整体背景，低纯度的灰色上水墨绘画作为背景，摆放其上的商品实物照片识别度得到最大化的凸显。

以上两个店铺成功的在销售商品的同时，也把与商品有关的传统文化或者地域文化信息带给消费者，加强了消费者对于商品以及商品所附着地域或传统文化的认可，为提升消费者的忠诚度有很大帮助。

（2）合理排版，配合商品类型选择页面排版和色彩

一般地域产品，主要是礼品和土特产类，店铺页面设计大多存在页面排版混乱，信息拥堵的问题，色彩也大多选用强烈对比，使得页面显得刺眼和无序。运用版面设计基本原理，选择一个好的页面排版和适当的色彩搭配会让店铺让人更容易选择商品。色彩和排版是店铺页面设计给人的第一印象，合理的排版和让眼睛舒服的颜色会让消费者延长浏览时间。同时，存在感较低的颜色作为背景更容易配合商品照片，使得商品照片更加醒目而容易挑选。

杭州知味观官方旗舰店（https：//zhiweiguan.tmall.com/shop/）在页面排版设计上是较为成功的网店设计。作为传统糕点店铺，主页面根据季节更换与商品相配合的主题画面，页面以白色为底色，排版简洁明了，和一般网店页面上商品罗列不同，知味观的商品页面显得较大，图片之间空隙也较大，浏览者很容易清晰分辨挑选商品并留下印象。同时，每个商品的展示照片也针对与背景的配合进行了处理，整个页面流畅清晰，张弛有度。

综上所述，在网络店铺页面设计中必须运用版面设计基本原理和方法，使用适当的语义符号对网络店铺页面进行设计，可以更有效的树立和塑造网店形象、推动产品的销售。

（作者单位：咸阳师范学院 设计学院）

基金项目：陕西省大学生创新训练项目《本土文化符号在陕西礼品类网店装修设计中如何凸显地域特色应用研究》（项目号1733）；咸阳师范学院大学生创新训练项目《本土文化符号在陕西礼品类网店装修设计中如何凸显地域特色应用研究》（项目号201410722016）

3.html页面设计的论文 篇三

为了能够高效、快捷地实现对图书馆各种数据和信息的管理,本文结合高校图书馆的基本特点和要求,设计并实现了一套基于Web的图书馆信息管理系统。系统采用基于B/S架构的Web平台,所有教师可以在任何地方进行访问。鉴于JAVA语言“一次编译,处处运行”的优点,系统以JAVA作为开发平台,并使用SQL Server作为后台数据库系统。

2. 图书管理系统页面架构设计

首页包括系统主界面和登陆表单。普通教师不能登陆后台,只能查看图书信息,只有管理图书资源的相关负责人才可以登陆后台,登陆后可以对用户信息、图书信息、借阅和还书信息进行处理。

图书管理系统架构模式:横向自底向上由基础设施层、数据资源层、应用支撑服务平台层、服务与应用层、门户展现层(表现层)、访问层六个层次组成,纵向由信息安全与标准规范两个保障体系构成。

2.1 硬件平台层

硬件平台层处于整个技术体系结构的最底层,是项目管理平台的重要软硬件基础设施。主要由网络、主机服务器和数据存储系统组成。其中网络平台为建设项目管理系统各种应用提供可靠、有效的信息传输服务通道,是建设项目管理系统各类信息的最终承载者。主机服务器和数据存储系统是建设项目管理系统各类数据资源集中存储、处理的中心。

2.2 数据层

数据层构建于网络基础设施层之上,并为上层的支撑服务平台层提供各种数据资源。包括各建设项目全过程管理中涉及到的相关数据信息。

2.3 应用支撑层

应用支撑即系统管理平台层处于应用层和数据层之间,在整个架构中承担着承上启下的关键作用。主要由建设项目管理、机构与人员角色管理、日志管理、数据管理、参数管理等构成。建设项目管理为项目在各阶段当中各种应用提供建设项目的各类数据和相关定义,包括项目信息管理、项目流程定义、项目表单定义、项目权限管理;机构与人员角色管理提供内部用户管理、外部用户管理、系统角色管理和组织机构管理;日志管理对整个系统运行过程进行日志记录,包括系统的各种操作状态、系统出错信息等,有利于系统的管理、维护工作;数据管理主要提供系统中各栏目、模版、专题等数据管理;系统参数管理提供包括项目各阶段办理时限(严格与实际同步)设置、系统数据字典、绩效评估指标设定等。

2.4 应用层

应用层是在应用支撑服务平台层基础上构建的,面向全校教师的公共服务和面向图书管理的行政管理部门、相关领导的所有图书信息的全过程管理。包括新书申请、各阶段数据实时录入、文档下载、进度跟踪、图书管理的处理和流转、图书的归档和查询、图书信息的统计、信息发布、领导监督、调阅和效能督查管理等。

2.5 门户展现层

门户展现层是面向最终用户的统一入口,是各类用户获取所需服务与应用的主要入口和交互界面。

系统纵向由信息安全与标准规范两个技术保障体系构成。贯穿于建设图书管理系统技术体系框架各个层面的技术与管理。其中信息安全也是确保图书管理系统安全运行的重要基础设施之一。标准规范是确保系统互联互通互操作的技术支撑,是实现信息共享的关键,也是图书管理系统建设和发展的基础。信息安全必须依据国家电子政务相关的法规政策结合学校实际情况进行合理部署,整个系统的开发建设遵循国家电子政务相关的标准规范。

3. 结语

本文从Web技术、数据库技术出发,针对高校的实际情况,根据某高校图书管理管理系统的实际需求,设计了高校图书管理管理系统的架构模式。

摘要：以某高校图书馆的应用需求为设计依据,以为高校的图书管理信息系统提供便利的图书管理数据为目的,以数据库驱动网站的技术作为设计基础,构建基于Web的图书管理信息系统。

关键词：图书管理,Web,Java,SQL

参考文献

[1]李超.山东金融职业学院图书管理系统的设计与实现[D].山东大学,2012.

[2]Kenneth C.Laudon,Jane P.Laudon.Management Information Systems2[J].Computer,2001,(4)33-40.

4.html页面设计的论文 篇四

关键词：HTML5   Geolocation

一、应用前景

随着智能手机的发展，Android平台手机、iOS平台手机、WindowsPhone平台手机不断推出各种应用程序，浏览器的竞争也日趋白热化，基于Webkit内核的浏览器成了主要发展方向。

基于Webkit内核浏览器的最大特点，就是支持HTML5和CSS3标准，基于HTML5、CSS3和JavaScript的移动应用程序将是未来的发展趋势。

现在，很多浏览器中都实现了一种能实时获取当前地图的位置信息，再利用获取的地理位置衍生出相关的服务推送，以此来扩展软件的功能。

二、Geolocation

严格来说，Geolocation API不属于HTML5的标准规范，但是其API接口使它能让浏览器或者移动设备的浏览器获取用户的当前位置信息。由于地理定位涉及用户个人隐私信息，因此在人们在第一次使用Geolocation地理定位功能的页面，都需要用户确认是否允许Web应用程序获取自己的位置信息。目前，Geolocation API已经得到大部分浏览器的支持，甚至在移动设备领域的浏览器都能很好地支持该HTML5特性。

Geolocation API是通过window.navigator.geolocation获得对地理定位的访问，获得对象有三种方法：①get Current Position（         ）;②watch Position（         ）;③clear Watch  （            ）。

watch Position（          ）和clear Watch

（        ）是一对方法，watchPosition方法会返回一个唯一标识，clearWatch可通过这个唯一标识清除watchPosition方法的监听。

三、使用GoogleMaps追踪位置应用的实现

当人们在移动过程中使用浏览器，并能精确判断位置时，就能真实地感受到“追踪位置”这一概念。如由Google Maps判定的最后五个位置被标记于地图上，当用户离开屏幕显示的地图区域时，地图将以下一个点为中心展开。

我们在window.onload事件中完成Geolocation API的调用，其代码如下：

Var watchID=navigator.geolocation.watch Position（moveMe，posError，{enableHighAccuracy：true}）;

真正的工作在函数moveMe（   ）中进行：

function moveMe（position）{

latlng=new google.maps.LatLng（

position.coords.latitude，

position.coords.longtitude）;

bounds=map.getBounds（）;

map.setZoom（16）;

if（！bounds.contains（latlng））{

map.setCenter（latlng）;}

if（marker.length>=maxMarkers）{

m=marker.shift（）;

if（m）{m.setMap（）;}}

marker.push（new google.maps.Marker（{

position：latlng，map：map，

title：position.coords.accuracy+”m lat：”

+position.coords.latitude+” lon：“+

Position.coords.longtitude}））;}

变量latlng被创建为Google Maps的LatLng对象，当前坐标被传递至此对象。若当前位置不在显示区域，地图将重新围绕当前点展开。在脚本一开始，marker数组及变量maxMarkers都已经被定义为全局变量，并被赋值为5。若marker数组包含多于5个元素，第一个元素将通过shift函数从数组中被移除，并通过调用setMap（），在不需要提供更多参考标记的情况下从地图中删去。最后，数组中将添加一个标记当前位置的新marker对象。

5.控制打印页面的范围等 篇五

最近处理一批报表，常常需要打印分类项目和数据众多的大型Excel报表。打印时不管横竖都无法一页搞定，有的项目会掉到另外一张打印纸上，既不便于查看又浪费纸张。如何解决这个问题呢？

对于这种表单，在打印前可以先通过Excel 2007的“视图/分页预览”查看，在预览中显示的灰色区域就将打印在第二页上，此时可拖动蓝色的页码分割线，将全部项目整合到一页内即可。对于超宽的大表单，如果硬是挤到一个页码显然不便于阅读，此时可适当调整分割线位置，多分成几个页码。如果拖动不能把表格调到一页的宽度内，那就只有缩放调整比例了：在打印预览状态下，单击工具栏的“页面设置”，在“页面设置”窗口的“页面”选项卡下选中“缩放比例”单选项，并在后面输入缩放比例（如图）。

一键分享网页内容

浏览网页时，经常会看到一些精彩内容想发到微博上，不过这时需要再进入微博的页面，总有点麻烦，能不能省去这一步，直接发呢？

如果你使用的是Firefox，在搜索框旁边会找到新浪微博的图标，点击它就会打开一个新的页面，在这里直接载入需要转发到微博中的内容，还可以选择是否同时转发图片，单击“转发”，输入新浪微博的账号和密码，立即就可以转发成功。你还可以在下拉列表中选择其他的微博账号或者SNS社区网站（如图）。

观看TVB，双语配音自由选

最近我常常追香港无线电视TVB的电视剧，一般它都有粤语和国语两种语言，可我比较喜欢粤语的原汁原味，不过有的播放器却没有提供粤语版本，我要怎样才能找到自己喜欢的配音呢？

只要选择QQLive 2011 Beta4或更高版本，即可自主选择自己喜欢的配音：在欣赏TVB电视剧节目时，右击播放画面任意位置，从快捷菜单中选择“配音选择”，即可在粤语和国语两种语言之间进行快速切换。当然无论选择哪一种语言，画面上显示的仍然是国语，很方便吧？在切换配音语言之后，再次播放任一TVB剧，都会使用上次所设置的配音语言，需要指出的是，选择配音的功能暂时只能在观看TVB剧时使用。

不让QQ界面显示微博内容

新版的QQ都会有腾讯微博这个页面的选项卡，但我平时很少用腾讯微博，不想在QQ界面中看到它，该如何调整呢？

打开QQ的系统设置，在“基本设置/常规”中找到“页面管理器”，点击，在弹出的页面中切换到“其他”，取消“在主面板显示微博”前面的钩即可。

定时放节目

最近我在追一部新剧，一般都用PPStream看在线直播，但是没有到直播的时候我会看其他节目，可又怕看得太投入错过了直播，我该怎么办？

6.浅谈网页页面设计技巧 篇六

关键词：DIV+CSS,网页设计

随着互联网与WEB技术的发展, 利用DIV+CSS设计网站的设计方式正逐步成为制作网站的主力军之一, DIV+CSS技术作为制作网页的重要组成部分, 已经成为网页设计中必不可少的要素。本文将详细介绍如何使用DIV+CSS制作一个网页。

1 布局设计

网页中的布局是整个网页制作中最开始的步骤, 也是最为关键的一步。网页中的布局决定网页的整体效果, 合理的布局可以完美、清晰地组织网页中的文字、图形, 给人以紧凑、整洁、美观的感觉。

在本例中, 我们首先使用Photoshop设置网页页面的效果图, 接着再切图并使用DIV+CSS语言将其做成HTML形式。接下来我们详细说明使用DIV+CSS语言的布局方法。

(1) 网页页面的每个区域, 如页头区、主体区、法律和版权声明等, 我们都插入相应的DIV元素, 然后, 用CSS控制DIV使网页居中显示。在本例中, 我们将分为bn, main, cr三个DIV。

(2) 对于页面中所有的DIV元素, 利用CSS控制DIV的位置, 我们可以将页面中的DIV视为一个个块状元素。在此应用了“盒模型”的工作原理, “盒模型”是CSS的基础, “盒模型”理论认为:页面上的每个元素都被看做—个矩形, 这个矩形由内容、填充 (padding) 、边框 (border) 、和边距 (margin) 构成。对于每部分的间距, 以及文字、图片空隙的调整, 我们用“盒模型”的工作原理来调整。在网页默认的情况下, 元素由上到下依次叠放, 当这样的叠放顺序不能满足布局的需要时, 就要使用“float (浮动) ”属性来改变元素的叠放顺序。元素应用了“float (浮动) ”属性, 它周围的元素就会靠近、包围元素, 这样的影响在有的布局中是多余的, 这时, 可以用“clear (清除) ”属性来阻止这种浮动对后面元素的影响。再复杂的布局也是重复利用这样的技术, 大到网页每—部分的叠放, 小到文字、图片的排版。

(3) 在DIV中添加各种网页元素, 把文字、图片、动画安排到合适的位置, 再把每部分合理地叠放到网页中, 这样就完成了网页的布局。

2 主要设计部分

在VS.NET开发环境中, 新建index.htm, 并创建css文件, 命名为main.css, 将样式表写在一个独立的文件中。

在index.htm中写入用来声明将会把Internet Explorer 6及以后版本切换到标准兼容模式。

在

中加入

, 这表示index.htm可以链接到main.css文件中, 可以调用其中的内容。

在index.htm的

中插入如下代码:

对main.css文件的主要设计代码如下:

3 在main的DIV中的各个DIV中插入相应的内容

在导航的DIV中插入相应的内容

同时我们在main.css文件中加入如下代码:

在左边的DIV中插入相应的内容

省职业院校技能大赛

• 关于参加2012年度全国职业院校技能大赛
• 关于开展实训室检查通知
• 实训中心2011-2012下学期课表
• 关于做好2011-2012学年度第一学期实验...
• 关于做好2011-2012学年度第二学期实验...
• 关于做好2011-2012学年度第一学期实验...
• 关于开展实训室期末检查通知
• 关于开展实训室期中检查通知

在mian.css文件中加入如下代码:

在右边的DIV中加入代码:

在右边的main.css中加入代码:

图文混搭之后的效果图如下所示

在这里, 只给出“最新公告”和“实训实验室”这两块内容。还可以在左边的DIV中加入“管理制度”“实训基地”“技能鉴定”三个DIV, 在右边的DIV中加入“资料下载”“实训与实习”“高新技术考试”三个DIV。

4 上传测试

本文中的网页已通过测试运行并发布到WEB服务器上测试。上传后运行正常;并在不同分辨率下都能够正常显示。

5 结束语

本文运用了DIV+CSS技术设计的网页使用方便, 兼容性好。但是DIV+CSS布局的网页由于需要兼容各种浏览器, 也有其不足的地方, 主要表现在开发技术高, 开发时间长, 开发成本高。

参考文献

[1] (美) Kynn Bartle.CSS入门经典[M].北京:人民邮电出版社, 2007.

[2] (加) Zoe Mickley Gillenwate.灵活Web设计[专著][M].北京:机械工业出版社, 2009.

[3]郑宁宁.浅析DIV+CSS网页设计技术[J].山东省农业管理干部学院学报, 2008.

7.html页面设计的论文 篇七

管理信息系统的架构有如下几类:传统的基于Fat Client的C/S (Client/Server) 软件体系架构;基于Web的B/S (Browser/Server) 或B/S/S (Browser/Application Server/DataBase Server) 的软件体系架构。在Internet广泛应用的大背景下, 传统的C/S架构向B/S架构转化时, 程序页面元素输出的控制发生变化, 使得开发者们需要更换理念来适应这种变化。

本文以刑侦自动化信息系统为例, 介绍基于XML、XSLT技术的解决方案, 消除了前两种结构的不利因素, 直接将内容与表现分离, 在Web环境下直接打印输出, 高效、快捷、易用。

1 具体实现

在刑侦自动化信息系统中, 信息的基本存储格式是ASCII码和机内码, 需要形成纸介归档。系统的信息类型繁琐, 需要采用不同的方式分别对信息内容本身和内容的显示方式进行独立描述。

将信息元素分成恒定静态元素和可变动态元素, 设计表现模板。表现模板又由若干要素构成, 它定义了元素的基本结构。数据由静态元素和动态元素两部分构成。由于静态、动态元素的独立存储, 在进行页面输出设计时, 打印输出只需解决形式的问题即可。

XML主要通过样式表解决了数据的文本样式规范, 文本的具体内容表现由样式表定义基于和XSL-FO技术, 将初步形成的XML数据文档进行转换, 形成最终的ADOBE Reader支持的PDF格式, 这样很容易实现文本打印元素的精确定位输出。完整的输出过程如图1所示。

包含的主要内容有:①XML文档的形成及表示;②数据输出样式XSLT和XSL-FO的定义;③PDF格式文档的页面数据输出。

1.1 数据文本的XML表示

XML (Extensible Markup Language) 即可扩展标记语言, 它与HTML一样, 都是SGML (Standard Generalized Markup Language, 标准通用标记语言) 。XML是Internet环境中跨平台的, 依赖于内容的技术, 是当前处理结构化文档信息的有力工具。XML与HTML的设计区别是:XML是用来存储数据的, 重在数据本身。而HTML是用来定义数据的, 重在数据的显示模式。

由于XML具有的文档内容与结构分离的特征, 因此系统在设计数据文本时, 首先要考虑数据与结构的分离。根据数据文本生成对应的XML文档。数据模板作为描述某种类型数据基本结构的工具, 数据的文本信息和结构信息组合在一起, 通过XML文档进行表示, 从而进一步生成对应的XML树, 来表示数据文本内容。因此, 我们首先第一步是需要通过对数据文本的研究, 汇聚组成元素信息, 之后将它添加到所形成的XML文档中。调用XML Out putter类生成XML文档, 通过这些模板的应用, 可以与不同类型的样式文件进行结合。

下面是根据数据文本生成对应XML文档的部分代码片断:

1.2 数据样式的页面定义

利用XSL-FO的词汇表, 将以上生成的数据文本XML树进行转换, 生成为另一种XML树。利用FO所能体现的格式化文档信息, 进行数据文本的页面格式定义, 主要包含:页面布局风格、字体样式风格、颜色搭配等其它设计特性。首先建立XSL的文件, 主要作用是将起初数据文本XML文档, 对应转换成包含XSL-FO标签的对应文档。

以上的相关代码, 定义常用的A4幅面文档。它的页面尺寸为210mm×297mm, 同时设定相应的页边距, 页眉和页脚被定义为静态对象形式。

数据文本内容将在下面定义。

别名“xsl:”加在遵从XSLT推荐标准词汇表的元素之前, 这些元素定义来自原始XML的转换规则;

别名“fo:”定义将被聚集为原始XML的元素, 用以定义页面布局 (XSL-FO推荐标准) 。

以上代码, 我们利用了XSL-FO, 定义形成了一组原始的转换规则, 能够将原始的数据文本XML文档, 利用XSL-FO页面定义词汇表转换为另一种便于输出的XML文档。

1.3 页面数据的输出

利用XSL-FO形成的XML文档的目的就是为了创建数据文本的可打印文档, 实现了在Web方式下的内容准确打印输出。FOP格式化对象处理器 (Formatting Object Processor) 能够自动完成格式文档输出。

FOP作为Apache Open Source项目当中的一个部分, 是由James Tauber开发小组发起的开源项目。FOP支持的文档有AWT、PDF、TXT等多种格式, 并且对使用SVG描述图形能够提供良好的支持。在刑侦信息系统中, 我们通过生成数据文本的PDF文件来实现数据的打印输出。

(1) 设置原始数据文本的XML文件和遵照XSL-FO推荐标准的样式文件, 如下所示:

(2) 命名FOP的输出文件名, 规定FOP的输出格式。输出格式可有几种不同类型RENDER PDF、RENDER TXT、RENDER MIF、RENDER PCL、RENDER PS。总之根据不同的输出要求给出不同的输出格式。

(3) 接收原始的数据文本XML, 将其通过XSL-FO转换到另一个XML, 同时将任务授权给FOP, FOP处理器能够自动将XML文档轮换成要求的输出类型 (如数据文本的PDF文件) 。在实际使用中可能遇到早期的FOP版本有不支持中文显示的现象, 这种情况需要加入相应的中文字体支持, 在转换时FOP才能正常工作。

以上的步骤, 以数据文本的XML文档为原始信息, 通过XSL-FO词汇表转换生成另一个XML, 之后在XSL-FO处理器的作用下, 生成多种数据文本的格式输出, 这样就实现了在Web方式下, 数据文本能够精确的输出。

前述XML文档的转换过程是一种较为通用的过程, 在刑侦信息系统中, 实现了数据文本的精确打印输出。

2 结束语

通过本文的分析与设计, 利用XSLT和XSL-FO技术, 能够实现基于网络的Web方式下多模板、样式、规格的文档页面打印输出, 并通过ADOBE Reader所支持的PDF格式为创建Web的可输出文档提供了可实现的途径。本方案在作者所参加的多项数据管理系统的开发工作中得到实际应用, 取得了预期的效果。本文的缺陷是在打印要求较高的场合, 仅利用该方法还是不能满足需要的。如能通过页面缓存技术, 进行更精确分页, 将获得更好的打印输出效果。

参考文献

[1]Don Gosse lin.全面理解JavaScript[M].北京:清华大学出版社, 2008.

[2]林琪, 英宇.J2EEWeb应用高级编程[M], 北京:清华大学出版社, 2010.

8.电子白板页面功能的制作及运用 篇八

聚光灯：突出局部，重点显示

功能介绍 聚光灯就像手电筒，光束聚集在一个点上，对需要突出的内容做重点显示，屏幕的其他部分为暗光，可以激发幼儿的活动兴趣。聚光灯有圆形和正方形两种，分为空心和实心两类，光圈大小可以通过拖动边缘进行调节，聚光灯的边沿宽度、边沿颜色、背景色以及明暗可根据自己的需要到“工具箱——编辑用户定义的按钮——设置——效果”里进行调整。

制作方法 聚光灯使用起来方便快捷，制作方法有两种：“菜单栏——工具——聚光灯”，使用这种方法聚光灯不能保存在课件里，只能上课前设置，而且课件的每一页都会加上聚光灯，因为普米软件页面工具里默认的是“跟以前一样”，所以聚光灯用好后，要及时关闭;如果只想让一个页面有聚光灯并且可以保存，那么采用第二种方法“浏览器——页面浏览器——选中需要聚光灯的页面——属性浏览器——工具——页面工具——聚光灯工具”，这样，课件的每一页也都加上了聚光灯，不用担心，只要在不需要的页面上用同样方法选择工具关闭就可以了。

教学运用 聚光灯就是通过出示局部将幼儿的注意力集中在教师设定的内容上，一般用在课件的第一页。比如，在大班数学绘本《大熊的储藏室》里，活动的一开始是认识绘本主人公大熊，设计的问题是：“看看它是谁？猜猜它在干什么？”可以用聚光灯出示大熊部分，待幼儿猜出后，慢慢放大揭示答案。

显露器：拉开幕布，精彩呈现

功能介绍 显露器会在页面上出现一个全屏黑幕，就像有一块幕布遮挡，将鼠标移至幕布的任意一个边，点击左键拖动，即可拉开幕布显露白板中的内容;不需要的话，则点击右上角一个类似文件的图标，关闭显露器。此功能主要用于逐次显示预设的教学内容，可以对屏幕上的内容进行暂时遮蔽，方便教学课件的演示。显露器的颜色、动画速度可根据自己的需要到“工具箱——编辑用户定义的按钮——设置——效果”里进行调整。

制作方法 制作方法有两种：跟制作聚光灯是相同的，只要在选择聚光灯的地方换成显露器就可以，在这里就不一一赘述了;显露器和聚光灯一样，用第一种方法不能保存在课件里，用第二种方法可以保存。

教学运用 默认的显露器是黑色的，不美观，如果觉得设置麻烦，也可以用工具箱里的形状工具自己画个色块代替幕布功能。比如，在中班数学《小动物搬家》里，一幢房子有三层，需要幼儿知道每一层住了哪些小动物，直接全部出示，幼儿容易把层看错位，笔者想到使用显露器，一层层从下往上拉幕，帮助幼儿明确哪些小动物是住在第一层，幼儿对层也有了明确的概念，避免了幼儿视觉的错位和注意力的分散。

神奇墨水：页面透视功能

功能介绍 神奇墨水能擦除上层的图片或者文字，这样往往用于显示不透明图层下面的对象，可以做出神奇的页面透视与放大效果。

制作方法 神奇墨水虽然制作起来比较繁琐，但是效果是普米软件中最神奇的。首先，在工具箱里找到形状工具组合成想要的边框，然后，用神奇墨水把边框里涂满，最后，将神奇墨水和边框进行组合，神奇墨水与要透过的素材一定要放在对象浏览器的顶层，要显示的素材放在对象浏览器的中间层。

教学运用 神奇墨水在课件中可以做成透视镜与放大镜。比如，在中班数学《小兔子开农场》里，教师把小兔子藏在树、房子、山坡的后面，只露出兔子的一部分，请幼儿观察图上有多少只兔子。幼儿说出的答案不一致，然后师幼一起数，这时用“透视镜”拖到哪里，藏在后面的兔子就出现，移走又藏起来，教师还可以提升问题哪只兔子数过了？怎么数不漏数？孩子们都忍不住发出“哇”“魔镜”“真神奇”的感叹。有些时候要放大页面的某一部分。比如。在小班健康《香香的带鱼》里，找到鱼刺在哪里？上图层放一个小的带鱼图，下图层放一个大的有鱼刺的带鱼图，将“放大镜”移过去，你会发现看到了下图，让人感觉，图中的某个对象被放大了一样。

结束语

电子白板里还有很多功能，比如，隐藏、书写、拖动副本、拍照、屏幕录制等，需要教师不断探索、巧妙运用，电子白板的各个功能也可以进行组合，会有意想不到的效果。

9.网购网站中宝贝描述页面设计分析 篇九

网上商城的商户可以通过网络开店节约店面、柜台、人力等成本, 但也面临着新的困难, 比如网络销售覆盖面窄, 不像实体店铺可以用高档华丽的环境衬托商品, 无法让消费者更加具体真实地观看和了解商品等。

宝贝描述页面可谓是消费者了解商品各个方面信息的主要平台, 所以该页面设计的成败直接影响着消费者对商品的档次、属性及品质的认可度, 对销售起着至关重要的作用。如果想要把宝贝描述页面设计好, 需要从以下几个方面入手[1]。

一、提供消费者关注的信息

购物是从需求开始的, 消费者首先有购物需求和需求标准, 然后再到网上寻找符合自己预想标准的商品。所以首先要了解消费者都会关注商品的哪些信息。经统计, 想要了解商品的详细功能和用途的消费者占67%, 想要判断是否适合自己的消费者占61%, 想要了解商品的规格型号等信息的消费者占58%, 想要看商品各个角度清晰照片的消费者占31%。根据这些调查数据可知, 在宝贝描述页面中, 这四方面信息必须提供。

依据上述统计数据, 可以对宝贝描述页面的主体内容做如下规划:

1. 将消费者都定位为非专业人士进行产品介绍。这样做的优势是可以使消费者了解产品最基本的信息, 满足大多数消费群体的需要。

2. 突出产品的价值点, 即卖点。

现在多数商铺生怕遗漏消费者想要了解的信息, 经常把各种信息全部堆砌在页面上, 导致重点不突出, 卖点被淹没在大量的信息之中。所以首先要将产品的卖点突出, 才能吸引消费者继续关注产品的其他信息。

3. 着重用页面前三屏的内容吸引顾客。

由于商品信息量较大, 消费者在每个页面停留的时间一般在10秒之内, 宝贝描述页面的前三屏是否有足够的吸引力留住消费者的视线极为重要。

4. 与其他产品对比, 突出本产品的优势。通过优势对比, 可以坚定消费者购买本产品的决心, 使其放弃购买其他同类产品。

5. 添加产品清晰的、多角度的实物照片。弥补网购无法看到实物的缺陷, 通过展示清晰的细节, 让消费者全面了解产品。

二、避免混乱的色彩搭配

色彩是营造情感氛围的最重要元素, 色彩搭配是否合理, 决定了其是否能给消费者良好的第一印象, 从而使其乐于进一步了解商品细节。很多店铺的卖家为了使自己的宝贝描述页面看上去不那么单调, 往往喜欢使用多种颜色来进行搭配, 例如图1中某页面的设计, 文字红色、蓝色、紫色和黑色随意使用, 而且都是纯度很高的色彩, 导致页面看起来十分混乱, 条理和主次不清。消费者看到如此杂乱的页面, 一般都没有耐心仔细阅读, 从而忽略其重要的信息, 甚至会直接关掉页面去寻找其他店铺的同类商品[2]。

因此, 色彩的搭配至关重要, 在宝贝描述页面中, 可以使用两种方法对色彩进行运用。

1. 使用单色或者同类色搭配。

如图2的某电钻宝贝描述页面, 从底色到文字及图片, 全部都是蓝色系。单色或同类色搭配的设计色调统一大方, 页面宁静而富有层次感, 可以使消费者专注于产品的信息, 并会继续向下阅读。

2. 使用多色搭配。

多色搭配是较有难度的搭配方法, 使颜色多而不乱是其难点。如图3为某护肤品的宝贝描述页面, 为了体现产品的纯天然属性, 页面中采用了许多花卉等植物的图片进行烘托, 有红、黄、橙、绿等颜色, 如果搭配不当, 就会出现与图1类似的混乱效果。如果想让页面色彩多而又协调统一, 可以采用两种方法:一种是降低色彩饱和度, 减弱不同色彩的对比冲突;一种是缩小大部分色调的面积, 以某一种色调的面积为主体。图3中的设计就采用了第二种方法, 使绿色调在页面中占主体, 其他的色彩所占比例都很小, 页面虽色彩多, 但依旧风格统一, 活泼美观[3]。

三、简化页面信息

许多卖家为了能够让买家阅读到自己店铺更多的信息, 往往在单个宝贝描述页面中堆砌大量广告信息和类似的冗余信息。如图4为某食品的宝贝描述页面, 当消费者点开该宝贝描述页, 准备详细了解一下该产品信息时, 看到的却是店铺里其他商品的广告, 并占据了大面积的空间。当消费者把这些广告阅读完毕之后, 对自己原本想要了解的那种商品的印象已经模糊了。这样的广告链接通常会造成两种后果, 一是消费者又被其他商品信息吸引, 点入了其他商品的页面, 最后打开了一大批原本自己不想购买的东西而页面, 很长时间后, 才会想起“原来我想买的不是这些”;二是花了很长时间看完了这些广告内容, 很艰难地才找到自己想要了解的产品信息, 内心已经积攒了许多不满, 势必影响对该商品的购买决心。

由此可见, 宝贝描述页面的内容不是越多越好, 而是越重点突出、越精炼越好。把无关的其他商品广告删除, 把本商品不那么重要的信息, 如产品的历史背景, 曾经得到过多少好评等等信息删除, 就可以让消费者更快地找到自己想要了解的信息, 更快地决定是否购买。那么, 如果商品本身的信息量就很大, 又该如何对页面进行设计排布呢?

1. 先使用产品意境图。

如图5.1为某手链的宝贝描述页面的第一画面, 为烘托手链的禅意, 设计者采用圆形花纹和竖排文字营造出典雅古朴的意境, 又采用仿古书卷的亮暖灰色调, 衬托出手链的怀旧感, 营造出宁静的意境[4]。

2. 展示产品使用状态。

销售服装, 就一定要把服装穿在模特身上展示;销售床上用品, 也一定要把它在床上铺开以完整展示其效果, 如果只是展示产品照片, 则很难达到打动消费者的目的。如图5.2, 商家将手链戴在手模的手上进行展示, 手模的手富于美感的姿态, 细长的指形, 衬托出手链雅致的风格, 再配以详细的文字描述与注释, 无疑更加能够打动消费者。

3. 简化产品信息。产品的信息一般包含参数、型号、产地、材质、用途等, 但有些信息是消费者迫切想要了解的, 有些是在买到商品之后, 使用中才可能会用到的, 还有些是很多消费者毫不关心的。所以应该把消费者最关心的信息放置在页面中, 其他信息可以通过产品参数页面详尽告知。如图5.3, 产品信息内容简洁明了, 使用短小精悍的语言对产品进行了准确的描述, 起到了很好的信息传达作用。

四、图片的美化处理

网络购物的最大缺陷是消费者无法看到商品实物, 只能通过照片和文字描述对产品进行了解。这样的形式对商家来说有利有弊, 利处是可以对图片进行美化处理, 使图片上的产品比实物显得更加美观, 更吸引消费者;缺点是照片没有实物直观, 如果照片没有经过专业的拍摄和处理, 往往会使消费者感到失望。如图6展示了某食品的宝贝描述页面中的产品图片, 通过这张照片, 消费者只能看到歪歪扭扭的标签, 俗气的瓶贴设计, 鼓鼓囊囊的塑料封, 还有暗黑色的食物。作为食品, 这样的照片显然无法令消费者产生食欲, 除了之前曾经购买过的老顾客, 其他的消费者则可能会放弃购买。

产品的照片要真实, 但是也需要进行美化。只有将产品的优点更加鲜明地展示给消费者, 才能使产品更富有感染力。可以用以下几种方法对产品图片进行美化:

1. 修正照片的透视变形。

拍摄产品照片时, 镜头过近或过远都会造成照片中的产品产生些许的透视变形, 后期处理的时候要将这样的透视变形进行修正, 否则照片会失真。

2. 去掉杂乱背景。如果照片不是在白色背景或纯色背景下拍摄的, 就要去掉原有的杂乱背景 (拍摄时专门搭配的背景除外) 。

3. 图片尺寸不宜过大或过小。

如图6, 要以一屏可以容纳一张至四张产品图片为宜。如果图片过大, 一屏不能看到一张完整的产品图片, 则会妨碍消费者对产品进行整体观察;如果图片过小, 消费者则无法看到产品细节。

4. 对产品质感进行表现。

如图7, 玻璃器皿展示时要突出玻璃的晶莹剔透, 金属产品展示时要表现出金属的光泽感, 纺织品展示时要表现出其柔软感和温暖感。

5. 对图片进行色调处理。

当把产品图片放置在合成背景中时, 如图6和7图, 要将图片的色调进行调整处理, 从而与背景效果更好地融合在一起, 使产品既能与背景浑然一体, 又能从中突出, 得到足够的关注度。

五、用设计烘托产品风格

设计是为产品服务的, 风格设计是宝贝描述页面设计中最难的一项。风格设计不仅要贴切真实地表现出商品的品质、档次和价值, 还要将视觉美感、图形创意以及视觉冲击力进行完美融合, 才能够使页面吸引力达到甚至超出消费者的心理期待, 才能在最大程度上完成对产品的推介。

目前, 在网上有许多宝贝描述的模板, 这些模板大都千篇一律, 缺乏特色和风格。如图8, 某服装的宝贝描述页面设计, 便是套用了模板, 这样的模板也有设计元素的体现, 比如中英文文字的搭配, 线框的装饰以及色块的铺垫等, 但是和该产品的风格对比起来, 没有表现出产品的任何特色, 反而拉低了产品的档次[5]。

用设计来烘托产品风格, 需要从以下几个方面着手:

1. 使用彰显产品档次的背景。

产品的档次和品质感影响着消费者对该商品的认可度。设计风格要符合或略高于产品档次, 可以利用背景来彰显产品的档次感。如图9某皮包的宝贝描述页面, 为了体现产品的设计源于法国, 采用了巴黎卢浮宫作为商品背景, 增加了商品的时尚感和艺术气息。

2. 选用合适的模特展示产品使用状态。

模特的选择也非常重要, 模特的年龄、气质要与产品品位相吻合。如图9中, 选用的是欧美模特, 模特的服装时尚新潮, 与皮包的风格相一致。图10中的跑鞋模特, 选用阳光而富有朝气的青年男子, 体现出了跑鞋的青春活力感。

3. 用意向图衬托产品的特色。

意向图的设计较为有难度, 需要设计师用创意抽象地表现产品特色。如图10, 为了体现跑鞋的舒服环保, 适于户外活动, 设计师采用树枝拼成“四月踏青季”的造型, 使跑鞋的特色更加突出。

4. 版面分割主次分明, 层次清晰。

宝贝描述页面通常会有一张以上的图片, 这些图片的排布方式也影响着版面的效果。通常可以采用图片大中小搭配的原则, 即页面中大图、中图和小图并存, 但在数量上, 大图较少, 中图居中, 小图最多, 以此使页面效果产生主次对比, 使层次更加清晰。

六、结语

综上所述, 如果想要将产品的宝贝描述页面设计得更加出色, 使其从同类产品中脱颖而出, 就需要店主和设计师在平凡中创造特色, 在同中找差异, 只有设计更加富有魅力和吸引力, 才能克服网络销售消费者无法看到实物的弱势, 将弱势转化为优势, 达到促进销售、留住消费者的目的。

参考文献

[1]余露露.网上商城的网站风格设计[J].包装工程, 2013, (14) :17-21.

[2]武彦如.网店“宝贝描述”页面设计改进策略[J].包装工程, 2012, (14) :36-39.

[3]赵广庆.网上消费存在的问题和对策[J].合作经济与科技, 2012, (16) :89-90.

[4]刘锦绣.电子商务的实现网上购物系统的分析与研究[J].中国电子商务, 2012, (11) :3.

10.HTML5：正在发生的未来 篇十

乔布斯留给世界的最后一个预言，可能就是关于HTML5的那个新标准。

在“Thoughts on Flash”的文章结尾，乔布斯预言：“HTML5 等新的标准会在移动设备以及个人电脑上赢得胜利。Adobe 未来更应该聚焦于打造优秀的 HTML5 工具……”乔布斯携数以亿计的苹果设备坚定地站在了HTML5阵营里。

2011年10月5日，乔布斯去世。一个月之后，Adobe公司宣布停止移动终端的Flash开发，将注意力转向HTML5。

是的，他又一次对了。

“宽容者”赢得胜利

HTML5不是今天才有的发明。为了更为系统和有趣地描述出一个真实完整的HTML5，我们先从它的诞生说起。（数字“5”说明在它前面还有几个哥哥，但我们不会从HTML那个混乱不堪的1.0时代开始讲故事，因为那会是一个更漫长的旅程，远远超出我们的篇幅）

1997年，W3C（万维网联盟）发布了HTML4.0版本。令人惊讶的是，随后联盟解散了HTML工作组——W3C宣布停止在HTML基础上的版本迭代演进，转向开发更为严谨的XHTML标准。

从技术架构角度看，W3C做出这个决定的初衷是正确的。传统的HTML标准遵循更为“宽容”的代码检验解析方式，即使你的HTML网页里有几处错误，浏览器依然会通过自动纠错的方式保证页面可以正确显示。因此，错误也就永远无人改正。“今天的互联网上，可能超过99%的HTML页面至少有一个错误，”Google高级研究员Mark Pilgrim曾做出过这样的估计。

而XHTML是严格的。W3C希望通过一个严谨的标准让互联网的未来发展更为规范，网站的代码架构更加清晰化。但问题就出在这里：

前面我们提到，99%的HTML网页可能都存在错误，如果要用严格的XHTML标准去解析，用户只能看到一个个错误界面。因此，就算开发者愿意用更认真的方式去写今后的互联网代码，但已经存在的海量网页谁来重写？

于是，XHTML的推广一直没能得到很好的响应。时间到了2004年，W3C内部开始出现一些讨论，能否以另外一种方式解决当前的问题。Opera软件组和Mozilla基金会提出了一项基于HTML 4的演进计划，希望在传统HTML的框架下更为“宽容”地推进向下一代HTML。（在草案中特别提到了“向后兼容性”。）

随后的投票中，这一提议以8票： 13票没能在W3C内部获得通过。

Opera和其他共同提案者做出了一个新的决定：在保留W3C成员身份的前提下，成立WHATWG这一民间组织，与W3C并行研究下一代HTML。当然，他们走在不同的道路上。

回忆起这次“分家”，W3C HTML5中文组主席，Opera欧朋首席标准官谢子斌表示，虽然今天有人把它看做一次纠纷，但实际上，当年的一切操作都是“坦诚而透明的”，整个议程和投票在网上都有记载。

W3C决定将对代码规范要求更严格的XHTML标准向前推进，而WHATWG的目标是基于更为“宽容”的HTML4开发下一个版本。随后几年里，WHATWG试图让浏览器对网页代码各种错误自动纠错并形成文档——这意味着大量的工作。在并行前进的这段时间里，双方的“竞争”关键点就是时间——看谁能率先提供能用并且好用的东西来。

2006年，WHATWG在HTML上首先取得了突破性进展，而此时W3C的XHTML2.0依然是一个未实现的理论状态。更为重要的是，整个互联网和众多开发者要求被宽容对待——具备 “向后兼容性”的下一代HTML成为了众望所归的选择。

随后不久，W3C创始人Tim Berners-Lee宣布，将与WHATWG小组联合开发下一代HTML，同时W3C依然不想完全放弃XHTML——你可以从Tim Berners-Lee的发言中明显感受到这种情绪：

“有些东西，多年后再看，会更清楚。企图让整个互联网一下子切换到XML并不现实。有些大型社区转换过去了，并得到了结构良好系统带来的好处，但大多数HTML开发者不为所动……因此，渐进式维护HTML是重要的，但同样，不断地过渡到良好结构的世界（即更严格的XHTML）也同样重要……”

也许是因为互联网的本质是自由的，也许是因为海量的“史前”网页由不严格的代码书写……总之，到了2009年10月，W3C宣布解散XTHML 2小组。

之后的故事大家都知道——HTML5火了。

在XHTML与HTML5的竞争中，浏览器厂商的站在哪一边呢？Opera欧朋的专家回顾当时的情况：“如果使用XHTML，会有海量的网页需要重写，否则将无法在浏览器中显示。”作为浏览器厂商，在没有看到开发者愿意去修改错误网页之前，肯定不会贸然使用更严格的XHTML标准。

HTML5工作组与兴趣小组

W3C与WHATWG合作开发下一代HTML，并很快将其命名为HTML5。但两个组织并非合并，依然是保持着相对独立性。两个组织中很多成员实际上是重合的，并且，W3C HTML5总编辑Ian Hickson（今年年初辞职）也同时担任了WHATWG总编辑，双方的合作保证了HTML5标准的快速发展与推广。

在W3C HTML5工作组中，成员来自浏览器厂商，运营商，硬件厂商，高校研究院等领域。其中，浏览器厂商会有稍微比较特殊的身份，因为他们是站在最前线的实践者。同时，随着HTML5与底层硬件的互动越来越多，硬件厂商的参与度也越来越高。

在HTML5工作组中，成员可以对标准提出各种建议、需求和修改意见。工作组的运转模式有些像联合国，它有一个“常任理事国”，即HTML5工作组的总编辑。对于成员提出的标准和建议，如果在群体讨论中无法达成一致意见，则提交给总编辑做最终判定。总编辑不是无限任期制，成员有权利选举新的总编辑人选。上一任总编辑Ian Hickson辞职后，这个职位目前由几个人同时担任（每位编辑负责不同的领域）。

nlc202309012226

目前在HTML5工作组之外，还有三个地域性兴趣小组：中文组，日文组和韩文组。作为中文小组的主席，谢子斌很满意当前小组的工作进展。“目前HTML5中文组成员有700多位，分别来自不同的企业和组织。小组主要工作包括翻译HTML5相关规范文档，向全球工作组提交中文互联网的独有需求，以及提交其他全球性的需求。”

中文组内部会经常开会讨论，同时，中日韩三个兴趣组也常常互动。明年W3C大会将在日本举行，“到时候中日韩之间会有更多的交流。”

标准组织的成员大部分还有另外一个身份，相关厂商和机构的工作者，这让事情看上去有些奇怪。因为互联网是开放的，各项标准的起草和发布，最终将被所有人共享。商业利益如何与互联网精神平衡？在谢子斌看来，这是互联网的魅力所在，“如果Tim Berners-Lee当年没有贡献出第一个HTML标准，也就不会有如此多的人用到它，他也不会成为互联网之父。如果当年Hakon Wium Lie没有把CSS标准贡献出来，CSS就不会普及，他也不会成为CSS之父……”这个道理也同样适用与HTML5标准——Ian Hickson对于HTML5做出了重大的贡献，这位先后任职于Opera和Google的工程师，最终让HTML5走向了辉煌，并带动Opera和Google成为这一领域的领导者。

这是一个集合，但它会有边界

HTML5更像是一个很多特性的集合，它未来会不会被无限的扩展？

对于HTML5工作组来说，这确实是一个令人头痛的问题。随着HTML5得到越来越多的认可和应用，新的需求、功能和特性像雪片一样飞来。如果任由这样下去，HTML5永远不会有完成的一天。于是，经过讨论，工作组给HTML5的特性集合划定了一个明确的边界。

“边界以内的东西是要在HTML5这个版本中实现的。而在范围之外的特性和未来可能提出的新特性，将被放到HTML.Next版本里。只要圈定的内容全部实现，HTML5就会是一个成熟版本。”谢子斌告诉我们，最终的HTML5预计将在2014年底正式成为标准。

实际上，目前的HTML5已经具备了较高的可用性。在互联网和移动互联网上，HTML5为用户提供了视频，游戏，应用，以及更加丰富的网页效果呈现……对于熟悉HTML的开发者来说，过渡到HTML5并不是一个困难的过程。至于标准中尚待完善的内容，主要集中在更前沿和更深度的部分，例如3D渲染等。“到2014年底，如果HTML5完全成熟，会发挥更大的力量。” 谢子斌对未来充满信心。

尚未结束的战争

HTML5有两个主要的对手，原生APP和Flash。

HTML5与原生APP的争论，是一场真正的持久战。最早HTML5是为网页开发准备的，但在移动终端上，各种原生APP的迅速普及让浏览器变得地位尴尬。这是在PC互联网上从未有过的事情。于是，人们尝试用基于HTML5等新的技术标准来开发Web APP以替代原生APP。

可是原生APP太强大了。与之相比，HTML5的应用在性能和功能上都存在差距。我们听到了很多的抱怨，来自开发者，来自用户，最近的一次来自扎克伯格。但实际上，每一次人们抱怨的重点都在变化。最初我们抱怨HTML5页面渲染表现不如原生APP，随后这个问题得到了解决；新的抱怨又出现，可能是针对游戏方面的支持，或是其他领域。在谢子斌看来，“这其实代表了HTML5正在逐渐进步。三年前，人们谈HTML5，更多是对于网页的需求。今天，人们则希望HTML5可以取代原生APP。期望越来越高，进步的动力也就越来越大。”

受技术标准本身的发展阶段所限，以及网络带宽的影响，HTML5应用与原生APP比较，目前确实处于追赶的位置。但3G门户副总裁高峰眼中，HTML5自身的独特优势更值得肯定。

首先HTML5不需要安装。原生APP会占据大量的手机硬件资源，因为它必须被下载到本地才可以使用。而HTML5的应用是基于网页的，不占用本地空间，随时访问随时使用。

其次，和传统网页相比，HTML5提供更丰富的实现效果。在上网这一通用性需求上，HTML5比传统的网页表现得更好。

第三，HTML5是跨平台的。目前智能手机操作系统很多，原生APP是要与单一系统适配的，需要为不同系统分别开发APP，从制作到维护都是复杂工作。而HTML5的Web属性意味着它可以跨越不同系统平台，只要把网页做好，iOS、Android、Window Phone、Blackberry等手机都可以访问。这会帮助企业降低成本。

此外，HTML5可以实时推出新特性，用户每次访问网页都即刻获得最新的内容。而原生APP哪怕更新一个微小的部分，都需要用户手动下载和升级版本。

产业链对HTML5的态度同样重要。一项技术仅有价值并不够，还需要产业链各方同推动，才能发展起来。“HTML5在自身技术不断发展的同时，主流浏览器对HTML5的支持也在不断加大。内置支持或部分支持HTML5浏览器的终端数量迅速增加，各互联网服务商也竞相推出支持HTML5的平台和工具……”百度技术委员会理事长陈尚义，给出了他看好HTML5未来的另一个理由。

HTML5打开了原生APP各自封闭的局面，基于浏览器的跨平台属性让数据、用户和流量可以自由流通和共享。在可以预计的未来，原生APP与HTML5可能会长期共存——在有些领域里，用HTML5实现更好，在另一些领域里，原生APP更适合。“原生APP在对性能要求高的应用，例如大型游戏，可以提供更好的支持；而如果要做一个互动性很强的应用，HTML5可以提供跨平台和快速更新等支持。” 谢子斌希望越来越多的开发者可以投入其中，“HTML5依然有广阔的未知领域和实践经验需要去探索和积累，开发者的参与度尤为重要。”

HTML5与Flash之间的故事就快看到结局了。在移动端，随着Adobe宣布停止Flash移动版本开发而转向HTML5，HTML5取得了压倒性优势。这里还应该对乔布斯说一声谢谢，海量的苹果设备在这场战争中发挥了重要影响。在PC端，目前Flash与HTML5的竞争还在进行，但趋势和走向渐渐清晰。目前，由于像IE6这样的老版本浏览器并不支持HTML5，但它们的装机量依然很大——这导致了视频网站在支持HTML5同时，继续保持对Flash的支持是非常必要的。Flash在PC端不会如移动端那样轻易认输，作为一项有16年发展史的成熟技术，Flash在很多地方依然具备HTML5力所不及的优势。同时，HTML5成熟标准的发布还需要时间，在这段时间里，在HTML5正式发布后的共同竞争中，Flash还有足够的时间去提升竞争力。

nlc202309012226

未来可以期待吗

每一个看好HTML5的人，其实是更看好它的未来。

越来越多的开发者学习和掌握HTML5，投入其中。很多关于HTML5的技术网站和论坛建立起来，人们分享各自的开发经验，好玩的实现应用，提出疑惑，寻找解答。如果你愿意抽出时间，到这些网站去转一转，就会发现，真正推动HTML5不断前行的力量，就隐藏在其中。

同样，相关的技术专家与软件公司也在努力为HTML5提供更好的支持。在预期的2014年底，HTML5正式标准会发布。但它有一个前提，W3C要求至少有两款软件（主要指浏览器）完全通过所有的测试案例，HTML5才会成为W3C认可的一个推荐标准。在桌面端，几大主流浏览器的HTML5支持评分从2009年的100分档迅速进步到今天的400分档；在移动端，各浏览器得分从开始的50分，提升到了今天的近500分。每个人的努力都被记载下来。

这些数据可在html5test网站上随时查阅。目前Maxthon、Chrome和Opera占据桌面端前三名，而在移动端，Opera、Chrome和Firefox成为领先者（截至2012年10月24日）。

而这样的竞赛并未停止。浏览器厂商仍在继续开发新的版本，以期待为用户和开发者提供针对HTML5的更好支持。陈尚义告诉我们，百度手机浏览器的内测版，对HTML5的支持“已经达到了500分的满分”。

未来HTML5取得突破进展，可能出现在三个方面。一是浏览器，如果各个浏览器对HTML5支持度更高，HTML5的性能和表现就会越好。二是带宽，原生APP通过一次性下载，将下载时间集中化，用户在平时使用中，很少感受带宽影响。而Web APP由于需要经常通过网络获取数据，如果带宽可以更高，HTML5在使用体验上会得到更大提升。三是硬件，今天的HTML5已经扩展到可以调动各种硬件模块，因此设备硬件的性能提升会给HTML5带来更多的实现可能。

如果我们愿意把目光看向更远方，HTML5的发展不应该局限于网页和Web APP。Flrefox给了我们一个惊喜，他们发布了一款基于HTML5的Firefox OS操作系统，将HTML5推向了系统级核心层次。“HTML5未来可以走的更深更远。” 谢子斌为HTML5预期了一个更美好的未来。

挑战依然在。HTML5成熟标准一天未发布，相关的性能和瓶颈就依然存在。在3G门户副总裁高峰看来，HTML5自身的技术完善程度和完成时间将成为其发展的关键。“今天的HTML5还有不如意的地方，也许这些都会在将来被完善，但时间是很大的成本。互联网时代，是大鱼吃小鱼，移动互联网时代，是快鱼吃慢鱼，速度决定胜败。”

当你通过iPad在线播放视频，或者只是在电脑前快速浏览网页资讯，你不会意识到HTML5的存在，但它就在那里。如果你是一个开发者，HTML5会带给你很多新鲜、丰富和便捷之处，同样也有抱怨和不如意。W3C宣布，2014年HTML5会成熟，Facebook表示，我们对HTML5投入有些过早……是的，HTML5仍在成长中，这也是它最大的魅力所在：会有一个比今天更美好的未来。