网站设计中涉及到的技术知识.doc

4.1. 网站设计中涉及到的技术知识曾几何时建设网站只需要一种语言(技术)：HTML。但随着web的发展与完善，新的技术层出不穷。虽然只使用HTML也可以建立最简单的网页，但为了使网站更加具有吸引力，更加高效，我们至少要学会下面一些常用网站设计的技术。下面这些技术将分不同的章节讲解，同时也会介绍它们之间的联系与区别，虽然涉及的内容挺多，但都不是很难，只要慢慢学习，你定能成为一个建站高手!搭建网站的结构 - HTML与XHTML网站的所有内容就是通过它们组织起来的。HTML与XHTML很相似，我推荐你使用XHTML，它更加严谨。学习HTML教程 学习HTML入门例子美化与布局网站的样式表 - CSS有了内容之后，通过CSS可以使内容表现的更好。学习CSS教程 学习CSS入门例子引用网址:/webbuild/webbuild_knowledges/客户端脚本语言 - JavaScript通过目前最流行的脚本语言JavaScript，可以在客户端实现一些动态的效果、控制浏览器、数据的检测与验证，比如用户的输入验证，漂浮的文字，选项卡效果等。 目前最流行的Ajax技术，就使用了JavaScript。学习JavaScript教程 学习JavaScript入门例子服务器端脚本语言 - ASP PHP JSP 等通过编程在服务器端实现对内容的分析与操作，比如用户登录系统，购物车系统，数据的查询等。数据库与SQL语句 - Access MySQL SQLServer Oracle等数据库用于存储数据，保留用户与网站信息等。4.2. 网站设计中要学会的软件4.2.1. Notepad+4.2.2. EditPlus4.2.3. DreamWeaver4.2.4. PhotoShop很多软件可以制作网站，而且网页制作的过程中还可以用到很多辅助软件，比如调色板软件，模板类软件等，这里只介绍一下常用的软件，学好下面的软件，就是掌握了最好的工具，可以使我们事半功倍！其它的软件大家可以慢慢学习。4.2.1 Notepad+目录1 Notepad+简介2 Notepad+下载3 Notepad+的安装4 Notepad+使用技巧简介Notepad+简介Notepad+是一款由国人编写的开源的，小巧功能强大的文字处理软件，此软件可以称为Windows记事本的完美替代方案，而且很多功能可以自己定制。支持多种语法的HTML，CSS，JavaScript等语言的着色显示与语法层叠等功能。是网页设计者不可多得的好工具。访问Notepad+官方站点 Notepad+Notepad+下载官方网站下载Notepad+Google下载Notepad+ 百度下载Notepad+引用网址:/webbuild/notepad_plus/Notepad+的安装双击下载好的可执行文件，见下面图示安装过程下面这步要注意，要选择红框的内容，下面使用技巧中介绍为什么选择。Notepad+使用技巧简介1，查看网页源代码如果是按照上面步骤安装的(安装过程中选中了 As default html viewer)，在IE上点击右键，选择查看源代码，将使用Notepad+打开网页源代码，而不是Windows系统自带的记事本。2，为代码增加行号选择要增加行号的文本，点击插件，点击TextFX Characters，点击T:Insert Line Numbers3，转换为HTML实体选择相应的文本，点击插件，点击TextFX Characters，点击C:Encode HTML (&)4，去掉文本中的HTML元素选择HTML元素，点击插件，点击TextFX Characters，点击C:Strip HTML tags table tabs猴子提示: Notepad+很强大是吧:)，上面我们介绍的都是Notepad+一个最棒的插件TextFX，Notepad+还有更多好玩的，就等待你去探索了！4.3. 前台设计师与后台程序师网站的建设过程中主要分两块工作：前台设计(前台设计师:就是我们常说的美工.)，后台编程(后台程序员)。网站前台一般的前台设计师要全面掌握HTML和CSS的就可以了，高级的前台设计师还要掌握JavaScript与DOM的相关知识。前台设计师要学会的软件有DreamWeaver，Photoshop，EditPlus，Flash等（最前面的最重要）。引用网址:/webbuild/design_vs_code/猴子提示: 前台设计师最重要的是要有审美感，熟悉颜色的搭配，有创意，会设计(软件只是工具)。网站后台一般的后台程序员要全面掌握HTML，CSS，JavaScript，服务器端脚本语言，数据库与SQL语句所涉及的内容，因为凡是和代码有关的后台程序员都要涉及。后台程序员要学会的软件有Notepad+，EditPlus，DreamWeaver等（最前面的最重要）。猴子提示: 后台程序员最重要的是逻辑思维能力，理解能力，分析能力，学习能力强(软件只是工具)。猴子提示: 网站分工中还有很多其它的角色，比如业务、售前、售后、策划、测试、项目经理、DBA等。5 . 建设一个本地网站 - 先在自己的电脑做一个网站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 /default.html :80/default.html引用网址:/webbuild/buildweb_inhome/localhost代表本地的意思和一个意思;80是端口，由于默认就是80所以可以不写，如果是其它端口就应该写上。如果本地网站建好了，我们把页面全部上传到网上，再把localhost或换成我们所用的域名就行了， 比如：/default.html如何在自己机器上架设网站架设一个网站需要一种软件环境，比如微软的IIS，Apache或Tomcat IIS主要用于调试ASP,ASP.NET,IIS是Internet Information Services(Internet 信息服务)的缩写形式。 Apache主要用于调试PHP。 Tomcat主要用于调试JSP。5.3. 客户端与服务器端客户端与服务器端的区别 客户端:Client 服务器端:Server一般来说，客户端就是我们使用的电脑（包括我们使用的浏览器IE,Firefox）;服务器端就是存放网页与数据库数据的服务器；动态网页都是在服务器端执行（例如asp、php等程序）成HTML, XHTML，CSS，javascript，flash等，之后下载到客户端由浏览器显示；猴子提示: javascript是客户端程序，所以使用其编写的显示时间的程序会根据客户端机器的时间变化，而php、asp是服务器端程序，使用其编写的显示时间程序不会根据客户端变化，只会根据服务器端的时间变化。举几个客户端与服务器端的例子 你上网浏览网页 浏览器(IE)就是客户端程序，服务器上的网站就是服务器端程序 你使用QQ聊天引用网址:/webbuild/client_vs_server/QQ就是客户端程序，腾讯机房放的存储、交换聊天信息的程序就是服务器端程序 你玩魔兽世界（一个网络游戏）电脑上装的魔兽程序就是客户端程序，你连接的服务器（九城的服务器）就是是服务器端程序客户端与服务器端B/S结构我们通常所说的动态网站设计一般都是B/S结构的，B是Browser的缩写，就是客户端程序。S是Server的缩写，就是服务器端程序。客户端程序通常不需要我们编写，可以使用IE或者FireFox等浏览器，所以我们只需要编写服务器端程序就好了，这样只要修改S端程序，就可以使网站发生变化，因此B/S结构的优势就是，容易部署，容易更新，而且客户端比较轻便（瘦客户端）。猴子提示: 客户端程序和服务器端程序通常是多对一关系，即一个服务器端程序，为众多的客户端程序提供数据服务。猴子提示: 我们在自己的电脑上做网站，调试网站，通常使我们的电脑即充当客户端又充当服务器端。6 . 建设网站的过程6.1. 搭建一个网站的目录6.1.1 搭建网站目录视频教程6.2. 为网站设计一个版式6.3. 相对路径和绝对路径6.4. 静态页面与动态页面做一个网站之前我们应该先有一个构思，比如做一个介绍自己工作和爱好的网站，或者一个游戏网站(我的第一个网站就是Diablo暗黑破坏神的专题站，当时非常喜欢这款游戏)等，总之网站要言之有物。6.1. 搭建一个网站的目录6.1.1. 搭建网站目录视频教程通过视频教程学习如何搭建一个网站选择网站主题想好做什么后，我们就可以考虑网站的主题和有多少个栏目了。下面我们就以梦之都网站为例进行说明： 梦之都网站的主题就是教会大家如何做网站。 梦之都网站的主要栏目有：如何制作与搭建网站，HTML教程，CSS教程，JavaScript教程，再加上首页总共有5个栏目。下一步考虑如何组织一个网站，因为一个有多个栏目的网站不可能只有一个页面，它是由很多html页面和文件夹组成的，所以要合理的安排这些页面。我们使用Dreamweaver来完成这项工作。建立网站目录我们考虑为网站建立几个公共的目录: 放置图像的目录 image 放置css样式的目录 style 放置javascript文件的目录 js继续为网站的各个栏目建立目录: 如何制作与搭建网站webbuild文件夹 HTML教程html文件夹 CSS教程css文件夹 JavaScript教程javascript文件夹搭建网站目录打开Dreamweaver，点击站点，选择新建站点，选择高级（基本的那种模式不好用），填写相关信息。点击确定，这时候我们可以在左侧看到已经建立了一个站点，现在站点里什么都没有。在右面空白处点击右键新建前面提到的几个文件夹。再在根目录下建立一个default.html，在这个页面上输入一些内容，保存(一定要保存!)。打开浏览器输入网址 http:/localhost/default.html ，现在应该可以看到你输入的内容了吧?猴子提示: 默认情况下网站的首页一般都命名为default.html或者index.html6.2. 为网站设计一个版式普通网站页面的设计过程Photoshop设计版式 - Photoshop切图 - Dreamweaver排版并且填充内容 - 使用Dreamweaver或者Notepad+定义CSS样式 版式一般是在Photoshop上设计的，之后使用Photoshop或者ImageReady切图，再使用Dreamweaver排版，插入图片，完善内容，过程就是这样的。一般的网站都是由网站头部，网站躯干，网站尾部组成的，其中躯干部分还可以再分。我们以梦之都首页为例，梦之都网站的首页就是由网站头部，网站躯干，网站尾部三部分组成的，躯干部分还分为左侧文章列表，右侧文章内容。首先我们先在Phostoshop上绘制梦之都的首页(由于梦之都网站的排版没有用到任何的图片，所以绘制比较简单)，之后根据绘制出的图形在Dreamweaver中排版。下面的排版方式是使用了html+css(div+css)的方式(在CSS高级教程中我将详细讲解此内容)我们先对网站进行内容的填充，使用html(下面的代码和正真的梦之都首页有些出入，例子部分以下面代码为准),使用Dreamweaver打开default.html输入下面代码: 梦之都 import url(/style/style.css); 梦之都 为初学者提供一个在线的自学之地,为设计者提供一个网络编程的中文参考之地 首页 | HTML教程 教程 Tutorials 一步步的教会你网页设计与HTML语言 什么是HTML 索引 References 完善的HTML标签 HTML标签 示例 Examples HTML教程中的所有示例 所有代码与示例都是可以编辑的,现在就开始吧. HTML代码 关于我们 | 网站留言 | Copyright © 2004-2007 梦之都() All rights reserved. Powered by XHTML CSS PHP MYSQL 如果大家不太了解上面的代码，可以先学习HTML教程设计CSS首先在style文件夹下建立一个style.css的文件。在default.html中增加import url(style/style.css);CSS文件可以从梦之都下载 下载地址如果大家不太了解上面的代码，可以先学习CSS教程。好!你已经成功的完成了一个正真的符合web标准的和使用html+css(div+css)排版的网页了!其它的栏目与页面，和上面的实现方式一样，你可以自己尝试一下。6.2. 为网站设计一个版式普通网站页面的设计过程Photoshop设计版式 - Photoshop切图 - Dreamweaver排版并且填充内容 - 使用Dreamweaver或者Notepad+定义CSS样式 版式一般是在Photoshop上设计的，之后使用Photoshop或者ImageReady切图，再使用Dreamweaver排版，插入图片，完善内容，过程就是这样的。一般的网站都是由网站头部，网站躯干，网站尾部组成的，其中躯干部分还可以再分。我们以梦之都首页为例，梦之都网站的首页就是由网站头部，网站躯干，网站尾部三部分组成的，躯干部分还分为左侧文章列表，右侧文章内容。首先我们先在Phostoshop上绘制梦之都的首页(由于梦之都网站的排版没有用到任何的图片，所以绘制比较简单)，之后根据绘制出的图形在Dreamweaver中排版。下面的排版方式是使用了html+css(div+css)的方式(在CSS高级教程中我将详细讲解此内容)我们先对网站进行内容的填充，使用html(下面的代码和正真的梦之都首页有些出入，例子部分以下面代码为准),使用Dreamweaver打开default.html输入下面代码: 梦之都 import url(/style/style.css); 梦之都 为初学者提供一个在线的自学之地,为设计者提供一个网络编程的中文参考之地 首页 | HTML教程 教程 Tutorials 一步步的教会你网页设计与HTML语言 什么是HTML 索引 References 完善的HTML标签 HTML标签 示例 Examples HTML教程中的所有示例 所有代码与示例都是可以编辑的,现在就开始吧. HTML代码 关于我们 | 网站留言 | Copyright © 2004-2007 梦之都() All rights reserved. Powered by XHTML CSS PHP MYSQL 如果大家不太了解上面的代码，可以先学习HTML教程设计CSS首先在style文件夹下建立一个style.css的文件。在default.html中增加import url(style/style.css);CSS文件可以从梦之都下载 下载地址如果大家不太了解上面的代码，可以先学习CSS教程。好!你已经成功的完成了一个正真的符合web标准的和使用html+css(div+css)排版的网页了!其它的栏目与页面，和上面的实现方式一样，你可以自己尝试一下。6.3. 相对路径和绝对路径文件路径就是文件在电脑中的位置，表示文件路径的方式有两种，相对路径和绝对路径。在网页设计中通过路径可以表示链接，插入图像、Flash、CSS文件的位置。物理路径：物理路径就是硬盘上文件的路径，比如下面的文件：d:dreamduexe1.htmld:dreamduexefirst2.htmld:dreamduexefirst3.htmld:dreamduexefirstsecond4.html下面的例子使用了上面四个文件进行了相互链接，相对路径(Relative Path)如何表示同级目录的文件2.html和3.html在同一个文件夹下， 如果2.html链接到3.html，可以在2.html中这样写:同目录下文件间互相链接如何表示上级目录的文件1.html是2.html和3.html的上级目录中的文件，如果2.html或3.html链接到1.html，可以在2.html或3.html中这样写链接到上级目录中的文件./ 代表一级上级目录(间隔一个目录) ././代表二级上级目录(间隔两个目录)，比如4.html链接到1.html，可以在4.html中这样写链接到上级目录的上级目录中的文件如何表示下级目录的文件2.html和3.html是1.html的下级目录中的文件，如果在1.html中链接到2.html， 可以在1.html中这样写链接到下级目录(first)中的文件如果在1.html中链接到4.html，可以在1.html中这样写链接到下级目录(first/second/)中的文件绝对路径(Absolute Path)绝对路径就是带有网址的路径，比如你有一个域名，和一个网站空间，上面的四个文件就可以这么表示。链接到1.html链接到2.html链接到3.html链接到4.html根目录使用根目录的方式表示的路径和绝对路径的表示方式相似，去掉前面的域名就可。比如：链接到1.html链接到2.html猴子提示: 使用根目录和绝对路径的好处是表示路径比较简单，都是从网站的最开始目录里查找，一级一级的向下查。缺点是程序不容易移植(比如把网站做为另一个网站的一个栏目，移动到一个新的文件夹中就不行了。)6.4. 静态页面与动态页面什么是静态网页使用HTML,XHTML,XML,CSS,JavaScript,Flash等不需要服务器端运算的程序实现的网页。什么是动态网页使用ASP,PHP,JSP等需要服务器端运算的程序实现的网页。动态网页与静态网页的特点与区别 静态网页是由浏览器直接从服务器下载到浏览者所在机器上浏览的。 动态网页需要服务器执行(运算)成静态网页的内容，然后由浏览器下载到浏览者所在机器上浏览。 静态网页是任何网站的根基，因为浏览者浏览的内容永远是从服务器传回的静态网页的内容。 动态与静态网页并不矛盾，网站设计中往往是先使用DreamWeaver等工具设计静态网页，之后将PHP等程序嵌入静态网页中完成网站设计。 动态网页中一般会包含静态网页的内容，比如：PHP代码中通常包含HTML或CSS。 静态网页中不能包含动态网页的内容。比如：如果HTML中包含PHP的内容，那就是动态网页了。 动态网页通常与数据库相连，来完成页面的显示。比如：一个文章显示系统，可以只通过一个动态网页Display.php显示数据库中的多篇文章。而静态网页无法实现此功能。 采用动态网页可以实现很多动态功能，比如Blog登录，BBS讨论，购物车等。 由于动态网页需要服务器执行(运算)，因此将消耗服务器资源，访问速度会慢于静态网页。 当网站有大数据量时，应该使用动态网页管理，减少网站维护工作量。 当网站服务器压力过大或者访问量太大时，应该使用静态页面显示。 当网站有大的数据量而且访问量很大时，应该使用动态页面管理维护网站内容，同时生成静态页面用于显示。 动态网页的网址显示方式通常带有?，比如/dreamdu.php?id=999&name=monkey ，这种网址属于搜索引擎不友好的URL，应该使用urlrewrite改为静态网页的URL显示方式，比如类似于 /dreamdu_999_monkey.html 的URL。 动态网页是需要服务器端执行的程序，由于人的原因可能使动态网页程序产生漏洞，这些漏洞可能会被黑客利用。比如我们常说的挂马。猴子提示: 单纯的滚动字幕，动画效果或Flash网页不是动态网页。猴子提示: 不能单纯的根据网址中网页文件的后缀分辨动态与静态网页，因为可以使用服务器软件通过urlrewrite改变网址的显示方式。比如以.html或者.htm网址结尾的网站，不一定是静态网页。7 . 把网站上传到网络上 - 做个真正的网站，大家都可以浏览的那种:)7.1. 申请域名7.2. 购买空间、虚拟主机7.3. FTP软件7.3.1 FlashFXP7.3.2 LeapFTP做一个真正的网站是要一些投入的，比如我们要买个域名，再买一份放置网站页面的空间，当然了我们也可以申请一些免费的二级域名和一些免费的空间(大家可以通过baidu和google搜索)。7.1. 申请域名域名申请机构国内有多个正规的大型域名申请机构 新网 - 中国第一的域名注册商 万网 - 历史悠久的域名注册商 时代互联 35互联 中资源国外的域名申请机构 godaddy世界上最大的域名注册商，美国 enom世界上第二大域名注册商，美国域名怎么指向一个网站(空间) 网站空间一般都是和ip地址联系在一起的 可以通过一个或多个ip绑定一个空间 再把域名的解析地址改为这个ip地址(通常2-24小时才能生效) 之后就可以通过域名访问网站了同学们在某个网站申请完域名后，可以通过域名控制面板修改相关信息。由于各大域名注册机构的域名管理面板不大一样，应具体根据注册网站上的帮助，或者直接给客服打电话(一般客服都是很热情的)7.2. 购买空间、虚拟主机 - 存放网页的地方虚拟主机也可称作网站空间,就是互联网中的一台服务器中的一块硬盘空间(一台服务器的硬盘中通常可以划分多个这样的空间)，和我们在本地建立网站的方式基本是一样的，只不过服务器的硬件更好，带宽更大。空间购买后，一般注册商会给空间分配一个ip，这个ip就是域名要解析到的ip。国内主机服务商 - 万网 - 时代互联 - 新网 - 中资源国外知名主机服务商 BlueHost- 世界上最大且历史悠久的主机服务商之一，有很多中国用户 LunarPages- 世界上最大的主机服务商之一 Godaddy- 世界上最大的域名服务商，同时也提供廉价优质的主机产品，包括ASP，ASP.net，JSP主机 DreamHost- 历史非常悠久的主机服务商 HostMonster- 世界上最大的主机服务商之一猴子提示: 国外主机从性价比上来说通常是国内主机价格的十分之一，但是由于语言、地域与国情的差异在购买，管理与客服上存在着一些问题7.3. FTP软件 - 学会使用FlashFXP与LeapFTP7.3.1. FlashFXP7.3.2. LeapFTP有了空间我们就可以把网页上传了。上传一般都是通过FTP( File Transfer Protocol)软件。这里我给大家介绍两款FTP软件，FlashFxp,LeapFTP。8 . 为网站增加有用的功能8.1. 网站计数器统计网站的访问量8.2. 为网站增加搜索功能8.2.1 Google站内搜索代码8.2.2 Baidu站内搜索代码我们可以为网站增加很多常用的功能，比如网站计数器，网站留言板，站内搜索等，这里我给大家介绍两个最常用的功能。8.1. 网站计数器统计网站的访问量网站访问量也叫网站流量，流量统计可以使网站设计者了解到有多少人访问过网站，什么时候访问的，以及具体的来源页面等，是站长们最重要的工具之一。流量统计软件(网站计数器)可以自己编写，但是很耗时，而且很难做完善，网上有很多免费的流量统计工具。几个常用的流量统计工具 Google Analytics- 一个功能非常强大的流量统计工具，由于功能过于强大，不太适合初学者。(梦之都使用的就是Google Analytics) 百度统计- Baidu的统计系统。 雅虎统计- Yahoo的统计系统，功能很强大。 我要啦免费统计- 一个不错强大的流量统计工具。 中国站长联盟- 一个不错强大的流量统计工具。流量统计工具的使用方式，可以通过相关网站的教程学习。流量统计是站长们最重要的工具之一，它可以使你知道网站的访问量，访问量的来源（比如是google搜索来的，还是别的链接上来的），浏览者所在地等重要信息，站长们可以通过流量统计的数据，分析网站访问者的喜好，从而改变网站发展的策略。8.2. 为网站增加搜索功能8.2.1. Google站内搜索代码8.2.2. Baidu站内搜索代码在网站中建立搜索的方式一般有两种 通过查询网站本身的数据库来完成搜索 通过google或baidu等搜索引擎完成搜索这里只介绍第二种方法。第一种方法大家可以根据自己网站的数据库设计来完成。8.2.1 Google站内搜索代码可以为你的网站增加Google搜索功能。Google搜索代码 Google站内搜索代码把下面代码中的/替换成你的域名就可以实现搜索站内信息了。 搜索WWW 搜索梦之都 8.2.2 Baidu站内搜索代码可以为你的网站增加Baidu搜索功能。Baidu搜索代码 Baidu站内搜索代码把下面代码中的/替换成你的域名就可以实现搜索站内信息了。 搜索梦之都 9 . 选择适用于你的程序 - 使用开源程序轻松建站9.1. 内容管理(CMS)程序网站的很多功能通常是配合强大的程序完成的，比如对网站文章的管理可以使用内容管理系统，会员讨论的程序可以使用论坛BBS系统，写网志的程序可以使用博客Blog系统。如果你的水平够高，时间充裕，你完全可以编写一套适合自己的系统，体会编写程序