培训讲义-第一天

PAGE第26页共26页培训讲义—第一天纪律与要求按时上课,不迟到,不早退.遵守学校的一切规章制度，如违犯报学校处理。要认真做好作业，不做与上课内容无关事情；不准玩游戏、聊天、OICQ等4、对优秀作品，张榜公布。学习任务高质量完成一个网站网站规划确定主题确定版块以及层次规划素材收集、制作：文字、图片、动画网页制作：要考虑版面布局、颜色搭配、图文相衬等因素。复习Frontpage基本内容网站的建立㈠建立方法㈡文件名（目录名）约定㈢更改文件名的方法文字㈠文字输入㈡Word等文档资料的处理㈢编辑与修饰㈣要注意软回车与硬回车的区别图象㈠图象的插入方法㈡网页中支持的图象格式支持的图象格式:GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等最常用的有：GIF、JPEG、BMP㈢图片工具的使用㈣图片属性的设置插入Flash动画方法：“插入”→“高级”→“插件”5、超链接㈠超链接的建立方法㈡目标框架：相同框架（_self）、整页（_top）、新建窗口(_blank)、父窗口（_parent）书签㈠在Web页上创建书签将插入点放在要创建书签的位置，或者选择要分配书签的文本。在“插入”菜单上，单击“书签”。在“书签名称”框中，键入书签的名称（允许使用空格）。㈡删除书签在“网页”视图中，单击“插入”菜单上的“书签”。在“此网页中的其他书签”框中，单击要删除的书签。单击“转到”。单击“清除”。㈢书签的作用：在同一文件中跳转或跳转到某网页的指定位置培训讲义—第二天表格综合应用、版面设计在复杂的网页设计中，表格的应用是最多的。这一方面是因为表格的信息量大，它用最简洁的形式表达了繁杂的内容，另一方面它还可以用来控制文本和图像在页面上出现的位置，把文字和图像规范地按照行或列对齐，使整个页面看上去紧凑而统一。这对于复杂版面的网页排版来说，有很大的帮助。对于一个网页设计者来说，如果能够灵活地应用表格，就会让你的网页看上去井井有条、美观大方且具有吸引力。下面介绍FrontPage2000中表格的使用技巧。

1、

细线表格

FrontPage2000默认的表格并不十分理想，你可以稍加处理，制作出一个只有1个像素宽度的细线表格，这种表格非常娟秀小巧，很有个性。它的设置方法是：在表格属性中将边框粗细设为1，将单元格边距和单元格间距设置为0，同时将亮边框设置成与表格背景相同的颜色，暗边框设成你想要的任一颜色即可(图1)。

2、表格的凹、凸效果

把表格框线突出，就可以达到表格内容凹陷的效果，很有立体感。操作方法是：在表格属性中把亮边框设置为白色，把暗边框设置为黑色，适当调整边框线的粗细和单元格间距，然后设置合适的单元格颜色，就可以让表格达到很强的立体效果。当然对于亮边框以及单元格的颜色你也可以根据网页的背景颜色灵活搭配，这就要求你要有一定的色彩搭配知识和技巧。

既然可以让表格下陷，那我们也可以让它凸起，这种效果非常美观。方法是：把亮边框设置为黑色，暗边框设置为白色，单元格设置为一种中间色就行了。

3、用表格做按钮

很多人为了做出按钮效果，不得不去动用一些图像或动画制作工具，非常麻烦，事实上，利用FrontPage2000的表格功能，你可以轻松地做出按钮效果来。方法是：插入一个一行一列的表格，然后设置它的表格属性，将单元格边距和单元格间距均设为0，亮边框设为白色，暗边框设为黑色，然后把边框的粗细设置为一个较大的数值就行了(图4)，该例中设为10，你可以根据需要灵活调整4、

利用表格分栏，进行版面设计

在网页设计中，版面的设计是重中之重，如果整体上的版面没设计好，那么这个网页可以说是失败的。利用表格进行分栏，可以达到整齐排版的目的，美化你的网页外观。所谓分栏，就是让你的网页变成一个大表格，然后根据你的版面设计和内容安排，再将这个表格分成不同的行和列，调整各个行和列的宽度和高度，以达到你排版的要求。当然了，你还可以在表格之中再嵌套表格，以达到更加复杂的排版需要。记住了，为了不让表格边框线出现在你的网页中，必须把边框线的粗细设置为0，在设计过程中你还可以根据排版的需要灵活设置单元格边距和单元格间距的数值。

学习练习：要求设计如l/sjfl.htm版面，以“表格综合应用.htm”文件名存入自己文件夹5、举实例:分析如何用表格进行拆分板块进行版面设计。

培训讲义—第三天建立框架网页框架网页是一种特殊的HTML网页，可用来将浏览器视窗分割成不同的区域，每个区域称为框架，每一个框架可以显示不同的网页。各框架之间可以互相控制，在这个框架点击链接，被链接的页面就在另一个框架出现。一、框架网页的建立[做一做]下面，我们就建立这样一个框架网页，它由左右两个框架组成，如下图所示。其中左侧框架用于控制右侧框架的内容，即在左侧框架中单击某一个网页名称，右侧框架显示相应的网页。图7-481．新建框架网页要建立框架网页，做法是：（1）单击“文件”菜单的“新建”向下的“网页”命令，打开“新建”对话框，选择“框架网页”选项卡，结果如下图；图7-49（2）对话框中列出多种不同的框架模板供你选择，单击某种模板，可以在预览框中观察它的框架布局。这里，单击“垂直拆分”样式，单击“确定”按钮后结果如下图；图7-502．建立框架中的网页在框架网页中，每个框架允许设置不同的网页，并提供两个按钮用于指定设置网页的方式，其中：“新建网页”按钮：在该框架中建立一个新的网页；“设置初始网页”按钮：指定磁盘中的某一网页为该框架中的网页；本例中，对于左侧框架，单击“新建网页”按钮，然后在该框架中建立所需的网页，操作如下：（1）单击“新建网页”按钮；（2）以5磅字、红色输入“单击进入：Enter”；（3）以5磅字、蓝色输入“唐代名词赏析Enter小太阳个人主页Enter班级主页”；（4）拖动选择“唐代名词赏析”，单击工具栏上的“超链接”按钮，在弹出的对话框中，在文件列表框中选择文件“唐代名词赏析.htm”；然后单击“目标框架”右侧的按钮，在弹出的对话框中单击右侧的框架，可以看到，“目标框架”的内容变为“right”，如下图，最后单击“确定”按钮。图7-51（5）用类似的方法为“小太阳个人主页”和“班级主页”设置超链接；（6）向左拖动两个框架之间的分割线至图中所示的位置，目的是空出更多地方用于显示链接的网页；对于右侧的框架，这里指定为网页“唐代名词赏析.htm”，操作如下：（1）单击“设置初始网页”按钮，在弹出的“设置超链节”对话框的文件链表框中选择文件“唐代名词赏析.htm”；（2）单击“确定”按钮。3．保存框架网页单击常用工具栏上的“保存”按钮，先弹出一个“另存为”对话框用于保存左侧框架中新建的网页，这里输入文件名“框架链接”，单击“保存”按钮；接着弹出一个“另存为”对话框用于保存框架网页，这里输入文件名“网页综合”，单击“保存”按钮。二、设置框架网页的外观框架网页建立后，可以通过选择和拖动框架边框来调整框架大小，还可以右单击框架网页，选择“框架属性”命令后在弹出的对话框中设置框架的外观，包括大小、滚动条、边距等。如下图；图7-52三、框架网页的用途框架网页能够包含内置导航并显示一致的用户界面(就是框架的结构和布局)，因此，框架网页通常用于目录、文章列表或其他种类的网页上。[做一做]例如，要将本班同学的主页“链接”在一起，可以选择“横幅和目录”框架网页模板创建网页，具体安排如下图所示：图7-53[练一练]1．填充题（1）在框架网页中，“新建网页”按钮的作用是。（2）在框架网页中，“设置初始网页”按钮的作用是。（3）框架网页建立后，可以通过选择和拖动框架来调整框架大小。2．简答题（1）什么是框架网页？（2）框架网页主要用于设计怎样的网页？[读一读]框架的编辑一、拆分框架在任何框架网页上，您可以竖排或横排拆分一个框架使其成为两个框架，做法是在网页视图模式下，打开欲修改的框架网页，然后按住CTRL键并拖住任何框架框线。另一方法是在“框架”菜单上单击“拆分框架”，然后选择适合的选项。拆分框架并不会影响在原始框架显示的网页之属性。二、在框架网页内切换框架单击欲编辑的框架，或按F6键或SHIFT键+F6键来更改活动框架。每一次单击框架，或是按F6键或SHIFT键+F6键，会突出显示当前框架。三、删除框架单击欲删除框架，在“框架”菜单中，单击“删除框架”。删除框架仅删除了页中的框架，而不是在框架中显示的网页。被删除之框架所留下之空白由任何紧邻之框架扩张使用。若框架网页仅含有一框架，就不能删除这最后的框架。当访问者到您的站点查看时，在保留下的框架中显示的网页将占满整个浏览器视窗。培训讲义—第四天组件、网页动画效果一、组件㈠“包含网页”组件很多网站上的每一张网页上有公共信息，这些公共信息，可以先把它做成一个网页，然后在需要的地方再对它进行“包含”，这样既简单，又方便对它进行修改。插入方法：“插入”→“组件”→“包含网页”→找到对应的网页注意：1、要编辑被包含的文件内容时,只能在源文件中编辑2、要注意跟“插入”→“文件”→找到对应的网页的区别3、要打开网站后才能操作㈡、插入时间、日期插入方法：“插入”→“日期和时间”㈢、插入水平线插入方法：“插入”→“水平线”㈣、插入“横幅广告管理器”“插入”→“组件”→“横幅广告管理器”出现下面对话框，按要求设置好各参数二、网页的动画效果FrontPage允许为网页中的元素增加动画效果，这些元素可以是一个按钮、一段文本或一幅图片。此外，网页的过渡也可以增加动画效果。网页除了显示图形和文字之外，还能实现多媒体功能。对多媒体的良好支持是FrontPage的一个突出的特色。我们能够很容易的在网页里播放音频和视频，使网页变得有声有色、丰富多彩。㈠为网页元素加上动画效果在FrontPage中，可以为网页元素加上动画效果，例如：指向某段文字后字体产生倾斜；双击图片时，图片沿某个方向自动走开等，这些效果可以使网页妙趣横生。[做一做]1．在网页“小太阳个人主页（二）”中为中间的一段文字加上效果“指向某段文字后字体产生倾斜”；2．为图片“小太阳”加上动画效果“点击后向有上方飞出”；操作说明：1．（1）将光标定位于“你好”前面；（2）单击“格式”菜单的“动态HTML效果”命令，弹出下一工具条；图7-42（3）单击“开启”的下拉按钮，选择“鼠标悬停”；单击“应用”的下拉按钮，选择“格式”；单击“选择设置”的下拉按钮，选择“选择字体”；在弹出的对话框的“字型”框中选择“倾斜”；单击“确定”按钮；2．（1）单击选择“小太阳”图片；（2）单击“格式”菜单的“动态HTML效果”命令；（3）在弹出的工具条中：单击“开启”的下拉按钮，选择“单击”；单击“应用”的下拉按钮，选择“飞出”；单击“选择设置”的下拉按钮，选择“到右上部”；（4）单击工具条的“关闭”按钮；㈡、网页过渡网页过渡是一种特殊的网页效果，它设置以什么过渡方式进入新的网页或离开当前网页，这些方式可以是自上而下逐行刷新、呈圆形收缩等，这样使屏幕的切换显得更自然。[做一做]1．为网页“我的资料”设置网页过渡如下：进入网页：效果为“圆形放射”，时间为3秒；离开网页：效果为“圆形收缩”，时间为3秒；2．打开网页“小太阳主页”，预览实际效果。操作说明：1．（1）打开网页“我的资料”；（2）单击“格式”菜单的“网页过渡”命令，出现下一对话框，如下图；图7-43（3）在“事件”中选择“进入网页”，在“过渡效果”框中选择“圆形放射”，在“周期”框中输入3；（4）在“事件”中选择“离开网页”，在“过渡效果”框中选择“圆形收缩”，在“周期”框中输入3；（5）单击“确定”按钮；2．（1）打开网页“小太阳主页”；（2）单击常用工具栏上的“在浏览器中预览”按钮；（3）单击超链接“想了解我吗？”进入网页“我的资料”，单击工具栏上的“后退”按钮返回网页“小太阳主页”。㈢、背景音乐所谓背景音乐，是指浏览该网页时在后台播放的音乐。为网页添加背景音乐后，访问者就可以一边听音乐一边欣赏你的网页了。[做一做]为网页添加背景音乐，音乐文件名为“canyon.mid”。说明：文件“canyon.mid”在C盘windows文件夹下的文件夹media中，操作前先把它复制到“我的文档”下的文件夹“Mywebs”中。操作说明：1．右单击网页中的任一处，在弹出的快捷菜单中选择“网页属性”命令，出现下以对话框，如下图；图7-442．在“背景音乐”栏中，单击“位置”框右侧的“浏览”按钮，在弹出的对话框的文件列表框中选择声音文件“canyon”；3．对话框中已选择“不限次数”选项，表明音乐会循环播放。如果要指定播放次数，取消“不限次数”选项的选择，然后指定循环次数；4．单击“确定”按钮。㈣、嵌入视频在计算机中，可以以视频文件的方式存储某一段精彩的“影片”或某一段动画，视频常见的文件类型有avi、mov等。FrontPage允许你将视频插入到网页中，这样访问者就能在访问你的网页时看到这些精彩的画面。[做一做]在网页“小太阳个人主页（二）”中将原有的标题删除，改用动画效果的标题（以文件“小太阳.avi”存储在文件夹“c:\MyDocument\Mywebs”中）替代。操作说明：（1）拖动选择标题“小太阳”，按Delete键将它删除；（2）打开“插入”菜单，选择“图片”项下的“视频”命令，出现下一对话框，如下图；图7-45（3）在文件列表框中选择视频文件“小太阳”，单击“确定”按钮；视频文件插入后，就好像一幅图像出现在那儿一样，要选择它的播放方式，右单击该图像，然后选择“图片属性”，在打开的对话框中选择“视频”选项卡，结果如下图。图7-46在这个对话框中可以指定播放的次数，选择在什么情况下播放。操作完成后别忘了存盘，然后在IE中查看效果。[练一练]1．填充题（1）要为网页元素加上动画效果，应选择“格式”菜单的命令。（2）要为网页添加背景音乐，右单击网页中的任一处，在弹出的快捷菜单中选择命令。（3）视频文件插入后，就好像一幅图像出现在那儿一样，要选择它的播放方式，右单击该图像，然后选择。2．简答题（1）对于文本内容，其动态效果可以是哪些？（2）什么是网页过渡？（3）列举一些可插入网页的音频、视频文件类型。读一读]在网页中以插件形式插入音频和视频在FrontPage中，可以借助插件在网页中添加音频和视频，做法如下：1．单击“插入”菜单的“高级”项下的“插件”命令，出现下一对话框，如下图；图7-472．在“数据源”对话框中输入视频和音频的URL（对于磁盘上的文件是指它的路径和文件名），若不知道，可单击右侧的“浏览”按钮，从弹出的“选择文件”对话框中选择所需的文件；3．如果希望不显示插件图标，单击选择“隐藏插件”选项；如果要显示插件，在高度和宽度框中指定大小，在布局栏中指定它的显示方式。4．单击“确定”按钮。

培训讲义—第五天网站中图片的加工、版面美工图片大小的调整、裁剪㈠调整大小⑴在Photoshop中打开图象⑵图象→图象大小→调整图象大小的数值㈡图象裁剪⑴在Photoshop中打开图象⑵通过裁剪工具选定范围⑶回车确定立体字的制作⑴在Photoshop中打开底图⑵通过工具“T”输入文字⑶图层→图层样式→斜面和浮雕勾画图象制作透明底图制作柔和边界操作步骤：这条贴示将为您解释如何在一幅图的周围产生柔和的边界。

打开一个文件。

用工具栏上的套索工具,圈出您要的范围。

将其羽化(SHIFT+CTRL+D).我在这里设置5pixels.然后将选择区反转(CTRL+SHIFT+I).现在将所选区域用一种颜色填(EDIT...FILL),这里我使用了白色。为了使边界更柔和,你可以使用更大的羽化值,左图的例子就是用了10pixels.这里我使用了不规则形状做羽化,当然规则形状比如矩形或圆一样也可以的。培训讲义—第六天HTML语言HTML语言HTML语言就是我们平常所说的“超文本标记语言”，它是一种用于全球广域网上文档中所使用的标准标记语言。作为一种编程工具，它也有自己的格式和规则。在HTML语言中，“标记”就相当于其他语言中的语句，我们必须记住一些主要的标记，才能熟练地使用HTML语言。㈠、标记写法：任何标记皆由"<"及">"所围住，如<P>标记名与小于号之间不能留有空白字符。某些标记要加上参数，某些则不必。如<fontsize="+2">Hello</font>参数只可加于起始标记中。在起始标记之标记名前加上符号"/"便是其终结标记，如</font>标记字母大小写皆可。㈡围堵标记与空标记：标记按型态分为围堵标记与空标记围堵标记

顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。例如HTMLSource：<b>CreationofWebpage</b>ismyfavourite.

显示成：CreationofWebpageismyfavourite.其中<b></b>便称为围堵标记。

它以起始标记<b>及终结标记</b>标示文字Creationofwebpage，令它显示成粗体，两者失其一都会发生错误显示。空标记

是指标记单独出现，只有起始标记没有终结标记。例如HTMLSource：

IloveCreationofWebpage.<br>It'sawonderfulplace.

显示成：

IloveCreationofWebpage.

It'sawonderfulplace.其中换行标记<br>便属空标记。

它的作用便是将标记后所有东西显示于下一行，可见终结标记于它是没意义的，但有些人会为空标记加上终结标记，这是为方便记认而己，对HTML没有影响。HTML语言文件的基本架构以下HTMLSourceCode便是一份HTML文件的基本架构：<HTML>

<HEAD><TITLE>网页的标题</TITLE>

</HEAD>

<BODY>网页的内容，很多标记都作用于此

</BODY>

</HTML>特点解说：整份文件处于标记<HTML>与</HTML>之间。

<HTML>用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。文件分两部分，由<HEAD>至</HEAD>称为开头，<BODY>至</BODY>称本文。

基本上两者各有适用的标记，如<TITLE>只可出现于开头部分。开头部分用以存载重要资讯，而只有本文部分会被显示。

所以大部分标记会运用于本文部分。<TITLE>所标示的是文件的标题。

会出现于浏览器顶部及为别人Bookmark时的名称，所以每页有不同而明确的标题是需要的。HTML语言中的主要标记HEAD标记：它以<head>开头，以</head>结束。它们之间的信息主要是一些关于文件的常规信息，并不作为文本的一部分输出。它里面含有“TITLE”标记，标记中的信息会显示在标题栏上。BODY标记：它又称为主体标记，上HTML网页的核心内容，通过VBScript和JavaScript在FrontPage2000中的应用<BODY>标记的属性，可以定义网页的文本颜色、背景色、背景图案、超链接色以及网页边距等内容。其它标记：<p>：分段标记，用来在HTML中进行分段换行。<Img>：添加图片的标记，利用它可以在网页中插入图片。例如：<ImgSrc=网页风插入图片的URL><Table>和</Table>：创建表格标记，含有<TH></TH>、<Tr></Tr>、<Caption></Caption>等。4、<AHerf=“目标网页的URL”>链接源</A>：超链接标记VBScript和JavaScript在FrontPage2000中的应用SCRIPT元素用于将VBScript代码添加到HTML页面中。<SCRIPT>标记VBScript代码写在成对的<SCRIPT>标记之间。例如，以下代码为一个测试传递日期的过程：<SCRIPTLANGUAGE="VBScript"><!--FunctionCanDeliver(Dt)CanDeliver=(CDate(Dt)-Now())>2EndFunction--></SCRIPT>代码的开始和结束部分都有<SCRIPT>标记。LANGUAGE属性用于指定所使用的Script语言。由于浏览器能够使用多种Script语言，所以必须在此指定所使用的Script语言。注意CanDeliver函数被嵌入在注释标记（<!--和-->）中。这样能够避免不能识别<SCRIPT>标记的浏览器将代码显示在页面中。例题1：日期中的应用例题2：下拉菜单中的应用例题3：滚动字幕中的应用1

滚动字幕中的应用1网页特效软件网页特效例子1网页特效例子2网页特效例子3HTML标记一览标记类型译名或意义作用备注文件标记<HTML>●文件声明让浏览器知道这是HTML文件

<HEAD>●开头提供文件整体资讯

<TITLE>●标题定义文件标题，将显示于浏览顶端

<BODY>●本文设计文件格式及内文所在

排版标记<!--注解-->○说明标记为文件加上说明，但不被显示

<P>○段落标记为字、画、表格等之间留一空白行

<BR>○换行标记令字、画、表格等显示于下一行

<HR>○水平线插入一条水平线

<CENTER>●居中令字、画、表格等显示于中间反对<PRE>●预设格式令文件按照原始码的排列方式显示

<DIV>●区隔标记设定字、画、表格等的摆放位置

<NOBR>●不折行令文字不因太长而绕行

<WBR>●建议折行预设折行部位

字体标记<STRONG>●加重语气产生字体加粗Bold的效果

<B>●粗体标记产生字体加粗的效果

<EM>●强调标记字体出现斜体效果

<I>●斜体标记字体出现斜体效果

<TT>●打字字体Courier字体，字母宽度相同

<U>●加上底线加上底线反对<H1>●一级标题标记变粗变大加宽，程度与级数反比

<H2>●二级标题标记将字体变粗变大加宽

<H3>●三级标题标记将字体变粗变大加宽

<H4>●四级标题标记将字体变粗变大加宽

<H5>●五级标题标记将字体变粗变大加宽

<H6>●六级标题标记将字体变粗变大加宽

<FONT>●字形标记设定字形、大小、颜色反对<BASEFONT>○基准字形标记设定所有字形、大小、颜色反对<BIG>●字体加大令字体稍为加大

<SMALL>●字体缩细令字体稍为缩细

<STRIKE>●画线删除为字体加一删除线反对<CODE>●程式码字体稍为加宽如<TT>

<KBD>●键盘字字体稍为加宽，单一空白

<SAMP>●范例字体稍为加宽如<TT>

<VAR>●变数斜体效果

<CITE>●传记引述斜体效果

<BLOCKQUOTE>●引述文字区块缩排字体

<DFN>●述语定义斜体效果

<ADDRESS>●地址标记斜体效果

<SUB>●下标字下标字

<SUP>●上标字指数（平方、立方等）

清单标记<OL>●顺序清单清单项目将以数字、字母顺序排列

<UL>●无序清单清单项目将以圆点排列

<LI>○清单项目每一标记标示一项清单项目

<MENU>●选单清单清单项目将以圆点排列，如<UL>反对<DIR>●目录清单清单项目将以圆点排列，如<UL>反对<DL>●定义清单清单分两层出现

<DT>○定义条目标示该项定义的标题

<DD>○定义内容标示定义内容

表格标记<TABLE>●表格标记设定该表格的各项参数

<CAPTION>●表格标题做成一打通列以填入表格标题

<TR>●表格列设定该表格的列

<TD>●表格栏设定该表格的栏

<TH>●表格标头相等于<TD>，但其内之字体会变粗

表单标记<FORM>●表单标记决定单一表单的运作模式

<TEXTAREA>●文字区块提供文字方盒以输入较大量文字

<INPUT>○输入标记决定输入形式

<SELECT>●选择标记建立pop-up卷动清单

<OPTION>○选项每一标记标示一个选项

图形标记<IMG>○图形标记用以插入图形及设定图形属性

连结标记<A>●连结标记加入连结

<BASE>○基准标记可将相对URL转绝对及指定连结目标

框架标记<FRAMESET>●框架设定设定框架

<FRAME>○框窗设定设定框窗

<IFRAME>○页内框架于网页中间插入框架IE<NOFRAMES>●不支援框架设定当浏览器不支援框架时的提示

影像地图<MAP>●影像地图名称设定影像地图名称

<AREA>○连结区域设定各连结区域

HYPERLINK"/pcedu/sj/jq/htmlp/media_tags.htm