目录
第一章计算机基础
第二章WINDOWS XP
第三章文字处理软件Word2003
第四章电子表格系统Excel2003
第五章演示文稿软件PowerPoint2003
第六章Access 2003关系数据库的使用
第七章计算机网络应用基础
第八章网页制作软件FrontPage 2003
第八章网页制作软件 FrontPage 2003 FrontPage 2003是微软公司最近推出的Microsoft Office System套装软件的重要组成部分.FrontPage是一款所见即所得的网页制作软件,该软件以其强大的功能向导和简单易用著称.与上一版本相比,此版本附带了许多新增功能和增强功能,可以帮助用户更快地创建设计网站,更轻松地共享设计数据,更有效地管理网站.
任务一创建站点、网页,插入相关元素
任务引入:
王君是一个中学生,他喜欢上网冲浪,梦想着有一天自己也能拥有一个个人网站,可是,怎样制作网站呢?一天,一个朋友向他推荐了一本书,名字叫《FrontPage2003》,告诉他里面有制作网页和网站的好方法。王君大喜过望,送走朋友,立刻如饥似渴的研究起来。
《FrontPage2003》这本书,从FrontPage的主要功能、FrontPage的启动与退出开始讲起,介绍了网页与网站的关系、FrontPage的三种编辑方式(普通、HTML、预览)以及三种编辑方式的不同用途、FrontPage中的6种视图,即网页视图、报表视图、导航视图、超链接视图、任务视图,以及各种视图的作用和操作特点,介绍了掌握创建站点的方法、网页编辑的方法,以及如何插入对象和超链接等等。
下面,我们就随着王君一起,学习如何创建一个具有个人风格的网站吧。
任务分析:
任务实施:
步骤一:了解FrontPage2003的主要功能
FrontPage2003的主要功能是制作网页和管理网站
使用FrontPage2003可以创建新的网页,也可以打开并修改以存在的网页FrontPage2003提供了多种编辑网页的方式不但可以直接修改HTML,而且可以采用“所见既所得”的方式编辑网页,还可以使用菜单命令插入各种网页元素,使用对话框修改其属性,十分灵活。
在FrontPage2003中,可以很容易的插入文本、图片、表格、组件等元素;可以使用主题,共享边框,框架等管理网页的外观;还可以使用表单等元素设计出交互式网页。FrontPage2003提供了强大的站点管理功能。一组相关网页和有关文件组成一个站点,站点也是FrontPage2003对网站管理的基本单位。在FrontPage中可以轻松实现设计、管理、分析、发布和维修站点等工作。
步骤二:FrontPage2003的启动与退出
1.FrontPage2003的启动:
1)单击“开始”按钮,在“开始”菜单中单击“程序”;
2)在“程序”菜单中单击,即可打开MicrosoftFrontPage2003的窗口,如下图所示,
图8-1 启动FrontPage2003
另外,也可以在桌面上建立2003的快捷方式,然后在桌面上双击快捷方式图标,即可启动ProntFage2003。
2.FrontPage2003的退出
1)选取“文件”菜单中的“退出”。
2)单击操作窗口右上角的关闭“按钮”。
3)按快捷键Alt+F4。
步骤三:认识FrontPage 2003中的视图
FrontPage 2003提供了6种图片以方便用户对站点的管理,可以在不同的视图中进行不同的操作。
1.网页视图
网页视图是Frontpage 2003中最常用的工作界面。网页的创建、编辑、预览等基本操作都是在此视图中进行的。
2.文件夹视图
在文件夹视图中,站点显示为一组文件和文件夹。可以在文件夹视图中创建、移动和删除文件或文件夹。
3.报表视图
使用报表视图可以方便的了解当前站点的文件内容、更新链接情况、组建错误、所有文件列表及变化情况等信息。可在“报表”工具栏中的“报表”下拉列表中选择所需显示的报表。
4.超链接视图
超链接视图将当前站点显示为链接文件的一个网络,它们表示了站点中各个网页之间
的相互链接关系。超链接视图就像一张地图,表明站点中的超链接路径。
5.任务视图
任务视图主要用来创建和管里任务。在视图中列出了当前站点的“任务”,即当前站点中尚未完成的项目。
6.导航视图
使用导航视图可以方便的观察站点的链接结构,它以层次状的组织结构图形式显示。在该视图下,可以通过拖曳操作改变链接结构。
步骤四:创建站点
选择“文件”菜单中的“新建”“站点”命令,指定站点的位置,建立站点Web1,FrontPage2003默认建立主页(index.htm)。
使用FrontPage2003的向导和模板,用户可以轻松地创建出各种用途和风格的站点。新建站点时,可以根据自己的需求选择不同的摸板和向导。对于不同的模板和向导,其新建站点的步骤略有不同。下面以“只有一个网页的站点”模板为例,介绍新建站点的方法。(1)在“文件”菜单的“新建”子菜单中选择“站点”,打开“新建”对话框;
(2)在新建对话框的指定新站点的位置文本框中输入存储站点的文件夹;
(3)双击“只有一个网页的站点”模板,新建站点如图8-2所示。
图8-2 新建站点
该站点只有一个空白网页index.htm(主页)和用于存储图片的文件夹images,你可以打开index.htm编辑该网页,也可以进一步根据网站规划创建其他网页。
选择“文件”菜单的“退出”命令,可以关闭FrontPage2003.要再次对该站点进行操作,在启动FrontPage2003后实用“文件”菜单的“打开站点”命令打开该站点。
步骤五:在站点中新建网页
要创建一个新的网页,可按下面的步骤操作:
1)从“文件”菜单的‘新建”子菜单中选择“网页”命令,打开“新建”对话框。
2)在“常规”选项卡中选择所需的模板,可在’说明‘及“预览”区域查看该模板的说明及预览图。如果要建立一个空白网页,可选中“普通网页’模板。
3)单击”确定”按钮,系统新建一个基于所选模板的网页。此时,新建的网页显示在FrontPage2003窗口中,可以对其进行编辑修改等操作。
图8-3 新建网页
4)单击“文件”菜单,选择“保存文件”命令,弹出‘另存为’对话框。在“另存为”对话框中,单击“更改”按钮修改网页标题,如‘新闻”。再“文件名’文本框中输入网页文件名,如news.htm。设置完成后单击‘保存’按钮。
单击‘视图”框中“导航”图标,在“文件夹列表”中拖动新建网页到站点的结构图,将其置入相应位置。此时,双击该页面图标可切换到网页视图。网页中若包含导航栏,则导航栏自动更新链接关系。
步骤六:打开网页
在FrontPage2003中编辑某个网页必须首先打开该网页。打开网页的方法有多种,最常用的方法如下:
1)在FrontPage2003窗口中,单击工具栏中的“文件夹列表”按钮。
2)在文件夹列表窗口中找到要编辑的网页,然后双击网页图表即可打开网页。
实际上,在其他视图中双击网页图标,同样会打开指定网页。
步骤七:网页编辑
1.设置文字格式
同其他MicrosoftOffice组件一样,网页中可以输入文字,复制、剪切和粘贴文字,设置文字格式,查找和替换文字等。
在FrontPage2003中,对文字的格式提供了相当完整的设定功能,文字格式的变化也因此多种多样。我们可以使用工具栏上的工具按钮或者菜单命令,快速地改变文字的外观。
文字格式包括字体、字型、大小、颜色和修饰效果等属性。
设置文字格式的步骤是:选种文字,单击“格式”菜单,选择“字体”命令,打开“字体”对话框,在对话框中设置字体的各种属性。
虽然可以设置各种美观的字体,但是由于阅览者只能使用本地计算机中安装的字体显示网页,因此还是使用常用的字体好。
2.设置段落格式
文字段落的格式编排对于一个网页的外观是至关重要的。FrontPage2003通过按Enter 键划分段落。值得注意的是,段落之间插入了一个空行。如果只是需要换行,而不是另起一个段落,按Shift+Enter键即可。实际上,按Enter键在HTML代码中插入的是
标记,而按Shift+Enter键则插入的是
标记.
段落格式主要包括对齐方式\文本缩进和段落间距等.设置段落格式的方法如下:
1)将插入点移动到要设置格式的段落中;
2)单击“格式”菜单,选择“段落”命令;
3)在“段落”对话框中可以设置段落的各种属性。
5.设置网页属性
网页的属性包括网页的标题、位置、背景、页边框等。要设置网页属性,用户可以使用“文件”菜单里的“属性”命令,或者在网页的任意地方单击鼠标右键,在弹出的菜单中选择“属性”命令,FrontPage2003将显示“网页属性”对话框。
1)“常规”属性
要设置网页的“常规”属性,单击“网页属性”对话框的“常规”选项卡,“标题”框用于给出网页的标题,网页标题将显示在浏览器的标题栏中。“背景音乐”框用于指定网页的背景声音,当W浏览器打开网页时,将自动播放背景声音。其中“位置”框用于指定声音文件的位置,用户可以单击“浏览”按钮,在当前打开的网站或本地磁盘中定位一个声音文件。“循环次数”框用于指定声音要反复播放的次数,如果选中“不限次数”复选框,表示一直不停地播放。
2)“背景”属性
要设置网页的背景颜色、背景图片以及超链接的颜色,单击“网页属性”对话框的“背景”选项卡。
用户可以选中“背景图片”复选框,并指定一个图片作为网页的背景图片,也可以单击“浏览”按钮,在当前打开的网站或本地磁盘中定位一个图片文件。
通过单击相应的下拉列表框,设置网页的背景颜色、文本颜色以及超链接文字的颜色。当同时设置背景图片和背景颜色时,图片将覆盖背景色。
FrontPage2003允许用户使用其它网页中设置的“背景”属性,包括背景图片、背景颜色、文本前景颜色以及超链接的颜色。此时只要选择“从另一网页获得背景信息”并定为一个网页的URL即可。
3)“边距”属性
在“边距”选项卡中可以设置页面边距和左端页边距。如果要设置顶端页边距,选中“指定上边距”复选框,并指定上边距的像素数。
6)预览网页
网页制作过程中,用户可以随时对网页进行预览。可以转换到预览视图方式,还可以使用“文件”菜单上的“在浏览器中预览”命令,使用外部浏览器打开当前网页进行预览。步骤八:插入对象
在Frontpage2003中,既可输入文本,也可方便的插入图片、水平线等多种对象,这些对象使网页内容更丰富,增加了网页的表现形式,增强了网页的宣传效果。
1.插入水平线
在网页中输入文本内容之后,还可在不同的段落、行之间添加水平线,以增强视觉效果。操作步骤如下:
1)在准备插入水平线的位置设置插入点。
2)打开“插入”菜单,选择“水平线”命令,此时在网页的插入点插入一条水平线。如果插入点位于或接近行尾,水平线将插入到下一行。
图8-4 插入水平线
打开“水平线属性”对话框,在“宽度”栏中可设置水平线的宽度,再“高度”栏中输入水平线的高度,再“对齐方式”栏中选择水平线在网页内的水平对齐的方式,在“颜色”列表框内设置水平线的颜色,系统默认的颜色是黑色,选择“实线(无阴影)”复选
框时,水平线将被设置成实心线,并且在水平线的边缘上没有阴影。
图8-5 水平线属性
图8-6 设置好的水平线
2.插入表格:
选择表格菜单中的插入表格命令,或者选择表格手绘表格命令,或者使用工具栏中的插入表格按钮,在插入点处建立一个两列多行的表格,以便下面使用表格定位文字和图片。
3.插入图片
图片可以使网页变的生动活泼,并能吸引访问者的注意。
1)图片文件的格式
在WWW上常有的图像文件格式是JPEG和GIF,它们都是压缩的图象格式,文件的信息量少,适合于网络传输,现已几乎被所有的Web浏览器所支持,因此被广泛应用Web 站点的设计中。
图形交换格式GIF(Graphical Interchange Format)采用无损压缩方式,其主要特征是支持动画、透明度、图形渐进,但JIF格式只支持256种颜色。
联合图象专家组JPEG(Joint Photograph Expert Group)格式是专为有几百万种颜色的照片和图形设计的,它采用有损压缩方式,以牺牲图片质量换取大的压缩比例。但JPEG 格式支持真彩色(24位色),并且在压缩大的图像方面以被证明很有效。
2)插入图片的步骤
(1)移动光标至想要插入图像处;
(2)单击菜单项中的“插入”,选择“图片”项,在选取二级菜单中的“来自文件”,弹出图片对话框;
(3)如果图片在该站点中,选中图片文件并按“确定”按钮即可,否则单击“从计算机上选择一个文件”按钮或单击“使用Web 浏览器来选择网页或文件”按钮,从计
算机本地硬盘中或者Internet上选中图片并按“确定”按钮,即可将其插入网页中。
图8-7 插入图片和文字
3)设置图片属性
打开“图片属性”对话框,在“外观”选项卡中,可以调整图片的大小。为了防止改变图片原来的长宽比例,可以选中“保持纵横比”复选框,这样就会根据原来的长宽比例来调整大小。同样在“外观”选项卡中,可以选择“对齐方式”,设置图片的边框的宽度,0为无边框。
4)编辑图片
选中插入的图片,单击“查看”菜单中的“工具栏”,选择“图片”命令,打开图片编辑工具栏,可以对图片的亮度、对比度进行调整,可以旋转、翻转图片,对图片进行剪裁,设置透明的颜色等操作。
4.插入字幕
在制作网页时,可以将网页中的文字做成由左至右,或由右至左移动的动态效果。在网页中加入移动字幕,会使网页看起来更活泼。具体操作步骤如下:
1)将插入点设置在要插入移动字幕的位置或者选择作为移动字幕的文本。
2)单击“插入”菜单中“组件”,选择“字幕”命令,出现“字幕属性”对话框。
图8-8 插入Web组件
图8-9 “字幕属性”对话框
3)如果已经选择了作为移动字幕的文本,此文本就会出现在“文本”框中(见图8-9)。如果没有选中文本,可在“文本”框中输入作为移动字幕的文本。
4)在“方向”区域中选择文字的移动方向。在“速度”区域中可以指定文字的移动速度,再“延迟”框中输入数值表示在每个连续运动之间暂停的豪秒数,“数量”框中输入的数值表示文本每次移动距离。在“表现方式”区域框可以指定文字的运动方式,选中“重复”区域的“连续”复选框,则移动字幕连续不停循环;若要设置文本重复有限的次数,则取消选中并输入字幕重复的次数。在背景颜色列表框中可以设置移动字幕的背景颜色。
5)单击“确定”按钮。
5.插入交互式按钮
交互式按钮是一种动感按钮,当访问者将鼠标指向该按钮时就会改变颜色或形状。插入交互式按钮的具体操作步骤如下:
1)将插入点设置在要插入交互式按钮的位置。
2)单击“插入”菜单中的“组件”,选择“交互式按钮”命令,弹出“交互式按钮属
性”对话框。
图8-10 插入交互式按钮
3)在“按钮文本”框中输入按钮上的文本。可单击“字体”按钮,设置文本的字体、
字形、大小和文本颜色等属性。“背景颜色”选项是指按钮的背景颜色,此选项一般不起作用。在“效果”列表框中选择当鼠标移到按钮上时出现的视觉效果,包括“填充效果”、“颜色对比”、“发光”、“反色发光”、“微微发光”、“凸出”和“凹进”
效果。可以在“效果颜色”列表框中指定当实现某一种效果时出现的颜色。
4)可以通过单击“自定义”按钮,在弹出的“自定义”对话框中进一步设置按钮的属
性。
5)设置完成,按“确定”按钮。
此时,设置的图片悬停按钮出现在插入点位置。
6.插入动态HTML效果
动态HTML效果是FrontPage2003新增的功能。可以将动态HTML效果应用到网页的任何相关组件,如文本、段落、图片、按钮以及字幕等,并将这些动态效果链接到鼠标单击、双击、悬停或者加载网页等事件上。
首先选中网页中打算采用动态HTML的元素,比如文字或者图像。然后选择“格式”菜单中的“动态HTML效果”,弹出“DHTML 效果”工具栏。
该工具栏上共有三个下拉菜单,需要选择“开启”菜单中的触发事件,才能选择后面的应用效果,然后才能选择第三个下拉菜单的效果属性设置。“开启”菜单中的事件列表依据所选择的网页元素类型而变化。
例如将鼠标指向某个段落时,该段落自动加上边框,操作步骤如下:
(1)用鼠标选中该段落,选择“格式”菜单中的“动态HTML效果”,弹出“DHTML效
果”工具拦;
(2)选择“鼠标悬停”触发事件,在“应用”中只有“格式”可以选择,然后在“效果”下拉菜单中选择“选择边框”,FrontPage2003会弹出“边框与阴影”对话框;
(3)在“边框与阴影”对话框的“样式”一栏中选择“双线”,单击“确定”按钮。这样就给文字加上了动态HTML效果。在编辑状态时,可以看出,这行文字被蓝色突出显示了。可以转到“预览”模式查看效果,当鼠标移动到文字“动态HTML效果”时,自动出现边框。
步骤九:创建超链接
Web网页的强大之处就在与其超链接,使用超链接能够将Internet中的信息有机地组织起来,使人们在丰富多采的WWW世界轻松地漫游。在浏览器中,超链接通常表现为与普通文本或图片不同的特点。将鼠标移到一个超链接上方时,鼠标指针会变成手形。同时,与这个超链接相对应的URL会在窗口底部的状态栏显示出来。
1.创建超链接
在Web网页中超链接一般有两种表现方式,即以文本方式标注的超链接。对于文本或图片,利用FrontPage2003都可以创建指向当前网站的另一个网页或WWW中另一个站点的某个网页的文本超链接,以及指向E-mail地址的超链接等。
1)链接到页面
创建超链接的步骤如下:
(1)选定要定义超链接的文本或图片;
(2)单击“常用”工具栏上的“超链接”按钮,或者从“插入”菜单中选择“超链接”命令,打开“创建超链接”对话框,;
图8-11 选择“插入超链接”命令
(3)在“创建超链接”对话框中可见,网站中的所有网页出现在文件列表中,选择链接的目标网页;
图8-12 选择链接对象
(4)单击“确定”按钮,超链接创建完成。
图8-13 创建超链接
单击窗口底部的“预览”标签,切换至预览模式。将鼠标移至链接文字或图片上时,光标会变成手形,此时单击鼠标就转到目标网页中。
在“创建超链接”对话框中,单击“创建一网页并链接到该网页”按钮,出现“新建”对话框,新建一个网页,即可链接到一个新创建的网页。
在“创建超链接”对话框中,单击“制作一个指向您计算机上文件的超链接”按钮,出现“选择文件”对话框,选择要链接的文件,单击“确定”按钮,即可创建链接到计算机中某文件的超链接。
在“创建超链接”对话框中,单击“使用Web浏览器来选择网页或文件”按钮,系统自动打开Web浏览器。在“地址”栏中输入一个站点的地址,打开某个网页。切换到FrontPage窗口中,这个地址就会出现在“创建超链接”对话框中的“URL”栏中。单击“确定”按钮,完成WWW上其他站点超链接的创建。、
2)创建发送电子邮件的超链接
可以创建与电子邮件的超链接,以便反馈信息。具体创建步骤如下:
(1)在“创建超链接”对话框中单击“制作发送电子邮件的超链接”按钮,出现“创建电子邮件超链接”对话框;
(2)输入一个电子邮件地址,单击“确定”按钮返回到“创建超链接”对话框,在“URL”栏中显示了电子邮件地址;
(3)单击“确定”按钮,完成超链接的创建。
单击窗口底部的“预览”标签,切换至预览模式,单击此链接,就会打开系统默认的收发电子邮件工具,如OutlookExpress、Foxmail等。
2.使用书签
对于网页的超链接,往往使浏览者跳转到目标网页的顶端。应用书签能够更严密地控制访问者到达网页内某个具体位置。当访问者单击基于书签的超链接时,将直接跳转到这个书签所在的位置。
1)插入书签
在创建到书签的链接之前,必须要在网页中插入书签。具体步骤如下:
(1)将光标定位在要插入书签的位置;
(2)从“插入”菜单中选择“书签”命令,打开“书签”对话框;
(3)在“书签名称”框中键入书签名称
(4)单击“确定”按钮,出现书签标记。
2)创建到书签的超链接
步骤如下:
(1)在“创建超链接”对话框中,选定已经插入书签的目标网页,在“可选”区域中
单击“书签”下拉按钮,在列表中选择链接的书签名称;
(2)单击“确定”按钮,完成超链接的制作。
3.为图形添加热点
在图形上创建热点,即把同一个图形作为多个超链接的载体。假如我们通过山东地图浏览山东各城市的民族风情,当鼠标移动至地图上的各个城市时,光标变为手形,单击后打开描述该城市民族风情的页面,这里就为图形添加了热点。操作步骤如下:
(1)在网页视图中,选择需要添加的图形。
(2)在“图片”工具栏中,单击长方形、圆形或多边形热点按钮匹配需要的形状。
(3)在图形上,依所选形状画上矩形、圆形或多边形。画多边形时,可单击多边形的第一个角,然后单击要放置多边形每个角的位置,最后双击完成。
(4)松开鼠标按钮后,弹出“创建超链接”对话框,按照创建超链接中所讲方法创建超链接即可。
重复(2)~(4),在选定的图形上创建超链接到其他网页。
也可以添加文本热点到图形中,文本热点是已经放在图形上并分配了超链接的文本字符串。当站点访问者鼠标移动到站点位置时,光标变为手形,单击鼠标以后,超链接的目标网页就会显示在Web浏览器窗口中。添加图形或文本热点后,用户可以方便地对热点进行编辑,如调整热点大小、编辑热点的URL、移动和删除热点等操作。
4.使用导航栏
为了使浏览者能在站点中的各个网页之间切换浏览,可以在每一个网页中分别设定链接到各网页的超链接,但是这样做非常烦琐,为此,Frontpage2003提供了“导航栏”功能。导航栏是一组超链接,用来浏览站点多个主要的网页。用户可以在站点的每个网页上设置一个导航栏,这样可以方便地转向其他主要网页。
Frontpage可以根据当前站点的导航结构自动设置导航栏。导航结构决定导航栏上有哪些超链接,而网页标题决定超链接的标签。要为某个站点设置导航结构,具体步骤如下:
1)在Frontpage2003中打开需要设计导航结构的站点,切换到导航视图;
2)导航视图显示出当前站点的链接结构,用户可以进行多种操作,如经过拖曳操作改变链接结构,重点设置导航结构中某个网页的标题等。
设置好导航结构后,就可以插如导航栏了,具体步骤如下:
1)将光标设置在导航栏的位置;
2)从“插入”菜单中选择“导航栏”命令,打开“导航栏属性”对话框;
3)在“要添加到网页的超链接”区域中设定所需要的型号链接选项,当选择了一个选项时,相应的超链接就以蓝色出现在结构示意图中;
4)在“方向和外观”区域中选择所需的方向和外观选项;
5)单击“确定”按钮,导航栏出现在网页中的插入点位置。
当网站中网页的链接结构发生改变是,导航栏将自动进行调整,保持与变化后的链接结构的一致性。
知识拓展:
网页与网站
网页是WWW上的基本文档,用HTML书写,通常以.htm或.html为扩展名。网页可以独立存在,但常常作为网站的一部分。网站是一组相关网页和有关文件的组合。网站一般有一个特素的网页作为浏览的起始点,称为主页,用来引导用户访问其他网页。
网站通常位于Web服务器上`。客户机通过网络向服务器发出请求,Web服务器响应各客户的请求,并使用HTTP协议将网页和有关文件通过网络传送回客户机。客户机端使用网络浏览器就可以看到网页的内容了。
在FrontPafe2003中,可以建立和编辑独立的网页,也可以设计和管理网站。在站点中可以包含大量网页和各种文件,甚至包含子站点,而且只有在使用站点时,FrontPage2003许多特性才有效。例如:在单个网页的环境中,导航栏变的毫无意义。
通常,在FrontPage2003中建立的站点需要发布到Inteine中的Web服务器上,成为真正意义上的网站,Internet上的用户才能访问。有时,可以在同一台计算机上安装服务器端软件,从而可以将站点发布到本机进行测试。
用FrontPage2003也可以建立基于本地硬盘的站点,这种站点以本机文件夹的形式存在,不需要发布到服务器,这时,所需要服务器支持的功能都是不可用的。
表格的使用
本实验要求在2003中新建站点和网页,编辑网页,在网页中插入文本、图片、水平线等对象,利用表格对网页内容进行定位。
表格是网页布局的常用工具,灵活性大,可把页面分割成不同的版面。插入表格前需要考虑整个页面的构图设计,才能用表格体现网页的整体结构。掌握插入图片的方法,保存网页时同时保存插入的图片。页面上插入水平线可以起到划分网页内容的作用。
制作过程中需要注意的问题有:修改“表格属性”中的边框“粗细”为0可以隐藏表格的边框线。为使站点的目录结构清晰,可以在网站中建立专门的文件夹存放使用的图片等素材。保存网页时,注意更改网页的标题。当然,也可以在“网页属性”对话框中修改网页的标题。
关于超链接
超链接是从一个网页指向另一个目的端的链接,这个目的端通常是另一个个网页,但
它也可以是一幅图片、一个电子邮件地址、一个文件或一个程序等。超链接是Web网页之间的纽带,没有超链接,网页就会失去真正得意义。
在浏览器中浏览网页时,已经访问过的超链接、尚未访问过的超链接和正在访问的超链接应有不同的颜色显示,使浏览者一目了然。可利用“网页属性”对话框中的“背景”选项卡进行设置,例如选中“启用超链接翻转效果”选项,则可指定光标指向超链接时链接载体的翻转样式。
图片上添加的超链接分为两种类型:默认超链接和热点。热点就是在一张图片上建立不同形状的热点区域(如矩形、圆形、多边形),每一个区域都是一个超链接。在图片的不同位置上单击,就会分别链接到相应的网页中。可以通过“图片”工具栏中长方形热点、圆形热点或多边形热点按钮为图片设置热点。
任务二网页布局及发布、表单的创建
任务引入
王君同学要为燕山中学校报的网站创建一个介绍关于“中国节日”专题网页,他已经设计了关于“春节”、“元宵节”、“清明节”、“端午节”的4个网页,下面要进行工作就是把各个网页组织在一起,进行整体布局,并创建一个征求反馈意见的网页,发布在学校的网站上。网页设计完成图如下:
任务分析
王君首先要建立一个带表格的网页做为目录,然后创建一个表单页面,再通过创建框架把这些网页进行整体的布局,最后发布到学校的网站上。
任务实施
步骤一:创建表格
相关知识:表格由行和列交叉所形成的单元格组成。在单元格中可以放置任何对象,例如文本、图像、表单、FrontPage组件等。利用表格可以有条理地排列数据或者组织网页布局。表格可以将文本排列成并列的段落,或模拟文本的分栏形式,也可以利用宽度固定的表格在网页上为文本提供边界。FrontPage 2003提供了与Word字处理软件类似的表格处理功能,在网页中可以轻松地创建和处理表格。创建方法如下:
使用菜单命令“插入”——“表格”,弹出如图8- 14 所示,可以对插入的表格进行精确的设置,包括行和列的数目、边框尺寸以及单元格宽度等。王君根据实际情况,选择了大小为4行1列,和背景颜色为水绿色的的表格。然后在插入的表格中输入文字,并最后在表
格属性中调整表格,完成后的表格页面如图8- 15所示。
图8- 14表格属性图
图8- 15 表格设计完成图技能扩展
创建表格还有以下2种方法:
网页的制作教案 一、教学目标: 1、知道站点、主页的概念,能在指定位置建立只有一个网页的站点; 2、认识FRONTPAGE的界面; 3、掌握在主页中插入文字、图片、水平线; 4、掌握页面文件与图片的保存。 二、教学重点: 1、能在指定位置建立只有一个网页的站点(难点) 2、能在页面中插入文字、图片、水平线 3、掌握页面文件与图片的保存(难点) 三、学情分析: 学生已经学习了WORD、POWERPOINT与上网浏览信息,对计算机的基本操作(WORD 中文档的编辑,网页的浏览等)比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务,有能力的学生还可以完成提高篇的学习,以充分发挥学生的积极性与自主性。 四、教学方法 一方面采用比较教学的方法,促进学生知识的迁移;另一方面,提供学生一个导学课件,让学生根据这个网络环境下的课件自己探索学习,以满足不同层次学生的需求。 五、教学过程 设计教师活动: 1、引入课题: (激发兴趣,活跃气氛)经常上新浪、西祠胡同等,有没有同学知道新浪、西祠胡同称做什么?(网站)浏览新浪网站,浏览的第一个页面称为什么?(主页)我们还可以浏览其它的页面,点击超链接浏览,当鼠标变成手指的形状时有超链接。 问题1:网站是不是就是网页?用自己的语言描述一下网站的概念(网站包含多个网页,通过超链接把不同的页面链接起来) 问题2:网页是不是就是主页?(第一个页面称为主页,网站设计者可以确定哪一
个是主页,主页的文件名一般为:index.htm,主页也是网页) 设计网站一般必须经过两个步骤,首先是在计算机里做好,然后发布在internet 上,让所有的人访问浏览。 今天我们学习用Frontpage建立站点,制作一个主页。 先来研究一下没有发布的网站,打开教师做的网站问:同学们看到了什么?(文件夹) 小结:可以这样理解网站:在资源管理器里,网站表现为一个文件夹,里面存放的是所有与网站相关的文件。打开主页,浏览页面,这是老师做的一个导学课件,将帮助大家完成学习任务。请学生浏览教师课件,了解学习任务。 2、新建站点: 与word比较,有什么不同?(增加了视图区,编辑区有三个窗口) 小结:视图区:多种视图模式是为了方便网站的管理。制作网页时,必须在网页视图中编辑页面普通窗口:鼠标在闪动,可编辑、修改页面,所见即所得的方式预览窗口:浏览器中出现的效果,与PowerPoint中的“放映幻灯片”类似。 Html窗口:编写HTML(超文本标记语言,它是描述网页内容和外观的标准。)打开导学软件,根据步骤,示范建立只有一个网页的站点,强调新站点的位置、路径的正确输入,站点的名称。(教会学生利用导学课件,根据导学课件完成任务)任务1:学生根据导学课件,在d:\建立自己站点 教师巡视指导请一位学生示范如何建立站点,教师总结问:在文件夹列表中看到了什么?分析多出的文件夹列表栏,多了一个文件夹,里面有两个子文件夹和主页,图片存放在images文件夹中) 3、编辑主页与保存主页看效果图, 请学生分析主页中的元素总结:鲜明的主题,如:我的世界、我的宠物等,有分割页面的水平线,与主题相关的图片,对网站的简单介绍根据导学软件,学生完成任务2:设计主页、保存主页与图片。教师巡视指导 4、总结反馈请学生示范, 讲解如何插入图片(来自剪贴画与来自文件)、插入水平线,如何保存总结:必须切换到“普通”窗口下编辑主页的保存中存在问题:单击“文件”“保存”或工具栏的“保存”按扭,弹出一个对话框,保存嵌入式文件,改变文件夹,图片必须保存在本站点images文件夹中,便于站点的管理。 5、请学生继续完成自己的主页,有能力的同学完成提高篇,教师巡视指导 6、教师与学生共同评价总结展示学生作品
网页设计与制作实例教程 习题答案 第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 二、简答题
《Frontpage2003网页设计与制作》教案 2009141119 郭飞 一、教学目标 1. 知识与技能目标: (1) 了解网页制作过程,初步学会如何分割网页版面; (2) 掌握对网页中素材的简单处理方法,如插入图片、艺术字、文本框;对图片进行超链接设置。 2. 能力目标: (1) 学习一种逆向思维方式,对版面进行设计能力,并充分利用背景图片、背景音乐及字幕的设置; (2) 通过对演示的网页的分析与小组合作锻炼学生交流与表达,增强学生的分析能力、动手实践能力; (3) 学会将素材有效地组织在一起,以表达综合信息的能力。 3. 情感、态度、价值观: 鼓励学生大胆构思,学生交流过程中学会尊敬他人,客观评价他人观点,同时认识到网页所展示的内容要积极向上。 二、教学重、难点 教学重点: 1.利用Frontpage2003对设计的网页进行插入文本(包括艺术字、文本框的运用); 2.插入图片以及图片的超链接制作。 教学难点: 1.利用网页分割设计原理,结合自己的主题,规划网页的版面; 2.插入表格并对表格进行设置; 3.设置背景图片、背景音乐、字幕。 三、教学步骤 1.插入艺术字、文本框: “插入”——>“图片”——>“艺术字”
“插入”——>“文本框” 2.插入图片并设置超链接: “插入”——>“图片”——>“来自文件”——>“完成”——>选中——>单击鼠标右键“超链接” 3.设置背景图片、背景音乐及字幕: 网页的任意位置单击鼠标右键——>“网页属性”——>“背景音乐浏览”——>“确定” 网页的任意位置单击鼠标右键——>“网页属性”——>“格式”——>“背景图片”——>“浏览”——>“确定” “插入”——>“Web组件”——>“字幕” 4.设置表格属性及单元格属性: 选中——>单击右键“表格属性/单元格属性”——>“确定” 四、教学过程 基于对前面的网页制作页眉页脚设置掌握后,要进一步讲解对版面的分割、文字图片插入技术的知识点。为了有利于小组间互相交流,每小组学生坐在一起,后期学生完成作品时教师起引导辅助作用,一步步引导学生完成本课的目标。 教学环节教师活动学生活动活动目的 新课导入 通过浏览几个不同版面分割的网页,引出今天内容。(2) 进行对优秀网 页的浏览,提问: 我们浏览这些网页 是为了得到网页中 什么内容?网页中 最显著的图像或文 字的部分是哪些? 准备好下面需 要演示的网页。 浏览网页,积 极思考教师提出的 问题,发表自己的 看法。 启发学生知道网 页中最醒目的位置就 是你所想要传达的信 息。 传授逆向思维方 式。 展示几个不同 版面的网页,同时跟着老师演示 用实例启发学 生,根据实例讲解知
Dreamweaver 优点 1.最佳的制作效率 Dreamweaver可以用最快速的方式将Fireworks,FreeHand,或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单,快捷键与格式控制,都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具,如Playback Flash,Shockwave和外挂模组等搭配,不需离开Dreamweaver便可完成,整体运用流程自然顺畅。除此之外,只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。 2.网站管理 使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称,Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 3.无可比拟的控制能力 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组,Dreamweaver 支援精准定位,利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver 成功整合动态式出版视觉编辑及电子商务功能,提供超强的支援能力给Third-party厂商,包含ASP,Apache,BroadVision,Cold Fusion,iCAT,T ango与自行发展的应用软体。当您正使用Dreamweaver 在设计动态网页时,所见即所得的功能,让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开,应用于快速网页更新和团队合作网页编辑。建立网页外观的样版,指定可编辑或不可编辑的部份,内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。 Dreamweaver还集成了程序开发语言,对ASP、.NET、PHP、JS的基本语言和连接操作数据库,都是完全支持的。 缺点 一、难以精确达到与浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果,这一点在结构复杂一些的网页(如分帧结构、动态网页结构)中便可以体现出来; 二、页面原始代码的难以控制性,比如您在所见即所得编辑器中制作一张表格也要几分钟,但您要它完全符合您要求可能需要几十分钟,甚至更多时间。而相比之下,非所见则所得的网页编辑器,就不存在这个问题,因为所有的HTML代码都在您的监控下产生,但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合,则既产生干净、准确的HTML代码,又具备则见则所得的高效率、直观性,一直是网页设计师梦想。在DREAMWEAVER之前,FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器,但是它同样继承了所见即所得的种种劣性。但是我说过这是在DREAMWEAVER之前,现在我无意说DREAMWEAVER已经实现网页设计师的梦想,但我觉得DREAMWEAVER正在努力向这个梦想一步步走去。 FrontPage 以前,想在网页中使用数据库,常常需要通过麻烦的数据库连接设置,而设置时又会接触到繁琐的ASP、CGI什么的。现在使用FrontPage 2002来连接数据库就轻松多了,因为FrontPage 2002在数据库接口功能方面做了很大改进,特别是它提供的数据库接口向导功能可以替用户产生在线数据库所需要的一切功能,包含数据库的建立、窗体以及所需的各种页面。
《用FrontPage创建网页》教学设计 一、教学内容分析: FrontPage是微软办公自动化软件Office中的一个极为重要的组件之一,它具有功能强大、操作方便等特点,是目前最为流行的网页制作与站点管理工具之一。FrontPage 既是简单实用的网页编辑器,又是一个浏览,有“所见即所得”的效果,创建网页的过程中还可以不时地在文本编辑器和浏览之间切换,以查看编写页面的效果。而且,六年级学生已经学过Word2003或PowerPoint2003的操作,而它们又出于同一家族,它们有许多相似之处,FrontPage的许多菜单、工具的操作会有一种似曾相识之感,教学过程中,要注意引导学生进行知识的迁移,这些都有助于学生轻松进入FrontPage的世界。 二、学生学情分析 教学对象是六年级的学生,他们会对许多事物充满好奇,求知欲较强,且创作欲望和表现力也较强,对于教师布置的任务能够认真对待。因此课中,鼓励他们独立完成作品,培养他们自主学习和合作探究的意识。因为有Word软件的学习经验,学生在学习FrontPage 软件时会有似曾相识的感觉,很多的知识点都已学习过,所以教师不要拘泥于教材,要根据学生的实际情况,有的放矢,充分激发学生学习兴趣,最大限度挖掘学生的创造潜能。但是学生之间还存在一定差异,信息技术认知能力、实际操作能力和知识水平都存在一定的差异。三、教学目标: 【知识与技能】
(1)初步了解FrontPage 2003的基本功能。 (2)掌握FrontPage 2003的启动和掌握在网页上文字的输入。 (3)熟悉FrontPage 2003窗口的组成。 (4)通过实例学会创建简单的网页和保存网页文件。 【过程与方法】 (1)能用FrontPage 2003制作简单网页;具有一定探索新应用软件的能力 (2)通过对比观察,培养学生利用已学知识去解决问题的能力,培养学生敢于尝试和自主探究的学习能力;培养学生的相互协作能力和知识的迁移能力。 【情感态度与价值观】 (1)激发学生热爱自然、热爱环境、热爱家乡的情感。 (2)激发学生的学习热情和创作热情,在亲历学习过程中,获取知识、体验成功,从而提高学习兴趣。 (3)培养审美意识,促进学生形成良好的审美观;提高信息素养。 (4)在合作学习中,学会交流与协作,提高学生的合作意识和合作能力。 四、教学重点和教学难点 【教学重点】 FrontPage 2003的启动以及FrontPage 2003的窗口组成。 【教学难点】通过实例学会用FrontPage 2003创建简单的网页
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页的网站。
Frontpage 制作网页-如何制作网页教程-网站制作教程-海乐网
怎样制作网页-如何制作网页 网站制作教程 怎样制作网页 如何制作网页-网站制作教程 海乐网 如何制作网页 网站制作教程|海乐网
现在市面上的有许多制作网页的工具,office 中也有一个专门作网页的工具 FrontPage ,其操作与 word 相似,比较容易上手。下面以 FrontPage 2000 为例,介绍 网页制作的基本知识。 一、 如何打开 FrontPage 了解主界面 单击任务栏“开始”按钮,选择“程序”选项,单击 FrontPage 就可以进入。
进入后你会发现 PRONTPAGE 界面和 WORD 很相似[图一], 这是因为编辑 WEB 页 面和编辑 WORD 文档有很多同样的设置, 这些设置所用的图标和 WORD 中的是一样的。
[图一]ProntPage2000 界面
Frontpage 制作网页-如何制作网页教程-网站制作教程-海乐网
视图中的组框是用来切换视图的, 单击里面的小图标就可以切换到不 同的视图。FRONTPAGE 共有 6 种视图[如左],使用不同的视图可以从不 同的侧面查看设计的 WEB 站点。对一个 WEB 站点而言,不断更新是很 重要的。随着站点的成长,维护站点的工作量会越来越大。建立站点可能 很快,但是如果没有这 6 种视图的帮助,维护起来就很困难了。 这些视图的使用不用一下就全部掌握,只要知道有这些视图就可以 了。
下面看一看同一个 WEB 站点在不同视图中是怎样显示的。
单击“网页”按钮,切换到网页视图,再单击工具栏上的“文件夹列表”按钮
,窗口
中增加了一个文件夹列表框[图一]。网页视图是用来显示选中的网页的,双击文件夹列 表中的某一个 HTM 文件,在最右方的工作区中就会显示该网页的内容。
[图一]网页视图
软件名称功能 photoshop Photoshop是一种可以帮助我们迅速有效地完成各种图形处理工作的电脑软件,它能帮助我们完成图像处理、编辑、通道、图层、路径综合运用;图像色彩的校正;各种特效滤镜的使用;特效字的制作;图像输出与优化等,灵活运用图层风格,流体变形及褪底和蒙板,制作出千变万化的 图像特效。 DreamWeaver Dreamweaver 8、是一款优秀的所见即所得式网页编辑器,功能强大,是制作、美化、维护网站,开发多种语言应用程序的专业工具。 Fireworks A dobe Fireworks是A dobe推出的一款网页作图软件,软件可以加速Web设计与开发,是一款创建与优化Web 图像和快速构建网站与 Web界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与位图图像的灵活性,还提供了一个预先构建资源的公用库, 并可与Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和 Adobe Flash软件省时集成。在Fireworks 中将设计迅速转变为模型,或利用来自Illustrator、Photoshop和F lash的其它资源。然后直接置入D reamweaver中轻松地进行开发与部 署。 绘声绘影(Ulead VideoStudio 绘声绘影(Ulead VideoStudio是友立公司出品。是一个功能强大的视频编辑 软件,具有图像抓取和编修功能,可以抓取,转换MV、DV、V8、TV 和实时记录抓取画面文件,并提供有超过100 多种的编制功能与效果,可制作DVD,VCD光盘。支持各类
Frontpage网页制作 【摘要】Frontpage更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页,利用它可以轻松的组织、编辑网页并将其发布到指定的站点上,而且在发布之后还能对更新情况进行监控以更新站点的内容。 【关键字】Frontpage创建站点、新建页面、文字、超链接 现在流行的网页制作软件有很多,如Macromedia公司的Dreamweaver、微软公司的Frontpage、还有Adobe Pagemill 3.0--制作多框架,表单和Image map 图像的网页工具、Netscape等等。其中Frontpage更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页,利用它可以轻松的组织、编辑网页并将其发布到指定的站点上,而且在发布之后还能对更新情况进行监控以更新站点的内容。 工具准备好了,可根据你的个人喜好来选择一些素材,如图片、喜欢的文章等。现在就让我们从第一步的建立站点来踏上建造网上家园之旅。 用FRONTPAGE创建站点是很容易的。首先,我们来看一下创建一个只包含一个网页的站点。选择“文件”菜单的“新建”选项,单击“站点”命令,这时新建站点对话框就弹出来了,在“指定新站点位置”文本框中输入新站点的位置,单击“只有一个网页的站点” 图标,单击“确定”按钮。这就建立好站点了,我们现在来看一下新的站点里有什么,单击“视图”工具条的“文件夹”按钮。在文件夹列表里有一个网页文件,名字叫做“index.htm”。我们知道,每一个站点都要有一个主页,这个主页也是一个网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在一般情况下就叫做“index.htm”。就是说我们新建只包含一个网页的站点时,FRONTPAGE就自动为我们创建了站点的主页了。这个新建的站点主页时空的,我们可以向里面添加内容。 在文件列表里除了主页之外,还有文件夹。新建站点时,FRONTPAGE都会在站点所在位置下新建两个文件夹,一个是“images”另一个是“_private”。我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。“private”文件夹比较特殊,其中的文件对浏览者来说是隐含的,我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里,比如:
网页制作软件有哪些? 一、菜鸟级网页制作软件 如果你是一个网页制作初学者,那么让下面几种软件带你走进那绚丽多彩的网页制作世界吧! ①Microsoft FrontPage 如果你曾对Word很熟悉,那么相信你用FrontPage进行网页设计一定会非常顺手。使用FrontPage制作网页,你能真正体会到“功能强大,简单易用”的含义。页面制作由FrontPage中的Editor完成,其工作窗口由3个标签页组成,分别是“所见即所得”的编辑页,HTML代码编辑页和预览页。FrontPage带有图形和GIF动画编辑器,支持CGI和CSS。向导和模板都能使初学者在编辑网页时感到更加方便。 FrontPage最强大之处是其站点管理功能。在更新服务器上的站点时,不需要创建更改文件的目录。FrontPage会为你跟踪文件并拷贝那些新版本文件。FrontPage是现有网页制作软件中惟一既能在本地计算机上工作,又能通过Internet直接对远程服务器上的文件进行工作的软件。 ②Netscape编辑器 Netscape Communicator和Netscape Navigator Gold3.0版本都带有网页编辑器。如果你喜欢用Netscape浏览器上网,使用Netscape编辑器真是简单方便!当你用Netscape浏览器显示网页时,单击编辑按钮,Netscape就会把网页存储在硬盘中,然后就可以开始编辑了。你也可以像使用Word那样编辑文字、字体、颜色,改变主页作者、标题、背景颜色或图像,定义描点,插入链接,定义文档编码,插入图像,创建表格等,是不是与FrontPage2000还有些像? 但Netscape编辑器是网页制作初学者很好的入门工具。如果你的网页主要是由文本和图片组成的,Netscape编辑器将是一个轻松的选择。如果你对HTML语言有所了解的话,能够使用Notepad或Ultra Edit等文本编辑器来编写少量的HTML语句,也可以弥补Netscape编辑器的一些不足。 ③Adobe Pagemill Pagemill功能不算强大,但使用起来很方便,适合初学者制作较为美观、而不是非常复杂的主页。如果你的主页需要很多框架、表单和Image Map图像,那么Adobe Pagemill的确是你的首选。 Pagemill另一大特色是有一个剪贴板,可以将任意多的文本、图形、表格拖放到里面,需要时再打开,很方便。 ④Claris Home Page 如果使用Claris Home Page软件,你可以在几分钟之内创建一个动态网页。这是因为它有一个很好的创建和编辑Frame(框架)的工具,你不必花费太多的力
第一课从一个网页开始 Frontpage2000教程第二课编辑网页 Frontpage2000教程第三课使用图形 Frontpage2000教程第四课超链接 Frontpage2000教程第五课使用表格 Frontpage2000教程第六课组件的使用 Frontpage2000教程七课使用框架 Frontpage2000教程第八课使用多媒体 Frontpage2000教程第九课站点操作 Frontpage2000教程第十课表单设计 Frontpage2000教程第十一课创建讨论组 Frontpage2000教程第十二课站点的发布 frontpage2000教程第一课从一个网页开始 作者:未知阅读人次:5527 文章来源:未知发布时间:2004-11-20 网 友评论(7)条 认识Frontpage2000 你是否紧跟时代的潮流上了网?你在聊天室里是否听过别人聊起自己的个人主页,你会不会觉得自己没有个人主页就落伍了?有没有想过自己也要做一个主页?想过?那你还瞎呆在那里干什么?赶快阅读本教程,你就该学会制作自己的主页了。 本教程教你学会使用微软公司的Frontpage2000,学会干什么?当然是做你的个人主页啦。或许你认为制作主页是一门很深奥的工作,需要懂得大量的计算机知识。我现在要告诉你,你错了。在这个流行图形操作系统的今天,制作主页不再需要你去学习复杂,烦躁的HTML语言了,你只需要知道一个概念:主页(也称网页,怎么样称呼都无所谓)就象一张白纸,你可以在上面写字,画画等等,通过自己的设计,那张白纸可以变成很漂亮。做主页时就是这个概念,只不过我们写字,画画是用笔和白纸,而做主页我们是用鼠标,键盘和Frontpage
网页制作常用软件与编程语言 ★【关于网络营销能力秀】:大学生网络营销能力秀(官网http:// https://www.wendangku.net/doc/9c1910855.html,)是网络营销教学实践平台,通过社交化学习、竞赛式实 践全面提升网络营销学习者的认知和实践应用能力。能力秀始于2009年, 每个学期举办一期,到2016年6月已举办15期,超过7000个院校的 20多万名大学生曾经是“秀友”。 网页设计设计的技术多种多样,根据网页表达的内容不同,应用的技术也不一样。 1)静态网页 所谓静态网页,是指网页内容不会随着浏览者的不同或浏览时间等的不同而变化,要改变网页的内容,必须由设计者在设计状态下改变。常用的静态网页设计脚本语言包括HTML、XML和CSS等。 2)超文本置标语言 超文本置标语言是网页设计的基础,是初学者必须学习的内容。虽然现在有很多所见即所得的网页编辑工具,但了解HTML的语法还是很有必要的,因为HTML可以更加精确地控制页面元素的布局,可以实现更多的功能。 3)HTML HTML是表示网页的一种规范,它通过标记符定义了网页元素的显示格式。在文本文件的基础上,增加了一系列描述文本格式、颜色等的标记符,再加上声音、动画甚至视频等,使网页可以形成更加精彩的画面。另外,HTML是一种发展迅速、功能强大的语言,它以简单精炼的语法和极强的通用性,使网页设计者能够充分发挥才能,将丰富多彩的信息以多样的形式展现在人们面前。
HTML的工作原理是当用户通过浏览器浏览网上信息时,服务器会将相关的HTML文件传送到浏览器上,浏览器按顺序读取HTML文档,然后解释HTML标记符,并显示为网页内容的相应格式。 4)可扩展置标语言 可扩展置标语言可以很方便地对结构化数据进行描述,它允许用户定义自己的标记符,提供了一个直接处理Web数据的通用方法,具有广阔的应用前景,对传统的网页设计将有较大的帮助。 5)XML XML是一种类似于HTML的、用来描述数据的语言,而HTML是关于如何显示数据的语言。在HTML中所有的标记符和文档结构都是预先定义好的,用户只能使用这些标准的HTML标记符,而XML允许用户定义自己的标记符和自己的文档结构,因此XML是可扩展的。另外,XML不是HTML的一种替代产品,将来网页设计的趋势将是由网站的开发者使用XML来描述网站所需的数据和网站结构,而用HTML格式化显示这些数据。 良好的数据存储格式、可扩展性、高度结构化、便于网络传输是XML的四个主要特点,这些特征使得XML在电子商务、出版、厂商等领域中发挥作用。 6)层叠样式表 层叠样式表技术是一种格式化网页的标准方法,它是HTML功能的扩展,使网页设计者能够以更有效的方式设计出更具有表现力的网页。它的主要特征如下: ●对文本的格式进行精确控制。 ●对文件中实现格式的自动更新。 ●对现有的标记格式进行重新定义。 ●自行将某些格式组合定义为新的样式。
用FrontPage制作网页教程 【教学目标】了解用FrontPage制作课件的优势与不足,学会用FrontPage制作网页型课件。【重点难点】重点是如何在FrontPage插入多媒体素材,难点是课件交互性的实现和网页源代码的应用。 【教学策略】教师实例演示,学生上机操作,教师辅导和点评。 【媒体选择】主要采用FrontPage示范课件和实际操作讲解相结合,并辅以文字教材、网上学习资源和教学光盘。 【教学内容】 一、 FrontPage 基本操作 1. 启动 FrontPage :双击桌面上的 FrontPage 快捷方式图标;开始→程序→Microsoft FrontPage ;右击一个扩展名为 htm 或 html 网页文件,选“编辑”。 2. 打开或隐藏视图栏、文件夹列表和网页文档 a. 点“视图→视图栏”打开或隐藏视图栏。点“视图→文件夹列表”打开或隐藏文件夹列表。 b. 右击扩展名为 htm 或 html 网页文件(如 index.htm ),选“编辑”,系统默认用 FrontPage 打开网页。 c. 点“文件→打开”或点常用工具栏中的“打开”按钮,从本地磁盘或网络驱动器中打开网页文档,从任意 Web 网站打开网页,打开最近打开过的网页文档。 3. 在 FrontPage 编辑器中预览网页 a. 点普通视图按钮,观察刚才打开的 index.htm 网页。 b. 点 HTML 视图按钮,观察 index.htm 网页。 c. 点预览视图按钮,观察 index.htm 网页。 4.FrontPage 视图方式:网页视图,文件夹视图,报表视图,导航视图,超级链接接视图,任务视图。 5. 保存网页:点“文件→保存(另存为)”或点常用工具栏中的“保存”按钮,将新建的网页或从万维网上打开的网页保存到本地磁盘,把自己喜欢的网页作为模板保存。 6. 关闭网页:点“文件→关闭”或文档窗口中的“ X ”按钮,关闭当前网页。 二、网页课件制作实例 1. 创建站点 ( 1 )在本地硬盘(如 D 盘)建一个文件夹 , 用英文或汉语拼音命名 , 如 myweb, 打开它。 ( 2 )启动 Microsoft FrontPage 。 ( 3 )点“文件→新建→站点” , 选择“空站点”图标,再在“指定新站点的位置”栏中输入新建的站点文件夹( D:\myweb ),或通过单击“浏览”按钮来指定。点“确定”后片刻,编辑区出现一个空站点。 2. 建立框架网页 ( 1 )点“文件→新建网页”,选框架网页”选项卡 , 双击“横幅和目录”。编辑区被划分为上框架、左框架和右框架 3 个区域。 ( 2 )点上框架区中的“新建网页”按钮 , 切换到上框架网页编辑状态 , 点“插入→组件→字幕” , 在“字幕文字”栏中输入网页课件的标题 , 选“交替”表现方式和“连续”选项 , 确定。根据需要插入图片、 gif 动画或 Flash 动画。 ( 3 )点左框架区中的“新建网页”按钮 , 切换到左框架网页编辑状态 , 输入表示课件目录的文本,如“情境导入”、“新课”、“课堂练习”、“知识扩展”、“课堂小结”、“网上学习资源”、“课外探究”等(或插入相应的图片)。
题目:设计一个个人网站 一、要求: 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,
6.2 利用 Frontpage 2000 制作网页 6.2 利用frontpage xx 制作网页一、教学目标:知识与技能:1、学会利用frontpage xx 制作简单网页 2、熟悉网站制作的整个流程过程与方法:上网搜索文字、图片等素材,制作一个班级网页,提高学生的兴趣。情感态度与价值观:进一步理解网页作为常用的信息集成工具的优势和特点,培养学生团队精神。二、教学要点:利用frontpage xx 制作简单网页。三、教学组织: 组织学生进行实践活动,探究、指导、分组协作完成任务,让学生有兴趣地在实践中找乐趣。四、教学安排: 2课时。教学过程:一、导入新课打开我校网站主页和另一个网站主页,让同学们浏览这些网页,比较它们在页面设计、网站结构、整体风格上的异同。二、新课讲述 1、新建站点:文件→新建→站点,选择只有一个网页的站点,指定站点的位置,例如:d:\myweb,将首页保存到指定的网站文件夹,并进行命名为index.htm。 2、 3、利用表格布局网页。 4、表格是网页的一个非常重要元素,frontpage中的表格不仅可以用来陈列数据,还可以实现网页的精美排版。 5、步骤:表格→插入表格a、在表格中添加文本 b 、在表格中添加图像:插入→图片
→剪贴画或来自文件 3、插入字幕步骤:插入→组件→字幕 1、插入动画:插入→高级→插件 2、 3、设置背景:格式→背景 4、5、插入背景音乐:格式→背景,在“网页属性”中选择“常规”标签,点击“浏览”选择背景音乐。 6、 7、设置超链接:插入→超级链接 8、链接的对象除了可以是某个网站,还可以是某个网页,甚至是一个文件。 9、 10、网站发布:在因特网上发布,先申请网站空间,再上传网站。 11、、作业:根据班里同学人数的多少进行分组,每组为2至3位同学,利用fronpage或dreamweaver制作班级主页。要求:有一个主页和五个以上的子页进行链接,主题自定,文字和图片材料等素材可以上网搜索,并且每一组必须填写下面表格。建议从以下几方面考虑: 13、(1)确定主题和名称 14、(2)整体风格创意设计 15、(3)规划内容和栏目 16、(4)页面的设计和布局 17、(5)可以上网搜索其它中学各班级的主页,然后可以模仿它们的布局进行制作。 18、保存主页文件名为:index.htm。 19、班级主页 20、 21、班级组别主题名称制作人员 文字编辑设计人员素材收集策划人员素 材美工注:(1)上传作业时连登记表一起上传。(2)从每个班里抽出一组优秀的班级主页进行全高一年级班级主页 比赛,比赛奖品另定。
和怎样制作自己的网页 时间:2009-09-22 19:35来源:未知作者:大宝库点击:9865次 阅读工具:字体:大中小 一 首先,可以告诉想学网页制作的朋友。学习制作网页和学习其它知识一样,是要有基础的。在基础之上学习起来会比较轻松和快捷的。其次,要清楚学习它是用来做什么。 建议你要具备的条件:对电脑熟练操作,使用电脑最好在一年以上,对网页设计感兴趣,有较充足的学习时间,熟悉office办公软件。当然,这些不是一定必须的。 第一阶段:开始时最好是学些网页编辑软件,如:FrontPage、Dreamweaver.这样可以使您更了解网页制作与运营的原理。最好使拿本教程来学学,结合教程边学习边制作。 第二阶段:会用网页制作软件后,已会制作一个较完整的网站了。但为了能使自己设计制作的网页尽善尽美,还是学习网页的核心技术吧!网页编辑语言(包括:html、css、javascript、asp、xml等)。你可以选择地学习。 第三阶段:结合你自己已掌握地知识来开发网站,可以开发出别人给你定义的目标网站。到了这个时候,你就成为真正的网站开发者了。 怎样制作网页,不是说一两篇文章能够说清楚的。以上介绍的是制作网页的主要纲要,希望能够给想要学习制作网页的朋友一个参考。 二 一、工具 1、空间 网页做好了肯定是要发表上网的,所以必须先申请一个空间;免费的空间不是很稳定,容量又小,也不好申请,建议到大的网站如新浪、网易去先买一个个人空间,大概有个20M以上的就可以了。 2、软件 推荐使用Dreamweaver6.0中文版,这个软件最大的特点就是“所见即所得”,也即是制作过程中看到的,便是到时发布到网络上的。 二、教程
用FrontPage制作网页课件 【教学目标】了解用FrontPage制作课件的优势与不足,学会用FrontPage制作网页型课件。 【重点难点】重点是如何在FrontPage插入多媒体素材,难点是课件交互性的实现和网页源代码的应用。 【教学策略】教师实例演示,学生上机操作,教师辅导和点评。 【媒体选择】主要采用FrontPage示范课件和实际操作讲解相结合,并辅以文字教材、网上学习资源和教学光盘。 【教学内容】 现在越来越多的课件是用网页制作工具来制作,并结合数据库、ASP 等技术来加强课件的交互性。网页形式的课件可以集成丰富的多媒体信息,具有交互性强、制作简易、体积小、便于在网络上发布、传播和更新等优点,适合于个别化学习、课堂教学和网络教学。网页课件的开发工具软件有很多,包括: ?语言编程如HTML 、D HTML 、ASP 、JSP 、PHP 、JAVA 、JavaScript 、VBScritp 、VRML 等。 ?所见即所得的可视化编辑工具,如FrontPage 、Dreamweaver 、Flash 、Authorware 、PowerPoint 、CourseBuilder 等。
对于一般都有繁重教学任务在身的学科教师来说,没有太多的精力去学习复杂的编程语言。可视化网页编辑工具由于源代码自动生成,使教师可以有更多的精力关注内容的表达和教学设计。 用FrontPage 编制的网页课件有较易操作的界面(与上网浏览网页完全相同),一门课程或一堂课的脉络结构(知识结构)可以在主页上用菜单(树形菜单或弹出菜单)或导航条的形式清楚地表明,可以列出教学目的、内容、重点难点、引言、概念性质、例题、练习、小结、作业等等,甚至操作注意事项。FrontPage 被公认为最好的入门级的网页编辑工具。 一、FrontPage 基本操作 1. 启动FrontPage :双击桌面上的FrontPage 快捷方式图标;开始→程序→Microsoft FrontPage ;右击一个扩展名为htm 或html 网页文件,选“编辑”。 2. 打开或隐藏视图栏、文件夹列表和网页文档 a. 点“视图→视图栏”打开或隐藏视图栏。点“视图→文件夹列表”打开或隐藏文件夹列表。 b. 右击扩展名为htm 或html 网页文件(如index.htm ),选“编辑”,系统默认用FrontPage 打开网页。
应用frontpage制作网页(一) 一、熟悉frontpage2000的环境 A、frontpage的启动 1.利用“开始”菜单启动:开始——》程序——》frontpage 2.利用桌面上的快捷方式:双击打开 B、退出frontpage 1.单击窗口标题栏右端的关闭按钮; 2.按Alt+F4快捷键; 3.执行“文件”菜单下的退出命令。 注:若在退出以前没有保存已被修改的文档,在退出时,会有询问是否保存的提示 框。 C、F rontPage的工作环境 FrontPage的窗口由标题栏、菜单栏、工具栏、网页编辑区域、网页编辑模式和状 态栏七部分组成。 1.标题栏:窗口的顶部,包括“控制菜单”图标,当前正在编辑的文件或程序名称、“最小化”按钮、“最大化/还原”按钮和“关闭”按钮。 2.菜单栏:标题栏下方,是命令菜单的集合。由“文件”、“编辑”、“视图”、“插入”、“格式”、“工具”、“表格”、“窗口”和帮助组成。 3.工具栏:提供常用的各类按钮,如“保存”、“打印”、“剪切”等编辑操作和“插入表格”等标准操作按钮。 FrontPage2000常用工具栏上特有的工具按钮: 发布站点:将建立的网站发布到WEB上; 文件夹列表:显示当前站点的文件夹结构; 在浏览器中预览:当网页保存后,选中该工具按钮,可在系统默认的浏览器中 浏览当前编辑的网页。 停止:用于预览网页时停止网页的下载; 插入超级链接:插入一个超级链接; 刷新:用于浏览网页时刷新网页。 4.视图栏:由“网页”、“文件夹”、“报表”、“导航”、“超链接”、“任务”六部分组成。 网页:视图将在网页编辑区域打开当前站点的所选网页文件以做编辑之用; 文件夹:视图列出当前站点的所有文件和文件夹,方便寻找须编辑的网页文件; 报表:视图将报告站点中文件和超链接的状态; 导航:视图将显示站点的导航结构; 超链接:视图显示来自和指向站点中的每一页的超链接; 任务:视图列出站点中要完成的任务。 5.网页编辑区域:管理站点和编辑网页的地方。 6.网页编辑模式:普通方式(所见即所得的网页设计方式)、HTML方式(用HTML 语言设计网页)和预览方式(检查网页实现的效果),从不同的角度观察网页。 7.状态栏:显示当前页状态