班级网页制作
网页制作教案
教案课程网页制作2016——2017学年第一学期班级计算机应用二年级教师胡发萍课时进度表网页制作全册备课网页制作第一章备课通过上面的讲解，下面我们从一些网页上观察一些超链接及区别打开该网页进行比较讲解最后留一步分时间让同学们一些好的网页进行浏览如：课后记：由于同学们都没有书，这节课的内容比较少，同学们都能很好的掌握。
的统一的语言规范。
用HTML语言制作网页，一般有两种方法：一是使用记事本之类的工具，输入HTML标记和网页的内容进行直接编写，然后保存在以html或htm为扩展名的网页文件；另一种方法是使用可视化的网页制作工具，自动生成HTML代码。
例：我的第一个网页1、执行菜单的“开始”—“程序”—“附件”—“记事本”2、将以下代码完整正确地输入到记事本软件中：<html><head><title>欢迎大家光临</title></head><body><p>这是我用记事本编写的第一个网页，<font size=”+7”color=”red”>欢迎光临！</font></p></body></html>3、执行菜单的“文件”—“另存为”，存时注意必须加上扩展名.htm或.html。
4、双击打开刚才保存的文件。
作业：同学们现在做出这样的一个网页。
课后记：通过案例的制作，同学们都能做出来，同学们的学习兴趣有了一定的提高。
班级计算机二年级课时5、6网页制作第二章单元备课班级计算机二年级课时7、8课题 2.1 Dreamweaver MX的工作界面和基本操作教学目标掌握Dreamweaver MX软件的启动方法熟悉Dreamweaver MX软件的界面掌握Dreamweaver MX软件的基本操作教学重点Dreamweaver MX软件的基本操作教学难点Dreamweaver MX软件的基本操作教学方法教学一体化教学内容：一、熟悉Dreamweaver MX 2004的工作界面Dreamweaver欢迎界面1、启动Dreamweaver MX 2004Dreamweaver MX 2004的工作界面2、认识窗口布局、面板与面板组“插入”栏文档工具栏“文档”窗口面板组Array“标签”选择器“属性”面板“文件”面板3、Dreamweaver MX 软件界面的相关操作。
《网页制作》教学设计（5篇）
《网页制作》教学设计（5篇）作为一名优秀的教导工，通常会被要求编写教学设计，借助教学设计可以提高教学质量，收到预期的教学效果。
则写教学设计须要留意哪些问题呢？下面是我收拾的《网页制作》教学设计〔精选5篇〕，欢送阅读与收藏。
《网页制作》教学设计1一、教材或教学内容分析本章内容在本教材中的位置处于第五章,是在文字处理(Word2000)和网络根底及因特网应用两章之后。
学生所学的文字处理软件Word和将要学习的网页制作软件Frontpage同是Microsoft公司的产品,在软件的使用上有无数的共通之处,所以在学习frontpage的时候,无数内容可以让学生自学,而不必面面俱到地在课上讲授。
而第四章网络根底及因特网的应用又为学生对网页的理解奠定了根底,学生对网页中的根本元素——文字、图片、动画、声音等都有所了解,而网页的制作就是将这些元素重新组合到网页上,学生要学的就是这种组合的办法。
所以说,虽然大多数学生以前都未接触过网页的制作,但有了以上这些根底,学起来就轻巧多了。
本章内容根据学生已有的根底,我对教学内容分了一下类,也为教学的组织工作打下一点根底。
本章内容主要由网页根底学问、网站的建设和管理、网页的制作、创立超链接、图片的处理、网页框架。
重点是网页的制作和创立超链接,学会了这些就可以开场容易的网页制作了。
难点是网页框架,这局部互相之间关系比拟冗杂,必要时,教师在对各组个别辅导时,可以赋予分离解说。
这个分类可以为组长支配各个组员的任务提供参考,使分工越发合理。
二、教学对象的分析信息技术课虽然已经成为初中的必修科目,但是城乡学生之间控制状况的差别却相当大,条件好一点的初中学生不仅已经娴熟控制了课本上的内容,还对一些常用软件有所了解;而差一点的可以说是从高中开场才正式接触到信息技术学问的学习,他们须要多锻炼、多指导,所以配合学习对学生的学习帮忙很大。
三、教学策略的挑选及媒体的使用在教学策略的挑选上,我使用的是任务驱动和配合学习相结合的办法。
班级网页制作
1
“搜狐”的主页的内容很丰富，色彩鲜艳并有 许多大幅广告和浮动广告栏。
网页的风格2
2
微软中国的主页，内容比较专一，内容非 常有条理，栏目突出，没有凌乱的感觉。
网页的风格3
3
“黑白音乐” 是一个个人主页，它看起来 更简单，色彩也不够丰富，但感觉非常清新。
班级主页
班级主页
本节要点
6
❖设置网页属性
❖利用表格布局
❖拆分、合并单元格
❖插入图像
设置网页属性
7
➢网页标题
➢设置背景图片
利用表格布局
8
1.新建表格
（1）将插入工具栏切换到“常用”模式，单击表格按钮
（2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮就可以把表格插到网页中。
（4）在表格的各个单元格中分别输入内容。
拆分、合并单元格
9
1.合并单元格
拖动选中要合并的单元格，单击属性面板上的合并单 元格按钮
2.拆分单元格
在要拆分的单元格中单击，在单击属性面板上的拆 分单元格按钮
3.插入或删除行、列
使用菜单“插入”→“表格”菜单中的插入行或 列，删除行或列进行相应的操作。
插入图像
10
• 插入图像的步骤如下 ：
（1）把工具栏切换到“常用”状态，然后单击 “图像：图象”按钮
（2）选择要插入的图像文件，在文件列表中单 击一个图象文件时，图象预览区会显示这个 图象的缩略图。
（3）单击确定按钮，如果图像文件在站点文件 夹中，就会直接插入到网页中，同时在编辑 窗口显示出图像。
网页设计与制作课程标准
⽹页设计与制作课程标准江苏农林职业技术学院《⽹页设计与制作》课程标准课程代码：08058⼀、适⽤对象电⼦信息⼯程、计算机应⽤、电⼦商务等专业的三年制⼤专。
⼆、课程性质⽹页设计与制作是当今社会的热门技术之⼀，也是三年制计算机专科学⽣的⼀门专业必修课，是根据⽹页设计与制作、⽹站管理、⽹页编辑的⼯作岗位能⼒要求所开设的课程。
本课程的教学⽬的是：以HTML、DreamWeaver和ASP为蓝本，全⾯介绍与⽹页设计制作有关的知识，使学⽣具有解决⼀般⽹页制作问题的能⼒。
与此同时，通过对Web页制作技术和制作⼯具的学习，使学⽣对于⽹页设计中所涉及的相关知识有⼀个全⾯的了解。
使学⽣具有良好的⽹站规划、设计、编辑与维护能⼒。
三、参考学时74学时（理论34学时、实训40学时）四、学分4学分五、课程⽬标通过本课程的学习，学⽣具有⽹页设计师⼯作最基本的知识与技能、具备较⾼的职业素质，能基本胜任各公司的⽹页设计师和⽹站管理维护等岗位⼯作。
具体来讲，⼜分为职业能⼒、⼯作能⼒和创新能⼒的培养。
（⼀）情感与态度⽬标1. 具有勤奋学习的态度,严谨求实,创新的⼯作作风;2. 具有良好的⼼理素质和职业道德素质;3. 具有⾼度责任⼼和良好的团队合作精神;4. 具有⼀定的科学思维⽅式和判断分析问题的能⼒;5. 具有较强的⽹页设计创意思维,艺术设计素质.（⼆）能⼒⽬标（五号⿊体，顶头空两字）1、熟悉DreamWeaver软件的使⽤。
2、掌握创建和管理站点的原理和⽅法。
3、掌握⽹页⽂本的编辑和控制、表格设计和制作⽹页的技术。
4、掌握⽹页图像的处理、超链接的使⽤、⽹页表单的编辑的技术。
5、掌握制作⽹页框架、图层技术、CSS样式的技术。
6、掌握⽹页中插⼊多媒体、利⽤模板和库设计⽹页的技术。
7、掌握⽹页测试和发布等技能。
8、具备进⾏综合⽹站规划与设计的能⼒。
9、具备⽹站的更新与维护能⼒。
（三）知识⽬标1. 会使⽤dreamweaver⽹页设计⼯具制作⽹页;2. 理解html语⾔中的标记设置颜⾊,⽂本格式和列表;3. 熟练掌握颜⾊值的配置和背景图案的设置⽅法,熟练掌握字符,链接颜⾊的设置⽅法;4. 熟练掌握⽹页设计中字符格式的设置⽅法,段落分段与换⾏的⽅法;5. 掌握html的语法结构,掌握html语⾔中标记的使⽤⽅法;6. 掌握在⽹页中添加css的⽅法.掌握三种添加样式信息的⽅法,会使⽤css设置⽹页格式和列表的格式;7. 掌握在⽹页中嵌⼊图像的⽅法,掌握与嵌⼊图像相关标记的⽤法;8. 掌握与图像布局和位置相关的标记的概念和⽤法;9. 熟练掌握使⽤绝对和相对url,创建超链接,图像链接;学会图像映射的建⽴⽅法;10.熟练掌握表格的使⽤⽅法,会⽤表格布局并设计⽹页;11.掌握框架制作⽹页的⽅法,会使⽤框架设计⽹页;12.掌握制作表单的⽅法,会利⽤表单建⽴交互式页⾯;13.掌握javascript语⾔的语法;14.掌握在html语⾔代码中嵌⼊javascript代码的⽅法,能看懂javascript特效⽹页源代码;15.学会使⽤javascript语⾔实现⽹页特效.。
《网页制作》教学设计(通用5篇)
《页制作》教学设计（通用5篇）《页制作》教学设计1教学目标：1、让学生掌握在页中插入表格的方法以及表格的修改2、学会利用表格来规划页3、培养学生创新的能力以及动手操作的能力教学重、难点：利用表格来规划页，从中培养学生的创新能力教学过程：一、情境导入同学们你们善于观察吗？老师先考考你们，我们一起来看一组图片，你们看看在那里看过呢？学校缓台的窗台上。
你们的观察能力真的很强啊，对，这些都是我们学校美术的特色作口，盘画。
其实，我们做过很多作品：有手工作品，语文课中的作文、书法等都是作品，这节课我们以绘画作口品为例，做一个学习园地页，把我们的作品展示到自己的班级中，以便我们更好的努力学习。
现在我们就一起来制作吧！二、新知探究首先我们来打开上节课的班级，在这个中新建一个页，并保存成“学习园地”。
教师讲解：如何制作学习园地页。
1、制作页的标题：输入文字，并设置文字的格式。
2、插入表格：单击“表格”中的'“插入表格”并对表格属性进行设置。
如：行、列的操作，对齐方式等。
同时讲解什么是行，什么是列，以及单元格的概念。
3、修改表格：调整表格行高和列宽。
4、在学生学会插入表格的基础上，来设计页，展示作品。
并讲解在单元格中可以插入图片、文字。
那我们就一起快快去做吧！插入图片，并在图片的上面或下面进行图片的注释。
5、进一步设置单元格的背景，来美化页。
6、设置超通过导航栏目，设置文字超链接。
选中文字，点击右键选择超链接在列表中选择你要链接的页，单击“确定”按钮。
7、学生在教师的讲解后，学生自己动手操作制作页。
教师进行指导。
（伴随音乐）三、作品评价1、生评：从页设计上，美观程度上，知识落实上重点评价。
2、师评：对学生作品进行评价，并对其它学生的评价加以更完整的解释。
四、总结我们这节课主要是利用了表格来设计页，以使来美化我们的页，通过绘画作品的展示，学习更多的知识。
《页制作》教学设计2一、教学目标：1、知识与技能：（1）、了解框架结构页的概念及在页中的作用，了解它与表格页的区别。
网页设计与制作实训报告
网页设计与制作实训报告网页设计与制作实训报告编制部门：计算机科学与技术系班级：计算机应用技术10-1组号：15组姓名：杨江、郑传胜、胡登杰、田鹏鹏贵州商业高等专科学校计科系CommercialCollegeOfGuiZhou项目实训单项目编号3-2项目名称网页模板设计实训学时2学时一、【项目名称】：网页模板设计实训二、【项目类型】：□认知与验证型□综合与仿真型□设计与创新型三、【实训目的】：使学生了解模板的基础知识，掌握模板设计制作的基本技能，具备企业网站模板设计制作的能力，完成各小组真实企业网站模板设计四、【实训环境】：windowsxp；dreamweaver8；fireworks8五、【实训内容】：1、网页模板设计：2、利用fireworks切割源图片；3、将从fireworks切割的区域依次放置到表格的各单元格中；4、dreamweaver中添加可编辑区域；5、利用模板文件快速生成网站页面；六、【讨论记录】站点：忆梦站点组长：杨江组员：胡登杰、郑传胜、田鹏鹏分工：杨江负责站点定义、超级连接、绘制表格胡登杰负责讨论记录郑传胜负责图片处理和切图田鹏鹏负责页面生成七、【实训步骤】：网页模板设计：步骤一，打开设计制作出的表格及实设计出的网站样图步骤二，利用fireworks切割源图片，使用按钮，选取被切割的区域，并选择菜单栏的文件选项选择“导出”图像，保存为相应的文件名。
步骤三，将从fireworks 切割的区域依次放置到表格的各单元格中，完成各图片的插入后，将文件另存为网页模板（“文件”“另存为模板”）文件，取名为moban.dwt。
步骤四，在模板中“当前位置”及“正文”出添加可编辑区域，“插入”“模板对象”“可编辑区域”，之后保存模板。
步骤五，新建文件，选择从模板创建，依次创建系列文件，可编辑区域中插入事先已经准备好的内容，还没有内容的部分，输入“某某”页面建设中，最后相互建立链接，形成网站体系。
大学网页设计与制作教案
课程名称：网页设计与制作授课教师： [教师姓名]授课班级： [班级名称]授课时间： [具体时间]课时安排： 2课时教学目标：1. 知识目标：- 了解网页设计的基本概念、原则和流程。
- 掌握HTML、CSS和JavaScript的基本语法和常用标签。
- 熟悉网页布局技术，如Flexbox和Grid。
- 学习使用常用的网页设计工具，如Dreamweaver、HBuilder等。
2. 能力目标：- 能够独立设计和制作简单的网页。
- 能够运用所学知识解决实际网页设计问题。
- 培养团队协作能力和创新思维。
3. 素质目标：- 培养学生对网页设计的兴趣和审美能力。
- 增强学生的动手实践能力和解决问题的能力。
- 培养学生的创新意识和终身学习的能力。
教学内容：第一课时1. 导入：- 通过展示一些优秀的网页设计作品，激发学生的学习兴趣。
- 简要介绍网页设计的发展历程和现状。
2. 网页设计的基本概念：- 介绍网页设计的定义、原则和流程。
- 讲解网页设计的基本要素，如色彩、字体、布局等。
3. HTML基础：- 介绍HTML的基本语法和常用标签。
- 讲解HTML文档结构、头部信息、段落、链接、图片等标签的使用。
4. CSS基础：- 介绍CSS的基本语法和常用属性。
- 讲解CSS选择器、字体、颜色、布局等属性的使用。
第二课时1. JavaScript基础：- 介绍JavaScript的基本语法和常用语句。
- 讲解JavaScript的变量、数据类型、运算符、函数等概念。
2. 网页布局技术：- 介绍Flexbox和Grid布局技术。
- 讲解如何使用这些技术实现响应式网页设计。
3. 网页设计工具：- 介绍Dreamweaver、HBuilder等网页设计工具。
- 讲解如何使用这些工具进行网页设计和开发。
4. 实践练习：- 学生分组，根据所学知识设计一个简单的网页。
- 教师进行指导和点评。
教学方法：- 讲授法：讲解网页设计的基本概念、原则和流程。
网页制作课程设计报告完整版
《网站制作》课程设计系别：信息技术系专业：班级：姓名：学号：指导老师：李枫完成日期：2015年07月9日目录《网站制作》课程设计 (1)目录 (2)一、设计任务与要求 (3)课设目的 (3)课设内容 (3)具体要求 (3)设计环境 (3)二、设计方案 (3)三．实现过程 (3)四、心得体会 (17)五、参考资料 (18)六、附录 (19)1、网站效果图 (19)2、网站中各网页屏幕截图 (19)一、设计任务与要求课设目的1、复习巩固网站设计与制作的基础知识：HTML、CSS和JS，进一步加深对Photoshop制作网页效果图、Dreamweaver布局网页等技术的理解和掌握，培养学生策划和制作商业网站的实践能力。
2、训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、音视频资料、flash动画和网页特效等，提高学生的美工设计能力。
3、课程设计为学生提供了一个既动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的分析解决实际问题的能力。
课设内容针对目前互联网上的网站制作背景和需求，策划、设计与制作一个完整的商业网站。
具体网页的内容自拟，但以下网站主题可供参考、选择：1、图书销售网站2、学校网站3、旅游网站4、摄影网站5、公司宣传网站6、驾校网站7、精品课程网站8、婚庆网站9、团购网站10、政府网站……具体要求1、动手制作网页之前：必须认真做好网站的需求分析，包括市场调查，定位网站目的，策划好网站的主题及功能定位，创意出网站的风格和亮点，确定网页色彩基调。
图1 网站结构图 规划好网站的风格和结构，网站主要内容及板块，各板块的具体内容及功能。
分析出“网站层次结构图”、 “网页版面设计”，以及“网站策划方案”。
2、创建完善的目录结构：站点文件夹采用英文单词命名，站点文件夹中所包含文件夹：images （存放图片文件）flash （存放动画文件）css （存放CSS 样式表文件）js （存放JS 脚本文件）other （存放其它文件）源文件 （存放自己设计的PS 源文件、Flash 源文件）首页命名为index.html ，其余文件全部用英文命名3、制作网页前，收集好所需的文字资料、图像资料、网页特效。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（3）单击确定按钮，如果图像文件在站点文件 夹中，就会直接插入到网页中，同时在编辑 窗口显示出图像。
网页制作
张伟
网页的风格1
2
“搜狐”的主页的内容很丰富，色彩鲜艳并有 许多大幅广告和浮动广告栏。
网页的风格2
3
微软中国的主页，内容比较专一，内容非 常有条理，栏目突出，没有凌乱的感觉。
网页的风格3
4
“黑白音乐” 是一个个人主页，它看起来 更简单，色彩也不够丰富，但感觉非常清新。
班级主页
班级主页
本节要点
7
❖设置网页属性
❖利用表格布局
❖拆分、合并单元格
❖插入图像
设置网页属性
8
➢网页标题
➢设置背景图片
利用表格布局
9
1.新建表格
（1）将插入工具栏切换到“常用”模式，单击表格按钮
（2）在表格对话框中设置表格的样式。 （3）单击“确定”按钮就可以把表格插到网页中。
（4）在表格的各个单元格中分别输入内容。
拆分、合并单元格
10
1.合并单元格
拖动选中要合并的单元格，单击属性面板上的合并单 元格按钮
2.拆分单元格
在要拆分的单元格中单击，在单击属性面板上的拆 分单元格按钮
3.插入或删除行、列
使用菜单“插入”→“表格”菜单中的插入行或 列，删除行或列进行相应的操作。
插入图像
11
• 插入图像的步骤如下 ：
（1）把工具栏切换到“常用”状态，然后单击 “图像：图象”按钮