静态网页制作课件
合集下载
设计与构建静态网站系列视频课程(HTML+CSS)课件PPT模板
0 2
3-2选择器的 优先级别
0
0 6
3-6伪类
第3章css选择器
3-7伪类控制子级元素 3-8伪类实现显示与隐藏案例 3-9伪元素before与after 3-10伪元素first-letter
感 谢 聆 听
02
第2章css是什么
第2章css是什么
2-1css是什么 2-2内联样式 2-3内嵌样式表 2-4外联样式表 2-5css的语法结构 2-2内联样式 2-3内嵌样式表 2-4外联样式表 2-5CSS的语法结构
03
第3章css选择器
第3章css 选择器
0 1
3-1基本选择 器
0 4
3-4属性选择 器
(html+css)
课设 程计
与 构 建 静 态 网 站 系 列 视 频
演讲人
2 0 2 x - 11 - 11
目录
01. 第1章html是什么 02. 第2章css是什么 03. 第3章css选择器
01
第1章html是什么
第1章html是什么
1-1html是什么 1-2第一个html页面 1-3html的元素 1-4html的头部信息 1-5html元素的属性与html注释 1-2第一个HTML页面 1-3HTML的元素 1-4HTML的头部信息 1-5HTML元素的属性与HTML注释
第1讲静态网页文件结构ppt课件
标示HTML文档的结束
Notice：每一个网页中以上这三对标签是必不可少的。
2.HTML的基本语法
2.1HTML语言的概述。
HTML—被称为超文本“标记”语言。何为超文本，那何 为标记呢？我们来了解一下。
1.首先网页除了可以显示文字之外还能显示图片、视频等非 文本信息，因此称为超文本。而所有的信息和数据又都必 须贴上正确的“标记”才能被浏览器识别。
<img src="2-5-1.jpg" width="652px" height="142px“
alt=“broadview banner“ />
<p>博文视点好书不断，为读者提供最优秀的IT专业图书。</p>
<img />是HTML标记中为数不多的单标记，请记 得别丢失了 /，以及属性值加 “ ”< Nhomakorabeatd>
</tr>
</table>
</body>
所有的双标记，有开始必须要有结束。也
</html>
就是标记要闭合。
<body>起始标签 </body>结束标签
2.双标记 <标记名称>…</标记名称> 例如：
<body>…网页内容</body> 把前后标签直接的内容作为网 页主体内容
<b>...字体加粗</b>
把标签之间的字体加粗
2.3 标记的组成
<img src=“1.jpg”> 一个标记不论单双都必须写在”<>”内
2.4 标记的定义、使用规则
Notice：每一个网页中以上这三对标签是必不可少的。
2.HTML的基本语法
2.1HTML语言的概述。
HTML—被称为超文本“标记”语言。何为超文本，那何 为标记呢？我们来了解一下。
1.首先网页除了可以显示文字之外还能显示图片、视频等非 文本信息，因此称为超文本。而所有的信息和数据又都必 须贴上正确的“标记”才能被浏览器识别。
<img src="2-5-1.jpg" width="652px" height="142px“
alt=“broadview banner“ />
<p>博文视点好书不断，为读者提供最优秀的IT专业图书。</p>
<img />是HTML标记中为数不多的单标记，请记 得别丢失了 /，以及属性值加 “ ”< Nhomakorabeatd>
</tr>
</table>
</body>
所有的双标记，有开始必须要有结束。也
</html>
就是标记要闭合。
<body>起始标签 </body>结束标签
2.双标记 <标记名称>…</标记名称> 例如：
<body>…网页内容</body> 把前后标签直接的内容作为网 页主体内容
<b>...字体加粗</b>
把标签之间的字体加粗
2.3 标记的组成
<img src=“1.jpg”> 一个标记不论单双都必须写在”<>”内
2.4 标记的定义、使用规则
《静态网页设计》整体设计PPT共27页
《静态网页设计》整体设计
1、合法而稳定的权力在使用得当时很 少遇到 抵抗。 ——塞 ·约翰 逊 2、权力会使人渐渐失去温厚善良的美 德。— —伯克
3、最大限度地行使权力总是令人反感 ；权力 不易确 定之处 始终存 在着危 险。— —塞·约翰逊 4、权力会奴化一切。——塔西佗
5、虽然权力是一头固执的熊，可是金 子可以 拉着它 的鼻子 走。— —莎士 比
61、奢侈是舒适的，否则就不是奢侈 。——CocoCha nel 62、少而好学，如日出之阳；壮而好学 ，如日 中之光 ；志而 好学， 如炳烛 之光。 ——刘 向 63、三军可夺帅也，匹夫不可夺志也。 ——孔 丘 64、人生就是学校。在那里，与其说好 的教师 是幸福 ，不如 说好的 教师是 不幸。 ——海 贝尔 65、接受挑战，就可以享受胜利的喜悦 。——杰纳勒
1、合法而稳定的权力在使用得当时很 少遇到 抵抗。 ——塞 ·约翰 逊 2、权力会使人渐渐失去温厚善良的美 德。— —伯克
3、最大限度地行使权力总是令人反感 ；权力 不易确 定之处 始终存 在着危 险。— —塞·约翰逊 4、权力会奴化一切。——塔西佗
5、虽然权力是一头固执的熊，可是金 子可以 拉着它 的鼻子 走。— —莎士 比
61、奢侈是舒适的，否则就不是奢侈 。——CocoCha nel 62、少而好学，如日出之阳；壮而好学 ，如日 中之光 ；志而 好学， 如炳烛 之光。 ——刘 向 63、三军可夺帅也，匹夫不可夺志也。 ——孔 丘 64、人生就是学校。在那里，与其说好 的教师 是幸福 ，不如 说好的 教师是 不幸。 ——海 贝尔 65、接受挑战，就可以享受胜利的喜悦 。——杰纳勒
静态网页设计与制作说课ppt
学习情境描述
学习情境1：个人网站制作
“个人网站制作”学习情境表11
学时：38
项目目标
1．掌握个人网站制作的流程和方法、学习欣赏网站，制订个人网站制作策划方案； 2．熟悉Dreamweaver基本工具的使用； 3.分组制作一个个人网站； 4.培养学生团队精神、创新能力、自主探究学习能力、表达能力。 1．经典个人网站欣赏分析； 2．熟悉网站的开发流程，能够遵循网页的设计原则按需求进行网站的规划与组织； 3．能够创建、编辑与管理站点和网页； 4．会利用表格进行页面的排版布局； 5．会在网页中使用和编辑基本元素如文本、图像、动画等； 6．会在网页中合理运用超级链接； 7．个人网站素材制作； 8．能够进行网站的测试、发布、维护与更新管理； 9．个人网站汇报文档与PPT制作。
教学手段
教学手段
利用网络技术 建立虚拟网络 实验环境 。
将多种现代教 学媒体与自主 开发课件优化 组合，开发制 作课堂教学网 站。
考核模式
项目考核
技能考证
知识的应 用、网页 制作与设 计的基本 技能和综 合能力、 学习态度
网页制作 的基本技 能和综 合技能
项目考核标准
序号 考核项目 （1）内容方面：主题明确，内容健康、具体，各个页面的文字、 图像、动画能够清晰地表达主题。 （2）版面结构：版面结构合理，每个页面都有返回上一级或链接 到其他页面的文字或按钮。 （3）视觉感受：色彩搭配协调、美观，页面设计规范，没有出现 乱码、空链接和错误链接。 （4）网站风格：网站具有特色，主题、文字、图像、动画有创新。 70% 评分 比例
1
网站效果
2 3
4 5
纪律考核 创新情况
成员协作 项目制作报告
实训期间组织纪律性强，无迟到、早退、缺课现象，工作认真负 责
静态网页与动态网页ppt课件
搜索引擎的工作原理大致可以分为：
搜集信息→预处理，建立网页索引库 →接受查询→向用户返回资料
9
3.2 HTML
HTML（HyperText Mark-up Language）即超文本标记 （链接）语言，是目前网络上应用最为广泛的语言，也是 构成网页文档的主要语言。
结构： <head> …描述浏览器所需的信息 如"noarchive"> <head/>
更改内容时，需重新编辑网页并上传
3
1.2 静态网页的优点
访问速度快
资源访问请求
传送静态页面
Browser
Server
容易被搜索引擎收录
4
1.3 静态网页的缺点
缺乏交互性
代码一般不被服务器执行，无法从服务器中获取信息
维护工作量大
必须手工编辑，并重新上传到服务器
5
2.1 什么是动态网页
<body> …包含所要说明的具体内容
<body/> HTML是组合成一个文本文件的一系列标签，一般成对出现，如
<nobr>...</nobr>水域(不换行) <p>...</p>水域(段落) ，单个标签， 如<br>
10
3.3 SEO
搜索引擎最佳化（Search Engine Optimization），又称为搜索引擎优化
12
本次寻宝成功！
希望大家继续探索…… 在知识的海洋里 发掘更多的宝藏
13
提高SEO的几个简单有效手段：
1. 高质量的内容，从而产生高质量的外部链接 2. 和别的网站交换链接，也可以注册自动生
搜集信息→预处理，建立网页索引库 →接受查询→向用户返回资料
9
3.2 HTML
HTML（HyperText Mark-up Language）即超文本标记 （链接）语言，是目前网络上应用最为广泛的语言，也是 构成网页文档的主要语言。
结构： <head> …描述浏览器所需的信息 如"noarchive"> <head/>
更改内容时，需重新编辑网页并上传
3
1.2 静态网页的优点
访问速度快
资源访问请求
传送静态页面
Browser
Server
容易被搜索引擎收录
4
1.3 静态网页的缺点
缺乏交互性
代码一般不被服务器执行，无法从服务器中获取信息
维护工作量大
必须手工编辑，并重新上传到服务器
5
2.1 什么是动态网页
<body> …包含所要说明的具体内容
<body/> HTML是组合成一个文本文件的一系列标签，一般成对出现，如
<nobr>...</nobr>水域(不换行) <p>...</p>水域(段落) ，单个标签， 如<br>
10
3.3 SEO
搜索引擎最佳化（Search Engine Optimization），又称为搜索引擎优化
12
本次寻宝成功！
希望大家继续探索…… 在知识的海洋里 发掘更多的宝藏
13
提高SEO的几个简单有效手段：
1. 高质量的内容，从而产生高质量的外部链接 2. 和别的网站交换链接，也可以注册自动生