自己动手写网站

自己动手写网站

1、什么叫Web开发？通俗点说：做网站的开发就是Web开发。网站不是天上掉下来的，是开发人员一行行代码、美工人员一张张图片做出来的。

2、 Web开发需要两种技术人员，一种是程序员，一种是美工。程序员是开发网站的功能的人，而美工是使网站好看的人。

我们是计算机专业的学生，不懂美工、没有美术基础，不要沉迷于做好看的网站、网页美化、网页特效，专业的网站都有自己的美工人员，这不是我们的强项。 3、这门课是asp.net、php、jsp等后续课程的基础。 4、Web的原理

服务器不是直接把网页的显示的样子传给客户端，而是只是返回一个网页的描述文件，比如哪个地方有一个按钮，哪个地方有个图片，浏览器（比如IE）就解析这个文件，然后把网页的内容显示给浏览者。描述文件就是HTML格式的。

标识一台服务器是要靠IP地址的，jsj321.com这样的域名并不能唯一标识一台服务器。把网站服务器想象成你的一个借你钱的人，你向催债公司说“上杨中科家催债去”，催债公司和你都不知道杨中科住哪，那么这时候就需要去问公安局。公安局就是DNS服务器，DNS服务器就是提供了根据域名查询服务器IP地址的功能。 注：在命令行下运行“ping www.jsj321.com”查服务器ip地址。 5、DNS深入挖掘

（1）如果我访问一个不存在的网站，那么浏览器就会报告“找不到服务器或 DNS 错误” （2）DNS服务器并不是全球只有一个，而是有很多个。

（3）DNS劫持的原理：黑客控制了DNS服务器，然后把所有的解析请求都故意解析到一个恶意网站服务器上去，那么访问者就访问了恶意网站。中国电信、中国网通都大义凛然的搞过：比如咱们通过ADSL上网通的宽带，使用的就是网通的DNS服务器，默认的行为就是你访问一个错误的域名，DNS服务器就告诉你没有这个服务器，然后你浏览器就会显示“服务访问”；如果浏览者访问了一个不存在的域名，那么就导航到自己想推的网站，比如就是网通的网站；比如说大家访问JSJ321.com的时候，90%的几率都是直接导航到咱们的网站，10%的几率是导航到网通的网站。

6、什么是HTML？HTML就是描述网页长什么样子、有什么内容的一个文本文件。

7、什么是浏览器？IE就是浏览器吗？浏览器就是接收浏览者者的操作（点击一个链接、点击一个按钮），然后帮浏览者去Web服务器请求网页内容，然后展现成人眼能够看得懂的可视化页面的软件。IE是浏览器的一种，还有FireFox、Opera、Chrome等等，注意遨游（MYIE2/Maxthon）、世界之窗、腾讯浏览器（TT）等并不是一种独立于IE的浏览器，其内核还是IE的内核，只不过换了一个外壳而已，所以用遨游的不能嘲笑用IE的，否则就露怯了。 8、怎么查看网页的描述文件（HTML）？使用InternetExplorer浏览器的话，在网页上点击右键，选择“查看源文件”

9、回忆一下咱们在C#的课程中开发的那个自己的浏览器，用的WebBrowser控件就是Ie的核心，这是和Maxthon、TT这样的浏览器一样的。 10、Dreamweaver介绍。

网页三剑客：Fireworks、Flash、Dreamweaver。Fireworks做图片用的，Flash做Flash动画用的，Dreamweaver做网页用的。三者结合。Fireworks已经被后娘Adobe抛弃了。

也可以用手写写HTML，但是非常麻烦。以前网页开发是Dreamweaver、FrontPage双寡头垄断，但是微软已经放弃FrontPage。但是对于开发人员来讲，手写HTML是一个基本要求。 11、浏览器兼容性问题

描述文件是一个统一的，但是就像口语翻译一样，不同的翻译翻译出来的东西也是不一样的。最初原因就是Web刚起步的时候没有一个统一的HTML标准，后来虽然有了标准的W3C组织提出的HTML标准，但是各个浏览器厂商还是各自为政，没有完全遵守这个标准。

不同浏览器品牌对HTML的支持是有差异的，所以一个网页在IE上和在FireFox上看起来可能长得不一样，最明显的就是QQ空间上的页面在FireFox上显示就有问题（前一阵子新闻说QZone开始支持FireFox了），甚至有的页面在IE6和IE7上长的也不一样。因此Web开发过程中的一个重要的也是最头疼的问题就是浏览器的兼容。 12怎么让我的网站让所有的人看？怎么做一个网站。

申请域名（可选，可以用二级域名）、申请空间（用虚拟主机或者自己买服务器）、做内容。关于这个问题以后会有专题论述。 13、开发第一个网页

（1）代码、拆分、设计。

（2）超链接不仅可以导航到另外一个网站，还可以导航到本地的一个网页。 （3）

大家学word的时候图片插入的两种方式：嵌入；链接。很显然嵌入的方式你的文件无论移动到哪里，你的图片都能看，哪怕源文件删了都能看；而链接式的，一旦文件拷贝到别人的电脑里，别人就看不了了，而且原文件删了也会有这个问题。

通过查看jsj321.com的首页的html内容我们得知：网页里的图片都是链接的。

大家学word的时候图片插入的两种方式：嵌入；链接。很显然嵌入的方式你的文件无论移动到哪里，你的图片都能看，哪怕源文件删了都能看；而链接式的，一旦文件拷贝到别人的电脑里，别人就看不了了，而且原文件删了也会有这个问题。

（4） 超链接（Target）、插入图片、修改字体颜色、插入表格。 （5）课后作业用Dreamweaver重写163注册页面。

1、 同学们可以把自己做到网站发给我，然后我们会把你的网站放到rupeng.com上，这样你的网站就可以被所有

人访问到了，：）

2、空颜色和黑色是不一样的

3、背景要做成别的颜色的``就像

现在这个uc上面背景有两个小孩，怎么做到？

主菜单【修改】→【页面属性】→背景颜色/背景图片

4、去银行里边开户，你需要到柜台去填一张表，然后递给银行工作人员，由银行工作人员根据你填的信息来进行后续的处理，你本人不能直接去操作银行的系统去自己开户。

对于网站同样是这样的原理：163邮箱注册来说，你在注册页面里也是填一张表：用了什么用户名、密码是什么。点击【注册账号】按钮以后，IE浏览器会将这个表格提交给163的后台服务器进行处理。 你填完表单后，要指定把表单提交给谁。银行里是这样，在Web也是这样的。

表单提交上去后，你就别管了，进行处理后会把处理结果告诉你。对于开户来说，就是是否开户成功；对于申请163邮箱来说，有可能是暂停申请、你申请的帐号已经被别人用了。

5、这就是B/S(Browser/Server，浏览器/服务器)开发的特点：客户端只有优先的展现，而很多后台处理是由服务器来完成的。 6、

开发网站程序的程序员分成两种人：开发前台界面和开发后台处理程序。

前台就是HTML网页代码，就像咱们用Dreamweaver开发一样。而后台则使用C#、ASP、Java、PHP之类的语言进行后台的处理程序编写。

咱们的《自己动手写网站入门篇》主要就是讲前台程序的开发。

2、 1、在网页上点击右键，选择“编码”→“简体中文（GB2312）”不乱码了。

2、两个编码的问题：文件的编码；网页的编码；

（1）创建一个文本文件，写入“联通”两个字，然后保存，再用记事本打开，看到的就是乱码，这就是传说中的“微软抵制联通”。

（2）对于英文字母、数字组成的文章，保存的默认都是ASCII码。ASCII码范围就是0-255，汉字不在ASCII码范围之内。怎么保存汉字就涉及到编码的问题。“老A是我”，中文一个字符用两个字节表示，A算什么呢？怎么来保存中文是一个老问题，历史问题，比如微软它有自己的解决方案，信产部搞了一套方案，清华也搞了一套方案，ISO标准组织也想统一这些方案搞一套方案。GBK、Big5、GB2312、UTF8、UTF16等等很多很多的编码解决方案，而且还是共存的。就造成了乱码问题。比如我用GBK保存了一个中文文章，然后UTF8打开了，这时候就出现了乱码问题，保存的时候、加载的时候用的不是一套方案。所以有的时候Linux的人发一个文本文件给你，你就有可能用windows打开乱码。

（3）因为HTML开始几段都是英文字符，所以就在网页的开头用一段描述性的文字自我说明“我用的是什么编码方案”，后边的中文IE就用它自我描述的编码方案来打开。

（4）用记事本打开网页文件，然后点击主菜单的【文件】→【另存为】，在对话框的最底端有一个“编码”，他显示的就是当前文件的编码，如果你修改以后，点击【保存】文件就用新编码方案来保存。 （5）把网页文件用UTF8编码重新保存就ok了（记得文件类型选“全部”）。大家手写网页的时候尽量还是用Dreamweaver来修改，不要用记事本来修改，哪怕是直接改HTML。Dreamweaver会自动保证网页的编码自我描述部分和文件真正保存的编码一致。

（6）专业人员打开“显示后缀”。资源管理器里【工具】→【选项】，“查看页”把“隐藏已知文件类型的扩展名”取消掉。

（7）单选按钮不是在页面内唯一互斥的。最经典的就是“学历”和“性别”同时存在。

区分两组单选按钮的属性是“name”名字。所有名字相同的单元按钮互斥，和不同名字的没有直接关系。单选按钮是分组的。

URL统一资源定位器： 一种想法：网址就是URL。

因为网页里所有的资源都不是嵌入的，而是链接的，因此需要一种机制指定资源的位置。 可以为图片的URL指定别的网站的一个图片，也就是“盗链”。 Unique：唯一。Uni：一的意思。 Uniform：统一

Location：位置。Locate：定位，Locator：定位的人、定位者。

WWW上的任何信息，包括文档、图像、图片、视频或音频都被看作是资源，为了方便引用资源，应给它们分配一个惟一的标志来描述该资源存放于何处及如何对它进行存取，当前使用的命名机制叫做统一资源定位器（Uniform Resource Locator），简称URL。

URL不一定都以http://开头，比如河科信工写的图片地址是用[url=file:///]file:///[/url]开头的，表示资源位于本地计算机。http://、[url=file:///]file:///[/url]就是访问协议。

因为如果要做动态网页，那么网页的HTML是不能用Dreamweaver写死的，而是你的程序动态生成，这时候开发人员就要明白怎么样生成HTML以及生成什么样的HTML。这就是为什么不能仅仅停留在会用Dreamweaver写网页，而是要学手写HTML的原因。咱们的课程也不会有太多的时间投入在Dreamweaver的使用上，而是用Dreamweaver做为一个辅助编辑器。开始会比较枯燥，大家不必看到语言就感到害怕，HTML和C语言不一样，它只是一系列标记的组合。看起来可怕，了解起来就很简单。 HTML只是一部分，怎么配色， CSS（做美化用的）：不会在CSS投入太多精力

JavaScript就是操纵网页的语言，和C、Java等一样的。放一些精力。 HTML、CSS、JavaScript：静态网页技术。

ASP、PHP、JSP：动态网页技术。重点在JSP，Java。要学会JSP动态网页开发，就先要学习Java。 静态网页：Dreamweaver开发网页（done）、HTML、JavaScript。 动态网页：Java、JSP（Struts）。也会安排用C语言来写动态网页！！！让大家看到C语言的强大。但是用C语言写动态网页挺麻烦，只是过瘾而已。

3、 1、什么是HTML？（How To Make L***）为什么要学习手写HTML。

为以后做动态网站打下基础。这部分一定要学好，虽然不难，但是学好了对以后理解XML这个东西也会有帮助。

2、不必看到“代码”就感到害怕，HTML和C语言不一样，它只是一系列标记的组合。HTML并不是一门语言。看起来可怕其实很可爱。看起来很难，学起来很简单，这样最能快速忽悠人了。当时我上学的时候只会用FrontPage做网页，当时听说有人做一个网页有问题，然后找计算机系的人帮忙看，人家根本不用FrontPage打开，直接用记事本看，当时感觉人家就是传说中的大侠，现在想起来都感觉好笑。

3、页面上的交互则JavaScript用来写代码，JavaScript语法是C语言语系的，Java、C++、C#都属于C语言语系的。再次用实例说明语言是次要的，不要害怕学新东西。 4、HTML的基本框架

首先看Dreamweaver生成空白页面的结构。

不管网页的内容多么丰富、版式多么复杂，网页的基本结构却都是一样的。

网页的基本结构：

－－开始HTML文档

－－开始文档头部

（主题部分，一般来说是不可见的）－－注释

－－结束文档头部

－－开始文档体

（正文部分，在浏览器中是可见的）－－注释

－－结束文档体

－－结束HTML文档

相当于C语言中的左括号、相当于C语言中的右括号。 { { } { } }

HTML是大小写不敏感的。HTML语法是比较自由的，换行、缩进什么的只是为了代码看起来清晰，对效果不会产生影响。

Dreamweaver中整块缩进：选择整块代码，然后Tab键，Shift+Tab则是取消缩进。UltraEdit、VisualStudio、Eclipse、Word、NetBeans、VC、C-Free等编辑器都有类似的功能。 5、标签的概念：

前后匹配。标签文字与属性，属性的默认值。

对于一个人来讲，它的身高、体重就是他的属性，对于一个按钮来讲，它的显示的文字就是他的属性；对于超链接来讲，点击超链接要代开的网站就是他的属性。 （1）IMG标签。（IMG是英文Image的简称）

提示：不用每次修改网页以后都点击Dreamweaver中的预览，只要刷新浏览器就可以。 jpg、jpeg、gif是最通用的格式。 png、bmp（太大了）：尽量不要用 （2）超链接A。（A是Anchor的简称，锚）

以超链接做实例讲：标签、标签中包含的内容、标签的属性（Target、Title）。 标签、属性、属性的值、标签的内容。

a就是标签，href就是属性，“http://www.rupeng.com”就是属性的值，“rupeng欢迎你”就是标签的内容。

在HTML中标签中的内容通常不仅可以是简单的文字，还可以嵌套其他的标签，这也就是“标签嵌套”。举例来说：超链接中的内容是IMG，也就是给图片加超链接。

6、快速学习HTML的技巧：某个功能不知道怎么写的话用Dreamweaver的可视化功能做出来然后查看代码；网上看到别人写的页面，多看人家的源代码。 7、HTML的容错性 8、尝试修改Title属性

9、href，尝试加入一个超链接，体会手写html与标签的文字与属性的概念。 修改Dreamweaver中自动提示功能。编辑→快捷键，然后建议修改为Ctrl+J。 10、Marquee与Marquee动画

一句话实现走马灯效果

欢迎各位领导莅临rupeng.com

（1）direction属性：有up、down、left、right几个选项表示走马灯的方向。

alternate的意思是是“两个交替的,轮流的”。there will be a week of alternate rain and sunshine。下礼拜时雨时晴。 scroll：滚动。scrollbar：滚动条。

slide：滑落、滑动。滑落当然是一次性滑到底，不可能滑来滑去的。 4、 10、Marquee与Marquee动画（2）

（4）小天使飞来飞去：嵌套图片

怎么快速得到一个文件的文件名？为了方便的复制文件名，并且显得咱们是专业人员：打开资源管理器的显示后缀名的功能。

（5）课上练习：能否让小天使斜着飞？

物理的力量，由此证明物理、数学这些东西都是有用的。特别是以后如果有学游戏开发的，里边的粒子、碰撞等很多问题都需要很高深的物理学知识。 再来思考一下这个的原理：

数学万岁！

11、HTML中的颜色体系 修改网页的背景颜色：

#006699这就是HTML中表示颜色的方式，每两个是一组，三组分别就表示R、G、B的值，是16进制表示。 任何颜色都是红、绿、蓝三色的组合颜色，三原色。物理里有讲。R=Red、G=Green、B=Blue。

任何一个颜色都能分成无限多分，但是计算机中不能表示无限。把一个颜色分成256份就基本能骗过人眼了，就是专业的美术师也分别不出来。表示任何一个颜色你都可以说R值是多少，B值是多少，G是多少。纯红色：R=255，G=0，B=0；纯黑色：R=255、G=255、255，纯白色：R=0、G=0、B=0。 000000。FF=255，所以两位16进制的数正好能满足256份颜色的要求。

要点颜色有两种表示方法：

1）预定义的色彩名称：Black、Green等；

2）十六进制的RGB值（即红、绿、蓝三色的组合颜色）,

注意：

在RGB值前要加

#

号

例如：

红色背景

蓝色文本 链接为蓝色

RGB的方式使用Dreamweaver或者网页颜色生成器，不用背。而且配色也不是一个专业开发人员考虑的，是美工的事情，所以对于颜色的取值不用太操心，知道有这么一回事就行了。 12、HTML中的特殊字符（转义字符）

C语言里头，“\”转义符，printf(

对应的英文：lessthan 大于号：>

对应的英文：greaterthan

其他的可以借助着Dreamweaver自学。没必要背，经常用就熟了。 13、修改网页的Title

aaa 14、创建段落：

aaa

DRY原则：Don't Repeat Yourself。不要有重复。 15、回车

br和p的区别：p会多一行空白。如果分段的话用p，单纯的换行用br。 b：粗体。bold。秃头 i：斜体。italic。

u：下划线。underline

同志嵌套 16、标题

……

17、简单的字体 18、font字体

td：tabledata。data：数据。数据结构：data struture tr：tablerow

嵌套标签，很好很强大：

表单要和后台进行处理 以后咱们CGI会讲。 表单元素：

下拉列表