网页设计与开发.ppt
《网页设计与开发.ppt》由会员分享,可在线阅读,更多相关《网页设计与开发.ppt(82页珍藏版)》请在咨信网上搜索。
1、网页设计与开发吕智强网页和网站网页和网站网站是有独立域名、独立存放空间的内容集合(即对外发布),这些内容可能是网页,也可能是程序或其他文件,不一定要有很多网页,主要有独立域名和空间,那怕只有一个页面也叫网站。网页是网站的组成部分。有了很多网页没有独立的域名和空间也只能说是网页。例如一个程序,尽管有很多页面,功能也齐全,但没有独立域名和空间,没对外发布,但都不能叫网站。一、概述一、概述网页表现形式网页表现形式静态网页1.通常是以.htm、.html、.shtml等为后缀的,它的特点是不会“变”2.静态网页没有数据库的支持,在网站制作和维护方面工作量较大,因此当网站信息量很大时完全依靠静态网页制作
2、方式比较困难3.静态网页的交互性较差,功能简单,无法实现更多的功能网页表现形式网页表现形式动态网页1.通常是以.php、.aspx、.jsp等为后缀的,它的特点是会“变”2.以数据库技术为基础,大大降低网站维护的工作量3.可以实现更多的功能,如用户注册、用户登录、在线调查、用户管理、订单管理等等4.动态网页实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页;什么是万维网什么是万维网 万维网的核心部分由统一资源定位器(URL)、超文本传输协议(HTTP)以及超文本标记语言(HTML)三个标准构成。1统一资源定位器统一资源定位器统一资源定位器,又叫URL(Unif
3、ormResourceLocator)。是专为标识Internet网上资源位置而设的一种编址方式,通常所说的网页地址指的即是URL。2超文本传输协议超文本传输协议HTTP是超文本转移协议,是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。在Internet上的Web服务器上存放的都是超文本信息,客户机需要通过HTTP协议传输所要访问的超文本信息。3超文本标记语言超文本标记语言HTML(HyperTextMarkupLanguage)超文本标记语言是一种嵌入式语言。通过定义标记标签使浏览器解析页面并进行显示。工作原理工作原理当进入万维网上一个网页,或者其他网络资源的时候,通常你要首先在
4、浏览器上键入想访问网页的统一资源定位器(URL),或者通过超链接方式链接到那个网页或网络资源。这之后的工作首先是URL的服务器名部分,被名为域名系统的分布于全球的因特网数据库解析,并根据解析结果决定进入哪一个IP地址。接下来的步骤是为所要访问的网页,向在那个IP地址工作的服务器发送一个HTTP请求。在通常情况下,HTML文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。网络浏览器接下来的工作是把HTML、CSS和其他接受到的文件所描述的内容,加上图像、链接和其他必须的资源,显示给用户。这些就构成了浏览器中所看到的“网页”。开发工具的选择开发工具的选择HTML的编辑工具是比较多的
5、,读者既可以选择最常用的基于文本的HTML编辑器(Windows自带的记事本),也可以选择一套功能强大,可取代记事本编辑器的EditPlus,还可以选择所见即所得的Dreamweaver等。网页制作的相关技术网页制作的相关技术 1HTMLHTML(HyperTextMarkupLanguage)超文本标记语言是一种嵌入式语言。和一般文本的不同的是,一个HTML文件不仅包含文本内容,还包含一些Tag,中文称“标记”。通过定义标记标签使浏览器解析页面并进行显示。一个HTML文件的后缀名是htm或者是html。2CSSCSS意思就是叠层样式表(CascadingStyleSheets),使用CSS的
6、优点在于将格式从功能中分离出来。它定义了HTML元素的显示,是一种对web文档添加样式的简单机制。在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。网页制作的相关技术网页制作的相关技术 3JavaScriptJavaScript是由Netscape公司开发的一种脚本语言(scriptlanguage),称为描述性语言,具有面向对象的能力,可以非常自由地嵌入到HTML/XHTML文件中,从而更便捷地开发出可交互的Web网页。JavaScript是目前最为
7、流行的客户端脚本语言,大大地增强了网页的交互性。JavaScript语法构成与C、C+、Java类似,都包括if语句、while循环、分支选择以及运算等结构,但也仅是在语法上的相似。网页元素单位网页元素单位相对长度单位 px:像素是相对于显示器屏幕分辨率而言 em:相对于当前对象内文本的字体尺寸绝对长度单位 cm:厘米 mm:毫米 in:英寸HTML文档结构文档结构HTML(HyperTextMarkupLanguage)超文本标记语言是一种嵌入式语言。通过定义标记标签使浏览器解析页面并进行显示。一个HTML4.01的文档结构包括以下几部分:DOCTYPE声明定义文档类型。HTML头元素信息。
8、HTML正文信息(body标签内信息)。二、初识二、初识HTML声明定义文档类型声明定义文档类型 在HTML4.01中提供了三种DTD文档:严格型HTML4.01DTD文档不包括那些不被推荐的元素和属性,并且不能在带有frameset的页面中出现。过渡型HTML4.01DTD文档包含所有严密型DTD文档中所允许的内容,还可以使用那些不被推荐的元素以及属性。框架型HTML4.01DTD文档包含过渡型以及框架。HTML头元素信息头元素信息 HTML文档的head元素中包含了meta元素,meta元素用来指定有关这个文档的相关信息。例如:用httpequiv、content、charset描述页面的
9、内容。meta元素的属性有两种:http-equiv和name。什么是标签什么是标签大多数HTML文档的标签都是由开始标签和结束标签进行界定(开始标签和结束标签成对出现),结束标签是以斜线开头(/),例如中为结束标签。每一个标签都是由尖括号()包围。有单向标签和双向标签单向标签:br、hr、img等三、标签三、标签标签的属性标签的属性标签可以拥有属性,属性可以为页面中的HTML元素提供附加信息。属性被放置在标签的后面,但在最终括号()的前面,即属性应该添加在HTML元素里的起始标签中。例如:标签的嵌套标签的嵌套HTML标签经常使用嵌套的方式,所谓的嵌套是指一个HTML标签包含另外一个标签的情况
10、。例如:标题显示的内容HTML基本标签基本标签HTML基本标签包括:标题标签h1、段落标签p、换行标签br、水平分割标签hr、部分标签div、注释标签、字体标签font。部分标签最早在HTML3.2标准中定义,可以将文档分割成独立的、不同的部分。在标签中定义的文本内容,实际上与没有在标签中定义的没有什么区别,但要是引入了align属性,标签就变的十分有用了(用来设置段落或标题的对齐方式)。和其他编程语言一样,HTML也提供了代码注释的方式(,作为一个程序员应该养成对代码注释的习惯,这样可以保持清晰的思路。浏览器不显示注释的部分。文字格式化文字格式化 常见的文字格式化标签如下表。字体设置字体设置
11、在HTML中,字体标签(font)通过其属性来设置文本字体、字体大小和字体颜色。字体标签的属性如下表。colorcolorcolorcolor无序列表无序列表所谓无序列表就是列表中列表项的前导符号没有一定的次序,而是用黑点、圆圈、方框等一些特殊符号标识。无序列表并不是使列表项杂乱无章,而是使列表项的结构更清晰,更合理。当创建一个无序列表时,主要使用用HTML的标签和标签来标记。其中标签标识一个无序列表的开始;标签标识一个无序列表项。基本语法结构为:项目名称项目名称项目名称项目名称四、列表四、列表有序列表有序列表有序列表与前面介绍的无序列表正好相反,所谓有序列表就是列表项的前导符号是有序的符号标
12、识的列表。有序的符号标识包括:阿拉伯数字、小写英文字母、大写英文字母、小写罗马数字、大写罗马数字。基本语法结构为:项目名称项目名称项目名称标签的type属性用来定义一个有序列表的前导字符,如果省略了type属性,浏览器会默认显示为“1”前导字符。type取值为1(阿拉伯数字)、a(小写英文字母)、A(大写英文字母)、i(小写罗马数字)、I(大写罗马数字)图片的使用图片的使用HTML和XHTML的一个重要特性就是可以在文本中加入图片,既可以把图片作为文档的内在对象加入,又可以通过超级链接的方式加入,同时还可以将图片作为背景加入到文档中。在文档中合理地使用图片会使浏览器显示的网页更活泼、引人入胜。
13、五、图片五、图片在页面中插入图片在页面中插入图片 在HTML中,用标签在网页中添加图片。图片是以嵌入的方式添加到网页中的。网页开发者可以通过多种方式获取网页设计中用到的图片,可以将现有的图片扫描到计算机内、从Internet上的Web站点获取以及通过制图软件自己动手制作。如果是“引用”的图片,一定要得到图片版权拥有者的同意才可使用。在页面中插入图片的语法:替换文本说明替换文本说明 有时,由于网络过忙或者用户在图片还没有下载完全就点击了浏览器的停止键,用户不能在浏览器中看到图片,这时替换文本说明就十分有必要了。替换文本说明应该简洁而清晰,能为用户提供足够的图片说明信息,在无法看到图片的情况下也可
14、以了解图片的内容信息。例如:调整图片大小调整图片大小 在HTML中,通过img标签的属性width和height来调整图片大小,其目的是通过指定图片的高度和宽度加快图片的下载速度。如果不设置width和height属性,浏览器就要等到图片下载完毕才显示网页,因此延缓了其它页面元素的显示。例如:设置背景图片设置背景图片 背景属性将背景设置为图片。属性值为图片的URL。如果图片尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。例如:添加背景颜色添加背景颜色 使用body标签的bgcolor属性可以给HTML页面指明背景颜色。其值可以是16进制数、RGB值或者是颜色的名称。例如:HTML使用标
15、签来建立一个链接,通常标签又称为锚。一个超级链接可以指向任意一个Web上的资源(一个HTML页面,一张图片,一段声音文件,一部电影等)。创建超级链接的基本语法格式:这是要链接的站点(文字、图片)在和标签之间的文本文字,用户可以单击该文字来实现网页的浏览访问。六、超级链接六、超级链接同一页面内的书签链接同一页面内的书签链接 当网页的页面较长,且该页面是由几个部分组成时,不得不拖动浏览器的滑动条查看信息,这样既麻烦又费时。HTML恰好提供了跳转功能,能够非常方便、快捷地实现从网页当前的部分跳转到同一网页的另一部分。建立书签语法:链接内容创建书签链接语法:链接标题不同页面间的书签链接不同页面间的书签
16、链接 书签链接还可以在不同页面间进行链接。当单击书签链接标题,页面会根据链接中的href属性所以定的地址,将网页跳转到目标地址中书签名称所表示的内容。建立书签语法:链接内容创建书签链接语法:链接标题超级链接路径超级链接路径超级链接标签的属性“href”定义了当前链接所指的目标地址,也就是超级链接路径。在HTML中,主要提供了2种路径:绝对路径和相对路径。绝对路径绝对路径 绝对路径就是主页上的文件或目录在硬盘上真正的路径(URL和物理路径)。例如,C:xyzindex.html代表了index.html文件的物理绝对路径;http:/ 3下级目录的文件链接下级目录的文件链接假设1.html路径是
17、:c:Inetpubwwwrootsites1.html假设2.html路径是:c:Inetpubwwwrootsitesadmin2.html2.html文件是1.html文件的下一级目录的文件,1.html文件链接到2.html文件,可以在1.html中写成:2.html假设1.html路径是:c:Inetpubwwwrootsites1.html假设2.html路径是:c:Inetpubwwwrootsitesadminuser2.html2.html文件是1.html文件的下两级目录的文件,1.html文件链接到2.html文件,可以在1.html中写成:2.html七、表格七、表格
18、主要内容:表格的构成设置表格背景设置表格表头设置表格大小设置表格数据对齐方式cellspancing与cellpadding属性横跨行和列添加表格高级标签使用表格进行网页布局7.1 表格简介表格简介表格在网站开发中应用广泛,几乎多有的HTML页面或多或少地采用了表格。表格可以灵活地控制页面的排版,使整个页面层次清晰。学好网页制作,熟练掌握表格的各种属性是很有必要的。表格标记表格标记 基本标签:table定义一个表格tr定义表格中的行td定义表格中的数据 基本语法:表格边框表格边框 可以使用table标签的border属性为表格添加边框并设置表格边框宽度,表格的边框按照数据单元将表格分割成单元格
19、,边框的宽度以像素为单位。可以通过bordercolor属性为边框添加颜色,其颜色值可以是rgb(x,x,x)、16进制颜色值或代表颜色值的颜色名称。表格表头表格表头 表头是指表格的第一行或第一列对该列或该行的表格内容进行说明。表头的文字样式为居中、加粗显示,通过标签实现。基本语法:7.2 表格背景表格背景 表格可以添加背景颜色和背景图片,使用表格背景颜色或背景图片必须使表格中的文本数据颜色与表格的背景颜色或背景图片形成足够的反差。否则,将不容易分辩表格中的文本数据。设置表格背景设置表格背景 可以使用bgcolor属性设置表格的背景颜色,其值可以是rgb(x,x,x)、#xxxxxx或颜色名(
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 开发
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【胜****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【胜****】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。