第1章 网页设计基础
教学目标求
熟记站标导航条广告条钮等网页构成素网页网站IP址域名网址等概念解网页质网页布局类型HTML文档基结构熟练掌握网站建设基流程
教学重点
重点:站标导航条广告条网页网站IP址域名网址等概念网站建设流程
教学难点
难点: IP址域名网址HTML文档基结构常见标签
教学方法
提问启发图示情景教学案例课堂讨
教学课时
2课时
第1章 网页设计基础
教学
提示
导入课程:家会输入文字制作处理图设计动画作品放internet中更查阅欣赏呢?DW制作网页
1网页构成素组成元素
n 网页构成素:站标导航条广告条标题栏钮
n 网页组成元素:文字图片动画(gifflash)表单(交互功)音频视频超链接表格框架导航等
2网页相关知识简介
n 基概念:
Ø 网页质
Ø 网页网站页互联网
Ø 动态网页静态网页
Ø IP址域名网址(url)浏览器等概念
n 网页布局
Ø 网页布局相关概念
Ø 常见布局类型
n 网站理网页制作相关软件
Ø 制作理网页工具
Ø 制作优化网页图工具
Ø 制作网页动画工具
Ø 中Dreamweaver fireworks flash三软件合称网页三剑客
Ø 工具软件
n HTML语言
Ø HTML概念
Ø HTML文档基结构
Ø 常见html标签: htmlheadtitlestylescriptlinkmetabodyimgpfont等
n XHTML语言简介
n 脚语言简介
3网页设计理念配色方案
n 网页设计理念
n 色彩三素
n 网页中色彩心理网页表现
n 色彩搭配应遵循原
4网站开发流程
① 网站需求分析
② 设计制作网站页面
③ 空间域名申请
④ 测试发布网站
⑤ 网站推广
制作页面
第二阶段:创建站点设计制作级页面
规划网站
准备素材
定义站点
设置页面属性
第阶段:网站需求分析
第三阶段:申请空间域名
第四阶段:测试发布网站
第五阶段:网站推广
5典型网站分析
n 页面结构
n 色彩运
提问方式引入课程
采课堂讨教学法开典型网页学讨总结构成素组成元素
开搜狐页保存成类型家保存效果加深网页质理解
先开网页源文件结合网络常识详细讲解网页定义然略讲网站页概念提醒学理解记忆概念
注册登录邮箱例讲解动态网页静态网页特点区
顶山学院搜狐网站IP址域名例简讲述两概念通查分析知名网站网址引入url定义组成概念略讲提醒学生理解记忆述概念
开网页(详细讲解网页布局效果教程)学生讨分析总结布局类型
根学生特点简讲解psflashfw等软件网页设计中功
开搜狐页源代码学生认识html语言结构然分记事dw创建2简单网页学生细源代码详细讲解8基标签结构关系根时间酌情讲解常见标签
简讲解两概念然创建网页复制缝循环代码粘贴网页body标签学生解脚语言功
学生欣赏插入效果吸引学生dw相关代码
结合网验学生总结网页设计理念
色彩三素心理表现学生学期ps课程中学采提问法进行复然开典型网站分析配色方案总结网页中色彩运原
根设计先序学生起分析总结网站开发流程图加解释重点讲解网站需求分析加深学生重点知识掌握
采课堂讨教学法开典型网页学讨总结网站构成素组成元素布局结构配色方案
作业布置:
1察分析型网站(中国网著名学校网著名医院网官方网科技网娱乐休闲运动网童网体育网著名出版社网cctv网站sohuyahooIBM微软等)风格色彩搭配布局
2 察时载需文章图片软件等资源
3课题
提问
结:通提问启发图示情景教学课堂讨等教学方法综合运提高学生学兴趣学生反应授课效果
第2章 Dreamweaver基础知识
教学目标求
熟悉Dreamweaver 8工作界面 熟记常工具钮菜单命令熟练掌握站点创建步骤快速规范创建站点够快速创建开保存网页文档熟练设置页面属性
教学重点
1创建站点组织站点结构2 站点中创建网页3页面属性设置
教学难点
HTML基础
教学方法
举例适讲授操作领提问测试课题效果
教学课时
2课时
第2章 Dreamweaver基础知识
教学 提示
贯浏览网页想动手做网站?什工具做网站?样做呢? Dreamweaver网页制作工具
21 熟悉Dreamweaver 8工作界面
22 网站创建理
221 站点定义组成结构
222 网页文档文件夹命名规
223创建站点步骤
224组织站点结构
23 网页文档基操作
新建保存预览开关闭
24 基页面属性设置
制定文档标题边距网页背景颜色背景图网页设置文属性链接属性踪图属性总结页面技巧:
抛出问题引入新课
启动dw详细讲解插入栏文档标签文档工具栏状态栏作区分标签检查器标签选择器标记选择符3概念作
详细讲解站点定义组成结构文件文件夹命名规
演示站点创建程步骤着重提出保存站点文件夹命名
详细讲解站点结构组织方法原
分演示操作
通dw设计视图分创建1网页分演示文档标题边距背景颜色背景图文链接属性踪图属性设置方法步骤帮助学生掌握页面设置程总结页面设置创建程中技巧
作业:题第12 3 题
结:次课容操作性强学生台操作发现数学生创建组织站点快速设置网页属性达教学目标求
第3章 网页中基元素
教学目标求
1熟练操作网页中文
2熟练插入种格式图设置属性
3解图切片作
4熟练制作图切片插入dw中
教学重点
1文象插入格式设置
2GIFPNGJPEG三种图格式 异点环境
3fireworks制作网页切片方法
教学难点
1设置文标题段落设置效果
2GIFPNGJPEG三种图格式异点环境
3Dreamweaver 80中图基方法技巧
4 dreamweaver中插入fireworks制作切片
教学方法
课堂讲授辅媒体演示适举例提问测试课题效果实验式教学
教学课时
4课时
第3章网页中基元素
教学提示
复节容:
1. 创建站点?
2. 站点结构组织
31网页中文操作
311 认识文钮属性面板
• 思考题:根前学知识说出文编辑设置属性包括方面?
312 插入文象
n 文(英文中文数字)添加文档中3种方法
n 插入特殊字符
n 水线
n 插入日期:菜单法插入栏钮法
n 插入文执行删搜索换检查拼写(文-检查拼写/shift+f7)等操作
313 设置文格式
字符样式包括方面设置方法
314 设置文标题
标题含义作
315 设置段落效果
1 设置段落格式
2 缩进段落
3.齐段落 (4种齐方式)
4分段换行相关操作区:
316创建项目列表
32网页图运
321网页中图格式简介
1 图网页中作网页中常图格式:GIF JPEG PNG
2三种图格式特点网页中场合
Web页显示图片前通常需考虑列三问题:
322网页中图
1插入图:
2插入图占位符:注意图占位符命名规作
3创建鼠标图象(轮换图)
4 dw中图编辑功仅适GIF JPEG 图格式
Ø 属性检面板中编辑图述设置通菜单实现:修改图
Ø fireworks优化图
5.热点工具图热区添加
6设置图文混排效果:
7制作电子相册:命令——创建网站相册
323切片fw中创建dw
开图片网页时总等长时间样处理减少图片载时间呢?做成切片
1切片定义作
2切片fw中创建方法步骤
3DW中插入Fireworks HTML(切片)方法步骤
Fireworks HTML插入Dreamweaver中方法
方法1:切片Fireworks复制剪贴板然直接粘贴Dreamweaver文档代码视图中相应位置处
方法2:直接Fireworks HTML插入Dw中操作步骤
33网页媒体运
331网页中视频flash
1网页中常见视频文件格式插入方法
2常见flash文件格式插入方法
flash文件(fla格式)flash影片文件(swf格式)flash模板文件(swt格式)flash元素文件(swc格式)flash视频文件(flv格式)
332网页中音频
添加声音需考虑素:添加文件声音品质浏览器中差异
1音频文件格式相应特点:
n 网页中常见音频格式:
u midmidi格式:
u wavaif(aiff)文件
2网页中插入音频文件2种方式:
n 链接音频文件
n 嵌入声音文件
34dw扩展插件
1安装扩展插件
2扩展插件
扩展插件2步骤:
① 先安装插件
② 然启动dreamweaver相应位置找调扩展命令
3类型栏中显示扩展类型含义:
类型
含义
象
dw界面插入工具栏调该扩展插件
命令
dw命令菜单中调扩展
行
dw行面板中调扩展
4常扩展插件安装
Page transitions
超级链接时页渡(进入退出)效果
命令
选定整页面(body标签)命令菜单中找该命令实现(效果见实例站点中guodong1html guodong2html guodong3html )
Typewritermxp
模拟字
行
先添加该效果象放入AP元素中然行面板中找yaromat|typewriter实现文字印效果显示AP元素中 (guodong1html中印文字)
Soundmxp
插入背景音乐
象
选定整页面(body标签)常插入栏中找sound钮实现
Marqueemxp
滚动文字插件
象
选定整页面(body标签)常插入栏中找marquee钮实现
Insert Greetingmxp
插入问候语
象
光标定位页面合适位置然选择插入栏中CN Insert Greeting钮实现
Calandermxp
象
光标定位页面合适位置然选择插入栏中calander钮实现
Persistent layers
滚动链接AP元素
行
先添加该效果象放入AP元素中然行面板中找ribbers zeewolde| Persistent layers实现般显示广告信息( guodong1html中送)
提问方式复次课容
结合WORD通复方式总结dw中文操作
先简演示种文符号插入方法然输入首诗调整格式接着复制篇文章粘贴dw中导入篇word文档
先简讲述文格式标题段落设置含义步骤然学生走讲台述插入文设置相应字符格式标题级段落效果选择段落创建项目列表加深印象
通较法讲解图格式特点
举例:文档中插入种图象设置格式属性
演示制作图热区图文混排效果演示制作电子相册
问题形式引入切片定义作
容量调整机房讲解详细讲解演示切片fw中制作dw中插入方法步骤
较法总结网页中出现视频文件格式特点举例讲解视频文件插入方法属性设置
较法总结网页中出现flash文件格式特点重点讲解flash钮flash文flash视频插入方法属性设置
较法总结网页中常见音频文件格式特点
举例演示音频文件插入属性设置重点讲解背景音乐插入设置
重点讲解页面度效果soundmarquee滚动链接AP元素4插件法设置
先演示常扩展插件安装方法然学生台操作教师指点操作程方法
扩展分容安排行讲解
作业:
1 填空题
(1)属性检查器文菜单中选项设置更改选文字体特性设置字体______ ______(粗体斜体)______
(2)插入更特殊字符请选择______ | ______ | ____________栏中选择______图标选择字符然单击确定
(3)计算机领域中图分________________2类
(4)GIF图采________压缩格式
2 选择题
(1)网页中连续输入空格方法_______
A.连续空格键
B.Ctrl键连续空格键
C.转换中文全角状态连续空格键
D.Shift键连续空格键
(2)网页通常支持图格式___________
A.GIF B.BMP C.AVI
D.PSD E.PNG F.JPEG
3简答题
(1)网页中常图格式?什特点?果网页中添加动画格式浮动广告采种格式?什?电子相册应该种格式?
(2)创建鼠标变换图图热点?
4操作题:
搜集喜爱图片制作电子相册
结:章容较交简单需边讲解边总结通总结学生台操作演示学生机作业授课效果
第4章 表格布局表格布局网页
教学目标求
1解表格布局表格网页布局中作
2掌握表格布局表格插入方法基编辑方法
3掌握表格布局表格单元格布局单元格属性设置
4通表格布局表格学提高学生学网页制作兴趣增强学生审美观
教学重点
1. 表格插入方法基编辑方法应
2. 布局表格布局单元格绘制方法属性设置应
教学难点
1表格单元格属性设置应
2布局表格布局单元格绘制属性设置
教学方法
媒体演示案例教学务驱动引导教学提问式教学
教学课时
2学时
第4章 表格布局表格布局网页
教学提示
表格控制文字图片动化等象位置网页布局紧凑整齐美观常页面设计布局类型:表格布局表格AP元素三种章着重讲解表格布局表格布局页面
41表格模式
1dw中表格3种模式
2模式切换操作方式:
查表格模式标准模式布局模式表格扩展模式
3模式区注意事项:
n 设计视图中切换布局模式
n 模式工具栏钮作
n 布局模式中布局表格空白区域插入容创建布局单元格布局单元格承载具体容容器
42表格布局网页
1.表格作
2表格组成部分
表格行列单元格边距间距边框
3表格标记
n
标记 n 三者应位置关系 4表格基操作 n 表格插入选择删调整 n 单元格选择合拆分调整 n 表格扩展表格模式标准模式应 5嵌套表格 n 表格嵌套作 n 创建嵌套表格操作方法 6导入导出表格数 7 表格布局网页应实例 8 表格布局缺点 43布局表格布局网页 1绘制布局表格 绘制布局表格注意事项: 2绘制布局单元格 绘制布局单元格注意事项: 3设置布局表格布局单元格属性参数 4布局单元格中添加容 5课堂实例――布局表格布局网站页 展示布局合理美观网页激起学生学兴趣 简讲解3种表格模式作重点演示模式钮 回顾wordexcel中讲关表格概念基操作引入dw中表格概念基操作重点讲解表格属性设置含义 插入表格格中插入容然切换代码视图学生识记三标签逐演示表格基操作 重点讲解创建嵌套表格原 开示例网页学生讲台着制作出相效果 讨总结表格布局缺点 重点演示总结绘制布局表格布局单元格注意事项 演示设置布局表格单元格属性 设置属性布局单元格中添加文章图媒体 先学生起分析左侧网页操作思路步骤然学生台操作加深印象 作业: 课堂作业:1叙述3种模式概念切换方法 2说出表格布局表格作 3叙述表格扩展模式作 4什间隔图? 书面作业:课题 结:通学生熟悉word中表格操作讲解章讲解显较轻松学生台操作提高学生学积极性动性教学效果较 第5章 框架布局网页 教学目标求 解框架网页概念熟练创建保存框架网页设置框架框架集属性框架中超级链接创建目标属性设置 教学重点 熟练创建保存框架网页设置框架框架集属性框架中超级链接创建目标属性设置 教学难点 框架网页概念保存框架中超级链接创建目标属性设置 教学方法 媒体演示适举例体媒体结合式教学课堂讲授师生互动提问式教学 教学课时 2学时 第5章 框架网页 教学提示 51框架框架集概念结构应 1基概念 l 框架网页框架集框架 l 框架框架集关系 2.框架网页结构 3认识框架面板: 4框架网页应:通常导航 5框架网页优缺点 52 创建保存框架框架集 521 预设框架集 1创建新空预设框架具体操作步骤 修改框架名称必须字母开头包含数字划线(_)允许javascript中保留字(topnavigator)连字符()句点空格区分写 2创建预设框架集某框架中显示现文档 522 创建编辑框架 1创建框架 2删框架 3建立嵌套框架集 4保存框架框架集 53设置框架框架集属性 1选择框架:通框架面板选择框架子框架 2设置框架属性 n 框架背景颜色页面属性中进行设置 n 框架属性面板中进行设置框架名称源文件链接边距滚动边框否调整等 3设置框架集属性:边框边框边框颜色 54设置框架集中超级链接 541框架网页中建立超链接 542框架网页中设置超级链接目标开方式 1相链接目标:_blank _top _parent_self 2绝链接目标:mainframeLeftframeRightframeTopframe 56课堂实例――制作框架网页 通分析知名网站框架布局效果引入框架框架集概念 举例演示框架创建保存操作 开框架面板查总结框架框架集属性设置含义 演示框架中超级链接效果 举例演示框架网页设计制作 作业: 1框架优点什? 2课题 结:章介绍框架网页创建保存属性设置着重讲解框架网页中超级链接创建目标设置容较少授课效果较 第6章 AP元素创建 教学目标求 理解AP元素作熟记AP元素命名原特点掌握绘制AP元素插入AP元素方法区熟练设置AP元素属性灵活合理AP元素心欲布局页面容 教学重点 AP元素作AP元素插入绘制AP元素属性设置AP元素特点AP元素应 教学难点 AP元素作AP元素属性设置AP元素应 教学方法 媒体演示适举例体媒体结合式教学课堂讲授师生互动提问式教学 教学课时 2课时 第6章AP元素创建 教学提示 家 浏览网页时注意滚动广告图片?AP元素做出效果 61应AP元素布局网页 611AP元素概述 1AP元素应:布局网页制作简单动画设计特效等 2AP元素定义AP元素特点AP元素分类AP元素优缺点AP元素面板 612创建AP元素 1首选参数话框中设置AP元素参数设置AP元素嵌套显示AP元素锚记 2插入AP元素绘制AP元素 3绘制AP元素插入AP元素差 4AP元素html代码 5AP元素绝定位(般默认设置)相定位 613AP元素属性详解 1单AP元素属性:AP元素编号左宽高Z 轴背景图背景颜色剪辑见性溢出: 2AP元素属性: 614AP元素基操作 激活AP元素选择AP元素调整AP元素移动AP元素齐AP元素吸附AP元素网格 615嵌套AP元素 616AP元素表格相互转换 62 课堂实例――AP元素布局网站首页 抛出问题引入新课 强调AP元素页面布局中作 演示AP元素绘制领 选择AP元素学生观察属性详细讲解属性设置含义 演示AP元素种操作 综合举例 作业:课题 机作业:AP元素表格css排版网站首页 结:章着重讲解AP元素创建命名属性设置学生亲台制作案例加深新知识印象机时发现学生基完成操作务总体感觉授课效果较 第7章超级链接 教学目标求 解超级链接路径链接结构熟记超级链接目标开方式设置含义熟练掌握超级链接4种创建方法快速完成5种特殊超级链接创建方法步骤 教学重点 1超级链接种创建步骤 2超级链接目标开方式设置含义 3超级链接4种创建方法 4 5种特殊超级链接创建方法步骤 教学难点 1超级链接路径 2超级链接目标开方式设置含义 教学方法 媒体演示适举例体媒体结合式教学课堂讲授师生互动提问式教学 教学课时 2课时 第7章 超级链接 教学提示 家已会创建容网页样分散网页组合成统整体浏览者开页访问面呢?需创建超级链接 71超级链接定义目标选项含义 1 超级链接定义 2属性检查器目标弹出菜单中选项含义:_blank_parent_self_top 3:创建完整超级链接必须考虑4方面: ①链接载体 ②链接目标 ③链接路径 ④链接目标开方式 72超级链接路径 dreamweaver中三种类型链接路径: 绝路径文档相路径站点根目录相路径 73超级链接分类 1链接路径网页中超链接般分部链接锚点链接外部链接3种类型 2象网页中链接分种:文超链接图超链接电子邮件链接锚点链接软件载链接媒体文件链接空链接等 74超级链接创建方法 1 属性检查器中链接文框创建种样超级链接 2属性检查器中浏览文件图标创建种样超级链接 3指文件图标创建超级链接 4菜单中超级链接命令创建超级链接 75种特殊超级链接详解 1.锚记链接 2.创建脚链接 3.图热区加超级链接 4.创建电子邮件超链接 5.创建空链接 76超级链接基操作:更新修改检查 77超级链接结构 78总结创建超级链接5点建议 抛出问题引入新课(2分钟) 开典型网站页家分析超级链接功进引入超级链接定义分类目标列表设置学生讨总结创建超级链接注意事项(20分钟) 通举例配图讲解链接路径类型创建超级链接时路径书写方法(20分钟) 采讨法学生讨总结超级链接分类(8分钟) 举例讲解种方法超级链接创建方法创建步骤总结种方法情况 (25分钟) 助面讲创建方法学生台操作实践创建种类型超级链接根情况部分容调整机房讲解(30分钟) 简讲述超级链接修改更新操作(15分钟) 结构较简单(15分钟) 总结提出建议(10分钟) 作业:1叙述超级链接定义 2说出超级链接路径 3说出超级链接4种创建方法 结:章容较超级链接路径较难理解容相容易操作性较强易掌握学生基创建种类型超级链接总体感觉授课效果 第8章交互(行图AP元素时间轴综合运javascript) 教学目标求 1 熟练应行够心欲制作出具交互功网页 2 掌握时间轴概念基法 3 通行学应增加网页设计特殊效果提高学生学网页制作兴趣培养家动手操作力 4 解java脚基法 教学重点 1行概念创建2DW置行3AP元素行时间轴综合运 教学难点 1DW置行2高级行应3AP元素行时间轴综合运 教 学 方 法 媒体演示适举例体媒体结合式教学课堂讲授师生互动提问式教学务驱动引导教学理操作紧密结合 教 学 课 时 4课时 第8章交互(行图AP元素时间轴综合运js) 教学提示 问题:家已会网页中特殊效果:弹出消息检查表单设置导航文鼠标花瓣棉花糖雪礼花绽放等样动态网页制作呢?行实现 811初步认识行 1DW行引出 2行概念 3行相关三重部分:象事件动作 4认识行面板 812行创建修改更新 · 创建行三步骤 · 修改行 · 更新行 813DW置行 dw80带行 1弹出消息 2播放声音实例 3跳转菜单跳转菜单开始 4开浏览器窗口 5交换图象恢复交换图象 6控制shockshaveflash 7设置导航栏图 8设置文 9显示弹出菜单(拉菜单) 10显示隐藏AP元素 11拖动AP元素 12滚动链接AP元素 814高级行应 1插入滚动字幕 示例:文动循环滚动鼠标放面会暂停 2载安装扩展插件 3载网页特效适修改相关代码代码放代码视图具体位置 举例:花瓣棉花糖 82AP元素行时间轴综合运 1时间轴面板 2时间轴图AP元素综合运 (1)滚动字幕 (2)网页浮动动画 (3)设置文字阴影效果(4)幻灯片效果 (5)控制图播放动画 (6)制作滚动折叠菜单 (7)具预览功电子相册效果 83网页中应javascript 1认识代码片段面板 2应代码片段 3应举例 抛出问题导入新课 举出典型带行网页显示行应进引出行作相关概念(25分钟) 举例讲解行创建步骤(10分钟) 演示常DW置行操作步骤领部分调整机房讲解(30分钟) 部分选讲容举例讲解高级行应重点讲解4种扩展插件安装应效果(30分钟) 举典型实例演示AP元素行综合应效果(40分钟) 引入特效代码举例讲解jsDw中应(20分钟) 作业:课题123题 结:通举例详细讲解AP元素时间轴行综合运节容较步骤繁琐通视频演示实际操作演示加深行理解加强学生实际操作力希学练学完章家应该灵活制作出较简单具特殊效果动态网页 第9章cssAP元素叠样式表 教学目标求 1解css概念样式类型 2熟练掌握css属性设置熟练操作(创建导入导出)cssAP元素叠样式表 3css表格cssdiv综合运 教学重点 css概念样式类型Css创建属性设置css表格综合运 教学难点 Css创建属性设置css表格cssdiv综合运 教学方法 媒体演示课堂讲授师生互动案例教学 教学课时 4课时 第9章cssAP元素叠样式表 教学提示 开没应样式设置预先准备网页先学生观察设计视图中效果然IE中预览学生总结显示效果变化回事呢?没样式 91css基础 1 css样式表基概念 n 样式cascadingcss n Css改变性质 n 外部css样式表扩展名css 2css5优点: 3 css面板 v 开css面板3种方法 v css面板中钮功 adobe建议css面板作创建编辑css工具户创建AP元素叠样式表dw附带AP元素叠样式表 4样式表类型(理解) 选择器三种(常见)类型创建4种选择器类型样式: (1)定义css规(类样式)命名规 (2)html标签样式表 (3)高级样式(称ID伪类选择器) 92 CSS规详解 规话框中通类型背景区块方框边框列表定位扩展项设置美化页面定义某CSS样式时需项进行设置需什效果选择相应项进行设置 93创建新CSS规 94应CSS样式 941种样式表应 l 应定义CSS样式列3种方法 l html标签样式高级样式定义仅该文档会动应相应文档中 l 外部css样式表:样式面板中选择附件样式表钮开链接外部样式表话框链接外部CSS样式文件 l 清样式选中清样式象设置成样式 l 范例css样式表 942应举例(参课p131139示例) 1课堂实例――CSS格式化文 2课堂实例――CSS控制表格 3CSS控制列表 4CSS控制背景 5CSS控制区块 6CSS样式滤镜应 95 编辑CSS规CSS样式 编辑CSS规:样式面板中直接双击进行修改 编辑CSS样式:样式列表中选中需编辑规名称直接单击编辑样式钮弹出CSS规定义话框中修改相应设置 96 CSS样式三种存放方式 (1)直接插入 (部标签): |