网站开发基础知识

说到网页,其实大家并不陌生,毕竟我们在浏览的每一个页面,都可以称之为网页。那么,小伙伴们有没有想过网页究竟是什么?又是如何实现,从而出现在大家眼前的呢?

目录

一、认识网页

1、文字 

2、图形

二、网站设计的基本概念

1、基本概念

2、网站

3、静态网页和动态网页

3.1、静态网页

3.2、动态网页 

 三、互联网的访问过程与工作机制

 1、访问过程

 浏览器与服务器

WWW与万维网

IP地址和域名

URL和HTTP协议

 2、工作机制

四、制作网站的标准和常用技术

五、常用的开发工具 


一、认识网页

 从图里可以看出,网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash

1、文字 

       文字是网页发布信息所用的主要形式,由文字制作出的网页占用空间小,因此,当用户浏览时,可以很快的展现在用户面前。另外,文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载,便于以后长期阅读,也可对其进行编辑打印。但是没有编排点缀的纯文字网页,又会给人带来死板不活泼的感觉,使得人们不愿意再往下浏览。所以,文字性网页一定要注意编排,包括标题的字型字号,内容的层次样式,是否需要变换颜色进行点缀等等。 

2、图形

      这里的图形概念是广义的,它可以是普通的绘制图形,可以是各种图像,还可以是动画。一幅优秀的网页除了有能吸引浏览者的文字形式和内容外,图形的表现功能是不能低估的。网页上的图形格式一般使用JPEG和GIF,这两种格式具有跨平台的特性,可以在不同操作系统支持的浏览器上显示。

                                                                                                              

二、网站设计的基本概念

1、基本概念

     1.1、网站即Website,也称作站点,是指在互联网上,根据一定的规则,使用HTML语言编写的用于展示内容的网页的集合。在本地计算机上,网站体现为一组文件夹。

    网站由域名、网站空间、网页3部分组成。

  1.      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地址一一对应。

URLHTTP协议

WWW上的地址通过URL来指明,HTTP协议是用于浏览网站的基本约束或规则。

URL是Uniform Resource Locator的缩写,含义是统一资源定位器,用来指明文件在互联网中的位置。

HTTP是超文本传输协议.

例如,https://www.csdn.net/是一个URL,其中http是协议,www.csdn.net是服务器地址(域名)


 2、工作机制

(1)浏览器中输入将要访问页面的URL地址。由DNS进行域名地址解析,找到服务器IP地址,向该地址所指向的Web服务器发出请求。

2Web服务器根据浏览器送来的请求,把URL地址转换成页面所在服务器上的文件全名,查找相应的文件。

3)如果URL指向静态HTML文档,Web服务器使用HTTP协议把该文档直接送给浏览器。如果HTML文档中嵌入了ASPPHPJSP程序,则由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用来控制网页的行为。

HTMLHyper 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

小结:

其实学习网站开发并不难啦,主要是把基础打牢,后面只要根据实际情况随机应变就好啦!

这篇博文是根据我刚刚学习网站开发时,老师发的资料以及个人想法总结出来的, 如果有侵权,请联系博主改进啦!

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

⚆Pearl

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值