邀请注册 登录
Bacysoft.cn 返回首页

bacy001的个人空间 http://www.bacysoft.cn/?2 [收藏] [复制] [分享] [RSS]

日志

网页设计初学者入门指导

已有 8533 次阅读2012-1-31 22:25 |系统分类:网络技术| 网页设计

相信说到网页大家一定不会陌生,生活在21世纪的人如果连网页是什么都不知道那就真的太OUT了!简单来说,网页是构成网站的基本元素,是承载各种BS(浏览器-服务器模式)应用的平台。标准的网站应该由域名+主机+网页构成!

 

域名是你网站的名字,让所有人都能通过一个好记的名字找到你的网站。域名可以是顶级域名,比如本站的顶级域名:Bacysoft.cn ;也可以是二级域名,比如:www.Bacysoft.cn ;甚至还可以是三级域名,比如:www.cs.Bacysoft.cn 。总之,域名的主要功能就是让人可以更加方便的访问您的网站。

 

主机(服务器)则是用来存放网页,每台主机至少拥有一个IP地址,这个IP地址可以是公网的,也可以是私网的!通过DNS服务器将域名和主机IP地址映射起来,这样我们才能通过域名访问到主机上的网页。目前主要有以下几种主机:虚拟主机、VPS以及独立服务器虚拟主机,也叫做“网站空间”,就是把一台运行在互联网上的服务器划分成多个“虚拟”的服务器每一个虚拟主机都具有独立的域名和完整的Internet服务器(支持WWWFTPE-mail等)功能。

VPSVirtual Private Server 虚拟专用服务器),即通过软件技术将一台物理服务器虚拟成多台独立的服务器,每个VPS都可分配独立公网IP地址、独立操作系统、独立超大空间、独立内存、独立CPU资源、独立执行程序和独立系统配置等,几乎和物理服务器完全一样。需要指出VPS和虚拟主机最大的区别就在于,用户对服务器的控制是100%的,而虚拟主机只能控制和Internet服务相关的功能。这就使得VPS除了支持BS结构的应用外,还能支持CS结构的网络应用。

独立服务器,这个就很好理解了,独立服务器就是一台完整的物理服务器,建设在独立服务器上的网站能够使用整台服务器的硬件资源,而不像虚拟主机和VPS那样是共享服务器的资源。

 

网页(Web page是一个文件,存放在世界某个角落的某一台计算机中,网页经由网址( URL)来识别与存取,当我们在浏览器输入网址后,浏览器会先通过URL获取域名信息,接着通过DNS获取服务器的IP地址信息,最后通过IP地址以及URL中的路径信息定位到要访问的网页文件,然后服务器会将网页文件传送到你的计算机,然后再通过浏览器解释网页的内容,再展示到你的眼前。通常,网页都是HTML格式(文件扩展名为.html.htm)。标准的网页都是遵循HTML 4.01 / XHTML 1.0开发的。可以说HTML是目前BS结构互联网的基础,所有我们看到的一切都是建立在HTML之上的!而XHTML则是更加严谨更加纯净的HTML版本。对于初学者来说,了解HTML是通向网页设计领域的必经之路。

 

这里向大家推荐一个非常好的适合初学者学习HTML以及更多高级网页设计技术的网站。通过这个网站,初学者能够学习到网页设计入门所必须的所有知识。网站提供大量教程、手册、实例和在线测试,非常方便。

中文网址:http://www.w3school.com.cn/

英文网址:http://www.w3schools.com/

 

为了帮助大家更好的学习,推荐按照本站给出的线路图进行学习,分为初级、中级和高级三个部分,仅供参考。

初级:HTML/XHTML -> JavaScript -> CSS

中级:PHP或者ASP/ASP.NET -> SQL,当然如果有精力两个都可以学

高级:Ajax -> XML -> DOM

其他扩展:主要围绕 Javascript 以及 XML 展开,例如:jQuery/JSON/XSL/XSLT 等等。可以根据需要选择性的进行学习。

 

要想学好网页设计技术,不动手是不行的,与计算机技术领域的其他分支一样,大量的上机实践是提高能力的最佳途径!而工欲善其事,必先利其器,因此搭建网页开发环境就非常重要了。通常的网页设计人员都会在工作电脑中搭建一套和公网服务器功能相同的实验环境,写好网页后先在这个本地平台运行测试,然后再上传到公网上的服务器,这样就能被所有Internet的用户访问了。

 

这里先推荐一套适合初学者的网页开发环境:EasyWebSvr + Editplus + ChromeEasyWebSvr是简易Web服务器软件;Editplus是方便的文本编辑软件,用来写网页代码;而Chrome是大名鼎鼎的Google推出的开源浏览器,对于网页开发者来说Chrome提供了相当强大的网页验证以及调试功能,强烈推荐!这一套软件组合网络上的下载非常多,本站就不另外提供了。

EasyWebSvr的使用非常简单,下载后的文件解压后一共四个文件,见下图:


双击exe就能启动服务器,启动后服务器程序默认最小化到WindowsXP的托盘栏。双击托盘图标,可以打开服务器主程序界面,如下图:


右键点击窗口程序的空白部分,选择“设置”可以对服务器进行简单配置,见下图:


最重要的参数就主目录,可以选择本地硬盘上的任意有效目录,建议新建一个目录,并命名为“wwwroot”,例如,笔者就在磁盘G的根目录下建立了一个名为“wwwroot”的文件夹专门用来存放网站的网页文件。端口号保持80不变!这也是http协议默认的端口号。确定后,关闭窗口,服务器程序将最小化到托盘并在后台运行。

 

接着我们可以使用任意一款文本编辑器,比如:Windows系统自动的记事本,创建一个名为“index.html”的文本文件,文件内容为:

<html>

 <head>

  <title> Hello Web World! </title>

 </head>

 

 <body>

  <h2>Hello! Welcome to Web World!:)</h2>

 </body>

</html>

如图:


保存后,将这个文件放到服务器的主目录下,及“G:\wwwroot\”,然后打开Chrome浏览器在地址栏输入:localhost并回车!这时候就能看到“index.html”网页的内容了,如下图:


如果您的机器名是“Bacysoft”,您也可以尝试用Bacysoft替换localhost看看会看见什么?再或者直接换成本机的IP的地址,例如:192.168.1.100

 

到这里,适合初学者使用的网页开发环境就介绍完了,使用这套环境可以用来学习静态HTML的所有内容,包括HTML/XHTMLJavascript以及其他客户端脚本程序、CSS以及其他浏览器相关的技术。

 

必须指出的是:并不是所有浏览器都是按照HTML标准来解释网页代码,因此本站强烈建议使用多种浏览器测试网页,主流的浏览器主要包括以下几种:IE6/7/8ChromeFirefoxSafariOpera…笔者的网页通常都是优先使用Chrome测试,然后IE,然后Firefox,这三者都能通过的话,其他浏览器基本都能通过!

 

高级网页开发环境

所谓高级网页开发环境,主要指能支持动态网页的服务器程序,按照操作系统的不同主要分为两类,及Windows/IIS系统和Linux/Apache或者Linux/ Nginx系统。

Windows/IIS系统默认支持ASPASP.net,可以使用Access或者SQL Server数据库系统;

Linux/Apache/MySQL/PHPLAMP)和Linux/Nginx/MySQL/PHPLNMP)能够支持PHP,并使用MySQL或者其他Linux系统支持的数据库系统。

这里推荐Comsenz出品的Windows环境下的Discuz X2集成PHP环境安装包EXP,详细情况请移步:http://www.discuz.net/thread-2242502-1-1.html

 

欢迎转载本站文章,但请保留版权信息! http://www.Bacysoft.cn
如果您觉得本站资源对您有帮助,也请您支持本站发展,谢谢!本站的发展,需要您的支持!


路过

雷人

握手

鲜花

鸡蛋

评论 (0 个评论)

facelist

您需要登录后才可以评论 登录 | 邀请注册



阿里云|腾讯云|联系方式|Bacysoft.cn ( 京ICP备08000958号-1 )

GMT+8, 2019-10-19 09:47 , Processed in 0.013637 second(s), 17 queries , Gzip On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

返回顶部