chap01Internet及网页编程概述

《chap01Internet及网页编程概述》由会员分享，可在线阅读，更多相关《chap01Internet及网页编程概述（27页珍藏版）》请在金锄头文库上搜索。

1、网页编程基础 XHTML、CSS、JavaScript第1章 Internet 及网页编程概述学习目标： 了解Internet的基本概念 了解Internet的基本应用，掌握其中的统一资源 定位器（URL）的概念 了解网页编程的3类标准，包括：结构标准语言表现标准语言行为标准语言 理解网站开发的工作流程 了解常用的网页制作软件 通过对案例网站的规划、创建，以及首页的设计 及初步实现，初步了解网站开发流程中的主要工 作1.1 Internet的基本概念 1.1.1 Internet的起源和发展Internet是在ARPANet的基础上不断发展、变化而形成的。 1969年投入使用 ARPANET

2、1974年，TCP/IP协议诞生 ,随后美国国防部将协议公开 1983年，ARPANet分裂为两部分：ARPANet和纯军事用的 MILNet。 1983年至1989年，Internet逐渐在教育、科研领域发展和普及 。其中，最为引人注目的是NSFNet。 1.1 Internet的基本概念 1.1.2 Internet的管理组织 1.1 Internet的基本概念 1.1.3 Internet在中国 1987年9月20日钱天白教授向世界发出的我国第一封电子邮件 1990年10月，我国正式向Internet网管中心登记注册了我国的 最高域名“CN” 在1994年4月正式开通了与Internet

3、的专线连接（64Kbps， 且于1994年5月21日完成了我国最高域名CN主服务器设置， 实现了和Internet的TCP/IP连接， 建立并发展了中国教育和科研计算机网（CERNet、中国公 用计算机互联网（CHINANet）等网络 1.1 Internet的基本概念 1.1.4 Internet的域名系统 （DNS） 1.域名系统采用层次型结构的命名机制 计算机主机名.三级子域.二级子域.一级域名InternetInternet的域名系统就是提供主机符号域名与的域名系统就是提供主机符号域名与IPIP地址之间转换地址之间转换 服务的，也称为域名服务或者名字服务。服务的，也称为域名服务或者名字

4、服务。国家域通用域区域 名国家或地 区区域 名含义 Au澳大利亚com商业机构 Ca加拿大edu教育机构 Cn中国内地gov政府部门 fr法国int国际组织 hk中国香港 地区mil军事部门 tw中国台湾 地区net网络机构 uk英国org非盈利组 织us美国aero航空运输 工业1.1 Internet的基本概念 2.域名解析 （1）本地域名服务器的域名解析：用户提出域名解析请求（ 如要访问某网站，在浏览器里输入对应地址并进行连接操作） ，此时该请求会被发送至本地的域名服务器。本地的域名服务 器会查询本地服务器的域名解析表和域名缓存区（Cache）， 如无结果，则转向（2）。 （2）从根域名

5、服务器自顶向下查询：本地域名服务器将访 问请求提交给根域名服务器。根域名服务器再返回给本地服务 器一个所查询域（根域的子域，如CN）的主域名服务器的地 址。本地服务器再向前一步骤中所返回的域名服务器发送请 求，而收到该请求的服务器查询其缓存，并返回与此请求所对 应的记录或者相关的下级域名服务器的地址。本地域名服务器 将返回的结果保存到缓存。重复上一步骤，直至找到正确记 录。本地服务器把返回的结果保存，以备下一次使用，同时 还将结果返回给用户。 1.1 Internet的基本概念 1.1.5 Internet的接入方式 1. 早期的PSTN、ISDN接入方式 2. ADSL和VDSL接入方式 3

6、. LAN接入方式 4. HFC接入方式 5. PLC接入方式 6. IPTV接入方式1.2 Internet的基本应用 1.2.1 万维网万维网（World Wide Web，简称WWW或Web）是Internet 的主要应用之一。 万维网犹如信息资源的海洋，以下三 个要素保证了人们能够方便地在这片海洋中遨游。 统一的资源命名方式：URL（统一资源定位器，即网址） 。 统一的资源访问方式：HTTP（超文本传输协议）。 统一的信息组织方式：HTML（超文本标记语言）。 统一资源定位器（URL）URL主要由三部分组成：访问方式也即客户与服务器之间 所使用的通信协议、服务器地址以及信息资源的路径和

7、 文件名。其格式为： :/:/1.2 Internet的基本应用 2. 网页、网站和主页 网页（Web Page）是按照网页文档规范编写的一个或多 个文件。 主页（Home Page）就是网站默认的首页。主页默认的 文件名为index.htm或default.htm。 示例 网站（Web Site）是一系列网页的组合，这些网页拥有相 同或相似的属性并通过各种链接相关联。网站也是互联网信息服务类企业的代名词，如新浪网站 、搜狐网站等。3. 静态网页和动态网页静态网页：运行在客户端的页面是已经事先 做好并存放在服务器中的网页，通常由纯粹 的HTML/CSS语言编写。客户端动态技术：不需要与服务器交

8、互，实现 动态功能的代码往往采用脚本语言形式直接嵌 入到网页中服务器端动态技术：则需要与客户端共同参与 ，客户通过浏览器发出页面请求后，服务器根 据URL携带的参数运行服务器端程序，产生的 结果页面再返回客户端。1.2.2 其他应用1. RSSRSS（Really Simple Syndication），也称为聚合内容， 是利用XML等网络技术实现的在线共享内容的一种简易 方式。 有离线阅读和在线阅读两种方式。 2. WikiWiki是一种网上共同协作的超文本系统，可由多人共同 对网站内容进行维护和更新。 3. 其他1.2.3 Web 2.0 对于“Web2.0”的概念，目前没有确切统一的定义

9、，不同 机构和个人都有自身的理解。 其中，Internet协会对Web 2.0的定义是：互联网2.0（ web 2.0）是互联网的一次理念和思想体系的升级换代， 由原来的自上而下的由少数资源控制者集中控制主导的 互联网体系转变为自下而上的由广大用户集体智慧和力 量主导的互联网体系。 不论大家对Web 2.0的定义是什么，有一点是公认的，那 就是Web 2.0是以“人”为中心。 网页主要由三部分组成：结构（Structure）、 表现（Presentation）和行为（Behavior）。1.3.1 结结构标标准语语言1. XML：可扩展标识语言2. XHTML：可扩展超文本标识语言1.3.2

10、表现标现标 准语语言 CSS（Cascading Style Sheets，层叠样式表）。1.3.3 行为标为标 准语语言1. DOM：文档对象模型2. ECMAScript：欧洲计算机制造协会制定的标准脚本语言1.3 网页标准简介1.4 网站开发工作流程典型的Web开发工作流程包括以下阶段： 规划站点。 设置开发环境。 规划页面设计和布局。 创建内容资源。 组合、测试和部署站点。 维护和更新站点。1.4.1 规划站点1规划站点目标 （1）确定站点目标。 （2）确定目标用户（浏览者）。 （3）规划站点的导航方案。2合理安排站点的目录结构 （1）用文件夹来保存文档 （2）使用合理的文件名称 避免

11、使用中文 全部使用小写的文件名1.4.2 设置开发环境 无论是单独开发项目还是与团队一起合作开发，在开始建立 站点之前都需要先设置开发环境。开发环境应包括Web服务 器和站点。可能还需要一个应用程序服务器。1.4.3 规划页面设计和布局 1创建页面实体模型以确定站点外观 2创建页面布局1.4.4 创建内容资源资源可以是图像（包括按钮、横幅图形、徽标、照片等）、文 本、Flash内容或其它媒体等项目。1使用图图形和照片2创创建Flash内容和视频视频1.4.5 组合、测试和部署1. 组组合Web页页面2测试测试 站点 尽可能在各种不同的浏览器和平台上预览页面。 确保页面在目标浏览器中能够如预期的

12、那样工作。 检查站点是否有断开的链接（不工作的链接），并修复断开的链 接。 监控页面的大小以及下载这些页面所用的时间。 通过在Dreamweaver、FrontPage中运行站点报告，检查整个站点 是否存在问题。 使用Dreamweaver、FrontPage的验证程序来检查代码中是否有标 签错误或语法错误。 当Flash内容在Flash Player中运行时检查其是否有错。3向服务务器部署站点文件1.4.6 维护和更新站点在站点最初的内容被发布以后，需要继续对站点进行更新 和维护。发布站点（即在服务器上部署站点并使之投入运 行）是一个持续的过程。1.5 常用网页制作软件包括网页制作工具、图形

13、图像处理工具及动画制作与特效工具1.5.1 网页编辑器 网页编辑器分为“可视化”和“非可视化”两大类。1Dreamweaver2FrontPage3 Visual Studio1.5.2 网页图形图像处理工具1Fireworks2Photoshop3CorelDRAW1.5.3 网页动画制作与特效工具1Flash2Ulead Gif Animator1.6 开始环保小站网站创建之旅 1.6.1 案例网站结构规划网站目录结构图1.6.2 首页页面设计和布局 “环保小站”的主题是环保，首页的设计环绕这一主题进行。 PhotoShop中完成的实体模型 1.6.3 用Dreamweaver创建本地站点

14、在Dreamweaver中创建一个名称为“环保小站”的本地站点 ，站点根目录为D盘下的EPwebsite文件夹，其中包括首 页文件，图像素材文件夹及各章网页，如下图所示 。Dreamweaver中的“环保小站”目录结构 1.6.4 完成首页及站内链接将首页简化为图1-14所示的效果，用少量的步骤制作一个 简单的网站首页。图1-14 简化“环保小站”网站首页效果图1.6.5 网站初步测试对huanjing.html，shengtai.html，dongwu.html， ditan.html，zhishi.html这5个空白页面添加一点能相互区 分的内容 。huanjing.html页面效果shengtai.html页面效果 完成后逐一测试首页的各个链接。 1.7 习题一、 填空题（略） 二、 选择题（略） 三、 判断题（略） 四、 简答题（略） 五、 实践题 创建自己的个人站点，并制作首页。 操作要求：参考网络资料，自己设计一个个人主页，在 Dreamweaver中创建站点，并制作首页。适当设置首页 内容并与其他网页链接，设置网页标题等页面属性。