75网页设计_第1章 网页设计基础

网页设计与制作2网页设计与制作基本内容第1章网页设计基础第2章HTML语言基础第3章Dreamweaver基本操作第4章Dreamweaver高级操作第5章CSS样式表第6章JavaScript网页特效第7章Fireworks图像处理第8章Flash动画制作第9章网站设计与制作综合第1章网页设计基础4主要内容1.1网页设计中的基本概念1.2网页基本元素1.3网页制作常用软件与编程语言1.4网页设计原则1.5网站建设流程51.1网页设计中的基本概念基础(WorldWideWeb，万维网)是Internet上基于客户/服务器体系结构的分布式多平台的超文本超媒体信息服务系统。它利用超文本(Hypertext)、超媒体(Hypermedia)等技术，使用户通过浏览器可以方便地检索远程服务器上的文本、图片、声音以及视频文件。6特点超文本链接信息系统图形用户界面与系统平台无关是分布式的采用动态网页采用交互式的浏览方式7Internet资源定位符URL结构：资源类型、存放资源的主机域名和资源文件名统一资源定位规范URLUniformResourceLocator定位资源信息主机域名网页文件资源类型主页文件缺省名：index.htm或default.htm888Web工作模式HTTP协议用HTML编写HTTP协议用开发工具编写如FrontPage浏览器WebserverHomepage主页网页网页第一步：WEB浏览器向一个特定的服务器发送WEB页面请求。第二步：在每个WEB服务器上有一个服务进程在TCP的80端口上监听由浏览器发来的建立连接请求；在连接建立之后，寻找所请求的WEB页面，并将所请求的网页传送给浏览器。浏览器和服务器之间进行信息传输使用超文本传输协议HTTP协议。第三步：WEB浏览器接收到所请求的网页，并按照预定的格式显示出来。10网页网页（WebPage）是按照网页文档规范编写的一个或多个文件，它可以在上传输，并被浏览器翻译成页面显示出来。网页是网站的基本信息单元。网站通过服务器提供服务。网站上的网页集合以及其他文件的入口页或起始页被称为主页（HomePage）。11基本概念什么是网页网页是由HTML（超级文本标识语言）或者其他语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。1112网站网站（WebSite）是一组相关网页以及有关的文件、脚本和数据库等内容的有机集合，即若干个网页文件经过规划组织后彼此相连而形成完整结构的信息服务体系。网页经由网址（URL）来识别与存取，URL指明了特定的计算机和路径名，用户通过它可对信息资源进行访问，当用户在浏览器中输入网址后，在HTTP协议下将资源在节点间传输，网页文件会被传送到用户计算机中，然后再通过浏览器解释网页的内容，展示给用户。13基本概念什么是网站网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到Internet上以后，能通过浏览器在Internet上访问的页面。门户网站职能网站专业网站个人网站1314网页分类按表现形式：静态网页和动态网页。按所处位置：主页和子页。14链接151.2网页基本元素文本图片超链接动画声音和视频导航栏表格表单网页特效网页交互元素16操作实践课_PowerPoint1617网页基本元素-11.文本网页中的信息也以文本为主。能准确地表达信息的内容和含义。2.图片网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中使用最广泛的是GIF和JPEG两种格式。3.超链接超级链接技术是流行起来的最主要的原因。它是从一个网页指向另一个目的端的链接。18图像GIFJPEGPNG（图形交换格式）（联合图像专家组）（可移植网络图形）每幅图像的颜色2561677721616777216压缩无损有损无损透明单色否Alpha通道半透明否否Alpha通道动画是否否网页中可插入多种不同类型的图片对象，显示效果可以有动态和静态两种。常用图片文件格式如下表所示。考虑到网页下载速度问题，一般静态图片使用jpg格式，动态图片使用gif格式。19网页基本元素-24.动画在网页中为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。网页中的动画主要有两种：GIF动画和Flash动画。其中GIF动画只能有256种颜色，主要用于简单动画和图标。5.声音和视频声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。很多浏览器不要插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。20网页基本元素-36.导航栏导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。7.表格在网页中表格用来控制网页中信息的布局方式，包括两个方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。21网页基本元素-48.表单表单通常用来接受用户在浏览器端的输入，将这些信息发送到网页设计者设置的目标端。这个目标可以是文本文件、Web页、电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登录站点等。9.其他常见元素网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、Java特效、ActiveX等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。221.3网页制作常用软件与编程语言静态网页编程语言网页特效脚本语言动态交互式网页编程语言网页制作软件网页设计辅助软件23静态网页编程语言-1超文本标记语言超文本标记语言（HyperTextMarkupLanguage，HTML）是网页设计的基础，是初学者必须学习的内容。HTML是表示网页的一种规范，它通过标记符定义了网页元素的显示格式。HTML的工作原理是当用户通过浏览器浏览网上信息时，服务器会将相关的HTML文件传送到浏览器上，浏览器按顺序读取HTML文档，然后解释HTML标记符，并显示为网页内容的相应格式。24可扩展标记语言可扩展标记语言（eXtensibleMarkupLanguage，XML），可以很方便地对结构化数据进行描述，它允许用户定义自己的标识符，提供了一个直接处理Web数据的通用方法，具有广阔的应用前景，对传统的网页设计将有较大的帮助。XML是一种类似于HTML的语言，它是用来描述数据的语言。而HTML是关于如何显示数据的语言。静态网页编程语言-225层叠样式表层叠样式表（CascadingStyleSheet，CSS）技术是一种格式化网页的标准方式，它是HTML功能的扩展，使网页设计者能够以更有效的方式设计出更具有表现力的网页。静态网页编程语言-326网页特效脚本语言JavaScriptJavaScript是一种基于对象的、动态的、跨平台的、具有简单性和安全性的脚本语言。VBScriptVBScript是VisualBasic的一个子集，其编程方式和VisualBasic基本相同，但它在使用时将受到某些限制，如变量类型和作用范围受到限制，它只有一种数据类型，即Variant类型，而变量的作用范围只有两种，且VBScript变量不能使用VisualBasic中的某些内置函数。VBScript目前用来实现ASP的主要脚本语言。27动态交互式网页编程语言JSPJSP（JavaServerPages）是由SunMicrosystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术是用JAVA语言作为脚本语言的，JSP网页为整个服务器端的JAVA库单元提供了一个接口来服务于HTTP的应用程序。ASP活动服务器网页（ActiveServerPage，ASP）是目前非常流行的开放式的Web服务器的应用程序开发技术。采用面向对象的编程方法，无须编译和链接即可执行，可通过ActiveX服务器组件扩充ASP的功能。支持客户端脚本和服务端脚本，一般使用VBScript作为默认的脚本语言。程序的写法容易理解，与网页紧密结合。28网页制作软件DreamweaverDreamweaver是目前使用最广泛的网页编辑工具之一，它是Macromedia公司推出的网页编辑工具，它是一个所见即所得的网页编辑器，支持最新的DHTML（DynamicHTML，动态HTML）和CSS标准。它采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得非常简单。FrontPageFrontPage是Microsoft公司开发的设计网页和管理网站的软件，除了所见即所得的编辑功能之外，也可以直接编辑HTML标记，让设计者可以轻松地编辑网页。FrontPage2003版本支持最新的网页标准，如XML、CSS2等。FrontPage还可以利用Office套装中的其他软件（如word文字编辑软件、Excel电子报表软件、Access数据库管理软件等）的功能，实现功能上的互补，从而使制作网页更加方便自如。29网页设计辅助软件FireworksFireworks是Macromedia公司推出的图形制作软件工具软件。使用它可以创建和编辑位图、矢量图，还可以非常轻松地实现各种网页设计中常见的效果，比如翻转图形、下拉菜单、GIF动画等，设计完成以后，如果要在网页中使用，可以将它输出为HTML文件，还能输出为可以在Photoshop、Illustrator和Flash等软件中编辑的格式。PhotoshopPhotoshop是一种最专业、最流行、最常用、使用功能最强大的图形图像处理软件。它一直是绘图编辑的绝对主导软件，具有风格独特、功能完善、兼容性强、高效、灵活等特点。FlashFlash是Macromedia公司出品的矢量图编辑和动画制作软件，具有强大的动画制作功能。30网页设计一般步骤规划网站收集整理资源配置站点创建页面测试站点发布站点维护、更新站点3031网页开发流程Photoshop/FireworksFlash数据库DreamweaverASP/JSP/PHP网站/浏览器/客户端321.4网页设计原则页面力求精简，合理安排网页结构巧妙安排图形图像，具有良好浏览导航善于运用信息网页内容应该易读易懂，与企业特点吻合网页页面越小越好33网页设计原则鲜明的主题整体规划易记的网站名称醒目的导航通用网页善用图像动画适量及时更新33341.5网站建设流程定义合适的域名租用虚拟服务器空间设计页面网站推广35利用制作工具编写HTML源代码使用记事本等字处理软件直接编写代码，保存为.htm或.html的纯文本文件使用所见即所得的可视化工具软件。如：frontpage、dreamwaver网页制作网页文档中包含了网页元素及其显示格式，制作网页就是将网页元素按照风格所确定的显示格式写成HTML文档。36常用网页制作工具网页编写软件Frontpage、Dreamwaver……图形/图像处理软件Photoshop、Fireworks……网页动画制作软件Flash制作静态网页不是很难！37想知道浏览你网页的网友有什么意见或建议？想知道对你网站提供的内容感兴趣的是什么人？想知道客户有哪些服务需求？想知道客户对产品有什么意见？……动态交互网页编程要使网站具有交互功能，就需要在网页中加入实现动态交互的程序代码。这就是基于WEB的应用程序开发！38自己设计网站从一个空白的网页开始设