网站建设与网页制作复习.ppt
《网站建设与网页制作复习.ppt》由会员分享,可在线阅读,更多相关《网站建设与网页制作复习.ppt(95页珍藏版)》请在三一办公上搜索。
1、网站建设与网页制作,阎菲,学习内容,网站建设概述 网页界面设计艺术 HTML语言简介 织网工具Dreamweaver 动态网页技术,教学要求,了解一定的网页制作的高级部分,包括用来实现前台交互、制作动感网的DHTML和实现后台交互、制作动态网页的ASP。,掌握网页界面设计的方法和要素,版式设计、文字编排、图形和动画的应用、色彩的应用等。,掌握网页制作各项基本技能,包括HTML语言、可视化网页制作工具(Dreamweaver)具有较强的自主设计与制作网页的基本素质与能力。,课程特点,网页建设与网页制作是一门以实际技能训练为主要教/学内容与目标的实践性课程,知识学习与技能训练的有机结合贯穿于整个教
2、/学过程。最终将以学习者是否具有独立设计并建设网站的基本能力与实践结果作为考核的主要评判标准。,学习方法,3P一体化,即 Principle、Practice、Product(原则)、(实践)、(作品),预祝大家取得好成绩!,考试与实验说明,出勤 10%实验(网站设计)20%期末笔试 70%,考试,课程体系结构,以电子商务、网页制作为中心的多元化授课体系,网站建设概述,HTML语言基础,网页制作工具,网页美化工具,网络新领域、新技巧,网站建设,网页制作,第1章 网站建设概述,第一节 WWW基础知识,第二节 网页界面构成要素,第三节 网站开发常用工具,第四节 网站建设与规划,第1节 www基础知
3、识,WWW服务的基本概念 WWW服务的特点 WWW服务的工作方式 WWW服务的常用术语,1.WWW服务的基本概念,WWW(World Wide Web,全球信息网)是以超文本标记语言(HTML,HyperText Markup Language)与超文本传输协议(HTTP,Hyper Text Transfer Protocol)为基础,提供面向Internet服务、具有一致的用户界面的信息浏览系统。,2.WWW服务的特点,(1)超媒体特性。在WWW中可以多媒体(如文本、图像、声音、动画、影像等)的形式传递信息,从而更吸引人的注意力;使传播的信息更易于接受和理解,从而达到更好的传播效果。,(2
4、)以超文本(Hypertext)方式组织多媒体信息。Web中含有指向其它Web页或其本身内部特定位置的超级链接(Hyper Link),可理解为“指针”。任何文字、图片、图标等都可被指定为一个超链接。当你选择链接,只要用鼠标在链接上单击一下,就会跳转到链接的内容并显示在你的计算机上。,(3)用户可以在世界范围内任意查找、检索、浏览信息。(4)网点间可以互相链接,以提供信息查找和漫游的透明访问。,3.WWW服务的工作方式,WWW浏览器软件安装在用户的计算机上,用户必须通过浏览器来查看服务器上的内容。当客户通过浏览器向服务器发送一个查询请求时,服务器负责对来自客户机的请求做出回答,找到信息和传递文
5、件给用户;当客户机接收到文件,浏览器软件解释该文件在客户机上,用户才能在屏幕上看到。,WWW系统的结构采用客户机/服务器模式。,4.WWW服务的常用术语,1.URL(统一资源定位符)Internet中使用URL(Uniform Resource Locators)来定位信息资源所在位置。URL格式由三部分组成,描述了浏览器检索资源所用的协议、资源所在计算机的主机地址及资源的路径与文件名。标准的URL如下:http:/表示用户要连接到名为的主机上,采用http方式读取名为index.html的超文本文件。,URL通过访问类型来表示访问方式或使用协议。常用的类型有:,Web pages http:
6、/Ftp Servers ftp:/Telnet telnet:/File file:/,2.网页WWW服务器上的基本信息单位就是网页。网页是单个的HTML文件,是作者公布信息的最小单位。3.网站网站是一个存放在WWW服务器上的完整信息的集合体,由一组相关联的网络文件组成,包含一个或多个网页。4.主页(首页)主页是一个特殊的网页,是整个网络文件的起始点和汇总点,读者开始浏览网络文件的开始点。,第2节 网站界面的基本要素,文字 图像 声音 视频与动画 超级链接 表格 表单 导航栏,1.文字,文字是人类最重要的信息载体与交流工具,网页中的信息也以文字为主要表现形式。与图像相比,文字虽然不如图像那样
7、能够很快引起浏览者的注意,但却能准确地表达信息的内容和含义。网页中的文字主要有标题文字和说明性文字。此外,用户还可以在网页中设计各种各样的文字列表,来清晰表达一系列项目。可以对网页中的文字赋予字体、字号、颜色等属性。由文字制作出的网页占用空间小,因此,当用户浏览时,可以很快的展现在用户面前。,2.图像,一个优秀的网页,除了有吸引浏览者的文字形式和内容外,图像的表现功能是不能低估的。图像能将信息传达的更生动、形象、直观,增强了网页的宣传力、号召力、感染力。,1.链接按钮 网页上的链接按钮有一些是由小图片取代文字制作,具有直观、形象的特点,可使网页更加美观。2.背景图像 为了加强视觉效果,有些网页
8、在整个网页的底层放置了图像(称作背景图)来衬托主题。但是一个比较大的图像,需要占据较大的空间,致使网页的显示速度明显变慢。3.主图 在网页中,通常会放置一些图片来突出网页主题。主图与背景图不同,背景图是衬托主题,而主图是突出主题、表现主题。,网页中使用的图像格式,网页中常用的图像文件格式为GIF,JPEG(JPG),PNG,其中使用最广泛的是GIF和JPEG两种格式。,GIF是Graphics Interchange Format 的简写,用来存储Indexed-Color模式的图像。它是采用无损压缩方式压缩的图像文件格式。它的GIF89a格式,能储存成背景透明化的形式,并且可以将多张图片保存
9、在同一个GIF文档中,而且能以默认播放的顺序显示这些图片,用来创造动画的效果。,普通GIF文件 背景透明GIF89A文件 动画GIF89A文件,JPEG是其制定组织 Joint Photographic Experts Group的简称,其压缩的方法属于一种失真的处理方式,可以依所需的压缩比率调整图片品质,以得到最小的图片尺寸。,PNG是Portable Graphics Network的简称,在 1996年才由W3C(World Wide Web Consortium)所制定的Web标准图片格式。它采用的是一种无损压缩方式,PNG格式也可生成透明背景。目前没有普遍应用于网页设计。,3.声音,
10、声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多,常用的有MIDI、WAV、MP3、RM等。很多浏览器不要插件也可以支持MIDI、WAV格式的文件,而MP3和RM格式的声音文件则需要专门的浏览器播放。在网页中使用声音有两种方式,一是使用声音文件作为背景音乐,这时应尽量使用MIDI格式,否则会影响网页下载的速度。另一种方式是在网页中设置一个打开声音文件的链接,让音乐播放变得可以控制。,4.视频与动画,视频文件的格式也非常多,网页中常用的有Ram、AVI等。Ram格式需使用专门的播放器播放。网页中使用的动画通常为gif和swf两种动画文件类型。swf格式需要使用flash播放器。
11、视频和动画的采用让网页变得精彩而有动感。,5.超级链接,超级链接是从一个网页指向另一个目的端的链接,例如指向另一个网页或者相同网页上的不同位置。这个目的端通常是另一个网页,但也可以是一幅图片,一个电子邮件地址,一个文件,一个程序或者是本网页中的其他位置。其热点通常是文本,图片或图片中的区域,也可以是一些不可见的程序脚本。当浏览者单击超级链接热点时,其目的端将显示在Web浏览器上,并根据目的端的类型以不同方式打开。例如,当指向一个AVI文件的超级链接被单击后,该文件将在媒体播放软件中打开;如果单击的是指向一个网页的超级链接,则该网页将显示在Web浏览器上。加下划线的文字,就是已经建立了超链接的文
12、本。,6.表格,在网页中表格用来控制网页中信息的布局方式。这包括两方面:一是使用行和列的形式把许多相互关联的信息集中起来,便于用户分析、比较;二是可以利用表格来控制各种网页元素在网页中布局定位,对网页进行排版。,利用表格进行排版,7.表单,网页中的表单通常用来接受用户在浏览器端的输入,然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件,Web页,电子邮件,也可以是服务器端的应用程序。表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登陆站点等。表单由不同功能的表单域组成,最简单的表单也要包含一个输入区域和一个提交按钮。站点浏览者填写
13、表单的方式通常是输入文本,选中单选按钮或复选框,以及从下拉列表框中选择选项等。,8.导航栏,导航栏是用户在规划好站点结构,开始设计主页时必须考虑的一项内容。导航栏的作用就是引导浏览者游历站点。事实上,导航栏就是一组超级链接,这组超级链接的目标就是本站点的主页以及其他重要网页。在设计站点中的诸网页时,可以在站点的每个网页上显示一个导航栏,这样,浏览者就可以既快又容易的转向站点的其他网页。一般情况下,导航栏应放在网页中较引人注目的位置,通常是在网页的顶部或一侧。导航栏既可以是文本链接,也可以是一些图形按钮。,9.框架页面,一般情况下都是一个浏览器窗口显示一个的Web页面,这一类页面简单、直观制作方
14、便。但是当要求在一个窗口内容纳大量信息时,比如一个大型网站的首页,这种页面就很难胜任了。这时,我们就必须运用框架技术来解决问题。框架的作用就是把浏览器窗口划分为若干个区域,每个区域显示不同的网页。,提示:网页界面重要的一个元素,课程体系结构,以网页制作为中心的多元化授课体系,网站建设概述,HTML语言基础,网页制作工具,网页美化工具,网络新领域、新技巧,网站建设,第2章 网站开发常用工具,一、网页开发工具二、网页美化工具三、网页动画工具,网页制作基础-HTML语言,HTML语言的一些基本概念;HTML语言的语法;HTML文本的基本结构;HTML语言的标记及其用法;HTML实例;,这里是网页标题
15、这是我的第一个网页这是用HTML语言编写的,以后还要学习网页编著工具。,以下是一个网页的源代码:,这是显示结果:,HTML语言的一些基本概念,1.什么是HTML?HTML:Hypertext Marked Language,即超文本标记语言,是一种用 来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX,WINDOWS等)。超文本:因为它可以加入图片、声音、动画、影视等内容,因为它可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。2.HTML语言的构成HTML文件由标记、代码和注释组成。标记:HTML中用来控制文字、图形等显
16、示方式的符号。如 网页上面的标记里面包含了属性和值注释:,HTML语言的语法规则,扩展名为:*.htm或*.html。HTML不区分大小写。多数HTML标记可以嵌套,但不可以交叉。HTML文件一行可以写多个标记,一个标记可分多行书写,不用任何续行符。HTML文件中换行、回车和空格的表示方法分别是,和 .,HTML文本结构,HTML 文件的正文写在这里.和:是HTML文件的开始和结束标记。浏览器从开始执行到结束。和之间的内容表示文件的头部信息:标题、预定义变量等。标记表示网页的标题,中间不能用别的标记。和标记:网页中所有的内容均包含在其间。,HTML语言的标记及其用法,1.页面标记显示在
17、标题栏中。仅有一个。中间可以嵌套多个标记,添置多种属性,来设置主体内容的背景,外观等。显示文本或图像.该标记建立超链接,标记中间可以嵌套其他标记,如图像标记Image、文本格式标记font等。例如:href:链接目标的地址;target:链接目标的窗口名;若windowname不存在,则打开一个新窗口。,HTML语言的标记及其用法,标尺线标记;属性有:width(绝对、相对)size、align(left、right、center)、color.2.文字格式标记标题设置标记:.n:标题字号(1,2,3,4,5,6)数字越小,字号越大。属性有:face(字体),size(字号,1-7,值越大,字
18、越大),HTML语言的标记及其用法,字型设置标记,HTML语言的标记及其用法,段落标记强制换行标记.预排格式标记.文本对齐方式标记属性有:align、style等。:之间加入的文本将会在浏览器中按两边缩进的方式显示出来。3.列表标记无序列表:用来创建一个标有圆点的列表;有序列表:它是用来创建一个标有数字的列表;,HTML语言的标记及其用法,4.表格标记建立表格;其间可以通过加入多个标记和属性来建立表格。有关表格的标记有:表格的说明;开辟一行;开辟一列;,HTML语言的标记及其用法,5.图像和多媒体记标6.超链接标记7.表单标记,HTML语言的标记及其用法,背景色彩和文字色彩属性bgcolor-
19、背景色彩 text-非可链接文字的色彩 link-可链接文字的色彩 alink-正被点击的可链接文字的色彩 vlink-已经点击(访问)过的可链接文字的色彩#=rrggbb色彩是用 16 进制的 红绿蓝(red-green-blue,RGB)值来表示。,HTML语言的标记及其用法,背景图像绝对地址和相对地址当前目录使背景不滚动,HTML语言的标记及其用法,页面空白(Magin):页面左边的空白 页面上方的空白(天头)页面右边的空白页面下方的空白#=是数字,本章练习,1.用HTML语言编辑一个.htm文件,使其在浏览器上显示的效果如下图所示:2.为自己设计的站点用HTML语言制作静态网页。,课程
20、体系结构,以网页制作为中心的多元化授课体系,网站建设概述,HTML语言基础,网页制作工具,网页美化工具,网络新领域、新技巧,网站建设,第三章 网页制作工具之-Dreamweaver4.0,一、Dreamweaver桌面的基本结构;二、Dreamweaver的菜单功能和实现;三、Dreamweaver的常用操作;四、Dreamweaver应用;,Dreamweaver桌面的基本结构,标题栏:显示当前正在编辑的文件的标题。括号中显示文件名;菜单栏:Dreamweaver所有的功能都可以在菜单中找到;工具栏:一些常用的操作图标。包括视图工具、页面标题工具、文件管理工具等。文档窗口:其内容根据所选视图
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 建设 网页 制作 复习
链接地址:https://www.31ppt.com/p-6334497.html