静态网页设计教程.ppt
合集下载
第3章静态页面制作ppt课件
表格宽度：表格的宽度可以选 择是占页面宽度的百分比〔单 位为百分比〕或者固定尺寸〔 单位为像素〕。
边框粗细：表格的边境宽度，单位为像素，表格的属性设 置中将详细讲解边框、填充值和间距值的区别。
单元格边距：单元格边框和单元格内容的间隔间隔。 单元格间距：单元格和单元格之间的间隔间隔。 页眉：把表格的第一行或第一列作为标题行或标题列。 作为标题行或标题列的行或列的内容将以粗体的方式显
静态页面设计
一、网页规划----表格 二、超链接 三、添加文本 四、插入图像 五、用框架规划页面
标题栏 插入栏 工具栏 文档窗口
标签选择器
菜单栏 面板组
“文件” 面板
属性检查器
一、网页规划
1、规划的本质
规划: 就是在页面上划分出不同的区域，按照设计的原那 么和方法，把不同的内容放置到不同的位置上，并经过颜 色调和出不同的网站基调，使网页内容构成一个有机的整 体，充分表达网站主题的过程。
规划的方法 :表格、层、框架 利用表格规划： 在插入面板中选择“常用〞标签，点击按
钮，弹出 “插入表格〞对话框，设置相应的参数来插入表 格。也可以经过选择“【插入】→【表格】〞菜单命令翻 开“插入表格〞对话框。
“插入表格〞对话框
行数：新插入的表格的行数， 可以更改数值来确定行数。
列数：新插入的表格的列数， 可以更改数值来确定列数，行 、列数控制表格划分的区域个 数〔行×列〕。
选择“存储时自动更新〞复选框，那么在日期格式插 入到文档中后可以对其进展编辑，假设没有选这项， 插入后变成纯文本，不好修正。假设希望在每次保管 文档时都更新插入的日期，那么选择“储存时自动更 新〞。
假设要更改日期，可以先用鼠标选中该对象，然后单 击“属性〞面板中的“编辑日期格式〞按钮，
边框粗细：表格的边境宽度，单位为像素，表格的属性设 置中将详细讲解边框、填充值和间距值的区别。
单元格边距：单元格边框和单元格内容的间隔间隔。 单元格间距：单元格和单元格之间的间隔间隔。 页眉：把表格的第一行或第一列作为标题行或标题列。 作为标题行或标题列的行或列的内容将以粗体的方式显
静态页面设计
一、网页规划----表格 二、超链接 三、添加文本 四、插入图像 五、用框架规划页面
标题栏 插入栏 工具栏 文档窗口
标签选择器
菜单栏 面板组
“文件” 面板
属性检查器
一、网页规划
1、规划的本质
规划: 就是在页面上划分出不同的区域，按照设计的原那 么和方法，把不同的内容放置到不同的位置上，并经过颜 色调和出不同的网站基调，使网页内容构成一个有机的整 体，充分表达网站主题的过程。
规划的方法 :表格、层、框架 利用表格规划： 在插入面板中选择“常用〞标签，点击按
钮，弹出 “插入表格〞对话框，设置相应的参数来插入表 格。也可以经过选择“【插入】→【表格】〞菜单命令翻 开“插入表格〞对话框。
“插入表格〞对话框
行数：新插入的表格的行数， 可以更改数值来确定行数。
列数：新插入的表格的列数， 可以更改数值来确定列数，行 、列数控制表格划分的区域个 数〔行×列〕。
选择“存储时自动更新〞复选框，那么在日期格式插 入到文档中后可以对其进展编辑，假设没有选这项， 插入后变成纯文本，不好修正。假设希望在每次保管 文档时都更新插入的日期，那么选择“储存时自动更 新〞。
假设要更改日期，可以先用鼠标选中该对象，然后单 击“属性〞面板中的“编辑日期格式〞按钮，
静态网页制作PPT课件
每种颜色的最小值是0（十六进制：#00）。最大值 是255（十六进制：#FF）。
红色 #FF0000 绿色 #00FF00 黄色 #FFFF00
Pspad软件
演示pspad使用
本课内容结束
请准备9月25日上实验课 地点：综合楼C303、C302机房 上机名单贴在门上
实验内容：WEB服务器的安装
例子:
空格 左尖括号< < 等等
Q3-6 静态网页制作(HTML)
超链接(锚和href属性)
<a> (锚标签) <a href=“”>网易</a>
target属性 name属性 (给锚命名,在一个页面内部跳转) href=“url#锚名称” href=“mailto:aaa@” 电子邮件链接
Q3-5 什么是HTML文件
应该注意的细节
小写标签(尽管HTML不严格限制大小写),下一代 xhtml规定要严格限制使用小写标签
扩展名推荐使用.html 推荐使用纯文本编辑器来学习HTML(pspad) 推荐使用IE和firefox两种浏览器来调试网页,这样
可以获得更强的网页效果兼容性
SUCCESS
THANK YOU
2019/8/14
Q3-2 WWW如何工作?
Q3-2 WWW如何工作?
INTERNET 信息服务 WWW
想象一下我们是如 何接受互联网的服 务的？
软件 Browser
Q3-2 WWW如何工作?
超链接(Hyper Link)
Hyperlink
Q3-2 WWW如何工作?
关键词 keywords
网页(web page)*** Web 服务器(web server)*** Web 客户端(web client)*** 浏览器(Browser)**** 超链接(Hyper Link)****
红色 #FF0000 绿色 #00FF00 黄色 #FFFF00
Pspad软件
演示pspad使用
本课内容结束
请准备9月25日上实验课 地点：综合楼C303、C302机房 上机名单贴在门上
实验内容：WEB服务器的安装
例子:
空格 左尖括号< < 等等
Q3-6 静态网页制作(HTML)
超链接(锚和href属性)
<a> (锚标签) <a href=“”>网易</a>
target属性 name属性 (给锚命名,在一个页面内部跳转) href=“url#锚名称” href=“mailto:aaa@” 电子邮件链接
Q3-5 什么是HTML文件
应该注意的细节
小写标签(尽管HTML不严格限制大小写),下一代 xhtml规定要严格限制使用小写标签
扩展名推荐使用.html 推荐使用纯文本编辑器来学习HTML(pspad) 推荐使用IE和firefox两种浏览器来调试网页,这样
可以获得更强的网页效果兼容性
SUCCESS
THANK YOU
2019/8/14
Q3-2 WWW如何工作?
Q3-2 WWW如何工作?
INTERNET 信息服务 WWW
想象一下我们是如 何接受互联网的服 务的？
软件 Browser
Q3-2 WWW如何工作?
超链接(Hyper Link)
Hyperlink
Q3-2 WWW如何工作?
关键词 keywords
网页(web page)*** Web 服务器(web server)*** Web 客户端(web client)*** 浏览器(Browser)**** 超链接(Hyper Link)****
静态网页设计与制作.ppt
优点：同链接的源点无关，只要网站地址不变更，无论文件 在站点
中如何移动，都可以正常实现跳转。 缺点：
1.不利于测试。
2.不利于站点的移植。 ② 文档相对(relative)路径（不完整，以当前文件和你要连接的文件 它们之间存在的路径关系）。 比如a.html b.html,它们处于同一级或是同一个文件夹中，我们 在定义这个路径关系时，就只用在a.html的连接FLASH动画
方法：[插入]
[媒体]
[SWF]
和插入图片一样，当选择的swf文件不在你的站点下，系统会自动提醒 你是否把swf文件拷贝到你的站点下面，这个时候就点“确定”。 插入的flash动画以flash内容占位符的形式显示在编辑窗口中，不会显 示Flash的实际内容。
静态网页设计与制作
<bgsound src=“music/….mp3” loop=“” /> loop的值“-1”为无限循环，“0”为不循环。
静态网页设计与制作
第五讲 网页中的链接
1. 插入滚动文字 2. 网页中的链接
网页设计与网站策划
插入滚动文字及控制滚动文字
我们无法通过DreamweaverCS5的可视化来制作滚动效果，只能用HTML代码来 实现。 <marquee></ marquee > （专用于实现滚动） 控制滚动文字： <marquee direction=” ”></ marquee > （滚动方向） <marquee scralldelay=” ”></ marquee > （滚动延迟，以毫秒为单位） <marquee scrollamount=“ ”></ marquee > （滚动速度，3是中速） onmouseover=“this.stop()”（当鼠标在上面时） onmouseout=“this.start()”（当鼠标离开时）
Dreamweaver静态网页制作过程(ppt 39页)
c)Background（背景） 在这里可以为文档页面指定背景颜色。实际上设置的 是<body>标记的bgcolor属性。
d)Text（文本） 这里可以设置文档页面中文字的前景颜色，实际上设置的是 <body>标记的text属性。
e)Links（链接） 这里可以设置文档页面中尚未访问过的超级链接的文字颜色， 实际上设置的是<body>标记的link属性。
Dreamweaver静态网页制作(续)
地机上所做好的静态网页（文件名 一般为index.htm)上传至服务 器中，然后用/用户名/index.htm来访问 所上传的网页。检查是否正确。
方法二： 通过PWS来实现，在个人机器上将网页文件（包括图片、声音、 视频、动画等元素）拷贝至C:\inetpub\wwwroot\目录下，然后 在浏览器中输入http://127.0.0.1/ 如果不能正确的看到网页，应 该检查一下PWS WEB管理器的默认的文件是否设置为
index.htm
er静态网页制作(续)
三、基本操作 1、编缉文本 1）添加文本的方法是一种是直接在文档窗口中键入文本内容，另一种是在文
档窗口中，将插入点设置到要放置文本的地方，打开Edit下拉菜单，将文 本导入。 2）编缉文本（大小、颜色、字体、样式） 可以直接通过属性面板来实现或通过选择“文本字体”来设置 2、超链接 创建超链接最常见的做法是将超链接信息设置在文本及图像上。使其链接至其 它的网页或网站上。源端点和目标端点 目标端点有：图片、电子邮件地址、多媒体文件、程序（如： javascript:window.close()关闭当前窗口 javascript:windows.print()打印文 档 1）链接的类型
Dreamweaver静态网页制作
d)Text（文本） 这里可以设置文档页面中文字的前景颜色，实际上设置的是 <body>标记的text属性。
e)Links（链接） 这里可以设置文档页面中尚未访问过的超级链接的文字颜色， 实际上设置的是<body>标记的link属性。
Dreamweaver静态网页制作(续)
地机上所做好的静态网页（文件名 一般为index.htm)上传至服务 器中，然后用/用户名/index.htm来访问 所上传的网页。检查是否正确。
方法二： 通过PWS来实现，在个人机器上将网页文件（包括图片、声音、 视频、动画等元素）拷贝至C:\inetpub\wwwroot\目录下，然后 在浏览器中输入http://127.0.0.1/ 如果不能正确的看到网页，应 该检查一下PWS WEB管理器的默认的文件是否设置为
index.htm
er静态网页制作(续)
三、基本操作 1、编缉文本 1）添加文本的方法是一种是直接在文档窗口中键入文本内容，另一种是在文
档窗口中，将插入点设置到要放置文本的地方，打开Edit下拉菜单，将文 本导入。 2）编缉文本（大小、颜色、字体、样式） 可以直接通过属性面板来实现或通过选择“文本字体”来设置 2、超链接 创建超链接最常见的做法是将超链接信息设置在文本及图像上。使其链接至其 它的网页或网站上。源端点和目标端点 目标端点有：图片、电子邮件地址、多媒体文件、程序（如： javascript:window.close()关闭当前窗口 javascript:windows.print()打印文 档 1）链接的类型
Dreamweaver静态网页制作
HTML静态网页的制作 -ppt课件
③ 单击“确定”按钮。此时，属性面板上的字体下拉列表中
已经添加了“隶书”等字体。
整理ppt
19
(4) 将第一段文本的颜色设置为红色，将第三段文本的颜色设 置为十六进制代码#3333CC蓝色，将后面文本的颜色设置为十六 进制代码#FF00FF的淡紫色。操作步骤如下：
① 首先选中第一段文本；
② 单击属性面板上的字体颜色按钮，在“颜色”调色板中用 吸管吸取红色即可，如下图所示。
整理ppt
26
(2) 调整图像的对齐方式。关于图像，在属性面板上有两种对齐方 式：图像在页面中的对齐方式及图像和周围元素的对齐方式。
整理ppt
27
① 调整图像在页面中的对齐方式
分别单击
3个按钮，可以看到图像分别位于页面的左
边、中间和右边。再次单击相应对齐按钮，图像回到原来的位
置上。此时单击左对齐按钮。
整理ppt
33
(3) Dreamweaver默认的水平线颜色为灰色，要将水平线的颜色 设置为黄色，操作步骤如下： ① 选中上面所插入的水平线； ② 单击水平线属性面板的 按钮，打开快速标签编辑器； ③ 在标签中插入属性color=“#FFFF00”或color=“yellow”；
④ 按F12预览，便可看到水平线是黄色。
整理ppt
2
目录
2.1 常用的网页制作工具
2.2 制作第一个简单网页
2.3 超文本和超图像链接
2.4 网页制作中的Flash动画
2.5 利用表格和框
整理ppt
3
2.1 常用的网页制作工具 Dreamweaver
Dreamweaver是一套专业化的网页创作工具，它采用“所 见即所得”的可视化编辑方式，能够快速高效地创建各种具 有专业水平的网页，不需要编写任何代码。如果需要在代码 界面进行工作，只需进入HTML代码窗口或源代码检视器中， 就能同步看到Dreamweaver生成的源代码。它支持最新的 DHTML、CSS标准及分层技术，具有极好的兼容性，适用于 各种平台和各种浏览器。
网站开发(第2章) 静态网页设计PPT课件
§2.6 插入多媒体对象
二、插入声音
设置网页背影音乐：
<bgsound src="1.mp3" loop="-1" volume="-500" /> <embed src="1.mp3" autostart="true" loop="true" hidden="true"></embed>
写在最后
§2.2 网页文字应用
4、应用段落标题样式
1）将插入点至于段落之中，或选取段落中 的某些文本。 2）打开属性面板上的“格式”下拉列表，选择 一个选项。被选样式关联的 HTML 标记就会应 用到整个段落。
注：选择 “无”则会把段落格式给删除掉 。
§2.2 网页文字应用
5、列表的使用 1）有序列表
有序列表又称为编号列表，是有一定排列 顺序的列表，一般前面有数字前导字符，其中 前导字符可以是阿拉伯数字、英文字母或罗马 数字等。
§2.1 网页的新建、保存和编辑
二、设置页面属性 编辑网页之前，还需要对页面进行一些简单的属
性设置以方便以后的工作。
页面的属性包括页面的标题、背景图像、背景颜 色等。
操作方法：单击“修改”菜单中的“页面设置” 命令，打开“页面设置”的对话框进行设置。
§2.2 网页文字应用
文本是网页的基本组成部分，设计出编排 序、整齐美观的文本是制作网页必须掌握的 内容。
形、圆形、多边形）创建热点，并分别在链接 框中输入每个热点的链接地址，在替代框中可 以输入中文，以提示的方式在浏览器中显示。
3）、重复以上步骤定义完所有的热点。
§2.5 创建超级链接
《静态网页设计》整体设计PPT文档27页
拉
60、生活的道路一旦选定，就要勇敢地 走到底 ，决不 回头。 ——左
《静态网页设计》整体设计
26、机遇对于有准备的头脑有特别的 亲和力 。 27、自信是人格的核心。
28、目标的坚定是性格中最必要的力 量泉源 之一， 也是成 功的利 器之一 。没有 它，天 才也会 在矛盾 无定的 迷径中 ，徒劳 无功。- -温斯顿．丘吉 尔。 30、我奋斗，所以我快乐。--格林斯 潘。
56、书不仅是生活，而且是现在、过 去和未 来文化 生活的 源泉。 ——库 法耶夫 57、生命不可能有两次，但许多人连一 次也不 善于度 过。— —吕凯 特 58、问渠哪得清如许，为有源头活水来 。—— 朱熹 59、我的努力求学没有得到别的好处， 只不过 是愈来 愈发觉 自己的 无知。 ——笛 卡儿
60、生活的道路一旦选定，就要勇敢地 走到底 ，决不 回头。 ——左
《静态网页设计》整体设计
26、机遇对于有准备的头脑有特别的 亲和力 。 27、自信是人格的核心。
28、目标的坚定是性格中最必要的力 量泉源 之一， 也是成 功的利 器之一 。没有 它，天 才也会 在矛盾 无定的 迷径中 ，徒劳 无功。- -温斯顿．丘吉 尔。 30、我奋斗，所以我快乐。--格林斯 潘。
56、书不仅是生活，而且是现在、过 去和未 来文化 生活的 源泉。 ——库 法耶夫 57、生命不可能有两次，但许多人连一 次也不 善于度 过。— —吕凯 特 58、问渠哪得清如许，为有源头活水来 。—— 朱熹 59、我的努力求学没有得到别的好处， 只不过 是愈来 愈发觉 自己的 无知。 ——笛 卡儿
静态网页的制作PPT课件
.
1.4静态网页的制作工具
1、图像处理与动画制作工具：Photoshop、Flash 等。 2、网页编辑工具：1）纯文本编辑工具，如 Notepad等；2）转换工具，如word等；3）专用工 具，如FrontPage、Dreamweaver等。 3、网页上传工具：1)FTP工具，如WS-FTP， CuteFTP等；2)专用网页编辑软件的文件传输功能。 4、网页优化工具：网页减肥茶、网页优化大师等。
.
1.3静态网页的工作过程
静态网页制作概括起来，有如下几个部分： 1、网页素材搜集与制作（图像处理与动画制作） 经常需要在网页中应用一些图像与动画，一方面是由于 实际内容的需要，一方面是为了增加网页吸引力。在WWW 上通常采用jpeg、GIF格式的图片和flash等格式的动画。 2、网页版式设计 规划各元素在网页中的位置关系和表现方法，合理安排 图像、文本等元素，使网页布局合理、美观大方。 3、文本编写 自己的网页中需要大量的文字材料，这就要在网页编辑 器中用HTML语言中的标签编写。也可以利用网页编辑工具 的“所见即所得”功能，直接写入文字。 4、处理网页之间的关联 主要是建立合理、高效的网页导航系统。 5、网页发布 主要是将建设好的网页上传到服务器中供用户浏览。
.
2.2 HTML编写工具
用HTML编写的文件(文档)的扩展名是．HTML或.HTM。 它们是供浏览器解释浏览文件的格式。可以使用记事本、写 字板等编辑工具来编写HTML文件。HTML语言使用标志对 (标签)的方法来编写文件，既简单又方便。它通常使用<标志 名></标志名>来表示标志的开始和结束(例如 <HTML></HTML>标志对)，因此在HTML文档中这样的标志 对都必须是成对使用的。 在今天，做网页的工具到处都是,只要动几下鼠标，一个 精彩的网页就出来了，HTML是否要学呢？答案是肯定的， 因为工具就是工具，它们生成的代码是机械的，不够简洁， 使网页打开的速度减慢。还有很多新的功能，工具是生成不 了的。必需对代码进行编辑。
1.4静态网页的制作工具
1、图像处理与动画制作工具：Photoshop、Flash 等。 2、网页编辑工具：1）纯文本编辑工具，如 Notepad等；2）转换工具，如word等；3）专用工 具，如FrontPage、Dreamweaver等。 3、网页上传工具：1)FTP工具，如WS-FTP， CuteFTP等；2)专用网页编辑软件的文件传输功能。 4、网页优化工具：网页减肥茶、网页优化大师等。
.
1.3静态网页的工作过程
静态网页制作概括起来，有如下几个部分： 1、网页素材搜集与制作（图像处理与动画制作） 经常需要在网页中应用一些图像与动画，一方面是由于 实际内容的需要，一方面是为了增加网页吸引力。在WWW 上通常采用jpeg、GIF格式的图片和flash等格式的动画。 2、网页版式设计 规划各元素在网页中的位置关系和表现方法，合理安排 图像、文本等元素，使网页布局合理、美观大方。 3、文本编写 自己的网页中需要大量的文字材料，这就要在网页编辑 器中用HTML语言中的标签编写。也可以利用网页编辑工具 的“所见即所得”功能，直接写入文字。 4、处理网页之间的关联 主要是建立合理、高效的网页导航系统。 5、网页发布 主要是将建设好的网页上传到服务器中供用户浏览。
.
2.2 HTML编写工具
用HTML编写的文件(文档)的扩展名是．HTML或.HTM。 它们是供浏览器解释浏览文件的格式。可以使用记事本、写 字板等编辑工具来编写HTML文件。HTML语言使用标志对 (标签)的方法来编写文件，既简单又方便。它通常使用<标志 名></标志名>来表示标志的开始和结束(例如 <HTML></HTML>标志对)，因此在HTML文档中这样的标志 对都必须是成对使用的。 在今天，做网页的工具到处都是,只要动几下鼠标，一个 精彩的网页就出来了，HTML是否要学呢？答案是肯定的， 因为工具就是工具，它们生成的代码是机械的，不够简洁， 使网页打开的速度减慢。还有很多新的功能，工具是生成不 了的。必需对代码进行编辑。
静态网页设计精品PPT课件
<body></body>：主体部分 存放页面的内容标识
加入HTML注释：用<!--and-->标记将注释文字括起来， 此标记可以跨行使用。
创建文本
控制文本显示的常用标记： 换行标记<br>：标记后的正文不另起一行，显示效果
上另起一行。 段落标记<p>：标记后面的正文将另起一段。
<p>的唯一属性是align，用以调准文字位置（left，center， right）。
target="_blank" <a></a>标签和Jscript和Vbscript结合使用的一
些小技巧
创建列表
无序列表：
语法：<ul>...</ul> 内容：包含一个或多个<li>元素来定义列表项。 type属性：编号样式。取值disc|square|circle（实
心圆|方框|空心圆）。
有序列表：
每个元素按数字顺序标号。 语法：<ol>...</ol> 内容：包含一个或多个<li>元素来定义列表项。 type属性：编号样式。取值1|a|A|i|I（十进制数|小
写字母|大写字母|小写罗马数字|大写罗马数字）
创建表格
<table> <tr> <th></th> <th></th> <tr> <td></td> <td></td> </table>
<!--定义表格> <!--定义表行>
<!--定义表头>
加入HTML注释：用<!--and-->标记将注释文字括起来， 此标记可以跨行使用。
创建文本
控制文本显示的常用标记： 换行标记<br>：标记后的正文不另起一行，显示效果
上另起一行。 段落标记<p>：标记后面的正文将另起一段。
<p>的唯一属性是align，用以调准文字位置（left，center， right）。
target="_blank" <a></a>标签和Jscript和Vbscript结合使用的一
些小技巧
创建列表
无序列表：
语法：<ul>...</ul> 内容：包含一个或多个<li>元素来定义列表项。 type属性：编号样式。取值disc|square|circle（实
心圆|方框|空心圆）。
有序列表：
每个元素按数字顺序标号。 语法：<ol>...</ol> 内容：包含一个或多个<li>元素来定义列表项。 type属性：编号样式。取值1|a|A|i|I（十进制数|小
写字母|大写字母|小写罗马数字|大写罗马数字）
创建表格
<table> <tr> <th></th> <th></th> <tr> <td></td> <td></td> </table>
<!--定义表格> <!--定义表行>
<!--定义表头>
静态网页设计与制作说课.ppt
中认真关注，随时解答疑问。
实践法
24
学生汇报计划与实施过程，回答同学与老师提出的问题。
重点检查流程的认知和网站团队运作，师生共同评价各
小组及个人的工作成果： 1.自评：学生对本项目的整个实施过程进行评价； 2.互评：以小组为单位，分别对其它小组的工作进 行评价；
提问引导法 实践法 讨论法
2
3.教师评价：教师对互评结果进行评价，指出每个
学习情境描述
“个人网站制作”学习情境表1-
1
学习情境1：个人网站制作
学时：38
项目目标
1．掌握个人网站制作的流程和方法、学习欣赏网站，制订个人网站制作策划方案； 2．熟悉Dreamweaver基本工具的使用； 3.分组制作一个个人网站； 4.培养学生团队精神、创新能力、自主探究学习能力、表达能力。
社会能力目标
沟通能力协作精神 勤于思考认真做事 勇于创新敬业乐业
自主学习能力 知识应用能力 良好的职业道德 较强的工作责任心
课程设计理念
以职业资格为依据
内容选取
教学组织
课程标准
以工作需求为目标 以工作过程为主线
以真实项目为载体
教学实施
表现形式
以实际工作为场景
课程设计思路
企业 调研
确定岗 位（群）
5%
5
项目制作报告
项目制作工作计划、总结和成果评价表书写认真、完整、字迹清 楚、页面整洁，项目制作收获较大
10%
合计
100%
敬请专家指导！ 谢谢！
教师知识与能 熟悉网站制作流程，网页制作Dreamweavera工具，网页素材制作方法，网页制作方
力要求
法与技巧；较强的归纳能力；较强的教学管理与教学组织能力。
第5章 制作静态网页.ppt
<link rel="stylesheet" href="my.css" style="text/css" /> 或
<style type="text/css"> <!--
@import url("my.css"); -->
</style>
5.2.2 CSS简介
2. CSS选择器 CSS通过为指定的元素定义样式来达到样式控制的 目的。定义CSS样式的格式为：
例：<img src="images/logo.gif" width="200" alt="头像" />
src属性指明要显示的图片文件的路径，与超链接一样， 也可使用绝对路径或相对路径； width属性表示所显示的图片的宽度，这里设为了 200px，即200个像素。还可设定height属性，表示 图片的显示高度； alt属性，表示未找到相应的图片文件时，用以替代图 片而显示的文字内容。
以将CSS划分为内联样式、嵌入样式和外部样式3 种形式。
5.2.2 CSS简介
1. 在网页中使用CSS的三种方式 1) 内联样式 又称为“行内样式”，通过设定HTML标签的 style属性值，嵌入CSS代码。如： <p style="color:black">Hello</p>
5.2.2 CSS简介
value属性表示该输入元素的初始值，默认值为空字符串。
5.2.1 HTML的常用标签
input标签的type 属性可取不同的值， 在页面上表现为不 同的形态，如右表 所示 。
<style type="text/css"> <!--
@import url("my.css"); -->
</style>
5.2.2 CSS简介
2. CSS选择器 CSS通过为指定的元素定义样式来达到样式控制的 目的。定义CSS样式的格式为：
例：<img src="images/logo.gif" width="200" alt="头像" />
src属性指明要显示的图片文件的路径，与超链接一样， 也可使用绝对路径或相对路径； width属性表示所显示的图片的宽度，这里设为了 200px，即200个像素。还可设定height属性，表示 图片的显示高度； alt属性，表示未找到相应的图片文件时，用以替代图 片而显示的文字内容。
以将CSS划分为内联样式、嵌入样式和外部样式3 种形式。
5.2.2 CSS简介
1. 在网页中使用CSS的三种方式 1) 内联样式 又称为“行内样式”，通过设定HTML标签的 style属性值，嵌入CSS代码。如： <p style="color:black">Hello</p>
5.2.2 CSS简介
value属性表示该输入元素的初始值，默认值为空字符串。
5.2.1 HTML的常用标签
input标签的type 属性可取不同的值， 在页面上表现为不 同的形态，如右表 所示 。
《静态网页的制作》课件
表单验证的实现
验证用户输入
使用JavaScript可以验证用户 在表单中输入的数据，确保数 据的正确性和有效性。
防止恶意输入
通过JavaScript的验证，可以 防止恶意用户输入对网站造成 安全威胁的内容，如SQL注入 、跨站脚本攻击等。
提高用户体验
通过实时验证，用户可以立即 知道输入的数据是否符合要求 ，提高用户体验。
动态内容的生成
数据动态展示
使用JavaScript可以动态展示数据，如动态表格、图 表等。
动态内容更新
通过JavaScript可以动态更新网页内容，根据用户的 操作或时间等条件进行内容的变化。
个性化内容推荐
使用JavaScript可以根据用户的喜好和行为，推荐个 性化的内容和产品。
06
静态网页的优化与发布
总结词：详细描述
动画：CSS提供了关键帧动画，可以创建复杂的动画 效果。通过改变元素的属性值，可以实现元素的移动
、旋转、缩放等动画效果。
过渡：CSS的过渡属性可以实现元素属性值的变化效 果，如颜色、大小等。通过过渡效果，可以创建平滑
的视觉效果，提高用户体验。
05
JavaScript在静态网页中的应用
80%
特点
可以实现响应用户操作、动态更 新内容等功能，提升用户体验。
图像处理软件
作用
用于处理和优化网页中使用的图片。
常用软件
Photoshop、GIMP等。
特点
可以进行图片裁剪、调整色彩、添加滤镜等操作 ，提高图片质量。
03
静态网页的基本构成
HTML文档结构
HTML文档的基本元素
HTML文档由`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`等元素组成， 每个元素都有其特定的作用。