网页制作简介
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
左边的三张焦点图会自动切换，当鼠 标移上右边的文本时，左边会出现相 应的图片，鼠标移开后又会按照默认 的设置自动轮播。
【任务1-1】知识点讲解
3、web标准
结构、表现、行为之间的关系
【任务1-2】网页制作入门
知识引入
需求分析
HTML、CSS和JavaScript是网页制作 的基本应用技术，也是本书学习的重点，要 想学好这些技术，首先需要对它们有一个整 体的认识。下面，将针对HTML、CSS和 JavaScript语言的发展历史、流行版本、开 发工具、运行平台等内容进行详细讲解。
【任务1-1】了解Web基本概念
3、web标准
Web标准的好处
1、提高页面浏览速度。使用CSS方法，比传统的web设计方法至少 节约50%以上的文件尺寸。
2、缩短改版时间，将表现（样式/外观）与内容（信息/数据）相分 离。只要简单的修改几个CSS文件就可以重新设计一个有成千上 万页面的站点。
3、降低网站流量的费用。带宽要求降低（代码更简洁），成本降低。
浏览新闻
查询信息
说到网页，其
实大家并不陌生
网上购物
网页究竟是什么？
【任务1-1】知识点讲解
1、认识网页
以河南农业大学官网为例认识网页：
超链接 图片
文字
【任务1-1】了解Web基本概念
1、认识网页
网页主要由文字、图像和超链接等
元素构成。当然，除了这些元素，网页中
还可以包含音频、视频以及Flash等。
第一章 网页那点事
HTML · 认识网页
· HTML、CSS和JS语言简介
wenku.baidu.com
· 了解Web标准 · Dreamweaver工具的使用
目录
【任务1-1】 了解Web基本概念 【任务1-2】 网页制作入门
【任务1-3】 Dreamweaver工具的使用
【任务1-1】了解Web基本概念
知识引入
需求分析
3、web标准
XHTML语言描述的网页结构效果
三个图片和对应的三段描 述文本从上到下依次罗 列，不带任何修饰样式。
【任务1-1】知识点讲解
3、web标准
加入CSS后的网页效果
使用CSS对文字和图片以 及模块的背景和布局都做 了相应的设置。
【任务1-1】知识点讲解
3、web标准
加入Javascript后的网页效果
【任务1-1】了解Web基本概念
2、网页名词解释
与互联网相关的一些专业术语
名词 Internet网络 WWW URL DNS HTTP Web W3C组织
名词释义
就是通常所说的互联网，是由一些使用公用语言互相通信的计算机 连接而成的网络。
WWW（英文World Wide Web的缩写）中文译为“万维网”是 Intertnet提供的一种网页浏览服务。
Web中文译为“网页”，说到网页，其 实大家并不陌生，上网时浏览新闻、查询信 息、翻看图片等都是在浏览网页。但是，对 于初学者来说，学习网页制作首先需要了解 与网页相关的基本概念。下面，本节将针对 与Web相关的概念进行详细讲解。
【任务1-1】知识储备
知识引入
认识网页 网页相关名词 Web标准
【任务1-1】了解Web基本概念 1、认识网页
【任务1-1】知识点讲解
3、web标准
结构标准：结构用于对网页元素进行整理和分 类，主要包括XML和XHTML两个部分。
表现标准：表现用于设置网页元素的版式、颜 色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的 编写，主要包括DOM和ECMAScript两个部分。
【任务1-1】知识点讲解
【任务1-2】知识点讲解
【任务1-2】知识储备
知识引入
HTML简介 CSS简介 JavaScript简介 常见浏览器介绍
【任务1-2】知识点讲解
1、HTML简介
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本 标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容 进行描述。 HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片 标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。 HTML之所以称为超文本标记语言，不仅是因为它通过标记描述网页 内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将 网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面。
4、更容易被搜寻引擎搜索到。提高网站在百度或google中的排名。
5、内容能被更广泛的设备所访问。包括屏幕阅读机、手持设备、搜 索机器人、打印机、电冰箱等等。
【任务1-1】了解Web基本概念
3、web标准
Web标准并不是某一个标准，而是一系列标准的
集合，主要包括
结构（Structure）、表现（Presentation） 和行为（Behavior）三个方面。
【任务1-1】了解Web基本概念
1、认识网页
网页是如何形成的呢？
浏览器渲染
特殊的符号和文本
图文并茂的页面
【任务1-1】了解Web基本概念
1、认识网页
除了首页之外，一个网站通常还包含多个子页面。网页与网页之间 通过超链接互相访问。 网站由网页构成，网页有静态和动态之分。 静态网页是指用户无论何时何地访问，网页都会显示固定的信息， 除非网页源代码被重新修改上传。 动态网页显示的内容则会随着用户操作和时间的不同而变化。 大部分网站都由静态网页和动态网页混合组成，两者各有千秋，用 户在开发网站时可根据需求酌情采用。
URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定 位符” URL其实就是Web地址，俗称“网址”。
DNS （英文Domain Name System的缩写）是域名解析系统。
HTTP (英文Hypertext transfer protocol的缩写) 中文译为超文本传输协 议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
Web通常指互联网的使用环境。但对于网站制作者来说，它是一系 列技术的复合总称，通常称之为网页。
W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联 盟”。万维网联盟是国际最著名的标准化组织。
【任务1-1】了解Web基本概念 3、web标准
为什么需要Web标准？
【任务1-1】知识点讲解
3、web标准
结构、表现、行为之间的关系
【任务1-2】网页制作入门
知识引入
需求分析
HTML、CSS和JavaScript是网页制作 的基本应用技术，也是本书学习的重点，要 想学好这些技术，首先需要对它们有一个整 体的认识。下面，将针对HTML、CSS和 JavaScript语言的发展历史、流行版本、开 发工具、运行平台等内容进行详细讲解。
【任务1-1】了解Web基本概念
3、web标准
Web标准的好处
1、提高页面浏览速度。使用CSS方法，比传统的web设计方法至少 节约50%以上的文件尺寸。
2、缩短改版时间，将表现（样式/外观）与内容（信息/数据）相分 离。只要简单的修改几个CSS文件就可以重新设计一个有成千上 万页面的站点。
3、降低网站流量的费用。带宽要求降低（代码更简洁），成本降低。
浏览新闻
查询信息
说到网页，其
实大家并不陌生
网上购物
网页究竟是什么？
【任务1-1】知识点讲解
1、认识网页
以河南农业大学官网为例认识网页：
超链接 图片
文字
【任务1-1】了解Web基本概念
1、认识网页
网页主要由文字、图像和超链接等
元素构成。当然，除了这些元素，网页中
还可以包含音频、视频以及Flash等。
第一章 网页那点事
HTML · 认识网页
· HTML、CSS和JS语言简介
wenku.baidu.com
· 了解Web标准 · Dreamweaver工具的使用
目录
【任务1-1】 了解Web基本概念 【任务1-2】 网页制作入门
【任务1-3】 Dreamweaver工具的使用
【任务1-1】了解Web基本概念
知识引入
需求分析
3、web标准
XHTML语言描述的网页结构效果
三个图片和对应的三段描 述文本从上到下依次罗 列，不带任何修饰样式。
【任务1-1】知识点讲解
3、web标准
加入CSS后的网页效果
使用CSS对文字和图片以 及模块的背景和布局都做 了相应的设置。
【任务1-1】知识点讲解
3、web标准
加入Javascript后的网页效果
【任务1-1】了解Web基本概念
2、网页名词解释
与互联网相关的一些专业术语
名词 Internet网络 WWW URL DNS HTTP Web W3C组织
名词释义
就是通常所说的互联网，是由一些使用公用语言互相通信的计算机 连接而成的网络。
WWW（英文World Wide Web的缩写）中文译为“万维网”是 Intertnet提供的一种网页浏览服务。
Web中文译为“网页”，说到网页，其 实大家并不陌生，上网时浏览新闻、查询信 息、翻看图片等都是在浏览网页。但是，对 于初学者来说，学习网页制作首先需要了解 与网页相关的基本概念。下面，本节将针对 与Web相关的概念进行详细讲解。
【任务1-1】知识储备
知识引入
认识网页 网页相关名词 Web标准
【任务1-1】了解Web基本概念 1、认识网页
【任务1-1】知识点讲解
3、web标准
结构标准：结构用于对网页元素进行整理和分 类，主要包括XML和XHTML两个部分。
表现标准：表现用于设置网页元素的版式、颜 色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的 编写，主要包括DOM和ECMAScript两个部分。
【任务1-1】知识点讲解
【任务1-2】知识点讲解
【任务1-2】知识储备
知识引入
HTML简介 CSS简介 JavaScript简介 常见浏览器介绍
【任务1-2】知识点讲解
1、HTML简介
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本 标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容 进行描述。 HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片 标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。 HTML之所以称为超文本标记语言，不仅是因为它通过标记描述网页 内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将 网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面。
4、更容易被搜寻引擎搜索到。提高网站在百度或google中的排名。
5、内容能被更广泛的设备所访问。包括屏幕阅读机、手持设备、搜 索机器人、打印机、电冰箱等等。
【任务1-1】了解Web基本概念
3、web标准
Web标准并不是某一个标准，而是一系列标准的
集合，主要包括
结构（Structure）、表现（Presentation） 和行为（Behavior）三个方面。
【任务1-1】了解Web基本概念
1、认识网页
网页是如何形成的呢？
浏览器渲染
特殊的符号和文本
图文并茂的页面
【任务1-1】了解Web基本概念
1、认识网页
除了首页之外，一个网站通常还包含多个子页面。网页与网页之间 通过超链接互相访问。 网站由网页构成，网页有静态和动态之分。 静态网页是指用户无论何时何地访问，网页都会显示固定的信息， 除非网页源代码被重新修改上传。 动态网页显示的内容则会随着用户操作和时间的不同而变化。 大部分网站都由静态网页和动态网页混合组成，两者各有千秋，用 户在开发网站时可根据需求酌情采用。
URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定 位符” URL其实就是Web地址，俗称“网址”。
DNS （英文Domain Name System的缩写）是域名解析系统。
HTTP (英文Hypertext transfer protocol的缩写) 中文译为超文本传输协 议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
Web通常指互联网的使用环境。但对于网站制作者来说，它是一系 列技术的复合总称，通常称之为网页。
W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联 盟”。万维网联盟是国际最著名的标准化组织。
【任务1-1】了解Web基本概念 3、web标准
为什么需要Web标准？