网页设计与制作课程说课PPT
合集下载
《网页设计与制作》课件
《网页设计与制作》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 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
网页设计与制作课件第1章
上一页 返回
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
网页设计与制作教程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
教学重难点
教学重点
掌握DIV+CSS布局应用与技巧，熟练CSS语法规则。
教学难点
深入理解布局的精髓——盒子模型以及如何灵活、简练的应用。
提纲
教法与学法
◇课前分析
◇教学目标及重难点
1
◇教法与学法 ◇教学时间安排 ◇教学设计
小组讨论法
宏观： 项目教学法
◇教学反思
直观演示法
微观
任务驱动法
活动探究法
提纲 ◇课前分析 ◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教材分析
上海交通大学出版社 《网页制作三合一案例教程》
第9章“CSS标准流布局”。 对页面进行整体布局——盒子 模型
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
学情分析
对文本、图形、动画等多媒体信息的处理技术 有了一定的使用经验，但基础差异大 计算机实际操作能力较弱 对理论讲解不感兴趣。 对网页内容、结构、效果等设计的优劣有一定 的感性认识，但自主创作设计能力不足
提纲 ◇课前分析 ◇教学目标及重难点
教学目标 重点难点
◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
展
示 与
自信感、成就感、责任心
评
价
以工作任务为主线，以学生为主体，以教师为主导，融“教、 学、做、评”为一体。
提纲
布置作业
◇课前分析
◇教学目标及重难点
◇教法与学法
《网页设计与制作课件》全册精讲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
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
《网页设计与制作》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课件
FTP
• FTP是一种文件传输协议。 • 通过FTP，用户与存有大量文件的远程计算 机（称为FTP服务器）连接，查看远程计算 机上的文件，然后把文件从远程计算机上 复制到本地的计算机上（称为下载），或 者把本地计算机上的文件传送到远程计算 机上去（称为上传）。 • 如果我们是在ISP处申请的主页空间，制作 完成的网页文件一般采用FTP的形式上传到 Web服务器上。
URL
• URL（Uniform Resource Locator的缩写），统 一资源定位器。 • 互联网中某种信息资源以某种方式存储在网络中 的某处，必须用一个惟一的URL来进行标识，这 样才能方便查找。对于Web来说，可以简单并通 俗把URL理解为网址。每个Web网页都有自己的 网址，在浏览器地址栏里输入网页的URL，就可 以访问这个网页。 • 例如，/index.html，其意思就是采用http超文本传 输协议访问搜狐网的首页，由于网页均是通过 http超文本传输协议进行访问，默认下，“”可以省 略不输。
脚本
• 脚本（Script）是网页制作中常见的动态网页制作 技术。 • 根据脚本语言所编写的代码可以直接插入到 HTML中，利用脚本可以操纵网页上的元素去实 现网页的交互功能，还可以制作特殊动态效果的 网页，例如，注册时用户输入信息的有效性验证、 弹出的信息框、鼠标指针的文字跟随、渐隐渐现 的图片等都是脚本的实际运用。 • 常用的脚本语言有JavaScript和VBScript，这两种 脚本语言也是本书所介绍的ASP的语言基础。
第1章 相关的基础知识
1.1 Web的基ld Wide Web，简称WWW，又 称万维网。 • Web采用浏览器/服务器工作模式。信息以 页面（或称Web页）的形式存储在Web服 务器中，通过浏览器为用户提供方便友好 的信息浏览界面。 • 统一资源定位器URL。 • 超链接。
网页设计与制作课件第1章计算机网络概述
通信线路利用率低。
23
1.2.1 计算机网络的类型（8/9 ）
（4）树型结构
这种结构与星型结构相比降低了通信线路的成本， 但增加了网络的复杂性。网络中除最低层结点及 其连线外，任一结点或连线的故障均影响其所在 支路网络的正常工作。
24
1.2.1 计算机网络的类型（9/9）
（5）网状结构
优点：结点间路径多，阻塞可大大减少，局部的 故障不会影响整个网络的正常工作，可靠性高； 网络扩充和主机入网比较灵活、简单。
第一阶段：从单个网络ARPAnet向互联网发展的过程。 第二阶段：建成了三级结构的Internet。 第三阶段：逐渐形成了多级ISP结构的Internet。
ISP（Internet Service Provider） 就 是 一 个 进 行 商业活动的公司，因此它又常称为Internet服务提 供商。
29
1.3.3 Internet的应用
(1) 与世界范围的朋友保持联系，互通消息。 (2) 网络视频会议。 (3) 使用远程数据库或图书馆。 (4) 电子商务和电子政务。 (5) 远程医疗诊断系统。 (6) 网络电视和网络游戏。
……
30
1.4 计算机网络的体系结构
1.4.1 层次模型 1.4.2 OSI参考模型 1.4.3 TCP/IP参考模型 1.4.4 OSI参考模型和TCP/IP参考模型的比较
13
1.1.3 计算机网络的组成与功能(3/4)
3) 分组组装／拆卸设备PAD 它用于连接大量的同步和异步终端。 4) 网络控制中心NCC 它管理整个网络的运行，为网络的用户注册、登
记和记账，对网络中发生的故障进行检测。 5) 网关 它用于实现各网络之间的互联，通常也由计算机
来充当网关。 (2) 资源子网 资源子网实现全网的面向应用的数据处理和网络资源
23
1.2.1 计算机网络的类型（8/9 ）
（4）树型结构
这种结构与星型结构相比降低了通信线路的成本， 但增加了网络的复杂性。网络中除最低层结点及 其连线外，任一结点或连线的故障均影响其所在 支路网络的正常工作。
24
1.2.1 计算机网络的类型（9/9）
（5）网状结构
优点：结点间路径多，阻塞可大大减少，局部的 故障不会影响整个网络的正常工作，可靠性高； 网络扩充和主机入网比较灵活、简单。
第一阶段：从单个网络ARPAnet向互联网发展的过程。 第二阶段：建成了三级结构的Internet。 第三阶段：逐渐形成了多级ISP结构的Internet。
ISP（Internet Service Provider） 就 是 一 个 进 行 商业活动的公司，因此它又常称为Internet服务提 供商。
29
1.3.3 Internet的应用
(1) 与世界范围的朋友保持联系，互通消息。 (2) 网络视频会议。 (3) 使用远程数据库或图书馆。 (4) 电子商务和电子政务。 (5) 远程医疗诊断系统。 (6) 网络电视和网络游戏。
……
30
1.4 计算机网络的体系结构
1.4.1 层次模型 1.4.2 OSI参考模型 1.4.3 TCP/IP参考模型 1.4.4 OSI参考模型和TCP/IP参考模型的比较
13
1.1.3 计算机网络的组成与功能(3/4)
3) 分组组装／拆卸设备PAD 它用于连接大量的同步和异步终端。 4) 网络控制中心NCC 它管理整个网络的运行，为网络的用户注册、登
记和记账，对网络中发生的故障进行检测。 5) 网关 它用于实现各网络之间的互联，通常也由计算机
来充当网关。 (2) 资源子网 资源子网实现全网的面向应用的数据处理和网络资源
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
谢谢各位!
网络技术专业 电话：
➢ 1、课程的性质和目标 ➢ 2、课程在专业中的地位 ➢ 3、前导和后续课程 ➢ 4、教学内容安排 ➢ 5、课程和学生分析 ➢ 6、教学安排 ➢ 7、教学设计 ➢ 8、考核和评价 ➢ 9、教师队伍 ➢ 10、课程资源 ➢ 11、改革设想
课程的性质、目标
网页设计与制作是网络技术专业中第三学期开 设的课程。
课程、学生分析
➢ 本门课程是实践性比较强的课 程。
➢ 高职学生趋向于在实践动手中 学习。
教学安排
网页教学
实践课教学
1、专业机房作为 硬件保证
2、配有服务器 3、部署了教学实
验网站
50%
理论课教学
50%
有专门的多媒体教室， 提供80余个座位
教学安排
网页教学
网站建设流程： 确定站点名称-> 确定主要内容-> 确定风格和模块
->制作页面 ->测试和部署
->网站维护
50%
课程设计
50%
教学设计
网页设计与制作课程正在基于工作过程 的教学模式的探索。在理论课和实践课 教学中都实施案例教学。
理论课教学设计
理论课是以知识点为一个教学单位， 按如下步骤教学：
实践课教学设计
实践课和理论课的知识点相对应， 步骤安排如下：
给出案例
主要是学习静态网页制作的知识、技术和相关 的工具
学完该课程后，一方面可以运用相关的知识、 技术和各种工具独立的设计和制作出基于静态 页面的小型网站；另一方面为后续的学习打下 基础，即为动态网页设计页面的结构。
本课程既是基础性课程又是一门应用性课程。
在网络技术专业中的地位
专
业
核
web程序设计
心
分析案例提出 难点和重点
学生完成 案例的制作
完善
教学评价、 总结、提高
作业点评
考核、评价（三部分）
知识点教学 实 践 练 习
每个知识点考核
笔试考试
考核、评价
课程设计
教学队伍
网页设计与制作教师队伍
课程资源
适合高职 特色的教材
程资源
针对性的 实验网站
课程改革设想
1、职业岗位技能需求为改革的方向 2、增加课程的实训
能
力
网页设计制作 Java语言
XML
专
业
数据库原理
基
及应用
本
能
力
前导和后续课程
上网浏览
计算机导论
网页设计制作
ASP程序设计 JSP程序设计
计算机语言 编程思想
XML标记语言
教学内容：
8课时 4课时
Dreamweaver 24课时 Fireworks 8.0 12课时
Flash 8.0 16课时
学习重点：HTML标记语言、Dreamweaver 学习难点：Flash 8.0 教学内容参照信息产业部网页设计师认证的教学体系进行设计