下载文档原格式
电子科技大学电子工程学院标准实验报告（实验）课程名称用HTML语言制作简单的网页电子科技大学教务处制表电子科技大学实验报告学生姓名：万羽学号：2902103035 指导教师：伍瑞钦一、实验室名称：科B457二、实验项目名称：用HTML语言制作简单的网页三、实验原理：1.网页（1）网页就是在浏览器上看到的一页，网页也称为Web页。
（2）主页通常是进入网站首先浏览的网页，具有引导用户浏览整个网站内容的作用。
（3）超链接是网页中的特殊标记。
它指向了WWW中的其他资源，如其他网页、网页的另一个段落、声音文件等。
这些资源可以位于自己的计算机上，也可以位于其他计算机上。
用作超链接的标记可以是一段文字、一幅图像，也可以是一幅图像的一部分。
在浏览网页时，单击超链接就可以跳转到超链接所指向的资源。
超链接像一根一根的线一样，将各种网页链接在一起，形成一个庞大的信息网。
2.HTML语言（1）HTML语言就是超文本标记语言，是网页制作的基础，也是基本的工具，使用其他任何工具制作的网页，最终都要以HTML方式存储在计算机里。
（2）HTML的脚本可用任何一种文本编辑器进行编写，如记事本、Microsoft Word等。
保存时要将脚本保存成纯文本格式，扩展名必须是.htm。
（3）HTML脚本的基本结构。
HTML脚本总是以<html>标记开头，</html>标记结尾，在<html>和</html>标记之间是HTML的所有内容，一般情况下它分为两部分：头部和主体。
头部总是由<head>和</head>标记定义的，其中包含了HTML脚本的标题和说明信息；头部下面是HTML脚本的主体部分，它以<body>作为起始标记，</body>作为结束标记，其中所包含的就是在浏览器中所看到的内容，包括文字、图片、动画等。
3.FrontPageFrontPage是一种简单易学的Web管理和网页制作的软件。
前端网页布局有几种方式常用的前端网页布局方式有四种，分别为静态布局;流式布局;自适应布局;响应式布局。
其中静态布局为传统的一种布局方式，网页上的所有元素都是用px为单位进行设定的。
1、静态布局最为传统的一种布局方式，网页上的所有元素都是用px为单位进行设定的。
布局特点：不管屏幕的大小，页面宽高始终不变，始终维持最初〔制定〕时的样式大小来显示。
常规的PC端网页都是用的静态布局，也就是设置了min-width，当小于这个宽度的时候出现滚动条，当大于的时候让内容居中，外加背景。
2、流式布局布局特点：当屏幕分辨率大小发生变化时，页面里的元素大小会变化但布局不会发生变化。
制定方法：使用%百分比来定义宽度，高度大都是用px来固定，可以依据可视区域(viewpoint)和父元素的实时尺寸进行调整，尽可能的去适应各种分辨率。
往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局在web前端开发的早期，用来应对不同尺寸的PC屏幕，在当今的移动端开发也是常用的布局方式。
3、自适应布局自适应布局就是为不同的屏幕定义不同的布局，就是创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
改变不同的屏幕分辨率可以切换不同的静态布局(页面元素位置发生改变)，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。
可以把自适应布局看作是静态布局的一个系列。
布局特点：当屏幕的大小发生变化时，页面里面的元素的位置会变化而大小不会变化。
制定方法：使用@media媒体查询给不同的尺寸和介质的设备切换不同样式。
在优秀的响应范围制定下可以给适配范围内的设备比较好的体验，在同一个设备下实际上还是固定的布局。
4、响应式布局响应式制定的目标是保证一个页面在所有终端上(各种尺寸的PC、手机、平板、智能手表的Web浏览器等等)都能显示出令人满意的效果，对CSS编写者来说，有多种手法可以去实现，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。
网页设计制作基本过程-文本添加-宽度设置方法〔网页〔制定〕〕制作的过程介绍：加工处理素材(文稿整理、图片影像处理、站标制作等)——页面布局(把组成元素在页面中合理地安排)——填充内容(站标、标语、栏目等)。
一、网页制定制作基本过程1)加工处理素材对素材进行加工处理是网页制作的基础工作，加工处理的结果就是要在网页页面上浮现的内容。
要加工处理的素材包括文稿整理、图片影像处理、站标制作、标语广告制作、特别形式的栏目标题制作、次页中返回主页的按钮制作等。
2)页面布局网页页面的布局就是对网页的版面进行制定，把网页的组成元素在页面中合理地安排。
网页页面的布局制定类同于报纸、杂志等的布局制定。
初学阶段可以通过在A4纸上画草图来学习。
3)填充内容填充内容就是把前面加工处理好的素材填充到页面布局设定的各个小区域中。
除了站标、标语、栏目、次页中返回主页的按钮外，还有版权信息等内容。
二、网页制定文本如何添加在Dreamweaver中，向网页中添加文本有以下三种方法：1、直接在文档窗口中输入文本。
在制定视图中，将光标定位在要插入文本的位置，选择合适的输入法，输入文本即可。
2、复制文本。
用户可以从其他的应用程序中复制文本，然后切换到Dreamweaver中，将光标定位在要插入文本的位置，选择“编辑〞→“粘贴〞命令，或者使用【Ctrl+V】组合键将文本粘贴到窗口中。
3、导入其他文档中的文本。
在Dreamweaver中可将Office文档直接导入到网页中，将光标定位在要插入文本的位置，选择“文件〞→“导入〞命令，在子菜单中选择要导入的文件类型即可。
三、网页宽度设置方法1、屏幕分辨率为800×600，网页宽度坚持在778以内就不会出现水平滚动条。
一般分辨率在800×600的状况下，网页大小设置为780×428。
2、屏幕分辨率为1024×768，网页宽度坚持在1002以内就不会出现水平滚动条。
怎样免费制作自己的网页?免费制作网页的方法在当今数字化时代，网页已经成为了人们猎取信息、沟通、展现自己的重要平台。
而对于很多人来说，制作自己的网页可能是一项看似高难度的任务。
但是，随着技术的进展和互联网的普及，现在已经有许多免费的网页制作工具和平台，让任何人都可以轻松地制作自己的网页。
本文将为您介绍一些免费制作网页的方法，关心您快速、简洁地制作自己的网页。
1、WixWix是一个特别流行的网页制作平台，它供应了很多免费的模板和工具，让用户可以轻松地制作自己的网页。
用户可以选择自己喜爱的模板，然后使用Wix的拖放式编辑器来自定义网页的内容和布局。
Wix还供应了很多插件和应用程序，可以关心用户添加各种功能，如社交媒体共享、在线商店等。
2、WordPressWordPress是一个开源的网页制作平台，它供应了很多免费的主题和插件，让用户可以轻松地制作自己的网页。
用户可以选择自己喜爱的主题，然后使用WordPress的编辑器来自定义网页的内容和布局。
WordPress还供应了很多插件和应用程序，可以关心用户添加各种功能，如社交媒体共享、在线商店等。
3、WeeblyWeebly是一个特别简洁易用的网页制作平台，它供应了很多免费的模板和工具，让用户可以轻松地制作自己的网页。
用户可以选择自己喜爱的模板，然后使用Weebly的拖放式编辑器来自定义网页的内容和布局。
Weebly还供应了很多插件和应用程序，可以关心用户添加各种功能，如社交媒体共享、在线商店等。
4、Google SitesGoogle Sites是一个免费的网页制作平台，它供应了很多免费的模板和工具，让用户可以轻松地制作自己的网页。
用户可以选择自己喜爱的模板，然后使用Google Sites的编辑器来自定义网页的内容和布局。
Google Sites还供应了很多插件和应用程序，可以关心用户添加各种功能，如社交媒体共享、在线商店等。
5、JimdoJimdo是一个特别简洁易用的网页制作平台，它供应了很多免费的模板和工具，让用户可以轻松地制作自己的网页。
制作简单网页的方法引言如今，互联网已经成为了人们获取信息、交流、娱乐的重要途径之一。
制作一个自己的网页不仅可以展示自己的技能和个人特色，还可以实现一些个性化需求。
本文将介绍制作简单网页的方法，帮助读者快速入门，并且以markdown格式输出。
准备工作在开始制作网页之前，需要进行一些准备工作：1. 安装一个文本编辑器，如VS Code、Sublime等。
2. 学习HTML和CSS的基础知识，了解它们的语法和常用标签。
3. 确定网页的主题和内容，准备好相关的素材。
步骤一：创建HTML文件首先，在文本编辑器中创建一个以`.html`为后缀的文件，比如`index.html`。
在文件中输入以下内容作为基础结构：html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>我的网页</title></head><body></body></html>这段代码是一个最简单的HTML结构，用于定义一个HTML文档开始和结束的标记，并包含了`<head>`和`<body>`两个基本标签。
步骤二：填充网页内容在`<body>`标签中，可以添加各种HTML标签来填充网页内容。
比如，添加一个标题、段落和图片，代码如下：html<body><h1>欢迎来到我的网页</h1><p>这是我的第一个网页</p><img src="image.jpg" alt="我的照片"></body>这段代码将在网页中显示一个标题、一个段落和一张图片。
其中，`<h1>`标签用于定义一个大标题，`<p>`标签用于定义段落，`<img>`标签用于插入图片。
各种网页制作方法
一、菜鸟级网页制作软件
如果你是一个网页制作初学者，那么让下面几种软件带你走进那绚丽多彩的网页制作世界吧！
①Microsoft FrontPage
如果你曾对Word很熟悉，那么相信你用FrontPage进行网页设计一定会非常顺手。
使用FrontPage制作网页，你能真正体会到“功能强大，简单易用”的含义。
页面制作由FrontPage中的Editor完成，其工作窗口由3个标签页组成，分别是“所见即所得”的编辑页，HTML代码编辑页和预览页。
FrontPage带有图形和GIF动画编辑器，支持CGI和CSS。
向导和模板都能使初学者在编辑网页时感到更加方便。
FrontPage最强大之处是其站点管理功能。
在更新服务器上的站点时，不需要创建更改文件的目录。
FrontPage会为你跟踪文件并拷贝那些新版本文件。
FrontPage是现有网页制作软件中惟一既能在本地计算机上工作，又能通过Internet直接对远程服务器上的文件进行工作的软件。
②Netscape编辑器
Netscape Communicator和Netscape Navigator Gold3.0版本都带有网页编辑器。
如果你喜欢用Netscape浏览器上网，使用Netscape编辑器真是简单方便！当你用Netscape浏览器显示网页时，单击编辑按钮，Netscape就会把网页存储在硬盘中，然后就可以开始编辑了。
你也可以像使用Word那样编辑文字、字体、颜色，改变主页作者、标题、背景颜色或图像，定义描点，插入链接，定义文档编码，插入图像，创建表格等，是不是与FrontPage 2000还有些像?但是，Netscape编辑器对复杂的网页设计就显得功能有限了，它连表单创建、多框架创建都不支持。
Netscape编辑器是网页制作初学者很好的入门工具。
如果你的网页主要是由文本和图片组成的，Netscape编辑器将是一个轻松的选择。
如果你对HTML
语言有所了解的话，能够使用Notepad或Ultra Edit等文本编辑器来编写少量的HTML语句，也可以弥补Netscape编辑器的一些不足。
③Adobe Pagemill
Pagemill功能不算强大，但使用起来很方便，适合初学者制作较为美观、而不是非常复杂的主页。
如果你的主页需要很多框架、表单和Image Map图像，那么Adobe Pagemill的确是你的首选。
Pagemill另一大特色是有一个剪贴板，可以将任意多的文本、图形、表格拖放到里面，需要时再打开，很方便。
④Claris Home Page
如果使用Claris Home Page软件，你可以在几分钟之内创建一个动态网页。
这是因为它有一个很好的创建和编辑Frame(框架)的工具，你不必花费太多的力气就可以增加新的Frame(框架)。
而且Claris Home Page 3.0集成了FileMaker 数据库，增强的站点管理特性还允许你检测页面的合法连接。
不过界面设计过于粗糙，对Image Map图像的处理也不完全。
二、中级网页制作软件
如果你对网页设计已经有了一定的基础，对HTML语言又有一定的了解，那么你可以选择下面的几种软件来设计你的网页，他们一定会为你的网页添色不少。
①DreamWeaver
自制动态HTML动画的网页
DreamWeaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态
HTML(Dynamic HTML)的设计，使得页面没有plug-in也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。
同时它还提供了自动更新页面信息的功能。
DreamWeaver还采用了Roundtrip HTML技术。
这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。
这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。
DreamWeaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。
②Fireworks
第一款彻底为Web制作者们设计的软件
Fireworks的来头实在不小，它的出现使Web作图发生了革命性的变化。
Fireworks是专为网络图像设计而开发，内建丰富的支持网络出版功能，比如Fireworks能够自动切图、生成鼠标动态感应的javascript。
而且Fireworks
具有十分强大的动画功能和一个几乎完美的网络图像生成器(Export功能)。
它增强了与dreamweaver的联系，可以直接生成dreamweaver的Libaray甚至能够导出为配合CSS式样的网页及图片！
③Flash
让你的网页动起来
Flash是用在互联网上动态的、可互动的shockwave。
它的优点是体积小，可边下载边播放，这样就避免了用户长时间的等待。
#{6FLASH6}#可以用其生成动画，还可在网页中加入声音。
这样你就能生成多媒体的图形和界面，而使文件的体积却很小。
FLASH虽然不可以像一门语言一样进行编程，但用其内置的语句并结合JavaScripe，您也可做出互动性很强的主页来。
有人曾经说过：下个世纪的网络设计人不会用FLASH，必将被淘汰出局！我相信这句话没错！
④HotDog Professional
制作要加入多种复杂技术的网页
HotDog是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助设计者制作页面中的复杂部分。
HotDog的高级HTML支持插入marquee，并能在预览模式中以正常速度观看。
这点非常难得，因为即使首创这种标签的Microsoft在FrontPage中也未提供这样的功能。
HotDog对plug-in的支持也远远超过其他产品，它提供的对话框允许你以手动方式为不同格式的文件选择不同的选项。
但对中文的处理不很方便。
HotDog是个功能强大的软件，对于那些希望在网页中加入CSS、Java、RealVideo等复杂技术的高级设计者，是个很好的选择。
⑤HomeSite
制作可完全控制页面进程的网页
Allaire的HomeSite是一个小巧而全能的HTML代码编辑器，有丰富的帮助功能，支持CGI和CSS等等，并且可以直接编辑perl程序。
HomeSite工作界面繁简由人，根据习惯，可以将其设置成像Notepad那样简单的编辑窗口，也可以在复杂的界面下工作。
HomeSite更适合那些比较复杂和精彩页面的设计。
如果你希望能完全控制你制作的页面的进程，HomeSite是你最佳选择。
不过对于生手过于复杂。
⑥HotMetal Pro
制作具有强大数据嵌入能力的网页
HotMetal既提供“所见即所得”图形制作方式，又提供代码编辑方式，是个令各层次设计者都不至于失望的软件。
但是初学者需要熟知HTML，才能得心应手地使用这个软件。
HotMetal具有强大的数据嵌入能力，利用它的数据插入向导，可以把外部的Access、Word、Excel以及其他ODBC数据提出来，放入页面中。
而且HotMetal能够把它们自动转换为HTML格式，是不是很棒?此外
它还能转换很多老格式的文档(如WordStar等)，并能在转换过程中把这些文档里的图片自动转换为GIF格式。
HotMetal为用户提供了“太多”的工具，而且它还可以用网状图或树状图表现整个站点文档的链接状况。
三、高级网页制作软件
①Microsoft Visual Studio
该系列的版本有：2003、2005、2008和未来的版本；
适合开发动态的aspx网页，同时，还能制作无刷新网站、webservice功能等，仅适合高级用户。
②Jbuilder
不论是各种版本，均适合使用其开发出JSP网页，仅适合高级用户。
③记事本
别以为记事本功能非常少，软件很简单；但是，如何想使用它来制作网页，也仅适合高级用户；因为在其内容，没有任何可视化的操作可直接制作网页，而只能编写各种HTML代码、CSS代码、JS代码和各种动态脚本，方能制作出网页来。
