网页设计概述

课程总学时：48实验学时：16课程性质：考察先修要求：高级语言程序设计、数据结构数据库技术等主讲老师：许磊联系方式：网页设计教学方式：课堂讲授〔多媒体教学〕；学生上机实习；通过Email与Web进行网上辅导。考查方式：平时成绩30%〔考勤和实验报告〕；小组完成的综合课题70%。

课程教材

网页设计与制作

清华大学出版社网页素材库网页制作大宝库:///素材精品屋黑马网页素材:///遐思素材屋网页特效

网页特效集://网页特效://网页特效

七色风网页特效技术文章

太平洋学院蓝色理想天极网网页陶吧网页设计师联盟七色鸟设计空间有风的日子闪客帝国宇风多媒体闪吧网页素材库网页设计的学科地位在计算机科学与技术这个专业体系中，网页设计地位是比较低的，比不上数据结构，数据库，操作系统，软件工程等课程。研究生入学考试，尤其是以前专业课各校自主决定时候没有一所学校专业课考网页设计。实际上，网页设计技术作为计算机专业学生的一项必备根本技能，可以作为以后毕业设计的选题，可以作为以后找工作的方向。当然更深入的网页设计涉及到很多编码设计还有数据库，网络平安，网络美工等技术。下面看一看一般专业商业网站运营人员构成。

网站与网页概述

网站〔Website〕是指在因特网上，根据一定的规那么，使用HTML〔HyperTextMarkupLanguage〕等工具制作的用于展示特定内容的相关网页的集合。网站被部署到世界各地的效劳器上，人们可以在网页浏览器中输入网址访问网站，从而获取自己所需要的资讯或者享受网络效劳。网站与网页概述一个网站是由很多网页组成的，网页浏览器呈现给我们的画面就是网页。网页是一个文件，一般包含文本和图像信息，复杂一些的网页还会包含Flash动画、声音、视频等多媒体元素。网站的发布、页面的传输都依赖于全球最大的计算机网络系统――因特网，下面让我们先来讲解一下什么是因特网，并了解一些万维网的根本知识。

因特网与万维网

1．因特网因特网〔internet)又称互联网，是由一些使用公用语言互相通信的计算机连接而成的网络，是全球性信息与资源的网络，也是群众传媒的一种。

因特网与万维网

1969年，为了将美国的几个军事及研究用电脑主机连接起来，美国国防部研究方案管理局〔ARPA--AdvancedResearchProjectsAgency〕建立了一个名为ARPANET的网络，这个网络就是人们普遍认为的因特网的雏形。1986年，NSF资助了一个直接连接这些中心的主干网络，并且允许研究人员对Internet进行访问，以使他们能够共享研究成果并查找信息，这个主干网络就是NSFNET。1989年，由ARPANET别离出来的MILNET实现了和NSFNET的连接，就开始采用Internet这个名称。

因特网与万维网

随着商业网络和大量商业公司进入Internet，网上商业应用取得高速的开展，同时也使Internet能够为用户提供更多效劳，使Internet迅速普及和开展起来。现在Internet已开展为多元化，不仅仅单纯为科研效劳，正逐步进入到日常生活的各个领域。近几年来，Internet在规模和结构上都有了很大的开展，已经开展成为一个名副其实的“全球网〞。因特网与万维网Internet上有着非常丰富的信息资源，通过Internet我们可以方便地查询各种各样的信息，信息分布在世界各地的计算机上，以各种可能的形式存在，如文件、数据库、公告牌、目录文档和超文本文档等。信息存在的格式多种多样，如文档、表格、图形、图像、声音、视频等。Internet的另一种资源是计算机系统资源，包括连接在Internet的各种网络上的计算机的处理能力、存储空间〔硬件资源〕以及软件工具和软件环境〔软件资源〕。一般地说，要求使用计算机系统的Internet用户，如科学家、工程师、设计师、教师、学生或每一个普通用户，都可以通过远程登录到达某台目标计算机，只要这台计算机允许你使用并建立了你的登录账号。因特网与万维网Internet还为我们提供了以下各种效劳：远程登录效劳Telnet〔RemoteLogin〕文件传送效劳FTP电子邮件效劳E-mail〔ElectronicMail〕电子公告板系统〔BBS〕万维网WWW〔WorldWideWeb〕效劳因特网与万维网2．万维网WWW效劳是由Internet提供的效劳。WWW的中文名字为“万维网〞，“环球网〞等，常简称为Web。WWW可以让Web客户端〔常用浏览器〕访问浏览Web效劳器上的页面。WWW提供丰富的文本和图形，音频，视频等多媒体信息，并将这些内容集合在一起，并提供导航功能，使得用户可以方便地在各个页面之间进行浏览。由于WWW内容丰富，浏览方便，已经成为互联网最重要的效劳。从技术角度上说，万维网是Internet上支持WWW协议和超文本传输协议HTTP〔HyperTextTransportProtocol〕的客户机与效劳器的集合，透过它可以存取世界各地的丰富的内容信息以及各式各样的软件。

IP地址和域名

IP地址就是被用来给Internet上的主机或者设备分配的一个编号，它就是主机在Internet上的身份标识。每个IP地址的长度为32位〔bit〕，分为4段，每段8位〔1个字节〕，常用十进制数字表示，每段数字范围为1～254，段与段之间用小数点分隔。这样的32位地址又分为五类分别对应于A类、B类、C类、D类和E类IP地址。各种类型的IP地址参见图1.1。IP地址和域名〔1〕主机ID全部设为“0〞的IP地址称之为网络地址，如129．45．0．0就是B类网络地址。〔2〕主机ID局部全设为“1〞〔即255〕的IP地址称之为播送地址，如129．45．255．255就是B类的播送地址。〔3〕网络ID不能以十进制“127〞作为开头，在地址中数字127保存给诊断用。如用于回路测试，同时网络ID的第一个8位组也不能全为“0〞，全为“0〞那么表示本地网络。网络ID局部全为“0〞和全部为“1〞的IP地址被保存使用。IP地址和域名由于IP地址全是数字，不便于用户记忆。为方便记忆，我们采用域名来代替IP地址标识站点地址。Internet上引进了域名效劳系统DNS〔DomainNameSystem〕，为每台主机建立IP地址与域名之间的映射关系，使用域名来代替IP地址唯一标示网络中的主机。简单来说，域名就是Internet上主机的名字，它具有一个包含多级域名的分层结构。DNS规定，域名中的标号都由英文字母和数字组成，每一个标号不超过63个字符，也不区分大小写字母。除了连字符“-〞外不能使用其他的标点符号。不同等级的域名之间使用点号分割，级别最低的域名写在最左边，而级别最高的域名写在最右边。网页与浏览器1．网页网页作为构成网站的根本元素，是承载各种网站应用的平台。通俗地说，网页就是一个文件，它存放在Internet上的某一台主机上。那么我们如何找到Internet上的网页文件呢？网页文件又是如何描述的呢？带着这两个问题我们介绍两个相关的术语。网页与浏览器1〕URLURL是UniformResourceLocation的简称，译为“统一资源定位器〞。URL的构成如下：protocol://[:port]/directory/filename。其中，protocol为访问该资源所采用的协议；为主机的IP地址，通常使用域名的形式，通过域名解析效劳器解析；port为效劳器在该主机所使用的端口号；directory和filename是资源的路径和文件名。我们通过URL来定位Internet上的各种资源，而网页本身也是被部署在效劳器上的一种资源，所以我们可以通过URL来查找并访问网站中的页面。网页与浏览器2〕HTMLHTML〔HyperTextMarkupLanguage〕是超文本标记语言。网页文件就是使用HTML的一套标签来进行描述的。HTML文件的后缀名为.html或者.htm，也称为页面的源文件。通常我们通过URL访问页面，返回的就是页面源文件以及它所引用的其他相关资源〔图片、脚本文件、样式表文件等〕。网页与浏览器2．网页中的常见元素对于一个网页，组成它的最根本的元素主要是文本、超链接、图像、动画、声音、视频、表格和表单。网页与浏览器1〕文本一直以来文本都是人类最重要的信息载体与交流工具，网页中的信息也以文本为主。文本虽然不如图像那样能够很快引起浏览者的注意，但却能够准确地表达信息的内容和含义。为了丰富文本的表现力，我们可以通过改变页面中文本的样式，如字体、字号、颜色、底纹和边框等来展现更丰富的含义。

网页与浏览器

2〕超链接超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来进行超链接的对象，可以是一段文本或者是一个图片，当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上。网页与浏览器3〕图像图像是网页中常见元素之一，在页面上使用图像不仅可以直观的表达丰富的内容信息，还可以起到装饰、表现网站风格的作用。网页中常用的图片格式通常都是这三种格式：JPEG、GIF和PNG。网页与浏览器4〕动画动画实质上是动态的图像。在网页中使用动画可以有效地吸引浏览者的注意。目前在网页中使用较多的是Flash动画和GIF动画。Flash动画运用的最为广泛，它是基于矢量的图形系统，只要用少量的向量数据就可以描述一个复杂的对象，占用的存储空间很小，非常适合于Internet上的使用。而GIF动画那么是主要用于站标、广告条等组件的动画制作。2．网页中的常见元素5〕声音声音是多媒体网页的一个重要组成局部。当前存在着一些不同类型的声音文件和格式，也有不同的方法将这些声音添加到网页中。在决定被添加声音的格式和方式之前，需要考虑的因素是：声音的用途、声音文件的格式、声音文件的大小、声音的品质和浏览器的差异等。目前用于网络的声音文件格式非常多，常用的是MIDI、WAV、MP3等。表1.1分别列出了这些音频格式的特点。音频格式特点MIDI格式MIDI格式一般用于器乐类的音频文件。许多浏览器都支持MIDI格式的文件夹，并且不要求安装插件WAV格式WAV格式的音频文件具有较好的声音品质，许多浏览器都支持此格式，并且不要求安装插件，但是，WAV文件容量通常较大MP3格式MP3格式能以较小的比特率，较大的压缩比达到近乎完美的CD音质网页与浏览器6〕视频网页中一种比较流行的元素就是视频，它的参加可以使网页更富有个性，更显得时尚。常用的视频文件格式有rm、rmvb、avi和divx等。网页与浏览器7〕表格很多网页制作者建立网站时都是用表格来进行网页布局的。表格作为一种容器，一是可以使用行和列的形式来布局文本和图像，二是可以使用表格来精确控制各种网页元素在网页中出现的位置，在网页制作中有着不可替代的作用。建立网站时通过合理设置表格并利用表格来组织网页内容，可以设计出布局合理，结构协调，美观匀称的网页，到达意想不到的效果。网页与浏览器8〕表单网站中使用表单的主要目的是为了采集数据，采用问答式交流，网页中的表单经常用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。利用表单可以制作订单、留言板、讨论区、搜索界面等，应用范围非常广泛。表单是管理员和用户之间沟通的桥梁，管理员可以利用表单处理程序分析用户反响的意见，从而做出合理的决策。

网站的类型

用户在开发网站之前，需要先了解各种网站的主要功能及其特性，对网站进行定位，然后再进行网站的开发制作，常用的网站主要有以下几种类型：网站的类型1．综合门户类网站综合门户类网站主要向访问者提供大量的信息，其主要特点是管理功能强大、页面美观、内容丰富、信息齐全，涉及政治、经济、文化、生活等多方面的内容。该类网站的典型代表有新浪网、搜狐网、网易等，如图1.2展示的是搜狐网的首页。网站的类型2．政府与公益组织网站现在越来越多的政府与公益组织开发自己的网站，主要用于发布政策、规章制度等信息，提供在线政务效劳等，政府与公益组织可以借助网站进行宣传或者开展活动，图1.3展示的是人民政府网首页。网站的类型公司宣传网站公司宣传网站是商业企业对外进行宣传的网站，主要宣传企业产品以及企业效劳，让外界更好的了解企业，树立良好的企业形象，是开发工作中最常见的网站类型，图1.4展示的是某企业集团集团网站首页。网站的类型电子商务网站电子商务网站是一种常见的网站形式，也是一种重要的应用形式。电子商务网站的内容常常是产品、广告、购物、市场推广等。该类网站的代表有淘宝、京东、亚马逊等，图1.5展示的是淘宝网首页。网站的类型5．搜索引擎网站搜索引擎网站的主要内容是实现网站的搜索功能与内容管理功能，这类网站的代表有百度、谷歌等，图1.6展示的是百度网首页。网站的类型6．个人网站个人网站也叫做个人主页，是以个人名义创立的网站，一般是为了展示个人兴趣爱好而建设的，其形式、内容、风格非常灵活，具有很强的个性化特色。商业网站运营技术团队人员组成首席技术官CTO

技术总监、CTO、技术副总等职，为高层管理职位；职责主要在战略-产品结合、产品-市场、产品规划、技术开展、方向、技术团队及整体把握等方面。下可设部门经理、主管、总工、工程经理、产品经理等中基层管理岗位；

技术管理

技术团队的中基层主管或经理，如：产品经理、部门经理、技术经理、工程经理、测试经理、技术支持经理…网站构架

网站程序开发构架、网站栏目构架，及网站筹划的技术层面工作，与“网站筹划—业务〞角色紧密合作。网站程序开发构架也可划分在“软件研发〞局部的系统构架师角色；

网站美工

网站页面的平面美工设计、内容美编、人机交互界面分析设计等；其中，用户体验、人机交互界面、人机交互工程学的应用，越来越受到重视；软件研发

网站系统可能需要自己开发，或二次开发，或用CMS〔网站管理系统〕建站中的模版设计，等等，都需要一些技术开发工作；角色包括：系统分析师、构架师、设计师、开发工程师、测试工程师、配置管理、数据库设计开发、研发管理……网络营销/推广—技术

用技术手段实现网络推广和网络营销，即线上营销，并对网站营运团队提供业务开展活动中相关IT技术支持，以及对外技术合作等等；

如：SEO、搜索引擎优化、链接、论坛、博客、邮件推广…可设为SEO专员、网络推广专员等；及网站间外联合作专员、内容合作专员等等；与“网络营销/推广—业务〞角色区别于一个偏技术，一个偏业务；效劳器管理

一般都会自置效劳器，或租用效劳器、虚拟主机或虚拟效劳器，托管甚至自有机房，等等。对效劳器硬件、软件系统、平安管理、存储、网络根底环境、Web运行环境等等的配置和管理，可以分为多个不同的角色；运行维护

网站系统运行中的广告投放、留言/投诉日常回复、会员处理、网站内容支持等等非技术性问题处理……通常可能由其它技术人员如开发人员、效劳器管理人员，甚至客服人员等兼任处理局部工作；

效劳器管理

一般都会自置效劳器，或租用效劳器、虚拟主机或虚拟效劳器，托管甚至自有机房，等等。对效劳器硬件、软件系统、平安管理、存储、网络根底环境、Web运行环境等等的配置和管理，可以分为多个不同的角色；运行维护

网站系统运行中的广告投放、留言/投诉日常回复、会员处理、网站内容支持等等非技术性问题处理……通常可能由其它技术人员如开发人员、效劳器管理人员，甚至客服人员等兼任处理局部工作；技术支持

用户或内部使用技术支持、效劳等，处理运行中的一些技术问题……通常可能由其它技术人员如开发、效劳器管理等技术人员兼任处理局部工作；

商业网站运营团队人员组成运营团队要做的事情，包括传统产品或业务经营运作中的一切市场营销和管理活动，如：产品/市场战略、网站筹划、建设、推广、营销、产品/效劳的销售、效劳、财务、技术支撑等等，以及相关的一切行政管理活动，这些活动需要相应的角色和团队。

运营总监COO

首席运营官，运营总监，当为高层管理职位，在战略及执行方面负主要责任。原那么上应统领产品到市场的一切工作，下辖运营团队中的以下各类角色，以整体能力见长。通常可能偏重于市场营销局部，局部地充当了以下的“营销总监〞甚至“销售总监〞的角色，原那么上是欠妥的。一般而言，运营总监的能力结构按比重依次为：市场运营、管理、技术，但总体上当以整体综合能力见长，不宜用作营销总监或销售总监；当然，也区别于CEO职责。其工作职责包括：产品/市场定位、产品及市场战略规划、市场客户需求及产品创新、竞争对手、营销推广、营销活动筹划、各类合作、日常管理……等等；下可设产品运营主管、频道运营主管、子网、行业运营主管或其它细分运营管理职位；营销/销售总监/经理/主管

营销总监，销售总监，或经理、主管，从事网站产品或效劳的营销、销售工作，为运营中的重要工作，对运营总监负责，需要专业的市场人士担纲；

营销总监在市场战略、营销规划、策略制定、执行、营销体系建设、产品市场客户竞争者分析及对策、市场及营销目标等方面负主要责任。网站运营的市场营销中公关营销显得尤为重要，可参见“五网站运营〞章节；销售总监那么负责销售目标的实现，销售团队战斗力的打造最为重要；下辖对应可设营销专员、销售代表等团队成员角色；网站筹划—业务

网站筹划是网站战略、网站建设、产品效劳及其改进等工作的主导者，甚至也包括局部网站推广、运营筹划等工作内容，与相关角色的沟通是其工作重点之一。在网站定位、战略方面，该角色为重要的参与者；在网站、产品效劳建设方面，该角色是需求、分析提供者，向网站构架、开发、美工等技术角色提供或反响业务上的需求。该角色的重点也应该放在产品、用户需求、竞争者分析、行业分析等工作上，为产品和网站的不断完善提供业务需求方面的谋划、策略；网站筹划—技术局部的工作由“网站构架〞角色主导负责；网站运营筹划方面的工作由营销总监/经理、相应的公关/营销专员等负责；内容编辑

网站内容的编辑团队，可分为：信息总编或编辑主管、信息编辑〔包含一般的编辑人员和专业写手等〕、记者、内容对外合作专员等等角色；在相应的能力上重点要求文字写作能力、传统媒体编辑能力、新闻事情处理能力、专业知识能力等方面；

行业分析/运营/效劳专员、主管

网站为行业用户提供效劳，必须对网站所基于的行业、业务有研究，这一点非常重要，也是形成网站核心竞争力的重要因素；该类角色可能分得细些，因不同企业实际情况团队规模有较大差异。可设行业运营经理/专员、某个垂直细分市场运营经理/专员、产品运营经理/专员、行业分析专员、行业效劳专员等等；职责包括：研究行业开展趋势、产业链、行业用户特点、网站/产品的行业专业性、行业企业运营、商贸、区域市场、行业主题活动的筹划、实施等等；公关/媒介专员、主管

网站所提供的产品或效劳如同任何一种普通的产品或效劳，需要传统的营销手段，但同时，网站实质上也是一种媒体，公关营销显得尤为重要。公关营销是公认的廉价高效、物美价廉的传播推广手段。常用的公关营销手段有以下四种：事件营销—新闻传播：筹划实施新闻事件以实现新闻传播；媒体软文：以媒体软文如：报纸、期刊、网络媒体软文报道的方式传播；活动营销：筹划实施主体活动；会议/展会/活动营销/筹划专员/BD、主管

会议营销、展会营销、活动营销、业务拓展〔即BD〕为市场运营推广中的重要手段，尤其近年来，这些手段广泛应用，方兴未艾；角色设置方面，可以对这四种各自设置专员、筹划/实施专员、主管等角色，视具体情况可以以此为根底进行细分；重要职责如：会议/展会/活动筹划与方案，组织、实施与跟踪评估，客户数据库建立，与政府、商会、协会、团体、组织等关系拓展维护，等等；从业人员在能力经验方面、自身资源方面，需突出强调应对此类活动及对象的能力；销售/商务代表

商务代表、销售代表等是最常见的业务人员；销售人员的战斗力，是销售团队的第一要素；培训和绩效管理需要强有力的执行；

网站提供产品效劳，销售是较常见的重要销售手段，相应的技巧可以通过专业培训得以提升；

网络营销/推广—业务

基于网络的市场推广，偏重于业务层面而非技术层面，与技术局部的衔接为：将业务形成需求交于技术人员实现；与业务局部的衔接为：将网络推广之后的如客户反响、跟踪、销售等环节交于销售人员来完成；在日常工作、推进、沟通、责任等方面：对于技术，指定此角色直接对应的具体技术人员或技术负责人员；对于业务，指定一销售主管/经理对接；其中，以本角色为主导。职责包括：网络营销研究，制定在线推广策略，推广方案的实施，推广手段如邮件的设计、发送、跟踪及效果分析，与技术人员、业务人员紧密衔接；此角色在小的团队中较常见与其它角色如筹划、运营、公关等角色融为一体，不尽合理，或者未有受到重视。强调：此角色与“网络营销/推广—技术〞角色有必要分割清楚；各类客服

客服团队在角色设置上、规模上、效劳业务内容上，因企业自身实际情况差异会非常大，只要需要，即可设置相应的客服角色，无统一标准。管理层次上可设客服主管、经理、专员等；支持系统

通常运营网站工程的团队，事实上是一个企业，麻雀虽小，肝胆俱全。行政、办公、人力资源、财务等等支持系统一样不能少；

网页设计的开展历史自从第一个网站在上个世纪90年代初诞生以来，设计师们尝试了各种网页的视觉效果。早期的网页完全由文本构成，除了一些小图片和毫无布局可言的标题与段落。然而，时代在进步，接下来出现了表格布局，然后是Flash，最后是基于CSS的网页设计。第一张网页1991年8月，TimBerners-Lee

发布了第一个简单的，基于文本，包含几个链接的网站。原始网页的副本现在仍然在线。它有十多个链接，试图告诉人们什么是万维网。随后的网页都比较相似，完全基于文本，单栏设计，有一些链接等等。最初版本的HTML只有最根本的内容结构：标题(<h1>,<h2>...)，段落(<p>)和链接(<a>)。随后新版本的HTML开始允许在页面上添加图片(<img>)，然后开始支持制作表格(<table>)。W3C的出现1994年，万维网联盟〔W3C〕成立，他们将HTML确立为网页的标准标记语言。这一举动阻断了任何独立公司想要开发专利的浏览器和相应的程序语言的野心，因为这会对网络的完整性产生不利的影响。W3C一直致力于确立与维护网页编程语言的标准(例如JavaScript)。Thefirstwebpage(1992)

Yahoo!(1996)

Altavista(1996)

基于表格的设计表格布局使网页设计师制作网站时有了更多项选择择。在HTML中表格标签的本意是为了显示表格化的数据，但是设计师很快意识到可以利用表格来构造他们设计的网页，这样就可以制作较以往作品更加复杂的，多栏目的网页。表格布局就这样流行了起来，融合了背景图片切片技术，常给人以看起来较实际布局简洁得多的结构。结构设计这个时期的网页设计还不太关注语义化和可用性方面的问题，主要还在追求良好的结构美学。同一时期也是大量应用

GIF占位图片控制留白的时期。一些主流的公司甚至训练设计师如何使用GIF占位；如微软的“关于HTML表格中的GIF占位〞。第一批主要应用表格布局的“所见即所得〞网页设计软件的开展助长了表格的应用。另外，某些软件自动生成的表格如此复杂以至于许多设计师不可能从头手写代码〔例如每行只有1px高却包含了几百列的表格〕。即使是稍微复杂一点儿的网页〔比方多栏目页面〕，设计师们都要依赖于表格来创立。W3C(1998)

Yahoo!(2002)

Altavista(2002)

基于Flash的网页设计Flash〔最初被称为FutureSplashAnimator，然后是MacromediaFlash，现在叫做AdobeFlash〕开发于1996年。起初只有非常根本的工具与时间线，最终开展成能够开发整套网站的强大工具。Flash提供了大量的远远超过HTML所能够实现的视觉表现效果。MacromediaShockwave在Flash之前，有MacromediaShockwave〔之后是AdobeShockwave〕。Shockwave用于为CD-ROM制作目录和多媒体内容，Shockwave文件体积庞大，考虑到当时的网络连接以拨号上网为主，应用Shockwave还是不够明智的。与之相比，Flash影片体积小巧，在线应用更加可行。Flash的优势在视觉效果上HTML有很多局限性，尤其是早期的HTML。要实现复杂的设计，人们往往需要制作大量疯狂的表格结构并/或依靠图像占位符〔就像某些所见即所得软件所做的那样〕。Flash使创立复杂的，互动性强并且拥有动画元素的网站成为可能。动态HTML〔DHTML〕在Flash初次涉足网页设计领域的同一时期〔20世纪90年代末至21世纪初〕，由几种网络技术〔如JavaScript和一些效劳器端脚本语言〕组成的用于创作互动/动画页面元素的DHTML技术的推广，也在如火如荼地进行中。这时，随着Flash的开展和DHTML的普及，不只是阅读静态内容，还允许用户与网页内容互动的交互页面的概念诞生了。3DML3DML

是一个鲜为人知的用于制作三维站点的网页设计语言。由MichaelPowers编写于1996年，3DML文件实际上由一种非标准的XML语言写成。FlatlandRover

是一款独立开发的3DML浏览器，尽管还有对应的InternetExplorer，NetscapeNavigator，theAOLbrowser和Opera浏览器插件，但随着开发进度停滞于2005年，Firefox的插件始终未能问世。现在仍然有应用3DML构建的网站，但如果没有上述浏览器或是相应插件，3DML就是不可见的。3DML曾用于制作称作“Sopts〞的世界与场景。3DML真正的杀手锏是比大多数语言都快的3D模型构建速度〔就算是Flash也需要翻开Flash桌面应用来创立并编辑Flash内容〕与更加小巧的文件体积。基于CSS的设计CSS设计受到关注始于21世纪初。虽然CSS已经存在很长一段时间了，但是在当时仍然缺乏主流浏览器的支持，并且许多设计师对它很是陌生〔甚至感到恐惧〕。与表格布局与Flash网页相比，CSS有许多优势。首先它将网页的内容与样式相别离，这从本质上意味着视觉表现与内容结构的别离。CSS是网页布局的最正确实践，与CSS相比表格布局根本不值一提。CSS极大地缩减了标签的混乱还创造了简洁并语义化的网页布局。CSS还使得网站维护更加简便，因为网页的结构与样式是相互别离的。人们完全可以改变一个基于CSS设计的网站的视觉效果而不去改动网站的内容。由CSS设计的网页的文件体积往往小于基于表格布局的网页，这也意味着页面响应时间的改善。虽然首次访问一个网站会下载样式表占用带宽，但CSS会缓存在访问者的浏览器里〔默认情况下〕，这样接下来的访问过程中，网页就都会迅速显示了。W3C(2003)

W3C(2023)Yahoo!(2023)Altavista(2023)网页设计与网页制作的区别网页设计是一种建立在新型媒体之上的新型设计。它具有很强的视觉效果、互动性、互操作性、受众面广等其它媒体所不具有的特点，它是区别于报刊、影视的一个新媒体。它既拥有传统媒体的优点，同时又使传播变得更为直接、省力和有效；为了更好的表达网页这一新型设计的特点，将它和传统媒体进行比较，了解它的优势所在；一个成功的网页设计，首先在观念上要确立活泼的思维方式，其次，要有效地将图形引入网页设计之中，增加人们浏览网页的兴趣，在崇尚鲜明个性风格的今天，网页设计应增加个性化因素。网页设计区别与网页制作，是将筹划案中的内容、网站的主题模式，以及结合自己的认识通过艺术的手法表现出来；而网页制作通常就是将网页设计师所设计出来的设计稿，按照W3C标准用html语言将其制作成网页格式。这就相当于一个干脑力活，一个是干体力活，但是一个优秀的网页设计师对着两到工序都是十分了解的，因为他要知道自己的设计稿，是否会为网页制作人员制作页面带来麻烦。在网站设计的流程中我们还会听到说UI/UE的说法，这是两个较为重要的环节，主要都是为浏览者着想的。UI(UserInterface,用户界面):UI的意思是用户界面，是英文UserInterface的缩写。既浏览者在浏览网页时，通过视觉所能观察到的一切事物，这些都是需要设计的局部，在互联网行业，做界面设计的人被贬义的称为“美工〞。其实我们一开始接触电脑时就应该对UI有很深的认识，从最早的DOS操作系统到Windows1.0，再到WindowsXP。我们开机所看到的就叫用户界面，DOS操作系统黑底白字的文本界面，WindowsXP的经典蓝色界面，这些都是用户界面的开展历程。从简单到复杂，从庸俗到华美，也证明了用户界面设计越发成熟。UE(UserExperience,用户体验):UE的意思是用户体验，英文叫做UserExperience，缩写为UE,或者UX。是指一个浏览者在访问一个网站或者使用一个产品时的印象和感受，对网站的布局、色彩、功能、感觉是否满意，在第一次访问离开后是否还想再回访，是否能发现明显的Bug〔既网站在浏览过程中出现的错误〕。关于网页的一些网络知识什么是域名网络是基于TCP/IP协议进行通信和连接的，每一台主机都有一个唯一的标识固定的IP地址，以区别在网络上成千上万个用户和计算机，与网络上的数字型IP地址相对应的字符型地址，就被称为域名。从技术上讲，域名只是一个Internet中用于解决地址对应问题的一种方法。企业、政府、非政府组织等机构或者个人在互联网上注册的名称，是互联网上企业或机构间相互联络的网络地址。Internet地址中的一项，如假设的一个地址与互联网协议〔IP〕地址相对应的一串容易记忆的字符，由假设干个从a到z的26个拉丁字母及0到9的10个阿拉伯数字及“-〞、“.〞符号构成并按一定的层次和逻辑排列。目前也有一些国家在开发其他语言的域名，如中文域名。域名不仅便于记忆，而且即使在IP地址发生变化的情况下，通过改变解析对应关系，域名仍可保持不变。

目的：方便用户记忆格式：主机名.网络名.二级域名.一级域名例如： 北方工业大学www主机：Olympic官方网站WWW主机： 域名地址DNS效劳器(DomainNameSystem)专门负责把用户寻址的主机域名转换为IP地址的计算机。例如：上海热线DNS主控效劳器：上海热线DNS辅助效劳器：上海科技网DNS效劳器：DNS出现故障，通过域名不能上网，但通过IP地址可以上网。域名与IP地址不是一一对应关系1.每个域名均对应一个IP地址。

当IP地址改变时，域名通常不变。如何获得洛阳师范学院WWW效劳器IP地址？Ping命令ping2.有IP地址，不一定有域名。3.一台效劳器，只有一个IP地址，但可以有多个域名。4.给定一个IP地址，可以找到一台主机；给定一个域名，也可以找到一台主机。什么是浏览器网页浏览器是个显示网页效劳器或档案系统内的文件，并让用户与此些文件互动的一种软件。它用来显示在万维网或局部局域网络等内的文字、影像及其他资讯。这些文字或影像，可以是连接其他网址的超链接，用户可迅速及轻易地浏览各种资讯。网页一般是HTML的格式。有些网页是需使用特定的浏览器才能正确显示。做网页设计，调试时候就是通过在浏览器下浏览看设计效果。

个人电脑上常见的网页浏览器包括微软的InternetExplorer、Mozilla的Firefox、Apple的Safari、Opera、HotBrowser、Google的Chrome。浏览器是最经常使用到的客户端程序。成功的网页设计调试，至少要在三个浏览器下执行调试通过。一般网页有可能在没考虑到一些细节情况下，在不同的浏览器里面执行效果是不一样。网页和网站区别网站是一个整体，网页是一个个体，一个网站是由很多网页构建而成。网站和网页的关系就像家庭和家人一样。网页与网站的区别简单的来说：网站是由网页集合而成的，而大家通过浏览器所看到的画面就是网页，网页说具体了是一个html文件，浏览器是是用来解读这份文件的。也可以这样说：网页是有许多html文件集合而成。至于要多少网页集合在一起才能称作网站，这可就没有规定了，即使只有一个网页也能被称为网站。而我们想要制作一个网站，就需要单独编辑假设干个html文件，然后通过“超链接〞把它们连接在一起，这样一个属于自己的网站就制作出来了。一个网站最少要包括域名和空间，域名就是我们平时所说的网址，空间那么是用来放网页内容的。

1、申请域名：您的域名需要便于记忆、了解，可以是您公司的名称的英文或中文拼音。

2、申请空间：有两类您可自行选择：

A、空间：针对会设计网站的用户，您在自己的电脑中用专业软件设计好网站后上传到购置的空间上即可。网站建设的根本步骤及应注意的问题网站的制作与建立并不复杂，但要制作一个优秀的网站并非易事。一个优秀的网站是依靠完美的规划、出色的设计理念、技术与软件等多方面合作完成的。网站的制作主要包括网页制作，网站的建立过程还包括事前企划，事后维护更新等工作，即要有一个合理的网站制作流程。一个网站的制作流程和一个电视节目的制作过程很相像，包括筹划、制作、广告宣传，以及每天更新等。如果要制作一个个人网站就简单多了。网站制作的根本流程与顺序是十分重要的。因为网站的制作流程可以明确工作目标和方向，提高工作效率，使网站结构清晰。

A进行用户调研，确定网站的目标和主题：一个网站要有明确的目标定位，这是在进行网站设计之前必须要考虑和解决的首要问题。只有定位准确、目标鲜明，才可能做出切实可行的方案，按部就班地进行设计。网站的目标定位要做到网站主题的小而精，即定位要小，内容要精，从而突出个性和特色。题材应该是自己擅长或者喜爱的内容，不要选择到处可见、人人都有的题材，也不要选择已经存在非常优秀、知名度很高的站点的题材，因为如果是这样，那你想要超越它是很困难的。网站设计根本步骤确定网站的主题是什么，也就是说确定我们要做的究竟是一个什么网站；确定在这个主题下，用户要表表现的主要内容是什么，即用户的意图，用户想从那个侧面来现他的主题。网站题材很多，如新闻，财经，娱乐，房产，股票，游戏，军事，体育，交友，科技，音乐，电影等。网站设计根本步骤B确定网站的风格：网站的风格是指网站的整体形象给浏览者的综合感受。网站的“整体形象〞包括站点的专业特性、版面布局、交互性、文字和信息价值等诸多因素。由于风格是多种因素的交互作用，因此也就形成了创作风格上的千差万别，比方：网易的平易近人，迪斯尼的生动活泼，IBM的专业严肃等这些都是网站给人们留下的不同感受，也给人们留下了深刻的印象。普通网站你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比方信息量大小，浏览速度快慢；而有风格的网站能给浏览者更深的感性认识，比方站点有品位，和蔼可亲，感觉赏心悦目，如沐春风，是一种享受。网站的风格其实也表达网页设计者的艺术素养和气质，网页设计者多方面的艺术素养，包括艺术鉴赏力和艺术地感受生活、捕捉形象和细节的能力以及艺术表现的能力等因素，都会从各自的角度影响风格的形成。一个有风格的网站在保证内容的质量和价值性的前提下，应找出网站中最有特点、最能表达网站风格的信息，以它作为网站的特色加以重点强化、宣传。例如：网站名称、域名和栏目是否符合这种个性特点，是否好记，网站的基准色彩是否能突出网站风格等。C设计网页栏目及组织结构：网站结构一般包括三种，即层状结构、线性结构、Web结构〔网状结构〕。层状结构：层状结构类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息；线性结构：线性结构类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理性、标准性，又可同时满足设计者和浏览者的要求；Web结构：Web结构类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。D准备素材：收集与整理相关资料E界面设计：根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构F网页排版〔页面实现〕:根据所设计的界面进行网页排版。G网页测试与发布：网页测试包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，到达最初的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确，链接准确，无过失无遗漏。如果在测试过程中发现了错误，就要及时修改，在准确无误后,方可正式在Internet上发布。网页设计好，必须把它发布到互连网上，否那么网站形象仍然不能展现出去。发布的效劳器可以是远程，也可以是本地。H网页推广与维护：网站建成之后，随后的工作就是进行推广。网站如果不进行推广，就容易成为信息的孤岛，长期没有多少人访问，渐渐地失去了建站的意义。制作网页时要注意的问题A网页的标题要简洁，明确。B对重点内容要强调显示。C网页中插入的图片要尽量的小。D图形要附加文字说明，以便关闭图像时查看。E网页中引用的资料及商标〔或图标〕，不能侵犯版权。关于网页设计的一些统计数据网页的大小●2003年，全世界网页的平均大小是93.7KB，2023年增长到312KB，5年中翻了3.3倍。(这里的网页大小包括图片、CSS文件、Javascript文件、flash文件等等。)●每张网页包含的对象数，从25.7个上升到49.9个。(但凡需要发出独立请求的网页元素，都算作一个对象。)●据统计，每增加1个对象，网页载入的平均时间就增加40毫秒(宽带)或250毫秒(窄带)。●研究说明，但凡包含超过4个对象的网页，都会产生“显示延迟〞问题，因为浏览器需要时间下载全部对象。关于网页设计的一些统计数据网速的变化●2006年2月，美国宽带用户访问40个主要网站(KB40)的平均网页载入时间是2.8秒，2023年2月，这个指标下降到2.3秒。●但是与此同时，窄带用户的单张网页载入时间上升到20~30秒。关于网页设计的一些统计数据网页的构成●网页大小中，平均54%来自于图片。●如果去掉广告，网页的大小和对象数会减少25%到30%。●84.8%的网页使用Javascript。●超过52%的网页使用框架frame，其中绝大多少是用于显示广告的iframe。●使用CSS，可以使HTML文件的大小减小15%-20%。关于网页设计的一些统计数据关于视频●1997年的时候，网页上的视频长度一般不超过45秒。到了2005年，网页视频长度的中位数，增加到120秒，2007年又进一步增加到192.6秒。●2005年，观看Youtube上的视频，要求的平均带宽是200Kbps(相当于网速每秒25KB)。到了2007年，上升到328Kbps(相当于网速每秒42KB)。●2007年底，网页视频的平均大小为63MB。●87%的网页流媒体节目，在开始播放的10秒内，就会被用户关掉。它们浪费的带宽占到效劳器端总带宽的20%。●流畅播放一段320X240、每秒15帧画面的视频，要求的网速是每秒38.4KB。如果视频大小增加到640X480，要求的网速就会增加到每秒153.6KB。(请注意，每秒15帧是视频质量的最低限，正常质量的视频至少需要每秒24帧。)序号观测点分值1需求分析充分、栏目设置合理、功能完善152主题鲜明，能体现网站功能153页面布局（排版）美观大方，有个性154色彩搭配合理，能表现主题，特色鲜明155多媒体元素运用得当，适合网络传输，运行速度快。106操作方便、自然清新，适应不同人群107方便后期开发与维护88内容健康、正确、合法，链接准确12合计100一般网站建设评判标准

静态网页与动态网页静态网页静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。在网站设计中，纯粹HTML格式的网页通常被称为“静态网页〞，早期的网站一般都是由静态网页制作的。静态网页的网址形式通常为:，也就是以.htm、.html、.shtml、.xml等为后后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果〞只是视觉上的，与下面将要介绍的动态网页是不同的概念。静态网页的特点简要归纳如下：:

(1)静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“?〞;

(2)网页内容一经发布到网站效劳器上，无论是否有用户访问，每个静态网页的内容都是保存在网站效劳器上的，也就是说，静态网页是实实在在保存在效劳器上的文件，每个网页都是一个独立的文件;

(3)静态网页的内容相对稳定，因此容易被搜索引擎检索;

(4)静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难;

(5)静态网页的交互性较差，在功能方面有较大的限制。动态网页动态网页是与静态网页相对应的，也就是说，网页URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见形式，而是以.aspx.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号——“?〞，如有这样一个动态网页的地址为:://=1这就是一个典型的动态网页URL形式。这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果〞没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。动态网页中除了根本网页中的元素外，还包括一些程序，这些应用程序需要浏览器与效劳器之间发生交互行为，而且应用程序的执行需要应用程序效劳器才能完成。应用程序效劳器的作用是读取动态网页上的代码，根据代码中的指令完成网页，然后将代码从网页上去掉，所得的结果将是一个静态网页；应用程序效劳器将该网页传送回网页效劳器，网页效劳器将网页发送到浏览器，浏览器得到的仍然是一个纯HTML的静态网页。动态网页是经过人与效劳器对话的结果。如图网页上的登录、注册、网上购物等都属于此类网站。动态网页有两种：一种是普通动态网页，它不包含数据库；一种是包含数据库的动态网页。⑴普通动态网页，其工作的过程如下图⑵.包含数据库的动态网页，如Access、SQL、MYSQL等，其工作过程如下图：从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示根本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差异。网络营销教学网站将动态网页的一般特点简要归纳如下:(1)动态网页一般以数据库技术为根底，可以大大降低网站维护的工作量;(2)采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等;(3)动态网页实际上并不是独立存在于效劳器上的网页文件，只有当用户请求时效劳器才返回一个完整的网页;(4)动态网页中的“?〞对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“?〞后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。什么叫动态网页技术网络技术日新月异，细心的网友会发现许多网页文件扩展名不再只是“.htm〞，还有“.php〞、“.asp〞等，这些都是采用动态网页技术制作出来的。早期的动态网页主要采用CGI技术，CGI即CommonGatewayInterface(公用网关接口)。您可以使用不同的程序编写适合的CGI程序，如VisualBasic、Delphi或C/C＋＋等。虽然CGI技术已经开展成熟而且功能强大，但由于编程困难、效率低下、修改复杂，所以有逐渐被新技术取代的趋势。什么叫动态网页技术网络技术日新月异，细心的网友会发现许多网页文件扩展名不再只是“.htm〞，还有“.php〞、“.asp〞等，这些都是采用动态网页技术制作出来的。早期的动态网页主要采用CGI技术，CGI即CommonGatewayInterface(公用网关接口)。您可以使用不同的程序编写适合的CGI程序，如VisualBasic、Delphi或C/C＋＋等。虽然CGI技术已经开展成熟而且功能强大，但由于编程困难、效率低下、修改复杂，所以有逐渐被新技术取代的趋势。下面介绍几种目前颇受关注的新技术：1、PHP即HypertextPreprocessor(超文本预处理器)，它是当今Internet上最为炽热的脚本语言，其语法借鉴了C、Java、PERL等语言，但只需要很少的编程知识你就能使用PHP建立一个真正交互的Web站点。它与HTML语言具有非常好的兼容性，使用者可以直接在脚本代码中参加HTML标签，或者在HTML标签中参加脚本代码从而更好地实现页面控制。PHP提供了标准的数据库接口，数据库连接方便，兼容性强；扩展性强；可以进行面向对象编程。2、ASP即ActiveServerPages，它是微软开发的一种类似HTML(超文本标识语言)、Script(脚本)与CGI(公用网关接口)的结合体，它没有提供自己专门的编程语言，而是允许用户使用许多已有的脚本语言编写ASP的应用程序。ASP的程序编制比HTML更方便且更有灵活性。它是在Web效劳器端运行，运行后再将运行结果以HTML格式传送至客户端的浏览器。因此ASP与一般的脚本语言相比，要平安得多。ASP的最大好处是可以包含HTML标签，也可以直接存取数据库及使用无限扩充的ActiveX控件，因此在程序编制上要比HTML方便而且更富有灵活性。通过使用ASP的组件和对象技术，用户可以直接使用ActiveX控件，调用对象方法和属性，以简单的方式实现强大的交互功能。但ASP技术也非完美无缺，由于它根本上是局限于微软的操作系统平台之上，主要工作环境是微软的IIS应用程序结构，又因ActiveX对象具有平台特性，所以ASP技术不能很容易地实现在跨平台Web效劳器上工作。3、JSP即JavaServerPages，它是由SunMicrosystem公司于1999年6月推出的新技术，是基于JavaServlet以及整个Java体系的Web开发技术。JSP和ASP在技术方面有许多相似之处，不过两者来源于不同的技术标准组织，以至ASP一般只应用于WindowsNT/2000平台，而JSP那么可以在85％以上的效劳器上运行，而且基于JSP技术的应用程序比基于ASP的应用程序易于维护和管理，所以被许多人认为是未来最有开展前途的动态网站技术。静态网页和动态网页区别静态网页，动态网页可以根据网页制作的语言来区分：