《第三章网页制作》教学设计
网页设计教学计划
网页设计教课计划一、课程的性质与任务课程的性质：本课程是为培育中职学生对网页设计与制作的基础知识而设置的一门专业实训课程。
因为网页设计与制作所波及的软件和有关知识十分宽泛，针对我校学生的专业方向和专业基础，本课程重视于网页视觉成效和版式布局的设计与制作，对大中型网站制作中的所波及到的动向程序编写等较复杂技术手段作了回避或仅作简单介绍。
课程的任务：经过本课程学习，使学生认识网页制作的基础知识、基本流程，并能娴熟使用MacromediaDreamweaver进行个人网站和中小型商业网站的设计、制作与保护更新，为培育高级网页设计专业人材打下坚固的基础。
二、教课基本要求经过课程的教课，在理论知识教课和技术培育双方面要修业生达到以下目标。
(一)理论知识方面主要达到：认识互联网、网页、网站、超级连结、HTML语言、FTP、HTTP等基础网络知识;认识网站设计制作的常用工具与基本流程认识html语言的一般规律认识不一样网站种类不一样的设计与制作要求认识网站的整体构造规划(二)能力方面主要达到：娴熟掌握MacromediaDremweave的基本操作;掌握photoshop中网页设计稿文件的切片与优化输出;掌握网页图像的优化技巧;认识网站的测试、公布、推行与保护;三、教课条件保障每个学生都能独自使用一台电脑，每台电脑都装备Dreamweaver、photoshop等设计软件。
四、教课内容及课时安排第一章网页设计基础知识(4课时)第一节网页设计概括第二节在DreamweaverCS3中成立站点第三节创立站立点地图第四节设置Web服务器第二章网页的编写(4课时)第一节文本操作第二节图像操作第三章网页的布局(4课时)第一节表格第二节在布局模式下绘制布局表格第三节框架第四章超链接的创立与管理(4课时)第一节超链接和路径概括第二节超链接的使用第五章CSS款式表与行为(5课时)第一节使用CSS款式表第二节行为及简单应用第六章AP元素和时间轴(4课时)第一节使用AP元素第三节AP元素时间轴配合使用的动向成效第七章表单的使用(6课时)第一节创立表单网页第二节创立留言簿第三节考证表单内容第八章图像和动画的制作与优化 (4课时)第一节图像的制作与优化第二节动画的制制与优化第九章网站文件的检查与公布(2课时)第一节网站文件的检查与测试第二节注册域名、申请空间与网站公布第十章综合训练(4课时)第一节网站的规化第三节网站的上传公布、存案和保护五、教法说明(一)本课程是一门专业技术训练课程，以学生的实践操作为主，着重设计与制作能力的培育、经验与技巧的累积。
第三章 网页编辑
新建一个个人网站主页index.htm，对自己的 简要情况，兴趣爱好，所学专业等进行简要的 介绍。 要对网页中文本的格式进行设置，包括字形， 字号，加粗，下划线等效果。 插入自己的一张照片，并使用照片属性对其设 置，做到美观大方。 在不同的栏目之间用水平线进行分割。 在网页底部插入当前日期和时间。 用列表项列出自己的兴趣爱好。
第3章 网页编辑
3.1 网页的基本操作
3.1.1 新建网页 Dreamweaver提供了多种创建网页的方法，下面分 别介绍一下：（演示3-1） 1．如果Dreamweaver MX 2004 运行后显示起始页， 则在起始页中直接选择“新建HTML文档”。 2．如果Dreamweaver MX 2004运行后不显示起始 页，则在“文件”菜单选择“新建”命令，打开“新建 文档”对话框。 3．在文档窗口中，也可以直接按Ctrl+N组合键，打 开 “新建文档”对话框。
3.2 在网页中添加文本和图片
3.2.1 在网页中添加文本 1.添加文本 2）复制文本 打开字处理软件下含有文本的文档，如word 文档，执行“编辑”菜单中的“复制”命令复制 文本。然后在Dreamweaver文档窗口中，将插入 点置于要添加文本的位置，执行“编辑”菜单中 的“粘贴”命令，完成文本复制。
3.3 创建列表项
3.3.4修改列表属性（演示3-16） 首先将文字按照无序或有序列表方式 进行列表设置，然后将光标移到列表文字 中。单击“文本属性面板”中的“列表项 目”按钮，或者执行“文本”菜单下的子 菜单“列表”中的“属性”菜单命令，弹 出“列表属性”对话框。 介绍对话框的主要内容和功能。
上机操作指导
准备工作： 1. 首先启动Dreamweaver，确保已经用 站点管理器建立好了一个网站（根目录）。 2. 为了制作方便，最好事先打开资源管 理器，把要使用的图片收集到网站目录 images文件夹内。
网页制作教案
网页制作教案课程名称：网页制作教学目标：1.了解网页制作的基本概念和原则。
2.掌握网页设计的基本技巧和工具。
3.培养学生的创造力和团队合作能力。
4.通过实践项目，提高学生的问题解决和解决方案设计能力。
年级水平：初中高中课时数：10课时教学材料：1.计算机或笔记本电脑2.网页设计软件（如Adobe Dreamweaver）3.网页制作教材或参考书籍4.案例分析和示例网站课程安排：第一课：网页制作基础（1课时）- 介绍网页制作的定义和目的- 解释HTML和CSS的基本概念- 示范如何创建HTML文件并在浏览器中查看第二课：网页布局与设计（1课时）- 解释网页布局的重要性和原则- 演示如何使用CSS创建简单的网页布局- 强调网页设计的可读性和美观性第三课：文本和图像处理（1课时）- 讲解HTML中文本和图像标签的用法- 指导学生如何在网页中插入文本和图像- 鼓励学生使用样式和对齐技巧来提高页面的可视化效果第四课：超链接和导航（1课时）- 介绍超链接的概念和作用- 演示如何创建内部和外部链接- 引导学生设计网站导航菜单第五课：多媒体和互动元素（1课时）- 解释如何在网页中嵌入音频和视频- 演示如何创建表单和添加交互元素- 鼓励学生设计交互式网页元素以增加用户体验第六课：响应式网页设计（1课时）- 解释响应式网页设计的概念和原则- 演示如何使用媒体查询和流式布局创建响应式网页- 强调在不同设备上测试和优化页面的重要性第七至八课：案例分析与实践项目（2课时）- 分析和讨论一些成功的网站案例- 指导学生进行网页设计项目，包括规划、设计和实施阶段- 提供指导和反馈，帮助学生改进他们的网页设计技能第九至十课：项目呈现与总结（2课时）- 学生展示他们的网页设计项目- 分享项目中的挑战和解决方案- 提供指导和建议以进一步完善他们的设计作品- 结束课程时，总结学生的学习成果和进步评估方法：1.课堂参与和表现评估2.项目成果评估3.网页设计作品展示和评估备注：以上教案仅供参考，具体的教案内容和安排可根据实际情况进行调整和优化。
《网页的制作》教案【优秀3篇】
一、教学目标1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；2、认识FRONT的界面；3、掌握在主页中插入文字、图片、水平线；4、掌握页面文件与图片的保存。
二、教学重点1、能在指定位置建立只有一个网页的站点（难点）2、能在页面中插入文字、图片、水平线3、掌握页面文件与图片的保存（难点）三、学情分析四、教学方法在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。
五、教学过程设计教师活动：1、引入课题：（激发兴趣，活跃气氛）同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）浏览新浪网站，浏览的第一个页面称为什么？（主页）我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。
问题1：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，通过超链接把不同的页面链接起来）问题2：网页是不是就是主页？（第一个页面称为主页，网站设计者可以确定哪一个是主页，主页的文件名一般为：index.htm,主页也是网页）设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。
今天我们学习用Frontpage建立站点，制作一个主页。
先来研究一下没有发布的网站，打开教师做的网站问：同学们看到了什么？（文件夹）总结：可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。
打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。
请学生浏览教师课件，了解学习任务2、新建站点FP的启动问：与word比较，有什么不同？总结：预览窗口：浏览器中出现的效果，与PowerPoint中的“放映幻灯片”类似。
Html窗口：编写HTML（超文本标记语言，它是描述网页内容和外观的标准。
网页制作教程第3章
3.2.2 插入图像
(2) 在【选择图像源文 对话框中点选【 件】对话框中点选【文 件系统】单选钮， 件系统】单选钮，在 ch3】 【ch3】文件夹的列表 框中选择要插入的图像 文件，单击【确定】 文件，单击【确定】按 如图3 所示。 钮，如图3-6所示。弹 出【图像标签辅助功能 属性】对话框。 属性】对话框。
3.1.1 添加文本
2. 插入空格 若要在文本中插入空格，可执行下列操作之一。 在菜单栏中选择【插入记录】→【HTML】→ 【特殊字符】→【不换行空格】命令。 按<Ctrl>+<Shift>+<空格>组合键。 在【插入】工具栏的【文本】选项卡中，选 择【字符】下拉列表框中的【不换行空格】命令。
3.1 添 加 文 本
3.1.1 添加文本 3.1.2 设置文本格式
3.1.1 添加文本
1. 插入文字 若要将文字添加到网页文档中，可执行下列操 作之一。 ◆直接在【文档】窗口中输入文字。 ◆从其他应用程序中复制文本，切换到 Dreamweaver，将插入点定位在【文档】窗口的【设 计】视图中，然后在菜单栏中选择【编辑】→【粘 贴】命令。 ◆在菜单栏中选择【编辑】→【选择性粘贴】命 令，弹出【选择性粘贴】对话框，然后选择需要的 选项。
3.3 添 加 声 音
3.3.1 适合网页使用的声音格式 3.3.2 链接到声音文件 3.3.3 嵌入声音文件
3.3.1 适合网页使用的声音格式
MIDI格式 1. MIDI格式 MIDI是 乐器数字接口” MIDI是“乐器数字接口”(Musical Instrument Digital Interface)的简称 其扩展名为MID MIDI记录的不是声音本 的简称， MID。 Interface)的简称，其扩展名为MID。MIDI记录的不是声音本 而是将每个音符记录为一个数字， 身，而是将每个音符记录为一个数字，从而形成声音文件的格 MIDI格式文件声音效果的好与差 格式文件声音效果的好与差， 式。MIDI格式文件声音效果的好与差，与用户计算机声卡质量 有直接关系。很小的MIDI MIDI格式文件就可以提供较长时间的声音 有直接关系。很小的MIDI格式文件就可以提供较长时间的声音 剪辑。 剪辑。 MP3格式 2. MP3格式 MP3格式 是运动图像专家组音频第3 格式， MP3格式，是运动图像专家组音频第3层(Motion Picture Layer-3)，或称为MPEG音频第3 MPEG音频第 Experts Group Audio Layer-3)，或称为MPEG音频第3层的一 种压缩格式，它可使声音文件明显缩小。MP3文件的声音质量 种压缩格式，它可使声音文件明显缩小。MP3文件的声音质量 非常好，如果正确录制和压缩mp3文件，其音质甚至可以和CD mp3文件 非常好，如果正确录制和压缩mp3文件，其音质甚至可以和CD 音乐相媲美。MP3技术用户可以对文件进行 流式处理” 技术用户可以对文件进行“ 音乐相媲美。MP3技术用户可以对文件进行“流式处理”，以 便用户不必等待整个文件下载完成即可收听该文件。 便用户不必等待整个文件下载完成即可收听该文件。
《网页设计与制作》课程教案
《网页设计与制作》课程教案第一章：网页设计与制作概述1.1 课程介绍网页设计与制作的基本概念网页设计与制作的目的与意义网页设计与制作的应用领域1.2 网页设计原则网页设计的基本原则用户体验设计原则响应式网页设计原则1.3 网页制作工具与技术网页设计软件的选择与使用HTML与CSS的基本语法与使用方法JavaScript的基础知识与应用第二章：网页布局与排版2.1 网页布局的基本概念网页布局的定义与作用常见的网页布局方式布局元素的分类与使用2.2 排版的原则与方法排版的基本原则文本的格式化与排版图片与多媒体元素的排版2.3 响应式网页布局与排版响应式网页布局的概念与意义媒体查询的使用方法布局与排版在不同设备上的应用第三章：网页色彩与字体3.1 色彩的基本概念与应用色彩的视觉效应与心理作用色彩的搭配原则与技巧色彩在网页设计中的应用案例3.2 字体的选择与使用字体的分类与特点字体的搭配原则与技巧字体在网页设计中的应用案例3.3 网页色彩与字体的综合应用色彩与字体的协调与平衡字体大小与行距的设置与调整色彩与字体的个性化应用与创新第四章：网页图片与多媒体元素4.1 网页图片的选择与处理图片的格式与特点图片的选择标准与技巧图片的处理与优化方法4.2 多媒体元素的应用音频与视频元素的应用动画与GIF图片的应用交互式多媒体元素的应用4.3 网页图片与多媒体元素的优化图片与多媒体元素的加载优化图片与多媒体元素的响应式应用图片与多媒体元素的视觉效果与用户体验第五章：网页交互与动画5.1 网页交互的基本概念与原理交互的定义与作用交互的实现方式与技术交互的设计原则与技巧5.2 JavaScript基础与应用JavaScript的基本语法与功能事件处理与DOM操作JavaScript库与框架的选择与使用5.3 网页动画的实现与优化CSS动画的制作方法与技巧JavaScript动画的制作方法与技巧动画的加载优化与性能考虑第六章：HTML与CSS高级应用6.1 表单设计与验证表单的基本结构与属性表单元素的使用与布局表单验证的实现方法6.2 网页组件设计与实现导航栏与面包屑的制作折叠面板与标签页的制作轮播图与幻灯片的设计与实现6.3 网页动画与过渡效果CSS过渡与动画的实现JavaScript动画的实现方法动画的性能优化与调试第七章：前端框架与库7.1 前端框架的基本概念前端框架的作用与优势常见的前端框架介绍框架的选择与使用7.2 Bootstrap框架的应用Bootstrap的基本结构与组件栅格系统与布局设计Bootstrap表单与样式定制7.3 React与Vue框架的选择与应用React框架的基本概念与使用方法Vue框架的基本概念与使用方法框架项目结构与组件化开发第八章：网页兼容性与优化8.1 网页兼容性基本概念浏览器兼容性的原因与挑战兼容性测试的方法与工具兼容性解决方案与最佳实践8.2 网页性能优化网页加载速度的影响因素图片与多媒体元素的优化代码压缩与合并技巧8.3 搜索引擎优化（SEO）SEO的基本概念与原则关键词研究与内容优化代码优化与站点结构调整第九章：网页安全与维护9.1 网页安全基本概念网页安全的威胁与挑战跨站脚本攻击（XSS）的预防跨站请求伪造（CSRF）的预防9.2 数据备份与恢复数据备份的重要性与方法数据库备份与文件备份恢复策略与流程9.3 网站维护与更新网站维护的内容与流程网站更新的方法与技巧网站监控与性能调优第十章：项目实践与案例分析10.1 项目实践流程项目需求分析与规划设计阶段与实现阶段项目测试与上线流程10.2 项目案例分析案例一：个人博客网站设计与制作案例二：电子商务网站设计与制作案例三：响应式企业官网设计与制作项目过程中的问题与解决方法网页设计与制作的趋势与展望重点和难点解析1. 第一章：网页设计与制作概述难点解析：网页设计原则的理解与应用、网页制作工具与技术的熟练运用2. 第二章：网页布局与排版难点解析：响应式网页布局与排版的设计与实现3. 第三章：网页色彩与字体难点解析：色彩与字体的协调与平衡、字体大小与行距的设置与调整4. 第四章：网页图片与多媒体元素难点解析：网页图片与多媒体元素的优化方法、响应式应用5. 第五章：网页交互与动画难点解析：JavaScript事件的处理与DOM操作、动画的实现与优化6. 第六章：HTML与CSS高级应用难点解析：表单验证的实现方法、网页组件的布局与样式设计7. 第七章：前端框架与库难点解析：框架的选择与使用、React与Vue框架的选择与应用8. 第八章：网页兼容性与优化难点解析：兼容性解决方案与最佳实践、网页性能优化的实施方法9. 第九章：网页安全与维护难点解析：预防跨站脚本攻击（XSS）与跨站请求伪造（CSRF）的策略、网站维护与更新的方法10. 第十章：项目实践与案例分析难点解析：项目需求的分析与规划、项目测试与上线流程的控制本教案《网页设计与制作》涵盖了网页设计与制作的基本概念、技术应用、项目实践等各个方面。
《网页制作》教案
《网页制作》教案第一章：网页制作基础知识1.1 教学目标让学生了解网页制作的基本概念让学生掌握HTML和CSS的基本语法让学生了解网页制作的基本流程1.2 教学内容网页制作基本概念介绍HTML和CSS的基本语法介绍网页制作的基本流程介绍1.3 教学方法讲授法：讲解网页制作的基本概念、HTML和CSS的基本语法演示法：演示网页制作的基本流程1.4 教学评估课堂练习：让学生编写简单的HTML和CSS代码课后作业：让学生完成一个简单的网页制作任务第二章：HTML基本标签2.1 教学目标让学生掌握HTML的基本标签及其使用方法2.2 教学内容文本标签：`<p>`、`<h1>` ~ `<h6>`、`<br>`等图片标签：`<img>`标签：`<a>`列表标签：`<ul>`、`<ol>`、`<li>`、`<dl>`、`<dt>`、`<dd>`2.3 教学方法讲授法：讲解各个标签的作用和基本属性练习法：让学生通过练习掌握各个标签的使用方法2.4 教学评估课堂练习：让学生编写含有文本、图片、和列表的HTML代码第三章：CSS样式设计3.1 教学目标让学生掌握CSS的基本语法和使用方法让学生了解常用的CSS选择器和属性3.2 教学内容CSS基本语法：选择器、属性、值、注释内联样式：`style`属性内部样式表：`<style>`标签外部样式表：`.css`文件常用的CSS选择器和属性：`id`、`class`、`tag`、`attribute`等3.3 教学方法讲授法：讲解CSS的基本语法和常用选择器、属性练习法：让学生通过练习掌握内联样式、内部样式表和外部样式表的使用方法3.4 教学评估课堂练习：让学生编写含有内联样式、内部样式表和外部样式表的HTML代码第四章：布局与设计4.1 教学目标让学生掌握HTML和CSS的布局与设计方法4.2 教学内容盒模型：`margin`、`padding`、`border`、`width`、`height`等浮动布局：`float`、`clear`等定位：`position`、`top`、`right`、`bottom`、`left`等响应式设计：媒体查询、`max-width`、`min-width`等4.3 教学方法讲授法：讲解盒模型、浮动布局、定位和响应式设计的基本概念和用法练习法：让学生通过练习掌握各种布局与设计方法4.4 教学评估课堂练习：让学生编写一个具有多种布局与设计效果的网页代码第五章：网页特效与交互5.1 教学目标让学生掌握HTML和CSS实现简单网页特效与交互的方法5.2 教学内容鼠标悬停效果：`:hover`伪类动画与过渡：`animation`、`transition`等事件处理：`onclick`、`onmouseover`、`onmouseout`等JavaScript基础：变量、函数、条件语句、循环语句等5.3 教学方法讲授法：讲解鼠标悬停效果、动画与过渡、事件处理和JavaScript基础练习法：让学生通过练习掌握各种网页特效与交互的实现方法5.4 教学评估课堂练习：让学生编写一个具有鼠标悬停效果、动画与过渡、事件处理和简单交互的网页代码第六章：表单与数据验证6.1 教学目标让学生掌握HTML表单的基本用法让学生了解CSS在表单设计中的应用让学生学会使用JavaScript进行数据验证6.2 教学内容表单标签：`<form>`、`<input>`、`<textarea>`、`<select>`等表单属性：`type`、`name`、`value`、`placeholder`等CSS在表单设计中的应用：`label`、`fieldset`、`legend`等数据验证方法：正则表达式、JavaScript函数6.3 教学方法讲授法：讲解表单标签、属性和CSS在表单设计中的应用演示法：演示数据验证的实现方法练习法：让学生通过练习掌握表单和数据验证的实现方法6.4 教学评估课堂练习：让学生编写一个具有表单和数据验证功能的网页代码第七章：多媒体与嵌入式内容让学生掌握HTML中多媒体和嵌入式内容的基本用法7.2 教学内容音频和视频标签：`<audio>`、`<video>`图片标签：`<img>`嵌入式内容：`<iframe>`、`<embed>`、`<object>`多媒体属性：`src`、`controls`、`autoplay`、`loop`等响应式多媒体：`max-width`、`height`、`srcset`等7.3 教学方法讲授法：讲解多媒体和嵌入式内容的标签和属性练习法：让学生通过练习掌握多媒体和嵌入式内容的实现方法7.4 教学评估课堂练习：让学生编写一个含有音频、视频、图片和嵌入式内容的网页代码第八章：JavaScript进阶8.1 教学目标让学生掌握JavaScript的基本语法和高级特性让学生学会使用JavaScript进行复杂交互设计8.2 教学内容基本语法：变量、函数、条件语句、循环语句等对象和数组：`document`、`window`、`Array`、`Object`等事件处理：`addEventListener`、`attachEvent`等高级特性：闭包、原型链、异步编程（Promise、async/awt）等讲授法：讲解JavaScript的基本语法和高级特性练习法：让学生通过练习掌握JavaScript编程方法8.4 教学评估课堂练习：让学生编写一个利用JavaScript实现复杂交互功能的网页代码第九章：网页优化与性能提升9.1 教学目标让学生了解网页优化的重要性让学生掌握网页优化的方法和技巧9.2 教学内容代码优化：减少代码体积、提高代码效率资源优化：图片压缩、雪碧图、CSS Sprites、CDN等性能检测工具：浏览器开发者工具、PageSpeed Insights、Lighthouse等响应式设计：媒体查询、`max-width`、`min-width`等9.3 教学方法讲授法：讲解网页优化方法和技巧实践法：让学生使用性能检测工具进行实际网页性能分析9.4 教学评估课后作业：让学生分析并优化一个实际存在的网页性能问题第十章：网页制作项目实战10.1 教学目标让学生学会将所学知识应用于实际项目培养学生独立完成网页制作的能力10.2 教学内容项目选题：选择一个实际网页制作项目项目分析：分析项目需求、功能模块、技术选型等项目实施：按照分析结果进行网页制作项目评价：评价项目的完成情况、性能、可维护性等10.3 教学方法讲授法：讲解项目选题、分析和评价的方法实践法：让学生独立完成实际项目10.4 教学评估课后作业：让学生提交完成的实际项目并进行评价重点和难点解析1. 第五章：网页特效与交互2. 第六章：表单与数据验证3. 第八章：JavaScript进阶4. 第九章：网页优化与性能提升5. 第十章：网页制作项目实战全文总结和概括：本文针对《网页制作》教案中的五个章节进行了重点和难点的解析。
中职《网页制作》课程教案3章
9.（5）插入“鼠标经过图像”效果：①将光标放到倒数第二段结束位置。②选择“插入”|“图像对象”|“鼠标经过图像”。③在“图像名称”文本框中输入名称。选择“原始图像”右侧的“浏览”按钮，选中图像，单击“确定”。选择“鼠标经过图像”右侧的“浏览”按钮，选中另一张图像，单击“确定”。勾选“预载鼠标经过图像”复选框。在“替换文本”中输入“主题图像”。④单击“确定”，属性面板中对齐方式为“右对齐”。⑤按F12预览。
10.（6）插入日期：①将最下面一行单元格的“水平”设为“居中对齐”。②在“插入日期”对话框中勾选“存储时自动更新”。（7）插入特殊字符：选择“插入”|“HTML”|“特殊符号”——如果需要更多特殊字符，可单击“其他字符”选项。
11.制作超链接：①将光标放到第二行单元格，在属性面板中设为水平居中。②输入“主页”、“足球明星”、“足球新闻”——结合39页2.示范插入空格的3种方法。③做好3个链接。7、保存网页：选择“文件”|“保存”。按F12预览。
（3）具有一定的科学思维方式和判断分析问题的能力。
（4）具有良好的软件应用能力。
教学
重点
与
难点
重点
（1）设置文本属性。（2）设置图片属性。
难点
（1）设置CSS目标规则。（2）使用规则样式的方法。
5.添加页面元素：（1）插入文本①将me.txt文件的内容复制粘贴到第3行单元格中。结合38页3.2.1和3.2.2讲解插入文本和换行操作。
6.②选中标题“我与足球”在属性面板中单击“CSS”按钮，单击居中对齐按钮，名称为“biaoti”，单击“确定”，对齐方式为“水平居中”。③字体为“华文彩云”——结合P42调出这种字体。大小为24，颜色为#999900，粗体，斜体。其他正文属性采用默认值。
《第三章网页制作》教学设计
《第三章网页制作》教学设计王军一、教学目标设计（一）教学对象分析在学习本章节之前，学生已初步具备获取信息的能力，他们学习了网络基础知识，掌握了网络信息的浏览、搜索和下载以及电子邮件的收发、文件传输等技能。
学生希望自己能制作网页，并将网页发布。
因此学生对本章学习的兴趣很大。
学生在学习本章节前已经学过OFFICE应用软件的使用方法，并掌握一定的文字编辑和图片处理的技巧，这对于本章的学习非常有利。
（二）教材内容分析1．教学内容简介及教学重点与难点本章主要内容是让学生学习FrontPage 2003网页制作工具的使用，并利用FrontPage 2003制作网页。
本章分为四节：第一节介绍网页、主页、子页的概念以及网页所包含的主要元素。
第二节介绍利用FrontPage 2003制作简单网页的全过程。
第三节介绍美化网页的各种方法。
第四节简明扼要地介绍网页发布的方式和方法。
2．课型特征本章书主要课型为应用软件的学习课，以掌握应用软件的使用方法，并使用软件解决实际问题为目的。
（三）教学目标[基本目标]1．知识与技能（1）了解网页、主页和子页的概念。
（2）了解网页所包含的主要元素。
（3）掌握FrontPage 2003的启动和退出。
（4）熟悉FrontPage 2003的窗口组成。
（5）掌握创建、打开网站的操作步骤。
（6）能熟练地建立、打开、关闭、保存、预览网页、浏览网页。
（7）掌握制作网页的全过程。
（8）理解表格在网页中的作用。
（9）熟悉表格的组成，掌握创建表格、表格操作、表格编辑的方法。
（10）掌握表格和单元格的属性设置方法。
（11）掌握在网页中插入图像和动画的方法。
（12）掌握对网页中的图形进行剪裁和插入文本的方法。
（13）能根据实际需要使用不同的超链接，合理地组织网页。
（14）掌握装扮网页文本的方法。
（15）能为网页添加合适的网页背景图案和背景音乐。
（16）掌握在网页中插入滚动字幕、横幅广告管理器和悬停按钮的方法。
网页设计教学大纲(共3篇)
网页设计教学大纲〔共3篇〕第1篇：网页设计教学大纲网页设计教学大纲一、课程性质与任务1、课程性质《网页设计与制作》是中计算机专业开设的一门专业必修课，是计算机类专业的一门理论环节课程，也可以作为其他相关专业的理论课程或选修课，它是一门操作性和理论性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件Dreamweaver cs3，通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能纯熟地制作出有专业水准的网站。
2、课程任务本门课程在专业教学方案中起着非常重要的作用，通过这门课程，学生可以掌握以下技能和知识：* 掌握网站的开发流程，如建站规划、效果图制作、建立站点等相关知识。
* 掌握各种网页元素在Dreamweaver cs3中的使用。
例如表格、文本、图像、超级链接、层和表单等。
* 熟悉一些网页设计辅助软件的功能和使用方法。
例如Flash、Fireworks、Photoshop等。
* 掌握测试和发布网站的方法。
包括网站测试的内容和方法。
* 可以解决一些网页设计中的常见问题。
* 理解ASP开发平台的搭建，Dreamweaver cs3在动态网页制作方面的应用。
二、课程教学目的与要求1、本课程的根本目的〔1〕使学生通过本课程的学习，掌握Dreamweaver cs3的使用方法，学会使用Dreamweaver cs3制作Web网页的技术。
〔2〕本课程学习完毕后，学生应能自行设计各种网页、开发一定规模的网站，使学生通过本课程的学习，纯熟掌握其根本制作方法和技巧，并最终设计一个综合性的网站并且编制简单的脚本上传到互联网上。
2、课程在知识、素质方面的根本要求〔1〕知识要求深化理解Inter，理解、、HTML等概念及作用；掌握网站设计和发布的1 流程。
理解网站维护管理的意义及重要性，理解效劳器、客户端、阅读器的概念和作用；理解多种网页制作软件和图像处理软件相结合设计网站的好处。
理解Dreamweaver cs3在动态网站上的应用。
计算机基础实训作业-第3章 网页设计实验
第三章网页设计实验1 网站的创建和管理一、实验目的1、学会创建网站。
2、理解网站与网页的概念，了解网站结构。
3、掌握网站中网页的基本编辑方法。
二、实验内容和步骤1、创建一个新站点在Dreamweaver中使用“站点定义向导”创建一个本地新站点。
（1）选择“站点”|“新建站点”命令，打开站点定义对话框的“基本”选项卡，在“您打算为您的站点起什么名字”文本框中输入新建站点的名称，如图3-1所示。
图3-1站点定义对话框（2）单击“下一步”按钮，在“编辑文件，第2部分”选项区中，显示是否选择使用的服务器技术，这里选择“否，我不想使用服务器技术”单选按钮。
（3）单击“下一步”按钮，在“编辑文件，第3部分”选项区的“您将把文件存储在计算机的什么位置？”文本框中输入站点文件存放的位置或者点击右边的文件夹图标在本地计算机选择一个文件夹（例：E:\MySite\），没有输入或选择将使用系统默认值。
（4）单击“下一步”按钮，将站点定义对话框的“共享文件”选项区的“您如何连接到远程服务器”下拉列表框中选择“无”选项。
（5）单击“下一步”按钮，将站点定义对话框的“总结”选项区中，将显示以上设置步骤的详细信息。
（6）单击“完成”按钮，一个本地新站点已经创建完成。
此时选择“窗口”|“文件”命令，在打开的“文件”面板中将显示创建的新站点，如图3-2所示。
图3-2 “文件”面板（7）要设置本地文件夹，可以选择“站点”|“管理站点”命令，将打开管理站点对话框，如图3-3所示。
在左侧的列表中选择“我的站点”或对应的站点，在右侧选择“编辑”命令，将显示“本地信息”的所有参数设置选项，如图3-4所示。
如果显示的是如图3-1的站点定义对话框，点击上面的“高级”标签即可切换到如图3-4所示。
图3-3 管理站点对话框图3-4 本地信息对话框2、在站点中创建一个新的网页（1）在文档窗口中，选择“文件”|“新建”命令，在打开的“新建文档”对话框中选择要创建的文档类型，如图3-5所示。
网页设计教学教案
网页设计教学教案第一章：网页设计概述1.1 教学目标了解网页设计的概念与意义掌握网页设计的基本原则与要求了解网页设计的发展趋势1.2 教学内容网页设计的概念与意义网页设计的基本原则与要求网页设计的发展趋势1.3 教学方法讲授法：讲解网页设计的概念、原则与要求展示法：展示优秀的网页设计案例，分析其设计思路与技巧1.4 教学步骤引入话题：介绍网页设计的概念与意义讲解基本原则与要求：强调用户体验、界面美观、内容清晰等原则分析发展趋势：介绍响应式设计、扁平化设计等趋势课堂练习：学生自行设计一个简单的网页布局1.5 作业布置要求学生完成一个简单的网页设计布局，包括头部、主体内容、底部等部分第二章：网页设计与制作基本工具2.1 教学目标掌握网页设计与制作的基本工具学会使用HTML、CSS、JavaScript等语言进行网页制作2.2 教学内容HTML：介绍HTML的基本结构与标签CSS：介绍CSS的语法与使用方法JavaScript：介绍JavaScript的基本语法与功能2.3 教学方法讲授法：讲解HTML、CSS、JavaScript的基本概念与使用方法实践操作法：学生实际操作，掌握基本语法与使用技巧2.4 教学步骤讲解HTML：介绍HTML的基本结构与标签，如、段落、图片等讲解CSS：介绍CSS的语法与使用方法，如选择器、属性、样式表等讲解JavaScript：介绍JavaScript的基本语法与功能，如弹窗、动态效果等课堂练习：学生自行设计一个简单的网页，并使用HTML、CSS、JavaScript实现一些基本效果2.5 作业布置要求学生完成一个简单的网页，并使用HTML、CSS、JavaScript实现一些基本效果，如导航栏、图片轮播等第三章：网页布局与排版3.1 教学目标掌握网页布局与排版的方法与技巧学会使用div标签进行布局掌握CSS样式表的编写方法3.2 教学内容网页布局的方法与技巧使用div标签进行布局CSS样式表的编写方法3.3 教学方法讲授法：讲解网页布局的方法与技巧展示法：展示优秀的网页布局案例，分析其设计思路与技巧实践操作法：学生实际操作，掌握布局方法与技巧3.4 教学步骤讲解网页布局的方法与技巧：介绍网格布局、浮动布局等方法讲解使用div标签进行布局：介绍div标签的使用方法与布局技巧讲解CSS样式表的编写方法：介绍选择器、属性、样式表等语法课堂练习：学生自行设计一个简单的网页布局，使用div标签与CSS样式表实现3.5 作业布置要求学生完成一个简单的网页布局，使用div标签与CSS样式表实现，包括头部、主体内容、底部等部分第四章：网页配色与图片处理4.1 教学目标掌握网页配色原则与技巧学会使用图片处理软件进行图片处理掌握CSS样式表中图片样式编写方法4.2 教学内容网页配色原则与技巧图片处理软件的使用方法CSS样式表中图片样式编写方法4.3 教学方法讲授法：讲解网页配色原则与技巧展示法：展示优秀的网页配色案例，分析其设计思路与技巧实践操作法：学生实际操作，掌握配色方法与技巧4.4 教学步骤讲解网页配色原则与技巧：介绍对比、调和、重复等配色原则讲解图片处理软件的使用方法：介绍Photoshop、Fireworks等软件的使用技巧讲解CSS样式表中图片样式编写方法：介绍图片样式、响应式图片等语法课堂练习：学生自行设计一个简单的网页配色，并使用图片处理软件进行图片处理4.5 作业布置要求学生完成一个简单的网页配色，并使用图片处理软件进行图片处理，将处理后的图片应用到网页中第五章：网页第六章：响应式网页设计6.1 教学目标理解响应式网页设计的概念与重要性掌握媒体查询的使用方法学会创建适应不同设备的网页布局6.2 教学内容响应式网页设计的概念与重要性媒体查询的使用方法响应式布局技术6.3 教学方法讲授法：讲解响应式网页设计的理念与技术展示法：展示响应式网页设计案例，分析其设计要点实践操作法：学生动手实践，尝试创建响应式网页布局6.4 教学步骤引入响应式网页设计概念：解释响应式网页设计的目的与优势讲解媒体查询：介绍媒体查询语法与用法，演示如何适应不同屏幕尺寸实践响应式布局：学生通过实际操作，使用CSS媒体查询实现响应式布局课堂练习：学生设计一个响应式网页布局，测试其在不同设备上的显示效果6.5 作业布置要求学生完成一个响应式网页布局设计，包括媒体查询的使用，适应手机、平板、桌面电脑等不同设备。
网站建设与网页制作_第三章_在网页中插入文本
网站建设与网页制作
3.6 文本和段落的HTML标记 文本和段落的HTML标记 和段落的HTML
HTML编辑和运行环境 3.6.2 HTML编辑和运行环境
因为HTML是一个文本文件 ， 所以可以使用任何一个 是一个文本文件， 因为 是一个文本文件 文本编辑器进行编写，它通过浏览器来解释执行。 文本编辑器进行编写 ， 它通过浏览器来解释执行 。 我们一 般采用纯文本文档编辑器， 般采用纯文本文档编辑器，如Windows中的记事本来编辑 中的记事本来编辑 HTML文件。 文件。 文件
网站建设与网页制作
3.5 插入标尺和网格 插入标尺和网格
3.5.2 插入网格
网格是用做在网页文档窗口的设计视图中对层进行绘制、 网格是用做在网页文档窗口的设计视图中对层进行绘制、定位或 大小调整的可视化向导，可以使网页元素在被移动时， 大小调整的可视化向导，可以使网页元素在被移动时，自动靠齐到网 格； 网格设置：执行菜单“查看” 网格设置” 网格设置”命令； 1. 网格设置：执行菜单“查看” “网格设置” “网格设置”命令； 显示/关闭网格：执行菜单“查看” 网格设置” 2. 显示/关闭网格：执行菜单“查看” “网格设置” 选择勾选 “显示网格”命令； 显示网格”命令； 启用和禁用网格靠齐：执行菜单“查看” 网格设置” 3. 启用和禁用网格靠齐：执行菜单“查看” “网格设置” 选择勾 选“靠齐到网格”命令； 靠齐到网格”命令；
网站建设与网页制作
3.6 文本和段落的HTML标记 文本和段落的HTML标记 和段落的HTML
HTML的基本结构 3.6.3 HTML的基本结构
下面我们开始编写一个简单HTML文档： 下面我们开始编写一个简单HTML文档： 文档 <html> <head> <title>第一个HTML示例</title> </head> <body> HTML的基本结构。 </body> </html>
《第三单元第七课网页制作》作业设计方案-初中信息技术新世纪18七年级上册自编模拟
《网页制作》作业设计方案（第一课时）一、作业目标本次《网页制作》第一课时的作业设计旨在培养学生以下能力：1. 了解网页的基本概念与构成要素。
2. 掌握使用相关软件创建基本网页的方法和技巧。
3. 培养学生的创新思维和实际操作能力，通过制作个人或小组网页来展示所学知识。
二、作业内容1. 理论学习：学生需预习网页制作的基本知识，包括网页的布局、色彩搭配、图片和文字的排版等。
2. 软件操作：学生需熟悉并掌握网页制作软件的基本操作，如建立新网页、插入文字、图片、超链接等。
3. 创意设计：学生需结合个人兴趣或小组主题，设计并制作一个包含多个页面的简单网站框架。
4. 内容填充：为每个页面添加相应的文字内容、图片或视频等多媒体元素，并调整页面布局以符合美观与功能的要求。
三、作业要求1. 每个小组或个人需独立完成作业，鼓励创新与个性表达。
2. 网页设计应简洁明了，色彩搭配合理，页面布局协调美观。
3. 每个页面应包含明确的标题和内容，信息表达准确无误。
4. 使用的图片、文字等素材需符合版权法规，不得使用非法或侵权内容。
5. 提交的作业需包括完整的网页文件及必要的源文件，方便教师评估与指导。
四、作业评价1. 教师将根据网页的创意性、技术性、美观度和信息准确性等方面进行评价。
2. 小组或个人之间可互相评价，提出改进意见和建议。
3. 评价结果将作为学生平时成绩的一部分，鼓励学生在后续课程中继续努力。
五、作业反馈1. 教师将在课堂上对每位学生的作业进行点评，指出优点和不足。
2. 对于创意独特、技术娴熟的作业，将在班级内进行展示，以资鼓励。
3. 对于存在问题的作业，教师将提供具体的改进意见和建议，帮助学生提高网页制作水平。
4. 学生需根据教师的反馈意见进行修改和完善，准备下一课时的学习。
通过以上作业设计，旨在让学生在实践中掌握网页制作的基本技能，同时培养他们的创新思维和团队协作能力。
通过不断的练习和反馈，学生将逐步提高自己的网页制作水平，为后续的深入学习打下坚实的基础。
《第三单元 第七课 网页制作》作业设计方案-初中信息技术新世纪18七年级上册自编模拟
《网页制作》作业设计方案（第一课时）一、作业目标本节课的作业旨在帮助学生掌握网页制作的基本概念和技能，了解网页的基本结构和制作方法，提高他们的信息处理和创新能力。
通过完成作业，学生将能够掌握基本的网页制作工具和软件，并能够独立完成简单的网页制作任务。
二、作业内容1. 任务一：创建一个简单的网页模板要求：学生需要使用网页制作软件（如Dreamweaver、Frontpage等）创建一个基本的网页模板，包括标题、段落、图片、链接等基本元素。
内容：学生需要自行设计网页的布局和风格，确保页面美观、整洁、易于阅读。
同时，需要确保页面内容符合相关法律法规和道德规范。
时间：30分钟评价标准：页面布局合理、内容简洁明了、符合规范。
2. 任务二：添加动态效果和交互功能要求：学生需要在已创建的网页模板中添加一些动态效果和交互功能，如鼠标悬停效果、动态图片、交互式表单等。
内容：学生需要自行设计动态效果和交互功能的实现方式，可以使用已有的插件或自行编写代码。
时间：40分钟评价标准：添加的动态效果和交互功能符合需求，实现方式合理、简洁、易于维护。
三、作业要求1. 独立完成：学生需要自行设计和实现作业任务，不能抄袭或使用他人成果。
2. 创新性：学生需要尝试使用不同的方法和工具来完成任务，提高自己的创新能力和信息处理能力。
3. 安全性：在实现动态效果和交互功能时，需要遵守相关法律法规和道德规范，不得使用违法或不安全的插件或代码。
4. 提交作业：学生需要将完成的作业成果以电子文档的形式提交，可以是图片、PDF、Word等形式。
四、作业评价1. 评价标准：根据学生的作业成果进行评价，包括页面布局、内容质量、创新性等方面。
2. 评价方式：教师评价和学生互评相结合，教师主要对学生的作业成果进行总体评价，而学生互评则可以促进学生的交流和学习。
3. 评价结果：根据评价结果，给予学生相应的成绩和反馈，指出优点和不足，并提供改进建议。
五、作业反馈1. 学生反馈：学生需要向教师反馈自己在完成作业过程中遇到的问题和困难，以便教师能够更好地了解学生的学习情况，并及时给予帮助和支持。
《第三单元第七课网页制作》作业设计方案-初中信息技术新世纪18七年级上册自编模拟
《网页制作》作业设计方案（第一课时）一、作业目标本课时作业设计旨在培养学生网页制作的基本技能，让学生掌握网页的基本构成元素和布局设计原则，学会使用简单的HTML代码进行网页的排版与初步制作。
通过本课时作业的完成，使学生能自主创建具有基础信息技术的个人或小组网页作品。
二、作业内容作业内容主要包括以下四个部分：1. 了解网页基础知识：学生需了解网页的基本构成元素，如标题、段落、图片、链接等，并熟悉网页的布局和设计原则。
2. 学习HTML代码：学生需要学习简单的HTML代码，包括标题标签、段落标签、图片标签等，并学会如何使用这些标签进行基本的网页排版。
3. 制作个人或小组网页：学生需根据所学知识，自主设计并制作一个简单的个人或小组网页。
要求至少包含标题、若干段落、至少一张图片以及适当的链接等元素。
在制作过程中，学生需注意网页的布局和美观性。
4. 提交作业：学生需将完成的网页作品以电子文件的形式提交，同时需附上作业完成过程的简要说明或心得体会。
三、作业要求作业要求如下：1. 按时完成：学生需在规定的时间内完成作业，不得拖延。
2. 内容完整：学生制作的网页需包含基本的构成元素，布局合理，内容完整。
3. 代码规范：学生书写的HTML代码需符合规范，标签配对正确，语义清晰。
4. 美观性：网页设计应注重美观性，色彩搭配合理，图片质量高。
5. 创新性：鼓励学生在完成基本要求的基础上，加入自己的创意和想法，使网页更具特色。
四、作业评价作业评价将从以下几个方面进行：1. 完成度：评价学生是否按时完成作业，内容是否完整。
2. 正确性：评价学生HTML代码的书写是否规范，语义是否清晰。
3. 美观性：评价网页的布局和设计是否美观大方，色彩搭配是否合理。
4. 创新性：评价学生在完成基本要求的基础上，是否加入了自己的创意和想法。
五、作业反馈教师将对每位学生的作业进行认真批改，给出详细的评价和建议。
对于优秀作品，将在课堂上进行展示和表扬；对于存在问题的地方，教师将给出具体的指导建议，帮助学生改进和提高。
《第三单元第七课网页制作》作业设计方案-初中信息技术新世纪18七年级上册自编模拟
《网页制作》作业设计方案（第一课时）一、作业目标本作业设计旨在通过第一课时的学习与实践，使学生掌握网页制作的基本概念、网页布局与规划的初步知识，并能够独立完成一个简单的个人网页设计。
通过实际操作，培养学生独立思考和解决问题的能力，以及创新意识和团队协作精神。
二、作业内容1. 理论学习：学生需认真阅读教材中关于网页制作的基本概念、网页布局与规划的章节，并观看教师提供的视频教程，理解并掌握相关知识点。
2. 规划与设计：学生需根据自己的兴趣和需求，确定一个主题，进行网页内容的规划与草图设计。
要求学生注意网页的布局合理性、色彩搭配及内容与主题的契合度。
3. 素材准备：学生需准备必要的图片、文字等素材，图片应符合网页主题，文字应简洁明了，能够准确传达信息。
4. 制作实践：利用信息技术课程所学的网页制作软件，根据规划和设计，制作出符合要求的个人网页。
在制作过程中，学生应注重页面的整体风格和细节处理。
三、作业要求1. 学生在完成作业过程中，应遵循教师所提供的操作步骤和要求，确保作业的规范性和准确性。
2. 学生在制作网页时，应注意页面的布局和色彩搭配，确保页面美观大方、内容丰富。
3. 学生在提交作业时，需将个人网页的源代码文件和预览文件一并提交，方便教师进行批改和评价。
4. 作业提交前，学生需对个人网页进行充分测试，确保页面在不同设备和浏览器下均能正常显示。
四、作业评价教师将根据学生提交的个人网页的布局设计、色彩搭配、内容丰富度以及页面的可读性和完整性等方面进行评价。
同时，鼓励同学之间相互评价、互相学习、共同进步。
五、作业反馈1. 教师将在批改后将作业情况反馈给学生，对优秀的个人网页进行表扬和鼓励，对存在的不足和问题进行指导和建议。
2. 同学们也可通过课堂讨论、小组讨论等形式，互相学习和交流个人网页的制作经验和技巧，以便进一步提高网页制作水平。
六、后续教学安排后续课业将继续深化网页制作技能的学习和实践，教师将逐步引入更多先进的技术和设计理念，为学生的信息素养和创新能力的提升提供更多帮助。