网站设计讲义

1、.1 网站设计开发网站设计开发 主讲 王利民 07通信.2步骤：步骤：1、规划项目和采集信息 2、网站规划和设计网页 3、上传和维护网站阶段 n WEB站点的定位n网站的性质是指网站是教育等非赢利的网站还是赢利的商业网站等。n网站的分类：n教育网站n政府网站n商业网站n个人网站.4架构：nB/SBrowser/ServerC/SCustom/Server.5 动态网页开发技术目前，最常用的三种动态网页语言有ASP(Active Server Pages),JSP(JavaServer Pages),PHP (Hypertext Preprocessor)。 nASP全名Active Serve

2、r Pages，是一个WEB服务器端的开发环境，利用它可以产生和执行动态的、互动的、高性能的WEB服务应用程序。ASP采用脚本语言VBScript（Java script）作为自己的开发语言。 nPHP是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C,Java和Perl语言的语法, 并耦合PHP自己的特性,使WEB开发者能够快速地写出动态产生页面。它支持目前绝大多数数据库。还有一点，PHP是完全免费的，不用花钱，你可以从PHP官方站点(http: /)自由下载。而且你可以不受限制地获得源码，甚至可以从中加进你自己需要的特色。 nnJSP是Sun公司推出的新一代网站开发语言，Sun公司借助

3、自己在Java上的不凡造诣，将Java从Java应用程序和Java Applet之外，又有新的硕果，就是JSP，Java Server Page。JSP可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。 .9静态网页 静态网页是标准的HTML文件，其文件扩展名是.htm或.html，它可以包含HTML标记、文本、Java小程序及客户端脚本，但这种网页不包含任何服务器端脚本，在放置到Web服务器后便不再发生任何更改，所以称之为静态网页。. 静态网页的处理流程n当用户单击Web页上的某个链接时，浏览器向Web服务器发送一个页请求；nWeb服务器收到该请求，通过文件扩展名.

4、htm或.html判断出是HTML文件请求，并从磁盘或存储器中获取适当的HTML文件；nWeb服务器将HTML文件发送到浏览器，由浏览器对该HTML文件进行解释，并将结果显示在浏览器窗口中。.动态网页动态网页与静态网页之间的区别在于：n动态网页中的某些脚本只能在Web服务器上运行，而静态网页中的任何脚本都不能在Web服务器上运行；n动态网页与静态网页文件扩展名不同，对于动态网页来说，其文件扩展名不再是.htm或.html，而是与所使用的Web应用开发技术有关，例如，使用JSP技术时文件扩展名是.jsp等等。.12ASP+ Access 小型网站PHP+MySQL 中小型商业站点ASP.NET/

5、JSP+SQL Server、Oracle等.动态网页的处理流程n当Web服务器接收到对静态网页的请求时，服务器将该页发送到请求浏览器，而不进行进一步的处理。n当Web服务器接收到对动态网页的请求时，它将做出不同的反应：它将该页传递给一个称为应用程序服务器的特殊软件扩展，然后由这个特殊软件负责完成页。n使用不同的Web开发技术创建动态网页时，所用的应用程序服务器软件也是各不相同的。n确定网页的主题、内容，名称n组织规划内容：选择网页布局方式网站的栏目和版块、设计LOGO网站的目录结构 网站的导航与链接 n搜集图片素材n选择网页配色方案n选择网页制作工具n网站发布与宣传n网站的维护与更新 网页布

6、局网页布局“国”字型 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 .n拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。 . 网页特效展示nHTML语言和客户端脚本语句Javascript、V

7、BScript结合使用，实现网页的各种动态特效.20 基本的HTML知识.21HTML 简介提供链接到其他页面或同一页面的其他位置的文本可以用标签标记页面的不同部分以正确显示语言HTML 可用于：可用于：控制页面和内容的外观发布和检索联机文档创建联机表单插入诸如音频剪辑和视频剪辑等对象.22HTML 文档示例学习 HTML欢迎来到 HTML 世界HTML 代码浏览器处理代码并进行显示.23HTML 文档结构学习 HTML 欢迎来到 HTML 世界HTML 网页网页头部部分头部部分主体部分主体部分标签标记 HTML 文档的开始和结束这部分包括标题和其他说明信息。包括在 标签内这部分包含文本、图像

8、和链接。它包括在 标签内.24HTML 标签 2-2学习 HTML 欢迎来到 HTML 世界标签标识 BODY 元素属性属性提供有关元素的附加信息值分配给属性的内容.25META 标签 2-1nMETA 标签是一个特殊的 HTML 标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等n许多搜索引擎都使用 META 标签信息n例如，要将 Graham Browne 指定为作者，则使用以下 META 标签： .26META 标签 2-2nhttp-equiv 属性可用来代替 META 标签中的 name 属性 表示有效期：格林尼治标准时间 2011 年 9 月 14 日，星期三 14:25:

9、27 一旦网页过期，必须到服务器上重新传输。 属性值：具体的过期时间属性名称：网页过期 表示每隔2秒，自动刷新网页 .27HTML 基本元素n标题 n段落n换行符n预先格式化n字符格式化n列表n水平线n字体n图像n特殊字符n超级链接.28标题动物世界从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感H1 到到 H6 标签用于指定不同级别的标题标签用于指定不同级别的标题.29段落标签诗词学习我是第一段我是第二段左对齐显示居中显示右对齐显示 标签用于标记段落标签用于标记段落.30换行符文本中 (break)标签，就会强制换行 ，一般不用。诗词学习我是第

10、一行我是第二行 我是第一段我是第二段.31 标签诗词学习诗词学习静夜思静夜思 床前明月光床前明月光 疑是地上霜疑是地上霜 举头望明月举头望明月 低头思故乡低头思故乡 HTML 标签用于显示具有预先定义格式的文本（如 HTML 文档中所示）该元素中的文本保留空格、换行符，文本为等宽字体。该元素中的文本保留空格、换行符，文本为等宽字体。32字符格式化标签学习 HTML这很有趣这很有趣 -粗体足球是最令人喜爱的运动之一足球是最令人喜爱的运动之一。信息技术是发展的关键信息技术是发展的关键。 水的分子式是水的分子式是 H 2 O。 3 2 等于等于 9。 这类标签用于对文本应用各种格式，如粗体、斜体、下

11、划线、下标、上标等样式表来取得更加丰富的效果样式表来取得更加丰富的效果.33列表简介n列表用于按逻辑方式对数据分组 玫瑰花向日葵兰花苹果桔子水仙芒果水果 苹果 芒果 桔子花卉 水仙 兰花 向日葵 玫瑰花.34列表类型：无序列表 星期中的每一天星期日星期一星期二星期三星期四星期五星期六无序列表也称为“项目列表”.35星期中的每一天星期日星期一星期二星期三星期四星期五星期六 列表类型：有序列表 在有序列表中，列表项以自动生成的顺序显示 .36使用水平线动物世界老虎的夜间视觉 老虎的夜视能力优于人类的夜视能力五倍以上 标签属性 alignWidthSizeNoshade 标签用于在页面上绘制水平线

12、（Horizontal Rule） .37使用字体和属性动物世界了解有关动物的更多信息斑马的特性没有任何两匹斑马的斑纹是完全一样的，因此每匹斑马都是独一无二的 可以按名称或十六进制值指定颜色可以为字体指定的大小范围为从 1 到 7可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本 元素及其相关属性（如 SIZE、COLOR 和 FACE）可用于控制网页上文本的显示 .38插入图像 2-1 标签用于在 HTML 文档中插入图像。 标签的两个常用属性是 SRC 和 ALIGN。SRC 属性用于指定要插入的图像位置。ALIGN 属性用于指定图像相对于文本的对齐方式。.39插入图像

13、2-2动物世界让我们看看这些可爱的动物底部对齐顶部对齐居中对齐 .40插入特殊字符 2-1n某些字符在 HTML 中具有特殊意义，如小于号 ( 空格 ；.41插入特殊字符 2-2特殊字符特殊字符字符实体字符实体大于号 () > > 小于号 () << 引号 (“) " " ® ® © © & 号& & .42创建超级链接动物会弹琴的狗狗会弹琴的狗狗 单击此处查看单击此处查看.43绝对和相对路径

14、名要链接到另一目录 (C:example) 下的页面，可编写 或 要链接到同一目录 (C:html) 下的页面，可编写 或 C:html 目录目录C:example目录目录Doc1.htmDoc3.htmDoc2.htmDoc4.htm绝对路径名绝对路径名相对路径名相对路径名.44链接到同一文档的某个部分2-1n锚记标签用于使用户“跳”到文档的某个部分 nHTML 的 NAME 属性用于创建锚标记 n为达到这种跳转效果，请在 HREF 参数中使用该标记主题名称主题名称.45链接到同一文档的各个部分2-2. . .狮子斑马印度豹狮子狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的

15、重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。斑马没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马.演示:锚链接例子.46链接到其他文档的特定位置让我们深入了解一些动物狮子斑马印度豹Animals.htm狮子狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。Animaldetails.htm.47电子邮件链接n用户可从网页发送电子邮件海豚充分交流，密切配合据说，海豚的交流模式几乎与人类的一样复杂！请将您的疑问发送至 David Fernandez.表格行行列列列标题在在

16、 HTML 文档中，广泛使用表格来存放网页上的文本和图像文档中，广泛使用表格来存放网页上的文本和图像单元格单元格表格标题.使用表格 姓名 性别 分数 Robert M 80 .创建表格 代表表格的开始，border=2表示边框尺寸为2表示行，这是表格的第一行，有三列数据，代表列 表格的第二行，有三列数据表格的第三行，也有三列数据.学员档案信息 姓名 性别 分数 Robert M 80 .表格的标题表示表格标题表示行或列标题，粗体显示 表格的第二行，有三列数据表格的第三行，有三列数据. 学员档案信息 姓名 性别 分数 Robert M 80 .表格的对齐方式整个表格居中姓名列默认左对齐 性别列居

17、中 分数列右对齐 .合并单元格(跨列)创建表格 第一学期第二学期 数学 科学 英语 数学 科学 英语 98 95 80 95 87 88. COLSPAN=“n” 属性表示属性表示跨多少列跨多少列 .合并单元格(跨行)创建表格 螺母 螺栓 锤子 第一季度一月250010001240 二月300025004000 .ROWSPAN=“n” 属性表示属性表示跨多少行跨多少行 . 学员档案信息 姓名 性别 分数 Robert M 80 Mary F 18 表格的背景色和尺寸设置 表格的颜色设置：表格的背景色 行的背景色 列的背景色 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制

18、值表示，如红色#FF0000, 或是一些预定义色彩名称：red ，blue，yellow等。表格的尺寸设置：例如：表示一个长为200像素，宽为100像素的表格。表示一个宽为窗口的20%，高为窗口的10%的表格。1880分数FM性别MaryRobert姓名学员档案信息学员档案信息METHOD =“post或或get”表单ACTIONMETHOD指定提交后由服务器上哪个处理程序处理指定向服务器提交的方法:一般为post或get方法, post方法比较安全 ACTION = “URL” .表单输入元素-1 Type此属性指定元素的类型。元素类型可以有多种选择：TEXT、PASSWORD、CHECKB

19、OX、RADIO、SUBMIT、RESET、FILE、HIDDEN 和 BUTTON。默认选择为 TEXT。Name此属性指定控件的名称。例如，如果表单中有几个文本框，则可以用名称 TEXT1、TEXT2 或选择的任何名称来标识它们。Name 属性的作用域是在 FORM 元素内。Value此属性是可选属性，它指定控件的初始值。但是，如果 TYPE 为 RADIO，则必须指定一个值。Size此属性指定控件的初始宽度。如果 TYPE 为 TEXT 或 PASSWORD，则控件的大小以字符为单位。对于其他输入类型，宽度以像素为单位。 Maxlength 此属性用于指定可在 TEXT 或 PASSWO

20、RD 元素中输入的最大字符数。Checked此属性是 Boolean 属性，指定按钮是否是打开的。当输入类型为 RADIO 或 CHECKBOX 时，使用此属性。文本框、按钮、单选按钮、复选框等都是输入元素。表单输入元素-2 BUTTON（按钮）（按钮）Type 属性：属性：submit：提交按钮reset：重置按钮button：普通按钮表单输入元素-3身份证号 TEXT（文本）（文本）密 码： 请填写您的工作经历表单输入元素-4性别：男性女性 单选按钮和复选框单选按钮和复选框 你喜欢以下哪些明星： 酒井法子 郑秀文 BonJovi表单输入元素-6 下拉菜单 谁是 2008 年奥运会冠军？西班

21、牙中国巴西德国列表选项.设置属性 这个段落应用了样式这个段落按默认样式显示什么是样式？css指定显示样式样式规则.常用的样式属性属 性CSS名称说说 明明颜色 color文本属性font-size字体大小font-family字体text-align文本对齐边框属性(用于表单元素) border-style边框样式border-width边框宽度 border-color边框颜色 定位属性(position)top顶部边距（上边距）left左边距width宽度height高度z-indexz 轴索引号，用于层根据样式代码的位置，分为三类：q行内样式q内嵌样式q外部样式样式的分类 在最后一个声明后面加上一个分号在最后一个声明后面加上一个分号 (;) 是一个好习惯是一个好习惯.链接外部样式表使用LINK（链接）标签 ，语法：第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页关联样式文件：样式文件：newstyle.css P.Onel.htmanother.htm 第三步：浏览查看各网页.导入外部样式表使