长春工业大学软件学院 HTML网页设计基础实验指导书
HTML网页设计基础实验指导书
序号 1 2 3 4 5 6 7 实验项目名称 网页设计基础及HTML基本标签 HTML文本格式的应用 HTML 链接的应用 HTML 表格和列表的应用 HTML 表单与框架的应用 HTML和CSS综合应用 个人主页设计 学时 2 2 4 4 4 2 2 实验类型 验证性 验证性 验证性 验证性 验证性 设计性 设计性 选修类别 必修 必修 必修 必修 必修 必修 必修 每组学生数 1 1 1 1 1 1 1
1
长春工业大学软件学院 HTML网页设计基础实验指导书
实验一 网页设计基础及HTML基本标签
【实验目的】
1．掌握利用因特网进行信息游览、搜索，下载网页、图片、文字和文件； 2．对给定的网站，能指出网站的链接结构、目录结构、页面布局方式；
3．掌握HTML的基本标签
<META>标记； 【实验环境】 </p><p>Window xp操作系统，机器联网。 【实验重点及难点】 </p><p>熟练使用浏览器进行浏览、搜索、下载。 【实验内容】 </p><p>1、根据网站制作的需要，从网上下载网页制作时需要的文字、小图片、动画及flash。 2、上网访问实际若干网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）、页面布局方式；在网上找出下列版面布局的结构形式： ⑴“T”结构布局 ⑵“口”型（“国”字型）布局 ⑷ 对称对比布局 ⑻ 海报型布局 </p><p>3、利用搜索引擎，浏览因特网上较为著名的5个网站，记录这些网站的名称、网站地址和以及相应的网页文件格式（扩展名）； </p><p>4、查看我院WWW网站主页的源代码，收藏到收藏夹中，将其设为主页，并指出该网站的链接结构、目录结构和页面布局方式。 5、构建HTML文档“我的第一个网页”： （1）从开始菜单启动记事本； </p><p>（2）在记事本中，录入一个HTML文档； </p><p>（3）设置该文档在最终在浏览器中显示的标题为“我的第一个网页”； （4）在页面添加可见的文本“我的第一个网页”； （5）使用记事本的菜单“文件”→“保存”，在“另存为”对话框中，在“保存类型”下拉列表中选择“所有文件”，录入“文件名”myfirstpage.htm，单击“保存”按钮将该页面保存到实验文件夹。 </p><p> </p><p> 2 </p><p>长春工业大学软件学院 HTML网页设计基础实验指导书 </p><p>实验二 HTML文本格式的应用 </p><p>【实验目的】 </p><p>1．掌握使用<body>标记设置网页背景颜色和文本颜色。学习使用分段标记<p></p>； 2．掌握使用<font>标记设置文字的属性； 3．掌握在网页中插入背景图片； </p><p>4．掌握在网页中插入水平线，并设置水平线的属性； 5．掌握在网页中插入背景音乐。 【实验环境】 Windows xp </p><p>【实验重点及难点】 </p><p>掌握字体、水平线等常用标记。 【实验内容】 </p><p>1、使用简单内联元素进行文字处理： （1）从开始菜单启动记事本； </p><p>（2）在记事本中，录入HTML文档； </p><p>（3）设置该文档最终显示标题为“简单文字处理”； </p><p>（4）在文档的<body>和</body>之间，插入适当元素使最终网页中显示以下内容： </p><p>这是一段文本 </p><p>这是一段文本 ? Microsoft? Windows 2007 </p><p>A = a1 + a2 + a3 这是一段文本 这是一段文本 提示 ：1、以上文字不涉及到文字字体、大小、颜色的设置，且并不居中显示。 </p><p> ? </p><p> 2、对于特殊字符，要使用字符实体。?©版权 ®注册商标 </p><p>（5）紧接着步骤（4）插入的元素插入适当元素，使得最终网页上可以显示字号为5、颜色为红色、字体为“华文彩云”的下列样式文字： </p><p>这是一段文本 </p><p>（6）紧接着步骤（5）插入的元素插入适当元素，使得最终网页上显示下列样式的文字（隶书、4号、绿色）： </p><p>这是一文本 （7）如果以上的每条文本之间没有换行，则在它们之间分别插入一个换行； </p><p> </p><p>3 </p><p>段长春工业大学软件学院 HTML网页设计基础实验指导书 </p><p>（8）使用步骤1-（5）中的方法保存当前HTML文档为simpleinline.htm。 </p><p>2、制作一个简单的网页sy2-1.htm，用记事本编辑，内容为个人简介信息。 要求： </p><p>? 搜索关键字为“个人”“主页”“简介”，标题为我的个人简介。 ? 背景为#33ccff,文本颜色为黑色，文本需分段表示。 3、用记事本编辑网页sy2-2.htm，内容为李白的诗“静夜思”。 要求：每行诗为一个段落，四行文字颜色不同，字体不同。 4、通过记事本编辑网页sy2-3.htm，实现如图页面。 </p><p> </p><p>5、通过记事本编辑网页sy2-4.htm，实现如下页面。图片自选，插入背景音乐“浮云.mp3”。 </p><p> </p><p>6、通过记事本编辑网页sy2-5.htm，实现如下页面。 </p><p> </p><p> </p><p>4 </p><p>长春工业大学软件学院 HTML网页设计基础实验指导书 </p><p>实验三 HTML超链接的应用 </p><p>【实验目的】 </p><p>1．掌握给文字添加绝对超级链接，例如：和相对超级链接，例如：； </p><p>2．掌握使用图像映像链接<MAP>； 【实验环境】 Windows xp </p><p>【实验重点及难点】 </p><p>掌握使用超级链接HTML常用标记。 【实验内容】 </p><p>1、制作一个网页sy3-1.htm，用记事本编辑。 要求： </p><p>? 网页名称为：超级链接练习 </p><p>? 以一张图片作为背景，并且设置图片固定。合理设置文字的颜色，和超级链接的颜色。 ? 插入绝对链接至长春工业大学软件学院主页。 </p><p>2、利用预格式化标签，输出如下图一段文字，在页面的顶部设置相对超级链接至页面底部，在页面的底部设置相对超级链接至顶部。 </p><p> </p><p>3、在下图上实现图像映像链接，要求点击各省对应区域弹出该省政府网站（各省政府网址：www.省名简拼.gov.cn 如吉林省政府网站：www.jl.gov.cn） </p><p> </p><p>5 </p><p></p>
<br />
<p><script type="text/javascript">s("content-m-bot");</script></p>
</div>
<div class="m-pages"><li><a>共2页: </a></li><li><a href='#'>上一页</a></li><li class="thisclass"><a>1</a></li><li><a href='1097509_2.html'>2</a></li><li><a href='1097509_2.html'>下一页</a></li></div>
<div class="down-word">
<div class="word-ico"></div>
<div class="word-tit">
<span class="docx">HTML网页设计基础实验指导书2016 .doc</span>
<span>将本文的Word文档下载到电脑</span>
</div>
<div class="word-pic"><a href="javascript:;">下载这篇word文档</a></div>
</div>
</article>
<div class="art-prenext">
<p>下一篇：<a href="/wenku/1097508.html">排球的教学方法 </a></p>
</div>
<div class="main-tab"><a class="on" href="javascript:;">相关推荐</a></div>
<script type="text/javascript">s("content-m-like");</script>
<div class="main-tab"><a class="on" href="javascript:;">相关阅读</a></div>
<div class="tab-box">
<ul class="main-new on clearfix">
<li><a href="/wenku/1420520.html" title="最精辟的建筑行业知识汇总">最精辟的建筑行业知识汇总</a></li>
<li><a href="/wenku/1420519.html" title="甲磺酸帕珠沙星氯化钠静滴治疗泌尿道感染的疗">甲磺酸帕珠沙星氯化钠静滴治疗泌尿道感染的疗</a></li>
<li><a href="/wenku/1420518.html" title="新密项目可行性研究报告通用">新密项目可行性研究报告通用</a></li>
<li><a href="/wenku/1420517.html" title="全民打怪兽世界BOSS怎么打 BOSS大战攻略">全民打怪兽世界BOSS怎么打 BOSS大战攻略</a></li>
<li><a href="/wenku/1420516.html" title="三、四年级语文各册主题思想韵语-最新教育资">三、四年级语文各册主题思想韵语-最新教育资</a></li>
<li><a href="/wenku/1420515.html" title="人教PEP版英语三年级下册Unit4WhereismycarPa">人教PEP版英语三年级下册Unit4WhereismycarPa</a></li>
<li><a href="/wenku/1420514.html" title="2016年电子化学品现状及发展趋势分析">2016年电子化学品现状及发展趋势分析</a></li>
<li><a href="/wenku/1420512.html" title="-依元素科技教育部产学合作协同育人项目申报">-依元素科技教育部产学合作协同育人项目申报</a></li>
<li><a href="/wenku/1420511.html" title="齐鲁工业大学(山轻工)2006~2015年艺术类研究">齐鲁工业大学(山轻工)2006~2015年艺术类研究</a></li>
<li><a href="/wenku/1420510.html" title="乌鲁木齐食品经营许可证办理指南">乌鲁木齐食品经营许可证办理指南</a></li>
</ul>
</div>
<div class="main-tab"><a class="on" href="javascript:;">本类排行</a></div>
<div class="tab-box">
<ul class="main-new on clearfix">
<li><a href="/wenku/5.html" title="小学班主任XX年终自我总结">小学班主任XX年终自我总结</a></li>
<li><a href="/wenku/8.html" title="音乐新版第10册教案全解">音乐新版第10册教案全解</a></li>
<li><a href="/wenku/9.html" title="让班级管理焕发新的光彩综述">让班级管理焕发新的光彩综述</a></li>
<li><a href="/wenku/12.html" title="小班主题活动说课稿《小车叭叭叭》">小班主题活动说课稿《小车叭叭叭》</a></li>
<li><a href="/wenku/13.html" title="音乐学科配备标准全解">音乐学科配备标准全解</a></li>
<li><a href="/wenku/14.html" title="小文学家小学段文学素养测试卷概要">小文学家小学段文学素养测试卷概要</a></li>
<li><a href="/wenku/15.html" title="小学生演讲稿">小学生演讲稿</a></li>
<li><a href="/wenku/16.html" title="山东省普通中小学综合实践活动教学设备配备标">山东省普通中小学综合实践活动教学设备配备标</a></li>
<li><a href="/wenku/17.html" title="小学语文四年级下词语填空概要">小学语文四年级下词语填空概要</a></li>
<li><a href="/wenku/19.html" title="小学语文二年级语文下册单元测试题-打印版概">小学语文二年级语文下册单元测试题-打印版概</a></li>
</ul>
</div>
</div>
<footer class="footer">
<p class="bt-links"><a href="https://m.diyifanwen.net/">手机版</a><span class="v-line">|</span><a href="https://www.diyifanwen.net/">PC版</a> | <a href="https://www.diyifanwen.net/about/disclaimer.html" target="_blank" rel="nofollow">免责声明</a> | <a href="https://www.diyifanwen.net/about/contact.html" target="_blank" rel="nofollow">联系我们</a></p>
<p>Copyright © 2018-2022 第一范文网 版权所有<br/>
声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。<br>客服QQ：xxxxxx 邮箱：xxxxxx@qq.com<br>
<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">渝ICP备2023013149号</a>
</p>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?1e9741f8c1b2df70963b3e7f3680f749";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</footer>
<div class="theme-popover">
<div class="theme-poptit">
<a href="javascript:;" title="关闭" class="close">×</a>
<b>游客快捷下载通道</b>（下载后可以自由复制和排版）
</div>
<div class="theme-popbod dform">
<p class="downtit">下载本文档需要支付 <i>7</i> 元</p>
<p class="chose"><span>支付方式：</span><span class="pay1"><img src="https://www.diyifanwen.net/style/images/wxpay.jpg" class="over"></span> <span class="pay2"><img src="https://www.diyifanwen.net/style/images/alipay.jpg"></span></p>
<div class="youke_pay">
<div class="wxpay"><a href="javascript:;">微信支付并下载</a></div>
<div class="alipay" style="display:none;"><a href="javascript:;">支付宝支付并下载</a>
</div>
</div>
<p class="tiaozhuan"><a href="https://www.diyifanwen.net/user/index.php" style="color:blue;">开通VIP包月会员</a> 特价：<b style="color:red;">29元/月</b></p>
<p class="downtxt">注：下载文档有可能“只有目录或者内容不全”等情况，请下载之前注意辨别，如果您已付费且无法下载或内容有问题，请联系我们协助你处理。<br>微信：xxxxxx QQ：xxxxxx</p>
</div>
</div>
<div class="theme-popover-mask"></div>
<script type="text/javascript">
//menu
$(".header .menu").on("click", function(){
$("body").append("<div class=\"mask-bg menu-mask-bg\"></div>");
$(".menu-slide").show();
$("html,body").css({height:$(window).innerHeight(), overflow:"hidden"});
setTimeout(function(){
$(".menu-slide").css({transform:"translateX(-50px)"});
},50)
});
$("body").on("click", ".menu-mask-bg", function(){
$(".menu-slide").css({transform:"translateX(-100%)"});
$(".menu-mask-bg").remove();
$("html,body").removeAttr("style");
setTimeout(function(){
$(".menu-slide").hide();
},300)
});
//search
$(".header .search").click(function(){
if($(".search-box").is(":hidden")){
$(this).children("i").removeClass("search-icon").addClass("close-icon");
$(".search-box").fadeIn("fast");
}else{
$(this).children("i").removeClass("close-icon").addClass("search-icon");
$(".search-box").fadeOut("fast");
}
});
//nav
if($(".nav").length > 0) {
var nav = new Swiper(".nav",{
slidesPerView: "auto"
});
}
</script>
<script type="text/javascript">
$(".user-login").click(function () {
$(".drop-menu").toggle();
});
</script>
<script type="text/javascript">
$(".word-pic a").click(function(){
location.href = "https://www.diyifanwen.net/plus/word.php?id=1097509";
});
// }
// $(".pay1 img").click(function () {
// $(".wxpay").css("display", "block");
// $(".alipay").css("display", "none");
// $(".pay1 img").addClass("over");
// $(".pay2 img").removeClass("over");
// });
// $(".pay2 img").click(function () {
// $(".wxpay").css("display", "none");
// $(".alipay").css("display", "block");
// $(".pay1 img").removeClass("over");
// $(".pay2 img").addClass("over");
// });
</script>
<script type="text/javascript">
// var userinfo = function(data) {
// if (data.code === "2" || data.code === "3") {
// $(".word-pic a").click(function(){
// $(".theme-popover-mask").fadeIn(100);
// $(".theme-popover").slideDown(200);
// var downid = "1097509"
// $(".wxpay a").click(function(){
// var payurl = "https://www.diyifanwen.net/hupipay/payment_pay_tz_h5.php?payway=wx&aid=";
// payurl = payurl.replace("payment", "youke");
// var gotourl = payurl + downid
// location.href = gotourl;
// })
// $(".alipay a").click(function(){
// var payurl = "https://www.diyifanwen.net/hupipay/payment_pay_tz_h5.php?payway=ali&aid=";
// payurl = payurl.replace("payment", "youke");
// var gotourl = payurl + downid
// location.href = gotourl;
// })
// });
// }
// else{
// $(".word-pic a").click(function(){
// location.href = "https://www.diyifanwen.net/plus/word.php?id=1097509";
// });
// }
// }
// $(document).ready(function($) {
// $(".theme-poptit .close").click(function(){
// $(".theme-popover-mask").fadeOut(100);
// $(".theme-popover").slideUp(200);
// });
// });
</script>
<script src="https://www.diyifanwen.net/js/zfb.js" type="text/javascript"></script>
<script src="https://www.diyifanwen.net/user/check_level_m.php?callback=userinfo"></script>
<script src="https://m.diyifanwen.net/js/gobacktop.js" type="text/javascript"></script>
</body>
</html> 
雾都孤儿℃