网页设计源代码和素材(网页设计制作与代码整体素材)

如何制作网页

一． 网页制作基本技术

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

下面以“氢气的性质和用途”网页制作为例，简介应用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、源码是使用html编写的,通过IE把它翻译为网页,它是所有网页的核心,但是html 并不是计算机语言,只是网页的另一种描述.源代码是一种语言，组织排版网页上的元素（图片，视频，音乐，文字等）的一种标准语言。2、如果您要制作网页，您可以选用如Frontpage或Dreamwaver等工具，这些工具都是所见即所得性质的，就是说您在工具界而上制作的，就能直接在浏览中原样显示出来。但，这些工具同时还提供了源代码视图，也就是说，如果一些功能没有办法直接通过工具来实现，那你要编辑源代码了。3、当然，您也可以直接用记事本来编辑网页，直接输入代码，然后另存为.htm或.asp或其他为后缀名的文件。您保存下来的这些文件就是网页了，而您在记事本里编辑的那些，就是源代码。

我想制作一个网页，请问需要哪几个步骤？

制作一个网页需要九个步骤。

1、准备内容

在域名注册查询网址之前就应该先搜集至少「一百页」的内容，这些内容必须是有价值的、不违反著作权的内容。

2、网址

想个比较有意义，好记的网址。

3、网页设计制作

在网站设计上，只要尽量简洁有力，让内容可以好好的呈现，就是一个成功的seo网站页面。页要尽量符合w3c的标准。

4、每页档案大小

每个网页尽量在15k以下，但是不能在5k以下，以免影响内容的完整。其搜索引擎最佳化的目的，实际上是为了使用者，而不是为了搜索引擎本身。

5、关键字密度

拿出关键字，在下列六个地方各使用一次。

6、内部链接

内部链接就是在同一网站域名下的内容页面之间的互相链接（自己网站的内容链接到自己网站的内部页面，也称之为站内链接）。

7、网站上线

最好不要用虚拟主机，若是能有自己的代管主机或者是固定ip位置就最好了。

8、纪录与追踪

申请一个不错的网页计数器。

9、程序设计

网站设计包括前台用户视觉体验的设计和后台程序功能设计，两个方面都是非常重要的；视觉设计对于客户的阅读带来愉悦和信任，后台注重操作的方便行。

扩展资料：

注意事项

1、导航菜单使用图片、flash

导航菜单使用图片、flash当然比纯文本来得好看一些，但是搜索引擎并不认识你的图片和flash。如果你非要使用漂亮的图片来做导航的话，可以使用背景替换的方法。建议做一个导航菜单链接的xml文提交到搜索引擎。

2、不恰当地使用图片

为了网页美观，经常会到处贴满图片，这样做是不正确的，与内容无关的图片能少就少吧。我们可以把这些图片做成容器的背景。

3、内容里特殊字体的运用

楷体很漂亮，草书也不逊色于宋体。但是不是所有人的电脑都安装有这些字体。如果使用这些特殊字体的话，在别人的电脑里看到的网页将会是不堪入目。

参考资料来源：百度百科-网站设计

素材与源码是什么意思

分别是写作和计算机的专业术语。

素材，指的是作者从现实生活中搜集到的、未经整理加工的、感性的、分散的原始材料。源码是指编写的最原始程序的代码，是未编译的按照一定的程序设计语言规范书写的文本文件，是一系列人类可读的计算机语言指令。

源码主要功用，1、生成目标代码，即计算机可以识别的代码。2、对软件进行说明，即对软件的编写进行说明。为数不少的初学者，甚至少数有经验的程序员都忽视软件说明的编写，因为这部分虽然不会在生成的程序中直接显示，也不参与编译。

制作网页中的源代码指的是什么

是网站编写人员在设计网站的时候，写的用于网站制作的代码，多数是英文的

如果是静态网站，你在网站上右键——查看源文件，这里用记事本打开的就是他的源代码了。

如果是动态的，你也可以用上面的方法查看，但是你看到的全是HTML码，一些关键性的是看不到的，比如数据库，比如ASP，JSP等写的源码。