web建站教程-web建站

资源描述：

《建站教程入门级教程》由会员分享，可在线阅读，更多相关《建站教程入门级教程（16页珍藏版）》请在人人文库网上搜索。

1、前言梦之都的站长建站教程，是一个入门级的教程，教程将揭开网站建设的神秘面纱，教会你网站建设的基本方法，为你成为一个真正的站长打下坚实的基础.· 理解何为网站· 了解网站运作的基本原理· 学习网站建设前所必备的基本技能· 网站建设中要使用的技术知识· 网站建设中常用的软件· 网站建设过程中的分工协作· 如何在自己的电脑上建立网站并测试· 搭建网站的过程· 如何着手设计一个网站· 如何购买域名与空间建立一个真正的网站· 如何使用免费的建站程序加快网站建设速度· 如何通过网站盈利&

2、#183; 如何宣传网站· 我还会把一些网站建设过程中常见的内容做成视频教程，使同学们以最快的速度学会网站建设教程的最后会把一些建站过程中涉及到的术语、名词做一个总结，供大家参考学习。1 . 网站建设入门例子 - 猴子买报的故事从前猴子每天都读报纸，报纸上有很多文章与信息，还有一些讨厌的广告。每篇文章都是由标题与多个段落的内容组成的，而且可能还有一些图片，数据表格等。现在，猴子再也不买报纸了(可不是由于报纸涨价了!:)，猴子每天都是通过新闻网站在线浏览，这种在线浏览方式与读报纸的方式是非常相似的。网上的每篇文章也都是由标题与内容组成，而且也会不时出现一些讨厌的广告！但是它们之间也有不

3、同，网络上通过链接的方式使很多篇相关的文章建立了联系，而且通常每个网页只有一篇文章，而不像报纸一样，一个页面总是多篇文章。还有一点不同的地方是与用户交互的方式（比如抽奖，问答等），报纸使用了一个插页或报纸的一部分，我们填写好信息后，必须邮寄给报社。但是在网络上这个步骤将更加简单了，我们只需要在页面上输入用户名，联系方式，点击提交即可！网络上更加神奇的一点是，搜索！只要通过搜索就可以找到想要的内容，而且还可以找到以前的很多文章(不用再翻老报纸了)，这的确比报纸好多了！使用网络还增加了环保(纸是由树木制作的，只要不断的读报纸我们生活的森林就会慢慢消失，想想那没有新鲜的空气，没有了鸟语花香的生活(！

4、而且废纸总是要处理的垃圾)，报纸上的油墨对猴的身体也不好，因此猴子下定决心，再也不买报纸了，开始学做网页了:)猴子提示: 制作一个网页有点像对报纸的排版(记住上面的几点不同，这些不同也体现了网络的优点)。我们也是建立一个标题，再建立文章的各个段落，经过美化，最后上传到网上，供用户浏览。而这里面使用的最基本的技术就是HTML。可以通过这个链接，学习HTML入门例子，尝试最简单的页面制作2 . 从输入域名到访问网站的过程学习建立网页前，我们应先了解网络(Web)基本的运作方式。也就是从我们在浏览器中输入域名到浏览器显示页面，这个过程中到底发生了什么事？见下面图示：说明1，浏览器通常指 IE Fir

5、eFox等，客户端使用的程序2，每台连接互联网的机器都有一个唯一的IP地址，IP地址是由4个0到256的数组成的，比如：222.131.0.229，127.0.0.1，由于每台联网的机器的IP地址都是独立的，因此可以通过IP判断一台机器。网站所在的服务器通常有一个固定的IP地址web建站教程，而我们浏览者每次上网的IP地址通常都不一样，IP地址是由ISP分配的。域名服务器(domain name server)的简称为DNS，它存储了域名与IP地址对应的列表。3，浏览器得到域名指向的IP后，浏览器会把我们输入的域名转化为HTTP的服务请求，例如，输入 ，可以转化为 由于输入的是域名，因此服务器接收到请求后，

6、会查找域名下的默认网页(通常为default.php或default.html)，如果直接输入4，返回的请求通常是一些文件，包括文字信息(.html .css .asp文件等)，图片，flash等(每个文件都要有一个唯一的网址，比如 5，浏览器将这些信息组织成用户可以查看的网页猴子提示: 查询网站的IP地址可以使用ping的方式，点击windows的开始 - 运行 - 输入“cmd” - 回车 - 输入 ping 可以查看的ip地址猴子提示: 查询自己机器的ip地址，可以使用上面的方式，输入 ipconfig 回车即可查看3 . 基本技能 - 学习网站建设前建站最基本的技能:· 练习

7、打字，打字是网页设计师必备的基本功，拼音输入法比较容易学习，学好了,打字速度也很快，比如：GOOGLE拼音输入法，搜狗拼音输入法；· 学会windows的基本操作，比如熟练掌握Ctrl+X剪切、Ctrl+Z撤消、Ctrl+N新建、新建文件、修改文件扩展名等基本Windows操作。学会熟练拖动文件。学会安装软件等。上面就是建设网站最基本的技能。猴子推荐: 搜狗拼音输入法是一个功能强大，使用简单的工具，推荐你使用。引用网址：建站次要技能:· 学会使用搜索引擎，查找问题的答案，常用的搜索引擎，baidu，google，yahoo；· 学会收发电子邮件。电子邮件是网络中最

8、基本的通讯方式之一；· 学会使用QQ等聊天软件，进行交流技术。.1. 网站设计中涉及到的技术知识曾几何时建设网站只需要一种语言(技术)：HTML。但随着web的发展与完善，新的技术层出不穷。虽然只使用HTML也可以建立最简单的网页，但为了使网站更加具有吸引力，更加高效，我们至少要学会下面一些常用网站设计的技术。下面这些技术将分不同的章节讲解，同时也会介绍它们之间的联系与区别，虽然涉及的内容挺多，但都不是很难，只要慢慢学习，你定能成为一个建站高手!搭建网站的结构 - HTML与XHTML网站的所有内容就是通过它们组织起来的。HTML与XHTML很相似，我推荐你使用XHTML，它更加严谨

9、。学习HTML教程学习HTML入门例子美化与布局网站的样式表 - CSS有了内容之后，通过CSS可以使内容表现的更好。学习CSS教程学习CSS入门例子引用网址:客户端脚本语言 - JavaScript通过目前最流行的脚本语言JavaScript，可以在客户端实现一些动态的效果、控制浏览器、数据的检测与验证，比如用户的输入验证，漂浮的文字，选项卡效果等。 目前最流行的Ajax技术，就使用了JavaScript。学习JavaScript教程学习JavaScript入门例子服务器端脚本语言 - ASPPHPJSP 等通过编程在服务器端实现对

10、内容的分析与操作，比如用户登录系统，购物车系统，数据的查询等。数据库与SQL语句 - Access MySQL SQLServer Oracle等数据库用于存储数据，保留用户与网站信息等。猴子提示: 网站建设发展到今天已经衍生出很多技术，但是每种技术的存在都是以为了实现更富有吸引力的用户体验与更方便快捷的网站建设为前提的，认识到这一点我们就能更加完善的理解这些技术了上一页/下一页/教程列表4.2. 网站设计中要学会的软件4.2.1. Notepad+4.2.2. EditPlus4.2.3. DreamWeaver4.2.4. PhotoShop

11、很多软件可以制作网站，而且网页制作的过程中还可以用到很多辅助软件，比如调色板软件，模板类软件等，这里只介绍一下常用的软件，学好下面的软件，就是掌握了最好的工具，可以使我们事半功倍！其它的软件大家可以慢慢学习。4.3. 前台设计师与后台程序师网站的建设过程中主要分两块工作：前台设计(前台设计师:就是我们常说的美工.)，后台编程(后台程序员)。网站前台一般的前台设计师要全面掌握HTML和CSS的就可以了，高级的前台设计师还要掌握JavaScript与DOM的相关知识。前台设计师要学会的软件有DreamWeaver，Photoshop，EditPlus，Flash等（最前面的最重要）。引用网址:猴子

12、提示: 前台设计师最重要的是要有审美感，熟悉颜色的搭配，有创意，会设计(软件只是工具)。网站后台一般的后台程序员要全面掌握HTML，CSS，JavaScript，服务器端脚本语言，数据库与SQL语句所涉及的内容，因为凡是和代码有关的后台程序员都要涉及。后台程序员要学会的软件有Notepad+，EditPlus，DreamWeaver等（最前面的最重要）。猴子提示: 后台程序员最重要的是逻辑思维能力，理解能力，分析能力，学习能力强(软件只是工具)。猴子提示:网站分工中还有很多其它的角色，比如业务、售前、售后、策划、测试、项目经理、DBA等。5 . 建设一个本地网站 - 先在自己的电脑

13、做一个网站5.1. IIS的安装与配置5.1.1 IIS安装视频教程5.1.2 IIS配置与建站设置视频教程5.2. Apache的安装与配置5.2.1 Apache安装与配置视频教程5.3. 客户端与服务器端本地网站是指先把网站建立在你自己的机器上，这样别人无法浏览，只有你自己或者局域网的用户可以浏览。本地网站可以方便我们调试修改程序，完全改好了，再上传到网上供大家浏览，欣赏。本地网站的浏览方式· http:/localhost/default.html· http:/localhost:80/default.html· http:/127.0.0.1/defa

14、ult.html· http:/127.0.0.1:80/default.html引用网址:localhost代表本地的意思和127.0.0.1一个意思;80是端口，由于默认就是80所以可以不写，如果是其它端口就应该写上。如果本地网站建好了，我们把页面全部上传到网上，再把localhost或127.0.0.1换成我们所用的域名就行了， 比如：如何在自己机器上架设网站架设一个网站需要一种软件环境，比如微软的IIS，Apache或Tomcat· IIS主要用于调试ASP,ASP.NET,IIS是Internet Information Services(Internet 信息服

15、务)的缩写形式。· Apache主要用于调试PHP。· Tomcat主要用于调试JSP。6.1. 搭建一个网站的目录6.1.1. 搭建网站目录视频教程通过视频教程学习如何搭建一个网站选择网站主题想好做什么后，我们就可以考虑网站的主题和有多少个栏目了。下面我们就以梦之都网站为例进行说明：· 梦之都网站的主题就是教会大家如何做网站。· 梦之都网站的主要栏目有：如何制作与搭建网站，HTML教程，CSS教程，JavaScript教程，再加上首页总共有5个栏目。下一步考虑如何组织一个网站，因为一个有多个栏目的网站不可能只有一个页面，它是由很多html页面和文件夹组

16、成的web建站教程，所以要合理的安排这些页面。我们使用Dreamweaver来完成这项工作。建立网站目录我们考虑为网站建立几个公共的目录:· 放置图像的目录 image· 放置css样式的目录 style· 放置javascript文件的目录 js继续为网站的各个栏目建立目录:· 如何制作与搭建网站webbuild文件夹· HTML教程html文件夹· CSS教程css文件夹· JavaScript教程javascript文件夹搭建网站目录打开Dreamweaver，点击站点，选择新建站点，

17、选择高级（"基本"的那种模式不好用），填写相关信息。点击确定，这时候我们可以在左侧看到已经建立了一个站点，现在站点里什么都没有。在右面空白处点击右键新建前面提到的几个文件夹。再在根目录下建立一个default.html，在这个页面上输入一些内容，保存(一定要保存!)。打开浏览器输入网址 http:/localhost/default.html ，现在应该可以看到你输入的内容了吧?猴子提示: 默认情况下网站的首页一般都命名为default.html或者index.html6.2. 为网站设计一个版式普通网站页面的设计过程Photoshop设计版式 - Photoshop切图

18、- Dreamweaver排版并且填充内容 - 使用Dreamweaver或者Notepad+定义CSS样式 版式一般是在Photoshop上设计的，之后使用Photoshop或者ImageReady切图，再使用Dreamweaver排版，插入图片，完善内容，过程就是这样的。一般的网站都是由网站头部，网站躯干，网站尾部组成的，其中躯干部分还可以再分。我们以梦之都首页为例，梦之都网站的首页就是由网站头部，网站躯干，网站尾部三部分组成的，躯干部分还分为左侧文章列表，右侧文章内容。首先我们先在Phostoshop上绘制梦之都的首页(由于梦之都网站的排版没有用到任何的图片，所以绘制比较简单)，之后根据

19、绘制出的图形在Dreamweaver中排版。下面的排版方式是使用了html+css(div+css)的方式(在CSS高级教程中我将详细讲解此内容)我们先对网站进行内容的填充，使用html(下面的代码和正真的梦之都首页有些出入，例子部分以下面代码为准),使用Dreamweaver打开default.html输入下面代码: