网页设计与制作课时说课稿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 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
网页设计与制作说课稿ppt课件
布局原则
电子信息工程系 数字媒体专业 祝小玲
情感与能力目标
培养学生知识迁移能力 促进学生实际应用能力 增强学生团队协作意识 提高审美能力与鉴赏能力
提纲 ◇课前分析ቤተ መጻሕፍቲ ባይዱ◇教学目标及重难点
教学目标 重点难点
◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教学重难点
教学重点
1.理解用表格在网页设计中的重要作用； 2. 掌握在网页中插入表格进行排版的技能；
网页设计与制作 ——表格布局
课前分析
教学目标及重难点 教法与学法
教学时间安排
电子信息工程系
数字媒体专业团队 祝小玲
教学设计
教学反思
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
课程分析
《网页设计与制作》课程是计算机、电子商务专 业的必开的一门专业课程，是一门实践性很强的专业 技术课程，又是一门主干课程。通过本课程的学习, 使学生掌握该软件的操作方法和操作技巧, 学会运用 其创建个人或企业网站.具备一定的网站设计能力。 通过实例的讲解，让学生掌握网页制作和网站开发的 知识
2.布置作业：利用表格定位网页的思想，设计“在 线购物网”二级页面的结构图，搜集素材。
电子信息工程系 数字媒体专业 祝小玲
提纲 ◇课前分析 ◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教学反思
1.学生能积极主动的投入到具体任务当中，学习兴趣高， 能在规定时间内制作简单网页。
组织教学 导入新课
讲授新课 应用新知识 课堂小结及布置作业
◇教学反思
电子信息工程系 数字媒体专业 祝小玲
电子信息工程系 数字媒体专业 祝小玲
情感与能力目标
培养学生知识迁移能力 促进学生实际应用能力 增强学生团队协作意识 提高审美能力与鉴赏能力
提纲 ◇课前分析ቤተ መጻሕፍቲ ባይዱ◇教学目标及重难点
教学目标 重点难点
◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教学重难点
教学重点
1.理解用表格在网页设计中的重要作用； 2. 掌握在网页中插入表格进行排版的技能；
网页设计与制作 ——表格布局
课前分析
教学目标及重难点 教法与学法
教学时间安排
电子信息工程系
数字媒体专业团队 祝小玲
教学设计
教学反思
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
课程分析
《网页设计与制作》课程是计算机、电子商务专 业的必开的一门专业课程，是一门实践性很强的专业 技术课程，又是一门主干课程。通过本课程的学习, 使学生掌握该软件的操作方法和操作技巧, 学会运用 其创建个人或企业网站.具备一定的网站设计能力。 通过实例的讲解，让学生掌握网页制作和网站开发的 知识
2.布置作业：利用表格定位网页的思想，设计“在 线购物网”二级页面的结构图，搜集素材。
电子信息工程系 数字媒体专业 祝小玲
提纲 ◇课前分析 ◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教学反思
1.学生能积极主动的投入到具体任务当中，学习兴趣高， 能在规定时间内制作简单网页。
组织教学 导入新课
讲授新课 应用新知识 课堂小结及布置作业
◇教学反思
电子信息工程系 数字媒体专业 祝小玲
网页设计与制作课程说课PPT
谢谢各位!
网络技术专业 电话：
➢ 1、课程的性质和目标 ➢ 2、课程在专业中的地位 ➢ 3、前导和后续课程 ➢ 4、教学内容安排 ➢ 5、课程和学生分析 ➢ 6、教学安排 ➢ 7、教学设计 ➢ 8、考核和评价 ➢ 9、教师队伍 ➢ 10、课程资源 ➢ 11、改革设想
课程的性质、目标
网页设计与制作是网络技术专业中第三学期开 设的课程。
课程、学生分析
➢ 本门课程是实践性比较强的课 程。
➢ 高职学生趋向于在实践动手中 学习。
教学安排
网页教学
实践课教学
1、专业机房作为 硬件保证
2、配有服务器 3、部署了教学实
验网站
50%
理论课教学
50%
有专门的多媒体教室， 提供80余个座位
教学安排
网页教学
网站建设流程： 确定站点名称-> 确定主要内容-> 确定风格和模块
->制作页面 ->测试和部署
->网站维护
50%
课程设计
50%
教学设计
网页设计与制作课程正在基于工作过程 的教学模式的探索。在理论课和实践课 教学中都实施案例教学。
理论课教学设计
理论课是以知识点为一个教学单位， 按如下步骤教学：
实践课教学设计
实践课和理论课的知识点相对应， 步骤安排如下：
给出案例
主要是学习静态网页制作的知识、技术和相关 的工具
学完该课程后，一方面可以运用相关的知识、 技术和各种工具独立的设计和制作出基于静态 页面的小型网站；另一方面为后续的学习打下 基础，即为动态网页设计页面的结构。
本课程既是基础性课程又是一门应用性课程。
在网络技术专业中的地位
专
业
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
网页设计与制作说课(软件技术) ppt课件
ppt课件
18
3.3 采用的考核方式，评价方法
采用平时考核与期末考核相结合方法: 平时考核：教师登录ftp对学生每次上机练习所制作的网站或网页进
行访问，并评定作业成绩。平时作业成绩占总评成绩的40%。 期末考核：采用在机房上机考试的方法。要求学生在指定时间内制作
出包括课程主要知识点的综合性网站。期末考核成绩占总评成绩的 60%
《巧学巧用Dreamweaver CS5制作网页》，人民邮电出版社，肖瑞 奇编著
《美工神话CSS网站布局与美化》许文波等编著，人民邮电出版社 数字化教辅资源 洪恩在线 /pc/ 其它网络资源
ppt课件
21
4.2 实践教学条件
学生实习实训机房具有一定规模，能够人手一机，满足教学大纲要求 的全部实训内容和选修实训内容。学生上机所需的软件齐备，如： PhotoShop、dreamweaver等。在多年的教学过程中，本课程 已具备了较完整的多媒体教学的条件，有整套的电子教案，案例、习 题等
11
2.2 教学内容的选取及依据
教学内容的设置，是为了满足职业能力培养的需要。通过对岗位需求 的调查分析，《网页设计与制作》这门课程的教学内容主要选取以下 内容：网页的基础编程、网页制作、网站管理等
ppt课件
12
2.3 教学模块的分配
针对职业能力的培养要求及网页设计与制作的岗位特点，设计了 以下六个模块，每个模块又包含一个或多个教学单元
ppt课件
8
二 课程设计
2.1 课程设计的理念与思路 2.2 教学内容的选取及依据 2.3 教学模块的分配 2.4 重点难点的确立及解决办法
ppt课件
9
2.1 课程设计的理念与思路
1、设计理念：
《网页设计与制作课件》全册精讲PPT教学课件
1．屏幕分辨率对网页制作的重要性
要根据网页和浏览者的特性，以合适的屏幕分 辨率为基准来设置网页尺寸，以使浏览者更加 便利地浏览网页。如游戏爱好者大部分都使用 高配置系统，所以游戏网站的网页尺寸大都在 1024像素×768像素以上，如下图所示。
项目一 网页设计与制作基础知识
13
2．常见网页尺寸
对于网页尺寸，是没有硬性规定的。目前常见的网页宽 度有1000像素、1190像素和1200像素3种，例如新浪 是1000像素、淘宝和京东是1190像素，当当是1200像 素。如果需要兼容不同浏览器尺寸，现在比较流行的做 法是做成响应式的，即根据不同分辨率显示不同的尺寸， 不过这样工作量要大很多。网页高度可根据网页内容来 定，一般不要超过3屏。
右图显示了新华网的主页，可 以看到网页中有文字、图像和 动画等。
项目一 网页设计与制作基础知识
6
在浏览三器、中网单击页右的上本角质的“工具”按钮 ，在弹出的菜单中选择“文件”>“另存为”菜单，打开
“保存网页”对话框，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，将网 页保存到磁盘中，便可看到网页的组成文件，如下图所示。
网页就是我们上网时在浏览器中打开的一 个个画面。网站则是一组相关网页的集合。 一个小型网站可能只包含几个网页，而一 个大型网站则可能包含成千上万个网页， 如新浪网就包括新闻、财经、科技、体育、 娱乐等多个板块，而每个板块又包括很多 网页。
另外，打开某个网站时显示的第一个网页 被称为网站的主页（或首页）。
当当网主页
项目一 网页设计与制作基础知识
4
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
要根据网页和浏览者的特性，以合适的屏幕分 辨率为基准来设置网页尺寸，以使浏览者更加 便利地浏览网页。如游戏爱好者大部分都使用 高配置系统，所以游戏网站的网页尺寸大都在 1024像素×768像素以上，如下图所示。
项目一 网页设计与制作基础知识
13
2．常见网页尺寸
对于网页尺寸，是没有硬性规定的。目前常见的网页宽 度有1000像素、1190像素和1200像素3种，例如新浪 是1000像素、淘宝和京东是1190像素，当当是1200像 素。如果需要兼容不同浏览器尺寸，现在比较流行的做 法是做成响应式的，即根据不同分辨率显示不同的尺寸， 不过这样工作量要大很多。网页高度可根据网页内容来 定，一般不要超过3屏。
右图显示了新华网的主页，可 以看到网页中有文字、图像和 动画等。
项目一 网页设计与制作基础知识
6
在浏览三器、中网单击页右的上本角质的“工具”按钮 ，在弹出的菜单中选择“文件”>“另存为”菜单，打开
“保存网页”对话框，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，将网 页保存到磁盘中，便可看到网页的组成文件，如下图所示。
网页就是我们上网时在浏览器中打开的一 个个画面。网站则是一组相关网页的集合。 一个小型网站可能只包含几个网页，而一 个大型网站则可能包含成千上万个网页， 如新浪网就包括新闻、财经、科技、体育、 娱乐等多个板块，而每个板块又包括很多 网页。
另外，打开某个网站时显示的第一个网页 被称为网站的主页（或首页）。
当当网主页
项目一 网页设计与制作基础知识
4
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
《网页设计与制作(1)》课件
了解各种颜色间的搭配和配色原则，以及如何使用颜
字体和排版原则
了解如何选择合适的字体和排版样式，以及如何使用
图片和多媒体的使用
1 多媒体的优势
2 图片的优化
3 响应式设计概念
了解如何使用图片、音频和 视频来增强网页的吸引力和 互动性。
了解图片优化的重要性，以 及如何选择合适的图片格式 和尺寸，以达到更快的加载 速度。
了解如何使用响应式设计来 适应不同的屏幕大小和设备 类型，以提升用户体验。
用户体验设计概念
1
了解用户
通过市场调研和用户反馈，了解用户的需求和特点。
2
ห้องสมุดไป่ตู้
设计用户旅程
将用户体验分解为不同的阶段，设计出让用户流畅、愉快的体验过程。
3
测试和优化
通过用户测试和分析数据，对网页进行不断优化，提升用户体验。
网页制作工具和技术
《网页设计与制作(1)》 PPT课件
欢迎来到《网页设计与制作(1)》PPT课件！在这个课程中，我们将探讨网页设 计和制作的基本概念和技术，帮助您成为一名优秀的网页设计师和开发者。
课程介绍
目标和目的
通过本课程，您将学习如何设 计和制作精美、现代化的网页， 并掌握实用的前端技术。
受众群体
任何对网页设计和制作感兴趣 的人，尤其是想要成为网页设 计师和开发者的人群。
安全性和可访问性
了解如何提升网页的安全性和可访问性，以便更好 地保护用户隐私和权益。
总结
感谢您学习本课程！通过本课程，您应该已经掌握了网页设计和制作的基本 概念和技术，为成为一名优秀的网页设计师和开发者打下了坚实的基础。
掌握网页制作的整个流程，包括需求分析、设计、开
常用网页制作技巧和技
字体和排版原则
了解如何选择合适的字体和排版样式，以及如何使用
图片和多媒体的使用
1 多媒体的优势
2 图片的优化
3 响应式设计概念
了解如何使用图片、音频和 视频来增强网页的吸引力和 互动性。
了解图片优化的重要性，以 及如何选择合适的图片格式 和尺寸，以达到更快的加载 速度。
了解如何使用响应式设计来 适应不同的屏幕大小和设备 类型，以提升用户体验。
用户体验设计概念
1
了解用户
通过市场调研和用户反馈，了解用户的需求和特点。
2
ห้องสมุดไป่ตู้
设计用户旅程
将用户体验分解为不同的阶段，设计出让用户流畅、愉快的体验过程。
3
测试和优化
通过用户测试和分析数据，对网页进行不断优化，提升用户体验。
网页制作工具和技术
《网页设计与制作(1)》 PPT课件
欢迎来到《网页设计与制作(1)》PPT课件！在这个课程中，我们将探讨网页设 计和制作的基本概念和技术，帮助您成为一名优秀的网页设计师和开发者。
课程介绍
目标和目的
通过本课程，您将学习如何设 计和制作精美、现代化的网页， 并掌握实用的前端技术。
受众群体
任何对网页设计和制作感兴趣 的人，尤其是想要成为网页设 计师和开发者的人群。
安全性和可访问性
了解如何提升网页的安全性和可访问性，以便更好 地保护用户隐私和权益。
总结
感谢您学习本课程！通过本课程，您应该已经掌握了网页设计和制作的基本 概念和技术，为成为一名优秀的网页设计师和开发者打下了坚实的基础。
掌握网页制作的整个流程，包括需求分析、设计、开
常用网页制作技巧和技
《网页设计与制作》PPT课件
（五）知识讲解与操作示范（8）
3．页面中图像应用
传递信息的视觉要素包括版式、文字、图像、色彩等。 网页中图像在信息传达上应用具备以下功能： （1）要有良好的视觉吸引力，能吸引浏览者的注意力。 （2）要简洁明确地传达网站信息，能使人们一目了然地抓 住网站信息的重点。 （3）要有强而有力的诱导作用，造成鲜明的视觉感受效果， 从观看过程中产生愿望和欲求。 对图像的处理主要包括以下几个方面： （1）图像的外形处理 （2）图像的面积处理 （3）图像的数量处理 （4）图像的背景处理
（五）知识讲解与操作示范（7）
(2）文字粗细的确定 文字变细会显得十分优美，反之将文字变粗会显得有
力。 （3）文字字号的确定
对于网页中正文文本，其字号一般设置为10～12磅； 对于网页中版权声明等文本一般设置为9～10磅；对于网 页中标题文本，一般设置为12～18磅。 （4）文字的字间距和行间距
网页中文本的字间距和行间距在某种程度上会改变访 问者的阅读心理。
（2）站内搜索引擎 站内搜索引擎提供了一种主动查询方式，浏览者
只要把自己需要寻找的内容的关键字输入到搜索引擎 中，网站将自动地查找出站内符合条件的页面，这是当前浏览位置”就是在网站的每个页面中 加入当前位置的文字说明并逐级加入链接。
（五）知识讲解与操作示范（6）
15.2.4 网页色彩设计
1．色彩的基本知识
（1）三原色 三原色是能够按照一些数量规定合成其他任何
一种颜色的基色。所有的颜色其实都是由三原色按 照不同的比例混合而来。电脑屏幕的色彩是由红、 绿、蓝三种原色组成。
（2）色彩三要素 色彩三要素是指色相、饱和度和明度。
（五）知识讲解与操作示范（2）
2．颜色的计算机表示
4．广告尺寸 广告尺寸应为标准尺寸，全尺寸banner不超过14KB。
网页设计与制作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
《网页设计基础》考核流程
每小组选1名同学作为评审员； 评审员集中坐在一起，为评审员的电脑中拷贝考核标准一份； 给评审员每人一张白纸，用于打分； 每小组派一名同学进行作品展示，并按照要求进行陈述； 评审员为每小组打分； 指定1名同学收集分数条，指定2名同学进行总分；计分方法是：去掉
专业人才 培养目标
图像处理 网站开发 三维动画 影视制作
一学期 图形图像处理
二学期 平面动画基础
三学期 静态网页设计
四学期 网站开发实训
五学期 影视三维动画
六学期 企业实习实训
Page 3
这门课程对应的职业岗位
网页设计师 网页美工 网络管理员 网站开发工程师
Page 4
目
录
课程设置及内容
设计网页效果图
• Fireworks、 Photoshop 美工基础
• 导航和接片、热区
网页动画处理
• Flash动画制作 • SWF动画运用
网站规划
• 写策划书 • 和客户签订合同 • 制定开发流程和任务分工
网页制作方法
• Dreamweaver运用 • 使用HTML语言设计
两周综合实训
• 培养综合实践能力 • 方案设计和实践操作能力
《网页设计基础》
为什么要上《网页设计基础》这门课？
网页设计基础
本课程是计算机多媒体技 术、印刷图文信息处理、网络 技术等专业的专业基础课程， 在IT行业应用非常广泛。它既 为一门具体的应用技术，也是 作为其他网络应用的重要基础 工具，因而在整个教学体系中 占据非常重要的地位。
Page 2
计算机多媒体技术专业方向简图
研发
Page 25
学习方法的中心和融合
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
#right_jx
#footer
23
、四
解 决 疑 难 问 题
引 导 、 分 析 、
教师：引导、分析、解决、演示 学生：分析、讨论、练习
讨
论
讲练结合 教师有纠错 学生有反思、有总结、有提高
24
作品展示、（最符合结果） 评价
五
展 示
自信感、成就感、责任心
与
评
价
以工作任务为主线，以学生为主体，以教师为主导，融“教、学、做、评”为一体。
#right_top_kcjs
#right_top_jcjs
究
#right_jxzy
#right_jx
#footer
20
教师为主导 学生为主体
三 2. 根据分析，学生画出布局草图。
学
生 自
#header
主 探
#main_left
#right_top_kcjs
究
#right_jxzy
#right_top_jcjs
8
教学内容
教学 内容 重点
难点
利用DIV+CSS技术布局制作精品课程网站主页。
掌握DIV+CSS布局应用与技巧，熟练CSS语法规则。 深入理解布局的精髓——盒子模型以及如何灵活、 简练的应用。
9
10
小组讨论法
1
直观演示法
微观
宏观：
项目教学法
任务驱动法
11
活动探究法
利用多媒体辅助教学
12
以学生为主体，以培养学生自主学习能力为出发点 让学生在学习中发现问题、分析问题、解决问题。 主要应用以下方法：
提 出 任 务 目 标
采用DIV+CSS布局技术制作精品课程网站的主页
16
提高自学兴趣，被动——主动 进一步明确本节课要实现的目标，做到有的放矢
二
2.在网页中，一个div盒子是如何定义的？（回忆）
提
出
任 务
<div id=“盒子名称”></div>
目
标
17
提高自学兴趣，被动——主动 进一步明确本节课要实现的目标，做到有的放矢
3
课
编号 知识模块安排
程
项目一 书法家庄辉个人网站
1 网页设计基础知识
教
2 网站欣赏
学 内
项目二 电子信息工程系迎评网站
3 网站规划与设计 4 网站效果图设计
容
5 网页色彩搭配网页布局
选
取
项目三 精品课程网站
与
安 排
项目四 武威旅游网
6 网页动画设计 7 页面布局与编辑 8 HTML语言 9 CSS层叠样式表 10 DIV+CSS网页布局
#right_jx
#footer
21
教师为主导 学生为主体
三 3.根据绘制的草图，在网页制作软件中放这些盒子
学 <div id=“header”></div>
生 <div id=“main”>
自 主 探 究
<div id=“main_left></div> <div id=“main_right>
</div>
<div id=“footer”></div>
22
教师为主导 学生为主体
三 4.在网页制作软件中如何将这些盒子放置到合适的位置？
学 生
Css样式表——盒子摆整齐了！
自
主 探
#header
究 #main_left
#right_top_kcjs #right_top_jcjs
#right_jxzy
二 3.生活中的盒子有很多，同理，一张网页中的盒子也有很多(如图)，
提 出
这些盒子是如何放置到网页中的？(引导、讨论）
任 务
通过插入多个DIV
目
标
#header
#left
#right
#footer
18
四个问题层层递进，既复习了上节课的重点内容，也为下面学生的自 主探究打下坚实基础，帮助学生把握本节课的重、难点。
<div id=“right_top> <div id=“right_top_kcjs”></div>
先堆到一起再说！
<div id=“right_top_jcjs”></div>
</div>
<div id=“right_jxzy”></div>
<div id=“right_jx”></div>
</div>
4
使用模版完善静态网站
掌握网站模板的使用方法
2
应用行为增强网页动态效果
掌握网站行为的使用方法
2
项目总结与评价
具备检查、判断能力、语言表达能 2 力、责任意识
7
教学目标
专业能力： 1.掌握单行单列布局、二列布局、三列布局 的结构应用。 2.掌握DIV+CSS布局应用与技巧。 方法能力： 1.能独立进行信息的筛选与加工。 2.能独立制定、实施工作计划。 3.具有分析问题、解决问题的能力。 社会能力： 1.具有沟通能力及团队协作精神。 2.具有创新能力。
自主探究法、总结反思法
13
教师展示任务效果
项目导向 任务驱动
教师提出任务目标 学生自主探究 教师引导、解决疑难问题
展示与评价
布置课后拓展练习
14
一 任 务 效 果 展 示
15
提高自学兴趣，被动——主动 进一步明确本节课要实现的目标，设置四个问题来分析、讨论
二 1、复习什么是CSS的盒子模型？盒子的属性？（引导、讨论）
2
网站效果图的设计、切片导出及 艺术素养、Photoshop设计
4
动画设计
动画制作能力、创新创意能力
DIV+CSS网页布局技术基础知识
项目三： DIV+CSS布局技术及应用 精品课 程网站 JavaScript脚本代码的融合 建设
3
DIV+CSS网页布局技术、团队协作、
项目实施能力
6
JavaScript脚本代码的应用能力
课程名称：《网页设计与制作》
项目三：精品课程网站 任务四：《DIV+CSS布局技术及应用》
说课人：王慧敏
1
课程 介绍
2
课程介绍
课程 定位
课程 目标
内容 选取 组织
岗位核心领域课程 综合性 实践性 操作性
网站设计与制作能力、团队协作能力、 沟通能力、分析解决问题能力、项目实施能力
以教学仿真项目和企业实际项目为载体 重构和序化教学内容
项目五 佳佳商城用户及留言管理系统
11 模版与库的应用 12 网站行为
13 表单应用
14 静态网站动态化
15 动态网站制作
16 课程设计（项目实训）
4
项目三：精品课程网 任务四：DIV+CSS布局技术及应用
课时 说课
5
提纲
6
课时定位
任务名称
职业素质及能力培养
课时数
网站前期策划及策划书的编写 沟通能力、策划能力、文档能力
二
4.精品课程网站的主页是由许多盒子构成的，这些盒子是如
提 出放得有模有样的？(引导、 讨论）
务
目
标
通过插入多个DIV ,通过控制盒子外观的CSS样式表
19
教师为主导 学生为主体
三
学 1.学生分析精品课程网站主页的布局。
生 自
#header
主 探
#main_left