上机7 网页制作Word文档下载推荐.docx
- 文档编号:19718329
- 上传时间:2023-01-09
- 格式:DOCX
- 页数:29
- 大小:1.63MB
上机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、制作动态个人主页(要求运用框架、图片处理、网页横幅、滚动字幕等)。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 上机7 网页制作 上机 网页 制作