网页制作PPT课件
合集下载
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
网页制作基础 ppt课件
和声明两个部分组成，选择 器是表示格式元素的术语， 声明用于定义元素样式，如 右侧所示的.a1是选择器， 介于{}之间的内容就是声明。
ppt课件
声明
21
（2）CSS定义
例5：建立如前页图所示的CSS规则.a1，并应用 到wy1.html的第二段文本上。
步骤：
单击文本“属性”面板上的按钮 ，“目标规则”中
主页：歌手的介绍及发行唱片 为每一张唱片建立一张网页，对应网页上为该 唱片的各曲目介绍，如歌词，词曲作者，歌曲试听、 演唱会视频等等。
ppt课件
9
4.2 网站的创建和管理 4.2 .1 Dreamweaver的界面
ppt课件
10
4.2.2 站点的新建与管理
在Dreamweaver CS4中，“站点” 是一个文件夹，用于存放网站的所有 图像、多媒体等文件，便于用户对站 点进行发布、维护和管理。
从文件的角度来说，一个网页就是一个HTML文件。
42万字符的HTML文本需 要我们自己编写吗？？？
Dreamweaver CS4、
FrontPage、 Adobe Pagemile、
Claris Home Page 等网页制作工具
ppt课件
设计、创建、制作与发布网页 6
2. 网页设计的流程 构成网页的基本元素大体相同，主要包括标题、网 站Logo、导航、超链接、广告栏、文本、图片、动 画、视频与音频等。 按网页的表现形式可将网页分为： 静态网页 动态网页
例1：建立一个本地站点“站点1”，站点文件夹 为C盘的“计算机应用”。
步骤： （1）打开“站点定义”对话框 （2）定义站点
ppt课件
12
3. 站点的管理
站点建立后，Dreamweaver可 以对站点及站点中的文件进行管理， 可以对所建立的站点进行移动、复制、 删除、导入、导出等操作。
ppt课件
声明
21
（2）CSS定义
例5：建立如前页图所示的CSS规则.a1，并应用 到wy1.html的第二段文本上。
步骤：
单击文本“属性”面板上的按钮 ，“目标规则”中
主页：歌手的介绍及发行唱片 为每一张唱片建立一张网页，对应网页上为该 唱片的各曲目介绍，如歌词，词曲作者，歌曲试听、 演唱会视频等等。
ppt课件
9
4.2 网站的创建和管理 4.2 .1 Dreamweaver的界面
ppt课件
10
4.2.2 站点的新建与管理
在Dreamweaver CS4中，“站点” 是一个文件夹，用于存放网站的所有 图像、多媒体等文件，便于用户对站 点进行发布、维护和管理。
从文件的角度来说，一个网页就是一个HTML文件。
42万字符的HTML文本需 要我们自己编写吗？？？
Dreamweaver CS4、
FrontPage、 Adobe Pagemile、
Claris Home Page 等网页制作工具
ppt课件
设计、创建、制作与发布网页 6
2. 网页设计的流程 构成网页的基本元素大体相同，主要包括标题、网 站Logo、导航、超链接、广告栏、文本、图片、动 画、视频与音频等。 按网页的表现形式可将网页分为： 静态网页 动态网页
例1：建立一个本地站点“站点1”，站点文件夹 为C盘的“计算机应用”。
步骤： （1）打开“站点定义”对话框 （2）定义站点
ppt课件
12
3. 站点的管理
站点建立后，Dreamweaver可 以对站点及站点中的文件进行管理， 可以对所建立的站点进行移动、复制、 删除、导入、导出等操作。
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
网页制作PPT课件
CSS历史
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
网页制作PPT教学课件
7
任务三:在首页插入四幅图像,每一幅图像 代表一个模块,图象大小设置成”249*48”, 后面用文字说明模块的概意
2020/12/09
5
使用背景图像的一些方法：
①使用小图，图片容量小，方便传输，页 面美观
②色彩淡点，有利于后面的页面制作。
2020/12/09
6
PPT精品课件
谢谢观看
Thank You For Watching
(做完的同学可以在在导航条上加入背景图像)
2020/12/09
3
表格属性的设置
合并单元格 表格（选中整个表格）、文字的对齐方式
（选中单元格） 背景色设置
任务二:仿照”心系奥运”首页进行布局
2020/12/09
4
④添加图像
添加图像: 方法一:“插入”/“图像”命令 方法二: 点击插入栏中表格的按钮
6.1（二） 网页制作
Dreamweaver 8
2020/12/09
1
第二节 学习目标
1、插入表格，利用表格布局页面 2、插入背景图像，插入图象
2020/12/09
2
③插入表格
插入表格有两种形式: ①利用表格布局网页(边框粗细设置为0) ②普通表格(根据设计要求设置边框粗细)
任务一:在”心系奥运”首页分别利用表格布局 和普通表格两种方法设计导般条.
任务三:在首页插入四幅图像,每一幅图像 代表一个模块,图象大小设置成”249*48”, 后面用文字说明模块的概意
2020/12/09
5
使用背景图像的一些方法：
①使用小图，图片容量小，方便传输，页 面美观
②色彩淡点，有利于后面的页面制作。
2020/12/09
6
PPT精品课件
谢谢观看
Thank You For Watching
(做完的同学可以在在导航条上加入背景图像)
2020/12/09
3
表格属性的设置
合并单元格 表格（选中整个表格）、文字的对齐方式
（选中单元格） 背景色设置
任务二:仿照”心系奥运”首页进行布局
2020/12/09
4
④添加图像
添加图像: 方法一:“插入”/“图像”命令 方法二: 点击插入栏中表格的按钮
6.1（二） 网页制作
Dreamweaver 8
2020/12/09
1
第二节 学习目标
1、插入表格，利用表格布局页面 2、插入背景图像，插入图象
2020/12/09
2
③插入表格
插入表格有两种形式: ①利用表格布局网页(边框粗细设置为0) ②普通表格(根据设计要求设置边框粗细)
任务一:在”心系奥运”首页分别利用表格布局 和普通表格两种方法设计导般条.
网页设计与制作PPT课件
1.1 网页和网站
1.1.3 网页的基本功能
1、媒介的作用。使用者与信息之间的媒介。 一方面是发布者，功能是发布信息；另一方面 是浏览者，功能是提供浏览的信息，通过浏览 网页找寻需要的信息。
2、互动的作用。浏览者与网页制作单位之 间互动的窗口，可以单向或双向传递信息。
3、传输的作用。作为传输各种电子文件或 信息之用，如下载说明书、更新文件、驱动程 序等。
超链接的标志一般有：文本、图像、热区 三种。要注意的是，所有超链接标志均应清晰 无误地向浏览者标识出来，让人一看就知道。
1.2 网页中的主要元素
1.2.4其他的基本要素
除上述几种要素之外，在网页上经常使用 的还有动画、视频、声音等各种信息的形式。
1．动画。目前网络上常用的动画类型有 gif和Flash动画两种。
第2讲 HTML语言基础
$ [知识目标]
了解HTML文件的基本结构 掌握HTML中文本的编辑及图像的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中表格和框架的基本语法
8 [能力目标]
掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 能够编写简单的HTML网页 掌握HTML文件中表格和框架的使用
1.4 网页设计的基本流程
1.4.3网页的测试
1．浏览器兼容性测试。目前浏览器有： Internet Explorer与Netscape两大主流浏览器，二 者对HTML和CSS等语法的支持度是不同的。在 Dreamweaver中提供了可以检查网页中是否含有某版本浏 览器不能识别的语法功能，设计者可以借助其进行检查。
1.4 网页设计的基本流程
1.4.4网页上传和发布
网页设计好，必须把它发布到互联网上， 否则网站形象仍然不能展现出去。发布的服务 器可以是远程，也可以是本地。如果是发布到 互联网上，要先申请域名和主页空间，然后再 利用专用软件（如：CuteFTP）上传，FTP有很 多种软件，最著名的是 CuteFTP 和 LeapFTP， 也可以用Dreamweaver内置的FTP上传。
网页制作ppt课件
➢ 页面的布局 ➢ 页面属性的设置
面向21世纪高职高专计算机系列规划教材
➢ 网页布局的基本概念（页面尺寸、整体造型、页 头、文本、页脚、图片、多媒体）
➢ 网页布局的方法（纸上布局法、软件布局法）
面向21世纪高职高专计算机系列规划教材
➢ 标题 ➢ 背景图像 ➢ 背景 ➢ 设置文本或链接颜色 ➢ 设置页面边距
➢ 通道（通道的含义、创建新通道、复制通道） ➢ 路径（路径的含义、路径的绘制、路径控制面板）
面向21世纪高职高专计算机系列规划教材
➢ 滤镜介绍 ➢ 滤镜使用（“水波”滤镜、“动感模糊”滤镜）
面向21世纪高职高专计算机系列规划教材
➢ 文字工具 ➢ 文字变形 ➢ 字符与段落设置
面向21世纪高职高专计算机系列规划教材
面向21世纪高职高专计算机系列规划教材
➢ 认识图层 ➢ 层的基本操作 ➢ 引导层 ➢ 运动引导层 ➢ 蒙版层 ➢帧
面向21世纪高职高专计算机系列规划教材
➢ 逐帧动画 ➢ 形变动画 ➢ 运动动画 ➢ 蒙版动画
面向21世纪高职高专计算机系列规划教材
➢ 认识符号 ➢ 制作符号 ➢ 按钮的制作 ➢ 编辑符号 ➢ 实例和符号的关系
面向21世纪高职高专计算机系列规划教材
➢ 导入外部表格数据 ➢ 导出表格数据
面向21世纪高职高专计算机系列规划教材
3.5 超级链接
➢ 了解超级链接 ➢ 创建超级链接 ➢ 管理超级链接 ➢ 导航条
面向21世纪高职高专计算机系列规划教材
➢ 超级链接的基础 ➢ 合理安排超级链接 ➢ 链接的路径（URL、绝对路径、相对路径、基于
➢ 2.1 Photoshop 7.0的基本操作 ➢ 2.2 Flash MX的基本操作
面向21世纪高职高专计算机系列规划教材
面向21世纪高职高专计算机系列规划教材
➢ 网页布局的基本概念（页面尺寸、整体造型、页 头、文本、页脚、图片、多媒体）
➢ 网页布局的方法（纸上布局法、软件布局法）
面向21世纪高职高专计算机系列规划教材
➢ 标题 ➢ 背景图像 ➢ 背景 ➢ 设置文本或链接颜色 ➢ 设置页面边距
➢ 通道（通道的含义、创建新通道、复制通道） ➢ 路径（路径的含义、路径的绘制、路径控制面板）
面向21世纪高职高专计算机系列规划教材
➢ 滤镜介绍 ➢ 滤镜使用（“水波”滤镜、“动感模糊”滤镜）
面向21世纪高职高专计算机系列规划教材
➢ 文字工具 ➢ 文字变形 ➢ 字符与段落设置
面向21世纪高职高专计算机系列规划教材
面向21世纪高职高专计算机系列规划教材
➢ 认识图层 ➢ 层的基本操作 ➢ 引导层 ➢ 运动引导层 ➢ 蒙版层 ➢帧
面向21世纪高职高专计算机系列规划教材
➢ 逐帧动画 ➢ 形变动画 ➢ 运动动画 ➢ 蒙版动画
面向21世纪高职高专计算机系列规划教材
➢ 认识符号 ➢ 制作符号 ➢ 按钮的制作 ➢ 编辑符号 ➢ 实例和符号的关系
面向21世纪高职高专计算机系列规划教材
➢ 导入外部表格数据 ➢ 导出表格数据
面向21世纪高职高专计算机系列规划教材
3.5 超级链接
➢ 了解超级链接 ➢ 创建超级链接 ➢ 管理超级链接 ➢ 导航条
面向21世纪高职高专计算机系列规划教材
➢ 超级链接的基础 ➢ 合理安排超级链接 ➢ 链接的路径（URL、绝对路径、相对路径、基于
➢ 2.1 Photoshop 7.0的基本操作 ➢ 2.2 Flash MX的基本操作
面向21世纪高职高专计算机系列规划教材
网页编辑ppt课件
5
FrontPage基础
自定义浏览器分辨率预览检查 描摹图像 层功能 行为的应用 使用网页重定向 检查页面错误 插入交互式按钮 优化HTML代码
6
FrontPage 2003中的视图
FrontPage 2003提供了以下几种视图以方便用户对
站点的管理，用户可以在不同的Fro视nt图Pag中e提进供行相应的
段落格式主要包括对齐方式、缩进和段落间距等。设置段落格式的一般方法如 下： 将插入点移动到要设置格式的段落中，或是选中该段落，单击“格式”菜单 的“段落”命令，在弹出的“段落”对话框中进行各种段落格式属性的设置。
15
设置网页属性
网页属性包括网页的标题、格式、页边距等。要设置网页属性， 用户可以使用“文件”菜单的“属性”命令，或者在网页的任意 地方单击鼠标右键，在弹出的右键菜单中选择“网页属性”命令， FrontPage 2003将显示“网页属性”对话框。
3
9.1 HTML概述
HTML文件结构
文件开始 头部
<html>
<head> <title> </head>
</title>
主题
<body> </body>
文件结束
</html>
4
9.1 HTML概述
1、HTML文件的三个基本特征 文件扩展名为htm或html HTML文件由标记命令和文本组成 <标记名>文本内容</标记名> 标记名写在“< >”内。多数HTML标记同时具有起始和结 束标记，并且成对出现，但也有些HTML标记没有结束标记。另 外，HTML标记不区分大小写。 文件中含有热点文本
FrontPage基础
自定义浏览器分辨率预览检查 描摹图像 层功能 行为的应用 使用网页重定向 检查页面错误 插入交互式按钮 优化HTML代码
6
FrontPage 2003中的视图
FrontPage 2003提供了以下几种视图以方便用户对
站点的管理，用户可以在不同的Fro视nt图Pag中e提进供行相应的
段落格式主要包括对齐方式、缩进和段落间距等。设置段落格式的一般方法如 下： 将插入点移动到要设置格式的段落中，或是选中该段落，单击“格式”菜单 的“段落”命令，在弹出的“段落”对话框中进行各种段落格式属性的设置。
15
设置网页属性
网页属性包括网页的标题、格式、页边距等。要设置网页属性， 用户可以使用“文件”菜单的“属性”命令，或者在网页的任意 地方单击鼠标右键，在弹出的右键菜单中选择“网页属性”命令， FrontPage 2003将显示“网页属性”对话框。
3
9.1 HTML概述
HTML文件结构
文件开始 头部
<html>
<head> <title> </head>
</title>
主题
<body> </body>
文件结束
</html>
4
9.1 HTML概述
1、HTML文件的三个基本特征 文件扩展名为htm或html HTML文件由标记命令和文本组成 <标记名>文本内容</标记名> 标记名写在“< >”内。多数HTML标记同时具有起始和结 束标记，并且成对出现，但也有些HTML标记没有结束标记。另 外，HTML标记不区分大小写。 文件中含有热点文本
网页制作技术PPT课件
网页制作技术
2.网页的保存和打开
执行“文件”→“保存”命令，进入“另存为” 对话框，进行相应设置，设置完毕，单击“保存” 即可。 注意：新建网页后，应该立即保存，这样以后在页 面中插入的图片、链接可以以相对路径保存。 如果要对网页进行编辑，首先需要打开该网页文 件，其操作为：执行“文件/打开”命令或在文件 面板中双击网页。
网页制作技术
7.3 站点的创建和管理
一、建立新站点
一旦创建好站点结构，必须在Dreamweaver中指 定新站点，这样就可以使用带FTP功能的 Dreamweaver将站点上传到Web服务器中。
在创建网页之前最好建立本地站点，站点的本地 根目录应该是一个专门为该站点创建的文件夹。 建立站点的操作步骤：可参见实验二
网页制作技术
(4) 链接的目标 链接的目标就是指链接的内容怎样表现出来。
_blank：是指在新的窗口中打开网页。 _seft：是指在当前窗口中打开网页。 _top：是指在最顶层打开网页。 _parent：是指在父框架打开网页
网页制作技术
四、网页制作常用方法
1.用可视化网页制作工具进行页面设计 (1) FrontPage软件 (2) Dreamweaver软件 (3) Word文字处理软件
<HTML> <HEAD> 头部信息 </HEAD> <BODY> 文档主体，正文部分 </BODY>
</HTML> 。
网页制作技术
<HTML>标记
<HTML>标记是HTML文档的第一个标记，它 通知客户端该文档是HTML文档。结束标记 </HTML>应该出现在HTML文档的尾部。
2.网页的保存和打开
执行“文件”→“保存”命令，进入“另存为” 对话框，进行相应设置，设置完毕，单击“保存” 即可。 注意：新建网页后，应该立即保存，这样以后在页 面中插入的图片、链接可以以相对路径保存。 如果要对网页进行编辑，首先需要打开该网页文 件，其操作为：执行“文件/打开”命令或在文件 面板中双击网页。
网页制作技术
7.3 站点的创建和管理
一、建立新站点
一旦创建好站点结构，必须在Dreamweaver中指 定新站点，这样就可以使用带FTP功能的 Dreamweaver将站点上传到Web服务器中。
在创建网页之前最好建立本地站点，站点的本地 根目录应该是一个专门为该站点创建的文件夹。 建立站点的操作步骤：可参见实验二
网页制作技术
(4) 链接的目标 链接的目标就是指链接的内容怎样表现出来。
_blank：是指在新的窗口中打开网页。 _seft：是指在当前窗口中打开网页。 _top：是指在最顶层打开网页。 _parent：是指在父框架打开网页
网页制作技术
四、网页制作常用方法
1.用可视化网页制作工具进行页面设计 (1) FrontPage软件 (2) Dreamweaver软件 (3) Word文字处理软件
<HTML> <HEAD> 头部信息 </HEAD> <BODY> 文档主体，正文部分 </BODY>
</HTML> 。
网页制作技术
<HTML>标记
<HTML>标记是HTML文档的第一个标记，它 通知客户端该文档是HTML文档。结束标记 </HTML>应该出现在HTML文档的尾部。
网页制作基础教程PPT课件
图片多数比较大，最好用图形软件
处理一下，处理方法这点后面会讲
到
静态图片 动态图片
式
工 具 栏
插 入
[]
在 需 要
选菜 插
择单 入
插下 图
[]
入图 片
图片 的
片 的 快 捷
或 者 在
位 置 选 择
方
• 文字链接的制作 ——选中文字，点击鼠标右键，选择超级连接或 者选择文字，鼠标左键点击编辑超连接的快捷方 式
• 制作自己的第一个网页，要求包含图片、文字， 链接
• 将自己的网页另存到“我的文档”文件夹，取名 为：“我的第一个网页”，要求保留页面原本的 全部效果
1. 使用IE浏览器将这个页面添加到收藏夹
• 图片链接的制作 ——选中图片，点击鼠标右键，选择超级连接或 者选中图片，鼠标左键点击编辑超连接的快捷方 式
•不要忘记加入网页的title<标题> ——title是显示在浏览器标题栏的文字，在网页下载时，它是最先出现的，所 以你可以用它提示网页的主要内容，或者写些欢迎的话
•将首页命名为 ——这是规定，没什么好多说的，哪页一旦被你取名叫以后，等你把你的整个 homepage上传了以后，它就是别人用你的网址看到你网站的第一页
•将所有文件的文件名统一格式用英文字母，如都为英文小写且的格式 ——前面的课程里有详细的说过文件名的一些知识
•图片应使用.gif和.jpg(jpeg)格式 ——这是两种位图文件格式，在同样的视觉清晰度下，文件量往往比其他文件 格式小，也就是说在网上下载的时候时间会更短，一般从网上下载的图片不用 考虑这个问题
• 拷贝其他文件的文字 ——如其它网页上的文字，选中反白了以后复制， 粘贴，就可以了
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3
8.2.1 HTML语言概述(1)
HTML（Hypertext Markup Language，超文本标记语 言），专门用来编写网页。
HTML描述文件结构格式的方法是利用一些指令符号， 来标记表示出各种文件效果，再由浏览器来解读HTML 的指令符号，将文件格式效果展现出来，HTML是一种 标记式的语言。
大多数标签都具有属性，属性写在标签的开始 控制符中。如：
<FONT color=red size=5>中国</FONT>
标签书写与字母大小写无关。
8
8.2.1 HTML语言概述(4)
HTML文件结构
一般来说，整个HTML文件以<HTML>开头，以</HTML>结束， 中间分成两个部分：一部分是“标头区”；一部分是 “主体区”。
</HTML>
5
第一个HTML例子
<HTML> <HEAD> <TITLE>简单的网页制作</TITLE> </HEAD> <BODY> 这是我的第一个网页 </BODY>
</HTML>
6
第一个HTML例子浏览效果
7
8.2.1 HTML语言概述(3)
HTML标签结构
标签是用尖括号(英文半角)括起来的控制符。 一般HTML标签都具有开始和结束控制符，如 <HTML>和</HTML>。也有少量没有结束控制符 的标签，如<BR>、<HR>等。
第8章 网页设计基础
掌握HTML文档结构。 了解并掌握HTML的基本语法 初步掌握基本标记的使用。 能够使用FrontPage制作网页 能够将制作的网页发布到Internet上
1
8.1 概述(1)
网页的基本概念
是一个文本文件，以html或htm作为扩展名 通过html标记将文字、图片等信息组织在一起 在浏览器上呈现出一幅幅图片
主体区
主体区使用<BODY>和</BODY>来定义，网页中的主体内容都应用
写在主体区中。
9
8.2.2 HTML基本标记(1)
<BODY>标记
常用属性： TEXT
文字的颜色
LINK
链接文字颜色
VLINK
已链接过的文字颜色
ALINK
被按下链接文字颜色
BGCOLOR
背景颜色
BACKGROUND 背景图形
<IMG>标记及其属性： src=要显示的图像的URL width= px或% height=px或% align= left或right alt=？浏览器无法显示图形时，出现的替代文字
15
8.2.2 HTML基本标记(5)
颜色表示：
以颜色的英文名表示，如White、red、blue等
以RRGGBB代表各种颜色。 RR=Red 红色，其值为00-FF
GG=Green 绿色，其值为00-FF
BB=Blue
蓝色，其值为00-FF
利用这三种颜色值的组合，可配出各种颜色。
10
8.2.2 HTML基本标记(2)
文字的编辑
移动方向属性的设置 direction=# , #=left, right,up,down (目的方向)
移动方式属性的设置 behavior=# , #=scroll, slide, alternate
移动速度属性的设置 scrollamount=# , 默认值为6，越大移动越快
特殊符号表示
文件开始和结束标签
以<HTML>开始，以</HTML>标签结束，告诉浏览器这是一个HTML 网页文件。
标头区
有一对<HEAD></HEAD>来定义，它紧跟在<HTML>之后。在此可以 利用<TITLE>和</TITLE>来定义网页的标题，以及其它的内容， 如CSS，JavaScript和<Meta>等。
空格
：
>(大于号) ：>
<(小于号) ：<
版权所有 ：©
注册商标 ：®
13
8.2.2 HTML基本tart=?
<LI>列表项
<LI>列表项
</OL>
其中type=? ，
?可以为A、I、数字
网页的基本组成
文字 图像 超级链接
2
8.1 概述(2)
网页制作方法
利用HTML语言所定义的标记及其属性来编写一 个文本文件。用htm或html作为文件的扩展名。
网页制作软件
文本编辑工具(记事本、EditPlus); 专业网页制作软件，FrontPage、Dreamweaver等; 一些图像处理软件，如PhotoShop等.
其中start=?，
?指定序列开始的序号
无序列表
<UL type=? ></UL>
type=? ,？可以为square、circle
14
8.2.2 HTML基本标记(5)
使用图像
常用图片格式 GIF格式 ：最多表示256色，支持透明和动画。 JPEG格式 ：压缩率很高，颜色丰富。 PNG格式：适应于任何类型、任何颜色深度的图片。
在HTML里，图形、声音必须用其它软件制作，再用 HTML的标记编排在网页的原始文件里，然后浏览器才 能解读这些原始文件，并在屏幕上展示其效果。
4
8.2.1 HTML语言概述(2)
<HTML> <HEAD> <TITLE>网页标题</TITLE> </HEAD> <BODY> 正文部分 </BODY>
<Font>…</Font>（字体）
属性：face=字体名 属性：size=字体大小(1-7) 属性：color=字体颜色
<P>…</P>（分段）
属性：align=对齐方式,可以为left、center、right
<BR> (分行) <B>…</B> 、 <U>…</U> 、 <I>…</I>（字体样
式） <Hn>…</Hn>(其中n=1..6)（标题） <SUB>下标 、 <SUP> 上标 <HR>（水平分隔线）
11
SUCCESS
THANK YOU
2019/6/19
8.2.2 HTML基本标记(3)
滚动字幕<marquee>…</marquee>标记
移动区域的大小设置 width=? 和height=?
8.2.1 HTML语言概述(1)
HTML（Hypertext Markup Language，超文本标记语 言），专门用来编写网页。
HTML描述文件结构格式的方法是利用一些指令符号， 来标记表示出各种文件效果，再由浏览器来解读HTML 的指令符号，将文件格式效果展现出来，HTML是一种 标记式的语言。
大多数标签都具有属性，属性写在标签的开始 控制符中。如：
<FONT color=red size=5>中国</FONT>
标签书写与字母大小写无关。
8
8.2.1 HTML语言概述(4)
HTML文件结构
一般来说，整个HTML文件以<HTML>开头，以</HTML>结束， 中间分成两个部分：一部分是“标头区”；一部分是 “主体区”。
</HTML>
5
第一个HTML例子
<HTML> <HEAD> <TITLE>简单的网页制作</TITLE> </HEAD> <BODY> 这是我的第一个网页 </BODY>
</HTML>
6
第一个HTML例子浏览效果
7
8.2.1 HTML语言概述(3)
HTML标签结构
标签是用尖括号(英文半角)括起来的控制符。 一般HTML标签都具有开始和结束控制符，如 <HTML>和</HTML>。也有少量没有结束控制符 的标签，如<BR>、<HR>等。
第8章 网页设计基础
掌握HTML文档结构。 了解并掌握HTML的基本语法 初步掌握基本标记的使用。 能够使用FrontPage制作网页 能够将制作的网页发布到Internet上
1
8.1 概述(1)
网页的基本概念
是一个文本文件，以html或htm作为扩展名 通过html标记将文字、图片等信息组织在一起 在浏览器上呈现出一幅幅图片
主体区
主体区使用<BODY>和</BODY>来定义，网页中的主体内容都应用
写在主体区中。
9
8.2.2 HTML基本标记(1)
<BODY>标记
常用属性： TEXT
文字的颜色
LINK
链接文字颜色
VLINK
已链接过的文字颜色
ALINK
被按下链接文字颜色
BGCOLOR
背景颜色
BACKGROUND 背景图形
<IMG>标记及其属性： src=要显示的图像的URL width= px或% height=px或% align= left或right alt=？浏览器无法显示图形时，出现的替代文字
15
8.2.2 HTML基本标记(5)
颜色表示：
以颜色的英文名表示，如White、red、blue等
以RRGGBB代表各种颜色。 RR=Red 红色，其值为00-FF
GG=Green 绿色，其值为00-FF
BB=Blue
蓝色，其值为00-FF
利用这三种颜色值的组合，可配出各种颜色。
10
8.2.2 HTML基本标记(2)
文字的编辑
移动方向属性的设置 direction=# , #=left, right,up,down (目的方向)
移动方式属性的设置 behavior=# , #=scroll, slide, alternate
移动速度属性的设置 scrollamount=# , 默认值为6，越大移动越快
特殊符号表示
文件开始和结束标签
以<HTML>开始，以</HTML>标签结束，告诉浏览器这是一个HTML 网页文件。
标头区
有一对<HEAD></HEAD>来定义，它紧跟在<HTML>之后。在此可以 利用<TITLE>和</TITLE>来定义网页的标题，以及其它的内容， 如CSS，JavaScript和<Meta>等。
空格
：
>(大于号) ：>
<(小于号) ：<
版权所有 ：©
注册商标 ：®
13
8.2.2 HTML基本tart=?
<LI>列表项
<LI>列表项
</OL>
其中type=? ，
?可以为A、I、数字
网页的基本组成
文字 图像 超级链接
2
8.1 概述(2)
网页制作方法
利用HTML语言所定义的标记及其属性来编写一 个文本文件。用htm或html作为文件的扩展名。
网页制作软件
文本编辑工具(记事本、EditPlus); 专业网页制作软件，FrontPage、Dreamweaver等; 一些图像处理软件，如PhotoShop等.
其中start=?，
?指定序列开始的序号
无序列表
<UL type=? ></UL>
type=? ,？可以为square、circle
14
8.2.2 HTML基本标记(5)
使用图像
常用图片格式 GIF格式 ：最多表示256色，支持透明和动画。 JPEG格式 ：压缩率很高，颜色丰富。 PNG格式：适应于任何类型、任何颜色深度的图片。
在HTML里，图形、声音必须用其它软件制作，再用 HTML的标记编排在网页的原始文件里，然后浏览器才 能解读这些原始文件，并在屏幕上展示其效果。
4
8.2.1 HTML语言概述(2)
<HTML> <HEAD> <TITLE>网页标题</TITLE> </HEAD> <BODY> 正文部分 </BODY>
<Font>…</Font>（字体）
属性：face=字体名 属性：size=字体大小(1-7) 属性：color=字体颜色
<P>…</P>（分段）
属性：align=对齐方式,可以为left、center、right
<BR> (分行) <B>…</B> 、 <U>…</U> 、 <I>…</I>（字体样
式） <Hn>…</Hn>(其中n=1..6)（标题） <SUB>下标 、 <SUP> 上标 <HR>（水平分隔线）
11
SUCCESS
THANK YOU
2019/6/19
8.2.2 HTML基本标记(3)
滚动字幕<marquee>…</marquee>标记
移动区域的大小设置 width=? 和height=?