《网页制作》1-3周教案-【镇江有作】中职教育网页制作（教案）

授课日期 第一周 授课班级 授课课时 2 授课形式 新授 授课章节 名 称 项目一 网页制作基础 使用教具 多媒体教学系统 教学目的 1. 掌握网页与网站的概念 2. 掌握工作界面的操作 3. 掌握网站框架的创建 4. 掌握站点的管理 教学重点 1. 熟练掌握Dreamweaver CS6工作界面的基本操作 2. 熟练掌握Dreamweaver CS6的站点操作 教学难点 Dreamweaver CS6中站点的建立及编辑（我的第一个网站） 更新、补 充、删节 内 容 我的第一个网页制作 我的第一个网站制作 课外作业 1、继续完善我的第一个网站二级页面的内容。（上机） 2、网站、网页的概念 2、网页的基本组成元素 3、网页的布局结构 教学反思 板 书 设 计 第1章 创建站点与浏览网页 一、网站的概述 1、网页与网站 2、浏览网页的工具 3、认识网页的组成元素 二、初识Dreamweaver CS6（任务一：我的第一个网页） 三、创建网站框架 1、创建文件夹 2、定义新站点（任务二：我的第一个网站） 3、站点管理器 四、管理站点文件和文件夹 五、管理站点 学科网（北京）股份有限公司 学科网（北京）股份有限公司 学科网（北京）股份有限公司 学科网（北京）股份有限公司 学科网（北京）股份有限公司 课 堂 教 学 安 排 主要教学内容及步骤 备 注 1、 组织教学 检查学生出勤情况，师生互候问候，集中学生注意力。 2、 导入新课 提到网站大家都非常的熟悉，飞速发展的互联网技术已经越来越深入地融入到我们的日常生活之中，各类网站给我们提供了便利的服务，比如：浏览资讯可以选择上新浪、腾讯；搜索资料可以上百度；购物上淘宝、京东；看电影、电视上……那这些网站是如何制作的呢？这就是我们这门课程所要解决的问题，通过本课程的学习，我们将全面了解网站开发的原理，掌握使用Dreamweaver这个软件制作网页的方法和技巧，并能根据实际需要独立开发网站，来应对生活或工作中的需求。 本次课主要通过两个任务认识Dreamweaver CS6的工作界面、创建网站框架、管理站点文件和文件夹及管理站点。 呈现任务： 任务一：我的第一个网页 任务二：我的第一个网站 3、 探究新知 （一）网站的概述 1、网页与网站 打开扬州高职校网站http://www.yzgzx.com/，学生观察网站与网页，并总结网站与网页的关系。 浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站。 2、浏览网页的工具 IE浏览器、360浏览器、搜狗等等。 3、认识网页的组成元素 网页标题、导航栏、LOGO、视频、图片、文本、表单、超链接等。 这些网站或网页的制作大都是通过Dreamweaver CS6软件制作而成。 （二）初识Dreamweaver CS6 1、认识Dreamweaver CS6 是当前最为常用、最方便、最流行的网页设计和网站开发工具软件。 Dreamweaver ：梦想编辑者。通过这个工具，实现编辑网页的梦。 早期是Macromedia公司推出的“网页三剑客”之一。“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们各负其责，成为了网站开发的专业利器。它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发工具，2005年被Adobe公司收购，最新版本是Dreamweaver CC。 2、Dreamweaver CS6的工作界面 Dreamweaver CS6的工作窗口由由五部分组成，分别是“插入”控件面板、“文档”工具栏、“文档”窗口、控制面板组和“属性控制”面板。Dreamweaver CS6的操作环境简洁明快，可大大提高设计效率。 （1）友善的开始页面 （2）不同风格的界面 窗口→工作区布局→“编码器”或“设计器”，选择其中的一种界面风格，页面会发生相应的变化。 （3）伸缩自如的功能面板 （4）多文档的编辑界面 （5）新颖的“插入”面板 两种显示方式：菜单显示和制表符显示 （6）更完整的CSS功能 CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。传统的HTML所提供的样式及排版功能非常有限，因此，复杂的网页版面主要靠CSS样式来实现。 “属性”面板提供了CSS功能。 任务一：我的第一个网页 【任务分析】 本任务中网页的构成元素主要有：文字、图片、背景图片、水平线。 【任务实施】 1、 创建空白网页，并保存。 2