How to Make a Web Page

目录

网页的结构
网页实际上是用标记“标记”的文本文件,以表示结构和功能。 您可以在任何您喜欢的文本编辑器或文字处理器中准备和编辑网页。 标签系统(称为HTML(超文本标记语言))是非常合乎逻辑的,不难学习。 但是,您不需要说流利的HTML来创建自己的网页。 已经开发了几个简化过程的捷径。

网页上常见的图标,图片,声音位置和视频剪辑实际上是由特殊HTML代码引用的单独的文件。 当Web浏览器(如FirefoxInternet Explorer)查看该页面时,浏览器会解释这些HTML代码,这些HTML代码会将所有单独的文件拖放到您最终看到的窗体中。 这与现代文字处理器形成对照,其中编辑和查看功能被集成到一个程序中,其中文档的所有文本,图形和其他元素都包含在一个文档文件中。 因此,创建Web页面的过程不太直接地创建一个等效的文字处理器文档。

编写HTML页面
文本仍然是大多数网站最重要的部分,因此将成为这里考虑的第一个元素。 Web页面的所有文本都包含在使用HTML代码“标记”的ASCII文本文件中,通常会以“.html”结尾的文件名。 页面的“正文”只是用html文件中的纯文本写出来。 您可以使用任何方便的纯文本编辑器来编写HTML文件,例如Mac上的SimpleText或Windows上的记事本

你应该学习HTML吗?
自己学习HTML将允许您自定义您的网页。 不难学; 事实上,这是一个非常合乎逻辑的系统,具有一定的吸引力。 尝试看看我的介绍性HTML教程 ,并附上工作示例。 它解释了HTML的所有重要方面。 有文本格式,图形,超链接,声音,列表,表格,背景颜色和图案等部分。

我需要购买一个网页编辑器吗?
不是真的。 您真正需要的是Web浏览器和您的计算机附带的文本编辑器。 没有必要绑定到商业Web编辑器,最终将变得过时或需要升级到新版本。 但是,网页编辑器可以轻松创建有吸引力的网页,而无需学习HTML。 但你实际上并不需要花钱; 有很好的免费网页编辑器,您可以下载,如Kompozer屏幕截图 )和我当前最喜欢的SeaMonkey ,这是一个Web浏览器与方便的内置网络编辑器。 这些工作非常像文字处理器,但它们包括用于创建链接,站点管理,将页面上传到服务器, 级联样式表等的额外功能。还有一些基于Web的页面编辑器可以在Web浏览器中进行所有操作,例如Google易于使用的Google协作平台

HTML模板
如果您不想立即学习HTML,您仍然可以使用由其他人创建的模板创建网页,该模板具有所有必需的HTML标签,并且您键入或粘贴文本。 只需Google“ HTML模板 ”或“ 网页模板 ”,您就可以找到数以千计的多彩,引人入胜的模板下载。

如果您是老师寻找教室网站建设的简单模板,请参阅使用模板生成可发布网络的多媒体项目 ,这是为我的妻子创建的,他是一名五年级的老师。 这些模板创建整个网站多个页面链接在一起,并带有导航按钮。 有链接到可下载的模板,用于构建整个类项目网站,如幻灯片字母表等。完整的分步说明包括在内。

对于编辑模板,我推荐NoteTab Light是一种免费的多文件文本编辑器,可以同时打开模板中的所有文件,同时执行一个模板的所有文件中的搜索和替换功能。 非常适用于整个模板中更改背景和文字颜色,添加图像和声音链接,或更改多页网站中的图形或声音文件类型。

一些创建网页的提示
如果您正在使用文本编辑器开发一个网页来编写HTML,那么在文本编辑器(如记事本,NoteTab或SimpleText)中同时打开Web浏览器和html文件是很方便的。 要浏览Web浏览器中显示的页面,请单击浏览器窗口,下拉文件菜单并选择打开文件 ,选择html文件,然后单击打开 如果要进行更改,请单击文本编辑器窗口,编辑html文本, 保存 ,然后单击浏览器窗口,然后单击重新加载按钮。

您可能会更容易地在您喜欢的文字处理器中打开文本,您可以在其中访问拼写检查器等,然后文本复制粘贴到模板中。 不要尝试格式化文字处理器中的文本,因为复制和粘贴文本时所有的格式都会丢失,除非您以HTML格式“另存为…”,然后将HTML代码复制并转换到模板中。 相反,格式化代码可以随后添加到文本中。 不要担心行长和换行符; Web浏览器忽略回车符和其他换行符,并自动将文本格式化为窗口的宽度(由用户控制,而不是由作者控制)。 要分隔段落,请在段落之间添加<p>标签。

您可以使用文字处理器来创建和编辑HTML模板,但请确保以“仅限TEXT”格式另存为…。

将Word处理器文件转换为HTML
您可以使用“另存为HTML”命令将您的文档转换为HTML。 这将自动将文档的文本部分转换为HTML格式,并将文档中的所有图形保存为单独的文件夹。 因此,具有图片的单个文字处理器文档将被转换成一个HTML文档和一个图形文件夹; 把它们放在一起,这样他们就不会分开了。 你会发现一个文字处理器生成的HTML是非常杂乱而难以阅读的,但它是有效的。 最好使用Kompozer等网页编辑器。

为您的网页查找图形
网页上的图标,背景图案和图片实际上是由特殊HTML代码引用的单独的文件。 图形文件采用GIF,JPG或PNG格式。 您可以通过多种方式创建这样的图形; 例如通过在绘图程序中绘图,捕获屏幕截图,用数码相机拍照,用扫描仪扫描照片和平面图形,从视频源捕获静止帧等。然后可以使用图形编辑器程序来转换将文件转换为所需的PNG,GIF或JPG格式。 JPG是照片的最佳格式; PNG和GIF最适合线条图和图形。

获取图形以装饰新网页的最简单方法是从其他网页捕获图形。 网页上显示的任何图形都可以被您轻松地捕获并保存供您自己使用。 所有你需要做的是将鼠标指针放在你想要的图形上,并按住鼠标按钮(PC上的鼠标右键)。 弹出菜单出现; 移动指针选择“将图片保存为…”,然后放开鼠标按钮。 将显示“另存为…”对话框,显示图形文件的名称(带有.png,.gif或.jpg扩展名,指示它是否为PNG,GIF或JPG文件类型)。 导航到所需的位置,然后单击保存。

以PNG,GIF或JPG格式保存的图形可以在网页上使用; 要在您的页面上显示这样的图形,只需将图形文件保存在与HTML文件相同的目录(文件夹)中,并将HTML文件添加到图像参考标签中:<img src =“文件名称”>其中FILE NAME OF GRAPHIC被图形的完整文件名替代。 例如,如果图形文件的名称是“mypicture.jpg”,那么HTML代码将会显示<img src =“mypicture.jpg”>。

Web上有许多图形来源。 使用搜索引擎搜索“剪贴画”或“免费图片”或“免费图片”。 查找图像的便捷方法是使用Google的图像搜索或AltaVista的图像搜索引擎 ,网址为: http://www.altavista.com/r?L10 输入一个或多个搜索字词,并且此图像搜索引擎将返回所搜索到的每个图像的缩略图预览(小邮票大小的图像)所示的结果列表。

制作自己的数字图像
使用自己的数字图像显示在网页上有两种基本方法:使用数码相机拍照,或使用扫描仪扫描照片或其他平面复印材料。 数码相机和扫描仪现在广泛可用,价格相对便宜。

数码相机是拍摄人物,艺术品,课堂活动和实地考察的理想场所。 他们大多数都带有电缆和软件将图片传输到您的计算机。 大多数相机将其图像保存为JPG文件,这是用于网络上的照片的格式。 然而,大多数数码相机拍摄的图像太大 ,无法放置在网页上并花费时间过长,但您可以使用图形编辑程序裁剪或将图像缩小到更易于管理的尺寸。 我建议使用免费软件程序Picasa进行此任务; 它的“导出”功能将自动将图像的整个文件夹的大小减小到您指定的大小,并将其保存在单独的文件夹中 – 非常方便。

彩色扫描器是扫描印刷图片杂志和平面图形(如绘画和图纸)的理想选择。 扫描仪附带自己的软件 – 参考扫描仪的文档,了解如何操作。 开始扫描之前,将扫描分辨率设置为72 dpi或75 dpi(dpi =每英寸点数)。 (按照扫描仪的说明学习如何设置分辨率)。 这将导致“生活大小”的图像,就像原始扫描对象一样大,为了使图像更大的生命尺寸,设置扫描分辨率大于75 dpi;为了使图像更小 ,大小扫描分辨率小于75 dpi大多数扫描仪可以以各种格式保存扫描图像:JPG格式通常是最佳选择,当您保存扫描图像时,请在“格式化”弹出菜单中选择“JPG”但是,如果您正在使用诸如SeaMonkey之类的网页编辑器,则可以插入或复制和粘贴任何像素大小的图形,然后通过拖动角落处的“手柄”,在文字处理器中调整大小。

更改图形格式
在网页上显示的图形和图标是分别是PNG,GIF或JPG格式的文件。 要裁剪图像或从一种格式转换为另一种格式,您可以使用免费的图形程序,如Mac的Graphic Converter ,或者Paint (所有PC附带的简单图形编辑器)或Irfanview for Windows。

PNG,GIF或JPG格式之间的选择取决于图形的性质。 GIF格式对于尖锐的计算机生成的图表和平面卡通图形来说是最有效的,PNG处理颜色更准确,如果有渐变阴影更好,JPG对于数码照片,捕获的视频帧最有效,和其他自然对象的图片。 使用正确的格式将给您最好的图像质量和最小的文件大小,这最大限度地减少了使用慢速Internet连接查看图片所需的时间。

GIF图像也可以是动画的 ,它们将在任何Web浏览器上播放,而不需要任何附加组件,插件或观看者的任何动作。 我使用ScreenCast-O-Matic ,一个免费的一键式屏幕截图录制在Windows或Mac电脑上,无需安装。 您可以使用它来捕获任何程序的动画屏幕显示。 很方便。

要使用图形编辑器程序打开图片,您可以:

(a)拖动图片的图标,将其放在图形编辑器程序图标的顶部,
要么
(b)启动(双击图形编辑程序的图标),然后从文件菜单中选择打开 ,导航到所需的文件,然后双击文件名。

以GIF或PNG格式保存图形文件(最适合计算机生成的图形):

选择文件 – > 另存 …,从格式弹出菜单中选择GIF或PNG,如果需要,导航到另一个目录,然后单击保存

保存JPG格式的图形文件(最适合连续色调扫描的照片和视频屏幕):

选择文件 – > 另存 …,从格式弹出菜单中选择JPG ,如果需要,导航到另一个目录,然后单击保存

将所有的图像文件放在与html文件相同的目录(文件夹)中; 这将简化链接和移动网页和图像

添加声音和视频
如果您有一个麦克风附带的计算机型号(Macintosh或具有声卡的PC),您可以轻松录制声音并将其添加到您的网页。 例如,您可以使用计算机随附的小麦克风录制语音旁白,也可以从录音机或CD播放机录制音乐或声音。

1.您将需要一个可以保存mp3格式的录音机/播放器程序,如 PC和Mac 的优秀免费软件程序 Audacity(或者,您可以使用程序/附件/娱乐/录音机中的PC附带的录音机,但只能以较大的WAV格式保存)。

2.将麦克风插入计算机背面的小圆形插孔,标有麦克风图片。 如果您是从录音机或CD播放机进行录音,请将其输出连接到麦克风输入。 (您将需要获得一个合适的连接器电缆,您可以从Radio Shack获得)。

3.启动录音机程序。 按照说明录制声音。 调整音量以获得清晰的录音。 以mp3或wav格式保存声音文件。 将声音文件放在与HTML和图形文件相同的文件夹中。

4.要从您的网页上播放声音,请创建一个到该文件的超链接。 例如,如果您将声音文件保存为“sound1.mp3”,则可以将其添加到您的网页:

点击<a href="sound1.mp3">此处</a>听到声音咬。

这将创建一个到声音文件“sound1.mp3”的超链接,假设它存储在与调用页面相同的目录中。

点击这里听一个声音字节。

当用户点击链接时,浏览器下载文件,查看文件扩展名,确定为该类型的文件指定的帮助程序应用程序,启动它(如果尚未打开),然后加载并播放声音文件。

或者,您可以使用“嵌入式”播放器控制器将声音播放器整合到您的网页中:

其中“geetar.mid”是声音文件的名称。 这会在您的页面上放置一个小型播放器控制器,允许读者随意启动和停止声音。 调整宽度和高度数字以适应您的声音控制器。 这是一个使用不同声音文件的例子。

这仅适用于最新版本的Web浏览器。该技术的缺点在于,无论读者是否打算播放,声音文件都会在页面被浏览后立即下载。这可能会减慢页面的查看速度,特别是在较慢的Internet连接上。

添加视频就像添加声音,除了文件名称必须引用视频文件,如mpeg,mov,wmv或avi文件。 大多数数码相机能够以适合网页的尺寸和格式拍摄小型视频。 嵌入式视频的工作方式就像嵌入式声音,除了宽度和高度必须与整个视频帧的大小和底部的控制器相匹配。 以下是使用此HTML的视频播放器的示例:

测试你的页面
还没有互联网连接? 不用担心!。 可以在可以运行标准Web浏览器的任何台式计算机上设计,构建和测试网页,即使是连接到互联网的Web浏览器。 Web浏览器在独立计算机上的“本地模式”中工作正常,尽管没有Internet连接,但显然不能访​​问外部页面,即驻留在远程主机上的页面。 但是,Web浏览器可以通过使用文件菜单下的打开文件…命令来打开HTML文件来读取并显示存储在同一台机器上的“本地”文件。 这是您如何测试您的网页,看看它们的外观,并确保一切正常。 只需将所有html文件,图形文件和声音文件放在同一目录(文件夹)中。

您甚至可以考虑将Web浏览器作为一种低端多媒体演示系统,以便在教室或计算机实验室中独立使用。 Web浏览器是免费的 支持格式化文本,彩色图形和数字化声音和视频; 可用于PC和Mac的相同版本; 并且如此生成的演示文稿很容易在PC和Mac格式之间进行转换,并且当您可以访问Web服务器时,可以将其放置在“Web”上。 网页可以在CD-R磁盘或USB驱动器或局域网文件服务器上分发和读取。 由于其速度和容量,USB驱动器磁盘对于具有大量图形,声音文件或视频剪辑的页面特别有用。

注意:如果您使用基于PC的CD-R刻录机(“刻录机”)在CD-R上生成用于在PC和Mac上播放的网站(利用Mac的能力读取PC格式的磁盘),请确保将所有HTML,图形和声音文件名限制为8个字符,并带有3个字符的扩展名(例如“PAGE1.HTM”)。 否则,旧的Mac将无法读取该站点。

找到一个主机来服务你的页面
为了使您的网页实际上成为“互联网”,所以它们将被世界各地的Web用户访问,它们必须驻留在Web服务器上 理论上你可以在自己的电脑上运行你自己的Web服务器,但是你必须让它全天候运行,这是一个痛苦的事情。

许多商业互联网服务提供商(ISP)和Google等互联网公司为客户提供网页(“主页”)空间; 免费提供10-30 MB的免费(Google给您100 MBytes!),增加额外的空间可用,这并不罕见。 有关更多信息,请参阅供应商的文档。 对您的ISP的名称和“个人网页”进行Google搜索以获取更多信息。 查找标题为“连接到您的网站”,“网站管理”,“上传文件”,“确定您的网址”,“链接您的页面”,“宣传您的网页”或类似的部分。 (这些部分标题取自Verizon Web服务器文档;其他ISP将使用其他术语)。

大多数网站托管人都有一个在线的“站点构建器”,它允许您使用仅Web浏览器在线构建网页。 例如,Google拥有易于使用的Google协作平台 – 这是2008年创建的一个简单的主页 。这种方法的最大优点是您不需要找到主机来为您提供页面 – 您开发的页面自动托管在同一个站点上,大大简化了编辑/上传/查看周期,因为单个程序(网络浏览器)和网站用于创建,编辑,上传和查看开发站点。 但是 ,使用诸如此类的站点构建器可将您绑定到该特定站点; 将来可能没有一个简单的方式将您的站点转移到新的服务器。 我建议您在自己的计算机上创建您的站点,自己保存文件的副本,然后将文件上传到Web服务器。 这样,您可以在将来更改ISP时随时将文件上传到新服务器。

上传您的页面
如果您使用Web编辑器或直接以HTML形式开发网站,则需要将结果上传到Web服务器。 大多数网页编辑器,例如Kompozer ,都有一个内置的上传器,可以直接连接到您的服务器,使其成为一个简单的一键操作,可以上传您的编辑。 但是,您必须事先使用正确的服务器地址,用户名和密码进行设置。 看看主机的文档资料。 以下是Kompozer“发布设置”对话框的示例,显示您需要输入的信息。 如果您正在使用多个主机来发布您的网站,请注意,您可以在左侧的“发布站点”列表中保留几个主机配置,每个主机都有自己的主机地址,用户名和密码。

一些主机允许您使用单独的FTP程序上传(FTP =文件传输协议),例如WSFTP LEWinSCP ,用于教育用途。 这样的程序允许您一次上传文件的整个文件夹,使其相对容易上传和下载整个先前开发的站点,或将站点从一个Web服务器移动到另一个。 当然,您也可以上传单页或图像,例如纠正错误。 同样,您必须使用正确的服务器地址,用户名和密码设置这些程序。

为了商业或专业的目的,您的公司或学校系统可以操作由Web管理员操作的中央Web服务器; 在这种情况下,您通常可以将所有HTML文件和图形提交到CD-R或USB驱动器上的Web服务器管理员,并将其放在Web服务器上。 要求他们在服务器上通知您网址(网址)。

进一步

Robert Mening的“HTML5初学者指南”( websitesetup.org/html5-beginners-guide )是一个设计精美的教学网站,它探索了最新的HTML格式,即HTML5,它对最新的多媒体提供了无可比拟的支持。 网络托管评估大量的百强网页开发资源和工具。


本文档的第一个版本最初是1995年6月21日创建的。该版本是在2017年5月创建的。

返回到车间讲义页面。

本页由马里兰大学公园化学与生物化学系荣誉教授汤姆·奥弗弗教授创立。 意见,建议和问题应直接发送给O’Haver教授[email protected]
2008年5月以来的独特访问: 132,105

Click Here to Leave a Comment Below 0 comments

Leave a Reply: