高职网页设计网页三剑客教案完整版.docx
- 文档编号:10309472
- 上传时间:2023-02-10
- 格式:DOCX
- 页数:43
- 大小:862.25KB
高职网页设计网页三剑客教案完整版.docx
《高职网页设计网页三剑客教案完整版.docx》由会员分享,可在线阅读,更多相关《高职网页设计网页三剑客教案完整版.docx(43页珍藏版)》请在冰豆网上搜索。
高职网页设计网页三剑客教案完整版
网页设计教案
中文版
FrontPage2002
DreamweaverMX
FlashMX
FireworksMX网页制作
培训教程
在讲解之前,就利用10~15分钟时间浏览一些知名的大型网站,边浏览边指出网页设计课程的学习目标,学习对象等。
使学生在学习之初即明确学习目标。
第一课:
网页制作概述
一、网页概述
㈠网页概述
在网上浏览时看到的一个一个页面就是网页。
网页都是用HTML格式来表示的。
按网页在一个网站中所处的位置可以分为:
主页和内页。
主页是指进入一个网站时看到的第一页;内页是指与主页相链接的与本网站相关的页面。
㈡网页中的常用述语
1.域名:
网站的英文标识。
在学习网络基础的时候我们知道,网站是由4组8位二进制数构成的数字标识,即IP地址。
但是由于数字不易记忆,所以要用英文名来进行标识,这就是域名。
如,搜狐网的网址是
2.站点:
站点中保存网站中用到的所有内容,如网页、图片等。
3.URL:
全球统一资源定位器。
提供一种在Internet上查找任何信息的标准方法。
用于表示网页的Internet位置的URL是“http:
//”。
4.超级链接:
将一个网站中的不同页面链接起来的功能。
在网上浏览时单击一个文本、图片等就能跳转到与之相关的页面,这些文本、图片就是超级链接的表现形式。
5.导航条:
相当于网站的目录,通过超级链接与各个站点或网页链接。
6.表单:
用于申请或提交某些信息而填写的交互网页。
7.发布:
将制作好的网页上传到网上的过程。
二、网页制作的常用软件
1.图形处理软件:
Photoshop、Fireworks
2.动画制作软件:
Flash
3.网页布局软件:
FrontPage、Dreamweaver
其中,Fireworks、flash、Dreamweaver被称为网页三剑客,后两个软件是我们这学期学习的内容。
三、网页制作的基本步骤
1.整理素材
将制作网页所需要的素材,如文字、图片、动画等,进行收集的过程。
收集的素材要符合网站的主题。
2.规划站点内容
收集好的素材后,要将素材进行归类,并将归类后的素材放到站点中固定的文件夹中。
如,图片要放入images文件夹,有关个人介绍的素材放入grjs文件夹等。
3.制作网页
利用图形处理软件进行网页页面的设计和处理,利用网页布局软件制作网页、添加超级链接等。
4.测试站点
运行站点的网页文件,发现问题,并及时进行修改。
5.发布网页
当反复测试修改直到所有网页正确运行后,就可以将站点上传到Internet上,进行发布。
第二课:
初识Dreamweaver
一、DreamweaverMX界面介绍
㈠插入栏:
放置了各种类型的对象,如图像、表格和层等按钮。
㈡工具栏:
放置了各种视图、各种查看选项和一些常用的操作按钮。
㈢编辑窗口:
显示当前创建和编辑的文档。
㈣属性面板:
用于查看和更改所选对象或文本的属性,对象不同,则属性面板的内容也不同。
㈤浮动面板组:
依靠在某个标题下面的相关面板的集合。
二、站点的创建
㈠显示站点窗口
本地站点的创建和管理主要在站点窗口中进行。
显示站点窗口的方法为:
1.在窗口浮动面板组中,单击“文件”浮动面板上的下拉按钮图标展开面板,再单击“站点”选项卡。
2.选择“窗口”|“站点”菜单命令,打开站点窗口。
新建:
新建一个站点。
Dreamweaver中可以同时建立多个站点。
编辑:
对已有站点进行编辑,可以更改站点的存储位置、为站点重新命名等。
复制:
复制当前选中的站点。
删除:
删除当前选中的站点。
注意:
此时只是将站点从站点管理器中删除,站点中的文件不会被删除。
导出:
将站点导出。
可将站点导出或存储在其他路径上。
导入:
将已有站点导入Dreamweaver进行编辑。
例如,同学们将做好的网页及附带文件存储到U盘上,下次上课需导入进行编辑,则可以使用导入命令。
问题:
为什么一定要将U盘上的站点导入,而不能直接编辑呢?
当文件夹被设置为站点后,在编辑中,Dreamweaver会自动为文件添加一些信息,以便日后查找方便。
比如,超链接,若定义了站点,则在设置超链接时只需使用相对地址,若没有站点,则必须使用绝对地址,这样当文件换一台电脑被打开,则不能正确运行超链接。
㈡构建站点
选择“站点”|“新建站点”进行演示。
三、站点的资源管理
㈠编辑本地站点
选择“站点”窗口右边的列表中的“编辑站点”,演示。
2编辑站点文件
编辑站点文件可以添加新网页、修改已有文件的文件名、新建文件夹、删除文件夹和文件等。
(分别演示)
四、上机实战(P43)
第三课:
用Dreamweaver布局页面
一、表格的应用
㈠插入表格
方法一:
在常用工具栏中选择表格按钮,图中红框框住的按钮。
弹出对话框:
对话框中的各选项的作用为:
-行数、列数:
指定表格的行数和列数。
-表格宽度:
有两个可选单位,即像素和百分比。
例如图中显示的500,若单位为像素,则以500像素的宽度建立表格;若单位为百分比,则以当前显示器显示窗口的大小的500%创建表格,可想而知,表格会很大,超出整屏显示范围。
-边框粗细:
设置边框的像素值,值为0表示无边框。
-单元格边距:
设置单元格的边距值。
-单元格间距:
设置单元格的间距值。
此外,在这个对话框中,还可设置表格的形式,即是否需要加页眉,为表格设置标题和摘要等。
提示:
在利用表格布局网页时,表格的边框、单元格边距、单元格间距的值一般均设置为0。
㈡格式化表格和编辑表格
在为网页添加了表格后,在屏幕下方会出现表格的属性:
在属性栏中,我们可设置表格属性、设置单元格属性、格式化表格、改变表格的边框色和背景色等。
(分别演示如何进行设置和修改)
㈢嵌套表格
在表格中再插入表格是利用表格布局的一个十分重要的环节。
具体方法见P49页。
讲解时要进行演示。
二、层的应用
㈠插入层
1、在“插入”栏的“布局”选项卡中有描绘层按钮,单击该按钮,鼠标变为十字形。
2、按下鼠标左键在页面上拖动出矩形,释放鼠标就可插入一个有8个控制点的层。
同时文档开始位置会出现一个层标记。
层
㈡编辑层
-选取层:
即用鼠标点击该层,使其出现8个控制点。
-移动层:
点住层左上角的方块,拖动即可移动层。
-调整层的大小:
利用8个控制点,可以放大、缩小、变形层。
-调整层顺序:
在层面板中选中要改变顺序的层,按下鼠标不放拖动到需要的位置。
-对齐层:
选择所有要对齐的层,在“修改”主菜单中选择“对齐”,在打开的子菜单中选择需要的对齐方式即可。
㈢层面板的应用
层编号:
指定层的名称,只能用英文字母。
左、上:
指定层相对于页面或父层左侧或上方的位置。
Z轴:
指层与层间的堆叠顺序号。
编号较大的层出现在编号较小的层的上面。
溢出:
指定层的内容超过了实际大小时的处理方法。
-Visible:
增加层的大小,使层中的内容都可见,并且层向下或向右扩大。
-Hidden:
保持层的大小,不显示超出的内容。
-Scroll:
为层添加滚动条。
-Auto:
当层的内容超出边界时,自动显示滚动条。
㈣创建嵌套层
在层中再添加一个层,即嵌套层。
说明:
在布局时,一般均使用表格,而不使用层,因为层的位置不好固定,会根据屏幕的大小自动调整它与页面左、上的距离。
但我们常见的在网页上飘来飘去的小动画,则时放在层中并设定了动画的。
这个内容我们到后面学习。
三、框架布局
在“布局”菜单中可选择利用框架进行布局:
每个框架形式后面给出了文字说明,我们以最常用的“顶部和嵌套的左侧框架为例说明框架的使用和保存。
1、框架页
用框架制作的网页,表面上看是一个页面文件,但实际上是由n+1个页面组成的。
n即所使用的框架数。
例中下图中的框架,有3个框架数,但共有4个框架文件。
4个框架页分别为:
红色、蓝色、白色和红框框住的页面。
其中,红框页面用于保存其它3个框架页面的布局格式。
所以,框架页在保存时,会分为4个页面保存。
保存后的页面也可以单独使用。
2、框架页属性
框架页的属性主要包括设置宽、高,修改网页属性,设置边框、设置超链接等。
(在讲解时通过演示讲解)
说明:
框架不适于布局网页,仅适合于制作BBS、聊天室之类的网页中,我们目前不对他进行学习。
练习:
用表格进行布局(依照“笨笨”网站页面进行布局。
素材用幻灯片演示)
注意:
1、不要用一个表格布局整个网页;
2、左右内容长度不同的表格要分别制作,必要时可嵌套多个表格;
3、注意区别图片和背景图片的作用。
第四课:
填充页面内容
一、设置页面属性
使用“修改”菜单中的“页面属性”,或在空白页面状态下的属性栏中选择“页面属性”,或在空白页面上右击鼠标并选择“页面属性”,均可打开页面属性对话框。
标题:
更改或设置页面的标题。
该标题将出现在浏览器的标题栏中。
背景图像:
在“浏览”中选择图片地址来设置网页的背景图像,也可直接在其地址栏中输入图像的地址。
文本:
设置文字的颜色。
设置后,网页的文字在默认状态下均使用这个颜色。
链接:
设置超链接在未使用时的颜色。
访问过的链接:
设置访问后的超链接的颜色。
活动链接:
设置正在访问的文字链接的颜色。
左边界、顶边界:
设置页面左边和上边的边距。
二、编辑文本
1、字体格式
Dreamweaver中的字体,需使用编辑字体来设置。
步骤为:
1)在字体后的下拉菜单中选择“编辑字体列表”
单击“+”号,再在“可用字体”中选择一个字体,再单击“+”号,再选择一种字体。
这样才能使中文字体进行字体列表中,对文字进行设置。
2)选择要改变字体的文本,在字体后的列表中选择一种所需字体。
2、设置字体颜色(演示)
3、设置字体大小
Dreamweaver中的字体大小只有7种字号和带有“+”和“-”的字号,“+”表示在原有字体上加大字号,“-”表示在原有字体上减小字号。
在制作网页时,根据大多数的审美方式,我们一般采用2号或3号字号。
三、插入图像
1、直接插入图像
-将光标定位到要插入图像的位置。
-“插入”|“图像”,或使用常用工具栏中的插入图像按钮,打开“选择图像源”对话框,选择一个图像,确定即可插入图像。
2、编辑图像
针对插入后的图像,点击该图像,即可出现图像的属性栏,在属性面板中,可以改变图像的大小等,也可将图像的某部分设置为超级链接,这部分内容我们在学习超级链接时学习。
说明:
我们在制作网页时,一般不提倡将大图插入后通过改变高宽而改变图像的大小,因为这样很容易使图像失真,所以我们应先在图形图像处理软件中制作或修改好图片,再插入进来。
另外,当插入图像时,弹出提示保存路径的对话框时,说明没有建立站点,应先建立站点再进行图像的插入,这样系统会以相对路径的形式保存图像。
若已建立好站点,则插入图像时,会提示保存到站点中的哪个文件夹中,我们通常会设置一个“image”文件夹,专门存放网站中的图片。
四、CSS样式的应用
当我们制作了大量的网页文件后,需要对文件中的文字、图像等元素进行统一的排版,那么有没有一种方法可以一次性排版,而不用一个文件一个文件的进行操作呢?
这就是我们这节课要学习的CSS样式。
CSS样式:
为网站建立一个统一风格的文件,在其中可以设置网站的字体大小、背景图像显示方式、超链接等元素的统一、固定的属性。
1、新建CSS样式
在“设计”浮动面板中,有一个“设计”选项卡。
单击该卡片右下角的新建按钮,可以新建一个CSS样式文件。
弹出下面的对话框:
此时我们可以“标签”选择一个标签,选择“确定”,即会弹出提示保存路径的对话框,我们设置好(演示),则会弹出:
在这里,我们可以对文档中的字体、背景等进行相应的设置,如指定文字的大小和颜色等。
在“新建CSS样式”的对话框中,需要选择标签,它们是HTML语言中段落、图片等的代码。
我们目前了解以下几个:
body:
指整个页面
img:
指图片
a:
超链接
p:
段落
table:
表格
2、CSS的应用
制作好CSS样式表文件后,我们在新建文件时,只需将CSS链接到该文件,即可应用CSS中规定的样式。
注意:
应用前该文件必须保存。
演示内容:
创建一个CSS文件,用于控制文字的大小,背景格式,图片大小。
新建一个文件,写上文件,进行应用。
第五课:
创建超链接
一、超链接的类型与路径
超链接根据源端点的不同可分为:
文本链接、图像链接、表单链接。
我们学习前两种。
根据目标端点的不同可分为:
-外部链接:
链接到本站点的站点或文档,如链接到其他网站。
-内部链接:
链接到本站点中的其他文档。
-E-mail链接:
启动电子邮件程序。
-局部链接:
链接到本网页中某锚点处。
二、链接路径
绝对路径:
是指提供链接目标端点所需的完整URL地址,包括使用协议。
如:
http:
相对路径:
是本地站点链接中最常用的路径形式,不需给出完整的URL地址,只需将两个文件所在路径的不同之处写明。
如,根目录下的文件链接“image”文件夹中的aaa.gif图片的地址为:
image/aaa.gif
注意:
在Dreamweaver中的所有文件,存储时都不能出现空格、汉字等,否则链接将不能正确显示。
三、创建链接
1、文档链接(演示讲解)
2、图片链接
将整个图片做为超链接,将图片的局部作为超链接(即;热区链接)。
(演示讲解)
3、链接到命名锚(演示讲解)
4、创建E-mail链接(演示讲解)
四、导航条的制作
参照P94页的步骤演示讲解。
实训一:
创建简单页面
第六课:
创建网页动态元素
网页的动态元素并不是指动画,而是指含有代码或程序的元素,我们在目前阶段只学习动态元素的添加,不学习他们的后台程序。
一、插入表单域
表单必须放在表单域中。
插入表单域的方法:
在“表单”工具栏中点击“表单域”按钮即可插入。
二、表单各元素的插入方法
以上图为例,演示讲解各元素的插入方法。
三、多媒体的插入
1、插入Flash元素
-Flash按钮(演示讲解)
-Flash文本(演示讲解)
-Flash动画(演示讲解)
注意:
只能插入swf文件。
2、插入声音
能作为网页背景音乐的文件格式有:
midi、mid、wav、mp3、realAudio等。
链接到声音文件的方法:
1)选择要链接到声音文件的文本或图像。
2)在属性面板中的“链接”文本框中指定声音文件。
嵌入声音的方法:
1)将光标定位在要嵌入文件的位置。
2)在“媒体”选项卡中单击“插入声音”按钮,打开“选择文件”对话框。
3)选择声音文件,插入到文档中,声音文件以图标形式显示。
4)在“高”和“宽”文本框中输入网页中播放器的宽度和高度。
第七课:
模板的制作与应用
一、模板简介
模板是一种具有固定格式的文档,在任何一个文档编辑软件中新建的文档窗口就是一个系统默认的无格式的文档模板。
也可以自己创建有格式的文档模板,这样可在运用模板时自动生成具有共同布局的页面,在编辑网页时,只需输入每个文档中不同的内容即可。
二、创建模板
注意:
创建模板的前提是已建立站点,创建好模板后,系统会在站点目录中添加Tamplate文件夹。
创建模板的步骤:
1、创建普通页面,利用表格布局,添加模板中共有的元素内容。
2、使用“文件”|“另存为模板”,指定模板名,将当前页面存储为模板。
3、在各页面需有所不同的地方添加可编辑区域,使得在运用模板时,共有的地方不可编辑,不同的地方可任意编辑。
方法为:
“插入”|“模板对象”|“可编辑区域”。
可编辑区域不需要设置宽高,在输入内容时,会按照内容的实际情况自动延伸。
三、管理模板
对已创建好的模板可以进行编辑和修改。
1、编辑模板
重命名和删除模板:
在系统的“文件”浮动面板中,可找到模板存储的文件夹和模板文件,在此可对模板文件进行重命名和删除。
2、修改模板
打开模板文件,对其中的页面进行修改。
修改后点击保存,会弹出更新对话框,即对所有应用该模板的文件进行更新,以此达到批处理的效果。
四、应用模板
新建文件时,选择一个模板确定,即可创建一个与模板页相同的页面,仅需在可编辑区域写上具体的内容即可。
实训2:
用模板创建网站
第八课:
认识FlashMX
概述:
Flash能够识别的图形格式有两种:
矢量模式、位图模式。
一、位图模式
通常,我们将位图模式显示图形的方法称为点阵法。
最常见的位图模式是BMP格式,位图模式的图形一般来说比较逼真,但是体积都比较大,灵活性比较差。
二、矢量模式
矢量模式是以数学的矢量方式来记录图像的内容的,它的内容以线条和色块为主。
它的图象远没有位图模式的图形那样逼真,但矢量图形的体积小、灵活性高,适合于网络动画的制作。
Flash可以引入文件类型有三种
●图像文件
●视频文件
●音频文件
一、图像文件
可以直接导入的文件格式常见的有JPG,GIF,PNG和BMP等,如果系统安装了QuickTime4和DirectX7,还可以使用PSD,TGA和TIFF等格式的文件。
二、视频文件
可以导入的视频文件有MOV,AVI和MPG/MPEG等,它们最终将以SWF或MOV格式进行发布。
三、音频文件
可以导入的音频文件包括WAV,MP3,AIFF和AU等几种格式。
Flash具有以下显著特点:
●矢量图形:
●交互式动画:
●流式播放技术:
●高质量的图像:
●多种多样的文件格式:
●文件的数据量小:
●插件工作方式:
一、工作界面布局
二、工具箱简介
常用工具栏:
工具箱:
三、面板的使用方法
时间轴面板:
是FlashMX中进行动画制作和内容编排的主要场所。
属性面板:
该面板显示当前使用工具的相关属性,可以通过改变相关参数达到特殊效果或动画效果设置。
关闭面板的方法:
可以执行【窗口(Window)】【时间轴(Timeline)】命令关闭时间轴面板。
也可以执行【查看(View)】【时间轴(Timeline)】命令)。
浮动面板和其它面板:
在操作界面的右侧,显示的是各个浮动面板的组合,如图所示,面板用来设置不能在属性面板中设置的功能。
四、场景设置
场景是指在当前动画编辑窗口中,编辑动画内容的整个区域,如图所示。
五、FlashMX的文件
新建文件的几种方法:
●执行【文件(File)】【新建(New)】命令。
●单击常用工具栏中的【新建】按钮。
●按【Ctrl+N】组合键。
保存文件的操作步骤:
1、执行【文件】【保存(Save)】命令,打开【另存为(SaveAs)】对话框。
2、在【保存在】下拉列表中选择保存路径,然后在【文件名】文本框中输入文件的名称。
3、单击【保存】按钮,即可将创建的文件保存起来,此时文件的扩展名为.fla。
打开以前创作或编辑的动画文件的几种方法将文件:
●执行【文件】【打开(Open)】命令,打开需要的文件。
●单击常用工具栏中的【打开】按钮。
●按【Ctrl+O】组合键快速打开文件。
●如果要将某文件作为元件库打开,可以执行【文件】【作为库打开(OpenAsLibrary)】命令。
可以使用下面几种方法关闭文件:
●执行【文件】【关闭(Close)】命令,或者按【Ctrl+W】组合键,将当前文件关闭。
●单击文件窗口右上角的【关闭】按钮关闭文件。
六、动画中的基本概念
1、帧
帧位于时间轴上,是动画播放的基本单位。
帧有普通帧、关键帧和白色关键帧三类。
关键帧是有内容的帧,可以任意更改该帧中的对象,在时间轴上以小黑点表示。
白色关键帧是没有任何内容的帧,在时间轴上以空心圆表示。
普通帧用于延长关键帧中的内容,或作为两个关键帧间动作的过渡,不能对其进行编辑。
2、元件
元件是组成动画的基本单位,创建的元件保存在库中,可以反复取出使用。
第九课:
编辑对象
一、图形绘制
(一)规则图形的绘制
矩形与椭圆的绘制方法以及属性设置相同,以椭圆的使用方法为例,讲解这两个规则图形绘制工具的使用方法。
要想绘制椭圆,需要先设置椭圆的笔触颜色、填充色、笔触样式及笔触高度:
从工具箱中选择【椭圆工具】,颜色区中的【笔触颜色】和【填充颜色(FillStrokeColor)】两个按钮分别用于设置椭圆的笔触颜色和填充颜色,如图所示:
绘制空心椭圆的方法:
用鼠标选择该面板右上角的【无颜色】按钮(或是在选择了工具箱中的【填充颜色】按钮后,再单击其下方的【无颜色】按钮即可。
1、设置笔触颜色
单击【笔触颜色】按钮,会打开笔触颜色面板,如图所示。
移动鼠标即可从该面板中选择需要的颜色。
2、设置笔触无色
1)、从上图所示的颜色面板中选择右上角的无颜色(NoColor)】按钮。
2)、先选择工具箱颜色区中的【笔触颜色】按钮,然后单击其下方的【无颜色】按钮。
3、设置填充颜色
单击【填充颜色】按钮,会打开填充颜色面板,如图所示。
用鼠标从面板的中间色块区中选择一种合适的颜色即可设置为所画椭圆的填充颜色。
椭圆边界线的样式可以通过【椭圆工具】的属性面板来设置。
当从工具箱中选择了【椭圆工具】后,它的属性面板如图所示。
当从工具箱中选择了【矩形工具】后,其工具属性面板如图所示:
【圆角矩形半径(RoundRectangleRadius)】按钮
的设置:
该按钮可用于设置矩形4个角的圆角半径。
单击该按钮,可以打开【矩形设置(RectangleSettings)】对话框,给定一定的数值即可形成圆角矩形。
(二)不规则图形的绘制
利用钢笔工具、铅笔工具和画笔工具可以绘制不规则的图形。
1、钢笔工具
钢笔工具可以绘制任意开关的图形,我们以P153页的实例为例进行学习。
(具体步骤见书上P153页)
2、画笔工具
画笔工具用于以填充方式绘制图形,当选择了【画笔工具】后,工具箱下方的选项区如图所示,其中有4个选项,用于设置画笔的不同属性。
二、选取对象
选取对象是编辑图形或其他对象的前提,选取对象有箭头工具和套索工具。
(一)箭头工具
单击箭头工具,其“选项”栏有三种模式:
1、自动吸附功能模式
2、曲线趋于平滑模式
3、曲线趋于直线模式
若要选取绘制的图形或打散的位图、元件等,则应使用拖动鼠标的方式进行框选,选取的部分以点的形式显示。
若要选取的对象是元件,则只需在元件上单击即可,选取后对象以蓝色的线框显示。
箭头工具除进行选取以外,还有以下几个功能:
1、移动对象(演示)
2、复制对象
选中对象后按住Ctrl键并拖动鼠标到目标僧,释放鼠标即可复制。
3、修改对象形状
例:
以添加了矩形后,改变矩形边的弧度为例讲解。
(二)套索工具
套索工具用于对物体进行不规则的选取。
(边讲解边演示)
1、魔术棒工具
可以任意地圈选色块或在导入并打散的位图上选取色彩范围。
“限度”:
设置色彩容差度,数值越大,选取的领
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 高职 网页 设计 剑客 教案 完整版