第一讲Web开发基础精品PPT课件
合集下载
Web技术应用基础(第一章)精品PPT课件
国家级精品课程 —Web技术应用基础
● IP地址的表示方法
IPv4地址采用“点分十进制”表示法。 按照TCP/IP协议规定，IP地址用二进制来表示，每个IP 地 例如：一个采用二进制形式的IP地址是“1110101000”， 为了方便记忆和使用，IP地址经常被写成十进制的形式， 中间使用符号“.”分开不同的字节。
计算机网络 ●
Web环境
通过通信线路和通信设备，将分布在不同地理位置、 具有独立功能的计算机系统连接起来，在网络协议 和网络管理软件的支持下，实现彼此之间数据通信 和资源共享的系统。
计算机网络为网络用户提供了两个主要功能：
连通和共享
连通功能共把享网功上能计使上算网用户可 机连接起以来使，用使网人上所们有公享资 可了以地交域换的源软、信遥件游，息远、戏例，。如硬等忘信件等、息记娱、乐文节档、目
在因特网上与其他用户通信或查找资源，先要找 到用户或资源所在的主机，然后才可以进行通信 或查询存储于该主机上的资源。 在因特网上使用IP地址或域名标识网上的主机或 者设备，使用URL来定位网上的资源。
国家级精品课程 —Web技术应用基础
● IP地址
Internet是网络的网络，连接了海量主机（或设 备），为了识别网上主机（或设备），人们为每 台主机（或设备），分配了一个在Internet唯一 的32位的二进制数，即主机的IP地址。
国家级精品课程 —《Web技术应用基础》
第1章 Web技术概述
本章主要内容
Web应用的基础知识和基本概念，主要包括计算 机网络、Internet、 Web基本概念， Web开发技 术和Web方式访问数据库技术等。 学习目标：
– 掌握Web开发的基本知识、主要技术和工作原理 – 理解Web开发常用架构，会画B/S三层结构图 – 熟练应用IP地址、域名和URL网上查找资源 – 理解JSP访问数据库技术
● IP地址的表示方法
IPv4地址采用“点分十进制”表示法。 按照TCP/IP协议规定，IP地址用二进制来表示，每个IP 地 例如：一个采用二进制形式的IP地址是“1110101000”， 为了方便记忆和使用，IP地址经常被写成十进制的形式， 中间使用符号“.”分开不同的字节。
计算机网络 ●
Web环境
通过通信线路和通信设备，将分布在不同地理位置、 具有独立功能的计算机系统连接起来，在网络协议 和网络管理软件的支持下，实现彼此之间数据通信 和资源共享的系统。
计算机网络为网络用户提供了两个主要功能：
连通和共享
连通功能共把享网功上能计使上算网用户可 机连接起以来使，用使网人上所们有公享资 可了以地交域换的源软、信遥件游，息远、戏例，。如硬等忘信件等、息记娱、乐文节档、目
在因特网上与其他用户通信或查找资源，先要找 到用户或资源所在的主机，然后才可以进行通信 或查询存储于该主机上的资源。 在因特网上使用IP地址或域名标识网上的主机或 者设备，使用URL来定位网上的资源。
国家级精品课程 —Web技术应用基础
● IP地址
Internet是网络的网络，连接了海量主机（或设 备），为了识别网上主机（或设备），人们为每 台主机（或设备），分配了一个在Internet唯一 的32位的二进制数，即主机的IP地址。
国家级精品课程 —《Web技术应用基础》
第1章 Web技术概述
本章主要内容
Web应用的基础知识和基本概念，主要包括计算 机网络、Internet、 Web基本概念， Web开发技 术和Web方式访问数据库技术等。 学习目标：
– 掌握Web开发的基本知识、主要技术和工作原理 – 理解Web开发常用架构，会画B/S三层结构图 – 熟练应用IP地址、域名和URL网上查找资源 – 理解JSP访问数据库技术
《WEB开发技术》PPT课件
虚拟主机之间完全独立，并可由用户自 行管理，可以大大地缓解互联网上IP及服 务器等资源的不足，同时降低用户的硬 件费用、网络维护费用和通讯服务费用。
选择虚拟主机的要素:技术需要,空间大小
a
21
• 得到FTP地址，把源代码上传到FTP. 所谓FTP:FTP（File Transfer Protocol）是文件传输协议的简称。
• TCP（Transmission Control Protocol，传输控制协议）
• IP（Internet Protocol，网际协议）
a
12
2.利用DNS查询到对 应的IP地址；
浏览器与Google服务器利用TCP协议 建立连接；
浏览器利用HTTP协议向Google发送 请求；
IIS的安装
a
18
如何在网络中发布网站
• 为了在自己的电脑上调试自己编的网页程序要配置环境 • IIS(Internet Information Service)信息服务.
在Windows组件中安装IIS. 在管理工具中可以运行IIS.通过IIS配置虚拟目录实现对源代码的预览修改等
a
19
• 为开发的网站申请域名 了解域名首先了解IP:像电话有电话号码一样,接入Internet的计算 机也有一个由授权机构分配的号码即IP地址
a
6
域名分为英文域名和中文域名
英文域名又分为国际域名和国内域名
如：GOOGLE公司的域名收购 GOOGLE公司的中文域名的抢注（谷
歌） “神州七号”域名的抢注
a
7
IP地址和域名具有等价性，通过DNS（Domain Name System ）域 名服务器对相应的域名进行解析成为对应的IP地址.
选择虚拟主机的要素:技术需要,空间大小
a
21
• 得到FTP地址，把源代码上传到FTP. 所谓FTP:FTP（File Transfer Protocol）是文件传输协议的简称。
• TCP（Transmission Control Protocol，传输控制协议）
• IP（Internet Protocol，网际协议）
a
12
2.利用DNS查询到对 应的IP地址；
浏览器与Google服务器利用TCP协议 建立连接；
浏览器利用HTTP协议向Google发送 请求；
IIS的安装
a
18
如何在网络中发布网站
• 为了在自己的电脑上调试自己编的网页程序要配置环境 • IIS(Internet Information Service)信息服务.
在Windows组件中安装IIS. 在管理工具中可以运行IIS.通过IIS配置虚拟目录实现对源代码的预览修改等
a
19
• 为开发的网站申请域名 了解域名首先了解IP:像电话有电话号码一样,接入Internet的计算 机也有一个由授权机构分配的号码即IP地址
a
6
域名分为英文域名和中文域名
英文域名又分为国际域名和国内域名
如：GOOGLE公司的域名收购 GOOGLE公司的中文域名的抢注（谷
歌） “神州七号”域名的抢注
a
7
IP地址和域名具有等价性，通过DNS（Domain Name System ）域 名服务器对相应的域名进行解析成为对应的IP地址.
《Web程序设计基础》第一讲精品PPT课件
作室 • 故宫博物院 • 百威啤酒
6
3、网站的基本元素
通过以上网页的介绍和赏析，你能说出 网页有哪些基本元素构成？
网页中基本元素通常包括，文本、图片、超 级链接（文本超链接，图片超链接），动画 （gif、fireworks、flash）、表单 （用于 互动的，搜索引擎，电子邮件，论坛等）， 音频，视频（media play、realplay）。
采用Div+CSS、JS、AJAX等技术 –测试网页兼容性：不同的浏览器效果 –发布站点 上传使用远程ftp工具 –申请免费或付费主机空间
万网
13
6、动静态网站的特点和区别
• 什么是静态网站？ –静态网站就是没有采用任何程序开发的网站， 纯粹采用HTML语言编写，不要求懂太多网站制 作知识，使用一般的软件就可以制作网页了。 网页文件名是用html或htm结尾的，网页设计好 并上传到服务器之后，就不能对网站的内容进 行修改了，除非把网站文件下载到自己电脑上， 再用专业的网站制作软件编辑好上传，所以大 家可以理解为，静态网站就是无法在直接在网 络上更新内容的网站，就纯粹的几个制作好的 页面而已。
第一讲 网站概论
《Web程序设计基础》课程组 2010-09
目录
• 认识网站 • 优秀网站赏析 • 网站的基本元素 • 网站的布局结构 • 行业静态网站制作流程 • 动静态网站的区别和特点 • B/S、C/S结构
2
1、认识网站
问：你平时上的网站有哪些？
3
1、认识网站
• 门户型 –新浪、网易、搜狐等
–虽然说Div+CSS解决了大部分浏览器兼容性问 题，但是也有部分浏览器中的使用出现异常， 目前，Div+CSS还没有所有浏览器的统一兼容。
6
3、网站的基本元素
通过以上网页的介绍和赏析，你能说出 网页有哪些基本元素构成？
网页中基本元素通常包括，文本、图片、超 级链接（文本超链接，图片超链接），动画 （gif、fireworks、flash）、表单 （用于 互动的，搜索引擎，电子邮件，论坛等）， 音频，视频（media play、realplay）。
采用Div+CSS、JS、AJAX等技术 –测试网页兼容性：不同的浏览器效果 –发布站点 上传使用远程ftp工具 –申请免费或付费主机空间
万网
13
6、动静态网站的特点和区别
• 什么是静态网站？ –静态网站就是没有采用任何程序开发的网站， 纯粹采用HTML语言编写，不要求懂太多网站制 作知识，使用一般的软件就可以制作网页了。 网页文件名是用html或htm结尾的，网页设计好 并上传到服务器之后，就不能对网站的内容进 行修改了，除非把网站文件下载到自己电脑上， 再用专业的网站制作软件编辑好上传，所以大 家可以理解为，静态网站就是无法在直接在网 络上更新内容的网站，就纯粹的几个制作好的 页面而已。
第一讲 网站概论
《Web程序设计基础》课程组 2010-09
目录
• 认识网站 • 优秀网站赏析 • 网站的基本元素 • 网站的布局结构 • 行业静态网站制作流程 • 动静态网站的区别和特点 • B/S、C/S结构
2
1、认识网站
问：你平时上的网站有哪些？
3
1、认识网站
• 门户型 –新浪、网易、搜狐等
–虽然说Div+CSS解决了大部分浏览器兼容性问 题，但是也有部分浏览器中的使用出现异常， 目前，Div+CSS还没有所有浏览器的统一兼容。
web开发培训精品PPT课件
Web开发技术培训
Hale Waihona Puke 总体介绍J2EEJ2EE
Java
Java是一种简单的，面向对象的，分布式 的，解释型的，健壮安全的，结构中立的，可 移植的，性能优异、多线程的动态语言。
Java平台由Java虚拟机（Java Virtual Machine）和Java 应用编程接口（Application Programming Interface、简称API）构成。Java 应用编程接口为Java应用提供了一个独立于操 作系统的标准接口，可分为基本部分和扩展部 分。在硬件或操作系统平台上安装一个Java平 台之后，Java应用程序就可运行。
Micro Edition(微缩版) J2ME 包含J2SE中一 部分类，用于消费类电子产品的软件开发。比 如：呼机、智能卡、手机、PDA、机顶盒。
J2EE
J2EE
J2EE至少划分为3层，分别为表现层、业务逻 辑层和持久层。
表现层（Presentation Layer）：实现显示功能， 一般使用B/S结构来完成，也可用专门远程客户端 来实现。框架技术：Struts等。
Java语言写的源程序通过Java编译器，编译成与平 台无关的‘字节码程序’(.class文件，也就是0，1二进 制程序)，然后在OS之上的Java解释器中解释执行。
JVM是java的核心和基础，在java编译器和os平台之
间的虚拟处理器。J它2是E一E 种利用软件方法实现的抽象的
计算机基于下层的操作系统和硬件平台，可以在上面执 行java的字节码程序。
JVM
JVM是Java Virtual Machine（Java虚拟机）的 缩写，在实际的计算机上通过软件模拟来实现。 JVM有自己想象中的硬件，如处理器、堆栈、寄
Hale Waihona Puke 总体介绍J2EEJ2EE
Java
Java是一种简单的，面向对象的，分布式 的，解释型的，健壮安全的，结构中立的，可 移植的，性能优异、多线程的动态语言。
Java平台由Java虚拟机（Java Virtual Machine）和Java 应用编程接口（Application Programming Interface、简称API）构成。Java 应用编程接口为Java应用提供了一个独立于操 作系统的标准接口，可分为基本部分和扩展部 分。在硬件或操作系统平台上安装一个Java平 台之后，Java应用程序就可运行。
Micro Edition(微缩版) J2ME 包含J2SE中一 部分类，用于消费类电子产品的软件开发。比 如：呼机、智能卡、手机、PDA、机顶盒。
J2EE
J2EE
J2EE至少划分为3层，分别为表现层、业务逻 辑层和持久层。
表现层（Presentation Layer）：实现显示功能， 一般使用B/S结构来完成，也可用专门远程客户端 来实现。框架技术：Struts等。
Java语言写的源程序通过Java编译器，编译成与平 台无关的‘字节码程序’(.class文件，也就是0，1二进 制程序)，然后在OS之上的Java解释器中解释执行。
JVM是java的核心和基础，在java编译器和os平台之
间的虚拟处理器。J它2是E一E 种利用软件方法实现的抽象的
计算机基于下层的操作系统和硬件平台，可以在上面执 行java的字节码程序。
JVM
JVM是Java Virtual Machine（Java虚拟机）的 缩写，在实际的计算机上通过软件模拟来实现。 JVM有自己想象中的硬件，如处理器、堆栈、寄
第1章 Web基础 网页制作PPT课件(PHP)
/n/20060728/93070.htm
1.3 基于数据库的动态Web工作模式
1.3.1 静态网页和动态网页 1.3.2 动态Web的工作模式
1.3.1 静态网页和动态网页
静态网页就是其内容由一些HTML代码 组成的的网页。这些HTML代码可以直 接通过文本编辑器输入，并保存为.htm 或.html文件。
统一资源定位器（Uniform Resource Locator， URL）是为Internet的信息资源位置而设的一 种编址方式，它指定Internet资源位于哪台计 算机的哪个文件夹以及文件名。
URL的格式如下： 传输协议://主机IP地址或域名[:端口]/文件夹 路径/文件名 例如URL：
解决上述限制问题的一种方法就是把数据翻译成兼 容各种应用程序的标准格式，即用XML（Extensible Markup Language，可扩展标记语言）描述数据。
1.4 基于XML的Web工作模式
图1.9 基于XML的Web体系结构
Байду номын сангаас
动态网页就是网页中加入程序或脚本， 采 用 ASP 、 PHP 、 CGI 、 、 JSP 等技术动态生成的页面。
1.3.1 静态网页和动态网页
图1.4 静态网页示例
1.3.1 静态网页和动态网页
图1.6 动态网页示例
1.3.2 动态Web的工作模式
1．客户端动态Web的工作模式
1.2.5 IP地址
IP地址由4个字节组成，共32个二进制位。由4个用“．”分 隔的十进制数组成，每个数不大于255，如210.36.139.6
IP协议规定了A~E五类IP地址
1.2.6 域名服务器DNS
域名服务系统（DNS）是一个自动地将 域名转换为与之对应的IP地址的软件。
1.3 基于数据库的动态Web工作模式
1.3.1 静态网页和动态网页 1.3.2 动态Web的工作模式
1.3.1 静态网页和动态网页
静态网页就是其内容由一些HTML代码 组成的的网页。这些HTML代码可以直 接通过文本编辑器输入，并保存为.htm 或.html文件。
统一资源定位器（Uniform Resource Locator， URL）是为Internet的信息资源位置而设的一 种编址方式，它指定Internet资源位于哪台计 算机的哪个文件夹以及文件名。
URL的格式如下： 传输协议://主机IP地址或域名[:端口]/文件夹 路径/文件名 例如URL：
解决上述限制问题的一种方法就是把数据翻译成兼 容各种应用程序的标准格式，即用XML（Extensible Markup Language，可扩展标记语言）描述数据。
1.4 基于XML的Web工作模式
图1.9 基于XML的Web体系结构
Байду номын сангаас
动态网页就是网页中加入程序或脚本， 采 用 ASP 、 PHP 、 CGI 、 、 JSP 等技术动态生成的页面。
1.3.1 静态网页和动态网页
图1.4 静态网页示例
1.3.1 静态网页和动态网页
图1.6 动态网页示例
1.3.2 动态Web的工作模式
1．客户端动态Web的工作模式
1.2.5 IP地址
IP地址由4个字节组成，共32个二进制位。由4个用“．”分 隔的十进制数组成，每个数不大于255，如210.36.139.6
IP协议规定了A~E五类IP地址
1.2.6 域名服务器DNS
域名服务系统（DNS）是一个自动地将 域名转换为与之对应的IP地址的软件。
Web开发技术PPT课件
计算机网络的诞生
20世纪60年代，出现了各式各样的计算机网络
Internet的提出、研究和试验阶段（1969~1984）
1969年，美国国防部高级研究计划署ARPA资助了一个有关广域网络的项目。 1969年11月21日中午，美国加利福尼亚大学洛杉矶分校的计算机实验室，一台计算机与 远在千里之外的斯坦福研究所的另一台计算机联通，宣告了网络世界的到来。
首页中往往列出了网站的信息目录，或指向其他站点的超链 接。
北京：高等教育出版社 2008
17
常见概念和术语（Cont3.）
通用资源定位器URL（Uniform Resource Locator）
通用资源定位器可以惟一标识一个Web页或Internet上其他资源的一个 地址，它将Internet提供的各类服务统一编址，以便用户通过Web客户 浏览程序进行信息查询。
Web开发技术
课程目录
第1章 Web基础 第2章 Web服务器的架设和管理 第3章 HTML和XML标记语言 第4章 网页设计 第5章 客户端开发 第6章 Java技术 第7章 数据库技术 第8章 服务端开发
北京：高等教育出版社 2008
1
第1章 Web基础
Internet与WWW Web概述
18
常见概念和术语（Cont4.）
端口（Port）
端口是服务器使用的一个通道，可以使具有相同IP地址的服务器同时提 供多种服务。
运行在服务器上的各个服务程序将根据收到的数据段中的端口号来判断 是否为自己的数据。
例如，在一台计算机上同时提供WWW服务和FTP服务，WWW服务使 用端口80，FTP服务使用端口21等。在通用资源定位器URL中，默认端 口号可以省略不写。
因为在客户端只需要安装浏览器，基本上取消了客户端侧的维护工作，有效的减 少了整个系统的运行和维护成本。
1-Web技术基础PPT课件
• Apache
• 38.22 %
• IIS (by Microsoft)
• 32.80%
• nginx (by Igor Sysoev)
• 15.00%
• GWS (by Google)
• 2.30%
16
客户端-服务器架构
经典客户端-服务器模型
17
客户端-服务器C/S架构
• SQL Server – SQL Server Management Studio • BT追踪器 – BT客户端(μTorrent) • DNS服务器(bind) – DNS客户端(resolver) • DHCP服务器(无线路由固件) – DHCP客户端(手机 /
安卓DHCP客户端/)
21
• SMB服务器(Windows) – SMB客户端(Windows)
• 在真实世界中，"服务"是： • 服务提供者完成的一系列工作 • 通过输入参数，提供给用户（消费者）一些期望的 结果 • 需求和结果已知 • 易于使用 • 总是可用的 • 有量的特性（价格，执行时间，常量，等）
33
面向服务的应用
• 面向服务的应用类似真实世界中的服务-消费者模型 • 由服务提供者（服务器端）和服务消费者（客户端） 组成 • 典型示例为RIA富客户端应用 • 服务提供者提供一些服务 • 服务消费者访问服务 • 标准协议用XML, JSON, SOAP, WSDL, RSS, HTTP, …
5
Web Application网络应用
• 网站的下一个级别 • 高交互 • 高可访问性（Cloud云端） • AJAX, Silverlight, Flash, Flex, 等 • 应用通常分解为逻辑块称为"层"，每一层都扮演一种
第1章Web开发相关技术精品PPT课件
任务4--C/S结构与B/S结构
C/S结构
C/S结构全称为Client/Server，即客户/服务器模式。C/S结构的系统分 为两个部分：客户机和服务器。应用程序也分为服务端程序和客户端 程序语言的风格类似于C语言，现在被很多的网站编程人员广泛的运用。
2020/10/29 A S P . N E T 2 . 0 程 序 设 计 案 例 教 程
2020/10/29 A S P . N E T 2 . 0 程 序 设 计 案 例 教 程
任务3--ASP/PHP /JSP与简介
JSP与
1．JSP JSP 即Java Server Pages，它是由Sun Microsystem公司于1999
年6月推出的新技术，JSP技术有点类似ASP技术，它是在传统的网页 HTML文件（*.htm,*.html）中插入Java程序段（JavaScript），从而形 成JSP文件(*.jsp) 2．
2020/10/29 A S P . N E T 2 . 0 程 序 设 计 案 例 教 程
任务4--C/S结构与B/S结构
C/S结构与B/S结构的比较
（１）支撑环境 C/S一般建立在专用的网络上, 小范围里的网络环境, 局域网之间再通 过专门服务器提供连接和数据交换服务；B/S 建立在广域网之上的, 不 必是专门的网络硬件环境，例与电话上网, 租用设备。信息自己管理， 有比C/S更强的适应范围, 一般只要有操作系统和浏览器就行。 （２）安全控制 C/S一般面向相对固定的用户群, 对信息安全的控制能力很强。一般高 度机密的信息系统采用C/S 结构适宜；B/S 建立在广域网之上, 对安全 的控制能力相对弱, 面向是不可知的用户群，可以通过B/S发布部分可 公开信息。 （３）程序架构 C/S 程序可以更加注重流程, 可以对权限多层次校验, 对系统运行速度 可以较少考虑；B/S 对安全以及访问速度的多重的考虑, 建立在需要更 加优化的基础之上，比C/S有更高的要求，B/S结构的程序架构是发展 的趋势。 Microsoft公司的.Net系列和SUN 和IBM推出的JavaBean 构 件技术将使 B/S更加成熟。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
– 《学习Web设计》（第3版） Jennifer Niederst Robbins著 靳志伟 等译 机械工业出版社
• 作者介绍：Jennifer Niederst Robbins有14年的网站设 计经验，是一位设计师，也是一位教师。她于1993年设 计了第一个商业网站：O'Reilly全球网络导航（GNN）。 她是 O'Reilly畅销书“Web Design in a Nutshell”的作 者，并且曾在波士顿的马萨诸塞艺术学院和罗德岛的约 翰森威尔士大学任教。
• 可用性：网页浏览者能否很容易的实现自己的目 标，以及使用这个网站的体验。
• 界面设计的功能即可用性
•பைடு நூலகம்网站的界面包括
– 在这个网站上操作的方法：按钮、链接、导航装置等； – 这个页面的功能组织情况
文件制作
• 编写HTML和样式表 • 制作文件要求
– 必须掌握HTML和样式表 – 掌握图像制作技术 – 最好了解脚本和编程技术
• CSS用来描述内容如何在页面上显示 • CSS是现今格式化文本和页面布局的官方和标准
机制 • CSS是自动制作的有效工具 • 如果专业从事网页设计，必须要掌握CSS
Javascript脚本
• Javascript是一种脚本语言，在网页中，它可以 用来添加添加互动和行为
• Javascript常用于操纵网页元素或者某些浏览器 窗口功能
• XML（eXtensible Markup Language），扩展 标记语言
• XML不是一种语言，而是创造其他标记语言的一 套强有力的规则
JAVA
• 一种复杂的编程语言 • 主要用于开发大型的、企业级的应用程序 • 也可以用java创建小型的网页应用程序（即
applet）
Ajax
• Ajax，Asynchronous Javascript and XML(异步 Javascript和XML)
HTML/XHTML
• HTML(HyperText Markup Language，超文本标 记语言)是用来创建网页文件的语言。
• HTML并不是一种编程语言，而是一种标记语言， 用来识别和描述一个文件中各个组件的系统。
• 学习网页制作必须要掌握HTML • 学习HTML的最好方法是动手编写
CSS
第一章 网站设计相关学科、技术和工具
1.1 网页设计涉及的学科 1.2 网页设计的相关技术 1.3 网页设计工具
1.1 网页设计涉及的学科
• 网页设计综合了多种学科
– 平面设计 – 信息设计 – 界面设计 – 文件制作 – 脚本和编程 – 多媒体等
平面设计
• 网络是视觉媒体，网页的展现和设计很重要 • 平面设计包括页面中的图像、标志、颜色、布局
Web开发基础
授课教师：董晓慧 email：
课程相关说明
• 教学要求
– 掌握(X)HTML语言 – 掌握CSS（层叠样式表） – 掌握JavaScript – 掌握Web服务器的配置 – 掌握网站的开发流程和发布
• 学习方法
– 熟练掌握基础知识 – 亲自动手编写文件 – 上机实践
• 教材与参考信息
• 动态网页
– 在服务器端运行的程序、网页、组件，属于动态网页； – 会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、
、CGI等。 – 以数据库技术为基础；可以实现更多的功能；实际上并不是独立存在于服
务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页；
XML
• Ajax是用来创建互动网站程序的技术 • 最大优势：可以让屏幕上的内容瞬间改变，而无
等等 • 平面设计师要精通Adobe Photoshop • 若想成为平面设计师，而有没有视觉设计的经验，
应该学习一下平面设计的基础知识
信息设计
• 包括内容的组织和如何获取这些内容 • 信息设计师处理的是信息图表 • 信息设计是站点创建的关键环节
界面设计
• 平面设计
网页外观
界面设计
网页是如何工作的
静态网页和动态网页
• 静态网页
– 静态网页是标准的HTML文件，其文件扩展名是.htm或.html； – 它可以包含HTML标记、文本、Jave小程序、 Flash、客户端脚本
（JavaScript、、VBScript）以及客户端ActiveX控件，但这种网页不包含 任何服务器端脚本， – 静态网页一经生成，内容就不会再变化，不管何时何人访问，显示的都是 一样的内容，如果要修改相关内容，就必须修改源代码，然后上传到服务 器。
• Javascript是标准和应用最普遍的脚本语言
服务器端编程
• 静态页面和动态页面 • 动态页面涉及到服务器端编程 • 可创建网站程序的脚本和编程语言
– CGI脚本（用C++、Perl、Python或其他语言来编写） – Java Server Pages（JSP） – – – Ruby on Rails
– 相关任务：平面设计、界面设计、信息化设计、网站 制作
• 后台
– 运行在幕后服务器上的程序和脚本； – 使页面成为动态页面，并能够互动； – 相关任务：信息设计、表单处理、数据库编程、内容
管理系统、服务器端的网页程序。
1.2 网页设计的相关技术
• HTML/XHTML • CSS（层叠样式表） • javascript脚本 • 服务器端编程 • XML • Java
– 参考网站： – 课件下载：
• 成绩考核
– 期末考试+平时成绩 – 平时成绩=考勤+作业+上机实验
• 上机实验要求
– 按实验要求认真完成实验任务，按时交实验报告 – 不要做与学习无关的事情，如：聊天、玩游戏、看视
频、听音乐、打手机、发信息等等。
本讲内容
• 第一章 网站设计相关学科、技术和工具 • 第二章 网站的工作原理 • 第三章 网页设计的本质
脚本和编程
• 高级网页功能（如表单、动态内容和互动）需要 编写网页脚本或在后台运行的特殊程序。
• 程序员的工作 • 需要有高超的电脑编程技术
多媒体
• 在网站上添加多媒体元素，可以使网站更生动、 更酷!
• 多媒体包括声音、影像、动画片和互动的flash 电影等。
前台和后台
• 前台
– 网页设计中与浏览器直接相关，或在浏览器中直接显 示的部分。
• 作者介绍：Jennifer Niederst Robbins有14年的网站设 计经验，是一位设计师，也是一位教师。她于1993年设 计了第一个商业网站：O'Reilly全球网络导航（GNN）。 她是 O'Reilly畅销书“Web Design in a Nutshell”的作 者，并且曾在波士顿的马萨诸塞艺术学院和罗德岛的约 翰森威尔士大学任教。
• 可用性：网页浏览者能否很容易的实现自己的目 标，以及使用这个网站的体验。
• 界面设计的功能即可用性
•பைடு நூலகம்网站的界面包括
– 在这个网站上操作的方法：按钮、链接、导航装置等； – 这个页面的功能组织情况
文件制作
• 编写HTML和样式表 • 制作文件要求
– 必须掌握HTML和样式表 – 掌握图像制作技术 – 最好了解脚本和编程技术
• CSS用来描述内容如何在页面上显示 • CSS是现今格式化文本和页面布局的官方和标准
机制 • CSS是自动制作的有效工具 • 如果专业从事网页设计，必须要掌握CSS
Javascript脚本
• Javascript是一种脚本语言，在网页中，它可以 用来添加添加互动和行为
• Javascript常用于操纵网页元素或者某些浏览器 窗口功能
• XML（eXtensible Markup Language），扩展 标记语言
• XML不是一种语言，而是创造其他标记语言的一 套强有力的规则
JAVA
• 一种复杂的编程语言 • 主要用于开发大型的、企业级的应用程序 • 也可以用java创建小型的网页应用程序（即
applet）
Ajax
• Ajax，Asynchronous Javascript and XML(异步 Javascript和XML)
HTML/XHTML
• HTML(HyperText Markup Language，超文本标 记语言)是用来创建网页文件的语言。
• HTML并不是一种编程语言，而是一种标记语言， 用来识别和描述一个文件中各个组件的系统。
• 学习网页制作必须要掌握HTML • 学习HTML的最好方法是动手编写
CSS
第一章 网站设计相关学科、技术和工具
1.1 网页设计涉及的学科 1.2 网页设计的相关技术 1.3 网页设计工具
1.1 网页设计涉及的学科
• 网页设计综合了多种学科
– 平面设计 – 信息设计 – 界面设计 – 文件制作 – 脚本和编程 – 多媒体等
平面设计
• 网络是视觉媒体，网页的展现和设计很重要 • 平面设计包括页面中的图像、标志、颜色、布局
Web开发基础
授课教师：董晓慧 email：
课程相关说明
• 教学要求
– 掌握(X)HTML语言 – 掌握CSS（层叠样式表） – 掌握JavaScript – 掌握Web服务器的配置 – 掌握网站的开发流程和发布
• 学习方法
– 熟练掌握基础知识 – 亲自动手编写文件 – 上机实践
• 教材与参考信息
• 动态网页
– 在服务器端运行的程序、网页、组件，属于动态网页； – 会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、
、CGI等。 – 以数据库技术为基础；可以实现更多的功能；实际上并不是独立存在于服
务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页；
XML
• Ajax是用来创建互动网站程序的技术 • 最大优势：可以让屏幕上的内容瞬间改变，而无
等等 • 平面设计师要精通Adobe Photoshop • 若想成为平面设计师，而有没有视觉设计的经验，
应该学习一下平面设计的基础知识
信息设计
• 包括内容的组织和如何获取这些内容 • 信息设计师处理的是信息图表 • 信息设计是站点创建的关键环节
界面设计
• 平面设计
网页外观
界面设计
网页是如何工作的
静态网页和动态网页
• 静态网页
– 静态网页是标准的HTML文件，其文件扩展名是.htm或.html； – 它可以包含HTML标记、文本、Jave小程序、 Flash、客户端脚本
（JavaScript、、VBScript）以及客户端ActiveX控件，但这种网页不包含 任何服务器端脚本， – 静态网页一经生成，内容就不会再变化，不管何时何人访问，显示的都是 一样的内容，如果要修改相关内容，就必须修改源代码，然后上传到服务 器。
• Javascript是标准和应用最普遍的脚本语言
服务器端编程
• 静态页面和动态页面 • 动态页面涉及到服务器端编程 • 可创建网站程序的脚本和编程语言
– CGI脚本（用C++、Perl、Python或其他语言来编写） – Java Server Pages（JSP） – – – Ruby on Rails
– 相关任务：平面设计、界面设计、信息化设计、网站 制作
• 后台
– 运行在幕后服务器上的程序和脚本； – 使页面成为动态页面，并能够互动； – 相关任务：信息设计、表单处理、数据库编程、内容
管理系统、服务器端的网页程序。
1.2 网页设计的相关技术
• HTML/XHTML • CSS（层叠样式表） • javascript脚本 • 服务器端编程 • XML • Java
– 参考网站： – 课件下载：
• 成绩考核
– 期末考试+平时成绩 – 平时成绩=考勤+作业+上机实验
• 上机实验要求
– 按实验要求认真完成实验任务，按时交实验报告 – 不要做与学习无关的事情，如：聊天、玩游戏、看视
频、听音乐、打手机、发信息等等。
本讲内容
• 第一章 网站设计相关学科、技术和工具 • 第二章 网站的工作原理 • 第三章 网页设计的本质
脚本和编程
• 高级网页功能（如表单、动态内容和互动）需要 编写网页脚本或在后台运行的特殊程序。
• 程序员的工作 • 需要有高超的电脑编程技术
多媒体
• 在网站上添加多媒体元素，可以使网站更生动、 更酷!
• 多媒体包括声音、影像、动画片和互动的flash 电影等。
前台和后台
• 前台
– 网页设计中与浏览器直接相关，或在浏览器中直接显 示的部分。