教案解说

绪论 网页设计基础简介 教学内容1） Internet 先驱J.C.R Licklider ：一位拥有心理学博士学位的心理学教授，在1966年被请到美国国防高级研究计划局来领导

绪论 网页设计基础简介 教学内容

1） Internet 先驱

J.C.R Licklider ：一位拥有心理学博士学位的心理学教授，在1966年被请到美国国防高级研究计划局来领导指令和控制技术的研究工作。

Larry Roberts：被尊称为“阿帕网之父”，从1966年开始支出阿帕网的技术工作。

Tim Berners-Lee ：“万维网之父”，开发了第一个所见即所得的超文本浏览器/编辑器World Wide Web ，通过一种超文本方式，把网络上不同计算机内的信息有机地结合在一起，并且可以通过超文本传输协议（HTTP ）从一台Web 服务器转到另一台Web 服务器上检索信息。 什么是超文本？

超文本（Hypertext ）基本上是一般的文本文件，只是在文本文件中另含有链接（Link ）及其他文件的引用（Pointer ），我们只要单击这些引用，即可链接其他相关文件。

2） Web 的历史

ML ：Markup Language，标记语言

什么是标记语言？

特指用一系列约定好的标记来对电子文档进行标记，来实现对电子文档的语义、结构、格式的定义。这些标记必须能够和容易的和内容相区分，易于识别。标记语言必须定义什么样的标记是允许的，什么样的标记是必须的，标记是如何与文档的内容向区分的，以及标记的含义是什么。 GML ：①Generalized Markup Language，通用标记语言; ②Geography Markup Language，地理标记语言

GML 标准化后出现了SGML ：Standard Generalized Markup Language，标准通用标记语言

SMIL ：Synchronized Multimedia Integration Language，同步多媒体集成语言 CML : Chemical Markup Language，化学标记语言

SVG ：Scalable Vector Graphics，可伸缩矢量图形

OEB ：Open eBook，开放式电子图书

3） Web 1.0 vs. Web 2.0

什么是Web 2.0？

Web 2.0并不是一个具体的事物，而是一个阶段，是促成这个阶段的各种技术和相关的产品服务的一个总称，与之相对应的是静态HTML 的WWW 时代，可以称之为Web 1.0。总结起来，Web 2.0的大概特征是：与前几年的网络应用相比，用户从内容的消费者变成了内容的创造者；用户从聚集在门户网站和BBS 等公共空间，到分散至个体网络日志（Blog ）的包产到户和全民织网。信息正在日益呈现离散的趋势，分散的“信息岛”与曾经一统天下的门户网站也形成了分庭抗礼之势。

我们无法说，Web 2.0是什么，但是可以说，那些是Web 2.0。

4） Web 2.0

AJAX ：AJAX 不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术，这种新技术可以使得用户提交数据后页面本身不刷新，带来更好的用户体验。

RSS ：(Rich Site Summary)是一种用于共享新闻和其他Web 内容的数据交换规范。读者可以通过RSS 订阅一个Blog ，确知该Blog 最近的更新。

IM ：即时通讯工具，QQ 、MSN 、Skype 等均属此类。

Bookmark ：也称Tag 或Tagging ，书签、标签之意。它可以让你把喜爱的网站随时加入自己的网络书签中；你可以用多个关键词而不是分类来标示和整理你的书签，并与其他人共享。 Blog ：网络日志，个人或群体以时间顺序所作的一种记录，且不断更新。Blog 之间的交流主要是通过反向引用（TrackBack ）和留言/评论（Comment ）的方式来进行的。Blog 的作者（Blogger ），既是这个Blog 的创作人，也是其档案管理人。

Podcasting ：播客，它是数字广播技术的一种，出现初期借助一个叫iPodder 的软件与一些便携播放器相结合而实现。Podcasting 录制的是网络广播或类似的网络声讯节目，网友可将网上的广播节目下载到自己的iPod 、MP3播放器或其它便携式数码声讯播放器中随身收听，不必端坐电脑前，也不必实时收听，享受随时随地的自由。更有意义的是，你还可以自己制作声音节目，并将其上传到网上与广大网友分享。

Wiki ：Wiki 一词来源于夏威夷语的“wee kee wee kee”，原本是“快点”的意思，它是网上免费的百科全书，它依靠众多投稿人来增加和修改其条目。想像一下：一组人坐在一块白板面前，任何人都可以在上面添加想法，做出修改，甚至擦掉一点东西，你就可以对Wiki 有了个大致的印象。

Witkey ：人的知识、智慧、经验、技能通过互联网转换成实际收益的互联网新模式。主要应用包括解决科学、技术、工作、生活、学习等领域的问题。

P2P ：P2P 直接将人们联系起来，让人们通过互联网直接交互。P2P 使得网络上的沟通变得容易、更直接共享和交互，真正地消除中间商。P2P 就是人可以直接连接到其他用户的计算机、交换文件，而不是像过去那样连接到服务器去浏览与下载。P2P 另一个重要特点是改变互联网现在的以大网站为中心的状态、重返" 非中心化" ，并把权力交还给用户。平常使用eMule 、BitTorrent 等均属于此类。

SNS ：Social Networking Software/Service/Sites/Systems的缩写，即社会交往软件（或服务、网站、系统）。目前，新一代的SNS 技术使社会交往超越了单纯的网络交友，而逐步成为了一种新的网络生存方式，SNS 的逻辑是通过老朋友，认识新朋友，不断扩展自己的人脉，使自己获得更广阔的发展空间。如MySpace 。

5） Web Standards

Web 2.0最大的特点之一是用户参与，一个网站如何吸引最多的用户，最基本的条件之一是不管用户使用什么样的浏览器，网站都应该是可以正常浏览的，这时候Web 标准就应运而生了。 Web 标准的一个最基本理念就是对网页进行分层。

6） What we will learn

带create 的说明该项可以作为一个单独的文件存在，比如CSS 可以放在扩展名为.css 的文件中。

为什么不讲工具的使用？

7） 编辑器

Microsoft Expression Web Designer是2007年微软刚刚推出的取代FrontPage 的网页设计软件，使用这个软件的目的是为了和以后学习ASP .NET时保持一致性。

选择Macromedia Dreamweaver 8.02是因为这款软件太经典了，在网页设计领域占有非常重要的地位。

8） 浏览器

测试网页在多种不同内核的浏览器中的兼容性

9） 验证工具

验证网页是否符合XHTML 和CSS 标准。

第一章 Web 基础与概述 教学内容

1） Web

PPT1——

1989年8月6日，Tim Bernes-Lee 发布了World Wide Web 。最初，Tim Berners-Lee 曾经考虑把World Wide Web叫做“信息挖掘(Mining of Information, MOI)”，但是他觉得这个名字有点过于自负，所以舍弃了这个名字。

交叉引用的万维网：35年以前，美国心理学家米尔格伦(Stanley Milgram)在《今日心理学》杂志上提出“六度分割（Six Degrees of Separation ）”的理论：任何两个陌生人都可以通过“亲友的亲友”建立联系，而这两个人之间的亲友数量大约是5；最新的实验结果来自哥伦比亚大学社会学系的瓦茨（Duncan Watts）领导的研究小组。《科学》杂志发表了他们关于在世界范围内大规模检验“六度分割”假说的论文。瓦茨的研究结果表明：从一个网页达到任何另外一个平均只需点击19次。

超链接：是当今世界万维网的基础，是网页制作的基础技术，是有效实现信息资源共享的关键。 PPT2——

uniform 有制服的意思，如果大家都穿上了制服，那么就可以说大家的着装是“统一的”，URL 中的uniform 即指统一。

词汇

既然是8位二进制数，那么每个数的最大值只能是255。

4个点分的十进制数转换为二进制表示可以代表更多的含义，如网络号、主机号等，这是《计算机网络》中药讲授的内容，此处不再深入。

PPT7——

端口就像管道一样，服务器端程序需要使用不同的端口来响应客户端程序的请求，这样不致引起混乱。

常用服务的默认端口应该能够记住，但这是《计算机网络》中要求的内容，此处只作简单介绍。 3） 域名与

PPT8——

江苏的同学的身份证号码前三位是什么？320！在居民身份证这个系统中，320代表的就是江苏，但是你很可能知道某位同学是江苏人，但是不知道他/她的身份证号码前三位是320。这是因为名称（江苏）比代码（320）更好记。域名和IP 地址的关系也和这个类似，域名更容易记忆。比如中国矿业大学的域名为cumt.edu.cn ，管理学院的域名为sm.cumt.edu.cn 。 域名的分类——

①类别顶级域名：由于Internet 最初是在美国发源的，当时人们按用途把它们分为几个大类，它们分别以不同的后缀结尾：

URL

这类域名可以称为类别域名，其中，.edu, .gov 和.mil 一般只为美国专用，而.com, .net 和.org 在全世界范围内通用。

②地理顶级域名:随着越来越多的国家和地区接入Internet ，出现了地理顶级域名，共有243个国家和地区的代码，如.cn 代表中国，.hk, .mo和.tw 分别代表中国的香港、澳门和台湾地区。

能不能在地理顶级域名中实现和类别顶级域名中类似的按用途分类呢？答案是肯定的，地理顶级域名中分设了不同意义的二级域名，主要包括类别域和行政区域。cumt.edu.cn 中的edu 就是cn 顶级域名下的二级类别域名，xz.js.cn 中的js 则是cn 顶级域名下的二级行政区域名。2002年12月开始，cn 顶级域名下的二级域名开放注册，受到了中国国内网站的青睐，这样，cn 顶级域名下的二级域名也就不再局限为类别域和行政域了。

③新顶级域名:根据Internet 发展的需要，从2001年开始使用的新顶级域名有7

个：.aero, .biz, .coop, .info, .museum, .name, .pro

PPT9——

我们可以把整个域名系统看作是一棵倒立的树，对于每个域名来说，可以把它们看作是这棵树上的一个分支。

PPT10——

从资源管理器，我们可以很清楚地看到，文件系统(file system)也可以看作一棵树，事实上，这个控件正是Treeview 。

PPT11——

虽然域名容易记忆，但是它不能标识主机的位置，比如单从sina.com.cn 这个域名来看只能说这台主机可能在中国大陆；路由器等网络设备需要使用IP 地址进行运算（转化为二进制后运算）以确定该主机的具体位置，这个过程就是所谓的域名解析。

在通过局域网接入Internet 时，有时我们需要手动设置访问Internet 的DNS 服务器地址，如下图所示。

如果不填写如上图所示的

DNS 服务器地址，那么通过域名是无法访问到网站的。

在浏览器的地址栏中，输入dangdang.com.cn 和211.100.16.198都可以正确访问当当网上书城的网站。但是，由于一些Web 服务器的特殊设置（如Web 服务器绑定了多个IP ），使用IP 地址并不一定能够正常访问网站。

怎样从一个域名得到一台主机的IP 呢？介绍两个常用的DOS 下的网络命令。

①ping ：用于验证与远程计算机的连接。

②tracert ：用于路由诊断。

图中加方框的字符串即为域名dangdang.com.cn 对应的IP 地址。

PPT12——

该图解释了域名和IP 地址的层次关系。对于一个域名或IP 地址来说，按照从右到左的顺序，该主机的位置越来越具体。

PPT13——

和域名注册相关的两个英文单词：

① registrar 注册机构

② registrant 注册人

它们的关系和employer 和employee 类似。

有人总结出来域名选择A to F：A cronym （尽量使用缩写）, B enefit （足够吸引人以带来利益）, C haracter （尽量只使用字母）, D otcom （Dotcom 是最广泛使用的域名）, E xtension （注册扩展域名以防恶意注册）, F ree （尽量不要使用免费域名）。

域名相关的三个机构：

①国际互联网名称和地址分配组织(The Internet Corporation for Assigned Names and Numbers, ICANN)：http://www.icann.org

②国际互联网络信息中心(The Internet’s Network Information Center,

InterNIC) ：http://www.internic.net

③中国互联网络信息中心(China Internet Network Information Center, CNNIC)：http://www.cnnic.net

在UNIX 系统中，有一个命令叫做whois ，可以用它来查询域名的域注册信息，Windows 用户可以使用InterNIC 和CNNIC 提供的在线whois 服务中查询：

6.cn （六间房视频）和g.cn 可以说是世界上最短的域名。

对于这种太长的域名，事实上没有任何好处，只能把它加入收藏夹以便下次访问。

PPT14——

通常直接域名只能访问到一个网站的首页。

最常见的协议还有FTP （File Transfer Protocol），即文件传输协议，DOS 下FTP 的使用方法——几个主要的命令ftp , open , ls , get , set 。

协议的英文是protocol ，这里使用的是scheme ，“架构”之意，因为像

maito:cumtzzp@163.com中的mailto 不是一个具体的协议（和邮件相关的协议有POP3和SMTP ），所以用scheme 包含的范围更广一些。

4） 静态页面与动态页面