网页制作超链接公开课教案

福宝中学公开课教案

第 3 周星期三第 3 节 20 16 年 3 月 9 日执教: 刘云授课班级: 14计升A班课型 : 新授课

课题“教材简介”——超链接的应用

知识目标掌握超链接的几种类型及操作方法教

学通过超链接的制作，培养学生观察力，动手操作能技能目标

目力。

通过学习，培养学生浓厚的学习兴趣，提高学生自标情感目标

主、合作、探究的学习能力，培养学生创新精神。

超链接的几种类型及其操作方法，设置超链接的方教学重点

法

教学难点超链接的设置

对学生的分析以及

具有一定自学能力，模仿能力强。好奇心强。要解决的主要问题

教学方法形式 PPT演示文稿、讲授法、演示法教学效果评价方式机房实践检查作品

一、导入新课 (1-2分钟)

二、理论知识讲解 (18分钟左右，设计意图:提高学生理论素

教养)

学 1.超链接基础

过 2.链接路径 (绝对路径、文档相对路径、站点根目录相对

程路径)

3.链接的几种类型(链接到其他文档或文件、电子邮件链

接、空链接和脚本链接、命名锚记链接)

4.创建链接的三种方法(使用属性检查器创建链接、使用

“指向文件”:图标创建链接、使用“超链接”命令)

5.链接目标(_blank _parent _self _top)

6.超链接标签超链接标签为三、实战演练 (20分钟左右，设计意图:通过教师演示和学生操作，提高学生动手能力，培养学生兴趣。)

1、点我看大图

2、网页与网页直接的链接

3、与互联网链接 (友情链接)

4、电子邮件链接

5、FTP链接

6、空链接

7、下载链接

8、锚记链接

四、课程总结、作业布置 (3-5分钟)

1、完成课后思考题

2、机房实践熟练操作链接的几种类型

3、完成教材案例项目4

4、学有余力的同学自己发挥想象设计一个书本目录五、板书设计

URL、链接路径(3种)、链接类型、创建链接方法

教学评议

网页制作教学设计(公开课)

一体化课程教案（首页）课程网页制作授课教师课题（项目）名称创意型网站开发审批学习任务创意型网站开发授课课时16 授课日期年月日至年月日授课班级13电商高中项目（任务）描述小李刚刚通过应聘进入了一家网页制作公司，公司规模不大，主要业务是承接各类网站的制作。现在公司刚接了四个不同的制作网站业务，由于公司人数不多，所以小李要独立负责其中一个网站的建设，由于时间紧迫，现要求小李选择其中一个网站，并和策划部进行快速沟通和需求分析，完成资料的整理和素材的简单加工，设计出基本框架，再通过网页编辑工具完成网页版面的制作和内容元素的编辑，最后通过公司服务器发布网站到互联网上。教学目标通过完成本次任务，学生能够 ●通过多方调研明确客户需求，撰写需求确认分析说明书； ●通过组内讨论，做好网站开发详细计划，撰写项目工作计划表； ●通过小组分工合作，自主探究学习，设计有特色的网站； ●通过测试，发现存在问题并提出解决方案； ●能够展示小组作品的优势和特色，并能客观评价他人； ●通过基于工作情境的角色扮演，熟悉网站开发的工作流程，并从中获得沟通表达，解决问题的经验，体验团队合作和信息共享的乐趣。教学重点分析客户需求；设计网站规划书；创建网站站点；设计网页版面布局；素材编辑和修辞；内容页制作和超链接。教学难点使用Dreamweaver进行网页布局；内容页制作；页面间的超链接。学情分析根据客户需求，开发一个商务网站，进行宣传推广商品。该网站以信息发布、产品介绍、在线销售、顾客服务、提升品牌形象为主要功能和目的。学生在学习任务中首先要进行客户需求分析，制定网站设计书，并进行创建站点和管理站点，然后在已创建的站点上进行主页、内页设计完善网站功能，并使用多种工具进行网页美工，最后发布和管理已建好的网站，根据公司的要求，更新和维护网站。教学策略本次教学任务在电商实验班进行授课，采用任务驱动，模块演示的教学方法；以学生为

网页制作课程设计报告

网页制作课程设计报告学院：专业班级：姓名：学号：成绩：阅卷教师：

目录 1.设计目的 (1) 2.设计思想 (1) 2.1网站整体结构规划思想 (1) 2.2 主页设计思想 (1) 2.3子页的设计思想 (1) 3网页详细设计分析 (1) 4结论 (1)

1.设计目的阐述该个人网站的设计意图和创意，简单介绍自己的个人网站。 2.设计思想阐述网站的整体设计思想，包括： 2.1网站整体结构规划思想要求阐述网站整体结构的选择、设计的思想，绘制网站结构草图。 2.2 主页设计思想要求对主页的布局思路进行阐述和分析。 2.3子页的设计思想要求对子页的设计以及网页对象的选取思路进行阐述和分析。 3网页详细设计分析要求选取一张网页，对网页的设计实现过程进行阐述和分析，详细说明制作该网页的步骤，所使用的网页对象以及该网页对象的操作方法。 4结论对整个设计报告做归纳性总结，并分析设计过程中的困难及如何解决的，最后提出展望。

一、设计目的本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。我本次主要是设计的一“新加坡之旅”为主题的网页，针对新加坡的美丽风景做了介绍。二、设计思想利用Dreamweaver8.0制作一个关于“新加坡之旅”的网站，利用表格、行为、层和链接等网页设计技术设计页面。

网页设计与制作实例教程

网页设计与制作实例教程习题答案第1章网页与网站基础一、选择题 1．A 2．B 3．C 4．C 5．A 二、判断题 1．√2．×3．√4．×5．√ 三、问答题略第2章网页规划设计一、选择题 1．D 2．A 3．C 4．A 5．C 二、判断题 1．×2．×3．×4．√5．√ 三、问答题 1．答：网站需求分析一般包括三个阶段的内容：网站背景分析、总体需求分析、具体需求分析。（每个阶段可再详细描述。） 2．答：可从以下几个方面来阐述网站设计的原则：①日期、时间和数字；②欢迎词； ③弹出窗口和引导页面；④新闻和公告信息；⑤网址；⑥控件；⑦链接；⑧主页内容 3．答：打开新浪网首页，分析其布局类型。（答案略） 4．答：网页色彩搭配方法可从以下两个方面去阐述：①根据页面风格以及产品本身的诉求确定主色；②根据主色确定配色。网页色彩搭配技巧可从以下几个方面去阐述：①用一种色彩；②用两种色彩；③用一个色系；④用黑色和一种色彩以及色彩搭配忌讳的方面。 5．答：打开当当网，具体分析其规划过程。（答案略）第3章初识网页制作软件一、选择题 1．C 2．C 3．B

二、填空题 1．代码、拆分、设计2．文件、资源、规则3．超级链接三、操作题略第4章制作网页内容一、选择题 1．D 2．B 3．A 4．D 5．ABD 6．D 7．B 8．D 9．A 10．A 二、判断题 1．√2．√3．×4．√5．√6．√7．√8．√9．×10．√三、操作题略第5章设置网页超级链接一、选择题 1．D 2．D 3．A 4．D 5． C 二、判断题 1．×2．×3．×4．√5．× 第6章使用CSS样式美化网页一、选择题 1．B 2．C 3．C 4．B 5．A 6．D 7．D 8．D 9．B 10．C 11．A 12．A 13．C 14．D 15．D 16．A 17．A 18．B 19．D 20．D 二、简答题 1．×2．×3．×4．×5．×6．×7．√8．×9．√10．√11．×12．×13．×14．√15．√16．√ 第7章规划布局网页一、选择题 1．B 2．A 3．B 4．B 5．D 二、简答题

如何给图片加超链接

个人收集整理-ZQ 现在就如何给图片加超链接在这里给大家讲讲. 如果要在图片后面加入超级链接，比如点击图片中后就能打开另一个网页，方法是：在桌面上建一个记事本，在记事本里复制下面地命令： < "你想要打开地另一个网页地地址">< "图片地址" "" "宽度数字" "高度数字">资料个人收集整理，勿做商业用途在网页地图片上点右键查看“属性”就可以看到图片地地址和尺寸，“”是宽度，“”是高度.注意，图片地地址是右键单击图片属性得到地！！！资料个人收集整理，勿做商业用途把记事本文档另存为，文件名前面随便起，关键是后缀为，例如：. 另一个关键地地方是，网址前面必需要带，而且，上面地连接网址两边地引号一定要是英文状态下地引号，如果用中文状态下地引号则链接不上！！当然，你也可以所有地引号都不用！这样也行！！资料个人收集整理，勿做商业用途然后可以再桌面上看见刚刚保存地文件，双击它，打开后，右键复制该图片，粘贴到你要插入图片地地方就行了！以后只要单击该图片，就能自动连接到你想要链接地网页了！资料个人收集整理，勿做商业用途注意，刚刚在桌面上双击打开文件后，请不要左键单击图片，否则，它会自动连接到你要打开地网页上，当然，我们也可以用这个方法来验证一下你输入地代码是否正确，若正确，则能正确链接你要打开地网页.资料个人收集整理，勿做商业用途下面地图片就是一个例子，单击图片后会链接到我地主页，呵呵！另外，我发现有些朋友问我为什么有些论坛和贴吧或者自己地空间都不能给图片添加超链接，我只能说连这个最古老地敲代码地方法都不行，那我就帮不到了，但是，或许你会看见有人在这些论坛或贴吧给自己地图片做链接，这样方法无非有三种，一种是以付费地方式获得地，这种情况你可以到或百度上搜搜就知道了；另一种，我这里有篇文章，叫如何在百度贴吧实现图片跳转，点一下就是它地下载链接了，这是我到别人地，但是这样做很容易会被封号滴！呵呵；第三种就是虽然可以免费得到，但是要为别人做点广告，这个就有点麻烦了，具体地我也没玩过，只是看到过，但是应该可以地，感兴趣地可以到或者百度搜就是了.资料个人收集整理，勿做商业用途如何改变图像大小？方法是：< 图片网址宽度数字高度数字>,比如：< 图片网址> 如果不改变图片地宽度和高度比例地话，可以只填宽度数字或者比例，如，这样比较简单，方法是：< 网址宽度数字或比例> 资料个人收集整理，勿做商业用途 1 / 1

网页效果图的制作公开课教案

网页效果图的制作 ——制作网页标志横幅课程：电子商务网页制作班级：09电商3+2 时间：12月16日第三节授课教师：李晓琳教学目标：知识目标：1、能描述创建网站主页的目的 2、能列举网页应包含的内容 3、了解网页标志横幅的作用技能目标：1、能绘制网站主页的网页标志横幅 2、掌握fireworks工具属性的设置方法情感目标：对操作过程中遇到的问题能主动思考具有较强的网页设计创意思维、艺术设计素质。教学重点：1、Firewoks中矩形工具、文字工具、直线工具、库命令的使用 2、Firewoks中元件转换为按钮的操作难点：元件转换为按钮及库命令的使用教学方法：任务驱动教学法一、导入提问：同学们平时的休闲方式有哪些呢？——影视文化通常是我们茶余饭后的谈资，平时也会去电影院看电影是吧？特别是大片，往往去了电影院要排长队，而且还不一定买的到票，在电子商务迅速发展的推动下，网上订票为我们消除了排队买票的烦恼。那网上订票是基于什么样的平台呢？下面我们来看下我们德清的大地数字影院的网络平台——“哈票网”。二、新授任务一：网页横幅的制作—— 1、“哈票网”网站的展示，分析引出一个网页应包含哪些内容。提问：看了这个页面，请你说出一个网页包含哪些元素呢？（学生回答，教师补充）——引出网页横幅的重要性 2、为什么要制作网页横幅？在一个简单的网页中，上方的横幅是最重要的视觉元素。在很多博客网页中，

它甚至是唯一的视觉元素。所以它的作用可以说是相当大的。它必须能够与网站的风格配合，并能传达视觉上的信息。它必须让人看上一眼就让人知道这个网站是属于什么类型，风格是什么。（展示不同网站的不同网页横幅效果图，说明网页横幅是可以多种形式展现的。） 3、提出任务，教师演示：效果图展示，操作示范（1）新建一个文档：宽1200像素，高为600像素。（2）矩形工具、圆角矩形工具、椭圆工具、文字工具、直线工具的使用及属性设置 4、学生活动：按所给效果图及素材制作网页横幅（根据男女生兴趣偏好不同，男女分组操练：男生做NBA网页横幅、女生做淘宝门户网的网页横幅）操作步骤: （1）新建一个文档：新建一个文档：宽1200像素，高为600像素。（2）用矩形工具绘制两个矩形：可与画布同长，宽度根据需要自定，大矩形的颜色设为“#333333”,小矩形的颜色设为“#666666” （3）在小矩形右侧添加文字，选择“文字工具”，添加文字，其属性设置为：字体——宋体，颜色——“#66FF00”，字号——“15” （4）用椭圆矩形工具在画布的左侧绘制两个圆形，一大一小，填充颜色渐变，颜色为“#FFFF00”至“#00CC00”,如图所示（5）用文字工具，在大圆上添加文字“哈”，文字属性设置为：“白色”“隶书”“90”；小圆上添加文字“票”，属性设置为“白色” “幼圆”“30”；再用文字工具在“哈票”右侧添加文字“快速订票轻松观影”，属性设置为“白色”“幼圆”“24”，紧接着下方添加网址，属性设置为“#66FF00”“Century Gothic”“22” 5、教师巡回指导，发现问题，个别辅导任务二、美化横幅——添加阴影、元件转换为按钮

Dreamweaver中超链接的应用教案

公开课教案课程名称《网页制作》教程课题名称：Dreamweaver中超链接的应用授课班级：任课教师：授课时间：

时间分配教学内容及过程教学方法及教学内容的拾漏补遗 17’ 第三环节：教师演示、讲解操作步骤 Dreamweaver中超链接的应用一、超链接的含义超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点。二、超链接的分类 1、按照源端点的不同，可以将超链接分为文本链接、图像链接和表单链接3种。文本链接：是指以文字作为超链接源端点的链接。图像链接：是指以图像作为源端点的超链接。表单链接：需要与表单结合使用，当用户单击表单中的按钮时，会自动跳转至相应页面。 2、根据目标端点的不同，超链接可分为内部链接、外部链接、锚点链接和电子邮件链接4种。内部链接：其目标端点是本站点中的其他网页或文件。外部链接：指链接的目标端点与源端点不在同一个站点中。锚点链接：如果网页太长，可用锚点链接实现跳转到当前网页或其他网页中的某一指定位置。电子邮件链接：单击电子邮件链接，将打开系统默认的电子邮件收发程序。三、设置链接属性在没有选中任何对象的前提下，单击“属性”面板上的“页面属性” 按钮，打开“页面属性”对话框，首先在左侧列表中选择“链接”选项，然后在右侧设置各项链接属性。演示提问讨论讲授、演示、讨论

时间分配教学内容及过程教学方法及教学内容的拾漏补遗30’ 四、设置常规超链接常规超链接包括内部超链接和外部超链接，内部超链接是指目标文件位于站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。 1．内部超链接内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以在“属性”面板上的“链接”编辑框中直接输入要链接对象的相对路径；也可以通过单击“属性”面板上“链接”编辑框右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择链接对象。 2．外部超链接外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板上的“链接”编辑框中直接输入要链接网页的网址。五、设置文本超链接要给某段文本设置超链接，可以先用鼠标选中该文本，然后在“属性”面板上的“链接”编辑框中设置被链接对象的URL地址。六、设置图像超链接给整个图像添加超链接，首先用鼠标选定要制作超链接的图像，然后在“属性”面板上的“链接”编辑框中设置被链接对象的URL地址。知识扩展：给图像局部添加超链接给图像局部添加超链接也称为“图像热点”技术，很多时候都需要为一张图片的不同部位设置不同的链接，这就需要讲授、演示、讨论

网页设计与制作课程标准

《网页设计与制作》课程标准前言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。本课程定位于WEB技术开发工作岗位。它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用，一、课程的说明：通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作、网站开发和管理奠定基础。在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。二、课程内容与基本要求：该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：

三、教学目标 1、职业关键能力目标 (1) 掌握使用Photoshop进行图像处理的基本方法及操作技能 (2) 掌握DreamweaverCS5的基本知识及操作技能 (3) 掌握建立与管理站点的方法 (4) 掌握制作主要内容为文本的网页的方法 (5) 掌握在网页中插入与编辑图像的方法 (6) 掌握在网页中插入多媒体元素的方法 (7) 掌握表格处理与网页布局的方法 (8) 掌握创建超级链接的方法 (9) 掌握使用框架制作旅游网站的方法 (10) 掌握创建和使用模板的方法 (11) 掌握创建和使用库的方法 (12) 掌握在网页中添加AP Div的方法

(13) 掌握在网页中使用行为的方法 (14) 掌握HTML基础知识及通过代码修饰网页的方法 (15) 掌握使用CSS样式表修饰网页的方法 (16) 掌握动态网页的概念及简单动态网页的制作方法 2、职业专门能力目标 (1) 通过完成相关的项目，掌握网页设计的基本工作流程。 (2) 通过完成相关的项目，掌握网页设计常用工具的使用方法。 (3) 通过完成相关的项目，掌握网页布局及美化的基本方法。 (4) 通过完成相关的项目，掌握简单网页交互的制作方法。 3、方法能力目标形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。四、教学内容第一章网页制作基础知识（4学时）教学目标：网页与网站基本概念、网页基本组成元素、常用网页制作软件主要教学内容：网页制作基础知识网页的基本构成元素网页制作常用软件和技术第二章 Dreamweaver CS6轻松入门（2学时）

网页制作技术期末综合习题

网页制作技术期末综合习题一、填空题 1．Dreamweaver MX有______种工作界面。 2．在站点中建立新的网页文件，其默认的文件扩展名为_________。 3．打开站点面板时，可执行__________菜单中的“站点”命令。 4．如果不想在段落间留有空行，可以按__________组合键。 5．为了让浏览者快速了解图像的概况，在Dreamweaver MX提供了设置__________的功能。 6．单元格内间距是指单元格内的对象与单元格__________之间的距离。 7．单元格间距是指单元格与__________之间的距离。 8．为了使所设计的表格在浏览网页时，不显示表格的边框，应把表格的边框宽度设为_______。 9．在表格的__________中可以插入另一个表格，这称为表格的嵌套。 10．表格的嵌套是指在一个表格中插入另一个表格，表格的平铺是指将不同的表格放置在网页的____________。 11．为了加快下载速度，尽量_______整个网页的内容放在一个大的表格中。 12．在_________视图中，可以使用拖动鼠标的方法在页面中绘制布局单元格。 13．在_________视图中，可以使用拖动鼠标的方法移动单元格的位置。 14．在Dreamweaver MX中，可以插入文本框的类型有单行文本框、多行文本框和__________。 15．在网页种插入文本框、单选框、多选框或跳转菜单时，要先插入空白的_________。 16．在表单中可以插入的按钮包括提交按钮、重置按钮和___________。 17．在包含框架的页面中，每个框架都显示一个________。 18．保存包含框架的页面时，如果页面中包含四个框架，要保存全部页面信息，共需要保存______个文件。每个文件的扩展名都为htm。 19．在保存框架文件时，框架的文件名必须以字母开头且________大小写。 20．浏览器在第一次装载文框架网页时，如果需要指定该框架所显示的网页文件，则要设置该框架的______________属性。21．如果链接的目标文件在本地站点中，可以使用绝对URL或相对URL，如果要链接站点以外的目标文件，则必须使用______________。 22．创建锚链接之前，必须在页面中失当的位置____________。 23．锚链接所起到的作用，就是在页面中起到________的作用，节约查找信息的时间。 24．建立与电子邮件的超链接时，在属性面板的链接文本框中输入__________+电子邮件地址。 25．在制作文本超链接时，建立了超链接德文本__________发生了变化，并且多了一条下划线。 26．使用_____________可以改变页面中建立超链接文本的显示属性。 27．使用_______________可以将格式与网页结构分离，同时可以控制多个网页稳当。 28．通过层可以非常精确地对页面中的________定位。 29．___________是指包含在另一个层中的层。 30．如果选中多个层，_______________的一个层调整柄一黑色突出显示，其他被选中层的调整柄以白色显示。 31．利用属性面板使多个层实现左对齐的操作时，选中多个层后应该在属性面板的_______文本框中输入数值。 32．默认情况下，层的__________值是按照层的创建顺序依次增加。该值大的层显示在层的上面。 33．用户与网页进行简单交互时，若不使用服务器端的应用程序，可以使用javascript脚本外还可以使用Dreamweaver MX 提供的__________功能。 34．使用时间轴面板可以设置各个____________的显示属性以及整个时间轴的播放顺序。 35．_____________是动画条中为对象设置位置、大小、颜色等属性的帧。 36．用鼠标拖动动画条，可以调整其在时间轴的位置，从而可以改变对象的持续时间。 52．在文档窗口中，用拖动弹出式菜单边框位置可以设置其相对于触发对象位置，用这种方法只能确定_______________的

网页制作公开课教案.doc

教学科目授课日期节次教学内容教学目标教学重点与难点教学方法教学资源公开课教案网页制作授课班级10 计 4授课教师徐彬2011．06． 12课型任务驱动授课学时 1 课时下午第二节授课地点图书馆动漫机房有趣的拼图通过讲解、演示、实践，让学生掌握在网页中运用层制作拼图游戏。知识目标技能目标态度目标通过讲解让学生 1. 提高学生分析问题、解决问1、培养学生的观察能力及掌握在网页制作中题的能力勇于探索、勇于创新的精层的特点，学会添加2．锻炼学生的表达能力和协神 “拖动层”行为。并作、沟通能力2、培养学生的团队精神且了解相应的事件。3．提高学生的动手实践能力，能运用层制作有趣的拼图教学重点：层的特点、“拖动层”行为。教学难点：“拖动层”行为。综合（讲授、启发、引导、演示示范、观察、比较、实践等）多媒体计算机、多媒体教学软件本节是《网址制作 DreamweaverMX2004》中层的应用中的内容，是操作实践课。本节采用情景导学与任务驱动相结合的教学法帮助学生消化吸收新知识，教学引起学生的学习兴趣，激起学生的求知欲望，发挥学生的主体作用，体现教师设计的主导作用。通过兴趣与任务使学生学习到相关的计算机基础知识和操作技能，进而培养学生的自学能力与动手实践能力。

教学过程设计教学环节与主要内容具体教学目标教学活动【复习导入】 ( 一 ) 导入（学时分配： 2 min ）创设情境，打开“趣味拼图”网页，请同学玩一玩拼图游戏。 ( 二 )复习知识点（学时分配： 2 min ）1、你觉得我们玩的拼图游戏有什么特点？这种特点是利用了什么技术实现的？2、拼图游戏利用了层的什么特点？1、激发学生学习兴趣。 2、导入新课教师：帮助学生回顾复习层的特点。学生：回顾并实践复习已学知识教师：根据实例，提问诱导，导入课堂任务学生：观察、讨论、思考 ( 三 ) 明确学习目标（学时分配：1min） 1、层的特点。 2、“拖动层”行为。教师：明确学习目标 3、 onLoad 事件。【任务分析与制作】（一）任务初分析（学时分配： 5min）让学生理解理解掌教师：讲解、示范、演示打开趣味拼图网页，引导学生分析制作此网握层的特点。学生：观看操作演示、学页所需的技术：习领会 1、网页布局：表格。 2、图片素材的添加：插入图片（拓展）。通过练习巩固所学学生：实践，完成练习 3、拼图图片的移动：表格转换为层。知识内容。教师：巡视、评价、辅导（二）任务初制作（学时分配： 15min）学生制作趣味拼图网页并调试。（三）任务再分析（学时分配： 5min ）让学生理解理解掌教师：讲解、演示、示范请同学们汇报自己作品的调试成果。握“拖动层”行为以学生：观察、学习、领会针对调试作品所发现的问题进行再分析。及事件的用法。 1. “拖动层”行为。 2. 事件。

网页设计与制作课程教案

《网页设计与制作》课程教案一、课程定位本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法，并能够使用这3款软件制作出美观实用的网页。二、课程总目标掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分。（一）知识目标： 1.熟悉网页制作的基本元素； 2.掌握Dreamweaver CS6软件的基本操作方法； 3.掌握在网页中插入文字、图片、声音、flash等的方法； 4.掌握常见的网页布局方法，学会使用CSS美化网页； 5.掌握在网页中使用表单和制作网页特效的方法； 6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画并巧妙地和网页中内容搭配起来。 7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静态页面部分。（二）职业能力培养目标 1. 能够根据网站开发需求，去寻找网页设计和网站开发所需要的文字、图片、动画、声音、视频等素材并作美化处理； 2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览者接受和喜爱；

3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态页面。（三）素质目标 1.具有勤奋学习的态度，严谨求实、创新的学习精神； 2.具有良好的心理素质和职业道德素质； 3.具有高度责任心和良好的团队合作精神； 4.具有运用理论知识发现问题、分析问题并解决问题的能力，同时能够不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。（四）职业技能证书考核要求：可以根据自身情况考取“全国计算机信息高新技术资格证”，“网页设计制作员”，“网页设计师”等职业技能证书。三、重点、难点章节及内容 1.重点章节： 1.2 网页、网站相关术语简介 1.6 网站建设的基本流程 2.3 Dreamweaver CS6的工作环境 3.2 创建本地站点 3.4 使用站点 3.5 网页设计中的规范 4.1 网页文件的基本操作 4.3 插入文本 4.4 插入水平线 4.5 插入其他基本元素 4.6 创建列表 5.1 超级链接概述 5.2 创建超级链接 5.3 使用dw制作各种超级链接

网制作综合实例

网页制作综合实例 16.1制作前的准备工作首先在E盘上建立一个文件夹（如玫瑰信使），再在其下建立images文件夹和css文件夹。将“ch16/images”文件夹下的所有图像拷贝到“玫瑰信使/images”文件夹下。建立站点和规划目录结构、指定默认图像文件夹主页制作前的准备工作，有定义站点和设计网站结构的目录，还有就是要将网页设计制作中需要用到的所有图像素材整理好，最好是放在站点根目录中的一个文件夹中，如images。这样便于设计制作时的选取使用，也不易造成素材的混乱。如下图：规划站点目录结构为站点中使用的图像文件指定一个默认图像文件夹，如下图：设置站点中的默认图像文件夹在站点下建立一个主页文件index.html。 16.2设置页面属性及样式 16.2.1页面属性设置 1.在站点资源管理器的本地视窗中，选择并双击已经定义的首页面文件ch16\index.asp。 2．在打开的index.asp文件的文档窗口中，选择“修改”---“页面属性”菜单项，打开“页面属性”对话框。设置网页标题为：“家庭百科” 设置背景图像为images/bj.gif 将“左边界”、“顶部边界”、“边界宽度”、“边界高度”项均设为5。 3．设置完成后，单击“确定”按钮，确定操作返回到index.asp文档窗口。 16.2.2定义CSS样式文件定义body样式 1.在index.htm文档窗口中，依次单击“窗口”---“CSS样式”菜单项，打开“CSS样式”面板。选择 “新建CSS样式”菜单命令。 2.打开“新建CSS样式”对话框，“类型”选择“重定义HTML标签”，在“标签”框中选择或输入 body，“定义在”选择“（新建样式表文件）”。 3.单击“确定”按钮，在弹出的“保存样式表文件为”对话框中，选择样式文件保存的路径（站点下的 CSS文件夹），输入样式文件名（这里存为css）。 4.单击“保存”按钮，在出现的样式定义对话框中选择“类型”，在“字体”下拉列表框中选择“宋体”;在“大小”下拉列表中选择“9”，后面的单位下拉列表框中选择“点数（pt）”度量单位。 5.单击“确定”按钮，便完成对body标记的定义

《网页制作》教学设计(优质课比赛优秀设计)

《网页制作》教学设计（优质课比赛优秀设计）《网页制作》教学设计一、教材或教学内容分析本章内容在本教材中的位置处于第五章，是在文字处理(Word2000)和网络基础及因特网应用两章之后。学生所学的文字处理软件Word和将要学习的网页制作软件Frontpage同是Microsoft公司的产品，在软件的使用上有很多的共通之处，所以在学习frontpage的时候，很多内容可以让学生自学，而不必面面俱到地在课上讲授。而第四章网络基础及因特网的应用又为学生对网页的理解奠定了基础，学生对网页中的基本元素——文字、图片、动画、声音等都有所了解，而网页的制作就是将这些元素重新组合到网页上，学生要学的就是这种组合的方法。所以说，虽然大多数学生以前都未接触过网页的制作，但有了以上这些基础，学起来就轻松多了。本章内容按照学生已有的基础，我对教学内容分了一下类，也为教学的组织工作打下一点基础。本章内容主要由网页基础知识、网站的建立和管理、网页的制作、创建超链接、图片的处理、网页框架。重点是网页的制作和创建超链接，学会了这些就可以开始简单的网页制作了。难点是网页框架，这部分相互之间关系比较复杂，必要时，老师在对各组个别辅导时，可以给予分别讲解。这个分类可以为组长安排各个组员的任务提供参考，使分工更加合理。二、教学对象的分析第 1 页共 6 页信息技术课虽然已经成为初中的必修科目，但是城乡学生之间掌握情况的差异却相当大，条件好一点的初中学生不仅已经熟练掌握了课本上的内容，还对一些常

用软件有所了解;而差一点的可以说是从高中开始才正式接触到信息技术知识的学习，他们需要多锻炼、多指导，所以协作学习对学生的学习帮助很大。三、教学策略的选择及媒体的使用在教学策略的选择上，我使用的是任务驱动和协作学习相结合的方法。任务驱动就是要求本章内容学习完之后，每个小组都要完成自己班级网站的制作，并在全班进行评比，选择最好的作为班级主页挂到学校主页上去，这有助于激发学生参与学习的积极性。协作学习则是让学生在学习过程中互帮互助，用较短的时间、教少的精力学到更多的东西，完成一个集体项目，让他们在学习之后获得成就感。因此在媒体的选择上，我们使用的是TOP2000系统。TOP2000系统有利于教师进行分组教学和学生作品的点评及成果的展示。教学过程开始之前，教师把学生按座位分成四组，每个组都按学生对计算机的掌握程度平均分配，保证每个组都有计算机操作方面比较突出的，也有相对比较差的，使其形成能够互帮互助的学习小组。并由他们自己选出组长各一名，然后由组长根据组员的情况，确定在班级主页制作过程中主要完成什么任务，也就是说起到一个组织者的作用。做过网页的人都知道，做网页是一项比较费时的工作，而要学生在较短的时间内制作出像样的网页是比较困难的，而在这个过程中，网页的设计占去了相当多的一部分时间，组长把任务分到各组员头上以后，组员就可根据自己要完成的任务相对集中的做某方面的工作，做完以后，组员之间进行经验交流，告诉组员自己的网页是如何制作出来的，在完成自己的网页后，再重复一遍制作过程花费的时间的不多的。这样，其他组员就可在较短的时间之内第 2 页共 6 页掌握比较先进的网页制作方法，而不必再花那么多时间去探索。因为每位组员都必

网页制作教学设计优质课比赛优秀设计

《网页制作》教学设一、教材或教学内容分）和网络本章内容在本教材中的位置处于第五章，是在文字处理Word200和将要学习的网页制础及因特网应用两章之后。学生所学的文字处理软Wor 公司的产品，在软件的使用上有很多的共通之处Microsof软Frontpag同而不必面面俱到地在很多内容可以让学生自学所以在学frontpag的时候而第四章网络基础及因特网的应用又为学生对网页的理解奠定了基础上讲授生对网页中的基本元素——文字、图片、动画、声音等都有所了解，而网页的制所以说，学生要学的就是这种组合的方法就是将这些元素重新组合到网页上学起来就轻松然大多数学生以前都未接触过网页的制作但有了以上这些基础了本章内容按照学生已有的基础，我对教学内容分了一下类，也为教学的组织网页的制作网站的建立和管理本章内容主要由网页基础知识作打下一点基础创建超链接、图片的处理、网页框架重点是网页的制作和创建超链接，学会了这些就可以开始简单的网页制作了难点是网页框架，这部分相互之间关系比较复杂，必要时，老师在对各组个辅导时，可以给予分别讲解这个分类可以为组长安排各个组员的任务提供参考，使

分工更加合理二、教学对象的分析页6 共页1 第

信息技术课虽然已经成为初中的必修科目，但是城乡学生之间掌握情况的差异还对一些常条件好一点的初中学生不仅已经熟练掌握了课本上的内容，却相当大，而差一点的可以说是从高中开始才正式接触到信息技术知识的学用软件有所了解；习，他们需要多锻炼、多指导，所以协作学习对学生的学习帮助很大。三、教学策略的选择及媒体的使用在教学策略的选择上，我使用的是任务驱动和协作学习相结合的方法。任务驱动就是要求本章内容学习完之后，每个小组都要完成自己班级网站的制这有助于激并在全班进行评比，选择最好的作为班级主页挂到学校主页上去，作，发学生参与学习的积极性。协作学习则是让学生在学习过程中互帮互助，用较短的时间、教少的精力学到让他们在学习之后获得成就感。因此在媒体的选更多的东西，完成一个集体项目，系统有利于教师进行分组教学和学生TOP2000系统。TOP2000择上，我们使用的是教学过程开始之前，教师把学生按座位分成四组，每个作品的点评及成果的展示。保证每个组都有计算机操作方面比较突组都按学生对计算机的掌握程度平均分配，使其形成能够互帮互助的学习小组。并由他们自己选出出的，也有相对比较差的，确定在班级主页制作过程中主要完成什然后由组长根据组员的情况，组长各一名，也就是说起到一个组织者的作用。做过网页的人都知道，做网页是一项比么任务，而在这而要学生在较短的时间内制作出像样的网页是比较困难的，较费时的工作，组长把任务分到各组员头上以个过程中，网页的设计占去了相当多的一部分时间，组员就可根据自己要完成的任务相对集中的做某方面的工作，做完以后，组

《网页设计与制作》课程标准

广西玉林高级技工学校《网页制作与设计》课程标准一、课程基本信息二、课程性质本课程是中职计算机术专业的一门主干专业课程。通过本课程的学习，要求学生掌握网页设计的基本概念，学会使用常用的网页设计工具和常用脚本语言，能够设计制作常见的静态和动态网页，具备网站的建立和维护能力。同时通过本课程的学习，培养学生的综合职业能力、创新精神和良好的职业道德。三、设计思路本课程标准的总体设计思路：以计算机专业学生的就业为导向，根据行业专家对计算机网络技术专业所涵盖的岗位群进行的任务和职业能力分析，紧紧围绕完成工作任务的需要来选择课程内容，设定职业能力培养目标；以“工作项目”为主线，创设工作情景；以书本知识的传授变为动手能力的培养为重点，强化学生实践动手能力的培养，以实现职业能力的培养目标。四、课程目标 1.职业知识目标 1．熟悉HTML 语言的作用和开发环境，能够编写HTML 代码； 2．掌握常用的HTML 标签，能够实现基本的图文信息显示； 3．理解HTML 页面框架的作用，能够针对需求进行框架的设计； 4．掌握各类HTML 表单元素标签，能够进行表单设计；

5．掌握各类HTML 多媒体元素标签，能够进行多媒体页面设计； 6．掌握CSS 样式的基本使用方法，能够应用CSS 样式表美化页面；7．掌握CSS 网页布局的方法，能够结合DIV 标签进行页面布局； 8．掌握JavaScript 的语法基础，能够编写简单的JavaScript 应用程序；9．掌握JavaScript 的函数、内置对象、事件等，能够实现表单的验证；10．掌握DOM 树形结构及其操作方法，能够控制DOM 对象。 2.职业技能目标 1．能独立进行资料收集与整理、具备用户需求的理解能力； 2．能根据项目需求，具备项目页面的设计与实现能力； 3．能根据静态页面设计原则与CSS 技术规范，实现页面美化与布局；4．具有使用JavaScript 技术进行页面事件处理与表单验证的能力； 5．能根据DOM 树形结构，进行页面DOM 的控制； 6．具有综合应用HTML 语言、CSS 样式、JavaScript 脚本进行页面的设计、编码、调试、维护能力。 3.职业素质目标 1．养成善于思考、深入研究的良好自主学习的习惯； 2．通过项目与案例教学，培养学习者的分析问题、解决问题的能力； 3．具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力； 4．通过课外拓展训练，培养学习者的创新意识； 5．具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。五、课程主要内容与要求

在网页中建立各种超级链接

在网页中建立各种超级链接实训目标 1．掌握内部、外部超级链接的创建方法； 2．掌握E-mail链接的创建方法； 3．掌握锚点链接的制作方法； 4．掌握链接颜色的设置方法； 5．了解图像映射的制作方法； 6．了解跳转菜单、翻转图像实例、导航栏的制作方法。实训内容准备工作本实训所需的网页及图象文件均在实训二课件的“实训\materials”文件夹下。 1、解压文件解压文件“实训二在网页中建立各种超级链接.rar”，请将“课堂实训”文件夹中的“materials” 文件夹复制到D盘根目录下，并将其重命名为“future”。 2．新建站点新建网站“畅想未来”，将站点和个人文件夹future建立一一对应的关系。任务一、在网页中建立各种超级链接设计目标在实训一完成的index.htm页面中，制作一个具有超级链接的网页。其浏览效果见“实训\result”文件夹中的index4.html文件所示。当鼠标移到栏目标题文本上时就会变成手形，同时在浏览器下方的状态栏中显示链接地路径，单击时便会跳转到相应的链接内容。 2、页面分析该页面包含了内部超级链接、外部超级链接、空链接和脚本链接、Email超级链接等。页面效果请参见实训二课件中“实训\result”文件夹下的index4.html文件。

3．制作步骤说明：请在完成下面操作前，先将所有的素材文件放置在对应的文件夹下；在Dreamweaver 中本地站点future 中打开index.html 页面，依次按照下述内容在页面中创建各种超级链接。（1）创建内部超级链接内部超级链接：就是在同一个站点内的不同页面之间建立超级链接关系； ? 为“未来都市”文本创建超级链接在网页中选定文本“未来都市” ，在“属性“面板中单击“浏览文件”，在打开的“选择文件”对话框中选择需要的网页文件（ex4_city.html ）； ? 在“目标”选择框中选择“_blank ”，以确保在新的浏览窗口中打开连接文件；

第1章网页制作基本知识

第1章网页制作基本知识刚开始学习网页制作的人，往往不知道从何入手。针对这种情况，本章简单介绍一下网页相关的基础知识和网站建设的基本流程，以使大家对网页有个感性的认识，并从宏观的角度了解一下网站建设。 1.1认识网站与网页如果读者曾经有过上网的经历，对网站和网页应该不会感到陌生。网页就是我们上网时在浏览器中看到的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。另外，打开某个网站时显示的第一个网页被称为网站的主页（或首页），它可以说是网站的门户，通过它不仅可以了解网站的性质和内容，还可以访问网站中的其它页面。下面，我们从网页制作的角度来了解网页的本质和网页的功能组成，以及IP地址、域名、网址、静态网页和动态网页等概念。 1.1.1 网页的本质图1-1上图显示了腾讯网的主页，由该画面可以看出，网页主要由文字、图像和动画等元素组成。事实上，我们看到的网页包括了一组文件，它们分别是网页文件（扩展名为：.html、.asp等）、图像文件（扩展名为.jpg、.gif等）和Flash动画文件（扩展名为.swf）等。在浏览器中选择“文件”→“另存为”菜单，将网页保存到磁盘中，便可看到网页的组成文件，如图1-1中、下图所示。

图1-1 网页及其组成 1.1.2 网页的功能组成从浏览者的角度看，网页中无非就是一些文字、图像、动画等。但从专业的角度来讲，网页中的元素各有其不同的作用，可以将它们分为站标、导航栏、广告条、标题栏和按钮等，如图1-2所示。

图1-2 网页的功能组成 1. 站标站标也叫Logo ，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站Logo 通常采用企业的Logo 。 Logo 一般采用蕴含企业文化和特色的图案，或是与企业名称相关的字符或符号及其变形，当然也有很多是图文组合，如图1-3所示。图1-3 网站Logo 在网页设计中，通常把Logo 放在页面的左上角，大小没有严格要求：不过，考虑到网页显示空间的限制，要求Logo 的尺寸不能太大。此外，Logo 普遍没有过多的色彩和细腻的描绘。 2. 导航条导航条是链接到网站内主要页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面，导航条也因此而得名。同时，导航条也是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网站的主要内容。设计导航条时，应注意以下几点。 ● 如果网站内容不多，可根据网站风格尝试灵活摆放导航条，也可以使用图片或Flash 动画等制作导航条，如图1-4所示。 ● 如果网站栏目很多，可以将导航条分为多排放置在Logo 的下方或右侧。为便于观看，可为各排设置不同的底色，如图1-5所示。