网页设计【综合案例篇】

标题:字体:微软雅黑粗体字号:32-36pt颜色:主题蓝色副标题:字体:微软雅黑字号:24pt颜色:主题灰色,网页设计：从界面布局到视觉表现,基础篇,界面交互篇,视觉表现篇,综合案例篇,综合案例篇,网站静态页面前端开发基础,餐饮类网站静态页面设计,9.网站静态页面前端开发基础,9.1html基础,9.2css基础,9.3javascript脚本基础,9.4案例幻灯片效果,9.1.1html简介,9.1html基础,我们精心制作出的一张psd效果图，并不是能够被浏览器或者手机展示出来的网站。要让浏览器或者手机能够显示网站，必须将效果图转换为浏览器或者手机能够认识的语言，这种语言就是html语言。html英语意思是HypertextMarkedLanguage，即超文本标记语言。为什么是超文本呢？其实还可以翻译为超级文本，它的意思是可以比我们平时写的书信要强很多的文本，可以加入图片、声音、动画、影像，还可以从网页中的一个链接跳转到另一个页面。这就是为什么叫超文本标记语言的原因。,9.1.2html文档结构,对于从来没有过编程经验的同学，学习html可能会比较难，因为，它既不像汉语也不像英语，可以直接从左到右读出一个语义出来。目前的计算机很难直接理解人类的自然语言，所以必须以一种特殊的格式来表示网页的外观。,这种格式就是html文档格式，如下是一个简单的html页面代码：,html文档主要由3部分组成：html部分、文档头head、文档体body：,（2）文档头头部以标签开始，以标签结束。这部分包含显示在网页导航栏中的标题和其他在网页中不显示的信息。标题包含在和/title标签之间，表示这个网页的页面标题，如下：,（3）主体部分主体部分以标签开始，以标签结束。主体部分包含再网页中显示的文本、图像和链接等，如下：,9.1.3常用标签,html语言的一些基本语法单位，我们称为标签，也称为html标签或者html元素。html标签可以大写、也可以小写，如标题和所表达的意思是一样的，但是目前的html规范中，推荐使用小写，这也是一种好的书写习惯。,html标签有如下的一些特点，需要引起我们的注意：（1）标签是由尖括号包围，例如（2）标签一般式成对出现，例如和需要成对出现，表示开始，表示结束。但是也有单独出现的标签，如图像标签就是单独出现的，但是需要在反坚括号()前加一个斜线（/），表示结尾。成对出现的标签和单独出现的标签有什么区别呢？主要是成对出现的标签，在两个标签中间有内容，如我们，而单独出现的标签是没有内容的，如,标题标签html标题是通过、等标签进行定义的，它们表示不同大小的标题文字，和word一样，一级标题最大，六级标题最小，如下代码：,下面介绍一些常用的标签：,标题标签的代码在浏览器的显示效果也如标题标签一样呈递减方式。,段落标签另一个常用的标签是标签，表示段落，段落就是写文章时候的分段。代码如下：,段落标签的代码在浏览器的显示效果也会如段落一样行距间隙较大。,链接标签链接标签用表示，它用来实现从一个页面跳转到另一个页面的功能，一般链接标签下有一条横线，表示链接的意思。,下面是三个链接到BAT（百度、阿里巴巴、腾讯）首页的a标签的例子：,链接标签的代码在浏览器的显示效果会引导、提示用户点击。,图像标签网页中的图像是用标签来表示的，img标签有src属性，表示图像的在磁盘或者网络中的存放位置。一般来说，我们也需要定义一张图像在网页中的大小，使用宽度(width)和高度(height)属性来定义图像的大小。下面用代码表示一个宽为80像素，高为45像素的logo图像，就能在浏览器中显示出来了。,文本格式化标签html定义了很多格式化输出的标签，例如斜体字、粗体字、强调字等。标签表示文字加粗。标签表示斜体字。表示强调字，它的意思是在一段文字中，标签修饰的字更突出。下面是一些常用的文本格式化标签：,对du应上面的文本格式化标签代码顺序，在浏览器的显示效果各不相同。,表格标签表格由标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。字母td指表格数据（tabledata），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等合法的html标签。表格代码如下所示：,左面的表格标签代码在浏览器的显示成了一个消费记录的表格,9.2.1css简介,9.2css基础,我们看到的丰富多彩的网页，它的外观是由什么决定的呢？网页的外观是由css定义的。css是CascadingStyleSheet(级联样式表)的缩写。它是为网页添加布局效果的一种样式语言，由于它使用简单方便，凡是编写网页代码，都需要学习它。css主要用于定义html的布局、外观。例如，某个字体的颜色、字体大小、内外边距。图像的宽度、高度等。下面我们将对css进行详细介绍。,一个css语法规则由两部分组成：选择器、一条或者多条样式语句。,selector是选择器，表示需要改变的html元素。declaration表示样式语句，用来定义一种样式，一般是一个属性和一个值组成。,9.2.1css简介,例如设置h1的字体为深灰色，字号为16像素,里的h1就是选择器（selected）,表示选择h1标签，对h1标签进行外观和布局设置。,9.2.3css属性选择器,为了灵活的选择html中的标签，设置标签的布局。css定义了几种选择器：id选择器、类选择器、属性选择器等。,（1）id选择器Id选择器选择特定id的html标签，并为它们指定样式。id选择器以“#”来表示。如右图：,（2）css类选择器并不是每个html标签（如div）都需要一个id，也可以使用类来定义html标签的布局和外观。在css中，类选择器以一个点号显示，如下：.redcolor:#ff0000;在上面的例子中，所有属于red类的html标签字体均设置为红(#ff0000)。在下面的html代码中，h1和p元素都有red类。这意味着两者都将遵守.red选择器中的规则。,（3）css属性选择器css属性选择器用来对带有指定属性的html标签设置样式，当类选择器和id选择器使用不太方便的时候，可以使用属性选择器。需要注意的是，在低版本的浏览器上（如IE6）是不支持属性选择器的，这是因为，这些浏览器已经开发了超过10年，css的一些新特性最近几年才出来。但是不用担心，这些浏览器已经退出了历史舞台，目前很少使用了。,属性选择器还有一些变种，用来实现更强大的属性选择器，见下表：,下面的代码是属性选择器的常用形式：,css属性选择器制定的各种形式,9.2.4网页中应用样式表,要想在浏览器中显示出预期的css样式表效果，就要让浏览器识别并正确调用css。这里介绍三种在html页面中插入css样式表的方法：一是链入外部样式表；二是内部样式表、三是内嵌样式。,（1）链入外部样式表链入外部样式表是把样式表保存为一个样式表文件，扩展名为css。然后在页面中用标记导入样式文件到网页中。这个标记必须放到页面的区内，如下：,一个外部样式表文件(如mystyle.css文件)可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，也减少了浏览器重复下载代码样式表文件，这对提高网站的访问速度是很重要的，也是目前用得最多的一种样式导入方式。,使用外部样式表时，只需要在外部样式表中写上样式就可以了，使用任何的文本编辑器都可以书写，这里推荐大家使用dreamweaver、sublime等流行工具。下面是一个mystyle.css的例子：,（2）内部样式表内部样式表是把样式表放到页面的区里，这些定义的样式就应用到页面中了，样式表是用标记插入的，从下例中可以看出标记的用法：,3、内嵌样式表内嵌样式表是在html标签中使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在html标签中加入style属性。而style属性的内容就是css的属性和值，如下例：,9.2.5css常用属性,1）css背景css可以使用纯色作为背景，也可以使用一幅图片作为背景。可以使用background-color属性为标签设置背景色。这个属性接受任何合法的颜色值。下面这条规则设置所有的div背景为红色：divbackground-color:red;background-color其默认值是transparent。transparent是透明的意思。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其上层元素的背景才能可见。,（2）css文本属性css文本属性用来定义文本的外观，如颜色、字体大小，对齐方式，缩进等。text-indent属性实现文本缩进，这个属性用来将首段的首行进行缩进，下面的语句，将p标签缩进2个em单位。ptext-indent:2em;text-align属性用来定义一个元素中的文本的对齐方式。它的值一般有left、center、right，分别表示左对齐、居中、右对齐。text-decoration属性是一个常用的属性，一般用来对文字添加下划线，例如链接标签a，默认就带有下划线。text-decoration可以取none、underline、overline、line-through和blink。它们的意思分别是：none：表示关闭原本应用到一个标签上的所有样式，例如a标签默认有下划线，如果将text-decoration设置为none，那么就表示去掉下划线。underline：会对元素加下划线overline：overline与underline恰好相反，会在文本的顶端画一个上划线。,line-through：在文本的中间画一条线。blink：让文本闪烁起来，不过有的浏览器不支持这个特性，需谨慎使用。line-height属性非常重要，使用也非常多，表示文字行间的高度。下面的规则表示设置p标签的行高为24像素：pline-height:24px下面的代码总结了一些常用的css文本属性：,上面代码在浏览器中的各种文本效果在实际设计表现中运用频率很高。,（3）css字体属性css字体属性定义文本的字体名字、大小、加粗和风格（如斜体）等。使用字体名字，可以使用font-family属性，如下定义了body中的所有文本使用微软雅黑字体。bodyfont-family:微软雅黑如果用户的电脑上没有微软雅黑，可能出现一种不确定的字体，这时候，可以多指定几种字体，如下：bodyfont-family:微软雅黑,宋体,楷体这样会从左到右，选择字体。,9.2.6css盒模型,css盒子模型又称框模型，它是html+css最核心的知识之一，理解这个概念可以更好的理解html的各个元素是怎样布置在浏览器页面中的。,上面这个图表示html的每个标签都可以具有这些属性，它分别定义了每个标签的外边距(margin)、边框（border)、内边距（padding)和内容（content)。这几个属性的含义分别是：外边距（margin)：最外层的外边距，和另一个html元素的距离，当然可以为0。外边距是透明的，没有颜色，肉眼无法看到。边框(Border）：围绕在内边距和外边距之间的边框，可以有宽度，并且也可以有颜色。边框也可以有样式，如点画线，实心线等，后面会详细介绍。内边距(Padding)：内容和边框之间的距离，内边距是透明的。内容(content)：内容区表示盒子模型的内容，主要显示文本、图像、链接等。,（1）外边距（margin）属性margin属性定义了外边距，它可以单独设置上，下，左，右的边距，也可以一次改变所有的属性。单独设置上下左右边距的好处是：可以设置左边距为10px，右边距为0px。这样可以灵活的控制元素的总体大小。单独指定上下左右边距的属性是：上边距（margin-top）、（下边距）margin-bottom、（左边距）margin-left、（右边距）margin-right。所有边距可以取如下值：,除了写出完整的margin-left，marging-right等，margin也可以简写。一般情况margin可以有四个值，如下：margin:35px40px65px90px;表示：上边距为35px右边距为40px下边距为65px左边距为90px细心的读者，会发现margin:35px40px65px90px等价于margin-top:35px;margin-right:40px;margin-bottom:65px;margin-left:90px;,margin也可以接受3个值，如下：margin:35px40px65px;表示：上边距为35px左右边距为40px下边距为65px等价于：margin-top:35px;margin-right:40px;margin-bottom:65px;margin-left:40px;margin也可以接受2个值，如下：margin:25px50px;上下边距为25px左右边距为50px等价于margin-top:25px;margin-right:50px;margin-bottom:25px;margin-left:50px;margin也可以接受1个值，如下：margin: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），代码中它设置了内边距padding、边框border、外边距margin：（图）,填充属性的应用效果,通过本例，我们还需要了解盒模型整个元素占用的总宽度和总高度，其计算公式分别如下：,如果将静态网页比作成一个人，那么html就是人的骨骼、css则是血肉、而javascrpit就是人的动态。而理解javaScript的现在最好的方式之一就是了解它的历史。这有助于全面理解javaScript在整个计算机理论和工业界中所处的重要位置。,9.3javaScript脚本基础,9.3.1javaScript的简介,javaScript的诞生于1995年前后，这是有当时非常牛逼的Netscape(网景)公司发明的。javaScript最初主要用来处理网页的前端验证，如当用户输入密码的时候，验证密码是否包含字母和数字。经过20多年的发展，javaScript目前的功能已经非常强大了。我们现在所看到的网站的大多数效果，都是用javaScript实现的，所以掌握javaScript是制作网站很重要的技能之一。此外，在工业界中，大家常把javaScript简称为js，因此javaScript和js实则表述为同一脚本语言。,9.3.2html中使用javaScript,javaScript必须放在html的与标签之间。如下文：,上面的代码，和会指明了javaScript的开始和结束。浏览器会将和之间的代码，理解为javaScript。也许你在有些教材中，发现有如下的写法：,传统的javaScript代码，标签中使用type=text/javaScript，但现在的浏览器默认使用javaScript作为脚本语言，因此不需要显示的指定脚本属于哪一种语言了。,9.3.3javscript的变量,了解javaScript语法，我们先从变量开始。变量是javaScript中表示计算结果或值的一个抽象概念，和数学中的变量x、y、z差不多。变量可以通过变量名访问。变量名的命名规范需要遵守两条简单的规则：一是第一个字符必须是字母、下划线(_)或美元符号($)，不能以数字开始；二是后面的字符可以是下划线、美元符号、任何字母或数字字符.下面的变量都是合法的：,上面的var表示声明一个变量，var是javaScript的关键字，不能用作变量名。变量的赋值直接使用等号(=)，如下代码：,9.3.4javaScript操作html标签,很多时候我们都需要使用javaScript来操作html，以下这几种情况是经常发生的：一是登录失败的时候，改变某个html标签的显示内容，以提示用户名或者密码错误；二是改变某个html标签的css样式，如改变标签的颜色、字体大小、背景色等。javaScript使用document.getElementById(id)方法来操作某个html标签，id表示某个html标签的唯一标识。下面是一个改变标签内容的例子：,9.3.5javaScript的注释,当代码写多了，难免有不好理解和阅读的地方，这时候，你需要给代码写一些注释。写注释是一个很好的习惯，它不仅可以帮助你在未来回忆起代码的意思，而且可以帮助您的团队成员理解你代码的意图。javaScript注释分单行和多行注释，单行注释以/开始，下面是使用单行注释的例子：,多行注释以/*开始，以*/结尾，下面是使用多行注释的例子：,9.3.6函数,一个函数的代码包含了一对花括号中，用关键词function来表示函数，如下,函数也可以带有参数，传入的参数不同，返回的结果可能也不同。,函数也可以带有参数，传入的参数不同，返回的结果可能也不同。,这里是一个加法函数，传入2个参数x和y，函数的功能是把x加y的和返回。function是函数关键字，不能更改，add是函数名，x和y是参数。当写好函数需要执行，调用函数的代码如下：,当写好函数需要执行，调用函数的代码如下：这里total的值是3+4的和为7。,9.3.7javaScript的运算符,javaScript的运算符和数学中的运算符差不多，前面我们接触了=、+等运算符，其意义也和数学中的意义一样。javaScript主要有：算数运算法、赋值运算符、关系运算符等。,1.算数运算符,算数运算符主要执行变量之间的算数运算，下表取y=4，解释了常用的算数运算符运算规则：,2.赋值运算符,赋值运算符用于给变量赋值，下面的表格解释赋值运算符的赋值规则，设x=10，y=5：,3.关系运算符关系运算符主要用于比较功能，每一个关系运算符都返回一个布尔值。布尔值是一个特殊的值，它要么为真(true)，要么为(false)。如姚明是一个篮球运动员？这句话为真的，所以其布尔值为真(true)。又如姚明是女性？这句话是假的，所以其布尔值为假(false)。常用的关系运算符有小于()、小于等于(=)。下面是2个例子，注释中是得到的布尔值。,9.3.8javaScript的三种流程控制,编程语言中有三种流程控制结构，分别是顺序结构、条件结构和循环结构。1.条件结构条件结构就是按照条件执行相应的语句。首先我们来看一下条件语句，条件语句根据不同的条件，执行不同的代码。常用的条件语句有如下三种：,（1）if语句,当条件为t