网页设计基础知识.ppt

1、网站，第1章网站设计基础知识，互联网基础，1.1，网站设计工具，1.2，网站建设过程，1.3，超文本标记语言，1.4，1.1互联网基础，1.1.1互联网概述互联网是互联网络的集合。互联网是由数千个网络和数亿台计算机通过特定的网络协议相互连接而成的全球计算机网络。它是世界上最大的信息资源平台，提供信息资源查询和信息资源共享。网络协议是网络中的设备在通信时遵循的一组规则，即如何获取所需的信息。1.1.1互联网概述互联网起源于美国国防部高级研究计划局于1969年开发的ARPANET。互联网提供的服务主要有万维网、电子邮件、文件传输协议、网上寻呼、网上聊天、网上购物等，其中万维网和电子邮件是最常用的服

2、务。1.1互联网基础，1 . 1 . 2万维网简称万维网，客户可以通过浏览器非常方便地访问互联网上的服务器，并快速获取所需信息。如图所示：1.1互联网基础，统一资源定位符是一种完整描述互联网上网页和其他资源地址的识别方法。扩展知识：网址，网址的一般格式是：“协议名：/主机名/文件夹名/文件名”。常用的协议名称如下：超文本传输协议，用于转换网页。文件传输协议，主要用于传输文件。许多提供软件下载的网站使用“文件传输协议”作为下载网址。MAILTO:传输电子邮件协议，主要用于传输电子邮件。例如：扩展知识：网址、1.1.3网页和网站建立万维网的基本单位是网页。网页包含所谓的“超链接”。有了定义好的关键

3、词和图形，点击鼠标就可以自动跳转到其他相应的文件，获取相应的信息，从而实现网页之间的链接，从而形成一个纵横交错的万维网网络结构。通过超链接连接的一系列网页在逻辑上可以看作一个整体，它们被称为网站。网站的概念是相对的。像新浪和搜狐这样的大型门户网站有很多页面，可能分布在多个服务器上；像一些个人网站一样小，可能只有几个页面，在某个网络服务器上只占很小的空间。网站的起始页通常被称为“主页”，是网站的开始。通常，主页的名称是固定的index.htm或index.html。1.1互联网基础，静态网页静态网页是指网页内容是固定的，不会根据访问者的不同需求而改变。静态网页通常是用超文本标记语言编写的。早期的

4、网站通常由静态网页组成，通常使用html、html、shtml、xml等。作为文件后缀。静态网页的网址形式通常有：超文本标记语言、静态网页和动态网页。静态网页的特点(1)静态网页有一个固定的网址，它是由常见的形式后缀，如。htm。html和。不带“？”的shtml；(2)一旦网页内容在网站服务器上发布，无论用户是否访问，每个静态网页的内容都保存在网站服务器上(不支持数据库)；(3)静态网页内容相对稳定，容易被搜索引擎搜索到；(4)数据库不支持静态网页，网站制作和维护工作量大；(5)静态网页交互性差，功能受限。1.1.4静态网页和动态网页，动态网页是指用户收到用户的访问请求后动态生成的网页，并且

5、网页内容会随着访问时间和访问者的变化而变化。动态网页通常以。asp。jsp。php等。1.1.4静态网页和动态网页，动态网页的特点(1)动态网页基于数据库技术，可以大大减少网站维护的工作量；(2)采用动态网页技术的网站可以实现更多功能，如用户注册、用户登录、在线调查、用户管理、订单管理等；(3)动态网页实际上不是独立存在于服务器上的网页文件，服务器只有在用户请求时才返回完整的网页；(4)？在动态网页中，搜索引擎检索存在一些问题。搜索引擎通常不可能访问网站数据库中的所有网页，或者由于技术原因，搜索蜘蛛不会爬行？因此，在推广搜索引擎时，使用动态网页的网站需要做一些技术处理，以满足搜索引擎的要求。1

6、.1.4静态网页和动态网页，扩展知识：动态网页技术(ASP)，ASP简介)，ASP(活动服务器页面)是一个网络服务器端的开发环境，可以生成和运行动态的、交互式的、高性能的网络服务应用程序。ASP使用脚本语言VBScript(JavaScript)作为自己的开发语言。例如：扩展知识：动态网页技术，PHP简介，PHP是一种跨平台的服务器端嵌入式脚本语言。它从C语言、Java语言和Perl语言中借用了大量的语法，并结合了PHP自身的特点，因此网络开发人员可以快速打开序列。目前它支持大多数数据库。PHP MySql Unix是开源的，例如：扩展知识：动态网页技术(JSP)，JSP简介，JSP(Java

7、 Server Page)是孙公司推出的新一代动态网站开发语言，它完全解决了目前ASP和PHP脚本级执行的缺点。在Servlet和JavaBean的支持下，JSP可以完成强大的动态网站程序的开发。扩展知识：动态网页技术。ASP简介。NET，ASP。NET是。ASP.NET版本，可以创建动态网页。分机是。ASP.net，微软，1.1.5域名和IP地址。互联网上的每个网络设备都必须有一个唯一的地址才能被访问，这个地址就是IP地址。IP地址由32位二进制值组成，分为4组，转换成十进制并用点分隔，如1。a类地址范围为55B，b类地址范围为1

8、28.0.0-55，c类地址范围为192.0.0-223。按组织分类的顶级域名、1.1.5域名和IP地址、1.1.5IP地址和域名、按国家分类的顶级域名、1.2网页制作工具、1.2.1网页编辑工具主要分为标签型和所见即所得型。记事本和Ultraedit通常用作标记工具。所见即所得编辑软件主要包括微软的Frontpage和Dreamweaver。其中，Frontpage继承了OFFICE系列软件的通用界面和简单操作，非常适合初学者。然而，与MacroMedia公司的Dreamweaver相比，HTML源代码的准确性和实用性以及对各种新技术的支持稍逊一筹。因此，Dream

9、weaver是本课程中介绍的主要网络编辑工具。1.2.2图形和图像处理工具目前，常用的图形和图像处理工具主要是Photoshop和Firework。Photoshop是最广泛的专业图形和图像处理软件之一。它与图像就绪捆绑在一起，可以实现各种专业的图像处理和动画制作。Fireworks是MacorMedia生产的首选网络图形和图像处理软件。它的独特之处在于，它可以优化大型图片的处理、剪切图片、为图片添加特殊效果、制作网页的动态行为等。它可以生成烟花超文本标记语言并直接导入网页，使用非常方便。1.2网页制作工具1.2.3动画制作工具Flash是目前网页制作中最优秀的动画制作软件。它是一个交互式动画

10、设计工具，可以集成音乐、音效、动画和创新界面，制作高质量的动态网页效果。Flash使用的图形是压缩矢量图形，采用网络流媒体技术，突破了网络带宽的限制，可以同时下载和播放，避免了用户长时间的等待，设计人员可以随意设计高质量的动画。Flash逐渐成为网络动画的标准和新技术的发展方向。由于做好动画并不容易，建议学生使用SWFText软件辅助Flash动画，1.2网页制作工具，实训，使用SWFText软件制作简单的Flash，1.2网页制作工具，1.3网站建设流程，规划，设计，开发和发布。要建立一个优秀的网站，通常应该遵循以下工作流程：确定网站的核心网站，规划网站的外观，设计网站，测试网站性能，更新和

11、维护网站。1.3.1网站规划网站的成功与网站建立前的网站规划有着非常重要的关系。在建立网站之前，我们应该明确网站的目的、功能、规模和成本，并进行必要的市场分析。只有详细的规划才能避免网站建设中的诸多问题，使网站建设顺利进行。(1)明确网站的目标和用户需求(2)确定网站的风格(3)网站的技术问题，1.3网站建设流程，1.3.2网站设计。网站详细规划后，就可以进入设计阶段了。一个好的网站应该有鲜明的主题和清晰的观点，并且用简单明了的语言和图片来体现网站的主题。调动一切手段充分表达网站的个性和兴趣，突出网站的特色。(1)网站的布局设计(2)色彩在网页设计中的作用(3)网页形式和内容的统一(4)三维空

12、间和虚拟现实的构成(5)多媒体功能的利用(1.3)网站建设过程(1.3.3)静态网页的制作(1 . 3 . 3):由超文本标记语言(超文本标记语言)生成的网页可供观众浏览。在此阶段，有必要添加实际内容，如文本、图像、FLASH动画、多媒体文件等。根据在设计阶段产生的演示网页对每个特定的网页进行显示。这种静态网页缺乏动态交互，因此有必要增加网页的交互性，即制作动态网页。制作动态网页：编程动态网页的常用技术有。ASP.PHP.JSP等。实现客户端和服务器之间的交互。例如：会员注册、信息查询、产品购买、留言、论坛等。1.3网站建设过程，1.3.4网站测试和上传完成，在本机上测试网站是否有错误，如网站

13、是否有链接错误，图片显示是否正常，网页程序代码是否有错误等。测试完成后，使用上传工具将其上传到网络服务器。1.3.5网站更新和维护应充分发挥网站的市场功能，及时更新最新的产品信息。一个企业应该有专业的网站维护人员或者把他们交给专业的网络公司来承担这项工作。1.3网站建设过程，1.4超文本标记语言，网页的本质是超文本标记语言，超文本超文本标记语言，超文本使网页具有跳跃的能力，以便访问者可以选择阅读路径。用超文本标记语言编写的网页称为超文本标记语言文件，其扩展名通常为“.”html“或”。htm”，并可由记事本和Altraedit编辑，或通过使用所见即所得网页制作工具(如Dreamweaver和F

14、rontpage)快速创建。超文本标记语言文件通常分为两部分：标题和正文。页眉包含页面的说明信息，如页面类型、使用的字符集、使用的书写工具和页面标题，这些信息不会显示在网页中；BODY包含所需的信息，可以是文本、图像、指向另一个网页的超链接指针等等。超文本标记语言的结构，超文本标记语言文档的结构分为两部分：头部和身体(身体)。从语言结构的角度来看，超文本标记语言文件由两部分组成：1)超文本标记语言标签：决定文档内容的显示模式(如大小、颜色、粗体、斜体、表格等)。)。2)文档内容：即超文本标记语言文档中的文本，即用户在浏览器中看到的文本内容。1.4超文本标记语言、1.4超文本标记语言是超文本标记语言的常用标记，1称为文档类型标记，表示这一对标记中的内容是用超文本标记语言编写的。第一个标签和最后一个标签分别位于文档的正面和背面。2称为文档头标记，用于指定文档的标题和文档的其他属性。在标题标签中写入的内容不会显示在浏览器窗口中。3称为文档标题标签，用于指定HTML文档的标题。必须写入并且不能包含其他标记。1.4超文本