《网页设计与制作》教学课件ppt
合集下载
网页设计与制作教学课件
利用鼠标或键盘事件，触发元素的动 态变化。
通过改变DOM元素的属性或样式，实 现动态效果。
05
网页响应式设计
响应式设计概念
01 响应式网页设计是一种网页设计方法，旨在使网 页能够根据不同的设备和屏幕尺寸自适应显示， 提供更好的用户体验。
02 它通过使用媒体查询、流式布局、弹性图片和灵 活的字体等手段，使网页在不同设备上都能呈现 出良好的视觉效果和交互体验。
02 响应式设计可以提高网站的可用性和访问性，从 而增加用户满意度和网站流量。
媒体查询
媒体查询是响应式设计的核心技术之一，它允许网页根据设备的特定特 性（如屏幕宽度、高度、方向等）应用不同的CSS样式。
通过媒体查询，开发者可以针对不同的设备类型和屏幕尺寸编写特定的 CSS样式，以实现更好的布局和视觉效果。
04
网页交互与动画
网页交互设计
交互元素
包括按钮、表单、链接等， 设计时需考虑易用性和用 户体验。
导航菜单
设计清晰、直观的导航菜 单，方便用户快速找到所 需内容。
响应式设计
根据不同设备的屏幕大小 和分辨率，自动调整网页 布局和元素大小。
CSS动画
01
02
03
关键帧动画
通过定义关键帧和过渡效 果，实现元素的平滑运动。
响应性
设计适应不同设备和 屏幕尺寸的响应式网 站，以确保用户在不 同设备上都能获得良 好的浏览体验。
视觉层次
通过合理安排内容元 素的优先级和组织方 式，突出重要信息， 引导用户的注意力。
网页设计流程
需求分析
了解客户需求，明确网站目标和目标受众， 收集相关资料和竞争对手分析。
规划与草图
制定网站结构、布局和导航方案，绘制草图或 线框图，确定基本的设计风格和元素。
通过改变DOM元素的属性或样式，实 现动态效果。
05
网页响应式设计
响应式设计概念
01 响应式网页设计是一种网页设计方法，旨在使网 页能够根据不同的设备和屏幕尺寸自适应显示， 提供更好的用户体验。
02 它通过使用媒体查询、流式布局、弹性图片和灵 活的字体等手段，使网页在不同设备上都能呈现 出良好的视觉效果和交互体验。
02 响应式设计可以提高网站的可用性和访问性，从 而增加用户满意度和网站流量。
媒体查询
媒体查询是响应式设计的核心技术之一，它允许网页根据设备的特定特 性（如屏幕宽度、高度、方向等）应用不同的CSS样式。
通过媒体查询，开发者可以针对不同的设备类型和屏幕尺寸编写特定的 CSS样式，以实现更好的布局和视觉效果。
04
网页交互与动画
网页交互设计
交互元素
包括按钮、表单、链接等， 设计时需考虑易用性和用 户体验。
导航菜单
设计清晰、直观的导航菜 单，方便用户快速找到所 需内容。
响应式设计
根据不同设备的屏幕大小 和分辨率，自动调整网页 布局和元素大小。
CSS动画
01
02
03
关键帧动画
通过定义关键帧和过渡效 果，实现元素的平滑运动。
响应性
设计适应不同设备和 屏幕尺寸的响应式网 站，以确保用户在不 同设备上都能获得良 好的浏览体验。
视觉层次
通过合理安排内容元 素的优先级和组织方 式，突出重要信息， 引导用户的注意力。
网页设计流程
需求分析
了解客户需求，明确网站目标和目标受众， 收集相关资料和竞争对手分析。
规划与草图
制定网站结构、布局和导航方案，绘制草图或 线框图，确定基本的设计风格和元素。
网页设计与制作说课稿ppt课件
布局原则
电子信息工程系 数字媒体专业 祝小玲
情感与能力目标
培养学生知识迁移能力 促进学生实际应用能力 增强学生团队协作意识 提高审美能力与鉴赏能力
提纲 ◇课前分析ቤተ መጻሕፍቲ ባይዱ◇教学目标及重难点
教学目标 重点难点
◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教学重难点
教学重点
1.理解用表格在网页设计中的重要作用； 2. 掌握在网页中插入表格进行排版的技能；
网页设计与制作 ——表格布局
课前分析
教学目标及重难点 教法与学法
教学时间安排
电子信息工程系
数字媒体专业团队 祝小玲
教学设计
教学反思
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
课程分析
《网页设计与制作》课程是计算机、电子商务专 业的必开的一门专业课程，是一门实践性很强的专业 技术课程，又是一门主干课程。通过本课程的学习, 使学生掌握该软件的操作方法和操作技巧, 学会运用 其创建个人或企业网站.具备一定的网站设计能力。 通过实例的讲解，让学生掌握网页制作和网站开发的 知识
2.布置作业：利用表格定位网页的思想，设计“在 线购物网”二级页面的结构图，搜集素材。
电子信息工程系 数字媒体专业 祝小玲
提纲 ◇课前分析 ◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教学反思
1.学生能积极主动的投入到具体任务当中，学习兴趣高， 能在规定时间内制作简单网页。
组织教学 导入新课
讲授新课 应用新知识 课堂小结及布置作业
◇教学反思
电子信息工程系 数字媒体专业 祝小玲
电子信息工程系 数字媒体专业 祝小玲
情感与能力目标
培养学生知识迁移能力 促进学生实际应用能力 增强学生团队协作意识 提高审美能力与鉴赏能力
提纲 ◇课前分析ቤተ መጻሕፍቲ ባይዱ◇教学目标及重难点
教学目标 重点难点
◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教学重难点
教学重点
1.理解用表格在网页设计中的重要作用； 2. 掌握在网页中插入表格进行排版的技能；
网页设计与制作 ——表格布局
课前分析
教学目标及重难点 教法与学法
教学时间安排
电子信息工程系
数字媒体专业团队 祝小玲
教学设计
教学反思
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
课程分析
《网页设计与制作》课程是计算机、电子商务专 业的必开的一门专业课程，是一门实践性很强的专业 技术课程，又是一门主干课程。通过本课程的学习, 使学生掌握该软件的操作方法和操作技巧, 学会运用 其创建个人或企业网站.具备一定的网站设计能力。 通过实例的讲解，让学生掌握网页制作和网站开发的 知识
2.布置作业：利用表格定位网页的思想，设计“在 线购物网”二级页面的结构图，搜集素材。
电子信息工程系 数字媒体专业 祝小玲
提纲 ◇课前分析 ◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教学反思
1.学生能积极主动的投入到具体任务当中，学习兴趣高， 能在规定时间内制作简单网页。
组织教学 导入新课
讲授新课 应用新知识 课堂小结及布置作业
◇教学反思
电子信息工程系 数字媒体专业 祝小玲
网页设计与制作说课稿（盒子模型） -完整课件PPT
教学重难点
教学重点
掌握DIV+CSS布局应用与技巧，熟练CSS语法规则。
教学难点
深入理解布局的精髓——盒子模型以及如何灵活、简练的应用。
提纲
教法与学法
◇课前分析
◇教学目标及重难点
1
◇教法与学法 ◇教学时间安排 ◇教学设计
小组讨论法
宏观： 项目教学法
◇教学反思
直观演示法
微观
任务驱动法
活动探究法
提纲 ◇课前分析 ◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教材分析
上海交通大学出版社 《网页制作三合一案例教程》
第9章“CSS标准流布局”。 对页面进行整体布局——盒子 模型
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
学情分析
对文本、图形、动画等多媒体信息的处理技术 有了一定的使用经验，但基础差异大 计算机实际操作能力较弱 对理论讲解不感兴趣。 对网页内容、结构、效果等设计的优劣有一定 的感性认识，但自主创作设计能力不足
提纲 ◇课前分析 ◇教学目标及重难点
教学目标 重点难点
◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
展
示 与
自信感、成就感、责任心
评
价
以工作任务为主线，以学生为主体，以教师为主导，融“教、 学、做、评”为一体。
提纲
布置作业
◇课前分析
◇教学目标及重难点
◇教法与学法
第六章《网页的设计与制作》(浙教版)精品PPT教学课件
要插入列表或菜单，将光标定位后， 单击“表单”工具栏上的“列表/菜单”按 钮，即可插入一个列表或菜单。
2020/12/6
9
6.2 通过邮件接收表单
表单中的信息输入完毕以后需要将信 息提供给服务器端的相关人员，用户可以 通过表单域属性面板中的“动作”属性指 定通过电子邮件接收表单数据。
在属性面板的“动作”文本框中输入 mailto:***@***.***,也就是在mailto 后面加上邮件地址。在浏览者提交表单后， 会弹出窗口询问是否继续以电子邮件形式 提交，单击“确定”按钮，浏览器会自动 2020/打12/6 开Outlook或Outlook Express，将表 10
感谢你的阅览
Thank you for reading
温馨提示：本文内容皆为可修改式文档，下载后，可根据读者的需求 作修改、删除以及打印，感谢各位小主 Nhomakorabea阅览和下载
日期：
演讲者：蒝味的薇笑巨蟹
6.插入按钮
按钮对于表单是必不可少的。按钮在 单击时执行任务，可以用于提交或重置表 单，并且可以用于触发特定的事件。
要插入按钮，将光标定位后，单击 “表单”工具栏上的“按钮”按钮，即可 插入一个按钮。
2020/12/6
8
7.插入列表/菜单
如果要显示的选项很多，为了节省空 间，可以使用菜单或列表。菜单会在弹出 式菜单中显示选项值，而且只允许用户选 择一个选项。列表会在滚动列表中显示选 项值，并允许用户在列表中选择多个选项。
5
3.插入单选按钮
要求浏览者只能从一组选项中选择一个选项 时，使用单选按钮。单选按钮通常成组地使用，在 同一组中的每个单选按钮的名称必须一致，这样整 个单选组才能有效。
要插入单选按钮，将光标定位后，单击“表 单”工具栏上的“单选按钮”按钮，即可插入一个 单选按钮。
2020/12/6
9
6.2 通过邮件接收表单
表单中的信息输入完毕以后需要将信 息提供给服务器端的相关人员，用户可以 通过表单域属性面板中的“动作”属性指 定通过电子邮件接收表单数据。
在属性面板的“动作”文本框中输入 mailto:***@***.***,也就是在mailto 后面加上邮件地址。在浏览者提交表单后， 会弹出窗口询问是否继续以电子邮件形式 提交，单击“确定”按钮，浏览器会自动 2020/打12/6 开Outlook或Outlook Express，将表 10
感谢你的阅览
Thank you for reading
温馨提示：本文内容皆为可修改式文档，下载后，可根据读者的需求 作修改、删除以及打印，感谢各位小主 Nhomakorabea阅览和下载
日期：
演讲者：蒝味的薇笑巨蟹
6.插入按钮
按钮对于表单是必不可少的。按钮在 单击时执行任务，可以用于提交或重置表 单，并且可以用于触发特定的事件。
要插入按钮，将光标定位后，单击 “表单”工具栏上的“按钮”按钮，即可 插入一个按钮。
2020/12/6
8
7.插入列表/菜单
如果要显示的选项很多，为了节省空 间，可以使用菜单或列表。菜单会在弹出 式菜单中显示选项值，而且只允许用户选 择一个选项。列表会在滚动列表中显示选 项值，并允许用户在列表中选择多个选项。
5
3.插入单选按钮
要求浏览者只能从一组选项中选择一个选项 时，使用单选按钮。单选按钮通常成组地使用，在 同一组中的每个单选按钮的名称必须一致，这样整 个单选组才能有效。
要插入单选按钮，将光标定位后，单击“表 单”工具栏上的“单选按钮”按钮，即可插入一个 单选按钮。
《网页设计与制作》课件
动画
网页3
视频
2、创建、关闭站点
利用模板创建 ：点击 “文件”—“新建”— “由一个网页组成的网 站”，选择所要的网站 模板。 关闭网站：点击菜单 “文件”---“关闭网 站”，这样即可关闭正 在编辑的网站。
打开“文件”菜单，可 以看到：
关闭 关闭网站 退出
3、站点管理
打开站点：点击菜单“文 件”---“打开网站”，这 样即可打开需要编辑的网 站。 重命名站点：点击菜单 “工具”---“网站设置” --“常规” ---“网站名称”， 在对应的文本框里即可更 改你想要取的名字。
设置FLASH属性：设置质量、大小、背景等。 制作按钮：打开“插入”菜单——“交互式按钮”对话
框； 按钮类型：（1）按钮 （2）字体 （3）图像
四、修饰网页(音频、视频)
添加视频：点击“插入”菜单---“图片”——“视频”，
选中你要添加的视频文件，再将添加的视频文件拖动放大 即可。
设置视频属性：（1）外观（2）常规（3）视频 添加背景音乐：点击“网页属性”菜单—“常规”—
—“背景音乐”。
四、修饰网页
1、主题：选择“格式/主题”，从任务窗口选 择一种样式，会改变整体网页的背景效果。 2、动态字幕：在网页上选定一个位置，单击 “插入/WEB组件/组件类别/选择一种效果/字 幕” ，单击“完成”，在文本框中输入文字。 也可以添加背景图片。 3、在网页中使用网站计数器：在网页上选定 一个位置，单击“插入/WEB组件/组件类别/ 选择计数器”
对话框——效果——下划线。
创建电子邮件：先选中文字或其它对象：点击右键—
—插入超链接——设置电子邮件地址即可。
第六章《网页的设计与制作》ppt课件 高中信息技术
第六章 网页的设计与制作
概 要
网 页 的 基 本 元 素
常 用 工 具
网 页 制 作
什么是万维网？
WWW（world wide web） 是一个大规模的联机式的 信息储藏所
英文简称：web
用什么样的协议来实现 功能？ 万维网上各种链接？ 将浏览器发出的请求发 HTTP超文本传输协议 送至Web服务器，并将 服务器的网页传回到那 个发出请求的浏览器
• 万维网上的文档称为网页，若 干个网页组阅读网页。
Grammar
金手指考试网 / 2016年金手指驾驶员考试科目一 科目四 元贝驾考网 科目一科目四仿真考试题C1
文字
图片
超链接
网页的基本元素
三种基本元素 • 文字 • 图形图像 • 超链接
制作网页的常用工具
• 1.确定主题 • 2.设计规划 • 3.收集素材 • 4.选择制作工具并开始制作 • 5.测试评价
概 要
网 页 的 基 本 元 素
常 用 工 具
网 页 制 作
什么是万维网？
WWW（world wide web） 是一个大规模的联机式的 信息储藏所
英文简称：web
用什么样的协议来实现 功能？ 万维网上各种链接？ 将浏览器发出的请求发 HTTP超文本传输协议 送至Web服务器，并将 服务器的网页传回到那 个发出请求的浏览器
• 万维网上的文档称为网页，若 干个网页组阅读网页。
Grammar
金手指考试网 / 2016年金手指驾驶员考试科目一 科目四 元贝驾考网 科目一科目四仿真考试题C1
文字
图片
超链接
网页的基本元素
三种基本元素 • 文字 • 图形图像 • 超链接
制作网页的常用工具
• 1.确定主题 • 2.设计规划 • 3.收集素材 • 4.选择制作工具并开始制作 • 5.测试评价
网页设计与制作ppt课件
【难点】表格嵌套的设计与运用。
小结与作业
• 作业 1.完成海城宾馆迎宾楼简介页中圆角表格的 制作技巧。 2.进一步制作与完善班级主页。
图 6-5 作业1网页效果图
.
23
结束
.
24
.
14
4.在第三个表下面建立第四个 1*3 的表格, 居 中 ,宽=777，每列依次插入图片smyx-38.gi f 、s myx-39.gif 、smyx-40.gif。
.
15
table1 table2
table3
table4
图 6-4加盟赠品页表格总体布局
.
16
• 思考与动手训练 自己动手设计与制作班级主页,并要求表格
.
9
6.3.4 合并单元格
使用菜单方法可以进行合并单元格。 【要点】 合并单元格方法：修改-表格-合并单元格
.
10
6.3.5 拆分单元格
图6-2格式化表格对话框
.
11
技能训练
• 制作加盟赠品页表格。
图6-3 加盟赠品页效果图
• 学做要求
1.建立第一个 1*1的表格 ，宽=777 ，高=21，居 中，bg=smyx-2.gif。
面图
6-5
至 尊 宝 宝 幼 儿 园 阴 影 表 格 页
.
19
在HTML中设计表格时，主要用到以下表 格标记符：
（1）TABLE （2）TITLE （3）CAPTION （4）TR （5）TD和TH （6）META
.
20
小结与作业
• 小结 本次课主要讲授拷贝和粘贴表格、添加行或
列 、删除行或列 、合并单元格、 拆分单元格等 内容。 【重点】学会表格布局制作技巧，通过技能训练加 强对网页制作中表格布局 的设计能力和复杂表格 的运用能力的培养。
小结与作业
• 作业 1.完成海城宾馆迎宾楼简介页中圆角表格的 制作技巧。 2.进一步制作与完善班级主页。
图 6-5 作业1网页效果图
.
23
结束
.
24
.
14
4.在第三个表下面建立第四个 1*3 的表格, 居 中 ,宽=777，每列依次插入图片smyx-38.gi f 、s myx-39.gif 、smyx-40.gif。
.
15
table1 table2
table3
table4
图 6-4加盟赠品页表格总体布局
.
16
• 思考与动手训练 自己动手设计与制作班级主页,并要求表格
.
9
6.3.4 合并单元格
使用菜单方法可以进行合并单元格。 【要点】 合并单元格方法：修改-表格-合并单元格
.
10
6.3.5 拆分单元格
图6-2格式化表格对话框
.
11
技能训练
• 制作加盟赠品页表格。
图6-3 加盟赠品页效果图
• 学做要求
1.建立第一个 1*1的表格 ，宽=777 ，高=21，居 中，bg=smyx-2.gif。
面图
6-5
至 尊 宝 宝 幼 儿 园 阴 影 表 格 页
.
19
在HTML中设计表格时，主要用到以下表 格标记符：
（1）TABLE （2）TITLE （3）CAPTION （4）TR （5）TD和TH （6）META
.
20
小结与作业
• 小结 本次课主要讲授拷贝和粘贴表格、添加行或
列 、删除行或列 、合并单元格、 拆分单元格等 内容。 【重点】学会表格布局制作技巧，通过技能训练加 强对网页制作中表格布局 的设计能力和复杂表格 的运用能力的培养。