学习情境一 网站的管理与创建
任务一 网页制作的相关概念
【知识目标】
（1）了解并掌握网页制作的相关概念。
（2）了解网页元素的种类。
【能力目标】
培养学生自主学习理论知识的能力。
【任务实施】
1.1 网页制作相关概念
1．WWW简介
万维网（World Wide Web，亦称Web、WWW、W3）是一个由许多互相链接的超文本组成的系统，通过互联网进行访问。在这个系统中，每个有用的事物均称为“资源”；并且由一个全局“统一资源标识符”（Uniform Resource Identifiers, URI）标识；这些资源通过超文本传输协议（Hyper Text Transfer Protocol, HTTP）传送给用户，而后者通过单击链接来获得资源。万维网联盟（World Wide Web Consortium），简称W3C，又称W3C理事会，于1994年10月在麻省理工学院（MIT）计算机科学实验室成立。万维网联盟的创建者是万维网的发明人蒂姆·伯纳斯·李。
万维网的核心部分是由以下3个标准构成的。
（1）统一资源标识符，这是一个统一的为资源定位的系统。
（2）超文本传输协议，它负责规定客户端和服务器怎样互相交流。
（3）超文本标记语言，作用是定义超文本文档的结构和格式。
2．网页
网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，你的网站就是由网页组成的，如果你只有域名和虚拟主机而没有制作任何网页，你的客户仍旧无法访问你的网站。
网页是一个文件，它可以存放在世界某个角落的某台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为．html或.htm）。网页通常用图像文档来提供图画，要通过网页浏览器来阅读。
3．网站
因特网起源于美国国防部高级研究计划管理局建立的阿帕网。网站（Website）开始是指在因特网上根据一定的规则，使用HTML（标准通用标记语言下的一个应用）等工具制作的用于展示特定内容相关网页的集合。简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。衡量一个网站的性能通常是从网站空间大小、网站位置、网站连接速度（俗称“网速”）、网站软件配置、网站提供服务等几方面考虑，最直接的衡量标准是网站的真实流量。
4．静态网页与动态网页
1）静态网页
静态网页也称为普通网页，是相对动态网页而言的。静态网页不是指网页中的元素都是静止不动的，而是指网页文件中没有程序代码，只有HTML（HyperText Markup Language，超文本标记语言）标记，一般后缀为．htm、.html、.shtml或．xml等。在静态网页中，可以包括GIF动画，鼠标经过Flash按钮时，按钮可能会发生变化。
对于静态网页，用户可以直接双击打开，看到的效果与访问服务器是相同的，即服务器参加与否对页面的内容是不会有影响的。这是因为在用户访问该网页之前，网页的内容就已经确定了，无论用户何时、以怎样的方式访问，网页的内容都不会再改变。
静态网页的工作流程可以分为以下4个步骤。
（1）编写一个静态文件，并在Web服务器上发布。
（2）用户在浏览器的地址栏中输入该静态网页的URL（Uniform Resource Locator，统一资源定位符）并按Enter键，浏览器发送请求到Web服务器。
（3）Web服务器找到此静态文件的位置，并将它转换为HTML流传送到用户的浏览器。
（4）浏览器收到HTML流后显示此网页的内容。
在步骤（2）～（4）中，静态网页的内容不会发生任何变化。其工作原理如图1-1所示。
图1-1
2）动态网页
动态网页是指在网页文件中除了HTML标记外，还包括一些实现特定功能的程序代码，这些程序代码使得浏览器与服务器之间可以进行交互，即服务器端可以根据客户端的不同请求动态产生网页内容。动态网页的后缀名通常根据所用的程序设计语言的不同而不同，一般为．asp、.aspx、cgi、.php、.perl、.jsp等。动态网页可以根据不同的时间、不同的浏览者显示不同的信息。常见的留言板、论坛、聊天室都是用动态网页实现的。
动态网页相对复杂，不能直接双击打开。动态网页的工作流程分为以下4个步骤。
（1）编写动态网页文件，其中包括程序代码，并在Web服务器上发布。
（2）用户在浏览器的地址栏中输入该动态网页的URL并按Enter键，浏览器发送访问请求到Web服务器。
（3）Web服务器找到此动态网页的位置，并根据其中的程序代码动态建立HTML流传送到用户浏览器。
（4）浏览器接收到HTML流后显示此网页的内容。
从整个工作流可以看出，用户浏览动态网页时，需要在服务器上动态执行该网页文件，将含有程序代码的动态网页转化为标准的静态网页，最后把静态网页发送给用户。其工作原理如图1-2所示。
图1-2
5．HTML语言
HTML是WWW的描述语言。制作的网页以．html或．htm为扩展名，它支持丰富的样式表、脚本、框架、表格和表单等多种网页元素，可以嵌入JavaScript语言等。
6．URL
在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL，它是WWW的统一资源定位标志，就是指网络地址。URL由三部分组成，即资源类型、存放资源的主机域名、资源文件名。在浏览器的地址栏里输入网页的URL，就可以访问这个网页了。例如，输入网址http://www.sina.com.cn/index.html时，就是采用HTTP（协议）访问新浪网的首页。
7．IP地址
IP（Internet Protocol，网络之间互联的协议）也就是为计算机网络相互连接进行通信而设计的协议。在因特网中，它是能使连接到网上的所有计算机网络实现相互通信的一套规则，规定了计算机在因特网上进行通信时应当遵守的规则。任何厂家生产的计算机系统，只要遵守IP协议就可以与因特网互联互通。正是因为有了IP协议，因特网才得以迅速发展成为世界上最大的、开放的计算机通信网络。因此，IP协议也可以叫作“因特网协议”。
IP地址被用来给Internet上的计算机一个编号。大家日常见到的情况是每台联网的PC上都需要有IP地址，才能正常通信。可以把PC比作“一台电话机”，那么“IP地址”就相当于“电话号码”，而Internet中的路由器，就相当于电信局的“程控式交换机”。
IP地址是一个32位的二进制数，通常被分割为4个“8位二进制数”（也就是4个字节）。IP地址通常用“点分十进制”表示成（a.b.c.d）的形式，其中a、b、c、d是0～255之间的十进制整数。例如，点分十进制IP地址（100.4.5.6），实际上是32位二进制数（01100100.00000100.00000101.00000110）。
8．域名
域名（Domain Name），也简称网域，是由一串用点分隔的名字组成的Internet上某台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。
网域名称系统（Domain Name System, DNS，有时也简称为域名）是因特网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网，而不用去记住能够被机器直接读取的IP地址数串。
例如，www.wikipedia.org是一个域名，和IP地址208.80.152.2相对应。DNS就像一个自动的电话号码簿，可以直接拨打wikipedia的名字来代替电话号码（IP地址）。直接调用网站的名字后，DNS就会将便于人类使用的名字（如www.wikipedia.org）转化成便于机器识别的IP地址（如208.80.152.2）。
1.2 网页构成的基本元素
网页由文本、图像、动画、超级链接等基本元素构成，本节将对这些基本元素进行简单介绍，为后面各章中运用这些元素制作网页奠定基础。
1．文本
一般情况下，网页中最多的内容是文本，可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置。建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文文字一般可使用宋体，大小为9磅或12像素左右即可。
2．图像
丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为JPG格式和GIF格式。网页中的图像主要用于点缀标题的小图片、介绍性的图片以及代表企业形象或栏目内容的标志性图片，用于宣传广告等多种形式。
3．超级链接
超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是另一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一幅图片、一个E-mail地址等。超级链接可以是文本、按钮或图片，鼠标指针指向超级链接位置时会变成小手形状。
4．导航栏
导航栏是一组超级链接，用来方便地浏览站点。导航栏一般由多个按钮或者多个文本超级链接组成。
5．动画
动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球的最有效方法之一。但是如果网页动画太多，也会物极必反，使人眼花缭乱，进而产生视觉疲劳。
6．表格
表格是HTML语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观，通过表格可以精确地控制各网页元素在网页中的位置。
7．框架
框架是网页的一种组织形式，将相互关联的多个网页内容组织在一个浏览器窗口中显示。例如，在一个框架内放置导航栏，另一个框架中的内容可以随单击导航栏中的链接而改变。
8．表单
表单是用来收集访问者信息或实现一些交互作用的网页，浏览者填写表单的方式是输入文本、选中单选按钮或复选框、从下拉菜单中选择选项等。
网页中除了上述这些最基本的构成元素外，还包括横幅广告、字幕、悬停按钮、日戳、计算器、音频、视频、Java Applet等元素。
1.3 网页的布局类型
网页布局是网页设计中最重要的一环，主要指网站主页的版面布局，其他网页应该与主页风格基本一致。为了达到更好的视觉效果，应考虑布局的合理性，版面布局是整个页面制作的关键。
常见的网页布局形式有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。
（1）“国”字型。也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右两列可显示内容简短的栏目，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是网上出现最多的一种结构类型。
（2）拐角型（“厂”字型）。这种结构与“国”字型只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是链接等内容，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的形式为：最上面是标题及广告，左侧是导航链接。
（3）标题正文型。这种类型最上面是标题或类似的一些东西，下面是正文，如一些文章页面或注册页面等就是这种类型。
（4）左右框架型。这是一种左右分为两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。经常见到的大型论坛都是这种结构类型，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。
（5）上下框架型。与左右框架型类似，区别仅仅在于上下框架型是一种上、下分为两页的框架。
（6）综合框架型。这是左右框架型与上下框架型两种结构的结合，是相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。
（7）封面型。这种类型经常出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大都出现在企业网站和个人主页，如果处理得好，会给人带来赏心悦目的感觉。
（8）Flash型。这与封面型结构是类似的，只是这种类型采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，其页面所表达的信息更丰富，如果视觉效果及听觉效果处理得当，绝不亚于传统的多媒体。
（9）变化型。即上面几种类型的结合与变化，比如网站在视觉上是很接近拐角型的，但所实现的功能的实质是上、下、左、右结构的综合框架型。
1.4 网站风格定位
网站整体风格指的是网站上的所有元素（页面布局、标志、色彩搭配、字体、交互性等）组合后给人的视觉印象。风格是抽象的，企业网站的平易近人、迪士尼网站的生动活泼、门户网站的严谨庄重都给人留下了深刻的印象。
一般网站的主题决定了内容的建设和结构的规划，同时对网站风格的体现也有较大的影响。在网站风格展现中，需要注意以下3个方面。
（1）网站整体风格要保持一致。众所周知，网站的首页设计是网站设计的重点，但不能忽略了内容页的建设。风格的统一要从网站的结构、色彩搭配、导航栏设计方面进行全面考虑。
（2）页面的色彩搭配。色彩影响着人们对网站的第一印象，网站建设中使用同一组色彩搭配，会使网站的感觉更加和谐统一，能更清晰地体现网站的结构层次，使网站主题更加突出。
（3）网站版面的布局设计。可以把各种各样的线条和形状与网页元素合理地搭配到一起，将网页分割成很多区块。合理设置网站LOGO、导航条、广告，将重要的信息放置在网站的显著位置，可使网站的内容井然有序、重点突出。
网站风格是对设计师艺术修养和感受力的一种检验。在提炼出网站的特色后，将其展现出来，就成了网站的风格。
1.5 网站的开发流程
一个网站的建设需要把很多细节结合在一起，只有把各步骤有序地完成，才能建成一个完整的网站。网站开发主要流程如图1-3所示。
图1-3
从业务员与客户沟通、签订网站制作协议后，网站建设大体需要4个阶段。
1．网站需求分析及策划阶段
这个阶段是设计网站的重要阶段，主要完成以下工作。
1）确定网站的主题、功能
主要与客户积极沟通，明确网站建设的目的、功能、主题。设计是为主题服务的，既要“美”又要实现“功能”。只有主题确定了，才能设计网站的实现风格。然后选择站点的色调、标志、字体、版面元素等的设计。
2）设计生成网页效果图
由网站美工生成网页效果图，与客户沟通，不断调整，达成共识，最终确定网站的设计效果，为下一阶段的建设奠定基础。
2．网站设计与制作阶段
完成网站需求分析及策划后，就可以开始建设网站了。建设网站主要分前台和后台两大模块。前台网站设计以网页效果图为样本，完成页面版面的建立。后台要应用恰当的语言做程序处理，从而完成特定的功能。这一阶段主要完成以下工作。
1）规划站点文件的目录结构
将站点用到的各类素材及文件分门别类地组织起来，并放到相应的文件夹下，这就构成了站点的目录结构，如图1-4所示。
图1-4
2）规划各级页面布局
根据需求分析设计的网页效果图，进行各级页面的框架布局。重点采用DIV+CSS的布局方式实现。
3）制作前台页面
将收集整理的网页各种元素、素材添加到布局框架中，实现前台页面。
4）添加后台程序
为实现页面的数据交互，还需编写相应的程序实现网页的动态功能。本书不涉及这部分内容。
3．测试发布阶段
完成网站设计与制作后，就形成了网站的雏形，但不一定完善，所以需要对网站从用户的角度做功能测试，发现问题后逐渐完善，就可以把网站上传到虚拟主机空间里，这时通过域名就可以正式访问网站了。
4．维护推广阶段
一个好的网站不是一次性就可以制作完成的，在运行过程中要对发现的问题不断地修改，这就是网站维护的目的。维护主要针对网站的服务器、网站安全、网站内容等。当网站功能基本稳定后，就要做站外推广工作，可以通过百度搜索引擎对网站进行推广，还可以在其他网络平台进行互联网推广。
加油站
网页创意设计思维
一个网站如果想在浏览者中确定自己的形象，就必须具有突出的个性，必须依靠网站自身独特的创意，因此创意是网站存在的关键。好的创意能够巧妙、恰当地表现主题、渲染气氛、增添网页的感染力，让人过目不忘。
1．创意思维的原则
1）审美原则
好的创意必须具有审美性。一种创意如果不能给浏览者以好的审美感受，就不会产生好的效果。创意的审美原则要求所设计的内容健康、生动、符合人们审美观念。
2）目标原则
创意自身必须与创意目标相吻合，创意必须能够反映主题、表现主题。网页设计必须具有明确的目标性。网页设计的目的是为了更好地体现网站内容。
3）系列原则
系列原则符合“寓多样于统一之中”这一形式美的基本法则，是在具有同一设计要素或同一造型、同一风格或同一色彩、同一格局等的基础上进行连续的发展变化，既有重复的变迁，又有渐变的规律。这种系列变化，给人一种连续、统一的形式感，同时又具有一定的变化，体现了网站的整体运作能力和水平，增强了网站的固定印象和信任度。
4）简洁原则
要做到简洁原则：一是要明确主题，抓住重点，不能本末倒置、喧宾夺主；二是注意修饰得当，要做到含而不露、蓄而不发，以凝练、朴素、自然为美。
2．创意设计方法
在进行创意的工程中，需要设计人员新颖的思维方式。好的创意是在借鉴的基础上利用已经获得的设计形式，来丰富自己的知识，从而启发创造性的设计思路。
1）富于联想
联想是艺术形式中最常用的表现手法。在设计过程中通过丰富的联想，可扩大艺术形象的容量，加深画面的意境。
2）巧用对比
对比是一种趋向于对立冲突的艺术表现手法。在网页设计中加入不和谐的元素，把网页作品中的特点元素放在鲜明的对照和直接对比中来表现，通过这种方法更鲜明地强调或提示网页的特征，给浏览者留下深刻的视觉感受。
3）大胆夸张
夸张是把对象的特点和个性中美的方面进行夸大，赋予人们一种新奇的视觉感受，通过这种表现手法，为网页的艺术美注入浓郁的感情色彩，使得网页的特征更鲜明、更突出。
4）以人为本
艺术的感染力最直接左右的是感情因素，以人为本是使艺术加强传达情感的表现手法，它以美好的感情来烘托主题，这是网页设计中的文学侧重和美的意境与情趣追求。
5）流行时尚
流行时尚的创意手法是通过鲜明的色彩、单纯的形象以及编排上的节奏感来体现出流行的形式特点。
6）合理综合
综合是设计中广泛应用的方法，它在分析各个构成要素的基础上加以综合，使综合后的界面整体形式表现出创造性的新成果，追求和谐的美感。