实习一网页设计（HTML）
一、实习目的
1.了解HTML文档结构；
2.初步掌握基本标记的使用；
3.能够运用文本编辑器制作简单网页。
二、实习内容
1.学习EditPlus文本编辑器的使用。
2.使用EditPlus制作只有一行文字的网页，了解HTML文档结构，并在IE浏览器中打
开编写的网页文件，查看运行效果；
3.在网页中添加多段文本内容，并对页面格式进行设置排版，制作一个简单文字内容的
网页；
4.在网页中添加图片，并对页面格式进行设置排版，制作一个简单图文内容的网页；
5.制作一个索引网页，建立与前面网页之间的超连接；
6.制作一个简单的个人主页。
三、预备知识
1.网页的基本组成；
2.HTML语言：常用HTML标记及其属性；
标记作用常用属性
Html 网页文件标记
Body 页面标记bgcolor,background,text
P 段落标记align
br 换行标记
H1～h6 标题标记align
Hr 水平线标记size,width,color
Font 字体标记size,face,color
img 图像标记Src,height,width,alt,align
a 超链接标记Href
3.网页制作方法。
四、实习步骤
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浏览器中查看网页运行效果。
●将
标记中的文本该为“单行文本”，在<BODY>标记之间添加文字“西北农林</p><p>科技大学”，存盘并查看运行效果。</p><p>3. 制作一个简单文字内容的网页</p><p>①新建一个空白网页；</p><p>②添加适量文字；</p><p>③利用HTML文字标记进行版面编排，要求：</p><p>使用标题；使用h1-h6标记</p><p>分段（p标记）、分行（br标记）、段落对齐方式（在p标记中设置align属性）；</p><p>设置字体（font标记中设置size,face,color属性），设置字型（b,I,u标记）；</p><p>插入水平线（hr标记）等。</p><p>④保存文件（文件名为1.htm）；</p><p>⑤在IE浏览器中查看网页运行效果；</p><p>⑥重复③的过程，更改标记属性，观察运行效果。</p><p>4. 制作一个简单图文内容的网页</p><p>①新建一个空白网页，在网页中添加适量文字，利用HTML文字标记进行版面编排；</p><p>②运用HTML标记插入图片（img标记），设置图片的属性（修改img标记的Src,height,width,alt,align属性），进行图文混排；</p><p>③保存文件（文件名为2.htm），查看网页运行效果。</p><p>5.建立超连接</p><p>①新建一个空白网页，在网页中添加三个超链接，分别链接到前面制作的网页（1.htm</p><p>和2.htm）上，保存文件，查看网页运行效果，进行链接测试。</p><p>②在网页中建立其它网站的超链接，分别链接到“西北农林科技大学”主页</p><p>（），“新浪网”主页（），查看网页运行效果，进行链接测试。</p><p>6.制作一个简单的网页</p><p>制作一个网页，要求：字体属性设置、段落（行）设置、插入图片并进行属性设置、超链接设置等内容，尽量作到页面美观、内容充实。</p><p>五、实习要求</p><p>1.独立完成实习内容；</p><p>2.保存制作的网页（包括图片文件），提示应建1个文件夹，将有关文件存到这个文件</p><p>夹中；</p><p>3.同学间进行测试（通过文件拷贝方式到其他同学的计算机上）；</p><p>4.提交测试通过的网页文件（压缩包）到作业系统。</p> </div>
</div>
</div>
</div>
</div>
<!-- 推荐文章 -->
<!-- 相关主题 -->
<div class="theme-list">
<div class="theme-pd content-hg-pd">
<div class="header">
<div class="title">
<h3>相关主题</h3>
<i class="bg bg-4"></i>
</div>
</div>
<div class="container">
<ul>
<li class="topic">
<a href="/topic/4738965/" target="_blank">html网页设计实验报告</a>
</li>
<li class="topic">
<a href="/topic/4803471/" target="_blank">网页设计实验指导</a>
</li>
<li class="topic">
<a href="/topic/6958651/" target="_blank">网页设计实验</a>
</li>
<li class="topic">
<a href="/topic/18921004/" target="_blank">网页设计实验指导书</a>
</li>
<li class="topic">
<a href="/topic/19468403/" target="_blank">动态网页设计实验指导</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 相关推荐 -->
<div class="temp-rg" id="target-element">
<div class="relevant-box temp-mg">
<div class="content" id="side-list">
<div class="header hd-bm hd-scollor">
<div class="title">
<h3>文档推荐</h3>
<i class="bg bg-1"></i>
</div>
</div>
<ul class="container-ul">
</ul>
</div>
</div>
<div class="relevant-box">
<div class="content">
<div class="header hd-bm">
<div class="title">
<h3>最新文档</h3>
<i class="bg bg-4"></i>
</div>
</div>
<ul class="container-ul">
<li class="new-down-li">
<i class="icon-doc"></i>
<a href="/doc/061000073.html" target="_blank"
class="new-li-a text-overflow">饭店包间名字大全</a>
</li>
<li class="new-down-li">
<i class="icon-doc"></i>
<a href="/doc/0410001030.html" target="_blank"
class="new-li-a text-overflow">word无法创建工作文件,请检查临时环境变量</a>
</li>
<li class="new-down-li">
<i class="icon-docx"></i>
<a href="/doc/0910001458.html" target="_blank"
class="new-li-a text-overflow">自行车健身比赛开幕式讲话词</a>
</li>
<li class="new-down-li">
<i class="icon-doc"></i>
<a href="/doc/0a10001469.html" target="_blank"
class="new-li-a text-overflow">2018乡村医生个人工作总结</a>
</li>
<li class="new-down-li">
<i class="icon-doc"></i>
<a href="/doc/0110002558.html" target="_blank"
class="new-li-a text-overflow">MySQL测试题 SQL</a>
</li>
<li class="new-down-li">
<i class="icon-ppt"></i>
<a href="/doc/0210002568.html" target="_blank"
class="new-li-a text-overflow">合勤NXC5200</a>
</li>
<li class="new-down-li">
<i class="icon-docx"></i>
<a href="/doc/0010004833.html" target="_blank"
class="new-li-a text-overflow">铁路集中箱空箱调度优化建模案例(案例2)</a>
</li>
<li class="new-down-li">
<i class="icon-doc"></i>
<a href="/doc/0f1000530.html" target="_blank"
class="new-li-a text-overflow">微分几何教学大纲-复旦大学数学科学学院</a>
</li>
<li class="new-down-li">
<i class="icon-doc"></i>
<a href="/doc/011000596.html" target="_blank"
class="new-li-a text-overflow">人教版九年级数学上册导学案：24.1.1_圆【精品】</a>
</li>
<li class="new-down-li">
<i class="icon-docx"></i>
<a href="/doc/0d10006773.html" target="_blank"
class="new-li-a text-overflow">(整容后办护照用)医院整容证明</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
var sid = 1;
var did = "1817024559";
var docId = '1e1fb83f10661ed9ad51f33e';
var totalPage = 3;
var ext = 'doc';
var pageNum = '3';
</script>
<script src="https://assets.doczj.com/pc/js/render.js"></script>
<div class="broadside">
<div class="user-cursor" id="toTop">
<div class="user-about" title="置顶">
<i class="iconfont icon-you bottom"></i>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="ft-content">
<div class="ft-logo">
<a href="/" target="_blank" title="文档之家" class="flex-column-center">
<img src="https://assets.doczj.com/pc/icon/icon-logo1.png" title="文档之家" />
<p>文档之家</p>
</a>
</div>
<div class="ft-info">
<nav class="footer-nav">
<ul>
<li><strong class="ft-block" class="ft-block">关于</strong></li>
<li><a href="/about/about-us.html">关于我们</a></li>
<li><a href="/about/contact-us.html">联系我们</a></li>
</ul>
<ul>
<li><strong class="ft-block" class="ft-block">版权相关</strong></li>
<li><a href="/about/copyright-statement.html">版权声明</a></li>
<li><a href="/about/infringement-complaint.html">侵权投诉</a></li>
<li><a href="/about/disclaimer.html">免责声明</a></li>
</ul>
<ul>
<li><strong class="ft-block" class="ft-block">网站声明</strong></li>
<li><a href="/about/user-agreement.html">用户协议</a></li>
<li><a href="/about/privacy-policy.html">隐私政策</a></li>
<li><a href="/about/sitemap.html">网站地图</a></li>
</ul>
<ul>
<li><strong class="ft-block" class="ft-block">帮助中心</strong></li>
<li><a href="/about/download-instructions.html">下载说明</a></li>
<li><a href="/about/download-failure-solution.html">下载失败解决</a></li>
<li><a href="/about/redownload-order.html">订单重下载</a></li>
</ul>
</nav>
<div class="ft-side">
<img src="https://assets.doczj.com/pc/images/weixin.jpg" />
<h3>微信客服</h3>
</div>
</div>
</div>
</div>
<div class="ft-box">
<div class="ft-text">
<p> <a href="https://beian.miit.gov.cn" target="_blank">闽ICP备18022250号-1</a> 文档之家 版权所有 - ©2024</p>
</div>
</div>
</footer>
<script text="text/javascript" src="https://assets.doczj.com/pc/js/index.js"></script>
</body>
</html>
