项目一 最终FAQ网站展示.docx
《项目一 最终FAQ网站展示.docx》由会员分享,可在线阅读,更多相关《项目一 最终FAQ网站展示.docx(16页珍藏版)》请在冰豆网上搜索。
项目一最终FAQ网站展示
项目一最终FAQ网站展示
一、知识目标
(一)项目目标
理解并掌握网站、网页的基本构成以及常用网页设计基本技术与方法。
(二)教学目标
(1)了解Internet与WWW的含义。
(2)了解并掌握网页与网站的相关概念。
(3)理解静态网页与动态网页的含义。
(4)掌握网站与网页的基本构成。
(5)认识常用网页设计工具与软件。
(6)了解网页设计相关程序语言。
二、能力目标
(1)具备辨别区分网页文件与其它文件的能力。
(2)具备使用IE浏览器浏览网页、上网获取信息的基本能力。
(3)具备辨别区分静态网页与动态网页的能力。
(4)具备网站建设与网页制作的规划构建部署的初步能力。
(5)简单使用常用网页设计工具与软件的能力。
(6)初步识别网页设计相关程序语言在网页设计中使用的能力。
三、工作任务
(1)浏览一个完整的FAQ网站及其网页构成,如图:
1-1所示。
(2)制作一个没有内容的空白网页。
(3)查看网页文件的源代码内容。
四、预备知识
(一)网页基础知识
1.网页、网站的概念
1)WWW简介
www英文名
WorldWideWeb。
简介
万维网(亦作“网络”、“WWW”、“3W”,英文“Web”或“WorldWideWeb”),是一个资料空间。
在这个空间中:
一样有用的事物,称为一样“资源”;并且由一个全域“统一资源标识符”(URL)标识。
这些资源通过超文本传输协议(HypertextTransferProtocol)传送给使用者,而后者通过点击链接来获得资源。
从另一个观点来看,万维网是一个透过网络存取的互连超文件(interlinkedhypertextdocument)系统。
万维网联盟(WorldWideWebConsortium,简称W3C),又称W3C理事会。
1994年10月在拥有“世界理工大学之最”称号的麻省理工学院(MIT)计算机科学实验室成立。
建立者是万维网的发明者蒂姆·伯纳斯·李。
万维网常被当成因特网的同义词,不过其实万维网是靠着因特网运行的一项服务。
2)WWW与浏览器
3)网页、网站和主页
4)网页的组成
从组成的元素角度讲,网页是由文本、图片和超链接等多种对象构成的多媒体页面,包含相关的文本、图像、动画、视频以及脚本命令等。
网页一般由HTML文件组成,位于特定计算机的特定目录中,其位置可以根据URL确定。
网页是由HTML编写的文本文件,用最简单的文本编辑器可以创建网页,因此网页中也无法保存图片、声音等信息。
那么网页是怎样将声音、图像、视频和动画等各种资源组合起来显示在客户机上并用来浏览呢?
网页借助HTML语言,利用超媒体信息获取技术,通过超文本的表达方式,使用超链接方式讲WWW上的相关信息连接在一起。
5)URL介绍
URL——统一资源定位符。
它是全球WWW网络服务器的标准寻址定位编码,俗称“网址”。
URL是一个资源位置的完整描述,包括资源所在的计算机名、目录名以及文件名。
URL的基准可以是绝对的或者相对的,绝对基准包括将要访问的文件的完整描述,包括主机名、目录名、文件名;而相对基准假定先前的主机和目录路径不变,因此仅指明文件名(也许会含有子目录)。
URL格式:
协议:
//主机标识[:
端口号]/[路径/文件名]
6)动态网页和静态网页
根据内容对交互德尔响应方式的不同,可以将网页分为静态网页和动态网页两大类。
静态网页的内容在用户的浏览过程中是一成不变的,它不会因为用户的操作而改变页面显示的内容和格式。
反之,动态网页可在用户对网页访问的过程中,根据用户的操作做出响应,改变页面所显示的内容或者执行某些特定的操作。
根据实现方式不同,动态网页还可分为客户端动态网页和服务器端动态网页。
(1)静态网页。
静态网页就是标准的HTML文件,其文件扩展名是.htm或者.html,它可以包含HTML标记、文本、声音、图像、动画、电影、Java程序以及客户端ActiveX控件,但这种网页不包含任何脚本,其内容在开发人员编辑好之后不会自动改动,所以称为静态网页。
静态网页也可能包含翻转图像、GIF动画或Flash影片,从而具有很强的动感效果。
此处所说的静态网页是指在发送到浏览器时不再进行修改的Web页,其最终内容不会因为用户的操作而改变。
(2)客户端动态网页。
客户端动态网页与静态网页的区别在于客户端动态网页包含一些可在客户端浏览器中执行的脚本程序,这些脚本程序可在浏览器中被解释执行,并且可改变网页中各种标记(Tag)的内容。
这些脚本能够对用户的不同操作做出响应,从而达到动态的效果。
实现这种脚本的语言主要有两类:
JavaScript和VBScript。
这种动态网页有很大局限性。
首先,客户端动态网页中的脚本程序都是程序员在设计网页的时候事先写好的,响应的内容和方法有限;其次,这些脚本程序在客户端是可见的,降低了网站的安全性。
(3)服务器动态网页。
服务器动态网页和前面两种的不同点是:
在服务器端动态网页中也包含脚本程序,当网页被访问的时候,这些脚本程序首先在服务器端被解释执行,然后使用执行的结果将脚本程序替换掉,生成一个新的纯HTML网页返回给客户端,这种机制使WWW服务能够和数据库管理系统等传递的信息系统联合起来,提供给用户信息完全动态的网页浏览服务。
相当于静态网页的访问过程,服务器端动态网页在访问过程中,服务器端需要执行一系列的操作才能生成HTML页面。
服务器端动态网页通常与静态网页和客户端网页的文件扩展名不同,对于动态网页来说,其文件扩展名不再是.htm或者.html,而是与所使用的服务器动态网页开发技术有关,例如,使用ASP.NET技术开发时,网页文件的扩展名为.aspx等。
目前流行的服务器端动态网页开发技术主要有ASP.NET、JSP和PHP等。
2.网页标准
HTML是网页制作的基本语言标准。
HTML(HyperTextMarkupLanguage,超文本标准语言)是表示网页的一种规范,它通过标记符定义了网页内容的显示。
例如,用
标记符可以在网页上定义一个表格。1)基本概念
(1)标记。
在HTML中用于描述功能的符号称之为“标记”,它是用来控制文字和图形等显示方式的符号,例如HTML、HEAD、BODY等,标记在使用时必须用“<>”括起来,标记有单标记和双标记之分。
(2)标记属性。
许多标记的始标记内可以包含一些属性。
其语法是:
<标记名称属性1属性2属性3……>。
各个属性之间没有先后顺序之分,属性也可以省略。
(3)注释语句。
HTML和其它程序语言一样,提供了注释语句。
格式为:
—注释内容-->。
文件中的注释内容用“!
”标记,“
”表示注释开始,“>”表示注释结束,中间内容为注释。
注释可以放在任何地方,注释内容不在浏览器中显示,仅供设计人员阅读方便。
2)HTML的基本结构
HTML网页文件主要由文件头和文件体两部分组成。
文件头对文件进行一些必要的定义,文件体是HTML网页的主要部分。
下面是HTML网页的基本结构。
HTML文件开始
文件头开始文件头
文件头结束
文件体开始文件体
文件体结束
HTML文件结束
3)HTML的语法规则
(1)HTML文件必须以纯文本形式存放,扩展名为.htm或者.html。
若系统为UNIX,扩展名必须为.html。
(2)HTML标记不区分大小写,如和是一样的。
(3)多数HTML标记可以嵌套,但不可以交叉。
(4)HTML文件一行可以写多个标记,一个标记也可以分多行书写,不用任何续行符号。
(5)HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。
(6)网页中所有的显示内容都应该受限与一个或者多个标记,不应有游离于标记之外的文字或者图像等,以免产生错误。
3.网站开放工作流程
制作网页的最终目的是在网上建立一个传达信息的综合体,即网站。
网站是由多个网页组成的,但不是网页的简单罗列组合,而是用超链接方式组成的既有鲜明风格又有完善的有机整体,要想构建一个好的网站,必须了解网站建设的一些基本知识。
1)规划站点
首先,确定网站的目标是关键,明确谁是网站将来的访问者。
其次,是确定网站的主题、风格和创意点。
主题选材要小而精,最好是选择自己擅长或感兴趣的内容。
最后是网站结构的确定。
规划好网页的结构后,进行网站目录设置。
根据网站的主题和内容来分类规划目录,不同的栏目要对应不同的目录,在各个栏目下也要根据内容的不同将其划分成不同的子目录。
2)设置开发环境
要设置一个精美的网站,制作环境设置是必不可少的,主要包括以下几部分。
(1)配备良好的计算机及其相关设备(如,扫描仪、数码照相机和打印机等)。
(2)配置完善的系统环境,除安装操作系统外,还要注意升级浏览器的版本,如果要进行服务器端程序开发,还应有相应的软件系统。
(3)备齐网页开发工具软件,包括网页制作工具、服务器端程序开发工具及一些实用的辅助工具。
(4)备齐素材制作和加工软件,包括对图形、动画、流媒体和声音进行处理的素材制作和加工软件。
(5)备齐常用的网站发布工具,如FTP文件传输软件等。
3)规划页面设计和布局
要设计出好的网页,应遵循3个原则:
(1)有创意、新颖以及有自己的特色。
(2)有充实的内容和浏览价值。
(3)网页的布局有一定的艺术性。
网页的设计与网页内容的配合最为关键,确定网页的主题和定位方向以后,就有一个目标去搜集相应的材料充实和丰富主题。
4)创建内容资源
在设计网页时,前往不要让信息和图片填满网页,网页看起来必须是干净、有组织有条理的,使用很容易阅读的字体。
(1)文字与图片。
文字和图片是任何一个网站最基本的要素。
浏览器会根据网页文件中的HTML代码,将文字与图片正确地表现出来。
在一个页面中,文字与图片的比例要适当,文字太多会降低网站的吸引力;图片太多会使页面的浏览速度下降等。
(2)动画。
通常看到的网页动画都是动态的GIF格式图片。
如果需要在网页上加上一些大型或者复杂的动画,就需要借助Flash动画。
(3)音乐。
适当地在网页上加点音乐效果,会使网页更具有吸引力。
网上流行的声音格式有MIDI、WAV、MP3、RealAudio。
(4)视频影像。
视频流技术常见的文件格式有RealAudio、MircrosoftMedia以及AppleQuicktime。
(5)搜索功能。
搜索功能就是使得浏览者在短时间内快速地从大量的资料中找到符合要求的资料。
这对于一个资料非常丰富的网站来说,非常有用。
要建立一个搜索功能,就要有相应的脚本程序以及完善的数据库文件。
(6)留言板、论坛及聊天室。
留言板、论坛及聊天室为浏览者提供一个信息交换的地方。
(7)提交表单。
提交表单的用途很多,从收集顾客的意见、资料登记到服务申请或网上购物等,都需要使用提交表单的功能。
(8)网页程序。
要设计以下更复杂、更大型、用途更多的网页,例如大型的门户网站、拍卖网站或者购物网站等,就需要更专业、更高级的网页程序支持,如Java、JavaScript、ASP.NET等。
5)测试和部署
在网站做好之后,发布网站前,要做好一系列工作,如进行本地测试、确定发布方式和发布后的在线测试等。
在将网站上传到服务器之前,首先,应该在本地机器上进行测试,以保证整个网站的所有网页的正确性,否则进行远程调试会比较复杂。
发布网站就是将制作好的网站上传到Internet上的WWW服务器。
6)维护和更新站点
网站上传后能够浏览,工作并没有结束。
因为网站长时间一成不变,或者毫无新意,肯定不会吸引用户再次访问。
如果网站制作精良、更新及时,不但可以吸引回头客,而且可以因此扩大网站影响。
网站的维护主要包括检测网站的错误、保证网站正常运转、处理用户信息、定期更新网页内容和修正网页错误等。
网站的管理维护可以使用一些专业的软件来实现,对于有自己服务器的单位,则需要配置专门的网站管理员来管理、维护和更新网站。
模块1创建空白网页
一、知识目标
(1)了解HTML文件的命名。
(2)了解HTML文档基本结构。
(3)了解HTML代码规范。
(4)初步认识文档头、文档标题、文档主体标记的意义。
(5)认识网页制作的相关工具软件。
二、工作任务
创建一个空白网页。
三、相关理论知识
网页的本质是HTML的源代码,但大多数的网页制作工作不是之间编写HTML源代码文件,而是通过网页编辑工具完成。
网页编辑工具的作用就是将要求通过页面编辑刻画出来,自动转换成HTML源代码。
由于网页中含有文字、图片、动画和声音等多种信息表现形式,因此需要用素材处理工具对这些原始材料进行加工处理。
1)网页制作工具
一类是为用HTML语言直接编制Web页的编辑软件,即用普通编辑器(如记事本)直接编写,称为“批处理”方式。
另一类是使用可视化网页制作工具Dreamweaver,FrontPage等页面设计软件,不需要了解HTML就可直接对页面进行编辑排版,称为“所见即就得”方式。
两类页面设计方式各有优缺点。
直接写HTML的编码需要熟记格式,不易设计复杂的网页,可视化工具使用、设计简单,可以直接利用软件提供的诸多功能,容易学习。
2)素材处理工具
除了HTML源文件外,构成一个完整的网页还需要其它一些文件,例如静态图像和动画等,所以弹出需要对原始素材进行一些处理,例如:
图像优化、格式转换等,同时为了获得最佳的现实效果,还需要制作一些特效等。
(1)Photoshop
(2)Flash
(3)Fireworks
四、操作流程
(1)打开“我的电脑”在任一磁盘内,在空白处单击鼠标右键,选择“新建”
|“文本文档”,如图所示:
(2)将刚新建的文本文档重命名first,扩展名为.htm。
更改文本文件的名称,按Enter键后,会打开如图所示的对话框,单击“是(Y)”按钮。
文件更名后,文件类型由“文本文档”更改为HTMLDocument。
(3)双击刚新建的文件first.htm,则系统用IE打开它,如图所示,为一个空白的网页文件。
(4)使用记事本打开文件,输入如图所示的文本,并保存文件。
(5)重新用IE浏览器打开保存后的first.htm,如图所示,为一个空白网页。
(6)重新用记事本打开文件first.htm,输入如下图所示的文本,并保存文件。
(7)重新用IE浏览器打开网页,显示如图所示的页面。
模块二查看网页源文件
一、知识目标
(1)了解并熟悉IE浏览器浏览网页。
(2)了解HTML代码的规范。
(3)掌握在IE浏览器中查看当前文件源文件方法。
(4)了解并认识HTML源文件中的网页制作相关技术。
二、工作任务
使用IE浏览器浏览网页,在浏览网页效果后,通过查看网页源代码,进一步认识源代码构成及书写规范。
三、理论基础
1)HTML简介
HTML(HyperTextMarkupLanguage,超文本标记语言)是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文档称为HTML文档。
它独立于各种操作系统平台(如UNIX、Windows)。
HTML文档(Homepage的源文件)是一个放置了标记的ASCII文本文件,通常它带有.html或者.htm的文件扩展名。
2)JavaScript
JavaScript是一种解释性的,基于对象的脚本语言。
JavaScript主要是基于客户端运行的,用户单击带有JavaScript的网页,网页里面的JavaScript就传到浏览器,由浏览器对此作处理。
几乎所有的浏览器都支持JavaScript脚本。
3)CSS
CSS的全称是CascadingStyleSheet,通常称之为层叠样式表。
层叠,意思为当HTML文件引用CSS文件的时候,如果CSS所定义的样式发生了冲突,将依据层次的先后来处理网页中的内容的样式。
在HTML部分也已经涉及到样式的概念,如文字的大小、颜色、图片的大小和插入位置等,这些网页的内容应该以什么样的形式显示出来,这就是样式。
在HTML中,已经介绍了HTML标记不仅掌控着网页的内容,还包括网页内容的样式。
而CSS就是让内容和样式分离开来,让HTML标记只控制网页的内容,至于内容的样式,则交由CSS来控制。
换句话说,也就是在CSS部分中首先把网页内容的样式定义好,在HTML部分中只要把事先的样式拿过来用就可以了,HTML标记不用再去定义内容的样式。
3)ASP与ASP.NET
MicrosoftActiveServerPages即通常所称的ASP,是一套微软开发的服务器端脚本环境,ASP内含于IIS3.0和IIS5.0之中,通过ASP结合HTML网页、ASP指令和ActiveX元件建立动态、交互且高效的Web服务器应用程序。
ASP.NET是Microsoft.NET的一部分,作为战略产品,不仅仅是ActiveServerPages(ASP)的下一个版本,它还提供了一个统一的Web开发模型,其中包括开发人员生成企业级Web应用程序所需的各种服务。
4)PHP
PHP是一种用于创建Web页面的服务器端脚本语言。
5)JSP
JSP(JavaServerPages)是一种基于Java的脚本技术。
可以用两种方法访问JSP文件:
浏览器发送JSP文件请求、发送至Servlet的请求。
四、操作流程
(1)双击打开任一文件夹中的.htm网页文件,如图所示
(2)单击IE菜单“查看”|“源文件”选项,如图所示。
(3)查看源文件执行结果,用记事本打开.htm网页文件,如图所示。
(4)查看.htm的源文件,拖动滚动条,观察并留意HTML文件的各种标记,如
等,并体会HTML的语法规则。(5)打开.htm的源文件,浏览文件中的JavaScript脚本,如图所示。
(6)查看源文件,注意JavaScript脚本的前一行,为CSS样式表部分,如图所示。
五、知识拓展
(1)使用IE浏览器浏览某网页的网页文件,并查看其HTML源代码。
(2)扩展名为.css的文件是层叠样式表文件,请建立一个空白的、名为style.css的样式表文件。
(3)打开XX网站,查看其源文件,分析XHTML代码的结构。
(4)平常商务时,看到一篇好的文章向复制下列,但该网页不允许,该怎么办?
有些网页不允许查看源文件,怎么办?
有些网页不允许“另存为”,怎么办?
请在互联网上通过搜索找到解决的办法。
(5)保存地址为的网页上的图像和文字到本机磁盘上。
(6)在IE浏览器地址栏中输入URL:
telnet:
//,使用Telnet服务访问清华大学的BBS系统
(7)使用ping命令查看域名对应的IP。
在开始菜单中选择“运行”,在弹出窗口中输入cmd。
单击“确定”按钮,然后在打开的窗口中输入ping,就能够看到域名对应的IP。
接着尝试看看你所知道的其它知名网站的域名。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
项目一
最终FAQ网站展示
项目
最终
FAQ
网站
展示
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。