网页设计与开发.ppt

网页设计与开发 吕智强lv0595 网页和网站 网站是有独立域名 独立存放空间的内容集合 即对外发布 这些内容可能是网页 也可能是程序或其他文件 不一定要有很多网页 主要有独立域名和空间 那怕只有一个页面也叫网站 网页是网站的组成部分 有了很多网页没有独立的域名和空间也只能说是网页 例如一个程序 尽管有很多页面 功能也齐全 但没有独立域名和空间 没对外发布 但都不能叫网站 一 概述 网页表现形式 静态网页 通常是以 htm html shtml等为后缀的 它的特点是不会 变 静态网页没有数据库的支持 在网站制作和维护方面工作量较大 因此当网站信息量很大时完全依靠静态网页制作方式比较困难静态网页的交互性较差 功能简单 无法实现更多的功能 网页表现形式 动态网页 通常是以 php aspx jsp等为后缀的 它的特点是会 变 以数据库技术为基础 大大降低网站维护的工作量可以实现更多的功能 如用户注册 用户登录 在线调查 用户管理 订单管理等等动态网页实际上并不是独立存在于服务器上的网页文件 只有当用户请求时服务器才返回一个完整的网页 什么是万维网 万维网的核心部分由统一资源定位器 URL 超文本传输协议 HTTP 以及超文本标记语言 HTML 三个标准构成 1 统一资源定位器统一资源定位器 又叫URL UniformResourceLocator 是专为标识Internet网上资源位置而设的一种编址方式 通常所说的网页地址指的即是URL 2 超文本传输协议HTTP是超文本转移协议 是客户端浏览器或其他程序与Web服务器之间的应用层通信协议 在Internet上的Web服务器上存放的都是超文本信息 客户机需要通过HTTP协议传输所要访问的超文本信息 3 超文本标记语言HTML HyperTextMarkupLanguage 超文本标记语言是一种嵌入式语言 通过定义标记标签使浏览器解析页面并进行显示 工作原理 当进入万维网上一个网页 或者其他网络资源的时候 通常你要首先在浏览器上键入想访问网页的统一资源定位器 URL 或者通过超链接方式链接到那个网页或网络资源 这之后的工作首先是URL的服务器名部分 被名为域名系统的分布于全球的因特网数据库解析 并根据解析结果决定进入哪一个IP地址 接下来的步骤是为所要访问的网页 向在那个IP地址工作的服务器发送一个HTTP请求 在通常情况下 HTML文本 图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户 网络浏览器接下来的工作是把HTML CSS和其他接受到的文件所描述的内容 加上图像 链接和其他必须的资源 显示给用户 这些就构成了浏览器中所看到的 网页 开发工具的选择 HTML的编辑工具是比较多的 读者既可以选择最常用的基于文本的HTML编辑器 Windows自带的记事本 也可以选择一套功能强大 可取代记事本编辑器的EditPlus 还可以选择所见即所得的Dreamweaver等 网页制作的相关技术 1 HTMLHTML HyperTextMarkupLanguage 超文本标记语言是一种嵌入式语言 和一般文本的不同的是 一个HTML文件不仅包含文本内容 还包含一些Tag 中文称 标记 通过定义标记标签使浏览器解析页面并进行显示 一个HTML文件的后缀名是htm或者是html 2 CSSCSS意思就是叠层样式表 CascadingStyleSheets 使用CSS的优点在于将格式从功能中分离出来 它定义了HTML元素的显示 是一种对web文档添加样式的简单机制 在主页制作时采用CSS技术 可以有效地对页面的布局 字体 颜色 背景和其它效果实现更加精确的控制 只要对相应的代码做一些简单的修改 就可以改变同一页面的不同部分 或者页数不同的网页的外观和格式 网页制作的相关技术 3 JavaScriptJavaScript是由Netscape公司开发的一种脚本语言 scriptlanguage 称为描述性语言 具有面向对象的能力 可以非常自由地嵌入到HTML XHTML文件中 从而更便捷地开发出可交互的Web网页 JavaScript是目前最为流行的客户端脚本语言 大大地增强了网页的交互性 JavaScript语法构成与C C Java类似 都包括if语句 while循环 分支选择以及运算等结构 但也仅是在语法上的相似 网页元素单位 相对长度单位px 像素是相对于显示器屏幕分辨率而言em 相对于当前对象内文本的字体尺寸绝对长度单位cm 厘米mm 毫米in 英寸 HTML文档结构 HTML HyperTextMarkupLanguage 超文本标记语言是一种嵌入式语言 通过定义标记标签使浏览器解析页面并进行显示 一个HTML4 01的文档结构包括以下几部分 DOCTYPE声明定义文档类型 HTML头元素信息 HTML正文信息 body标签内信息 二 初识HTML 声明定义文档类型 在HTML4 01中提供了三种DTD文档 严格型HTML4 01DTD文档不包括那些不被推荐的元素和属性 并且不能在带有frameset的页面中出现 过渡型HTML4 01DTD文档包含所有严密型DTD文档中所允许的内容 还可以使用那些不被推荐的元素以及属性 框架型HTML4 01DTD文档包含过渡型以及框架 HTML头元素信息 HTML文档的head元素中包含了meta元素 meta元素用来指定有关这个文档的相关信息 例如 用http equiv content charset描述页面的内容 meta元素的属性有两种 http equiv和name 什么是标签大多数HTML文档的标签都是由开始标签和结束标签进行界定 开始标签和结束标签成对出现 结束标签是以斜线开头 例如 中为结束标签 每一个标签都是由尖括号 包围 有单向标签和双向标签单向标签 br hr img等 三 标签 标签的属性 标签可以拥有属性 属性可以为页面中的HTML元素提供附加信息 属性被放置在标签的后面 但在最终括号 的前面 即属性应该添加在HTML元素里的起始标签中 例如 标签的嵌套 HTML标签经常使用嵌套的方式 所谓的嵌套是指一个HTML标签包含另外一个标签的情况 例如 标题显示的内容 HTML基本标签 HTML基本标签包括 标题标签h1 段落标签p 换行标签br 水平分割标签hr 部分标签div 注释标签 字体标签font 部分标签最早在HTML3 2标准中定义 可以将文档分割成独立的 不同的部分 在标签中定义的文本内容 实际上与没有在标签中定义的没有什么区别 但要是引入了align属性 标签就变的十分有用了 用来设置段落或标题的对齐方式 和其他编程语言一样 HTML也提供了代码注释的方式 作为一个程序员应该养成对代码注释的习惯 这样可以保持清晰的思路 浏览器不显示注释的部分 文字格式化 常见的文字格式化标签如下表 字体设置 在HTML中 字体标签 font 通过其属性来设置文本字体 字体大小和字体颜色 字体标签的属性如下表 color color color color 无序列表 所谓无序列表就是列表中列表项的前导符号没有一定的次序 而是用黑点 圆圈 方框等一些特殊符号标识 无序列表并不是使列表项杂乱无章 而是使列表项的结构更清晰 更合理 当创建一个无序列表时 主要使用用HTML的标签和标签来标记 其中标签标识一个无序列表的开始 标签标识一个无序列表项 基本语法结构为 项目名称项目名称项目名称项目名称 四 列表 有序列表 有序列表与前面介绍的无序列表正好相反 所谓有序列表就是列表项的前导符号是有序的符号标识的列表 有序的符号标识包括 阿拉伯数字 小写英文字母 大写英文字母 小写罗马数字 大写罗马数字 基本语法结构为 项目名称项目名称项目名称标签的type属性用来定义一个有序列表的前导字符 如果省略了type属性 浏览器会默认显示为 1 前导字符 type取值为1 阿拉伯数字 a 小写英文字母 A 大写英文字母 i 小写罗马数字 I 大写罗马数字 图片的使用 HTML和XHTML的一个重要特性就是可以在文本中加入图片 既可以把图片作为文档的内在对象加入 又可以通过超级链接的方式加入 同时还可以将图片作为背景加入到文档中 在文档中合理地使用图片会使浏览器显示的网页更活泼 引人入胜 五 图片 在页面中插入图片 在HTML中 用标签在网页中添加图片 图片是以嵌入的方式添加到网页中的 网页开发者可以通过多种方式获取网页设计中用到的图片 可以将现有的图片扫描到计算机内 从Internet上的Web站点获取以及通过制图软件自己动手制作 如果是 引用 的图片 一定要得到图片版权拥有者的同意才可使用 在页面中插入图片的语法 替换文本说明 有时 由于网络过忙或者用户在图片还没有下载完全就点击了浏览器的停止键 用户不能在浏览器中看到图片 这时替换文本说明就十分有必要了 替换文本说明应该简洁而清晰 能为用户提供足够的图片说明信息 在无法看到图片的情况下也可以了解图片的内容信息 例如 调整图片大小 在HTML中 通过img标签的属性width和height来调整图片大小 其目的是通过指定图片的高度和宽度加快图片的下载速度 如果不设置width和height属性 浏览器就要等到图片下载完毕才显示网页 因此延缓了其它页面元素的显示 例如 设置背景图片 背景属性将背景设置为图片 属性值为图片的URL 如果图片尺寸小于浏览器窗口 那么图像将在整个浏览器窗口进行复制 例如 添加背景颜色 使用body标签的bgcolor属性可以给HTML页面指明背景颜色 其值可以是16进制数 RGB值或者是颜色的名称 例如 HTML使用标签来建立一个链接 通常标签又称为锚 一个超级链接可以指向任意一个Web上的资源 一个HTML页面 一张图片 一段声音文件 一部电影等 创建超级链接的基本语法格式 这是要链接的站点 文字 图片 在和标签之间的文本文字 用户可以单击该文字来实现网页的浏览访问 六 超级链接 同一页面内的书签链接 当网页的页面较长 且该页面是由几个部分组成时 不得不拖动浏览器的滑动条查看信息 这样既麻烦又费时 HTML恰好提供了跳转功能 能够非常方便 快捷地实现从网页当前的部分跳转到同一网页的另一部分 建立书签语法 链接内容创建书签链接语法 链接标题 不同页面间的书签链接 书签链接还可以在不同页面间进行链接 当单击书签链接标题 页面会根据链接中的href属性所以定的地址 将网页跳转到目标地址中书签名称所表示的内容 建立书签语法 链接内容创建书签链接语法 链接标题 超级链接路径 超级链接标签的属性 href 定义了当前链接所指的目标地址 也就是超级链接路径 在HTML中 主要提供了2种路径 绝对路径和相对路径 绝对路径 绝对路径就是主页上的文件或目录在硬盘上真正的路径 URL和物理路径 例如 C xyz index html代表了index html文件的物理绝对路径 代表了一个URL绝对路径 相对路径 相对路径就是相对与某个基准目录的路径 相对路径适合于创建网站内部链接 它是以当前文件所在的路径为起点 进行相对文件的查找 1 同一级目录的文件链接假设1 html路径是 c Inetpub sites admin 1 html假设2 html路径是 c Inetpub sites admin 2 html1 html文件和2 html文件在同一个文件夹 1 html文件链接到2 html文件 可以在1 html中写成 同级目录文件链接2 上级目录的文件链接假设1 html路径是 c Inetpub sites 1 html假设2 html路径是 c Inetpub sites admin 2 html1 html文件是2 html文件的上一级目录的文件 2 html文件链接到1 html文件 可以在2 html中写成 1 html 相对路径 假设1 html路径是 c Inetpub 1 html假设2 html路径是 c Inetpub sites admin 2 html1 html文件是2 html文件的上两级目录中的文件 2 html文件链接到1 html文件 可以在2 html中写成 1 html假设1 html路径是 c Inetpub sites admin 1 html假设2 html路径是 c Inetpub sites reg 2 html1 html文件和2 html分别在c Inetpub sites 目录下的admin和reg两个文件夹内 1 html文件链接到2 html文件 可以在1 html中写成 2 html 相对路径 3 下级目录的文件链接假设1 html路径是 c Inetpub sites 1 html假设2 html路径是 c Inetpub sites admin 2 html2 html文件是1 html文件的下一级目录的文件 1 html文件链接到2 html文件 可以在1 html中写成 2 html假设1 html路径是 c Inetpub sites 1 html假设2 html路径是 c Inetpub sites admin user 2 html2 html文件是1 html文件的下两级目录的文件 1 html文件链接到2 html文件 可以在1 html中写成 2 html 七 表格 主要内容 表格的构成设置表格背景设置表格表头设置表格大小设置表格数据对齐方式cellspancing与cellpadding属性横跨行和列添加表格高级标签使用表格进行网页布局 7 1表格简介 表格在网站开发中应用广泛 几乎多有的HTML页面或多或少地采用了表格 表格可以灵活地控制页面的排版 使整个页面层次清晰 学好网页制作 熟练掌握表格的各种属性是很有必要的 表格标记 基本标签 table定义一个表格 tr定义表格中的行 td定义表格中的数据基本语法 表格边框 可以使用table标签的border属性为表格添加边框并设置表格边框宽度 表格的边框按照数据单元将表格分割成单元格 边框的宽度以像素为单位 可以通过bordercolor属性为边框添加颜色 其颜色值可以是rgb x x x 16进制颜色值或代表颜色值的颜色名称 表格表头 表头是指表格的第一行或第一列对该列或该行的表格内容进行说明 表头的文字样式为居中 加粗显示 通过标签实现 基本语法 7 2表格背景 表格可以添加背景颜色和背景图片 使用表格背景颜色或背景图片必须使表格中的文本数据颜色与表格的背景颜色或背景图片形成足够的反差 否则 将不容易分辩表格中的文本数据 设置表格背景 可以使用bgcolor属性设置表格的背景颜色 其值可以是rgb x x x xxxxxx或颜色名 colorname 例如 或 设置表格单元背景 可以通过bgcolor属性和background属性为表格中的单元格添加背景颜色或背景图片 7 3表格大小 设置表格大小 如果需要表格在网页中占用适当的空间 可以通过width和height属性指定像素值来设置表格的宽度和高度 也可以通过表格宽度占浏览器窗口的百分比来设置表格的大小 方法如下 设置单元格大小 width属性和height属性不但可以设置表格的大小 还可以设置表格单元格的大小 为表格单元设置width属性或height 将影响整行或整列单元的大小 例如 汽车名称价格范围级别 7 4对齐方式 表格的对齐方式包括 行数据水平对齐单元格数据水平对齐行数据垂直对齐单元格数据垂直对齐align属性和valign属性混合使用 设置表格对齐方式 使用align属性设置表格在网页中的对齐方式 在默认的情况下表格的对齐方式为左对齐 设置方法为 这里align的值为left center right 将表格的对齐方式设置成右对齐 则表格的右边框自动地向浏览器右边框对齐 设置表格数据对齐方式 1 行数据水平对齐使用align可以设置表格中数据的水平对齐方式 如果在标签中使用align属性 将影响整行数据单元的水平对齐方式 align属性的值可以是left center right 它的默认值为left 2 单元格数据水平对齐如果在某个标签中使用align属性 那么align属性将影响一个表格单元数据水平对齐方式 3 行数据垂直对齐如果在标签中使用valign属性 那么valign属性将影响整行数据单元的垂直对齐方式 这里的valign值可以是top middle bottom baseline 它的默认值是middle 设置表格数据对齐方式 4 单元格数据垂直对齐如果在某个标签中使用valign属性 那么valign只影响当前表格单元数据垂直对齐方式 5 align属性和valign属性混合使用align属性和valign属性除了上述用法外 有时在格式化表格单元数据时需要align属性和valign属性混合使用 7 5表格单元格的边距 改变表格单元格间距离和单元格内的数据填充距离可以通过table标签的cellspancing与cellpadding属性实现 cellspancing属性用来添加表格单元格之间的间距 以像素为单位或表格宽度百分比 cellpadding属性用来添加表格单元格内数据填充间距 以像素为单位或表格宽度百分比 7 6横跨行和列 横跨列是指一个表格单元格横跨多列 横跨行是指一个表格单元格横跨多个行 表格横跨行和列属性 有时横跨行和列又称为合并单元格 表格横跨行和列属性 colspan 指明该单元格应有多少列的跨度 在th和td标签中使用 rowspan 指明该单元格应有多少行的跨度 在th和td标签中使用 7 7表格的高级标签 使用表格的高级标签可以为表格中相似的区域添加边界 在表格标题上添加行或文本格式信息 定义表格的脚标等 表格的高级标签如下 thead定义表格的标题区域 tbody定义表格的主题区域 tfoot定义表格的脚标区域 colgroup定义表格的列组 col为表格中的一个或多个列定义属性值 只能在表格或colgroup里使用这个元素 7 8使用表格进行网页布局 使用个非HTML时一常普遍的应用就是用HTML表格功能给网页进行布局 下图就是利用HTML表格对网页进行布局的效果 此布局定义了两个表格 上下各一个表格 将这两个表格的border值设置为0 如果将border值设置为1 则很容易看出此页面的表格布局 八 表单 主要内容 创建单行文本框创建口令文本框创建提交与复位按钮创建单选按钮与复选按钮创建多行文本框创建下拉框上传文件处理表单定义域集合使用Tab键与快捷键 8 1单行文本框 一个表单是一块可以含有表单元素的区域 可以使用标签在网页中创建表单 例如 8 2口令文本框 在进行网上注册的时候 用户使用的是提交用户名和口令的表单 口令文本框隐藏了当前要填写的内容 使信息更加保密 例如 8 3提交与复位按钮 使用提交按钮 submit 可以将填写在文本框中的内容发送到服务器 复位按钮 Reset 使表单文本框的内容返回初始值 例如 8 4单选按钮与复选框按钮 单选按钮允许用户从选择列表中选择一个单项的输入字段类型 当type radio 是表示该输入是一个单选按钮 复选按钮允许用户从选择列表中选择一个或多个选项的输入字段类型 当type checkbox 是表示该输入是一个复选按钮 8 5多行文本框 多行文本框是在表单中应用比较广泛的文本输入区域 多行文本框主要用于得到用户的评论和一些反馈信息 用户可以在里面书写文字 字数没有限制 默认的字体是固定的 可以通过标签创建多行文本 textarea标签的属性 Cols指定文本区域的列数 Row指定文本区域的行数 Disabled第一次加载的时候文字区域不可用 Readonly将文本区域的内容设置为不可修改 可选属性 Name 指定文本区域的名称 可选属性 8 6下拉框 如果一个列表选项过长 可以考虑使用下拉框 下拉框可以使用户选择其中的一个选项 在选择列表中仅有一个是可选项 单击右边下拉按钮便可进行选项的选择 下拉框通过select标签 option标签来定义 其属性如下表 8 7处理表单 通常情况下 用户通过submit按钮来提交表单 收集的信息发送到Web服务器上 这一过程通过HTML文档中action属性指定所收集的信息发送到哪里 如何处理信息 可以通过form标签的特殊属性实现 处理表单的通用语法模式 8 8定义域集合 在设计网页时 如果表单中包含多个控件 可以通过标签将相关主题的控件或标签组合在一起 定义域集合 这样使网页中的表单分布更合理 结构更清晰 从而增加了网页的易读性 同时也有利于tab键在元素之间的移动 在定义表单的域集合时 往往要用标签为fieldset设置标题 还可以使用align属性设置标题的对齐方式 用户信息姓名 年龄 性别 籍贯 8 9使用Tab键与快捷键 1 使用Tab键浏览者可以通过使用Tab键在表单的各个组件之间移动 默认情况下 Tab键的移动顺序为顺序移动 可以通过tabindex属性来实现 例如 姓名 年龄 性别 籍贯 2 快捷键可以通过accesskey属性给HTML中的元素指定一个快捷方式 指定方法如下 九 多媒体 主要内容 会滚动的文字音乐创建视频 9 1会滚动的文字 滚动文字可以增加文字的动态效果 引起浏览者的注意 丰富页面的内容 创建滚动文字标签 使文字在网页中动态地滚动好像只是flash的专利 其实则不然 可以通过HTML的同样能够达到文字在网页中移动的效果 但是只适用于InternetExplorer 并不是标准标签 这里并不推荐使用这个扩展标签 例如 这是会滚动的文字 设置滚动文字的属性 滚动文字的属性用来控制文字的移动方向 滚动方式 文字滚动速度以及移动文字的外观等多个属性 常见的属性有direction scrollamount align bgcolor等 1 设置文字滚动的方向可以通过direction属性来设置文字滚动的方向 该属性有left right属性值 left为默认属性值 在不设置direction属性时文字的滚动顺序为从右向左移动 2 设置滚动文字速度与属性用来控制滚动文字的速度 scrollamount属性用来设置滚动过程中文字每次移动的像素数 当scrollamount取值较小时 文字滚动的较慢 反之文字滚动较快 scrolldelay属性用来设置文字移动的延迟 以毫秒为单位 值越小 文字滚动的越快 文字滚动速度与计算机的处理能力有关 设置滚动文字的属性 3 设置滚动文字字幕区域使用height和width属性设置滚动文字字幕区域大小 在默认情况下 滚动文字字幕区域为整个IE浏览器屏幕 这两个属性值可以取绝对的像素数 也可以取相对的百分比 9 2背景音乐 为网页添加背景音乐的方法一般有三种 第一种是通过普通的标签来添加 一种是通过标签来添加 还有一种直接建立声音的链接 嵌入背景音乐 1 标签InternetExplorer自带了一个内置音频解码器 支持特殊的标签 该标签可以把声音文件集成到文档中 在后台作为背景音乐播放 基本语法 2 标签embed可以用来插入各种多媒体 格式可以是Midi Wav AIFF AU MP3等等 基本语法 3 建立声音的链接在设计网页的时候可以创建一个背景音乐的链接 单击网页上的链接后 就会播出背景音乐 当建立声音链接时 提倡使用万维网上的音频格式 建立声音的链接方法如下 点击播放音乐 春风 9 3创建视频 在网页中创建视频与创建音频的方法基本相同 可以通过创建一个视频的链接实现视频在网页中的加载 当浏览者选中视频连接时 浏览器将播放该视频 如果浏览器不能播放该视频格式 则会自动打开本地计算机上已安装支持该格式的视频播放器软件 如果本地计算机上没有安装所需的视频播放软件 则浏览器会提示浏览者是否要保存该视频文件到本地的计算机上 创建内部视频 1 使用标签创建视频所谓内部视频就是视频文件可以直接在网页中播放 可以通过标签创建内部视频 创建方法如下 2 使用标签创建视频一些网页设计者利用标签的dynsrc属性在网页内部添加视频文件 dynsrc属性用来指定视频文件所在位置 例如 11CSS语法基础 CSS意思就是叠层样式表 CascadingStyleSheets 使用CSS的优点在于将格式从功能中分离出来 它定义了HTML元素的显示 是一种对web文档添加样式的简单机制 主要内容 CSS定义CSS语法CSS类型伪类与为元素 11 1理解CSS 1 基本语法CSS规则由选择器 selector 属性 property 和值 value 三部分组成 基本格式如下 selector property value 2 组合为了提高效率 可以将相同属性和值赋给多个选择器 并用逗号将选择器分开 例如 h1 h2 h3 h4 h5 h6 color blue 11 1理解CSS 3 选择器类选择器类可以将同一类型的HTML元素定义出不同的样式 例如 p right text align right p center text align center 居右显示 居中显示 4 ID选择器可以使用id选择器来定义HTML标签的样式 id选择器可用 来定义 例如 p idone text align center color blue 或 idone text align center color blue 11 1理解CSS 5 关联选择器可以为嵌入的其它标签定义样式 格式为 h3em color blue 指定了嵌套在标签中的标签所包含