《网页设计与制作教程与实训》全套PPT电子课件教案-第9章 数据库与动态数据
《网页设计与制作》实训项目大纲及实训方案
本实训项目的目的与任务是使学生根据问题的要求，构思一个主题，并运用网页制作工具，制作和发布网页，并对此进行更新和维护，掌握网站发布的工作流程，了解域名申请、空间申请的方法，能在校园网及英特网上发布网页。
实训学时数：125 （5周）课外学时数：100适用方向：办公自动化、电子商务执笔者：王平露编写日期：2006年4月一、实训教学的目的与任务本实训项目的目的与任务是使学生根据问题的要求，构思一个主题，并运用网页制作工具，制作和发布网页，并对此进行更新和维护，掌握网站发布的工作流程，了解域名申请、空间申请的方法，能在校园网及英特网上发布网页。
通过设计、编辑和发布网页全过程的实际训练使学生对网页整体设计流程有一个深刻的认识，并且熟练掌握网页制作工具（Dreamweaver MX ）的使用，初步掌握HTML、CSS语法格式，能借助手册看懂代码，能进行简单的代码改写工作，了解客户端脚本和服务端脚本区别，了解在网页上进行简单代码的嵌入与改写，会与其他工具结合使用以便实现更高效高质量的网页效果，进一步提高办公自动化效率和水平。
二、实训项目的基本要求及考核标准基本要求：（一）网页内容要求：1、主题内容：创意突出，体现校园园区精神文明建设体现本班级大学生风貌，学习气氛浓厚，作品内容健康。
严禁发布反对政府、宣传迷信、传播色情、系统破坏、黑客教程等违法信息。
2、具体内容：标徽、标题、各链接页具体内容，站内搜索、计数器、留言系统、电子邮件地址、弹出窗口、漂浮广告、背景音乐、网页特效、友情链接、版权信息等。
（二）制作基本要求：1、至少有10 个页面，链接结构应有三层，下一层必须有返回上层的按钮或链接。
有整体框架结构，导航栏，表格定位，布局合理，色彩搭配协调统一。
2、主页的文件名为：index.htm 。
文件名一般用英文小写字母。
3、网页中要有文本、图像、表格、交互与链接、层与动画、表单。
4、网页主要建立站内链接，尽量少建立外部链接，至少建立一个E-mail 链接至你的邮箱。
《网页设计与制作》一体化教学设计
《网页设计与制作》一体化教学设计作者：冉媛媛来源：《商情》2013年第46期【摘要】一体化教学就是充分利用现代教育技术，将理论、实验、实训等教学内容一体化设置；讲授、听课与实验、操作等教学形式一体化实施；教室、实验室与实训场地等教学条件一体化配置；知识、技能与素质等职业要求一体化训练，由此形成融知识传授、能力培养、素质教育于一体的一体化教学模式，简而言之就是教、学、做一体化。
一体化教学的目的是实现培养目标、教学内容、教学方法、教学情景、教师队伍等与生产实践的“无缝”对接。
这种集理论传授、现场观摩、实践操作技能训练为一体，集教师与学生双向交流，小组讨论协作为一体，增强了学习理论的兴趣，促进了对理论的理解，提高了学生的实训兴趣和实际操作能力，特别适合在计算机教学中应用。
【关键词】网页设计与制作一体化根据一体化教学的要求，在《网页设计与制作》教学中实施一体化教学，要做好以下几个环节设计：一、课程标准专业知识目标。
熟悉和掌握网页设计与制作的基本知识，了解和熟悉HTML语言，掌握静态网页设计与制作的知识，掌握网页中动态效果的设计与实现方法，掌握网页中图片设计和处理、动画设计的知识，掌握网站检查与发布的知识。
职业能力目标。
具备收集、处理、准备、加工的能力；具备网页设计及网页中图形设计、动画设计的基本能力，能独立设计一个内容完整、图文并茂、技术运用得当的网站；具备初步的网站开发、维护和管理能力；具备独立撰写网站制作说明等简单科技文件的基本能力。
职业素质目标。
按时守信的诚实作风；乐观向上的敬业精神；沟通协作的团队意识；知识获取和应用的自主学习能力；探索实践的创新能力。
二、课程设计围绕“将工作任务转化为任务引领、并以任务驱动进行教学的课程”的思路进行课程设计。
工作任务分析。
具备Internet、网页设计与制作、后台数据库设计和建立、网站规划与建设、通讯及网络技术等技术方面的专业知识。
具备网站规划，静态网页设计，建立动态网站，进行网站的上传、更新、维护的能力，同时必须具备一定的平面设计基础。
网页设计与制作课程整体教学设计
六、教学效果
校内督导评价
潍坊职业学院教学督导室主任周希华教授： 信息工程学院的《网页设计与制作》课程是一门实践
课程设计理念与思路
一是以真实的项目为载体重构和序化 教学内容，而不是按照传统的原理、 实验、实训的内容进行教学；
二是在课程教学过程中开放性地引入 企业工作流程、行业标准和企业主流 技术；
三是将网页制作相关职业岗位的典型 工作过程作为组织教学内容的基础；
四是以启发学生主观能动性和培养学 生的自主学习能力作为课程教学的着 力点。
二、教学内容—教学内容的组织与安排
基于工作过程设计教学内容 结合网页设计与制作的基本特点和学生的学习认知规律 ，打破原有的知识体系结构，按工作过程重组、序化教学 内容。根据专业培养目标和课程培养目标，课程组联合企 业专家对不同的岗位工作任务进行细化、归纳，设计了7个 学习情境，每个学习情境按照工作过程，又分成若干个工 作任务，将所有知识点融入工作任务的讲解中，从简单到 复杂、从入门到深化进行科学安排，循序渐进的实现教学 目标，课程内容与项目开发内容一致，理论与实践一体化 ，实现学习和工作的深度融合。
作品展示个人自评、小组点评、教师 点评、用户点评。
学 结 合
三、教学方法与手段—教学模式设计与创新
教学方法设计
项目 教学法
任务驱 动教学
法
案例 教学法
教学 方法
案例 教学法
案例 教学法
启发 教学法
三、教学方法与手段—教学手段
动态网页设计与制作1PPT课件
WEBPAGE DESIGN
服务器配置方案
. gycm .com
WEBPAGE DESIGN
2. Web常见术语
服务器
是指网络环境中的高性能计算机，它侦听网络上其他计算机提交 的服务请求，并提供相应的服务。为此，服务器必须具有承担服 务并且保证服务质量的能力，往往需要安装并设置相应的服务软 件，有时则仅指代相应的服务软件，站点必须发布在Web服务器 上才能被客户机访问。
. gycm .com
WEBPAGE DESIGN
HTTP
从1990年开始出现，是目前网络世界里应用最广泛的网络 传输协议，是为分布式超媒体信息系统设计的一个“无状态” 的请求/响应协议。规定了浏览器如何通过网络请求WWW服务 器，以及服务器如何响应回传网页等。
客户机
客户机又称为用户工作站，是用户与网络打交道的设备，一般由 微机担任，客户机主要享受网络上提供的各种资源，但必须安装 相应的访问软件。客户机只有安装Web浏览器才能查看网页 。
. gycm .com
WEBPAGE DESIGN
1.万维网（WWW）
信息以页面（或称Web页）的形式存储在Web服 务器中，这些页面采用超文本的方式对信息进行组织， 通过链接将一页信息链接到另一页信息。被链接的页面可能在同 一台主机上，也可能在不同主机上。用户通过Web浏览器访问这 些资源。其结构采用了 “浏览器/服务器（B/S）”模式。
URL（Universal Resource Locater，统一资源定位器） HTTP（Hypertext Transfer Protocol，超文本传输协议） HTML（Hyper Text Markup Language，超文本标志语言）
网页设计与制作实训实施方案
网页设计与制作实训实施方案一、实训目标本次网页设计与制作实训的主要目标是让学生掌握网页设计与制作的基本技能和流程，培养学生的创新思维和实践能力，提高学生的团队协作和沟通能力，为学生今后从事相关工作打下坚实的基础。
具体目标包括：1、让学生熟悉网页设计与制作的常用工具和技术，如 HTML、CSS、JavaScript 等。
2、培养学生的网页布局和色彩搭配能力，使学生能够设计出美观、实用的网页界面。
3、提高学生的网页交互设计能力，让学生能够实现网页的动态效果和用户交互功能。
4、培养学生的团队协作精神，让学生在团队中学会分工合作、相互沟通和协调。
5、增强学生的问题解决能力和自主学习能力，让学生能够独立解决在网页设计与制作过程中遇到的各种问题。
二、实训内容1、网页设计基础知识网页的基本概念和构成要素，如网页的结构、布局、色彩、字体等。
网页设计的原则和规范，如用户体验、可用性、可访问性等。
2、 HTML 与 CSS 基础HTML 标签的使用，如标题标签、段落标签、链接标签、图像标签等。
CSS 样式的应用，如字体样式、背景样式、边框样式、布局样式等。
3、网页布局设计常见的网页布局方式，如流式布局、固定布局、响应式布局等。
使用CSS 实现网页的布局，如浮动布局、定位布局、弹性布局等。
4、网页色彩搭配色彩的基本原理和搭配原则，如色相、饱和度、明度等。
运用色彩心理学知识，为网页选择合适的色彩方案。
5、网页图像处理图像的格式和优化，如 JPEG、PNG、GIF 等。
使用图像编辑工具，如 Photoshop，对网页图像进行处理和制作。
6、网页交互设计JavaScript 基础语法和常用函数，如变量、数据类型、控制结构等。
使用 JavaScript 实现网页的动态效果，如轮播图、下拉菜单、表单验证等。
7、网页项目实践学生分组完成一个完整的网页设计与制作项目，包括需求分析、设计规划、页面制作、测试发布等环节。
三、实训方法1、课堂讲授由教师讲解网页设计与制作的相关知识和技能，通过案例分析和演示，让学生直观地了解网页设计与制作的过程和方法。
网设计与制作说课软件技术省公开课金奖全国赛课一等奖微课获奖PPT课件
六 课程特色
特色： 教学观念先进，突出应用能力培养。 本课程本着理论够用、实践加强标准，突出应用能力培养。适时调 整教学内容，保持与Web技术发展同时。改革考评方式，重视学生 学习过程。
25/30
创新点：
1、在学习当中，注意引导学生取得美熏陶，提升审美能力。 2、强调技术与艺术融合，将网页作品看成一份含有生命力 艺术品。 3、 以真实网站作为教学案例，让学生在真实工作环境中训 技能，提升学生适应岗位需求能力。 4、 虚拟项目设计考评模式。，给学生一些虚拟项目作为课程 设计，培养学生单独规范做项目标能力及网站设计综合能力， 也让学生找工作时能够向用人单位提供一个完整网站设计作品
4/30
1.2 本课程与先修课程后续课程衔接和配合
《网页设计与制作》课程在第三学期开设，共40课时（理论20课时， 实践20课时），教学工作集中在1~2周完成，第5周20课时项目实训。 作为一门专业基础课，该课程可为后续课程提供静态网页设计与制作 理论基础和操作技能。它与计算机应用基础、数据库及动态网页编程 等课程亲密相关。其中《计算机应用基础》为本课程先导课程，而 《Javascript》及《XML及应用》等课程是本课程后续课程。总之， 本课程学习有利于学生深入学习计算机类相关专业其它知识和提升职 业技能，完善学生专业知识结构，提升学生从事实际工作综合素质
7/30
技能与素质目标 培养学生搜集、处理信息，准备、加工素材能力 培养学生制作静态网页能力 培养学生设计网站综合能力 培养学生策划能力、色彩感悟能力、结构布局能力和想象力 训练和培养学生获取信息和处理信息能力，充分培养和提升学生动手
能力，学会经过网站、书籍、素材光盘等方式搜集所需文字资料、图 像资料、Flash动画和网页特效等 培养学生利用所学理论知识和技能处理网站开发过程中所碰到实际问 题能力及其基本工作素质
网页设计与制作：Dreamweaver CC标准教程(第3版
10.2库
10.1模板
10.3练习案例
1
11.1 HTML5 概述
2
11.2 HTML5 布局
3
11.3弹性盒子 布局
4
11.4媒体查询 应用
5
11.5练习案例
12.2 jQuery UI
12.1使用表单
12.3练习案例
13.1 jQuery MobiIe概述
13.2使用jQuery MobiIe
网页设计与制作： Dreamweaver CC标准教程
（第3版
读书笔记模板
01 思维导图
03 目录分析 05 读书笔记
目录
02 内容摘要 04 作者介绍 06 精彩摘录
思维导图
本书关键字分析思维导图
设计
网站
制作
案例
图像
方法
概述
标准
网页
知识 第章
技术
教程
案例
超链接
网页
文本
属性
效果
内容摘要
本书全面系统地讲解了页设计与制作的相关知识，全书共有15章，系统地讲述了页设计基础知识、 DreamweaverCC基础、页面与文本、图像和多媒体、超链接、表格、CSS样式、CSS+Div布局、行为、模板和库、 HTML5和弹性布局、表单和jQueryUI、jQueryMobile、动态页技术以及综合实训等内容。本书以知识体系的构建 为线索，以课堂案例为载体，通过知识讲解和案例实际操作，学生可以快速掌握页创意、设计和制作的方法技巧。 练习案例帮助学生巩固和扩展相关的知识和技能，综合实训帮助学生理解和掌握站制作的方法和流程。本书既可 以作为艺术类本科生或文科本科生页设计课程的教材，也可以作为页设计培训教材或自学人员的参考书籍。
第04章-制作简单图文网页ppt课件(全)
:::::《计算机基础与实训教材系列》系列丛书官方网站
edu :::::
4.2 创建无序列表和有序列表
在网页中，我们可以用很多方法来排列文本项目，可以将多种项目没有 顺序地排列在一起，也可以给每个项目赋予编号后再进行排列。此时，没有 顺序的文本排列方式称为无序列表，赋予编号排列的文本项目则称为有序列 表。
网页图像简介 插入普通网页图像 插入网页背景图像 插入Photoshop智能图像 制作鼠标经过图像
:::::《计算机基础与实训教材系列》系列丛书官方网站
edu :::::
制作无序列表 制作有序列表
:::::《计算机基础与实训教材系列》系列丛书官方网站
edu :::::
4.2.1 制作无序列表
在制作网页时，如果需要把各个项目美观地排列在一起，建议用户使用 无序列表。在无序列表中各项目前面的圆点直接用制作好的图像来替代，也 可以在CSS样式表中定义更改圆点形状。
:::::《计算机基础与实训教材系列》系列丛书官方网站
在网页中插入文本 设置网页文本的属性 在网页中插入图像 在网页中插入特殊符号
:::::《计算机基础与实训教材系列》系列丛书官方网站
edu :::::
4.1 在网页中添加文本
文本既是网页中不可缺少的内容，也是网页中最基本的对象。由于文本 的存储空间非常小，所以在一些大型网站中，其占有不可代替的主导地位。 在一般网页中，文本一般以普通文字、段落或各种项目符号等形式显示。
《 网页设计与制作基础教程(第3版)》
第四章
制作简单图文网页
学习目标
文本和图像是网页中不可缺少的部分，对文本进行格式化 可以充分体现页面所要表达的重点，而在网页中插入图像的实 质则是把我们设计完成的最终效果展示给人们看。