网页设计与制作项目教程单元1 网页赏析、创建站点与浏览网页
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
工业和信息化“十三五”高职高专人才培养规划教材
汤智华 主编 王爱红 主审
源自文库
【教学导航】
教学目标
本单元重点 本单元难点 教学方法
（1）学会创建本地站点和管理本地站点 （2）熟悉Dreamweaver的工作界面 （3）熟悉浏览器窗口的基本组成和网页的基本组成元素 （4）了解网站与网页的相关概念、认识网页的基本布局结构 （5）了解一些制作网页、处理图像、制作动画的工具
1.1.2 网页相关的名词
一、Internet网络 所谓Internet网络就是我们通常所说的互联网，是由一些使用公用 语言互相通信的计算机连接而成的网络。
二、WWW
WWW（英文World Wide Web的缩写）中文译为“万维网”。但WWW 不是网络，也不代表Internet，它只是Internet提供的一种服务——即网页浏 览服务，我们上网时通过浏览器阅读网页信息就是在使用WWW服务。
三、网站与网页
一个网站通常包含多个子页面，例如京东商城官方网站包含了众 多的子页面。
网站其实就是多个网页的集合，网页与网页之间通过超链接互相 访问。输入网址，第一个打开的页面就是该网站的首页。
网站由网页构成，网页有静态网页和动态网页之分。现在互联网 上的大部分网站都是由静态网页和动态网页混合组成的，两者各有千 秋，用户在开发网站时可根据需求酌情采用。
七、W3C组织
W3C（英文World Wide Web Consortium的缩写）中文译为“万维网 联盟”。
万维网联盟是国际最著名的标准化组织。W3C最重要的工作是发展 Web规范，如：超文本标记语言（HTML）、可扩展标记语言（XML） 等。这些规范有效地促进了Web技术的兼容，对互联网的发展和应用起 到了基础性和根本性的支撑作用。
五、HTTP
HTTP（英文Hypertext transfer protocol的缩写）中文译为超文本传输 协议。它是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
六、Web
Web本意是蜘蛛网和网的意思。对于网站设计、制作者来说，它是 一系列技术的复合总称（包括网站的前台布局、后台程序、美工、数据 库开发等），我们称它为网页。
2．表现
表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是 CSS。
3．行为
行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript 两个部分。
其中，DOM（英文Document Object Model的缩写）是文档对象模型； ECMAScript是ECMA（英文European Computer Manufacturers Association的缩 写）以JavaScript为基础制定的标准脚本语言。
三、URL URL（英文Uniform Resource Locator的缩写）中文译为“统一资 源定位符”。
URL其实就是Web地址，俗称“网址”。
四、DNS
DNS（英文Domain Name System的缩写）是域名解析系统。
在Internet上域名与IP地址之间是一一对应的，域名（例如人民邮 电出版社的域名为www.ptpress.com.cn）虽然便于人们记忆，但计算机 只认识IP地址，将好记的域名转换成IP的过程被称为域名解析。
在弹出的窗口中便会显示当前网页的源代码，具体效果截图如图 1-3所示。
图1-2 单击鼠标右键弹出的菜单栏
图1-3 京东商城官方网站首页源代码
图1-3即为京东商城官方网站首页的源文件，它是一个纯文本文件， 仅包含一些特殊的符号和文本。
而我们浏览网页时看到的图片、视频等，其实是这些特殊的符号 和文本组成的代码被浏览器渲染之后的结果。
1.1.3 Web标准
一、什么是Web标准 Web标准并不是某一个标准，而是一系列标准的集合，主要包括结 构（Structure）、表现（Presentation）和行为（Behavior）3个方面。 1．结构 结构用于对网页元素进行整理和分类，主要包括XML和XHTML两 个部分。 XHTML是基于XML的标识语言，是在HTML4.0的基础上，用XML 的规则对其进行扩展建立起来的，它实现了HTML向XML的过渡。
从图1-1中可以看到，网页主要由文字、图像和超链接等元素构成。 当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
图1-1 京东商城官方网站首页截图
二、网页是如何形成的
为了让初学者快速了解网页是如何形成的，接下来查看一下网页 的源代码。
在京东商城官方网站首页中，单击鼠标右键，在弹出的菜单栏中 选择【查看页面源代码】选项，如图1-2所示。
静态网页使用语言：HTML。在网站设计中，一般的静态网页文 件是以.htm、.html、.shtml、.xml等为后缀的。但是，并不是说静态网 页就没有动态的效果，有的静态网页也会有动态效果，如.GIF格式的 动画、Flash、滚动字母等。
运行于客户端的程序、网页、插件、组件，属于静态网页，例如， html页、Flash、JavaScript、VBScript等，它们是永远不变的。
动态网页显示的内容则会随着用户操作和时间的不同而变化。动态 网页使用语言为HTML+ASP 或HTML+PHP或HTML+JSP等。
在服务器端运行的程序、网页、组件，属于动态网页，它们会随不 同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、 CGI等。
区别静态网页与动态网页最重要的一点——程序是否在服务器端运 行，这是最重要的标志。
静态网页是指用户无论何时何地访问，网页都会显示固定的信息， 除非网页源代码被重新修改上传。
所谓静态网页就是指没有后台数据库、不含程序和不可交互的网 页。你编的是什么，它显示的就是什么，不会有任何改变。
静态网页更新起来相对比较麻烦，适用于一般更新较少的展示型 网站。反之，不符合静态网页概念的就属于动态网页。
（1）创建本地站点 （2）网页的基本组成元素和网页的布局结构
（1）网页的布局结构 （2）网页的基本概念
任务驱动法、分组讨论法
1.1 认识网页、网页相关的名词、Web标准
1.1.1 认识网页
一、什么是网页 为了使初学者更好地认识网页，我们首先来看一下京东商城官方 网站。 打开火狐浏览器，在地址栏输入京东商城官方网站的网址，按下 回车键，这时火狐浏览器中显示的页面即为京东商城官方网站首页， 如图1-1所示。
汤智华 主编 王爱红 主审
源自文库
【教学导航】
教学目标
本单元重点 本单元难点 教学方法
（1）学会创建本地站点和管理本地站点 （2）熟悉Dreamweaver的工作界面 （3）熟悉浏览器窗口的基本组成和网页的基本组成元素 （4）了解网站与网页的相关概念、认识网页的基本布局结构 （5）了解一些制作网页、处理图像、制作动画的工具
1.1.2 网页相关的名词
一、Internet网络 所谓Internet网络就是我们通常所说的互联网，是由一些使用公用 语言互相通信的计算机连接而成的网络。
二、WWW
WWW（英文World Wide Web的缩写）中文译为“万维网”。但WWW 不是网络，也不代表Internet，它只是Internet提供的一种服务——即网页浏 览服务，我们上网时通过浏览器阅读网页信息就是在使用WWW服务。
三、网站与网页
一个网站通常包含多个子页面，例如京东商城官方网站包含了众 多的子页面。
网站其实就是多个网页的集合，网页与网页之间通过超链接互相 访问。输入网址，第一个打开的页面就是该网站的首页。
网站由网页构成，网页有静态网页和动态网页之分。现在互联网 上的大部分网站都是由静态网页和动态网页混合组成的，两者各有千 秋，用户在开发网站时可根据需求酌情采用。
七、W3C组织
W3C（英文World Wide Web Consortium的缩写）中文译为“万维网 联盟”。
万维网联盟是国际最著名的标准化组织。W3C最重要的工作是发展 Web规范，如：超文本标记语言（HTML）、可扩展标记语言（XML） 等。这些规范有效地促进了Web技术的兼容，对互联网的发展和应用起 到了基础性和根本性的支撑作用。
五、HTTP
HTTP（英文Hypertext transfer protocol的缩写）中文译为超文本传输 协议。它是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
六、Web
Web本意是蜘蛛网和网的意思。对于网站设计、制作者来说，它是 一系列技术的复合总称（包括网站的前台布局、后台程序、美工、数据 库开发等），我们称它为网页。
2．表现
表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是 CSS。
3．行为
行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript 两个部分。
其中，DOM（英文Document Object Model的缩写）是文档对象模型； ECMAScript是ECMA（英文European Computer Manufacturers Association的缩 写）以JavaScript为基础制定的标准脚本语言。
三、URL URL（英文Uniform Resource Locator的缩写）中文译为“统一资 源定位符”。
URL其实就是Web地址，俗称“网址”。
四、DNS
DNS（英文Domain Name System的缩写）是域名解析系统。
在Internet上域名与IP地址之间是一一对应的，域名（例如人民邮 电出版社的域名为www.ptpress.com.cn）虽然便于人们记忆，但计算机 只认识IP地址，将好记的域名转换成IP的过程被称为域名解析。
在弹出的窗口中便会显示当前网页的源代码，具体效果截图如图 1-3所示。
图1-2 单击鼠标右键弹出的菜单栏
图1-3 京东商城官方网站首页源代码
图1-3即为京东商城官方网站首页的源文件，它是一个纯文本文件， 仅包含一些特殊的符号和文本。
而我们浏览网页时看到的图片、视频等，其实是这些特殊的符号 和文本组成的代码被浏览器渲染之后的结果。
1.1.3 Web标准
一、什么是Web标准 Web标准并不是某一个标准，而是一系列标准的集合，主要包括结 构（Structure）、表现（Presentation）和行为（Behavior）3个方面。 1．结构 结构用于对网页元素进行整理和分类，主要包括XML和XHTML两 个部分。 XHTML是基于XML的标识语言，是在HTML4.0的基础上，用XML 的规则对其进行扩展建立起来的，它实现了HTML向XML的过渡。
从图1-1中可以看到，网页主要由文字、图像和超链接等元素构成。 当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
图1-1 京东商城官方网站首页截图
二、网页是如何形成的
为了让初学者快速了解网页是如何形成的，接下来查看一下网页 的源代码。
在京东商城官方网站首页中，单击鼠标右键，在弹出的菜单栏中 选择【查看页面源代码】选项，如图1-2所示。
静态网页使用语言：HTML。在网站设计中，一般的静态网页文 件是以.htm、.html、.shtml、.xml等为后缀的。但是，并不是说静态网 页就没有动态的效果，有的静态网页也会有动态效果，如.GIF格式的 动画、Flash、滚动字母等。
运行于客户端的程序、网页、插件、组件，属于静态网页，例如， html页、Flash、JavaScript、VBScript等，它们是永远不变的。
动态网页显示的内容则会随着用户操作和时间的不同而变化。动态 网页使用语言为HTML+ASP 或HTML+PHP或HTML+JSP等。
在服务器端运行的程序、网页、组件，属于动态网页，它们会随不 同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、 CGI等。
区别静态网页与动态网页最重要的一点——程序是否在服务器端运 行，这是最重要的标志。
静态网页是指用户无论何时何地访问，网页都会显示固定的信息， 除非网页源代码被重新修改上传。
所谓静态网页就是指没有后台数据库、不含程序和不可交互的网 页。你编的是什么，它显示的就是什么，不会有任何改变。
静态网页更新起来相对比较麻烦，适用于一般更新较少的展示型 网站。反之，不符合静态网页概念的就属于动态网页。
（1）创建本地站点 （2）网页的基本组成元素和网页的布局结构
（1）网页的布局结构 （2）网页的基本概念
任务驱动法、分组讨论法
1.1 认识网页、网页相关的名词、Web标准
1.1.1 认识网页
一、什么是网页 为了使初学者更好地认识网页，我们首先来看一下京东商城官方 网站。 打开火狐浏览器，在地址栏输入京东商城官方网站的网址，按下 回车键，这时火狐浏览器中显示的页面即为京东商城官方网站首页， 如图1-1所示。