《网页制作》教学设计
一、教材分析
《网页制作》教学是信息基础必修教材中第六章第1节信息集成中网站制作简介的有关内容。编辑网页所使用的是软件是Frontpage2000，该软件的使用与以前所学的word有类似的地方，软件操作具有一定的迁移性。
二、学情分析
学生在之前已经学习了word的有关操作，具备网上获取信息和一定的信息处理能力。
Frontpage2000的使用与word有很多类似的地方，学生较容易上手。
三、教学目标
知识与技能：了解网页的基本元素；掌握网页制作中网页元素的应用；懂得利用表格布局网页的基本思想；
过程与方法：通过实践体验对比，得出结论。亲历网页制作的过程。
情感态度与价值观：在与同伴合作完成简单网页的制作过程中，培养与他人合作交流的意识和习惯，通过设计学校网页，培养学生热爱学校的情感。
四、教学重点、难点
教学重点：网页制作中网页元素的应用
教学难点：利用表格布局网页
五、教学方法：合作探究法、任务驱动
六、教学过程
（一）情境导入
师：用PPT展示一组美丽的学校风景图片，师生共同欣赏。同学们一看就知道这是我们白蒲中学的风景图片。我校曾被评为江苏省十佳花园学校，请大家思考一下如何让更多的人了解我们学校的美呢？大家有什么好的方法吗？
生回答：通过网络发布，需要制作网页（如回答不在话题上，引导）
师：本节课我们就一起来学习制作《美丽的蒲中校园》网页，宣传学校的美。学校将组织评选同学们设计的优秀网页作品，放在学校网站上。
（二）新课讲授
师：这里，老师挑选了去年学生设计的优秀网页作品，我们一起来欣赏。展示校园页面，提问：这个页面中由哪些元素构成的？
生：文字、图片、动画、声音、超链接等。
师：网页里的这些元素是通过什么工具集成起来的呢？在这里，老师向大家介绍office2000中的frontpage2000来制作网页，它具有功能强大、简单易用的特点。
教师演示启动frontpage2000的步骤，启发学生：界面和学过的哪个软件比较相似？教师点击相关菜单，引导。由于都是office套件的一种，所以和word界面很相似，演示界面和功能。演示打开站点bpzx，站点打开后，观察网站文件夹的结构，介绍images文件夹与_private文件夹的作用。后缀名为.htm，代表的是网页文件。其中，index.htm表示网站的主页名称。点击视图下的网页，切换到网页窗口，点击文件夹，切换到站点文件夹窗口，点击bpzx站点文件夹，便于我们打开网页文件。
师：刚才同学们的都非常好，在制作网页前，我们先来放松一下，来玩拼图。请同学们打开D盘的《网页制作》学案，完成实践一。
实践一：2个小实验
实验1：启动Frontpage后，点击“文件”“打开站点”，找到D盘下的bpzx文件夹。双击文件夹列表里的shiyan1.htm文件，学生尝试拼凑图形。
实验2：双击文件夹列表里的shiyan2.htm文件，学生尝试拼凑图形，将图形按顺序拖到表格的单元格里，并适当拖到表格的边框，能拼凑成功吗？
学生操作，发现实验1中的图形总有1个无法拖动，拼凑不成功，实验2在表格中拼凑图形成功。
教师启发学生思考，引导学生观察一开始出示的网页，发现图片、文字、动画等网页元素排列整齐。
师：是什么在起作用？
师生共同得出：利用表格布局网页。得出：表格的定位。
师：利用表格的布局功能。表格的布局功能可以对页面元素进行定位，使网页清晰美观、富有条理。表格中可以包含多种类型的内容，如图像、文本、多媒体文件。
师：在网站文件夹里有一张利用表格布局的“美丽的蒲中校园”网页，今天，老师要请你们当网页设计师，完成“美丽的蒲中”网页制作。制作学校风景，需要什么样的素材？学生回答：图片。老师已经预先把素材准备好了，大家可以打开acdsse浏览素材，选择合适的素材。
实践二：双击文件夹视图里的meilipz.htm，
任务一：请大家从D盘的sucai文件夹中，从7张校园风景图片中挑选其中一张，插入网页表格的适当位置。文字材料直接从sucai文件夹中的word文档中复制。注意页面的保存，保存时要注意：网站中用到的图像、声音、视频文件应有条理地存放到指定文件夹中。当保存图片时，要把图片保存到images文件夹中。
学生自主操作，4人一组合作学习。教师巡回辅导。
操作中的操作步骤要点参考《网页制作》学案。
任务二：在单元格中各插入gif图像动画、欢迎字幕和flash动画,，以实现页面的动态效果。注意保存和预览。
可能的问题：1、图片属性设置2、flash动画的插入
教师展示一部分学生的作品，点评，小结。
学生再次练习完善。
师：刚才，同学们的表现都非常出色，要想使自己的网页更漂亮、更受欢迎吗？
实践三：
任务一：美化页面
操作小贴士：
操作右击网页空白处，“网页属性”，“常规”，输入标题。切换到“背景”，设置背景色。
设置背景图片：可勾选“背景图片”，“浏览”。
任务二：打开index.htm页面，对“美丽校园”创建超链接到meilipz.htm。
操作小贴士：
创建超链接：选定文字，“插入”、“超链接”，选定超链接的网页。
学生合作学习，教师巡回辅导。
教师展示学生作品，点评，小结。
教师提醒学生，做好后的网页，在浏览器里预览，发现有边框线，如何解决？
学生自主探究。
三、课堂总结
《网页制作》教学设计 法、说学法、说教学过程、说板书设计。 一、说教材： (一)教材分析：本节内容是省编《信息技术》全一册第六章 网络与INTERNET基础知识第五节的内容(2000年版为第八章第四节内容，2001、2002版教材第六章第五节内容)。虽然在这一节内容在新版教材变更为拓展模块，但针对现在网络快速发展，广大的学生接触，使用INTERNET的机会也大大增加，学生在使用网络获取信息时，更多的是通过浏览网页这一方式，我认为上好这节课是非常必要的，这对学生进一步认识、使用INTERNET更有益处，同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解，在一定程度上也起着培养学生运用综合知识能力作用，所以我认为这节课是非常值得我们去研究上好的，考虑这节课的内容及教法、学法的需要，我把这节分为两课时，第一时：学生自学，自练Word制作网页的基本方法；第二课：让学生自己构思创意一个内容丰富，页面美观的网页。 (二)教学目标：根据对教材的分析及学生实际情况，制定如 下的教学目标： (1)知识目标：1、有关网页文件的说明 2、熟悉用Word制作网页的基本方法 3、超级链接是网页实现互相链接的基本方法 (2)能力目标：1、培养学生的自学能力 2、创意构思能力 3、能制作出具有多重链接、多种素材、内容 丰富的网页。 (3)情感目标：1、教育学生正确认识和理解信息技术相关文 化，伦理和社会问题，负责地使用信息技术。 (三)教学的重、难点：根据对教材的分析及网页制作过程中的 实际情况，我认为要出制作内容丰富的网页，关键是要知 道网页间互相链接的方法，所以我把超级链接做为本节的
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 （课程英文名称） 课程编号：201509210011 学分：5学分 学时：64学时（其中：讲课学时：45 上机学时： 19 ） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、 JavaScript网页特效 适用专业：信息及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事（2学时） [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用
使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准，明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时） [相关案例] 【案例1】简单的网页： 【案例2】新闻页面： 【案例3】图文混排： [知识点] HTML文档基本格式
1.HTMl是指（A）。 A.超文本标签语言 B. 汇编语言 C. 服务端端语言 D.脚本语言 2.HTML 文件必须使用htm 或者（B）作为文件扩展名。 A.aspx B. html C. jsp D. doc 3.WWW是（B）的意思。 A．网页B．万维网C．浏览器D．超文本传输协议 4.在网页中显示特殊字符，如果要输入“<”，应使用（D）。 A．lt; B．≪ C．< D．< 5.以下说法中，错误的是：（D）。 A．获取WWW服务时，需要使用浏览器作为客户端程序。 B．WWW服务和电子邮件服务是Internet提供的最常用的两种服务。 C．网站就是一系列逻辑上可以视为一个整体的页面的集合。 D．所有网页的扩展名都是.htm。 6.以下说法中，错误的是：（B）。 A．网页的本质就是HTML源代码。 B．网页就是主页。 C．使用“记事本”编辑网页时，通常应将其保存为.htm 或.html 后缀。 D．本地网站通常就是一个完整的文件夹。 7.浏览网页时，通常使用以下协议：（C）。 A．mailto B．FTP C．HTTP D．TCP/IP 8.在网页中显示特殊字符，如果要输入空格，应使用（D）。 A．nbsp; B．&Nbsp; C． D． 9.以下软件中，不能直接用来编辑HTML 文件的是：（C）。 A．记事本B．FrontPage C．Flash D．Dreamweaver 10.以下有关HTML 标记符的属性的说法中，错误的是：（C）。 A．在HTML中，所有的属性都放置在开始标记符的尖括号里。 B．属性与HTML标记符的名称之间用空格分隔。 C．属性的值放在相应属性之后，用等号分隔；而不同的属性之间用分号分隔。 D．HTML 属性通常也不区分大小写。 二、填空题 1.如果要为网页指定黑色的背景颜色，应使用以下html语句：
。 2.上网浏览网页时，应使用_____浏览器____作为客户端程序。 3.TITLE 标记符应位于___head______标记符之间。 4.要设置网页在黑色背景下显示白色文字，应使用__语句。 5.要设置整个网页的背景颜色，应在body标记符中设置____bgcolor_____属性。 三、判断题 1.用H1标记符修饰的文字通常比用H6标记符修饰的要小。╳ 2.B标记符表示用粗体显示所包括的文字。√ 3.指定滚动字幕时，不允许其中嵌入图象。╳ 4.指定水平线粗细的属性是size。√ 5.指定水平线粗细的属性是width。╳认识Dreamweaver 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识。 【学习步骤】 1、 Dreamweaver的功能 Dreamweaver可以像普通的字处理软件一样编辑Internet上以HTML格式保存的所有文件， 也就是网页；它支持动态HTML，可以在网页中产生动画；还可以在网页中插入各种插件，以产生特殊效果。 Dreamweaver可用于管理站点，它像文件夹一样创建和打开站点，用不同的方式查看站点中各个网页之间的关系，调整站点的组织结构，使整个站点条理清晰。 2、 Dreamweaver的窗口 （1）标题栏 （2）菜单栏 （3）工具栏 （4）视图栏 （5）文件夹列表 （6）工作区 3.网页工作区的三个视图方式选项 它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。 普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以 像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。
HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语法成分。 为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver提供了预览视图方式。 4.安装dreameaver的方法 安装及注册 5.关闭dreameaver 6.保存网页的方法 三、小结 Dreamweaver的基本知识
《网页设计》课程教学大纲 一、课程说明： 课程类别：选修课 适用专业：工商管理、电子商务专业、信息管理与信息系统专业和计算机相关专业、艺术设计专业等。 计划学时：60学时（讲课24学时，上机实验36学时） 学分：4 先修课程：计算机基础 执笔： 审阅： 二、课程的教学目的 以培养应用型人才为目标，充分考虑远程教育学生的学习基础和学习特点。简单介绍HTML语言、CSS样式、javascript语言，全面介绍与网页设计制作有关的知识，通过对Web页制作技术和制作工具的学习，使学生对于网页设计中所涉及的相关知识有一个全面的了解。并使学生具有解决一般网页制作问题的能力。掌握运用Dreamweaver CS6网页制作软件制作网页的方法，掌握运用Fireworks CS6、photoshop cs6图像处理软件进行网页中图形制作版式设计及切片的应用。掌握运用flash CS6动画制作软件设计网页中动画的方法，进而掌握将这四个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作工作打下基础。 三、课程教学基本要求： 1、课程重点 掌握网页制作三剑客Dreamweaver、Fireworks、flash及photoshop在网页设计过程中的应用，使学生具备网站策划、网页设计与制作、效果图设计与制作等方面的技能，提高学生分析解决问题能力和项目实施能力，注重学生在学习和实践过程中职业素质的养成。通过学习，使学生熟练掌握运用Dreamweaver网页制作软件制作网页，掌握运用Fireworks、Photoshop图形图像处理软件进行网页中图形图像的设计与制作，掌握运用flash动画制作软件设计网页中动画的方法。 2、课程难点 （1）理解HTML语言各种文本格式、字符格式、段落设置、列表、标记的作用； （2）理解CSS样式表中属性单位的作用和意义； （3）理解javascript语言脚本程序的工作方式； （4）深入理解超级链接、图形图像各种功能和应用； （5）深入理解表格、AP Div、框架、表单的作用； （6）深入理解模板、库、行为和脚本的高级应用； （7）理解网站测试的目的和测试方法； （8）深入理解“切片”和“热点”的涵义和应用； （9）深入理解动画的组成“时间轴”、“场景”、“帧”的涵义及各种动画的制作； （10）理解使用图像设计软件进行版式设计的方法。 3、能力培养要求 （1）了解HTML语言的基本内涵。理解基本标记的用法； （2）掌握在网页中添加CSS样式的方法。熟练使用CSS设置网页格式和列表的格式； （3）熟练掌握网页中文本的输入、特殊字符的插入及字符格式的设置方法； （4）掌握在网页中嵌入图象和多媒体的方法；
〈网页设计与制作》期末考试试题、单项选择题（本大题共30小题，每小题2分，共60分） 1、目前在In ternet上应用最为广泛的服务是（b）。 A、FTP 服务 B、WWW 服务 C、Tel net 服务 D、Gopher 服务 2、域名系统DNS的含义是（b ）。 A、Direct Network System B 、Domain Name Service C 、Dynamic Network System D、Distributed Network Service 3、主机域名center. nbu. edu. cn 由四个子域组成，其中（d）子域代表国别代码。 A、center B、nbu C、edu D、cn 5、当标记的TYPE属性值为（d ）时，代表一个可选多项的复选框。 A、TEXT B、PASSWORD C、RADIO D、CHECKBOX 6、为了标识一个 HTML文件开始应该使用的HTML标记是（c）。 A、
| B、 C、 12、在网页中最为常用的两种图像格式是（a）。 A、JPEG 和 GIF B、JPEG 和 PSD C、GIF 和 BMP D、BMP 和 PSD 13、如果站点服务器支持安全套接层（SSL），那么连接到安全站点上的所有URL开头是 (b)。 A、HTTP B、HTTPS C、SHTTP D、SSL 14、在HTML中，要定义一个空链接使用的标记是（a ）. A、＜a href= "#"＞ B、＜a href= ”？"＞ C、＜a href= "@"＞ D、＜a href= ”"〉 15、对远程服务器上的文件进行维护时，通常采用的手段是（b） A、POP3 B、FTP C、SMTP D、Gopher 16、下列Web服务器上的目录权限级别中，最安全的权限级别是（a ） A、读取 B、执行 C、脚本 D、写入 17、用Fireworks切割图形时，需要的工具是（c） A、裁剪 B、选取框 C、切片 D、自由变形 18、 In ternet上使用的最重要的两个协议是（b ） A、TCP 和 Tel net B、TCP 和 IP C、TCP 和 SMTP D、IP 和 Tel net 19、 body元素用于背景颜色的属性是（c） A、alink B、vlink C、bgcolor D、background 20、下面说法错误的是（d） A、规划目录结构时，应该在每个主目录下都建立独立的images目录 B、在制作站点时应突出主题色 C、人们通常所说的颜色，其实指的就是色相 D、为了使站点目录明确，应该采用中文目录 网页制作教案课堂任务快速建站技术—模板的应用 课程名称：利用模板快速建站 课时数：4 教学目标： 知识与技能：了解模板的定义，模板的可编辑区域的定义。 过程与方法：掌握在网页中创建模板的三种方法； 掌握模板的可编辑区域的定义、建立和取消； 掌握模板的应用和取消； 掌握如何将模板从网页中分离出来； 掌握使用模板快速建站； 情感与价值观：培养学生主动思考问题的习惯和自主学习的能力。 教学重点： 在DreamWeaver8中创建模板和应用模板。 教学难点： 学会模板的可编辑区域的定义、建立和取消。 教法： 任务驱动法 学法： 记录关键步骤，积极动手练习。 课前准备： 第三章第三节素材和实例，视频教程：快速建站技术－模板的应用.WMV，快速建站技术－模板的应用(快速更新).WMV。 教学过程设计： （一）导入设计： 我们制作一个网站时，会发现许多网页的版面和元素都是相同的，在设计一个新页面时，我们还可以用复制原来做过页面来减轻工作量。但是如果一个网站有几十、上百张页面都基本相同，这时修改或更新网页的共同元素如网站标志时，会发现工作量实在太大！而使用Dreamweaver 软件中的模板功能来创建新网页，可以大大提高更新和修改的工作效率，网站的维护工作会轻松很多。本节主要内容如下。（二）新课讲解设计： （1）请学生带着以下问题阅读P110～115知识预读，问题如下： A、模板的定义？ B、模板创建的三种方式？了解资源面板的使用方式。 C、学会模板的可编辑区域的定义、建立和取消； D、学会模板的应用和取消； E、学会如何将模板从网页中分离出来； （2）教师提问，请学生一一回答以上问题。期间对回答问题的同学要多多表扬，如“你真棒”。增强学生对教师的亲和力。 （3）教师在学生回答问题的同时，总结评价并补充相关要点。 （4）教师展示完成后的模板网站作品，与学生共同讨论分析该网站制作过程。 （5）教师演示建立模板,创建可编辑区域,应用模板等部分操作（详见教材任务一）。 静态网页设计-教学大纲《静态网页设计》教学大纲 课程类别：专业基础课 课程属性：必修课 学分/学时： 4学分/64学时 制订人：课题组 适用专业：信息技术相关专业 一、课程的性质 “静态网页设计”是信息技术类专业学生的专业基础课之一。属于必修课范畴。同时它是一门针对性、实践性较强的课程。主要是培养学生静态网页设计的基本知识和静态网页设计制作的基本技能。 二、与其它课程的关系 三、教学目标 1.知识目标 (1)网站、网页、网页设计等的基本概念； (2)理解HTML语言中的各种文本格式、段落设置、列表等标记知识； (3)理解和掌握基本的DIV＋CSS技术知识； (4)理解和掌握表格的基本知识； (5)理解和掌握数据表单的基本知识； (6)理解和掌握基本的框架网页知识； (7)理解和掌握网页图像、动画等多媒体应用知识； (8)理解和掌握网页超级链接知识； (9)掌握基本的动画制作知识； (10)了解网页美工相关知识； (11)了解网站的测试、发布与维护的基本知识； (12)掌握网站制作流程 2.能力目标 (1)能运用HTML语言设置和编辑网页元素； (2)会使用Dreamweaver等网页设计工具制作网页； (3)能使运用基本的CSS技术设置网页风格； (4)能在网页中嵌入图像、动画、视频等多媒体元素； (5)能运用表格布局并设计网页； (6)能正确运用文字超链接、图像超链接技术设计网页； (7)掌握框架制作网页的方法，会使用框架设计网页； (8)掌握制作表单的方法，会利用表单建立交互式页面； (9)能看懂基本的HTML网页源代码。 (10)会设计网页线框图，并能运用PS进行网页效果图设计 (11)掌握切片的基本原则和基本方法，综合运用网页排版技术进行切片素材排版 (12)熟悉网站项目工作流程，能独立进行中小型网站设计。 3.素质目标 (1)具有信息资料收集与整理能力； (2)具备简单的需求市场分析能力； (3)具有一定的语言表达、沟通和协调能力； (4)具有良好的心理素质和责任意识，能及时完成任务的能力； (5)具有踏实肯干的工作作风； (6)具有一定的创新意识和艺术设计素质 四、内容结构与目标任务 网页制作期末考试试题含答案.2010年秋季学期《网页制作》科目期末考试卷（理论） 使用班级:09计一、09物一班级: 姓名: 得分: 1、A 2、C 3、C 4、A 5、D 6、D 7、C 8、A 9、B 10、B 11、A 12、D 13、B 14、B 15、D 1、可以通过（A）文本框设置单元格内容和 单元格边界之间的像素数。 A:填充 B:间距 C:边框 D:宽和高 2、将鼠标指针移动到表格上面，当鼠标指针呈（C）形状时，单击便可选中表格。 A:网格图标 B:十字C:双箭头 D:空心箭头 3、在一个网站中，路径的表示方式一般有（C）。 A:绝对路径、根目录相对路径 B:绝对 路径、根目录绝对路径 C:绝对路径、根目录相对路径、文档目录相对路径 D:绝对路径、根目录绝对路径、文档目录相对路径 4、若要编辑Dreamweaver 8站点，可采用的方法是（）。 A:执行菜单“站点”/“管理站点”命令，然后选择一个站点，单击“编辑” B:在“文件”面板中，切换到要编辑的站点窗口中，双击站点名称 C:执行菜单“站点”/“打开站点”命令，然后选择一个站点 D:在“属性面板”中进行站点的编辑 5、如果要使浏览器不显示表格边框，应将“边框粗细”设置为（）。 A:1 B:2 C:3 D:06、以下扩展名中不表示网页文件的是 （） A、.htm B、 .html C、 .asp D、 .txt 7、构成WEB站点的最基本的单位是（） A、网站 B、主页 C、网页 D、文字 8、网页最基本的元素是（） A、文字与图像 B、声音 C、超链接 D、动画 9、在进行网站设计时，属于网站建设过程规划和准备阶段的是（） A、网页制作 B、确定网站的主题 C、后期维护与更新 D、测试发布 10、Dreamweaver是（）软件 A、图像处理 B、网页编辑 C、动画制作 D、字处理 11、在网站整体规划时，第一步要做的是（） A 确定网站主题 B 选择合适的制 作工具 C 搜集材料 D 制作网页 12、链接到同一网页的超链接，又称为（）。 A．绝对超链接 B．相对超链接C．邮件超链接D．锚点超链接 13、要想在新的浏览器窗口中打开链接页面，应将链接对象的“目标（target）”属性设为（） A．_parent B．_blank C．_self D．_top 14、“HTTP”的中文含义是（）。 A、文件传输协议 B、超文本传输协议 C、顶级域名网址 D、以上都不是 15、下面说法错误的是( ) A.规划目录结构时，应该在每个主目录下都建立独立的images目录 B.在制作站点时应突出主题色 C.人们通常所说的颜色，其实指的就是色相 D.为了使站点目录明确，应该采用中文目录 网页制作的教学设计网页制作的教学设计 一、教学目标 1 、知道站点、主页的概念，能在指定位置建立只有一个网页的站点； 2 、认识FRONTPAGE 的界面； 3 、掌握在主页中插入文字、图片、水平线； 4 、掌握页面文件与图片的保存。 二、教学重点 1 、能在指定位置建立只有一个网页的站点（难点） 2 、能在页面中插入文字、图片、水平线 3 、掌握页面文件与图片的保存（难点） 三、学情分析 学生已经学习了WORD 、POWERPOINT 与上网浏览信息，对计算机的基本操作（WORD 中文档的编辑，网页的浏览等）比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务，有能力的学生还可以完成提高篇的学习，以充分发挥学生的积极性与自主性。 四、教学方法 在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。 五、教学过程设计 教师活动：1 、引入课题：（激发兴趣，活跃气氛） 同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站） 浏览新浪网站，浏览的第一个页面称为什么？（主页） 我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。 问题1 ：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页， 通过超链接把不同的页面链接起来） 问题 2 ：网页是不是就是主页？( 第一个页面称为主页, 网站设计者可以确定哪一个是主页, 主页的文件名一般为：index.htm, 主页也是网页) 设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet 上，让所有的人访问浏览。 今天我们学习用Frontpage 建立站点，制作一个主页。 先来研究一下没有发布的网站, 打开教师做的网站 问：同学们看到了什么？（文件夹） 总结： 可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。 打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。 请学生浏览教师课件，了解学习任务 2 、新建站点 FP 的启动 问：与word 比较，有什么不同？ （增加了视图区，编辑区有三个窗口） 总结： 视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面 普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式 预览窗口：浏览器中出现的效果，与PowerPoint 中的“放映幻灯片”类似。 Html 窗口：编写HTML （超文本标记语言，它是描述网页内容和外观的标准。） 打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。 (完整版)《网页设计与制作》课程教学大纲.docx《网页设计与制作》课程教学大纲 课程名称：网页设计与制作 学分及学时： 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 页面开发的发 展方向，兼顾各行各业的需求变化，力争面向社会，服务于企业“互联网+”战略。 网页设计与制作试卷试题(附答案)“双语”教育2012-2013第2学期 《网页设计与制作》 年级专业：学号姓名： 一、单选题（共45小题，每小题1分，共45分） 1、在网站设计中所有的站点结构都可以归结为【 B 】 A、两级结构 B、三级结构 C、四级结构 D、多级结构 2、在客户端网页脚本语言中最为通用的是【 A 】 A、javascript B、VB C、Perl D、ASP 3、所学网布局的方法是【 E 】 A、表格 B、布局 C、层 D、DIV E、都是 4、在HTML中，标记的Size属性最大取值可以是【 C 】 A、5 B、6 C、7 D、8 5、所学网页页面构成有【 E 】 A、顶部（标题） B、底部（注释） C、正文 D、导航 E、都有 6、用户登陆页面不可能用到的是【 B 】 A、服务器行为检查新用户 B、绑定字段 C、用户身份验证 D、建立数据库 7、成绩录入系统不能用到的【 C 】 A、建立数据库 B、绑定插入记录集 C、检查表单 D、重复区域 8、非彩色所具有的属性为【 C 】 A、色相 B、饱和度 C、明度 D、纯度 9、下面说法错误的是【 D 】 A、规划目录结构时，应该在每个主目录下都建立独立的images目录 B、在制作站点时应突出主题色 C、人们通常所说的颜色，其实指的就是色相 D、为了使站点目录明确，应该采用中文目录 10、目前在Internet上应用最为广泛的服务是【B 】 A、FTP服务 B、WWW服务 C、Telnet服务 D、Gopher服务 11、Web安全色所能够显示的颜色种类为【C 】 A、4种 B、16种 C、216种 D、256种 12、为了标识一个HTML文件应该使用的HTML标记是【C 】 A、 B、 网页设计与制作课程教案《网页设计与制作》课程教案 一、课程定位 本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。 本课程的目的和任务是让学生学会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制作各种超级链接 《网页设计》教学大纲网页设计教学大纲 教材：《网页设计》 总学时：134学时 开课学期：第1—2学期 课程类别：必修 课程性质：专业基础课 适用专业：设计类 第一部分大纲说明 一、课程的性质和任务 在中等职业技术学校设计类专业所设置的课程中，网页设计是一门进阶性的设计课程，可以在平面学习的基础之上，不仅了解印刷产品谁，同时也能掌握电子产品内设计。网页设计行业也是从事专业技术工作人员必须掌握的一项职业技能。 对中职学校的设计类专业来说，本课程的任务是培养学生具有一定的网页设计基础，同时也能够了解网页的结构以及简单的设计技巧，进一步提高学生全面素质，形成综合职业能力。 二、课程教学目的 通过本课程教学，使学生了解网页设计常用软件工具、功能的使用；理解WEB界面设计的流程及规范；同时了解WEB界面设计中各行业的设计风格；理解企业客户对设计的需求和期望值；掌握网站及软件界面设计的技能和技巧。 第二部分大纲内容 第一章WEB界面设计规范及流程 1、WEB界面结构与作用 2、WEB界面设计规范及流程 3、网页中的字体设计 4、网页中的图标设计 5、Banner设计 第二章企业网站WEB界面设计 1、了解企业网站结构、制作流程及设计规范 2、企业网站根据模块划分进行设计 3、企业网站色彩搭配 4、企业网站WEB界面赏析 第三章网站专题页WEB界面设计 1、了解专题页网站结构、制作流程及设计规范 2、专题页网站根据模块划分进行设计 3、专题页网站色彩搭配 4、专题页网站WEB界面赏析 第四章电子商务网站WEB界面设计 1、电子商务网站结构、制作流程及设计规范 2、电子商务网站根据模块划分进行设计 3、电子商务网站色彩搭配 4、电子商务网站WEB界面赏析 第五章 PC客户端软件界面设计 1、赏析PC客户端软件界面的类型 2、企业OA办公软件、触摸屏管理展示系统界面的分析与设计 3、PC端界面设计注意事项 第六章 WEB界面版式设计 1、运用所掌握的美学知识，进行版面的“点、线、面分割”，颜色搭配进行设计 2、设计出美观实用的WEB版面。 3、赏析优秀版式界面 第七章 WEB标准化布局基础 1、标签的使用 2、（X）HTML/HTML5语言 3、CSS/CSS3层叠样式表 4、导航排版布局 5、内容排版布局 第八章 WEB综合项目实战 1、企业网站项目实战 2、电商网站项目实战 3、专题网站项目实战 《网页设计与制作》试卷及答案浙江传媒学院《网页设计与制作》期终（考试）卷 学院 班 姓名 学号 总分 题号 一 二 三 四 五 六 题分 一、单选题（每小题1分，共30分) 1、 设置字体大小时，选择"无"，代表（ ）。 号字 号字 号字 号字 2、 在HTML 源代码中，图像的属性用（ ）标记来定义。 3、 在页面属性对话框中，我们不能设（ ）。 A.网页的标题 B.背景图像的透明度 C.背景图像 D.超链接文本的颜 色 4、 图像属性面板中的热区按钮不包括（ ）。 A.方形热区 B.圆形热区 C.三角形热区 D.不规则形热区 5、 用于同一个网页内容之间相互跳转的超链接是（ ）。 A.图像链接 B.空链接 C.电子邮件链接 D.锚点链接 6、 将超链接的目标网页在最顶端的浏览器窗口中打开的方式是（ ）。 A. _parent B. _top D. _self 7、 在Flash 中，绘制直线时，按住（ ）键可以绘制水平线。 A. Alt B. Ctrl 8、 在Flash 中，如果要选取铅笔工具，应在绘图工具箱中单击( )工具。 A ． B ． C ． D ． 9、 要在时间轴上插入空白关键帧，应当使用的快捷键是（ ）。 A. F5 B. F 9 C . F8 D. F7 10、 下面对矢量图和象素图描述不正确的是：( )。 A ．位图（点阵）的基本组成单元是象素 B ．点阵图的基本组成单元是锚点和路径 C ．Adobe Illustrator 图形软件能够生成矢量图 D ．Adobe photoshop 能够生成位图 11、 对于在网络上播放动画来说，最合适的帧频率是： A.每秒24帧 B.每秒25帧 C.每秒12帧 D.每秒16帧 12、 Dreamweaver 可以导入的表格式数据的格式是（ ）。 A. 文本格式 格式 格式 D.任意格式 13、 如果想让页面具有相同的页面布局，那么最好使用哪种技术（ ）。 A.库 B.模板 C.库或模板均可 D.每个页面单独设计 14、 Dreamweaver 中，库项目可以包含（ ）元素。 装 订 区 网页设计教学大纲网页设计教学大纲 一、课程性质与任务 1、课程性质 《网页设计与制作》是中计算机专业开设的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。本课程的主要内容为系统介绍网页编辑与制作软件Dreamweaver cs3，通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。 2 、课程任务 本门课程在专业教学计划中起着十分重要的作用，通过这门课程，学生可以掌握以下技能和知识： * 掌握网站的开发流程，如建站规划、效果图制作、建立站点等相关知识。 * 掌握各种网页元素在Dreamweaver cs3中的使用。例如表格、文本、图像、超级链接、层和表单等。 * 熟悉一些网页设计辅助软件的功能和使用方法。例如Flash、Fireworks、Photoshop等。 * 掌握测试和发布网站的方法。包括网站测试的内容和方法。 * 能够解决一些网页设计中的常见问题。 * 了解ASP开发平台的搭建，Dreamweaver cs3在动态网页制作方面的应用。 二、课程教学目标与要求 1、本课程的基本目标 （1）使学生通过本课程的学习，掌握Dreamweaver cs3的使用方法，学会使用Dreamweaver cs3制作Web网页的技术。 （2）本课程学习结束后，学生应能自行设计各种网页、开发一定规模的网站，使学生通过本课程的学习，熟练掌握其基本制作方法和技巧，并最终设计一个综合性的网站并且编制简单的脚本上传到互联网上。 2、课程在知识、素质方面的基本要求 （1）知识要求 深入了解Internet，理解WWW、HTTP、HTML等概念及作用；掌握网站设计和发布的 HTML网页制作基础题试题与答案HTML网页制作基础题 一、选择 1. 在一个框架的属性面板中，不能设置下面哪一项。（ D ）A．源文件B ．边框颜色C．边框宽度D．滚动条 2. 下列哪一项表示的不是按钮。（ C ） A．type="submit" B．type="reset" C．type="image" D ．type="button" 3. 下面哪一个属性不是文本的标签属性？（ A ） A．nbsp; B ．align C ．color D．face 4. 下面哪一项的电子邮件链接是正确的？（ B ） A．https://www.doczj.com/doc/b512545178.html, B ．xxx@.net C．xxx@com D ．xxx@https://www.doczj.com/doc/b512545178.html, 5. 当链接指向下列哪一种文件时，不打开该文件，而是提供给浏览器下载。（ C ）A．ASP B．HTML C．ZIP D．CGI 6. 关于表格的描述正确的一项是。（ D ）A．在单元格内不能继续插入整个表格 B ．可以同时选定不相邻的单元格C．粘贴表格时，不粘贴表格的内容 D ．在网页中，水平方向可以并排多个独立的表格 7. 如果一个表格包括有 1 行4 列，表格的总宽度为“ 699”，间距为“ 5”，填充为“ 0”，边框为“ 3”，每列的宽度相同，那么应将单元格定制为多少像素宽。（ D ） A．126 B．136 C．147 D．167 8. 关于文本对齐，源代码设置不正确的一项是：（A．居中对齐： ? B．居右对齐： ? C．居左对齐： ? D．两端对齐： ? 9. 下面哪一项是换行符标签？（C） A． B ． C ．D． 10. 下列哪一项是在新窗口中打开网页文档。（B ）A．_self B ．_blank C．_top D．_parent 11. 下面对JPEG格式描述不正确的一项是。（ C ） A．照片、油画和一些细腻、讲求色彩浓淡的图片常采用JPEG格式 B．JPEG支持很高的压缩率，因此其图像的下载速度非常快C．最高只能以256 色显示的用户可能无法观看JPEG图像 D．采用JPEG格式对图片进行压缩后，还能再打开图片，然后对它重新整饰、编辑、压缩 《网页设计与制作》课程教学大纲(精)《网页设计与制作》课程教学大纲 一、课程的性质和任务 课程性质：《网页设计与制作》是现代汽车技术/计算机及应用专业的一门选修课程，是学习网页设计与制作的一门重要课程。 主要任务：向学生全面介绍与网页设计制作有关的知识，向学生阐明Web 基本工作机制，并使学生具有解决一般网页制作问题的能力。与此同时，通过对Web页制作技术和制作工具的学习，使学生对于网页设计中所涉及的相关知识有一个全面的了解。掌握通过HTML语言、FrontPage、Flash工具软件设计制作一个网站的方法与技巧。 基本要求： 1、了解Internet的过去、现在和将来及有关WWW、HTTP、HTML、CSS的定义，概念和作用； 2、了解图像的几种格式：GIF、JPEG、PNG和矢量图格式，它们各自的特点和差别； 3、理解服务器、客户端、浏览器的概念和作用； 4、深入理解HTML语言中的各种文本格式、字符格式、段落设置、列表、标记、表格、框架、表单的作用； 5、理解客户端脚本程序的工作方式； 6、熟练掌握使用绝对和相对URL，创建超链接，图象链接，图象映射的建立方法； 7、会使用FrontPage2000、DreamWeaver等网页制作工具制作网页； 二、课时分配 课程教学总学时数为42学时，具体分配见课时分配表。 课时分配表 三、本课程的教学内容 第一章 HTML概述 什么是HTML；什么是WEB；HTML的定义；基本的HTML语法；标记符的属性； WEB页的基本结构；HTML标记；首部标记；正文标记符；添加注释；显示特殊字符。 第二章页面背景与颜色控制 页面背景；背景颜色；背景图案；字符和链接的颜色。 第三章文本格式 字符格式；物理字符样式；逻辑字符样式；段落格式；分段与换行；段落对齐。 第四章列表格式 有序列表；OL标记符和LI标记符；有序列表的嵌套；无序列表；定义无序列表；混合嵌套列表；定义列表；创建定义列表；使用定义列表缩排文档第五章使用图象 WEB页图象格式；在网页中插入图象；IMG标记符及其基本属性；图象布局；使用GIF动画；创建GIF动画；注意事项；使用网页图象的要点。 第六章使用超链接 超链接基础；URL简介；绝对URL与相对URL；BASE标记符；创建超链接；.1 指向本地网页的链接；指向其他网页的链接；指向页面中特定部分的链接；指向电子邮件的链接；图象与超链接；链接到图象；图象链接；图象映射；客户端图象映射；服务器端图象映射。 第七章使用表格 创建表格；表格标记符TABLE；创建表格标题；表格的表头；表格的行与列；表格的修饰；边框和分隔线；表格的对齐；控制单元格空白；行组；列组；使用表格设计网页布局；设置表格或单元格的背景；嵌套表格。 《网页制作》教学设计(优质课比赛优秀设计)《网页制作》教学设计（优质课比赛优秀设计）《网页制作》教学设计 一、教材或教学内容分析 本章内容在本教材中的位置处于第五章，是在文字处理(Word2000)和网络基础及因特网应用两章之后。学生所学的文字处理软件Word和将要学习的网页制作软件Frontpage同是Microsoft公司的产品，在软件的使用上有很多的共通之处，所以在学习frontpage的时候，很多内容可以让学生自学，而不必面面俱到地在课上讲授。而第四章网络基础及因特网的应用又为学生对网页的理解奠定了基础，学生对网页中的基本元素——文字、图片、动画、声音等都有所了解，而网页的制作就是将这些元素重新组合到网页上，学生要学的就是这种组合的方法。所以说，虽然大多数学生以前都未接触过网页的制作，但有了以上这些基础，学起来就轻松多了。 本章内容按照学生已有的基础，我对教学内容分了一下类，也为教学的组织工作打下一点基础。本章内容主要由网页基础知识、网站的建立和管理、网页的制作、创建超链接、图片的处理、网页框架。 重点是网页的制作和创建超链接，学会了这些就可以开始简单的网页制作了。 难点是网页框架，这部分相互之间关系比较复杂，必要时，老师在对各组个别辅导时，可以给予分别讲解。 这个分类可以为组长安排各个组员的任务提供参考，使分工更加合理。 二、教学对象的分析 第 1 页共 6 页 信息技术课虽然已经成为初中的必修科目，但是城乡学生之间掌握情况的差异却相当大，条件好一点的初中学生不仅已经熟练掌握了课本上的内容，还对一些常 用软件有所了解;而差一点的可以说是从高中开始才正式接触到信息技术知识的学习，他们需要多锻炼、多指导，所以协作学习对学生的学习帮助很大。 三、教学策略的选择及媒体的使用 在教学策略的选择上，我使用的是任务驱动和协作学习相结合的方法。 任务驱动就是要求本章内容学习完之后，每个小组都要完成自己班级网站的制作，并在全班进行评比，选择最好的作为班级主页挂到学校主页上去，这有助于激发学生参与学习的积极性。 协作学习则是让学生在学习过程中互帮互助，用较短的时间、教少的精力学到更多的东西，完成一个集体项目，让他们在学习之后获得成就感。因此在媒体的选择上，我们使用的是TOP2000系统。TOP2000系统有利于教师进行分组教学和学生作品的点评及成果的展示。教学过程开始之前，教师把学生按座位分成四组，每个组都按学生对计算机的掌握程度平均分配，保证每个组都有计算机操作方面比较突出的，也有相对比较差的，使其形成能够互帮互助的学习小组。并由他们自己选出组长各一名，然后由组长根据组员的情况，确定在班级主页制作过程中主要完成什么任务，也就是说起到一个组织者的作用。做过网页的人都知道，做网页是一项比较费时的工作，而要学生在较短的时间内制作出像样的网页是比较困难的，而在这个过程中，网页的设计占去了相当多的一部分时间，组长把任务分到各组员头上以后，组员就可根据自己要完成的任务相对集中的做某方面的工作，做完以后，组员之间进行经验交流，告诉组员自己的网页是如何制作出来的，在完成自己的网页后，再重复一遍制作过程花费的时间的不多的。这样，其他组员就可在较短的时间之内 第 2 页共 6 页 掌握比较先进的网页制作方法，而不必再花那么多时间去探索。因为每位组员都必 相关主题
文本预览
|