Frontpage2003网页制作

2020/5/3,1,三、网页制作,3.1网页是什么？3.2HTML语言3.3可视化网页制作工具3.4Office2003与网页制作,2020/5/3,2,主要内容：,本章介绍了什么是网页？介绍了HTML语言、可视化网页制作方法。介绍了FrontPage2003的基本使用方法。,2020/5/3,3,学习目标：,1认识网页2初步掌握HTML语言3理解可视化网页制作的观念4掌握FrontPage2003网页制作工具的基本使用方法。,2020/5/3,4,3.1什么是网页？,3.1什么是网页？,3.1.1WWW浏览3.1.2网页是文本文件3.1.3网站与网页,2020/5/3,5,3.1.1WWW浏览,3.1.1WWW浏览,WWW浏览是一种基于Internet的Web体系结构的服务项目。Web是WorldWideWeb的缩写。通常把它翻译为叫“万维网”。通过Web人们可以方便地浏览Internet主机上的大量的链接资源。如果你使用过Internet，相信你一定进行过WWW浏览。在用户端要享受WWW服务需要有两个条件：一是将自己的计算机连入Internet；二是自己的计算机上需要安装一个WWW浏览器程序（比如：在WindowsXP操作系统上安装一个IE浏览器程序）。,本节待续,2020/5/3,6,WWW浏览实例,3.1.1WWW浏览,地址栏,工作区,超级链接,本节待续,2020/5/3,7,什么是URL？,3.1.1WWW浏览,URL是UniformResourceLocator的缩写。通常把它翻译为“统一资源定位器”。顾名思义，URL是用来定位资源的。那么，它是用来定位什么资源呢？答案是：网页信息资源。如果想要直接浏览一个网页，首先就应该知道这个网页在什么地方（也就是说在哪台主机上的哪一个文件夹中）。怎么表示这个信息呢？用URL。,本节待续,2020/5/3,8,URL的格式,3.1.1WWW浏览,一个完整的URL如下：协议名称:/主机的IP地址|主机的域名/路径/文件标识,本节待续,2020/5/3,9,在地址栏输入：,3.1.1WWW浏览,URL,本节待续,2020/5/3,10,在地址栏输入：,3.1.1WWW浏览,本节待续,2020/5/3,11,3.1.1WWW浏览,输入URL时要特别注意的地方,1协议名和主机域名（或IP地址）之间应该是“/”。不是一个“/”2主机域名（或IP地址）和路径之间、路径和文件标示之间应该是“/”。不是“/”。3文件标示必须指明文件的文件名和扩展名。不只是文件名。4所有字符必须是ASCII码字符。不能用汉字的标点代替英文的标点。,后续3.1.2节,2020/5/3,12,3.1.2网页是文本文件,3.1.2网页是文本文件,从浏览器窗口中看到的网页是一个个包含有丰富多媒体信息的文档。那么网页里边的代码究竟是什么的呢？其实网页这种类型的文件里边包含的是文本信息，通常称这种文件为“文本文件”。其实网页就是文本文件。,本节待续,2020/5/3,13,3.1.2网页是文本文件,在浏览器中看到的网页,本节待续,2020/5/3,14,3.1.2网页是文本文件,网页的源代码,本节待续,2020/5/3,15,3.1.2网页是文本文件,文本编辑器的作用,是不是可以直接用“记事本”这种文本文件编辑工具来创建、编辑网页呢？回答是肯定的。不仅是“记事本”程序，“写字版”程序、“WPS”程序、“Word”程序等等，都可以作为编写网页文件的工具，只要在保存文件时使用“纯文本”文件类型（扩展名使用：htm、html、asp等）即可。,后续3.1.3节,2020/5/3,16,3.1.3网页和网站,3.1.3网页和网站,一个网页包含的信息毕竟是有限的。再说如果将大量的信息放在一个网页上就好比将若干本书的内容全部印在一页很大的纸上一样，这种情况是难以想象的。网页也是一样，全世界的信息提供者（商家、机构、部门、单位、组织、乃至个人等等）必须要将要提供的信息分门别类，保存在许许多多的网页中。,本节待续,2020/5/3,17,3.1.3网页和网站,将这些网页组织起来，并建立一些类似于图书馆的图书、资料查询目录的专门的网页。建立主要用于查询的目录网页和主要用于显示信息的信息网页之间的超级链接。提供一个在Internet上可以被正常使用的域名。规定一个首先就要让浏览者看到的网页（主页）。如果是这样的话，上述的信息提供者提供这些信息、功能、服务加起来就可以被认为是一个“网站”。,后续3.2节,2020/5/3,18,3.2HTML语言,3.2HTML语言,3.2.1HTML语言的基本语法规则3.2.2HTML的常用标记和属性3.2.3表格3.2.4图片3.2.5超级链接3.2.6表单,2020/5/3,19,3.2.1HTML语言的基本语法规则,3.2.1HTML语言的基本语法规则,用HTML语言编写的文档，其基本结构如下：标题栏的标题主体部分内容,本节待续,2020/5/3,20,HTML文档整体由和标记包含。文档分头部和主题两部分。和标记之间的是文档的头部；和标记之间的是文档的主体部分。和标记之间的文本在网页被浏览时将显示在浏览器窗口的标题栏。头部的代码主要用来为网页的浏览，以及网页中程序代码的执行提供准备。主体部分主要被用来在浏览器窗口的工作区显示网页的内容。HTML语言忽略“空格”字符，忽略大小写，标记的功能可以叠加。,3.2.1HTML语言的基本语法规则,本节待续,2020/5/3,21,HTML语言是一种描述性语言。HTML语言主要由一些标记构成。HTML语言标记的书写规则如下。,3.2.1HTML语言的基本语法规则,以空格隔开,后续3.2.2节,2020/5/3,22,3.2.2HTML的常用标记和属性,3.2.2HTML的常用标记和属性,1、标记和标记共同构成文档的首尾标记。和标记构成文档的头部部分。和标记规定网页在被浏览时浏览器窗口的标题栏中应显示出的内容。和标记定义了网页在被浏览时浏览器窗口的工作区中应显示出的内容。,本节待续,2020/5/3,23,3.2.2HTML的常用标记和属性,实例（源代码）,这是网页的标题这是网页的主体部分信息,本节待续,2020/5/3,24,3.2.2HTML的常用标记和属性,实例（浏览结果）,本节待续,2020/5/3,25,3.2.2HTML的常用标记和属性,2.标记常用的属性如下：,background：网页背景图案bgcolor：网页背景色彩text：网页中一般文本的色彩link：没访问过的超文本色彩vlink：访问过的超文本色彩alink：访问中的超文本色彩,本节待续,2020/5/3,26,3.2.2HTML的常用标记和属性,实例（源代码）,body标记的属性绿底蓝字,本节待续,2020/5/3,27,3.2.2HTML的常用标记和属性,实例（浏览结果）,本节待续,2020/5/3,28,3.2.2HTML的常用标记和属性,3.标记,标记（n为：1、2、3、4、5、6其中之一）规定在网页的主体部分形式显眼的标题文本。和成对出现，和表示最大号标题，和次之，和表示最小号标题。,本节待续,2020/5/3,29,3.2.2HTML的常用标记和属性,实例（源代码）,hn标记的效果这是1号标题这是2号标题这是3号标题这是4号标题这是5号标题这是6号标题,本节待续,2020/5/3,30,3.2.2HTML的常用标记和属性,实例（浏览结果）,本节待续,2020/5/3,31,3.2.2HTML的常用标记和属性,4.和标记,标记规定在网页中显示有序列表。标记规定在网页中显示无序列表。和标记通常与标记配合使用。,本节待续,2020/5/3,32,3.2.2HTML的常用标记和属性,实例（源代码）,有序和无序列表有序列表第1项有序列表第2项有序列表第3项,有序列表第4项有序列表第1项有序列表第2项有序列表第3项有序列表第4项,本节待续,2020/5/3,33,3.2.2HTML的常用标记和属性,实例（浏览结果）,本节待续,2020/5/3,34,3.2.2HTML的常用标记和属性,5.标记,在HTML语言中，标记被用来说明文本显示的各种特征（大小、字体、色彩等）。标记的常用的属性如下：size：文字的大小color：文本的色彩face：文本字体,本节待续,2020/5/3,35,3.2.2HTML的常用标记和属性,实例（源代码）,文本的样式7号隶书字体灰色的2号字,本节待续,2020/5/3,36,3.2.2HTML的常用标记和属性,实例（浏览结果）,本节待续,2020/5/3,37,3.2.2HTML的常用标记和属性,3.、标记,标记规定文本加粗显示标记规定文本加下划线显示标记规定文本倾斜显示,本节待续,2020/5/3,38,3.2.2HTML的常用标记和属性,实例（源代码）,文本的样式7号隶书字体灰色的2号字,本节待续,2020/5/3,39,3.2.2HTML的常用标记和属性,实例（浏览结果）,本节待续,2020/5/3,40,3.2.2HTML的常用标记和属性,7.标记,标记可以使网页在被浏览是产生一条水平线。标记不是成对出现的，一个标记产生一条水平线。,本节待续,2020/5/3,41,3.2.2HTML的常用标记和属性,实例（源代码）,水平线计算机应用计算机基础知识数据表示操作系统办公自动化计算机网络,本节待续,2020/5/3,42,3.2.2HTML的常用标记和属性,实例（浏览结果）,后续3.2.3节,2020/5/3,43,3.2.3表格,3.2.3表格,HTML语言的和标记可以在网页上构造表格。和标记构造表格的一行。和标记构造表格的一行上的一个单元格。,本节待续,2020/5/3,44,实例（源代码）,一般的表格学院专业设置情况专业层次学生人数教师人数计算机科学与技术博士100036,信息管理及系统硕士80030电子商务硕士160020,3.2.3表格,本节待续,2020/5/3,45,实例（浏览结果）,3.2.3表格,后续3.2.4节,2020/5/3,46,3.2.4图片,3.2.4图片,HTML语言的标记可以在网页中指定显示一幅图像。图像的大小由“width”和“heigth”属性决定。图像的来源由“src”属性决定。图像在页面中的对齐方式由“align”属性决定。,本节待续,2020/5/3,47,实例（源代码）,网页中显示图像一幅关于树的照片,3.2.4图片,本节待续,2020/5/3,48,实例（浏览结果）,3.2.4图片,后续3.2.5节,2020/5/3,49,3.2.5超级链接,3.2.5超级链接,HTML语言的和标记可以在网页中建立超级链接。URL由“href”属性决定。,本节待续,2020/5/3,50,实例（源代码）,网页中的超级链接我经常浏览的网页西南财经大学主页中央电视台华东师范大学计算机科学与技术系学生活动,3.2.5超级链接,本节待续,2020/5/3,51,实例（浏览结果）,3.2.5超级链接,后续3.2.6节,2020/5/3,52,3.2.6表单,3.2.6表单,HTML语言的和标记可以在网页中创建表单。标记常用属性如下：Action属性：规定传递数据后，服务器向客户端传送的网页。Method属性：规定传递数据的方式。Post方式适合传送大量数据，get方式适合传送少量数据。Name属性：规定表单的名称。,本节待续,2020/5/3,53,表单中的表单元素由标记创建，表单元素的类型由标记的“type”属性决定。“type”属性的常见及取值如下。text：表单元素是普通文本框。password：表单元素是密码文本框。checkbox：表单元素是多选项。redio：表单元素是单选项。submit：表单元素是提交按钮。reset：表单元素是重置按钮。,3.2.6表单,本节待续,2020/5/3,54,实例（源代码）,一个用登录的界面一个用登录的界面请输入您的大名：请输入登录密码：,3.2.6表单,本节待续,2020/5/3,55,实例（浏览结果）,3.2.6表单,后续3.3节,2020/5/3,56,3.3可视化网页制作工具,3.3可视化网页制作工具,3.3.1FrontPage基本功能3.3.2FrontPage应用程序窗口3.3.3网页中文字效果编排网站与网页3.3.4网页中插入图像网站与网页3.3.5网页中表格的处理网站与网页3.3.6网站与网页3.3.7网站与网页,2020/5/3,57,3.3.1FrontPage2003基本功能,3.3.1FrontPage基本功能,1可视化网页制作功能2网站建设功能3网站的发布和维护,后续3.3.2节,2020/5/3,58,3.3.2FrontPage2003应用程序窗口,3.3.2FrontPage应用程序窗口,后续3.3.3节,2020/5/3,59,3.3.3网页中文字效果编排,3.3.3网页中文字效果编排,制作静态网页实际上是一个技术问题，而在制作网页之前，应该有一个设计网页的工作要做。设计网页是一个艺术创作过程，这不是这门课主要要解决的问题。本章只涉及怎么制作网页的技术问题。使用可视化的网页制作工具FrontPage制作网页时，用户的基本操作和使用Word进行DOC文档的图、文、表混排操作非常类似。因此，如果有Word、Excel应用基础的用户使用FrontPage制作网页在操作方面应该不会有太大的问题。,后续3.3.4节,2020/5/3,60,3.3.4网页中插入图像,3.3.4网页中插入图像,1获得素材2插入图像3设置图像的属性,后续3.3.5节,2020/5/3,61,3.3.5网页中表格的处理,3.3.5网页中表格的处理,1规划表格2插入表格3设置表格的属性,后续3.3.6节,2020/5/3,62,3.3.6建立超级链接,3.3.6建立超级链接,1.选定需要附着超级链接信息的对象（文字、图像、动画均可）。2.单击右键展开快捷菜单3.执行“超链接”命令4.在系统给出的“创建超链接”对话框中设置超级链接信息即可。,后续3.3.7节,2020/5/3,63,3.3.7网页中的表单,3.3