第1章网页制作概述

网页设计与制作教程教师：胡正红课程学习指导思想网站的制作和发布是通过因特网进行信息交流的前提。制作一个性能卓越的动态网站，要具备HTML、VBSCRIPT、ASP/PHP等多方面的知识，需要熟悉掌握DREAMWEAVER等多种工具。多数人学习软件时总企图掌握所有的操作，其实这种完美主义没有必要。因为现在许多商业软件功能极为强大，许多功能并不常用，一般软件20%的功能可供用户在80%的情况下使用，其余80%的功能只是为20%的情况下准备。“以速度换成本”：现所现用是学习软件最好的方法，不必把一种软件的所有功能都了如指掌。现代社会不是要了解所有的东西，而是先使用，在使用过程中再去了解，否则等到完全了解时，也许它已经过时了。掌握网站技术好坏程度的标准不是“知道不知道”，命令背得熟不熟，而是会不会自己动用制作网站。因此，掌握最重要、最常见的操作是最需要的，余下的“细枝末节”可以解决实际总是中慢慢体会、学习。操作仅是网站制作最基础的一环，学习操作最重要的是用它来开发网站。在理解各种常用技术、操作的含义和实现手段后，通过大量的典型实例练习可迅速提高自己的动手能力。在实例中学习，操作技巧、实际动手能力得到同步提高。网页制作不是专业学习，也不是理论课程，而是作为工具来应用。所以在学习中以应用为出发点。否则，背熟各种命令，不会实际的网站制作是没有用的。学习网站制作，不是从理论入手，也不应从命令入手，而应从实际问题入手，力争做到学以致用。网站制作，应当是案例学习，拿着书上机练习；一个新手他的网站制作水平和他的上机时间成正比的。学习过程中，可以大胆实践各种操作和技术，这样可加深、加速对一知半解操作、技术的理解。网站制作的实践性很强，有些艺术创造性，多动手多动脑，熟能生巧而已。学习要求：平时上机成绩占30%，考试可能采取上机考试。当你在网上冲浪时，会欣赏到很多制作精美的网站漂亮的图片第1章网页设计制作概述教学内容：1、介绍网站建设的相关术语句；2、如何规划站点；3、常见网页制作方法；教学要求：1、掌握规划站点的步骤、方法；2、了解网页制作的几种方法；1.1网页制作基本概念1.1.1IP地址和域名1.1.2URL1.1.3网页、网站相关概念1.1.4静态网页与动态网页域名是Internet网络上的一个服务器或一个网络系统的名字，在全世界，没有重复的域名。给每个连接在Internet上的主机分配一个在全世界范围唯一的32bit地址。1.1.1IP地址和域名根据TCP/IP协议，IP地址由32位二进制数组成，而且在INTERNET范围内是唯一的。如：某IP地址为11000000101010000000101000000010为了方便记忆，人们把32位的IP地址分成四段，每段8位，中间用小数点“.”隔开，然后再将每8位二进制换成十进制，如某一台主机的IP地址为：128.20.4.1IP地址由4组数组成，每组数的范围为0-255。这四组数字中，包含了两部分信息：网络标识（NetID)和主机代号(HostID)。在Internet中，有A、B、C三类网络类型：A类网络采用IP地址的第一组数字标识网络，后面的三组数字均用来标识主机：B类网络采用IP地址的前两组数字标识网强，后两组数字标识主机：C类网络用IP地址的前三组数字标识网络，最后一组数字标识主机：InternetIP地址由InterNIC(Internet网络信息中心)统一负责全球地址的规划、管理；同时由InterNIC、APNIC、RIPE三大网络信息中心具体负责美国及其它地区的IP地址分配。通常每个国家需成立一个组织，统一向有关国际组织申请IP地址，然后再分配给客户。域名域名的形式是以若干个英文字母或数字组成，由“.”分隔成几部分，如SOHU.com就是一个域名。总体上可把域名分成两类，一类称为“国际顶级域名”（简称“国际域名”），一类称为“国内域名”。一般国际域名的最后一个后缀是一些诸如.com，.net，.gov，.edu的”国际通用域”，这些不同的后缀分别代表了不同的机构性质。比如.com表示的是商业机构，.net表示的是网络服务机构，.gov表示的是政府机构，.edu表示的是教育机构。什么是国内域名？国内域名的后缀通常要包括“国际通用域”和“国家域”两部分，而且要以“国家域”作为最后一个后缀。以ISO31660为规范，各个国家都有自己固定的国家域，如：cn代表中国、us代表美国、uk代表英国等。例如：就是一个国际顶级域名域名的一般格式：主机名.机构名.类别名.地区名国际域名可以不包括地区名如：Chat.tom.comTop.mop.com表示统一资源定位符(UniformResourceLocoator),它指出信息的位置及存取方式。一般用户在浏览器的地址栏中输入URL内容。一般格式：协议名称：//服务器主机名称[：通信端口/文件端口/文件名称]如：注意：URL语法格式中除了协议名称及服务器主机名是必需的，其余分部是可选择的；协议名称是此URL连接的网络服务的名称。常见的有http，ftp等。服务器主机名是指提供这个服务主机的名称，主机名用IP地址或域名都可以；通信端口是表示通信端口的编号；文件目录及文件名称的用法与DOS中一样。输入主机名不区分大小写，但文件目录及文件名大小要区分。1.1.3网页、网站相关概念：是建立在Internet上的多媒体集合信息系统；利用超媒体信息获取技术，通过超文本表达方式，将上所有信息连接在一起。浏览器：起到翻译器的作用，把各种控制字符翻译成合适的屏幕显示方式。网页：由文字和图形组成，用户在浏览器上观看有图文的网上作品；有时把用浏览器看到的网页文件内容叫网页或页面。WEB节点：Internet是一个大型图书馆，WEB节点就像图书馆中的一本本书，网页像书中的某一页。多个网页合在一起组成了一个WEB节点，可从一个特定的WEB节点开始WEB之旅。网站：指放置网页提供浏览者登录浏览的计算机。主页：是某一个WEB节点的起点，像是书的封面，主页是链接到WEB服务器上时显示的第一个网页，而且有一个“统一资源定位符URL”的惟一地址。如:超级链接：（Hyperlink）在编写过程中，编写者预选设定一些关键字，然后再提供这些关键字想要链接的目的地，这些目的地可以是一段文字、图片、网页或网站，这取决于文件编写者如何去达到其文件的表现形式。服务器和客户端：用户浏览网页时，是由自己的计算机向存放网页的计算机发出一个请求。对方的计算机在收到请求后，将所需内容发送给发出请求的计算机。相对地，本地计算机称为客户端，对方的计算机称为服务器。代理服务器：即Proxy服务器，在互联网上用于完成跑脚服务。当用户在浏览器中设置了某个Proxy服务器之后，那么用户的浏览器所发出的任何要求，都会被送到proxy服务器上去，由这台Proxy服务器代为处理。使用代理服务器可以加速网络的浏览速度。1.1.4静态网页与动态网页静态网页：指客户端的浏览器发送URL请求给服务器，服务器查找需要的超文本文件，不加处理直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。服务器端动态技术：则需要与客户端共同参与，客户通过浏览器发出页面请求后，服务器根据URL携带的参数运行服务器端程序，产生的结果页面再返回客户端。1.2网页标准网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。1．结构标准语言（1）XML（2）XHTML2．表现标准语言CSS（CascadingStyleSheets，层叠样式表）。3．行为标准语言（1）DOM（2）ECMAScript是一些规范的集合。1.2网页的基本要素1.2.1文字1.2.2图形1.2.3链接标志12.4交互功能1.2.1文字文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。另外，文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载，便于以后长期阅读，也可对其进行编辑打印。但是没有编排点缀的纯文字网页，又会给人带来死板不活泼的感觉，使得人们不愿意再往下浏览。所以，文字性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色进行点缀等等。标题一个网页通常都有一个标题，表明本网页的主要内容。字号网页中的文字不能太大或太小。太大会使得一个网页信息量变少，太小又使人们浏览时感到费劲。字型在适当的地方使用不同的字型字体，会使网页产生吸引人的效果。当文本内容较多时。可以利用表格形式来实现1.2.2图形这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。一幅优秀的网页除了有能吸引浏览者的文字形式和内容外，图形的表现功能是不能低估的。网页上的图形格式一般使用JPEG和GIF，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。图形在网页中通常有如下应用。标题图片菜单按钮按钮背景图片背景图可使网页华丽，界面吸引人。但过大的图片影响网页导入速度，现在使用Fireworks切片处理，或减少应用。图片图片1.2.3链接标志链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。图片链接文字链接1.2.4.交互功能通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。提交按钮1.3网站开发工作流程典型的Web开发工作流程包括以下阶段：规划站点。设置开发环境。规划页面设计和布局。创建内容资源。组合、测试和部署站点。维护和更新站点。1.3.1规划站点1．规划站点目标1）确定站点目标。2）确定目标用户（浏览者）。3）规划站点的导航方案。2．使用合理的文件夹保存文档3．使用合理的文件名称4．本地站点结构与远端站点结构保持相同进行网站的整体规划也就是组织网站的内容和设计其结构。网页制作者在明确网页制作的目的及要包括的内容之后，接下来就应该对网站进行规划，以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。一般可用Windows的资源管理器规划网站的目录结构：1.3.2网页设计与制作设置开发环境:在开始建立站点前先设置开发环境。包括Web服务器和站点。可能还需要一个应用程序服务器。规划页面设计和布局:制作网页之前，对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。创建内容资源:资源可以是图像（包括按钮、横幅图形、徽标、照片等）、文本、Flash内容或其它媒体等项目。1．使用图形和照片2．创建Flash内容和视频一个好的网站首先是内容丰富，其次就是网页设计美观。1.3.3测试网页当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。如果在测试过程中发现了错误，就要及时修改，在准确无误后,方可正式在Internet上发布。在进行功能性测试和完整性测试后，有的还需要掌握整个站点的结构以备日后的修改。1.3.4网页上传发布网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以