网页设计与制作项目各单元教学导航
网页设计与制作项目教程单元1 网页赏析、创建站点与浏览网页
三、URL URL（英文Uniform Resource Locator的缩写）中文译为“统一资 源定位符”。
URL其实就是Web地址，俗称“网址”。
四、DNS
DNS（英文Domain Name System的缩写）是域名解析系统。
在Internet上域名与IP地址之间是一一对应的，域名（例如人民邮 电出版社的域名为）虽然便于人们记忆，但计算机 只认识IP地址，将好记的域名（英文Hypertext transfer protocol的缩写）中文译为超文本传输 协议。它是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
六、Web
Web本意是蜘蛛网和网的意思。对于网站设计、制作者来说，它是 一系列技术的复合总称（包括网站的前台布局、后台程序、美工、数据 库开发等），我们称它为网页。
动态网页显示的内容则会随着用户操作和时间的不同而变化。动态 网页使用语言为HTML+ASP 或HTML+PHP或HTML+JSP等。
在服务器端运行的程序、网页、组件，属于动态网页，它们会随不 同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、、 CGI等。
区别静态网页与动态网页最重要的一点——程序是否在服务器端运 行，这是最重要的标志。
在弹出的窗口中便会显示当前网页的源代码，具体效果截图如图 1-3所示。
图1-2 单击鼠标右键弹出的菜单栏
图1-3 京东商城官方网站首页源代码
图1-3即为京东商城官方网站首页的源文件，它是一个纯文本文件， 仅包含一些特殊的符号和文本。
而我们浏览网页时看到的图片、视频等，其实是这些特殊的符号 和文本组成的代码被浏览器渲染之后的结果。
工业和信息化“十三五”高职高专人才培养规划教材
（完整版）《网页设计与制作》课程教案
（完整版）《网页设计与制作》课程教案《网页设计与制作》课程教案一、课程定位本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。
本课程的目的和任务是让学生学会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 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
网页设计与制作课程教学大纲
《网页设计与制作》课程教学大纲1000字一、课程名称：网页设计与制作二、课程性质：专业选修三、先修课程：计算机基础、HTML语言基础、CSS样式基础、JavaScript基础四、课程目的：本课程旨在培养学生熟练掌握网页设计和制作所需的技能和知识，包括从网站设计和规划到页面布局和导航、从图像和多媒体素材的处理到网页代码开发的全过程。
五、教学内容：1.网站设计和规划（1）需求分析与目标设定（2）信息架构设计（3）网站页面设计2.页面布局与导航（1）CSS样式技术（2）网页布局设计（3）导航设计3.视觉设计（1）颜色与图像设计（2）多媒体素材处理（3）响应式设计技术4.网页代码开发（1）HTML语言与标签（2）CSS样式（3）JavaScript脚本5.网页制作（1）网页编辑器使用（2）网页调试与测试（3）网页发布和维护六、教学方法：课堂讲授、案例分析、实践操作、课程论文七、成绩评定方式：平时成绩占30%，包括参与度、作业完成度等；考试成绩占70%。
八、教材：1.《Web页面设计基础》2.《HTML5与CSS3基础教程》3.《JavaScript权威指南》九、参考资料：1.《Web标准设计》2.《响应式Web设计》3.《图解CSS3》4.《实战Bootstrap》十、实验操作：实践操作是课程的重要组成部分。
通过实验操作，学生将掌握网页设计和制作的实际技能和经验。
实验操作包括：1.网站规划和设计2.网页布局与导航3.视觉设计和处理4.网页代码开发和调试5.网页发布和维护十一、教学进度安排：第一周：课程介绍和网站设计和规划第二周：网页布局与导航第三周：视觉设计和处理第四周：HTML语言与标签第五周：CSS样式第六周：JavaScript脚本第七周：网页编辑器使用第八周：网页调试与测试第九周：网页发布和维护第十周：课程总结和复习，期末考试。
（完整版）《网页设计与制作》课程教学大纲.docx
（完整版）《网页设计与制作》课程教学大纲.docx《网页设计与制作》课程教学大纲课程名称：网页设计与制作学分及学时： 4 学分总学时72学时，理论36 学时适用专业：网络工程开课学期：第四学期开课部门：计算机与互联网学院先修课程：计算机文化基础计算机网络考核要求：考试使用教材及主要参考书：向知礼主编：《网页设计与制作》航空工业出版社2017 年杨松主编：《网页设计案例教程》航空工业出版社2015 年一·课程性质和任务：本课程全面地介绍网页制作技术的基本理论和实际应用。
全书共10 章，分为 3 大部分。
前 5 章为第 1 部分，主要介绍网页制作的基本理论——HTML，同时穿插介绍Fireworks，Flash，Anfy 等软件在网页制作过程中的应用；第 6 章～第 8 章为第 2 部分，主要介绍网页制作技术，包括CSS技术、客户端脚本技术(DHTML)以及XML 技术；第9 章～第 10 章为第3 部分，主要介绍当前最流行的网页制作工具——Dreamweaver ，通过应用实践能够从实际应用的角度进一步巩固所学知识。
课程内容不但包括各种网页制作技术的基础理论，而且强调网页制作的具体应用，使读者既能打下坚实的理论基础，又能掌握实际的操作技能。
二·课程教学目的与要求以Dreamweaver 的使用为主线，介绍网页制作的相关技术。
使学生理解网页制作的基本概念和理论 ,掌握站点的建立和网页的设计 ,能用 HTML 语言修改网页 ;掌握网页制作和站点的基本知识 ;掌握站点的创建和网页的编辑 ;掌握超链接、图像、 CSS样式的使用 ;掌握表格、框架、表单、多媒体对象的使用; 理解行为、模板、库、CSS布局的概念和使用 ;理解 HTML 语言、网站的测试与的发布；要求：教学过程中，须注重学生实践操作能力的培养，采取“面向实践、能力为先”的教学思路，教学内容应结合当前WEB 技术的发展趋势，把握未来企业级WEB 页面开发的发展方向，兼顾各行各业的需求变化，力争面向社会，服务于企业“互联网+”战略。
《网页设计与制作》学习指南
学习指南《网页设计与制作》网络资源共享课程由网上学习、教学互动等部分组成，由于该课程是一门实践性和应用性很强的技术专门课程，因此还要求学习者参与每个任务所规定的实验及实训等实践性教学环节的训练。
网上学习部分的内容充分利用了计算机、INTERNET、多媒体等技术手段, 采用文本图片、音频、视频、动画、案例、网站等多种表现形式，全面系统介绍网页设计与制作的知识。
实践性教学环节含实验和实训等内容，由每个任务具体给出，学生应认真按照具体指导及要求完成实验和实训的训练，着重培养理论联系实际的能力，培养实际动手能力及实验技能，培养分析问题与解决问题的能力。
本课程是一门“教、学、做”一体化的学习领域课程，在学习本课程时，不仅要重视知识技能的学习，还应重视实践性教学环节、团队协作等，要完成一定数量的实践和实训课题，在反复运用中加深理解和巩固所学的知识。
经过与企业工程师反复讨论，根据网站的一般开发流程，我们设计四个真实的网站建设项目作为教学素材，根据教学规律进行优化，形成了本课程的教学项目。
这四个项目分别是：项目一：“银帝矿业”企业网站建设（第一版）。
这是一个导引项目，定位于“我教---你学”。
主要用于教师教学示范和学生技术体验，是“边学边做”的教学过程，项目二：“银帝矿业”企业网站建设（第二版）。
这是一个是训练项目，定位于“你做---我导”，主要用于巩固提高，训练学生操作能力，以学生自己动手做为主，教师的作用是解决学生在做的过程中出现的问题，是“做中学”的训练过程。
项目三：工学结合项目。
这是一个强化项目，定位于“你做---我评”，主要用于强化学生网页设计与制作的综合能力，教师的作用是从用户的角度对网页设计效果进行评价，是“技能提升”的过程。
项目四：岗位工作项目。
这是一个综合项目，定位于“你做---用户评”，这个项目安排在企业进行，由企业兼职指导教师带领学生参加真实项目的设计与制作，学生参与用户需求分析、项目规划、设计与制作全过程，作品将直接由用户评价，是“工学结合”的过程。
(完整版)《网页设计与制作》项目教学计划表.doc
《网页设计与制作》项目教学计划学期： 2016 春学期科任老师：任课班级： 15 秋计 1、2、3 每周课时数： 6 节总教学方法 / 项目学周数任务任务目标教学（实训）内容考核评估要求手段时1. 知道网站、网页和主页的区别 1. DWCS5的启动及工作环境组成任务一 2. 懂得网页中的元素类型 2. 三种窗口的切换操作理实一体1．能够启动 DWCS5及熟悉其1 DreamweaverCS5的使 3. 知道从功能角度分析网页元素 3. 观看网页实例，分析其构成元任务驱动工作环境用 ( 下称 DWCS5) 的组成及作用素演示法2．理解网页相关的基础知识4. 学会 DWCS5的使用及工作环境 4. 实践操作1. 知道网站建设的一般流程 1. 站点建立1．理解网站建设的流程任务二 2. 学会站点的创建及管理编辑站 2. 站点目录下各子文件夹的建立2．能够根据要求建立站点及1 网站规划、创建及管点方法 3. 站点管理与编辑讲授法项目一站点相应的子文件夹理 3. 学会站点目录及子目录的创建 4. 实例操作制作3．初步能够管理建立的站点6 方法“我的第1． DWCS5的基本操作（文件菜单一个网页”1. 学会 DWCS5的基本操作：新建、的使用）保存、打开、预览、关闭及退出等 2. 三种视图窗口的切换1．能够学会 DWCS5的基本操任务三 2. 认识 DWCS5的属性等常用面板 3. 设置网页外观属性理实一体作1 制作：我的第一个网及其操作（包括：网页标题、页面默认字任务驱动 2. 能够进行设置网页外观属页 3. 学会三种视图窗口的切换操作体、背景颜色、背景图片、边距演示法性方法等） 3. 会打开常用面板及使用4. 学会网页的页面设置操作方法 4. 常用面板如属性的使用5. 任务实训2 任务一 1. 进一步学会站点建立及管理编 1. 建立任务的站点及站点设置理实一体学会网页内容（文本及图像）总教学方法 / 项目学周数任务任务目标教学（实训）内容考核评估要求手段时制作：“ 生态科普网”辑站点的操作 2. 管理站点任务驱动的基本操作首页 2. 学会将素材分类存放编辑多个网页文件演示法3. 进一步学会 DWCS5的基本操作创建文件或文件夹剪切、粘贴、复制、删除、重命名文件或文件夹1. 在网页中添加文本直接输入复制和粘贴项目二 1. 学会在网页中输入文本从其他文件导入理实一体学会网页内容（文本及图像）制作：12 任务二 2. 学会编辑网页中的文本 2. 设置文本的段落格式和字符格的格式化及插入水平线等操2 任务驱动“生态科在网页中添加文本 3. 学会网页中文本的输入与编辑式作演示法普网” 首页及格式化操作的方法 3. 添加空格4. 添加特殊符号5. 输入日期6. 输入水平线1. 学会网页中插入图像的操作方任务三法 1. 插入图像理实一体能够在网页中插入图像、制3 2. 学会制作鼠标经过图像的操作 2. 编辑图像任务驱动作鼠标经过图像、制作导航在网页中添加图像方法 3. 技能考核演示法条3. 学会制作导航条的操作方法任务一学会设置网页的内部链接与外部1. 内部链接理实一体能够制作网页的内、外部链4 2. 外部链接任务驱动网页的普通超链接链接的操作方法接效果演示法总教学方法 /项目学周数任务任务目标教学（实训）内容考核评估要求手段时1. 链接颜色实例展示任务二2. 已访问链接教师操作能够学会设置网页不同的链4 学会链接样式的设置方法 3. 变换图像链接演示超链接的样式设置接样式效果4. 活动链接学生动手5. 设置下划线实训任务三 1. 创建命名锚记理实一体5 学会锚点链接的设置方法任务驱动能够学会设置锚点链接锚点链接 2. 创建链接演示法任务四1. 选中图像理实一体能够学会设置网页图片热区5 学会图像热区域链接的设置方法 2. 使用热区域工具任务驱动图像热区链接链接3. 绘制热区演示法项目三制作：181. 电子邮件链接理实一体“祖国在任务五学会网页中其他几种特殊链接的能够学会在网页中设置电子5 2. 下载链接任务驱动我心中” 网其他链接设置方法邮件、下载链接及空链接3. 空链接演示法站任务六利用跳转菜单实现网页中的友情理实一体学会在网页中添加跳转菜单6 使用跳转菜单设置链学会跳转菜单的设置方法任务驱动链接及设置接演示法项目项目四用表格布局制作“北京鸟巢” 体育馆网页总学周数任务任务目标时任务七认识网页中链接触发脚本命令及6脚本链接简单使用1. 理解链接中的相对和绝对路径任务八 2. 理解链接的目标类型及功能63.超链接的管理初步学会站点链接资源的管理方法任务一7能够利用表格制作网页页眉表格布局——页眉任务二7能够利用表格制作网页导航栏表格布局——导航栏12任务三8能够利用表格制作网页信息栏表格布局——信息栏任务四8能够利用表格制作网页页脚表格布局——页脚教学方法 /教学（实训）内容考核评估要求手段1．添加到收藏夹理实一体2．关闭窗口任务驱动了解脚本链接的操作过程3．弹出一个提示对话框演示法4．设为默认主页1.链接路径的 3 种表达方式绝对路径理实一体相对路径任务驱动初步理解链接的管理及知识相对于站点根目录路径演示法2. 链接的更新与检查1.创建表格2.设置表格属性（宽、高、填充、间距、边框、对齐方式、理实一体能够利用表格进行网页布局背景）3.任务驱动及学会表格的基本操作在表格中添加或删除行、列4.演示法合并或拆分单元格5. 创建细线表格6. 技能考核总项目学周数任务任务目标时期中训练 6 9 任务一复习并进一步学会项目一至四知综合训练识点任务一作网页布局10 简化网页的编写了解框架的作用加快网页的浏览任务二项目五创建框架和框架集、学会框架和框架集的基本操作及使用框架1012 设置框架和框架集的属性设置布局“制作属性；旅游” 网站任务三学会利用超链接实现电子书中的11制作框架中的超链接页面跳转教学方法 /教学（实训）内容考核评估要求手段任务驱动制作综合网站知识技能复习演示法认识框架和框架集讲授法了解框架及其作用1.创建框架2.创建框架集3.选择框架和框架集4. 设置框架属性理实一体5. 设置框架集属性任务驱动学会框架及其基本操作6. 保存框架演示法7.保存框架集8.保存框架集中的所有文档9.编辑框架页1.制作电子书页面理实一体学会在网页中利用框架制作2.设置超链接任务驱动简单网页及框架中的链接如3.设置超链接的目标选项（难演示法电子书点）项目项目六使用多媒体元素制作“东方之珠”网页项目七利用层制作“中国八总学周数任务任务目标时学会添加 Flash 按钮的方法任务一学会添加 swf 动画的方法12加 FlashFlash 文件的应用学会添文本（ flashpaper ）的方法12任务二学会在网页中加入音频文件12 音频文件的应用任务三13视频文件的应用（插学会在网页中加入视频文件入FLV 视频）任务四学会Dreamweaver 中图像播放器13使用图像播放器的使用方法了解图层的的概念1214任务一学会在网页中创建图层的几种方创建图层法教学（实训）内容教学方法 /手段1．认识网页中的Flash 元素2．添加 Flash 按钮3．添加 swf 影片理实一体4. 添加 Flash 文本操作任务驱动（ flashpaper ）演示法5．在网页中设置透明的Flash 动画1. 认识网页中常用的音频文件理实一体2. 在页面中嵌入音频文件任务驱动3. 设置文件的播放效果演示法1．网页中常用的视频文件理实一体2．在页面中嵌入视频文件任务驱动3．设置文件的播放效果演示法在网页中使用图像播放器实现图理实一体片更迭任务驱动技能考核演示法1. 创建任意大小的图层理实一体2. 创建固定规格的图层任务驱动演示法考核评估要求能够在网页中添加 swf 动画等多媒体元素了解网页中常用的音频格式能够在网页中添加视频文件能够在网页中制作图像播放器效果了解图层概念、作用及相关知识总项目学周数任务任务目标时大菜系” 首页任务二14学会设置图层的方法设置图层15 任务三学会层的高级属性设置层的可见性设置项目八应用行为16 任务一了解行为基本内容6制作“制作应用行为编辑行为个人” 网站17 任务一认识、创建样式认识样式表* 项目九应用样式表制作“今6日新闻” 网17 任务二学会使用样式站使用样式表教学（实训）内容1.选择图层2.调整图层调整层的大小层的层次关系层的首选设置层的对齐3.设置图层内容1.层的显示、隐藏属性2.同时排列多个层3.更改层的重叠顺序1．认识行为、应用行为2．认识事件、动作3．编辑行为4．技能考核样式表的存储与创建应用样式：1．设定文本字体和大小，2．设定文本行间距，3．用样式制作特殊的边框4．为网页中的图像定义样式教学方法 /考核评估要求手段理实一体能够创建简单图层、基本操任务驱动作及其属性设置演示法理实一体能够设置图层的隐藏、显示任务驱动效果等演示法理实一体任务驱动了解行为在网页中应用演示法理实一体任务驱动认识样式表在网页中的功能演示法理实一体学会创建简单的样式及使用任务驱动样式表演示法训项目*项目十应用模板和库制作“金企鹅”网站*项目十一创建表单制作“商品订购” 界面期末训练合计总学周数任务任务目标时任务一18了解使用库项目使用库项目4任务二18了解使用模板使用模板应用文本域应用按钮418插入复选框和单选按学会简单表单网页的创建钮应用列表 / 菜单6 19108 ————教学（实训）内容1．把对象保存为库项目2．应用库项目3．修改库项目1.创建模板文档2.使用模板1．插入表单2．单行、多行文本段的添加3．制作用户登录界面4．插入复选框得单选按钮5．应用列表 / 菜单期末综合实训——教学方法 /考核评估要求手段理实一体任务驱动了解库及相关知识演示法理实一体任务驱动了解模板及相关知识演示法理实一体任务驱动学会简单表单的创建及设置演示法附：带有“ * ”为新增教学项目，根据学生对原教学项目的掌握情况，自由安排。
网页设计与制作教案(三栏式,比较规范,内容详实,图文并茂)
项目名称：制作“名车展示网”（一）授课时间：授课地点：授课班级：授课次数及课时：教学目标【知识目标】1、通过制作网页（而不是已往的浏览网页）了解网页、网站的概念。
2、了解链接的概念。
3、了解HTML代码中标签及属性的概念。
4、识记标签和属性的基本书写格式。
5、理解网页的本质及浏览器的功能。
【技能目标】1、掌握建立站点和网页的方法。
2、掌握向页面输入文字，插入图片的方法。
【情感目标】1、培养起对网站制作的兴趣。
2、培养与人协作的意识，锻炼与人协作的能力。
重点难点【重点】建立站点和网页的方法。
【难点】站点和文件夹的对应关系。
项目分析利用DW和提供的图片、文字素材制作“名车展示网”。
内含一个导航页面（首页）和三个分别介绍三种名车的页面。
此项目旨在让学生对网站的制作有一个感性的认识并培养他们对课程的兴趣，对页面的布局、美化不去涉及。
教学准备三款名车的图文和文字素材教学后记在课堂上可以再多分配一些时间给学生自己去探索，有些知识点学生自己经过尝试可以自己获得，这样他们对知识的印象会比老师告诉他们来得更深。
教学过程师生互动设计及设计意图教学方法一、展示将要完成的项目1.展示教师制作好了的网站——名车展示网2.进入网站的文件夹，引导学生观察网站的架构【教师活动】通过凌波展示网站（浏览），激发学生的学习热情和兴趣（汽车是学生比较喜欢的话题）【学生活动】观察【教师活动】进入网站文件夹，引导学生观察网站的架构，为下面的建立站点做铺垫。
提问：网页和图片分别怎样组织？【学生活动】讨论，回答【教师活动】点评，总结【教法】通过演示，启发引导学生思考，引导学生自己得出结论。
【教法】教师通过总结，对结论进行完善和强化。
二、演示建立站点的步骤，学生参照教师讲授自主建立网站1.通过引导学生观察网站文件夹，使学生了解网站和网页的概念，进而理解网站的组织方式，理解建网站时一些步骤的意义。
2.演示建立站点的步骤（1）建立好相关文件夹（2）进入“站点定义为”对话框，设置相关选项3.对操作中的难点和易错点进行再次强调【教师活动】先强调网站的架构方式，再演示用DW建立网站的步骤【学生活动】观察，理解，识记【教师活动】通过提问强化：1.站点名称和实际的文件夹名称需要相同吗？2. 站点名称和实际的文件夹名称可以用中文吗？【学生活动】操作，讨论→回答【教师活动】对以上的两个问题进行总结，以强化。
网页设计与制作 单元6 网页超链接与导航-任务6.2
谢 谢！
2020/9/7
21
任务6.2 设计网页导航
4．菜单导航 菜单导航主要有出式菜单和下拉菜单两种，出式菜单（一般与垂 直栏导航一起使用）和下拉菜单（一般与水平栏导航一起使用）是构 建健壮的导航系统的良好方法，它使得网站整体上看起来很整洁，而 且使得深层结构页面很容易被访问，如图所示。
任务6.2 设计网页导航
5．面包屑导航 面包屑导航是二级导航的一种形式，是辅助网站的主导航系统。 面包屑对于多级别、具有层次结构的网站特别有用，它可以帮助访客 知道当前自己在整个网站中所处的位置。如果访客希望返回到某一级， 只需要单击相应的面包屑导航项即可，如图所示。
单元6 网页超链接与导航 任务6.2 设计网页导航
任务6.2 设计网页导航
2020/9/7
2
任务6.2 设计网页导航
任务目标: （1）认识网页导航的主要作用； （2）掌握网页导航的分类与方向； （3）掌握用CSS创建网页水平导航与垂直导航的方法。
任务6.2 设计网页导航
6.2.1 网页导航概述 网页导航的目的是使网站的层次结构以一种有条理的方式清晰展 示出来，引导用户毫不费力地找到所需信息，使用户在浏览网站的过 程中不至于迷失。 它的作用概括起来主要有以下几个方面。 （1）定位显示位置。和现实生活不同，互联网无法体现类似东 西南北、前后左右的方向感，为使用户不迷失在庞大的互联网信息中， 需要由网页导航给用户提供信息来找到方向感，如“我在哪 里？”“这里有哪些内容？”“我还能去什么地方？”“怎样去？” 等。
任务6.2 设计网页导航
（2）展现网站架构。网页导航需要提供信息来展现整个网站内 容的架构，如网站包括哪几部分（如首页、公司简介、产品等）、主 要板块的内容分类（如当当网站按照商品种类划分产品）、每个分类 中的细化分类（往往称为二级菜单）、特殊信息的入口（如热点、新 闻等）。
《网页设计与制作——Dreamweaver CS3》项目05 制作导航网页
操作二 设置图像链接
项目五：
制作导航网页
本操作将通过图像【属性】面板来设置页眉中的图像超级链 接。通过本操作的学习，应该掌握的内容主要有：
任务一 任务二 任务三 实训 小结
1.设置图像超级链接的方法
首先选中图像，然后在图像【属性】面板的【链接】文本框 中输入图像的链接地址，在【目标】下拉列表中选择目标窗口的 打开方式。
在主菜单中选择【插入】／【图像对像】／【导航条】命令 或者在【插入】／【常用】面板中单击 （导航条）按钮，打 开【插入导航条】对话框进行设置即可。
网页设计与制作
Dreamweaver CS3
项目五：
制作导航网页
任务一 任务二 任务三 实训 小结
操作三 设置导航条
3.修改导航条的方法
如果要对导航条进行修改，可以通过【设置导航栏图像】行为进 行修改。方法是在导航条中选中其中一个按钮，打开【行为】面 板，在【行为】面板的动作栏中，双击事件下方的名称，打开 【设置导航栏图像】对话框，在该对话框中可以重新设置图像的 源文件及所指向的URL。这个对话框和当初插入导航条的对话框 是一样的，但又多了一个【高级】选项卡。如果焦点在当前的按 钮，而其他的按钮同时也发生变化，那么就必须设置【变成图像 文件】和【按下时，变成图像文件】这两项。由此看来，【设置 导航栏图像】动作是导航条功能的一个补充和延伸，是为方便导 航条创建后的修改而设立的。
网页设计与制作
（3）按下图像：按钮被单击后显现的状态。例如，当用户 单击按钮时，新页面被载入且导航条仍是显示的；但被单击过的 按钮会变暗或者凹陷，以表明此按钮已被按下。
（4）按下时鼠标经过图像：按钮被单击后，鼠标指针移动 到被按下元素上时显现的图像。例如，按钮可能变暗或变灰，可 以用这个状态暗示用户：在站点的这个部分该按钮已不能被再次 单击。
网页制作：项目05__制作教育导航网页--ppt
网页设计与制作
Dreamweaver 8
项目五：
制作教育导航网页
任务一 任务二 任务三 任务四 实训 小结
操作二 设置教育网站栏目
2.通过【页面属性】对话框设置文本超级链接状态的方法
(1) 打开【页面属性】对话框，切换至【链接】分类。 (2) 分别设置【链接颜色】、 【已访问链接】、【变换图像链接】 和【活动链接】的颜色。 (3) 在【下划线样式】下拉列表中选择其中一项，如“仅在变换 图像时显示下划线”。 (4) 在【链接】分类中，也可以设置超级链接的字体和大小。
网页设计与制作
Dreamweaver 8
项目五：
制作教育导航网页
任务一 任务二 任务三 任务四 实训 小结
操作三 设置优秀教案下载栏目
2.应该注意的问题
（1）下载超级链接并不是一种特殊的链接，它可以是文本 超级链接也可以是图像超级链接，而且添加链接的方法也一样， 只是下载超级链接所指向的文件是特殊的。一般指向压缩文件 （文件的扩展名是“.zip”、“.rar”等）、可执行文件（文件的扩 展名是“.exe”或者“.com”）等文件。
操作四 设置中国同学录栏目
首先选中图像，然后在图像【属性】面板的【链接】文本框中输 入图像的链接地址，在【目标】下拉列表中选择目标窗口的打开 方式，如“_blank”。
（完整版）《网页设计与制作》项目教学计划表.doc
（完整版）《网页设计与制作》项目教学计划表.doc《网页设计与制作》项目教学计划学期： 2016 春学期科任老师：任课班级： 15 秋计 1、2、3 每周课时数： 6 节总教学方法/ 项目学周数任务任务目标教学（实训）内容考核评估要求手段时1. 知道网站、网页和主页的区别 1. DWCS5的启动及工作环境组成任务一 2. 懂得网页中的元素类型 2. 三种窗口的切换操作理实一体1．能够启动 DWCS5及熟悉其1 DreamweaverCS5的使 3. 知道从功能角度分析网页元素 3. 观看网页实例，分析其构成元任务驱动工作环境用 ( 下称 DWCS5) 的组成及作用素演示法2．理解网页相关的基础知识4. 学会 DWCS5的使用及工作环境 4. 实践操作1. 知道网站建设的一般流程 1. 站点建立1．理解网站建设的流程任务二 2. 学会站点的创建及管理编辑站 2. 站点目录下各子文件夹的建立2．能够根据要求建立站点及1 网站规划、创建及管点方法 3. 站点管理与编辑讲授法项目一站点相应的子文件夹理 3. 学会站点目录及子目录的创建 4. 实例操作制作3．初步能够管理建立的站点6 方法“我的第1． DWCS5的基本操作（文件菜单一个网页”1. 学会 DWCS5的基本操作：新建、的使用）保存、打开、预览、关闭及退出等2. 三种视图窗口的切换1．能够学会 DWCS5的基本操任务三 2. 认识 DWCS5的属性等常用面板 3. 设置网页外观属性理实一体作1 制作：我的第一个网及其操作（包括：网页标题、页面默认字任务驱动 2. 能够进行设置网页外观属页3. 学会三种视图窗口的切换操作体、背景颜色、背景图片、边距演示法性方法等） 3. 会打开常用面板及使用4. 学会网页的页面设置操作方法 4. 常用面板如属性的使用5. 任务实训2 任务一 1. 进一步学会站点建立及管理编 1. 建立任务的站点及站点设置理实一体学会网页内容（文本及图像）总教学方法/ 项目学周数任务任务目标教学（实训）内容考核评估要求手段时制作：“ 生态科普网”辑站点的操作 2. 管理站点任务驱动的基本操作首页 2. 学会将素材分类存放编辑多个网页文件演示法3. 进一步学会 DWCS5的基本操作创建文件或文件夹剪切、粘贴、复制、删除、重命名文件或文件夹1. 在网页中添加文本直接输入复制和粘贴项目二 1. 学会在网页中输入文本从其他文件导入理实一体学会网页内容（文本及图像）制作：12 任务二 2. 学会编辑网页中的文本 2. 设置文本的段落格式和字符格的格式化及插入水平线等操2 任务驱动“生态科在网页中添加文本 3. 学会网页中文本的输入与编辑式作演示法普网” 首页及格式化操作的方法 3. 添加空格4. 添加特殊符号5. 输入日期6. 输入水平线1. 学会网页中插入图像的操作方任务三法 1. 插入图像理实一体能够在网页中插入图像、制3 2. 学会制作鼠标经过图像的操作 2. 编辑图像任务驱动作鼠标经过图像、制作导航在网页中添加图像方法 3. 技能考核演示法条3. 学会制作导航条的操作方法任务一学会设置网页的内部链接与外部1. 内部链接理实一体能够制作网页的内、外部链4 2. 外部链接任务驱动网页的普通超链接链接的操作方法接效果演示法总教学方法 /项目学周数任务任务目标教学（实训）内容考核评估要求手段时1. 链接颜色实例展示任务二2. 已访问链接教师操作能够学会设置网页不同的链4 学会链接样式的设置方法 3. 变换图像链接演示超链接的样式设置接样式效果4. 活动链接学生动手5. 设置下划线实训任务三 1. 创建命名锚记理实一体5 学会锚点链接的设置方法任务驱动能够学会设置锚点链接锚点链接 2. 创建链接演示法任务四1. 选中图像理实一体能够学会设置网页图片热区5 学会图像热区域链接的设置方法 2. 使用热区域工具任务驱动图像热区链接链接3. 绘制热区演示法项目三制作：181. 电子邮件链接理实一体“祖国在任务五学会网页中其他几种特殊链接的能够学会在网页中设置电子5 2. 下载链接任务驱动我心中” 网其他链接设置方法邮件、下载链接及空链接3. 空链接演示法站任务六利用跳转菜单实现网页中的友情理实一体学会在网页中添加跳转菜单6 使用跳转菜单设置链学会跳转菜单的设置方法任务驱动链接及设置接演示法项目项目四用表格布局制作“北京鸟巢” 体育馆网页总学周数任务任务目标时任务七认识网页中链接触发脚本命令及6脚本链接简单使用1. 理解链接中的相对和绝对路径任务八 2. 理解链接的目标类型及功能63.超链接的管理初步学会站点链接资源的管理方法任务一7能够利用表格制作网页页眉表格布局——页眉任务二7能够利用表格制作网页导航栏表格布局——导航栏12任务三8能够利用表格制作网页信息栏表格布局——信息栏任务四8能够利用表格制作网页页脚表格布局——页脚教学方法 /教学（实训）内容考核评估要求手段1．添加到收藏夹理实一体2．关闭窗口任务驱动了解脚本链接的操作过程3．弹出一个提示对话框演示法4．设为默认主页1.链接路径的 3 种表达方式绝对路径理实一体相对路径任务驱动初步理解链接的管理及知识相对于站点根目录路径演示法2. 链接的更新与检查1.创建表格2.设置表格属性（宽、高、填充、间距、边框、对齐方式、理实一体能够利用表格进行网页布局背景）3.任务驱动及学会表格的基本操作在表格中添加或删除行、列4.演示法合并或拆分单元格5. 创建细线表格6. 技能考核总项目学周数任务任务目标时期中训练6 9 任务一复习并进一步学会项目一至四知综合训练识点任务一作网页布局10 简化网页的编写了解框架的作用加快网页的浏览任务二项目五创建框架和框架集、学会框架和框架集的基本操作及使用框架1012 设置框架和框架集的属性设置布局“制作属性；旅游” 网站任务三学会利用超链接实现电子书中的11制作框架中的超链接页面跳转教学方法 /教学（实训）内容考核评估要求手段任务驱动制作综合网站知识技能复习演示法认识框架和框架集讲授法了解框架及其作用1.创建框架2.创建框架集3.选择框架和框架集4. 设置框架属性理实一体5. 设置框架集属性任务驱动学会框架及其基本操作6. 保存框架演示法7.保存框架集8.保存框架集中的所有文档9.编辑框架页1.制作电子书页面理实一体学会在网页中利用框架制作2.设置超链接任务驱动简单网页及框架中的链接如3.设置超链接的目标选项（难演示法电子书点）项目项目六使用多媒体元素制作“东方之珠”网页项目七利用层制作“中国八总学周数任务任务目标时学会添加 Flash 按钮的方法任务一学会添加 swf 动画的方法12加 FlashFlash 文件的应用学会添文本（ flashpaper ）的方法12任务二学会在网页中加入音频文件12 音频文件的应用任务三13视频文件的应用（插学会在网页中加入视频文件入FLV 视频）任务四学会Dreamweaver 中图像播放器13使用图像播放器的使用方法了解图层的的概念1214任务一学会在网页中创建图层的几种方创建图层法教学（实训）内容教学方法 /手段1．认识网页中的Flash 元素2．添加 Flash 按钮3．添加 swf 影片理实一体4. 添加 Flash 文本操作任务驱动（ flashpaper ）演示法5．在网页中设置透明的Flash 动画1. 认识网页中常用的音频文件理实一体2. 在页面中嵌入音频文件任务驱动3. 设置文件的播放效果演示法1．网页中常用的视频文件理实一体2．在页面中嵌入视频文件任务驱动3．设置文件的播放效果演示法在网页中使用图像播放器实现图理实一体片更迭任务驱动技能考核演示法1. 创建任意大小的图层理实一体2. 创建固定规格的图层任务驱动演示法考核评估要求能够在网页中添加 swf 动画等多媒体元素了解网页中常用的音频格式能够在网页中添加视频文件能够在网页中制作图像播放器效果了解图层概念、作用及相关知识总项目学周数任务任务目标时大菜系” 首页任务二14学会设置图层的方法设置图层15 任务三学会层的高级属性设置层的可见性设置项目八应用行为16 任务一了解行为基本内容6制作“制作应用行为编辑行为个人” 网站17 任务一认识、创建样式认识样式表* 项目九应用样式表制作“今6日新闻” 网17 任务二学会使用样式站使用样式表教学（实训）内容1.选择图层2.调整图层调整层的大小层的层次关系层的首选设置层的对齐3.设置图层内容1.层的显示、隐藏属性2.同时排列多个层3.更改层的重叠顺序1．认识行为、应用行为2．认识事件、动作3．编辑行为4．技能考核样式表的存储与创建应用样式：1．设定文本字体和大小，2．设定文本行间距，3．用样式制作特殊的边框4．为网页中的图像定义样式教学方法 /考核评估要求手段理实一体能够创建简单图层、基本操任务驱动作及其属性设置演示法理实一体能够设置图层的隐藏、显示任务驱动效果等演示法理实一体任务驱动了解行为在网页中应用演示法理实一体任务驱动认识样式表在网页中的功能演示法理实一体学会创建简单的样式及使用任务驱动样式表演示法训项目*项目十应用模板和库制作“金企鹅”网站*项目十一创建表单制作“商品订购” 界面期末训练合计总学周数任务任务目标时任务一18了解使用库项目使用库项目4任务二18了解使用模板使用模板应用文本域应用按钮418插入复选框和单选按学会简单表单网页的创建钮应用列表 / 菜单6 19108 ————教学（实训）内容1．把对象保存为库项目2．应用库项目3．修改库项目1.创建模板文档2.使用模板1．插入表单2．单行、多行文本段的添加3．制作用户登录界面4．插入复选框得单选按钮5．应用列表 / 菜单期末综合实训——教学方法 /考核评估要求手段理实一体任务驱动了解库及相关知识演示法理实一体任务驱动了解模板及相关知识演示法理实一体任务驱动学会简单表单的创建及设置演示法附：带有“ * ”为新增教学项目，根据学生对原教学项目的掌握情况，自由安排。
网页设计与制作项目教程(HTML+CSS+JavaScript)教学大纲
《网页设计与制作项目教程（HTML+CSS+JavaScript）》课程教学大纲（课程英文名称）课程编号：学分：5 学分学时：76 学时（其中：讲课学时：50 学时上机学时：26 学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI 设计、JavaScript 网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《网页设计与制作项目教程（HTML+CSS+JavaScript）》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML 标记、CSS 样式、网页布局、JavaScript 编程基础与事件处理等内容。
通过本课程的学习，学生能够了解 HTML、CSS 及 JavaScript 语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6四、课程的主要内容及基本要求项目1 网页制作基础知识学习单元项目1 网页制作基础知识学时4学时✧知识目标1、了解 Web 标准及基本概念学习目标2、熟悉 HTML、CSS 及 JavaScript 语言的发展历史✧技能目标1、掌握 Dreamweaver 工具的基本操作2、能够使用 Dreamweaver 创建简单的网页知识点了解掌握重点难点认识网页√网页相关的名词√Web 标准√HTML 语言简介√学习内容CSS 语言简介√JavaScript 语言简介√常见浏览器√Dreamweaver工具简介√(界面和初始化)创建第一个网页√项目2 “说旅游”专题页制作学习单元项目 2 “说旅游”专题页制作学时8学时✧知识目标1、掌握 HTML 文档结构2、了解 HTML 文档头部相关标记学习目标3、熟悉 HTML 文本控制标记4、掌握 HTML 图像标记✧技能目标1、掌握图文混排页面的制作技巧2、学会制作图文混排页面学习内容知识点了解掌握重点难点HTML 文档基本格式√HTML 标记（单标记与双√标记）标记属性√√HTML 文档头部相关标记√标题和段落标记√文本样式标记√（<font></font>标记）文本格式化标记√特殊字符标记√div 标记√√常用图像格式√切片√【项目实现】：准备工作√与页面布局【项目实现】：制作头部√模块【项目实现】：制作“伊露√岛”介绍模块【项目实现】：制作“伊露√岛”推荐模块【项目实现】：制作“驴友√评论”模块【项目实现】：制作页脚√模块项目3 “网上花店”专题页制作学习单元项目 3 “网上花店”专题页制作学时10学时✧知识目标1、了解 CSS 样式规则2、掌握 CSS 字体样式及文本外观属性学习目标3、熟悉 CSS 复合选择器4、掌握 CSS 层叠性、继承性与优先级✧技能目标1、掌握引入 CSS 样式表的不同方式2、学会控制页面中的文本外观样式知识点了解掌握重点难点CSS 样式规则√学习内容引入 CSS 样式表（行内、内嵌、链入）√CSS 基础选择器√CSS 字体样式属性√CSS 文本外观属性√CSS 定义背景颜色√CSS 复合选择器（标签指√定、后代、并集）CSS 层叠性与继承性√√CSS 优先级√√【项目实现】：布局及定√义基础样式【项目实现】：制作标题√模块【项目实现】：制作商品√分类模块【项目实现】：制作“热卖”√模块【项目实现】：制作品质√保障及店主模块项目4 “儿童摄影网”首页面制作学习单元项目 4 “儿童摄影网”首页面制作学时12学时✧知识目标1、了解盒子模型的概念2、掌握盒子的相关属性学习目标3、熟悉元素的类型与转换4、掌握元素的浮动与定位5、掌握清除浮动的方法✧技能目标1、能够使用 DIV 标记与浮动样式对页面进行布局知识点了解掌握重点难点认识盒子模型√边框属性√内边距属性√外边距属性√背景属性√盒子的宽与高√学习内容元素的类型√<span>标记√元素的转换√块元素垂直外边距的合√并元素的浮动属性√√清除浮动√√overflow 属性√元素的定位属性√静态定位√相对定位√绝对定位√固定定位√z-index 层叠等级属性√【项目实现】：布局及定√义基础样式【项目实现】：制作导航√及 banner 模块【项目实现】：制作最新√动态模块【项目实现】：制作样片√欣赏模块【项目实现】：制作页脚√及悬浮框模块项目5 “穿搭速递”首页面制作学习单元项目 5 “穿搭速递”首页面制作学时8学时✧知识目标1、掌握无序列表、有序列表及定义列表2、熟悉列表的嵌套学习目标3、掌握超链接标记4、掌握链接伪类✧技能目标1、能够使用无序列表、有序列表及定义列表对页面进行布局2、学会使用链接伪类控制页面中超链接的样式知识点了解掌握重点难点无序列表<ul> √有序列表<ol> √定义列表<dl> √列表的嵌套应用√list-style 复合属性√背景图像定义列表项目符√√学习内容号创建超链接（超链接标记√a）锚点链接√链接伪类控制超链接√√【项目实现】：布局及定√义基础样式【项目实现】：制作头部√导航模块【项目实现】：制作√banner 和精品展示模块【项目实现】：制作潮流√前沿模块【项目实现】：制作版权√信息模块项目6 “千年之恋”注册页面制作学习单元项目 6 “千年之恋”注册页面制作学时10学时✧知识目标1、理解表格的创建2、掌握表格样式的控制学习目标3、掌握表单相关标记4、熟悉表单样式的控制✧技能目标1、能够创建具有相应功能的表单控件2、学会通过控制表单样式美化表单界面知识点了解掌握重点难点表格的创建√<table>标记的属性√<tr>标记的属性√<td>标记的属性√<th>标记及其属性√CSS 控制表格边框√CSS 控制单元格边距√CSS 控制单元格的宽高√初识表单√创建表单√学习内容input 控件√√textarea 控件√select 控件√CSS 控制表单样式√√【项目实现】：布局及定√义基础样式【项目实现】：制作头部√及导航模块【项目实现】：制作√banner 及内容模块【项目实现】：制作页脚√模块项目7 “赶快回家网”首页面制作学习单元项目 7 “赶快回家网”首页面制作学时12学时✧知识目标1、掌握 JavaScript 基本语法2、掌握运算符和表达式的使用方法学习目标3、掌握条件语句、循环语句及跳转语句4、掌握 JavaScript 中函数的调用及变量的作用域✧技能目标1、能够通过运算符和表达式进行简单计算2、学会使用流程控制语句编写 JavaScript 程序知识点了解掌握重点难点JavaScript 简介√JavaScript 引入方式√JavaScript 基本语法√一个简单的JavaScript√程序关键字和标识符√变量和数据类型√运算符和表达式√条件语句√循环语句√跳转语句√初识函数√学习内容函数的调用√函数中变量的作用域√√【项目实现】：布局及定√义基础样式【项目实现】：制作头部√√模块【项目实现】：制作导航√模块【项目实现】：制作√√banner 和时间模块【项目实现】：制作客运√信息模块【项目实现】：制作版权√信息模块项目8 “学好英语网”首页面制作学习单元项目 8 “学好英语网”首页面制作学时12学时学习目标✧知识目标1、理解什么是对象2、掌握数组的常用属性和方法3、掌握节点的访问4、掌握 JavaScript 常用事件技能目标1、能够准确访问指定元素和相关元素2、学会通过触发事件完成 JavaScript 与对象之间的交互知识点了解掌握重点难点什么是对象√对象的属性和方法√对象的创建和删除√内置对象√初识数组√数组的常见操作√数组的常用属性和方法√二维数组√BOM 对象√DOM 对象√什么是事件√鼠标事件√学习内容键盘事件√表单事件√页面事件√【项目实现】：布局及定√义基础样式【项目实现】：制作头部√及导航模块【项目实现】：制作√√banner 模块【项目实现】：制作简介√√模块【项目实现】：制作课程√√特色模块【项目实现】：制作版权√信息模块………………………………………………………………………………………………………五、学时分配章目讲课上机合计项目 1 网页制作基础知识 3 学时 1 学时 4 学时项目 2 “说旅游”专题页制作 5 学时 3 学时8 学时项目 3 “网上花店”专题页制作7 学时 3 学时10 学时项目 4 “儿童摄影网”首页面制作8 学时 4 学时12 学时项目 5 “穿搭速递”首页面制作 5 学时 3 学时8 学时项目 6 “千年之恋”注册页面制作 6 学时 4 学时10 学时项目 7 “赶快回家网”首页面制作8 学时 4 学时12 学时项目 8 “学好英语网”首页面制作8 学时 4 学时12 学时合计50 学时26 学76 学时时六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
《网页设计与制作》课件——项目四 任务三 管理站点导航资源
选择左侧“分类”列表框中的“链接”项，在右侧可以设置超级链接 不同状态的颜色。但使用这种方法会使整个页面中的超级链接都使用 一个配色方案。当一个网页中的超级链接需要使用不同的颜色方案时， 一般可以通过CSS来实现。这种配色方案需要对HTML代码和CSS语法格 式比较熟悉，需要通过手工编写一部分代码来实现。虽然 Dreamweaver的大部分功能都可以通过鼠标的单击、拖曳来实现，但 有些特殊的功能必须通过手工编写代码来实现。因此，对于网页设计 人员来说，是否精通HTML代码是衡量一个人的设计能力的重要标志。
步骤6：
打开“项目4/zhangying.html”，在顶部添加锚点，命名为 “top”。在网页的底部添加锚点，命名为“bot”。 在网页的顶部添加文字“底部”，设置链接地址为“#bot”， 提示文字为“跳转到底部”。在网页的底部添加文字“顶部” ，设置链接地址为“#top”，提示文字为“跳转到顶部”。
课后习题
一、填空题
1．创建到锚点的链接过程分为两步：首先_____________，然 后_____________。 2．制作外部链接时，可以在“链接”文本框中直接用键盘输 入该网页在Internet上的__________ ________。 3．在Dreamweaver 中，链接按目标端点分类，可以分为内部 链接、外部链接、锚点链接、E-mail链接。其中指向的是不同 站点的其他文件和对象的链接称为_____________，指向的是 同一个站点的其他文件和对象的链接称为_____________。指 向的是同一个网页或不同网页中命名锚点的链接称为 _____________。指向的是一个弹出窗口，用于填写电子邮件 的链接称为_____________。 4．在链接位置输入_________________，可以制作邮件链接。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
单元1网页赏析、创建站点与浏览网页【教学导航】
教学目标（1）学会创建本地站点和管理本地站点
（2）熟悉Dreamweaver的工作界面
（3）熟悉浏览器窗口的基本组成和网页的基本组成元素（4）了解网站与网页的相关概念、认识网页的基本布局结构（5）了解一些制作网页、处理图像、制作动画的工具
本单元重点（1）创建本地站点
（2）网页的基本组成元素和网页的布局结构
本单元难点（1）网页的布局结构（2）网页的基本概念
教学方法任务驱动法、分组讨论法
单元2网站项目开发环境搭建【教学导航】
教学目标（1）熟悉手册的基本界面，能灵活使用手册查询相关内容和自我学习（2）熟悉编辑器（Sublime Text）的工作界面
（3）熟悉HTML的文档结构
（4）能定义HTML的文件信息
（5）能熟练地使用创建好的网页骨架
（6）了解网页文件头内容的设置方法
（7）掌握谷歌浏览器审查元素的方法
本单元重点（1）手册查询
（2）创建HTML骨架
（3）谷歌浏览器“审查元素”功能的使用
本单元难点（1）创建HTML骨架
（2）设置网页文件头内容
（3）谷歌浏览器“审查元素”功能的使用
教学方法任务驱动法、分组讨论法
单元3图文混排网页的制作【教学导航】
教学目标（1）学会建立站点目录结构
（2）熟悉使用骨架创建和保存网页文档等基本操作
（3）掌握在网页中输入文字、编辑文本、设置文本属性的操作方法（4）掌握在网页中输入空格和文本换行的操作方法
（5）掌握在网页中插入特殊字符、水平线、注释和换行的操作方法（6）掌握在网页中插入图像、设置图像属性的方法
（7）掌握制作图文混排网页的技巧
（8）熟悉HTML的基本结构
本单元重点（1）对网页文档的基本操作
（2）在网页中输入文字、编辑文本和设置文本属性（3）在网页中输入空格和文本换行
（4）在网页中插入图像、设置图像属性
本单元难点（1）网页中插入特殊字符、插入水平线、注释和换行（2）网页中插入图像、设置图像属性
教学方法任务驱动法、分组讨论法
单元4表格与表格布局网页的制作【教学导航】
教学目标（1）学会正确地插入表格，并合理地设置表格的属性
（2）学会正确地在表格中插入嵌套表格，并合理地设置嵌套表格的属性（3）掌握单元格的合并、拆分的操作方法，行、列的插入和删除的操作方法（4）学会正确地设置表格中行和列的属性
（5）学会正确设置表格、单元格的背景图像和背景颜色
（6）学会正确地在表格中输入文字
（7）学会正确地在表格中插入图像
（8）学会制作流行的细线表格的方法
（9）学会设置滚动文本效果的方法
（10）能使用表格布局网页，能正确理解适合表格布局的含义
本单元重点（1）插入表格、设置表格的属性
（2）合并或拆分单元格
（3）设置表格、单元格的背景图像和背景颜色（4）在表格中输入文字、插入图像
（5）制作流行的细线表格
（6）使用表格布局网页
本单元难点（1）在表格中插入嵌套表格，并设置嵌套表格的属性（2）设置滚动文本效果
教学方法任务驱动法、分组讨论法
单元5包含flash元素和超级链接的网页制作【教学导航】
教学目标（1）进一步熟悉使用表格进行网页布局，灵活设置表格及单元格的属性（2）能正确在网页中插入SWF动画
（3）熟练创建网页的内部链接和外部链接
（4）熟练创建文件下载链接和电子邮件链接
（5）熟练创建空链接，能理解和创建脚本链接
（6）熟练更改链接颜色、设置链接的打开方式、设置空地址链接
（7）熟练创建命名锚记和到该命名锚记的链接
（8）熟练测试链接的有效性
（9）理解绝对路径和相对路径，知道链接路径的类型
（10）熟练在图像中设置热点区域，并创建图像热点链接
本单元重点（1）在网页中插入SWF动画
（2）创建网页的内部链接和外部链接
（3）创建命名锚记和到该命名锚记的链接
（4）在图像中设置热点区域，并创建图像热点链接
本单元难点（1）在网页中插入SWF动画
（2）在图像中设置热点区域，并创建图像热点链接
教学方法任务驱动法、分组讨论法
单元6表单网页的制作【教学导航】
教学目标（1）学会制作表单网页
（2）在网页中正确插入表单域
（3）在表单域中正确插入文本域和文本区域
（4）在表单域中正确插入单选按钮、单选按钮组和复选框（5）在表单域中正确插入列表/菜单、按钮和图像域（6）在表单域中正确插入表单外框
（7）掌握检查提交表单数据的正确性的方法
本单元重点（1）在网页中正确插入表单域，在表单域中正确插入各种表单元素（2）检查提交表单数据的正确性
本单元难点（1）在表单域中插入列表/菜单（2）在表单域中插入表单外框
教学方法任务驱动法、分组讨论法
单元7CSS布局与网页美化【教学导航】
教学目标（1）学会设计页面的布局结构
（2）学会创建页面布局样式
（3）学会创建美化页面元素的样式
（4）学会插入DIV标签对网页的页面进行布局
（5）学会创建代码片断，且在网页插入已有的代码片断
（6）学会在使用DIV＋CSS布局的网页中输入文字和插入各种页面元素
本单元重点（1）设计页面的布局结构
（2）创建页面的布局样式
（3）创建美化页面元素的样式
（4）插入DIV标签对网页的页面进行布局
本单元难点（1）设计页面的布局结构
（2）插入DIV标签对网页的页面进行布局
教学方法任务驱动法、分组讨论法
单元8网站首页的设计与制作【教学导航】
教学目标（1）能养成分析页面布局结构的习惯
（2）能使用背景色标示盒子的结构
（3）能应用CSS样式设计网站首页的主体布局结构（4）能应用CSS样式设计网站首页的局部布局结构（5）能设计与制作导航栏
（6）会设计热区链接
本单元重点（1）应用CSS样式设计网页的布局结构（2）设置与制作导航栏
本单元难点（1）应用CSS样式设计网页的布局结构（2）设计与制作导航栏
（3）设置热区链接
教学方法任务驱动法、分组讨论法
单元9网站列表页的设计与制作【教学导航】
教学目标（1）能养成分析页面布局结构的习惯
（2）能使用背景色标示盒子的结构
（3）能应用CSS样式设计网站列表页的主体布局结构（4）能应用CSS样式设计网站列表页的局部布局结构（5）能设计与制作导航栏
本单元重点（1）应用CSS样式设计网页的布局结构（2）设计与制作导航栏
本单元难点（1）应用CSS样式设计网页的布局结构（2）设计与制作导航栏
教学方法任务驱动法、分组讨论法
单元10网站详情页的设计与制作【教学导航】
教学目标（1）能养成分析页面布局结构的习惯
（2）能使用背景色标示盒子的结构
（3）能应用CSS样式设计网站详情页的主体布局结构（4）能应用CSS样式设计网站详情页的局部布局结构（5）能设计与制作导航栏
（6）会插入视频和SWF动画
本单元重点（1）应用CSS样式设计网页的布局结构（2）设计与制作导航栏
（3）插入视频和SWF动画
本单元难点（1）应用CSS样式设计网页的布局结构（2）设计与制作导航栏
教学方法任务驱动法、分组讨论法。