网页设计和制作-课件-PPT课件.ppt
- 文档编号:16642435
- 上传时间:2023-07-16
- 格式:PPT
- 页数:95
- 大小:1.49MB
网页设计和制作-课件-PPT课件.ppt
《网页设计和制作-课件-PPT课件.ppt》由会员分享,可在线阅读,更多相关《网页设计和制作-课件-PPT课件.ppt(95页珍藏版)》请在冰点文库上搜索。
网页设计与制作,2,第一部分网页制作初识,通过本部分的学习,应该掌握以下内容:
认识网页构成网页的基本要素制作网页的基本工具美化网页的基本工具网页制作的基本步骤网页执行原理网页运行的软件支撑环境,3,WorldWideWeb又称WWW、W3、Web,中文名称叫做“全球信息网”。
CENT和MIT于1994年7月成立WorldWideWebConsortium(简称W3C、W3协会),负责管理Web相关事务及协议(w3.org/)。
WorldWideWeb的诞生,4,何谓主从式结构?
Web属于主从式结构吗?
Web采用的是一种主从式结构(Client-ServerModule)。
5,Web文件,1.运行浏览器阅读Web文件,2.浏览器向服务器要求超链接的文件,3.服务器将HTML文件传给浏览器,译成Web文件,图1-2,6,阶段一:
搜集数据与规划网站结构,阶段二:
网页制作与测试,建置网站的流程,7,阶段三:
将网站上传至Web服务器,阶段四:
网站的更新与维护并加以推广,阶段一:
搜集数据与规划网站结构,阶段二:
网页制作与测试,8,文字,图片,超链接,特殊组件,网页上面有什么?
9,一种与其它文件的链接,当用户点击后,所链接的信息就能显示出来。
什么是超链接,10,URL(UniversalResourceLocator,全球资源定位法),URL所代表的正是Web服务器的网址。
11,我们先看个例子再做说明:
happywin:
8001/Windows/project.html,文件,文件夹,通讯端口,服务器名称,通讯协议,12,注:
mailto:
服务的前面都没有两条斜线,表1-2URL所链接的服务,传送E-Mail给特定用户,13,从事网页设计所需要的软、硬件,14,图像动画处理软件:
常见的影像处理软件有AdobePhotoShop、MacromediaFlash、Director、CorelDraw、UleadPhotoImpact、AppleQuickTimeVR、QuickDraw3D等。
15,浏览器软件:
目前常见的浏览器有NetscapeCommunicator及MicrosoftInternetExplorer。
16,网页空间:
用来存放网页的存储空间,位于提供相关服务的网络服务器上。
17,从事网页设计相关的程序语言,18,19,目前常见的服务器端Script有ASP程序和CGI程度两种。
ASP是“ActiveServerPages”的缩写,中文翻译为“动态服务器网页”。
CGI是“CommonGatewayInterface”缩写,中文翻译为“通用网关接口”,,20,一、一个网站实例二、网页的基本要素文字文字是网页发布信息所用的主要形式,由文字制作出的网页占用空间小,因此,当用户浏览时,可以很快的展现在用户面前。
另外,文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载,便于以后长期阅读,也可对其进行编辑打印。
但是没有编排点缀的纯文字网页,又会给人带来死板不活泼的感觉,使得人们不愿意再往下浏览。
所以,文字性网页一定要注意编排,包括标题的字型字号,内容的层次样式,是否需要变换颜色进行点缀等等。
21,1标题一个网页通常都有一个标题,表明本网页的主要内容。
标题是醒目,是吸引浏览者能否注意的一个关键,因此对标题的设计是很重要的。
标题出现在浏览器的标题栏。
2字号网页中的文字不能太大或太小。
太大会使得一个网页信息量变大,太小又使人们浏览时感到费劲。
一个优秀网页中的文字,应统筹规划,大小搭配适当,给人以生动活泼之感觉。
22,3字型在网页适当的位置采用不同的字体字型,也能使网页产生吸引人的效果。
应该注意的是在报刊上变换字体字型非常普遍,它可以在不同的地方使用不同的字型。
但在网页制作上却要慎重。
因为有些美丽的字型在制作网页的计算机上有,但将来别人浏览你的网页时,浏览者的计算机上未必装有这种字体。
这样浏览者就无法得到你预想的浏览效果,甚至适得相反。
如果只是标题或少量的文字,可以将采用的特殊字体制作成图形方式,就可避免其他浏览者看不到的尴尬局面了。
当文本内容较多时,可以利用表格形式来实现。
23,图形这里的图形概念是广义的,它可以是普通的绘制图形,可以是各种图像,还可以是动画。
一幅优秀的网页除了有能吸引浏览者的文字形式和内容外,图形的表现功能是不能低估的。
网页上的图形格式一般使用JPEG和GIF,这两种格式具有跨平台的特性,可以在不同操作系统支持的浏览器上显示。
图形在网页中通常有如下应用。
1菜单按钮网页上的菜单按钮有一些是由图形制作,通常有横排和竖排两种形式,由此可以转入不同的页面。
24,2背景图形为了加强视觉效果,有些网页在整个网页的底层放置了图形,称作背景图。
背景图可以使网页更加华丽,使人感到界面友好。
但由于这是一个比较大的图形,需要占据较大的空间,致使网页的显示速度明显变慢,所以,近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形。
链接标志链接是网页中一种非常重要的功能,是网页中最重要、最根本的元素之一。
通过链接可以从一个网页转到另一个网页,也可以从一个网站转到另一个网站。
链接的标志有文字和图形两种。
制作一些精美的图形作为链接按钮,使它和整个网页融为一体。
25,交互功能Internet区别其他媒体的一个重要标志就是它的交互功能。
例如在商务网站的页面上,人们经过浏览,选择了某一个产品,就需要将自己的决定通过Internet告诉这个网站,网站能够自动对该产品的数据库进行检索,及时回应有还是没有,数量、规格、价格等信息。
如果用户选择确定,那么网站能够返回确认信息。
像这种交互功能其他媒体是无法比拟的。
通常网页的交互功能都是利用表单来实现的。
表单是网页中站点服务器处理的一组数据输入域,当访问者单击按钮或图形来提交表单后,数据就会传送到服务器上。
26,三、网页制作和美化工具网页制作工具超文本标识语言(HTML)HTML(HypertextMarkupLanguage)是一种专门用于Web页制作的编程语言,用来描述超文本各个部分的内容,告诉浏览器如何显示文本,怎样生成与别的文本或图像的链接点。
HTML文档由文本、格式化代码和导向其他文档的超链接组成。
27,FrontPageFrontPage是由Microsoft公司推出的新一代Web网页制作工具。
FrontPage使网页制作者能够更加方便、快捷地创建和发布网页,具有直观的网页制作和管理方法,简化了大量工作。
FrontPage界面与Word、PowerPoint等软件的界面极为相似,为使用者带来了极大的方便,Microsoft公司将FrontPage封装入Office之中,成为Office家族的一员,使之功能更为强大。
28,DreamweaverDreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件,它具有可视化编辑界面,用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页,不仅适合于专业网页编辑人员的需要,同时也容易被业余网友们所掌握。
另外,Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用,即使是初学者也能制作出相当于专业水准的网页,所以Dreamweaver是网页设计者的首选工具。
29,网页美化工具为了使制作的网页更为美观,用户在利用网页制作工具制作网页时,还需利用网页美化工具对网页进行美化。
1PhotoshopPhotoshop是由Adobe公司开发的图形处理软件,它是目前公认的PC机上最好的通用平面美术设计软件,它功能完善、性能稳定、使用方便,所以在几乎所有的广告、出版、软件公司,Photoshop都是首选的平面制作工具。
30,2FireworksFireworks是由Macromedia公司开发的图形处理工具,它的出现使Web作图发生了革命性的变化。
因为Fireworks是第一套专门为制作网页图形而设计的软件,同时也是专业的网页图形设计及制作的解决方案。
作为一款为网络设计而开发的图像处理软件,Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等,而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。
用户可以从macromedia站点下载该软件。
31,3FlashFlash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件,它是一种交互式动画设计工具,用它可以将音乐、声效、动画以及富有新意的界面融合在一起,以制作出高品质的网页动态效果。
它主要应用于网页设计和多媒体创作等领域,功能十分强大和独特,已成为交互式矢量动画的标准,在网上非常流行。
Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。
32,四、网页制作的基本步骤整体规划进行网站的整体规划也就是组织网站的内容和设计其结构。
网页制作者在明确网页制作的目的及要包括的内容之后,接下来就应该对网站进行规划,以确保文件内容条理清楚、结构合理,这样不仅可以很好地体现设计者的意图,也将使网站可维护性与可扩展性增强。
33,层状结构层状结构(如图1.8所示)类似于目录系统的树型结构,由网站文件的主页开始,依次划分为一级标题、二级标题等等,逐级细化,直至提供给浏览者具体信息。
34,线性结构线性结构(如图1.9所示)类似于数据结构中的线性表,用于组织本身的线性顺序形式存在的信息,可以引导浏览者按部就班地浏览整个网站文件。
这种结构一般都用在意义是平行的页面上。
通常情况下,网站文件的结构是层状结构和线性结构相结合的。
这样可以充分利用两种结构各自的特点,使网站文件既具有条理性、规范性,又可同时满足设计者和浏览者的要求。
35,Web结构Web结构(如图1.10所示)类似于Internet的组成结构,各网页之间形成网状连接,允许用户随意浏览。
36,收集整理资料准备素材内容规划网页设计与制作1静态网页的设计与制作在开始制作网页之前,建议应用少量时间对自己要制作的主页进行总体设计,例如希望主页是怎样的风格,应该放一些什么信息,其他网页如何设计,分几层来处理等等。
通常在进行网页开发时,首先都进行静态网页的制作,然后再在其中加入脚本程序、表单等。
静态网页仅仅用来被动地发布信息,而不具有任何交互功能的网页,它是Web网页的重要组成部分。
一个好的网站首先是内容丰富,其次就是网页设计美观。
对于网页的外观设计,提供以下建议:
37,不要先决定网页的外观,然后迫使自己去适应它,应该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。
每页排版不要太松散或用太大的字,尽量避免访问者浏览网页时要作大幅度的滚动,对于篇幅太长的一页可以使用内部链接解决。
须知,在一页的上部是显眼而宝贵的地方,不要只放几个粗大的字或图片。
38,切勿以800600以上的分辨率设计网页,常用的分辨率是640480及800600。
现在国内的站点基本上都是800600,但是如果主要是面向国外访问者的站点,建议使用640480。
不应在每页中插入太多的广告。
相信任何访问者都不会喜欢浏览尽是些广告的网页,要考虑该页内容与广告的比例,广告太多,只会令人烦厌。
不要每页都采用不同的墙纸,以免每次转页时都要花费过多的时间去下载,采用相同的底色或墙纸还可以增强网页一致性,以树立自己的风格。
39,底色或墙纸必须与文字对比强烈,以易于阅读。
这并不是要求永远使用鲜亮的背景搭配深色的文字,但深色背景常要求与主题配合,有较多的顾虑,如果网页是文章式或是包含大量文字,不妨在底色与文字的搭配上下些工夫,力求让访问者能够舒适地阅读网页。
不要把图片白色当作透明,要知道别人的系统不一定把内定底色设为白色,解决的办法除了真的把该网页的底色设为白色之外,最好还是用图片编辑工具将图片设为透明颜色。
40,2、为网页的添加动态效果静态网页制作完成后,接下来的工作就是为网页添加动态效果,包括一些脚本语言程序和数据库程序的设计,以及加入动画效果等。
测试网页当网页设计人员制作完所有网站页面之后,需要对所设计的网页进行审查和测试,测试内容包括功能性测试和完整性测试两个方面。
41,所谓功能性测试就是要保证网页的可用性,达到最初的内容组织设计目标,实现所规定的功能,读者可方便快速地寻找到所需的内容。
完整性测试就是保证页面内容显示正确,链接准确,无差错无遗漏。
如果在测试过程中发现了错误,就要及时修改,在准确无误后,方可正式在Internet上发布。
在进行功能性测试和完整性测试后,有的还需要掌握整个站点的结构以备日后的修改。
42,网页上传发布网页设计好,必须把它发布到互连网上,否则网站形象仍然不能展现出去。
发布的服务器可以是远程,也可以是本地,但必须支持ASP,因为动态程序是建立在ASP基础上的。
43,五、网页执行原理静态网页最初的都是用超文本标记语言HTML来实现的。
一般后缀为.htm或.html制作工具可以是记事本、EditPlus等纯文本编写工具,也可以是FrontPage、DreamWeaver等所见即所得的工具。
静态网页的缺点是:
如果要修改网页,必须修改源代码,并重新上传。
44,45,静态网页的工作原理,46,第二部分动态网页基本知识,通过本部分的学习,应该掌握以下内容:
认识动态网页配置动态网站的环境动态网站设计的基本方法认识和了解几个动态网站系统如何学习动态网站的制作,47,动态网页所谓动态网页,就是服务器端可以根据客户端的不同请求动态产生网页内容。
两个显著特点:
可以动态产生页面支持客户端和服务器端的交互功能,48,动态网页示例,BBS论坛,留言板,聊天室,49,动态网页的工作原理,50,常用的动态网页技术,CGI,ASP,PHP,JSP,ASP.NET,J2EE,51,ASP(ActiveServerPages),微软公司推出服务器端:
Windows2000+IIS、Windows98+PWS;客户端:
普通浏览器即可特点:
将VBscript、或JavaScript嵌入到HTML中。
优点:
简单易学、容易上手;缺点:
不能跨平台,52,ASP简单示例,53,PHP,RasmusLerdorf1994年提出,经过其他人参与,共同开发而成。
服务器端:
Unix,Linux,或者Windows操作系统下;客户端:
普通浏览器。
特点:
优点:
免费、开放源代码;缺点:
缺乏大公司的支持。
54,JSP(JavaServerPages),它是由SUN提出,多家公司合作建立的一种动态网页技术。
该技术的目的是为了整合已经存在的Java编程环境(例如JavaServlet等),结果产生了一个全新的足以和ASP抗衡的网络程序语言。
JSP是将Java程序片段(Scriptlet)和JSP标记嵌入普通的HTML文档中。
优点:
跨平台;缺点:
复杂难学,55,ASP的运行环境,服务器端Windows2000+IIS(Internet服务管理器)WindowsXP+IIS(Internet服务管理器)Windows98+PWS4.0(个人WEB服务器)对于普通学习者,可以将自己的计算机当作服务器。
56,安装IIS-1,开始-设置-控制面板-添加删除程序,57,安装IIS-2,选择Internet信息服务,然后单击下一步即可。
58,关于IIS,开始-程序-管理工具-Internet服务管理器,59,默认WWW站点,IIS安装完毕后,会自动生成C:
inetPubwwwroot以后将程序存放在该文件夹下,就可以访问了。
例如对于文件C:
inetPubwwwroot1.asp,访问方法如下:
localhost/1.asp127.0.0.1/1.asp计算机的名字/1.asp/1.aspIP地址/1.asp,60,ASP的开发工具,最好的工具是MicrosoftVisualInterDev也可以用记事本或FrontPage等编写这里推荐EditPlus软件,61,EditPlus,下载地址,我的网络课堂。
解压缩后运行安装程序启动程序,62,制作一个简单的ASP文件,新建ASP文件保存ASP文件浏览ASP文件修改ASP文件,63,新建ASP文件,打开EditPlus或者记事本,输入以下内容,64,保存ASP文件,将文件保存在c:
inetpubwwwroot文件夹下,命名为temp.asp。
65,浏览文件,打开IE浏览器,在地址栏里输入localhost/temp.asp或127.0.0.1/temp.asp,66,修改文件,启动EditPlus打开temp.asp修改后保存即可。
67,ASP的语法简介,一个简单的ASP程序主要包括以下三个部分:
普通的HTML文件,也就是普通的Web的页面内容。
服务器端的Script程序代码:
位于内的程序代码。
客户端的Script程序代码:
位于内的程序代码。
68,ASP的注意事项,不分大小写用英文的标点符号的位置ASP语句必须在一行中注释语句用号开头要充分利用HTML工具开发源代码,69,何谓ASP(运态服务器网页)?
ASP(ActiveServerPages)便是微软公司用来建立动态网页的解决方案。
ASP包含描述语言程序代码(Scripting-LanguageCode)与嵌入HTML(embeddedHTML)两个部分,前者可以由VBScript、JavaScript、PerlScript、Python等4种程序语言撰写而成。
70,ASP程序只能在服务器执行,以下图为例,当浏览器向服务器要求打开ASP程序时,服务器会读取该程序,然后执行该程序并将结果转换为HTML文件,再将该HTML文件传送给浏览器,待浏览器收到该HTML文件之后,便会将ASP程序的执行结果显示在浏览器画面上。
如图11-1所示。
71,为了证明浏览器所收到的确实为HTML文件,而非ASP程序,我们来看个例子:
现在时刻为,调用VBScript函数不显示时间,72,ASP,图11-2,浏览结果,73,接下来,我们可以在浏览器画面选按“查看、源代码”,看看浏览器收到源代码,如图11-3。
图11-3,浏览器收到源代码果然不包含ASP程序代码,74,如何编辑与执行ASP程序?
ASP程序的编辑方式和HTML文件一样,您可以使用“记事本”等纯文本编辑程序或FrontPage进行编辑,要注意的是ASP程序的扩展名为.asp,所以在您保存文件时记得将扩展名改为.asp。
75,撰写您的第一个ASP程序,记得扩展名要改为.asp!
2.,3.,4.,5.今天为,6.%,7.DimWeekDay,8.WeekDay=DatePart(“w”,Date(),9.取得今天是星期几,10.SelectCaseWeekDay,76,11.Case“1”,12.Response.Write(“星期日(SUN)”),13.Case“2”,14.Response.Write(“星期一(MON)”),15.Case“3”,16.Response.Write(“星期二(TUE)”),17.Case“4”,18.Response.Write(“星期三(WED)”),19.Case“5”,20.Response.Write(“星期四(THU)”),21.Case“6”,22.Response.Write(“星期五(FRI)”),23.Case“7”,24.Response.Write(“星期六(SAT)”),77,1:
第1行程序代码的意义是声明这个ASP程序由VBScript撰写而成。
2:
第2行程序代码的意义是规定ASP程序中使用的任何变量必须先声明。
5:
第5行程序代码的两个符号之间的语句不ASP程序,Response.Write(Date()的意义是调用VBScritp函数Date()取得今天的日期,然后使用Response的方法Write将所取得的日期显示在浏览器画面上。
78,6、26:
第6行的表示这两个符号之间的语句为ASP程序。
7:
声明一个名称为WeekDay.,8:
调用VBScript函数DatePart()从函数Date()取得的日期中获取星期几的常数值,然后将常数值指定给变量WeekDay(若常数值为1,表示星期日;若常数值不2,表示星期一,依此类推。
附录E有DatePart()、Data()等VBScript函数的用法及参数意义)。
79,9:
第9行程序代码注释,ASP注释的方式和VBScript相同,使用单引号()即可,别和HTML的注释标记混淆了!
使用SelectCaseEndSelect条件语句,以根据WeekDay的值指定在浏览器画面所要显示的信息,(“星期六(SAT)”)语句的和标记可将所显示的信息加粗体。
80,ASP内置的对象,ASP内置Application、ASPError、ObjectContext、Request、Response、Session、Server等7个对象,而且每个对象有各自的属性、方法、集合或事件。
在介绍这7个对象之前,我们先来说明何谓对象、属性、方法、集合和事件。
81,“对象”就像我们在日常生活中所看到各种物体,譬如电脑、冰箱、汽车、电视、行动电话,而对象可能又是由许多对象所组成,比方说,电脑是一种对象,而电脑又是由硬盘、CPU、内存、显示卡、主板等对象所组成。
82,“属性”是用来描述对象的特性,比方说,电脑是一种对象,而电脑的等级、制造厂商等可以用来描述电脑的特性就叫做属性;又比方说,Response是ASP内置的一种对象,而它有一个属性IsClientConnected可以用来描述客户端是否仍和服务器端连线中。
若要存取对象的属性,可以写成ObjectName.Property,如Response.IsClientConnected.,83,“方法”(Method)是用来执行对象的操作。
“集合”(collection)指的是一群放在一起的“值”(value)。
“事件”(event)是在某些情况下发生特定的信号警告。
84,Response对象,说明:
Response对象可以用来决定何时或如何将输出由服务器端传送至客户端。
85,Cookies:
这个集合是用来设置Cookie的值,Cookies(name).Domain:
指定只有某个Domain(网域)可以存取某个Cookie,Cookies(name).Expires:
指定某个Cookie逾期的日期,Cookies(name).HasKeys:
用来确定某个Cookie是否有按键,Cookies(name).Path:
指定只有特定路径可以存取某个Cookie,默认为应用程序的路径,Cookies(name).Secure:
指定是否采取预防措施以确保Cookie的安全,86,Buffer:
指定是否打开缓冲区处理(Buffering),CacheControl:
指定ProxyServer是否能够将网页放进缓存(Cache),Charset(Name):
将字符编码方式的名称附加到内容类型标头(content-typeheader),ContentType:
指定输出的HTTP内容类型,默认为text/HTML,Expires:
指定放进缓存的网页逾期时间长短(以分钟为单位),ExpiresAbsolute:
指定放进缓存的网页逾期日期,IsClientConnected:
用来描述客户端是否仍和服务器端连接中,87,AppendtoLog(Data):
将变量Data的值附加到服务器的记录数据,BinaryWrite(Data):
将变量Data的值写入HTTP输出,但不做字符转换,Clear:
清除所有存放在缓冲区尚未传送至客户端的输出,End:
停止ASP程序的执行并将存放在缓冲区的输出传送至客户端,Flush:
把所有存放在缓冲区的输出传送至客户端并清除缓冲区,Redirect(Path):
在客户端导向至(连接至)变量Path指定的网页,Write(Data):
将变量Data的值写入HTTP输出(即传送
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 课件 PPT
![提示](https://static.bingdoc.com/images/bang_tan.gif)