第1章 网页设计基础_第1页
第1章 网页设计基础_第2页
第1章 网页设计基础_第3页
第1章 网页设计基础_第4页
第1章 网页设计基础_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

本章要求：第1章网页设计基础什么是万维网网页设计的相关概念常用的网页开发工具常用的网页浏览工具网页开发技术主要内容1.万维网概述2.HTML语言3.网页设计相关概念4.网页的开发工具和浏览工具5.网页制作相关技术第1章网页设计基础万维网是一种基于超文本方式工作的信息系统。作为一个能够处理文字，图像，声音和视频等多媒体信息的综合系统，它提供了丰富的信息资源，这些信息资源通常表现为以下三种形式。超文本（hypertext）超文本一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。超媒体（hypermedia）超媒体是超文本（hypertext）和多媒体在信息浏览环境下的结合，有了超媒体用户不仅能从一个文本跳到另一个文本，而且可以显示图像、播放动画、音频和视频等。超文本传输协议（HTTP）超文本传输协议是超文本在互联网上的传输协议。1.1万维网概述1.2

HTML语言HTML是一种在因特网上常见的网页制作标注性语言，而并不能算做一种程序设计语言，因为它相对于程序设计语言来说缺少了其所应有的特征。HTML是通过浏览器的翻译，将网页中内容呈现给用户。HTML语言是一种简易的文件交换标准，有别于物理的文件结构，它旨在定义文件内的对象和描述文件的逻辑结构，而并不定义文件的显示。由于HTML所描述的文件具有极高的适应性，所以特别适合于WWW的出版环境。HTML是纯文本类型的语言，使用HTML编写的网页文件也是标准的纯文本文件。我们可以用任何文本编辑器打开它，例如Windows的“记事本”程序。查看其中的HTML源代码。也可以用浏览器打开网页时，单击鼠标右键，选择“查看源文件”来查看其中的HTML源代码。HTML文件可以直接由浏览器解释执行，而无需翻译。当使用浏览器打开一个网页时，浏览器通过读取网页中的HTML代码，分析其中的语法结构，然后根据解释的结果显示网页的内容，正是因为如此，网页显示的速度同页面代码的质量有很大的关系，因此保持精简和高效的HTML源代码是十分重要的。1.3.1超链接1.3.2统一资源定位器1.3.3网站1.3.4网页1.3.5首页1.3网页设计相关概念超链接简单来讲，就是指按内容链接。超链接在本质上属于一个网页的一部分，它是一种允许同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。1.3.1超链接统一资源定位器又称统一资源定位符（UniformResourceLocator，URL）,它包含如何访问

Internet上资源的明确指令，是用于完整地描述Internet上网页和其他资源的地址的一种标识方法。1.3.2统一资源定位器网站（Website）开始是指在因特网上，根据一定的规则，使用HTML等制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。衡量一个网站的性能通常从网站的空间大小、网站位置、网站连接速度（俗称“网速”）、网站软件配置、网站提供服务等几方面考虑，最直接的衡量标准是这个网站的真实流量。1.3.3网站网页，是网站中的任何一个页面，通常是HTML格式（文件扩展名为html、htm、asp、aspx、php或jsp等），网页通常用图像档来提供图画，网页要使用网页浏览器来进行浏览。网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，您的网站就是由网页组成的，如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。网页是一个文件，它存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取。1.3.4网页首页，又称主页或起始页，是用户打开浏览器时默认打开的一个或多个网页。首页也可以指一个网站的入口网页，即打开网站后看到的第一个页面，大多数作为首页的文件名是index、default或main加上扩展名。1.3.5首页1.4网页的开发工具和浏览工具1.4.1网页开发工具1.4.2网页浏览工具1.4.1网页开发工具常用的网页开发工具有Dreamweaver、VisualStudio、Eclipse等，下面分别对它们进行简单介绍。1．DreamweaverDreamweaver是一个专门制作网页的一个工具，使用它可以创建HTML网页、ASP网页、PHP网页等，它的最新版本是DreamweaverCS6，效果如图1-1所示。图1-1DreamweaverCS62．VisualStudioVisualStudio是美国微软公司的开发工具包系列产品，它是一个完整的开发工具集，它包括了整个软件生命周期中所需要的大部分工具，如UML工具、代码管控工具、集成开发环境（IDE）等等。使用VisualStudio开发环境编写的目标代码适用于微软支持的所有平台，通常使用它创建ASP.NET网页，VisualStudio开发环境的最新版本为VisualStudio2012，如图1-2所示。图1-2VisualStudio20123．EclipseEclipse是一个基于Java的、开放源码的、可扩展的应用开发平台，它为编程人员提供了一流的Java集成开发环境（IntegratedDevelopmentEnvironment，IDE）。它是一个可以用于构建集成Web和应用程序开发工具的平台，其本身并不会提供大量的功能，而是通过插件来实现程序的快速开发功能。通常使用它创建JSP网页，Eclipse的最新版本是4.2，如图1-3所示。图1-3Eclipse网页浏览工具是显示网页服务器或档案系统内的文件，并让用户与此些文件互动的一种软件。它用来显示在万维网或局域网等内的文字、影像及其他资讯，这些文字或影像，可以是连接其他网址的超链接，用户可迅速及轻易地浏览各种资讯。常用的网页浏览工具有IE浏览器、火狐浏览器、Chrome浏览器，下面分别对它们进行简单介绍。1．IE浏览器网民大多数人都在使用IE浏览器，这要感谢它对Web站点强大的兼容性，最新的InternetExplorer11包括Metro界面、HTML5、CSS3以及大量的安全更新。2．火狐浏览器MozillaFirefox（火狐浏览器）2013年是市场占有率第三的浏览器，仅次于微软的InternetExplorer和Google的Chrome；最新的Firefox浏览器新增了类型推断，再次大幅提高了JavaScript引擎的渲染速度，使得很多富含图片、视频、游戏以及3D图片的富网站和网络应用能够更快的加载和运行。3．Chrome浏览器Chrome是由Google公司开发的网页浏览器，浏览速度在众多浏览器中走在前列，属于高端浏览器。1.4.2网页浏览工具1.5网页制作相关技术1.5.1客户端应用技术1.5.2服务器端应用技术在进行Web应用开发时，离不开客户端技术的支持。目前，比较常用的客户端技术包括HTML语言、CSS样式、Flash和客户端脚本技术。下面进行详细介绍。HTML语言HTML语言是客户端技术的基础，主要用于显示网页信息，它不需要编译，由浏览器解释执行。HTML语言简单易用，它在文件中加入标签，使其可以显示各种各样的字体、图形及闪烁效果，还增加了结构和标记，如头元素、文字、列表、表格、表单、框架、图像和多媒体等，并且提供了与Internet中其他文档的超链接。例如，在一个HTML页中，应用图像标记插入一个图片，可以使用如图1-4所示的代码，该HTML页运行后的效果如图1-5所示。图1-4HTML文件1.5.1客户端应用技术该HTML页运行后的效果如图1-5所示。图1-5运行结果说明：HTML语言不区分大小，这一点与Java不同。例如图1-4中的HTML标记<body></body>标记也可以写为<BODY></BODY>。CSSCSS就是一种叫做样式表（stylesheet）的技术，也有人称之为层叠样式表（CascadingStyleSheet）。在制作网页时采用CSS样式，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变整个页面的风格。CSS大大提高了开发者对信息展现格式的控制能力，特别是在目前比较流行的CSS+DIV布局的网站中，CSS的作用更是重足轻重了。例如，在“心之语许愿墙”网站中，如果将程序中的CSS代码删除，将显示如图1-6所示的效果，图1-6没有添加CSS样式的页面效果而添加CSS代码后，将显示如图1-7所示的效果。图1-7添加CSS样式的页面效果客户端脚本技术客户端脚本技术是指嵌入到Web页面中的程序代码，这些程序代码是一种解释性的语言，浏览器可以对客户端脚本进行解释。通过脚本语言可以实现以编程的方式对页面元素进行控制，从而增加页面的灵活性。常用的客户端脚本语言有JavaScript和VBScript。说明：

目前，应用最为广泛的客户端脚本语言是JavaScript脚本，它是Ajax的重要组成部分。在本书的第2章将对JavaScript脚本语言进行详细介绍。FlashFlash是一种交互式矢量动画制作技术，它可以包含动画、音频、视频以及应用程序，而且Flash文件比较小，非常适合在Web上应用。目前，很多Web开发者都将Flash技术引入到网页中，使网页更具有表现力。特别是应用Flash技术实现动态播放网站广告或新闻图片，并且加入随机的转场效果，如图1-8所示。图1-8在网页中插入的Flash动画在开发动态网站时，离不开服务器端技术，目前，比较常用的服务器端技术主要有CGI、ASP、PHP、ASP.NET和JSP。下面进行详细介绍。CGICGI是最早用来创建动态网页的一种技术，它可以使浏览器与服务器之间产生互动关系。CGI的全称是CommonGatewayinterface，即通用网关接口。它允许使用不同的语言来编写适合的CGI程序，该程序被放在Web服务器上运行。当客户端发出请求给服务器时，服务器根据用户请求建立一个新的进程来执行指定的CGI程序，并将执行结果以网页的形式传输到客户端的浏览器上显示。CGI可以说是当前应用程序的基础技术，但这种技术编制方式比较困难而且效率低下，因为每次页面被请求时，都要求服务器重新将CGI程序编译成可执行的代码。在CGI中使用最为常见的语言为C/C++、Java和Perl（PracticalExtractionandReportLanguage，文件分析报告语言）。ASPASP（ActiveServerPage）是一种使用很广泛的开发动态网站的技术。它通过在页面代码中嵌入VBScript或JavaScript脚本语言，来生成动态的内容，在服务器端必须安装了适当的解释器后，才可以通过调用此解释器来执行脚本程序，然后将执行结果与静态内容部分结合并传送到客户端浏览器上。对于一些复杂的操作，ASP可以调用存在于后台的COM组件来完成，所以说COM组件无限的扩充了ASP的能力，正因如此依赖本地的COM组件，使得它主要用于WindowsNT平台中，所以Windows本身存在的问题都会映射到它的身上。当然该技术也存在很多优点，简单易学，并且ASP是与微软的IIS捆绑在一起，在安装Windows操作系统的同时安装上IIS就可以运行ASP应用程序了。1.5.2服务器端应用技术PHPPHP来自于PersonalHomePage一词，但现在的PHP已经不再表示名词的缩写，而是一种开发动态网页技术的名称。PHP语法类似与C，并且混合了Perl、C++和Java的一些特性。它是一种开源的Web服务器脚本语言，与ASP一样可以在页面中加入脚本代码来生成动态内容。对于一些复杂的操作可以封装到函数或类中。在PHP中提供了许多已经定义好的函数，例如提供的标准的数据库接口，使得数据库连接方便，扩展性强。PHP可以被多个平台支持，但被广泛应用于UNIX/Linux平台。由于PHP本身的代码对外开放，经过许多软件工程师的检测，因此，该技术具有公认的安全性能。ASP.NETASP.NET是一种建立动态Web应用程序的

人人文库> 全部分类> 应用文书 > 事务文书

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论