版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、网页制作,2020/6/22,1,电脑文化基础,网页制作,HTML简介FrontPage 2003概述网页制作网页制作网页布局制作表格网页发布,2020/6/22,2,电脑文化基础,HTML简介,HTML简介使用一些通用标签(Tag)标记文本,定义web页的数据格式,解释web页上的信息,以及控制文本的显示。我们将使用HTML语言编写的文件称为HTML文件。通常存储在web服务器上,客户端通过浏览器向web服务器发送请求,服务器响应请求,将HTML文件发送到浏览器,浏览器正确解释文件中的标签,然后以页面形式显示在用户屏幕上。因此,我们将HTML文档称为网页(Web Page)。2020/6/2
2、2,3,计算机文化基础,HTML介绍,HTML语言是容易学习的标记语言。以HTML语言编写的网页实际上具有扩展名.htm或.html文本文件,可以使用任何文本处理软件(例如记事本)创建。1.1 HTML语言概述1.2 HTML语言的基本语法,后退,2020/6/22,4,基于计算机文化,1.1 HTML语言概述,HTML语言是由全球标准化组织万维网联盟(W3C)开发的,3333以下说明了HTML文件的默认合成以及HTML文件的层次结构:2020/6/22,5,计算机文化基础,1。HTML文件的基础是internet上的每个HTML文件都包含文本内容和HTML标记两个部分。其中HTML标签控制文
3、本显示的外观和布局,并指定链接到浏览器的各种图像、声音和其它对象的位置。大多数HTML标签都是以下列格式编写的:文本内容标记名称记录在“”中。大多数HTML标签都有开始标签和结束标签,而且有些HTML标签成对出现,但没有结束标签。此外,HTML标签不区分大小写。HTML文件的基本配置、2020/6/22,6、计算机文化基础、某些HTML标记还具有用于指定对象特征(如背景颜色、文本字体和大小、对齐等)的属性。属性通常放置在标签名称和属性以空格分隔的文字内容的起始标签中。如果标记具有多个属性,请用空格分隔属性。HTML文件的基本配置,2020/6/22,7,计算机文化基础,2 .HTML网页的结构
4、现在让我们看一下以HTML语言构建网页时的层次结构的简单HTML文件。示例1使用HTML语言创建简单的网页。我的第一个网页欢迎来到HTML世界!这里首先介绍HTML语言的基本知识和语法。然后讲授如何使用HTML语言创建网页。2020/6/22,8,基于计算机文化,HTML语言概述,使用文本编辑器编辑以上代码。保存为扩展名为htm的文件后,双击文件图标可在浏览器中查看结果,如下图所示。图9-1,2020/6/22,9,计算机文化基础,如上例所示,常规HTML文件以开始,以结束。文件结构由两部分组成:1)头(Head) HTML文件的头由和标记定义。文件的标题、语言字符集信息等通常放置在头部信息中
5、。最常用的标记是.是。此标签用于定义web文件的标题,打开web文件时,web文件的标题将显示在浏览器的标题栏中。2020/6/22,10,计算机文化基础,文件结构,2)正文正文正文正文正文正文正文正文正文正文是由和标记定义的HTML文件的核心内容。标记具有以下格式的常规属性:其中bgcolor是背景色,color是文本颜色。n是6位数的十六进制数。如果网页使用背景图像,则格式为: HTML对格式要求不严格,当浏览器扫描HTML文件时,将忽略文件中包含的所有空格、回车等。因此,一行可以写入两行或更多行,浏览器的结果相同。,2020/6/22,11,计算机文化基础,1.2 HTML语言的基本语法
6、,1 .文本布局1)段落标记.标签指定文件中的个别段落。设定Align属性以控制段落的对齐方式。其值可以是left、center、right和justify,分别表示左对齐、居中对齐、右对齐和两端对齐,默认值为左对齐。2)可以使用换行符使文本换行。此标记只有开始标记。3)水平线标识水平线标识用于在网页上插入水平线。2020/6/22,12,计算机文化基础,2。文本格式在HTML语言中,用于设置文本格式的标记如下:1)标题标记格式如下:标题文本内容其中n描述大小级别,范围是1到6之间的数字。将标题分为h1h6的6个等级。其中h1字符最大,h6字符最小。2020/6/22,13,计算机文化基础,2
7、)字体标记字体标记主要按以下属性格式化文本:(1)size属性:用于控制文本的大小,格式如下:其中n的值范围为1到7,默认值为3。标记和标记都可以控制文字大小。通常,文章的标题由标签控制,其馀文本最好由标签控制。相比之下,可以更灵活地控制字体。(2)color属性:用于控制文本颜色的格式如下:其中n是十六进制6位。(3)face属性:用于表示文字中使用的字体的格式如下:其中字体名称的选择由Windows操作系统安装的字体决定。宋体、楷体_GB2312、Times New Roman、Arial等。字符格式,2020/6/22,14,计算机文化基础,3)字形标记用于设置字符的粗体、斜体、下划线、
8、上标、下标等。文本格式,2020/6/22,15,计算机文化基础,3 .插入图片标记在网页中插入图片以设置图片的大小和相邻字符的对齐方式。标记具有以下属性:(1)src属性:指示图片文件所在的位置。格式如下:其中URL是图片文件的存档位置。(2)alt属性:图片的文本说明,当鼠标指针指向图片时,该图片的说明文本将弹出。格式如下:(3)width和height属性:设置插图显示区域的宽度和高度。格式如下:其中width和height属性的值n1和N2可以是像素数或百分比。2020/6/22,16,计算机文化基础,(4)border属性:设置图片文件的边框。格式如下:其中n是像素数。(5)alig
9、n属性:相对于文本设置图片的位置关系。您可以使用顶部(顶部对齐)、middle(相对垂直居中)、bottom(相对底部对齐)、left(左对齐)、right(右对齐)和texttop(文本上方)等格式进行对齐,插入照片,2020/6/22,17,计算机文化基础,4。在HTML语言中插入超链接和在网页中设置超链接的标签href属性表示超链接文件地址。格式如下:超链接文本用于表示超链接的文本通常显示为蓝色,并带有下划线。在浏览器中,当鼠标指针指向文本时,箭头变为手形,并且该超链接的地址显示在浏览器的状态栏中。如果将图片用作超链接,则为2020/6/22,18,计算机文化基础,5。使用表格在网页中插
10、入表格需要一组HTML标签。表格定义的标签如下:定义表格空间。定义表格标题。定义表头。定义表格列。定义表格储存格。返回到2020/6/22,19,计算机文化基础,常用标记属性中,border属性用于设置表格边框的宽度。Width,height属性设置表格或单元格的宽度和高度。Cellspacing和cellpadding属性分别用于设置单元格之间的间距和单元格内的空格。Align属性用于设置表或单元格的对齐方式。Bgcolor和background属性分别用于设置表格的背景颜色和背景图像。,表格属性,2020/6/22,20,计算机文化基础,FrontPage 2003概述,纯文本编辑器允许您
11、编写HTML文档,但是使用专用HTML编辑器或web创作工具通常会更方便。使用具有“所见即所得”(Wysiwyg)功能的网页创作工具,网页作者可以直接编辑网页,立即查看网页的外观。FrontPage 2003是Microsoft corporation开发的web创作和网站管理工具,是Microsoft Office 2003的组件之一,是与Office其他组件高度融合、界面友好、功能强大、易于学习和使用的当前应用更广的web创作、网站管理工具之一。2020/6/22,21,计算机文化基础,FrontPage 2003概述,2.1 FrontPage 2003的主要功能2.2 FrontPag
12、e 2003开始和结束2.3网页和网站2.4 FrontPage 2003的web查看模式,以及您可以使用FrontPage 2003创建新网页,或打开已存在的网页进行修改。在FrontPage 2003中,除了可以直接修改HTML外,还可以使用菜单命令插入各种web页元素(允许您“如所见”地编辑web页),使用对话框修改其属性非常方便。返回到,在2020/6/22,23,FrontPage 2003中,可以轻松插入文本、图片、表格、组件等元素。您可以使用主题和样式表、共享边框、框架等管理网页的外观。您也可以使用元素(如表单)设计交互式网页。FrontPage 2003提供了强大的站点管理功能
13、。一组相关的网页和相关文件构成一个站点,站点也是FrontPage 2003管理站点的基本单位。FrontPage 2003使设计、管理、分析、发布和维护站点的工作变得轻松。FrontPage 2003的主要功能、2020/6/22,24、基于计算机文化、web和网站以及web页面是全球wan上的基本文档,通常以HTML编写。htm或.html扩展名。网页可以独立存在,但经常用作网站的一部分。网站是相关网页和相关文件的集合,通常有一个称为“主页”(Homepage)的特殊网页,它引导用户访问其他网页。网站通常是客户机通过网络向web服务器发送请求,web服务器响应客户机的请求,使用HTTP协议
14、将web页及其相关文件通过网络发回客户机,客户机端可以使用web浏览器查看web页的内容。可以在2020/6/22,25、基于计算机文化、网页和网站以及FrontPage 2003中创建和编辑单独的网页,也可以设计和管理站点。站点可以包含多个网页和各种文件,甚至还可以包含子站点,FrontPage 2003中的许多属性只有在使用站点时才有效。通常,在FrontPage 2003中设置的网站应该发布到internet的web服务器上,成为internet用户可以访问的真正意义上的网站。还可以在同一台计算机上安装web服务器端软件,以便在本地发布站点以进行测试。使用FrontPage 2003,您
15、还可以构建以默认文件夹形式存在的基于本地硬盘的站点,该站点不需要发布到服务器,但需要服务器支持的功能不可用。返回到2020/6/22,26,计算机文化基础,FrontPage 2003的web查看模式,FrontPage 2003提供了四种web查看模式。设计视图是打开网页的第一个视图,您可以根据需要对其进行修改,如输入文本、插入图片、插入表格等。在“代码”视图中,用户可以查看、创建和编辑HTML标签。预览视图显示网页通常在web浏览器中显示。FrontPage 2003中新增的拆分视图将窗口工作区拆分为上、下、上半部分是代码区域,下半部分是设计区域。变更任何区域都会相应地变更其他区域。,返回
16、,2020/6/22,27,基于计算机文化,创建3.1站点3.2网页编辑3.3插入3.4超链接,返回,2020/6/22,28,基于计算机文化,创建3.1站点,FrontPage创建新站点时,可以根据自己的需要选择不同的模板和向导。根据模板和向导的不同,创建新站点的步骤略有不同。下面以“由一个网页组成的网站”模板为例,说明如何创建新站点。(1)单击“文件”菜单上的“新建”命令,然后在“新建”任务窗格的“新建网站”下,(2)在弹出“站点模板”对话框的“指定新站点的位置”框中,输入要保存新站点的位置,或使用“浏览”按钮指定新站点的位置。2020/6/22,29,基于计算机文化,(3)单击“确定”按钮将创建新站点(如下图所示),然后返回,如果该站点只有一个空web页index.htm和一个用于保存图片的文件夹images,请打开index.htm进行编辑,或根据站点计划创建其他文件夹,然后创建其他web页可以通过选择“文件”菜单上的“退出”命令关闭FrontPage 2003。2020/6/22,30,基于计算机文化,3.2网页编辑,1 .新网页2 .打开/保存网页3 .预览网页4。格式化文本5 .段落格式6 .要根据设置网页属性、返回、2020/6/22,31、基于计算机文化、编辑网页、“网页模板”创建新网页,请执行以下步骤:(1)单击“文件”菜
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026年中国医科大学第一附属医院医护人员招聘笔试参考试题及答案详解
- 2026年吉林大学第一医院医护人员招聘笔试备考试题及答案详解
- 2026年农业发展银行(陕西省分行)人员招聘笔试备考试题及答案详解
- 2026年长沙市口腔医院医护人员招聘笔试备考题库及答案详解
- 2026年温州市第二人民医院医护人员招聘笔试参考题库及答案详解
- 2026年天津环湖医院医护人员招聘考试备考题库及答案详解
- 2026年中国人民解放军第105医院医护人员招聘笔试参考题库及答案详解
- 2026年平邑县中医医院医护人员招聘笔试参考试题及答案详解
- 2026年河北固安农村商业银行人员招聘笔试备考试题及答案详解
- 2026年青岛市精神卫生中心医护人员招聘考试备考试题及答案详解
- 装修1单位工程人材机汇总表
- 南华大学医学院 病理习题
- 2024年上海市中考语文备考之14本必读名著最全知识点整理
- 应用迁移分析报告
- 大桥行洪论证与河势稳定评价报告
- JJG 644-2003振动位移传感器
- GB/T 24137-2009木塑装饰板
- 全套教学课件《管理学基础》
- 变电站工程雨季施工方案
- DB52-T 1692-2022水利工程标识标牌技术规范
- 商会换届选举办法
评论
0/150
提交评论