上机7 网页制作Word文档下载推荐.docx
《上机7 网页制作Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《上机7 网页制作Word文档下载推荐.docx（29页珍藏版）》请在冰豆网上搜索。
单击“开始—程序—附件—记事本”，打开记事本窗口。
第二步：
在记事本中，输入如图12.1语句：
12.1用记事本编辑HTML语句
第三步：
点击“文件—保存”保存类型为12-1.htm。
第四步：
在浏览器中打开12-1.htm，如图12.2所示
注意：
制作和编辑html文件可以使用记事本、写字板和其他的文本编辑软件，也可以使用网页制作工具直接生成，但生成的代码一般较为复杂，有些功能实现还需要修改源代码，所以掌握基本的html语句的结构、语法和常用的标记是必要的。
7.2实验目的
1、理解HTML超文本标记语言的结构和语法，掌握常用的标记符的设置与使用，如链接标记、字体标记、表格标记等。
2、能够制作动态网页，熟练使用软件工具编辑图像，能够在网页中使用视频和音频等元素，能够在FrontPage中插入横幅广告，在页面中应用动态Html效果，建立及应用CSS样式等。
7.3实验内容
一、基本工具使用
1.标题
TITLE：
title>
文件标题<
/title>
title标明该html文件的标题，是对文件内容的概括。
文件的标题一般不会显示在文本窗口中，而以窗口的名称显示出来。
除了标识窗口外，当将某一homepage存入书签或文件时，title还用作书签名或缺省的文件名。
HN：
hn>
文档标题<
/hn>
标题元素有6种，分别为h1,h2,…h6，用于表示文章中的各种标题。
标题号越小，字体越大。
hn有对齐属性，用align＝##表示，属性值可以是left标题居左、center标题居中、right标题居右。
在记事本中，输入如图12.3语句。
12.3标题TITLE和HN
保存为htm文件，在浏览器中打开，如图12.4所示。
12.4浏览器中标题TITLE和HN
2.分段<
P>
分段元素<
用于划分段落，控制文本的位置，比较常用的属性是：
align＝##可以是left、center、right。
在记事本中，输入如下语句。
html>
head>
段落标签<
/head>
body>
PALIGN=CENTER>
浣溪沙<
/P>
一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。
无可奈何花落去，似曾相识燕归来。
小园香径几徘徊。
/body>
/html>
保存为htm文件，在浏览器中打开，如图12.5所示
12.5段落标签练习
3.换行<
br>
：
是一个单标签，用于创建回车换行。
单击“开始—程序—附件—记事本”，打开记事本窗口。
换行示例<
登鹳雀楼 白日依山尽，黄河入海流。
欲穷千里目，更上一层楼。
palign=“center”>
登鹳雀楼<
白日依山尽，<
黄河入海流。
欲穷千里目，<
更上一层楼。
/p>
保存为htm文件，在浏览器中打开，如图12.6所示
12.6换行示例
4.表格
基本格式为：
table>
...<
/table>
用来定义表格，<
tr>
定义表行，<
td>
定义表列，<
tableborderwidth=#height=#>
定义表格的尺寸，colspan定义跨多列的表元，rowspan定义跨多行的表元。
表格练习<
tableborder="
1"
width="
167"
height="
144"
>
<
<
tdcolspan="
2"
align="
center"
级别<
/td>
tdalign="
名称<
/tr>
tdrowspan="
一级<
&
gt;
=90<
优秀<
=85<
良好<
二级<
合格<
保存为htm文件，在浏览器中打开，如图12.7所示
12.7表格练习
5.文字
设置字号大小的基本格式<
fontsize=#>
FONT通过指定SIZE设置字号大小，SIZE属性值范围为1－7，其中缺省值为3。
SIZE属性值之前加上“＋”、“－”字符，可指定相对于字号初始值的增量或减量；
设置字体的基本格式是<
fontface="
字体"
；
设置文字颜色的格式为 <
fontcolor=color_value>
文字练习<
CENTER>
fontsize=7>
这是size=7的字体<
/font>
fontsize=+7>
这是size=+7的字体<
fontsize=1>
这是size=1的字体<
fontsize=-1>
这是size=-1的字体<
FONTface="
楷体"
/FONT>
宋体"
黑体"
Arial"
Welcommyhomepage.<
B>
黑体字<
/B>
I>
斜体字<
/I>
U>
加下划线<
/U>
BIG>
大型字体<
/BIG>
FONTCOLOR=RED>
色彩斑斓的世界<
FONTCOLOR=#00FFFF>
/CENTER>
保存为.htm文件，在浏览器中打开，如图12.8所示
12.8文字练习
为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：
…<
粗体
斜体
加下划线
TT>
打字机字体
大型字体
SMALL>
/SMALL>
小型字体
BLINK>
/BLINK>
闪烁效果
6.列表标记
列表标记有无序号列表和有序号列表。
无序号列表使用的一对标签是<
ul>
/ul>
，序号列表使用的标签是<
OL>
/OL>
，还可加入TYPE属性。
每一个列表项前使用<
LI>
。
其结构如下所示：
<
UL>
或<
<
第一项
第二项
第三项
<
/UL>
无序号列表<
这是一个无序号列表：
国际互联网提供的服务有：
<
WWW服务
文件传输服务
电子邮件服务
远程登录服务
其它服务
保存为.htm文件，在浏览器中打开，如图12.9所示
7.9无序列表
7.链接标记
在html文件中用链接指针<
a>
指向一个目标，它是成对标记符。
其基本格式为：
ahref=“url”>
字符串<
/a>
，其中href是链接文件的地址，target是链接目标的地址。
其中：
指向电子邮件的链接为：
ahref=“mailto:
agui@”>
联系我们<
指向站点内文件的链接为：
ahref=“index.htm”>
返回首页<
指向其它网站文件的链接为：
ahref=“”>
友情链接<
链接举例<
p>
保存为.htm文件，在浏览器中打开，如图12.10所示。
二、动态网页制作
1.编辑图像
制作网页需要大量的图片，可以使用图片处理工具如画图、Illstrator、Photoshop等对图片进行制作和修改。
我们以Photoshop为例进行介绍，对图片进行适当的处理。
单击“开始—程序—AdobePhotoshop7.0”，打开Photoshop窗口。
单击“文件—打开”命令，打开你所要修改的图片文件。
点击“图像—图像大小”，在弹出的对话框中将图像的高度设置为1000像素，宽度设置为600像素（如果无法设置，可以去掉约束比例），点击确定，如图12.11所示。
点击“滤镜—风格化—风”命令，按个人需要进行设置，然后单击确定，如图12.12所示。
第五步：
单击“文件—保存为”，在弹出的对话框中设置保存路径、文件名称和文件的扩展名，保存为JPEG格式，单击确定完成，如图12.13所示。
12.11图像大小修改
12.12滤镜的使用
12.13图像的保存
第六步：
按照此种方法，再打开两张图片，调整大小为200X100像素，并分别应用动感模糊、水波、马赛克拼贴、镜头光晕等效果，最后保存图像，如图12.14。
12.14图像滤镜效果的使用
2.FrontPage的简单应用
（1）在FrontPage中应用动态HTML效果，操作步骤如下：
单击“开始—程序—MicrosoftOffice—FrontPage”打开FrontPage窗口。
单击“文件—保存”，将文件保存为Index.htm。
单击“工具—自定义”，弹出如图12.15所示窗口，选中DHTML效果。
出现如图12.16所示。
12.15DHTML效果设置
12.16DHTML效果工具栏
在FrontPage设计窗口中输入“天津现代职业技术学院”，然后选中文本，在出现的DHTML效果工具栏中进行设置，如图12.17所示。
12.17DHTML效果设置方法
保存后，在浏览器中进行预览，当鼠标放置在文本上时，则出现如图12.18所示。
12.18DHTML效果
（2）在FrontPage中插入横幅广告，操作步骤如下：
单击“工具—自定义”，弹出如图12.19所示窗口，选择“命令—插入”，找到“横幅广告管理器”，用鼠标将其拖至工具栏上。
12.19横幅广告管理器按钮
打开“横幅广告管理器对话框”，设置高度为100，宽度为320，过渡效果为分解，每幅图片显示五秒，单击“添加”按钮，如图12.20所示，然后选择要添加的另外横幅图片，如图12.21，单击“确定”按钮。
12.20添加图片一12.21添加图片二三
保存后，在浏览器中进行预览，每隔五秒变换一次图片。
（3）在FrontPage中嵌入视频，操作步骤如下：
单击“插入—WEB组件”，打开“插入WEB组件”对话框，找到“高级控件”，选中高级控件中的“插件”，如图12.22、12.23所示。
12.22插入WEB组件
12.23属性设置
在“插件属性”对话框中，浏览选择要加入的视频文件，并对其大小和布局进行设置，也可以隐藏插件，单击“确定”。
如图12.24所示。
12.24嵌入视频文件
播放的控件太小，把它变大，回到设计模式，单击视频的图标，拖动视频图标周围的小黑点，如图12.25所示，保存文件，在浏览器中进行预览，如图12.26所示。
12.25视频文件图标调节12.26视频文件
（4）在FrontPage中嵌入、插入音频，操作步骤如下：
嵌入音频：
同“嵌入视频”前三步。
在“插件属性”对话框中，浏览选择要加入的音频文件，并对其大小和布局进行设置。
保存后在浏览器中预览，如图12.27所示。
如果想要让该音频成为背景音乐，可以做如图12.28设置，去掉提示信息并隐藏插件。
12.27播放的音频文件12.28属性设置
注：
嵌入要使用插件来播放音频文件，离开了插件，嵌入的文件就不能够正常的播放。
而插入则不同，它在播放多媒体时并不依赖插件，只和我们使用的浏览器有关。
插入音频：
在网页内右击鼠标，选择“网页属性”，如图12.29所示。
单击背景音乐框的浏览按钮，在默认情况下，不限次数复选框是选中的，表示文件将不断循环播放，单击"
确定"
按钮。
12.29背景音乐的设置
（5）在FrontPage中嵌入FLASH，操作步骤如下：
单击“插入—WEB组件”，打开“插入WEB组件”对话框，找到“高级控件”，选中高级控件中的“Flash影片”，如图12.30所示。
12.30插入Flash影片对话框
单击“完成”，浏览选择要加入的Flash影片，选择完成后，右击插入的对象，则可以对其大小和布局进行设置，如图12.31所示。
12.31Flash影片属性设置
网页中插入的Flash影片的格式为SWF。
应用嵌入视频的方式也可插入Flash影片。
（6）在FrontPage中使用表格，操作步骤如下：
利用表格设计如下图所示的网页:
12.32网页设计
单击“表格—插入表格”，弹出如12.33所示对话框，表格属性为：
4X1行列、对齐方式为水平居中、宽度为800像素、高度为400像素、单元格边距、衬距都为0、边框为5像素、颜色为{66,CC,FF}，如下图12.33所示。
12.33表格属性设置
选定第一个单元格，右键单击，选择“单元格属性”，弹出如12.34对话框，将第一单元格的高度设为74像素。
12.34单元格高度设置
在第一单元格处右键单击，选择“拆分单元格”，将其拆分为两列，第一列的宽度为182像素，如图12.35、12.36所示，在第一列中输入“经典广告网站”，在第二列中插入Flash动画，并对其格式进行设置。
12.35拆分单元格12.36设置第一列宽度
选定第二行，右键单击，选择“单元格属性”，将其高度设置为19像素，背景颜色为{66,CC,FF}。
第七步：
第三行高度为216像素，插入一个AVI视频。
第八步：
第四行高度为17像素，按照要求输入文字。
（7）在FrontPage中建立及应用CSS文件，在FrontPage里可以通过三种方式给网页增加样式表。
以外部样式表为例，操作步骤如下：
单击“文件—新建”，在如图12.37所示对话框中，选择普通样式表，确定。
12.37样式表的建立
单击如图12.38所示的样式工具栏中的样式按钮，弹出如图12.39所示的对话框，在该对话框中选择“新建”。
12.38样式工具栏
12.39样式表的建立
单击“样式”对话框中的“新建”按钮，弹出“新样式”对话框，输入样式名称“test”，单击“格式”按钮进行字体、段落、边框等设置，如图12.40所示。
12.40样式设置
单击“确定”按钮，完成样式文件的创建，执行“文件—保存”命令，以Mystyle.css名称进行保存。
新建网页并保存，在页面中输入“这是样式的应用”。
执行“格式—样式表链接”命令，在打开的对话框中进行设置，如图12.41所示，单击“添加”命令，将样式表文件Mystyle.css文件添加进来。
12.41链接样式表
切换到HTML视图下，将<
区中的“<
这是样式的应用<
”修改为<
pclass=“test”>
，保存文件后浏览效果，如图所示。
12.41外部样式表的使用
7.4实验总结
1、利用记事本编写HTML代码并存为网页格式。
2、制作动态个人主页（要求运用框架、图片处理、网页横幅、滚动字幕等）。
升级会员 