长春工业大学软件学院 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> <p>本文来源：<a href="https://www.bwwdw.com/article/mroh.html">https://www.bwwdw.com/article/mroh.html</a></p><span class="doc-download-e"></span>
</div>
<script type="text/javascript">s("download_bottom");</script>
<div class="related_article">
<div class="related_top"><code>相关文章：</code></div>
<ul><li><a href="https://www.bwwdw.com/article/mroh.html" target="_blank" title="HTML网页设计基础实验指导书2016">HTML网页设计基础实验指导书2016</a></li><li><a href="https://www.bwwdw.com/article/y1wd.html" target="_blank" title="dreamweaver网页设计实验指导书 - 图文">dreamweaver网页设计实验指导书 - 图文</a></li><li><a href="https://www.bwwdw.com/article/5dn4.html" target="_blank" title="动态网页设计与网站管理实验指导书">动态网页设计与网站管理实验指导书</a></li><li><a href="https://www.bwwdw.com/article/211j.html" target="_blank" title="动态网页设计与网站管理实验指导书">动态网页设计与网站管理实验指导书</a></li><li><a href="https://www.bwwdw.com/article/ahhw.html" target="_blank" title="机械设计基础实验指导书">机械设计基础实验指导书</a></li><li><a href="https://www.bwwdw.com/article/22xd.html" target="_blank" title="机械设计基础实验指导书">机械设计基础实验指导书</a></li><li><a href="https://www.bwwdw.com/article/zewp.html" target="_blank" title="机械设计基础实验指导书">机械设计基础实验指导书</a></li><li><a href="https://www.bwwdw.com/article/15m6.html" target="_blank" title="HTML网页制作基础">HTML网页制作基础</a></li><li><a href="https://www.bwwdw.com/article/jwkt.html" target="_blank" title="机械设计基础实验指导书(1)">机械设计基础实验指导书(1)</a></li><li><a href="https://www.bwwdw.com/article/gw32.html" target="_blank" title="机械设计基础实验指导书（精）">机械设计基础实验指导书（精）</a></li></ul>
</div>
<div class="in_reading"><p class="rel_art_line">正在阅读：</p><p><a target="_blank" href="https://www.bwwdw.com/article/mroh.html" title="HTML网页设计基础实验指导书2016">HTML网页设计基础实验指导书2016</a><span>09-17</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/l7kr.html" title="朱明乡中心小学校校舍及食堂安全卫生隐患排查整改报告">朱明乡中心小学校校舍及食堂安全卫生隐患排查整改报告</a><span>03-29</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/0kdl.html" title="大唐火电厂热工技术监督制度">大唐火电厂热工技术监督制度</a><span>04-05</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/dsw7.html" title="排水管网课设任务书(2010) - 图文">排水管网课设任务书(2010) - 图文</a><span>05-24</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/v0dw.html" title="京东商城物流成本控制案例分析">京东商城物流成本控制案例分析</a><span>02-01</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/lgd2.html" title="板料成形有限元模拟系统前处理模块中关键技术的研究">板料成形有限元模拟系统前处理模块中关键技术的研究</a><span>10-31</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/irri.html" title="最全物流成本习题单选题">最全物流成本习题单选题</a><span>09-03</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/zt2i.html" title="物流及装卸搬运管理规范">物流及装卸搬运管理规范</a><span>08-29</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/5asa.html" title="“不忘初心牢记使命 做新时代大学生的引路人”培训班学习心得">“不忘初心牢记使命 做新时代大学生的引路人”培训班学习心得</a><span>02-25</span></p><p><a target="_blank" href="https://www.bwwdw.com/article/79l2.html" title="物流基础习题集（03单元）">物流基础习题集（03单元）</a><span>10-27</span></p></div>
<div class="previous">
<span class="pre">上一篇：<a title="排球的教学方法" href="https://www.bwwdw.com/article/jroh.html">排球的教学方法</a></span>
<span class="next">下一篇：<a title="中医辨证治疗四类型肺癌" href="https://www.bwwdw.com/article/1roh.html">中医辨证治疗四类型肺癌</a></span>
</div>
</div>
</div>
<div class="right-side">
<div class="right_fix">
<script type="text/javascript">s("right_top");</script>
<div class="hotSearch"><div class="hotSearch_tl"><span></span>相关文章</div><ul><li><span>1</span><a href="https://www.bwwdw.com/article/ikod.html" title="机械设计基础实验指导书 - 图文" target="_blank">机械设计基础实验指导书 - 图文</a></li><li><span>2</span><a href="https://www.bwwdw.com/article/wxv3.html" title="机械原理，设计，基础实验指导书 - 图文" target="_blank">机械原理，设计，基础实验指导书 - 图文</a></li><li><span>3</span><a href="https://www.bwwdw.com/article/xhmt.html" title="程序设计基础C实验指导书" target="_blank">程序设计基础C实验指导书</a></li><li><span>4</span><a href="https://www.bwwdw.com/article/4qke.html" title="机械基础实验指导书" target="_blank">机械基础实验指导书</a></li><li><span>5</span><a href="https://www.bwwdw.com/article/oru8.html" title="AutoCAD实验指导书-基础" target="_blank">AutoCAD实验指导书-基础</a></li><li><span>6</span><a href="https://www.bwwdw.com/article/qwkq.html" title="《网页设计与制作》-实训指导书" target="_blank">《网页设计与制作》-实训指导书</a></li><li><span>7</span><a href="https://www.bwwdw.com/article/pu7r.html" title="《Java语言程序设计实验指导书》实验指导书" target="_blank">《Java语言程序设计实验指导书》实验指导书</a></li><li><span>8</span><a href="https://www.bwwdw.com/article/8p3o.html" title="《Java语言程序设计实验指导书》实验指导书" target="_blank">《Java语言程序设计实验指导书》实验指导书</a></li><li><span>9</span><a href="https://www.bwwdw.com/article/ab0f.html" title="《程序设计基础（C语言）》实验指导书" target="_blank">《程序设计基础（C语言）》实验指导书</a></li><li><span>10</span><a href="https://www.bwwdw.com/article/biuh.html" title="电路基础实验指导书" target="_blank">电路基础实验指导书</a></li></ul></div>
<script type="text/javascript">s("right_mid");</script>
<div class="right_list"><div class="right_list_t"><i></i><span>最新文章</span></div><ul><li><a href="https://www.bwwdw.com/article/kd8h.html" target="_blank" title="元旦晚会节目单">元旦晚会节目单</a></li><li><a href="https://www.bwwdw.com/article/sd8h.html" target="_blank" title="学案">学案</a></li><li><a href="https://www.bwwdw.com/article/0d8h.html" target="_blank" title="光电显示技术期末复习资料 - 图文">光电显示技术期末复习资料 - 图文</a></li><li><a href="https://www.bwwdw.com/article/zd8h.html" target="_blank" title="p2p与供应链结合案例">p2p与供应链结合案例</a></li><li><a href="https://www.bwwdw.com/article/9d8h.html" target="_blank" title="2016--2017学年度第二学期五年级班主任工作计划">2016--2017学年度第二学期五年级班主任工作计划</a></li><li><a href="https://www.bwwdw.com/article/cd8h.html" target="_blank" title="尔雅2017年西藏的历史和文化期末考试满分答案解析">尔雅2017年西藏的历史和文化期末考试满分答案解析</a></li><li><a href="https://www.bwwdw.com/article/yd8h.html" target="_blank" title="智慧树创新工程实践期末考试答案">智慧树创新工程实践期末考试答案</a></li><li><a href="https://www.bwwdw.com/article/uh8h.html" target="_blank" title="六年级下美术教案-有趣的纸浮雕广西版">六年级下美术教案-有趣的纸浮雕广西版</a></li><li><a href="https://www.bwwdw.com/article/3h8h.html" target="_blank" title="设备操作规程汇编">设备操作规程汇编</a></li><li><a href="https://www.bwwdw.com/article/6h8h.html" target="_blank" title="通信综合实训系统实验报告">通信综合实训系统实验报告</a></li><li><a href="https://www.bwwdw.com/article/7h8h.html" target="_blank" title="南京财经大学金融学期末考试简答题">南京财经大学金融学期末考试简答题</a></li><li><a href="https://www.bwwdw.com/article/gh8h.html" target="_blank" title="现代服务业发展规划研究 - 图文">现代服务业发展规划研究 - 图文</a></li><li><a href="https://www.bwwdw.com/article/ph8h.html" target="_blank" title="锚杆支护工知识竞赛题">锚杆支护工知识竞赛题</a></li><li><a href="https://www.bwwdw.com/article/rh8h.html" target="_blank" title="实验五">实验五</a></li><li><a href="https://www.bwwdw.com/article/8h8h.html" target="_blank" title="债权法习题集及详细解答">债权法习题集及详细解答</a></li><li><a href="https://www.bwwdw.com/article/ah8h.html" target="_blank" title="上海寺庙大全 - 图文">上海寺庙大全 - 图文</a></li><li><a href="https://www.bwwdw.com/article/bh8h.html" target="_blank" title="机会成本在企业决策中的应用研究">机会成本在企业决策中的应用研究</a></li><li><a href="https://www.bwwdw.com/article/wh8h.html" target="_blank" title="高考总复习语文选择题百题精炼第一季专题01 识记现代汉语字音（教师版）">高考总复习语文选择题百题精炼第一季专题01 识记现代汉语字音（教师版）</a></li><li><a href="https://www.bwwdw.com/article/oh8h.html" target="_blank" title="A9785-B中文资料">A9785-B中文资料</a></li><li><a href="https://www.bwwdw.com/article/xh8h.html" target="_blank" title="56m连续梁主墩冷却管布置技术交底">56m连续梁主墩冷却管布置技术交底</a></li><li><a href="https://www.bwwdw.com/%E6%8C%87%E5%AF%BC%E4%B9%A6/" target="_blank" title="指导书">指导书</a></li><li><a href="https://www.bwwdw.com/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/" target="_blank" title="网页设计">网页设计</a></li><li><a href="https://www.bwwdw.com/%E5%AE%9E%E9%AA%8C/" target="_blank" title="实验">实验</a></li><li><a href="https://www.bwwdw.com/%E5%9F%BA%E7%A1%80/" target="_blank" title="基础">基础</a></li><li><a href="https://www.bwwdw.com/HTML/" target="_blank" title="HTML">HTML</a></li><li><a href="https://www.bwwdw.com/2016/" target="_blank" title="2016">2016</a></li></ul></div>
<script type="text/javascript">s("right_bottom");</script>
<div class="right_list"><div class="right_list_t"><i></i><span>推荐文章</span></div><ul><li><a href="https://www.bwwdw.com/article/4roh.html" target="_blank" title="电气识图期中试题">电气识图期中试题</a></li><li><a href="https://www.bwwdw.com/article/eroh.html" target="_blank" title="索林根刀具 - 图文">索林根刀具 - 图文</a></li><li><a href="https://www.bwwdw.com/article/qroh.html" target="_blank" title="sign的短语有哪些">sign的短语有哪些</a></li><li><a href="https://www.bwwdw.com/article/lroh.html" target="_blank" title="六年级语文习题五汇总">六年级语文习题五汇总</a></li><li><a href="https://www.bwwdw.com/article/nroh.html" target="_blank" title="山东省村庄整治技术导则">山东省村庄整治技术导则</a></li><li><a href="https://www.bwwdw.com/article/kroh.html" target="_blank" title="道路工程概论">道路工程概论</a></li><li><a href="https://www.bwwdw.com/article/sroh.html" target="_blank" title="10级3+2检验">10级3+2检验</a></li><li><a href="https://www.bwwdw.com/article/0roh.html" target="_blank" title="卓越亚马逊客户关系管理">卓越亚马逊客户关系管理</a></li><li><a href="https://www.bwwdw.com/article/zroh.html" target="_blank" title="地方保护主义的成因与对策">地方保护主义的成因与对策</a></li><li><a href="https://www.bwwdw.com/article/9roh.html" target="_blank" title="北京市房山区第三次全国文物普查不可移动文物名录">北京市房山区第三次全国文物普查不可移动文物名录</a></li><li><a href="https://www.bwwdw.com/article/iroh.html" target="_blank" title="工程硕士复习题 -">工程硕士复习题 -</a></li><li><a href="https://www.bwwdw.com/article/hroh.html" target="_blank" title="风门亭隧道洞身开挖技术交底 - 图文">风门亭隧道洞身开挖技术交底 - 图文</a></li><li><a href="https://www.bwwdw.com/article/droh.html" target="_blank" title="清华大学出版社0新时代交互英语读写译1答案 - 有截图">清华大学出版社0新时代交互英语读写译1答案 - 有截图</a></li><li><a href="https://www.bwwdw.com/article/froh.html" target="_blank" title="中国古代建筑论文">中国古代建筑论文</a></li><li><a href="https://www.bwwdw.com/article/2roh.html" target="_blank" title="七年级生物上册3-3绿色植物与生物圈的水循环练习新版新人教版(2)">七年级生物上册3-3绿色植物与生物圈的水循环练习新版新人教版(2)</a></li><li><a href="https://www.bwwdw.com/article/vroh.html" target="_blank" title="《陶罐和铁罐》教学设计1">《陶罐和铁罐》教学设计1</a></li><li><a href="https://www.bwwdw.com/article/troh.html" target="_blank" title="消费者权益保护法和反不正当竞争法考试卷">消费者权益保护法和反不正当竞争法考试卷</a></li><li><a href="https://www.bwwdw.com/article/5roh.html" target="_blank" title="2019-2020年苏教版四年级上册寒假作业语文作业答案">2019-2020年苏教版四年级上册寒假作业语文作业答案</a></li><li><a href="https://www.bwwdw.com/article/xroh.html" target="_blank" title="商务英语写作复习资料习题">商务英语写作复习资料习题</a></li><li><a href="https://www.bwwdw.com/article/oroh.html" target="_blank" title="中考状元必备笔记 - 历史中考知识点汇编 - 图文">中考状元必备笔记 - 历史中考知识点汇编 - 图文</a></li></ul></div> </div>
</div>
</div>
<div class="footer">
<p>Copyright©<script>timestamp2date(1);</script><a href="https://www.bwwdw.com/" target="_blank" title="博文网">博文网</a>bwwdw.com 版权所有</p>
<p class="gray"><a href="https://www.bwwdw.com/article/" target="_blank">最新更新</a> | <a href="https://www.bwwdw.com/hot/" target="_blank">热点专题</a> | <a href="https://www.bwwdw.com/sitemap.html" target="_blank">网站地图</a> | <a href="https://www.bwwdw.com/tag/" target="_blank">TAG专题</a> | <a href="https://www.bwwdw.com/sitemap.xml" target="_blank">XML地图</a> | <a href="https://so.bwwdw.com" target="_blank">范文搜索</a><script type="text/javascript">tj();</script></p>
</div>
<a href="#0" class="cd-top">Top</a>
<script src="/static/fanwen/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
document.write('<script type="text/javascript" src="/static/fanwen/js/pubuliu.js?'+RAND_STR+'"><\/script>');
document.write('<script type="text/javascript" src="/static/fanwen/js/lazyimg.js?'+RAND_STR+'"><\/script>');
document.write('<script type="text/javascript" src="/static/fanwen/js/gotop.js?'+RAND_STR+'"><\/script>');
</script>
<script type="text/javascript">
$.ajax({
"url":"https://www.bwwdw.com/open/doc/readViews.json?id=mroh",
"type":"get",
"data":"",
"dataType":"json",
"success":function(res){
$("#read_views").html(res.data);
}
});
</script>
<script type="text/javascript">bottomAction();</script>
</body>
</html>