第六章层叠样式表
本章教学目标:
1.理解掌握CSS的概念和作用;
2.熟练掌握类样式的创建和应用;
3.熟练掌握标签样式的创建和应用;
4.熟练掌握高级样式的创建和应用;
5.熟练掌握外部样式表的创建;
6.熟练掌握CSS特效的应用;
7.熟练使用样式表美化网页。
教学重点:
1.掌握创建类样式、标签样式、高级样式及应用;
2.掌握样式表文件的创建及应用;
教学难点:
创建和应用类样式
教学时间
8课时(4节理论课,4节实验课)
教学过程
§6.1 创建类样式
一、样式表的三种基本类型
1.类样式
类样式适合于单独为元素设置个性化的样式。用户可以在文档的任何区域或文本中应用类样式。定义好的类样式能很方便的应用到网页元素中。如果将类样式应用于一整段文字,那么会在相应的标签中出现“Class”属性,该属性值即为类样式名称。
2.HTML标签样式
可以针对某一个标签来定义层叠样式表,也就是说所定义的层叠样式表将只应用于选择的标签。例如:为
标签定义了层叠样式表,那么所有包含在、标签范围内的内容将遵循所定义的层叠样式表。3.高级样式
高级样式为特殊的组合标签定义层叠样式表,使用ID作为属性,以保证文档具有唯一可用的值。高级样式是一种特殊类型的样式,常用的有四种,分别为a:link、a:active、a:visited、a:hover。其中:
?A:link:设定正常状态下链接文字的样式。
?A:active:设定鼠标单击时链接文字的外观。
?A:visited:设定访问过的链接文字的外观。
?A:hover:设定鼠标放置在链接文字之上时文字的外观。
二、本任务所用到的CSS属性
1、类型:该类属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等。
2、区块:指的是控制网页元素的间距、对齐方式等属性。
3、边框:使用“CSS 规则定义”对话框的“边框”类别可以定义元素周围的边框的设置(如宽度、颜色和样式)。
三、CSS样式面板的两种模式:
1.在“当前”模式下,“CSS 样式”面板将显示三个面板:
“所选内容的摘要”窗格:其中显示文档中当前所选内容的CSS 属性;
“规则”窗格:其中显示所选属性的位置(或所选标签的一组层叠的规则,具体取决于您的选择);
“属性”窗格:它允许您编辑应用于所选内容的规则的CSS 属性,如下图所示。
2.在“所有”模式下,“CSS 样式”面板显示两个窗格:
“所有规则”窗格显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。
使用“属性”窗格可以编辑“所有规则”窗格中任何所选规则的CSS 属性。补充:
§6.2重定义HTML标签
一、常用HTML标签的作用
(1)body:表示文档的主体部分。对body标签的重定义将影响到整个网页。
(2)table:表示一个表格。对table标签的重定义将影响到所有表格及表格中的元素。
(3)form:表示一个窗体。对form标签的重定将影响到网页中所有窗体及窗体中的内容。
(4)td:表示一个单元格。对td标签的重定义将影响到网页中所有单元格外观。
(5)p:表示一个段落。对p标签的重定义将影响到网页中所有段落的外观。
(6)img:表示图片。对img标签的重定义将影响网页中的所有图片的外观。
(7)a:表示超链接。对a标签的重定义将影响网页中的所有超链接的外观。
二、标签样式创建的步骤
步骤:
(1)单击面板右下试试看“新建CSS规则”按钮,打开“新建CSS规则”对话框;
(2)将选择器类型设置为“标签”;
(3)单击“标签”列表框右边的下拉箭头,设置为TD;
(4)将“定义在”设置为新建样式表文件;
(5)单击“确定”按钮;
(6)在弹出的“保存样式表为”对话框中,选择要保存的位置,在“文件名”文本框中输入“mainstyle.cs s”,然后单击“保存”按钮;
(7)设置文本样式及区块样式即可;
(8)保存文件,按“F12”键在IE中预览网页。
§6.3修改超级链接外观
一、高级样式
(1)高级样式允许用户一次给多个标签定义样式;
(2)也可以给由ID标识的指定对象定义样式;
(3)还可以给伪类选择器定义样式。
二、知识链接
在Dreamweaver CS 3中,若要为具体某个标签组合或所有包含特定Id 属性的标签定义格式设置,请选择“高级”选项,然后在“选择器”文本框中输入一个或多个HTML 标签,或从弹出菜单中选择一个标签。弹出菜单中提供的选择器(称为伪类选择器)有:a:active、a:hover、a:link 和a:visited。
§6.4 多个网页共享CSS样式
一、链接和导入的区别
1.链接
若要创建当前文档和外部样式表之间的链接,请选择“链接”。该选项在HTML 代码中创建一个link href 标签,并引用已发布的样式表所在的URL。Microsoft Internet Explorer 和Netscape Navigator 都支持此方法。
2.导入
不能使用链接标签添加从一个外部样式表到另一个外部样式表的引用。如果要嵌套样式表,必须使用导入指令。大多数浏览器还能识别页面中(而不仅仅是样式表中)的导入指令。当在链接到页面与导入到页面的外部样式表中存在重叠的规则时,解决冲突属性的方式具有细微的差别。如果希望导入而不是链接到外部样式表,请选择“导入”。
二、编辑外部CSS样式表
编辑外部CSS样式表时,链接到该CSS样式表的所有文档全部更新以反映所做的编辑。可以导出文档中包含的CSS 样式以创建新的CSS样式表,然后附加或链接到外部样式表以应用那里所包含的样式。
您可以将创建的或复制到站点中的任何样式表附加到页面。此外,Dreamweaver 附带了预置的样式表,这些样式表可以自动移入站点并附加到页面。
§6.5制作光晕字
一、滤镜的作用
使用过滤器,可对对样式所控制的对象应用特殊效果(例如模糊和反转)。
过滤器是由参数和参数值组成的,这些参数和值的变化组合,能使对象产生各种效果。其功能并不比PhotoShop软件中的滤镜效果逊色。相反不少图像处理软件进行特殊效果处理之后的图片体积会有所增加,而使用过滤器对图片进行处理能保持图片原有的属性,大大加快网页装载速度。过滤器参数属性过多,针对不同的施加对象,各类参数要根据使用者的喜好、需求以及对象本身的属性进行设置调试。
二、常见滤镜
作用:让对象呈现渐变半透明的效果。
示例:
Alpha(Opacity=100,FinishOpacity=30,Style=2,Startx=0,StartY=0,FinishX=100,Finis hY=80);
作用:让对象产生风吹模糊的效果。
示例:
Blur(Add=1,Direction=315,Strength=240);
3.Chroma滤镜
作用:主要用于把图片中的某个颜色变成透明的。使用了该滤镜以后,原图片中的一部分颜色就好像没有了一样。它只有一个参数“Color”,用来指定透明的姿色,即不显示出来的颜色。
示例:
Chroma(Color=#6D6D6D);
作用:可以使HTML元素对象的外轮廓上产生一种光晕。
示例:
Glow(Color=#ff0000,Strength=3);
本章小结
本章主要介绍了样式表的三种类型、类样式的创建及CSS样式面板的两种模式,标签样式的创建和应用及外部样式表文件的创建与保存。同时讲解了高级样式的创建及伪类选择器的应用,链接与导入的区别及外部样式表的编辑,Dreamweaver中滤镜的作用及常用滤镜的作用参数。
本章作业
1、使用CSS样式来依照结果文件对其进行美化。
2、定义网页中所有图片的标签样式,给每幅图片加上一个灰色边框。
3、试着给图片设置滤镜效果(如风吹的效果)。
《网页制作》教学设计 法、说学法、说教学过程、说板书设计。 一、说教材: (一)教材分析:本节内容是省编《信息技术》全一册第六章 网络与INTERNET基础知识第五节的内容(2000年版为第八章第四节内容,2001、2002版教材第六章第五节内容)。虽然在这一节内容在新版教材变更为拓展模块,但针对现在网络快速发展,广大的学生接触,使用INTERNET的机会也大大增加,学生在使用网络获取信息时,更多的是通过浏览网页这一方式,我认为上好这节课是非常必要的,这对学生进一步认识、使用INTERNET更有益处,同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解,在一定程度上也起着培养学生运用综合知识能力作用,所以我认为这节课是非常值得我们去研究上好的,考虑这节课的内容及教法、学法的需要,我把这节分为两课时,第一时:学生自学,自练Word制作网页的基本方法;第二课:让学生自己构思创意一个内容丰富,页面美观的网页。 (二)教学目标:根据对教材的分析及学生实际情况,制定如 下的教学目标: (1)知识目标:1、有关网页文件的说明 2、熟悉用Word制作网页的基本方法 3、超级链接是网页实现互相链接的基本方法 (2)能力目标:1、培养学生的自学能力 2、创意构思能力 3、能制作出具有多重链接、多种素材、内容 丰富的网页。 (3)情感目标:1、教育学生正确认识和理解信息技术相关文 化,伦理和社会问题,负责地使用信息技术。 (三)教学的重、难点:根据对教材的分析及网页制作过程中的 实际情况,我认为要出制作内容丰富的网页,关键是要知 道网页间互相链接的方法,所以我把超级链接做为本节的
课程:版式设计 系院:美术系 教师姓名: 授课班级:09级5班 时间:2010.11—2010.12
《版式设计Ⅰ》课程教学大纲 一、课程编码及课程名称 课程编码:301101612 课程名称:《版式设计Ⅰ》英文名称:Format designⅠ 二、学时、学分及适用专业 总学时数:64学时学分:3分适用专业:艺术设计专业(本科) 三、课程教学目标 版式设计Ⅰ课程是艺术设计专业的一门重要的课程,它的主要任务通过学习使学生掌握文字的韵律美感及书写规律;培养学生和训练学生快速设计和书写能力。使学生掌握设计的视觉要素、构成要素,版式设计表现内容与形式关系、设计要素及构成规律与方法,以及各种应用设计的形式特点,使学生能够进行具有感染力的版式设计,从而使作品的内容更清晰、更有条理的传达给读者。 四、课程的性质和任务: 本课程是艺术设计专业必修专业课。通过本课程的学习,使学生了解字体设计基本概念和字体的基本功能;了解字体的发展简史及字体的类型,掌握字体绘写的基本方法与要求及字体设计的方法与技巧。培养学生的专业素质,使学生充分认识字体设计在商业设计中的重要性,和字体设计未来发展的趋势。 五、课程教学的基本要求: 本课程应该结合实践知识,分阶段、针对性的进行版式设计的讲解,使学生从理论到实践,逐渐认识、掌握字体设计案例。因此在课程教学的方法上,授课教师应该多准备实例素材,通过幻灯、多媒体向学生展示讲解,并通过校外课堂示范教学,使学生更直观的学习版式设计步骤。从工艺与制作能力两个方面引导学生,从而真正达到提高学生应用能力的目的。 六、课程教学内容: 第一章文字的概述(共11学时) (一)本章教学基本要求 充分了文字的发展概况 (二)教学内容:1.1 由图画到字体的演变 1.2 东方文字的发展历史 1.3 西方文字的发展历史 教学重点:文字的演变 教学难点:中西方文字的演变 (三)小结: 通过对本章的学习能了解字体发展概况。 第二章文字创意的基本方法(共13学时) (一)本章教学基本要求 通过本章学习使学生了解汉字的基本造型结构,汉字书写的一般规律,掌握字体设计笔画结构变化的基本方法。 (二)教学内容:2.1 文字设计的目的和价值 2.2 文字创意设计的原则 2.3 中西文字的表征 2.4 文字创意设计的方法 教学重点:汉字的基本造型结构
第一讲网页设计概述 使学生对网站及网页有一定的认识,激发学生学习网页设计的兴趣。 【教学内容】 讲解网页设计的相关术语及网站制作的基本流程。 【教学重点】 网页设计中的若干术语。 【教学难点】 理解网页设计中的若干术语。 【教学方式】 讲授式、讨论式、案例分析式。 【教学参考】 1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。 2、《Internet 网页工场》Wittime工作室重庆出版社。 3、《WEB网站设计》Joel Sklar著高等教育出版社。 4、《HTML网页制作教程》材义语编著铁道出版社。 【新课内容】 1.1 WWW和URL 1.1.1 Web的起源 Web是World Wide Web的简称,一般也称之为WWW或3W 1.1.2 Web的特点和结构 Web最大的特点是使用了超文本(Hypertext) WWW采用C/S(客户机/服务器)工作模式 在浏览器和服务器之间应用HTTP(Hyper Text Transfer Protocol,超文本传输协议)作为网络应用层通信协议 1.1.3 URL URL的完整格式 协议://主机名或IP地址:端口号/路径名/文件名
1.2 IE5的使用 Web浏览器是浏览Internet资源的客户端软件 在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等 1.2.1 IE5的界面 1.2.2 IE5的使用 1.3 网页中所使用的技术 1.3.1 HTML语言和XML语言 1、HTML语言 ?HTML只使用SGML中很小一部分标记 ?HTML语言(Hyper Text Markup Language 超文本标记语言) ?HTML是纯文本的语言,其源代码可以用各种文本编辑工具进行编辑,常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具 2、XML语言 XML(eXtensible Markup Language) 1.3.2 动态网页 1.3.3 多媒体技术的应用 1.3.4 Web服务器端程序 1.4 制作网页的基本方法 1.4.1 制作网页的基本步骤 1、确定网页的内容 2、设计网页的组织结构 3、资料的收集与整理 4、选择网页的设计方法 1.4.2 制作网页时要注意的问题 1、网页的标题要简洁,明确。 2、在文本中要使用水平线,以分割不同部分。 3、对重点段落要强调显示。 4、网页中插入的图片要尽量的小。
(此文档为word格式,下载后您可任意编辑修改!) 第一章绪论 第一节版式设计概念 [课程导入] 当我们面对设计主题,有了一个好的设计创意时,接下来就是如何把这一创意表现出来。设计创意的表现元素不外乎图形(或图片)、标题字、正文和色彩,这些,统称为版式设计的四大元素。 可以说,任何具体的设计,最后都会落实到对这四大元素的编排上来。 作为设计专业的学生,每进入到一门新的课程环节,要习惯于提出以下几个问题: 这门课程的学习目的是什么? 这门课程将要解决什么问题? 这门课程的构成要素是什么? 这些要素有什么用? 需要怎样才能使它们结合起来达到设计目的? 请同学们带着问题进入我们的课程教学! 版式设计课程的教学目的是把版面上所需要的设计元素进行必要的编排组合,成为直观动人、简明易读、主次分明、概念清楚的美的构成,使其在传达信息的同时,也传达着设计者的艺术追求与文化理念;从而通过版式设计,给阅读者提供一个优美的阅读“空间”!
何谓版式设计? 版式设计又称编排设计,是平面设计中的一个组成部分,为视觉传达设计的重要环节。版式设计当然要调动各类视觉元素进行形式上的组合排列,但更重要的是:版式上新颖的创意和个性化的表现。同时能够强化形式和内容的互动关系,以期全新的视觉效果。 版式设计的创意不完全等同于平面设计中作品主题思想的创意,既相对独立,又必须服务于其主题思想创意。优秀的版式设计,可以突出作品的主题思想,使之更加生动、更具有艺术感染力。 版式设计涉及到平面设计的各个方面,诸如广告、包装、报纸、杂志、书籍、宣传手册、CI、网页设计等(见图)。 版式设计的重点在于培养学生整体把握版式设计中四大要素的构成关系。 课题设计训练的目的:理解黑、白、灰整体分区概念;点、线、面在版式设计中的运用;各种设计原则及表现;把握具体设计内容与形式表现之间的内在关系,熟练掌握文字与文字、文字与图形、整体与局部之间的构成关系。 总之,通过强化版式设计创意能力,使版式设计从被动走向主动,从单一走向无限。在创造性的活动中,让设计者能更积极地、主动地参与主题思想表达的版式创意设计,使版式设计更有情趣、更富内涵、更显新颖。 第二节传统中国书的版式
《HTML+CSS 网页设计与布局》课程教案 授课教师:授课班级:地点:周课时: 5 课时网页设计基础知识 章节内容 教学目标重点难点教学Dreamweaver软件介绍及其基础操作 HTML 基础知识及常用标记 1)使学生了解网页设计的相关基础知识; 2)使学生熟悉 Dreamweaver 软件界面的基本操作方法。 1)了解网页设计相关概念和网页的类型; 2)熟练掌握 Dreamweaver 软件创建和管理站点的方法。课堂讲授、案例讲解与指导 方法 教学 计算机机房 环境 时间 教学过程及内容提要备注分配 一、引入 约 15 分钟 教 1 、相互认识,提出与本学科相关的知识,介绍本门课程情况、教学内 学 容及总学时数进度安排,宣讲本课程教学纪律,鼓励学生营造一种 过 学习氛围,尊重同学,互帮互学,真正达到学以致用; 程 2 、提出问题:上过网吧有谁自学过网页设计听说过HTML或者CSS 设 这两个概念吗 计 约 35 分钟学生理解3、
二、告知学生课堂任务 本次课所学习的主要内容是HTML相关基础知识和 Dreamweaver软件基础操作; 三、逐步演示讲解分析教学内容 1、网站和网页的区别: 2、( 1 )网页是Internet基本元素; 3、( 2 )网站由网页组成; 4、静态网页和动态网页: 5、静态网页:纯粹HTML语言格式的网页通常被称为静态网页,静 态网页的后缀名通常为.htm 、.html 、 .shtml 、 .xml 。 6、动态网页:许多人认为网页会动就是动态网页,这是个错误的观点, 在静态的网页中也可以含有动态的图片,这仅仅是视觉上的动态罢 了。真正的动态网页是指实际上并不是独立存在于服务器上的网页 文件,只有当用户请求时服务器才返回一个完整的网页。也就是说, 它是返回到了客户端上的网页。例如网页文件是以ASP 、PHP 、JSP、 ASPX 为结尾就是动态的网页了。 约 20 分钟学生熟记 7、静态网页的特点: 8、( 1 )内容相对稳定,容易被搜索引擎检索到; 9、( 2 )没有数据库支持,在网站制作和维护方面工作量大; 10 、(3)交互性差,在功能方面有很大的限制。 11 、动态网页的特点: 12 、(1)以数据库技术为基础,可大大降低网站维护的工作量;
《文字与版式》课程教学大纲 Writing and format design 课程学时:70学时,学分:4 一、本课程教学的目的与原则 通过本课程教学,明确版式设计原理在设计活动中至关重要的作用。本课程注重设计前沿理论的研究和开发,是对学生艺术潜质、思维方式、创造能力等综合素质的全面开发和培养,帮助学生掌握科学的思维方法、搭建完备的设计理念构架、构建合理的设计知识体系,自觉地运用版式设计原理进行艺术设计。同时,本课程能有效地激发学生们的设计潜能,在艺术设计学习的过程中,不断地调整自己,从认识自我到超越自我,成为时代需求的艺术设计人才。 课程将积极组织并参与设计实践以及各种设计、创意大赛,使理论与实践结合,通过严格的基础训练和设计实践,使学生建立和掌握版式设计的概念和方法,并自如运用于艺术设计活动的各个领域。 二、学习方法指导 1、以案例分析为主,通过对优秀版式设计作品剖析和模仿,引导学生建立版式设计的整体概念。 2、强调研究性学习的方法,确定专题性课题设计及组织讨论,从而引导学生在实战训练中熟练掌握设计原则。 三、本课程的重点与难点 本课程的重点是在案例教学中,培养学生整体把握版式设计中文字、图形、色彩三要素的构成关系,通过课题设计理解黑、白、灰整体分区概念;点、线、面在版式设计中的运用;各种设计原则及表现。 难点是把握具体设计内容与形式表现之间的关系;文字与文字、文字与图形之间整体与局部的构成关系。 四、本课程教学基本内容 第一章版式设计概念 [知识点提示] 版式设计概念 [重、难点提示] 建立对版式构成元素进行整体设计的概念 第一节版式设计概念导入 第二节传统中国书籍的版式 1、传统中国书籍的版面术语名称 2、传统中国书籍的版式设计特征 第二章版式设计原则 [知识点提示] 版式设计整体概念理解 [重、难点提示] 建立对版式整体设计的意识 第一节整体性原则 1、主次分明 2、分类编排 3、设计元素处理 第一节简洁性原则 第三章版式设计原理 [知识点提示] 设计原理 [重、难点提示] 黑、白、灰与点、线、面的整体布局关系,协调性与空间 第一节分类 1、同类合并原则
《版式设计》教案 课程名称:版式设计课程编号:00420510 课程性质:专业基础选修课授课班级:02级艺术设计(1)班授课学期:04-05第1学期授课学时:48学时 总学分: 2.5学分授课教师:邱红 中南民族大学美术学院
课程编号:00420510 1. 学分: 2.5 2.适用专业:艺术设计 3.总学时数:48 4.实验课时:4 一、课程性质、教学目标和任务: 1、性质:专业基础选修课。 2、教学目标和任务: 版式设计是设计专业重要的基础课之一。通过该课程的学习,使学生掌握设计的视觉要素、构成要素,编排设计表现内容与形式的关系、设计要素及其构成规律与方法,以及各种应用性设计的形式特点,使学生能够进行具有感染力的版式设计,从而使作品的内容更清晰、更有条理地传达给读者。 3、教学方法与教学要求: 本课程核心内容是视觉思维方式引导下的形式语言研究与训练。 1)视觉思维的训练—-讲授视觉思维的基本理论,分析编排设计的视觉要素,培养以视觉方式分析、研究、解决问题的习惯与能力。 2)形式语言的训练—-了解编排设计表现的形式语言,掌握运用构成要素进行分析、描述、重构的方法。 3)表现手法的训练—-了解视觉语言形式表现的多种手法,自如运用多种体裁、材料、媒介、技法、效果。 教学内容的选择,体现了综合性要素提取与方法归纳,体现编排设计的内在形式元素建构,在内在规律与系统方法叙述中,实现理性分析与感性实践的融合。以此为出发点,强化课程的功能,整合课程的结构,选择课程的内容,优化课程的课题。 教学内容组织方式与目的:
组织方式之一:在课程标准的要求下,每位任课教师自行设计课题,形成各具特色的内容与作业方式,他们之间所形成的差异,正是在学分制条件下,学生可供比较与选择的空间。 组织方式之二:在课程标准的要求下,设计10-12个课题以系列课题的方式建构出“一体化课程”,以课题之间的串联关系形成内部结构,将一定的内容—知识以课程的方式进行逻辑组织。以此打破原来分离、琐碎的片断知识,实行真正意义上的整合。 实践性教学的设计思想与效果: 编排设计是一门实践性很强的课程,实践性教学是通过课题练习体现的,而教学的设计思想及方法就充分体现在课题设计的思维路径与方法中,并从根本上决定了教学效果。 1、过程性与生成性:通过教学,使学生掌握形式生成的理性方式与形式推导的逻辑过程。 2、思辨性与分析性:通过教学,尤其是课题的引导,使学生学会分析、思考、比较、选择及发展的方式方法。 3、认知性与开发性:通过教学,在课题训练中使学生的心智与能力得到综合面协调的发展。 4、民族性与时代性:通过教学,使学生能把握时代精神,从中外优秀民间、民族文化中汲取设计营养。 5、结合各级专业设计展览,鼓励并指导学生开展专业设计创作,踊跃参展,近年来有多幅作品获各类奖项,成果丰硕,在本省以及周边省份同类高校中特色显著。 教学方法与教学手段 1、突显课题设计在教学中的功能与价值,以课题的方式、资源、线索、内容、媒介、程序体现课程的目标与要求。以分解与综合、趣味与理性、发散与交
《网页设计基础》教案 总学时:32 教师:贺苗苗
第一章第一节网站界面设计的认识 一、网站的主题定位 1、网站的主题选择 企业的性质决定网站的风格,企业的内容决定网站的主题。 2、网站题材选择的原则 ①主题要小而精②题材最好是自己擅长或者喜爱的内容 ③题材不要太滥或者目标太高 3、题材类别 二、页面的功能模块设计 1、网站名称(Logo) 2、广告条(banner) 3、主菜单(menu) 4、新闻(news) 5、搜索(search) 6、友情链接(links) 7、邮件和地址(mailand address) 8、版权(copyright)
首页的设计步骤:①确定首页的风格和功能模块 ②设计首页的版面布局 ③处理技术上的细节 三、网页界面设计(web interface design)------美观、用户便利、网站流程顺畅! 界面:字典上解释为两者间的界限、接点、共有连接的领域。例子:人与车直接接触的空间,方向盘(即界面);再如:人和门,门把手(即界面)。过大过小都不好。 界面设计最重要的两点:①使用的便利性②美学的层面 四、界面设计相关用语 1、UI ( User Interface, 用户界面 ) 即使用者界面的意思。实现互动是用户界面最主要的目的。 2、HCI ( Human-computer Interaction,人与计算机的交互作用 ) 即,以人怎样做能更容易的掌握计算机的使用技术为目标,结果可以使界面技术得到飞跃和发展。 3、GUI ( Graphical User Interface,图形用户界面 ) 图形用户界面是相对于纯文本而言,通过图形构成用户与系统间的界面来实现的。 例如:在windows之前的DOS必须输入纯文本,而现在则不用。
《版式设计》教案 一、教学目标和任务: 1、教学目标和任务: 版式设计是设计专业重要的基础课之一。通过该课程的学习,使学生掌握设计的视觉要素、构成要素,编排设计表现内容与形式的关系、设计要素及其构成规律与方法,以及各种应用性设计的形式特点,使学生能够进行具有感染力的版式设计,从而使作品的内容更清晰、更有条理地传达给读者。 2、教学方法与教学要求: 本课程核心内容是视觉思维方式引导下的形式语言研究与训练。 1)视觉思维的训练—-讲授视觉思维的基本理论,分析编排设计的视觉要素,培养以视觉方式分析、研究、解决问题的习惯与能力。 2)形式语言的训练—-了解编排设计表现的形式语言,掌握运用构成要素进行分析、描述、重构的方法。 3)表现手法的训练—-了解视觉语言形式表现的多种手法,自如运用多种体裁、材料、媒介、技法、效果。 教学内容的选择,体现了综合性要素提取与方法归纳,体现编排设计的内在形式元素建构,在内在规律与系统方法叙述中,实现理性分析与感性实践的融合。以此为出发点,强化课程的功能,整合课程的结构,选择课程的内容,优化课程的课题。 教学内容组织方式与目的:
组织方式之一:在课程标准的要求下,每位任课教师自行设计课题,形成各具特色的内容与作业方式,他们之间所形成的差异,正是在学分制条件下,学生可供比较与选择的空间。 组织方式之二:在课程标准的要求下,设计10-12个课题以系列课题的方式建构出“一体化课程”,以课题之间的串联关系形成内部结构,将一定的内容—知识以课程的方式进行逻辑组织。以此打破原来分离、琐碎的片断知识,实行真正意义上的整合。 实践性教学的设计思想与效果: 编排设计是一门实践性很强的课程,实践性教学是通过课题练习体现的,而教学的设计思想及方法就充分体现在课题设计的思维路径与方法中,并从根本上决定了教学效果。 1、过程性与生成性:通过教学,使学生掌握形式生成的理性方式与形式推导的逻辑过程。 2、思辨性与分析性:通过教学,尤其是课题的引导,使学生学会分析、思考、比较、选择及发展的方式方法。 3、认知性与开发性:通过教学,在课题训练中使学生的心智与能力得到综合面协调的发展。 4、民族性与时代性:通过教学,使学生能把握时代精神,从中外优秀民间、民族文化中汲取设计营养。 5、结合各级专业设计展览,鼓励并指导学生开展专业设计创作,踊跃参展,近年来有多幅作品获各类奖项,成果丰硕,在本省以及周边省份同类高校中特色显著。 教学方法与教学手段 1、突显课题设计在教学中的功能与价值,以课题的方式、资源、线索、内容、媒介、程序体现课程的目标与要求。以分解与综合、趣味与理性、发散与交
《HTML5+CSS3网站设计基础教程》课程教学大纲 (课程英文名称) 课程编号:201601210011 学分:5学分 学时:76学时(其中:讲课学时:47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容,通过本课程的学习,学生能够了解网页web发展历史及其未来方向,熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果,学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路 课程设计理念:高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展,不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点,以就业为导向,培养学生具备职业岗位所需的职业能力,职业生涯发展所需的能力和终身学习的能力,实现一站式教学理念。 课程设计思路:基于工作过程开发课程内容,以行动为导向进行教学内容设计,以学生为主体,以案例 (项目)实训为手段,设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标,以案例(项目)任务实现为载体、理论学习与时间操作相结合”。 开发工具:DreamweaverCS6 第一章初识HTML5
第二章HTML5页面元素及属性
第四章CSS3选择器
e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用
课堂任务快速建站技术—模板的应用 课程名称:利用模板快速建站 课时数:4 教学目标: 知识与技能:了解模板的定义,模板的可编辑区域的定义。 过程与方法:掌握在网页中创建模板的三种方法; 掌握模板的可编辑区域的定义、建立和取消; 掌握模板的应用和取消; 掌握如何将模板从网页中分离出来; 掌握使用模板快速建站; 情感与价值观:培养学生主动思考问题的习惯和自主学习的能力。 教学重点: 在DreamWeaver8中创建模板和应用模板。 教学难点: 学会模板的可编辑区域的定义、建立和取消。 教法: 任务驱动法 学法: 记录关键步骤,积极动手练习。 课前准备: 第三章第三节素材和实例,视频教程:快速建站技术-模板的应用.WMV,快速建站技术-模板的应用(快速更新).WMV。 教学过程设计: (一)导入设计: 我们制作一个网站时,会发现许多网页的版面和元素都是相同的,在设计一个新页面时,我们还可以用复制原来做过页面来减轻工作量。但是如果一个网站有几十、上百张页面都基本相同,这时修改或更新网页的共同元素如网站标志时,会发现工作量实在太大!而使用Dreamweaver 软件中的模板功能来创建新网页,可以大大提高更新和修改的工作效率,网站的维护工作会轻松很多。本节主要内容如下。(二)新课讲解设计: (1)请学生带着以下问题阅读P110~115知识预读,问题如下: A、模板的定义? B、模板创建的三种方式?了解资源面板的使用方式。 C、学会模板的可编辑区域的定义、建立和取消; D、学会模板的应用和取消; E、学会如何将模板从网页中分离出来; (2)教师提问,请学生一一回答以上问题。期间对回答问题的同学要多多表扬,如“你真棒”。增强学生对教师的亲和力。 (3)教师在学生回答问题的同时,总结评价并补充相关要点。 (4)教师展示完成后的模板网站作品,与学生共同讨论分析该网站制作过程。 (5)教师演示建立模板,创建可编辑区域,应用模板等部分操作(详见教材任务一)。
网页制作基础知识教案 教学目标: 了解网页的组成元素及常用的网页制作工具。了解网页制作的一些基础知识,如网站和网页的区别、网页的类型、网页的构成元素等,然后在了解的基础上再通过练习来巩固。 教学重点难点: 在深刻了解概念的基础上把理论转化成实际的应用。 教学过程: 在制作网页之前,首先要了解一些关于web网页的基本知识,了解一下构成一个网站的基本元素等。 网页的基本元素 文本:基本组成部分 图像:更加直观准确地表达某些信息,并且可以起到美化网页,吸引读者注意力的作用 超链接:可以方便地转入其他网页进行浏览。 网页的其他元素:音乐表格表单 美化网页,丰富网页的内容,增强网页的功能。 网页的实质 网页相当于刊物中所发表的一篇篇文章,但与纸上的文章相比,它增加了多媒体信息和网上交互的功能。 网页的实质 = 表格+文本+图片+动画+声音+超级链接+…… ◆网站相当于发行到全世界的期刊。 ◆网站的实质 = 服务器上的文件夹 ◆主页相当于期刊的封面。 ◆主页的实质 = 打开网站的第一个网页 网页和网站的分类 从网页是否执行程序来分,可分为静态网页和动态网页这两种类型。 什么是静态网页、动态网页? ◆所谓静态网页,指的是网页从服务器传到客户端时,网页的内容是“固定 不变”的,也就是说,服务器只是把所存储的网页的内容原封不动直接传递给客户端浏览器,这种网页一般是标准的HTML代码。 静态网页一般以.htm或.html为后缀结尾的,俗称html文件。本课程就是制作静态网页的课程。 ◆所谓动态网页,它在由服务器传递给客户端的时候必须由服务器把它转换 成相应的HTML格式,而且会根据用户的要求和选择在在服务器端做出相应的改变和响应。 动态网页一般要用专门的脚本语言编写,如ASP、https://www.doczj.com/doc/1f10336726.html,、PHP、JSP等等
《版式设计》课程教学大纲 一、本课程教学的目的与原则 通过本课程教学,明确版式设计原理在设计活动中至关重要的作用。本课程注重设计前沿理论的研究和开发,是对学生艺术潜质、思维方式、创造能力等综合素质的全面开发和培养,帮助学生掌握科学的思维方法、搭建完备的设计理念构架、构建合理的设计知识体系,自觉地运用版式设计原理进行艺术设计。同时,本课程能有效地激发学生们的设计潜能,在艺术设计学习的过程中,不断地调整自己,从认识自我到超越自我,成为时代需求的艺术设计人才。 本课程将积极组织并参与设计实践以及各种设计、创意大赛,使理论与实践结合,通过严格的基础训练和设计实践,使学生建立和掌握版式设计的概念和方法,并自如运用于艺术设计活动的各个领域。 二、学习方法指导 1、以案例分析为主,通过对优秀版式设计作品剖析和模仿,引导学生建立版式设计的整体概念。 2、强调研究性学习的方法,确定专题性课题设计及组织讨论,从而引导学生在实战训练中熟练掌握设计原则。 三、本课程的重点与难点 本课程的重点是在案例教学中,培养学生整体把握版式设计中文字、图形、色彩三要素的构成关系,通过课题设计理解黑、白、灰整体分区概念;点、线、面在版式设计中的运用;各种设计原则及表现。 难点是把握具体设计内容与形式表现之间的关系;文字与文字、文字与图形之间整体与局部的构成关系。 四、本课程教学基本内容 第一章版式设计概念 [知识点提示] 版式设计概念 [重、难点提示] 建立对版式构成元素进行整体设计的概念 第一节版式设计概念导入 第二节传统中国书籍的版式 1、传统中国书籍的版面术语名称 2、传统中国书籍的版式设计特征
第二章版式设计原则 [知识点提示] 版式设计整体概念理解 [重、难点提示] 建立对版式整体设计的意识 第一节整体性原则 1、主次分明 2、分类编排 3、设计元素处理 第一节简洁性原则 第三章版式设计原理 [知识点提示] 设计原理 [重、难点提示] 黑、白、灰与点、线、面的整体布局关系,协调性与空间第一节分类 1、同类合并原则 2、确定中心内容 3、邻近原则 第二节分区 1、黑、白、灰关系 2、面的构成 3、空白空间 第三节分栏 1、网格构成 2、版式设计中的线 3、重复原则 阶段性小结与讲评 第四章文字的编排设计 [知识点提示] 文字与文字之间的编排 [重、难点提示] 标题、副标题与正文在编排中的关系、文字易读性 第一节字体 1、宋体 2、黑体 3、文艺复兴字体 4、巴洛克字体
《网页设计与制作》课程教案 一、课程定位 本课程是计算机应用技术专业的一门专业基础课程,该课程的学习能够提升他们对网页制作的兴趣,让他们学习网页制作的基本技能,为后继课程打下基础,同时扩展其就业面,为就业做好准备。 本课程的目的和任务是让学生学会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制作各种超级链接
网页制作的教学设计 一、教学目标 1 、知道站点、主页的概念,能在指定位置建立只有一个网页的站点; 2 、认识FRONTPAGE 的界面; 3 、掌握在主页中插入文字、图片、水平线; 4 、掌握页面文件与图片的保存。 二、教学重点 1 、能在指定位置建立只有一个网页的站点(难点) 2 、能在页面中插入文字、图片、水平线 3 、掌握页面文件与图片的保存(难点) 三、学情分析 学生已经学习了WORD 、POWERPOINT 与上网浏览信息,对计算机的基本操作(WORD 中文档的编辑,网页的浏览等)比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务,有能力的学生还可以完成提高篇的学习,以充分发挥学生的积极性与自主性。 四、教学方法 在教学中,一方面采用比较教学的方法,促进学生知识的迁移;另一方面,提供学生一个导学课件,让学生根据这个网络环境下的课件自己探索学习,以满足不同层次学生的需求。 五、教学过程设计 教师活动:1 、引入课题:(激发兴趣,活跃气氛) 同学们喜不喜欢上网?经常上新浪、西祠胡同等,有没有同学知道新浪、西祠胡同称做什么?(网站) 浏览新浪网站,浏览的第一个页面称为什么?(主页) 我们还可以浏览其它的页面,点击超链接浏览,当鼠标变成手指的形状时有超链接。 问题1 :网站是不是就是网页?用自己的语言描述一下网站的概念(网站包含多个网页,
通过超链接把不同的页面链接起来) 问题 2 :网页是不是就是主页?( 第一个页面称为主页, 网站设计者可以确定哪一个是主页, 主页的文件名一般为:index.htm, 主页也是网页) 设计网站一般必须经过两个步骤,首先是在计算机里做好,然后发布在internet 上,让所有的人访问浏览。 今天我们学习用Frontpage 建立站点,制作一个主页。 先来研究一下没有发布的网站, 打开教师做的网站 问:同学们看到了什么?(文件夹) 总结: 可以这样理解网站:在资源管理器里,网站表现为一个文件夹,里面存放的是所有与网站相关的文件。 打开主页,浏览页面,这是老师做的一个导学课件,将帮助大家完成学习任务。 请学生浏览教师课件,了解学习任务 2 、新建站点 FP 的启动 问:与word 比较,有什么不同? (增加了视图区,编辑区有三个窗口) 总结: 视图区:多种视图模式是为了方便网站的管理。制作网页时,必须在网页视图中编辑页面 普通窗口:鼠标在闪动,可编辑、修改页面,所见即所得的方式 预览窗口:浏览器中出现的效果,与PowerPoint 中的“放映幻灯片”类似。 Html 窗口:编写HTML (超文本标记语言,它是描述网页内容和外观的标准。) 打开导学软件,根据步骤,示范建立只有一个网页的站点,强调新站点的位置、路径的正确输入,站点的名称。
课程名称:第一章版式设计的概述 教学目的:(1)了解版式设计的目的 (2)理解版式设计的相关原则 (3)掌握版式设计的视觉流程 教学要求:理解黑、白、灰整体分区概念;点、线、面在版式设计中的运用;各种设计原则及表现;把握具体设计内容与形式表现之间的内在关系,熟练掌握文字与文字、文字与图形、整体与局部之间的构成关系。 教学重点:版式设计的视觉流程 教学难点:字体、行距、字距。 教学方法:理论讲授、图片分析并使学生展开对版式设计目的的讨论。 教学用具:幻灯片,黑板 教学课时: 4课时 参考书目:1、《版式设计原理》佐佐木刚土著,武湛译中国青年出版社 2007年版 2、《版式设计》贺鹏等著中国青年出版社 2012年9月第一版 教学过程: 一、首先介绍课程的性质,通过看一些设计图片来引申出版式设计的目的与 概念。 二、深入教学,请学生从自身经验出发谈谈对版式设计的认识,并思版式 设计的目的是什么。 三.在对版式设计的概念有一定了解的情况下,思考并总结版式设计的原则。课程作业:上网搜索2个优秀的和2个不好的版式设计,并给予解释 教学内容:
第一节版式设计的目的 版式设计是一门特殊而关键的课程,更大程度上它又是一门专业基础课,它为以后的招贴设计、包装设计、书籍装帧设计以及一切需要通过平面来表达的设计课程打下基础。这就决定了这门课程主要是关于版式设计的基本原理、设计法则和审美把握,它是一门认识课程而不是技法课程。通过这门课程的学习,一是要理解版式设计的基本原则,掌握版式的设计法则;二是要培养和提高学生的审美能力,完善学生的审美结构;三是要训练学生和思维能力,开拓学生的思维意识,培养学生的创新思维;四是要养成学生的动手习惯,培养学生的实用技能。这就是版式设计的教学目标。 版式设计随着时代的进步,它能体现出文化传统、审美观念和时代精神风貌等,被广泛地应用于广告、书刊、包装、装潢、展机、机构视觉形象和网页等传播领域。 1、有效提高版面的注意值 当纷繁复杂的视觉信息展现在眼前的时候,哪些信息更能让我们愉快地去接受呢?哪些版式更能吸引人们的注意呢?很显然,那些美感突出,对比强烈的画面更引人注目。现代版式设计早已不是单纯的技术编排,而是技术与艺术的高度统一。人们的视觉习惯不断改变,设计师的观念也不断更新,新的版式效果不断呈现。那些形式独特、美轮美奂、现达完善的画面让人们过目不忘,注意值当然得到大大的提高。 2、有利于信息的有效传递 版式设计本身并不是设计师的最终目的,它只是为了更好地传递信息的手段。凡是成功的版面,首先必须明确表达目的和主题思想,还要有上佳的创意策划和表现手法,做到主题鲜明、形象突出、美感强烈。在若干复杂纷乱的信息,无法让我理解,如果通过版式的精心设计,把各种元素根据特定内容进行组合排列,既可以使画面形式更加服从内容,提高信息的传达效果和效率,使版面更加风趣,富有内涵。 3、强化传达效果的持续留存 当今视觉传达设计大多都带有商业色彩,主要宣传的是企业及品牌形象。因此如何让企业形象得到很好的传播和留存是许多设计师强调的重点。因此说优秀的版式设计,能够激发人们的兴趣,使画面生动、有趣、幽默,这样能够深度刺激大脑皮层,保持信息的持续留存。
一、课程进度计划表 二、教案正文 第一章版式设计概念 1.教学目的:通过理论传授使学生了解版式设计是一种重要的视觉表达语言,是视觉传达设计专业重要的基础课程;掌握版式设计的基本概念及传统中国书的版式设计形式。 2.教学重、难点:(1)重点:版式设计概念的理解;(2)难点:传统中国书的版式。 3.教学方法、手段:教师讲授(√),启发式教学(√),课堂讨论(√),多媒体教学(√),当堂测验(√),提问式教学(√),实验(√)。 [课程导入] 当我们面对设计主题,有了一个好的设计创意时,接下来就是如何把这一创意表现出来。设计创意的表现元素不外乎图形(或图片)、标题字、正文和色彩,这些,统称为版式设计的四大元素。 可以说,任何具体的设计,最后都会落实到对这四大元素的编排上来。 作为设计专业的学生,每进入到一门新的课程环节,要习惯于提出以下几个问题: 这门课程的学习目的是什么? 这门课程将要解决什么问题? 这门课程的构成要素是什么? 这些要素有什么用? 需要怎样才能使它们结合起来达到设计目的? 请同学们带着问题进入我们的课程教学! 版式设计课程的教学目的是把版面上所需要的设计元素进行必要的编排组合,成为直观动人、简明易读、主次分明、概念清楚的美的构成,使其在传达信息的同时,也传达着设计者的艺术追求与文化理念;从而通过版式设计,给阅读者提供一个优美的阅读“空间”! 第一节版式设计概念 一、什么是版式设计 版式设计又称编排设计,是平面设计中的一个组成部分,为艺术设计专业学习过程中的重要环节。版式设计当然要调动各类视觉元素进行形式上的组合排列,但更重要的是:版式上新颖的创意和个性化的表现。
认识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的基本知识
网页制作教案 IMB standardization office【IMB 5AB- IMBK 08- IMB 2C】
课堂任务快速建站技术—模板的应用 课程名称:利用模板快速建站 课时数:4 教学目标: 知识与技能:了解模板的定义,模板的可编辑区域的定义。 过程与方法:掌握在网页中创建模板的三种方法; 掌握模板的可编辑区域的定义、建立和取消; 掌握模板的应用和取消; 掌握如何将模板从网页中分离出来; 掌握使用模板快速建站; 情感与价值观:培养学生主动思考问题的习惯和自主学习的能力。 教学重点: 在DreamWeaver8中创建模板和应用模板。 教学难点: 学会模板的可编辑区域的定义、建立和取消。 教法: 任务驱动法 学法: 记录关键步骤,积极动手练习。 课前准备: 第三章第三节素材和实例,视频教程:快速建站技术-模板的应用.WMV,快速建站技术-模板的应用(快速更新).WMV。 教学过程设计: (一)导入设计:
我们制作一个网站时,会发现许多网页的版面和元素都是相同的,在设计一个新页面时,我们还可以用复制原来做过页面来减轻工作量。但是如果一个网站有几十、上百张页面都基本相同,这时修改或更新网页的共同元素如网站标志时,会发现工作量实在太大!而使用Dreamweaver 软件中的模板功能来创建新网页,可以大大提高更新和修改的工作效率,网站的维护工作会轻松很多。本节主要内容如下。 (二)新课讲解设计: (1)请学生带着以下问题阅读P110~115知识预读,问题如下: A、模板的定义? B、模板创建的三种方式?了解资源面板的使用方式。 C、学会模板的可编辑区域的定义、建立和取消; D、学会模板的应用和取消; E、学会如何将模板从网页中分离出来; (2)教师提问,请学生一一回答以上问题。期间对回答问题的同学要多多表扬,如“你真棒”。增强学生对教师的亲和力。 (3)教师在学生回答问题的同时,总结评价并补充相关要点。 (4)教师展示完成后的模板网站作品,与学生共同讨论分析该网站制作过程。(5)教师演示建立模板,创建可编辑区域,应用模板等部分操作(详见教材任务一)。(6)请一位学生上台操作,其他学生完成相同操作。可以参考视频快速建站技术-模板的应用.wmv。教师巡视指导。 (7)教师总结评价学生完成情况。