盘点几款简易电商平台:打造个人小型网站攻略全解析

如何制作一个简易网页

如何构建网页

当前市面上存在众多构建网页的软件,Office软件包中也包含一个专用于网页制作的工具FrontPage,其操作与Word类似,上手较为容易。以下以FrontPage 2000为例,介绍网页制作的基础知识。

如何启动FrontPage并熟悉主界面

点击任务栏“开始”图标,选择“程序”选项,点击FrontPage即可进入。

进入后,您会发现PRONTPAGE界面与WORD非常相似[图一],这是因为编辑WEB页面和编辑WORD文档存在许多相同设置,这些设置所用的图标与Word中的相同。

[图一]ProntPage2000界面

视图中的组框用于切换视图,点击其中小图标即可切换到不同视图。FRONTPAGE共有6种视图[如左],通过不同的视图可以从不同角度查看设计的WEB站点。对于一个WEB站点来说,持续更新至关重要。随着站点的成长,维护站点的工作量会越来越大。建立站点可能很快,但如果没有这6种视图的帮助,维护起来会相当困难。

这些视图的使用不必一开始就全部掌握,只需了解它们的存在即可。

下面我们来看看同一个WEB站点在不同视图中是如何显示的。

点击“网页”按钮,切换到网页视图,再点击工具栏上的“文件夹列表”按钮,窗口中会出现一个文件夹列表框[图一]。网页视图用于显示选中的网页,双击文件夹列表中的某个HTM文件,在最右侧的工作区中就会显示该网页的内容。

[图一]网页视图

注意,此时工作区的左下角有三个切换显示模式的选项卡[图二]。点击“普通”选项卡,即可切换到普通模式。在普通模式下可以编辑网页内容以及设置各种格式。点击“预览”选项卡,即可进入预览模式。如果想要查看当前编辑的文件在浏览器中的显示情况,就使用预览模式,在预览模式下,不能编辑网页。点击“HTML”,有时也可以切换到HTML模式直接对网页对应的HTML文本文件进行编辑,从而为网页进行一些特殊设置。

[图二]工作区的三个切换模式

文件夹视图以列表形式展示当前WEB站点的文件夹和文件夹中包含的文件[图三]。由于一个WEB站点要涉及许多文件,因此将这些文件分类并分别放入不同的文件夹很有必要。例如,可以将所有图形文件放入IMAGE文件夹。FRONTPAGE还提供了一个_PRIVATE文件夹,用于存放对网络浏览者不可见的信息。下面为当前站点再添加一个SOUND文件夹,用于存放WEB站点用到的声音文件:选中站点的根目录,然后点击“文件”菜单的“新建”项,在弹出的子菜单中选择“文件夹”命令。在输入SOUND后,新文件夹就建立好了[图四]。

[图三]文件列表 [图四]文件列表

实际上,一个站点就是一个目录,在这个目录下可以建立许多子目录,并将站点的各种文件放在这些目录里。

任务视图列出关于站点维护的任务列表,如果站点由多人共同维护,他们可以通过任务列表了解工作进展情况。

报表视图提供了当前站点的统计信息。在这里可以了解到哪些文件被链接进站点,哪些没有。

导航视图可以方便地组织站点中各网页的层次关系,在本视图中,每个页框代表一个网页。如果站点设置了导航功能,就可以先在这里设置好各网页的层次关系,然后用导航栏将这种层次关系表现出来。

超链接视图用于查看选中网页中设置的超链接。通过它可以方便地了解在网页中设置了多少超级链接,以及是什么类型的链接。

任务视图列出关于站点维护的任务列表,如果站点由多人共同维护,他们可以通过任务列表了解工作进展情况。

创建网页

本节我们将讨论如何创建页面。

创建页面最简单的方法是点击FRONTPAGE“常用”工具栏的“新建”按钮。它的右侧有一个向下的小箭头,用于选择要新建的内容,可以使用“新建”按钮新建网页、站点、文件夹和任务。默认状态下是新建网页。

如果要新建网页,可以不用点击向下箭头键选择,而直接点击“新建”按钮。不过,使用文件菜单的“新建”命令来新建网页能够提供更多的选择。

点击文件菜单的“新建”命令,选择“新建网页”,在“新建”对话框中,可以看到FRONTPAGE提供的许多网页模板[图一],我们可以使用这些模板来建立相应的网页。在右下角的预览框中可以看到选中模板的外观。选择“两栏正文”网页,这样就创建了一个新的分为两栏的网页。然后点击确定。

[图一]新建网页对话框

使用模板可以不用总是从空白网页开始编辑,这样可以节省很多时间。

添加文字

FrontPage中对文字和图像的处理与Word类似,使用过Word的人对FrontPage中这部分的操作很容易上手。不过,毕竟是网页制作软件,在Web的基础上,又增加了很多实用的功能,可以制作出复杂且高级的网页文字和图像。

FrontPage中对文字和图像的处理主要集中在以下三个菜单栏中:编辑、插入、格式。编辑:包括用于处理文字的复制、粘贴等操作,调整网页内容(包括文字、图像、控件等)的多少以及安排。是最基础的工具,经常使用其对应的快捷键。插入:用于创建网页的各种部件及其组成部分,很多选项可以创建既复杂又实用的部件,这方面比Dreamwaver更容易被初学者接受。(图2.1)

图2.1

格式:对文字的处理主要集中在该菜单栏,这里的选项用于协调整个网页以及整个网站的内容编制,也是较常用到的菜单栏。(图2.2)

图2.2

图2.2

(一)生成文字:在FrontPage中生成文字的途径大致有两种:录入和引入。1、新建一个网页,随之录入的文字就会在光标所在位置显现,根本得不能再根本的方法,简单来说就是打字。只要光标能到达的地方都可以正常录入文字。2、通过【粘贴】能够将之前在任何程序中复制或者剪切的文字引入到当前编辑网页中,【编辑】菜单栏中的选项与之相关。还可以通过【插入】中【文件】的形式引入文字,包括txt、doc、htm等纯文本或者包含文字的文件。(二)处理文字字体:选择【格式】菜单栏中的【字体】选项,出现字体对话框(如图2.3)。

图2.3

字体:框中选择想应用的字体。字体文件都保存在windows目录中的fonts子目录中,可以自行删改添加。字形:有常规、斜体、加粗和加粗斜体四个选项。一般来说正文选用保持常规,加粗用于标题,斜体则用于突出正文中的内容以及使文字美观。字号:可以直接在输入框中输入想使用的字号,也可以在选项中选取。一般来说在浏览器中9磅和10.5磅看起来最美观最舒服。字符间距:这个分页中的选项是用来进行行距设置以及文字定位的。预览:无论在【字体】中进行什么操作,都可以在预览框中看到样品,方便选取合适的搭配。

如何构建一个小型网站

一、确定网站主题网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围内内容做到大而全、精而深。

二、收集素材明确了网站的主题以后,你就要围绕主题开始收集素材了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸引住用户,你就要尽量收集素材,收集得素材越多,以后制作网站就越容易。素材既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上收集,然后把收集的素材去粗取精,去伪存真,作为自己制作网页的素材。

三、规划网站一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时游刃有余,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。

四、选择合适的制作工具尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民选用的都是所见即所得的编辑工具,这其中的佼佼者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage2000是首选。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool3d、GifAnimator等;还有网页特效工具,如有声有色等,网上有许多这方面的软件,你可以根据需要灵活运用。

五、制作网页素材有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。

六、上传测试网页制作完毕,最后要发布到Web服务器上,才能够让全世界的朋友观看,现在上传的工具有很多,有些网页制作工具本身就带有FTP功能,利用这些FTP工具,你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后,你要在浏览器中打开自己的网站,逐页逐个链接的进行测试,发现问题,及时修改,然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友,让他们来浏览。FTP工具自己百度搜一下就可以,我这里就不多说了。

以上所转载内容均来自于网络,不为其真实性负责,只为传播网络信息为目的,非商业用途,如有异议请及时联系btr2020@163.com,本人将予以删除。
THE END
分享
二维码
< <上一篇
下一篇>>