| 网站首页 | Photoshop资源 | Photoshop学院 | Photoshop展示 | 设计素材 | 设计学院 | 留言本 | 返回总部 | 
您现在的位置: Photoshop资源站 >> 设计学院 >> 网站设计 >> FrontPage >> 正文
  FrontPage 2003教程 FrontPage2003建站全攻略(一)         ★★★ 【字体:
FrontPage 2003教程 FrontPage2003建站全攻略(一)
作者:佚名    教程来源:不详    点击数:    更新时间:2007-12-3    

  在浩瀚的Internet建设自己的家园,这是我们的需求,无论是个人、还是组织。

  在创建网站之前我们事先在我们的硬盘中建立一个存放站点所有文件的目录。

  模板建站

  FrontPage可以适合不同个人和组织的需要,自动建立网“巢”——站点。

  操作 打开站点建立窗口:点击“文件-->>新建”,在打开的窗口中可以看到自动建立站点的各种向导和模板。



  向导特点:选择向导程序列出的条件元素,创建某类有个性的站点和网页

  模板特点:直接采用已经设计好的条件元素,创建某类统一的站点和网页

  在FrontPage中,使用向导创建的一般是比较复杂的商业和大型站点,不适合个人在网上安家筑巢。我的网上小家就使用模板建立站点就够了。

  操作 选择模板:在新建站点窗口,选择“个人站点”模板。在右面的选项栏中设置站点文件的存放地址。建议新建一个有意义的存放地址,如“e:\webcom”,点击“确定”。

  操作 查看站点结构:点击程序界面的“视图”窗口中的“导航”按钮,可以看到建立的站点由哪些文件组成以及站点的结构。



  我们看到,个人站点模板的结构是主页下面有五个子页,分别是“自序”、“兴趣”、“收藏夹”、“图片库”、“反馈”,而在文件夹列表栏中列出了站点中的文件,其中“image”文件夹专门存放图片,另外还有五个HTML文件,其中的myfav3.html是备用的子网页文件。其他四个HTML文件分别对应主页和三个子网页。

  操作 查看站点中的网页:在导航视图窗口的网站结构示意图中点击某个网页结构图标,如“主页”结构图标,可以打开该网页,我们就可以在窗口中看到这个预先定制的网页大概结构。点击文件夹列表中的文件也可打开。
  注意,打开网页后,我们可以看到导航视图窗口切换到了网页视图窗口。

  操作 保存和打开站点:保存站点的工作很简单,当关闭FrontPage的时候,按照提示就可以保存站点。实际上,保存站点主要就是保存网页,因此在修改编辑网页的时候,要时刻注意到保存。保存的方法和在文字编辑程序中保存文件类似。打开站点要复杂些,选择菜单“文件/打开站点”,找到站点所在的目录,找到站点文件夹(是一个带有小圆球的文件夹图标,是FrontPage建立的站点管理文件

  操作 删除站点:删除站点很简单,直接在Windows中删除站点所在的文件夹即可。也可在程序中删除。

  进一步学习的建议:熟练使用各种视图和窗口,使用向导创建复杂的商业和项目站点。使用导入向导,将别人已经建立的站点导入,成为自己可以利用的站点。

  模板建网页

  目前,我的网“巢”还只有一个主页,三个子页,我想再添加一个“我的简历”的子页。

  使用模板创建站点,站点中有几个网页都是事先设计好的,大多数情况下,都需要添加网页,或者用新设计的网页替换掉事先设计的网页。建立新的网页,使用向导和模板是最方便不过的了,因为FrontPage提供的网页模板非常丰富,可以满足大多数情况的需要。

  操作 打开网页模板窗口:在视图窗口中点击“网页”按钮,切换到网页视图。选择菜单“文件/新建/网页”,打开新建网页的模板选择窗口。注意,不同的视图窗口,使用“文件/新建/网页”菜单命令的结果不同,后面我们将会提到。
  在网页模板选择窗口中,有三个标签页,在“常规”标签页中有三十多个模板供选择,一般个人网“巢”中的网页使用“常规”标签页中的模板就足够了。根据我新建网页的内容和预想的设计,我选择了“带有标题的宽行正文”模板。
  操作 选择模板:点击“带有标题的宽行正文”模板项,然后点击“确定”,程序即开始按模板新建网页。
  回到主窗口,就可以看到一个有大概结构的网页,这个网页以很清晰的方式提示我在哪里放标题,哪里放正文,网页段落结构也排得很好,我只要按照提示添加内容就可以了。

  新建立的网页还没有保存在硬盘中,由于这个网页是要添加到刚才新建立的网站中去的,因此,我们将它保存到网站文件所在的目录(e:\webjxcom)中。

  操作 保存新建的网页文件:选择“文件/保存文件”,在弹出的保存文件窗口中选择“e:\webjxcom”目录,并命名文件名为“Mytravel.htm”。点击“确定”。

  操作 预览网页:建立了网页后,就可以通过浏览器来观看该网页了。在FrontPage中可以直接调用系统集成的IE浏览器来查看。方法是在网页视图窗口打开某网页,然后选择“文件/预览网页”即可。我们在编辑修改的时候,大都是通过FrontPage内置的预览功能来查看网页的制作效果,方法是在网页视图的主窗口下面选择“预览”标签项即可。

  操作 查看文件列表:点击“视图”窗口中的“文件”标签按钮,在主窗口中列出了站点文件夹和所选文件夹中的文件。在文件窗口中,我们看到刚才保存的新网页文件已经位于其中,并可以看到该文件的一些属性。双击这些文件时可以在网页视图窗口中打开编辑。

  网页标题就是网页在浏览的时候,显示在浏览器窗口左上角的标题文字。这个标题可以让访问者了解该页的内容。
  操作 修改网页主标题:打开“文件”视图窗口,在文件列表窗口找到Mytravel.htm文件,点击“这是主标题”文字,然后输入“我的游历”。另外,可以将“主页”文件的标题改为“豆豆之家”。注意,主页的标题也就是站点的标题。

  进一步学习的建议:了解各种网页模板的结构和适用方向。学习使用向导创建有复杂表单的网页。学习创建带框架和样式表的网页。

  修改站点和网页

  基础的站点和网页建立好后,我就需要在这个基础上按照我的梦想修改了。首先,我要在第二级网页中增加一个“我的简历”网页,其次,要在“我的兴趣”二级网页下增加三个三级网页。

  操作 将已有网页添加到站点:在视图窗口点击“导航”按钮,切换到导航视图。在文件夹窗口中将Mytravel.htm文件拖动到“导航”窗口,仔细选择停放的位置,让示意图标和其他二级图标在一个线上,然后就看到Mytravel.htm文件成为站点的一部分了。

  注意,在站点中添加了网页后,站点中的某些网页将自动发生改变,当Mytravel.htm文件(“我的游历”网页)成为index.htm(主页)的下级网页后,我们在网页视图窗口查看主页页面的时候,会发现该页面已经将“我的游历”这样的字样添加进去了。

  操作 添加新网页到站点:切换到导航视图,选择“兴趣”网页示意图标,然后选择“文件/新建/网页”(或者工具栏中的“新建”按钮),在“兴趣”网页图标下就看到一个新的网页图标,这个网页是属于“兴趣”网页下的子网页,但是一个虚拟的网页,并没有对应的文件。双击新网页的示意图标,即可在站点文件夹中生成一个简单的模板网页。重复以上操作三次,就可在站点中添加三个网页。

  操作 在站点中打开和关闭网页:打开站点的网页非常简单,在导航视图窗口或者文件视图窗口双击要打开的网页即可。打开网页时程序将自动切换到网页视图窗口。不过注意关闭站点中暂时不编辑的网页,以使系统节约资源。
  操作 修改网页的文件名:新建的网页我们可以改成自己需要的文件名和主标题。这个工作既可以在“文件”视图窗口中进行,也可以在“导航”视图窗口中进行。

  操作 站点的调整和删除:站点的调整很简单,直接在导航视图窗口中拖动要调整的网页就可以了,删除站点的网页也很简单,选择网页文件或者网页示意图标后按“Del”键即可。修改后的站点结构如图10所示。我“家”的雏形已经基本建立起来了。

  进一步学习的建议:设置网页的高级属性,自定义网页模板,进一步修改站点结构,建立复杂的网站,站点和文件夹的管理和相互转换。

  竹篱围青瓦,芍药伴鹤眠。苔痕上阶绿,簌影落窗前。咦,谁与我家比美?

  页面修整

  通过模板建立的网页,常常预先置放了些标题栏、目录栏(一般叫导航栏),导航栏都是用很多元素组成的,结构上稍稍复杂一些。一般情况下我们不必要对这些东西进行低层次的修改,FrontPage也不允许操作者修改,但在某些项目上,我们还是可以根据自己页面的要求来修改。

  操作 修改页面的主标题:在主页(index.htm)的页面上部,模板预置了一个名为“主页”的横幅标题,这个横幅标题和整个主页格格不入。点击横幅,按“Del”键删除,然后在同样位置插入一个事先准备好的横幅图片为主页标题。

  操作 修改导航条的链接:在主页的左边,有一个导航条(目录栏),在建立站点的时候,导航条就建立了几个网站的链接。这些链接不能在网页窗口中修改,只能在站点管理的“导航”视图窗口中修改。但可以在网页视图窗口中给导航条添加链接。在导航条中点击鼠标,然后选择输入文字“给我写信”,设置文字的超链接,这里的链接地址设置的是我的邮箱地址“mailto:web@webjx.com”。

  操作 删除页面元素:在主页的右下,程序放置了一个LOG图片,这个图片和我的主页不符,选择该图片,按“Del”删除。

  操作 给页面添加水平线:水平线对于规划页面有很大的作用,可以让页面清楚,简洁。在要插入水平线的位置点击鼠标,选择“插入/水平线”,水平线就出现了。注意,一般模板网页的水平线由程序自动设置外观属性。而其他情况下,将由操作者自己设置水平线的颜色,粗细等。

  进一步学习的建议:页面长期编辑后,可能会留下垃圾(无效代码),如果想做得更专业一点,可以在HTML标签窗口修改源代码,或者使用其他网页制作工具休整。

  表格

  表格实际和文字、图片一样,是一个网页的基本元素,但表格在网页中,更大的用途是来规划页面。实际上,在网页编辑中,通过空格、段落、缩进等是很不容易规划好一个有很多元素的页面的,特别是图文混排的页面。
  在FrontPage中添加常用的数据表格,和在Word中添加表格一样的方便,直接使用插入表格命令,然后填写数据就可以了。甚至还可以将Word文件中的? 粘贴进来。

  操作 添加一个简单表格:在要插入表格的位置点击鼠标,选择“表格/插入/表格”,在弹出的对话框中设置表格的属性,然后选择表格的行数——2,选择表格的列数——1,然后指定表格的宽度,可以设置表格的宽度占网页宽度的百分比,或者直接设置表格的绝对宽度——像素。其他设置表格边框线的宽度为1,设置单元格间距为2。确定即可。

  操作 在表格中添入文字:在表格中输入文字和在普通编辑页面中输入文字没有什么区别,另外,在生成主页模板的时候,程序在网页中添加了一个高级控件,可以自动显示网页的更新时间。将这个控件拖入到表格中。这样,一个显示网页制作者的表格就制作好了。

  操作 设置表格的属性:表格的属性比较复杂,分成单元格属性和表格属性。选择表格,然后选择菜单“表格/属性/表格”,在弹出的窗口中可以设置表格的边框、背景、颜色等等。特别要说明的是表格的浮动,表格的浮动是设置整个表格的对齐方式,而一般的对齐方式是设置表格内的元素的对齐。

  操作 图文混排:在需要的位置加入一个只有一个单元格的表格,并设置好其他属性。在表格中添加图片,并设置好表格的大小。再设置表格为“左浮动”,调整文字,让文字在表格的右边。这样,图文相配的混排就得到了。

  进一步学习的建议:表格的操作比较复杂,需要反复的练习,学习如何用表格构造特殊页面,如何实现复杂的图文混排等等。

教程录入:onegreen    责任编辑:onegreen 
  • 上一篇教程:

  • 下一篇教程:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关文章
    frontpage2007 教程 引人注目的SharePo
    FrontPage 2003教程 用FrontPage2003轻
    FrontPage 2003教程 新建网站
    frontpage 2003教程 新建一个空白网页
    FrontPage 2003教程 FrontPage2003建站
    FrontPage 2003教程 用FrontPage2003发
    frontpage 2003教程 创建一个超链接
    FrontPage 2003教程 利用FrontPage 200
    FrontPage 2003教程 如何在Frontpage20
    frontpage 2003教程 插入动态文字