当前位置:文档之家› frontpage2000网页制作教程(完全版)

frontpage2000网页制作教程(完全版)

frontpage2000网页制作教程(完全版)
frontpage2000网页制作教程(完全版)

第一课从一个网页开始

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网页制作案例教程》_教学大纲讲解

《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格式模板部分

一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布局入门教程

网页设计基础: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布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容: 以下为引用的内容: 无标题文档 这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。 下面,我们在标签对中写入DIV的基本结构,代码如下:

[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
[color=#aaaaaa][/color]
为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:

八年级信息技术上册学案设计

第一单元网站设计与制作学案 第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网页制作教案

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代码: 这里是标题

第一段文字。

第二段文字。

【操作】请在记事本中输入以上代码,命名为test1.htm,存于D盘,然后双击打开看看。 标记一般是成对出现的,#FFFFFF表示使用的颜色是白色。 ...

... ...之间是该网页的标题 charset=gb2312表示语言字符集信息是中文简体,如big5则是中文繁体。 ...之间是网页的正文内容 表示网页的背景色是白色,默认的文字颜色是白色。

...

之间是h1号标题字

...

之间是h2号标题字 ...之间的文字为红色 HTML是一套国际标准,其标记有几百种,您并无需全部了解他们,只要记住其中常用的十几种,就能够做出很漂亮的网页来。 常用的标记举例:

front page教案

第一节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、查找与替换文本·查找文本·替换文本

CSS样式表在网页制作中的应用

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,可在当前表格的

标记内添加下面的代码:
。 这种方式主要用于对具体的标签作具体的调整,其作用的范围只 限于本标签。嵌入式样式表不能充分体现出CSS样式表的优越性,所以应用场合并不多。 2.内联式样式表 若想只对当前页面应用样式,就要使用内联式样式表。所谓内联

教案-用Frontpage制作调查问卷

用Frontpage制作调查问卷 吴娟 教学目的: 1、使学生初步认识frontpage组件中的悬停按钮和滚动字幕; 2、使学生能够举一反三,利用表单制作调查问卷; 3、开发学生的创造力和想象力,培养学生与人共事的协作精神。 教学重点和难点: 1、用表单制作调查问卷; 2、“举一反三”,根据不同的题目类型选择不同的表单选项。 教学地点: 多功能教室 教学用具: 计算机多媒体投影仪 教学程序: 一、激发兴趣,形成动机(导入――5分钟) 导入: 师:同学们,你们喜欢上网吗? 生:喜欢 师:你们上网都干些什么呢? 生:聊天,游戏 师:那你们经常上网吗? 生:偶尔; 师:那你们认为上网对我们的学习有没有影响? 生:有,但是不大 那请同学们想一想,有什么好的办法让我来了解你们乃至更多的人对上网的看法。(学生思考)我们是不是可以尝试用问卷调查进行统计,好,接下来我们一起来参加问卷调查。 学生分成两个大组,一个小组填写纸质的问卷调查,一组填写网站上的问卷调查,最后统计并分析调查结果; (电子问卷调查是老师课前做好的,学生只需要花一两分钟的时间就可以完成,然后通过网站的的查看结果来对调查结果进行分析,显然统计起来比纸质的问卷调查更容易。) 电子问卷调查有如下优点:第一,电子的更节约能源,第二,电子的

统计效率更高,也更准确,第三,电子的调查问卷可以更广泛,它不受时空的限制,可以让更多的人参与进来,所以,今天我们一起来学习用frontpage制作电子表格 二、总结归纳,形成表象(探究学习――5分钟) 现在请同学们跟着我一起来打开frontpage2000:开始程序Microsoft frontpage,在之前我们已经学过用frontpage2000制作简单的网页,但那只是静态的网页,今天我们要做的调查问卷是一个动态的网页,它具有交互性。调查问卷在frontpage2000中可以用什么来实现?(表单),下面我们一起来认识表单。 比较word文档中的题型与之对应的表单选项 单行文本框填写性别和年龄 滚动文本框写调查问卷的感受 单选按钮单项选择题 复选框多项选择题 三、观察演示,领会要领(教师引导――6分钟) 教师简单讲解在frontpage2000中如何利用表单实现调查问卷的制作: 下面我就简单的讲述一下我讲解和演示的过程: 1、表单制作:插入表单表单;敲回车(便于复制内容) 2、单行文本框; 3、滚动文本框; 4、单选按钮; 5、复选框。 随着上诉步骤的展开,通过预览,调查问卷效果就出来了,学生会惊讶的发现,原来在frontpage中制作调查问卷这么有趣,这么简单,在老师的讲解和演示后,学生领会了表单制作的基本要领,对其操作步骤也慢慢了解,此时抓住学生若有所悟又跃跃欲试的心理,及时安排分组上机练习,使之很快就能掌握并巩固本课的内容。 四、上机实践,掌握技能(协作探究――20分钟) 四个学生一个小组,协作完成以下的一个任务来:①根据老师提供的素材,选择一个题目来制作调查问卷;②调查问卷中要包含至少三个表单选项。上机过程中如果出现疑难问题,你有几种求助方式,首先是小组协作完成,可以求助于老师,还可以到网络这个学习平台查找相关资料。

简单的网页制作教程-设计一个个人网站

题目:设计一个个人网站 一、要求: 1.使用Dreamweave网页工具制作一个个人网站; 2.包含至少四个网页: 包括首页、个人简介、个人相册等(可随意设计),网页之间用超链接相连。 3.网页中要有图片和文字内容,用表格进行页面布局; 4.添加至少两种行为,并为首页添加背景音乐。 5. 在网站中设计一个表单页面。 6. 首页必须包含页面标题,动态按钮导航栏。 首先新建一个文件夹,文件夹的名字不能为汉字,做网站所有的路径都必须用字母或者数字, 不能用汉字,我们就用名字吧,譬如说名字张三,那文件夹名字就是zs,如图 打开Dreamweaver软件,得到图 做网页要新建站点,关于站点配置服务器什么的,这里不讲了,只讲建立站点。 选择站点——新建站点。 我们建的文件夹就是站点根文件夹。

新建站点后得到这样一个界面 点选高级,得到界面 站点名称与我们建文件夹得名字相同,zs填进去就可以了本地根文件夹就是我们新建的那个文件夹zs, http地址为http://localhost/zs

接下来选择左侧栏里远程信息 点击无后面的那个三角,选择本地网络,远端文件夹同样选择我们新建的那个文件夹 接下来点选左面菜单里的测试服务器, 点选访问后面那个三角,选择本地网络,测试服务器文件夹也为我们建好的文件夹zs,在url前缀后面加上zs

然后点击确定就可以了得到这样一个界面。 下面看老师的第一条要求,是要至少四个网页,那我们就做四个 单击新建,然后单击 接下来,选择 然后单击创建,接下单击文件——保存,保存这个文件,保存在我们一开始建好的文件夹里面,保存名字不能是汉字,只能是字母或者数字,因为我们只坐四个网页,可以简单一点,把这四个网页命名为a、b、c、d,或者1、2、3、4,当然一个网站默认的索引首页名为index,这里也用index,

《网页设计与制作》教案-第10讲 布局技术之二—Div+CSS(二)

第10讲布局技术之二—Div+CSS(二) 1.1教学目标: ◆知识目标 1.理解CSS盒子模式。 2.掌握CSS规则设置方法。 ◆技能目标 能够理解Div+CSS所体现的表现和内容相分离特性。 ◆品质目标 培养学生认真细致、踏实进取的精神 1.2教学重点: 1.掌握CSS规则设置方法 1.3 教学难点 理解CSS规则的作用。 1.4教学方法:讲练结合,任务驱动、分子任务操练 1.5课时安排:2课时 1.6教学对象分析: 这个班学生具有基本专业技能,不仅仅是要教会他们方法,最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力,在保证全班同学教学进度一致的情况上,培养学生较好的专业基础与创新创作意识。 1.7教学过程: 一、CSS样式基本操作 1.样式表的操作途径 我们可以通过三种途径来创建、编辑CSS样式。 从主菜单选择“窗口/CSS样式”即可打开样式面板,如图3-35所示。 图3-35 CSS样式面板 在CSS样式面板的右下角有四个功能按钮,分别为: ●附加样式表:用于打开“链接外部样式表”对话框,选择要链接到或导入到当前文档中的外部样式表。 ●新建CSS样式:打开“新建CSS 样式”对话框,创建新样式。 ●编辑样式表:打开“CSS 样式定义”对话框。编辑当前文档或外部样式表中的任何样式。

删除CSS样式:删除“CSS 样式”面板中的所选样式,并从应用该样式的所有元素中删除格式。 单击CSS样式面板右上角的菜单按钮,可以显示如图3-36所示的面板菜单。通过该菜单,可以完成对CSS样式面板的大部分控制。在CSS样式面板的列表区域中单击鼠标右键,也可以打开同样的菜单。 图3-36 面板菜单 从主菜单选择“文本/CSS样式”命令,选择“新建”也可启动“新建样式表”对话框,如图3-37所示。 在页面空白处单击鼠标右键,在弹出的菜单中一样可以启动“新建样式表”对话框,如图3-38所示。 不管如何启动上述几个样式菜单或面板,他们都包含相同的几个命令:新建样式表、编辑样式表、链接样式表和导出样式表。

怎样制作自己的网页

和怎样制作自己的网页 时间:2009-09-22 19:35来源:未知作者:大宝库点击:9865次 阅读工具:字体:大中小 一 首先,可以告诉想学网页制作的朋友。学习制作网页和学习其它知识一样,是要有基础的。在基础之上学习起来会比较轻松和快捷的。其次,要清楚学习它是用来做什么。 建议你要具备的条件:对电脑熟练操作,使用电脑最好在一年以上,对网页设计感兴趣,有较充足的学习时间,熟悉office办公软件。当然,这些不是一定必须的。 第一阶段:开始时最好是学些网页编辑软件,如:FrontPage、Dreamweaver.这样可以使您更了解网页制作与运营的原理。最好使拿本教程来学学,结合教程边学习边制作。 第二阶段:会用网页制作软件后,已会制作一个较完整的网站了。但为了能使自己设计制作的网页尽善尽美,还是学习网页的核心技术吧!网页编辑语言(包括:html、css、javascript、asp、xml等)。你可以选择地学习。 第三阶段:结合你自己已掌握地知识来开发网站,可以开发出别人给你定义的目标网站。到了这个时候,你就成为真正的网站开发者了。 怎样制作网页,不是说一两篇文章能够说清楚的。以上介绍的是制作网页的主要纲要,希望能够给想要学习制作网页的朋友一个参考。 二 一、工具 1、空间 网页做好了肯定是要发表上网的,所以必须先申请一个空间;免费的空间不是很稳定,容量又小,也不好申请,建议到大的网站如新浪、网易去先买一个个人空间,大概有个20M以上的就可以了。 2、软件 推荐使用Dreamweaver6.0中文版,这个软件最大的特点就是“所见即所得”,也即是制作过程中看到的,便是到时发布到网络上的。 二、教程

建立网站站点(教案)

建立网站站点(教案) 一、教学目标 知识目标:建立网站文件夹和新建网站的主页。 技能目标:1.认识启动FrontPage,熟悉FrontPage软件环境; 2.建立网站空站点并新建保存主页; 情感目标:教学中以简易地操作技能帮助学生树立成功建站的信心。 二、重点难点 教学重点:本课教学重点是启动FrontPage,在熟悉FrontPage软件环境的基础上建立网站空站点并新建保存主页。 教学难点:本课的教学难点站点文件夹的理解。学生在理解上有一定的困难,他们一般不太理解为什么要用上文件夹来存放网页,这里教师需要作解释。 三、环境与素材 1.教学环境:多媒体网络教室,学生计算机中安装IE5.0以上版本及Frontpage2000以上中文版,要求能上因特网。 2.教学素材:准备示例网站以及首页相关的文字图片素材。 四、学情分析初三没开课,之前学生基础较差,对于Word操作也不是很熟悉,不扎实, 网站更是没接触过。讨论也不大积极。并且由于硬件条件较差,还不能 保证每生一台机子。 五、教学思想由一个网站演示入题,激发学生学习兴趣;通过与Word界面的比较,学 生讨论让他们体会到原来FP同Word差不多,将悬着的心放下;接着进 行建立一个站点文件夹,这时能过教师演示,讲解,学生操作;再进行 建立网站主页,保存,同Word操作的比较,让学生了解与Word些许不 同的地方;最后通过分层教学,布置新建主页的一些基本的图文件混排。 以上一系列的设置都是为了让学生树立成功建站的信心。 六、教学过程 引入:将示例学生网站“蓝色阳光”展现在学生的面前。 师:请同学们踊跃发言,谈谈自己的爱好,理想,特长等等。 生:可能一:不回答。(解决方法,比如说A喜欢玩游戏,B喜欢动漫,C喜欢蓝球)可能二:回答各种各样的,或是单一的,或是两者兼有。 师:好,从今天开始大家可以尽情的展现自我的个性,发挥你的专长,向全世界宣告:我来了! 师:那么我们能通过什么来展示呢,当然方法可以是多种的,今天我们就用做网站来实现。 建网站可以借助于工具软件,如Marcromedia Dreamweaver、东方网页王等都是目前流行的网页制作工具。我们今天用相对简单的软件Microsoft FrontPage来作为网页制作的平台。 任务一: 找一找2个同学一小组启动Microsoft FrontPage和Microsoft Word,谈谈它们的区别。情况一:学生找不出。师提示(视图栏、文件名、状态栏、分类页面选项卡)。

陕西科学技术出版社六年级上册信息技术全册教案

题第1课参观“咪咪豆网屋” 教学目标: 1、知道网络及生活密切相关, 2、最大可能地了解网络上有什么 教学重点、难点: 认识个人网站 教具:PowerPoint 课件、多媒体电脑 教学过程 一、谈话引入: 电脑网络及现代生活密切相关,它们已成为现代生活的标志,随着信息技术日新月异的发展,电脑网络在我们的日常生活、工作、学习、娱乐等方面日益重要,可以说,网络就象一个大宝库,里面有取之不尽的宝藏,可神奇了。 二、认识网络 1、师:通过网络,我们可以做什么呢?(指名回答,教师再操作示范) 2、师:网络的通讯方法有哪些?(E-mail、BBS、QQ、IP电话、聊天室) (学生回答,教师再操作示范) 3、师:小调查,你们上过这些网站吗?(在线游戏、新闻放送、在线电影、在线听音乐、旅游天地) 4、教师板书以上各个网址,学生操作观看。

三、练一练: 1、到各网站浏览一下,了解网络广博的天地。 2、进入“咪咪豆网屋”。 3、请登录“咪咪豆网屋”查询以下事项: (1)主页里有哪些素材? (2)主页由哪些部分组成? (3)逛“咪咪豆网屋”。 四、交流心得: 你还发现网络上还有什么好玩的东西,把它介绍给其他同学。 五、小结、质疑: 这节课你有什么收获?最喜欢上什么网站? 小学六年级信息技术教案 课题校本课“找找找” 教学 目标 1、了解搜索引擎的用途。2、学会使用各种搜索引擎查找资料。 教学 重点、难点正确运用“搜索引擎”搜索所需的信息

教具多媒体电脑 教 学 过 程一、谈话引入: 上节课,我们到网上兜了一圈,你们是不是发现,网络是个大宝藏。可是,这个宝库太大了,怎样才能迅速地找到我想找到的宝贝呢?今天,老师就介绍几个小帮手给大家,你们喜欢吗? 二、开始新课: 1、功能强大的搜索引擎: 雅虎: 21cn: 搜狐:百度: 新浪: google: 2、学生操作,打开以上的搜索引擎,认识它们的“真面目”。 3、学习查找的方法(以搜狐为例)。 任务一:通过搜索引擎查找关于“桂林山水”的相关资料。 操作要点: ①在地址栏内输入搜狐网址②单击页面中的“旅游及交通” ③到搜索引擎的位置输入关键词:“桂林山水”,再按“搜索”按钮后即可进入关于的网站。 4、互相交流,你找到了些关于“桂林山水”的什么资料?还想查找什么信息呢?

个人网页制作简明教程

个人网页制作简明教程 (孙晓鹏 整理) 资料来源:https://www.doczj.com/doc/2014692884.html,/ 目 录 1. 认识网页 2. 制作主页前的准备 3. 如何选择网页制作工具 4. 如何把握网页布局 5. 安装Dreamweaver8 6. 规划站点 7. 制作模板 8. 制作首页 9. 套用模板和修改模板 10.网页的发布 1. 认识网页 1.1. 什么是网页 网页的学名称作HTML文件,是一种可以在www网上传输,并被浏览器认识和翻译成页面显示出来的文件。 WWW是“World Wide Web"的缩写;HTML的意思则是“Hypertext Markup Language”,中文翻译为“超文本标记语言”。“超文本”就是指页面内可以包含图片、链接、甚至音乐,程序等非文字的元素。 网页就是由HTML语言编写出来的。HTML语言是一种排版语言,语法就类似于这样:“页高8宽5,(1,2)处插入高1宽1的图片A...” 如果您是使用WPS或则Word的高手,那么恭喜您,网页制作的学习您已经走了一半路了! 1.2. HTML 全称HyperText Markup Language,正式名称是超文本标记语言,HTML语言发展很快,已历经HTML1.0、HTML2.0和HTML3.0、HTML4.0多个版本,现在HTML5.0正在测试,同时DHTML (动态)、VHTML(虚拟)、SHTML等也飞速发展起来。我们现在一般只要掌握HTML4.0就可以了。 html利用标记(tag)用来描述网页的字体、大小、颜色及页面布局的语言,使用任何的文本编辑器都可以对它进行编辑,与VB、C++等编程语言有着本质上的区别。

基于CSS DIV方式的网页设计的心得体会

基于CSS+DIV方式的网页设计的心得体会 现在,计算机和网络已经深入到了我们生活中的方方面面,也已经成了生活中不可缺少的一部分,网络成了我们获取知识和信息的一种便捷工具,现在的网民也在不断的增多,所以,了解和学习网络知识是我们作为一名大学生迫切所需的。我利用这一学期的时间,对网页设计进行了初步的认识和了解。综合网站技术和设计人员的体会,CSS+DIV网站建设具有以下优势和不足,其中CSS网页布局的优点体现在如下方面: 一、使页面载入得更快 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。 二、降低流量费用 页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。 三、修改设计时更有效率 由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。 四、保持视觉的一致性 DIV+CSS最重要的优势之一:保持视觉的一致性;以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS 的制作方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。 五、更好地被搜索引擎收录 由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中正文部分更为突出明显,便于被搜索引擎采集收录。 六、对浏览者和浏览器更具亲和力 我们都知道网站做出来是给浏览者使用的,对浏览者和浏览器更具亲和力,DIV+CSS在这方面更具优势。由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。 说了这么多CSS网页布局的优点,同时也不能轻视CSS网页布局的副作用: 一、DIV+CSS尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了。 二、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。 三、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火狐浏览器,在IE中显示正常的页面,到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。 四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化,甚至不能

相关主题
文本预览
相关文档 最新文档