网页开发技术（共12篇）
网页开发技术 篇1
1. 引言
网络游戏从最早的文字MUD、网页游戏到现在的3D大型多人在线游戏, 几十年间已有了翻天覆地的变化。尤其在中国, 网络游戏产业作为一种新兴经济形态, 既是朝阳产业, 又是风向产业, 已成为娱乐经济发展不可或缺的重要组成部分。
网页游戏 (Web Game) 是一种网络游戏, 它运行在客户端的浏览器中, 无需用户安装游戏程序即可进行游戏, 不管是何种平台, 只要能上网能浏览网页就可以进行游戏。
2. 网页游戏的客户群体
2.1 国内网页游戏的主要客户群体
根据中国网页游戏论坛的投票调查, 玩网页游戏的人群主要分布为上班族 (60.39%) 和学生群体 (32.6 %) 。
2.2 网页游戏的潜在客户群体
从受众群体容量来说, 能通过浏览器上网的人都是网页游戏的潜在受众。这个群体非常巨大, 据2010年CNNIC调查显示:截止2009年底, 中国网民的规模达到3.84亿人, 较2008年增长28.9%。因此, 网页游戏有巨大的潜在受众, 其发展潜力不容忽视。
3. 开发网页游戏的主要技术
3.1 网页游戏的基本框架结构
网页游戏是一种特殊的网页交互程序, 它的工作机理同传统的动态网页交互相类似:将客户端的数据交互提交到服务端, 服务端处理完以后再展现在客户端。出于游戏的娱乐需求, 网页游戏所进行的数据交互更加复杂, 更加频繁, 更加实时化。其整体框架结构如图3-1所示:
3.2 开发网页游戏所需的技术
网页游戏也是一种电脑游戏, 要使网页游戏更具有丰富的视听冲击力、良好的互动性和切实的可玩性, 很大程度上是需要提高客户端的用户体验。HTML具有很多良好的优点, 但是互动性较差。Flash技术所具有的丰富的互动性和良好的视觉表现力, 符合网页游戏的开发需求。
目前, 大多数网页游戏的前端开发都大量使用到Flash技术, 大大增强了游戏体验, 后端开发常用的技术有PHP、JAVA、ASP.Net等服务器端编程技术。
4. 使用Flash与PHP技术开发网页游戏
国内有许多网页游戏使用Flash+PHP+MYSQL来开发, 如开心农场网页游戏。Flash实现主要的客户端程序, 其优点就是具有良好的视觉表现力与交互体验;PHP实现后台服务端程序, MYSQL实现游戏数据库管理。
在Flash中与PHP通信, 可以通过使用URL系列类、XML类、Socket类、XMLSocket类、Load Vars类、AMF、SOAP等多种方式来实现, 本文以使用URL系列类和XML类来进行阐述。
4.1 通过URL系列类与PHP进行通信
URL系列类包括URLLoader、URLRequest、URLVariables等。其数据的传送方式可以是GET或POST。例如, 在Flash客户端中, 通过传送用户名到服务端实现向MYSQL数据库查询对应的用户年龄数据, 并将查询到的结果返回客户端, 实现方案如下:
(1) 在Flash中编写的代码为:
(2) 编写search.php的PHP代码为:
4.2 通过XML类与PHP通信
使用XML类进行通信比较适合传送结构化的文本数据, XML数据有较好的通用性, 可以在多种平台下进行数据交换。例如, 要在前端获取服务端XML格式的游戏数据, 在Flash中编写代码如下:
在xml.php中编写的PHP代码如下:
其中的XML数据可以由PHP脚本输出, 也可由数据库中的数据实时生成, 在PHP中还可以通过DOMDocument () 类来操作XML。
5. 结束语
网页游戏是目前比较流行的网络游戏, 有较大的发展潜力, Flash与PHP技术由于自身的优势, 已经成为开发网页游戏主要用到的技术, 其成本低, 效率高, 开发周期短。随着3G时代的来临, 网页游戏必将有更大的发展空间。
参考文献
[1]四维科技曹衍龙, 赵斯思著.PHP网络编程技术与实例.人民邮电出版社.2006年.
[2]肖刚著.Flash游戏编程教程.清华大学出版社, 2009年.
[3]Lott Schall著, 陈建勋译.Actionscript3.0Cookbook.电子工业出版社.2007年.
[4]荣钦科技著.游戏设计概论.北京科海电子出版社.2003年.
网页开发技术 篇2
（五）第五章 文字性质的ＣＳＳ
本 章 Ｃ Ｓ Ｓ 的 主 要 作 用
本章要介绍的是文字相关的ＣＳＳ指令。通 常一个网站的内容最多的就是文字了，透过这些文字相关的ＣＳＳ指令，您可以将您的 网页内容排版得美美的。本章将分两个部份为您介绍，第一部份是字型性质的ＣＳＳ指令，用以控制文字字型的各种样式；第二部份介绍的是文字性质的ＣＳＳ指令，用以控 制文字段落的外观及摆设方式。
字 型 性 质 的 Ｃ font-family 设定文字字型
支 持：ＩＥ３、ＩＥ４ 适 用：所有元素 可能值：
预设值：视浏览器而定 继承性：有
一般范例：SPAN { family-name : “标楷体” } 同轴范例： font-style 设定字体样式
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： normal 普通字
italic 斜体字
oblique 斜体字
预设值：normal 继承性：有
一般范例：SPAN { font-style : italic } 同轴范例： font-weight 设定字型份量
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： normal 普通字
bold 粗体字
bolder 相对于父元素稍粗
lighter 相对于父元素稍细
Ｓ 指 令
Ｓ100,200,300, 400,500,600, 700,800,900.数字由小到大代表笔画由细到粗 normal=400 bold=700 预设值：normal 继承性：有
一般范例：SPAN { font-weight : bolder } 同轴范例： font-size 设定文字大小
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值：
绝对大小，可用的参数由小到大分别有七项 xx-small, x-small, small, medium, large, x-large, xx-large
百分比，以父元素字型大小为基准
预设值：medium 继承性：有
一般范例：SPAN { font-size : 12pt } 同轴范例： font-variant 设定文字转换
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： normal 普通字
small-caps 将小写文字转换为大写
预设值：normal 继承性：有
一般范例：SPAN { font-variant : small-caps } 同轴范例： font 综合设定字型性质
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值：
预设值：无 继承性：有
一般范例： SPAN { font : bolder small-caps 12pt/120% Arial } 同轴范例：< SPAN style=“font : bolder small-caps 12pt/120% Arial”>
文 字 性 质 的 Ｃ Ｓ Ｓ 指 令
line-height 设定列高
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值：
normal 普通列高，根据字体变化合理高度，视浏览器而定
百分比，相对于元素字型大小为比例
预设值：normal 继承性：有
一般范例：DIV { line-height : 120% } 同轴范例： text-align 设定文字对
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
center 对 中央
right 对 右边
left 对 左边
justify 左右对
预设值：视浏览器而定 继承性：有
一般范例：DIV { text-align : center } 同轴范例： vertical-align 设定垂直对
支 持：ＩＥ４ 适 用：同轴元素 可能值：
top 对 同列最高元素顶端
bottom 对 同列最低元素底端
baseline 对 底线 middle 对 中央
sub 将元素置于下标
super 将元素置于上标
text-top 对 文字顶端
text-bottom 对 文字底端
参照元素本身列高，以父元素底线为基准作位移
预设值：baseline 继承性：有
一般范例：SPAN { vertical-align : sub } 同轴范例： text-decoration 设定文字装饰
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： none 普通字
underline 文字加底线
overline 文字加顶线
line-through 文字加删除线
blink 设定文字闪烁
预设值：none 继承性：有
一般范例：SPAN { text-decoration : blink } 同轴范例： text-transform 设定文字转换
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： none 普通字
capitalize 将英文单字地一个字母转换为大写
uppercase 将所有文字转换为大写
lowercase 将所有文字转换为小写
预设值：none 继承性：有
一般范例：SPAN { text-transform : uppercase } 同轴范例： letter-spacing 设定字母间隔
支 持：ＩＥ４ 适 用：所有元素 可能值： normal 不改变字母间隔，使用浏览器预设值
预设值：normal 继承性：有
一般范例：SPAN { letter-spacing : 0.5pt } 同轴范例： text-indent 设定文字缩排
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
以父元素宽Ｑ291911320度为基准的百分比值
预设值：0 继承性：有
网页布局类型及布局技术的分析 篇3
关键词 网页布局；表格；框架；div+css
中图分类号 TP393 文献标识码 A 文章编号 1673-9671-(2012)051-0178-02
网页是网站构成的基本要素，而网页元素在网页中的组合决定了整个网站的最终效果，因此选择合适的网页布局类型及技术是关键。本文围绕网页布局的类型及布局技术进行了分析，并结合《三农服务网》实例进行了简单的说明。
1 网页布局类型分析
1.1 网页布局的类型
大致分为标题正文型、T字型、国字型、框架型、封面型、Flash型6大类。
1.2 布局类型的分析
1）标题正文型：页面分为上下结构，上面部分是标题、广告、导航等，下面部分是正文。
优点：结构清晰、简单，一目了然。
缺点：页面显得比较单调、枯燥。
2）T字型：页面顶部为网站标志、广告，下面部分的左列为主菜单，右列为主要内容。
优点：结构清晰，主次分明，容易上手。
缺点：页面显得呆板，变化较少，在页面停留时间久会感觉看之无味。
3）国字型：也可以称为“口”、“回”或“同”字型，页面分为上中下三部分，顶部是标题、广告，底部是网站的链接区、联系方式、版权声明等，中间部分分为左中右三列，左右分别列出一些小条，中间部分是主要内容。
优点：充分利用页面空间、增大信息量。
缺点：内容过多，显得页面拥挤。
4）框架型：一般分为左右框架型、上下框架型、综合框架型。左右框架型是一种左右分为两页的框架结构，一般左面是导航链接，右面是正文。上下框架型：与左右框架类似，区别仅仅在于它是把页面分为上下两页的框架。综合框架型：上面两种结构的组合，相对复杂的一种框架结构。框架型适合于聊天室、论坛、软件下载等网站的版面布局，
优点：框架型页面分割合理、布局结构清晰。
缺点：兼容性差、页面加载速度慢。
5）封面型：页面布局是一张精美的平面设计宣传海报，常用于网站首页。
优点：页面显得美观、大方、轻松，给人时尚优雅、自由的感觉。
缺点：文字信息量少，页面打开速度缓慢，浏览者不能直奔主题浏览信息。
6）Flash型：与封面型类似，只是其添加了动画效果与音频效果，表达的信息更丰富。
优点：灵活、表现力强，很直观的展现了网站的理念等，适用于网站的首页。
缺点：速度慢，浏览者需要漫长的过程才能浏览到所需的
信息。
2 网页布局技术分析
2.1 表格技术
表格用于在网页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。表格、行、单元格的标签分别为
页面一般由嵌套表格的技术实现。嵌套表格是在一个表格的单元格中的另一个表格。可以像其他任何表格一样对嵌套表格进行格式设置。但是其宽度受它所在单元格的宽度的限制。引入嵌套表格，由总表格负责整体的排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中。
使用表格布局时，浏览器一般是等整个表格的内容都接收到以后才显示表格里的内容，因此尽量把一个表格拆分为若干个表格，加快打开页面的速度，优化页面。
优点：使用表格布局网页，可以精确地控制各网页元素在网页中的位置组织整个网页的外观，通过在表格中放置相应的图片或其他内容，即可有效地组合成符合设计效果的页面。
缺点：使用过多的表格，特别是嵌套表格，会造成页面垃圾代码过多且可读性非常差，影响页面下载速度，不符合W3C网页标准，网站不便于维护。
2.2 框架技术
框架把浏览器窗口划分为若干个区域，每个区域可以显示不同的网页。框架主要包括两个部分，一个是框架集，另一个就是框架。框架集是在一个文档内定义一组框架结构的网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。框架集文档本身不在浏览器中显示，它只是向浏览器提供如何显示框架以及在框架中显示哪些文档的信息，是一个用于存储框架的容器。框架则指在网页上定义的一个显示区域，每个框架都有自己独立的滚动条，方便访问者独立浏览这些框架。
优点：使用框架可以非常方便的完成导航工作，各个框架之间不存在干扰。框架还有个很大的优点就是网站的风格能保持统一，它把相同的部分单独制作成一个页面，作为框架结构一个子框架的内容给整个站点公用。
缺点：框架是有边框的，占用空间。采用过多的框架会增加下载网页所需的时间，影响网页的浏览速度，对于内容多、布局复杂的网站不宜采用框架布局，且框架结构的页面兼容性不好。
2.3 div+css
div+css是网站标准中常用的术语，是一种网页的布局方法，有别于传统的html网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。
xhtml是一种在html基础上优化和改进的新语言，在xhtml网站设计标准中，要求用div+css的方式来实现各对象的定位，即div定义网站结构（即布局网页）、css创建网站表现（即格式化网页元素），从而实现更加丰富的网页效果，提高网页的传输速度和维护更新效率。在xhtml网站设计标准中，不再使用表格定位技术，而是采用div+css的方式实现各种定位。
中文网页分类技术解析 篇4
长期以来, 文本分类 (Text categorization, TC) 都是自然语言处理的一个重要的应用领域。一直到20世纪80年代后期, 在文本分类方面占主导地位的TC系统还都是基于知识工程 (Knowledge engineering, KE) 的分类方法, 即由专业人员手工编写分类规则来指导分类, 把如何进行分类的专家知识以手工的方式添加到规则库中。从90年代开始, 人们才开始转向了机器学习 (Machine learning, ML) 的方法, 它是从预先分好类的文本中学习各个类别的特征, 从而生成一个自动分类器。
现在文本分类系统应用非常广泛, 从基于有限词汇的自动文本索引, 到文本过滤、词义消歧, 到自动网页分类, 甚至任何需要进行文本组织的应用都可以用文本分类来进行处理。
2 网页自动分类概况
2.1 网页/文本分类定义
自动文本分类系统, 要用到很多技术, 如文本表示、特征选取、分类器构成等。在此将对文本分类中用到的定义进行简要的解释。
文本分类是指按照预先定义的主题类别, 为文档集合中的每个文档确定一个类别。早期文档是通过人工分类, 其过程是首先由人类专家将它们分类, 然后被保存于适合的形式;本文所讲的文本分类是自动文本分类 (Automatic Text Classification, ATC) , 是指定文本和预先定义类之间的类属关系, 由计算机来自动完成那些原来为人们熟知的人工分类的操作过程。
2.2 网页与文本分类的区别
文本分类和页面分类归根到底都是对文本信息的分类, 都存在着文本信息的表示、分类信息的获取等。正是基于这样的共性使得我们可以借鉴文本分类中的技术来处理页面分类问题。但文本分类和页面分类又有所不同, 如:网页信息相对于文本信息更开放, 风格不固定;网页分类的类别比文本分类的类别更多, 为了便于用户浏览和选择, 一般要求类别有层次关系;网页的分类体系随着信息的变化会做一些变动, 并且很难有一个统一的标准。
目前, 绝大多数网页是采用超文本表示语言 (简称HTML) 编写的、半结构化的文本文件。HTML表示的网页具备一定的结构, 但其侧重于外观和版面安排问题, 而不是结构化和模型化数据, 因此只能把它们称为半结构化的数据。除了纯文本这些反映网页主体的内容, 网页本身还包含一定的标记和许多指向其它页面的链接。HTML标记语言包含了丰富的信息, 如<TITLE>、<H1>等标记都表明了其与众不同的信息, 超链接也提供了网页间内在关系的信息。充分利用这些链接或许可以为分类提供帮助, 并且通过对网页结构进行分析可以有效的提高分类性能。
3 基于支持向量机的分类方法
3.1 支持向量机的基本思想
分类器是网页分类的核心, 也是“分类”———这一传统的机器学习领域的研究重点, 目前已经得到了长足的发展。现在基于统计、规则等的大量分类器被应用到网页/文本分类中来。在文本分类方法中, SVM是公认的分类效果最好的算法之一。支持向量机的学习能力是独立于特征空间维数的, 决定分类面性质的只是训练样本中的支持向量部分, 这样, 分类器也可以很好在高维空间中得到应用, 因此适合于解决文本分类问题。
3.2 支持向量机训练算法
选择什么样的训练方法会极大的影响最后的分类效果。这里的训练方法是指如何在给定的条件下合理调整各种参数、利用各种资源来改进分类效果。下面从两个方面来讨论。
1.协同训练 (Co-Training)
协同训练是指根据两类不同的数据或相同数据的不同属性来相互协助提高分类性能的方法。在当前的互联网环境下, 有大量的网页可以用来分类, 但如果全部由人来给出他们的类别标签则是不现实的事情, 因此如何用没有标签的网页来帮助分类成为一个值得研究的课题, 并且已经取得了一些进展。这里就采用了协同训练的方法。
2.多分类情况下的训练方法
当处理多分类情况时可以有多种策略来训练分类器。这里有两种情况:
a.先合并后拆分b.ECOC编码
这里不在详细介绍。
3.3 基于支持向量机的中文网页分类
基本的“一对其它”SVM多类分类中, 每一类的识别被视为一个独立的两类分类问题。设所有网页为k类, 记为L={α1, α2, …, αk}。设属于类αi的网页个数为Ni, 对任何一类αi而言, 训练正例是该类所包含的全部网页, 而反例是在训练集中不属于该类的所有其它类的网页。即αi类的正例总数为Ni, 反例总数为
对于中文网页分类, 由于缺少各类别的样本分布信息, 无法指导叶结点的划分。设分类数目为m, 训练集为Z={C1, c2, …, Cm}, Ci表示第i类。我们设计如下算法来构造m-1个分类器。
算法1:
其中N (Z) 为集合Z中类别的数量, N (Ck) 为Ck类的训练样本数, S (Cj) 为Cj类的训练集合, SVMi+为第i个支持向量机分类器的训练正例集合, SVMi-为第i个支持向量机分类器的训练反例集合。
采用上述算法, 由于分类器的误差, 本属于前面类别的网页由于没有被相应的分类器正确识别, 会被误分到最后一个类别, 因此会使最后一个类别的精确率下降, 并影响其它类别的分类性能。为此我们提出改进的支持向量机算法来构造m个分类器。
算法2:
其中Z (i) 表示集合Z中的第i个类别元素。
上述算法中最后构造的分类器用于决策过程中的最后一个类别的识别。该分类器的训练正例为该类的训练数据, 训练反例为所有其它类的训练数据。该算法通过增加一个新的分类器, 来提高分类的性能。
4结束语
本文首先对文本 (网页) 分类技术作了较为全面的分析。着重介绍了相关概念及训练算法。并阐述了基于支持向量机的网页自动分类算法。网页分类已成为一项具有较大实用价值的关键技术, 可以建立自动的分类信息资源, 为用户提供分类信息目录。
摘要：本文从网页分类方面对万维网上的数据处理技术进行了分析, 对中文网页/文本分类技术进行了介绍, 阐述了基于支持向量机的网页自动分类算法。
关键词：文本信息,网页分类,向量机
参考文献
[1]周水庚, 关佶红, 俞红奇, 胡运发.基于N-gram信息的中文文档分类研究.中文信息学报, 2001, 15 (1) ;
[2]邹涛, 王继成, 黄源等.中文文档自动分类系统的设计与实现.中文信息学报, 1999, 13 (3) 。
[3]毛伟, 徐蔚然, 郭军.基于n-gram语言模型和链状朴素贝叶斯分类器的中文文本分类系统.中文信息学报.2006, 20 (3) .
[4]牛强, 王志晓, 陈岱, 夏士雄.基于KNN的Web文本分类方法的研究.计算机应用与软件.2007, 24 (10) .
[5]杜长海, 吉根林.模糊聚类在中文文本分类中的应用研究.计算机工程与应用.2006, (8) .
[6]解冲锋, 李星.基于序列的文本自动分类算法.软件学报.2002.13 (4) :783-789.
网页游戏委托开发合同(简版) 篇5
甲方：
注册地址：
委托代理人：
通信地址：
联系电话：
乙方：
注册地址：
委托代理人：
通信地址：
联系电话：
甲乙双方遵循《中华人民共和国合同法》，本着互相信任、真诚合作、共同发展的原则，就甲方委托乙方开发“××××”网页游戏产品及相关服务一事，经友好协商，达成如下协议：
一、合同标的物：
网页游戏名称：××××网页游戏产品
二、合同金额
合同金额为人民币RMB：。以上费用包括网页游戏需求调研、客户化定制网页游戏开发、配合安装调测、人员培训、保修维护等，甲方无须向乙方支付其它费用。
三、1.2.四、产品验收
1.2.五、乙方按照现有的接口并将标的物的可执行档提交甲方。当甲方确认验收并付清尾款后，乙方再向甲方提供系统代码，即网页游戏的所有代码。交货地点、时间及方式 交货时间：合同生效且甲方付款后个月。交货方式：以电子邮件的方式或者光盘刻录的方式交至甲方，费用由乙方承担。费用支付
(一)甲方应向乙方支付的总费用为人民币元整（RMB：元）。
(二)付款方式
1.协议签定后2个工作日内，甲方支付第一次合作订金（总项目的50%）RMB（大写：元
整）。
2.项目完工并由交付甲方测试时2个工作日内，甲方支付第二期金额（总项目的40%）RMB
（大写：元整）。
3.测试正常运行一个月后2个工作日内,甲方支付第三期金额（总项目的10%）RMB（大写：元
整）。
4.所有甲方应支付乙方之费用，均由甲方汇入下列乙方指定银行账户:
(三)甲方支付完第三期费用（即支付总费用的10%）后的一个工作日内，乙方交付标的物的代码。
六、质量保证
1.2.3.乙方保证对其提供的网页游戏拥有完整的自有知识产权，不存在侵犯他人知识产权。乙方保证交付的网页游戏符合游戏策划方案。乙方保证本合同出售之标的物能够满足甲方平台推广和使用的需求，对于下述情况所造成的网页游戏不能符
合业务模块功能描述，乙方不承担任何责任；
a)
b)
c)
4.七、乙方之外的任何个人或单位对本合同所述标的物进行的修改； 甲方或第三方未按产品使用说明文文件的规定使用本合同所述标的物； 由于甲方或第三方的原因，包括但不限于计算机设备原因、网络原因等，造成本合同所述标的物无法正常运行。如果本合同所述标的物未能正常运行运行，乙方应负责进行修正，免费为甲方更换符合要求的网页游戏，并由乙方承担由此造成的所有经济损失。相关服务 乙方为甲方提供以下相关服务：
1.2.3.八、标的物编译、调试和协助安装； 协助甲方完成网页游戏的验收测试； 乙方提供平台系統架接，整合技術支持以及半年的平台维护、技术咨询和技术支持服务。责任与权利
1.2.3.甲方享有乙方对合法用户提供的技术咨询、版本适当升级、售后服务的权利。如乙方未能提供标的物所源代码及其相关产品，组件插件等，甲方有权得到乙方不低于标的物产品全部价格的赔偿。甲方应在本合同签订之日起3个工作日内准备好网页游戏正常运行所需要的硬件、网页游戏、网络等环境。
甲方有依照系统实施方案的需求提供相应数据的责任，若甲方提供的数据不全，乙方有权不履行网页游戏实施工作，因此而造成的损失由甲方负责。
4.5.6.甲方应及时办理本合同所述标的物验收。若有甲方利用平台进行违法、违规活动之情形（以司法机关或国家有关管理机关的判定为准），乙方有权单方面解除协议，并不承担任何赔偿责任。甲方应按时结算开发费用，不能无辜拖延，如延后付款超过一星期，则乙方将自动取得本合同网页游戏的所有权利。
（一）甲方的责任与权利：
（二）乙方的责任与权利
1.2.3.4.5.6.乙方有责任依照本合同的规定，对本合同所述标的物进行编译、安装、调试、实施与系统维护等工作。乙方应帮助甲方完成平台的发布工作。乙方应认真、及时地解答甲方的咨询。乙方有责任向甲方提供标的物所有源代码及其相关产品，组件、插件、各类模块等。乙方有责任严格按照要求时间将合同标的物交付于甲方，并保证其质量和正常运转。由于甲方网络带宽及软硬件配置未达到要求而造成网页游戏无法正常使用，乙方不承担任何责任。在协议签署生效后的半年内，对于由乙方产品缺陷、运行错误等原因导致的问题，乙方必须在15个工作日
内予以免费解决。如本合同所提网页游戏经除乙方外第三方进行修改或重新编译导致出现的错误，乙方可以提供技术支持，但无义务进行解决。
7.九、违约责任
本合同一经签订即具有法律效力，双方必须严格遵守，任何一方如有违反，应承担违约责任并赔偿对方因此所遭受的损失。
十、保密条款
甲乙双方约定：不论本技术合作是否变更、解除、终止，以下条款均有效。
1.甲乙双方不得向外界透露在合作期间获得和知晓的有关另一方（包括分公司、分支机构、控股公司和合资公司）的商业秘密；
2.双方未经书面同意，不得在双方合作项目范围之外，向外界透露客户的任何商业秘密，包括口头或是书面方式的，还是以磁盘、胶片或电子文件等形式存在的。
3.当一方提出收回有关包含商业秘密的资料时，另一方有将相关资料交还对方，或应对方的要求将这些数据以及复制件销毁或删除的责任；不得进行其它处置，或继续使用这些保密信息； 若甲方未按合同付款方式内日期支付开发费用，则乙方有权暂停开发直至甲方付款为止，因付款问题造成的损失由甲方承担。
4.保密期限为三年。
违反上述规定所引起的直接损失由责任方承担。
十一、争议解决
十二、其它
1、本合同自双方盖章之日起生效。
2、本合同一式贰份，甲乙双方各执壹份，具有同等法律效力。凡由本合同引起的或与本合同有关的任何争议，双方应首先通过友好协商解决。若协商不成，双方同意向深圳市仲裁委员会提交仲裁并接受其仲裁规则。
甲方：
甲方代表（签字）：
2009年月日
网页开发技术 篇6
关键词：CSS；Web标准；网页布局
中图分类号：TP393.092文献标识码：A文章编号：1007-9599 (2011) 06-0000-01
CSS Page Layout Application on Web Technology
Wu Fangfei
(Jiangxi Ganjiang Vocational and Technical College,Nanchang330108,China)
Abstract:Web standard-based page production methods,and an example is explained in detail page layout planning,HTML generation,CSS style sheets to control,the most intuitive introduction to the div+css page layout.This layout for performance and content of the page to achieve the separation of leaving the site more convenient to maintain and update,
which has become very popular in today's site layout methods.
Keywords:CSS;Web standard;Page layout
一、关于Web标准
实际上Web标准不是某一个标准，是由W3C（World Wide Web Consortium）和其他标准化组织制定的一套规范集合，包含一系列标准。其目的在于创建一个统一的用于Web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。
简单的说，Web标准分成三大部分：结构（Structure）、表现（Presentation）和行为（Behavior）。结构化标准语言主要有：HTML（超文本标记语言）、XML（可扩展标记语言）和XHTML（可扩展超文本标记语言）；表现标准语言主要包括CSS（层叠样式表）；行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。网页设计要符合Web标准实际上就是对网页的结构、表现与行为进行分离——即表现与内容分离。
二、什么是CSS
CSS（Cascading Style Sheets，层叠样式表）是控制网页布局样式的基础，是能够使网页表现与内容分离的一种样式设计语言。在网页设计中，通过CSS样式表就可以轻松控制页面的布局、字体、字号、颜色、背景以及进行一些初步的页面交互设计。
CSS作为一款目前最优秀的表现设计语言，它的优势主要有：可以支持众多浏览器，实现了在众多平台及浏览器下对样式的表现最为接近；真正实现了表现与内容分离；拥有样式设计的强大控制力；具有优越的继承性，最大限度的达到了代码重用，从而降低了维护成本。
三、CSS与HTML的结合
CSS与HTML的结合使用完美的实现了网页表现与内容的分离。网页设计通常使用CSS来控制网页的样式，其中包括页面的布局、字体、背景等等信息。而HTML则用来罗列网页中的内容，其中包括文本、图片等。
CSS样式表可以以多种方式应用到HTML页面当中，但最常用最好的方式是外部连接。这种方式是将CSS样式代码放入一个外部文件中，再由HTML中的LINK元素进行调用。这样做的好处是可以使多个网页调用同一个样式表文件，最大限度的实现了代码重用及网站文件的最优化配置。
具体的使用方法为：在HTML页面中的head标签下使用LINK元素调用。
四、div+CSS的布局方式
div是XHTML中的一个标签，以这种形式出现。简单的说，div就像是一个容器，是XHTML中专门用于布局设计的容器对象。传统的布局方式是用表格来布局，页面的排版设计也完全依赖于表格对象table。但这种布局方式无法做到表现与内容分离，一旦要更新页面则需要更改整个表格甚至要重新制作背景或图片素材。这样的布局方式既不符合Web标准的要求，也给后期的网站维护带来很大的麻烦。目前普遍流行的布局方式是CSS布局，而这种方式的核心对象正是div。对于一个简单的CSS布局来说，只应用div和CSS这两样东西便可，因此说CSS布局也被称为div+CSS布局。
CSS布局实际上就是利用div对象把页面划分为几个区域，区域中标记了将要显示的信息，而这些信息的样式表现则由CSS来完成。在div+CSS的布局方式中修改网页内容并不会改变样式的表现。同样地，更改CSS样式表也不会影响到网页的布局。
五、CSS在网站中的应用实例
在设计网站的页面中，增加以下定义，会使页面有特殊的显示效果。
网站中CSS样式表使用：
huali {font-family："宋体"；font-size：12px；cursor：crosshair；font-style：normal；text-decoration：none；background-color：#FFFFFF；background-image：none；list-style-image：none}
.text{cursor：crosshair；filter：Mask（Color=#ff9900）；font-size：12px；font-style：normal；text-decoration：none}
在这个样式表中使用了：
font-family："宋体"；font-size：12px定义了网页文字的字体和大小，以避免因网页浏览器的设置改变而引起的网页字体和大小的变化，影响页面浏览者的信息浏览。
cursor：crosshair定义了页面鼠标样式，在这里将它定义为十字型，以反映网页的总体设计思想。
font-style：normal定义了网页字体风格，可以定义为普通、加粗、倾斜三种样式background-color：#FFFFFF；background-image：none它们是对网页背景颜色和背景图片的设置。
六、结束语
div+css的布局模式给网页设计注入了新的生命力，同样的HTML代码却可以呈现出数以百计风格迥异的网站。但想熟练的掌握这种布局方式还需要更多的实践经验和学习积累，能够灵活掌握CSS语言并能设计制作出符合Web标准的网页才是学习CSS的最终目标。
参考文献：
[1]李超.CSS网站布局实录（第2版）[M].北京:科学出版社,2007
网页爬虫技术的关键技术研究探索 篇7
现今,社会经济生活的各个方面变得越来越“互联网化”,互联网式经济贸易逐渐取代传统的经济模式,互联网金融市场的快速发展,在我国的经济结构中形成了服务于互联网金融的主流经济模式。致使各大商业银行也更加积极地开创互联网经济方面的业务,也强化了实体经济的服务效率。
“互联网金融+”这个新兴事物越来越多地融入我们的生活,改变了我们以往的生活方式。现在流行的打车软件,以电子支付为交易方式,改变了传统的支付方式;网络银行的快速发展为我们提供了新的理财方式;P2P信贷使得我们的消费和贷款有了新的途径;众筹产业的发展让每个人都可以参与到创新新模式中来,这些新的变化改变着我们的生活,使得我们生活增添了新的色彩,互联网金融在未来会越来越成为主流。
网络技术的快速发展,使得网络上各种重要的数据信息越来越多,互联网金融领域的发展也更加依赖于网络来获取重要的数据信息,以供研究发展。在互联网中,时时刻刻都有各式各样的金融网站发布实时的数据信息,如股票的走势、某个公司的运营情况、某个专家对当前经济形式的分析、在经济领域新产生了哪些技术等等。大型金融机构或者理财的个人都需要最前沿的工具来抓取这些必要的数据信息,以供研究。
在互联网金融领域,爬虫程序开发所面临的主要问题是采集性能和反封锁。大多数情况下,采用并发程度高的线程搜索网页数据是可行的,但是,前提是所访问的网站没有设置反爬虫的程序,例如设置防火墙、填写验证码什么的。很多时候有价值的信息都不会轻易被获取,因为网站可能会靠这些数据信息盈利,所以设置反爬虫的措施,限制访问的频率,一旦IP地址被封掉,什么程序就都没用了。所以,爬取数据的公司一般要运营维护一个IP地址池,同时,这也会出现IP是否稳定的问题,这些问题无法被避免,我们针对具体问题具体分析,最高效、最快速的完成爬取数据的任务。
目前,爬虫已在互联网金融领域的需求呈现出几何增长的趋势。未来互联网经济将在我国总的经济产业中占有更高的比重,获取一些重要的网络信息都得需要爬虫技术的参与,爬虫技术为适应新的需求,将会不断地更新发展。
2 关键方法和技术
2.1 多线程机制
网络爬虫需要下载规模非常庞大的网页,如果仅仅采用单线程来操作,采集效果会非常差,并且会浪费大量的时间,因为爬虫程序向服务器提交请求后要等待服务器的处理和返回结果,如果采用单线程,每个线程依次发送请求并等待服务器的依次响应,等待时间是所有网页处理过程的叠加,效率大大降低。因此,可采用多线程机制来减少个别网页的处理时间,以提高程序的效率。
2.2 数据库访问技术
爬虫技术采用队列管理的方式,基于SQLserver数据库。在本程序中,我们通过JAVA中的jdbc来操作数据库,通过建立JDBC和ODBC之间的链接,即建立所谓的JDBC-ODBC桥接器,和数据库的连接工作由ODBC去完成。JDBC的作用就是允许程序向数据库发送SQL语句,而且可以指定数据的返回类型。
3 实现过程
3.1 爬虫程序中的主要类和函数
首先,创建Interal Crawler类,用来实现爬虫程序基本的功能,包括多线程机制获取网页、处理网页、搜索新的URL等功能。此外,Interal Crawler类还作为爬虫程序接口,并且由其对象管理线程。
Craw Work类用来创建工作对象,工作对象处理InteralCrawler所访问的网页链接。当程序启动时,Craw Work对象将请求处理网页链接。该对象调用Interal Crawler对象的get Workload()方法,该方法将返回一个还未处理的网页链接。
Craw Done类用来统计正在运行的线程的数目。
类将程序运行的结果存放到数据库中。
Iwork Load Storable接口存放一些存取队列中网页的方法。
核心代码如下:
3.2 数据库的建立
启动SQLserver数据库,建立数据源search,创建表workload1和workload2,并设置好表参数。实现Socket连接,核心代码:
在上面的代码中,首先判断网页链接格式是否合法,若URL格式正确,则创建HTTPSocket对象,然后调用HTTPSocket对象的send方法将URL送到服务器接受处理。
要向数据库端发送SQL语句,首先要连接到数据库,代码如下:
其中,search是数据源的名字(用户设置的),Driver Name是驱动名称,“user”是整个数据库的用户名,“password”是登录密码,通过JDBC与数据库建立连接。当Interal Crawler对象调用run()方法时,同时运行了Interal Crawler对象的get Workload()方法,搜索Interal Crawler程序将要解析的URL。
3.3 多线程的设计
在我们使用多线程机制来设计爬虫时,大致流程的是:每个爬虫线程抓取的数据要聚集起来,再统一处理,然后让空闲的爬虫程序分去处理新的网页数据。这个工作流程可以让我们联想到master-slave模式,这个模式就相当于在建筑一个工程时,包工头和建筑工人之间的关系,包工头统一规划整个项目的实施流程并向工人下发任务,工人只需出力完成任务。根据这个模式,我们设计爬虫线程。如下图,多线程爬虫如图1所示。
图1中,Manager是一个线程,这个线程负责启动所有的Worker线程,给所有的Worker派发任务,然后所有的Worker开始解析网页,收集并处理数据后传送必要的数据给Manager,Manager再根据信息反馈控制Worker线程。
线程的设计是爬虫程序的关键部分,爬虫线程通过最佳优先算法根据一个网页得到其所有链接网页的URL,再搜索所有链接到页面中的关键字。如果搜索到所需数据,爬虫程序通过窗口指针向用户报告。如果未搜索到数据,结束线程,抛弃所有变量,正常返回。
算法思想如下:
本文对爬虫程序中常用的搜索算法进行了分析,针对搜索算法存在的弊端,提出了改善最优搜索算法的改进思想。提高了搜索算法的“查全率”,进一步也改善了查找网页数据精度。
4 总结
爬虫技术在互联网+时代具有广泛的实际应用价值,通过爬虫技术可以实现网页挖掘的核心算法。然而值得一提的是,爬虫在访问某些网页时,可能会遇到一些反爬措施,例如数据加密、网页权限等问题,有些网站只有有权限的用户能访问。网上有一些出售数据的网站他们希望网络爬虫能爬取到他们的报告(相当于给自己打了个广告),但是又不能让这些数据资源免费被爬虫程序爬取,网站会给网络爬虫一个用户名和密码,使得网络爬虫可以访问网站一部分数据,重要的数据会设置权限。
摘要：互联网技术的快速发展,使得网络上各种数据信息呈现出几何增长的趋势,以往搜索数据的工具越来越跟不上时代的潮流,查找效率低、成本高的缺陷日益凸显。爬虫技术实现所用到的算法是搜索引擎的关键技术,算法性能的优良决定着搜索引擎的搜索精度和搜索效率。对于互联网中数据的数据量大、数据类型多、实时性要求高的特点,对各种爬虫算法的优缺点进行分析,该文设计使用多线程机制的爬虫算法,可以提高网页的查全率。
关键词：爬虫技术,网页挖掘,多线程
参考文献
[1]潘春华,常敏.面向web的信息收集工具的设计与开发[J].计算机应用研究,2002,13(6):144-148。
[2]杜亚军.爬虫算法设计与程序实现[J].计算机应用,2004.
[3](美)Jeff Heaton.网络机器人JAVA编程指南[M].董兆峰,译,北京:北京电子工业出版社,2002.
[4]Heaton J.Programming Crawlers,Bots and Aggregators in Java[EB/OL].http://www.jeffheaton.com.2004.
网页开发技术 篇8
JSP是目前网页开发过程中最常使用的技术之一, 其能够实现和硬件平台的分离, 这对于网页运行效率的提升有着极大的作用。 因此相关开发人员必须加强对其的应用, 为网页性能的优化创造条件。 文中对JSP技术原理、 JSP技术特点、 基于JSP网页技术的优势以及SP在网页开发中的应用进行分析。
2 JSP技术概述
2.1 技术原理
最先推出JSP语言的公司为Sun公司, 由于其自身所具有的优势性, 近年来越来越多的技术人员把其作为站点开发语言来使用。 和其他开发语言相比, JSP技术可以在脱离硬件平台的基础上发挥作用, 因此从这一层面上来说, JSP技术的应用能够让静态网页和动态网页以分离的状态所存在, 这对于系统运行效率的提升有着极大的作用。 就技术原理来说, JSP技术作用发挥过程和ASP技术有着一定的相似性, 它们都需要对HTML标记几何进行扩展处理, 并通过JSP引擎的应用使得扩展标记能够被识别和执行, 但值得一提的是这些被扩展的标记只能够被支持它的服务器的相关引擎所识别。 因此在服务器接受到相关请求后, JPS技术的应用就可以把相关请求文件以Servlet代码的形式所呈现, 并会把代码形式的文件传送到JVM上, 在JVM接受到相关代码后就会利用自身的编译功能对代码进行编译, 并把编译后的文件放在服务器中, 为其执行的实现创造条件。 在JSP收到结果后会把被编译的结果传输回客户端, 而用户就可以以浏览器作为载体对所查询的结果进行查看。 由于代码被执行的前提是用户会提出请求条件, 因此在第一次进行代码调用时, 代码加载的时间就会比较出长, 但是在代码第一次被编译后, 其就可以在后台实现独立运行, 因此在这种状态下, 用户请求的在此提出就会让JSP保持高效的运行的状态。
2.2 JPS技术特点
从本质上来说JSP技术可以被当做Servlet技术的扩展, 其是在Java环境下能够对动态网页进行高效开发的一种技术, 和其他技术相比, JSP技术具有以下特点:
2.2.1 页面生成技术较为简单
在把JSP技术应用到网页开发过程中所使用命令主要为标准的HTML以及XML, 即把HTML以及XML命令的应用, 让JSP页面的布局设计以及格式化过程得以实现, 此外在通过类似HTML, XML的标记以及Java语言编写的脚本程序是页面内容得以生成的重要依据。 和其他技术相比, JSP技术的应用能够让页面的内容和页面的形式都以独立的状态所存在, 这对于大型项目分工的完善以及网页建设效率的提升都有着极大的意义。
2.2.2 能够和Java平台有机集成
JSP技术是Java平台的重要组成部分之一, JSP所使用的脚本语言就是Java语言, 在JSP页面中基本所有的Java命令以及Java组件都可以被使用, 这对于Java语言功能的进一步发挥有着极大的作用。 通过JSP技术的应用能够使得Web应用程序的可靠性以及可伸缩性得以提升, 这对相关服务器作用的发挥极为重要。
2.2.3 服务器和硬件平台存在无关性
从属性上来说, JSP技术可以被划分到Java家族中, 可以说JSP技术充分地对Java技术的编写一次, 随时可用的特性进行了秉承, 其可以被应用到大多数的Web服务器以及操作系统平台上, 其可以在摆脱硬件平台的基础上发挥出相关作用, 这是其被应用到动态网页开发过程中最突出的优点之一。
2.2.4 可拓展性
JSP技术所具有的最显著的特点之一就是其可以被扩展, 作为Servlet的扩展内容, 其自身也具有可扩展性, 这对其作用的发挥有着重要作用。
2.2.5 JSP可以提供隐含对象
和其他技术相比, JSP技术可以对某些对象进行隐含处理, 这些隐含对象在JSP页面中可以在不被声明的基础上被直接引用。 把JSP作为隐含对象的提供载体, 能够让脚本功能进一步被提升, 并且JSP技术的应用也能够使得编程更加方便和容易。 譬如在把request对象作为处理对象时就能够很容易对HTML表单中的信息金属接收。
2.2.6 高效性
和其他技术类型相比, JSP技术在使用的过程中具有高效性的特性, 这是因为JSP代码会被以Servlet形式被编译, 并通过Java虚拟机实现解释执行过程。 所有代码的编译只会在第一次执行时进行, 其余请求提出时并不需要对代码进行编译。 此外在JSP技术应用的过程中服务器上的字节码采用的机制为Cache, 这为字节码访问效率的提升创造了条件。
3 基于JSP网页技术的优势
基于JSP网页技术所使用的编译码都是Java, 因此字节代码迁移过程可以在所有平台实现, 并且在对代码迁移过程中并不需要对代码进行改动, 这在一定程度上使得字节代码迁移过程得以简化。 此外在用户对JSP网页进行使用的过程中, 只有用户请求被提出的基础之上, Servlet代码才会处于被执行的状态, 因此在代码诗首次使用时, 需要花费几秒钟对其进行调用。 但是如果代码是被循环使用的状态, 那么服务器就会对代码进行缓存, 因此这就使得代码被解释执行的步骤被简化。 因此和其他网页技术相比, JSP技术在网页开发中的应用能够使得网页执行速度被进一步提升。 和JSP技术相比, 传统的ASP以及PHP技术在相关代码被执行前必须对代码进行解释工作, 这就导致在循环操作过程中使得执行速度以较慢的状态存在, JSP技术的应用则很好的能够对这种缺陷进行弥补。和PHP技术相比, JSP技术更多的被应用到电子商务网站中, 这是因为PHP技术不能够度多层结构和规模进行支持, 并且PHP的运行必须把大负荷站点作为依据。 此外PHP技术的应用可能会使得相关数据库的接口不能够以统一的形式所存在, 这是其不能够在电子商务中被广泛应用的重要原因之一。
和其他技术相比, JSP技术在安全性上更具有优势, 这是因为在对JSP技术进行使用的过程中, 相关开发人员能够通过HTML或者XML对最终页面完成设计以及格式化, 并通过JSP标记或者脚本来完成动态内容的生成。 被生成的内容逻辑会本封装在Java Beans组件中以及相关标记中, 客户端对于这些生成内容是不显示的。 在服务器端, 通过JSP引擎可以对JSP标记和脚本进行解释, 所有JSP页面都会被编译成Jav Servlet格式, 所被编译的结果也会以HTML或者XML形式输送会客户浏览器, 也就是说JSP技术的应用可以让内容生成环节和显示环节以分离的状态存在, 这对于代码安全性的提升于保证有着极大的作用。
可重用性是JSP技术的另一大优点, 之所以JSP技术可以实现重用, 主要依据的原理为让庞大的应用程序能够以多个独立功能的模块所存在, 在需要其协同工作时, 只要对各个模块之间的接口进行接通即可。 JSP技术可以使得Java组件开发人员你可以对普通操作组件进行共享以及互换执行, 这对于开发速度的提升极为重要。
JSP、 ASP和PHP技术的对比情况如表1 所示。
4 JSP在网页开发中的应用
在JSP页面被编写好要让其执行, 在执行的过程中客户端可以通过Web浏览器对JSP服务器进行请求的发出, 然后JSP服务器会对是否存在JSP页面所对应的代码进行识别与确认, 如果不存在则利用服务器对其进行Servlet的源代码的转换, 如果存在则利用JSP服务器对JSP页面是否存在修改进行确定, 如果页面不存在修改和更新状况则对其进行编译并加载到内存执行。 如果不存在修改状况在把JSP代码转译为Servlet的源代码。 在源代码被编译储存后, 把产生的结果返回到客户端。 一般来说, JSP文件的编译是在用户请求第一次被发出后所产生的, 而第一个请求的发出者往往是该JSP页面的Web开发人员, 此时被访问的JSP页面通常已经被编译成Servlet, 这样就可能让用户的访问效率得到提升。
5 结语
和其他技术相比, JSP技术在网页开发方面所具有的优势性更加明显, 其能够实现静态网页和动态网页的分离, 从而使得网页运行的效率能够被提升。 此外JSP技术的应用, 可以只对用户第一次请求代码进行编译, 在循环代码使用过程中不需要对代码进行再次编译过程, 从而使得整个代码编译过程可以被简化。 JSP技术是目前网页开发中最常使用的技术之一, 其对于网页性能的优化以及网页运行效率的提升都有着极大的意义, 因此相关人员应该加强对其的重视与应用。
参考文献
[1]邓子云.JSP网络编程从基础到实践[M].北京:电子工业出版社, 2014.
[2]殷佩楷.JSP 2.0动态网站开发实例指南[M].北京:机械工业出版社, 2013.
《网页前端技术》的课程设计 篇9
1.1 课程的性质
《网页前端技术》是高等职业院校计算机网络专业的一门专业核心课程, 是使学生掌握使用HTML语言和Dreamweaver设计网站, 使用Java Script添加网页动态效果, 使学生掌握网站的开发技能, 是实践性很强且面向实际应用的重要专业课。通过学习《网页前端技术》, 能够提高学生职业技能和素质, 为适应职业岗位和继续学习打下一定的基础。
1.2 课程的作用
本课程的教学目标是使学生能运用所学的网页编程知识, 根据实际问题进行静态网页的创建与维护、Java Script动态网页的编写, 使学生具有HTML静态网页设计与制作的基本能力。
2 课程设计的理念和思路
2.1 课程设计理念
《网页前端技术》课程的实施以工作过程导向为主体, 理论实践结合特征突出。是以学生最终就业为目的的教学过程、着重培养学生的网页设计与制作能力, 强调学生的学中做与在制作网页中的学习创新能力, 实现了理论实践一体化教学目标。
在《网页前端技术》的课程建设中, 以培养学生综合技能为导向, 按照项目案例的实施过程, 给学生设计从简单到复杂、从容易到困难的网页设计案例, 按照循序渐进的学习情景来展开, 教学过程以项目实施的过程为主导, 注重学生网页设计的能力培养。
2.2 课程建设思路
《网页前端技术》的课程建设思路注重专业领域的技术要求, 强调对学生网页设计与美化职业的岗位任职要求, 围绕着学生在网页制作与设计中容易出现的问题, 展开课程体系和教学内容的设计。
《网页前端技术》的课程建设原则:突出学生的实际运用能力, 同时, 以项目任务为载体, 以学生的个性训练和能力培养为主体。
《网页前端技术》的课程建设过程:首先, 针对市场工作岗位的需求, 分析出网站与网页设计人员的工作任务, 进性归纳总结出适合学生的具体项目任务, 然后设计出适合学生的基于工作过程的学习任务和情境。
3 课程设计
3.1 课程目标设计
(1) 能力目标。使学生能熟练运用HTML中的文字、链接、列表、表格、表单和图像;掌握Dreamweaver进行网站的制作与设计操作技能;掌握Javascript脚本编程语言的基本语法知识, 设计出绚丽的网页动态效果, 开发出富有创意的个性网站。
(2) 知识目标。能够了解网站的工作原理;了解WWW和HTTP协议, 掌握HTML和CSS的基本概念和作用;掌握Dreamweaver应用软件的使用功能;掌握表格、表单设计网页的方法;掌握添加网页动态效果的方法。
3.2 课程内容设计
(1) 知识模块划分。对现有知识点进行了解析与重构, 划分出彼此之间联系紧密的HTML网页技术、Css网站布局与样式、Javascript动态行为、网页制作综合实例四大知识模块。
(2) 教学内容设计。教学内容分为四大知识模块:
1) HTML网页技术基础知识。对应的能力目标有:能够独立安装Dreamweaver软件, 能够掌握HTML语言中的各种文本格式、字符格式、段落设置、列表、表单、框架的作用, 能够运用html编写简单的页面。
2) CSS网站布局与样式。对应的能力目标有:能够掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法;能够利用CSS美化网页, 给用户更好的网页体验。
3) Javascript动态行为。对应的能力目标有:能够掌握Javascript的核心语法。能掌握在HTML语言代码中嵌入Java Script代码的方法, 能看懂Java Script特效网页源代码;能够按网页设计技术要求修改和调试Java Script代码;能够使用Java Script语言实现网页特效。
4) 网页制作综合实例。通过HTML、CSS和Java Script的学习, 以及课程中设计到的小案例和项目的制作, 让学生自主创新, 独立制作完成一个门户网站的综合案例。
3.3 教学方法设计
(1) 项目导向法.本课程的教学内容是以学生的网页制作与设计的开发流程为依据展开的。利用计算机技术中的动画视频等先进技术进行教学。
(2) 分组教学.在网页制作与设计的教学中, 每个项目都是以学生实际的网页设计效果为考核目标的, 实践性都比较强, 学习难度较大。在教学中, 采用分组教学的方法, 可以让同学之间遇到问题能够互相探讨, 相互帮助协作完成任务, 进而激发学生学习的自信心和学习兴趣, 增强学生的创新意识, 设计出更具特色的个性网站。
3.4 考核方法设计
学期总评成绩采用百分制, 着重考核学生运用知识解决实际问题的能力。其中, 平时成绩占30%, 项目案例完成情况占30%, 期末项目作品占40%。
4 结束语
通过本课程的学习, 不仅可加强学生对理论知识的感性认识、加深对网站开发的理解, 而且能培养学生的实践技能, 提高网站开发与设计的实践动手能力。另外, 通过项目教学方法的渗入, 使学生在整个项目的进行过程中可以自主的学习, 自己找可以承担的学习任务来完成, 同时也学会了发现问题和解决问题的方法, 发挥了个人的最大能力, 提高自身的创新能力。
参考文献
彝文网页信息采集技术研究 篇10
随着网络技术的发展, 少数民族语言文字的信息也随之在网络上出现, 彝文网页就是其中之一。而由于彝文信息处理技术处于起步阶段, 缺乏相应的搜索引擎, 互联网上的彝文信息常常处于“孤立状态”, 给用户的查找和获取带来较大的困难。
彝文作为彝族地区传播科技知识的主要工具, 其独特的人类文化价值和社会价值在彝族地区所发挥的巨大作用是不可估量的。进入网络和计算机技术高速发展的信息时代, 古老的彝文字正经历着一场严峻的考验, 能否在数字化时代被更好的应用和发展。如果不能, 它就会逐渐丧失其作为彝族文化灵魂的深层内涵, 会在当今的数字化时代销声匿迹。
1 网页采集原理
网页的采集也是当今信息检索和数据挖掘的一个研究热点, 尤其针对目前还没发现通用的彝文搜索引擎的情况下, 论文提供的实验平台提供了一种获取网络信息资源的思路和方法, 同时也便于对网上彝文资源库的整理, 进而达到保护、弘扬彝族文化, 促进实现汉、彝族资源互通共享的目标。
网页信息采集, 是指使用一个或多个采集器 (俗称爬虫) 通过Internet某一个或多个Web页面开始, 按照Web页面之间的链接关系, 从Web上自动地获取页面信息, 并随着链接不断向所需要的Web页面扩展的过程[1]。可以说, 网页的自动采集主要是靠网络爬虫实现的, 爬虫程序是网页信息采集的核心部分。
1.1 网络爬虫
1.1.1工作原理
网络爬虫按照系统结构和实现技术, 大致可以分为以下几种类型:通用网络爬虫、聚焦网络爬虫、增量式网络爬虫、深层网络爬虫。本文中采用聚焦网络爬虫来实现彝文网页信息的采集。
网络爬虫 (Crawler) 是一个自动提取网页的程序, 它为搜索引擎从互联网上下载网页, 并沿着网页的相关链接实现在web中采集资源, 是一个功能很强的网页自动抓取程序, 也是搜索引擎的核心部件[2]。搜索引擎的性能, 规模及扩展能力很大程度上依赖于网络爬虫的处理能力。网络爬虫也被称作网络蜘蛛 (Spider) 或网络机器人 (Robot) 。
网络爬虫从一个或若干初始网页的URL开始, 获得初始网页上的URL, 在抓取网页的过程中, 不断从当前页面上提取新的URL放入队列, 直到满足系统的一定停止条件[3]。图1为网络爬虫的系统结构。
这个爬虫其逻辑框架主要包含网页获取模块、页面解析模块、网页判断和重复消除模块、URL数据库模块和web数据库模块等部分。
(1) 获取模块使用HTTP协议获取URL代表的页面。响应并传送某网页链接地址的HTTP请求至对应WEB站点的服务器, 根据请求得到的消息状态码的返回值确定下一步策略。
(2) 解析模块提取文本和网页的链接集合。解析模块负责获取网页的标题、正文、编码、URL等各类信息。
(3) 判断和重复消除模块决定网页解析出来的链接是否能够存入URL数据库。该模块将判断页面提取的URL地址是否存在于待处理的列表中, 若存在则去重, 终止该线程, 否则按照一定的判定规则对链接进行过滤, 并把符合条件的URL存放在URL数据库中。
(4) URL数据库包含爬虫当前待抓取的URL。根据URL数据库里面URL的链接内容抓取各类网页。
(5) web数据库模块负责对抓取的内容进行存储。用来存放经过提取出来的正文内容、主题和摘要等, 以备建立索引等应用。
1.1.2 网页搜索策略
网页的抓取策略可以分为深度优先、广度优先和最佳优先三种[4]。深度优先在很多情况下会导致爬虫的陷入问题, 目前常见的是广度优先和最佳优先方法。由于目前彝文网页相对较少, 本文选用广度优先搜索策略。
广度优先策略基本方法是从起始页开始, 对先获得的链接先抓取。就是先抓取起始网页中链接的所有网页, 然后再选择其中的一个链接网页, 继续抓取在此网页中链接的所有网页。进行循环式爬行, 直到满足一定的停止条件[5]。这种搜索策略的覆盖率很广, 采集的网页比较多。广度优先搜集策略实现方便, 不需要存储大量的中间节点, 可以并发执行, 从而提高整个程序的效率, 目前并被广泛采用。图2为广度优先策略的遍历图。
广度优先搜索是从图的顶点A出发, 在访问A之后, 依此搜索访问A的各个未被访问过的邻接点B、C、D… (在本文中是该页面的链接) , 然后顺序搜索访问B、C、D…的各个未被访问过的邻接点。即从A开始, 由近至远, 按层次依此访问与A有路径想通且路径长度分别为1, 2, …的顶点, 直至连通图中所有顶点都被访问一次[6]。这种方法保证了对网页内容的有效控制, 避免遇到一个无穷深层分支时无法结束的问题。
根据以上表格, 我们可以得出以下结论路径图:
路径1 =->A;路径2 =-> B-> C->D;路径3 =-> E-> F->G->H;路径4 =->I->J->K->L
1.2 网页采集的流程
Internet是Web的基础平台, Web是基于Internet的超文本 (hypertext) 系统, 是Internet平台上的一种应用层服务, 它将各种信息资源链接起来, 使得人们能够方便、快捷地发布或获取信息[7]。互联网从结构上去分析, 可以看作是一个巨大的网格图, 每个网页是图中一个节点, URL就是链接所有节点的弧。
网页采集系统通常首先从一个种子URL集开始, 利用某些网络协议和端口, 依次访问并获取每个URL所链接的页面;接着再分析这些已采集到的页面, 从中提取出新的URL, 将它们继续放入到待处理的URL列表中;然后一直不断地重复上述操作, 直到采集线程根据自己的搜索策略结束整个过程为止[8]。
2 彝文网络信息采集平台的设计
开发环境的选择, 对彝文网络信息获取平台的建设至关重要。本文选取C#编程语言开发程序, 使用Microsoft Visual Studio2010软件开发平台, 运用ACCESS数据库。
2.1 设计思路
彝文网络信息获取的研究, 是指对网络中包含彝文信息的相关网页的分析采集。由于目前彝文信息处理技术的现状和国家对少数民族网络信息安全的关注和重视, 因此本文在对彝文网页分析的基础上, 实现彝文网页的判定和文本内容等信息的获取。本文在对彝文网络信息获取和网页文本内容的存储的研究中, 主要分为四个功能模块:彝文网页判定模块、网页去重模块、网页信息提取模块、网页信息存储模块。基本思路如下:
(1) 设计彝文网络获取的相关算法和爬虫, 利用判定算法, 对相关的彝文网页进行采集。
(2) 对抓取的网页的部分关键信息提取, 提取的主要内容包括网页的文本标题、正文、日期以及链接 (URL地址) 等关键信息, 并存入数据库。
(3) 将提取的彝文文本信息在判断编码后转换成统一的编码形式存储, 便于下一步彝文数据分析的工作。
本文以中国彝学网为例, 进行网络信息获取技术的研究。流程如图3所示。
2.2 网页判定模块
2.2.1 URL获取
对彝文网络信息获取, 首先初始化URL, 本文通过选取中国彝学网为例, 获取彝文版的网页和超链接信息, 来进行彝文网页抓取和采集。中国彝学网彝文版首页的URL格式为:http://222.210.17.136:81/zgyx/indexyi.html。
首先获取首页地址内容;在此基础上获取该页面的所有的有效URL, 并将URL添加到数据库中。
核心代码如下所示:
所有有效URL已保存到ACCESS数据库后, 下面需要采集网页内容。
2.2.2 URL 判定
在采集网页内容之前, 需要筛选已保存的URL是否是文章页面的URL链接, 并判断是否已经采集过该URL。代码如下:
2.3 网页去重模块
网页信息采集模块的实现中, 网络爬虫遍历了整个空间的网页, 这也就是说所有的网络爬虫都会遍历一个新网页的所有内部链接, 而在这种搜刮式的网页遍历下, 网络爬虫难免会搜索到许多相同的网页, 不但因为其本身没有判别重复网页并实现排重的能力, 而且不同的网络爬虫之间也没有互相通讯识别的能力。因此, 需要将网络爬虫采集的初始网页进行排重识别, 从而剔除一些重复冗余的网页, 以便大幅度地减少网页的数量, 提高网页搜索的效率, 降低后续操作的工作量和复杂度。
2.4 网页信息提取模块
通过对采集的彝文页面信息进行解析, 对网页的标题、发布时间、来源、URL、正文的信息进行判断和提取, 并把提取的信息转换格式存储到统一的ACCESS数据库中, 便于下一步检索等相关工作的开展。为了实现以上功能, 本文系统在识别页面中URL字符串的过程中使用正则表达式进行匹配。网页的提取可以利用正则表达式提取网页内容。
本部分从下载的网页中抽取到相关的信息, 并保存到自定义格式的文本文件中, 以便对网页信息的存储。
2.4.1 网页标题提取
网页标题能够直接反映网页的主题信息。本文通过正则表达式的方法提取彝文网页的标签, 并逐个处理得到的标签, 通过get Regex Str () 方法得到网页的标题, 并写入ACCESS数据库中。正则表达式表示为:
核心代码如下:
2.4.2 网页发布时间及来源的提取
网页的发布时间和来源是查看网页的重要属性。代码如下:
2.4.3 网页正文提取
2.5 网页信息存储模块
通过对存储的网页信息提取, 将具体内容包括网页标题、网页发布时间、网页来源、正文数据段、网页URL和关键词 (导向词来源) 等信息存储采集到的数据库中, 并保存到文本文件。图4为ACCESS数据库存储信息。
核心代码如下所示:
2.6 性能测试
网络爬虫采集算法测试和评价有很多指标, 其中有两个重要的通用指标:查全率和查准率。
查全率:
查准率:
在本文中, 爬虫所抓取的范围限制在中国彝学网范围内, 因此在性能测试中, 网站所包含的相关文档总量等同于文档总量。故两个指标是相同的, 在这里我们用查全率来表示。
通过彝文网页信息采集平台, 中国彝学网中采集到的URL总数为92, 即系统中相关文档总量为92;存储到TXT的正文文档数为62, 即采集的相关文档量为62。因此:
查全率 = 查准率 = = 67.39%
由测试结果可知, 对中国彝学网 (彝文版) 进行采集, 采集准确率不高, 通过分析发现产生的原因主要是由于部分彝文网页是图片格式和彝文网站过少, 导致了采集结果不理想的情况。
3 总结和展望
本文以少数民族文字彝文网站 (中国彝学网) 为例, 对彝文网页信息进行采集和获取。首先阐述了网页信息采集和网络爬虫的工作原理, 分析和用于彝文网页;其次构建彝文网页信息采集模型, 并进行设计和研究, 分别对彝文网页判定模块、网页去重模块、网页信息提取模块、网页信息存储模块共四个模块进行了介绍;最后对彝文网页信息采集性能进行了测试, 通过查全率和查准率得知, 采集效果达到67%左右。
本文对彝文网页信息采集技术做了一些研究, 取得了一定的成果, 但是由于时间和精力有限, 仍存许多不足, 需要今后进一步加以改善, 在彝文网页判别等方面还要更一步的研究, 提高查全率和查准率, 为以后的彝文分词、分类打好基础。
摘要：本文通过对中文网页采集流程、网络爬虫工作基本原理的分析, 再结合彝文网页的特点, 对彝文网页信息的采集技术进行了研究, 通过聚焦网络爬虫来实现彝文网页信息的采集, 并依此来建立一个内容全面的彝文网页信息资源库。
关键词：彝文网页,网络爬虫,信息采集
参考文献
[1]吴丽辉, 王斌, 余智华.一种通用Web信息采集系统的设计与实现[J].计算机工程, 2009, 31 (3) :123-124.
[2]罗刚, 王振东.自己动手写网络爬虫[M].北京:清华大学出版社, 2010:16-47.
[3]王思丽.藏文网页自动发现与采集技术研究[J].西北民族大学, 2010.
[4]Carlos Cobos, Henry Munoz-Collazos, Richar Urbano-Munoz.Clustering of web search results based on the cuckoo searchalgorithm and Balanced Bayesian Information Criterion.Information Sciences 281 (2014) 248–264.
[5]吴虎子.中文网页获取及自动分类技术研究[D].武汉理工大学硕士论文, 2007.
[6]陈杰.主题搜索引擎中网络蜘蛛搜索策略研究[D].浙江大学硕士论文, 2006.
[7]Enver Kayaaslan, B.Barla Cambazoglu, Cevdet Aykanat.Docume nt replication strategies for geographically distributed websearch engines.Information Processing and Management 49 (2013) 51–66.
网页开发技术 篇11
摘 要：随着无线网络技术的快速发展和移动终端设备的普及，移动学习日益受到人们关注。移动学习资源是移动学习的第一要素。本文将一般网络学习资源与移动学习资源进行对比研究，分析二者的共同点与区别之处，基于HTML和CSS技术提出学习资源的样式改造方法，最后以“初中信息技术”网络课程为例，实现网络学习资源向移动学习资源改造的开发实践。
关键词：移动学习资源；网络学习资源；样式改造；CSS
中图分类号：G434 文献标识码：A 文章编号：1673-8454（2014）21-0039-03
一、引言
移动学习是使用移动便携式设备所开展的学习，即利用无线网络通信技术和移动终端设备获取教育信息、教育资源和教育服务的一种新型学习模式。[1]现阶段的移动学习发展主要得益于三个方面的条件：无线网络、移动终端设备和移动学习资源。而移动学习资源是移动学习中的核心，是对现有学习资源的一种拓展，是开展一切移动学习活动的基础。因此，移动学习资源质量的高低直接影响了移动学习的成效。[2]但是由于移动学习兴起时间尚短，移动学习资源建设有所不足，难以满足学习者需求，影响了移动学习的开展，是一个急需解决的重要问题。
二、网络学习资源与移动学习资源
网络学习资源是指学习者基于计算机网络开展的各种网络化的 信息资源的总称，它可以在网络环境下运行并且能够用浏览器来阅读。[3]并且经过长时间的积累，网络学习资源的内容已经非常的丰富。尽管网络学习资源在内容大小、文件格式等方面与移动学习资源有着不同，但是同样做为远程学习的一部分[4]，移动学习资源与网络学习资源也存在许多相似之处：
（1）内容丰富：网络学习资源和移动学习资源利用网络的开放性，拥有大量的可供选择的学习资源，为学习者提供了丰富的选择空间。
（2）资源共享：网络学习资源和移动学习资源一样，打破了传统学习资源的限制，使得学习者可以方便地从网络上获取学习资源。
（3）交互性强：网络学习资源和移动学习资源都可以进行同步或异步的交互，实现学习者与教师、学习者与同伴、学习者与资源之间的双向交流。
目前移动学习资源的开发主要有两个方面[1]。一是新建移动学习资源，二是对原有网络资源进行改造，二者是相互搭配的。对已有的网络学习资源进行改造不仅可以缓解一部分资源需求压力，而且可以有效地利用现有学习资源，节约开发成本。而且重要的一点是：移动终端设备可以适应多种学习资源[5]，这种适应性不仅能充分利用现有的学习资源，而且可以节约资源制作成本。所以，对原有的网络学习资源样式进行改造和开发新资源是移动学习资源建设的两个方法，科学的建设和合理的改造必然能够解决当前移动学习资源面临的困境。本文选取了对网络学习资源样式的改造这一方法进行深入研究。
三、移动学习资源的样式改造
1.总体流程
对网络学习资源基于样式的改造流程大体如图1所示。首先用户访问网络学习资源，当服务器判断其终端设备为移动设备后后，从样式库中调取与之配套的样式，然后对学习资源进行重新布局与渲染，使同样的内容在不同的移动设备上呈现出相应的显示效果。[1]
2.详细设计
布局与渲染是样式改造流程中的关键部分，本文将就这一部分进行深入研究。
（1）实现技术
实现移动学习资源样式的重新布局和渲染的两个元素为HTML和CSS。HTML的英文全称为Hyper Text Markup Language，它是网页超文本标记语言的缩写，是Internet上用于编写网页的主要语言。而CSS是Casading Style sheet 的缩写，又称为层叠样式表，简称样式表。它是一种用于定义如何显示HTML元素的标记语言，是实现移动学习资源样式改造的关键元素[6]。CSS具有以下优点：①表现和内容相分离，将设计部分分离出来放在一个独立样式文件中；②一个CSS样式可以控制多个页面的样式，可以将许多网页的风格格式同时更新；③样式表允许多种方式规定样式信息。添加CSS有4种方法：外联样式表、内部样式表、导入外部式样式表和内嵌样式。
CSS对于样式的描述主要由两个部分组成，选择器和一条或多条声明
Selector{declaration1；declaration2；….declarationN}
选择器selector指需要改变样式的HTML元素，而声明declaration是由属性property和值style Arrtibute组成，属性指的是希望设置的样式属性，值指的是这个属性的取值[6]。
例如：h3{color：black；font-size：16px；}
该段代码的意思是将h3元素的文字设置为黑色16像素。
HTML和CSS都是对页面进行布局和美化的工具，利用CSS可以对同一个网络资源呈现出多种形式。这便是基于已有网络学习资源改造的基础，根据不同设备的分辨率等参数情况调整布局和样式方案。
（2）具体实验
以初中信息技术课程资源为例（如图2）。
该课程资源原本是作为网络教育的学习资源进行开发的，目标用户是使用个人电脑进行网络学习的学习者。可以看出，该页面采用的是传统的header、content和footer的结构布局。最上方为课程名称、logo和导航菜单，下方为当前栏目的学习内容。该页面默认显示的是第一章的第一节。整体来看，菜单栏和内容合理有效地整合在同一页面，适合学习者进行网络学习。针对该网络课程资源，本文为手机等移动设备开发了一套样式mobile.css，该样式的运行流程如下：
首先设置整个页面的样式、外边距和内边距，并设置文字的默认大小和背景图。以及主体页面宽度及背景颜色。该步骤的关键代码如下：endprint
body{
margin：0px；
padding：0px；
font-size：12px；
background-image：url（images/body.gif）；
}
#box{
width：320px；
margin：0 auto；
background-color：#FFFFFF；
}
其次是导航菜单的样式。设置整个菜单的高度和上边框，然后设置菜单中超链接元素的字体样式和间距：
#menu{
height：36px；
border-top：0px solid#000000；
}
#menu a {
font-family："宋体"；
font-size：12px；
color：#000000；
line-height：16px；
padding：0px 2px；
text-decoration：none；
display：inline-block；
}
设置各标题和正文段落的文字格式：
h3{
font-size：12px；
text-align：center；
border-bottom：1px dashed #999999；
line-height：35px；
}
h4{
text-align：right；
font-family：Arial， Helvetica， sans-serif；
font-size：12px；
color：#666666；
}
#content p {
font-size：12px；
text-indent： 2em；
line-height：25px；
margin-top：10px；
设置图片的显示效果。图片独占一行且居中显示在正文中间。需要知道的是，图片和普通文字一样是个内联元素。相当于一个比较大的文字，因此需要利用display属性来将图片转换为块元素：
#content img {
display：block；
margin：auto；
max-width：600px；
max-height：400px；
}
当学习者通过网络访问学习资源时，移动终端的自适应系统接受信息并判断学习者设备类型，确定是否为移动设备[7]。然后确定该设备型号，并从数据库中调出该设备的样式信息。将该样式运用到当前的内容上。
（3）实验结果
显示效果如图3。
手机上呈现的页面（如图3）和PC端呈现的页面存在着显著的不同，手机页面上的字体，字体大小，布局更加适合学习者在移动学习中操作。
四、结束语
网络学习资源的改造是移动学习资源建设的有效途径之一。本文通过HTML和CSS改变了原有网络学习资源的样式，使之适应移动学习终端的屏幕和分辨率，成为有效的移动学习资源，这个过程也是移动学习自适应系统的一部分。根据目前的移动学习资源建设情况，移动学习资源的开发不仅仅需要样式的改造，更要符合移动学习资源的开发原则[8]，将HTML和CSS技术与移动学习资源开发理论相结合，会使建设出高质量移动学习资源的前景将更为广阔。
参考文献：
[1]盛东方.移动学习资源开发与管理方法研究[D].南京大学，2013.
[2]刘应芬.移动学习环境下的学习资源描述研究[D].云南大学，2012.
[3]杨叶，陈琳，董启标.响应式Web移动学习资源技术实现与设计研究[J].现代教育技术，2013（6）：107-110.
[4]董坤坤，戴心来，陈恳.基于LMA软件的移动学习资源设计[J].现代教育技术，2009（6）：76-78.
[5]顾凤佳.微型移动学习资源的可用性研究[D].华东师范大学，2010.
[6]徐琴.CSS+DIV网页样式与布局[M].北京：航空工业出版社，2012.
[7]高辉.移动学习环境下信息内容自适应呈现的设计与实现[D].江苏师范大学，2012.
[8]刘明春.基于智能手机的移动学习[J].中小学电教，2012（4）：56-58.
DIV+CSS网页布局技术初探 篇12
伴随着互联网的迅速推广,愈来愈多的人得益于网络的发展和壮大,每天无数的信息在网络上传播,人们在其中徜徉搜寻,各得其乐,而形态各异、内容繁杂的网页就是这些信息的载体。随着时间的流逝,Web标准化设计思想开始逐渐浮出水面,同时带来了业界对DI V+CSS的标准化设计的关注,目前各大网站都在逐渐受到DI V+CSS设计思想的影响。在DI V+CSS设计思想中,DI V和CSS分别是两种不同的网页设计技术,下面先简单的介绍一下这两种技术。
1 什么是DIV和CSS
DI V是指HTML标记集中的标记“
CSS是Cas cadi ng St yl e Sheet s的简称,中文译作“层叠样式表”,通常把它称作样式表,是一种格式化网页的标准方式。在网页中使用CSS技术,不光可以控制大多数传统的文本格式,还可以有效地对页面的布局、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者不同页面的网页的外观和格式。
在CSS标准里,不仅重新定义了HTML原有的样式,如文字的大小、颜色等,更加入了重叠文字、区块变化及任意位置放置等多项新属性。通过CSS可以使用更丰富、更灵活的样式,设计出更美观的网页。同时,也让网页的设计与维护更有效率。
2 网页中采用DIV+CSS的优势
DI V+CSS作为一种新的网页设计技术,既然能够获得业内的认可,并且快速的流行起来,说明该技术与传统的网页布局显示设计技术比较起来优势是十分明显的。如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉、容易上手,但是,它却阻碍了一种更好的、更有亲和力的、更灵活的,而且功能更强大的网站设计方法——DI V+CSS。使用DI V+CSS技术可以使网页的内容和样式进行分离,这对于所见即所得的传统表格(t abl e)布局设计方式是一个很大的冲击,尤其是设计人员很难接受设计一个他们不能立即看到的样式,但是DI V+CSS的优势实在太明显了。
(1)网页改版维护更加方便快捷
在一个基于表格(t abl e)设计的网站基础上进行改版,几乎必须改变所有页面的结构代码,实在是太过于麻烦。使用CSS技术在于可将网页要展示的内容与其表现的样式分开,也就是将网页的外观设定信息从网页的内容中独立出来,并集中管理。这样,当要改变网页外观时,只需更改样式设定的部分,HTML文件本身并不需要任何的更改。CSS还可以将原来内置在网页中的CSS设置提取到网页外部,单独保存成一个文本文件,设计者只要根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。对CSS文件进行修改后,其他HTML文件中自动进行套用,让设计者不必一一在每个HTML文件中重复设置,可减少设计者许多负担,修改页面的时候更加容易省时。
(2)保持视觉的一致性
以往使用表格嵌套制作方法设计网页时,会使得页面与页面,或者区域与区域之间的显示效果会有偏差,并且由于网站往往由多人完成,而每个网页设计者会按照自己的喜好制作网页,因此不同人员开发网页风格不一致,很难放在同一个网站中。现在运用DIV+CSS技术,可以方便地为所有网页设置一种风格,再交由不同部门、不同地方的人制作网页,使用DIV+CSS的制作方法,将所有页面,或所有区域统一由CSS文件控制,很好避免了不同区域或不同页面体现出的效果偏差。同时由于网站做出来是给浏览者使用的,使用表格技术设计出来的网页,当操作系统及分辨率发生变化时,页面有时会出现变形现象,页面中使用DIV+CSS技术在这方面将更具优势。对浏览者和浏览器更具亲和力,CSS中富含的丰富样式也将使页面更加灵活,并可以根据不同的浏览器达到显示效果的统一和不变形。
(3)使页面载入得更快
很多网页为求设计效果,在网页中使用了大量图像,以致网页的下载速度变慢。CSS提供了很多文字样式的设定,且再加上IE内建的滤镜特效,因此可轻松取代原来图像才能表现的视觉效果。这样的设计方式让页面体积变小,大大提高了下载速度,这就使得对于某些控制主机流量的网站来说是最大的优势。同时由于设计者将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载,而不像表格嵌套那样将整个页面圈在一个大表格里,由此页面加载速度大大得到提高。
(4)对搜索引擎友好程度高
搜索引擎主要使用一种叫Spider的程序用来做基于内容的站点查找。Spider程序从一个或几个简单的页面开始执行,然后这些页面被扫描,索引到其他页面,Spider程序再访问这些Web页面,重复上面过程,直到没有新页面的索引出现,这个程序才中止。使用TABLE进行网页布局的代码比较多,搜索引擎要把多的代码去掉,看文字比较复杂。而使用DIV+CSS布局设计网页,所有样式都在CSS里,正文里面只有ID调用的部分,正文代码得到极大的精简,也减少了HTML代码,正文就突出了,搜索程序就能在更短的时间内爬完整个页面,搜索程序执行效率也就得到提高,这样对收录质量有较大好处,因此更加容易被收录。同时代码简化了就会受到搜索程序喜欢,这样对收录数量有一定好处,在搜索引擎中评分也会比较高,网站的排名就会靠前。
3 网页中采用DIV+CSS的缺陷
上面已经总结了很多DIV+CSS的优点,但是网页设计人员在使用DIV+CSS技术设计网页的同时也不能忽视该技术的一些不足。
(1)DIV+CSS技术使用常常出现困难
尽管DIV+CSS不是高不可及,但使用起来还是比表格定位复杂的多,甚至有些网站设计高手使用起来都常出现问题,更不要说初学者了。并且编写样式表文件一般都使用文本编辑器进行编写,相比较表格进行布局时一般是在所见即所得的可视化环境下进行,使用文本编辑器编写代码这一过程往往比较枯燥。
(2)DIV+CSS技术尚未兼容所有浏览器
使用CSS技术进行网站设计时,经常会设计1个或几个外部文件,网页中使用到的字体颜色、字体大小及图片等信息都包含在内。从目前来看DIV+CSS已经解决了大部分浏览器兼容问题,但是在部分浏览器中仍然会有异常出现,比如在火狐浏览器中显示正常的页面,到了IE中由于对部分代码的理解不同,可能会有意想不到的效果,甚至面目全非。当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。同时由于CSS样式文件往往信息复杂,有些网站引用到比较庞大的CSS文件时一旦CSS样式文件调用出现异常,那么整个网站的信息将出现混乱,效果惨不忍睹。
(3)DIV+CSS对搜索引擎优化与否,网页设计者的专业水平占主导地位
利用表格技术和DIV+CSS技术是目前主要的设计方式,何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及Web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。
4 结束语
通过对DIV+CSS技术的优势和缺陷进行分析,我们可以发现,虽然DIV+CSS技术的优势明显,但是在没有任何DIV+CSS技术基础的前提下,要转入DIV+CSS的开发,可能会走很多弯路,设计出来的网页往往很难达到预期效果。如何能够合理运用WEB 2.0标准设计出好的网页,这是需要循序渐进的学习和实践才能够达到的。同样,要想将DIV+CSS技术运用的更好,更是离不开长时间的学习和丰富的设计经验的积累,只有这样,才能很好的掌握这门技术。
参考文献
[1]陈刚.CSS标准网页布局开发指南[M].北京:清华大学出版社,2007.
[2]曾顺.精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社,2007.