站点创建与首页制作 2课时

课题：第1课时 HTML语言简介

教学目标：

知识与技能

1)了解HTML语言的功能及HTML语言的结构。

2)掌握HTML简单语句。

过程与方法

1)通过讲述法及练习法，使学生掌握学习HTM语言，达到举一反三的功效。

2)通过学生动手设计网站的实践活动，使学生建立对象属性设置的思维方法和操作方法，

为学生今后学习奠定了基础。

情感态度与价值观

通过学习，提高网页设计的积极性，破除网页设计的神秘感

教学重、难点

掌握、理解和应用HTML语言的代码含义

教学方法：

讲述法、演示法、自主探究法、练习法

教学过程：

1.导入：

上节课我们欣赏了许多优秀的网页，今天我们要开始自己动手制作网页了，先来看一个网站的首页，它包含了哪些元素呢？

生：标题、图片、文字、背景

师：打开任何的一个网页，点击“查看”菜单中的“源文件”命令，你们都会发现网页其实是由一个文本文档构成的，只不过这个文本文档有点特殊，它是由HTML语言构成的，今天我们就对它做个了解。

2.HTML语言

HTML语言是网页上信息交流的一种通用语言，它可以表示多种信息:文字、图像、声音、和视频信息，所以被称为超文本标识（HTML语言），这就是网页的实质。

网页浏览器软件能够读懂这种语言，并将HTML文件框架中的信息准确无误地展示出来。那么这种语言的结构事怎么样的呢，下面请大家先自主学习课本46页的内容。

师：大家对这种语言有什么感觉呢？

生：

师：HTML语言文件是纯文本文件，它的后缀名为HTML或HTM,可以用记事本编辑、书写。我们一起再来学习一下它的结构：

生：观看课件

(一)基本的结构标记

1)开始和结束标记

表示HTML语句开始

.....

表示HTML语句结束

2)头部标记

头部开始

......

头部结束

3)标题标记

标题结束

4)网页主体标记

网页主体开始

......

网页主体结束

师：其中在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些Hompage省略〈HTML〉标记，因为html或htm文件被Web浏览器默认为是HTML文档。〈HEAD〉之间包括文档的头部信息，如文档总标题等，若不需头部信息则可以省略此标记。〈BODY〉标记一般不省略，表示正文内容的开始。

HTML语言特点：大多数标识符成对出现，分为三部分：开始部分、内容、结束标识。

(二)常用的标记

1)换行标记
( 单个使用)

2)水平线标记

3)段落标记

......< /p>

4)背景色标记< body BGCOLOR="颜色代码">

5)背景图形标记< body BACKGROUND="图形文件名" >

师：大家记住这些常用的标记，可以很方便的修改网页

生：完成课本47页探究学习，可小组合作完成.

任务1：打开记事本，制作一个简单的网页(教师演示，加深学生理解)

①文件头标题：HTML语言编写首页

②网页内容：标题——欢迎光临我的网站

③加水平线

④保存为home.html文件

任务2：设计首页，至少完成如下要求：

①网页的标题

②欢迎标题

③水平线

④简单的文字内容说明

⑤加入图片，在文字的右边

⑥保存在E盘自己的文件夹中，文件自己姓名

师：适当的点评

3.课堂小结：

1)HTML语言的概念、功能。

2)HTML语言的结构。

3)HTML语言编写网页的基本方法。

课题：第2课时站点创建与首页制作

教学目标：

知识与技能

1)认识Dreamweaver软件窗口结构。

2)了解站点与主页的概念，理解站点的意义，学会建立、删除站点。

3)掌握简单网页的新建方法，能够在网页中插入、排版文字，掌握图片、水平线的插入方

法及属性的设置方法，能够灵活应用“网页属性”对话框，设置网页属性，如背景、背景音乐等

4)掌握保存网页的方法，了解网页保存与普通文档保存的不同点。

过程与方法

3)通过对比教学，使学生掌握学习及应用软件的基本方法和规律，达到举一反三的功效。

4)通过学生动手设计网站的实践活动，使学生建立对象属性设置的思维方法和操作方法，

为学生今后学习其它软件奠定了基础。

情感态度与价值观

1)通过对比学习使学生体验软件学习的一般方法及规律，提高学生学习信息技术的信心。

2)通过网站创建和首页设计，掌握对象属性的设置方法，初步体验成功的快乐。

3)通过创建“动物—人类的朋友”网站，使学生树立人与动物和谐相处，珍爱、善待和保

护动物的理念。

教学重、难点：

教学重点

1)认识Dreamweaver窗口结构及主要菜单的功能。

2)掌握建立、删除网站的基本方法，网站的管理作用。

3)掌握简单网页设计的基本方法，如文字、图片以及水平线的插入与编辑等。

4)掌握设置网页属性的一般方法。

教学难点

1)站点的作用和存储路径。

2)网页的保存。

教学方法：

对比教学法，探究学习法，模仿学习法。

教学准备：

整理、归类相关素材，并按要求摆放。

教学过程：

建立网站站点(教案)

建立网站站点（教案） 瓯海区教师发展中心林一心 一、教学目标 知识目标：建立网站文件夹和新建网站的主页。 技能目标：1．认识启动FrontPage，熟悉FrontPage软件环境； 2．建立网站空站点并新建保存主页； 情感目标：教学中以简易地操作技能帮助学生树立成功建站的信心。 二、重点难点 教学重点：本课教学重点是启动FrontPage，在熟悉FrontPage软件环境的基础上建立网站空站点并新建保存主页。 教学难点：本课的教学难点站点文件夹的理解。学生在理解上有一定的困难，他们一般不太理解为什么要用上文件夹来存放网页，这里教师需要作解释。 三、环境与素材 1．教学环境：多媒体网络教室，学生计算机中安装IE5.0以上版本及Frontpage2000以上中文版，要求能上因特网。 2．教学素材：准备示例网站以及首页相关的文字图片素材。 四、学情分析初三没开课，之前学生基础较差，对于Word操作也不是很熟悉，不扎实， 网站更是没接触过。讨论也不大积极。并且由于硬件条件较差，还不能 保证每生一台机子。 五、教学思想由一个网站演示入题，激发学生学习兴趣；通过与Word界面的比较，学 生讨论让他们体会到原来FP同Word差不多，将悬着的心放下；接着进 行建立一个站点文件夹，这时能过教师演示，讲解，学生操作；再进行 建立网站主页，保存，同Word操作的比较，让学生了解与Word些许不 同的地方；最后通过分层教学，布置新建主页的一些基本的图文件混排。 以上一系列的设置都是为了让学生树立成功建站的信心。 六、教学过程 引入：将示例学生网站“蓝色阳光”展现在学生的面前。 师：请同学们踊跃发言，谈谈自己的爱好，理想，特长等等。 生：可能一：不回答。（解决方法，比如说A喜欢玩游戏，B喜欢动漫，C喜欢蓝球）可能二：回答各种各样的，或是单一的，或是两者兼有。 师：好，从今天开始大家可以尽情的展现自我的个性，发挥你的专长，向全世界宣告：我来了！ 师：那么我们能通过什么来展示呢，当然方法可以是多种的，今天我们就用做网站来实现。 建网站可以借助于工具软件，如Marcromedia Dreamweaver、东方网页王等都是目前流行的网页制作工具。我们今天用相对简单的软件Microsoft FrontPage来作为网页制作的平台。 任务一： 找一找2个同学一小组启动Microsoft FrontPage和Microsoft Word，谈谈它们的区别。情况一：学生找不出。师提示（视图栏、文件名、状态栏、分类页面选项卡）。

建立网站站点(教学设计)

建立网站站点（教学设计） 一、教学目标 知识目标：建立网站文件夹和新建网站的主页。 技能目标：1 .认识启动SharePoint Designe,熟悉SharePoint Designe软件环境； 2. 建立网站空站点并新建保存主页； 情感目标：教学中以简易地操作技能帮助学生树立成功建站的信心。 二、重点难点 教学重点：本课教学重点是启动SharePoint Designe,在熟悉SharePoint Desig ner软件环境的基础上建立网站空站点并新建保存主页。 教学难点：本课的教学难点站点文件夹的理解。学生在理解上有一定的困难，他们一般不太理解为什么要用上文件夹来存放网页，这里教师需要作解释。 三、教学方法 微课 四、教学素材 示例网站、ppt以及首页相关的文字图片素材。 四、教学思想 由网站展示入题，激发学生学习兴趣；通过与Word界面的比较，让学生体会到原来SharePoint Designe同Word差不多，将悬着的心放下；接着教师讲解一个网站是由许多的网页组成的，为了更好的管理这些网页和网页素材，需要建立一个站点文件夹，这时通过学生自主学习教材，来建立站点文件夹，教师巡视，然后根据学生的实际情况，教师演示建立站点文件夹的方法，对其中易错的地方加以强调。接着老师演示建立网站主页，保存，同Word保存操作进行比较，让 学生了解与Word些许不同的地方；最后让学生用文字、图片充实新建的主页。以上一系列的设置都是为了让学生树立成功建站的信心。

五、教学过程 引入 将示例网站“LOL官网、迅雷看看官网、梅山中学网站”展现在学生的面前， 激发学生学习网站制作的兴趣。 列举建立网站的软件工具：SharePoint Designe、Dreamweave、Flash等目 前流行的网页制作工具，其中SharePoi nt Desig ne是操作相对简便的软件。 新授 （一）认识SharePoint Designer 1、启动SharePoint Designe，认识SharePoint Designer的界面（标题栏、菜单栏、工具栏、标签、编辑区、视图栏（设计、拆分、代码）、状态栏）引导学生发现原来SharePoint Designe与Word的界面非常相似。 （二）创建站点文件夹 1、站点文件夹：一个普通的网站往往由多个网页组成，为了不让各个网页分散存放，需要先建立一个站点文件夹。站点文件夹就像一幢房子，它把网站中的网页和制作网页的素材装在一起。那么如何创建站点文件夹呢？ 2、试一试：新建一个站点。 请同学们自学课本41页创建一个空站点，位置在D盘，站点文件夹名为同学们名字的拼音。 3、教师根据学生的实际情况演示站点文件夹的建立，对于易错点进行强调。 然后引导学生观察站点文件夹与普通文件夹的外观区别。 4、亲身体验： 请同学们素材文件夹复制到该网站文件夹目录中。 （三）建立网站主页 师：刚才我们大家已经建好了框架，接下来的任务就需要建立网站的主页。 什么是主页，homepage

创建站点

第一课 一、课题： 创建站点 二、教学目标： 1、知识目标：了解网站规划方法；认识FrontPage2000的工作界面；理解站点、网页、主页的概念。 2、技能目标：学会规划和设计网站；能够搜集网站相关素材；学会新建和打开站点。 3、情感、态度与价值观目标：感受网站规划的重要性，养成做事有计划、勤思考的习惯。 三、教学重难点: 新建、打开站点 四、教学方法： 广播演示、启发引导 五、教学过程： （一）引入： 相声大师侯宝林说过一段经典相声：门前的路挖了填，填了又挖，今天通煤气，明天埋电缆，后天修下水道，过不了几天为了改造暖气，又得挖沟……一年到头，挖沟不止。于是，他建议“给马路安拉链”，幽默而深刻地道出了合理规划在城市建设中的重要性。如果要在网上安个家，同样需要对自己的网站进行合理规划。如何规划呢？我们今天就来介绍。

（二）网站规划的一般步骤 网站规划大体包括以下几个方面： 1、确定网站的主题和风格。 2、设计规划网站的结构和内容。 3、设计网站的版面布局。 4、搜集整理网站素材。 5、选择网站制作工具。 （三）FrontPage的站点管理 1、认识FrontPage 依次单击开始→所有程序→Microsoft FrontPage,运行FrontPage。 2、新建站点 依次单击文件→新建→站点，打开“新建”对话框，在对话框中选择站点的类型和站点的存放位置。如F:\情感小屋，新建站点后，在站点对应的文件夹中会自动生成两个文件夹和一个名为index.htm的文件。其中，_private文件夹用来存放一些对网络浏览者不可见的信息，image文件夹用来存放所有的图形文件，index.htm文件叫做网站的首页。 3、打开站点 为了能充分利用FrontPage的站点管理功能，减少网站设计中的错误，我们应在每次设计网站内容前，先打开站点，然后再进行后面的操作。

站点的创建与网页制作

第4周站点的创建与网页制作 【计划课时】：3课时 【授课班级】：10班 【教学目的与要求】 ◆熟悉Dreamweaver8工作界面中各个工具的作用 ◆熟悉Dreamweaver8工作界面中各个面板的调用 ◆掌握构建本地站点的方法 ◆掌握网页中超链接的创建、图像的插入、导航条的制作 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】： 基础知识：学会构建本地站点 重点知识：学会规划与构建站点结构 网页中超链接的创建、图像的插入、导航条的制作 【教学组织过程】 1．上讲回顾 2．教授新知 【授课内容】 一、利用dreamweaver8进行网页设计的基本步骤： 1. 打开dreamweaver8 2. 创建站点 3. 在站点根目录下新建网页（HTML文件），并按要求命名 4. 打开所创建的网页（HTML文件），对网页进行布局、创建超链接等 二、新建站点的操作（站点：以自己的名字命名的文件夹） 1．在桌面上找到位dreamweaver8并运行它。在“站点”菜单中点“新建站点” 2．在弹出的窗口中，给你的站点以你的名字命名，并点“下一步”，如下图：

3．在选择服务技术页面选“否，我不想使用服务技术”并直接点“下一步”。 4．在您把文件存储在计算机的什么位置上选择你前面建立的你自己的文件夹，并点“下一步”，如下图： 5．在您如何连接到远程服务器窗体选择您打算将你的文件存储在服务器上的什么文件夹中选中你前面创建的自己的文件夹，然后“下一步” 6.然后点“完成”，你的站点就建立完毕。注意dreamweamver的右边显示你的站点。

网页设计与制作教学大纲

《网页设计与制作》课程教学大纲 课程编号: 课程名称：网页设计与制作 课程类型:专业基础课 总学时：64 讲课学时：32 实验学时：32 适用班级: 一、课程性质、目的和任务：（加粗，以下同） 1、目的 本课程要求学生掌握基本的HTML语言。学会使用Dreamweaver开发工具进行网页设计。这是一门重在实践的科目，因此需要学生多上机、多进行实际操作，把老师所教授的各种网页制作、版面设计以及程序熟练制作或调试出来，并且能够在此基础上有所创造、有更进一步的发挥。 2、任务 本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计，包括新建、编辑和设置一个Web站点；如何对页面属性进行基本的设置，如何设置、编辑CSS层叠式样式表；如何排版文字、表格和层；如何进行基本的图像处理；建立框架；模板和库的使用和编辑；网站的发布与维护等基本知识与应用。目的是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计。 二、教学基本要求：（分三级：掌握、理解、了解） 1．掌握： 要求学生能够全面掌握所学内容，并能够用其分析、应用与Dreamweaver网页设计相关的问题，能够举一反三。 2．理解： 要求学生能够较好地理解与Dreamweaver网页设计相关的问题，并且能够进行简单分析和判断。 3．了解：

要求学生能够一般地了解的所学内容。 三、教学内容及要求： 第1章Dreamweaver基础 教学内容： Dreamweaver 的历史和简介 Dreamweaver 的安装过程 Dreamweaver 的全新界面 改进的设计与开发环境 主菜单介绍 对象控制面板介绍 教学要求： 掌握：Dreamweaver的基本特点、新增功能及界面组成。基本操作，如安装、新建、打开、导入、保存、关闭等。 理解：新增功能、界面组成的优点。 了解：Dreamweaver可以为我们做些什么。 第2章网页设计语言基础 教学内容： HTML及XHTML语言介绍 常用的网页语法标记 教学要求： 理解：HTML及XHTML语言介绍，常用的网页语法标记 第3章文本和图像处理 教学内容： 文本属性面板 编辑文本和插入对象 设置文本的格式

设计网站与制作首页

设计网站与制作首页（教学设计） 围场县第二中学泰国辉教学目标： 1．知识与技能 （1）了解网站的分类与作用。 （2）了解网站和网页的关系；知道建立网站的基本流程；了解网页版面布局的几种常见的方式。 （3）掌握“展示自我风采的个人网站”结构示意图的设计方法。 （4）了解网页制作工具Dreamweaver的基本功能。 2．过程与方法 （1）通过对比教学，使学生掌握学习及应用软件的基本方法和规律，达到举一反三的功效。 （2）通过学生动手设计网站的实践活动，使学生建立对象属性设置的思维方法和操作方法，为学生今后学习其它软件奠定了基础。 3．情感态度与价值观 （1）通过对比学习使学生体验软件学习的一般方法及规律，提高学生学习信息技术的信心。 （2）通过网站设计和首页制作，掌握对象属性的设置方法，初步体验成功的快乐。 （3）通过创建“展示个人风采”的网站，激发学生继续学习的兴趣和展示自我的愿望。 教学重、难点： 1．教学重点 (1)掌握建立网站的基本流程。

(2)掌握“展示自我风采的个人网站”结构示意图的设计方法。 2．教学难点 尝试认知网页制作工具dream weaver的基本功能，初步进行操做应用。 教学方法： 对比教学法，任务驱动学习法，探究学习法，小组合作学习法。 教学过程： 一．问题引入 教师提问：同学们，请问大家认识“度娘”吗？喜欢她吗？ 学生回答：略 教师抓住学生回答的“上网”来引入新课：同学们都非常喜欢上网，上网不仅可以使我们随时了解世界各地发生的各类事件、各种领域的知识，还可以玩各类游戏、联络朋友、网上购物、传递信息等等，大家一般都登录哪些网站呢？看别人做的网站很过瘾，是否想过自己制作网页供别人去浏览呢？从本节课起我们就来学习运用Dreamweaver这一制作网站的工具来制作我们自己的网站，大家有没有信心做出让别人也喜欢的网站！ 二．探究新知 1.理清网站、首页、网页的关系 教师提问：请大家谈一谈对“网站”“网页”“首页”的认识（举例说明） 学生思考，小组交流后尝试回答，小组间相互补充或质疑。 教师给与肯定的评价后，总结：网站就像一座图书馆，首页是图书馆的检索目录，网页是图书馆内各种各样的图书。 2.合作探究——建立网站的五步基本流程及其认识 教师提问：我们明白了网站、首页、网页的关系后，现在我们就可以制作总结的网站了吗？不行，我们还要做哪些准备工作？

1站点建立及网页文档的设计

第一讲站点建立及网页文档操作 【教学内容】 ?Dreamweaver界面 ?个人站点创建为例讲述静态站点的创建 ?个人网页为例讲述静态网页文档的基本操作 ?分析网页文档的HTML结构 【教学目的】 ?了解Dreamweaver工作界面 ?掌握静态站点的创建 ?掌握静态网页文档的基本操作 ?掌握HTML基本语法结构 【教学重、难点】 ?重点：掌握静态站点的创建、静态网页文档的基本操作、HTML基本语法结构?难点：HTML基本语法结构 【教学方式】 采取讲授、讨论和案例分析相结合的方式。 【教学课时】5节

一、Dreamweaver的工作环境 图2-1-1 Dreamweaver工作环境 注： ①标题栏、②菜单栏、③插入栏 ④文档工具栏、⑤状态栏、⑥浮动面板 1.标题栏 位于窗口顶端，它的最左边是Dreamweaver标记。 2.菜单栏 主窗口中的菜单栏对整个环境下的所有窗口提供菜单控制。这些菜单允许用户方便地管理整个主窗口的布局，配置Dreamweaver环境，获得在线帮助。 “文件”菜单包含“新建”、“打开”、“保存”、“保存全部”，还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。 “编辑”菜单包含选择和搜索命令，例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。 “查看”菜单使您可以看到文档的各种视图（例如“设计”视图和“代码”视图），并且可

以显示和隐藏不同类型的页面元素和 DW工具及工具栏。 “插入”菜单提供“插入”栏的替代项，用于将对象插入文档。 “修改”菜单使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。 “文本”菜单使您可以轻松地设置文本的格式。 “命令”菜单提供对各种命令的访问；包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令等。 “站点”菜单提供用于管理站点以及上传和下载文件的菜单项。 “窗口”菜单提供对DW中的所有面板、检查器和窗口的访问。 “帮助”菜单提供对Dreamweaver文档的访问，包括关于使用Dreamweaver以及创建Dreamweaver扩展功能的帮助系统，还包括各种语言的参考材料。 3.插入栏 “插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。 “插入”栏按以下的类别进行组织： “常用”类别使您可以创建和插入最常用的对象，例如图像和表格。 “布局”类别使您可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。 “表单”类别包含用于创建表单和插入表单元素的按钮。 “文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。 “HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。 “服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，您可以将这些对象插入“代码”视图中。 “应用程序”类别使您可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。

建立网站站点(教案)

建立网站站点（教案） 一、教学目标 知识目标：建立网站文件夹和新建网站的主页。 技能目标：1．认识启动FrontPage，熟悉FrontPage软件环境； 2．建立网站空站点并新建保存主页； 情感目标：教学中以简易地操作技能帮助学生树立成功建站的信心。 二、重点难点 教学重点：本课教学重点是启动FrontPage，在熟悉FrontPage软件环境的基础上建立网站空站点并新建保存主页。 教学难点：本课的教学难点站点文件夹的理解。学生在理解上有一定的困难，他们一般不太理解为什么要用上文件夹来存放网页，这里教师需要作解释。 三、环境与素材 1．教学环境：多媒体网络教室，学生计算机中安装IE5.0以上版本及Frontpage2000以上中文版，要求能上因特网。 2．教学素材：准备示例网站以及首页相关的文字图片素材。 四、学情分析初三没开课，之前学生基础较差，对于Word操作也不是很熟悉，不扎实， 网站更是没接触过。讨论也不大积极。并且由于硬件条件较差，还不能 保证每生一台机子。 五、教学思想由一个网站演示入题，激发学生学习兴趣；通过与Word界面的比较，学 生讨论让他们体会到原来FP同Word差不多，将悬着的心放下；接着进 行建立一个站点文件夹，这时能过教师演示，讲解，学生操作；再进行 建立网站主页，保存，同Word操作的比较，让学生了解与Word些许不 同的地方；最后通过分层教学，布置新建主页的一些基本的图文件混排。 以上一系列的设置都是为了让学生树立成功建站的信心。 六、教学过程 引入：将示例学生网站“蓝色阳光”展现在学生的面前。 师：请同学们踊跃发言，谈谈自己的爱好，理想，特长等等。 生：可能一：不回答。（解决方法，比如说A喜欢玩游戏，B喜欢动漫，C喜欢蓝球）可能二：回答各种各样的，或是单一的，或是两者兼有。 师：好，从今天开始大家可以尽情的展现自我的个性，发挥你的专长，向全世界宣告：我来了！ 师：那么我们能通过什么来展示呢，当然方法可以是多种的，今天我们就用做网站来实现。 建网站可以借助于工具软件，如Marcromedia Dreamweaver、东方网页王等都是目前流行的网页制作工具。我们今天用相对简单的软件Microsoft FrontPage来作为网页制作的平台。 任务一： 找一找2个同学一小组启动Microsoft FrontPage和Microsoft Word，谈谈它们的区别。情况一：学生找不出。师提示（视图栏、文件名、状态栏、分类页面选项卡）。

网页设计与制作课程教学大纲

《网页设计与制作》课程教学大纲 课程名称：网页设计与制作 学分及学时：4学分总学时72学时，理论36学时 适用专业：网络工程 开课学期：第四学期 开课部门：计算机与互联网学院 先修课程：计算机文化基础计算机网络 考核要求：考试 使用教材及主要参考书： 向知礼主编：《网页设计与制作》航空工业出版社2017年 杨松主编：《网页设计案例教程》航空工业出版社2015年 一·课程性质和任务： 本课程全面地介绍网页制作技术的基本理论和实际应用。全书共10章，分为3大部分。前5章为第1部分，主要介绍网页制作的基本理论——HTML，同时穿插介绍Fireworks，Flash，Anfy等软件在网页制作过程中的应用；第6章～第8章为第2部分，主要介绍网页制作技术，包括CSS技术、客户端脚本技术(DHTML)以及XML技术；第9章～第10章为第3部分，主要介绍当前最流行的网页制作工具——Dreamweaver，通过应用实践能够从实际应用的角度进一步巩固所学知识。 课程内容不但包括各种网页制作技术的基础理论，而且强调网页制作的具体应用，使读者既能打下坚实的理论基础，又能掌握实际的操作技能。 二·课程教学目的与要求 以Dreamweaver的使用为主线，介绍网页制作的相关技术。使学生理解网页制作的基本概念和理论,掌握站点的建立和网页的设计,能用HTML语言修改网页;掌握网页制作和站点的

基本知识;掌握站点的创建和网页的编辑;掌握超链接、图像、CSS样式的使用;掌握表格、框架、表单、多媒体对象的使用;理解行为、模板、库、CSS布局的概念和使用;理解HTML语言、网站的测试与的发布； 要求：教学过程中，须注重学生实践操作能力的培养，采取“面向实践、能力为先”的教学思路，教学内容应结合当前WEB技术的发展趋势，把握未来企业级WEB页面开发的发展方向，兼顾各行各业的需求变化，力争面向社会，服务于企业“互联网+”战略。 三、课程学时分配 四·课程教学中应注意的问题 理论课讲解WEB页面开发的原理及方法，并在多媒体教师机上进行演示操作；

《创建站点+制作首页》教学设计及反思

野生动物的呼唤 ——创建站点制作首页 南京市南化第二中学曹红梅 ■教材分析 本课是苏科版《初中信息技术》教材上册第十章第二节的内容，对应《江苏省义务教育信息技术课程指导纲要》中必修基础“信息的发布与交流”模块。网站设计是初中信息技术必修部分的最后一章，本课是利用软件制作网站的实践第1课时，教材中所使用的软件是Frontpage，遵循与时俱进的原则，尝试用功能强大的Dreamweaver软件进行教学，在教学内容上作了适当调整与整合，包括站点的创建、应用表格布局网页以及插入图片文本等对象。 ■学情分析 这一节课是初二年级的借班上课，到目前阶段学生已学习了多种软件的使用，应该具备了常规的操作技能，教学内容中插入图片文本等对象，学生可以借助已有的认知经验迁移学习，但是新软件的使用学生需要一个适应过程，还有应用表格布局网页，这一点要使学生能做到灵活运用有一定难度，力图通过示例讲解练习有机结合，以期使学生通过一节课的学习，能创建站点并制作出布局工整的首页，在体验成就感的同时初步感知制作网站的过程，从而增强对网页制作后续学习的兴趣。 ■教学目标 1．知识与技能: （1）认识Dreamweaver窗口的组成，能够熟练运用Dreamweaver打开和保存网页文件。 （2）学会在Dreamweaver中建立站点。 （3）学会利用表格的相关操作布局网页。 （4）掌握插入文本、图片等对象的方法，并能根据需要设置属性。 2．过程与方法: 通过亲历建立网站、布局网页和插入对象的操作过程，在不断尝试中理解和学习基本知识。 3．情感态度与价值观: （1）引导学生在学习新软件时与已有知识经验相类比，养成勤于总结的习惯，体会学习要讲究方法。 （2）通过制作主题网站，在创建站点和制作首页的过程中，树立人与动物和谐相处，珍爱、善待和保护动物的观念，同时在不断完成任务的过程中体验成功的喜悦。 4．行为与创新: 在制作首页的过程中，学会科学运用各种元素并进行合理布局，个性化地表达思想和情感。 ■课时安排 安排1课时 ■教学重点与难点 1．教学重点 （1）创建站点并理解各参数选项的设置。 （2）利用表格的相关操作布局网页。

《建立网站站点》教案

第十四课时建立网站站点 一、教学目标 知识目标：建立网站文件夹和新建网站的主页。 技能目标：1．认识启动FrontPage，熟悉FrontPage软件环境； 2．建立网站空站点并新建保存主页； 情感目标：教学中以简易地操作技能帮助学生树立成功建站的信心。 二、重点难点 教学重点：本课教学重点是启动FrontPage，在熟悉FrontPage 软件环境的基础上建立网站空站点并新建保存主页。 教学难点：本课的教学难点站点文件夹的理解。学生在理解上有一定的困难，他们一般不太理解为什么要用上文件夹来存放网页，这里教师需要作解释。 三、教学方法 讲解法、实践操作法 四、教学安排 1课时 五、教学过程 引入：将示例学生网站“蓝色阳光”展现在学生的面前。 师：请同学们踊跃发言，谈谈自己的爱好，理想，特长等等。 生：可能一：不回答。（解决方法，比如说A喜欢玩游戏，B喜欢动漫，C喜欢蓝球）

可能二：回答各种各样的，或是单一的，或是两者兼有。 师：好，从今天开始大家可以尽情的展现自我的个性，发挥你的专长，向全世界宣告：我来了！ 师：那么我们能通过什么来展示呢，当然方法可以是多种的，今天我们就用做网站来实现。建网站可以借助于工具软件，如Marcromedia Dreamweaver、东方网页王等都是目前流行的网页制作工具。我们今天用相对简单的软件Microsoft FrontPage来作为网页制作的平台。 任务一：找一找 2个同学一小组启动Microsoft FrontPage 和Microsoft Word，谈谈它们的区别。 情况一：学生找不出。师提示（视图栏、文件名、状态栏、分类页面选项卡）。 情况二：学生回答。补充 师：怎样快速在FP中建立一个网站呢，首先我们要做的是让各个网页及网页存在一个地方，以便以后的管理。那就是创建站点文件夹。如果没有站点文件夹，那么我们做的网站也无法上传。 他就像围墙一样，将我们的网站内的所有资料围起来！ 演示：文件——新建——站点——空站点、指定站点位置。 任务二：新建一个空站点，位置在E盘，站点文件夹名为同学们自己姓名的拼音。 private文件夹：存私人的资料，不被别人所见的； images文件夹存放网页中的图片；两个文件夹内都可以再细分类。

网页的制作--用frontpage创建站点

4.3网页的制作—用FrontPage创建站点 一、教学内容分析 《网页的制作》是教育科学出版社出版的初中信息技术七年级上册的内容。本章内容是使用FrontPage进行网站的开发，本节主要让学生掌握FrontPage站点的建立、导航框架的搭建，目的是通过运用FrontPage网页制作工具创建站点，很好地发挥FrontPage对网页的组织管理功能；建立网页导航框架，快速搭建网站导航框架；创建共享边框，使得所需内容出现在站点内多个网页的相同位置。进一步提高学生的网站设计能力和动手实践能力，又注重学生情感态度、价值观以及共通能力的发展，为学生应对未来挑战、实现终身发展奠定基础，提升学生的信息素养。 二、学习者特征分析 本课的学习者是我校初二年级学生，他们求知欲强，思维活跃，视野开阔，富有个性，他们的感知能力和思考能力较强，通过前一阶段的学习已掌握了网络技术知识和技能，他们渴望学到更多实用而有趣的网络技术知识。frontpage是一个所见即所得的网页制作工具，易学易用，与word文字处理软件类似，这种软件有利于树立学生制作网站的信心，对提高学生的信息综合处理能力作用较大，网站站点的建立也给学生提供了展示个性，自主、协作的机会，可促使他们合作、主动、创造性地学习，在教学中给学生自由发挥的空间，让学生在兴趣中自主探究学习。 三、教学目标 知识与技能 1. 认识FrontPage的工作界面，学会启动该软件。 2. 掌握站点的建立、打开、编辑和关闭的步骤。 3.学会创建导航框架、使用共享边框。 过程与方法 1. 通过基于任务的探索和小组的合作，师生交流、提高自己的动手实践能力和创新能力。 2. 通过自评和互评作品，能归纳利用FrontPage制作网站的基本思想方法。 情感态度与价值观 1. 培养集体主义荣誉感，热爱学校，为校园网站建设出谋划策。 2. 通过小组协作和自主探究活动，培养协作意识和探索精神，从而激发创作热情。

创建站点

教案首页 （以2课时为单元） 课序：1 第一章第1—2节第二章第1—2节 目的要求： 通过此节的学习，读者应掌握网络相关的基础知识，了解网页制作工具，掌握HTML语言，掌握dreamwever工具的使用，掌握站点创建方法，掌握简单网页的制作。 教学内容： 1.internet基础 2.网页制作工具 3.HTML语言的语法结构 4.利用HTML语言制作简单网页 5.Dreamweaver工具界面 6.了解并掌握站点的创建 7.掌握简单网页的制作 重点与难点： 重点：HTML语言和站点的创建 难点：HTML语言 教学方法：多媒体教学 手段：课程讲授为主，学生讨论练习为辅。 教学步骤： 1.首先介绍当前internet发展情况，然后导入WWW、IP及域名、网页及网站 的概念。 2.首先介绍dreamweaver工具，然后讲解站点的创建和简单网页的制作。 复习提问： 作业题目： 习题1-2 预习内容：浏览网站，分析网站结构特点及配色特点。

第1章网页设计基础知识 本章主要介绍了网页设计前需要了解的准备知识，如网络基础知识、网页制作工具以及HTML语言等。 【本章学习目的】 通过本章的学习，读者应了解与网络相关的基础知识，了解网页制作工具，掌握HTML 语言。 一、Internet基础 1、Internet概述 Internet是相互连接的网络集合。网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何种方法获得所需的信息。 Internet所提供的服务主要是WWW、E-mail、FTP、网上传呼、在线聊天、网上购物等等，而其中WWW和E-mail是最常用的服务。 2、WWW WWW(World Wide Web)简称为万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问internet上的服务器端，迅速地获得所需的信息。 3、网页与网站 什么是网页？什么是网站？两者有什么样的联系与区别呢？ 构建WWW的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。 通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。 4、域名与IP地址 在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP 地址。 IP地址是由32位的二进制数值构成，分成4组，转化为十进制用点分隔，比如：202.100.4.11。 域名系统是一个分层的树状结构组织。最上面是一个无名的根域，下层为顶级域名，接着是二级…… 顶级域名的分类：从组织上和地理上分类，顶级域名的管理和分配由internet网络信息中心控制，网址为：https://www.wendangku.net/doc/aa6846043.html,。 美国采用的组织分类形式，而其它国家采用的是地理上分类，用代表国家或地区的顶级域名，中国国内域名由中国互联网信息中心控制，网址为：https://www.wendangku.net/doc/aa6846043.html,。 域名的书写格式为：叶节点名.二级域名.顶级域名 例如：https://www.wendangku.net/doc/aa6846043.html,，www：web服务器名，sohu：企业名称，com：顶级域名。 二、网页制作工具 目前网页制作工具较多，大多数网页的制作都是通过“所见即所得”的编辑工具完成的，在网页制作过程，还需要进行素材的创作和加工，即图形和动画制作工具。

4.3网站实现(4.3.1建立站点)学案

4.3.1建立站点 设计人：周村区实验中学聂玉洁 【学习目标】 1.建立自己的站点。 2.设计目录结构。 3.制作首页 【学习重难点】 1、根据不同需求选择合适模板。 2、在设计目录结构时应该注意的要点。 3.利用表格布局首页 【学习环境】 多媒体机房、投影仪 【组织方式】 任务驱动，以学生的自主学习和实践为主 【学习方法】 小组合作自主探究 【导学过程】 〖导学一〗站点的建立 1. 建立自己的主题网站，首先需要创建一个Web 站点，用于保存和调试创建的网页。启动frontpage2003，点击工具栏上新建按钮旁的黑三角，选择网站，打开“新建”站点对话框。如下左图所示 2.新建的网站首先要保存在本地硬盘上，待整个网站建好之后再发布。例如，我们在“指定新站点的位置”提示框中输入“D:\robot”，这样今后制作的网页文件就都保存在该文件夹中了，如上右图所示。 〖导学二〗设计目录结构 1.打开光盘中的“机器人做学玩”网站，观察其目录结构，回答以下问题。 （1）该网站的目录中，分别有哪些文件夹和文件？文件夹和文件是按什么规则分类的？ （2）网页标题和文件名有无对应关系？文件名的命名规则是什么？ （3）网页中的图片存放在什么文件夹里？ 2.在建立网站的目录结构时，应注意哪些要点。 （1） （2）

（3） （4） （5） 3. 回到frontpage2003，参照“机器人做学玩”网站的目录结构，按照本小组主题网站的栏目，设计好网站的目录结构。 『提示』右击网站空白处可新建文件夹 4.点击工具栏上新建按钮旁的黑三角，选择网页，打开网页模板对话框，如下左图所示。会弹出如下右图所示的“网页模板”对话框，选择相应的网页模板即可。比如，选择“普通网页”。 〖导学三〗按照小组选定的网站主页的版面设计，使用表格对页面进行布局。 1.点击菜单“表格” “布局表格和单元格”，在窗口右侧的侧边栏中选择较为合适的布局表格样式。 『提示』如果没有最合适的就选一个比较接近的样式，以后可以再修改。 2.调整表格结构。建好的表格可能和我们设计的布局相差甚远，我们还需要一步步地修改与完善它，

DW网页制作——站点的创建与管理习题

心之所向，所向披靡 站点的创建与管理 1.网站规划 1. （2007年高考题）网站设置的流程的第一步应该是（） A首页设计B确定网站风格C确定网站的主题D确定网站的栏目 2. （2009年高考题）在网站的开发流程中，搜索素材属于哪个阶段（） A规划设计B制作与发布C更新与维护D上传站点 3.（2010年高考题）在规划网站目录结构时，下列说法错误的是（） A按栏目内容建立子目录B不要使用过长的目录名称 C这里便于记忆，目录最好使用中文名称 D每个栏目目录下均建立独立的imgaes文件夹保存图像资源 4.以下说法错误的是（） A一台web服务器上可以同时有多个站点 B每个站点由一个网页组成C互联网上的网站都必须由URL路径 D每个网站都必须又两个主页 5.以下软件不是网页制作软件的是（） A DW B Netscape C Frontpage D Internet Explorer 6.网站的开发流程阶段中，建立站点属于（） A制作与发布阶段B更新与维护阶段 C规划设计阶段D宣传推广阶段 7.规划个人网站时一般步骤是（） ①定位网站主题和名称②规划网站的目录与目录结构 ②需求分析④选择网页制作软件 A①②③④B③②①④C③④①②D③①②④ 8.关于规划网站目录结构，应注意的问题是（） A要将所有文件存放到网络根目录下，便于查找和管理B按网站栏目内容创建子网站C文件夹的层次不要太深，建议不要超过四层 D尽量定义中文文件名或长文件名，便于记忆和查找 9.在网站开发流程过程中，搜集材料属于哪个阶段（） A规划设计B制作与发作C更新与维护D上传站点 10.对于网站、网页、主页，下列说法正确的是（） A网站时一个大的网页，它包含着网页和主页 B网站是相关网页的集合，它包含着网页和主页 C网站包含着主页,包含着网页D三者无关系 11.在网站开发流程过程中，绘制网页表格属于（）A规划设计阶段B更新与维护阶段C制作与发布阶段D上传站点 12.网站在开发流程过程中，创建网站使用的CSS样式属于（） A规划设计阶段B更新维护阶段C制作与发布阶段D上传站点 13.在规划网站的目录结构时，应注意的问题是（） A.要将所有文件存放到网站根目录下，便于查找 B.整个网站只能建一个images文件夹，用来存放图片 C.文件夹的层次不要太深，便于维护和管理 D.尽量定义中文文件名，便于记忆 14.在网站的开发流程中，第一阶段的任务是（） A.规划设计阶段 B. 网站宣传阶段 C. 制作与发布阶段 D.更新与维护阶段 15.创建个人网站时，首先要确定的是（） A.用于网页制作 B.网站的主题和名称 C.网站的风格 D.网站的目录结构 16.在网站开发流程阶段中，属于规划设计阶段的是（） A.建立站点 B.素材收集 C.网站更新 D.制作网页 17.以下属于制作与发布阶段中的最后一个环节的是（） A.网站维护 B.建立站点 C.测试及上传 D.风格设计 2.创建站点 1. 运行DW后首先显示一个起始页，起始页能完成的操作（） A编辑站点B删除站点C新建站点D以上都能完成 2. 创建站点时，一般的做法是（） A直接在远程服务器上进行编辑B先在本地计算机编辑后再上传远程服务器 C在本地和远程服务器上同时编辑D无所谓 3.以下不能使用中文命名的是（） A网站的名称B网站中网页的页面标题 C网站中的文件夹名D主页的网页标题 4.在创建本地站点时，第一项要完成的工作是 A.选择服务器技术 B.确定网站的名称 C.选择网站文件夹 D.选择连接到远程服务器的方法 5.如何创建一个名为“快乐学习”的站点？该站点采用ASP技术，网站文件夹为D盘的abc 的文件夹。 6.小明正在某计算机上使用DW8.0进行网站设计，现需要更换一台计算机继续开发，应如何操作？

网页设计与网站建设

1、网页制作三剑客是： A、Dreamweaver B、Flash C、Fireworks D、FrontPage E、https://www.wendangku.net/doc/aa6846043.html, 2、以下用于处理图形图像的工具包括： A、FrontPage B、EditPlus C、Fireworks D、Photoshop E、CorelDRAW 3、命名的原则包括： A、要有很强的概括性 B、要合理、合法、易记 C、名称不宜过长 D、要有个性 4、设计目录结构的原则包括： A、不要使用中文文件名或中文目录名 B、目录的层次不要太深 C、应有一个主目录 D、不要将所有的文件都直接存放在根目录下 5、策划书一般包括以下内容： A、建设前的市场分析

B、建设的目的及功能定位 C、技术解决方案 D、内容规划 E、网页设计 F、维护 1、在Web上通常采用的图片格式有： A、GIF B、BMP C、PNG D、JPG 2、在Web 页中使用图像前，需要考虑哪些问题： A、确保文件较小 B、控制图像的数量和质量 C、合理使用动画 D、可以在网页中任意插入大量的图像和动画 3、在Fireworks中切片时，以下说法正确的是： A、切片就是将一幅大图像分割为一些小的图像切片 B、切片的过程要先总体后局部 C、切割的时候要注意平衡 D、单色区域不需要切片 E、重复性的图像只需要切一X即可 4、可以用Flash制作的动画包括：

A、逐帧动画 B、形状补间动画 C、运动补间动画 D、传统补间动画 E、遮罩动画 F、引导线动画 5、以下说法正确的是： A、逐帧动画就是通过更改每一帧中的舞台内容而获得动画效果 B、逐帧动画中各帧的内容可以不完全相同 C、逐帧动画最终生成的动画文件较小 D、补间动画是在两个关键帧之间建立渐变的一种动画 E、逐帧动画在时间轴上表现为连续的关键帧 1、Dreamweaver中模板的作用是： A、有利于保持网页风格的一致 B、可以进行网页的布局 C、提高网页更新和维护的效率 D、设置网页元素的显示方式 E、适合于团队合作 2、在Dreamweaver中创建模板的方法有： A、创建空模板 B、将普通网页另存为模板 C、从文件菜单中新建模板