Internet-与网页设计PPT课件.ppt

Internet与网页设计 1 考核方式平时成绩30 作业70 两次作业推荐教材 网页设计与制作实例教程 袁磊等清华大学出版社 网页设计与制作试验教程 赵祖荫等清华大学出版社 中文版DreamweaverCS4标准教程 朱印宏中国电力出版社 AdobeDreamweaverCS4中文版经典教程 adobe公司 2 1 1基础知识1 1 1Internet与Internet的历史什么是Internet 我们可以翻译为互联网 因特网 音译 是指在APPA网基础上发展起来的世界上最大的全球性互联网络 单独提起互联网 一般都是指互联网或接入其中的某网络 同很多技术的发展一样 互联网技术最初也是由军用技术逐步发展起来的 第一章网页设计概述 3 Internet发展历史 20世纪60年代末 美国国防部的高级研究计划局 阿帕网 ARPAnet 1969年正式启用 20世纪70年代 ARPAnet已经有了几十个计算机网络 但网络之间是不通的 1982年 阿帕网采用了TCP IP协议 1986年 美国国家科学基金组织 NSF 建立NSF网络 第一章网页设计概述 4 Internet发展历史 1988年 NSFnet替代ARPAnet成为Internet的主干网 1992年 美国IBM MCI MERIT三家公司联合组建ANSnet 标志意义 Internet走向了商业化 1995年4月30日 NSFnet正式宣布停止运作 Internet用户已突破500万 Internet覆盖了全球91个国家 用户超过400万 第一章网页设计概述 5 Html语言的产生 1991年8月 蒂姆 伯纳斯 李在瑞士创立了HTML 超文本标记语言 同时他开始宣扬万维网项目 1996年以后 Internet 互联网 一词被广泛的使用 不过指的是整个的万维网 第一章网页设计概述 6 第一章网页设计概述 我们可以简单的理解为Internet将一个个的小型的信息孤岛联系在一起 形成一个巨大的网络 如下图所示 图1 1 7 1 1 2Internet在我国的发展 1 Internet在我国的发展历程 2 从近十年来网民人数的增长来看我国互联网的发展 3 我国互联网企业的发展 4 从域名注册看我国互联网发展规模 第一章网页设计概述 8 1 Internet在我国的发展1986年 1993年研究试验阶段第一阶段为1986 6 1993 3是研究试验阶段 在此期间我国一些科研部门和高等院校开始研究Internet技术 并开展了科研课题和科技合作工作 这个阶段的网络仅限于小范围内的电子邮件服务 而且仅为少数高等院校 研究机构提供电子邮件服务 第一章网页设计概述 9 1994年 1996年起步阶段1994年4月 中关村地区教育与科研示范网络进入互联网 实现和Internet的TCP IP连接 从而开通了Internet全功能服务 从此中国被国际上承认为有互联网的国家 此后 ChinaNet CERnet CSTnet GBnet等多个互联网络项目在全国范围内启动发展 1996年底 中国互联网用户数达到20万人 利用互联网开展的业务与应用逐步增多 第一章网页设计概述 10 1997年至今快速增长阶段国内互联网用户数从97年以后基本上保持每年翻一番的增长速读 2001年的统计数据表明 当时我国的上网用户超过2000万 09年4月18日中国官方公布的数据为中国网民数达到3 16亿 2010年5月调查表明 中国网民人数达到4 04亿 互联网普及率达到28 9 超过世界平均水平 使用手机上网的网民达到2 33亿人 第一章网页设计概述 11 第一章网页设计概述 2 近十年来网民人数的增长2000年 2250万 2005年 2亿 2007 2 1亿 2009年 2 98亿2010年5月1日4 04亿 互联网普及率达到28 9 图1 2 12 第一章网页设计概述 3 我国互联网企业的发展随着Internet的发展 我国的互联网企业也迅速发展起来 创造了一个又一个互联网的神话 右图通过qq注册人数的增长反应了腾讯十年来的发展 13 4 从域名注册看我国互联网发展规模1 什么是域名 域名与ip地址的对应关系域名 DomainName 是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称 用于在数据传输时标识计算机的电子方位 有时也指地理位置 Internet域名是Internet网络上的一个服务器或一个网络系统的名字 域名有国际域名和国内域名 第一章网页设计概述 14 以一个常见的域名为例说明 baidu网址是由二部分组成 标号 baidu 是这个域名的主体 而最后的标号 com 则是该域名的后缀 代表的这是一个com国际域名 是顶级域名 而前面的www 是网络名 为www的域名 域名中的标号都由英文字母和数字组成 每一个标号不能超过63个字母 不区分大小写字母 标号中除了连字符 外不能使用其他的字母 第一章网页设计概述 15 2 顶级域名与二级域名以 com net org结尾的域名为国际顶级域名 其中 com表示工商企业 net表示网络提供商 gov表示政府组织 www un org联合国官方网站 和国际域名相对应的有国内域名 即按照国家的不同分配不同后缀 这些域名即为该国的国内顶级域名 目前200多个国家和地区都按照ISO3166国家代码分配了顶级域名 例如中国是cn 美国是us 日本是jp等 第一章网页设计概述 16 二级域名实指在顶级域名下注册的域名 我国在国际互联网络中心 InterNIC 正式注册运行的为CN CN是一级域名 我国的二级域名有类别域名和行政域名两类 第一章网页设计概述 17 新浪网安徽人事网 芜湖市人民政府 第一章网页设计概述 18 3 如何注册域名最为通用的域名 com net的管理机构是ICANN 我们可以通过ICANN在中国的代理机构来进行域名注册 国内二级域名的管理机构是CNNIC 2009年12月14日9时起 个人用户将没有资格来进行域名注册 4 怎么注册一个好的域名实时性 常常发生多人同时申请一个域名 合法性 gov org个人注册肯定是不合法的 5 从域名注册看我国互联网的发展根据CNNIC 中国互联网发展报告 第一章网页设计概述 19 1 1 3Internet给我们生活带来的影响今年来互联网的发展给我们生活 曾经是 秀才不出门 能知天下事 今天是每个会使用网络的人都可以通过网络了解发生在世界的事情 网络有形无形的影响这我们每个人的生活 普通人也可以通过网络表达自己的心声 找到属于自己的团体 从一定程度上促进了社会的和谐 互联网可以说影响了我们生活的各个方面 近年来各种网络名词的流行也反映了互联网对我们生活的影响 打酱油 躲猫猫 偷菜 被就业 这些词都是今年来流行的 第一章网页设计概述 20 需要知道的一些名词 B2Bbusinesstobusiness阿里巴巴商家对商家B2Cbusinesstocustomer卓越网当当网C2Ccustomertocustomer淘宝 第一章网页设计概述 21 1 1 4相关的基本概念 1 wwwwww是WorldWideWeb的缩写 简称为Web 中文名为 万维网 它是当前Internet上最流行的信息检索服务系统 它把Internet上现有的资源连接起来 使用户能够访问Internet上所有站点的超文本媒体资源文档 WWW诞生于Internet之中 今天已经成为Internet中的代名词 第一章网页设计概述 22 1 1 4相关的基本概念 2 URLURL UniformResourceLocator 统一资源定位符 是一种地址 指定协议 如HTTP或FTP 以及对象 文档 WWW网页或其他目标在Internet或Internet上的位置 例如 第一章网页设计概述 23 1 1 4相关的基本概念 3 HTTPHTTP的全称是HypertextTransferProtocol 超文本传输 是用于从WWW服务器传输朝文本到本地浏览器的传送协议 它保证计算机正确快速的在网络上传输超文本文档 简单的说 HTTP就是在Internet上传输网页的协议 它屏蔽了传输的细节 第一章网页设计概述 24 4 HTMLHTML的全称是 HyperTextMarkupLanguage 超文本标记语言 是WWW的描述语言 超文本文档和普通文档的区别在于超文本文档中包含了tag 标记 标记是成对存在的 最常用见的标记有 标记该文档是一个超文本文档 图片标记 等 第一章网页设计概述 25 html的历史 1982年 英国物理学家TimBerners Lee 蒂姆 伯纳斯一李 为使世界各地的物理学家能够方便的进行合作研究 建立了html 他所设计的HTML以文字为基础 可以被任何文字编辑器所处理 最初仅有少量的tag 标记 可以试用 他成功编制了第一个浏览器 这也是我们所知道的最早的浏览器 1989年的夏天 蒂姆开发了第一个世界上第一个web浏览器和第一个web客户机 1989年12月 蒂姆讲他的发明定义为worldwideweb 也就是我们所熟悉的www 第一章网页设计概述 26 1 1 4相关的基本概念 5 浏览器浏览器是指可以显示网页服务器或者文件系统的HTML文件内容 并让用户与这些文件交互的一种软件 网页浏览器主要通过HTTP协议与网页服务器交互并获取网页 这些网页由URL来指定 如要访问新浪网 我们通过在浏览器的地址栏里输入来访问新浪网 简而言之 浏览器是一种运行在操作系统上的应用软件 我们使用word来编辑文本 使用浏览器来访问Internet 第一章网页设计概述 27 1 1 4相关的基本概念 6 微软的IE浏览器我们大多数人通常使用的都是微软的IE浏览器 IE事实上是众多浏览器中的一款 只是由于微软公司将其与windows系统捆绑销售 我们无需在安装windows系统之后在安装IE 在这里我们要清楚浏览器和word一样 是一种软件 第一章网页设计概述 28 1 1 3相关的基本概念 7 B S结构传统的应用软件采取的是C S client server 结构 即由桌面应用程序和服务器端程序组成 其不方便处在于每次使用的时候用户都需要安装客户端程序 随着Internet的发展 目前很多大多数应用软件采取B S Browser Server 结构 在这种架构下 用户工作界面是通过WWW浏览器来实现的 只有极少部分事务逻辑在前端 Browser 实现 主要的工作由服务器来做 第一章网页设计概述 29 8 静态网页与动态网页静态网页就是纯粹的HTML文件 网页的内容是固定的 不变的 网页一经编写完成 其显示效果也就确定了 静态网页无法满足实际的需求 比如对于一个欢迎页面 张三登陆后显示 你好 涨三 李四登陆进去后显示 你好 李四 需要两个页面 如果有1万个 10万个用户 显然静态页面技术是无法满足需要的 故需要采取动态页面技术 第一章网页设计概述 30 1 2常用网页设计工具 工欲善其事 必先利其器 要想高效率的编写网页 其中最主要的为Macromedia公司推出的网页三剑客 Dreamweaver Fireworks和Flash Dreamweaver是一个 所见即所得 的可视化网站开发工具 主要用于网页的设计与制作 Fireworks是一款创建与优化Web图像和快速构建网站与Web界面原型的理想工具 主要用于编辑矢量图形与位图图像 通常是用来设计页面 Flash的作用是制作动画 第一章网页设计概述 31 制作网页的过程中 要使网页更加美观大方 少不了要使用图片 最通常的图像处理工具为adobe公司的photoshop 主要用于图像编辑 图像合成 校色调色及特效制作等 功能强大 目前 Macromedia公司已被adobe公司合并 第一章网页设计概述 32 1 3本课程学习方法网页设计与制作是一门动手性很强的课程 需要大量的动手实践 在实践中领会网页设计技术 我们主要介绍如何静态网页部分 从了解html文本标记语言入手 一步步掌握网页制作的方法 第一章网页设计概述 33 第二章Html基础 2 1网页的内容我们首先来看这样一个页面 34 第二章Html基础 2 1 2最基本的HTML标记简介网页其实就是html文件 一个HTML文件不仅包含文本内容 还包含tag 标记 HTML标记的最基本格式 内容 本节我们通过一个最基本的页面来熟悉掌握Html的最基本标记 对于html标记的理解 我们可以将之理解为告诉IE浏览器所要显示的内容 本节我们来看最基本的HTML标记 无论一个网页多复杂 都会有这些最基本的标记 查看网页源代码最简单直接的方法为将鼠表网页上 单击右键 源代码 35 第二章Html基础 标记出现在一个文件的头部和尾部 告诉浏览器要显示的是一个html文件 而不是其他的文件 跟在html之后 用来表明文件的题目或者后面定义部分 Head信息一般是不显示出来的 在浏览器里面看不到 但是并不表示这些信息没有用处 有的时候可以帮助搜索引擎迅速找到网页 包含在之中 它可以显示在浏览器的标题栏中 标记为一个html的正文部分 以上这几个标记是任何一个html页面都拥有的 36 第二章Html基础 2 2建立一个最基本的html页面1 第一个文本文件可以在windows自带的 记事本 中完成 起具体步骤为 单击 开始 菜单 所有程序 附件 记事本 2 用windows自带的文本编辑器编写html文件 在记事本中输入如下的代码 这是html的标题这是html的内容输入习惯 1 成对的输入每个标记2 注意缩进 37 第二章Html基础 3 保存页面现在讲记事本文件保存为html文件 其步骤如下 文件 另存为 选择存储html文件 如图2 1所示 图2 1 38 第二章Html基础 注意事项 1 保存时注意修改文件的扩展名 HTML文件的扩展名为html或html 2 保存类型选择 所有文件 3 不能试用汉字或特殊字符文件名 我们可以通过如下的步骤来显示文件的扩展名 然后再进行修改 步骤如下 打开一个文件夹 选择 工具 文件夹选项 查看 命令打开如图2 2 2 3所示的窗口 39 第二章Html基础 图2 2图2 34 查看html源代码方法1 在页面空白出 单击鼠标右键 选择查看源文件 即可查看到我们所手写的 40 第二章Html基础 代码 方法2 单击浏览器工具栏上的 查看 查看源文件 也可以看到我们所输入的代码 2 2基本HTML标记学习HTML标记是HTML语言学习的主要内容 为实现网页效果 本节我们学习几个常用的HTML标记 1 正文标记到在文本编辑器中输入如下的代码标题标记的作用 41 第二章Html基础 标题标记的作用这里是正文这里是H1标题字 它最大这里是H2标题字这里是H3标题字这里是H4标题字这里是H4标题字这里是H6标题字 实例说明 1 到的内容都自动加粗 并且显示为黑体字 2