预览加载中，请您耐心等待几秒...

实验1网页设计(HTML)实验指导1.doc

预览
1/3
2/3
3/3

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

实习一网页设计（HTML） 一、实习目的 了解HTML文档结构； 初步掌握基本标记的使用； 能够运用文本编辑器制作简单网页。 二、实习内容 学习EditPlus文本编辑器的使用。 使用EditPlus制作只有一行文字的网页，了解HTML文档结构，并在IE浏览器中打开编写的网页文件，查看运行效果； 在网页中添加多段文本内容，并对页面格式进行设置排版，制作一个简单文字内容的网页； 在网页中添加图片，并对页面格式进行设置排版，制作一个简单图文内容的网页； 制作一个索引网页，建立与前面网页之间的超连接； 制作一个简单的个人主页。 三、预备知识 网页的基本组成； HTML语言：常用HTML标记及其属性； 标记作用常用属性Html网页文件标记Body页面标记bgcolor,background,textP段落标记alignbr换行标记H1～h6标题标记alignHr水平线标记size,width,colorFont字体标记size,face,colorimg图像标记Src,height,width,alt,aligna超链接标记Href网页制作方法。 四、实习步骤 1.学习EditPlus文本编辑器的使用 打开EditPlus显示如图1-1界面，通过“文件”→“新建”→“html网页”新建一个页面，如图1-2所示。 在代码区中最外层是html标记，html标记中包含了head标记和body标记，实习中我们只改head标记中内嵌的title标记中的文本，制作页面的内容通过相关标记在body中标记。 在工具栏中分两行，第一行是编辑器的工具栏，第二行是快捷插入标记的工具栏。 现在鼠标分别停留在第二行的工具上，注意提示并记录，以备后用； 特别强调颜色工具只是直观输入颜色编码（用在给颜色相关属性赋值中）。 图1-1editplus界面 图1-2新建html网页界面 2.使用EditPlus制作一行文字的网页 使用EditPlus新建一个空白网页，观察网页的基本结构，了解基本结构所用标记的作用，保存文件，在IE浏览器中查看网页运行效果。 将<title>标记中的文本该为“单行文本”，在<BODY>标记之间添加文字“西北农林科技大学”，存盘并查看运行效果。 3.制作一个简单文字内容的网页 ①新建一个空白网页； ②添加适量文字； ③利用HTML文字标记进行版面编排，要求： 使用标题；使用h1-h6标记 分段（p标记）、分行（br标记）、段落对齐方式（在p标记中设置align属性）； 设置字体（font标记中设置size,face,color属性），设置字型（b,I,u标记）； 插入水平线（hr标记）等。 ④保存文件（文件名为1.htm）； ⑤在IE浏览器中查看网页运行效果； ⑥重复③的过程，更改标记属性，观察运行效果。 4.制作一个简单图文内容的网页 ①新建一个空白网页，在网页中添加适量文字，利用HTML文字标记进行版面编排； ②运用HTML标记插入图片（img标记），设置图片的属性（修改img标记的Src,height,width,alt,align属性），进行图文混排； ③保存文件（文件名为2.htm），查看网页运行效果。 5.建立超连接 ①新建一个空白网页，在网页中添加三个超链接，分别链接到前面制作的网页（1.htm和2.htm）上，保存文件，查看网页运行效果，进行链接测试。 ②在网页中建立其它网站的超链接，分别链接到“西北农林科技大学”主页（http://www.nwsuaf.edu.cn），“新浪网”主页（http://www.sina.com.cn），查看网页运行效果，进行链接测试。 6.制作一个简单的网页 制作一个网页，要求：字体属性设置、段落（行）设置、插入图片并进行属性设置、超链接设置等内容，尽量作到页面美观、内容充实。 五、实习要求 独立完成实习内容； 保存制作的网页（包括图片文件），提示应建1个文件夹，将有关文件存到这个文件夹中； 同学间进行测试（通过文件拷贝方式到其他同学的计算机上）； 提交测试通过的网页文件（压缩包）到作业系统。