网页设计综合案例篇ppt课件.ppt

1、网页设计：从界面布局到视觉表现基础篇界面交互篇视觉表现篇综合案例篇综合案例篇网站静态页面前端开发基础餐饮类网站静态页面设计9. 网站静态页面前端开发基础9.1 html基础9.2 css基础9.3 javascript脚本基础9.4 案例幻灯片效果9.1.1 html简介 9.1 html基础 我们精心制作出的一张psd效果图，并不是能够被浏览器或者手机展示出来的网站。要让浏览器或者手机能够显示网站，必须将效果图转换为浏览器或者手机能够认识的语言，这种语言就是html语言。 html英语意思是 Hypertext Marked Language，即超文本标记语言。为什么是超文本呢？其实还可以翻

2、译为超级文本，它的意思是可以比我们平时写的书信要强很多的文本，可以加入图片、声音、动画、影像，还可以从网页中的一个链接跳转到另一个页面。这就是为什么叫超文本标记语言的原因。9.1.2 html文档结构 对于从来没有过编程经验的同学，学习html可能会比较难，因为，它既不像汉语也不像英语，可以直接从左到右读出一个语义出来。目前的计算机很难直接理解人类的自然语言，所以必须以一种特殊的格式来表示网页的外观。这种格式就是html文档格式，如下是一个简单的html页面代码：html文档主要由3部分组成：html部分、文档头head、文档体body：（2）文档头 头部以标签开始，以标签结束。这部分包含显示

3、在网页导航栏中的标题和其他在网页中不显示的信息。 标题包含在和/title标签之间，表示这个网页的页面标题，如下： .（3）主体部分 主体部分以标签开始，以标签结束。主体部分包含再网页中显示的文本、图像和链接等，如下： .9.1.3 常用标签 html语言的一些基本语法单位，我们称为标签，也称为html标签或者html元素。html标签可以大写、也可以小写，如标题和所表达的意思是一样的，但是目前的html规范中，推荐使用小写，这也是一种好的书写习惯。html标签有如下的一些特点，需要引起我们的注意： （1）标签是由尖括号包围，例如 （2）标签一般式成对出现，例如和需要成对出现，表示开始，表示结

4、束。但是也有单独出现的标签，如图像标签就是单独出现的，但是需要在反坚括号()前加一个斜线（/），表示结尾。成对出现的标签和单独出现的标签有什么区别呢？主要是成对出现的标签，在两个标签中间有内容，如我们，而单独出现的标签是没有内容的，如标题标签html标题是通过 、 等标签进行定义的，它们表示不同大小的标题文字，和word一样，一级标题最大，六级标题最小，如下代码：下面介绍一些常用的标签：这是一级标题这是二级标题这是三级标题这是四级标题这是五级标题这是六级标题标题标签的代码在浏览器的显示效果也如标题标签一样呈递减方式。段落标签 另一个常用的标签是标签，表示段落，段落就是写文章时候的分段。代码如下

5、：这是第一段落。这是第二段落。 段落标签的代码在浏览器的显示效果也会如段落一样行距间隙较大。链接标签 链接标签用表示，它用来实现从一个页面跳转到另一个页面的功能，一般链接标签下有一条横线，表示链接的意思。下面是三个链接到BAT（百度、阿里巴巴、腾讯）首页的a标签的例子： 淘宝 腾讯 百度链接标签的代码在浏览器的显示效果会引导、提示用户点击。 图像标签 网页中的图像是用标签来表示的，img标签有src属性，表示图像的在磁盘或者网络中的存放位置。一般来说，我们也需要定义一张图像在网页中的大小，使用宽度(width)和高度(height)属性来定义图像的大小。下面用代码表示一个宽为80像素，高为45

6、像素的logo图像，就能在浏览器中显示出来了。 文本格式化标签html定义了很多格式化输出的标签，例如斜体字、粗体字、强调字等。标签表示文字加粗。标签表示斜体字。表示强调字，它的意思是在一段文字中，标签修饰的字更突出。下面是一些常用的文本格式化标签： Document body background-color: #aa0; 加粗字 斜体字 大号字 强调字 删除字 中国 北京 文字 上标 对du应上面的文本格式化标签代码顺序，在浏览器的显示效果各不相同。 表格标签 表格由标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。字母td指表格数据（table data

7、），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等合法的html标签。表格代码如下所示：左面的表格标签代码在浏览器的显示成了一个消费记录的表格9.2.1 css简介 9.2 css基础 我们看到的丰富多彩的网页，它的外观是由什么决定的呢？网页的外观是由css定义的。css是Cascading Style Sheet(级联样式表)的缩写。它是为网页添加布局效果的一种样式语言，由于它使用简单方便，凡是编写网页代码，都需要学习它。 css主要用于定义html的布局、外观。例如，某个字体的颜色、字体大小、内外边距。图像的宽度、高度等。下面我们将对css进行详细介绍。

8、 一个css语法规则由两部分组成：选择器、一条或者多条样式语句。selector declaration1; declaration2; . declarationN selector是选择器，表示需要改变的html元素。declaration表示样式语句，用来定义一种样式，一般是一个属性和一个值组成。9.2.1 css简介 例如设置h1的字体为深灰色，字号为16像素里的h1就是选择器（selected）,表示选择h1标签，对h1标签进行外观和布局设置。9.2.3 css属性选择器 为了灵活的选择html中的标签，设置标签的布局。css定义了几种选择器：id选择器、类选择器、属性选择器等。（1

9、）id选择器Id选择器选择特定id的html标签，并为它们指定样式。id选择器以“#”来表示。如右图：（2）css类选择器并不是每个html标签（如div）都需要一个id，也可以使用类来定义html标签的布局和外观。在 css 中，类选择器以一个点号显示，如下：.red color:#ff0000;在上面的例子中，所有属于red类的html标签字体均设置为红(#ff0000)。在下面的 html 代码中，h1 和 p 元素都有 red类。这意味着两者都将遵守 .red 选择器中的规则。（3）css 属性选择器 css 属性选择器用来对带有指定属性的html标签设置样式，当类选择器和id选择器使

10、用不太方便的时候，可以使用属性选择器。需要注意的是，在低版本的浏览器上（如IE6）是不支持属性选择器的，这是因为，这些浏览器已经开发了超过10年，css的一些新特性最近几年才出来。但是不用担心，这些浏览器已经退出了历史舞台，目前很少使用了。属性选择器还有一些变种，用来实现更强大的属性选择器，见下表：下面的代码是属性选择器的常用形式： css 属性选择器制定的各种形式9.2.4 网页中应用样式表 要想在浏览器中显示出预期的css样式表效果，就要让浏览器识别并正确调用css。这里介绍三种在html页面中插入css样式表的方法：一是链入外部样式表；二是内部样式表、三是内嵌样式。（1）链入外部样式表链

11、入外部样式表是把样式表保存为一个样式表文件，扩展名为css。然后在页面中用标记导入样式文件到网页中。这个标记必须放到页面的区内，如下： 一个外部样式表文件(如mystyle.css文件)可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，也减少了浏览器重复下载代码样式表文件，这对提高网站的访问速度是很重要的，也是目前用得最多的一种样式导入方式。使用外部样式表时，只需要在外部样式表中写上样式就可以了，使用任何的文本编辑器都可以书写，这里推荐大家使用dreamweaver、subli

12、me等流行工具。下面是一个mystyle.css的例子：（2）内部样式表内部样式表是把样式表放到页面的区里，这些定义的样式就应用到页面中了，样式表是用标记插入的，从下例中可以看出标记的用法：3、内嵌样式表内嵌样式表是在html标签中使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在html标签中加入style属性。而style属性的内容就是css的属性和值，如下例：9.2.5 css常用属性 1）css 背景css可以使用纯色作为背景，也可以使用一幅图片作为背景。可以使用 background-color 属性为标签设置背景色。这个属性接受任何合法的颜色值。下面这

13、条规则设置所有的div背景为红色：div background-color: red;background-color其默认值是transparent。transparent 是透明的意思。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其上层元素的背景才能可见。（2）css 文本属性css文本属性用来定义文本的外观，如颜色、字体大小，对齐方式，缩进等。text-indent 属性实现文本缩进，这个属性用来将首段的首行进行缩进，下面的语句，将p标签缩进2个em单位。p text-indent: 2em;text-align属性用来定义一个元素中的文本的对齐方式。它的值一般有lef

14、t、center、right，分别表示左对齐、居中、右对齐。text-decoration 属性是一个常用的属性，一般用来对文字添加下划线，例如链接标签a，默认就带有下划线。 text-decoration可以取none、underline、overline、line-through和blink。它们的意思分别是：none：表示关闭原本应用到一个标签上的所有样式，例如a标签默认有下划线，如果将text-decoration设置为none，那么就表示去掉下划线。underline：会对元素加下划线overline：overline 与underline恰好相反，会在文本的顶端画一个上划线。lin

15、e-through：在文本的中间画一条线。blink：让文本闪烁起来，不过有的浏览器不支持这个特性，需谨慎使用。line-height属性非常重要，使用也非常多，表示文字行间的高度。下面的规则表示设置p标签的行高为24像素：pline-height:24px下面的代码总结了一些常用的css文本属性：上面代码在浏览器中的各种文本效果在实际设计表现中运用频率很高。（3）css 字体属性css 字体属性定义文本的字体名字、大小、加粗和风格（如斜体）等。使用字体名字，可以使用font-family 属性，如下定义了body中的所有文本使用微软雅黑字体。bodyfont-family:微软雅黑如果用户的

16、电脑上没有微软雅黑，可能出现一种不确定的字体，这时候，可以多指定几种字体，如下：bodyfont-family:微软雅黑,宋体,楷体这样会从左到右，选择字体。9.2.6 css盒模型 css盒子模型又称框模型，它是html+css最核心的知识之一，理解这个概念可以更好的理解html的各个元素是怎样布置在浏览器页面中的。 上面这个图表示html的每个标签都可以具有这些属性，它分别定义了每个标签的外边距(margin)、边框（border)、内边距（padding) 和内容（content)。这几个属性的含义分别是：外边距（margin)：最外层的外边距，和另一个html元素的距离，当然可以为0。

17、外边距是透明的，没有颜色，肉眼无法看到。边框(Border）：围绕在内边距和外边距之间的边框，可以有宽度，并且也可以有颜色。边框也可以有样式，如点画线，实心线等，后面会详细介绍。内边距(Padding)：内容和边框之间的距离，内边距是透明的。内容(content)：内容区表示盒子模型的内容，主要显示文本、图像、链接等。（1）外边距（margin）属性margin属性定义了外边距，它可以单独设置上，下，左，右的边距，也可以一次改变所有的属性。单独设置上下左右边距的好处是：可以设置左边距为10px，右边距为0px。这样可以灵活的控制元素的总体大小。单独指定上下左右边距的属性是：上边距（margin

18、-top）、（下边距）margin-bottom、（左边距）margin-left、（右边距）margin-right。所有边距可以取如下值：除了写出完整的margin-left，marging-right等，margin也可以简写。一般情况margin可以有四个值，如下：margin:35px 40px 65px 90px;表示：上边距为35px右边距为40px下边距为65px左边距为90px细心的读者，会发现margin:35px 40px 65px 90px等价于margin-top:35px;margin-right:40px;margin-bottom:65px;margin-lef

19、t:90px;margin也可以接受3个值，如下：margin:35px 40px 65px;表示：上边距为35px左右边距为40px下边距为65px等价于：margin-top:35px;margin-right:40px;margin-bottom:65px;margin-left:40px;margin也可以接受2个值，如下：margin:25px 50px;上下边距为25px左右边距为50px等价于margin-top:25px;margin-right:50px;margin-bottom:25px;margin-left:50px;margin也可以接受1个值，如下：margin:

20、25px;所有的4个边距都是25px等价于margin-top:25px;margin-right:25px;margin-bottom:25px;margin-left:25px;2）边框（border）属性边框（border）属性允许你指定一个元素边框的样式和颜色。css边框有如下的属性：左面代码在浏览器中的效果将有虚线红色边框和实线绿色边框两种。（3）填充(padding）属性填充(padding）属性定义元素边框与元素内容之间的空间。padding的取值和margin相同，可以为30px、10%、auto等类似值。（4）盒模型完整示例下面的代码是一个完整的盒模型示例（见图9.15），代

21、码中它设置了内边距padding、边框border、外边距margin：（图）填充属性的应用效果通过本例，我们还需要了解盒模型整个元素占用的总宽度和总高度，其计算公式分别如下： 如果将静态网页比作成一个人，那么html就是人的骨骼、css则是血肉、而javascrpit就是人的动态。而理解javaScript的现在最好的方式之一就是了解它的历史。这有助于全面理解javaScript在整个计算机理论和工业界中所处的重要位置。9.3 javaScript脚本基础9.3.1 javaScript的简介 javaScript的诞生于1995年前后，这是有当时非常牛逼的Netscape(网景)公司发明的

22、。javaScript最初主要用来处理网页的前端验证，如当用户输入密码的时候，验证密码是否包含字母和数字。 经过20多年的发展，javaScript目前的功能已经非常强大了。我们现在所看到的网站的大多数效果，都是用javaScript实现的，所以掌握javaScript是制作网站很重要的技能之一。此外，在工业界中，大家常把javaScript简称为js，因此javaScript和js实则表述为同一脚本语言。9.3.2 html中使用javaScriptjavaScript必须放在html的 与 标签之间。如下文：上面的代码， 和 会指明了javaScript 的开始和结束。浏览器会将 和 之间

23、的代码，理解为javaScript。也许你在有些教材中，发现有如下的写法：传统的javaScript代码， 标签中使用 type=text/javaScript，但现在的浏览器默认使用javaScript作为脚本语言，因此不需要显示的指定脚本属于哪一种语言了。9.3.3 javscript的变量 了解javaScript语法，我们先从变量开始。变量是javaScript中表示计算结果或值的一个抽象概念，和数学中的变量x、y、z差不多。变量可以通过变量名访问。变量名的命名规范需要遵守两条简单的规则： 一是第一个字符必须是字母、下划线(_)或美元符号($)，不能以数字开始； 二是后面的字符可以是下

24、划线、美元符号、任何字母或数字字符. 下面的变量都是合法的： 上面的var表示声明一个变量，var是javaScript的关键字，不能用作变量名。变量的赋值直接使用等号(=)，如下代码：9.3.4 javaScript操作html标签 很多时候我们都需要使用javaScript来操作html，以下这几种情况是经常发生的： 一是登录失败的时候，改变某个html标签的显示内容，以提示用户名或者密码错误；二是改变某个html标签的css样式，如改变标签的颜色、字体大小、背景色等。 javaScript使用document.getElementById(id) 方法来操作某个html标签，id表示某个

25、html标签的唯一标识。下面是一个改变标签内容的例子：9.3.5 javaScript的注释 当代码写多了，难免有不好理解和阅读的地方，这时候，你需要给代码写一些注释。写注释是一个很好的习惯，它不仅可以帮助你在未来回忆起代码的意思，而且可以帮助您的团队成员理解你代码的意图。javaScript注释分单行和多行注释，单行注释以/开始，下面是使用单行注释的例子：多行注释以 /* 开始，以 */ 结尾，下面是使用多行注释的例子：9.3.6函数一个函数的代码包含了一对花括号中，用关键词function来表示函数，如下函数也可以带有参数，传入的参数不同，返回的结果可能也不同。函数也可以带有参数，传入的参

26、数不同，返回的结果可能也不同。 这里是一个加法函数，传入2个参数x和y，函数的功能是把x加y的和返回。function是函数关键字，不能更改，add是函数名，x和y是参数。 当写好函数需要执行，调用函数的代码如下：当写好函数需要执行，调用函数的代码如下：这里total的值是3+4的和为7。9.3.7 javaScript的运算符 javaScript的运算符和数学中的运算符差不多，前面我们接触了=、+等运算符，其意义也和数学中的意义一样。javaScript主要有：算数运算法、赋值运算符、关系运算符等。1.算数运算符算数运算符主要执行变量之间的算数运算，下表取y=4，解释了常用的算数运算符运算

27、规则：2.赋值运算符 赋值运算符用于给变量赋值，下面的表格解释赋值运算符的赋值规则，设x=10，y=5：3.关系运算符 关系运算符主要用于比较功能，每一个关系运算符都返回一个布尔值。布尔值是一个特殊的值，它要么为真(true)，要么为(false)。 如姚明是一个篮球运动员？这句话为真的，所以其布尔值为真(true)。 又如姚明是女性？这句话是假的，所以其布尔值为假(false)。 常用的关系运算符有小于()、小于等于(=)。下面是2个例子，注释中是得到的布尔值。9.3.8 javaScript的三种流程控制编程语言中有三种流程控制结构，分别是顺序结构、条件结构和循环结构。1.条件结构条件结构

28、就是按照条件执行相应的语句。首先我们来看一下条件语句，条件语句根据不同的条件，执行不同的代码。常用的条件语句有如下三种：（1）if语句当条件为true时，执行花括号中的语句。（2）if.else. 语句（2）if.else if.else 语句if.else if.else 语句，当条件1为真时，执行条件1中的语句，当条件1为假时，执行条件2的语句，当条件2为假时，执行最后一个else语句。2.循环结构 循环是反复的执行相同的代码，例如上课点名，就可以使用循环来减轻老师的负担。不用循环，点名的时候我们可能写如下的代码： 如果有几十个人需要点名，那么这样写比较麻烦，不妨使用循环来实现这个功能。循

29、环有for循环和while循环，for循环的语法是：语句 1 在循环（代码块）开始前执行，进行必要的初始化； 语句 2 定义运行循环（代码块）的条件，只有满足条件，才能每次执行循环中的代码； 语句 3 在循环中的代码被执行之后执行； While 循环会在指定条件为真时循环执行代码块。语法如下：下面的代码打印出0到4：9.3.9 javaScript与html的交互 javaScript可以操作html，当html网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），文档对象模型简称DOM，javaScript通过操作DOM来控制html中标签。 javaS

30、cript可以创建、访问html中的各种元素。例如可以更改一个p标签的内容，添加一个div标签等。总结起来，可以通过以下几种方式获得html标签元素：1. 通过id 查找 html 元素 在 DOM 中查找 html 标签的最简单的方法，是通过使用标签的 id属性，下面的例子通过getElementById函数查找 id=intro 元素： 如果找到该元素，则该方法将以对象的形式返回该元素。如果未找到该元素，则 x 将被设置为空（undefined） 。2.通过标签名查找 html 元素 可以通过getElementsByTagName函数查找特定标签名的元素。本例查找 id=main 的元素，然后查找 id=main 元素中的所有 元素：3 通过类名找到 html 元素 本例通过 getElementsByClassName 函数来查找 class=intro 的元素：var x=document.getElementsByClassName(intro);9.4 案例幻灯片效果