7.1网页制作（课件）《信息技术》（电子工业出版社）

2024-07-07

| 42页

| 109人阅读

| 11人下载

普通

内容正文：

第七章网页制作本章主要内容 7.1 网页制作概述 7.2 FrontPage 2003的基本知识 7.2 网站制作 7.3 表单 7.4 发表站点 7.1 网页（站）制作概述 7.1.1 HTML简介 7.1.2 网站制作准备工作 1. 什么是HTML 超文本标记语言（HyperText Markup Language)。HTML描述的是文件中各个部分内容的结构。 HTML定义了一组用来描述Web页的结构，如标题、段落和表格等的“命令”，这些命令在HTML中称为标记或标签（Tag）。标记被封装在尖括号<>内，不区分字母的大小写。 HTML文件是一种纯文本文件，扩展名是.HTM或.HTML（静态网页），可以使用任何文本编辑器，如：“记事本”和“写字板” HTML基本框架 <html> </html> <head> <title>……</title> </head> <body> </body> 开头，包括标题声明正文能举个例子吗？？？ HTML语言事例 <html> <head> <title>一个简单的HTML示例</title> </head> <body> 欢迎光临我的主页<hr color="#ff0000" size="2"> 这是我第一次做网页，相信我，我会做好的！ </body> </html> 文档头文档标题文档体标记属性 2. HTML文件的基本结构 HTML文件以<html>开始，以</html>结束，其文件结构由头部和正文主体两部分组成。 <html>...</html>：网页的起始标志，表示这对标记间的内容是HTML文档； <head>...</head>：头部标记，通常情况下，文件的标题、语言字符集信息等都放在头部信息中。如<title>...</title>，用于定义网页的标题栏信息，当该网页文件被打开后，将出现在浏览器的标题栏中。HTML文件中head标记并不是必须的。 <body>...</body>：正文主体标记，中间是网页的核心内容。 3. HTML中的标记标记是用来分割和标记文本的元素的。大部分HTML标记是这种形式的：〈标记名〉相应内容〈/标记名〉（1）单标记：没有结束标记。如：换行 （2）双标记：如段落标记...，它表示在标签内部的内容构成一个段落。（3）标记属性：在标记的始标记内可以包含一些属性。其语法是：<标记属性1 属性2 属性3 … >如<body background="images/bg.jpg">...</body>。 9 有些元素没有结束标签。 4. 常见的HTML中的标记文本布局标记标记名称标记格式标记实例说明段落标记 ... 江雪 属性align取值为left,center、right，分别表示左对齐、居中对齐、右对齐换行标记 强制文本换行，但不划分段落，与标记不同，两行的间距不变水平线标记<hr> <hr> <hr> 在网页中插入一条水平线标记名称标记格式标记实例说明标题标记<hn> <hn>...</hn> <h1>江雪</h1> 其中n为1到6的数字，表示自体大小，其中1号标题字体最大字体标记 ... 江雪 属性size，表示字号大小，取值为1-7的数字，1号字最小，默认为3；属性color，表示文字颜色，取值为六位十六进制表示的颜色或颜色的英文名称；属性face，表示字体，如楷体_GB2312、Times NewRoman等字形标记、、、、 ... ... . . ... 江雪 江雪 2 1 江雪 分别表示粗体、斜体、上标、下标、下划线图片标记标记名称标记格式标记实例说明图片标记<img> <img> <img src= http://www.ujn.edu.cn/img_menu/jnunamergss.gif height=200 width=60 align=center border=1> 属性src=URL，URL表示图片文件存放的位置；属性height=n，n是图片高度值，单位为像素，或者以原图片高度的百分比显示；属性width=n，n是图片宽度值，单位为像素，或者以原图片宽度的百分比显示；属性aligh=对齐方式，取值为left、center、right；属性border=n，n是图片边框的粗细，单位为像素，默认为0 超链接标记标记名称标记格式标记实例说明超链接标记<a> <a>... </a> 以文字作为超链接 <a href= http://www.ujn.edu.cn > 济南大学</a> 以图片作为超链接 <a href=http://www.ujn.edu.cn> <img src= http://www.ujn.edu.cn/img_menu/jnunamergss.gif> </a> 属性href=URL，URL表示链接的位置； 7.1.2 网站制作的准备工作要开发web站点，首先应该根据用途规划站点，确定站点的结构，并在本地磁盘上创建站点，然后再建立网页，并将网页发布到站点上。准备工作：1.网站结构的统筹 2.素材的准备 3.选择网页设计制作工具 7. 2 FrontPage2003的基础知识一、FrontPage的启动和退出二、 FrontPage2003提供了6种视图视图切换：“视图”菜单→各种视图 1、网页视图： FrontPage2003最常用的工作界面是FrontPage启动后的默认视图方式。在该视图方式下，可以完成网页的创建、编辑和预览。创建网页的主要工作都是在该视图方式下完成的。网页的查看方式 1、设计方式：启动FrontPage进入的就是设计方式，网页的大部分工作都是在该方式下完成的。 2、代码方式：显示自动生成的HTML文件，这种方式提供了直接用HTML命令建立网页的途径。 3、拆分方式：既显示设计窗格又显示代码窗格 4、预览方式：以IE浏览器的的方式显示网页的正文主体内容。在这种方式下，用户才能见到网页的真正动态过程。 2、文件夹视图该视图中，站点显示为一组文件和文件夹，可以创建、移动和删除文件或文件夹，方便用户对站内所有的文件进行管理。其使用方法类似于Windows中的资源管理器。 3、报表视图使用报表视图可以方便地了解当前站点的文件、共享内容、问题、使用率等信息。 4、导航视图提供网页的分层视图，可方便观察站点的链接结构，可以通过简单的拖拽调整网页在网站中的位置，改变链接结构。 5、超链接视图将当前站点显示为链接文件的一个网络，它们表示了各个网页之间的相互链接关系。超链接视图就象一个地图，表明站点中的超链接路径。 6、任务视图主要用于创建和管理站点站的任务，在视图中列出了当前站点的“任务”，即当前站点中尚未完成的项目。 7.2.3 FrontPage 2003的基本操作 1、建立站点站点是一组相关网页和其他文件的集合，这些文件通过超级链接形成一个完整的结构。在FrontPage2003中，站点是磁盘上的一个特殊文件夹。新建站点新建站点步骤：（1）在FrontPage2003窗口中，点击菜单“文件” “新建”，并选择选项“站点”，打开“新建”对话框；（2）在“新建”对话框中，选择“只有一个网页的站点”模板，并输入“指定新站点的位置”。（3）单击确定即可创建。该站点目前只有一个空白网页index.htm（主页）和用于存储图片的文件夹images。新建网页、打开已有的网页、保存网页文件、预览网页网页编辑 1. 打开首页、新建网页在“文件夹列表”中，双击index.htm，即可快速切换到普通网页视图下，进行网页编辑。新建网页：“文件”“新建”“网页”。 2.设置网页属性网页的属性包括网页的标题、位置、背景、页边距等。在空白页面单击右键，在弹出的快捷菜单中选择命令“网页属性”。网页编辑 3．插入图片单击“插入”“图片”，从其级联菜单中选择。“常用工具栏”中“插入文件中的图片”按钮。 4．插入表格在网页的布局设计中常用到表格和框架来实现，其中表格具有数学公式计算功能。合并/拆分单元格、设置表格/单元格属性、插入行/列。 1、在网页中插入图片在FrontPage中，可以从当前站点、本地磁盘或Office的剪贴画库中获取图片，插入到网页的指定位置。图片的使用从当前站点中获取图片从本地磁盘中获取图片插入剪贴画 24 （1）改变图片的大小（2）转换图片格式制作网页时，使用GIF、JPGE格式的图片可以大大压缩图片的大小并实现一些特殊的功能，如可以将GIF格式图片中的某种颜色设为透明色。在图片上单击鼠标右键→“更改图片文件类型” （3）在图片上添加文本利用“图片”工具栏上的“文本”按钮，可以在图片上的任意位置添加文本，但注意该图片应为GIF格式。对图片的基本操作 25 网页编辑 5．插入文本、设置文本格式 FrontPage 2003允许在网页中（表格中）输入文本，复制、删除文本、查找/替换文本，也可以设置文本格式。 6 ．设置段落格式通过回车键划分段落，Shift＋Enter换行。实际上，Enter键在HTML代码中插入标记， Shift＋Enter则插入 标记。段落格式设置同word。 7．插入超链接在Web网页中超链接一般有两种表现方式：以文本标注的超链接和以图片方式标注的超链接。创建超链接的步骤：（1）选定要定义超链接的文本或图片；（2）“插入”“超链接”命令，或使用常用工具栏“插入超链接”按钮。另外，还可以创建图片热点链接来访问不同的网页或网站。图片热点超链接：使用图片工具栏热点按钮。网页编辑 8. 插入滚动字幕首先，将插入点定位在要插入移动字幕的位置或者选择作为移动字幕的文本；然后，单击“插入”“组件”“字幕”，弹出“字幕属性”对话框； 9. 插入水平线首先，将插入点定位在要插入水平线位置，然后单击“插入”“水平线” 10.其它对象 11. 保存网页并预览网页编辑通过FrontPage组件，用户无须进行编程就可在网页上实现一些特殊的功能。插入其它对象 1、悬停按钮使用悬停按钮是使网页变得生动活泼的一个简单有效的方法。悬停按钮有一个到其它网站或文件的超链接，当用户用鼠标单击或指向它时，它还能发光、显示自定义图片或播放声音。需要在“工具”菜单“自定义”中添加“悬停按钮”命令按钮 29 2、交互式按钮 “插入”菜单“Web组件”，在“动态效果”中选择“交互式按钮”；或者“插入”菜单 “交互式按钮” 3、Flash动画 “插入”菜单“Web组件”，在“高级控件”中选择Flash影片。 30 7.3.3 框架网页的布局一般通过使用表格和框架来实现。框架将浏览器窗口划分为几个区域，在每个框架里都可以显示一个独立的网页。浏览器窗口中显示的网页实际上是这些框架的集合，因此称为框架网页。框架网页并不包含显示内容，只是记录了该框架网页包含几个框架、拆分以及每个框架中显示那个网页（与其它网页的超链接）等。 1.创建框架（1）“文件”“新建”“网页”，打开新建对话框；（2）在该对话框中，选择“框架网页”，选择一种模板，单击确定即可完成框架网页的创建。这时，在窗口的底部出现一个新的标签：“无框架”视图：为不支持框架的浏览器创建替代网页。在每个框架中包含两个按钮：“新建网页”：新建一个显示在该框架中的网页；“设置初始网页”：建立与已经存在的网页的超链接，并将此网页显示在此框架中。 2.保存框架网页（1）使用“保存”命令，弹出“另存为”对话框，在右边的框架网页预览图中，有一个高亮显示的框架，表示要保存的是该网页；（2）选定保存位置，输入网页“文件名”；（3）单击“更改”按钮，设置网页标题；（4）单击“保存”按钮，该网页保存完毕，同时框架预览图中的另一个框架被高亮显示；（5）重复（2）～（4）步操作；（6）当该对话框汇总的整个框架处于高亮状态时，表示要保存的是框架网页本身，输入框架网页的文件名，单击“保存”即可。 3.设置框架属性通过对框架属性的设置，可以更改框架的超链接网页、调整框架大小等。（1）在文件夹列表中双击框架网页，打开框架网页，选择所需的框架；（2）单击“框架”“框架属性”，弹出“框架属性”对话框；（3）设置框架的名称、初始网页、框架大小、边距、显示滚动条等。 4．创建框架的超链接（1）选择包含超链接的网页，选择要定义超链接的文字或图片；（2）“插入”“超链接”命令(或常用工具栏中的按钮)，出现“创建超链接”对话框；（3）在“URL”框中输入链接的目标网页；（4）单击“更改目标框架”按钮，出现“目标框架”对话框；（5）在“当前框架网页”区域中单击要用作目标的框架，单击“确定”即可。 5. 拆分框架使用模板创建的框架结构不能满足需要时，可以通过拆分框架制作出更为复杂的框架网页。操作步骤如下：（1）：打开框架网页，选择要拆分的框架；（2）：在“框架”菜单中选择“拆分框架”命令，出现“拆分框架”对话框；（3）：按照要求在该对话框中设置拆分为行还是列，确定即可； 6. 删除框架可以从框架结构中删除指定的框架。此时，系统只是把框架从框架网页中删去，而此框架中的网页文件仍然存在。方法是：打开框架网页，选择要删除的框架，单击“框架”菜单的“删除框架”命令。 7.4 表单表单是Web服务器与用户交互的手段。用户将自己的信息输入到表单中，提交到WWW服务器，服务器对不同用户提交的信息作出不同的响应，从而实现交互。创建表单表单是由表单域组成的，表单域是供用户输入信息的对象。 1、使用向导创建表单在网页视图中选择：文件→新建 →网页在常规页中选择“表单网页向导”或“意见反馈表单” 或“用户注册”等模板。 2、自定义表单 “插入”“表单”，从级联菜单中选择合适的类型； 3、设置表单属性在表单上鼠标右键，选择“表单属性” 7.5 发布站点所谓发布站点，就是把创建或修改后的站点内容上传到WWW服务器中，以便用户浏览。发布站点的基本方法是（也可通过ftp上传的方式发布站点）（1）在FrontPage2003中，打开要发布站点；（2）在“常用”工具栏中单击“发布站点”按钮，或者“文件”“发布站点”，弹出“发布站点”对话框；（3）在“指定发布站点的位置”文本框中输入网站的URL或IP地址；（4）单击“发布”按钮，FrontPage2000开始检测WWW服务器的状态，与服务器连接成功后，会出现“要求提供用户名和密码”对话框；（5）输入服务器为用户分配的用户名和密码后，单击“确定”按钮，开始站点的发布过程；（6）发布成功后，应在浏览器中打开站点仔细检查。 FrontPage操作题实验说明：考试时要求通常为“将*.htm文件中……设置” ，此时我们应该用FrontPage2003打开该htm文件。启动FrontPage2003，然后选择“文件”“打开”命令，将考试文件下的该htm文档打开，或者在该htm文件上右击使用打开方式，选择FrontPage2003。而不应该直接双击该htm文件打开，这样是在浏览器中打开，不能进行编辑。本章结束谢谢 $$

资源预览图

所属专辑

2023-2024信息技术课件（电子工业出版社）

个人

2023-2024信息技术课件（电子工业出版社）

高二信息技术个人合辑 21 份文档

1498人已阅读

由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。