说到网页,其实大家并不陌生,毕竟我们在浏览的每一个页面,都可以称之为网页。那么,小伙伴们有没有想过网页究竟是什么?又是如何实现,从而出现在大家眼前的呢?
目录
一、认识网页
从图里可以看出,
网页
主要由
文字、图像和超链接等
元素构成。当然,除了这些元素,网页中还可以包含
音频、视频
以及
Flash
等
。
1、文字
文字是网页发布信息所用的主要形式,由文字制作出的网页占用空间小,因此,当用户浏览时,可以很快的展现在用户面前。另外,文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载,便于以后长期阅读,也可对其进行编辑打印。但是没有编排点缀的纯文字网页,又会给人带来死板不活泼的感觉,使得人们不愿意再往下浏览。所以,文字性网页一定要注意编排,包括标题的字型字号,内容的层次样式,是否需要变换颜色进行点缀等等。
2、图形
这里的图形概念是广义的,它可以是普通的绘制图形,可以是各种图像,还可以是动画。一幅优秀的网页除了有能吸引浏览者的文字形式和内容外,图形的表现功能是不能低估的。网页上的图形格式一般使用JPEG和GIF,这两种格式具有跨平台的特性,可以在不同操作系统支持的浏览器上显示。
二、网站设计的基本概念
1、基本概念
1.1、网站即Website,也称作站点,是指在互联网上,根据一定的规则,使用HTML语言编写的用于展示内容的网页的集合。在本地计算机上,网站体现为一组文件夹。
网站由域名、网站空间、网页3部分组成。
-
1.2、网页实际上是用HTML语言编写的文本文件。在浏览网页时,浏览器将HTML语言翻译成用户看到的网页。
命令[查看]/[源文件],可在浏览器中查看这个网页的HTML语言描述
1. 3、静态网页是指在浏览器中运行,不需要到后台数据库检索数据、不含有程序的纯HTML格式的网页文件,其文件后缀一般为.html、.htm、.shtml等。
1.4、动态网页是指网页文件中除了包含HTML标记,而且还包含需要在服务器上执行的程序代码。动态网页需要后台数据库与Web服务器交互,利用数据库实现数据更新和查询服务。动态网页扩展名一般是.asp、.jsp、.php等。
2、网站
一个网站对应磁盘上的一个
文件夹
,网站的所有网页和其他资源文件都会放在该文件夹下或其子文件夹下,设计良好的网站通常是将网页文档及其它资源分门别类地保存在相应的文件夹中以方便管理和维护。这些网页通过链接组织在一起,其中有个网页称为
首页
,常命名为
index.htm
,
必须放在网站的根目录下
。
网页中所需要的图片文件一般单独保存在该目录下一个叫
images
的文件夹下。
3、静态网页和动态网页
网站由网页构成,网页有静态和动态之分。
静态网页是指用户无论何时何地访问,网页都会显示固定的信息,除非网页源代码被重新修改上传。
动态网页显示的内容则会随着用户操作和时间的不同而变化。
大部分网站都由静态网页和动态网页混合组成,两者各有千秋,用户在开发网站时可根据需求酌情采用。
3.1、静态网页
在网站设计中,纯粹HTML格式的网页通常被称为“静态网页”,早期的网站一般都是由静态网页制作的。静态网页的网址形式通常为:www.example.com/eg/eg.htm,
也就是以
.htm、.html、.shtml、.xml
等为后缀的。在HTML格式的网页上,也可以出现各种动态的效果,如.GIF格式的动画、FLASH、滚动字母等,这些“动态效果”只是视觉上的,与下面将要介绍的动态网页是不同的概念。
静态网页示例
静态网页的
特点:
1、静态网页每个网页都有一个固定的URL,且网页URL以.htm、.html、.shtml等常见形式为后缀,而不含有“?”;
2、网页内容一经发布到网站服务器上,无论是否有用户访问,每个静态网页的内容都是保存在网站服务器上的,也就是说,静态网页是实实在在保存在服务器上的文件,每个网页都是一个独立的文件;
3、静态网页的内容相对稳定,因此容易被搜索引擎检索;
4、静态网页没有数据库的支持,在网站制作和维护方面工作量较大,因此当网站信息量很大时完全依靠静态网页制作方式比较困难;
5、静态网页的交互性较差,在功能方面有较大的限制。
3.2、动态网页
动态网页是与静态网页相对应的,也就是说,网页URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见形式,而是以
.asp、.aspx、.jsp、.php、.perl、.cgi
等形式为后缀,并在动态网页网址中有一个标志性的符号— “ ?”。
这里说的动态网页,与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系,动态网页也可以是纯文字内容的,也可以是 包含各种动画的内容,这些只是网页具体内容的表现形式,无论网页是否具有动态效果,采用动态网站技术生成的网页都称为动态网页。
动态网页示例
动态网页特点:
1、动态网页以数据库技术为基础,可以大大降低网站维护的工作量;
2、采用动态网页技术的网站可以实现更多的功能,如用户注册、用户登录、在线调查、用户管理、订单管理等等;
3、动态网页实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页;
4、动态网页中的“?”对搜索引擎检索存在一定的问题,搜索引擎一般不可能从一个网站的数据库中访问全部网页,或者出于技术方面的考虑,搜索蜘蛛不去抓取网址中“?”后面的内容,因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。
三、互联网的访问过程与工作机制
1、访问过程
网页是如何
形成
的呢?
浏览网站涉及一些非常基本的概念,包括浏览器与服务器、WWW与万维网,还有IP地址与域名等.
浏览器与服务器
浏览网站是从远程计算机中获取内容。提供内容信息的计算机就称为服务器,访问者使用浏览网页的软件被称为浏览器
WWW
与万维网
万维网,英文单词是“World Wide Web”,简称WWW,也称作Web。WWW、万维网和Web是同义词,是一个大型的相互链接的文件所组成的集合体,范围包括了整个网络世界
IP
地址和域名
浏览服务器上的资源,必须知道服务器在网络中的地址,这是通过IP地址来实现的。为了实现IP地址的易理解、易识别,又引入了域名的概念。
IP地址是识别互联网上计算机和网络设备的标识。
域名是IP地址的一种符号化表示,域名通过域名解析系统(Domain Name System,DNS)保证每台主机的域名与IP地址一一对应。
URL
和
HTTP
协议
WWW上的地址通过URL来指明,HTTP协议是用于浏览网站的基本约束或规则。
URL是Uniform Resource Locator的缩写,含义是统一资源定位器,用来指明文件在互联网中的位置。
HTTP是超文本传输协议.
例如,
https://www.csdn.net/
是一个URL,其中http是协议,
www.csdn.net
是服务器地址(域名)
2、工作机制
(1
)浏览器中输入将要访问页面的
URL
地址。由
DNS
进行域名地址解析,找到服务器
IP
地址,向该地址所指向的
Web
服务器发出请求。
(
2
)
Web
服务器根据浏览器送来的请求,把
URL
地址转换成页面所在服务器上的文件全名,查找相应的文件。
(
3
)如果
URL
指向静态
HTML
文档,
Web
服务器使用
HTTP
协议把该文档直接送给浏览器。如果
HTML
文档中嵌入了
ASP
、
PHP
或
JSP
程序,则由
Web
服务器运行这些程序,把结果送到浏览器。如果
Web
服务器运行的程序包含对数据库的访问,则服务器将查询指令发送给数据库服务器,对数据库执行查询操作。
(
4
)查询结果由数据库返回
Web
服务器,再
Web
服务器将结果数据嵌入页面,并以
HTML
格式发送给浏览器。
(
5
)浏览器解释
HTML
文档,在客户端屏幕上展示结果。
四、制作网站的标准和常用技术
-
Web开发应用遵循的标准就是Web标准。
-
Web标准是由W3C和其他标准化组织共同制定的,该标准用来创建和解释基于 Web 的内容,Web标准可以使得在网上发布的文档向后兼容,使其能够被大多数人所访问。
-
Web标准包括一系列标准。网页部分的标准通过三部分来描述:结构(Structure)、表现(Presentation)和行为(Behavior)。
-
结构、表现和行为对应于3种常用的技术,即(X)HTML,CSS和JavaScript。
(X)HTML用来决定网页的结构和内容
;
CSS用来设计网页的表现形式
;
JavaScript用来控制网页的行为。
HTML
是
Hyper Text Markup Language
的缩写,是一种用来制作超文本文档的简单标记语言,是网页制作的基本语言。
XHTML
即可扩展超文本标记语言。实际上,
XHTML
是一个过渡语言
。
CSS(Cascading Style Sheets
,层叠样式表
)
是标准的布局语言,用来排版
和
显示
HTML
元素,纯
CSS
的布局与
XHTML
相结合,可使内容表现与结构相分离,并使网页更容易维护,易用性更好。
JavaScript
语言是一种解释性的,基于对象的脚本语言。
JavaScript
语言与
Java
语言两者之间没有联系,是两种完全不同的语言,
JavaScript
是一种“脚本”
(Script)
,它直接把代码写到
HTML
文档中,浏览器读取它们的时候才进行编译、执行
。
五、常用的开发工具
HTML文档编辑工具
EditPlus
可视化网页开发软件
Dreamweaver
-
最新的版本是Adobe Dreamweaver CS5
动画制作软件
Flash
-
最新版本是Adobe Flash CS5
图像处理工具
Photoshop
-
目前,Photoshop
最新的版本是
Adobe Photoshop CS5
小结:
其实学习网站开发并不难啦,主要是把基础打牢,后面只要根据实际情况随机应变就好啦!
这篇博文是根据我刚刚学习网站开发时,老师发的资料以及个人想法总结出来的, 如果有侵权,请联系博主改进啦!