网页制作第四讲精品PPT课件
合集下载
网页制作(详细版)ppt课件
WWW信息发布模式：
• WWW信息发布：采用客户端/服务器（Client / Server）模式。WWW服务器程序运行在WWW服务 器上，用于发布存放在WWW服务器中的网页；
下一页
WWW客户端程序运行在用户计算机上的网页浏览
1. 网站设计的基本知识
HTTP协议 • 超文本传输协议HTTP（Hyper Text Transfer Protocol）是 WWW服务所使用的信息传输协议，即访问Internet上的 Web页面所用协议。 • 打开Internet上某一网页：HTTP://<WWW服务器的域名 或ip地址>/<目录路径>/<文件名> 如：/wlzx/index.htm 或者：http://210.40.64.7/wlzx/index.htm
第八章 网页制作
本章内容
8.1 网站规划与设计 8.2 Dreamweaver MX基础知识 8.3 在网页中添加对象 8.4 在网页中使用行为和层 8.5 在网页中使用模板 8.6 网站制作实例
8.1 网站规划与设计
8.1.1 概述 8.1.2 网站设计 8.1.3 内容搜集与组织
home
8.1.1 概述
home
2. 网站结构设计
(1) 确定栏目和版块
• 突出特点 • 设置最近更新、网站指南和交互栏目
(2) 确定网站的目录结构
• 将所有的文件都放在站点根目录下的相应目录中。
• 按栏目内容建立子目录。每个主要的目录下都建立独 立的“images”目录。
• 不要使用中文作为目录或文件的名字，命名的名称不
能过长，应简单明了。
下一页
2. 网站结构设计
(3) 确定网站的链接结构
• WWW信息发布：采用客户端/服务器（Client / Server）模式。WWW服务器程序运行在WWW服务 器上，用于发布存放在WWW服务器中的网页；
下一页
WWW客户端程序运行在用户计算机上的网页浏览
1. 网站设计的基本知识
HTTP协议 • 超文本传输协议HTTP（Hyper Text Transfer Protocol）是 WWW服务所使用的信息传输协议，即访问Internet上的 Web页面所用协议。 • 打开Internet上某一网页：HTTP://<WWW服务器的域名 或ip地址>/<目录路径>/<文件名> 如：/wlzx/index.htm 或者：http://210.40.64.7/wlzx/index.htm
第八章 网页制作
本章内容
8.1 网站规划与设计 8.2 Dreamweaver MX基础知识 8.3 在网页中添加对象 8.4 在网页中使用行为和层 8.5 在网页中使用模板 8.6 网站制作实例
8.1 网站规划与设计
8.1.1 概述 8.1.2 网站设计 8.1.3 内容搜集与组织
home
8.1.1 概述
home
2. 网站结构设计
(1) 确定栏目和版块
• 突出特点 • 设置最近更新、网站指南和交互栏目
(2) 确定网站的目录结构
• 将所有的文件都放在站点根目录下的相应目录中。
• 按栏目内容建立子目录。每个主要的目录下都建立独 立的“images”目录。
• 不要使用中文作为目录或文件的名字，命名的名称不
能过长，应简单明了。
下一页
2. 网站结构设计
(3) 确定网站的链接结构
HTML网页制作教程PPT课件
<form> <em>
HTML文档结构
<html> <head> <body>
Add Your Title Text
•Text 1 •Text 2 •Text 3 •Text 4 •Text 5
Text
html
head
body
title
h1
p
ul
p
li
li
ul
ol
li
li
li
li
li
li
ul
li
li
❖ 标尺线
<hr>
-------即为布局而提供的一种直线
可以为标尺线设定大小、宽高、颜色、对齐方式等。
如: <hr size=3> <hr width=25> <hr color=red>
表格（Table）标记（TAG）
❖ 基本语法： ❖ <table>...</table> 定义表格
<tr> 定义表行 <th> 定义表头 <td> 定义表元(表格的具体数据)
❖ <meta http-equiv=“Content-Type” content=“text/html;charset=#”>
“#”处填写的是语言的类型，如一般中国大陆基本上汉字 用的是国标编码，则为 gb2312 ；而港台地区则是 big5 ；美国则为us-ascii 。
❖ 注意：我们在做模板时，如果找的是一些韩国网站，则出 现的是<META HTTP-EQUIV=“content-type” content=“text/html; charset=euc-kr”> 如果 你不修改此处为gb2312，则会页面出乱！
HTML文档结构
<html> <head> <body>
Add Your Title Text
•Text 1 •Text 2 •Text 3 •Text 4 •Text 5
Text
html
head
body
title
h1
p
ul
p
li
li
ul
ol
li
li
li
li
li
li
ul
li
li
❖ 标尺线
<hr>
-------即为布局而提供的一种直线
可以为标尺线设定大小、宽高、颜色、对齐方式等。
如: <hr size=3> <hr width=25> <hr color=red>
表格（Table）标记（TAG）
❖ 基本语法： ❖ <table>...</table> 定义表格
<tr> 定义表行 <th> 定义表头 <td> 定义表元(表格的具体数据)
❖ <meta http-equiv=“Content-Type” content=“text/html;charset=#”>
“#”处填写的是语言的类型，如一般中国大陆基本上汉字 用的是国标编码，则为 gb2312 ；而港台地区则是 big5 ；美国则为us-ascii 。
❖ 注意：我们在做模板时，如果找的是一些韩国网站，则出 现的是<META HTTP-EQUIV=“content-type” content=“text/html; charset=euc-kr”> 如果 你不修改此处为gb2312，则会页面出乱！
网页设计与制作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
❖ 5、主题：选择“格式/主题”，从右侧选择一 种样式，会改变整体网页的背景效果。
❖ 6、动态字幕：在网页上选定一个位置，单击 “插入/WEB组件/组件类别/选择一种效果/字 幕” ，单击“完成”，在文本框中输入文字。 也可以添加背景图片。
❖ 7、交互按钮：单击“插入/交互式按钮”，可 以自制特色按钮。
❖ <td><a href =yinyue.htm><img border="0" src="dog15.gif" ></a></td>
❖ <td><img border="0" src="pirate.gif" width="84" height="115"></td>
❖ <td>第5个单元格</td>
❖ 8、多媒体：单击“插入/图片/flash影片 （swf类型文件）或视频（rm、mp3）”，然 后链接到相应文件即可。
四、图片热点链接
❖ 1、单击“视图”/“工具栏”/“图片”，弹出图片修 饰工具栏；
❖ 2、选中页面上要进行热点链接的图片； ❖ 3、单击图片工具栏上的“多边形热点”，用鼠标
画出要进行热点链接的区域，并使其封闭
❖ <td><img border="0" src="man4.gif" width="77" height="78"></td>
❖ <td>第7个单元格</td>
❖ <td>第8个单元格</td>
❖ 6、动态字幕：在网页上选定一个位置，单击 “插入/WEB组件/组件类别/选择一种效果/字 幕” ，单击“完成”，在文本框中输入文字。 也可以添加背景图片。
❖ 7、交互按钮：单击“插入/交互式按钮”，可 以自制特色按钮。
❖ <td><a href =yinyue.htm><img border="0" src="dog15.gif" ></a></td>
❖ <td><img border="0" src="pirate.gif" width="84" height="115"></td>
❖ <td>第5个单元格</td>
❖ 8、多媒体：单击“插入/图片/flash影片 （swf类型文件）或视频（rm、mp3）”，然 后链接到相应文件即可。
四、图片热点链接
❖ 1、单击“视图”/“工具栏”/“图片”，弹出图片修 饰工具栏；
❖ 2、选中页面上要进行热点链接的图片； ❖ 3、单击图片工具栏上的“多边形热点”，用鼠标
画出要进行热点链接的区域，并使其封闭
❖ <td><img border="0" src="man4.gif" width="77" height="78"></td>
❖ <td>第7个单元格</td>
❖ <td>第8个单元格</td>
HTML网页制作PPT教学课件
• 一种是使用现成的可视化工具软件，如 Frontpage、Dreamweaver等工具。 会自动加入其他代码与许多复杂的信息，也不 便于修改。
• 另一种就是使用纯文本编辑器，如Windows中 自带的记事本。 这种方法简单易行，自由方便，可以添加注释， 还可以使脚 本具有很好的可读性。
• 使用记事本创建网页的基本步骤是： •2020一/12/0、9 新建记事本文件 二、保存时修改其后缀名为.html 4
字体形式显示的标签对： <b></b>、<i></i>、<u></u>、<sub></ sub >、 <sup></ sup > <Font></ Font >有三个属性： face(字体)、 Size(大小)、 Color(颜色)
2020/12/09
例7
<img src=“url”>标签用来处理图象的显示。
HTML网页基本结构与标注
HTML是一种标记语言，不是编程语言。基本结 构是：
<html> <head> 头部元素、元素属性及内容
</head> <body> 主体元素、元素属性及内容
</body> </html>
2020/12/09
5
HTML总是以一对<></>开始和结束。
• 标题元素 <h1></h1> 设置某一行的字体大小
• Font元素 <font></font> 设置文档的字体 font元素的常用属性是size、color
• 另一种就是使用纯文本编辑器，如Windows中 自带的记事本。 这种方法简单易行，自由方便，可以添加注释， 还可以使脚 本具有很好的可读性。
• 使用记事本创建网页的基本步骤是： •2020一/12/0、9 新建记事本文件 二、保存时修改其后缀名为.html 4
字体形式显示的标签对： <b></b>、<i></i>、<u></u>、<sub></ sub >、 <sup></ sup > <Font></ Font >有三个属性： face(字体)、 Size(大小)、 Color(颜色)
2020/12/09
例7
<img src=“url”>标签用来处理图象的显示。
HTML网页基本结构与标注
HTML是一种标记语言，不是编程语言。基本结 构是：
<html> <head> 头部元素、元素属性及内容
</head> <body> 主体元素、元素属性及内容
</body> </html>
2020/12/09
5
HTML总是以一对<></>开始和结束。
• 标题元素 <h1></h1> 设置某一行的字体大小
• Font元素 <font></font> 设置文档的字体 font元素的常用属性是size、color
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
跨3列
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td> <td>语文</td>
设置单元格水平跨3列
<td>98<跨/td2>行
</tr>
设置单元格水平跨2行
<tr>
<td>数学</td>
<td>95</跨td>2行
</tr>
<!--省略2行代码，代码与上述2行基本相同-->
</table>
<tr>…</tr > 定义行
<table>...
</ table> 定义表格
8/33
如何创建表格
BENET 4.0
<table>代表表格的开始，
<body>
border="2" 表示边框宽度为
<table border="2"> 2
<tr>
<td>1行1列的单元格</td>
<td>1行2列的单元格</td> <td>1行3列的单元格</td>
</table>
13/33
请思考
BENET 4.0
❖ 表格的HTML标签结构是什么？ ❖ 要实现跨行跨列的表格需要使用什么属性？ ❖ 编写如下图所示效果对应的html代码
14/33
表格的高级标签2-1
BENET 4.0
❖ 表格标题<caption>
▪ 描述整个表格的标题
❖ 表格表头<th>
表格标题
BENET 4.0
行
表格的基本结构
列
单元格
特点：同行的高度一致、同列 的宽度一致
7/33
BENET 4.0
表格的基本语法
<table> <td>…</td> 定义列 <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ...... </tr> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ...... </tr>
第四章 表格的应用
—— 理论部分
课程回顾
BENET 4.0
❖ 超链接标签的基本语法是什么？ ❖ 超链接的三种类型分别是什么？ ❖ 无序、有序、定义列表的标签分别是什么？ ❖XHTML 1.0的基本规范包括哪些内容？
2/33
BENET 4.0
本次课知识结构
❖ 会使用表格显示数据 ❖ 会使用表格相关标签实现跨行、跨列表格 ❖ 会使用表格进行简单的页面布局
表头▪ <定th义>表格的表头，一般是表格<c的ap第tio一n行> 数据
▪ 粗体、居中显示
页眉 <thead>
❖ 表格数据分组标签
数据主体
▪ <thead>标签对应报表的页眉，即表格的表头部分<tbody>
▪ <tbody>对应报表的数据主体，即详细的数据描述部分 ▪ <tfoot>对应报表的页脚，即分数据汇总页部脚<分tfoot>
▪ 各分标签内由多行<tr>组成
15/33
表格的高级标签2-2
BENET 4.0
❖ 使用表格高级标签制作报表
<table width="100%"> <caption>年终数据报表</caption>
表<头th<eathd>style="background:#0FF">
表格标<t题head>对应报 <cap表ti页on眉>
</tr>
表格的第1行，有3个单元 格，<tr>…</tr>代表行
<tr>
<td>2行1列的单元格</td>
<td>2行2列的单元格</td>
<td>2行3列的单元格</td>
表格的第2行，有3个单元
</tr>
格，<tr>…</tr>代表行
</table>
</body>
9/33
跨行跨列的表格4-1
10/33
跨行跨列的表格4-2
BENET 4.0
❖创建跨列表格 表格宽度为200px，使用height属性设置高度
<table width="200" border="1"> <tr> <td colspan="2">学生成绩</td> </tr> <tr>
<td>语文</td> 设置单元格水平跨2列
3/33
BENET 4.0
Table
Width Column Row
本章单词
桌子、表格
宽度 列、纵队 一行
backgroun d Height
Space
Caption
背景、底色
高度 间隔、空间 标题
4/33
BENET 4.0
表格的应用
表格基础 跨行跨列的表格 表格的高级用法
表格布局
本章结构
为什么使用表格 表格的基本结构 表格的基本语法
<tbody>对应 报表数据主体
跨多列的表格 跨多行的表格 创建跨行跨列的表格
表格的填充、间距属性 图文布局
表格的嵌套 使用表格嵌套进行网页布局
5/33
BENET 4.0
❖ 表格的应用场合
▪ 论坛 ▪ 门户网站 ▪ 购物网站
❖ 表格的特点
▪ 简单通用 ▪ 结构稳定
为什么使用表格
论门坛户中网应站用应表用格表格 购物网站应用表格
6/33
BENET 4.0
❖ 什么是跨行跨列的表格
▪ 跨多列的表格语法
• 单元格的横向合并
跨3列
<tr> <td colspan="所跨的列数">单元格内容</td>
</tr>
▪ 跨多行的
• 单元格在垂直方向上合并 <tr> 跨3行
<td rowspan="所跨的行数">单元格内容</td >
</tr> 跨5行
<td>语文</td>
<td>98</td> </tr>
设置单元格水平跨2行
<tr>
<td>数学</td>
<td>95</td>
</tr>
<!--省略2行代码，代码与上述2行基本相同-->
</table>
12/33
跨行跨列的表格4-4
BENET 4.0
❖ 创建跨行跨列的表格
<table width="200" border="1"> <tr>
<tr> <th>月份</th> <th>收入（RMB）</th> </tr>
页眉 <thead>
</thead>
<tbody style=" background:#9CC">
<tr> <td>1月</td> <td>100</td> </tr> <tr> <td>2月</td> <td>80</td> </tr> <!--省略3-6月的类似HTML代码-->
<td>98</td> </tr> <tr>
<td>数学</td> <td>95</td> </tr> </table>
11/33
跨行跨列的表格4-3
BENET 4.0
❖ 创建跨行表格
<table width="500" border="1">
<tr>
<td rowspan="2">张三</td>