实习一网页设计（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 id="rightcol" class="viewcol">
<div class="coltitle">相关文档</div>
<ul class="lista">
</ul>
<div class="coltitle">最新文档</div>
<ul class="lista">
<li><a href="/doc/071000073.html" target="_blank">饭店包间名字大全</a></li>
<li><a href="/doc/0d10001030.html" target="_blank">word无法创建工作文件,请检查临时环境变量</a></li>
<li><a href="/doc/0d10001458.html" target="_blank">自行车健身比赛开幕式讲话词</a></li>
<li><a href="/doc/0510001469.html" target="_blank">2018乡村医生个人工作总结</a></li>
<li><a href="/doc/0e10002558.html" target="_blank">MySQL测试题 SQL</a></li>
<li><a href="/doc/0310002568.html" target="_blank">合勤NXC5200</a></li>
<li><a href="/doc/0210004833.html" target="_blank">铁路集中箱空箱调度优化建模案例(案例2)</a></li>
<li><a href="/doc/021000530.html" target="_blank">微分几何教学大纲-复旦大学数学科学学院</a></li>
<li><a href="/doc/031000596.html" target="_blank">人教版九年级数学上册导学案：24.1.1_圆【精品】</a></li>
<li><a href="/doc/0c10006773.html" target="_blank">(整容后办护照用)医院整容证明</a></li>
<li><a href="/doc/0e10006860.html" target="_blank">危险废物管理台账</a></li>
<li><a href="/doc/0310008420.html" target="_blank">2017年终大会会场物料设计方案</a></li>
</ul>
</div>
</div>
<script>
var did = "117024559";
var ext = 'doc';
var docId = '0wjey6dfne4mu2oh4xq';
var totalPage = 3;
const pageNum = '3';
</script>
<div class="clearfloat"></div>
<div id="footer">
<div class="ft_info">
<a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a> ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br>
本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈
</div>
<script>foot()</script>
</div>
</body>
</html> 