作者：谢英辉
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML+CSS+JavaScript网页客户端程序设计试读：
前言
本书适合的读者
本书通过一个整体门户网站项目来讲解 HTML、JavaScript和 CSS 的基本语法，书中每个知识点都有一个鲜活、典型的小实例，并在每章后面有一节为知识综合案例，使读者能够学以致用。本书可作为高职高专相关专业的教材和网页制作初学者的入门教程，同时也可为网站建设的专业人士提供一些参考。
为什么要学习HTML、JavaScript和CSS技术
Internet又称因特网，是全球性的网络，是一种公用信息的载体，这种大众传媒比以往的任何一种通信媒体都要快，它缩短了人与人之间的距离，而网站就是Internet中信息载体的宿主单元，网站中的网页是人与人交流的主要窗口，因此，作为计算机相关专业的学生，无论是专业的网站设计人员，还是网站爱好者，都应该掌握一定的网站建设与制作技术。
如今建设互联网的各种新技术层出不穷并且日新月异，但有一点是肯定的，不管是采用什么技术设计的网站，用户在客户端通过浏览器打开看到的网页都是静态网页，都是由 HTML、JavaScript和 CSS 技术构成的，所以如果想从事网页设计或网站管理相关工作，就必须学习 HTML、JavaScript 和 CSS 技术，哪怕只是简单地了解，因为这些技术是网页制作技术的基础和核心。
本书特色（1）针对性强、实用性强。
本书的编者都有10年以上专业教学经验，3年以上软件企业项目开发与企业管理经验，教材的编写是在大量的企业需求调查、学校学生调查的基础上进行的，重点讲解了HTML、JavaScript和CSS网站客户端技术。
在本书的编写中，本着“学生会学、教师好教、企业需要”的原则，注意理论与实践的一体化，并注重实用性。每个知识点的介绍通过理论介绍、案例源代码、运行效果和源代码解释 4 个步骤完成。每章有一个综合案例，综合案例针对软件企业项目开发过程来讲解，步骤为提出问题、分析问题、解决问题，实用性强。同时为了学生扩展能力的培养，每章还安排了学生任务扩展的项目实训。（2）精心设计，理论与案例实训完美结合。
本书介绍了HTML语言、JavaScript脚本、CSS样式三方面的知识，将教材分为15章，每章的讲解都是先讲解理论知识，再介绍小案例，最后以完整网站项目贯通详解。同时，本书试图为读者描绘一幅HTML、CSS、JavaScript的角色图，即三者在网页制作这个大的生态环境中各自扮演的角色。其中，HTML 是网页制作的主要语言，是页面的基础架构；CSS 简称样式表，是目前唯一的网页页面排版样式标准，它能使任何浏览器都听从指令，可开发Internet客户端的应用程序；JavaScript是基于对象和事件驱动并具有相对安全性的客户端脚本语言，主要用来给HTML网页添加动态功能，比如响应用户的各种操作、减轻服务器端压力等。
设计网站时需要利用相关工具来完成，好的工具能使设计者事半功倍，目前比较流行的网页设计工具是Dreamweaver，利用Dreamweaver进行网页设计在本书中有详细介绍。
设计出来的网站，必须能通过浏览器访问，甚至能通过Internet来访问，所以网站必须要部署与发布，有局域网或Internet发布，发布需要熟悉过程和一些网络术语，在本书中也有详细介绍。
了解了以上内容，可以使读者理清思路，避免盲目学习，不会有盲人摸象的感觉。
致谢
本书的编写过程是一个不断解决问题和完善的过程，所有参加教材编写的老师都是尽心尽力，利用宝贵的休息时间来编写，是他们对本书编写进行了大量的调研，多次审订，并提出宝贵的修改意见，才使得本书得以顺利出版，在此表示忠心的感谢，同时也感谢书后参考文献的所有作者们，感谢他们的资料给予本书的引导作用。
本书由谢英辉任主编并负责教材总体设计与统稿，胡胜丰、雷军环，彭维捷，刘灿勋任副主编，参与了本书的编写工作和相关资料的整理工作，其中，谢英辉编写了第1、2、3、13、14、15章，胡胜丰编写了第8、9、10、11、12章，雷军环编写了第4、5章，彭维捷编写了第6章，刘灿勋编写了第7章。
本书的结构是一种新的尝试，能否得到同行的认可，能否给教学带来新的感受，都要经过实践的检验。由于作者水平有限，错误之处在所难免，恳请各位读者给予批评和指正。
编者
第1章 网站部署与发布及设计分析
基本介绍
软件开发设计有一个严格的过程，即软件开发流程。软件开发流程是软件设计思路和方法的一般过程，包括设计软件的功能和实现的算法及方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试，以及编写、提交程序。软件项目的开发实践表明，软件开发各个阶段所需要的技术人员类型、层次和数量是不同的，在软件开发过程中，人员的选择、岗位分配和组织是决定软件开发效率、软件开发进度、软件开发过程管理和软件产品质量的重大因素。而网站部署与发布是把信息放在局域网或 Internet上，让用户可以通过浏览器在局域网或Internet上访问。
需求与应用
对于软件企业来说，软件过程是整个企业最复杂、最重要的业务流程，软件产品就是软件企业的生命，改进整个企业的业务流程，最重要的还是要改进它的软件开发流程。目前，中国软件产业之所以落后，不是因为技术落后，而是对软件生产过程的管理落后。
某网络服务提供商公司招聘一职位，需要该职位的员工专门负责个人或企业租用该公司Web服务器在Internet上发布门户网站的工作。该职位技术需求为了解万维网、Web网页、网站、IP地址、域名等基本知识，掌握利用IIS部署发布网站的整个流程。
学习目标
了解万维网、Web网页、网站、IP地址、域名的基本概念。
掌握IIS的安装。
掌握利用IIS发布网站的方法。
认识软件开发流程。
了解软件开发过程中的岗位需求情况。
建立模拟项目团队。
1.1 网页的基本概念
1.Internet网络与万维网
Internet，中文正式译名为因特网，又称国际互联网，起源于美国20世纪60年代末。它是由那些使用公用语言互相通信的计算机连接而成的全球网络。只要连接到它的任何一个节点上，就意味着你的计算机已经连入Internet了。
万维网（World Wide Web，简称为Web或WWW）是一个资料空间。在这个空间中，所有资料采用统一资源标识符（Uniform/Universal Resource Locator，URL）来标识，每个URL由通信协议、通信主机服务器和服务器上的资源路径所组成，如电子工业出版社的留言簿的URL为http：//cbjj.phei.com.cn/bbs/index.jsp，其中，cbjj.phei.com.cn为服务器（这里采用的是唯一的域名），bbs/index.jsp为服务器上的资源路径。
2.网页
网页（Web Page）是一个文件，是构成网站的基本元素，是承载各种网站应用的平台，它存放在世界某个角落的某一台计算机中，而这台计算机必须是与因特网相连的。网页由网址（URL）来识别与存取，当我们在浏览器中输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机上，然后再通过浏览器解释网页的内容，最后展示到你的眼前，它是万维网中的一“页”，是超文本标记语言格式的文件（文件扩展名为.html或.htm，.asp或.aspx，.php或.jsp等）。网页通常用图像文档来提供图画，网页要通过浏览器来阅读。
3.网站
网站（Web Site）开始是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通信工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度（俗称“网速”）、网站软件配置、网站提供服务等几方面来考虑，最直接的衡量标准是网站的真实流量。
网站是因特网上一块固定的面向全世界发布消息的地方，由域名（也就是网站地址）和网站空间构成，通常包括主页和其他具有超链接文件的页面。
4.Web标准
Web 标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制定的标准，比如 ECMA（European Computer Manufacturers Association）的ECMAScript标准。Web标准用来创建和解释基于Web的内容。这些规范是专门为了那些在网上发布的可向后兼容的文档所设计，使其能够被大多数人访问。
5.IP地址
IP是英文Internet Protocol的缩写，意思是“网络之间互连的协议”，也就是为计算机网络相互连接进行通信而设计的协议。在因特网中，它是能使连接到网上的所有计算机网络实现相互通信的一套规则，规定了计算机在因特网上进行通信时应当遵守的规则，IP协议也可以称为“因特网协议”。
所谓IP地址就是给每台连接在Internet上的主机分配的一个32位二进制表示的唯一的地址（也叫IPv4），而采用二进制表示太难记忆，所以采用十进制进行表示，分为4个字节，每个字节为8位，字节与字节间用“.”分隔，每个字节十进制数的范围为0～255。如一个采用二进制形式的IP地址是“00001010000000000000000000000001”，用十进制表示为“10.0.0.1”。IP地址编址方案将IP地址空间划分为A、B、C、D、E五类，其中A、B、C是基本类，D、E类作为多播和保留使用。
A类IP地址由1字节的网络地址和3字节的主机地址组成，网络地址的最高位必须是0，地址范围为1.0.0.0～126.0.0.0。可用的A类网络有126个，每个网络能容纳1亿多个主机。B类IP地址由2字节的网络地址和2字节的主机地址组成，网络地址的最高位必须是 10，地址范围为 128.0.0.0～191.255.255.255。可用的 B类网络有16 382个，每个网络能容纳6万多个主机。C类IP地址由3字节的网络地址和1字节的主机地址组成，网络地址的最高位必须是 110，范围为 192.0.0.0～223.255.255.255。C类网络可达209万余个，每个网络能容纳254个主机。
由于因特网的蓬勃发展，IP地址的需求量愈来愈大，使得IP地址的发放愈趋严格，各项资料显示全球IPv4地址将可能在2015至2025年间全部发完。地址空间的不足必将妨碍因特网的进一步发展。为了扩大地址空间，拟通过IPv6重新定义地址空间。IPv6采用128位地址长度。在IPv6的设计过程中除了一劳永逸地解决了地址短缺问题以外，还解决了在IPv4中不好的其他问题。
6.域名
域名（Domain Name），是由一串用点“.”分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置），一个域名，它定义了行政自主权、权力或控制因特网的境界。域名是一个IP地址上的“面具”。域名是便于记忆和沟通的一组服务器的地址（网站、电子邮件、FTP 等）。域名作为力所能及和难忘的因特网参与者的名称，如计算机网络和服务。世界上第一个域名是在1985年1月注册的。
通俗地说，域名就相当于一个家庭的门牌号码，别人通过这个号码可以很容易地找到您，和 IP 地址一样，域名也具有唯一性，采用域名映射关系和 IP 地址唯一对应，在访问某个网站时，只需要输入域名就可访问，解决了IP地址太难记忆，不方便在访问时输入的问题。
域名可分为不同级别，包括顶级域名、二级域名等。顶级域名又分为国家顶级域名和国际顶级域名两类。
国家顶级域名（national Top-Level Domainnames，nTLDs），200 多个国家都按照ISO3166国家代码分配了顶级域名，例如中国是cn，美国是us，日本是jp等。
国际顶级域名（international Top-Level Domainnames，iTLDs），如表示工商企业的.com，表示网络提供商的.net，表示非营利组织的.org等。大多数域名争议都发生在.com的顶级域名下，因为多数公司上网的目的都是为了赢利。为加强域名管理，解决域名资源的紧张，Internet协会、Internet分址机构及世界知识产权组织（WIPO）等国际组织经过广泛协商，在原来三个国际通用顶级域名的基础上，新增加了7个国际通用顶级域名：firm（公司企业）、store（销售公司或企业）、web（突出WWW活动的单位）、arts（突出文化、娱乐活动的单位）、rec（突出消遣、娱乐活动的单位）、info（提供信息服务的单位）、nom（个人），并在世界范围内选择新的注册机构来受理域名注册申请。
二级域名是指顶级域名之下的域名，在国际顶级域名下，它是指域名注册人的网上名称，例如ibm、yahoo、microsoft等；在国家顶级域名下，它是表示注册企业类别的符号，例如com、edu、gov、net等。中国在国际互联网络信息中心（Inter NIC）正式注册并运行的顶级域名是cn，这也是中国的一级域名。在顶级域名之下，中国的二级域名又分为类别域名和行政区域名两类。类别域名共6个，包括用于科研机构的ac，用于工商金融企业的com，用于教育机构的edu，用于政府部门的gov，用于互联网络信息中心和运行中心的net，用于非营利组织的org。而行政区域名有34个，分别对应于中国各省、自治区和直辖市。
三级域名用字母（A～Z，a～z）、数字（0～9）和连接符（-）组成，各级域名之间用实点（.）连接，三级域名的长度不能超过 20 个字符。如无特殊原因，建议采用申请人的英文名（或者缩写）或者汉语拼音名（或者缩写）作为三级域名，以保持域名的清晰性和简洁性。
7.ISP互联网服务提供商
ISP（Internet Service Provider），互联网服务提供商，即向广大用户综合提供互联网接入业务、信息业务、和增值业务的电信运营商。ISP是经国家主管部门批准的正式运营企业，受国家法律保护。中国三大基础运营商为中国电信、中国移动和中国联通。（1）中国电信：拨号上网、ADSL、1X、CDMA1X，EVDO rev.A、FTTx。（2）中国移动：GPRS及EDGE无线上网、TD-SCDMA无线上网、一少部分FTTx。（3）中国联通：GPRS、W-CDMA无线上网、拨号上网、ADSL、FTTx。
中国电信重组之后，中国网通并入中国联通，剔除中国联通CDMA，组成新联通；中国铁通并入中国移动，成为其旗下全资子公司；中国联通CDMA并入中国电信组成新电信。
8.IIS Web服务器
IIS是Internet Information Services（互联网信息服务）的缩写，是一个World Wide Web server。Gopher server和FTP server全部包容在IIS里面。IIS意味着能发布网页，并且由ASP（Active Server Pages）、Java、VBscript产生页面，有一些扩展功能。IIS支持一些有趣的东西，像有编辑环境的界面FrontPage、有全文检索功能的Index Server、有多媒体功能的Net Show。IIS是随Windows NT Server 4.0一起提供的文件和应用程序服务器，是在Windows NT Server上建立Internet服务器的基本组件。它与Windows NT Server完全集成，允许使用Windows NT Server内置的安全性及NTFS文件系统建立强大灵活的Internet/Intranet站点。IIS是一种Web（网页）服务组件，其中包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器，分别用于网页浏览、文件传输、新闻服务和邮件发送等方面，它使得在网络（包括因特网和局域网）上发布信息成了一件很容易的事。
1.2 网站的发布与测试
1.2.1 在实验室或局域网内部发布HTML页面本地的HTML页面可以直接用浏览器打开显示，但如果想要让局域网（比如同一个办公室或机房教室）里的其他机器访问该HTML页面的话，就必须用Web服务器进行发布，发布过程如下。
1.安装IIS Web服务器
IIS作为当今流行的Web服务器之一，提供了强大的Internet和Intranet服务功能，它是Windows平台服务器的首选Web服务器。IIS通过超文本传输协议（HTTP）传输信息，还可配置IIS以提供文件传输协议（FTP）和其他服务，如NNTP服务、SMTP服务等。IIS在Web服务器阵营里一直稳居Number 2的位置，其安装步骤如下。
打开“控制面板”→“添加/删除程序”→“添加/删除 Windows 组件”→按图 1-1设置操作→按提示提供Windows安装盘并完成安装。
2.利用IIS Web服务器部署HTML页面
IIS服务器默认Web站点的主目录是“c：\InetPub\wwwroot”，而实际要发布的信息是存放在其他目录下的，如“d：\soft\example”，这时，就需要在“默认Web站点”创建一个虚拟目录，实际上虚拟目录（如example）并不是一个真正存在的目录，它是实际的物理路径（如 c：\InetPub\example）的别名，文件是存放在实际的物理路径下的，而在 IIS服务器中，是以虚拟目录进行管理的，与物理路径无关。用户在浏览器中用虚拟目录名来访问实际的物理路径目录，这样做比较安全，用户不知道文件在服务器中的实际位置，并且不能用此信息修改文件。Web服务器部署过程如下。
打开“控制面板”→“性能与维护”→“管理工具”→“Internet信息服务”→按如图1-1所示设置操作→“下一步”→输入要访问网站的别名如“web”→“下一步”→选择页面或网站所在的文件夹→“下一步”→“下一步”→“完成”。关键步骤如图1-2和图1-3所示。图1-1 添加IIS Web服务器图1-2 新建虚拟目录图1-3 选择要发布网站所在的目录
3.用浏览器访问网站
当用IIS服务器部署完项目后，就可以用浏览器访问网页了。打开浏览器后，在地址栏中输入访问URL，如http：//localhost/web/index.html，其中http为访问协议，localhost为服务器IP地址，因为在本机访问，所以可用localhost，也可用127.0.0.1或本服务器真实的IP地址，web为前面步骤部署时创建的虚拟目录，index.html为要访问的网站的首页，如图1-4所示。图1-4 局域网部署网站效果图1.2.2 在Internet上发布网站
如果想让Internet上的用户都能访问您的网页，就必须在Internet上发布您的网站，在1.4.1节中在局域网中发布的网站，只能在同一个局域网中访问，不能在Internet上访问，在Internet上发布网站的具体过程如下。
1.注册域名
注册域名需要遵循先申请先注册原则。域名是一种有价值的资源，在新的经济环境下，域名所具有的商业意义已远远大于其技术意义，人们已经把域名看做知识产权的一部分。
当然，相对于传统的知识产权领域，域名是一种全新的客体，具有自身的特性。例如，域名的使用是全球范围的，没有传统的严格地域性的限制；从时间性的角度看，域名一经获得即可永久使用，并且无须定期续展；域名在网络上是绝对唯一的，一旦取得注册，其他任何人不得注册、使用相同的域名，因此其专有性也是绝对的；另外，域名非经法定机构注册不得使用，这与传统的专利、商标等客体不同，等等。即使如此，把域名作为知识产权的客体也是科学和可行的，在实践中对于保护企业在网络上的相关合法权益是有利而无害的。
目前Internet上有很多网站提供免费域名，只需在百度中搜索“申请免费域名”即可获得，当然免费的总是有不如意的地方，如果是公司或单位，最好去专门负责的公司去申请购买，如中国万网、互易中国、四博互联等。注册域名的申请步骤如下。（1）准备申请资料：com域名无须提供身份证、营业执照等资料，2012年6月3日cn域名已开放个人申请注册，但申请需要提供身份证或企业营业执照。（2）寻找域名注册网站：推荐谷谷互联，由于com、cn域名等不同后缀均属于不同注册管理机构所管理，如要注册不同后缀域名则需要从注册管理机构寻找经过其授权的顶级域名注册查询服务机构。如com域名的管理机构为ICANN，cn域名的管理机构为CNNIC（中国互联网络信息中心）。如域名注册查询注册商已经通过ICANN、CNNIC双重认证，则无须分别到其他注册服务机构申请域名。（3）查询域名：在注册商网站注册用户名成功后并查询域名，选择要注册的域名，并点击域名注册查询。（4）正式申请：查到想要注册的域名，并且确认域名为可申请的状态后，提交注册，并缴纳年费。（5）申请成功：正式申请成功后，即可开始进入DNS解析管理、设置解析记录等操作。
2.申请空间
因为自己建立服务器来搭建网站需要的费用比较高，而且对技术人员的维护水平也是相当严峻的考验。所以对于中小企业和个人用户来说，目前性价比最高的建立网站的方法就是使用虚拟主机。通过向一些空间服务商交纳一定的租用虚拟主机的费用来实现建立网站的目的。一方面空间服务商提供的服务器是高效和稳定的，出现问题也会有专业人员进行排查；另一方面空间服务商也会保证服务器的安全，安装防火墙等硬件设备来阻止病毒与黑客的攻击。
目前因特网上也有很多提供免费虚拟主机的网站，如中国免费空间网（http：//www.06la.com/），也可在百度上查找“免费空间申请”关键字，可找到很多提供免费空间的网站，也可到专门提供虚拟主机的公司去租用，如当地电信、中国万维网等。
3.上传文件到空间
利用空间提供商提供的用户名和密码在指定的网站上把要发布的网站文件内容上传到购买的空间。
4.测试
利用因特网在远程访问发布的网站，如果不成功，则查看原因，可询求网站空间服务商来帮忙解决。如果成功，则会得到如图1-5所示的效果图。图1-5 网站Internet上部署效果图
1.3 软件开发流程
网站开发是开发基于 B/S（IE 浏览器）的网页开发的一个整体过程，也可以理解开发即制作，是较多的小制作带来的开发，网站是由若干个页面组成的有联系的集合，在整个开发过程中需要遵循一个流程，需要分工合作，根据技术要求不同分成不同的岗位。
软件开发流程（Software Development Process）即软件设计思路和方法的一般过程，包括设计软件的功能和实现的算法及方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试，以及编写、提交程序等。
1.需求调研分析
网站同样需要“以人为本”。只有准确把握用户需求，才能做出用户真正喜欢的网站。如果不考虑用户需求，网站的页面设计得再漂亮，功能再强大，也只能作为摆设，无法得到用户的肯定。需求分析过程因网站大小与复杂度、用途不同而不尽相同。以本书提供的门户网站为例，该网站主要用于公司发布和展示信息，分析人员可以先去公司了解该公司的需求，形成文档，然后对需求文档进行分析总结形成易于客户理解的信息，结合相关成功案例，向客户解释，使客户认可，这是一个反复的过程。
2.概要设计
首先，开发者需要对软件系统进行概要设计，即系统设计。概要设计需要对软件系统的设计进行考虑，包括系统的基本处理流程、系统的组织结构、模块划分、功能分配、接口设计、运行设计、数据结构设计和出错处理设计等，为软件的详细设计提供基础。
以本书提供的门户网站为例，可以利用画图、Excel、Word 工具对网站功能效果画图并描述，并展示给客户，请客户认可。这也是一个反复的过程，需要多次修改并最终使客户认可。详见随书配套资源中“第 1 章网站部署与发布及设计分析范例集合”中的“门户网站概要设计书”文件。
3.详细设计
在概要设计的基础上，开发者需要进行软件系统的详细设计。在详细设计中，描述实现具体模块所涉及的主要算法、数据结构、类的层次结构及调用关系，需要说明软件系统各个层次中的每一个程序（每个模块或子程序）的设计考虑，以便进行编码和测试。应当保证软件的需求完全分配给整个软件。详细设计应当足够详细，能够根据详细设计报告进行编码，详见随书配套资源中“第 1 章网站部署与发布及设计分析范例集合”中的“门户网站详细设计书”文件。
4.编码
在软件编码阶段，开发者根据《软件系统详细设计报告》中对数据结构、算法分析和模块实现等方面的设计要求，开始具体的编写程序工作，分别实现各模块的功能，从而实现对目标系统的功能、性能、接口、界面等方面的要求。如本书介绍的门户网站采用Dreamweaver工具和HTML、JavaScript及CSS语言进行.html、.js和.css文件的设计，开发出可与用户交互的网站。
5.测试
测试编写好的系统。交给用户使用，用户使用后一个一个地确认每个功能。
6.验收
用户验收产品，产品在Internet上部署发布，正式上线。
1.4 网站开发人员相关岗位职责和要求
根据网站开发的流程及技术要求，我们对本书的门户网站开发人员进行岗位分工。（1）项目经理：基本职责就是确保项目目标的实现，领导项目团队准时、优质地完成全部工作。与客户沟通，了解项目的整体需求。并与客户保持一定的联系，即时反馈阶段性的成果，即时更改客户提出的合理需求。制定项目开发计划文档，量化任务，并合理分配给相应的人员。跟踪项目的进度，协调项目组成员之间的合作。监督产生项目进展各阶段的文档，并与质量管理员（QA）即时沟通，保证文档的完整和规范。开发过程中的需求变更，项目经理需要跟客户了解需求，在无法判断新的需求对项目的整体影响程度的情况下，需同项目组成员商量，最后决定是否接受客户的需求，然后再跟客户协商。确定要变更需求的情况下，需产生需求变更文档，更改开发计划，通知QA。项目提交测试后，项目经理需了解测试结果，根据测试的 bug 的严重程度来重新更改开发计划。向上汇报，向上级汇报项目的进展情况，需求变更等所有项目信息。项目完成的时候需要做项目总结，编写项目总结文档。（2）网页设计人员（美工）：根据项目经理提供的策划书和内容结构制作网站网页界面，一个有吸引力的网站需要有很好的美工。（3）程序员：根据美工设计的初始网页界面和功能需求，编写代码实现网站功能需求。（4）数据库专业人员：数据库专业人员可归纳为网站程序员，一般程序员都要求掌握数据库技术，大型而复杂的网站，对数据库专业技术要求较高，需要有高技术的数据库专业人员来专门负责复杂的数据库建设和编写复杂的、高效的SQL语句。（5）测试员：负责网站质量的把关工作，包括功能、性能、安全性和易用性；设计和优化测试用例，独立按规范进行测试结果，编写完整的测试用例和测试报告等相关技术文档，对测试中发现的问题进行分析和定位，对测试结果进行总结与统计分析，对测试进行跟踪；根据测试规范和测试要求完成网站的后期测试工作（前期测试一般包括开发人员自己测试及相互测试）。
网站开发人员的岗位要求详细介绍如下。
1.项目经理
项目经理是要能够控制某个项目整体的，项目经理的好坏直接决定项目结果的好坏，因此对项目经理的整体素质要求非常高。
需要有几年以上从事相关IT工作开发经验；熟悉相关项目企业的管理模式及其业务流程；对项目管理过程有较深刻的理解和丰富经验及多项目实施经验；具备系统实施方案的撰写、需求分析和建议书的编写能力；具有相关数据库（如MS SQL Server或Oracle等）的操作和维护知识及维护能力；具备良好自信心，有较强的口头表达能力；具备良好的职业素养、敬业、团队合作精神，有强烈的进取精神、责任心；具备高度的计划性和条理性，有出色的沟通、协调能力；能够在压力下工作。
2.网页设计人员（美工）
本书门户网站的整体布局和图片PS处理都是由美工来完成的。美工需要有优秀的审美能力，较深的美术功底，对配色、线条等网页相关元素敏感；精通 Dreamweaver、Photoshop、Fireworks、AI、Flash 等设计软件，对图片渲染和视觉效果有较好的认识；善于与人沟通，具备良好的团队合作精神和高度的责任感，能够承受压力，有创新精神，能保证工作质量。
3.程序员
程序员负责软件的具体开发工作，需要具有具体项目所要使用的某种语言程序设计能力，如静态Web开发需要具有HTML、JavaScript、CSS等语言技能，动态Web开发需要具有C＃、ASP.NET或Java、J2EE或PHP、MySQL、SQL Server、Oracle等语言技能，当然与人沟通和团队合作能力也是必须具有的。
本书门户网站因为是静态网站，需要程序员掌握HTML、JavaScript、CSS等语言技能。
4.数据库专业人员
精通某门数据库语言的使用与开发设计，如MySQL、SQL Server、Oracle等。本书门户网站因为是静态网站，暂时没涉及数据库，暂不需要数据库专业人员。
5.测试员
了解软件开发过程，熟悉软件测试流程与测试技术，具有一定代码编写经验，熟悉SQL查询语法，熟悉相关缺陷管理工具和软件测试工具，目前测试工具有很多，如AutoRunner、TestCenter、Bugfree、Bugzilla、TestLink、mantis zentaopms、Watir、Selenium、MaxQ、WebInject、Jmeter、OpenSTA、DBMonster、TPTEST、Web Application Load Simulator等。
本书门户网站因为是静态网站，目前最好的测试方法就是采用Firefox浏览器的Web Developer Toolbar，用来动态检查 HTML 代码和修改其部分内容，以及调试 JavaScript Firebug，用来调试 JavaScript 和 CSS，修改 DOM，以及查看客户机和服务器间的通信，Greasemonkey与包括 jQuery 的 bookmarklet，用来将开发代码注入实际 Web 站点以测试新特性。
1.5 网站开发工具和项目实施
网站主要的开发工具有Dreamweaver、Flash、Firework、Photoshop、.NET和Eclipse等，其中.NET和Eclipse主要用于动态网站开发，而本书项目主要用Dreamweaver来设计HTML页面和JavaScript、CSS等文件，用Flash来制作Flash动画，用Photoshop来处理图片等。
1.组建开发团队
在项目需求确定后，根据项目需求正式组建开发团队，团队是一个整体，要强调整体而非个人。有效的团队合作包括：在工作负担不平衡的情况下帮助其他人，按照适合个人偏好的方式去交流，共享信息和资源。团队有两个鲜明的特点：第一是个体成员有共同的工作目标；第二是成员需要协同工作，也就是说某个成员工作需要依赖于另一成员的结果。
整个项目可以看成是一个团队，而项目又可以根据岗位或技术特点或模块功能分为很多小组，每个小组一般由4～5人组成。
从各岗位的要求来看，所有职位都要求具有与人沟通和团队合作能力，好的团队能起到1+1大于2的效应，所以在学习的过程中，同学们同样需要分组成立团队，这样既能互相督促和促进学习，形成你追我赶的学习气氛，也能培养个人的沟通和团队合作能力。
2.项目分组名单如表1-1所示表1-1 项目分组名单表
1.6 项目实训：免费域名的注册与空间申请
任务1：对本书门户网站项目进行部署，并采用http：//localhost/web/index.html进行访问验证。
任务2：个人申请免费域名、空间，在Internet上发布个人网站。
1.7 综合练习
一、选择题（1）从本质上来说，静态网页是使用HTML、（）和CSS语言编写的文档。
A.C＃B.C++C.Java D.脚本语言（如JavaScript）（2）软件模式主要分为C/S模式和（）模式。
A.B/S B.B to B C.B to C D.C to C（3）用来表现HTML或XML等文件样式的计算机语言是（）语言。
A.CSS B.C++C.Java D.脚本语言（如JavaScript）（4）用于描述网页文档的一种标记语言是（）。
A.C＃B.HTML C.Java D.脚本语言（如JavaScript）（5）Windows操作系统自带的Web服务器简称为（）。
A.Tomacat B.Weblogic C.IIS D.Jboss
二、填空题（1）Internet，中文正式译名为______，又叫______。（2）构成网站的基本元素称为______。（3）在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合叫______。（4）网页主要由______，______，______三部分组成。（5）Web网页主要表现为超______，超______，超______三种形式。
三、应用题（1）简述软件开发的流程及各自的主要工作。（2）目前网站开发主要有哪些工具?各工具的特点是什么?（3）目前网站开发有哪些职位?各职位对技能有哪些要求?
第2章 HTML页面与框架
基本介绍
HTML（Hypertext Markup Language）即超文本标记语言，是用于描述网页文档的一种标记语言，用HTML语言创建的页面就是HTML页面，是在万维网（WWW）上的一个超媒体文档，也称为静态 Web 网页。静态 Web 网页的本质就是超级文本标记语言，通过结合使用其他的 Web 技术（如脚本语言、ASP.NET、J2EE 等），可以创造出功能强大的动态Web网页。
框架网页是一种特殊的HTML网页，它可将浏览器窗口分成不同的区域，称为框架区域。每个区域都可以显示不同的网页，通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
需求与应用
小明在长沙民政职业技术学院软件学院学习软件开发与项目管理专业两年了，还有一年就要毕业，现在小明想在暑假找个软件公司实习，经学校推荐到了某软件公司，经项目经理面试后，项目经理要求小明在3天内学习掌握制作简单HTML页面，并且要求小明能看懂新浪网打开后的页面结构。
扬州苏水科技有限公司在跟江苏省水利勘测设计研究院有限公司进行网站需求调研后确定，门户网站中需要在网站中选中某个栏目时进入该栏目的总体页面，在总体栏目页面顶部显示网站Logo，在左边显示栏目目录及该栏目下的所有子条目（如选中主要业绩进去后，在左边显示主要业绩目录下的所有子条目，如水利规划等），而选中某条目并单击后，在右边显示该条目下所有的详细数据信息（如单击水利规划，在右边显示水利规划下的所有数据信息）。
学习目标
掌握HTML页面结构。
了解并掌握HTML语言中的标签的使用。
了解并掌握标签中的属性的使用。
掌握HTML页面文档的编写。
认识框架的特点和种类。
结合项目掌握框架的具体应用。
2.1 HTML页面文件的整体结构
HTML 的结构包括头部（Head）和主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要显示说明的具体内容，HTML页面结构代码及描述如图2-1所示。图2-1 HTML页面结构代码及描述
2.2 HTML文件的标签与语法
1.标签
HTML文档是由HTML标签（也称为HTML元素）定义和构成的，HTML标签元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码，开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。大多数HTML标签元素可以嵌套（可以包含其他HTML元素）。在HTML4中总共包含89个标签，每个标签有不同的功能，详见附录A表A-1标签列表与描述。
2.属性
HTML标签可以设置属性，属性用于定义和说明有关HTML标签的更多的信息和特征，就好比人有姓名、年龄、性别等特征一样。属性总是以名称/值对的形式出现，比如name=″value″。属性只能在HTML元素的开始标签中定义，其中属性值是HTML标签中某个属性的值，用于定义说明标签的某个特征的具体信息，应该始终被包括在引号内。双引号是最常用的，也可使用单引号，在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号，例如：
常用属性及描述如表2-1所示。表2-1 常用属性及描述续表
2.3 HTML文档编写规范
在编写HTML文档时，必须要按HTML的语法来规范编写，应该遵守的注意事项如下。（1）所有标签元素都要用尖括号<>括起来，浏览器就可以知道这是HTML标签元素。（2）对于成对出现的标记，最好同时输入起始标签和结束标签，再在中间添加内容，以免忘记结束标签，使文档结构混乱，难于检查。（3）在HTML代码中，不区分大小写。（4）任何空格或回车在代码中都无效，如果要插入空格或回车，请使用 ；或
。（5）标记间不要有空格，否则浏览器可能无法识别，比如不能将
Macromedia公司所开发的著名网站开发工具，有HTML编辑的功能，有所见即所得的特征，Dreamweaver 是 Macromedia 公司推出的可视化网页制作工具，它与 Flash、Fireworks 一起称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。Dreamweaver可以用最快速的方式将Fireworks、FreeHand或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。并且只要单击便可使Dreamweaver自动开启Fireworks或Photoshop来进行编辑与设定图档的最佳化。所以目前Dreamweaver在网页设计应用方面比较常见。
Dreamweaver 8的标准工作界面包括：标题显示栏、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。Dreamweaver窗口如图2-2所示。图2-2 Dreamweaver窗口
1.标题显示栏
启动Macromedia Dreamweaver 8后，标题栏将显示文字Macromedia Dreamweaver 8，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称，如Untitled-1.html就是文件的名称，如图2-3所示。图2-3 Dreamweaver窗口中的标题栏
2.菜单栏
Dreamweaver 8的菜单共有10个，即文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助，如图2-4所示。其中，编辑菜单里提供了对Dreamweaver菜单中“首选参数”的访问。图2-4 Dreamweaver窗口中的菜单栏
文件：用来管理文件。例如新建、打开、保存、另存为、导入、输出打印等。
编辑：用来编辑文本。例如剪切、复制、粘贴、查找、替换和参数设置等。
查看：用来切换视图模式及显示、隐藏标尺、网格线等辅助视图功能。
插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。
修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格等。
文本：用来对文本操作，例如设置文本格式等。
命令：所有的附加命令项。
站点：用来创建和管理站点。
窗口：用来显示和隐藏控制面板及切换文档窗口。
帮助：联机帮助功能。例如按F1键，就会打开电子帮助文本。
3.插入面板组
插入面板集成了所有可以在网页应用的对象，包括“插入”菜单中的选项。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易地加入图像、声音、多媒体动画、表格、图层、框架、表单、Flash和ActiveX等网页元素。
4.文档工具栏“文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览），如图 2-5所示。图2-5 Dreamweaver窗口中的文档工具栏
5.标准工具栏“标准”工具栏包含来自“文件”和“编辑”菜单中的一般操作的按钮：“新建”、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤销”和“重做”，如图2-6所示。图2-6 Dreamweaver窗口中的标准工具栏
6.文档窗口
当打开或创建一个项目，进入文档窗口后，可以在文档区域中进行输入文字、插入表格和编辑图片等操作。“文档”窗口显示当前文档。可以选择下列任一视图：“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境，在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容；“代码”视图是一个用于编写和编辑 HTML、JavaScript、服务器语言代码及任何其他类型代码的手工编码环境；“代码和设计”视图可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。文档窗口如图2-7所示。图2-7 Dreamweaver窗口中的文档窗口
7.状态栏“文档”窗口底部的状态栏提供与您正创建的文档有关的其他信息。标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击可以选择文档的整个正文。
8.属性面板
属性面板并不是将所有的属性加载在面板上，而是根据选择的对象来动态显示对象的属性，属性面板的状态完全是随当前在文档中选择的对象来确定的。例如，当前选择了一幅图像，那么属性面板上就出现该图像的相关属性；如果选择了表格，那么属性面板会相应地变成表格的相关属性。属性面板如图2-8所示。图2-8 Dreamweaver窗口中的属性面板
9.浮动面板
其他面板可以统称为浮动面板，这些面板都浮动于编辑窗口之外。在初次使用Dreamweaver 8的时候，这些面板根据功能被分成了若干组。在窗口菜单中，选择不同的命令可以打开基本面板组、设计面板组、代码面板组、应用程序面板组、资源面板组和其他面板组。浮动面板如图2-9所示。图2-9 Dreamweaver窗口中的浮动面板2.4.2 Dreamweaver设计页面过程（1）下载Dreamweaver并安装，下载参考网站为http：//www.crsky.com/soft/6604.html。（2）在任务栏中单击“开始”→“程序”，然后打开Dreamweaver程序界面，如图2-10所示。图2-10 Dreamweaver程序界面（3）在打开的窗口中，选择“文件”菜单中的“新建”命令，如图2-11所示。图2-11 选择“新建”命令（4）在弹出的“新建文档”对话框中，分别在“类别”、“基本页”和“文档类型”中按如图2-12所示选择后，单击“创建”按钮。图2-12“新建文档”对话框（5）在HTML的
标签中输入显示内容为“这是我的第一个网页”，如图2-13所示。图2-13 在HTML的标签中输入显示内容（6）选择“文件”菜单中的“保存”命令或直接按“Ctrl+S”组合键后，保存文件名为example.html。（7）在保存地直接双击example.html文件用浏览器打开后，其显示效果如图2-14所示。图2-14 网页显示效果2.5 项目实训：独立动手制作网页
任务：利用Dreamweaver或记事本设计一个页面，实现文字居中显示，文字大小为7，文字颜色为红色。目标效果如图2-15所示。图2-15 目标效果图
提示：可用标签和 标签及相关属性来完成。 2.6 认识框架与框架集网页
框架网页是一种特殊的 HTML 网页，它可将浏览器窗口分成不同的区域，称为框架区域。每个区域都可以显示不同的网页，通过使用框架，可以在同一个浏览器窗口中显示多个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
1.框架网页的特点
只要单击某一个框架区域内的超链接，其指向的网页就会在另一个框架区域中显示，而不必将整个浏览器窗口中的内容更换一遍。
固定网页中的某些内容。
并不是所有的浏览器都能显示框架网页，这也是框架网页的一个局限。
框架集中不能有
标签。2.框架网页的种类
根据框架分布的不同和各框架作用的不同，框架网页被分为多种类型。使用Dreamweaver或Fontpage制作网页时，常用到的框架网页有：标题、标题页脚和目录、垂直拆分、横幅和目录、脚注、目录、嵌套式层次结构、水平拆分、页脚和自顶向下的层次结构，如图2-16所示。图2-16 框架种类
3.框架与框架集
框架是浏览器窗口中的一个区域，用标签定义，它可以显示与浏览器窗口中其他区域内容不同的HTML文档。两个或两个以上的框架组成一个网页。
框架集可以说是一个HTML文件，用
标签定义，它定义了一组框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的URL。4.框架标签
创建框架网页主要用到四个标签，分别为
、…、1.网页设计要求
门户网站中，需要在网站中选中某个栏目时进入该栏目的总体页面，在总体栏目页面顶部显示网站Logo，在左边显示栏目目录及该栏目下的所有子条目（如选中主要业绩进去后，在左边显示主要业绩目录下的所有子条目，如水利规划等），而选中某条目并单击后，在右边显示该条目下所有的详细数据信息（如单击水利规划，在右边显示水利规划下的所有数据信息）。
2.设计院门户网站框架网页目标效果如图2-17所示
试读结束[说明：试读内容隐藏了图片]