第一课从一个网页开始
Frontpage2000教程第二课编辑网页
Frontpage2000教程第三课使用图形
Frontpage2000教程第四课超链接
Frontpage2000教程第五课使用表格
Frontpage2000教程第六课组件的使用
Frontpage2000教程七课使用框架
Frontpage2000教程第八课使用多媒体
Frontpage2000教程第九课站点操作
Frontpage2000教程第十课表单设计
Frontpage2000教程第十一课创建讨论组
Frontpage2000教程第十二课站点的发布
frontpage2000教程第一课从一个网页开始
作者:未知阅读人次:5527 文章来源:未知发布时间:2004-11-20 网
友评论(7)条
认识Frontpage2000
你是否紧跟时代的潮流上了网?你在聊天室里是否听过别人聊起自己的个人主页,你会不会觉得自己没有个人主页就落伍了?有没有想过自己也要做一个主页?想过?那你还瞎呆在那里干什么?赶快阅读本教程,你就该学会制作自己的主页了。
本教程教你学会使用微软公司的Frontpage2000,学会干什么?当然是做你的个人主页啦。或许你认为制作主页是一门很深奥的工作,需要懂得大量的计算机知识。我现在要告诉你,你错了。在这个流行图形操作系统的今天,制作主页不再需要你去学习复杂,烦躁的HTML语言了,你只需要知道一个概念:主页(也称网页,怎么样称呼都无所谓)就象一张白纸,你可以在上面写字,画画等等,通过自己的设计,那张白纸可以变成很漂亮。做主页时就是这个概念,只不过我们写字,画画是用笔和白纸,而做主页我们是用鼠标,键盘和Frontpage
当然制作网页的工具不单只有Frontpage2000,还有许许多多好用的工具。但是对于初学者来说,Frontpage2000是最好不过了,因为它操作简单,方便使用,最适合初学者。或许你下了决心要做一个专业网页制作人员,要学会更多更专业的网页制作工具,但是我还是希望你先学习使用Frontpage2000,打好扎实的基础怎么样也好一点对吧。
学习本教程之前,你要准备好:电脑一部,当然包括鼠标和键盘,不然还了得,还有就是你的电脑要装上Frontpage2000,因为一边阅读教程一边实际操作总要好一些吧。
Frontpage2000可以从微软的Office2000里进行安装,Office2000哪里有?现在盗版之风吹遍大江南北,不用我介绍了吧:)
具体安装方法:把Office2000光盘塞入光驱,在安装向导出现选择要安装的文件时,选择Frontpage2000“从本机运行”(如图1)。
(图1)(图2)
另外Office2000附带了一些好看的字体文件,在选择安装文件时,你也可以在文件列表下面的“Office2000工具”中选择安装(如图2)。
安装好了Frontpage2000,我们就可以开始学习了。努力,奋斗。
第一章认识Frontpage2000
安装好Frontpage2000后你可以在Windows的开始菜单运行它。
首先我们来认识一下Frontpage2000的操作界面(如图3)。
(图3)
对于初学者来说,一看到有那么多的菜单和那么多的按纽,不禁会吓一大跳:“太复杂了,我看我还是不行了。”哈哈,请你放心,你太抬举Frontpage2000了,其实它没什么,就那么一点,你完全可以“征服”它的,给自己一点信心。
我们来把Frontpage2000的界面划分成两半,你可以看见图3上面有一条红线,当然在你的Frontpage2000上面是没有的,这只是笔者自己画上去的,为了大家好区分。
好的,那么我们看图3,我们把红线以上的那部分叫控制窗,红线以下的叫制作窗。
控制窗包括常见的那些“文件,编辑”菜单,虽然看上去挺多挺复杂,但是它大部分常用的命令都归到了下面一栏的按纽栏中去了。你看,在流行图形操作界面的今天,我们是多么地幸福啊:)下面一栏为属性栏,我们可以用这栏来定置文字和图片的属性等等。
制作窗包括编辑区和切换按纽。我们就把编辑区当做是一张白纸吧,你可以在上面写字(用键盘打字)和画画(插入图片),具体操作我们将在下几章学习。编辑区左下角有三个按纽,我们把它们叫做切换按纽:点“普通”按纽,就会出现默认的编辑区。点“HTM L”按纽,编辑区就会变成一个满是英文(?!)的窗口,我们可以在这里编辑HTML,但是对于初学者,笔者不建议你去乱动。做好了网页的时候,我们可以点一下“预览”按纽来观看自己做的网页,不满意可以再点“普通”按纽回到编辑区修改。
另外当你第一次运行Frontpage2000的时候,你会看到编辑区左边会有另外的一栏,灰色的,上面有几个按纽,它叫“视图”栏。它可以让你更方便地查看网页的大小,连接等等。但是有时我们会觉得它妨碍了我们的工作,使编辑区看起来很窄很不舒服,为了不让它
妨碍我们工作,我们可以点击控制窗菜单栏里的“编辑→视图”(如图4),使它消失,要使用的时候再重复点击一次使它出现,真方便
(图4)
到此为止,我们就已经和Frontpage2000交上朋友了,慢慢地,我们要进一步控制它,让它全心全意为我们服务。
Frontpage2000教程第二课编辑网页
作者:未知阅读人次:19327 文章来源:未知发布时间:2004-11-20 网
友评论(3)条
视图与模式(一)
现在进入FRONTPAGE。单击任务栏“开始”按钮,选择“程序”选项,单击“MICROSOFT FR ONTPAGE”选项就可以了。可能你会发现FRONTPAGE界面和WORD很相似[图一],这是因为编辑WEB页面和编辑WORD文档有很多同样的设置,这些设置所用的图标和WORD中的是一样的。
[图一]FrontPage2000 界面
视图中的组框是用来切换视图的,单击里面的小图标就可以切换到不同的视图。FRONT PAGE共有6种视图[如左],使用不同的视图可以从不同的侧面查看设计的WEB站点。对一个WEB站点而言,不断更新是很重要的。随着站点的成长,维护站点的工作量会越来越大。建立站点可能很快,但是如果没有这6种视图的帮助,维护起来就很困难了。
这些视图的使用不用一下就全部掌握,只要知道有这些视图就可以了。
Frontpage2000教程第三课使用图形
作者:未知阅读人次:6495 文章来源:未知发布时间:2004-11-20 网
友评论(3)条
插入图形
如果有一个图形,怎么把它放到网页上呢?
首先要看你的图形是什么格式的,也就是它扩展名是什么只有扩展名为GIF和JPEG的图形文件才能成为我们的页面的一部分。因为这两种图形格式不仅应用广泛,而且有利于节省存贮空间。
如果图形不是这种格式,使用了其它格式的图形文件,在保存网页时FRONTPAGE会提示做格式转换,FRONTPAGE可以自动进行格式转换。
现在可我们看看怎么插入图形选择“插入”菜单的“图片”命令,单击“来自文件”按钮。
在默认情况下,FRONTPAGE认为你要插入的图片总是放在你建立的站点的目录或它的子目录下的。可以说,站点就是一个目录。我们把编辑的许多网页文件放在同一个目录下,我们称这个目录为站点的主目录。这些网页引用的图形一般也放在这个目录下。当然,我们也可以在这个目录下建立其他的子目录,再把所有的图形放在子目录里。所以搜索下拉列表只允许在主目录和主目录下的子目录进行选择。
如果要插入的图片不在主目录下, 在“选择文件”对话框中进行选择。
选择好文件以后,单击“确定”按钮,回到“图形”对话框。单击“确定”按钮,图形就插入了。现在单击“常用”工具栏的“保
存”按钮。
在“另存为”对话框中输入新的web页文件的名字,单击“保存”按钮。
出现了一个对话框, 因为我们刚才插入的文件不在站点内,现在FRONTPAGE要把它复制到站点内,可是使用什么名字,放在站点的哪个目录下呢,就要在这设置了,单击“改变文件夹”按钮,
另外这儿还在需要时对图形的格式进行转换。单击“位置”按钮,在默认情况下,图形被保存在站点的主目录下,现在我们选择IMAGE 目录,单击“确定”按钮。回到“嵌入式文件”窗口,再单击“确定”。这样,图形就保存在站点内了。
我们还可以从INTERNET上插入一个图形。
选择“插入”菜单的“图片”命令,在URL栏内输入图片的地址,
单击“确定”按钮。由于是插入网上的图片,因此在插入图形以后,应
该保存一下网页,使图形存到站点内。
您可能说,我不会画画,插入图片容易,可是编辑图片就不容易了。
没关系,FRONTPAGE自己带有许多剪贴画,你可以把它们插入到自己的网
页。
选择“插入”菜单的“图片”命令,选择“剪贴画”。
你看,各种剪贴画都分类放好了。你可以自由地选择。
不过,插入后别忘了保存网页,把剪贴画复制到站点目录下。
Frontpage2000教程第四课超链接
作者:未知阅读人次:7003 文章来源:未知发布时间:
2004-11-20 网友评论(5)条
用文本和图形建立链接
怎样才能自己做的网页相互联系起来呢?也就是说让别人点页面上的图形或文本就跳转到其他页面呢?
在网页里,我们把这种点击后会进行页面切换的网页界面元素叫超链接。
先来看一下用文字来建立链接。
首先创建一个指向站点内其他网页的超链接。
选择“插入”菜单的“超链接”命令,在文件列表框内选择“页面1.htm”文件,注意在URL文本框中显示了该文件的地址。
单击“确定”按钮.超链接就制作成功了。
我们切换到预览模式(单击预览按钮),
当我们把鼠标指向“主页”两字时鼠标变成手形,单击它,我们就切换到主页了。
那么为什么不在普通模式下试呢?:因为普通模式主要是用来编辑网页的,当我们在普通模式把鼠标指向“主页”两字时鼠标没有变成小手状,因此不能进行页面切换。不过如果按住CTRL键,鼠标就变成了小手状。这时单击就可以进行切换了。也就是说在普通模式中按住CTRL键才能激活超链接。
我们也可以将超链接指向其他站点的网页。选中作为超链接的文本,单击“常用”工具栏的“超链接”按钮,这和选择插入菜单的超链接命令是一样的。
在“创建超链接”对话框里,在URL地址栏直接输入要连接的网页或网站的地址。如果不清楚要作超链接的地址,只要单击
URL地址框后面的放大镜就可以用浏览器在INTERNET上查找要链接的网页,FRONTPAGE会自动记录你找到的地址。
单击“确定”按钮就可以了。
我们还可以改变已经设置好的超链接。首先确认是普通模式,在要改变的超链接下单击鼠标右键,选择“超链接属性”命令,输入新的URL地址就可以了。
要想取消超链接,删除所有URL地址框里的内容就可以了。
还有一种超链接,可以链接电子邮件。这样可以使你的网上朋友通过Email及时与你联系,这是一个网站站长和网友交流的重要手段。
首先选中要作为超链接的文本,一般文本就是你的邮箱地址,单击“超链接”按钮,单击“信封”按钮,输入你的邮箱地址,
单击“确定”按钮,退出对话框,选择“确定”,这时超链接就建立好了。我们试一下,切换到预览模式,单击邮件链接,
这样OUTLOOK被激活了,现在就可以发Email了。
刚才讲的都是用文本建立超链接,怎么用图形来建立链接呢?其实图形超链接和文字超链接的制作方法是一样的,只要在建立超链接时选择图形就可以了。
首先选中超链接的图形,单击箭头图形,单击“常用”工具栏“超链接”按钮,选择主页文件“页面1.htm”,单击“确定”按钮. 在普通模式中,按住CTRL键,单击箭头图形,就跳到主页页面了。
Frontpage2000教程第五课使用表格
作者:未知阅读人次:7876 文章来源:未知发布时间:2004-11-20 网
友评论(4)条
创建表格
在FRONTPAGE的诸多功能中,制表功能也是一个很重要的方面。我们不仅利用表格显示一些有规律的数据,而且还经常对表格中的单元格进行调整,在其中放入文本和图形,达到对网页进行布局的目的。
我们来看看这个网页,这是在普通模式里的效果。
文本被分成左右两栏了。文本周围有虚线包围。这些虚线实际上就是表格的框线,我们利用表格把网页分为了左右两栏。
我们切换到预览模式,框线没有了。
在普通模式看到的虚线可以便于我们编辑。由于表格框线的宽度是0,所以它在普通模式里是虚线显示的,而在浏览器里它就不显示出来。也就是说用一个看不见的表格把文字分开。
怎样创建表格呢?
首先把插入点调整到要插入表格的位置,单击“常用”工具栏“插入表格”按钮,拖动鼠标,直到高亮的格子的行列数与你要插入的表格相同为止。这里我们用3乘4的,也就是3行4列的。
实际上这种方法创建单元格只能将各单元格行高和列宽设置为一样的,如果要在创建表格时对表格进行设置,可以使用插入表格命令。设置好插入点后,选择“表格”菜单的“插入”命令,单击“表格”命令,
将行数设置为3,列数设置为4,将边框粗细设置为5,
将单元格间距设为3,确认指定宽度复选框选中,并选择单
位为百分比,设置百分比为80,使表格宽度为浏览器宽度的80%,单击“确定”按钮。
新建的表格边框变粗了。这是因为我们刚才设置了边框的粗细为3,另外单元格之间的分割线也变宽了,这是因为我们设置了单元格间距的结果。我们的设置也自动变为了下一次创建表格的默认设置。
还有一种创建表格的方法,你可以直接把表格画出来。
选择“查看”菜单的“工具栏”命令,单击其中的“表格”选项,这时就会显示“表格”工具栏。
单击“手绘表格”按钮,用拖动鼠标的方法画一个表格。双击鼠标退出画表格状态。
如果画错了就单击“擦除”按钮,在要擦除的线条上拖动,这时线条会变红,
放开鼠标,线条就被擦除了。
表格工具栏的其他按钮都与表格菜单的各条命令相对应,它们的使用方法也是一样的。
Frontpage2000教程第六课组件的使用
作者:未知阅读人次:11095 文章来源:未知发布时间:2004-11-20 网
友评论(3)条
使用字幕
这种滚动文字我们称为字幕。它特别醒目,我们经常使用它来发布一些站点的通知或提示信息。
其实创建字幕很简单。我们把插入点放到要使用字幕的位置,选择“插入”菜单的“组件”命令,单击“字幕”选项,
在文本框中输入要滚动的文字,单击“确定”按钮。字幕不动,这是因为我们现在是在普通模式下,我们单击“预览”选项卡切换到预览视图,字幕的滚动效果就呈现出来了。
字幕的字体、字号、字颜色是可以调整的。我们在要调整字体字体、字号或字颜色的字幕上单击鼠标右键,选择“字体”命令进入“字体”对话框,
把字大小改为5,字颜色改为绿色。当然在这里你也可以选择“字符间距”选项卡改变字符的间距,单击“确定”按钮。这时字符的外观就改变了。
其实,对字幕的字符串外观进行设置和对普通字符串的设置是一样的。只不过字幕字符串是一个整体罢了。
除了可以调整字幕的外观外,字幕的背景颜色、滚动速度等都是可以调整的。
我们在字幕上单击鼠标右键,选择“字幕属性”命令,进入“字幕属性”对话框。
下面,我一项项给您介绍:
“方向”组框用来指定字幕是向哪个方向滚动,现在的设置表示从右向左滚动;“速度”组框用来调整字幕滚动的速度;
“延迟”表示字幕每滚动一步的时间间隔是多少毫秒;
“数量”表示字幕每滚动一步的距离是多少像素;
“表现方式”是调整字幕滚动的具体效果,你可以自己试试;
“重复”组框用来对滚动效果的循环次数进行选择;
“背景颜色”用来调整字幕的背景颜色;
“大小”用来设置字幕的宽度与高度。你可以使用像素来控制字幕的实际大小,也可以使用百分比来设置字幕的宽度,这时字幕的实际大小是根据浏览器窗口大小的百分比来计算的;
“文本对齐方式”组框是用来调整字幕和它所在行文字的对齐方式的。里面有三种对齐方式的效果。
象字幕效果是动态HTML的一种功能,它是制作网页的一种标准。不过动态HTML并不是所有版本的浏览器都支持。比如字幕效果只有在Internet Explorer 4.0与Netscape Communicator 4.0以上版本才能看出来,而在低版本的浏览器上它们不过是普通文本罢了。
Frontpage2000教程七课使用框架
作者:未知阅读人次:9338 文章来源:未知发布时间:2004-11-20 网
友评论(3)条
创建框架
你见过布告栏吗?就是那种有一个大的栏框,里面张贴着各种各样的布告的框架。布告栏可以把一个版面分成几个部分,在每一个部分里可以张贴不同的内容。
在我们的FRONTPAGE中,也可以制作这样的“布告栏”。在FRONTPAGE中我们把它叫做框架,它可以把一个浏览器窗口分成几个区域,每一个部分可以显示不同的网页。看,这些就是用框架制作的网页:
这是一个双框架网页,它把浏览器空间分成了两个框架,左框架和右框架分别显示了不同的两个网页。
这是一个三框架的网页,它分为三个框架,上面、左面和右面的框架都放着一个单独的网页。
我们还可以把不同框架的网页相互联系起来:
回到双框架网页中,单击左框架中的“显示主页内容”,这时在右面的框架里就会显示当前网站的主页。
刚才我们单击了左框架的超链接,它就要显示链接到的网页,可是显示在右面的框架里。这是因为右框架是左框架的目标框架,在FRONTPAGE中,一个框架的链接内容总是显示在它的目标框架里。
我们现在就来制作一个框架网页:
选择“文件”菜单的“新建”命令,单击“网页”按钮,选择“框架网页”选项卡,
在这里列出了十种框架布局模板,你可以根据自己的需要选用。单击“目录”模板,在预览部分显示了框架网页的布局,上面的说明告诉我们左面的超链接内容在右面显示,这样我们就知道右框架是左框架的目标框架。有了这些信息你能够选择合适的框架模板了。单击“确定”按钮。
我们建立的框架网页上有按钮。
这是因为刚才我们创建了一个框架网页,但是并没有指定在各个框架里显示哪个网页,就好像我们做了一个布告栏,但是并没有向里面张贴布告一样,而这些按钮就是用来让我们指定在框架里显示哪个网页的。
Frontpage2000教程第八课使用多媒体
作者:未知阅读人次:4647 文章来源:未知发布时间:2004-11-20 网
友评论(3)条
使用音频
网页除了显示图形和文字之外,还能实现多媒体功能。
对多媒体的良好支持是FRONTPAGE的一个突出的特色。我们能够很容易的在网页里播放音频和视频。
我们从最简单的嵌入音频开始。我们选择“插入”菜单的高级命令,单击“插件”选项,
在打开的“插件”属性对话框中单击“数据源浏览”按钮,选择要播放的音频文件,我们可以选择扩展名为WAV、MID、SND、AU的音频文件,
单击“确定”按钮。
在普通模式下,为了表示插入音频的位置,FRONTPAGE就会使用这样的插头标记。
现在我们切换到预览模式,音乐就自动播放了。
现在插头变成一个播放器了。
这个播放器名字叫ACTIVE MOVIE,它是Internet Explorer浏览器自带的一个媒体播放插件。浏览器检测到我们在网页里插入了一个音频文件,就会在插入音频的位置显示一个ACTIVE MOVIE播放器,并用它来播放音频。
最新版本的Inter Explorer 和 Netscape Navigator都带了播放多媒体的必要插件,不过如果浏览者的浏览器没有带插件或没有安装,我们最好给他们一个不能播放文件的提示信息。
在刚才插入的音频文件图标上右单击鼠标健,选择“插件属性”命令,
在“浏览器不支持插件时显示的消息”文本框中输入“对不起,您的浏览器不支持这种文件格式的播放.”,这样,当使用的浏览器不能播放音频时,浏览者就会在网页上看到提示信息。
我们可以改变音频图标的大小:单击音频图标,拖动图标四周的小黑点,图标就变大了,切换到预览模式,播放控件就也变大了。这和改变图片的大小是一样的操作方法。
我们也可以精确的调整插件在网页中显示的大小:在普通模式下的音频图标上右单击鼠标健,选择“插件属性”命令,
我们只要修改“大小”部分的数值就可以调整插件的大小。
“布局”部分中:对齐方式用来调整插件与网页中其他文字的对齐方式。这也和图片的对齐方式一样;水平和垂直间距用来是用来调整插件与周围文本的距离的,变框粗细是用来设置图标边界的宽度的。
现在我们把“隐藏插件”选项选中,
网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1.A 2.B 3.C 4.C 5.A 二、判断题 1.√2.×3.√4.×5.√ 三、问答题 略 第2章网页规划设计 一、选择题 1.D 2.A 3.C 4.A 5.C 二、判断题 1.×2.×3.×4.√5.√ 三、问答题 1.答:网站需求分析一般包括三个阶段的内容:网站背景分析、总体需求分析、具体需求分析。(每个阶段可再详细描述。) 2.答:可从以下几个方面来阐述网站设计的原则:①日期、时间和数字;②欢迎词; ③弹出窗口和引导页面;④新闻和公告信息;⑤网址;⑥控件;⑦链接;⑧主页内容 3.答:打开新浪网首页,分析其布局类型。(答案略) 4.答:网页色彩搭配方法可从以下两个方面去阐述:①根据页面风格以及产品本身的诉求确定主色;②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述:①用一种色彩;②用两种色彩;③用一个色系;④用黑色和一种色彩以及色彩搭配忌讳的方面。 5.答:打开当当网,具体分析其规划过程。(答案略) 第3章初识网页制作软件 一、选择题 1.C 2.C 3.B
二、填空题 1.代码、拆分、设计2.文件、资源、规则3.超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1.D 2.B 3.A 4.D 5.ABD 6.D 7.B 8.D 9.A 10.A 二、判断题 1.√2.√3.×4.√5.√6.√7.√8.√9.×10.√三、操作题 略 第5章设置网页超级链接 一、选择题 1.D 2.D 3.A 4.D 5. C 二、判断题 1.×2.×3.×4.√5.× 第6章使用CSS样式美化网页 一、选择题 1.B 2.C 3.C 4.B 5.A 6.D 7.D 8.D 9.B 10.C 11.A 12.A 13.C 14.D 15.D 16.A 17.A 18.B 19.D 20.D 二、简答题 1.×2.×3.×4.×5.×6.×7.√8.×9.√10.√11.×12.×13.×14.√15.√16.√ 第7章规划布局网页 一、选择题 1.B 2.A 3.B 4.B 5.D 二、简答题
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 (课程英文名称) 课程编号:201509210011 学分:5学分 学时:64学时(其中:讲课学时:45 上机学时: 19 ) 先修课程:计算机基础、计算机网络、计算机应用 后续课程:UI设计、 JavaScript网页特效 适用专业:信息及其计算机相关专业 开课部门:计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习,学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向,熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事(2学时) [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用
使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准,明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作,能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面(4学时) [相关案例] 【案例1】简单的网页: 【案例2】新闻页面: 【案例3】图文混排: [知识点] HTML文档基本格式
《网页基础制作》课程标准 1.前言 1.1.课程的性质 本课程是中等职业学校计算机应用专业网页设计与制作门化放 向的一门专业基础核心课程。其功能在于培养学生具备从事网页设 计与制作的基本职业能力,使学生达到相应的网页设计制作人员能 力的基本要求。 1.2.设计思路 本课程标准的设计以计算机应用专业学生的就业为导向,邀请 行业专家对计算机应用专业所涵盖的职业群进行任务和职业能力分析,以此为依据确定本课程的工作模块和课程内容,本课程以任务 引领型为框架,把课程按递进方式设计成项目,并以项目为单元足 迹教学,使学生由浅入深,以点到面全面掌握网页设计与制作的职 业技能。 2.课程目标 通过任务引领型和项目活动形式,使学生熟练制作简单网页, 能熟练创建本地站点并能对网页进行各种找链接,能制作网页动画,掌握网页设计与制作技巧,具备网页设计与制作的基本职业能力, 能基本胜任网页制作工作,为学生发展专门化方向的职业能力奠定 基础。 职业能力目标:(1)能熟练制作简单网页 (2)能创建本地站点并能对网页进行各种超链接 (3) 能对网页进行创意的美化
(4) 能制作有创意的网页动画 (5) 能掌握网页设计与制作相关技巧 (6) 能跟踪和学习网页制作的新知识和新技术3.课程内容与要求
4.实施建议 4.1.教材编写 (1)教材要以岗位职业能力分析和职业技能考证为指导,以 《网页制作基础》课程标准为依据进行编写; (2)教材要以岗位任务引领,以工作项目为主线,强调理论与 实践相结合,按活动项目组织编写内容;教材内容从“任务”着手,设计完成“任务”的方法与步骤的空间;教材要体现以解决实际问 题来带动理论的学习和应用软件的操作,让学生在完成“任务”的 过程中掌握知识和技能,培养学生提出问题、分析问题、解决问题 的综合能力。任务的设置应该体现针对性、综合性和实践性。 (3)项目教学任务的设计,应该体现中等职业教育的特征和与 社会实际的联系。所设计的“任务”是学生毕业后就业上岗就能遇 到并解决的问题,而不是围绕着知识和技能的展开而设置的。
九年级信息技术教学计划 中小学信息技术课程是为了适应技术迅猛发展的信息时代对人才培养提出的新要求而设置的必修课程,作为一门新兴学科,它已越来越受到重视。为了全面贯彻落实国家课程计划,加强对我市义务教育阶段教育教学的管理和指导,进一步推进素质教育,提高教育教学质量,促进学生全面发展,我市教育局以多年将信息技术课纳入毕业和升学考试中,所以本学期要着重学习教育部门规定的考试内容。 一、学生基本情况: 九年级学生已经具备了一定的信息技术水平,基本掌握了计算机的一般操作方法和使用常用软件,但由于每一学期信息技术课时比较少,每周只有一节课,学生的遗忘性大,大多数学生学后没有注意巩固,学生掌握的情况不是很理想,参差不齐。 二、教学目标: 初中信息技术课程考试分为信息技术基础知识、操作系统、文字处理和电子表格四个模块。本学期将着重对这四部分内容进行巩固和复习,培养学生的动手实践操作能力,能够较熟练的掌握对计算机操作的基础操作能力,培养学生主动学习和自学能力,培养学生正确的学习信息技术的方法,培养学生良好的信息素养,把信息技术作为支持终身学习和合作学习的手段,为适应信息时代的学习、工作和生活打下必要的基础。 三、方法措施: 在设定了教学内容的同时,要采用一定的方法措施使学生能够系统的掌握信息技术知识。 1、对学生学习信息技术的目的进行引导,端正其学习态度。 2、对学生进行严格的要求,让他们能充分利用好课堂45分钟时间。 3、对每个班都培养一名信息技术代表学生,由此学生带头对其他学生进行引导和榜样。 4、加强复习与巩固,培养学生兴趣
第1.2课时 启动frontpage2000建立站点和图片收集 教学目的:掌握站点的建立,学会软件的启动和素材的收集,了解站点的打开和关闭。 教学重点:创建站点,收集图片,启动frontpage2000。 教学时间:2课时 教学过程: 教师讲解、示范 1、启动FrontPage 2000 单击任务栏上的“开始”按钮,从“程序”菜单中选择“Microsoft FrontPage”单击。 2、FrontPage 2000的界面说明 FrontPage 2000的界面可以分成菜单栏、工具栏、视图栏和主编辑窗口4大部分。 ①、菜单栏包括”文件”、”编辑”、”查看”、”插入”、”格式”、”工具”、”表格”、”框架” 、”窗口”、”帮助”等10个菜单。 工具栏单击”查看”菜单,选择”工具栏”,在出现的下拉菜单中列出了几种不同的工具栏,如果菜单 项前面有一个对钧号“√”,表明在界在上已显示此菜单项。如果再单击一下,将取消这一项的显示。 ②、主编辑窗口在编辑网页时,有3种显示方式,即普通、HTML和预览。 普通显示方式是最常用的显示方式,一般是在此方式下工作。 HTML显示方式在需要直接编辑或查看网页文件的HTML代码时使用,一般是为了实现某种特殊效果(如在网 页中动态显示时间)而经常使用。 预览显示方式在需要预先观察网页的显示效果时使用。当使用管理功能时,主编辑窗口相应地会显示各种 任务下的文件或站点信息。 3、新建站点 实例:使用”只有一个网页的站点”模板创建一个Web站点。 操作步骤: (1)打开”文件”菜单,选择”新建”菜单项,在子菜单中选择”站点”菜单项,出现一个”新建”对 话框,在对话框的”指定新站点的位臵”项中输入新站点的存放位臵。 (2):新站点的存放位臵选择是磁盘存储方式,是因为考虑到实践操作中的方便。而一个站点要让在 Internet上的用户正常浏览的话,应该通过FrontPage的站点发布功能或FT文件传送方式,把该站点内容
一CSS文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/
网页设计基础:Div+CSS布局入门教程 在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML 基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。 下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分: 1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片; 2、内容部分又可分为侧边栏、主体内容; 3、底部,包括一些版权信息。 有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:
根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。 以下为引用的内容: DIV结构如下: │body {}/*这是一个HTML元素,具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/
│├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹,命名为“DIV+CS S布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容: 以下为引用的内容:
第一单元网站设计与制作学案 第1课创建站点 本课学习目标:1、知识目标:了解网站规划方法;认识Frontpage2000的工作界面;理解站点、网页、主页的概念。 2、技能目标:学会规划和设计网站;能够搜集网站相关素材;学会新建和打开站点。 3、情感、态度与价值观目标:感受网站规划的重要性,养成做事有计划、勤思考的习惯。 教学方法:自学法、演示法、观察法、实践法、小组合作。 教学重点:网站规划的一般步骤;Frongpage2000的站点管理。 教学难点:网站规划的一般步骤。 学习时间:1课时。 学习过程: 引入课题:许多同学都有上网的经历,那么什么是网站呢? 网站:网站是在因特网上一个相对独立的信息的集合,这些信息以网页的形式向全世界发布。因此,网站就是相关网页的集合。 学习与探究: 一、他山之石,可以攻玉 通过对“中国少年雏鹰网”与“联想公司网站”首页的比较,谈谈自己的感受,并说出它们之间有什么差异? 二、网站规划的一般步骤 小组合作:阅读本部分内容,总结网站规划的一般步骤?常见的网页版面布局形式有哪些? 步骤:1、确定网站的主题和风格; 2、设计规划网站的结构和内容; 3、设计网站的版面布局;(“T”型、“口”型、时尚型、“三”型布局) 4、搜集整理网站素材; 5、选择网站制作工具(frontpage2000)。 三、Frontpage2000的站点管理 1、初识Frontpage 根据打开程序的一般方法,自己试着打开Frontpage。并思考有没有其它的打开方法。 2、新建站点 教师演示:“文件”---“新建”---“站点”,打开“新建”对话框。 学生操作:(1)指定新站点的位置为“D:\情感小屋”,并选择站点类型为“只有一个网页的站点”。 (2)观察界面发生了什么变化?在“文件夹列表”中自动生成了哪几个文件或文件夹?它们有什么作用? 3、打开站点 “文件”---“打开站点”。 四、实践与创新的: 1、访问以下网站,描述它们各自的主题和风格,并画出网站的结构图和主页的布局图。 https://www.doczj.com/doc/2014692884.html, https://www.doczj.com/doc/2014692884.html,./01/indes.html
Frontpage网页制作导学案 青州一中刘志韩【学习目标】 1、包括网页制作基础知识 2、站点的规划和创建 3、网页文本和图片的处理、表格和框架的应用 【学习重难点】 1、建立一个主题网站 2、建设一个网站的步骤 3、网页的美化与特效的制作 【课前预习】 思考一下多媒体信息集成的方式有哪些? 【自主学习】 1、在www中,________是信息的主要组织和表现形式。 2、用________语言编写的网页实际上是一种文本文件,以.HTML或者.HTM为扩展名,可以使用任何文本处理软件(如记事本、word等)创作或修改。 3、制作网页常用的软件有_________________和_________________。 4、网页文件的扩展名有哪些? 5、网站开发的基本过程: 网站的规划——( )——( )——网站的发布与管理——网站的评价 【合作探究与指导】 三、网站的制作 1、创建站点 文件——新建——站点(选择或创建存储站点的文件夹) 2、网页的创建与编辑 文件——新建——网页 3、插入对象 水平线 图片 字幕 悬停按钮 4、创建超级链接 在对象上右击选择超级链接——选择链接的目标。 5、使用表格 表格——插入(在制作网页的过程中用表格来布局网页) 6、在站点中查看网页的编辑及网页之间的链接情况。 分步骤操作练习题: 1、新建一个站点,只有一个空白网页的站点。 2、在首页上插入“我最喜爱的明星”,然后进行修饰。 3、再新建一个空白网页。重新命名为“周杰伦”。 4、插入图片“周杰伦”,文本“周杰伦”,排版设置后保存网页。 5、再建立一张空白的网页,重新命名为“刘亦菲”。 6、插入图片“刘亦菲”,文本“刘亦菲”,排版设置后保存网页。 7、分别在首页和“周杰伦”“刘亦菲”网页建立超级链接。 操作练习: 【拓展任务】 以环保为主题,利用文件夹“环保”中的素材,制作一个5页的网站。
网页制作基础教程 一、什么是HTML HTML(超文本标记语言)是网页中使用的语言,他能被网页浏览器(IE或Netscape)解释,从而显示出丰富多彩的信息(图片、文字、声音、影象、动画等)。 制作网页前首先要弄懂什么是HTML。 在IE中点击"查看"→"源文档",就能看到该网页的HTML代码。下面是个网页文档(model.htm)的HTML代码:
第一节Front Page 2000 系统概述 一、Front Page 2000 的功能与特点 1、Front Page 2000 的主要功能 A、编辑 B、排版 C、图形 D、打印 2、Front Page 2000 的特点 1)易学易用 2)所见即所得 3)多种模式的显示方式 4)灵活方便的表格处理功能 5)图文混排的操作 6)不同文档格式的自动转换 二、Front Page 2000 的启动和退出 1、启动方法:“开始”→“程序”→“Microsoft Front Page”。 2、Front Page 2000 窗口介绍 1)文档窗口用于打开Front Page文档。 2)标题栏显示打开的文档名。 3)菜单栏包括Front Page操作的所有命令。 4)常用工具栏包括一些常用的操作命令。 5)格式栏单击格式栏中某一图标,可进行某一格式 6)标尺栏 7)文本编辑区用于输入、编辑文本。 8)选定栏以行为单位选定文本。 9)状态栏显示当前光标所处的状态。 10)滚动条移动滚动条可显示文档窗口中的所有文档。 3、联机帮助操作时可使用“帮助”菜单获取帮助信息。 4、Office 助手 5、快显菜单 选定某一操作对象,然后在选定对象处单击鼠标右键,将弹出与该对象相关的快显菜单。 6、退出 有多种退出方法。在关闭时若显示保存文档对话框,则可选择“是”或“否”对文档进行保存或放弃保存。
第二节文档的建立与编辑 一、文档的建立与打开 1、创建新文档 方法:“文件”→“新建…”→选“常用”模式及“文档”。 2、打开已存在的文档 方法:“文件”→“打开…”→在选择对话框选择要打开的文档。 二、输入文字与符号 1、输入文字及符号在编辑区中输入文字和符号。 2、自动换行 一行结束时将会自动换行,可以不需要按回车键。在Front Page中,按回车表示一个段落结束,并加上段落结束符。 3、保存文档 ·保存新文档 方法:“文件”→“保存”→弹出保存对话框。 ·保存已命名的文档 方法:“文件”→“保存”。 ·修改文档名存盘 方法:“文件”→“另存为…”。 4)自动保存文档 方法:“工具”→“选项…”→“保存”页框,设置自动保存文档时间。 4、利用模板建立文档 方法:“文件”→“新建…”→选择一种模板,单击“确定”。 三、修改文档 1、插入点定位将光标插入到某一位置。 2、选定编辑对象有多种选定方法。 3、插入文本·插入与改写方式的切换·插入其他文件内容 4、修改及删除文本·删除·用新文本替换原有内容·撤消与重复 5、复制与移动文本·复制文本·移动文本 6、查找与替换文本·查找文本·替换文本
China Computer&Communication 随着Internet的不断普及和飞速发展,网络已经成为人们获取、 发布和传递信息的主要渠道之一,在人们的工作、生活、学习和娱乐中起着非常重要的作用。上网已经渐渐成为人们的一种习惯,网络上的信息主要是通过网站来发布实现的,而网站又是由不同的网页构成的。在制作网页的过程中,既需要设计合理的字体和布局,还需要考虑兼容不同浏览器。为了方便解决这些难题,在网页的构建过程中引入CSS样式表,是一个不错的选择。 一、CSS样式表概述 CSS是Cascading Style Sheet 的缩写,译作“层叠样式表单”。 它是一种在网页制作过程中经常用到的技术。CSS样式表其实是一组样式,它增加了更多的样式定义方法来辅助HTML。样式就是用一个指定的名字来标识和保存的一组有关字符和段落格式的选项集合。其实,我们很早就已经与“样式”打过交道了。在Word的“格式”菜单中的“样式项”里,提供了多种样式,如“标题1”、“标题2”、“正文”等。只要选定文字,然后选择不同的样式,所选定的文字就会自动改变字体、字号、对齐方式、字间距等。同样,我们可以通过CSS来规定网页元素的各种样式,如颜色、位置、大小等。 二、CSS样式表的优势 CSS样式表是用于(增强)控制网页样式并允许将样式信息与网 页内容分离的一种标记性语言。通过使用CSS样式表,不仅可以对文字格式进行设置,还可以更加精确地控制布局、字体、颜色、背景和其他图文效果,从而避免在标识字符和设置段落格式等操作时重复定义需要的样式,提高网页编辑的效率。 CSS是对以前的HTML(HTML3.2以前的版本)语法的一次重 大革新,是DHTML(动态网页)的一部分。建立CSS的意义在于把对象真正引入到HTML中,使其可以使用脚本程序(如JavaScript、VBscript)调用和改变对象属性,从而使网页中的对象产生动态的效果,这在以前的HTML中是无法实现的。CSS甚至超越了WEB页面本身的显示功能,把样式扩展到多种媒体上,显示了难以抗拒的魅力。 三、CSS样式表在HTML中的实现 在HTML网页中加入CSS并不是只有一种方法,在不同的情况 下,可以采用不同的方法,比较常用的有下面几中。 1.嵌入式样式表 嵌入式样式表的实现很简单,只需在每个要应用样式的HTML 标签后写上CSS属性即可。例如要设置指定表格中的文字的样式为红色,字号为10pt,可在当前表格的