Frontpage网上建站完全手册
我想有个家,不需要多大的地方,不需要宫殿,也不需要大厦。我的家,虽在前人打造的房间,普普通通,随处可见,但里面温情和关爱都是我自己的。
模板建站
FrontPage可以适合不同个人和组织的需要,自动建立网“巢”——站点。
操作 打开站点建立窗口:点击“文件/新建/站点”,在打开的窗口中可以看到自动建立站点的各种向导和模板。
向导特点:选择向导程序列出的条件元素,创建某类有个性的站点和网页
模板特点:直接采用已经设计好的条件元素,创建某类统一的站点和网页
在FrontPage中,使用向导创建的一般是比较复杂的商业和大型站点,不适合个人在网上安家筑巢。我的网上小家就使用模板建立站点就够了。
操作 选择模板:在新建站点窗口,选择“个人站点”模板。在右面的选项栏中设置站点文件的存放地址。建议新建一个有意义的存放地址,如“C:\My House”,点击“确定”。
操作 查看站点结构:点击程序界面的“视图”窗口中的“导航”按钮,可以看到建立的站点由哪些文件组成以及站点的结构。
我们看到,个人站点模板的结构是主页下面有三个子页,分别是“兴趣”、“相册”、“喜好站点”,而在文件夹列表栏中列出了站点中的文件,其中“image”文件夹专门存放图片,另外还有五个HTML文件,其中的myfav3.html是备用的子网页文件。其他四个HTML文件分别对应主页和三个子网页。
操作 查看站点中的网页:在导航视图窗口的网站结构示意图中点击某个网页结构图标,如“主页”结构图标,可以打开该网页,我们就可以在窗口中看到这个预先定制的网页大概结构。点击文件夹列表中的文件也可打开。
注意,打开网页后,我们可以看到导航视图窗口切换到了网页视图窗口。
操作 保存和打开站点:保存站点的工作很简单,当关闭FrontPage的时候,按照提示就可以保存站点。实际上,保存站点主要就是保存网页,因此在修改编辑网页的时候,要时刻注意到保存。保存的方法和在文字编辑程序中保存文件类似。打开站点要复杂些,选择菜单“文件/打开站点”,找到站点所在的目录,找到站点文件夹(是一个带有小圆球的文件夹图标,是FrontPage建立的站点管理文件 蚩?纯伞?BR>
操作 删除站点:删除站点很简单,直接在Windows中删除站点所在的文件夹即可。也可在程序中删除。
进一步学习的建议:熟练使用各种视图和窗口,使用向导创建复杂的商业和项目站点。使用导入向导,将别人已经建立的站点导入,成为自己可以利用的站点。
模板建网页
目前,我的网“巢”还只有一个主页,三个子页,我想再添加一个“我的游历”的子页。
使用模板创建站点,站点中有几个网页都是事先设计好的,大多数情况下,都需要添加网页,或者用新设计的网页替换掉事先设计的网页。建立新的网页,使用向导和模板是最方便不过的了,因为FrontPage提供的网页模板非常丰富,可以满足大多数情况的需要。
操作 打开网页模板窗口:在视图窗口中点击“网页”按钮,切换到网页视图。选择菜单“文件/新建/网页”,打开新建网页的模板选择窗口。注意,不同的视图窗口,使用“文件/新建/网页”菜单命令的结果不同,后面我们将会提到。
在网页模板选择窗口中,有三个标签页,在“常规”标签页中有三十多个模板供选择,一般个人网“巢”中的网页使用“常规”标签页中的模板就足够了。根据我新建网页的内容和预想的设计,我选择了“带有标题的宽行正文”模板。
操作 选择模板:点击“带有标题的宽行正文”模板项,然后点击“确定”,程序即开始按模板新建网页。
回到主窗口,就可以看到一个有大概结构的网页,这个网页以很清晰的方式提示我在哪里放标题,哪里放正文,网页段落结构也排得很好,我只要按照提示添加内容就可以了。
新建立的网页还没有保存在硬盘中,由于这个网页是要添加到刚才新建立的网站中去的,因此,我们将它保存到网站文件所在的目录(C:\My House)中。
操作 保存新建的网页文件:选择“文件/保存文件”,在弹出的保存文件窗口中选择“C:\My House”目录,并命名文件名为“Mytravel.htm”。点击“确定”。
操作 预览网页:建立了网页后,就可以通过浏览器来观看该网页了。在FrontPage中可以直接调用系统集成的IE浏览器来查看。方法是在网页视图窗口打开某网页,然后选择“文件/预览网页”即可。我们在编辑修改的时候,大都是通过FrontPage内置的预览功能来查看网页的制作效果,方法是在网页视图的主窗口下面选择“预览”标签项即可。
操作 查看文件列表:点击“视图”窗口中的“文件”标签按钮,在主窗口中列出了站点文件夹和所选文件夹中的文件。在文件窗口中,我们看到刚才保存的新网页文件已经位于其中,并可以看到该文件的一些属性。双击这些文件时可以在网页视图窗口中打开编辑。
网页标题就是网页在浏览的时候,显示在浏览器窗口左上角的标题文字。这个标题可以让访问者了解该页的内容。
操作 修改网页主标题:打开“文件”视图窗口,在文件列表窗口找到Mytravel.htm文件,点击“这是主标题”文字,然后输入“我的游历”。另外,可以将“主页”文件的标题改为“豆豆之家”。注意,主页的标题也就是站点的标题。
进一步学习的建议:了解各种网页模板的结构和适用方向。学习使用向导创建有复杂表单的网页。学习创建带框架和样式表的网页。
修改站点和网页
基础的站点和网页建立好后,我就需要在这个基础上按照我的梦想修改了。首先,我要在第二级网页中增加一个“我的游历”网页,其次,要在“我的兴趣”二级网页下增加三个三级网页。
操作 将已有网页添加到站点:在视图窗口点击“导航”按钮,切换到导航视图。在文件夹窗口中将Mytravel.htm文件拖动到“导航”窗口,仔细选择停放的位置,让示意图标和其他二级图标在一个线上,然后就看到Mytravel.htm文件成为站点的一部分了。
注意,在站点中添加了网页后,站点中的某些网页将自动发生改变,当Mytravel.htm文件(“我的游历”网页)成为index.htm(主页)的下级网页后,我们在网页视图窗口查看主页页面的时候,会发现该页面已经将“我的游历”这样的字样添加进去了。
操作 添加新网页到站点:切换到导航视图,选择“兴趣”网页示意图标,然后选择“文件/新建/网页”(或者工具栏中的“新建”按钮),在“兴趣”网页图标下就看到一个新的网页图标,这个网页是属于“兴趣”网页下的子网页,但是一个虚拟的网页,并没有对应的文件。双击新网页的示意图标,即可在站点文件夹中生成一个简单的模板网页。重复以上操作三次,就可在站点中添加三个网页。
操作 在站点中打开和关闭网页:打开站点的网页非常简单,在导航视图窗口或者文件视图窗口双击要打开的网页即可。打开网页时程序将自动切换到网页视图窗口。不过注意关闭站点中暂时不编辑的网页,以使系统节约资源。
操作 修改网页的文件名:新建的网页我们可以改成自己需要的文件名和主标题。这个工作既可以在“文件”视图窗口中进行,也可以在“导航”视图窗口中进行。
操作 站点的调整和删除:站点的调整很简单,直接在导航视图窗口中拖动要调整的网页就可以了,删除站点的网页也很简单,选择网页文件或者网页示意图标后按“Del”键即可。修改后的站点结构如图10所示。我“家”的雏形已经基本建立起来了。
进一步学习的建议:设置网页的高级属性,自定义网页模板,进一步修改站点结构,建立复杂的网站,站点和文件夹的管理和相互转换。
竹篱围青瓦,芍药伴鹤眠。苔痕上阶绿,簌影落窗前。咦,谁欤我家比美?——梦之家
页面修整
通过模板建立的网页,常常预先置放了些标题栏、目录栏(一般叫导航栏),导航栏都是用很多元素组成的,结构上稍稍复杂一些。一般情况下我们不必要对这些东西进行低层次的修改,FrontPage也不允许操作者修改,但在某些项目上,我们还是可以根据自己页面的要求来修改。
操作 修改页面的主标题:在主页(index.htm)的页面上部,模板预置了一个名为“主页”的横幅标题,这个横幅标题和整个主页格格不入。点击横幅,按“Del”键删除,然后在同样位置插入一个事先准备好的横幅图片为主页标题。
操作 修改导航条的链接:在主页的左边,有一个导航条(目录栏),在建立站点的时候,导航条就建立了几个网站的链接。这些链接不能在网页窗口中修改,只能在站点管理的“导航”视图窗口中修改。但可以在网页视图窗口中给导航条添加链接。在导航条中点击鼠标,然后选择输入文字“给我写信”,设置文字的超链接,这里的链接地址设置的是我的邮箱地址“mailto:豆豆@yesky.com”。
操作 删除页面元素:在主页的右下,程序放置了一个LOG图片,这个图片和我的主页不符,选择该图片,按“Del”删除。
操作 给页面添加水平线:水平线对于规划页面有很大的作用,可以让页面清楚,简洁。在要插入水平线的位置点击鼠标,选择“插入/水平线”,水平线就出现了。注意,一般模板网页的水平线由程序自动设置外观属性。而其他情况下,将由操作者自己设置水平线的颜色,粗细等。
进一步学习的建议:页面长期编辑后,可能会留下垃圾(无效代码),如果想做得更专业一点,可以在HTML标签窗口修改源代码,或者使用其他网页制作工具休整。
表格
表格实际和文字、图片一样,是一个网页的基本元素,但表格在网页中,更大的用途是来规划页面。实际上,在网页编辑中,通过空格、段落、缩进等是很不容易规划好一个有很多元素的页面的,特别是图文混排的页面。
在FrontPage中添加常用的数据表格,和在Word中添加表格一样的方便,直接使用插入表格命令,然后填写数据就可以了。甚至还可以将Word文件中的? 粘贴进来。
操作 添加一个简单表格:在要插入表格的位置点击鼠标,选择“表格/插入/表格”,在弹出的对话框中设置表格的属性,然后选择表格的行数——2,选择表格的列数——1,然后指定表格的宽度,可以设置表格的宽度占网页宽度的百分比,或者直接设置表格的绝对宽度——像素。其他设置表格边框线的宽度为1,设置单元格间距为2。确定即可。
操作 在表格中添入文字:在表格中输入文字和在普通编辑页面中输入文字没有什么区别,另外,在生成主页模板的时候,程序在网页中添加了一个高级控件,可以自动显示网页的更新时间。将这个控件拖入到表格中。这样,一个显示网页制作者的表格就制作好了。
操作 设置表格的属性:表格的属性比较复杂,分成单元格属性和表格属性。选择表格,然后选择菜单“表格/属性/表格”,在弹出的窗口中可以设置表格的边框、背景、颜色等等。特别要说明的是表格的浮动,表格的浮动是设置整个表格的对齐方式,而一般的对齐方式是设置表格内的元素的对齐。
操作 图文混排:在需要的位置加入一个只有一个单元格的表格,并设置好其他属性。在表格中添加图片,并设置好表格的大小。再设置表格为“左浮动”,调整文字,让文字在表格的右边。这样,图文相配的混排就得到了。
进一步学习的建议:表格的操作比较复杂,需要反复的练习,学习如何用表格构造特殊页面,如何实现复杂的图文混排等等。
主题
经过以上过程,我主页制作也基本完成了。但页面的背景图、导航栏、颜色选择,边框等都不太令我满意,而这些都是模板自动设计的,而且不能修改。这个时候,就要使用主题了。
主题,就是FrontPage针对页面中的背景、导航栏、横幅、按钮、各种边框自动进行设置,主题的内容有几十种,操作者可以根据自己的喜好选择,这样,就可以省去自己分别对这些页面元素的设置。
操作 为网页指定主题:打开主页,选择“格式/主题”,弹出主题窗口。在主题窗口的左边,列出了可以选择的主题,默认的是“直边”,点击这些主题,可以在右面窗口查看该主体的风格,如横幅是什么样、是什么样的颜色、标题的样式、超链接的显示样式,导航条的样式等等。另外,还可以设置是否需要背景图片,是否使用鲜艳的颜色等。选择“渐蓝”主题,单击确定,即可在网页窗口看到效果了。
主题都是事先设计好的,如果你有什么特殊要求,而FrontPage又不允许你在网页编辑时修改,这个时候,可以自定义主题。
操作 测试网页和网站:现在,我的主页基本完成了,要实地测验一下主页和整个网站的情况,看页面显示是否正常,各个超链接是否正确,设计上还有什么缺陷。打开要预览的主页,然后选择“文件/在浏览器中预览主页”,这样,我就看到了我精心设计的主页的真正模样了。测试的时候,要仔细看页面的各种元素,看是不是有不正确的地方。多改变一下浏览器的一些相关设置,如字体大小、全屏、缩放窗口。点击页面上的超链接,看是否能跳转到正确的页面。另外,最好将整个网站文件夹复制到其他机器上,看是否正确,特别是字体显示是否正确。
操作 查看网站报表情况:在视图窗口选择“报表”图标,打开报表窗口,在这个窗口,可以看到整个网站的一些统计数据。仔细查看这些数据,看看有没有什么问题,如无效的超链接等。如果一切没有问题,就可以发布了。
进一步学习的建议:网页的美化是一个经验和修养的问题,一方面多实践,另一方面多看优秀的网页。另外,网站的测试很重要,要摸索和掌握这方面的经验和技巧。
乐有五音,善用五音而成乐师。食有五味,善用五味而成庖厨。我用什么来建家?水木金火土。
文 字
通过模板建立的站点和网页只是一个结构雏形,现在来打开这些网页,添加各种元素,开始建设自己的家。我们首先从主页面(index.htm)开始,这可是家的大门。
操作 认识模板页面:打开主页文件,在“网页”视图窗口可以看到该主页的大致结构。页面分成了三个部分,上面的部分主要放置标题图片(图片元素为主),左面的部分主要放置链接到其他网页的目录(链接元素为主),而中间的大部分放置该主页的主要内容(文字元素为主)。
一般模板主页,通常由横幅、目录、正文等几个部分组成,只是数量和排列方式不一样罢了,或者多一些特殊的元素。当然,也有完全是有一些特殊元素构成的页面,如多重嵌套表格、组件等。但这些对于我这样的个人筑巢者,一般都用不到,用起来也麻烦费事,不如多用这一简单而简洁的页面。
操作 粘贴和输入文字:复制一段开场白的文字到剪贴板,然后在网页窗口中点击鼠标到要插入的位置,然后复制,就可以看到该文字在页面中出现了。也可以直接输入一段文字。将网页中不要的文字删除。
粘贴和输入这项操作很简单,和一般的文本编辑程序没有区别。实际上,很多的文字编辑操作都跟Word程序相似。包括输入、复制、粘贴、撤销、查找、样式、字体、颜色、间距、符号、边框、段落格式等。
尽管FrontPage的大多数文字修饰的操作方法都和Word相类似,但还是有很多细小的差别,不过这些差别并不会对使用者造成很大的困扰,但还是要注意一些差别。
在网页中,段落和换行的差别很大,一般段落和段落的间距很大,因此常常注意到要用换行(按“Shift+Enter”)。如果要在网页中显示换行符和段落符,则可以点击工具栏中的“全部显示”按钮(在第一排工具按钮的后面)。
进一步学习的建议:文字编辑的技巧性很强,而且操作的功能也很多,要熟练掌握必须要多练习,多用。一般使用Word排版熟练的人就很容易上手。
图 片
主页中的主要文字编辑好后,若需要在其中添加一幅小照和几幅示意图,让页面更传神。小照图片已经事先? 好,并用图像编辑工具进行适当的编辑,如将图片缩放到合适的大小,图片内容修饰,并根据图片的内容将图片保存为GIF格式。注意,如果图片颜色丰富,或者是风景、人物照片,则一般保存为JPEG格式。而示意图则在程序内置的剪贴画库中找。
操作 添加剪贴图片:在FrontPage中,内置了很多剪贴画,可以很方便地添加。在网页将鼠标移动到要添加的位置,然后“插入/图片/剪贴画”,打开剪贴画选择窗口,这里面的剪贴画非常丰富,并分类存放,查找非常方便。找到需要的剪贴画后,点击该剪贴画,在弹出的菜单中点击“插入图片”按钮。然后就可以在网页编辑窗口看到该图片了)。
操作 保存图片:现在保存网页,则程序提示将保存图片到站点所在的文件夹,选择图片保存的目录、文件名和文件格式(也可以按照默认设置),就将该图片保存到站点中了。建议将图片保存在站点文件夹中设立的专门保存图片的文件夹“image”。
图片添加后,可能要重新调整图片在网页中的位置,添加各种图片的效果和设置图片的属性。
操作 编辑图片:在网页编辑窗口中,选择图片,然后拖动图片边框可改变大小。拖动图片可改变在网页中的位置。另外,当选择图片后,在界面窗口的下面将显示图片编辑工具栏,包含各种图片编辑工具,如在图片中添加文字、调整位置。要注意的是,当调整了图片大小,程序将会以新的图片大小来保存图片。
操作 设置图片的属性:图片的属性一般指图片的一些内部性质,如源文件、格式参数、显示方式、对齐方式、边框和留白等等。鼠标右键点击图片,在弹出菜单中选择“图片属性”,即可在弹出的图片属性窗口中设置图片属性了。
操作 插入图片文件:先将要插入图片拷贝到站点文件夹中,选择菜单“插入/图片/来自文件”,在弹出窗口选择要插入的图片文件。然后,按照上面的方法调整和修改图片。
进一步学习的建议:深入了解各种网页图片格式,深入学习各种图片效果的编辑,掌握图片位置的调整,学习使用背景图片等。
超 链 接
网页的强大之处就在它的超链接,在浏览器中通过点击网页中的超链接,可以很方便地打开另外一个网页,或者是图片、文件、邮件地址。一个网页中的链接分成两个部分:链接的载体和链接的目标地址。
链接的载体就是在网页中文字和图片,凡是包含链接的文字和图片都称为超链接。
操作 设置文字的超链接:打开主页文件,用鼠标反白选择要超链接的文字——“欢迎光顾豆豆之家”,然后按鼠标右键。在弹出菜单中选择“超链接”。弹出超链接设置窗口,然后在列表中选择要超连接网页文件——“Photo.htm”,确定后,就可以看到超级链接已建立好了。注意,在网页编辑窗口,可以按住“Ctrl”键,点击超链接就可以打开超链接指向的网页。
操作 设置图片的超链接:鼠标右键点击要设置超链接的图片,在右键菜单中选择“超链接属性”,然后设置要链接的文件,也可以链接图片、E-Mail地址等。
操作 管理超链接:一个网站的超链接就像一张网一样,网住了网站的所有文件。在“视图”窗口中点击“超链接”,打开超链接的管理窗口,在这个窗口中,我们可以看到各个文件相互间的链接情况,例如,要看“photo.htm”文件中链接了哪些文件,又被哪些文件链接,可以在旁边的文件夹窗口中选择该文件,然后即可在链接示意窗口中查看了。也可以在超链接的示意窗口直接展开某个文件的上、下超链接。
进一步学习的建议:掌握各种超链接的设置、书签,学习使用导航条,学习使用图形热点。学习使用图片的热区。
规划网站
规划网站,其实就是网站的整体定位。说得时髦一点就有点像CI(corporate identity),意思是通过视觉来统一企业的形象。算了,还是不要这么复杂吧,我只是一个小家碧玉者。
1.确定主题和内容
主题和内容说白一点就是做网站的目的。看了不少个人网站,感觉就是:你抄我抄大家一起抄,黄沙淘尽不见金。我绝对不能这样,否则就成了网络垃圾了。经过冥思苦想,我决定做一个真正意义上的“个人”网站,做一个个人的家,一个在网络上宣传自己、结交朋友的“家”。
这样一来,主要内容就应该是介绍自己。个人简历?不,那样也太没有意思了。就当是做一个图文并茂的自我小传吧!应该有简历的一部分内容,但还应该多说说自己的兴趣爱好。此外,还少不了应该适当介绍一下和自己相关的东西啊!
内容确定了,那是不是应该给我的网站取个好名字了?前辈说:网站名称也是网站设计的一部分,而且是很关键的一个要素。很有道理,就像每个人都想取个好名字一样,家也应该有个好名字!
看看网上的名字,“海阔天空”有点虚,“XX的个人主页”有点俗。还是平实一点,就以我的名字叫“豆豆之家”吧。
2.网站结构
参考了一下其他的个人网站,再看看前辈长篇大论,我也稀里糊涂地明白了一些名词。
●网页——就是你看到浏览器内的一个页面,由图片和文字组成。通常有一级页面、二级页面之说。当你输入网址看到的第一个页面叫做首页,通常的名字是index.htm。
●网站——简单地说就是很多相关网页文件、图片文件? 他文件的组合。一个网站由相关网页组成一个关系网,通过页面上的链接在不同的网页之间跳转。
网站的结构和内容好像还有一些不成文的规定(当然都是前辈们唠叨的):
1. 网站一定要紧扣主题。
2. 设定一个交互式的栏目,例如留言薄。
3. 页面简洁,尽可能方便访问者的浏览和查询。
4. 网站的层次不要太复杂,小网站由3层网页构成是比较合适的。
5. 整体的页面设计风格要保持一致。
3.风格的选择
网站的风格,是不是有点像人的气质呀?“家”当然是有气质的,或者活泼、或者严肃、或者精美、或者朴素、或者粗犷豪放、或者小家碧玉等。我们应该根据自己的主题和内容给它选择一种合适的风格类型,以求内容和形式的完美结合,突出自己的特色和个性。可惜我不是学美术的,只是简单地知道一些冷暖色,看来还得在实践中多比较。
4.页面设计
网站是由一个个页面组成的,所以每个页面的制作就显得极其重要。说来说去又是一个美术设计方面的问题。我先找几张白纸勾画我的页面草图。
这是网络上常见的几种网页布局。虽然都是在排列目录、题目、正文,但真正要做到结构清晰、一目了然还得看具体制作的功夫。
当然可以选择更活泼一点的样式,只是需要自己去发挥了,或者到网络上去学习各种漂亮的页面设计。
选择制作工具
古人说得好:工欲善其事,必先利其器。网上建家总是要工具的,制作网页和网站的工具很多,甚至用记事本也可以(就像泥瓦匠起房子一样,是写网页的源代码)。但也有很多工具,可以直接将房子的框架搭好,剩下的工作就是确定要多少房间和如何布置房间。FrontPage2000就是这样的工具。
Dreamweaver3和FrontPage2000都是当前的主流站点和网页编辑器。Dreamweaver3更加专业,其代码的简洁、兼容性和整体功能都要比Frontpage2000强。但是FrontPage2000是微软的产品,是Office2000中的一个组件,和大家经常使用的Word有类似的界面和操作。用FrontPage编写网页就像用Word写文章一样简单,很适合于我这样业余建小“家”的人上手。
找来FrontPage2000的书籍一看,它的功能真是强大,至少是够我用了,而且操作真方便,会用Word就可快速学会FrontPage2000。
1.安装程序
FrontPage2000已经集成在Office2000中,成为Office家族中的一员。如果你购买了Office2000,在安装时你只须选择安装FrnotPage2000就行了。另外,也可以购买单独的FrontPage2000光盘进行安装。
FrnotPage2000的安装过程非常简单,我使用的是单独发行的FrnotPage2000光盘。双击光盘中setup.exe的文件,安装程序即开始自动安装。
首先出现一个用户信息窗口,要求你正确的输入用户名、单位和密码。然后单击“下一步”按钮,出现用户许可协议画面,选中“我接受《许可协议》中的条款”。单击“下一步”按钮,出现安装选择界面。单击上面的“开始安装”按钮,FrontPage2000就按照默认的方式进行安装,若单击下面的“自定义”按钮,可以选择安装的路径。
在安装过程中,系统会重新启动一次,然后才能继续安装,安装完毕,会出现一个站点服务器账号设置窗口,输入用户名和密码,安装全部结束。
2.启用
启动FrontPage2000后,简直就和Word是一个样子,上部是菜单栏、工具栏,像我这样熟悉Word的人就不用学习了;下面左边是视图区窗口,里面有六个按钮,代表六种不同的功能,它大大地方便了我们对站点和网页的制作和管理。占屏幕大部分空间的是我们的工作区,所有的页面编辑都在其中完成。
模板建站
FrontPage可以适合不同个人和组织的需要,自动建立网“巢”——站点。
操作 打开站点建立窗口:点击“文件/新建/站点”,在打开的窗口中可以看到自动建立站点的各种向导和模板。
向导特点:选择向导程序列出的条件元素,创建某类有个性的站点和网页
模板特点:直接采用已经设计好的条件元素,创建某类统一的站点和网页
在FrontPage中,使用向导创建的一般是比较复杂的商业和大型站点,不适合个人在网上安家筑巢。我的网上小家就使用模板建立站点就够了。
操作 选择模板:在新建站点窗口,选择“个人站点”模板。在右面的选项栏中设置站点文件的存放地址。建议新建一个有意义的存放地址,如“C:\My House”,点击“确定”。
操作 查看站点结构:点击程序界面的“视图”窗口中的“导航”按钮,可以看到建立的站点由哪些文件组成以及站点的结构。
我们看到,个人站点模板的结构是主页下面有三个子页,分别是“兴趣”、“相册”、“喜好站点”,而在文件夹列表栏中列出了站点中的文件,其中“image”文件夹专门存放图片,另外还有五个HTML文件,其中的myfav3.html是备用的子网页文件。其他四个HTML文件分别对应主页和三个子网页。
操作 查看站点中的网页:在导航视图窗口的网站结构示意图中点击某个网页结构图标,如“主页”结构图标,可以打开该网页,我们就可以在窗口中看到这个预先定制的网页大概结构。点击文件夹列表中的文件也可打开。
注意,打开网页后,我们可以看到导航视图窗口切换到了网页视图窗口。
操作 保存和打开站点:保存站点的工作很简单,当关闭FrontPage的时候,按照提示就可以保存站点。实际上,保存站点主要就是保存网页,因此在修改编辑网页的时候,要时刻注意到保存。保存的方法和在文字编辑程序中保存文件类似。打开站点要复杂些,选择菜单“文件/打开站点”,找到站点所在的目录,找到站点文件夹(是一个带有小圆球的文件夹图标,是FrontPage建立的站点管理文件 蚩?纯伞?BR>
操作 删除站点:删除站点很简单,直接在Windows中删除站点所在的文件夹即可。也可在程序中删除。
进一步学习的建议:熟练使用各种视图和窗口,使用向导创建复杂的商业和项目站点。使用导入向导,将别人已经建立的站点导入,成为自己可以利用的站点。
模板建网页
目前,我的网“巢”还只有一个主页,三个子页,我想再添加一个“我的游历”的子页。
使用模板创建站点,站点中有几个网页都是事先设计好的,大多数情况下,都需要添加网页,或者用新设计的网页替换掉事先设计的网页。建立新的网页,使用向导和模板是最方便不过的了,因为FrontPage提供的网页模板非常丰富,可以满足大多数情况的需要。
操作 打开网页模板窗口:在视图窗口中点击“网页”按钮,切换到网页视图。选择菜单“文件/新建/网页”,打开新建网页的模板选择窗口。注意,不同的视图窗口,使用“文件/新建/网页”菜单命令的结果不同,后面我们将会提到。
在网页模板选择窗口中,有三个标签页,在“常规”标签页中有三十多个模板供选择,一般个人网“巢”中的网页使用“常规”标签页中的模板就足够了。根据我新建网页的内容和预想的设计,我选择了“带有标题的宽行正文”模板。
操作 选择模板:点击“带有标题的宽行正文”模板项,然后点击“确定”,程序即开始按模板新建网页。
回到主窗口,就可以看到一个有大概结构的网页,这个网页以很清晰的方式提示我在哪里放标题,哪里放正文,网页段落结构也排得很好,我只要按照提示添加内容就可以了。
新建立的网页还没有保存在硬盘中,由于这个网页是要添加到刚才新建立的网站中去的,因此,我们将它保存到网站文件所在的目录(C:\My House)中。
操作 保存新建的网页文件:选择“文件/保存文件”,在弹出的保存文件窗口中选择“C:\My House”目录,并命名文件名为“Mytravel.htm”。点击“确定”。
操作 预览网页:建立了网页后,就可以通过浏览器来观看该网页了。在FrontPage中可以直接调用系统集成的IE浏览器来查看。方法是在网页视图窗口打开某网页,然后选择“文件/预览网页”即可。我们在编辑修改的时候,大都是通过FrontPage内置的预览功能来查看网页的制作效果,方法是在网页视图的主窗口下面选择“预览”标签项即可。
操作 查看文件列表:点击“视图”窗口中的“文件”标签按钮,在主窗口中列出了站点文件夹和所选文件夹中的文件。在文件窗口中,我们看到刚才保存的新网页文件已经位于其中,并可以看到该文件的一些属性。双击这些文件时可以在网页视图窗口中打开编辑。
网页标题就是网页在浏览的时候,显示在浏览器窗口左上角的标题文字。这个标题可以让访问者了解该页的内容。
操作 修改网页主标题:打开“文件”视图窗口,在文件列表窗口找到Mytravel.htm文件,点击“这是主标题”文字,然后输入“我的游历”。另外,可以将“主页”文件的标题改为“豆豆之家”。注意,主页的标题也就是站点的标题。
进一步学习的建议:了解各种网页模板的结构和适用方向。学习使用向导创建有复杂表单的网页。学习创建带框架和样式表的网页。
修改站点和网页
基础的站点和网页建立好后,我就需要在这个基础上按照我的梦想修改了。首先,我要在第二级网页中增加一个“我的游历”网页,其次,要在“我的兴趣”二级网页下增加三个三级网页。
操作 将已有网页添加到站点:在视图窗口点击“导航”按钮,切换到导航视图。在文件夹窗口中将Mytravel.htm文件拖动到“导航”窗口,仔细选择停放的位置,让示意图标和其他二级图标在一个线上,然后就看到Mytravel.htm文件成为站点的一部分了。
注意,在站点中添加了网页后,站点中的某些网页将自动发生改变,当Mytravel.htm文件(“我的游历”网页)成为index.htm(主页)的下级网页后,我们在网页视图窗口查看主页页面的时候,会发现该页面已经将“我的游历”这样的字样添加进去了。
操作 添加新网页到站点:切换到导航视图,选择“兴趣”网页示意图标,然后选择“文件/新建/网页”(或者工具栏中的“新建”按钮),在“兴趣”网页图标下就看到一个新的网页图标,这个网页是属于“兴趣”网页下的子网页,但是一个虚拟的网页,并没有对应的文件。双击新网页的示意图标,即可在站点文件夹中生成一个简单的模板网页。重复以上操作三次,就可在站点中添加三个网页。
操作 在站点中打开和关闭网页:打开站点的网页非常简单,在导航视图窗口或者文件视图窗口双击要打开的网页即可。打开网页时程序将自动切换到网页视图窗口。不过注意关闭站点中暂时不编辑的网页,以使系统节约资源。
操作 修改网页的文件名:新建的网页我们可以改成自己需要的文件名和主标题。这个工作既可以在“文件”视图窗口中进行,也可以在“导航”视图窗口中进行。
操作 站点的调整和删除:站点的调整很简单,直接在导航视图窗口中拖动要调整的网页就可以了,删除站点的网页也很简单,选择网页文件或者网页示意图标后按“Del”键即可。修改后的站点结构如图10所示。我“家”的雏形已经基本建立起来了。
进一步学习的建议:设置网页的高级属性,自定义网页模板,进一步修改站点结构,建立复杂的网站,站点和文件夹的管理和相互转换。
竹篱围青瓦,芍药伴鹤眠。苔痕上阶绿,簌影落窗前。咦,谁欤我家比美?——梦之家
页面修整
通过模板建立的网页,常常预先置放了些标题栏、目录栏(一般叫导航栏),导航栏都是用很多元素组成的,结构上稍稍复杂一些。一般情况下我们不必要对这些东西进行低层次的修改,FrontPage也不允许操作者修改,但在某些项目上,我们还是可以根据自己页面的要求来修改。
操作 修改页面的主标题:在主页(index.htm)的页面上部,模板预置了一个名为“主页”的横幅标题,这个横幅标题和整个主页格格不入。点击横幅,按“Del”键删除,然后在同样位置插入一个事先准备好的横幅图片为主页标题。
操作 修改导航条的链接:在主页的左边,有一个导航条(目录栏),在建立站点的时候,导航条就建立了几个网站的链接。这些链接不能在网页窗口中修改,只能在站点管理的“导航”视图窗口中修改。但可以在网页视图窗口中给导航条添加链接。在导航条中点击鼠标,然后选择输入文字“给我写信”,设置文字的超链接,这里的链接地址设置的是我的邮箱地址“mailto:豆豆@yesky.com”。
操作 删除页面元素:在主页的右下,程序放置了一个LOG图片,这个图片和我的主页不符,选择该图片,按“Del”删除。
操作 给页面添加水平线:水平线对于规划页面有很大的作用,可以让页面清楚,简洁。在要插入水平线的位置点击鼠标,选择“插入/水平线”,水平线就出现了。注意,一般模板网页的水平线由程序自动设置外观属性。而其他情况下,将由操作者自己设置水平线的颜色,粗细等。
进一步学习的建议:页面长期编辑后,可能会留下垃圾(无效代码),如果想做得更专业一点,可以在HTML标签窗口修改源代码,或者使用其他网页制作工具休整。
表格
表格实际和文字、图片一样,是一个网页的基本元素,但表格在网页中,更大的用途是来规划页面。实际上,在网页编辑中,通过空格、段落、缩进等是很不容易规划好一个有很多元素的页面的,特别是图文混排的页面。
在FrontPage中添加常用的数据表格,和在Word中添加表格一样的方便,直接使用插入表格命令,然后填写数据就可以了。甚至还可以将Word文件中的? 粘贴进来。
操作 添加一个简单表格:在要插入表格的位置点击鼠标,选择“表格/插入/表格”,在弹出的对话框中设置表格的属性,然后选择表格的行数——2,选择表格的列数——1,然后指定表格的宽度,可以设置表格的宽度占网页宽度的百分比,或者直接设置表格的绝对宽度——像素。其他设置表格边框线的宽度为1,设置单元格间距为2。确定即可。
操作 在表格中添入文字:在表格中输入文字和在普通编辑页面中输入文字没有什么区别,另外,在生成主页模板的时候,程序在网页中添加了一个高级控件,可以自动显示网页的更新时间。将这个控件拖入到表格中。这样,一个显示网页制作者的表格就制作好了。
操作 设置表格的属性:表格的属性比较复杂,分成单元格属性和表格属性。选择表格,然后选择菜单“表格/属性/表格”,在弹出的窗口中可以设置表格的边框、背景、颜色等等。特别要说明的是表格的浮动,表格的浮动是设置整个表格的对齐方式,而一般的对齐方式是设置表格内的元素的对齐。
操作 图文混排:在需要的位置加入一个只有一个单元格的表格,并设置好其他属性。在表格中添加图片,并设置好表格的大小。再设置表格为“左浮动”,调整文字,让文字在表格的右边。这样,图文相配的混排就得到了。
进一步学习的建议:表格的操作比较复杂,需要反复的练习,学习如何用表格构造特殊页面,如何实现复杂的图文混排等等。
主题
经过以上过程,我主页制作也基本完成了。但页面的背景图、导航栏、颜色选择,边框等都不太令我满意,而这些都是模板自动设计的,而且不能修改。这个时候,就要使用主题了。
主题,就是FrontPage针对页面中的背景、导航栏、横幅、按钮、各种边框自动进行设置,主题的内容有几十种,操作者可以根据自己的喜好选择,这样,就可以省去自己分别对这些页面元素的设置。
操作 为网页指定主题:打开主页,选择“格式/主题”,弹出主题窗口。在主题窗口的左边,列出了可以选择的主题,默认的是“直边”,点击这些主题,可以在右面窗口查看该主体的风格,如横幅是什么样、是什么样的颜色、标题的样式、超链接的显示样式,导航条的样式等等。另外,还可以设置是否需要背景图片,是否使用鲜艳的颜色等。选择“渐蓝”主题,单击确定,即可在网页窗口看到效果了。
主题都是事先设计好的,如果你有什么特殊要求,而FrontPage又不允许你在网页编辑时修改,这个时候,可以自定义主题。
操作 测试网页和网站:现在,我的主页基本完成了,要实地测验一下主页和整个网站的情况,看页面显示是否正常,各个超链接是否正确,设计上还有什么缺陷。打开要预览的主页,然后选择“文件/在浏览器中预览主页”,这样,我就看到了我精心设计的主页的真正模样了。测试的时候,要仔细看页面的各种元素,看是不是有不正确的地方。多改变一下浏览器的一些相关设置,如字体大小、全屏、缩放窗口。点击页面上的超链接,看是否能跳转到正确的页面。另外,最好将整个网站文件夹复制到其他机器上,看是否正确,特别是字体显示是否正确。
操作 查看网站报表情况:在视图窗口选择“报表”图标,打开报表窗口,在这个窗口,可以看到整个网站的一些统计数据。仔细查看这些数据,看看有没有什么问题,如无效的超链接等。如果一切没有问题,就可以发布了。
进一步学习的建议:网页的美化是一个经验和修养的问题,一方面多实践,另一方面多看优秀的网页。另外,网站的测试很重要,要摸索和掌握这方面的经验和技巧。
乐有五音,善用五音而成乐师。食有五味,善用五味而成庖厨。我用什么来建家?水木金火土。
文 字
通过模板建立的站点和网页只是一个结构雏形,现在来打开这些网页,添加各种元素,开始建设自己的家。我们首先从主页面(index.htm)开始,这可是家的大门。
操作 认识模板页面:打开主页文件,在“网页”视图窗口可以看到该主页的大致结构。页面分成了三个部分,上面的部分主要放置标题图片(图片元素为主),左面的部分主要放置链接到其他网页的目录(链接元素为主),而中间的大部分放置该主页的主要内容(文字元素为主)。
一般模板主页,通常由横幅、目录、正文等几个部分组成,只是数量和排列方式不一样罢了,或者多一些特殊的元素。当然,也有完全是有一些特殊元素构成的页面,如多重嵌套表格、组件等。但这些对于我这样的个人筑巢者,一般都用不到,用起来也麻烦费事,不如多用这一简单而简洁的页面。
操作 粘贴和输入文字:复制一段开场白的文字到剪贴板,然后在网页窗口中点击鼠标到要插入的位置,然后复制,就可以看到该文字在页面中出现了。也可以直接输入一段文字。将网页中不要的文字删除。
粘贴和输入这项操作很简单,和一般的文本编辑程序没有区别。实际上,很多的文字编辑操作都跟Word程序相似。包括输入、复制、粘贴、撤销、查找、样式、字体、颜色、间距、符号、边框、段落格式等。
尽管FrontPage的大多数文字修饰的操作方法都和Word相类似,但还是有很多细小的差别,不过这些差别并不会对使用者造成很大的困扰,但还是要注意一些差别。
在网页中,段落和换行的差别很大,一般段落和段落的间距很大,因此常常注意到要用换行(按“Shift+Enter”)。如果要在网页中显示换行符和段落符,则可以点击工具栏中的“全部显示”按钮(在第一排工具按钮的后面)。
进一步学习的建议:文字编辑的技巧性很强,而且操作的功能也很多,要熟练掌握必须要多练习,多用。一般使用Word排版熟练的人就很容易上手。
图 片
主页中的主要文字编辑好后,若需要在其中添加一幅小照和几幅示意图,让页面更传神。小照图片已经事先? 好,并用图像编辑工具进行适当的编辑,如将图片缩放到合适的大小,图片内容修饰,并根据图片的内容将图片保存为GIF格式。注意,如果图片颜色丰富,或者是风景、人物照片,则一般保存为JPEG格式。而示意图则在程序内置的剪贴画库中找。
操作 添加剪贴图片:在FrontPage中,内置了很多剪贴画,可以很方便地添加。在网页将鼠标移动到要添加的位置,然后“插入/图片/剪贴画”,打开剪贴画选择窗口,这里面的剪贴画非常丰富,并分类存放,查找非常方便。找到需要的剪贴画后,点击该剪贴画,在弹出的菜单中点击“插入图片”按钮。然后就可以在网页编辑窗口看到该图片了)。
操作 保存图片:现在保存网页,则程序提示将保存图片到站点所在的文件夹,选择图片保存的目录、文件名和文件格式(也可以按照默认设置),就将该图片保存到站点中了。建议将图片保存在站点文件夹中设立的专门保存图片的文件夹“image”。
图片添加后,可能要重新调整图片在网页中的位置,添加各种图片的效果和设置图片的属性。
操作 编辑图片:在网页编辑窗口中,选择图片,然后拖动图片边框可改变大小。拖动图片可改变在网页中的位置。另外,当选择图片后,在界面窗口的下面将显示图片编辑工具栏,包含各种图片编辑工具,如在图片中添加文字、调整位置。要注意的是,当调整了图片大小,程序将会以新的图片大小来保存图片。
操作 设置图片的属性:图片的属性一般指图片的一些内部性质,如源文件、格式参数、显示方式、对齐方式、边框和留白等等。鼠标右键点击图片,在弹出菜单中选择“图片属性”,即可在弹出的图片属性窗口中设置图片属性了。
操作 插入图片文件:先将要插入图片拷贝到站点文件夹中,选择菜单“插入/图片/来自文件”,在弹出窗口选择要插入的图片文件。然后,按照上面的方法调整和修改图片。
进一步学习的建议:深入了解各种网页图片格式,深入学习各种图片效果的编辑,掌握图片位置的调整,学习使用背景图片等。
超 链 接
网页的强大之处就在它的超链接,在浏览器中通过点击网页中的超链接,可以很方便地打开另外一个网页,或者是图片、文件、邮件地址。一个网页中的链接分成两个部分:链接的载体和链接的目标地址。
链接的载体就是在网页中文字和图片,凡是包含链接的文字和图片都称为超链接。
操作 设置文字的超链接:打开主页文件,用鼠标反白选择要超链接的文字——“欢迎光顾豆豆之家”,然后按鼠标右键。在弹出菜单中选择“超链接”。弹出超链接设置窗口,然后在列表中选择要超连接网页文件——“Photo.htm”,确定后,就可以看到超级链接已建立好了。注意,在网页编辑窗口,可以按住“Ctrl”键,点击超链接就可以打开超链接指向的网页。
操作 设置图片的超链接:鼠标右键点击要设置超链接的图片,在右键菜单中选择“超链接属性”,然后设置要链接的文件,也可以链接图片、E-Mail地址等。
操作 管理超链接:一个网站的超链接就像一张网一样,网住了网站的所有文件。在“视图”窗口中点击“超链接”,打开超链接的管理窗口,在这个窗口中,我们可以看到各个文件相互间的链接情况,例如,要看“photo.htm”文件中链接了哪些文件,又被哪些文件链接,可以在旁边的文件夹窗口中选择该文件,然后即可在链接示意窗口中查看了。也可以在超链接的示意窗口直接展开某个文件的上、下超链接。
进一步学习的建议:掌握各种超链接的设置、书签,学习使用导航条,学习使用图形热点。学习使用图片的热区。
规划网站
规划网站,其实就是网站的整体定位。说得时髦一点就有点像CI(corporate identity),意思是通过视觉来统一企业的形象。算了,还是不要这么复杂吧,我只是一个小家碧玉者。
1.确定主题和内容
主题和内容说白一点就是做网站的目的。看了不少个人网站,感觉就是:你抄我抄大家一起抄,黄沙淘尽不见金。我绝对不能这样,否则就成了网络垃圾了。经过冥思苦想,我决定做一个真正意义上的“个人”网站,做一个个人的家,一个在网络上宣传自己、结交朋友的“家”。
这样一来,主要内容就应该是介绍自己。个人简历?不,那样也太没有意思了。就当是做一个图文并茂的自我小传吧!应该有简历的一部分内容,但还应该多说说自己的兴趣爱好。此外,还少不了应该适当介绍一下和自己相关的东西啊!
内容确定了,那是不是应该给我的网站取个好名字了?前辈说:网站名称也是网站设计的一部分,而且是很关键的一个要素。很有道理,就像每个人都想取个好名字一样,家也应该有个好名字!
看看网上的名字,“海阔天空”有点虚,“XX的个人主页”有点俗。还是平实一点,就以我的名字叫“豆豆之家”吧。
2.网站结构
参考了一下其他的个人网站,再看看前辈长篇大论,我也稀里糊涂地明白了一些名词。
●网页——就是你看到浏览器内的一个页面,由图片和文字组成。通常有一级页面、二级页面之说。当你输入网址看到的第一个页面叫做首页,通常的名字是index.htm。
●网站——简单地说就是很多相关网页文件、图片文件? 他文件的组合。一个网站由相关网页组成一个关系网,通过页面上的链接在不同的网页之间跳转。
网站的结构和内容好像还有一些不成文的规定(当然都是前辈们唠叨的):
1. 网站一定要紧扣主题。
2. 设定一个交互式的栏目,例如留言薄。
3. 页面简洁,尽可能方便访问者的浏览和查询。
4. 网站的层次不要太复杂,小网站由3层网页构成是比较合适的。
5. 整体的页面设计风格要保持一致。
3.风格的选择
网站的风格,是不是有点像人的气质呀?“家”当然是有气质的,或者活泼、或者严肃、或者精美、或者朴素、或者粗犷豪放、或者小家碧玉等。我们应该根据自己的主题和内容给它选择一种合适的风格类型,以求内容和形式的完美结合,突出自己的特色和个性。可惜我不是学美术的,只是简单地知道一些冷暖色,看来还得在实践中多比较。
4.页面设计
网站是由一个个页面组成的,所以每个页面的制作就显得极其重要。说来说去又是一个美术设计方面的问题。我先找几张白纸勾画我的页面草图。
这是网络上常见的几种网页布局。虽然都是在排列目录、题目、正文,但真正要做到结构清晰、一目了然还得看具体制作的功夫。
当然可以选择更活泼一点的样式,只是需要自己去发挥了,或者到网络上去学习各种漂亮的页面设计。
选择制作工具
古人说得好:工欲善其事,必先利其器。网上建家总是要工具的,制作网页和网站的工具很多,甚至用记事本也可以(就像泥瓦匠起房子一样,是写网页的源代码)。但也有很多工具,可以直接将房子的框架搭好,剩下的工作就是确定要多少房间和如何布置房间。FrontPage2000就是这样的工具。
Dreamweaver3和FrontPage2000都是当前的主流站点和网页编辑器。Dreamweaver3更加专业,其代码的简洁、兼容性和整体功能都要比Frontpage2000强。但是FrontPage2000是微软的产品,是Office2000中的一个组件,和大家经常使用的Word有类似的界面和操作。用FrontPage编写网页就像用Word写文章一样简单,很适合于我这样业余建小“家”的人上手。
找来FrontPage2000的书籍一看,它的功能真是强大,至少是够我用了,而且操作真方便,会用Word就可快速学会FrontPage2000。
1.安装程序
FrontPage2000已经集成在Office2000中,成为Office家族中的一员。如果你购买了Office2000,在安装时你只须选择安装FrnotPage2000就行了。另外,也可以购买单独的FrontPage2000光盘进行安装。
FrnotPage2000的安装过程非常简单,我使用的是单独发行的FrnotPage2000光盘。双击光盘中setup.exe的文件,安装程序即开始自动安装。
首先出现一个用户信息窗口,要求你正确的输入用户名、单位和密码。然后单击“下一步”按钮,出现用户许可协议画面,选中“我接受《许可协议》中的条款”。单击“下一步”按钮,出现安装选择界面。单击上面的“开始安装”按钮,FrontPage2000就按照默认的方式进行安装,若单击下面的“自定义”按钮,可以选择安装的路径。
在安装过程中,系统会重新启动一次,然后才能继续安装,安装完毕,会出现一个站点服务器账号设置窗口,输入用户名和密码,安装全部结束。
2.启用
启动FrontPage2000后,简直就和Word是一个样子,上部是菜单栏、工具栏,像我这样熟悉Word的人就不用学习了;下面左边是视图区窗口,里面有六个按钮,代表六种不同的功能,它大大地方便了我们对站点和网页的制作和管理。占屏幕大部分空间的是我们的工作区,所有的页面编辑都在其中完成。