大学计算机课件.ppt

第7章网页设计 网页与网站用HTML语言编写的文件称为网页。主页(HomePage):站点就是一组相关网页和其他文件的集合。 网站和网页的设计原则网页设计表面上看，不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。网页设计应当以主题鲜明、形式与内容相统一、强调整体为设计原则。网页设计同报刊杂志等平面媒体的版式设计有很多共同之处。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。所谓网页设计，是在有限的屏幕空间上将各种网页元素，主要包括：文本、图像、表格、颜色、音乐、动态影像等进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。它要求设计者必须掌握以下三个主要原则： 网站和网页的设计原则1.主题鲜明，富有特色网页设计表达的是一定的意图和要求，有明确的主题。网页设计不但要单纯、简练、清晰和精确，而且应该通过对网页构成元素运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解。优秀的网页设计必然服务于网站的主题，就是说，什么样的网站，应该有什么样的设计。例如，设计类的个人站点与商业站点性质不同，目的也不同，所以评论的标准也不同。网页设计与网站主题的关系应该是这样：首先，设计是为主题服务的；其次，设计是艺术和技术结合的产物。要使网页从形式上获得良好的诱导力，鲜明地突出诉求主题，具体可以通过对网页的空间层次、主从关系、视觉秩序及彼此间的逻辑性的把握运用来达到。 网站和网页的设计原则2.形式内容和谐统一任何设计都有一定的内容和形式。内容是是设计存在的基础；形式是内容的外部表现方式。一方面，网页设计所追求的形式美，必须适合主题的需要。只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会变的空洞而无力。另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术。那样得到的效果可能会适得其反。3.色彩和谐，重点突出，强调整体网页设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它、掌握它，并给人一种内部有机联系、外部和谐完整的美感。整体性也是体现一个站点独特风格的重要手段之一。 HTML简介HTML：超文本标记语言。HTML文档(网页文件)：文本文件，扩展名为.htm或.html。 HTML语言概述1.HTML文件的基本构成HTML标记：定义网页元素及外观。多数有起始标记和结束标记。属性：写在起始标记中。 HTML语言概述2.HTML网页的结构（1）头部（2）正文主体常用属性： HTML语言的基本语法1.文本布局(1)段落标记

(2)换行标记
(3)水平线标记

---

(4)居中标记 9.1.2HTML语言的基本语法例2在网页中设置段落和页面格式。

在这里我们首先向您介绍有关HTML语言的基本知识和基本语法。
然后，讲授如何使用HTML语言编写您的Web页面。

段落左对齐段落居中段落右对齐 9.1.2HTML语言的基本语法2.文字格式HTML语言中用于文字格式化的标记有：（1）标题标记格式：标题文字其中，n为1到6的数字，表示字体大小。（2）字体标记 HTML语言的基本语法（3）字形标记设置文字的粗体、斜体、上标、下标、下划线等。标记格式字形结果…粗体…斜体…下划线 HTML语言的基本语法3.插入图片标记(1)src属性：指明图片文件所在的位置。格式：其中URL是指图片文件存放的位置。(2)alt属性(3)height和width属性：(4)border属性：(5)align属性： HTML语言的基本语法4.超级链接文本超链接：格式：超连接文本图片超链接： HTML语言的基本语法5.定义表格…定义表格。…定义表行。…定义单远格。 例4表格示例时间星期一星期二星期三1-2节数学语文英语3-4节地理历史生物 FrontPage概述FrontPage是微软公司开发的网页制作和网站管理工具。 FrontPage中的视图1.“网页”视图2.“文件夹”视图3．“报表”视图4．“导航”视图5．“超链接”视图6.“任务”视图 FrontPage的编辑方式网页视图下有三种编辑方式：普通、HTML、预览。 创建站点选“文件“--“新建”--“站点” 网页编辑1．新建网页（1）选择“文件”--“新建”--“网页” 9.3.2网页编辑2．打开网页3．设置文字格式4．设置段落格式按“Enter”分段按“Shift”+“Enter”换行 网页编辑5．设置网页属性(1)“常规”属性(2)“背景”属性(3)“边距”属性6．预览网页 插入对象插入水平线插入图片插入字幕插入悬停按钮插入动态HTML效果 创建超链接1．创建超链接以文本方式标注的超链接以图片方式标注的超链接1）链接到页面2）创建发送电子邮件的超链接 创建超链接2．使用书签书签：1）插入书签2）创建到书签的超链接 创建超链接3．为图形添加热点4．使用导航栏 创建和使用表格1．创建表格2．设置表格属性3．调整表格 创建框架在每个框架中可以显示一个独立的网页。创建框架保存框架网页拆分框架删除框架设置框架属性 创建框架超链接1．创建框架超链接2．使用特殊的目标框架 创建表单页面表单：收集浏览者的输入信息，从而实现网站与浏览者的交互。 插入表单域表单是由表单域组成的，表单域是客户输入信息的区域。在FrontPage2000中，有6种表单域：单行文本框、滚动文本框、复选框、单选按钮、下拉菜单、普通按钮。1．单行文本框单行文本输入框用于让客户输入一行文字。要插入一个单行文本输入框，使用“插入”菜单上的“表单”命令，再选择“单行文本框”。要设置单行文本框的属性，可以右单击单行文本框，在弹出的快捷菜单中选择“表单属性”命令，也可以直接双击单行文本框，FrontPage2000将打开“文本框属性”对话框。首先，要为单行文本框命名。当客户提交表单时，单行文本框的名称和内容被配对发送给Web服务器端的表单处理程序。在“初始值”框内可以键入默认内容。宽度框设置单行文本框的显示宽度。如果该单行文本框用于输入口令，则选择密码域为“是”，在浏览器中，用户输入时，内容显示为“*”号。单击“验证有效姓”按钮，设置限制用户输入的规则。 9.5.1插入表单域2．滚动文本框滚动文本框允许客户输入多行文本。要插人滚动文本框，使用“插入”菜单上的“表单”命令，再选择“滚动文本框”与单行文本框一样，设置滚动文本框的属性，可以右单击滚动文本框，在弹出的快捷菜单中选择“表单域属性”命令，或直接双击滚动文本框，FrontPage2000将打开“滚动文本框属性”对话框。3．复选框复选框是提供给客户的一个选项，一般彼此独立的多个复选框组成一组，客户可以同时选中所有选项，也可以一个都不选。要插入一个复选框，使用“插入”菜单上的“表单”命令，再选择“复选框”。要修设置选框的属性，右单击复选框，在弹出的菜单中选择“表单属性”命令，或直接双击复选框，FrontPage2000将打开“复选框属性”对话框。 插入表单域首先应当为复选框命名，当客户提交表单时，复选框的名称和状态配对发送给Web服务器端的表单处理程序。用户可以结出复选框的初始状态是选中还是不选中，使用Tab键按顺序选定。4．单选按钮单选按钮通常组成一组互斥的选项。客户只能选择其中一项。要插入单选按钮，使用“插入”菜单上的“表单”命令，再选择“单选按钮”。如果表单上有多个单选按钮，FrontPage2000默认选中第一个。要修改单选按钮的属性，右单击单选按钮，在弹出的菜单中选择“表单属性”命令，或直接双击单选按钮，FrontPage2000将打开“单选按钮属性”对话框。 插入表单域要注意的是，如果把多个单选按钮编成一组，必须使它们的组名相同。此外，可以单击“验证有效性”按钮，限定客户按一定的规则做出选择。5．下拉菜单（下拉列表框）下拉菜单用于从一个列表中选择一个或几个项，从功能的角度讲，可以用一组复选框或一组单选按钮来实现，但下拉菜单占用的空间相对较小。要插入下拉菜单，使用“插入”菜单上的“表单”命令，再选择“下拉菜单”。插入的下拉菜单是空的，用户可以右单击下拉菜单，在弹出的菜单中选择“表单属性”命令，或直接双击下拉菜单，FrontPage2000将打开“下拉菜单属性”对话框。单击“添加”按钮，将打开“添加选项”对话框。 插入表单域首先在“选项”框内输入名称，当客户提交表单时，提交的是选项的名称。如果想提交另外的值，应当选中“指定值”复选框，然后键人一个值。此外，用户还可以指定选项的初始状态是选定还是未选定。6．按钮一个表单上至少要有一个“提交”按钮和一个“全部重写”按钮，“提交”按钮的作用是把表单上的数据提交给Web服务器的表单处理程序，“全部重写”按钮的作用是把表单上的数据清空，以便重新填写。要插入按钮，使用“插入”菜单上的“表单”命令，再选择“按钮”。设置按钮的属性，可以右单击按钮，在弹出的菜单中选择“表单属性”命令，或直接双击按钮，打开“按钮属性”对话框。 提交表单Web服务器怎样获取客户在表单中填写的信息呢?当客户单击“提交”按钮后，Web服务器用表单处理程序来处理表单上的信息，表单处理程序可以是注册组件，也可以是自定义的ISAPI／NSAPI应用程序或CGI脚本等。表单处理程序位于web服务器端，用于处理客户提交过来的表单上的内容，或者发送确认信息给客户。要指定表单处理程序，在表单上单击鼠标右键，在弹出的菜单中选择“表单属性”命令，打开“表单属性”对话框。 提交表单如果使用FrontPage2000默认的表单处理程序，选择“发送到”。默认情况下，客户在表单上填写的信息以文本文件的形式保存到web服务器的_private文件夹，文件名为：表单_results.txt。用户还可以把表单结果发送到某个Email地址。如果不想使用FrontPage2000默认的表单处理程序，可以选择“发送到其他对象”单选按钮，然后在下拉列表中选择“自定义ISAPI、NSAPI、CGI或ASP脚本”或者FrontPage2000预定义的“讨论表单处理程序”或者“注册表单处理程序”。注意：使用FrontPage2000默认的表单处理程序或FrontPage2000预定义的“讨论表单处理程序”或者“注册表单处理程序”，Web服务器必须安装FrontPage服务扩展（FrontPageServerExtension），否则表单功能将不会产生任何效用。 网页的发布网页的结构形式是由各种视听要素组成的。在设计网页时，强调页面各组成部分的共性因素或者使诸部分共同含有某种形式特征，是求得整体的常用方法。这主要从版式、色彩、风格等方面入手。在版式上，将页面中各视觉要素作通盘考虑，以周密的组织和精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经过深思熟虑之后的决定；一个站点通常只使用两到三种标准色，并注意色彩搭配的和谐；对于分屏的长页面，不可设计完第一屏再考虑下一屏。同样，整个网页内部的页面，都应统一规划，统一风格，让浏览者体会到设计者完整的设计思想。从某种意义上讲，强调网页结构形式的视觉整体性必然会牺牲灵活的多变性，“物极必反”就是这个道理。因此，在强调网页整体性设计的同时必须注意：过于强调整体性可能会使网页呆板、沉闷，以致影响访问者的情趣和继续浏览的欲望。“整体”是“多变”基础上 网页的发布和维护所谓发布网站，就是在FrontPage2000中把创建或修改后的网站中的内容上传到Web服务器中。为了便于用户发布站点，FrontPage2000提供了一个相当方便的网页发布工具。（1）在FrontPage2000中，打开站点。（2）在“常用”上具栏中单击“发布站点”按钮，或者从“文件”菜单中选择“发布站点”命令。（3）出现“发布站点”对话框，在“指定发布站点的位置”文本框中输入要发布站点的URL或IP地址。（4）单击“选项”按钮，可以选择发布所需的选项。可以使用默认选项“只发布更改过的网页”，这样可以节省更新上传的时间。（5）单击“发布”按钮，FrontPage2000开始检测WWW服务器的状态。 网页的发布和维护（6）与服务器连接成功后，就会出现“要求提供用户名和密码”对话框。（7）设置完毕后，单击“确定”按钮。也许你的WWW服务器不支持FrontPage服务器扩展，此时FrontPage2000会自动启动WebPublishing向导来发布FrontPage网站，WebPublishing向导能够以FTP上的方式发布网站，但用户必须给出FTP服务器名、用户名和密码。当网页内容有更新时，只要单击“常用”工具栏中的“发布站点”按钮，即可将修改过的网页上传。开始站点的发布过程。当网站发布成功后，在浏览器打开站点仔细浏览，检查站点中每个网页是否正确的显示。