实验1实习指导

《实验1实习指导》由会员分享，可在线阅读，更多相关《实验1实习指导（9页珍藏版）》请在金锄头文库上搜索。

1、实习一实习一 网页设计（网页设计（1 1）一、实习目的一、实习目的 1.了解 HTML 文档结构； 2.初步掌握基本标记的使用； 3.能够运用文本编辑器制作简单网页。二、实习内容二、实习内容1.学习 EditPlus 文本编辑器的使用。 2.使用 EditPlus 制作只有一行文字的网页，了解 HTML 文档结构，并在 IE 浏览器中打 开编写的网页文件，查看运行效果； 3.在网页中添加多段文本内容，并对页面格式进行设置排版，制作一个简单文字内容 的网页； 4.在网页中添加图片，并对页面格式进行设置排版，制作一个简单图文内容的网页； 5.制作一个索引网页，建立与前面网页之间的超连接； 6.制作

2、一个简单的个人主页。三、预备知识三、预备知识1.网页的基本组成； 2.HTML 语言：常用 HTML 标记及其属性；标记作用常用属性Html网页文件标记Body页面标记bgcolor,background,textP段落标记alignbr换行标记H1h6标题标记alignHr水平线标记size,width,colorFont字体标记size,face,colorimg图像标记Src,height,width,alt,aligna超链接标记Href 3.网页制作方法。四、实习步骤四、实习步骤1.学学习习 EditPlus 文本文本编辑编辑器的使用器的使用打开 EditPlus 显示如图 1-1

3、界面，通过“文件”“新建”“html 网页”新建一 个页面，如图 1-2 所示。 在代码区中最外层是 html 标记，html 标记中包含了 head 标记和 body 标记，实习中 我们只改 head 标记中内嵌的 title 标记中的文本，制作页面的内容通过相关标记在 body 中标记。 在工具栏中分两行，第一行是编辑器的工具栏，第二行是快捷插入标记的工具栏。 现在鼠标分别停留在第二行的工具上，注意提示并记录，以备后用； 特别强调颜色工具只是直观输入颜色编码（用在给颜色相关属性赋值中） 。图 1-1 editplus 界面图 1-2 新建 html 网页界面2.使用使用 EditPlus

4、制作一行文字的网制作一行文字的网页页使用 EditPlus 新建一个空白网页，观察网页的基本结构，了解基本结构所用标记 的作用，保存文件，在 IE 浏览器中查看网页运行效果。 将标记中的文本该为“单行文本” ，在标记之间添加文字“西北农 林科技大学” ，存盘并查看运行效果。3. 制作一个制作一个简单简单文字内容的网文字内容的网页页 新建一个空白网页； 添加适量文字； 利用 HTML 文字标记进行版面编排，要求： 使用标题；使用 h1-h6 标记 分段（p 标记） 、分行（br 标记） 、段落对齐方式（在 p 标记中设置 align 属 性） ； 设置字体（font 标记中设置 size,fac

5、e,color 属性） ，设置字型（b,I,u 标记）； 插入水平线（hr 标记）等。 保存文件（文件名为 1.htm） ； 在 IE 浏览器中查看网页运行效果； 重复的过程，更改标记属性，观察运行效果。4. 制作一个制作一个简单图简单图文内容的网文内容的网页页 新建一个空白网页，在网页中添加适量文字，利用 HTML 文字标记进行版面编排； 运用 HTML 标记插入图片（img 标记） ，设置图片的属性（修改 img 标记的 Src,height,width,alt,align 属性） ，进行图文混排； 保存文件（文件名为 2.htm） ，查看网页运行效果。5.建立超建立超连连接接 新建一个空

6、白网页，在网页中添加三个超链接，分别链接到前面制作的网页 （1.htm 和 2.htm）上，保存文件，查看网页运行效果，进行链接测试。 在网页中建立其它网站的超链接，分别链接到“西北农林科技大学”主页 （http:/） ， “新浪网”主页（http:/） ，查看网 页运行效果，进行链接测试。6.制作一个制作一个简单简单的网的网页页制作一个网页，要求：字体属性设置、段落（行）设置、插入图片并进行属性设置、超 链接设置等内容，尽量作到页面美观、内容充实。五、实习要求五、实习要求1.独立完成实习内容； 2.保存制作的网页（包括图片文件） ，提示应建 1 个文件夹，将有关文件存到这个文件 夹中； 3.

7、同学间进行测试（通过文件拷贝方式到其他同学的计算机上） ； 4.把制作好测试通过的网页保存到你的 U 盘中以备后面实习需要。实习二实习二 网页设计（网页设计（2 2）一、实习目的一、实习目的 1.熟悉 FrontPage2003 的工作环境； 2.掌握 FrontPage2003 站点管理功能； 3.掌握 FrontPage2003 制作网页的基本方法； 4.掌握网页制作中的常用页面布局方法。二、实习内容二、实习内容1.熟悉 FrontPage2003 的工作环境 2.FrontPage2003 管理站点功能（个人网站） ； 3.制作图文混排的网页； 4.制作图片展示网页； 5.制作个人网站首

8、页。三、预备知识三、预备知识1.网页制的基本知识； 2.HTML 基本语法。四、实习步骤四、实习步骤1.熟悉熟悉 FrontPage 2003 的工作的工作环环境。境。启动 FrontPage 2003，熟悉 FrontPage 2003 工作环境。2.FrontPage 管理站点管理站点 建立站点文件夹：建立站点文件夹： 在 D 盘根目录下建立 myweb 文件夹。 如果 D 盘不存在，在 C 盘建立。 创建站点创建站点 打开“文件“菜单” ，单击“新建” ，选择“空白站点” ，在“Web 站点模版”对话框中 选择“空白站点” ，在指定新站点的位置中，输入 D:myweb 或 C:myweb

9、（即站点在本地磁 盘上的位置） ，单击“确定”按钮，完成站点的创建。 查看站点目录结构查看站点目录结构 单击“视图栏” （窗口左侧）中“文件夹”图标，即可查看站点目录结构。FrontPage 自动建立了 images 和_private 等文件夹。 注意注意：不要在如“_private”等以“_”开始的文件夹中存放你的任何文件。 创建网站其它文件夹创建网站其它文件夹 根据要制作的网站的内容，可以建立相应的子文件夹，用以分类存放网站制作中的相 关文件。在本站点中，请建立如下文件夹：xiangce 和 aihao，然后分别在这两个文件夹中 建立文件夹 images。 注意：注意：网站目录结构一般在

10、网站创建初期就完成，但也可以在制作网站过程中，随时根据要求建立。3.制作一个制作一个图图文混排的网文混排的网页页 打开“文件“菜单” ，单击“新建” ，选择“空白网页” ，在 FrontPage 中将出现一个空白的网页。 在网页中输入（粘贴）一段文字（孙悟空自传，作业管理系统共享资源中下载） ， 设置第一段（作为标题）为“黑体、6 号（24 磅） ” ，其余文字设置为“宋体、4 号（14 磅） ” 。 在网页中插入一张图片(sunwukong.jpg，作业管理系统共享资源中下载)，设置图 片的对齐属性为“左对齐” 。调整位置,如图 2-1 所示。 将保存网页到网站的根目录（d:myweb）中，

11、文件名为 zizhuan.htm。 注意：注意：1. 本网页所用到图片都要存入 d:mywebimages 文件夹中。 2. 观察在保存网页时出现的“保存嵌入式文件”对话框(如图 2-2)，并保存网页中 的图片保存到正确的位置。 3 “另存为”文件对话框中，要注意保存网页到指定的位置。图 2-1 zizhuan.htm 网页图 2-2“保存嵌入式文件”对话框4.制作一个制作一个图图片展示网片展示网页页 打开“文件” ，单击“新建” ，选择“空白网页” ，在 FrontPage 中将出现一个空白 的网页。 在网页中插入一个 7 行 3 列的表格，在表格属性中，将表格的边框粗细设置为 0， 接着再

12、将第 1 行的 3 列合并,输入文字“孙悟空的幸福生活”，设置为“标题一”格式。调整 单元格行高，如图 2-3 所示。图 2-3 制作中的 xiangche.htm 网页图 2-4 完成的 xiangce.htm 网页 在表格的单元格中，插入图片和文字说明(作业管理系统共享资源中下载)。如图 2-4 所示。 将保存网页到网站的根目录（d:mywebxiangce）中，文件名为 xiangce.htm。 注意注意:本网页所用到图片都要存入 d:mywebxiangceimages 文件夹中。5.制作个人主制作个人主页页（首（首页页） ）网页设计时，网页的布局方式将直接影响页面的外观，同时也是体现

13、设计师的水平的 一个标准。在设计布局时，通常采用表格的方式。在本网站主页的制作中，我们也将使用 表格方式布局。 打开“文件” ，单击“新建” ，选择“空白网页” ，在 FrontPage 中将出现一个空白 的网页。 在网页中插入一个 7 行 2 列的表格（宽：700 像素；边框：0） ，然后将第 2 列的所 有单格合并,如图 2-5。 在刚合并完成后单元格中，设置单元格对齐属性为“水平：左对齐；垂直：顶端对 齐” ，然后在该单元格插入一个 4 行 1 列的表格（宽度：100%；边框：0） 。完成的布局如图 然后调整单元格行高如图 2-6 所示。 在左边单元格和右边第 1 行的单元中，插入如图

14、2-7 所示的图片（教学资源网下载） ， 将右边第 2 行拆分为 2 列。在第 3 行中，插入一个 1 行 3 列的表格(宽：100%；高： 100%，边框：0)，如图 2-8 所示。 接下来，在单元格中插入图片，输入文字，如图 2-9 所示。 将“悟空自传”图片超链接到前面制作的网页“zizhuan.htm”,“我的相册”图片 超链接到“xiangce.htm” ， “我的母校”图片边接到“http:/” ， “与我 联系”图片超链接到“mailto:sunwukongtiangong.org” 。 将网页保存到网站的根目录（d:myweb）中，文件名为 index.htm。 注意注意:本网

15、页所用到的图片都要存入 d:mywebimages 文件夹中。 在浏览器中打开 index.htm 页面，如图 2-10 所示。五、实习要求五、实习要求1.根据指导书实例和操作步骤，独立完成网页设计实习内容。 2.实习报告中对运用 FrontPage 制作网页进行小结。图 2-5 第一次布局图 2-6 第二次布局图 2-7 插入图片图 2-8 第三次布局图 2-9 输入文字和插入图片图 2-10 index.htm 在 IE 中的效果六、思考问题六、思考问题1.如何管理网站文件？ 2.如何规划和设计较复杂的主页？实习三实习三 网页设计（网页设计（3 3）一、实习目的一、实习目的 1掌握站点规划

16、知识和方法； 2掌握 FrontPage2003 制作网页的方法； 3掌握网页制作中的常用页面布局方法； 4学会建立页面之间的链接二、实习内容二、实习内容1自拟站点主题，收集相关素材 2用 FrontPage2003 管理站点； 3制作图文混排的网页； 4制作图片展示网页； 5制作表格网页； 6制作网站首页。 7. 制作完整自拟主题网站三、预备知识三、预备知识1网页制的基本知识； 2HTML 基本语法。四、实习步骤四、实习步骤1. 自自拟拟站点主站点主题题， ，规规划站点内容，收集相关素材并整理。划站点内容，收集相关素材并整理。实验前自拟站点主题（如“我的班级” 、 “西安世园会” 、 “XX 旅游景点”等） ，根据站 点类型和特性设计站点各网页内容，规划各网