网页设计教案

实操课程教案课程名称：网页设计授课班级：19中级广告设计班授课教师：

教案首页授课日期2020.11.9-11.10计划课时8授课班级19中级广告设计班审批签字课题第一章网页设计概述教学目的重点讲授网站，网页涉及的概念；了解网页设计涉及的相关概念；了解网页设计的语言HTML；掌握学习网页设计的某一种工具；理解网站和网页的关系。教学内容本课程是非计算机专业的专业选修课。通过该课程的学习，引导学生了解网页、网站、主页和WWW服务器的基本概念，熟悉建立网站以及发布网站的步骤和过程；掌握使用可视化网页制作工具Dreamweaver建立网站、制作网页的方法；能够收集制作网页的多媒体素材，熟悉基本的图像处理和动画制作技术；掌握使用HTML语言的基本知识等。重点理解网站和网页的关系；难点网页设计工具软件Dreamweaver和Photoshop的使用及应用教学方法讲授法为主教具电脑参考教材基本教材：《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社参考资料：《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社《网页制作实用教程》张淑清主编.人民邮电出版社．《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社备注教学过程第1页组织教学1、检查各机位表的就座情况，考勤并登记；2、及时给电脑有故障的个别学生调整机位，做好学习准备。3、考勤二、新课题引入1.网络的概念Internet概述Internet是相互连接的网络集合。网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何种方法获得所需的信息。WWWWWW(WorldWideWeb)简称为万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问internet上的服务器端，迅速地获得所需的信息。域名与IP地址在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。IP地址是由32位的二进制数值构成，分成4组，转化为十进制用点分隔，比如：1。域名系统是一个分层的树状结构组织。域名的书写格式为：叶节点名.二级域名.顶级域名2．网站与网页的概念构建WWW的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。3．相关知识网页制作工具网页编辑工具网页编辑工具主要分为标记型和所见即所得型。所见即所得型的编辑软件主要有：微软的FrontPage和Macromedia公司推出的Dreamweaver。图形和图像处理工具目前常用的图形和图像处理工具主要是Adobe公司出品的著名的图形图像处理软件：Photoshop和Macromedia公司推出的Fireworks。动画制作工具目前常用的是Macromedia公司推出的Flash。HTML语言HTML语法结构HTML文件的所有控制语句称为标签，标签在一对尖括号之间，格式如下：<标签>HTML语言元素</标签>常见的HTML标签见讲义内容4.网页设计师必备的专业素质见讲义内容四、课堂作业布置，当场讨论写作（1）网页与网站有何不同？请举例说明。（2）网页构成的基本元素是什么？（3）说出自己熟悉的3个网页，并试分析它的归类。五、小结：通过对网站网页设计中涉及到的基本概念解释，帮助学生理解掌握网页设计的要求，区别网站与网页的关系，增强学生网页制作的素质培养。教案首页授课日期2020.11.13、11.16计划课时6学时授课班级19中级广告设计班审批签字课题第二章网页赏析教学目的初步了解网页赏析要求；理解网页赏析的理论要求；掌握网页突破性设计的要素；分清各类网站的设计要求和框架；理解实例分析过程。教学内容本课程是非计算机专业的专业选修课。通过该课程的学习，引导学生了解网页、网站、主页和WWW服务器的基本概念，熟悉建立网站以及发布网站的步骤和过程；掌握使用可视化网页制作工具Dreamweaver建立网站、制作网页的方法；能够收集制作网页的多媒体素材，熟悉基本的图像处理和动画制作技术；掌握使用HTML语言的基本知识等。重点网页的布局结构；网页的色彩搭配。难点如何使学生对网页设计感兴趣。教学方法讲授法为主教具电脑参考教材基本教材：《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社参考资料：《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社《网页制作实用教程》张淑清主编.人民邮电出版社．《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社备注教学过程第1页一、组织教学1、检查各机位表的就座情况，考勤并登记；2、及时给电脑有故障的个别学生调整机位，做好学习准备。3、考勤二、新课题引入网页设计与网站主题网页设计与网站主题之间的关系归纳起来有三点，第一，设计应满足主题的要求，应该为主题服务；第二，设计使艺术和技术交融，应该是艺术和技术的完美结合。就是说，在保证“美”的前提下，不丧失网站的“功能”；第三，无论是“美”，还是“功能”，都是为了更好地表达网站的主题思想。网页设计的优秀与否，取决于设计师对主题的理解与掌握程度，好的页面设计肯定是服从于网站主题，鲜明地突出网站的诉求主题。要使网页从形式上获得良好的诱导力，可以通过对网页的空间层次、主从关系、视觉秩序以及彼此之间的逻辑性来把握运用。各类网站的设计总体框架（1）门户类网站（2）产品类网站（3）娱乐类网站（4）游戏类网站（5）时尚类网站（6）音乐类网站（7）杂志类网站（8）传记类网站（9）个人类网站网页颜色的使用风格色彩是自然美、生活美、艺术美的重要组成部分。它代表着情感（绿色代表生命，红色代表热情，白色代表纯洁，蓝色代表深邃），代表着生活。没有色彩的世界是死寂而平淡的。在主题明确的前提下，网页可以用丰富的色彩来烘托主题，让浏览者耳目一新的感觉。给人清新，如坐春风，吃人生果，让人感觉身上三万六千个毛孔都渗透着激情。但多变的色彩不要干扰了浏览者的易读，不可以浓妆艳抹，脱离主题。网页赏析举例说明各个网站的特点。（1）北京2008奥运会（2）百度搜索（3）HAO123网站（4）Pixar动画工作室（5）故宫博物院（6）中国黑客联盟（7）柯达相机（8）百威啤酒（9）Rabbit游戏三、简单练习根据老师提供的素材资料，运用总结归纳的设计思路步骤，学生设计板式练习，目的是使学生熟悉设计思路、掌握设计要领及方法。要求学生将遇到难点，问题记录下来，在教师演示作业时候认真听看，解决问题。四、作业布置，学生讨论回答1.怎样保证网页界面设计主题的鲜明性？2.网页界面设计使用色彩的作用是什么？色彩主要用来完成哪些工作？3.打开互联网，选择一个网站，根据所学知识分析、评测之。五、小结在实际应用中网页应当在满足完成功能的前提下才能讲究艺术，如果一帧页面无法完成其基本的表现或操作功能，则这样的页面再“美”也是无用的，因为网页的艺术性、欣赏性是服务于功能的。了解了网页界面的设计技术和方法，并将其融入自己的思想，消化理解，构成自己认识世界、认识设计的较完整的思维理念，才能有根有据、有凭有证，由里及表、由表及里地评测、鉴赏和判断设计作品的优劣。教案首页授课日期2020.11.17、11.20计划课时6学时授课班级19中级广告设计班审批签字课题第三章网页规划与布局教学目的了解网页的组织结构，掌握网页内容上的组织方法；熟悉网页设计的流程和注意事项；熟悉网站设计，掌握网站与网页的区别。教学内容本课程是非计算机专业的专业选修课。通过该课程的学习，引导学生了解网页、网站、主页和WWW服务器的基本概念，熟悉建立网站以及发布网站的步骤和过程；掌握使用可视化网页制作工具Dreamweaver建立网站、制作网页的方法；能够收集制作网页的多媒体素材，熟悉基本的图像处理和动画制作技术；掌握使用HTML语言的基本知识等。重点网页规划原则，网站规划及其步骤；难点网页规划和合理布局。教学方法讲授法为主教具电脑参考教材基本教材：《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社参考资料：《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社《网页制作实用教程》张淑清主编.人民邮电出版社．《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社备注教学过程第1页一、组织教学1、检查各机位表的就座情况，考勤并登记；2、及时给电脑有故障的个别学生调整机位，做好学习准备。3、考勤二、新课题引入3.1网页的组织结构网页的内容和组织取决于网站的主题和定位。确定了网站的定位和模式，就可以对网页的内容进行组织、规划和布局。3.1.1首页的结构 首页一般包含主题、徽标、企业精神、经营理念、旗帜广告、首页链接、最新报道、联系方式、招贤纳士和栏目简介等。3.1.2一般页面的结构一般页面也称子页面，其结构往往是依据要表现的内容而定，形式比较单一。页面的主题突出，取向性强，主要用于描述同一类事情。3.1.3网站页面的组织结构一般来说，设计网站常常采用顺序结构、层次结构、网状结构或复合结构来组织页面。3.2网页内容上的组织3.2.1综述建设网站的第一步是收集资料，分门别类，将这些素材合理地分配到由超级连接组织的不同的网页中，使得自己的网页能够吸引众多的浏览者，网页的内容的有效组织是必不可少的。3.2.2组织网页的方法1.突出个性；2.具有可读性；3.完整性强；4.布局合理；5.重要信息放置在首页。3.3网页设计流程3.3.2网页目标和风格网站包含着众多内容各异，错综复杂的网页，这些网页的内容组织，材料收集和处理工作通常可以从两个方面入手。一是根据所需发布的信息确定主题，每个主题由专人负责收集相关资料和内容。二是组织、精选一些能突出本网页特色的内容，烘托和突出主题，使本页面与网站其他网页有明显的不同。3.3.3内容组织网站内容丰富，信息含量大，应该运用一定的方式将其条理化，同时在一定程度上加以归纳后重复利用，使网页较为整齐，脉络清楚，读起来也有重点。3.3.4页面的组织原则将页面含盖内容的整体布局的需要进行分组归纳，进行内在联系的组织排列，反复推敲标题图形与整体版面的关系，创造秩序使版面各元素成为丰富多彩而简洁统一整体。3.3.5网页制作见讲义内容3.3.6测试当所有网站页面制作完成之后，我们需要对每一帧页面进行审查和测试，测试内容主要包括功能性测试和完整性测试两个方面。3.3.7发布、推广整个网站设计、测试完成以后，就可以去寻找ISP(InternetServiceProvider，互联网服务提供商)，将网站的所有内容上载到互联网上。载后的网站往往希望大量的浏览者访问，提高自身的知名度，提升网站所有者的形象。我们可以尝试使用推广的方法。3.3.8反馈、评测网页设计的优劣是通过浏览者的认可而得出的，我们可以使用计数器、计时器、留言板、调查表以及有奖问答等形式收集数据，分析网站或某个网页被访问的次数或浏览者停留的时间，评测网页的设计或内容的新颖程度。三、作业布置（首页一般包含哪些内容？企业网站的首页主要应该突出哪些方面？网站的页面之间通常采用什么样的组织结构？网状结构有何优、缺点？用什么方法解决。四、小结：设计出达到用户目的的网页，吸引尽可能多的人参观访问是一个值得研究的课题材。一定要注重信息的调整、更新和修改，使网页内容始终处于一个不断发展，日趋完善的动态环境中。能够吸引大量的浏览者访问网站只是成功的一半，若以新奇的版式、独特的内容和服务使浏览者再度来访，或向其他人介绍网址，宣传网站的内容，才可能是真正的成功。教案首页授课日期2020.11.23、11.24计划课时8学时授课班级19中级广告设计班审批签字课题第四章网页设计创意教学目的通过对创意思维及创意手法的讲解，辅以对优秀网页作品的分析，启发学生全面的创新思维，进而从多角度的思维中独树一帜，培养学生的个性化意识。让学生对优秀设计的创意进行解读和阐释，并分析其创新之处，鼓励学生敢于发掘新意，提出自己独到的见解。教学内容通过对创意思维及创意手法的讲解，辅以对优秀网页作品的分析，启发学生全面的创新思维，进而从多角度的思维中独树一帜，培养学生的个性化意识。让学生对优秀设计的创意进行解读和阐释，并分析其创新之处，鼓励学生敢于发掘新意，提出自己独到的见解。重点启发学生全面的创新思维，培养学生的个性化意识。难点如何掌握不同性质网页的创意设计技巧。教学方法讲授法为主教具电脑参考教材基本教材：《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社参考资料：《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社《网页制作实用教程》张淑清主编.人民邮电出版社．《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社备注教学过程第1页一、组织教学 （约10分钟）1、检查各机位表的就座情况，考勤并登记；2、及时给电脑有故障的个别学生调整机位，做好学习准备。3、考勤二、新课题引入（约40分钟）4.1网页创意设计中的基本要素4.1.1网页中的文字字体的设计方法：改变文字大小、比例改变字体形态文字的三维效果色彩的改变机理及质地置换及同构文字的组合方法与形式字体的大小组合汉字与拉丁字母的组合汉字与具象形体的组合文字编排的形式4.1.2网页中的图像图像在网页中所占比例的大小直接影响整个页面的视觉效果和情感表达。面积大的图像在画面中占的份量重，表达情感直接。容易吸引浏览者的注意。面积小的图像通常在页面中作点缀和呼应，表达情感含蓄，给人精巧细致的感觉。4.1.3网页设计中色彩的属性及其应用设计精良的网站总有其色调构成的总体倾向,以一种颜色或几种临近颜色为主导,使全呈现在某种和谐、统一的色彩倾向，如同人穿衣服。要想恰如其分的表现网页中的内容，在竞争对手脱颖而出的，信息空间的构造也需要恰如其分的包装和表达。4.2网页创意设计的程序4.2.1前期策划明确设计任务调查研究与分析创意开发修改及定案4.2.2后期更新及维护网站中随着新信息的加入,老信息的删除,要不断的对网页进行更新并维护,使其能始终正常运行。课堂实操，老师巡查指导（290分钟）四、作业布置（约10分钟）1.简述图形图象的创意技巧。2简述色彩的性格对突出网页设计主题的作用。3.什么是创新性思维？五、小结（约10分钟）通过对创意方法和创意步骤的了解，使学生掌握创意元素的搭配及创意的技巧。从而增强学生欣赏美和创造美的能力，创作出优秀的、具有吸引力的作品。教案首页授课日期2020.11.27、11.30计划课时6学时授课班级19中级广告设计班审批签字课题第五章网页编程语言教学目的5.1.1HTML的基本结构文本标记语言结构简单，语法较松散，易学易用。它是一种文字处理语言，而不是“程序”语言。超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。序（HTML的版本声明）是超文本标记语言的附加标记，放在HTML文档的第一行。教学内容HTML是标准通用标记语言(StandardGeneralizedMarkupLanguage，SGML)的一个子集，是标记的集合。一般标记是由一个起始标记(OpeningTag)和一个结束标记(EndingTag)所组成，其语法为：<x>受控文字</x>重点启发学生全面的创新思维，培养学生的个性化意识。难点如何掌握不同性质网页的创意设计技巧。教学方法讲授法为主教具电脑参考教材基本教材：《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社参考资料：《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社《网页制作实用教程》张淑清主编.人民邮电出版社．《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社备注教学过程第1页一、组织教学（约10分钟）1、检查各机位表的就座情况，考勤并登记；2、及时给电脑有故障的个别学生调整机位，做好学习准备。3、考勤二、新课题引入（约40分钟）HTML是标准通用标记语言(StandardGeneralizedMarkupLanguage，SGML)的一个子集，是标记的集合。一般标记是由一个起始标记(OpeningTag)和一个结束标记(EndingTag)所组成，其语法为：<x>受控文字</x>

其中，x代表标记名称。<x>和</x>就如同一组开关：起始标记<x>为开启(ON)的某种功能，而结束标记</x>(通常为起始标记加上一个斜线/)为关(OFF)功能，受控制的文字信息便放在两标记之间。例如：<i>这是斜体字</i>。标记之中还可以附加一些属性(Attribute)，用来完成某些特殊效果或功能。例如：<xa1="v1",a2="v2",...,an="vn">受控文字</x>其中，a1,a2,...,an为属性名称，而v1,v2,...,vn则是其所对应的属性值标记(Tags)和属性(Attributes)构建了HTML的语法。浏览器只要读到HTML的标记和属性，就会将其解释成网页或网页的某个组成部分，5.1.3HTML语言的常用标记具体内容见讲义三、课堂实操，老师巡查指导（约200分钟）四、作业布置（约10分钟）1.超文本标记语言HTML大约是在那一年发布的？2.HTML语言的文件结构可分为那三个部分？五、小结（约10分钟）超文本标记语言HTML是学习网页制作的基础，但这也是艺术专业学生感觉最吃力的部分。教师必须帮助学生转变形象思维习惯，逐步熟悉、理解HTML语法。教案首页授课日期2020.12.1、12.4计划课时6学时授课班级19中级广告设计班审批签字课题实验项目一用HTML制作简单网页教学目的掌握HTML文档的基本结构、标记和标记属性的概念及作用；学会使用文本编辑软件建立和编辑HTML文档的方法；能够使用标记在网页中插入和编辑基本的网页元素；能够利用表格标记建立和编辑表格，学会在表格中使用其他网页元素。教学内容HTML是标准通用标记语言(StandardGeneralizedMarkupLanguage，SGML)的一个子集，是标记的集合。一般标记是由一个起始标记(OpeningTag)和一个结束标记(EndingTag)所组成，其语法为：<x>受控文字</x>重点启发学生全面的创新思维，培养学生的个性化意识。难点如何掌握不同性质网页的创意设计技巧。教学方法讲授法为主教具电脑参考教材基本教材：《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社参考资料：《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社《网页制作实用教程》张淑清主编.人民邮电出版社．《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社备注教学过程第1页一、组织教学（约10分钟）1、检查各机位表的就座情况，考勤并登记；2、及时给电脑有故障的个别学生调整机位，做好学习准备。3、考勤二、新课题引入（约40分钟）实验项目一用HTML制作简单网页【学习目的】重点讲解了文本的修饰、插入图像、超链接的建立这三部分，通过学习，学生应掌握如何向网页中添加文本、插入图像并建立超链接等内容。一、案例导入：西部旅游网该网站实例包含了若干个网页，在网页中添加文本、插入图像、建立超链接，涉及到的知识点有以下几点：页面属性的设置及文本的修饰；插入图像，插入图像对象实现特效；多个网页之间建立超链接。二、页面属性的设置选择“修改”菜单｜“页面属性”命令，弹出“页面属性”对话框。设置相应的参数。三、文本的修饰１、输入文本2、插入水平线3、文本特殊格式：上标和下标4、文本属性的设置5、段落格式的设置6、列表格式的设置7、滚动文本四、设置超级链接1、URL地址2、超链接的分类页面链接锚记链接空链接电子邮件链接3、选择链接目标五、使用图像图像是网页中非常重要的元素，网页中添加精致、美观的图像，会使网页变得丰富多彩。在插入图像时，首先要考虑图像在页面中的整体效果，其次应综合考虑图像的质量和下载速度。目前网页中支持的图像格式有以下三种：Gif：索引颜色格式，最多支持256色，为无损压缩，有透明处理的功能，支持动画效果。Jpg：联合图像专家组，有较高的压缩比，属有损压缩，要选择合适的压缩品质，支持真色彩。Png：可移植网络图形，是专门针对Web开发的无损压缩图像，支持真色彩和透明处理。1、插入图像2、设置图像属性3、制作图像映射三、课堂实操，老师巡查指导（约200分钟）四、作业布置（约10分钟）1.运用HTML语言制作一个简单的静态网页。五、小结（约10分钟）重点讲解了文本的修饰、插入图像、超链接的建立这三部分，通过学习，学生应掌握如何向网页中添加文本、插入图像并建立超链接等内容。教案首页授课日期2020.12.7、12.8计划课时8学时授课班级19中级广告设计班审批签字课题第五章网页编程语言5.2CSS层叠样式表教学目的了解CSS的定义、概念和作用；理解CSS样式表的作用和意义；掌握CSS样式表的结构；掌握在网页中添加CSS的方法。掌握三种添加样式信息的方法，会使用CSS设置网页格式和列表的格式。教学内容HTML是标准通用标记语言(StandardGeneralizedMarkupLanguage，SGML)的一个子集，是标记的集合。一般标记是由一个起始标记(OpeningTag)和一个结束标记(EndingTag)所组成，其语法为：<x>受控文字</x>重点启发学生全面的创新思维，培养学生的个性化意识。难点如何掌握不同性质网页的创意设计技巧。教学方法讲授法为主教具电脑参考教材基本教材：《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社参考资料：《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社《网页制作实用教程》张淑清主编.人民邮电出版社．《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社备注教学过程第1页一、组织教学（约10分钟）1、检查各机位表的就座情况，考勤并登记；2、及时给电脑有故障的个别学生调整机位，做好学习准备。3、考勤二、新课题引入（约40分钟）5.2CSS层叠样式表5.2.1层叠样式表简介CSS样式表是由一系列样式选择器和CSS属性组成，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，增强了网页的格式化功能。使用CSS样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，简化了格式化网页的工作。利用CSS样式还可以代替表格进行网页布局，这是目前较为流行页面排版方式。5.2.2创建层叠样式表选择器类型有以下三种：(1)类(2)标签(3)高级定义的位置有以下三种情况：选择“仅为该文档”，此时CSS样式的代码会嵌套在网页<head>和</head>标签中。选择“新建样式表文件”，则弹出“保存样式表文件为”对话框，选择样式文件的存储路径和文件名，单击“保存”按钮，将CSS样式代码单独存放在一个CSS文件。选择“已有的某CSS文件”，将新建的CSS规则写入已有的CSS文件中。5.2.3层叠样式表的结构样式规则：定义元素内文本的样式。例如，可以创建一个样式规则，指定所有<H2>标题的颜色都为暗绿色，还可以对选定的网页部分应用样式规则。例如，可以指定网页的某一特定段落显示为粗体。样式规则示例如下：H2{color:limegreen;}规则的第一部分称为选择器。每个选择器都有属性以及对应的属性值。上面的示例中H2是规则选择器。大括号内的部分称为声明。声明由两部分组成：冒号前面的部分是属性，后面的部分是该属性的值。例如：H1{color:blue;}其中，H1为选择器，color:blue为声明。在该声明中，color是属性，blue是属性值。5.2.4层叠样式表应用样式表可用于：覆盖浏览器的默认设置：每个浏览器都有其独特的网页显示方式。早先，开发人员无法控制浏览器中网页的显示方式。通过使用样式表，用户可以使用自己的设置覆盖浏览器的常规设置。页面布局：使用样式表可以指定显示的字体、修改文本的颜色等，而无需更改网页结构。这意味着设计人员可以将网页的视觉设计从网页的逻辑设计中分离出来，对二者分别进行设计。多个文档链接到一个样式表上：可以将样式表存成一个单独的文档，然后将其链接到多个网页中，这样会使这些网页具有相同的外观，而且，对样式表进行修改时，所有与该样式表链接的文档都会体现所做的修改。三、课堂实操，老师巡查指导（约290分钟）四、作业布置（约10分钟）1．试述三种创建CSS样式表的方法。2．HTML在使用独立的样式表文件时，可以采用哪些方法？试举例说明。3.在组成CSS样式表的规则中有哪些选择器？各有什么区别？五、小结（约10分钟）这一部分包含很多CSS样式表定义规则的内容，依据各种应用范例来讲解效果更直观。CSS样式表是本课程十分重要的一个部分，必须让学生掌握。教案首页授课日期2020.12.11、12.14计划课时6学时授课班级19中级广告设计班审批签字课题实验项目二CSS样式表的应用教学目的进一步了解CSS样式的概念与作用；了解CSS样式的格式规则及样式类型；掌握CSS样式设置与管理方法；掌握在网页设计与维护中应用CSS样式的方法。教学内容HTML是标准通用标记语言(StandardGeneralizedMarkupLanguage，SGML)的一个子集，是标记的集合。一般标记是由一个起始标记(OpeningTag)和一个结束标记(EndingTag)所组成，其语法为：<x>受控文字</x>重点启发学生全面的创新思维，培养学生的个性化意识。难点如何掌握不同性质网页的创意设计技巧。教学方法讲授法为主教具电脑参考教材基本教材：《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社参考资料：《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社《网页制作实用教程》张淑清主编.人民邮电出版社．《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社备注教学过程第1页一、组织教学（约10分钟）1、检查各机位表的就座情况，考勤并登记；2、及时给电脑有故障的个别学生调整机位，做好学习准备。3、考勤二、新课题引入（约40分钟）实验项目二CSS样式表的应用背景知识根据本章所学的CSS样式表的知识，再综合前面所学的创建站点及编辑网页的知识，制作精美的网页及应用CSS扩展功能。实验准备工作:素材、网页元素及网页样图，发送到学生的主机中。实训要求利用CSS样式表制作精美的网页。要求：根据给定的素材，首先设置页面属性其次定义特定Id的DIV标签的CSS样式，然后插入DIV标签，在DIV中插入内容，最后通过定义类，设置图像CSS样式。在网页中添加CSS扩展效果：滤镜要求：制作：投影字体、发光字体、图像的透明效果、图像的波浪效果等。课时安排：2课时实训指导:具体步骤见讲义三、课堂实操，老师巡查指导（约200分钟）四、作业布置（约10分钟）课后完善实验项目二的网页制作。五、小结（约10分钟）这一部分包含很多CSS样式表定义规则的内容，依据各种应用范例来讲解效果更直观。CSS样式表是本课程十分重要的一个部分，必须让学生掌握。教案首页授课日期2020.12.15、12.18计划课时6学时授课班级19中级广告设计班审批签字课题第五章网页编程语言复习课教学目的回顾第五章的重要知识点；要求学生结合两次实验课讲述自己的体会。教学内容HTML是标准通用标记语言(StandardGeneralizedMarkupLanguage，SGML)的一个子集，是标记的集合。一般标记是由一个起始标记(OpeningTag)和一个结束标记(EndingTag)所组成，其语法为：<x>受控文字</x>重点启发学生全面的创新思维，培养学生的个性化意识。难点如何掌握不同性质网页的创意设计技巧。教学方法讲授法为主教具电脑参考教材基本教材：《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社参考资料：《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社《网页制作实用教程》张淑清主编.人民邮电出版社．《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社备注教学过程第1页一、组织教学（约10分钟）1、检查各机位表的就座情况，考勤并登记；2、及时给电脑有故障的个别学生调整机位，做好学习准备。3、考勤二、新课题引入（约40分钟）复习课内容：学生讲述学习本周的心得体会。教师讲评学生实验项目一、实验项目二作品中的主要问题。教师回顾本章的主要内容：HTML的基本结构HTML语言的语法HTML语言的常用标记创建层叠样式表层叠样式表的结构层叠样式表应用三、课堂实操，老师巡查指导（约200分钟）四、作业布置（约10分钟）课后完善实验项目二的网页制作。五、小结（约10分钟）这本章内容丰富并且十分重要，有必要安排复习课帮助学生回顾、消化所学知识。教案首页授课日期2020.12.21、12.22计划课时8学时授课班级19中级广告设计班审批签字课题第六章网页制作工具6.1.1Dreamweaver介绍6.1.2网页属性和页面排版教学目的建议教师采用任务驱动方法，利用多媒体直接在工具软件中进行可视化操作。应先给出实例，并给学生演示运行后的结果，然后在工具软件中逐步实现。。教学内容HTML是标准通用标记语言(StandardGeneralizedMarkupLanguage，SGML)的一个子集，是标记的集合。一般标记是由一个起始标记(OpeningTag)和一个结束标记(EndingTag)所组成，其语法为：<x>受控文字</x>重点启发学生全面的创新思维，培养学生的个性化意识。难点如何掌握不同性质网页的创意设计技巧。教学方法讲授法为主教具电脑参考教材基本教材：《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社参考资料：《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社《网页制作实用教程》张淑清主编.人民邮电出版社．《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社备注教学过程第1页一、组织教学（约10分钟）1、检查各机位表的就座情况，考勤并登记；2、及时给电脑有故障的个别学生调整机位，做好学习准备。3、考勤二、新课题引入（约40分钟）6.1Dreamweaver6.1.1Dreamweaver介绍Dreamweaver是Macromedia公司开发的，是制作网页的工具,功能强大，内容复杂。一、DreamweaverCS3版本的工作界面程序的主界面大致可分为下面几个区域：1、菜单栏、2、“文档”工具栏、3、“插入”栏、4、“标准”栏、5、编辑区、6、状态栏和各个面板。菜单栏：提供了全部的Dreamweaver命令。插入栏：在插入栏中包含了多个选项卡，每个选项卡中都提供了可插入到文件中的对象。文档工具栏：代码视图、代码与设计视图、设计视图、动态数据库视图标题：输入标题即可。在浏览器中预览：在浏览器中预览页面。F12标准栏：包含新建、打开、保存、全部保存等。编辑区：在此区域内可对网页进行可视化编辑。“属性”检查器：根据选定的对象不同，属性检查器中将自动切换相应的选项，供用户对其进行设置状态栏：1、显示窗口大小2、显示此网页的下载时间。(1)创建网页后，首选需要设置页面的属性：“修改/页面属性”或“右击编辑区－页面属性”。“标题”栏设置的是页面标题。“背景图像”：为网页添加背景图片。“背景”：背景颜色，默认为白色。“文本”：非链接文字的颜色。“链接”：链接文字的颜色。“访问过的链接”：已经被单击过的链接文字的颜色。“活动链接”：正在被单击的链接文字的颜色。“左边界”和“右边界”：设置左部及顶部的页边距。“边界宽度”：即内容与左右边框的距离。“边界高度”：即内容与上下边框的距离。“打开”和“保存”文件。在Dreamweaver中，可以同时对多个文档同时编辑。（2）使用文本：1、输入和修改文本：属性面板。2、输入连续空格：Control+Shift+空格键3、输入特殊字符：在插入栏中，选择字符。4、查找替换文字：“编辑－查找和替换”5、段落的对齐：缩进和反缩进6、使用列表：有序列表和无序列表二、站点的定义由教师操作演示如何定义站点。三、创建页面（约290分钟）由教师操作演示如何创建页面，学生实操四、作业布置（约10分钟）1、复习本节课内容五、小结（约10分钟）本章包含了Dreamweaver软件的大部分操作指令，要求学生课后多复习多练习。教案首页授课日期2020.12.25、12.28计划课时6学时授课班级19中级广告设计班审批签字课题第六章网页制作工具6.1.3~6.1.7教学目的建议教师采用任务驱动方法，利用多媒体直接在工具软件中进行可视化操作。应先给出实例，并给学生演示运行后的结果，然后在工具软件中逐步实现。。教学内容HTML是标准通用标记语言(StandardGeneralizedMarkupLanguage，SGML)的一个子集，是标记的集合。一般标记是由一个起始标记(OpeningTag)和一个结束标记(EndingTag)所组成，其语法为：<x>受控文字</x>重点启发学生全面的创新思维，培养学生的个性化意识。难点如何掌握不同性质网页的创意设计技巧。教学方法讲授法为主教具电脑参考教材基本教材：《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社参考资料：《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社《网页制作实用教程》张淑清主编.人民邮电出版社．《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社备注教学过程第1页一、组织教学（约10分钟）1、检查各机位表的就座情况，考勤并登记；2、及时给电脑有故障的个别学生调整机位，做好学习准备。3、考勤二、新课题引入（约40分钟）6.1Dreamweaver6.1.3Dreamweaver表格基础设置表格包含以下三个基本元素：行、列、单元格表格的格式控制能力使设计者可以使用表格来构造网页的框架。先使用较大的表格对网页的版面进行大致的控制，再使用嵌套的表格对细节进行刻画。（1）插入表格的方法：“插入栏”－“表格”单元格填充：单元格的边框和其中内容之间的空白，它的默认值为“1”个像素。单元格间距：单元格与单元格的距离，默认值为“2”个像素。（2）选择表格元素：选择表格选择行选择列选择单元格（3）处理表格的行和列：略（4）处理单元格：略（5）设置边框和背景：作一个立体表格：制作只有1个像素的表格：细线表格的制作：制作圆角表格：用fireworks四张圆角图片。格式化表格：“命令－格式化表格”（6）排序表格：“命令－排序表格”6.1.4Dreamweaver头元素的设置和表单的工作原理一、用头元素设置网页信息：Dreamweaver定制网页过渡功能：

网页过渡是指当浏览者进入或离开网页时，页面呈现的不同的刷新效果，比如卷动、百叶窗等。这样你的网页看起来会更具有动感，不过也要注意适可而止，否则太花哨的变化也容易引起浏览者的反感。插入关键字：为了使已经上传到服务器上的网站能够在搜索软件中搜索出来，以提高网站的知名度，如：本网站的标题输入一个关键字检索时，在搜索引擎上不仅可以查到很多网站，还可以查到很多网页，大部分搜索引擎在查询网页时都是根据头元素里的关键字来进行搜索的，显示的内容是在头元素中的说明。二、使用表单：可以用表单来收集一些必需的个人资料，在电子商场购物时，收集每个网上顾客的关键词然后提交到服务器上。从表单工作过程中可以看到，表单的开发可以分成两个部分，一是具体在网页上制作必需的表单项目，这一部分称为前端，主要是在Dreamwaver进行，另一部分是编制如何处理这些信息的程序，这一部分称为后端，主要是用具体的解释或编译程序制作(Perl,ASP,C,Jave)6.1.5Dreamweaver表单元素一个表单可以分为两部分：一是Form标签，一是表单元素。基中Form标签主要表示提交的方式以提交给的程序，表单元素供浏览者填写各种表单内容。如果没有Form标签，在测试表单时显示都是正确的，但是绝对不可完成提交工作。由教师演示讲解以下操作：插入一个空表单删除表单插入/设置文本域插入/设置复选框插入/设置单选按钮插入/设置单选按钮组插入/设置列表/菜单插入/设置按钮插入/设置图形按钮6.1.6插入多媒体元件及怎样制作相册在“插入栏”的“多媒体”中选择“插件”。由教师演示讲解以下操作：在网页中加入音频加入背景音乐"插入flash动画插入flash文本插入flash按钮插入fireworksHTML插入日期：插入－日期创建网页相册6.1.7Dreamweaver中的CSS窗口上方有“应用样式”和“编辑样式”两个选项，如果当前选中应用样式，当点击某个样式的时候，该样式将应用到当前页面选中的部分。如果当前选中“编辑样式”，当点击某个样式的时候就会编辑该样式模式。介绍窗口下方4个按钮：第一个按钮为附加样式表，加入一个外部样式表。第二个按钮为新建样式表，一般通过这个按钮来创建新的CSS样式表。第三个按钮为编辑样式表，点击后会弹出编辑样式表对话框，显示了所有已存在的内部和外部样式表，可以在这个对话框里新建、编辑、删除样式。第四个按钮：删除样式。详细介绍CSS规则定义对话框的8张选项卡：类型；背景；区块；方框；边框；列表；定位；扩展。三、由教师操作演示如何创建页面，学生实操（约200分钟）四、作业布置（约10分钟）1、复习本节课内容五、小结（约10分钟）本章包含了Dreamweaver软件的大部分操作指令，要求学生课后多复习多练习。教案首页授课日期2020.12.28、12.29计划课时8学时授课班级19中级广告设计班审批签字课题第六章网页制作工具6.1.8~6.2.3教学目的建议教师采用任务驱动方法，利用多媒体直接在工具软件中进行可视化操作。应先给出实例，并给学生演示运行后的结果，然后在工具软件中逐步实现。。教学内容HTML是标准通用标记语言(StandardGeneralizedMarkupLanguage，SGML)的一个子集，是标记的集合。一般标记是由一个起始标记(OpeningTag)和一个结束标记(EndingTag)所组成，其语法为：<x>受控文字</x>重点启发学生全面的创新思维，培养学生的个性化意识。难点如何掌握不同性质网页的创意设计技巧。教学方法讲授法为主教具电脑参考教材基本教材：《DreamweaverCS3+HTML超炫网页设计与制作》胡菘.中国青年出版社参考资料：《精通CSS+DIV网页样式与布局》前沿科技曾顺编著.人民邮电出版社《网页制作实用教程》张淑清主编.人民邮电出版社．《网页制作循序渐进教程》龙腾科技编著．兵器工业出版社备注教学过程第1页一、组织教学（约10分钟）1、检查各机位表的就座情况，考勤并登记；2、及时给电脑有故障的个别学生调整机位，做好学习准备。3、考勤二、新课题引入（约40分钟）6.1Dreamweaver6.1.8层由教师演示讲解以下操作：（1）建立层：默认情况下，插入层的标签是DIV，这个标签在IE与Navigator中都支持。(2)建立一个嵌套的层：层的嵌套和表格的嵌套有些类似，就是在层里面再建立一个层。层的关系：它们可以有两种关系，重叠（并列）与嵌套。并列就是指两层是独立的，任何一个层改变不会影响其它层。嵌套：父层改变属性会影响子层的属性。（3）建立一个完全处于父层之外的子层：不能在直接在父层之外建立子层的方法来建立，只能在父层之内建立子层后，再将子层拖出父层。（4）改变层的属性：用鼠标直接拖运“层”的大小在属性面板中输入宽和高（5）用“Z轴”改变层的次序：（6）设置“溢出”选项：“溢出”选项是指当层中的元素超出层的边界时，如何处理。其中visible是不管层的边界，显示所有元素：hidden则是不显示超出边界的内容：scroll是层的右方和下方出现滚动条而不论元素是否溢出，auto则是当层中元素溢出时才出现滚动条。（7）层的剪辑：所谓剪辑就是保持一幅图画的完整性，而只显示其中的一部分。对层也可以进行剪辑处理，只要指定需要剪辑的最左、最右、最上、最下的坐标即可。（8）层面板：强烈推荐大家在用层的时候将“层”面板打开并使用。6.1.9行为行为是事件和动作的组合。事件是在特定的时间或是用户在某时所发出的指令后紧接着发生的，例：网页下载完毕，按下键盘，单击鼠标等。而动作是在事件发生后所要作出的反应，例：打开的浏览器窗口、弹出菜单、播放音乐等。由教师演示讲解以下操作：1、播放声音：2、打开浏览器窗口：3、弹出信息：4、改变属性:5、改变时间轴:6、拖动层：onmouseover(鼠标经过时拖动)7、设置文本：状态栏中的显示内容！8、验证表单：9、选择超联接文字，然后添加行为－显示弹出式菜单。6.1.10模版与框架一、使用模板：由教师演示讲解以下操作：1、创建模板：2、编辑模板：3、模板的使用与修改：（1）将模板应用到文件中：（2）与模板脱离（3）用模板更新网页和网站：二、框架框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架由两个主要部分组成－框架集和单个框架。框架集是在一个文档内定义一组框架结构的HTML网页，单个框架是指在网页上定义的一个区域。<查看>－＜可视化助理＞－＜框架边框＞使框架边框在编辑窗口中可见。按住Alt键拖曳任意一条框架边框，可以垂直或水平分割文档。<文件>－＜保存全部＞首先保存框架集文件。依次要保存框架集中的其他页面。保存对应页面的时候，该部分都将以虚线框显示。保存的页数为X＋1个网页。由教师演示讲解关于框架的操作。6.2Fireworks6.2.1Fireworks简介Fireworks是一个强大的网页图形设计工具，使用它创建和编辑位图、矢量图形，还可非常轻松的做出各种网页设计中常见的效果，比如动画、翻转图像、导航条、下拉菜单等，设计完成以后，如果在网页设计中使用，可将它输出为HTML文件，还能输出在Photoshop,Illustrator和Flash等软件中编辑的格式。6.2.2图形优化和导出图形在图像插入到网页之前，一般需要将图像进行处理。在Fireworks中处理图像一般遵循以下流程：创建图形和图像→创建Web对象→优化图像→导出图像。6.2.3切片工具的使用为了获取较高的下载速度，通常将网页中存在的较大图像切分成多个图片，即切片，在下载网页时对