网页教案32篇
瓦房店市职业教育中心
2012-2013学年第一学期
教师学期授课计划
课程名称网页设计
任教班级11计算机
教研室计算机组
教师姓名xxxxxxxx
课程表
2012-2013学年第一学期
瓦房店市职业教育中心2012-2013学年第一学期
学科教学工作计划
教师：xxxxx 学科：网页专业：计算机年级： 11级
教学进度表
《网页制作教学设计》教案
《网页制作》教学设计 法、说学法、说教学过程、说板书设计。 一、说教材： (一)教材分析：本节内容是省编《信息技术》全一册第六章 网络与INTERNET基础知识第五节的内容(2000年版为第八章第四节内容，2001、2002版教材第六章第五节内容)。虽然在这一节内容在新版教材变更为拓展模块，但针对现在网络快速发展，广大的学生接触，使用INTERNET的机会也大大增加，学生在使用网络获取信息时，更多的是通过浏览网页这一方式，我认为上好这节课是非常必要的，这对学生进一步认识、使用INTERNET更有益处，同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解，在一定程度上也起着培养学生运用综合知识能力作用，所以我认为这节课是非常值得我们去研究上好的，考虑这节课的内容及教法、学法的需要，我把这节分为两课时，第一时：学生自学，自练Word制作网页的基本方法；第二课：让学生自己构思创意一个内容丰富，页面美观的网页。 (二)教学目标：根据对教材的分析及学生实际情况，制定如 下的教学目标： (1)知识目标：1、有关网页文件的说明 2、熟悉用Word制作网页的基本方法 3、超级链接是网页实现互相链接的基本方法 (2)能力目标：1、培养学生的自学能力 2、创意构思能力 3、能制作出具有多重链接、多种素材、内容 丰富的网页。 (3)情感目标：1、教育学生正确认识和理解信息技术相关文 化，伦理和社会问题，负责地使用信息技术。 (三)教学的重、难点：根据对教材的分析及网页制作过程中的 实际情况，我认为要出制作内容丰富的网页，关键是要知 道网页间互相链接的方法，所以我把超级链接做为本节的
Dreamweaver网页制作教案
认识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的基本知识
网页24种基本配色
网页24种基本配色 强烈丰富浪漫奔放土性友善 柔和热情动感高雅流行清新 传统清爽热带古典可靠平静 堂皇神奇怀旧活力低沉专职 基本配色——奔放 藉由使用象朱红色这种一般最令人熟知的色彩，或是它众多的明色和暗色中的一个，都能在一般设计和平面设计上展现活力与热忱。中央为红橙色的色彩组合最能轻易创造出有活力、充满温暖的感觉。 这种色彩组合让人有青春、朝气、活泼、顽皮的感觉，常常出现在广告中，展示精力充沛的个性与生活方式。把红橙和它的补色——蓝绿色——搭配组合起来，就具有亲近、随和、活泼、主动的效果，每当应用在织品、广告和包装上，都是非常有效。 补色色彩组合三次色色彩组合单色色彩组合 61 1360 12 76 44 12 9 15 12 12 64 1658 15 73 42 10 14 10 12 15 12 62 1557 13 78 46 14 9 11 12 10 12 63 12 57 10 79 42 12 10 16 12 16 12分裂补色色彩组合类比色彩组合 9 6852 12 12 20 4 12 92 4
5268282012 13 70 5150 12 70 11 23 28 4 15 20 90 6 13 11 68 5054 12 71 15 24 28 7 13 20 93 5 12 14 68 55 55 10 68 14 18 32 8 10 22 94 5 11 中性色彩组合冲突色彩组合分裂色彩组合 98 100 129 16 68 12 51 12 65 52 5 101 12 10610 12 67 14 54 14 70 56 12 12 98 10411 12 66 15 49 13 66 51 11 98 102 129 12 65 11 50 11 69 54 12
网页设计——网页设计概述教案
第一讲网页设计概述 使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。 【教学内容】 讲解网页设计的相关术语及网站制作的基本流程。 【教学重点】 网页设计中的若干术语。 【教学难点】 理解网页设计中的若干术语。 【教学方式】 讲授式、讨论式、案例分析式。 【教学参考】 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、网页中插入的图片要尽量的小。
网页设计,色彩搭配分析
在网页设计中，对目前的网站配色(Landscape of color)认真琢磨一下还是非常有趣的。大多数网站或多或少相同，但是颜色的设计搭配却是一个非常给力的工具。 我并不想尝试去阐述一些具有革命性的东西或者是特别的发现。但如果大部分网站都采用同样的配色方案，那对颜色意味着什么呢？实际上，远超出你的想象。幻想一下整个世界的每一个网站都是非常漂亮和五彩缤纷的，但它同时也意味着千篇一律。这就像你文章中每一个段落的粗体。 因此，当配色方案比较柔和的时候，它允许有更多的机会。 关注你想要的任何东西 许多网站都有一个基本的灰度配色方案-白色的背景和黑色的字体。(网页中)想让你看到的部分会赋予颜色作为强调。这就是为什么网页不会充满颜色—它们使用在想让你看到的按钮，标题或者链接上面。 Vibrant ，当你第一次登陆它们的主页，主页的背景和图片是黑白的，网站标志，可点击的按钮和汉堡菜单是亮黄色，这些可以很快的（在灰度背景中）脱颖而出，吸引你的注意力。 另一个例子是Takeit; 当你第一次登录他们的主页就看一个大大的蓝色背景。然而，其他的都是白色的。最前面并且居中的大标题会让你的注意力集中在中间。
同时，你的眼睛在很短的时间内就能注意尺寸较小但是仍然明显的APP商城的按钮。你可以从中研究一下是颜色如何引导用户的注意力的。 创造个性 颜色是非常奇妙的，因为它可以展现一个网站或者品牌的语气和情绪。Beagle （很遗憾，译者访问的时候，网站已经不在了）提供创建项目简介的服务，他们的网站使用了较轻的茶色。当你向下滚动他们的主页时，你会看到棕色,炭色，绿色，甚至粉红色这样一些愉快的色调。世俗的色调（earthly tones）看起来专业和优雅，给人对于其所代表的公司（留下）一个非常好的印象。 An Interesting Day网站它特指“在奥斯陆峡湾（Oslofjord）的一个小岛上举办的一个不可思议的，为期一天的会议”（“a weird, one-day conference on a tiny island in the Oslofjord”）。当红色的背景和红色的字体在上面的时候，
网页制作公开课教案.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. 事件。
《电子商务网站设计与制作》教案28
本次课基本信息
教学设计页
教学内容页 8.5练习案例：装修公司 案例操作要点： 1．创建文件名称为index.html的新文档，并将所有样式存放在decoration样式文档中。插入ID名称为container的
网页制作教案
课堂任务快速建站技术—模板的应用 课程名称：利用模板快速建站 课时数：4 教学目标： 知识与技能：了解模板的定义，模板的可编辑区域的定义。 过程与方法：掌握在网页中创建模板的三种方法； 掌握模板的可编辑区域的定义、建立和取消； 掌握模板的应用和取消； 掌握如何将模板从网页中分离出来； 掌握使用模板快速建站； 情感与价值观：培养学生主动思考问题的习惯和自主学习的能力。 教学重点： 在DreamWeaver8中创建模板和应用模板。 教学难点： 学会模板的可编辑区域的定义、建立和取消。 教法： 任务驱动法 学法： 记录关键步骤，积极动手练习。 课前准备： 第三章第三节素材和实例，视频教程：快速建站技术－模板的应用.WMV，快速建站技术－模板的应用(快速更新).WMV。 教学过程设计： （一）导入设计： 我们制作一个网站时，会发现许多网页的版面和元素都是相同的，在设计一个新页面时，我们还可以用复制原来做过页面来减轻工作量。但是如果一个网站有几十、上百张页面都基本相同，这时修改或更新网页的共同元素如网站标志时，会发现工作量实在太大！而使用Dreamweaver 软件中的模板功能来创建新网页，可以大大提高更新和修改的工作效率，网站的维护工作会轻松很多。本节主要内容如下。（二）新课讲解设计： （1）请学生带着以下问题阅读P110～115知识预读，问题如下： A、模板的定义？ B、模板创建的三种方式？了解资源面板的使用方式。 C、学会模板的可编辑区域的定义、建立和取消； D、学会模板的应用和取消； E、学会如何将模板从网页中分离出来； （2）教师提问，请学生一一回答以上问题。期间对回答问题的同学要多多表扬，如“你真棒”。增强学生对教师的亲和力。 （3）教师在学生回答问题的同时，总结评价并补充相关要点。 （4）教师展示完成后的模板网站作品，与学生共同讨论分析该网站制作过程。 （5）教师演示建立模板,创建可编辑区域,应用模板等部分操作（详见教材任务一）。
网页制作的教学设计
网页制作的教学设计 一、教学目标 1 、知道站点、主页的概念，能在指定位置建立只有一个网页的站点； 2 、认识FRONTPAGE 的界面； 3 、掌握在主页中插入文字、图片、水平线； 4 、掌握页面文件与图片的保存。 二、教学重点 1 、能在指定位置建立只有一个网页的站点（难点） 2 、能在页面中插入文字、图片、水平线 3 、掌握页面文件与图片的保存（难点） 三、学情分析 学生已经学习了WORD 、POWERPOINT 与上网浏览信息，对计算机的基本操作（WORD 中文档的编辑，网页的浏览等）比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务，有能力的学生还可以完成提高篇的学习，以充分发挥学生的积极性与自主性。 四、教学方法 在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。 五、教学过程设计 教师活动：1 、引入课题：（激发兴趣，活跃气氛） 同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站） 浏览新浪网站，浏览的第一个页面称为什么？（主页） 我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。 问题1 ：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，
通过超链接把不同的页面链接起来） 问题 2 ：网页是不是就是主页？( 第一个页面称为主页, 网站设计者可以确定哪一个是主页, 主页的文件名一般为：index.htm, 主页也是网页) 设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet 上，让所有的人访问浏览。 今天我们学习用Frontpage 建立站点，制作一个主页。 先来研究一下没有发布的网站, 打开教师做的网站 问：同学们看到了什么？（文件夹） 总结： 可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。 打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。 请学生浏览教师课件，了解学习任务 2 、新建站点 FP 的启动 问：与word 比较，有什么不同？ （增加了视图区，编辑区有三个窗口） 总结： 视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面 普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式 预览窗口：浏览器中出现的效果，与PowerPoint 中的“放映幻灯片”类似。 Html 窗口：编写HTML （超文本标记语言，它是描述网页内容和外观的标准。） 打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。
电子商务网页制作 教学计划
《电子商务网页制作》教学计划 15秋电商这已是学生的第三个学期，对网页制作已有一定了解，然因此课程教科书内容所介绍的软件已不再使用，因而我决定教学生简单、实用、流行的入门网页制作语言——HTML,选择基本的语言让学生学习。同时也利用书上理论知识，传授给学生，并应学生要求，进一步讲解dreamwaver。 教学目标: 1、本学期这一课程是为了让学生学会用html和dreamwaver制作网页。 2、学习关于网页设计的一些基本知识。 重点工作： 1、用html、dreamwaver制作网页。 2、学习网页设计的一些基本知识 教学策略： 1、突出上机操作，精讲多练。 2、将网页设计与学生的生活知识联系起来，其它学科的学习结合起来，与学生思想道德教育结合起来，与课改实验结合起来。 3、作业布置适量，难易适中，有针对性，及时反馈，做好总结。 教学安排： 1、实行上机、上课相结合的模式; 3、坚持考勤，做好学习情况、作业情况的记录。 4、坚持做反思。 教学内容概览： 理论： 1、初识电子商务网页
2、电子商务网站导航设计原则 3、网页布局原则 4、表单的概述 5、课程设计指南 操作： Html: 1、Html基本结构 2、页面主体标记的设置 3、设计网页文本内容 4、无序列表和有序列表 5、文字、图片链接 6、锚点 7、添加图片及设置 8、表格的应用 9、多媒体文件 10、Div标签 11、Iframe 12、让学生设计一个简易的个人网页Dreamweaver: 1、建立所有文件夹 2、建立首页 3、建立站点 4、设置页面属性
. 5、输入文本及其设置 6、插入图片及其设置 7、插入表格及其设置 8、创建网页链接 9、利用表单创建留言板 10、学生设计一个简易网站 班级:15秋电子商务班 任课教师：李美云
网页制作电子教案项目备课
项目二 网页制作基础 【项目描述】 中文版Dreamweaver8是目前比较流行的网页制作工具。本项目主要介绍中文版Dreamweaver8的工作窗口及使用方法，以及HTML的基本结构。 【教学目标】 1.安装Dreamweaver8，介绍其工作窗口及使用方法。 2.学会定义本地站点，并讲解规划站点结构的原则，在站点中搭建模拟结构。 3.Html代码的基本结构。 【项目分配】 任务一认识Dreamweaver8。（1课时） 任务二创建本地站点，搭建模拟结构。（2课时） 任务三html代码的基本结构。（2课时）
任务一：认识Dreamweaver8（1课时） 一、教材分析： 中文版dreamweaver8是目前比较流行的网页制作工具。主要介绍中文版dreamweaver8的工作窗口以及其使用方法 二、学情分析： 本班学生都是刚接触到dreamweaver8，对于本节课知识兴趣浓厚，学习积极性高。三、教学目标： 知识目标：初步了解中文版dreamweaver8的工作窗口、工具栏、文档窗口、浮动面板、菜单和辅助设计工具。 情感目标：通过本节课的学习使学生掌握知识的同时，提高他们的自学能力。 能力目标：通过本节课的学习培养学生动手操作能力。 四、教学重点 掌握中文版dreamweaver8的8的工作窗口、工具栏、文档窗口、浮动面板、菜单和辅助设计工具、属性面板和浮动面板显示及使用。 五、教学难点 快捷工具栏的显示及组成、使用，浮动面板的显示与隐藏菜单和辅助设计工具的作用教学方法与过程： （一）导入新课：提问学生对网站的了解，internet网与我们生活的联系及重要性。引发学生思考，带着颖问进入教学课题。 （二）揭示课题：网站大部分都是由Dreamweaver8 制作出来的这节课我们就来“认识Dreamweaver8” （三）教师演示： 1.启动Dreamweaver8从开始菜单启动，出现工作区设置对话框，选择设计器工作区。设计器是标准的工作区。 2.Dreamweaver8工作界面认识Dreamweaver8工作界面，对掌握和提高制作效率是关键的一步。（1）标题栏：左侧有网页标题，所在位置及文件名称，右侧有最小化，最大化
《网页制作》教学设计(优质课比赛优秀设计)
《网页制作》教学设计（优质课比赛优秀设计）《网页制作》教学设计 一、教材或教学内容分析 本章内容在本教材中的位置处于第五章，是在文字处理(Word2000)和网络基础及因特网应用两章之后。学生所学的文字处理软件Word和将要学习的网页制作软件Frontpage同是Microsoft公司的产品，在软件的使用上有很多的共通之处，所以在学习frontpage的时候，很多内容可以让学生自学，而不必面面俱到地在课上讲授。而第四章网络基础及因特网的应用又为学生对网页的理解奠定了基础，学生对网页中的基本元素——文字、图片、动画、声音等都有所了解，而网页的制作就是将这些元素重新组合到网页上，学生要学的就是这种组合的方法。所以说，虽然大多数学生以前都未接触过网页的制作，但有了以上这些基础，学起来就轻松多了。 本章内容按照学生已有的基础，我对教学内容分了一下类，也为教学的组织工作打下一点基础。本章内容主要由网页基础知识、网站的建立和管理、网页的制作、创建超链接、图片的处理、网页框架。 重点是网页的制作和创建超链接，学会了这些就可以开始简单的网页制作了。 难点是网页框架，这部分相互之间关系比较复杂，必要时，老师在对各组个别辅导时，可以给予分别讲解。 这个分类可以为组长安排各个组员的任务提供参考，使分工更加合理。 二、教学对象的分析 第 1 页共 6 页 信息技术课虽然已经成为初中的必修科目，但是城乡学生之间掌握情况的差异却相当大，条件好一点的初中学生不仅已经熟练掌握了课本上的内容，还对一些常
用软件有所了解;而差一点的可以说是从高中开始才正式接触到信息技术知识的学习，他们需要多锻炼、多指导，所以协作学习对学生的学习帮助很大。 三、教学策略的选择及媒体的使用 在教学策略的选择上，我使用的是任务驱动和协作学习相结合的方法。 任务驱动就是要求本章内容学习完之后，每个小组都要完成自己班级网站的制作，并在全班进行评比，选择最好的作为班级主页挂到学校主页上去，这有助于激发学生参与学习的积极性。 协作学习则是让学生在学习过程中互帮互助，用较短的时间、教少的精力学到更多的东西，完成一个集体项目，让他们在学习之后获得成就感。因此在媒体的选择上，我们使用的是TOP2000系统。TOP2000系统有利于教师进行分组教学和学生作品的点评及成果的展示。教学过程开始之前，教师把学生按座位分成四组，每个组都按学生对计算机的掌握程度平均分配，保证每个组都有计算机操作方面比较突出的，也有相对比较差的，使其形成能够互帮互助的学习小组。并由他们自己选出组长各一名，然后由组长根据组员的情况，确定在班级主页制作过程中主要完成什么任务，也就是说起到一个组织者的作用。做过网页的人都知道，做网页是一项比较费时的工作，而要学生在较短的时间内制作出像样的网页是比较困难的，而在这个过程中，网页的设计占去了相当多的一部分时间，组长把任务分到各组员头上以后，组员就可根据自己要完成的任务相对集中的做某方面的工作，做完以后，组员之间进行经验交流，告诉组员自己的网页是如何制作出来的，在完成自己的网页后，再重复一遍制作过程花费的时间的不多的。这样，其他组员就可在较短的时间之内 第 2 页共 6 页 掌握比较先进的网页制作方法，而不必再花那么多时间去探索。因为每位组员都必
网页设计与制作课程教案
《网页设计与制作》课程教案 一、课程定位 本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。 本课程的目的和任务是让学生学会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） 贝塔网络 发布时间：2007-12-1916:37:29评论：0点 击：23一步、底色和图形色色彩搭配的问题确实不是一个简单的问题。这一代的设计师比上一代的设计师，所能运用的色彩工具多了许多。如今，我们能运用好计算机为我们提供的丰富色彩，看来不是很简单的事情。就我个人而言，在我从事设计师工作以来，往往也会迷失在色彩的世界。现在交流一下自己学过的和掌握的一些经验，希望大家指正。配色所要注意的要素实际设计时，我们经常会按照设计的目的来考虑与形态、肌理有关联的配色及色彩面积的处理方案，这个方案就是我的配色计划。在做配色计划时，我们应该考虑下述几点以突出视觉效果。1. 底色和图形色在设计时我们会经常遇到用几个色做各种形的构成，作为底的色我们往往会将它推远，而作为图形或文字的色我们要将它拉近。这就需要我们了解受配色关系的影响是什么样的。一般明亮和鲜艳的色比暗浊的色更容易有图形效果。因此，配 色时为了取得明了的图形效果必须首先考虑图形色和底色的关系。图形色要和底色有一定的对比度。这样才可以很明确的传达我们要表现的东西。我们要突出的图形色必须让它能够吸引观者的主要注意力。如果不是这样就会喧宾夺主。 第二步、整体色调如果我们想使我们的设计能够充满生气，稳健，冷清或者温暖，寒冷等感觉都是由整体色调决定的。那么我们怎么能够控制好整体色调呢？只有控制好构成整体色调的色相、明度、纯度关系和面积关系等。才可以控制好我们设计的整体色调。首先要在配色中心决定占大面积的色，并根据这一色来选择不同的配色方案会得到不同的整体色调。从中选择出我们想要的。如果我们用暖色系列来做我们的整体色调则会呈现出温暖的感觉，反之亦然。如果用暖色和纯度高的色
网页设计与制作电子教案
实用标准文案 电子教案 课程：第1章网页制作基础 课时内容网页制作基础授课时间学时数2 教学目标了解 HTML 的组成和语法 了解网页制作的常用软件 掌握网页制作软件的启动和退出方法 教学重点网页制作的一些基本知识 教学难点HTML的组成和语法 教学设计1、教学思路：首先，让同学们说说他们对网页的一个认识。然后进行系统地介绍网页 是什么，由哪些部分组成，还有网页制作时所需掌握的一些基础知识和制作网页时 常用到的一些软件。最后学习网页制作软件的启动和退出方法。 2、教学方法：先登录一些常用的网站，让同学们看一些网页，然后让同学们说下他们 度网页的认识，最后才开始讲解本周内容。 3、教学手段：利用多媒体并结合网络进行教学。 4、教学资料及要求：课前要求学生先大致浏览本书内容，对本书所要讲解的内容有个 基本的了解。 教学内容 讨论问题： 1、什么是网页？ 2、网页的基本组成部分是哪些？ 3、网页有什么作用？ 第 1 章网页制作基础# 1.1网页制作基础知识 1.1.1网页简介 1.1.2什么是HTML 1.1.3 HTML 的组成结构及语法 1.1.4应用举例——使用记事本编写网页 1.2网页制作的常用软件 1.2.1图形图像处理软件 1.2.2动画制作软件 1.2.3网页布局软件 1.2.4软件配合及制作流程 1.2.5应用举例——实战网页制作流程 1.3网页制作软件的启动与退出 1.3.1网页制作软件的启动 1.3.2文件的打开 1.3.3网页制作软件的退出 1.3.4应用举例——启动并退出 Photoshop CS3 1.4上机及项目实训 1.4.1Flash CS3 的启动与退出 1.4.2制作“蓝莲花”网页
网页配色方案大全
配色方案大全 配色方案一(粉绿色): 浏览器边框颜色#e8ffe8 顶部菜单表格背景(深背景) #e8ffe8 顶部菜单表格背景(浅背景) #f7fff7 表格边框颜色一#00b700 表格边框颜色二#b0ffb0 标题表格颜色一（深背景）#e8ffe8 标题表格颜色二（浅背景）#f7fff7 表格体颜色一#f7fff7 表格体颜色二(1和2颜色在首页显示中穿插) #e8ffe8 表格标题栏字体颜色#006a00 表格内容栏字体颜色#006a00 警告提醒语句的颜色#000000 配色方案二(水橘红色): 浏览器边框颜色#ffe9e1 顶部菜单表格背景(深背景) #ffe9e1 顶部菜单表格背景(浅背景) #fff9f7 表格边框颜色一#ff8e68 表格边框颜色二#ffa98c 标题表格颜色一（深背景）#ffe9e1 标题表格颜色二（浅背景）#fff9f7 表格体颜色一#fff9f7 表格体颜色二(1和2颜色在首页显示中穿插) #ffe9e1 表格标题栏字体颜色#9b2700 表格内容栏字体颜色#9b2700 警告提醒语句的颜色#000000 配色方案三(西瓜红色): 浏览器边框颜色#ffe1f0 顶部菜单表格背景(深背景) #ffe1f0 顶部菜单表格背景(浅背景) #fff4fa 表格边框颜色一#ff51b0 表格边框颜色二#ff8cc6 标题表格颜色一（深背景）#ffe1f0 标题表格颜色二（浅背景）#fff4fa 表格体颜色一#fff4fa 表格体颜色二(1和2颜色在首页显示中穿插) #ffe1f0 表格标题栏字体颜色#bf0069
警告提醒语句的颜色#602060 配色方案四(宝石蓝色): 浏览器边框颜色#d0dcff 顶部菜单表格背景(深背景) #d0dcff 顶部菜单表格背景(浅背景) #eef2ff 表格边框颜色一#002cae 表格边框颜色二#7d9aff 标题表格颜色一（深背景）#d0dcff 标题表格颜色二（浅背景）#eef2ff 表格体颜色一#eef2ff 表格体颜色二(1和2颜色在首页显示中穿插) #d0dcff 表格标题栏字体颜色#001c7b 表格内容栏字体颜色#001c7b 警告提醒语句的颜色#000000 配色方案五(湖蓝色): 浏览器边框颜色#cef3ff 顶部菜单表格背景(深背景) #cef3ff 顶部菜单表格背景(浅背景) #ecfbff 表格边框颜色一#007ca6 表格边框颜色二#15b9ff 标题表格颜色一（深背景）#cef3ff 标题表格颜色二（浅背景）#ecfbff 表格体颜色一#ecfbff 表格体颜色二(1和2颜色在首页显示中穿插) #cef3ff 表格标题栏字体颜色#00637b 表格内容栏字体颜色#00637b 警告提醒语句的颜色#007a99 配色方案六(金黄色): 浏览器边框颜色#ffeed0 顶部菜单表格背景(深背景) #ffeed0 顶部菜单表格背景(浅背景) #Fffaf0 表格边框颜色一#co7800 表格边框颜色二#ffc562 标题表格颜色一（深背景）#ffeed0 标题表格颜色二（浅背景）#Fffaf0 表格体颜色一#Fffaf0 表格体颜色二(1和2颜色在首页显示中穿插) #ffeed0
网页颜色搭配表
网站建设知识 版权所有Copyright© 2006-2008 黑马网上创业指南联系方式：heima123#gmail；QQ交流群： 1 预早筹划 设计主页未必很艰难。但这一工作与编制传统的宣传品一样，都需要我们谨慎处理和筹划。换言之，我们必须首先确定自己需要传达的主要信息，然后细意斟酌、把所有意念合情合理地组织起来；之后是设计一个页面式样，试用于有代表性的用户，接着重复修订，务求尽善尽美。 2 尽量精简 主页的作用好比一本书的封面，是为了吸引用户测览你的网址内容。因此，主页的设汁应以醒目为上、令人一目了然。切勿堆砌太多不必要的细节，或使画面过于复杂。在主页上清楚列出三项要点，例如机构名称、提供的产品或服务、以及主页内容(亦即你的其他页面还载有什么资料)。应切记页面给人的第一观感最为重要。在网上到处浏览的人很多。如果你的主页真没有吸引力，很难今他们深入观赏。 3 尽量简朴 现今大部分用户那是用调制解调器接驳万维网，所以他们一般都要花很多时间等待主页传送到自己的系统。切勿令他们加倍望穿秋水。主页上的图形应力求简朴，避免耽搁用户的时间。图像愈大、颜色愈深，传送页面的时间愈长。这并不是说你要完全略去图像不用，只是提醒你要注注意使用图像所引起的效果。主页上的颜色最好不超过六十四种，页顶图像最好保持在大约10KB(千字节)以下。切勿禁不住诱惑。觉得非要放入大幅的图画不可；应考虑只用三两幅短小精悍的图像。主
页整体上要能够迅速传送。如果载入的时间超过十至十五秒，很多用户就会等得不耐烦。如果情况许可，最好先测试一中你的主页在稍差的条件下的传送速率，14.4千波特的调制解调器，或透过Prodigy 等网上服务接驳万维网等。此外、还须注意配合最低档的设备，例如标准的小型显示器，不要假设人人都用高解像度的大荧幕。运用先进测览软件所提供的一些尖端功能是可以的、但应确保你的主页在次一级的浏览软件上(例如某些网上服务所提供的专用浏览软件)仍可畅顺地显现。 4 善用图像 用户在网上四处漫游，你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力，所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款，使其别具特色，令人过目不忘。图像的内容应有一定的实际作用，切忌虚饰浮夸。最佳的图像足集美观与传讯于一身。注意图画可以弥补文字之不足，但并不能够完全取代文字。很多用户把浏览软件设定为略去图像，以求节省时间他们只看文字。因此，制作主页时，必须注意将图像所戴的重要信息或联接其他页面的指示用文字重复表达—次。用“纯文中”模式测试已制成的主页，确保其传达到所有信息。 5 使主页易于漫游 主页的其中一个主要功能是作为漫游工具，指引用户查阅你存储在网址或其他地点的信息。尽量使漫游过程不费吹灰之力。基于清晰明确和速度的考虑，主页上的联接项目应只限于几个高级的类别，例如公司、产品、服务、支援等。用六至八个联接项目最为理想。 此外，你提供的信息不应埋藏在重重叠叠的页面之下。穿越五个以上的联接项目已足以令人厌烦。因此，你必须在广度
网页经典配色艺术
网页经典配色艺术 内容简介： 本书首先讲解了色彩的理论与配色方法，主要包括色彩的基础知识、网页配色标准与技巧及色彩的配色方案，然后通过案例分析了色调、色相和意象配色方案，再通过对大量的国内外优秀网页设计作品配色技巧的分析，培养读者对色彩的感觉，提高色彩的运用能力。本书配套光盘中包含大量配色方案、网页模板、网页Banner和Logo，以及配色辞典等资料。 本书适合网页设计人员，以及对网页设计感兴趣的读者。 未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。 版权所有，侵权必究。 图书在版编目（CIP）数据 网页经典配色艺术／张新伟编著.—北京：电子工业出版社，2009.6 （精彩网页设计） ISBN 978-7-121-08228-3 I. 网…Ⅱ.张…Ⅲ.主页制作－配色Ⅳ.TP393.092 中国版本图书馆CIP数据核字（2009）第015558号 责任编辑：王树伟田志虹 印刷： 装订： 出版发行：电子工业出版社 北京市海淀区万寿路173信箱邮编：100036 开本：787×1092 1/16 印张：19.5 字数：608.4千字 印次：2009年6月第1次印刷 印数：5 000 册定价：69.90 元（含光盘1张） 凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）88254888。 质量投诉请发邮件至zlts@https://www.wendangku.net/doc/ed842933.html,。盗版侵权举报请发邮件至dbqq@https://www.wendangku.net/doc/ed842933.html,。 服务热线：（010）88258888。
前言 在人的视野里，这个世界中，无论是天空、大地、山水、花草，还是生活中的衣、食、住、行，色彩都是无处不在的。它像一位魔术师，可以通过冷暖和深浅等因素的变化，表现出灿烂的微笑或忧郁的心情，影响着人们的心理感受。 在网络的世界里，色彩也同样多姿多彩。什么样的网页才能获得访问者的青睐呢？如何才能设计出与众不同的漂亮网页呢？通过观察和比较可以发现，一个优秀的网页，通常要具备丰富的内容、合理的版式、独特的风格和悦目的色彩，并在这几个方面都要实现和谐的统一。所以当今的设计者不仅要掌握基本的网页制作技术，还需要掌握有关版式风格设计及色彩搭配等方面的知识和技巧，再通过自己在工作中的实践经验积累，才能逐步成为一个优秀的网页设计师。 在网络世界中，人们不再局限于简单的文字与图片的组合，而是更加追求网页的美观与舒适，最直接的体现就是网页的设计风格越来越受到重视。而色彩作为网页给访问者的最初印象，在网页设计中占有举足轻重的地位。目前，国内的众多网站在内容制作方面都发展得较为完善，因此，版式风格特色鲜明并有与网站主题相得益彰的配色方案，是决定网站成功与否的重要因素。 本书正是遵循以上理念，在讲解色彩相关概念和网页配色原理的基础之上，采用了大量国内外网站的配色成功案例进行实战点评。帮助读者在鉴赏过程中逐步掌握不同情况下网页配色的规律与技巧，进而成为网页设计的行家里手。 本书内容 本书共分为两大部分。第1部分（第1～3章）讲解色彩理论与配色方法，主要包括色彩的基础知识、网页配色标准与技巧及色彩的配色方案。通过案例分析了色调、色相和意象配色方案。第2部分（第4～10章）是网页配色应用与实践讲解，对大量网页用色特点进行分析，并学习国内外优秀网页设计作品的配色技巧。通过这些分析，有助于培养读者对色彩的感觉，提高色彩的运用能力。 本书特点 紧跟当今最前卫的色彩流行趋势。本书精选的优秀网页设计作品大部分是韩国、欧美的网页案例，展示了最时尚的网页设计风格，提供了最实用的设计版式和最前卫的配色经验，拓展读者的创意空间。 专业的网页配色参考手册。本书通过分析不同类型网站受众的不同特点和针对不同的网站主题来合理布置色彩，有针对性地使用色彩来体现网站的特色，使读者快速领会配色要诀。 提供最丰富的配色方案和版式设计方案。颜色搭配得当，网页就成功了一半，再搭配合理的版式设计，使网页更成功。 特别说明 由于网站的更新速度快、时效性强，本书中提供的网址链接仅供参考。 另外，为了给读者提供更丰富的配色方案参考，本书大部分章节提供了颜色的RGB色值，由于实际操作环境的不同，实际数值可能与本书中给出的数值稍有不同，但不会对颜色造成太大影响。 由于作者水平有限，错误和不足之处在所难免。您在阅读过程中如有任何问题，欢迎和作者交流探讨。 编著者