大学计算机课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第,7,章 网页设计,2024/9/21,1,网页与网站,用,HTML,语言编写的文件称为网页,。,主页(,Home Page):,站点就是一组相关网页和其他文件的集合。,网站和网页的设计原则,网页设计表面上看，不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。,网页设计应当以主题鲜明、形式与内容相统一、强调整体为设计原则。,网页设计同报刊杂志等平面媒体的版式设计有很多共同之处。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。所谓网页设计，是在有限的屏幕空间上将各种网页元素，主要包括：文本、图像、表格、颜色、音乐、动态影像等进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。它要求设计者必须掌握以下三个主要原则：,网站和网页的设计原则,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.2,HTML,语言的基本语法,例2,在网页中设置段落和页面格式。, ,文本布局 ,在这里我们首先向您介绍有关,HTML,语言的基本知识和基本语法。,然后，讲授如何使用,HTML,语言编写您的,Web,页面。,段落左对齐,段落居中,段落右对齐,9.1.2,HTML,语言的基本语法,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使用特殊的目标框架,创建表单页面,表单：收集浏览者的输入信息，从而实现网站与浏览者的交互。,插入表单域,表单是由表单域组成的，表单域是客户输入信息的区域。在,FrontPage 2000,中，有6种表单域：单行文本框、滚动文本框、复选框、单选按钮、下拉菜单、普通按钮。,1单行文本框,单行文本输入框用于让客户输入一行文字。要插入一个单行文本输入框，使用“插入”菜单上的“表单”命令，再选择“单行文本框”。,要设置单行文本框的属性，可以右单击单行文本框，在弹出的快捷菜单中选择“表单属性”命令，也可以直接双击单行文本框，,FrontPage 2000,将打开“文本框属性”对话框。,首先，要为单行文本框命名。当客户提交表单时，单行文本框的名称和内容被配对发送给,Web,服务器端的表单处理程序。在“初始值”框内可以键入默认内容。宽度框设置单行文本框的显示宽度。如果该单行文本框用于输入口令，则选择密码域为“是”，在浏览器中，用户输入时，内容显示为“*”号。,单击“验证有效姓”按钮，设置限制用户输入的规则。,9.5.1插入表单域,2滚动文本框,滚动文本框允许客户输入多行文本。,要插人滚动文本框，使用“插入”菜单上的“表单”命令，再选择“滚动文本框”,与单行文本框一样，设置滚动文本框的属性，可以右单击滚动文本框，在弹出的快捷菜单中选择“表单域属性”命令，或直接双击滚动文本框，,FrontPage 2000,将打开“滚动文本框属性”对话框 。,3复选框,复选框是提供给客户的一个选项，一般彼此独立的多个复选框组成一组，客户可以同时选中所有选项，也可以一个都不选。,要插入一个复选框，使用“插入”菜单上的“表单”命令，再选择“复选框”。,要修设置选框的属性，右单击复选框，在弹出的菜单中选择“表单属性”命令，或直接双击复选框，,FrontPage 2000,将打开“复选框属性”对话框。,插入表单域,首先应当为复选框命名，当客户提交表单时，复选框的名称和状态配对发送给,Web,服务器端的表单处理程序。,用户可以结出复选框的初始状态是选中还是不选中，使用,Tab,键按顺序选定。,4单选按钮,单选按钮通常组成一组互斥的选项。客户只能选择其中一项。,要插入单选按钮，使用“插入”菜单上的“表单”命令，再选择“单选按钮”。,如果表单上有多个单选按钮，,FrontPage 2000,默认选中第一个。,要修改单选按钮的属性，右单击单选按钮，在弹出的菜单中选择“表单属性”命令，或直接双击单选按钮，,FrontPage 2000,将打开“单选按钮属性”对话框 。,插入表单域,要注意的是，如果把多个单选按钮编成一组，必须使它们的组名相同。此外，可以单击“验证有效性”按钮，限定客户按一定的规则做出选择。,5,下拉菜单（下拉列表框）,下拉菜单用于从一个列表中选择一个或几个项，从功能的角度讲，可以用一组复选框或一组单选按钮来实现，但下拉菜单占用的空间相对较小。,要插入下拉菜单，使用“插入”菜单上的“表单”命令，再选择“下拉菜单”。插入的下拉菜单是空的，用户可以右单击下拉菜单，在弹出的菜单中选择“表单属性”命令，或直接双击下拉菜单，,FrontPage 2000,将打开“下拉菜单属性”对话框,。,单击“添加”按钮，将打开“添加选项”对话框,。,插入表单域,首先在“选项”框内输入名称，当客户提交表单时，提交的是选项的名称。如果想提交另外的值，应当选中“指定值”复选框，然后键人一个值。此外，用户还可以指定选项的初始状态是选定还是未选定。,6,按钮,一个表单上至少要有一个“提交”按钮和一个“全部重写”按钮，“提交”按钮的作用是把表单上的数据提交给,Web,服务器的表单处理程序，“全部重写”按钮的作用是把表单上的数据清空，以便重新填写。,要插入按钮，使用“插入”菜单上的“表单”命令，再选择“按钮”。,设置按钮的属性，可以右单击按钮，在弹出的菜单中选择“表单属性”命令，或直接双击按钮，打开“按钮属性”对话框。,提交表单,Web,服务器怎样获取客户在表单中填写的信息呢?当客户单击“提交”按钮后，,Web,服务器用表单处理程序来处理表单上的信息，表单处理程序可以是注册组件，也可以是自定义的,ISAPINSAPI,应用程序或,CGI,脚本等。,表单处理程序位于,web,服务器端，用于处理客户提交过来的表单上的内容，或者发送确认信息给客户。,要指定表单处理程序，在表单上单击鼠标右键，在弹出的菜单中选择“表单属性”命令，打开“表单属性”对话框 。,提交表单,如果使用,FrontPage 2000,默认的表单处理程序，选择“发送到”。默认情况下，客户在表单上填写的信息以文本文件的形式保存到,web,服务器的_,private,文件夹，文件名为：表单_,results.txt。,用户还可以把表单结果发送到某个,Email,地址。,如果不想使用,FrontPage 2000,默认的表单处理程序，可以选择“发送到其他对象”单选按钮，然后在下拉列表中选择“自定义,ISAPI、NSAPI、CGI,或,ASP,脚本”或者,FrontPage 2000,预定义的“讨论表单处理程序”或者“注册表单处理程序” 。,注意：使用,FrontPage 2000,默认的表单处理程序或,FrontPage 2000,预定义的“讨论表单处理程序”或者“注册表单处理程序”，,Web,服务器必须安装,FrontPage,服务扩展（,FrontPage Server Extension），,否则表单功能将不会产生任何效用。,网页的发布,网页的结构形式是由各种视听要素组成的。在设计网页时，强调页面各组成部分的共性因素或者使诸部分共同含有某种形式特征，是求得整体的常用方法。这主要从版式、色彩、风格等方面入手。,在版式上，将页面中各视觉要素作通盘考虑，以周密的组织和精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经过深思熟虑之后的决定；一个站点通常只使用两到三种标准色，并注意色彩搭配的和谐；对于分屏的长页面，不可设计完第一屏再考虑下一屏。同样，整个网页内部的页面，都应统一规划，统一风格，让浏览者体会到设计者完整的设计思想。,从某种意义上讲，强调网页结构形式的视觉整体性必然会牺牲灵活的多变性，“物极必反”就是这个道理。因此，在强调网页整体性设计的同时必须注意：过于强调整体性可能会使网页呆板、沉闷，以致影响访问者的情趣和继续浏览的欲望。“整体”是“多变”基础上,网页的发布和维护,所谓发布网站，就是在,FrontPage 2000,中把创建或修改后的网站中的内容上传到,Web,服务器中。为了便于用户发布站点，,FrontPage 2000,提供了一个相当方便的网页发布工具。,（1） 在,FrontPage 2000,中，打开站点。,（2） 在“常用”上具栏中单击“发布站点” 按钮，或者从“文件”菜单中选择“发布站点”命令。,（3） 出现“发布站点”对话框，在“指定发布站点的位置”文本框中输入要发布站点的,URL,或,IP,地址 。,（,4,）,单击“选项”按钮，可以选择发布所需的选项。可以使用默认选项“只发布更改过的网页”，这样可以节省更新上传的时间。,（,5,）,单击“发布”按钮，,FrontPage 2000,开始检测,WWW,服务器的状态。,网页的发布和维护,（,6,）,与服务器连接成功后，就会出现“要求提供用户名和密码”对话框。,（,7,）,设置完毕后，单击“确定”按钮。,也许你的,WWW,服务器不支持,FrontPage,服务器扩展，此时,FrontPage 2000,会自动启动,Web Publishing,向导来发布,FrontPage,网站，,Web Publishing,向导能够以,FTP,上的方式发布网站，但用户必须给出,FTP,服务器名、用户名和密码。,当网页内容有更新时，只要单击“常用”工具栏中的 “发布站点” 按钮，即可将修改过的网页上传。,开始站点的发布过程。当网站发布成功后，在浏览器打开站点仔细浏览，检查站点中每个网页是否正确的显示,。,