资源简介

(共17张PPT)
汇报人：xxx
GENERAL TEACHING
1.1编辑网页信息
问题导入
学校即将迎来一年一度的科技节，本届科技节的主题是”科技创新，自主可控“。本单元打算制作一个与主题相关的网页，让更多的同学了解我国科技发展的现状，感受科技的魅力。
大家想一想:“制作网页应该使用什么工具呢 ”“怎样才能制作一个好的网页 ......
活动1：浏览网页
活动说明：
浏览网页是获取信息的重要手段，随着计算机技术和网络技术的飞速发展网页的呈现形式越来越丰富。在互联网中搜索并浏览与科技创新相关的网页，把你认为优秀的网页收藏下来，完成表格，总结这些优秀的网页在设计与制作方面的可借鉴之处。
网页收藏记录表 网页名称 可借鉴之处
网页是构成网站的基本元素，是承载各种网站应用的平台，是一个包含HTML标签的纯文本文件，采用超文本标记语言格式(文件扩展名为.html或.htm)。
什么是网页？
边看边思：网页上有哪些元素？
网页的基本元素
动画在网页中的作用是有效地吸引访问者更多的注意。
Flash动画
声音是多媒体和视频网页重要的组成部分。
声音
表格是在网页中用来控制面业信息的布局方式。
表格
视频文件的采用是网页效果更加精彩且富有动感。
视频
图像元素在网页中具有提供信息并展示直观形象的作用。
图像
文本是网页上最重要的信息载体和交流工具，网页中的主要信息一般都以文本形式为主。
文本
01
02
03
04
05
06
网页的基本元素
导航栏：导航栏在网页中是一组超链接，其连接的目的端是网页中重要的页面。
活动2：认识h5网页
随着移动互联网的不断发展，越来越多的商家和企业利用 H5 网页来做营销推广。
我们平时在移动设备上看到的邀请函、贺卡、小游戏、测试题等很多都是 H5 网页。
寻找H5网页
1、什么是H5网页？
2、你使用过哪些H5网页，它们有什么特点？
认识H5页面
H5页面与传统的PC端网页相比，H5页面更加轻便、美观、互动性强，适合于在移动设备上浏览，提供了更好的用户体验。H5页面可以包含文字、图片、音频、视频和动画等多种元素，还可以与用户进行互动，如表单、投票和分享等。
H5页面:又称HTML5页面，是一种基于HTML5技术开发的动态网页。
静态网页，其内容是预先确定的，并存储在Web服务器或者本地计算机/服务器之上。模板一旦确定下来，不容易修改，更新比较费时费事。
动态网页，是取决于由用户提供的参数，并根据存储在数据库中的网站上的数据中创建的页面。
静态网页
动态网页
静态网页VS动态网页
认识H5页面
腾讯新闻的移动端网站就是一个典型的H5网站。它采用了响应式设计，能够自适应不同尺寸的屏幕，保证在不同设备上都能获得良好的阅读体验。同时，腾讯新闻还利用了HTML5的多媒体特性，在网站上嵌入了丰富的视频和音频内容，增强了新闻的生动性和可读性。
腾讯新闻
认识H5页面
7月23日，网易云音乐推出《云村观察室》h5，盘点云村史上最值得珍藏的高光时刻。从歌曲、专辑、歌手、视频、社区、用户、直播&电台等角度为用户带来一波回忆杀，开启云村音乐回忆拼图，并崭新推出小彩蛋环节，为用户送上一份别开生面暖心祝福。
网易云音乐
在《云村观察室》H5中，最为特殊的是「一个彩蛋」环节，网易云音乐收集到云音乐用户评论中出现次数最多的十个关键词，点开每个关键词都有一句文字祝福，每句祝福由云音乐用户评论出现次数最多的关键词组成。
制作H5页面
（1）登录在线网页编辑平台（http://www.）。单击“创建作品”菜单，进入到在线网页编辑窗口。
（2）添加页面。单击工具栏中的“页面”按钮，在“舞台”下方增加一个页面对象，将该页面命名为“欢迎页”。
制作H5页面
（3）设置页面背景颜色或背景图片。输入十六进制颜色值或用吸管工具选择颜色。
制作H5页面
04 编辑文本
单击工具面板中的“中文字体”工具 ，并在舞台中单击，然后在弹出的“文本内容”对话框中输入标题文字。
05 设置文本属性
在属性面板中选择字体，设置字体的颜色、大小等属性。
制作H5页面
添加图片
单击工具面板中的图片工具，拖动鼠标，调整图片的大小和位置，松开鼠标后在弹出的“打开”对话框中选择要插入网页中的图片。
06
给文本添加动态效果
选中文本，单击菜单栏中的按钮，在下拉列表中为文本选择一种动态效果。
07
单击菜单栏中的“保存”按钮，保存网页文件。单击菜单栏中的“预览”按钮，预览网页效果。
保存并预览网页
08
制作H5页面
活动说明：
1、查找资料，选择你感兴趣的一种科技创新应用，下载文字介绍及图片；
2、创建H5页面，包括标题、文字、图片。
3、发布H5页面。
汇报人：xxx
GENERAL TEACHING
YOUR LOGO
金山办公软件有限公司
感
谢
观
看

展开更多......

收起↑