web制作网页(网页设计制作网站模板图片)

大家好，今天小编来为大家解答web制作网页这个问题，网页设计制作网站模板图片很多人还不知道，现在让我们一起来看看吧！

如何制作网页

一．网页制作基本技术

网页制作的基本要点是：学会在网页中插入表格、图片、动画、视频文件等。

下面以“氢气的性质和用途”网页制作为例，简介应用FrontPage制作网页的基本方法。

在“氢气的性质和用途”网页中我们将插入“氢气球”、“氢能汽车”等图片。插入“纯净的氢气安静燃烧，不纯氢气点燃爆炸”等FISAH动画，插入“氢气燃烧”的视频录像。

1．建立文件夹

制作网页前，要收集素材，并将收集的素材放在自建的文件夹中。

这里我们先在E盘建立一个H2文件夹，在H2文件夹中再建立SC文件夹，将收集到的素材放在SC文件夹中（图1）。

2．收集素材

素材可从购买的光盘上复制，也可从网上搜索下载。

2．1视频素材的收集

“氢气的性质”录像是我们从初中化学VCD光盘上复制的。

方法是，用资源管理器打开VCD光盘文件，在MPEGAV文件夹中找到所需的MUSIC07.DAT文件并复制到SC文件夹中，并改文件后缀名为MUSIC07.mpeg（图2）

2．2网上图片的收集

利用搜索引掣可在网上得到所需的图片资料。

这里应用google.com来搜索图片。

在浏览器地址栏中键入google.com，打开页面后再在搜索栏中分别键入关键词“氢气、氢气球、氢电池”等。将找到的图片另存到SC文件夹中（图3）。

2．3网上动画素材的收集：

课件类FLASH动画素材一般要到专题网站去收集。各学科的专题网站很多，例如中小学教育教学网（K12.COM.CN）搜集课件很方便。本网页中应用到的FLASH动画有“氢气的验纯（文件名：geh2.SWF）”、“氢气还原氧化铜微观过程（文件名：hecuo.SWF）”等，收集过程是：进入先得化学资源网（），在“搜索”窗中键入“氢气”，在搜索到的“匹配记录中”找到自己想要的素材并下载（图4）。

此时用鼠标右键单击“下载”文字，在弹出的菜单中选择“目标另存为”可将动画文件下载到本机指定文件夹中。

如果FLASH动画素材是在浏览器网页中看到的（嵌入在网页中），选择另存网页的方式，不能把FLASH动画另存下来。这时可打开浏览器工具栏的“工具”菜单，找到“Initernet”选项，在“常规标签”中间部分“Initernet临时文件”中打开“设置”按钮，再在弹出的对话框中选择“查看文件”，即可打开网页浏览器平台自带的“临时文件夹（Temporary Internet）”该文件夹产生的文件是按时间顺序排列的，最后时间内打开的网页，其临时文件在该文件夹的最后部分，所以在该文件夹中的最后部分文件中寻找FLASH动画特有的图标，逐一打开看，可找到你需要的动画，再选中该文件复制后，粘贴到素材文件夹中（图5）并重命名文件名。

3.制作网页

3.1打开FrontPage程序

鼠标指向开始菜单,在程序中找到Microsoft FrontPage程序,单击即打开FrontPage程序。

3.2创建网页

鼠标指向文件，在下拉菜单中单击新建。在弹出菜单中选中普通网页，单击确定。

命名网页文件名为“氢气”，存盘，存盘路径E：\H2\。

3．3网页制作

3．3．1插入表格

我们用PowerPoint制作演示文稿时，可以将文本框或图片、表格等放在工作区的任意位置，但用FrontPage制作网页时，就不能将这些对象随心所欲地放在页面上了。

为使各对象能在页面的一定位置上放置，在用FrontPage制作网页时，常用表格的单元格把页面划分成一个个区域，文字或图片等对象就填充在单元格中。即单元格起到了固定对象位置的作用。

单击插入表格按钮，选定行、列数，即可插入表格，有时在大的单元格中，还需插入小的表格，进一步把大单元格的区域分成小的单元格（图8）。

一般情况下表格的框线不需要在页面上出现，可单击鼠标右键，修改表格属性，将单元格边距、单元格间距、粗细都设置为零。

在表格的单元格中可写入文字，调整文字的字体、大小、颜色。也可设置单元格的背景颜色。“氢气的性质和用途”网页上插入的表格及文字排列如图10所示。图中明、暗相间的区间为初始插入的表格的单元格，各区间中的分割线为在此单元格中再插入的表格的单元格。没有文字的单元格中将插入图片或动画。

3．3．2插入图片

网页中可插入后缀名为GIF和JPG等格式的图片。GIF图片又分为静止图片和动画图片。在本网页中的原子模型、红色线条、电视机画面就是GIF动画图片（文件名为052.GIF、0182.GIF、0354.GIF）；网页中气球、氢能汽车、氢气的实验室制法等图片都是JPG格式的静止图片（文件名为qq.JPG、HYBRIDFO.JPG、0356.JPG）。

插入图片的操作是将光标停在需插入图片的单元格中，在“文件”栏中选中“插入”，在下拉列表中选中“图片——来自文件”，再在弹出的对话框中找到图片所处的文件夹及文件名，再单击“确定”即可（图11）。

3．3．3插入FLASH影片或视频影片

应用“插入”下拉菜单的“高级”选项，可在单元格中插入后缀名为SWF、AVI、MPEG等影片文件。

在本网页中，我们插入的FLASH影片有“氢气的验纯”（文件名：geh2.SWF）、氢气还原氧化铜微观过程（文件名：hecuo.SWF）。

插入FLASH影片的操作是将光标停在需插入图片的单元格中，在“文件”栏中选中“插入”，在下拉列表中选中“高级——插件”，再在弹出的“插件属性”对话框中单击“数据源”右边的“浏览”，找到需插入的FLASH影片，再单击“确定”即可（图12）。

图12往文本“氢气的验纯”下方的单元格中插入FLASH影片（文件名：geh2.SWF）

在单元格的位置插入插件后，生成一个插头接口的标记。

从光盘VCD上拷贝的视频录像（.AVI、.MPEG），要插入网页中时，可在“插入”菜单栏中直接选“影片”选项，在弹出对话框中找到有关文件选择“打开”即可。

AVI、MPEG格式的文件容量一般较大，直接插入到网页中时，会严重影响网页打开的速度，故一般不适宜在网页中直接插入，对这类影片可采用超级链接的方式进行下载播放。

3．3．4超级链接设置

网页制作的一个重要步骤就是对有关的文本、图片设置超级链接。在本网页中看不到的网页、图片、视频、网站等可以应用超级链接的方式发出指令在浏览器窗口中打开。

在本网页中，图片超级链接有：图片“氢能汽车”——链接到另一更大的“氢能汽车”图上（文件名：HYBRIDFO1.JPG）、图片“电视机”——链接到“氢气的性质”录像片（文件名：MUSIC07.MPEG），图片“氢气的实验室制法”——链接到FLASH影片“氢气的实验室制法”（文件名：zh2.SWF），图片“中国新能源网”——链接到中国新能源网（网址：），两个放大镜图片分别链接到“氢气的验纯”、“氢气还原氧化铜的微观过程”的FLASH动画上（文件名：geh2.SWF、hecuo.SWF）；在本网页中文本的超级链接有：“氢氧混合气点燃爆炸演示”——链接到“氢氧混合气点燃爆炸演示”（文件名：bc1.SWF），“氢氧混合气点燃爆炸微观解释”——链接到“氢氧混合气点燃爆炸微观解释”（文件名：bc2.SWF）。

超级链接是非线性超文本结构的网站及网页的核心。

设置超级链接的方法是：先选中图片或文本，单击鼠标右键，在弹出的菜单中选中“超级链接”，弹出“创建超级链接”窗口，再选中URL窗右边的“制作一个指向您计算机的超级链接”按钮，弹出“选择文件”对话框，选中需链接的文件，或在URL窗口中直接键入网址、文件的路径名，（图13、图14）。

图13对图片“氢能汽车”进行超级链接设置（指向文件HYBRIDFO1.JPG）

图14对图片“中国新能源网”设置链接，键入网址：

这里要注意的是，编辑超级链接时，“目标框架”一般不用“默认值”而是选择“新建窗口”以便网页的浏览（图15）。

最后还想说一下滚动字幕的制作，选中需要滚动的文字，鼠标指向“插入”菜单，在上拉列表中选中“组件——字幕”，单击弹出对话框中的确定按钮即可。

到此，一个网页就基本制作完成了。如何知道网页在浏览器中的浏览效果呢，在FrontPage窗口的左下方有三个窗口切换标签：，普通窗口就是我们的工作区，HTMH窗口可查看网页源代码，预览窗口可随时查看制作的网页在浏览器中的效果（图16）。

图16“氢气的性质和用途”网页在浏览器中的图象

4.将存放网页及素材的文件夹转换成WEB文件夹

我们是在H2文件夹中建立的SC文件夹基础上制作网页的，这样的网页的各种链接一般是绝对路径关系，如果把H2文件夹换一个位置（如复制到D盘），再打开该文件夹中的氢气.HTM网页，就可能打开的是一个有一些图片看不到，单击一些链接无响应的缺损网页，这样的网页是不能放在网站上对外发布。这样的文件夹叫非WEB文件夹。

如果把存放网页及素材的自定义文件转换成WEB文件夹，则文件夹中的网页与各链接文件的关系就会变成相对路径关系，这样把该文件夹不管放到什么目录下，该网页在被打开时都不会有缺损，且超级链接都能正确响应。

如何将非WEB文件夹“H2”转换成WEB文件夹呢。操作很简单。

打开在FrontPage程序后，单击“文件——打开站点”出现打开站点对话框，在“查找范围”窗口中找到E:\H2文件夹，单击“打开”（图17），

图17以站点形式打开H2文件夹

这时会再弹出一个“向文件夹中添加FrontPage信息”对话框，问：是否向H2文件夹中添加FrontPage信息（图18）？单击“是”，会自动生成文件夹列表并打开网页“氢气.htm”(图19)，这时文件夹“H2”就转换成了WEB文件夹，在该文件夹中自动生成四个文件夹：用来存放图片和网页等文件的images和_private文件夹，含有超级链接信息的隐藏文件夹_vti_cnf和_vti_pvt。在本网页制中过程中，我们已经将素材文件放在了SC文件夹中，所以images和_private文件夹可以删除。但_vti_cnf和_vti_pvt切不可删除（图20）。

当H2文件夹转换成WEB文件夹后，其中的网页“氢气.htm”上的超级链接关系即转换成相对路径关系，该文件夹放在任何目录下，网页打开时不会缺损。

5．网页（网站）发布

有时我们要把已经制成的网页或网站存放到特定的文件夹之中。成为可对外发布的网页或网站。例如，我们想把“氢气.htm”网页发布到“氢气”文件夹之中。

“氢气. htm”，网页的路径是E:\H2\氢气.htm，在H2文件夹中还有SC素材文件夹，我们用到的图片、动画、视频文件都放在这个文件夹中。

先在E盘建立一个文件夹，命名为“氢气”，这就是我们将要把网页发布后存放的文件夹。在FrontPage程序中打开网页氢气. htm，鼠标指向文件，在下拉菜单中选中“发布站点”，弹出“发布站点”对话框，单击“指定站点位置”窗口右边的浏览按钮，找到e:\氢气，选中后，用鼠标单击“打开”，再单击“发布”按钮，出现确认对话框，单击“是”，“H2”文件夹中的有关文件就会导入到“氢气”文件夹中，“发布完成（图21、图22、图23）。

注意有些网站的服务器不支持中文路径，建立文件夹及网页文件时最好用英文名称或数字名称。

图23成功发布站点

我们在光盘H2文件夹中放了两个网页，一个是“氢气的性质和用途”（文件名：氢气.htm），另一个是“氢气的性质和用途”的表格文件（文件名：氢气网页表格.htm），在第二个文件中有部分图片及链接，是不完整的网页。读者不妨试一试：在FrontPage程序中打开第二个文件，照着我们前面网页制作的方法介绍，把它制作成与第一个文件画面，链接关系一样的htm文件，并发布。

二．制作网页的注意事项

应用于课堂教学或专题学习网站的网页与平时在网上浏览的公司网页相比，有较大的区别。

页面设计上，构图要力求简明，图形、标题、文字标注三者并重，不能像公司网站的主页，看得人眼花缭乱。

动画要适当，不要一打开网页到处都在动，让人不知看什么地方是好。

主题要鲜明，一个网页一个主题。

文字不宜多。一个页面不要超过300字，字要大一些。

网页制作的步骤-

1.设计首页的第一步是设计版面布局。

就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个人的显示器

分辨率不同，所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。

布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。你可能注意到：“最适合”是一个不确定的形容词，什么才是最适合的呢？抱歉的是阿捷不能也不可能给您一个完整的正确的答案。就好比有人希望知道成功的秘诀是什么，成功者只能建议您用什么方法，什么途径才能最容易获得成功，而不可能有一步成功的"秘诀"告诉您。

我们在设计思考系列文章第四篇讲过站点整体的创意，版面布局也是一个创意的问题，但要比站点整体的创意容易，有规律的多。让我们先来了解一下版面布局的步骤：

一.草案

新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥你的想象力，将你想到的"景象"画上去(我们建议您用一张白纸和一支铅笔，当然用作图软件photoshop等也可以)。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续创作的脚本。

二.粗略布局

在草案的基础上，将你确定需要放置的功能模块安排到页面上。(注：功能模块我们在"首页设计-引子"中提过，主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,计数器,版权信息等)。注意，这里我们必须遵循突出重点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼，最突出的位置，然后在考虑次要模块的排放。

三.定案

将粗略布局精细化，具体化。（靠你的智慧和经验，旁敲侧击多方联想，才能作出具有创意的布局。）

在布局过程中，我们可以遵循的原则有：

1、正常平衡---亦称"匀称"。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。

2、异常平衡---即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。

3、对比---所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。

4、凝视---所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。

5、空白---空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。

6、尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。

------------(转载自广告大师樊志育《广告制作》)

以上的设计原则，虽然枯燥，但是我们如果能领会并活用到页面布局里，效果就大不一样了。比如，

○网页的白色背景太虚，则可以加些色快；

○版面零散，可以用线条和符号串联；

○左面文字过多，右面则可以插一张图片保持平衡；

○表格太规矩，可以改用导角试试。

（经过不断的尝试和推敲，你的网页一定会亮丽起来的哦:）

看看我们经常用到的版面布局形式：

1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网页设计中用的最广返的一种布局方式。(图略)这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。

2."口"型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。(图略)这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。

3."三"型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。

4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。

5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。

以上总结了目前网络上常见的布局，其实还有许许多多别具一格的布局，关键在于你的创意和设计了。对于版面布局的技巧，这里提供四个建议，您可以自己推敲：

1.加强视觉效果

2.加强文案的可视度和可读性

3.统一感的视觉

4.新鲜和个性是布局的最高境界

如何做网页制作

一、确定网站主题

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

二、搜集材料

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

三、规划网站

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

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

五、制作网页

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

六、上传测试

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

七、推广宣传

网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。

八、维护更新

网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者。

OK，本文到此结束，希望对大家有所帮助。