七章网页制作.ppt
第 七 章 网 页 制 作,7.1 HTML语言简介,观察下面这段文本内容在记事本和浏览器中的显示区别:, www.baidu.com ,HTML标签,标签属性,HTML:Hyptext Markup Language(超文本标签语言) 以表示标签的开始,以表示标签的结束 成对标签又称之为容器,一对标签中还可以嵌套其它的标签 单独标签不需要与之配对的结束标签,又称之为空标签,例如 一个HTML标签及标签中嵌套的内容就是网页中的一个“HTML元素” 利用标签的一个或多个属性来控制标签的显示效果。属性设置的一般格式为:属性名=属性值,属性值部分可以用英文的双引号或单引号引起来,也可以不使用任何引号. HTML语言不区分大小写.,Html的文档结构,html文档一般包括文件头（header）和正文（body）两部分，其基本结构如下： . . ,7.2 FrontPage简介,1. FrontPage 2003的功能特点 两大功能: 一是制作网页，二是制作和管理网站 。 功能特点与优点: 提供一套完整的网页和网站开发工具 。 提供高效的“所见即所得”网页制作方式 。 提供快速生成网站/网页的模板和向导 。 提供强大的网页链接管理功能 。 提供强大的动态网页制作功能。 共享Office产品的许多特性，易学易用。,7.2 FrontPage简介,2. FrontPage 2003窗口,1. 网站的基本操作 （1）新建站点 新建网站时，可以建立一个不包含任何网页的空站点，也可根据向导或模板建立站点。 （2）打开站点 （3）站点重命名 新建站点时，FrontPage 预设的站点名称是MyWeb1、Myweb2等。 可以重命名。 （4）关闭站点: 执行菜单命令【文件】/关闭站点。 （5）删除站点 删除当前正在编辑的站点。 注意：站点一旦删除将不能恢复。,7.3 使用FrontPage制作网页,7.3 使用FrontPage制作网页,2. FrontPage 网页制作的一般步骤 两种制作方式： 一是首先创建一个空白网页，然后编辑网页在网页中添加各种网页元素。 二是使用网页向导和各种常用网页模板来快速创建形式相对固定的网页。（二者本质相同，使用同一个编辑器） 步骤： 新建或打开一个网页。 在网页中添加、编辑各种网页元素。 预览网页效果，满意后保存网页或关闭网页。,3. 网页的基本操作 （1）新建网页 FrontPage 启动后会自动建立一个新的网页，文件名为new_page_1.htm。 新建一个空白网页。 根据向导或模板新建网页。 （2）打开网页 使用菜单命令从“打开文件”对话框 中打开网页。 在已打开网站的“文件夹列表”中直接双击其中的网页文件名即可打开网页。,7.3 使用FrontPage制作网页,（3）设置网页属性 新建网页或打开网页后，可以设置其标题、背景音乐、背景图像等属性 。 （4）预览网页 预览网页是指在编辑的过程中查看网页在浏览器中所显示的实际效果。 在编辑器中预览: 单击编辑器的“预览”选项卡，即可预览当前正在编辑的网页 。 在浏览器中预览: 是指在浏览器中打开并显示网页效果。,7.3 使用FrontPage制作网页,（5） 保存网页 网页制作好了以后，要保存起来。保存网页时保存类型应指定为“Web页”。 （6）关闭当前网页 操作方法：执行菜单命令【文件】/关闭，或按快捷键 + ，或单击编辑器右上角的关闭按钮。,7.3 使用FrontPage制作网页,4. 文本编辑与修饰 作为大量信息的载体，文本是网页中必不可少的主要元素之一。 在FrontPage 2003中，网页中的文本处理技术与操作与Word 2003基本一致，使用过Word的用户可以很快掌握网页中的文本编辑与修饰。 FrontPage 2003与Word 2003的一个不同之处是它对字体大小的支持，FrontPage 2003本身提供的字体大小只有7级。,7.3 使用FrontPage制作网页,5. 插入图像 （1）图像格式 并不是每种格式的图像都适合于在网页中使用，网页中最常用的静止图像有: JPEG格式。文件扩展名为.jpg，是经过压缩的数字静止图像，通常用于存储彩色风景图像或照片。 GIF格式。GIF文件也是采用压缩存储，最高只能包含256种颜色，其最大的优点是可以实现简单的动画。,7.3 使用FrontPage制作网页,5. 使用图像 （2）在网页中插入图片 插入剪贴画 。 插入图片。 （3）编辑图片 根据需要，可以改变图片的大小、布局，在图片上添加文字，以及调整图片的对比度、亮度等等。 操作方法：通过快捷菜单打开“图片属性”对话框来设置，或者使用“图片”工具栏来完成。,7.3 使用FrontPage制作网页,6超链接 网页的本质和强大之处就是超链接，超链接是从文本、图片映射到Internet上其它网页或文件等目标资源的指针。 （1）超链接的组成及分类 组成：超链接包含载体和目标地址两部分。 链接的载体：是指显示超链接的部分，也就是指包含超链接的图像或文字。以文字作为载体的超链接称为文字链接，以图像作为载体的链接称为图像链接。 链接的目标地址：是指目标资源的URL，可以是网页或网站的地址，也可以是电子邮箱等。,7.3 使用FrontPage制作网页,6超链接 分类：根据链接目标地址类型，可分为三类: 指向网站外部的超链接; 指向同一网站内部的超链接; 指向同一网页内部的超链接。 创建三种超链接的操作方法基本相同，主要是要设置不同的目标地址。 （2）创建网站内部的超链接 链接到网站内已有网页/文件。 链接到一个新的网页。,7.3 使用FrontPage制作网页,6超链接 （3）创建到网站外部的链接 网站外部的链接目标包括其它网站和电子邮箱。 到其它网站的超链接 。 用于发送电子邮件的超链接 。,7.3 使用FrontPage制作网页,6超链接 （4）超链接的编辑 更改超链接文本: 操作方法与修改普通文本完全相同。 更改超链接图片的外观。 修改链接目标。 取消超链接: 删除“编辑超链接”对话框中URL栏内容。,7.3 使用FrontPage制作网页,1使用表格布局 表格是网页中经常采用的一种有效的信息组织方式和表示方式。FrontPage表格操作与Word 表格操作非常类似 。创建表格的方法主要以下四种： 单击“常用”工具栏中的“插入表格”按钮，可以按默认的布局方式快速插入表格。 。 在网页中设置插入点后，执行【表格】/插入“表格”，并在打开的“插入表格”对话框中指定行数和列数。 执行菜单命令【表格】/手绘表格，打开“表格”工具栏，手动绘制需要的表格。 将已有的文本转换为表格。,7.4 网页布局,2使用框架布局 （1）概述：框架网页是一种特殊的网页，它将浏览器窗口分割成不同的区域即框架（Frame），每个框架内的网页既可以单独控制，也可以建立与其它框架内网页之间的链接关系，因此框架网页常常被用来组织和表示大量的、复杂的信息内容，如目录、文章列表等。,框架的源文件不包括任何可以在浏览中显示的内容，只是标明包含几个框架及框架的拆分方式等。每个框架实际上是一个单独的网页，保存网页时每个框架有单独的源文件。,7.4 网页布局,2使用框架布局 （2）使用模板新建框架网页 在FrontPage 2003中，框架网页通常使用模板来创建。一般是先建立一个空的框架网页，然后调整框架布局，并制作或设置每个框架中的网页。,操作方法：打开“新建” 对话框，如右图，在 “框架网页”选项卡中选择所需的模板，该模板网页的预览图出现在“预览”区域。按“确定”按钮。,7.4 网页布局,2使用框架布局 （3）设置框架中的网页 利用模板新建的框架网页还只是一个空的框架，创建后还必须为每一个框架设置初始网页。 创建一个新网页作为初始网页。 设置为现有网页。 （4）保存框架网页 框架网页设计好了以后，除了保存各个框架内对应的网页之外，还需要保存框架网页，操作方法比保存常规网页稍显复杂。,7.4 网页布局,1.提交表单网页 表单在web网页中用来让访问者填写信息，从而让web服务器能获得用户信息并进行处理，使web服务器与用户之间具有交互的功能。如搜索栏、论坛和订单等。 表单的创建： （1）选择“插入”/“表单”下的“表单”菜单项。 （2）利用“插入”/“表单”菜单项在网页中插入各种表单对象，包括文本域、密码域、单选按钮、复选框、弹出菜单、按钮等。 2 .确认表单网页 访问者填写完表单并单击“提交”按钮后，浏览器将表单结果发送给服务器，服务器端脚本或应用程序对这些信息进行处理。服务器通过请求信息发送回用户，或基于该表单内容执行一些操作来进行响应。,7.5 表单的使用,7.6 网页的发布,1.申请个人主页空间 网站制作完毕后，可正式上传到internet。在上传网站前，应先在internet上申请一个网站空间，这样才能把所作的网页放到远程服务器上，供世界各地的浏览者访问。 2.申请方法 若要申请免费网络空间，可在各搜索引擎中输入”免费空间“、”免费网站“或”免费网页“等字样，即可搜索到很多的相关信息。 向网站提出申请后，会受到一封电子邮件，主要涉及以下几项： （1）、恭喜用户的申请已获批准，并列出免费使用网站空间应注意的问题。 （2）、要求放在用户网站中的代码。为网站做宣传。 （3）、提示用户的网站应放置的目录、主页文件名及上传的服务器名。 （4）、提示用户的主页地址。 （5）、提示完成网站上传后，在邮件所给的地址填写连接表。,3. 网页发布 网站空间申请好后，把用户的网站上传到internet服务器。 （1）将网站发布到Internet的条件 一是自己的计算机必须能连接上网。二是有存放网站的Web服务器。三是有向服务器上传文件的软件。 （2）发布操作 FrontPage 2003提供了一个相当方便的网页发布工具，只需完成其中的设置，就可以方便地把站点发布到Internet Web服务器上。选择“文件”/“发布站点”菜单命令即可。 注意: 发布成功后，可使用浏览器输入网址浏览，查看每个网页是否显示正确。,7.6 网页的发布,7.7网站管理与维护,1.网站的管理 要是只有你自己一个人知道你网页的地址,那你的网页就失去了存在的意义,因此如何宣传自己网页就成为网页能否发挥其作用的关键所在。 网页的宣传大致有以下几种方法： 第一种方法：赶快到各大搜索引擎注册 第二种方法：利用网上广播站 第三种方法：使用帮你注册的软件，如网上蜘蛛 第四种方法：利用Email向你的网友发封信 要想保持网页的浏览人数，你就要不停地更新你的主页，增加其内容， 永远给人一种新的感觉。平时上网时多搜集资料，多听听别人的意见，每隔一段时间更新版面。只有这样你的网页才能不断地为网友服务,7.7网站管理与维护,2.网站的维护 （1）采用管理员维护 有一些ISP提供的免费主页空间，采用管理员连接的方法，这意味着您每次上传的内容都要首先经过管理员处理，并由管理员把内容连到您的主页上。 （2）采用FTP维护 对于采用FTP方式维护的站点，主页维护的主动权则完全由网友掌握。您在任何时候都能上传文件，而且上传完成后，立刻就能通过浏览器查看修改后的效果。,
