网页研发设计黎友源.docx
《网页研发设计黎友源.docx》由会员分享,可在线阅读,更多相关《网页研发设计黎友源.docx(119页珍藏版)》请在冰豆网上搜索。
网页研发设计黎友源
备课本
课程名称网页设计
授课教师黎友源
授课班级09广告班、多媒体班
参考教材网页制作基础教程DreamweaverCS3版
授课时间:
2010至2011学年度第2学期
眉山职业技术学院教务科研处制
本学期授课计划
周次
日期
教学内容
授课时间
课时
课内
课外
讲授
实训
7
2011.04.07
项目一:
制作第一个网页
项目二:
创建一个站点
☆
辅导
1
3
8
2011.04.14
项目三:
编辑网页文本
项目四:
编辑网页图像
☆
辅导
1
3
9
2011.04.21
项目五:
编辑多媒体页面
项目六:
在网页中使用超链接
☆
辅导
1
3
10
2011.04.28
项目七:
使用表格布局页面
项目八:
在网页中使用表单
☆
辅导
1
3
11
2011.05.05
项目九:
使用布局模式布局页面
项目十:
使用层布局页面
☆
辅导
1
3
12
2011.05.12
项目十一:
使用框架布局页面
☆
辅导
1
3
13
2011.05.19
项目十二:
使用行为增加动感效果
☆
辅导
1
3
14
2011.05.26
项目十三:
利用模板和库制作网页
☆
辅导
1
3
15
2011.06.02
项目十四:
编写HTML代码创建网页
☆
辅导
1
3
16
2011.06.09
项目十五:
利用CSS美化页面
☆
辅导
1
3
17
2011.06.16
项目十六:
架设Web服务器发布网站
☆
辅导
1
3
18
2011.06.23
项目十七:
简单商务网站系统建设(综合实训1周时间)
☆
30
19
2011.06.30
复习总结、答疑
☆
4
20
2011.07.07
上机考核(验收《简单商务网站系统》)
☆
4
21
2011.07.14
教学总结
总课时
82*2=164
11
71
项目评估(样表)
班级______姓名:
________时间________总得分:
___________矚慫润厲钐瘗睞枥庑赖。
评价项目
评 价 标 准
等级(权重)分
自评
30%
小组评
30%
教师评
40%
优秀
良好
一般
较差
知
识
理解“网页”的概念,并能够正确描述
10
8
6
4
掌握网页的基本构成要素,在浏览网页时,能够准确识别
10
8
6
4
操作技能
能新建并保存网页
10
8
6
4
能按照给出步骤输入相应文本
10
8
6
4
能按照给出步骤插入相应图片
10
8
6
4
能正确浏览页面
10
8
6
4
情感态度
课堂上积极参与,积极动手、动脑,有自主学习的能力
10
8
6
4
小组协作交流情况:
小组成员间配合默契,彼此协作愉快,互帮互助
10
8
6
4
独立思考问题,提出解决问题的方法,善于总结,有探究精神,有创新意识
10
8
6
4
课
堂
调
查
书面写出你在学习本项目时所遇到的困难,能向教师提出较合理的建议。
10
8
6
4
我的自评:
组内评语:
教师评语:
注:
自评、小组评、教师评的满分各是100分,每个学生的最后得分=自评×30%+小组评×30%+教师评×40%聞創沟燴鐺險爱氇谴净。
《网页设计基础(HTML/DREAMWEAVER)》教案
教学课题
项目一:
制作第一个网页
教学时间
年月日
教学内容
1.初步认识Dreamweaver的工作环境
2.制作第一个网页
教学目的
1.能正确描述网页的概念
2.能掌握网页的基本构成要素
教学重点
1.了解网页设计各步骤的主要功能
2.掌握网页设计各步骤的使用,熟练掌握按照步骤设计网页。
教学难点
利用网页设计的步骤设计网页
建议课时
理论:
2实训:
4
教学教具
多媒体教学系统
机房
教学方法
理论:
使用多媒体教学方法讲授(.PPT);实训:
学生上机练习
演示设计
板书设计
PPT
教学过程
课程导入
主要内容
对于同学们来说,网络并不陌生了,请同学们欣赏几个有特色的网站,如新浪,网易等,在大家兴奋之余,希望同学们也能设计出这样的网站,所以,大家仅仅有兴趣是不够的,还要认真学习。
详细内容及要求
【情境设置】
对于同学们来说,网络并不陌生了,请同学们欣赏几个有特色的网站,如新浪,网易等,在大家兴奋之余,希望同学们也能设计出这样的网站,所以,大家仅仅有兴趣是不够的,还要认真学习。
【项目展示】
本项目完成后的大体效果如下(不要求大家做的和样张完全一样)
【项目目标】
•能正确描述网页的概念
•能掌握网页的基本构成要素
【项目分析】
具体工作任务:
1.初步认识Dreamweaver8的工作环境
2.制作第一个网页
【实施步骤】
•步骤一:
新建空白页面
•步骤二:
保存网页文件
•步骤三:
输入网页标题
•步骤四:
输入文本
•步骤五:
插入图像
•步骤六:
再次保存网页
•步骤七:
预览最终效果
【知识链接】
一、网页的基本概念
1.Internet
Internet翻译成中文叫做因特网,准确的描述是Internet是一个网络的网络(anetworkofnetwork),我们通常所说在家中上网,其实将是将你的计算机连入Internet。
2.WWW
WWW是WorldWideWeb的缩写,即“万维网”,也叫做Web。
Internet与WWW之间的关系:
WWW只是Internet众多功能中的一种。
3.网页
网页是WWW中最基本的电子文档。
网页本质上是由HTML语言编写的一种文本文件。
通常的网页文件都是以htm或html后缀结尾的文件,俗称HTML文件。
HTML的意思则是“HyperTextMarkupLanguage”,翻译为“超文本标记语言”。
后面会具体学习网页分为静态网页和动态网页。
4.网站
网站实际上是若干相关网页的集合,这些网页通过超链接的形式连接在一起,网站又称作Web站点。
5.网页的工作原理
二、网页的基本构成要素
1.文本
2.图片
3.动画
4.声音和视频
5.超链接
6.表格
7.表单
8.其它元素
【知识拓展】
拓展项目展示:
制作要点提示:
1.新建并保存网页
2.输入文本
3.插入图片
4.再次保存文件
5.预览最终效果
你们常用的浏览器是什么?
教学小结
本项目中主要介绍了网页制作的基础知识,包括网页的一些基本概念、相关术语和主要元素,以及网页的工作原理等。
学习指导
学生在学习这一节内容时,对网页制作的概念有了初步的了解;
在上机操作时,要注意强调整个流程的实际操作。
参阅教材
网页制作基础教程DreamweaverCS3版(黄洪杰著)
作业
知识拓展photoshop的使用
教学后记
《网页设计基础(HTML/DREAMWEAVER)》教案
教学课题
项目二:
创建一个站点
教学时间
年月日
教学内容
操作Dreamweaver的用户界面
建立本地站点
编辑本地站点
在站点中建立相关文件夹和页面
教学目的
能熟悉Dreamweaver的工作界面
能熟练创建和编辑站点
教学重点
能熟练创建和编辑站点。
教学难点
能熟练创建和编辑站点,对于网站结构的理解
建议课时
理论:
2实训:
4
教学教具
多媒体教学系统
机房
教学方法
理论:
使用多媒体教学方法讲授(.PPT);实训:
学生上机操作
演示设计
板书设计
教学过程
课程导入
主要内容
通过前面的学习,同学们已经知道什么是站点了,那么我们在真正进入学习制作网站前,先要学习一下如何管理我们的站点,以便于在制作时,能够事半功倍,得心应手,Dreamweaver中也是通过站点这一概念来实现网页开发中各种资源的管理。
借助于Dreamweaver的站点管理,可以方便的建立,移动,删除站点内的文件
详细内容及要求
【情境设置】
通过前面的学习,同学们已经知道什么是站点了,那么我们在真正进入学习制作网站前,先要学习一下如何管理我们的站点,以便于在制作时,能够事半功倍,得心应手,Dreamweaver中也是通过站点这一概念来实现网页开发中各种资源的管理。
借助于Dreamweaver的站点管理,可以方便的建立,移动,删除站点内的文件
【项目展示】
本项目完成后的大体效果如下(不要求大家做的和样张完全一样)
【项目目标】
•能熟悉Dreamweaver的工作界面
•能熟练创建和编辑站点
【项目分析】
具体工作任务:
1.操作Dreamweaver的用户界面
2.建立本地站点
3.编辑本地站点
4.在站点中建立相关文件夹和页面
【实施步骤】
步骤一:
创建一个本地新站点
根据【站点定义向导】逐步完成。
这里需要说明的是站点在计算机上的存放位置,大家可以根据自己机器的实际情况,将站点的保存位置设置为机器中的某个磁盘分区里。
本例中即为将站点存放在E盘里的myweb文件中,系统会自动在E盘下创建这个文件夹,并将该文件夹作为站点的根本件夹。
站点中所有的网页或素材等资源将会保存在该文件夹下。
步骤二:
编辑已经存在站点。
若建立好的站点想要修改其某些属性,比如修干站点的存放位置,或者修改站点名称等等。
则可以随时修改,本步骤就是教给大家如何完成修改。
步骤三:
创建文件夹。
在站点的根本件夹中可以创建若干子文件夹。
我们要建设一个完整、成功的网站,其中必然要包含很多内容,如:
网页文件、图片文件、声音文件、动画文件等等。
为了方便开发者分类管理、维护这些文件,使得站点中各类文件的存放有条理性、结构性,可以通过在站点根文件夹中建立若干子文件夹的形式,对各种类型的文件分类保存管理,如:
建立images文件夹来存放图片文件;建立music文件夹来存放声音文件等等。
当然也可以按照其他方法分类进行保存管理。
步骤四:
创建网页文件。
在站点的根本件夹中创建一个空白页面并命名,本例中重新将网页文件命名为index.html,该名称在站点中一般作为首页的名称。
当然,除了可以直接在站点根文件下创建网页外,还可以在根文件夹中的子文件夹里创建网页。
【知识链接】
一、Dreamweaver简介
Dreamweaver是一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
三、创建站点的必要性
利用Dreamweaver中的站点可组织与网站相关的所有文档,跟踪和维护链接,管理文件,共享文件以及将站点文件传输到Web服务器。
Dreamweaver站点根据站点中文件的存放地点,可以分为本地站点和远程站点,本教材中所有项目中所建立站点均为本地站点。
四、首页和网站结构
通常所说的网站是由一个或多个网页组成的,而进入网站时首先打开的网页称为首页或主页。
按照行业习惯命名为“index.htm”(“index.html”)或“default.htm”(“default.html”)。
本书中站点首页名称一律采用了为index.html。
网站结构图:
【知识拓展】
教学小结
本项目中主要介绍了Dreamweaver的工作界面,以及站点及站点中文件夹和文件的创建、编辑、删除等具体管理操作。
学习指导
指导学生建立自己的站点
参阅教材
网页制作基础教程DreamweaverCS3版(黄洪杰著)
作业
知识拓展photoshop的使用
教学后记
《网页设计基础(HTML/DREAMWEAVER)》教案
教学课题
项目三:
编辑网页文本
教学时间
年月日
教学内容
1、制作一个网页,主题为“计算机的发展史”,输入文本并使用多种文本格式化方法设置文本。
2、插入一些简单元素使页面更加精彩
教学目的
•能新建并保存网页文件
•能掌握普通文本的输入方法
•能设置页面背景
•能对网页文本格式化操作
•能插入特殊字符、日期、水平线
•能正确设置文本式超链接
•能预览网页
教学重点
设置页面背景、网页文本格式化操作、插入特殊字符、日期、水平线、设置文本式超链接、预览网页
教学难点
正确设置文本式超链接
建议课时
理论:
2实训:
4
教学教具
多媒体教学系统
机房
教学方法
理论:
使用多媒体教学方法讲授(.PPT);实训:
学生上机操作
演示设计
板书设计
教学过程
课程导入
主要内容
当同学们畅游在网络上时,无论我们看到什么类型的网站,还是多么生动的页面,都离不开文字,它是人类最重要的信息载体与交流工具,所以,网页中的信息也以文本为主。
详细内容及要求
【情境设置】
当同学们畅游在网络上时,无论我们看到什么类型的网站,还是多么生动的页面,都离不开文字,它是人类最重要的信息载体与交流工具,所以,网页中的信息也以文本为主。
【项目展示】
本项目完成后的大体效果如下(不要求大家做的和样张完全一样)
【项目目标】
•能新建并保存网页文件
•能掌握普通文本的输入方法
•能设置页面背景
•能对网页文本格式化操作
•能插入特殊字符、日期、水平线
•能正确设置文本式超链接
•能预览网页
【项目分析】
具体工作任务:
1、制作一个网页,主题为“计算机的发展史”,输入文本并使用多种文本格式化方法设置文本。
2、插入一些简单元素使页面更加精彩
【实施步骤】
步骤一:
创建一个新的站点并将站点的存放位置设为e:
\sucai\chapter3中(也可根据自己机器单位实际情况设置)。
在站点根文件下创建子文件夹images和网页文件index.html。
步骤二:
输入文本
注意:
在Dreamweaver中,无论中文或是英文输入状态,输入多少个空格,软件都按一个空格处理,只有当处于中文输入法全角状态时,才可以输入多个空格。
步骤三:
设置文本格式
设置文本的字体、大小、颜色。
设置标题文本格式和正文文本的格式。
步骤四:
插入水平线
步骤五:
插入特殊字符和日期
步骤六:
设置页面背景
这一步中将要选择一副图片作为整个网页页面的背景。
需要注意的是,若选择的图片文件不在当前站点根文件夹中(本例为e:
\sucai\chapter3),则系统会提示你是否将该图片文件从原位置拷贝到站点根文件夹中,此时要选择是,默认情况下,系统会将图片文件直接复制到根文件下,虽然这样也没问题,但是,我们说过,站点内的文件最好分类保存,不要把各种类型所有文件都直接放在根文件下,比如可以在根文件下建立一个专门的子文件夹,用来保存图片类的文件,这就是我们在第一步中建立images子文件夹的目的,我们可以把网页中用到图片文件都统一放在这个子文件夹下。
因此在“复制文件为”对话框中,保存在处要选择根文件夹下的images,以将从原来位置拷贝过来的图片文件放在imags子文件夹中。
步骤七:
设置文字超链接
步骤八:
预览文件
【知识链接】
一、页面属性设置
页面属性的不同设置,可以修改文本元素的属性,也可以修改如背景图像、链接元素等相关的属性,覆盖整个页面,恰当的修改后,会使整个页面焕然一新。
我们可以从外观、链接、标题、标题/编码、跟踪图像五个方面进行页面属性的设置。
二、输入特殊字符
特殊字符主要分为四类:
特殊字符,分别为标点符号类、货币符号类、版权相关类、以及其他字符。
插入方法:
1.选择【插入】工具栏中的【文本】选项卡,单击其中最后一个特殊字符组按钮。
2.菜单式操作:
【插入】|【HTML】|【特殊字符】
三、段落格式化
Enter键:
生成一个段落。
Shift+Enter键:
只将文本换行而不生成新的段落。
段落格式化设置主要可以设置段落对齐、项目列表和编号列表、文本凸出和文本缩进。
四、标尺和网格
标尺和网格工具属于网页制作中的辅助工具,可以用于准确定位页面中的元素位置,或者对齐页面元素。
【知识拓展】
拓展项目展示:
制作要点提示
1.新建并保存网页
2.输入文本
3.设置标题格式
4.设置正文文本格式
5.添加版权信息和日期
6.设置页面背景图像
7.在页面底端,输入“计算机发展史”,并将其与“计算机发展史”网页链接
8.在标题行下方插入了一个水平分割线条图片来装饰页面
9.再次保存文件,并预览网页效果
教学小结
本项目主要介绍了网页中文本元素的编辑使用,以及如何能够在网页制作中使主体元素即文本元素能够更加美观、有视觉冲击力。
学习指导
指导学生进行网页中文本元素的编辑使用,以及如何能够在网页制作中使主体元素即文本元素能够更加美观、有视觉冲击力
参阅教材
网页制作基础教程DreamweaverCS3版(黄洪杰著)
作业
知识拓展photoshop的使用
教学后记
《网页设计基础(HTML/DREAMWEAVER)》教案
教学课题
项目四:
编辑网页图像
教学时间
年月日
教学内容
制作一个网页,主题为“文学天地”
输入文字,进行适当的设置
插入普通图像,合理设置来美化页面
插入其他图像元素来修饰页面
设置页面背景,使效果更加完美
教学目的
能正确插入普通图像
能合理设置图像属性
能正确插入鼠标经过图像
认识常用的图像文件类型
教学重点
正确插入普通图像、合理设置图像属性、正确插入鼠标经过图像
教学难点
认识常用的图像文件类型、正确插入鼠标经过图像
建议课时
理论:
2实训:
4
教学教具
多媒体教学系统
机房
教学方法
理论:
使用多媒体教学方法讲授(.PPT);实训:
学生上机操作
演示设计
板书设计
教学过程
课程导入
主要内容
在当今的信息化时代里,网络已经成为了人们沟通的纽带,我们也经常通过网络去了解社会,了解产品等,所以一个好的网站将成为一个最大的展示平台,那么一个好的网站显得更加重要,其中最具吸引力的,使页面更加丰富多彩的当属图像元素的使用。
详细内容及要求
【情境设置】
在当今的信息化时代里,网络已经成为了人们沟通的纽带,我们也经常通过网络去了解社会,了解产品等,所以一个好的网站将成为一个最大的展示平台,那么一个好的网站显得更加重要,其中最具吸引力的,使页面更加丰富多彩的当属图像元素的使用。
【项目展示】
本项目完成后的大体效果如下(不要求大家做的和样张完全一样)
【项目目标】
•能正确插入普通图像
•能合理设置图像属性
•能正确插入鼠标经过图像
•认识常用的图像文件类型
【项目分析】
具体工作任务:
1.制作一个网页,主题为“文学天地”
2.输入文字,进行适当的设置
3.插入普通图像,合理设置来美化页面
4.插入其他图像元素来修饰页面
5.设置页面背景,使效果更加完美
【实施步骤】
步骤一:
创建一个新的站点并将站点的存放位置设为e:
\sucai\chaper4中。
在站点根文件下创建子文件夹images和网页文件index.html。
步骤二:
输入并格式化文本
步骤三:
插入普通图像
步骤四:
设置图像属性
步骤五:
插入鼠标经过图像
需要注意的仍是所插入图像若不在站点内时,要将所有的图像均保存到images文件中,这是一个好的习惯,也是行业惯例。
【知识链接】
一、网页中的颜色
在网页中是以RGB来表示颜色的,我们所看到的成千上万的颜色都是由红、绿、蓝三种基础颜色调和而成的。
网页安全颜色范围:
由红,绿,蓝三种基色可以调和成16777216种,但网页中常用到的是216种颜色,这是由于浏览器能正常显示的这,超出这个范围就失真,因此我们也把这216种颜色叫做网页的安全颜色范围。
二、网页中的图像格式
1.GIF格式:
是网页中常用的一种图像格式,在绝大多数浏览器中都能正常显示。
2.JPEG格式:
是网页中常用的一种图像格式,下载速度非常快,适合于显示颜色丰富、细腻的图像
3.PNG格式:
适合于在网络上传播。
但是,它只有在MicrosoftInternetExplorer(4.0及以上版本)和NetscapeNavigator(4.04及以上版本)才能得到支持。
三、图像属性参数
我们可以通过属性参数面板来设置图像的各种属性。
操作方法:
选中要编辑的图像,然后编辑、修改图
像属性面板的参数。
四、调整图像
插入到页面中的图像可以进行必要的修改。
图像的调整主要是:
调整大小、裁剪图像、调整亮度和对比度、锐化图像。
五、插入鼠标经过图像
鼠标经过图像是一种图像在浏览器中显示的特殊效果,为了实现这个效果,需要两副图像,正常状态下显示一副图像,而当鼠标指针经过该图像时,它将变化为另外一副图像,从而达到一种图像动态变化的特殊效果。
注意:
“原始图像”和“鼠标经过图像”所设置的两个图像尺寸大小最好相等,如果大小不等,系统将自动调整第二个图像的大小,使其与第一个图像匹配。
六、插入图像占位符
图像占位符:
是临时替代图像的,顶替图像的位置,是在设计好页面后又不能确定插入什么样的具体图像时,在图像的位置上使用图像占位符,可以避免由于没有图像而导致无法正常设计的问题。
图像占位符与图像的属性基本相同。
【知识拓展】
拓展项目展示:
制作要点提示
1.创建一个本地站点并且新建一个子文件夹images来管理素材文件
2.新建一个网页,保存网页文件,将其命名为“index.html”
3.插入一个3行3列的表格
4.在每个单元格中分别插入一幅图像
5.保存文件,预览最终效果
教学小结
本项目中主要介绍了网页图像的相关知识,如何插入、编辑图像,以及鼠标经过图像特殊效果的使用方法。
学习指导
指导学生如何插入、编辑图像,以及鼠标经过图像特殊效果的使用方法
参阅教材
网页制作基础教程DreamweaverCS3版(黄洪杰著)
作业
知识拓展fireworks的使用
教学后记
《网页设计基础(HTML/DREAMWEAVER)》教案
教学课题
项目五:
编辑多媒体页面
教学时间
年月日
教学内容
制作一个网页,主题为“与青春有约”
设置页面背景,使效果更加完美
输入文字,进行适当的格式化设置
插入Flash动画,设置对齐方式,放置一个合适位置
插入Flash文本,内容为版权信息,设置动态变换方式
插入Flash按钮,设置链接
设置背景音乐
插入视频
教学目的
能正确插入Flash动画
能掌握Flash对象的插入方法
能学会视频的插入
能正确添加背景音乐
教学重点
正确插入Flash动画、视频、背景音乐
教学难点
正确插入Flash动画、视频、背景音乐
建议课时
理论