网页设计与制作2 PPT课件
合集下载
《网页设计与制作》课件
《网页设计与制作》PPT 课件
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
网页设计与制作第2版教学配套课件王晓红等第9章页面布局与风格
9.2
页面风格
用户定义的类
大多数时候，我们不为具体的HTML标记符定义格式，而是定义 一些开放的格式，在内容需要的时候引用这些格式。可以通过用 户自定义的类来实现这种机制。
选择器．类名{属性：值；……}
．类名{属性：值；……}
例如：若要在网页两处使用<H2>并使每处文本具有不同颜色， 则可进行如下定义：
CSS+DIV布局：是目前流行的网页版面布局方式，与表格方式相比， 由于节约了许多代码，从而降低了网络数据量。
表格布局：利用表格既可以处理不同对象，又可以不用担心不同对象 之间的影响，而且表格在定位图片和文本上比CSS更加方便。但是过 多地使用表格，会影响页面的下载速度。
框架布局：虽然框架存在兼容性的问题，但从布局上考虑，框架结构 是一种比较好的布局方法，可以将不同对象放置到不同页面加以处 理。
所有用标记符<H1>定义的内容均以此格式显示：文 本中间对齐、字体为楷体
具有上下文 关系的HTML
标记
为具有嵌套关系的HTML标记定义格式，例如： H1 B { color:red; size:18pt }
表示位于<H1>标记元素内的<B> 标记符说明 的内容显示为红色，字号大小为18点
选择器Pag的e 类25 型
执行菜单 修改/模板/从模板中分离操作即可使该页脱离模板。
Page 19
9.2
页面风格
CSS样式
CSS简介 CSS的基本语句 网页中导入CSS的方法 用CSS设置字体属性 用CSS设置文本属性 用CSS设置颜色与背景 用CSS设置边框属性 用CSS设置布局属性
Page 20
超级链接 显示效果
选择器
《网页设计与制作课件》全册精讲PPT教学课件
1．屏幕分辨率对网页制作的重要性
要根据网页和浏览者的特性，以合适的屏幕分 辨率为基准来设置网页尺寸，以使浏览者更加 便利地浏览网页。如游戏爱好者大部分都使用 高配置系统，所以游戏网站的网页尺寸大都在 1024像素×768像素以上，如下图所示。
项目一 网页设计与制作基础知识
13
2．常见网页尺寸
对于网页尺寸，是没有硬性规定的。目前常见的网页宽 度有1000像素、1190像素和1200像素3种，例如新浪 是1000像素、淘宝和京东是1190像素，当当是1200像 素。如果需要兼容不同浏览器尺寸，现在比较流行的做 法是做成响应式的，即根据不同分辨率显示不同的尺寸， 不过这样工作量要大很多。网页高度可根据网页内容来 定，一般不要超过3屏。
右图显示了新华网的主页，可 以看到网页中有文字、图像和 动画等。
项目一 网页设计与制作基础知识
6
在浏览三器、中网单击页右的上本角质的“工具”按钮 ，在弹出的菜单中选择“文件”>“另存为”菜单，打开
“保存网页”对话框，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，将网 页保存到磁盘中，便可看到网页的组成文件，如下图所示。
网页就是我们上网时在浏览器中打开的一 个个画面。网站则是一组相关网页的集合。 一个小型网站可能只包含几个网页，而一 个大型网站则可能包含成千上万个网页， 如新浪网就包括新闻、财经、科技、体育、 娱乐等多个板块，而每个板块又包括很多 网页。
另外，打开某个网站时显示的第一个网页 被称为网站的主页（或首页）。
当当网主页
项目一 网页设计与制作基础知识
4
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
要根据网页和浏览者的特性，以合适的屏幕分 辨率为基准来设置网页尺寸，以使浏览者更加 便利地浏览网页。如游戏爱好者大部分都使用 高配置系统，所以游戏网站的网页尺寸大都在 1024像素×768像素以上，如下图所示。
项目一 网页设计与制作基础知识
13
2．常见网页尺寸
对于网页尺寸，是没有硬性规定的。目前常见的网页宽 度有1000像素、1190像素和1200像素3种，例如新浪 是1000像素、淘宝和京东是1190像素，当当是1200像 素。如果需要兼容不同浏览器尺寸，现在比较流行的做 法是做成响应式的，即根据不同分辨率显示不同的尺寸， 不过这样工作量要大很多。网页高度可根据网页内容来 定，一般不要超过3屏。
右图显示了新华网的主页，可 以看到网页中有文字、图像和 动画等。
项目一 网页设计与制作基础知识
6
在浏览三器、中网单击页右的上本角质的“工具”按钮 ，在弹出的菜单中选择“文件”>“另存为”菜单，打开
“保存网页”对话框，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，将网 页保存到磁盘中，便可看到网页的组成文件，如下图所示。
网页就是我们上网时在浏览器中打开的一 个个画面。网站则是一组相关网页的集合。 一个小型网站可能只包含几个网页，而一 个大型网站则可能包含成千上万个网页， 如新浪网就包括新闻、财经、科技、体育、 娱乐等多个板块，而每个板块又包括很多 网页。
另外，打开某个网站时显示的第一个网页 被称为网站的主页（或首页）。
当当网主页
项目一 网页设计与制作基础知识
4
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
网页设计与制作教程第2版北京市精品教材教学课件PPT作者赵丰年..
第4章 使用超链接本章要点⏹4.1 超链接基础⏹4.2 创建超链接⏹4.3 管理链接2/173/174.1.1 什么是 URL⏹超链接是用 URL （Universal Resource Locator ，统一资源定位器）定位目标信息。
URL 是表示 Web 上资源的一种方法，通常可以理解为资源的地址。
⏹一个 URL 通常包括 3 个部分：一个协议代码、一个装有所需文件的计算机地址（或一个电子邮件地址等），以及具体的文件地址和文件名。
4/174.1.1 什么是 URL （续）⏹协议表明应使用何种方法获得所需的信息，最常用的协议包括：HTTP 、FTP 、mailto 、news 、telnet 等。
⏹当用户在 Internet 上浏览或定位资源时，常常可以省略所要访问信息的详细地址和文件名，因为服务器会按照默认设置为访问者定位资源。
⏹例如，如果在浏览器的地址栏输入“ ” ，实际上是访问“/index.htm ”或其他一个服务器设置为主页的文件。
5/174.1.2 绝对 URL 与相对 URL ⏹绝对 URL 是指 Internet 上资源的完整地址，包括完整的协议种类、计算机域名（所谓域名是指一个能够反映出 Web 服务器实际位置的化名）和包含路径的文档名。
其形式为：协议：//计算机域名/文档名。
⏹例如，/pubic/HTML/example.htm 就表示一个绝对 URL ，其中“http ”表示用来访问文档的协议的名称，“ ”表示文档所在计算机的域名，“/pubic/HTML/example.htm ”表示文档名。
⏹如果在网页中需要指定外部 Internet 资源，应该使用绝对 URL 。
6/174.1.2 绝对 URL 与相对 URL （续）⏹相对 URL 是指 Internet 上相对于当前页面（即正在访问的页面）的地址，它包含从当前页面指向目的页面位置的路径。
例如：public/example.htm 就是一个相对 URL ，它表示当前页面所在目录下 public 子目录中的 example.htm 文档。
电子课件-《Dreamweaver 网页设计与制作(第二版)》- 项目八 制作茶文化网站—应用 Div+CSS技术布局网页
任务
制作网站首页和子页——使用 Div+CSS 技术制作网页
LOGO
任务 制作网站首页和子页 ——使用 Div+CSS 技术制作网页
2
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
◆了解 Web 标准的含义、构成，认识 Div ◆熟练掌握使用 Div+CSS 技术构建网页的方法
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
ECMAScript（JavaScript 的扩展脚本语言）：由 CMA（Computer Manufacturers Association）制定的脚本语言（JavaScript），用于实现网页 对象的交互操作。
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
三、认识 Div
Div 全称 Division，意为“区分”。Div 的使用方法与其他标签一样。如 果单独使用Div 而不加 CSS，则它在网页中的效果和段落标记“<p></p>”相 似。
#lay{ position:absolute； left:5px； top:5px；}
Hale Waihona Puke 任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
它表示应用 #lay 样式的对象为绝对定位模式，它将始终保持距离浏览器 窗口左边框 5px、上边框 5px，如图所示。
绝对定位
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页 2. 相对定位
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
3. 行为
行为是指对整个文档的一个模型定义和交互行为的编写。目前用于行为设 计的Web 标准技术主要有以下两个。
制作网站首页和子页——使用 Div+CSS 技术制作网页
LOGO
任务 制作网站首页和子页 ——使用 Div+CSS 技术制作网页
2
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
◆了解 Web 标准的含义、构成，认识 Div ◆熟练掌握使用 Div+CSS 技术构建网页的方法
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
ECMAScript（JavaScript 的扩展脚本语言）：由 CMA（Computer Manufacturers Association）制定的脚本语言（JavaScript），用于实现网页 对象的交互操作。
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
三、认识 Div
Div 全称 Division，意为“区分”。Div 的使用方法与其他标签一样。如 果单独使用Div 而不加 CSS，则它在网页中的效果和段落标记“<p></p>”相 似。
#lay{ position:absolute； left:5px； top:5px；}
Hale Waihona Puke 任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
它表示应用 #lay 样式的对象为绝对定位模式，它将始终保持距离浏览器 窗口左边框 5px、上边框 5px，如图所示。
绝对定位
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页 2. 相对定位
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
3. 行为
行为是指对整个文档的一个模型定义和交互行为的编写。目前用于行为设 计的Web 标准技术主要有以下两个。
第2章 网页设计与制作PPT课件
《网页设计与制作》 19
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。