Ⅰ 网页设计和网站开发用到的技术有哪些
A—AJAX
AJAX全称为“AsynchronousJavaScriptandXML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。根据Ajax提出者JesseJamesGarrett建议,AJAX:
使用XHTML+CSS来表示信息;
使用JavaScript操作DOM(DocumentObjectModel)进行动态显示及交互;
使用XML和XSLT进行数据交换及相关操作;
使用XMLposite)的技术正在出现,如AFLAX。
B—Browser
网页浏览器是个显示网页服务器或文件系统内的文件,并让用户与此些文件交互的一种软件。它用来显示在万维网或局域网
等内的文字、图像及其他信息。这些文字或图像,可以是连接其他网址的超连结,用户可迅速及轻易地浏览各种信息。大部分网页为HTML
格式,有些网页需特定浏览器才能正确显示。个人电脑上常见的网页浏览器按照2010年1月的市场占有率依次是微软的Internet
Explorer、Mozilla的Firefox、Google的GoogleChrome、苹果公司的Safari和
Opera软件公司的Opera。浏览器是最经常使用到的客户端程序。Web开发人员应该确保其程序在各个主流浏览器中都能正常工作。
C—CSS
层叠样式禅裤表,又称:串样式列表,英文:CascadingStyleSheets,简写为CSS,由W3C
定义和维护的标准,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。目前最新版本是
CSS2.1,为W3C的候选推荐标准。下一版本CSS3仍然在开发过程中。
D—DOM
文档对象模型(DocumentObjectModel,简称DOM),是W3C组织推荐的处理可扩展置标语言
的标准编程接口。DocumentObjectModel的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战
”(browserwars),双方为了在JavaScript与JScript
一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,计有VBScript、ActiveX、以及微软自家的DHTML
格式等,使不少网页使用非微软平台及浏览器无法正常显示。消袭雹DOM即是当时蕴酿出来的杰作。
E—Events
事件是可以被控件识别的操作,如按下确定按钮,选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件,如窗体的加载、单击、双击等事件,编辑框(文本框拿帆)的文本改变事,等等,现代的Web应用程序很大程度上依靠事件驱动。
事件有系统事件和用户事件。系统事件由系统激发,如时间每隔24小时,银行储户的存款日期增加一天。用户事件由用户激发,如用户点击按钮,在文本框中显示特定的文本。事件驱动控件执行某项功能。触发事件的对象称为事件发送者;接收事件的对象称为事件接收者。
使用事件机制可以实现:当类对象的某个状态发生变化时,系统将会通过某种途径调用类中的有关处理这个事件的方法或者触发控件事件的对象就会调用该控件所有已注册的事件处理程序等。
F—Firebug
Firebug是网页浏览器MozillaFirefox
的一个扩展,是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的CSS、HTML、DOM、与JavaScript
代码。Firebug也有提供其他网页开发工具,例如Yahoo!的网页速度优化建议工具YSlow。Firebug是哈维(Joe
Hewitt)撰写的。他是最初Firefox创始者之一。
G—Grid
网格,也称栅格,不过从定义上说,栅格更为准确些。网上找个一个对网页栅格系统比较恰当的定义
:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说,栅格系统的使用,不仅可以让
网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。如果有很多CSS框架支持栅格功能,可参考文章《
介绍27款经典的CSS框架》。
H—HTML
超文本置标语言(英文:HyperTextMarkupLanguage,HTML)是为“网页创建和其它可在网页浏览器
中看到的信息”设计的一种置标语言。HTML被用来结构化信息——例如标题、段落和列表等等,也可用来在一定程度上描述文档的外观和语义。由
蒂姆·伯纳斯-李给出原始定义,由IETF用简化的SGML(标准通用置标语言)语法进行进一步发展的HTML,后来成为国际标准,由
万维网联盟(W3C)维护。
最新版本是HTML5它是HTML下一个的主要修订版本,现在仍处于发展阶段。目标是取代1999年所定订的HTML4.01和
XHTML1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。广义论及HTML5时,实际指的是包括HTML、
CSS和JavaScript在内的一套技术组合。
I—IE
WindowsInternetExplorer(旧称MicrosoftInternetExplorer,简称
InternetExplorer,缩写IE),是微软公司推出的一款网页浏览器
。截至2010年9月止,统计的数据显示InternetExplorer的市场占有率
高达59.65%。虽然它依然是使用最广泛的网页浏览器,但与2003年最高峰时相比,市场占有率相差超过30%。
InternetExplorer对一些标准化技术都有一定程度上的支持,但亦有很多运行上的差距和兼容性的故障
,这导致技术开发者的批评日益增加。批评增加的情况,在很大程度上是归因于Internet
Explorer的竞争对手相对地已提供完全的技术支持,标准规格(Standards-compliant)的应用亦越来越广泛起来。因为
InternetExplorer在全球广为应用,网络开发者们在寻求跨平台的代码时常常会发现Internet
Explorer的漏洞、私有的功能集合和对标准支持的不完善。
2011年3月14日发布的InternetExplorer
9浏览器大幅提高对CSS3和HTML5等W3C规范的支持程度,这个版本也是Internet
Explorer浏览器第一个采用GPU加速的版本,正式版于Acid3测试中获得95/100分,相比以往版本有很大进步。可以认为,从
InternetExplorer9开始,InternetExplorer浏览器对W3C规范的支持将不再是问题。
J—JavaScript
JavaScript是一种广泛用于客户端Web开发的脚本语言
,常用来给HTML网页添加动态功能,比如响应用户的各种操作。它最初由网景公司的BrendanEich
设计,是一种动态、弱类型、基于原型的语言,内置支持类。JavaScript是Sun公司的注册商标。Ecma国际
以JavaScript为基础制定了ECMAScript
标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,
文档对象模型,字节顺序记号。
Netscape公司在最初将其脚本语言命名为LiveScript来Netscape在与Sun合作之后将其改名为JavaScript。
JavaScript最初受Java
启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计原则
源自Self和Scheme
.JavaScript与Java名称上的近似,是当时网景为了营销考虑与Sun公司达成协议的结果。为了取得技术优势,微软推出了JScript
来迎战JavaScript的脚本语言。为了互用性,Ecma国际(前身为欧洲计算机制造商协会
)创建了ECMA-262标准(ECMAScript)。现在两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的
脚本语言,而非作为给程序人员的编程语言来推广和宣传,但是JavaScript具有非常丰富的特性。
K—KeywordOptimization
关键词优化,也叫搜索引擎优化(SearchEngineOptimization,简称SEO)是一种利用搜索引擎
的搜索规则来提高目的网站在有关搜索引擎内的排名的方式。由于不少研究发现,搜索引擎的用户往往只会留意搜索结果最前面的几个条目,所以不少网站
都希望通过各种形式来影响搜索引擎的排序。当中尤以各种依靠广告维生的网站为甚。
所谓“针对搜索引擎作优化的处理”,是指为了要让网站更容易被搜索引擎接受。搜索引擎会将网站彼此间的内容做一些相关性的数据比对,然后再由浏览器将这些内容以最快速且接近最完整的方式,体现给搜索者。
搜索引擎优化对于任何一家网站来说,要想在网站推广中取得成功,搜索引擎优化都是至为关键的一项任务。同时,随着搜索引擎不断变换它们的排名算法规
则,每次算法上的改变都会让一些排名很好的网站在一夜之间名落孙山,而失去排名的直接后果就是失去了网站固有的可观访问量。所以每次搜索引擎算法的改变都
会在网站之中引起不小的骚动和焦虑。可以说,搜索引擎优化是一个愈来愈复杂的任务。
L—Less
Less
最早是一个ruby的gem,让CSS具有动态语言的特性,这些特性包括变量,操作符,嵌套规则。其实Less真正的作用是将使用高级特性的CSS转换成
标准的CSS。这些都是在Web客户端发起请求时通过mandlineinterface),或者产生图形用户界面(GUI)程序。PHP最早由Rasmus
Lerdorf在1995年发明,而现在PHP的标准由PHPGroup和开放源代码社区维护。PHP以PHP
License作为许可协议,不过因为这个协议限制了PHP名称的使用,所以和开放源代码许可协议GPL不兼容。
PHP的应用范围相当广泛,尤其是在网页程序的开发上。一般来说PHP大多运行在网页服务器上,通过运行PHP代码来产生用户浏览的网页。PHP可
以在多数的服务器和操作系统上运行,而且使用PHP完全是免费的。根据2007年4月的统计数据,PHP已经被安装在超过2000万个网站和100万台服
务器上。
Q—Query
查询,有很多种意思。例如查询语言用来和存储数据的扩展系统交互,一个很好的例子就是SQL用来操作关系数据库。另一种意思是,一个查询字符串,作为URL的一部分用于Web应用程序中传递数据,查询字符串的格式一般是键值对形式。
R—RegularExpressions
正则表达式(英语:RegularExpression、regex或regexp,缩写为RE),也译为正规表示法、常规表示法
,在计算机科学中,是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。在很多文本编辑器
或其他工具里,正则表达式通常被用来检索和/或替换那些符合某个模式的文本内容。许多程序设计语言都支持利用正则表达式进行字符串操作。例如,在
Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件(例如sed和grep)普及开的。
S—SourceControl
源代码管理,也称版本控制,是一种软件工程技巧,借此能在软件开发的过程中,确保由不同人所编辑的同一程式档案都得到同步。软件设计师
常会利用版本控制来追踪、维护源码、文件以及设定档等等的更动,并且提供控制这些更动控制权的程序。在最简单的情况下,软件设计师
可以自己保留一个程式的许多不同版本,并且为它们做适当的编号。这种简单的方法已被用在很多大型的软件专案中。这是一个可以达到目的的方法,但不够有效
率。除了得同时维护很多几乎一样的程式码备份外;而且极度依赖软件设计师的自我修养与开发纪律,但这却常是导致错误发生的原因。
有时候,一个程式同时存有两个以上的版本也有其必要性,例如:在一个为了部署的版本中程式错误
已经被修正、但没有加入新功能;在另一个开发版本则有新的功能正在开发、也有新的错误待解决,这使得同时间需要不同的版本并修改。此外,为了找出只存在于
某一特定版本中的程式错误、或找出程式错误出现的版本,软件除错者也必须借由比对不同版本的程式码以找出问题的位置。
T—TDD
测试驱动开发(Test-drivendevelopment)是现代计算机软件开发方法的一种。利用测试来驱动软件
程序的设计和实现。测试驱动开始流行于20世纪90年代。测试驱动开发是极限编程
中倡导的程序开发方法,方法主要是先写测试程序,然后再编码使其通过测试。测试驱动开发的目的是取得快速反馈并使用“illustratethe
mainline”方法来构建程序。
测试驱动开发的比喻。开发可以从两个方面去看待:实现的功能和质量。测试驱动开发更像两顶帽子思考法的开发方式,先戴上实现功能的帽子,在测试的辅
助下,快速实现正确的功能;再戴上重构
的帽子,在测试的保护下,通过去除冗余和重复的代码,提高代码重用性,实现对质量的改进。可见测试在测试驱动开发中确实属于核心地位,贯穿了开发的始终。
U—UnitTesting
单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在
过程化编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类(超类)、抽象类、或者派生类(子类)中的方法。
通常来说,程序员每修改一次程序就会进行最少一次单元测试,在编写程序的过程中前后很可能要进行多次单元测试,以证实程序达到软件规格书(
en:Specification)要求的工作目标,没有臭虫;虽然单元测试不是什么必须的,但也不坏,这牵涉到项目管理的政策决定。
V—VIM
Vim是从vi发展出来的一个文本编辑器。代码补完、编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用。和Emacs
并列成为类Unix系统用户最喜欢的编辑器。Vim的第一个版本由BramMoolenaar在1991年发布。最初的简称是Vi
IMitation,随着功能的不断增加,正式名称改成了ViIMproved。现在是在开放源代码方式下发行的自由软件。
W—WordPress
WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库
的服务器上架设自己的网志。也可以把WordPress当作一个内容管理系统(CMS)来使用。WordPress是一个免费的开源
项目,在GNU通用公共许可证
下授权发布。目前最新版本为2011年2月24日发布的3.0.5官方简体中文版,另外还有包括英文在内的多种语言可选。
X—XSS
跨网站指令码(Cross-sitescripting,通常简称为XSS)是一种网站应用程式的安全漏洞攻击,允许恶意使用者将程式码注入到网页上,其他使用者在观看网页时就会受到影响。这类攻击通常包含了HTML以及使用者端脚本语言。
Y—YUI
Yahoo!UILibrary(YUI)是一个开放源代码的JavaScript函数库,为了能建立一个高互动的网页,它采用了AJAX,DHTML和DOM等程式码技术。它也包含了许多CSS资源。
Z—Zindex
Z-Index
是CSS属性,设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿z轴的位置,z轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
Ⅱ 网页制作都包括哪些技术
以下是网页设计需要学习的知识希望能帮助到你
第一阶段(美学设计与软件技能)
一、设计预科
1、商务办公:windows、word、excel、ppt办公应用;办公软件在专业中的应用
2、美术设计基础:设计素描、水粉、速写的原理及实践,投影、视图、透视,灯光表现,写生
3、美术设计提高:设计素描、水粉提高课程、光和影的写实手法、审美观念的提高、色彩搭配的提高,配色原理的提高。
4、手绘图标:二维剪影图标、三维写实图标案例实训,了解创意在设计中的具体运用;理解创意思维的形态置换原理;掌握将创意思维转化为图形样式的能力
5、阶段考核:完成描素、色彩图各一张
二、设计软件
1、Photoshop:Adobe公司大师级图像软件入门讲解。掌握该软件在平面广告、网页设计、UI设计以及室内设计等专业中的相关操作。
2、Illustrator:Adobe公司专业级矢量软件入门讲解。掌握该软件在创意广告设计、印刷出版与web网络创作、多媒体和UI图标界面设计的相关操作。
3、Dreamweaver:讲解DW的人性化功能以及在页面架构和前端开发应用领域的使用技巧,HTML基础应用,快速入门,CSS样式表的应用,模板布局的使用技巧,如何管理网站并上传。
4、Fireworks:讲解FW在网页切片、图层、帧、gif动画、画布设置中的应用以及配合其他软件进行使用
第二阶段(WEB界面与整站项目设计)
一、三大构成
1、平面构成与设计:点的构成形式、线的构成形式、面的构成形式,训练各种熟练的构成技巧和表现方法,培养审美观及美的修养岩链和感觉,提高创作活动和造型能力-活跃构思。
2、色彩构成与设计:学习色彩与视觉的原理、三要素及色彩对比、色彩推移、综合对比及色调变化、表现手法、色彩视觉心理与性格的对比;提高综合审美能力。
3、立体构成与设计:立体构成的概念特征及作用、材料要素及加工工具、视觉效果和心理感受、立体构成的设计应用、立体构成与建筑设计、立体构成与工业产品设计等方面应用
二、WEB界面设计
元素设计
1、网页Banner排版与设计
1)Banner版面设计的规则与规范,版面的排版。色相的选择,色调的调整。让banner制作更速成化。
2)Banner广告强化设计,主要讲解banner制作标准及要求、纯文字banner实例、金融业banner实例、快销品banner实例、文字横排/竖排/斜排的风格差异、服装类banner实例、化妆品banner实例、数码类banner实例、配饰类banner实例
2、网页元素
及规范:页面设计基本流程与设计规范的概念性讲解,重点了解WEB界面设计规范及页面元素;网页配色技巧、色彩与构图的概念及技巧;网页导航与按钮设计
三、WEB整站设计实亮判训
1、网站设计流程
与策划:网站设计流程,网站设计理念创新,网页结构图与原型图绘制等;如何从零开始策划一个网站,包括主题定位、栏目规划等,如何去策划盈利模式。
2、电商平台类
网站项目实训:商业案例实训如京东、小米等平台,重点学习网站整体架构设计、栏目规划、页面制作及系列产品总体界面风格设计,布局技巧及细节设计技巧,各类网页交互设计应用、响应式设计应用的展示
3、企业类
网站项目实训:如苹果、腾讯企业类平台,重点学习页面主题设计如TOP部分设计,BANNER设计,产品页设计敬枣改,新闻页设计,首页设计,类各设计技巧如网页的尺寸、页面的留白、图层与图像的关系、网页导航设计、字体的排版设计、广告条(banner)制作、正文内容的详细设计
4、分类网站项目实训及阶段考核:教师指导你完成阶段设计作品,以备应聘时使用;从立案到素材、材料收集整理,再到风格定位、栏目规划,独立完成分类及个人网站设计,其中需容入不同的分类信息、作品等;
第三阶段(WEB前端布局与交互开发)
一、WEB前端HTML5/CSS3
布局与样式
1、HTML标签:HTMl5简介与入门、文本、图像、链接、表格、列表、智能表单、结构化标签等内容
随堂项目:
1.文章页面的结构化布局。包括文章标题、正文、图片、页面背景、作者、发表时间等信息
2.利用table标签课程表的实现
3.利用form、input表单标签实现简单登录注册页面
2、CSS基础语法
常见样式:CSS3简介、css3引入方式、常见样式、文字与文本、颜色、背景色、精灵图片等
随堂项目:首页导航栏的制作
3、CSS选择器:css选择器:标签选择器、类选择器、ID选择器、后代选择器、群组选择器、伪类选择器、结构化伪类选择器、属性选择器、兄弟选择器、子元素选择器
4、CSS盒子模型:盒模型简介、盒模型组成部分、盒模型常用场景、弹性盒模型
随堂项目:导航栏的制作,利用盒子模型拉开间距、hover效果添加后的内边距设定
5、浮动与定位:浮动:float、clear、恢复塌陷的父容器高度。定位:一动不动的(static),跟着别人跑的(absolute),以自己为中心的(relative),固定的(fixed)
随堂项目:导航栏左右布局的定位、二级菜单的实现、回到顶部的按钮
6、响应式布局与页面优化处理:移动页面与PC端页面布局时候需要注意点、媒体查询在响应式布局中的应用、响应式布局中弹性盒模型的设计技巧、各种浏览器对于CSS样式的支持情况、页面优化需要注意的地方、解决跨浏览器兼容性问题
随堂项目:移动端的用户注册页面、PC端的用户注册页面。
7、静态页面切图项目实战:
1)企业站实训:1.首页导航、二级菜单2.banner轮播图3.产品展示4.成功案例5.新闻中心6.联系方式7.友情链接8.版权申明9.总结
2)商城实训:1.首页(头部导航、分类搜索、秒杀产品、猜你喜欢、推荐商品)2.用户中心(订单、个人信息、收货地址、账单)3.商品详情页(展示图、描述信息、促销价格、细节展示、产品详情)4.登录&注册页面
二、WEB前端JavaScript交互
1、核心语法:
1)JavaScript的前世今生、javascript语法、介绍html5认识JavaScript、javascript中的对象、数组、变量、.流程控制(ifelseswitchcasewhilefor)
2)随堂项目:九九乘法表、闰年计算、谁是高富帅(ifelse..Switchcase)
2、BOM与DOM操作:DOM操作:让一成不变的网页动起来;BOM操作:浏览器也有话要说
随堂项目:网页时钟的制作、回到顶部
3、事件编程:
1)javascript的事件机制:让网页回应你的问候;常见的JS事件:单击、双击、移动、悬停、焦点的获取与失去、浏览器的关闭与加载
2)随堂项目:1.选不中的按钮的实现2.做一个计算器怎样3.商品图片放大镜效果
4、正则表达式:
1)正则表达式的语法、利用正则表达式做字符匹配、面向对象编程:脱离过程走向对象
2)
随堂项目:邮箱格式的验证、编写一个获取常见输入数据的格式验证类。
5、面向对象编程
1)面向对象编程简介、对象的创建、继承的实现、原型与原型链。
2)随堂项目:仿windows屏保气泡
6、JQuery
1)JQuery基础语法、JQuery选择器、JQuery的BOM与DOM操作、事件编程、常见动画与自定义动画编程、常见Jquery插件使用。
2)随堂项目:打地鼠游戏、抽奖轮盘制作
7、JQuery
项目实战:图片轮播、利用jQuery制作拼图、贪吃蛇等项目实训
8、Ajax技术
1)Ajax技术介绍、json格式与XML格式详解、Ajax的post与get两种提交方式详解、服务器端的数据反馈机制说明、如何利用jQuery实现Ajax提交、跨域访问的实现
2)
随堂项目:用户注册、登录的Ajax无刷新实现、淘宝收货地址中省市级联的实现
8、Bootstrap:bootstrap介绍、bootstrap的栅格系统、CSS样式、组件、bootstrap的javascript插件
随堂项目:利用bootstrap构建移动商城首页、用户注册、登录等页面
9、ECMAScript6
:1.webpack介绍2.webpackg管用配置3.模块处理mole6.3种加载器loaders的使用4.编译器babel5.插件plugins6.热更新次操作7.打项目最终包
随堂练习:新前端开发环境搭建