下载文档原格式
实验一HTML、CSS网页制作实验一、做出网页1.html，效果如下图所示：要求如下：1、诗的题目格式为红色、加粗、居中显示。
2、作者格式为红色、斜体、居右显示。
3、诗的内容字体格式从上到下分别是<h4><h3><h2><h1>，诗的第一行和第三行内容为蓝色字体。
二、做出网页2.html，效果如下图所示。
要求如下：1、图像加边框。
2、图像相对于文字左对齐。
三、做出网页3.html，效果如下图所示：要求如下：文字颜色正常是#3c3c3c、白色背景，鼠标经过时变为#FF8400、#EDEEF0色背景。
四、请做出网页4.html，效果如下图所示。
五、请做出以下网页，效果如下图所示，保存为5.html：六、请做出网页6.html，效果如下图所示：要求如下：1、使用内嵌式引入CSS样式表。
2、使用类选择器定义元素。
（1）通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px 字体；第二个字母“o”设置为红色、加粗、60px字体；第三个字母“o”设置为黄色、加粗、60px字体；第四个字母“g”设置为蓝色、加粗、60px字体。
（2）剩余字母“le”按默认样式输出。
七、请做出网页7.html，效果如下图所示。
要求如下：1、设置所有文本为宋体、12像素、绿色字体，“春季”字体颜色设为红色。
2、设置标题“春天”为16像素、红色、加粗、居中、上划线的效果。
3、设置文本首行缩进2个字符。
八、请做出网页8.html，效果如下图所示：要求如下：1、设置所有文本为微软雅黑、14像素、黑色字体。
2、新浪”、“新浪网”为红色字体，“博客首页”为蓝色字体，网址及日期为绿色字体。
3、设置标题为16像素、左对齐、下划线的效果。
4、设置文本“-百度快照-评价”为灰色、下划线的效果。
实训1-2 制作HTML5百科页面一、实训目的1.熟悉HBuilder,熟悉HTML5文档基本格式2.能够运用HTML5语法基本格式及标记、文本控制标记以及图像标记制作简单的页面。
二、案例描述制作一个HTML5百科页面“HTML5百科—首页.html”，默认效果如图1所示。
图1 HTML5百科页面默认效果当在图1所示的页面区域单击时，跳转至“HTML5百科—page01.html”页面，效果如图2所示。
图2 page01.html页面点击图2所示页面中的“返回”按钮时，返回至首页面；点击“下一页”按钮时，跳转至“HTML5百科—page02.html”页面，效果如图3所示。
图 3 page02.html页面点击图3所示页面中的“返回”按钮时，返回至首页面；点击“上一页”按钮时，跳转至“HTML5百科—page01.html”页面。
三、案例分析为了提高网页制作的效率，每拿到一个页面的效果图时，都应当对其结构和样式进行分析。
下面，将分别针对首页面、page01页面及page02页面进行分析。
1.首页面效果分析观察首页面效果图1可以看出，页面中只有一张图像，点击图像可以跳转到“page01.html”页面，可以使用<a>标记嵌套<img>标记布局，使用<img />标记插入图像，并通过<a>标记设置超链接。
2.page01页面效果分析观察效果图2可以看出，page01页面中既有文字又有图片。
文字由标题和段落文本组成，并且水平线将标题与段落隔开，它们的字体和字号不同。
同时，标题居中对齐，段落文本中的某些文字加粗显示。
所以，可以使用<h2>标记设置标题，<p>标记设置段落，<strong>标记加粗文本。
另外，使用水平线标记<hr />将标题与内容隔开，并设置水平线的粗细及颜色。
此外，需要使用<img />标记插入图像，通过<a>标记设置超链接，并且对<img />标记应用align属性和hspace属性控制图像的对齐方式和水平距离。
实习一网页设计（HTML）一、实习目的1.了解HTML文档结构；2.初步掌握基本标记的使用；3.能够运用文本编辑器制作简单网页。
二、实习内容1.学习EditPlus文本编辑器的使用。
2.使用EditPlus制作只有一行文字的网页，了解HTML文档结构，并在IE浏览器中打开编写的网页文件，查看运行效果；3.在网页中添加多段文本内容，并对页面格式进行设置排版，制作一个简单文字内容的网页；4.在网页中添加图片，并对页面格式进行设置排版，制作一个简单图文内容的网页；5.制作一个索引网页，建立与前面网页之间的超连接；6.制作一个简单的个人主页。
三、预备知识1.网页的基本组成；2.HTML语言：常用HTML标记及其属性；标记作用常用属性Html 网页文件标记Body 页面标记bgcolor,background,textP 段落标记alignbr 换行标记H1～h6 标题标记alignHr 水平线标记size,width,colorFont 字体标记size,face,colorimg 图像标记Src,height,width,alt,aligna 超链接标记Href3.网页制作方法。
四、实习步骤1.学习EditPlus文本编辑器的使用打开EditPlus显示如图1-1界面，通过“文件”→“新建”→“html网页”新建一个页面，如图1-2所示。
在代码区中最外层是html标记，html标记中包含了head标记和body标记，实习中我们只改head标记中内嵌的title标记中的文本，制作页面的内容通过相关标记在body中标记。
在工具栏中分两行，第一行是编辑器的工具栏，第二行是快捷插入标记的工具栏。
现在鼠标分别停留在第二行的工具上，注意提示并记录，以备后用；特别强调颜色工具只是直观输入颜色编码（用在给颜色相关属性赋值中）。
图1-1 editplus界面图1-2 新建html 网页界面2.使用EditPlus制作一行文字的网页●使用EditPlus新建一个空白网页，观察网页的基本结构，了解基本结构所用标记的作用，保存文件，在IE浏览器中查看网页运行效果。
实习一HTML标记基本应用与网页设计一、实习目的1. 熟悉Dreamweaver 的工作环境；2. 掌握Dreamweaver站点管理功能；3. 掌握Dreamweaver制作网页的基本方法；4. 掌握网页制作中的利用表格布局方法。
二、实习内容1. 熟悉Dreamweaver的工作环境；2. Dreamweaver管理站点功能；3. 制作图文混排的网页；4. 制作图片展示网页；5. 制作个人网站首页。
三、实习步骤1.熟悉Dreamweaver的工作环境。
启动Dreamweaver，熟悉Dreamweaver工作环境,了解Dreamweaver的界面的组成。
2. Dreamweaver管理站点①创建站点打开“站点”菜单，单击“新建站点”，按照向导步骤完成站点的创建。
②查看站点目录结构单击“文件”面板,即可查看站点目录结构。
③网站其它目录根据要制作的网站的内容，可以建立相应的目录，用以分类存放网站制作中的相关文件。
在本站点中，请建立如下目录车xiangce和aihao，然后分别在这两个目录中建立文件夹images。
注意：网站目录结构一般在网站创建初期就完成，但也可以在制作网站过程中，随时根据要求建立。
3.制作一个图文混排的网页4.制作一个图片展示网页5.制作个人主页（首页）网页设计时，网页的布局方式将直接影响页面的外观，同时也是体现设计师的水平的一个标准。
在设计布局时，通常采用表格的方式。
在本网站首面的制作中，我们也将使用表格方式-2-布局。
四、思考问题1. 如何管理网站文件？首先将图片很和HTML文件分别放到不同的文件夹中，以便修改和查看，再者就是建立比较系统的文件结构体系。
2. 如何规划和设计个人主页？第一，要有合理的布局，比如板块，颜色背景等；第二，内容要精彩，切合主题。
五、实验总结在本实验中对网页设计有了初步认识，基本掌握了网页制作中的利用表格布局方法，但是觉得HTML相比CSS中有些操作不好实现，尽管这次实习基本上都是用HTML实现的，但在文字字体修改和行间距中试用了一下CSS，效果更好一些。
03第3章制作图⽂混排⽹页.第3章制作图⽂混排⽹页图像也是⽹页中的主要元素之⼀，图像不但能美化⽹页，⽽且能够更直观地表达信息。
在页⾯中恰到好处地使⽤图像，能使⽹页更加⽣动、形象和美观。
【教学导航】3.1课前准备（1）在本地硬盘创建⽂件夹（2）启动Dreamweaver CS3通过Windows的【开始】菜单启动Dreamweaver CS3。
3.2课堂引导训练及评价【课堂引导训练任务描述】1、⽹页制作任务卡⽹页制作任务卡如表3-1所⽰。
表3-1⽹页制作任务卡⽹页制作任务跟踪卡如表3-2所⽰。
表3-2⽹页制作任务跟踪卡【⽹页效果展⽰】⽹页index0301.html的浏览效果如图3-1所⽰。
【任务完成过程】3.2.1应⽤“⾼级”⽅式创建站点“瀑泉游”【操作要求】应⽤【站点定义】对话框的“⾼级”⽅式创建站点“瀑泉游”。
50第3章制作图⽂混排⽹页图3-1图⽂混排⽹页的浏览效果【实施过程】（1）打开【管理站点】对话框（2）打开【站点定义】对话框（3）设置站点的“本地信息”在“分类”列表中单击选择“本地信息”选项，输⼊或选择以下各项：②在“本地根⽂件夹”⽂本框中输⼊根⽂件夹“D:\E游天下\03第3章制作图⽂混排⽹页\”。
③在“默认图像⽂件夹”⽂本框中输⼊“D:\E游天下\03第3章制作图⽂混排⽹页\task03-1\images\”。
也可以打开对话框选择⼀个⽂件夹。
④输⼊本机的HTTP地址，如http://172.16.7.26/Etour/。
（4）设置站点的“远程信息”在【管理站点】对话框中单击【完成】按钮，新建站点便完成。
3.2.2应⽤“⽂件”⾯板新建⽹页“index0301.html”【操作要求】应⽤“⽂件”⾯板在站点“瀑泉游”中新建⼀个⽹页⽂档“index0301.html”。
【实施过程】（1）打开“⽂件”⾯板如果“⽂件”⾯板处理隐藏状态，则单击菜单【窗⼝】→【⽂件】打开“⽂件”⾯板。
（2）新建⽹页⽂档在“⽂件”⾯板中站点“瀑泉游”的⽂件夹“task03-1”上单击右键，在弹出的快捷菜51Dreamweaver CS3⽹页制作案例教程单中单击【新建⽂件】菜单项，如图3-7所⽰。
文章标题：深度探究HTML5画布及多媒体实验一、HTML5画布概述在Web开发领域，HTML5画布（Canvas）是一个非常强大的元素，可以用来绘制图形、创建动画和处理多媒体。
它为开发者提供了丰富的API，使得我们可以更加灵活地控制页面上的图形和多媒体内容。
作为一个前端工程师，我对HTML5画布及多媒体实验进行了深度探究和调试，希望通过这篇文章和大家共享我的体会和经验。
二、调试过程1.准备工作为了进行HTML5画布及多媒体的实验，我首先准备了一个简单的HTML页面，并在其中引入了一个Canvas元素。
随后，我使用JavaScript来操作画布，绘制基本的图形和实现动画效果。
在多媒体方面，我利用HTML5的视频和音频标签，嵌入了一些多媒体内容。
通过这些准备工作，我可以进行接下来的实验和调试工作了。
2.绘制基本图形在实验过程中，我首先尝试使用Canvas来绘制基本的图形，如矩形、圆形和线条。
通过研究Canvas的API文档和示例代码，我逐渐掌握了Canvas的绘图基本知识，理解了如何设置画布的大小、绘制不同的形状和填充颜色。
在这个过程中，我特别关注了Canvas的坐标系统和绘图方法，以便更加灵活地控制图形的位置和样式。
3.实现动画效果我开始尝试在Canvas上实现一些简单的动画效果。
我使用JavaScript的定时器功能，定期更新画布上的图形位置，从而呈现出流畅的动画效果。
在实现动画效果的过程中，我遇到了一些性能和兼容性的问题，通过不断调试和优化代码，最终实现了较为稳定和流畅的动画效果。
我意识到，实现高质量动画效果需要综合考虑性能、浏览器兼容性和用户体验等因素，这对于我以后的开发工作非常重要。
4.处理多媒体内容除了Canvas绘图，我还尝试在HTML页面中嵌入了一些多媒体内容，包括视频和音频。
通过学习HTML5多媒体标签的用法和属性，我成功在页面上展示了一些多媒体内容，并实现了一些简单的交互效果。
我通过调试和测试，了解了不同浏览器对多媒体内容的支持情况，以及如何优化多媒体内容的加载和播放效果。
实训1-2 制作HTML5百科页面一、实训目的1.熟悉HBuilder,熟悉HTML5文档基本格式2.能够运用HTML5语法基本格式及标记、文本控制标记以及图像标记制作简单的页面。
二、案例描述制作一个HTML5百科页面“HTML5百科—首页.html”，默认效果如图1所示。
图1 HTML5百科页面默认效果当在图1所示的页面区域单击时，跳转至“HTML5百科—page01.html”页面，效果如图2所示。
图2 page01.html页面点击图2所示页面中的“返回”按钮时，返回至首页面；点击“下一页”按钮时，跳转至“HTML5百科—page02.html”页面，效果如图3所示。
图 3 page02.html页面点击图3所示页面中的“返回”按钮时，返回至首页面；点击“上一页”按钮时，跳转至“HTML5百科—page01.html”页面。
三、案例分析为了提高网页制作的效率，每拿到一个页面的效果图时，都应当对其结构和样式进行分析。
下面，将分别针对首页面、page01页面及page02页面进行分析。
1.首页面效果分析观察首页面效果图1可以看出，页面中只有一张图像，点击图像可以跳转到“page01.html”页面，可以使用<a>标记嵌套<img>标记布局，使用<img />标记插入图像，并通过<a>标记设置超链接。
2.page01页面效果分析观察效果图2可以看出，page01页面中既有文字又有图片。
文字由标题和段落文本组成，并且水平线将标题与段落隔开，它们的字体和字号不同。
同时，标题居中对齐，段落文本中的某些文字加粗显示。
所以，可以使用<h2>标记设置标题，<p>标记设置段落，<strong>标记加粗文本。
另外，使用水平线标记<hr />将标题与内容隔开，并设置水平线的粗细及颜色。
此外，需要使用<img />标记插入图像，通过<a>标记设置超链接，并且对<img />标记应用align属性和hspace属性控制图像的对齐方式和水平距离。
【html5】简单的html5网页实例讲解对象：【html5】简单的html5网页实例作者：融水公子 rsgz文章出处： [其他平台均为盗版]实例1：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><article><header><h1>我是Article</h1><p>创建时间：<time pubdate="pubdate">2018/8/31</time>< /p></header><p><b>Aticle</b>是一个独立的区域</p><footer><p><small>融水公子版权所有！</small></p></footer></article></body></html>实例2：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><article><header><h1>我是Article</h1><p>创建时间：<time pubdate="pubdate">2018/8/31</time>< /p></header><p><b>Aticle</b>是一个独立的区域</p><section><h2>读者评论：</h2><article><header><h3>读者：朱朝斌</h3><p><time pubdatedatetime="2018/8/31">2小时前！</time></p></header><p>文章很好！</p></article><article><header><h3>读者：小蛛丝</h3><p><time pubdatedatetime="2018/8/31">2小时前！</time></p></header><p>文章很好！</p></article></section><footer><p><small>融水公子版权所有！</small></p></footer></article></body></html>提醒：1 建议大家电脑浏览我的网页，因为手机浏览网页代码会自动缩成一行，很不方便2 如果下面文章格式很乱，那就是盗版文章。
XXX职业技术学院202X级《WEB开发基础》课程标准课程代码XXXXXX课程性质专业平台课课程学分4总学时64适用专业软件技术专业制（修）订日期202X-X-XX执笔审核一、课程定位本课程是软件技术专业群的平台课，是培养学生B/S架构项目开发的基础必修课程。
本课程主要培养学生的网站设计和开发能力，通过“教、学、做”一体化教学，使学生能熟练掌握PC端网页、WebApp自适应网站、响应式网站的开发规范和制作技巧，培养学生的创新能力、审美能力、自学能力、沟通能力、解决问题能力、自我管理能力、团队协作能力，为后续课程及其他程序设计课程的学习和应用打下基础。
先修课程：《计算机应用基础》《程序设计基础》。
后续课程：《Java Web应用开发》《Vue前端应用开发》《微信平台应用开发》等。
二、课程目标（-）总体目标通过本课程的学习，学生能了解WWW、HTTP、HTML5、CSS3的定义、概念和作用；了解服务器、客户端、浏览器的概念和作用，熟悉web项目规划和需求分析的基本方法，具备web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。
熟练掌握HTML5语言中的各种文本格式、字符格式、段落设置、列表、标记的使用方法；熟练CSS3样式表制作方法和技巧；熟悉PC端网站、WebApp自适应网站、响应式网站的排版技巧，根据前端设计师的任职要求，参照计算机程序员职业标准和网站开发和网页制作的职业资格标准，改革课程体系和教学内容。
课程内容突出职业能力培养，体现基于职业岗位分析和能力为导向的课程设计理念，以真实工作任务或社会产品为载体组织教学内容，在真实工作情境中采用新的教学方法和手段进行实施。
（二）具体目标课程教学目标具体体现为专业知识、专业技能和专业素质三方面的目标。
（1）专业知识目标①掌握HTML5与CSS3基础知识及最新技术。
②熟悉企业网站制作具体流程。
③掌握不同类型静态网站的开发技巧。
实验一HTML基础实验
学号: 姓名:
1.1 实验目的
通过实验掌握HTML的文档的结构、代码规范和网页创建的过程；掌握搭建HTML5浏览器环境的方法；掌握超级链接、图像、表格和列表元素的用法。
1.2 实验要求
实验项目见书本P23页（第1题省略），请完成实验并将实验过程写在下面的实验内容部分，每题要求给出题目、源代码（带必要的注释）以及程序运行效果截图。
1.3 实验内容
题2.1：使用文字与段落标签p制作如下图1所示的网页。
源代码：
运行效果截图：
题2.2：使用嵌套列表制作如下图2所示的网页。
源代码：
运行效果截图：
题2.3：使用表格和图像标签制作如下图所示的网页。
源代码：
运行效果截图：
1.4 实验总结。
目录第1章 (4)Web前端开发入门实训案例一 (4)双列布局 (4)•一、要求 (4)•二、案例背景 (4)•三、预备知识 (4)•四、实现过程 (5)•五、项目实训案例评分标准 (6)第2章 (7)Web前端开发入门实训案例二 (7)滑动门与css精灵综合应用 (7)•一、要求 (7)•二、案例背景 (7)•三、预备知识 (7)•四、实现过程 (8)•五、项目实训案例评分标准 (9)第3章 (10)Web前端开发入门实训案例三 (10)Css下拉弹出菜单 (10)•一、要求 (10)•二、案例背景 (10)•三、预备知识 (10)•四、实现过程 (11)•五、项目实训案例评分标准 (12)第4章 (13)Web前端开发入门实训案例四 (13)脚本入门学习之下拉菜单 (13)•一、要求 (13)•二、案例背景 (13)•三、预备知识 (14)•四、实现过程 (14)•五、项目实训案例评分标准 (15)第5章 (16)Web前端开发入门实训案例五 (16)选项卡效果解析 (16)•一、要求 (16)•二、案例背景 (16)•三、预备知识 (16)•四、实现过程 (17)•五、项目实训案例评分标准 (19)第6章 (20)Web前端开发入门实训案例六 (20)弹窗和表单布局与校验 (20)•一、要求 (20)•二、案例背景 (21)•三、预备知识 (21)•四、实现过程 (21)•五、项目实训案例评分标准 (24)第七章 (25)Web前端开发入门实训案例七 (25)Jquery跑马灯插件效果解析 (25)•一、要求 (25)•二、案例背景 (25)•三、预备知识 (25)•四、实现过程 (25)•五、项目实训案例评分标准 (28)第八章 (29)Web前端开发入门实训案例八 (29)QQ相册图片切换及其扩展 (29)•一、要求 (29)•二、案例背景 (29)•三、预备知识 (30)•四、实现过程 (30)•五、项目实训案例评分标准 (34)第9章 (35)Web前端开发入门实训案例九 (35)图文排版特效 (35)•一、要求 (35)•二、案例背景 (35)•三、预备知识 (35)•四、实现过程 (36)•五、项目实训案例评分标准 (39)第10章 (40)2Web前端开发入门综合实训案例八 (40)综合整站 (40)•一、要求 (40)•二、案例背景 (40)•三、预备知识 (40)•四、开发过程 (40)•五、项目实训案例评分标准 (49)Web前端开发入门参考手册 (50)常用html标签基本格式 (51)选择符 (53)标签规范 (55)样式引用及其常见样式 (56)常用结构样式 (56)盒模型所有元素都可以看成一个盒子 (57)常用文本样式： (57)css高级......................................................................................................................................4第1章Web 前端开发入门实训案例一双列布局一、要求在页面上创建一个居中并且带有外部边框的双列布局，左侧宽度200px,右侧宽度780px ， 请认真分析题目要求完成实例。
HTML实验实验一：简单的HTML标签的使用1．实验目的练习使用HTML常用标签设计简单的页面。
2. 实验内容3.作业评分标准：能够完成实验要求运行的，视完成效果80-100分不等。
实验二：文字编辑及图片插入1．实验目的掌握文字编辑的标签、图片编辑标签的使用，建立图文混排的页面。
2. 实验内容参考样图，编辑与之相类似的图文混排HTML页面，包含标题、文本、图片等元素，对文本内容的字体、字号、颜色进行编辑。
3.作业评分标准：能够完成类似实验界面运行的，视完成效果80-100分不等。
实验三：设计多元素混合的注册界面1．实验目的很多网站只对注册用户提供某种服务，要成为注册用户，必须进行注册，一般注册的方式都要通过注册页面来收集用户的信息，本次实验就是综合表格、表单、文本框、图片等元素设计一个用户注册页面register.htm。
2．实验步骤（1）建立form表单（2）在表单中建立表格，添加单选框、复选框、文本框、图片等元素。
关键代码：<form name="form1"method="post"action=""><table width="75%"border="1"><tr><td width="24%"><div align="left">用户名:</div></td><td width="76%"><input name="textfield"type="text"maxlength="10"></td></tr><tr><td><div align="left">密码：</div></td><td><input type="password"name="textfield2"></td></tr><tr><td><div align="left">密码确认：</div></td><td><input type="password"name="textfield3"></td></tr><tr><td><div align="left">电子邮件：</div></td><td><input type="text"name="textfield4"></td></tr><tr><td>是否公开该邮件地址</td><td><input type="radio"name="radiobutton"value="radiobutton">公开<input name="radiobutton"type="radio"value="radiobutton"checked>不公开</td></tr><tr><td>爱好：</td><td><input type="checkbox"name="checkbox"value="checkbox">聊天<input type="checkbox"name="checkbox2"value="checkbox">购物<input type="checkbox"name="checkbox3"value="checkbox">运动<input type="checkbox"name="checkbox4"value="checkbox">看电影<input type="checkbox"name="checkbox5"value="checkbox">音乐<input type="checkbox"name="checkbox6"value="checkbox">读书</td></tr><tr><td>个人简介</td><td><textarea name="textarea"rows="9"></textarea></td></tr></table><p><input type="submit"name="Submit"value="提交"><input type="reset"name="Submit2"value="重设"><input name="imageField"type="image"src="/HTML/img/gohome.jpg" width="50"height="50"border="0"></p></form>3.页面效果图4.拓展与提升依据实验关键代码提示，完成实验运行，并参考样例完成练习：(1)参考实例设计如下图所示类似的界面，界面内容自拟，每个同学不能完全相同，要求使用表单、表格、单选框、复选框、文本框等元素完成。
实验三：制作图文混排网页
一、实验任务：
1、掌握设置网页的背景图像，掌握插入图像与设置图像属性，掌握制作图文混排网页。
2、完成【任务3-2】。
3、根据任务3-2的制作，观察和说明图片的尺寸、格式以及图片文件大小之间的相互关系。
二、实验步骤：
1．创建文件夹“Unit03”并在其中创建子文件夹task03-2”
2.创建站点。
3．设置网页背景颜色，背景图像和左右上下边距。
4.设置网页标题。
5.在网页中输入多个文本标题和多段文本。
6设置文本标题和小标题。
7.设置文本字体和大小。
8.插入图片并设置宽和高。
替换文本图片。
9.预览效果。
三．图片的尺寸、格式以及图片文件大小之间的相互关系：
图片尺寸变化不影响图片的格式和图片文件的大小。
图片的大小由像素的多少决定。
小的图片放大是会模糊的，把小图片改大的清晰度不变。
三、实验体会
通过这一次的实验，我发现我还有很多不会的地方，我会继续努力，提高自己的能力。
实验一: HTML图片和文字排版一、实验目的1、掌握文字显示控制的基本方法；2、掌握图片的插入及页面排版。
二、基本要求完成下图所示页面：具体说明如下：(保存此网页文件于我给你们的目录下，这样网页文件与要用到的图片文件就在同一个目录下了，在代码中就可直接只写图片的文件名和扩展名即可了)1、网页标题：畅想未来；2、页面背景图片：img3_3.jpg；左、右边距均为10；3、主题：畅想未来（最大标题字，居中）；4、滚动字：<marquee> <font face="Georgia, Times NewRoman, Times, serif" size="2" color="#FF0000"> 具体内容</font> </marquee>；5、水平线：居中，长度为60%，蓝色；6、大段文字："华文新魏" size="4" color="#CC0066"；7、大图片：图片"img3_1.gif" width="322" height="230"align="left"，移于其上时提示："科幻图像"，无边框，水平边距：608、输入“未来都市、未来旅游、未来电话”等，H2的标题字，face="华文新魏" color="#3366CC"，并排好版；9、下面是图：img3_2.gif，居中，width="800" height="8"；10、“与我联系”及下面的图img4_1.gif（width="33" height="30" alt="与我联系" border="0"）。
