为了正常的体验网站,请在浏览器设置里面开启Javascript功能!
首页 > 自己动手写网站

自己动手写网站

2012-02-02 14页 pdf 453KB 138阅读

用户头像

is_351056

暂无简介

举报
自己动手写网站 自己动手写网站 1 1、什么叫 Web 开发?通俗点说:做网站的开发就是 Web 开发。网站不是天上掉下来的, 是开发人员一行行代码、美工人员一张张图片做出来的。 2、 Web 开发需要两种技术人员,一种是程序员,一种是美工。程序员是开发网站的功能 的人,而美工是使网站好看的人。 我们是计算机专业的学生,不懂美工、没有美术基础,不要沉迷于做好看的网站、网页美化、 网页特效,专业的网站都有自己的美工人员,这不是我们的强项。 3、这门课是 asp.net、php、jsp 等后续课程的基础。 4、Web 的原理 ...
自己动手写网站
自己动手写网站 1 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 注册页面。 自己动手写网站 2 1、同学们可以把自己做到网站发给我,然后我们会把你的网站放到 rupeng.com 上,这样你 的网站就可以被所有人访问到了,:) 2、空颜色和黑色是不一样的 3、背景要做成别的颜色的``就像 现在这个 uc 上面背景有两个小孩,怎么做到? 主菜单【修改】→【页面属性】→背景颜色/背景图片 4、去银行里边开户,你需要到柜台去填一张表,然后递给银行工作人员,由银行工作人员 根据你填的信息来进行后续的处理,你本人不能直接去操作银行的系统去自己开户。 对于网站同样是这样的原理:163 邮箱注册来说,你在注册页面里也是填一张表:用了什么 用户名、密码是什么。点击【注册账号】按钮以后,IE 浏览器会将这个表格提交给 163 的后 台服务器进行处理。 你填完表单后,要指定把表单提交给谁。银行里是这样,在 Web 也是这样的。 表单提交上去后,你就别管了,进行处理后会把处理结果告诉你。对于开户来说,就是是否 开户成功;对于申请 163 邮箱来说,有可能是暂停申请、你申请的帐号已经被别人用了。 5、这就是 B/S(Browser/Server,浏览器/服务器)开发的特点:客户端只有优先的展现,而很 多后台处理是由服务器来完成的。 6、 开发网站程序的程序员分成两种人:开发前台界面和开发后台处理程序。 前台就是 HTML 网页代码,就像咱们用 Dreamweaver 开发一样。而后台则使用 C#、ASP、Java、 PHP 之类的语言进行后台的处理程序编写。 咱们的《自己动手写网站入门篇》主要就是讲前台程序的开发。 自己动手写网站 3 作业点评: 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 语言写动态网页挺麻烦,只是过瘾而已。 自己动手写网站 4 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)。 标签、属性、属性的值、标签的内容。 rupeng 欢迎你 a 就是标签,href 就是属性,“http://www.rupeng.com”就是属性的值,“rupeng 欢迎你”就是标 签的内容。 可以简写成。条件就 是没有标签内容 (3)标签的嵌套 在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 几个选项表示走马灯的方向。 欢迎各位领导莅临 rupeng.com (2)behavior 属性:有 alternate(来回晃动)、scroll(单向滚动)、slide(一锤子买卖)。 欢迎各位领导莅临 rupeng.com 顺便复习一下英文: alternate 的意思是是“两个交替的,轮流的”。there will be a week of alternate rain and sunshine。 下礼拜时雨时晴。 scroll:滚动。scrollbar:滚动条。 slide:滑落、滑动。滑落当然是一次性滑到底,不可能滑来滑去的。 自己动手写网站 5 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("\n");printf("\\n") 空格: 小于号:< 对应的英文: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 字体 红色字体大小 20 19、表格,比较复杂,理解了就不难 20、表单 表单要和后台进行处理 以后咱们 CGI 会讲。 表单元素: 下拉列表 下拉列表 JavaScript 掠影:点击一个按钮进行计算: 你好')">计算 JavaScript 加法运算 什么叫后台处理代码?注册用户的时候点击【注册】按钮以后就要访问数据库把数据插入到 数据库中,因为出于安全考虑不能在客户端访问数据库,因此必须在服务器端访问数据库。 页面控制一般使用 JavaScript 语言,JavaScript 和 Java 没有任何关系,完全是一个当时借 Java 的名气而起来的技术。JavaScript 的语法是 C 语言语系的,因此和 C、Java、C#语法非常类似。 后台代码一般使用 CGI、PHP、JSP、ASP、ASP.net、ROR 等技术。 由于页面控制和后台代码都要涉及到新的编程语言,而如鹏倡导的一个原则是“抓住一门语 言”,等培养起来程序的思维以后再学习合适的语言。所以不会再继续搞 JavaScript 和后台代 码。等以后咱们 C 的课结束以后,并且带领大家用 C 开发几个像样的作品以后可能会开 Java 的课。然后再讲 JSP、JavaScript 等等。 未来路线:C→实战→Java 闪电速成→Java 实战开发→JSP 动态网站开发。这是对于在校大学 生学习的最好一条路。
/
本文档为【自己动手写网站】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。 本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。 网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。

历史搜索

    清空历史搜索
    td:tabledata。data:数据。数据结构:data struture tr:tablerow 嵌套标签,很好很强大:计算