网页制作教程-PPT课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
bvtc
模块
HTML语言基础 插入文本、图像 表格规划与布局 多媒体与超链接 框架、层 CSS样式与行为 模板与库
技能培养
素质提高
分析问题的能力 解决问题的能力
掌握HTML语言等
制作网页的基础知 识，能利用 Dreamweaver制作出 精美的静态网站。 为后继的动态网站 建设课程打下良好 基础。
机械工业出版社出版的高职高专教材
《Dreamweaver CS3网页设计案例教程》
1、本教材适合高职高专的网页设计与规划教学；
2、教材采用模块化教学、目标任务驱动、案例操作步骤、
知识点详解四层结构引导学生完成网页设计的每一环节。
（三）教参
1、《网页设计与制作》人民邮电出版社 2、 网络资源
4
课程内容
No Image
19
子任务1
一、网站的规划期
bvtc
初识网页与网页设计软件
1. 定位主题（题材和内容、网站名称等） 2. 资料搜集（文字信息、图像、动画、音频视频等） 3. 结构设计（设计网站的栏目及目录结构。注意不要将所有的文件都存 放在根目录下；要按栏目内容建立子目录；要在每个主目录下都建立独 立的图片目录；目录的层次不要太深。） 4. 形象设计（网站风格、标志、颜色、标准字体等） 5. 确定版面布局，设计首页及各分页
初识网页与网页设计软件
• 文本——网页中信息的主要表达方式。 • 图像——常用的有三种格式：GIF、JPEG和PNG。 • 动画——常见的包括两种：GIF动画、Flash动画。
• 视频和音频——种类很多，例如：AVI、RM、mp3等。
• 超级链接——是在一个网站中的各网页之间进行跳转的 媒介。
• 导航栏——用于引导访问者浏览站点。
9
子任务1
bvtc
初识网页与网页设计软件
一、网页与网站的相关知识：
2. 网页的类型
• 普通静态网页 指在发送到浏览器之 前不会被应用程序服 务器修改的Web页。 也就是说，当站点访 问者请求该网页时， 页面内容不会发生更 改。
普通静态网页的工作流程
10 10
子任务1
bvtc
初识网页与网页设计软件
三星网 欧莱雅网
No Image
No Image
No Image
No Image
清华同方电脑网
No Image
最常用和最简单的方式：用自己网站的英文名称采用不同的 字体、字母的变形设计制作为网站的标志。
15
子任务1
初识网页与网页设计软件
Banner是用于宣传站内某个栏目活动的广告，一般要求制作成 动画形式，由于动画能够吸引更多注意力，将介绍性的内容简练 的加在其中达到宣传的效果。
菜单栏 插入栏
2. 网页的类型
• 动态网页 是在发送到浏览器之 前由应用程序服务器 自定义的网页。动态 网页要在经过服务器 的修改后才被发送到 请求它的浏览器。网 页发生更改的特性便 是称其为动态的原因。
“文档”工具栏
面板组
“文档”窗口 状态栏 “属性”面板
动态网页的工作流程 11
11
子任务1
3. 组成页面的元素
《网页制作技术》
课程定位与课程内容
（一）课程定位
Step5
企业网站开发
Step4
网站建设 数据库应用技术、网页特效 、Web程序设计
专业基础课程, 是网站开发的 Step3 基础课程。
Step2
网页制作、程序设计
Step1
信息技术基础、网页美术基础、平面图形图像处理
2
教学大纲、教材与教参
自学能力
信息搜集的能力 团队协作意识 对知识的迁移能力
5
5
考核方式
bvtc
考核方式
1. 出勤：10% 2. 课堂表现(上课及上机实验)：20% 3. 平时作业：20% 4. 阶段测试：10% 5. 考试成绩（实训）：40%
作业上交（压缩包名称例：01 a）
6
6
《网页制作技术》
任务一
网页基础
主要内容
一 二 三 子任务1 子任务2 初识网页与网页设计软件 网页的基本操作与站点管理
8
子任务1
初识网页与网页设计软件
1. 网站与网页的关系 网页(web)，即HTML文件，也就是网站上的某一个页面， 它是一个纯文本文件，是向浏览者传递信息的载体。 构建网页的基本元素包括文本、图像和超链接，其他元 素包括声音、动画、视频、表格、导航栏、表单等。 网站(Website)，它是指在互联网上，根据一定的规则， 使用HTML等工具制作的用于展示特定内容的相关网页集 合，它建立在网络基础之上，以计算机、网络和通信技 术为依托，通过一台或多台计算机向访问者提供服务。 平时所说的访问某个站点，实际上访问的是提供这种服 务的一台或多台计算机。
图像：图像在网页中具有提供信息、展示形象、美化网页、表 达风格的作用。有了图像看到的的网页而丰富多彩。现在 网络上使用的绝大多数图片和图像是gif、jpeg和png文 件格式。
No Image
14
子任务1
网站logo欣赏
No Image
初识网页与网页设计软
教 学 大 纲 提 要
4学时： 任务一 4学时： 任务二 4学时： 任务三 12学时：任务四 8学时： 任务五 8学时： 任务六 4学时： 任务七 30学时：实训
网页基础 表格及布局 插入页面元素 框架与层 网页美化与特效 表单 模板与库
授课计划 3
教学大纲、教材与教参
（二）教材
教材特点：
No Image
16
子任务1
初识网页与网页设计软件
表单是用来收集站点访问者信息的域集。
No Image
No Image
17
子任务1
表格是网页排版的灵魂
初识网页与网页设计软件
No Image
18子任务1Fra bibliotek初识网页与网页设计软件
框架是网页的一种组织形式，将相互关联的多个网页的内容组 织在一个浏览器窗口中显示。
二、网站的制作期:使用Dreamweaver制作首页及分页。 三、网站的后期维护:测试网站,申请域名,上传网站内容及管理。
20
20
子任务2
启动 了解工作界面
• 表格——用于布局文本和图像以及其他的列表化数据和 精确 控制各种网页元素在网页中出现的位置。
• 表单——访问者与网站交互的桥梁。
12 12
子任务1
初识网页与网页设计软件
文本：文本是网页信息的主体，网页中的信息主要是以文本 为主的。它能准确地表达信息的内容和含义。
No Image
13
子任务1
初识网页与网页设计软件
模块
HTML语言基础 插入文本、图像 表格规划与布局 多媒体与超链接 框架、层 CSS样式与行为 模板与库
技能培养
素质提高
分析问题的能力 解决问题的能力
掌握HTML语言等
制作网页的基础知 识，能利用 Dreamweaver制作出 精美的静态网站。 为后继的动态网站 建设课程打下良好 基础。
机械工业出版社出版的高职高专教材
《Dreamweaver CS3网页设计案例教程》
1、本教材适合高职高专的网页设计与规划教学；
2、教材采用模块化教学、目标任务驱动、案例操作步骤、
知识点详解四层结构引导学生完成网页设计的每一环节。
（三）教参
1、《网页设计与制作》人民邮电出版社 2、 网络资源
4
课程内容
No Image
19
子任务1
一、网站的规划期
bvtc
初识网页与网页设计软件
1. 定位主题（题材和内容、网站名称等） 2. 资料搜集（文字信息、图像、动画、音频视频等） 3. 结构设计（设计网站的栏目及目录结构。注意不要将所有的文件都存 放在根目录下；要按栏目内容建立子目录；要在每个主目录下都建立独 立的图片目录；目录的层次不要太深。） 4. 形象设计（网站风格、标志、颜色、标准字体等） 5. 确定版面布局，设计首页及各分页
初识网页与网页设计软件
• 文本——网页中信息的主要表达方式。 • 图像——常用的有三种格式：GIF、JPEG和PNG。 • 动画——常见的包括两种：GIF动画、Flash动画。
• 视频和音频——种类很多，例如：AVI、RM、mp3等。
• 超级链接——是在一个网站中的各网页之间进行跳转的 媒介。
• 导航栏——用于引导访问者浏览站点。
9
子任务1
bvtc
初识网页与网页设计软件
一、网页与网站的相关知识：
2. 网页的类型
• 普通静态网页 指在发送到浏览器之 前不会被应用程序服 务器修改的Web页。 也就是说，当站点访 问者请求该网页时， 页面内容不会发生更 改。
普通静态网页的工作流程
10 10
子任务1
bvtc
初识网页与网页设计软件
三星网 欧莱雅网
No Image
No Image
No Image
No Image
清华同方电脑网
No Image
最常用和最简单的方式：用自己网站的英文名称采用不同的 字体、字母的变形设计制作为网站的标志。
15
子任务1
初识网页与网页设计软件
Banner是用于宣传站内某个栏目活动的广告，一般要求制作成 动画形式，由于动画能够吸引更多注意力，将介绍性的内容简练 的加在其中达到宣传的效果。
菜单栏 插入栏
2. 网页的类型
• 动态网页 是在发送到浏览器之 前由应用程序服务器 自定义的网页。动态 网页要在经过服务器 的修改后才被发送到 请求它的浏览器。网 页发生更改的特性便 是称其为动态的原因。
“文档”工具栏
面板组
“文档”窗口 状态栏 “属性”面板
动态网页的工作流程 11
11
子任务1
3. 组成页面的元素
《网页制作技术》
课程定位与课程内容
（一）课程定位
Step5
企业网站开发
Step4
网站建设 数据库应用技术、网页特效 、Web程序设计
专业基础课程, 是网站开发的 Step3 基础课程。
Step2
网页制作、程序设计
Step1
信息技术基础、网页美术基础、平面图形图像处理
2
教学大纲、教材与教参
自学能力
信息搜集的能力 团队协作意识 对知识的迁移能力
5
5
考核方式
bvtc
考核方式
1. 出勤：10% 2. 课堂表现(上课及上机实验)：20% 3. 平时作业：20% 4. 阶段测试：10% 5. 考试成绩（实训）：40%
作业上交（压缩包名称例：01 a）
6
6
《网页制作技术》
任务一
网页基础
主要内容
一 二 三 子任务1 子任务2 初识网页与网页设计软件 网页的基本操作与站点管理
8
子任务1
初识网页与网页设计软件
1. 网站与网页的关系 网页(web)，即HTML文件，也就是网站上的某一个页面， 它是一个纯文本文件，是向浏览者传递信息的载体。 构建网页的基本元素包括文本、图像和超链接，其他元 素包括声音、动画、视频、表格、导航栏、表单等。 网站(Website)，它是指在互联网上，根据一定的规则， 使用HTML等工具制作的用于展示特定内容的相关网页集 合，它建立在网络基础之上，以计算机、网络和通信技 术为依托，通过一台或多台计算机向访问者提供服务。 平时所说的访问某个站点，实际上访问的是提供这种服 务的一台或多台计算机。
图像：图像在网页中具有提供信息、展示形象、美化网页、表 达风格的作用。有了图像看到的的网页而丰富多彩。现在 网络上使用的绝大多数图片和图像是gif、jpeg和png文 件格式。
No Image
14
子任务1
网站logo欣赏
No Image
初识网页与网页设计软
教 学 大 纲 提 要
4学时： 任务一 4学时： 任务二 4学时： 任务三 12学时：任务四 8学时： 任务五 8学时： 任务六 4学时： 任务七 30学时：实训
网页基础 表格及布局 插入页面元素 框架与层 网页美化与特效 表单 模板与库
授课计划 3
教学大纲、教材与教参
（二）教材
教材特点：
No Image
16
子任务1
初识网页与网页设计软件
表单是用来收集站点访问者信息的域集。
No Image
No Image
17
子任务1
表格是网页排版的灵魂
初识网页与网页设计软件
No Image
18子任务1Fra bibliotek初识网页与网页设计软件
框架是网页的一种组织形式，将相互关联的多个网页的内容组 织在一个浏览器窗口中显示。
二、网站的制作期:使用Dreamweaver制作首页及分页。 三、网站的后期维护:测试网站,申请域名,上传网站内容及管理。
20
20
子任务2
启动 了解工作界面
• 表格——用于布局文本和图像以及其他的列表化数据和 精确 控制各种网页元素在网页中出现的位置。
• 表单——访问者与网站交互的桥梁。
12 12
子任务1
初识网页与网页设计软件
文本：文本是网页信息的主体，网页中的信息主要是以文本 为主的。它能准确地表达信息的内容和含义。
No Image
13
子任务1
初识网页与网页设计软件