网站设计讲义ppt课件.ppt

1 网站设计开发 主讲王利民07通信 2 步骤 1 规划项目和采集信息2 网站规划和设计网页3 上传和维护网站阶段 WEB站点的定位网站的性质是指网站是教育等非赢利的网站还是赢利的商业网站等 网站的分类 教育网站政府网站商业网站个人网站 4 架构 B SBrowser ServerC SCustom Server 5 动态网页开发技术 目前 最常用的三种动态网页语言有ASP ActiveServerPages JSP JavaServerPages PHP HypertextPreprocessor ASP全名ActiveServerPages 是一个WEB服务器端的开发环境 利用它可以产生和执行动态的 互动的 高性能的WEB服务应用程序 ASP采用脚本语言VBScript Javascript 作为自己的开发语言 PHP是一种跨平台的服务器端的嵌入式脚本语言 它大量地借用C Java和Perl语言的语法 并耦合PHP自己的特性 使WEB开发者能够快速地写出动态产生页面 它支持目前绝大多数数据库 还有一点 PHP是完全免费的 不用花钱 你可以从PHP官方站点 自由下载 而且你可以不受限制地获得源码 甚至可以从中加进你自己需要的特色 JSP是Sun公司推出的新一代网站开发语言 Sun公司借助自己在Java上的不凡造诣 将Java从Java应用程序和JavaApplet之外 又有新的硕果 就是JSP JavaServerPage JSP可以在Serverlet和JavaBean的支持下 完成功能强大的站点程序 9 静态网页 静态网页是标准的HTML文件 其文件扩展名是 htm或 html 它可以包含HTML标记 文本 Java小程序及客户端脚本 但这种网页不包含任何服务器端脚本 在放置到Web服务器后便不再发生任何更改 所以称之为静态网页 静态网页的处理流程 当用户单击Web页上的某个链接时 浏览器向Web服务器发送一个页请求 Web服务器收到该请求 通过文件扩展名 htm或 html判断出是HTML文件请求 并从磁盘或存储器中获取适当的HTML文件 Web服务器将HTML文件发送到浏览器 由浏览器对该HTML文件进行解释 并将结果显示在浏览器窗口中 动态网页 动态网页与静态网页之间的区别在于 动态网页中的某些脚本只能在Web服务器上运行 而静态网页中的任何脚本都不能在Web服务器上运行 动态网页与静态网页文件扩展名不同 对于动态网页来说 其文件扩展名不再是 htm或 html 而是与所使用的Web应用开发技术有关 例如 使用JSP技术时文件扩展名是 jsp等等 12 ASP Access小型网站PHP MySQL中小型商业站点ASP NET JSP SQLServer Oracle等 动态网页的处理流程 当Web服务器接收到对静态网页的请求时 服务器将该页发送到请求浏览器 而不进行进一步的处理 当Web服务器接收到对动态网页的请求时 它将做出不同的反应 它将该页传递给一个称为应用程序服务器的特殊软件扩展 然后由这个特殊软件负责完成页 使用不同的Web开发技术创建动态网页时 所用的应用程序服务器软件也是各不相同的 确定网页的主题 内容 名称组织规划内容 选择网页布局方式网站的栏目和版块 设计LOGO网站的目录结构网站的导航与链接搜集图片素材选择网页配色方案选择网页制作工具网站发布与宣传网站的维护与更新 网页布局 国 字型也可以称为 同 字型 是一些大型网站所喜欢的类型 即最上面是网站的标题以及横幅广告条 接下来就是网站的主要内容 左右分列一些两小条内容 中间是主要部分 与左右一起罗列到底 最下面是网站的一些基本信息 联系方式 版权声明等 这种结构是我们在网上见到的差不多最多的一种结构类型 拐角型 这种结构与上一种其实只是形式上的区别 其实是很相近的 上面是标题及广告横幅 接下来的左侧是一窄列链接等 右列是很宽的正文 下面也是一些网站的辅助信息 在这种类型中 一种很常见的类型是最上面是标题及广告 左侧是导航链接 网页特效展示 HTML语言和客户端脚本语句Javascript VBScript结合使用 实现网页的各种动态特效 20 基本的HTML知识 21 HTML简介 提供链接到其他页面或同一页面的其他位置的文本 可以用标签标记页面的不同部分以正确显示 语言 HTML可用于 控制页面和内容的外观发布和检索联机文档创建联机表单插入诸如音频剪辑和视频剪辑等对象 22 HTML文档示例 学习HTML欢迎来到HTML世界 HTML代码 浏览器处理代码并进行显示 23 HTML文档结构 学习HTML欢迎来到HTML世界 HTML网页 头部部分 主体部分 标签标记HTML文档的开始和结束 这部分包括标题和其他说明信息 包括在 标签内 这部分包含文本 图像和链接 它包括在 标签内 24 HTML标签2 2 学习HTML欢迎来到HTML世界 标签 标识BODY元素 属性 提供有关元素的附加信息 值 分配给属性的内容 25 META标签2 1 META标签是一个特殊的HTML标签 提供有关网页的信息 如作者姓名 公司名称和联系信息等许多搜索引擎都使用META标签信息例如 要将GrahamBrowne指定为作者 则使用以下META标签 26 META标签2 2 http equiv属性可用来代替META标签中的name属性 表示有效期 格林尼治标准时间2011年9月14日 星期三14 25 27一旦网页过期 必须到服务器上重新传输 表示每隔2秒 自动刷新网页 27 HTML基本元素 标题段落换行符预先格式化字符格式化列表水平线字体图像特殊字符超级链接 28 标题 动物世界从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感 H1到H6标签用于指定不同级别的标题 29 段落标签 诗词学习我是第一段我是第二段左对齐显示居中显示右对齐显示 标签用于标记段落 30 换行符 文本中 break 标签 就会强制换行 一般不用 诗词学习我是第一行我是第二行我是第一段我是第二段 31 标签 诗词学习静夜思床前明月光疑是地上霜举头望明月低头思故乡 HTML 标签用于显示具有预先定义格式的文本 如HTML文档中所示 该元素中的文本保留空格 换行符 文本为等宽字体 32 字符格式化标签 学习HTML这很有趣 粗体足球是最令人喜爱的运动之一 信息技术是发展的关键 水的分子式是H2O 32等于9 这类标签用于对文本应用各种格式 如粗体 斜体 下划线 下标 上标等 样式表来取得更加丰富的效果 33 列表简介 列表用于按逻辑方式对数据分组 玫瑰花 向日葵 兰花 苹果 桔子 水仙 芒果 水果苹果芒果桔子花卉水仙兰花向日葵玫瑰花 34 列表类型 无序列表 星期中的每一天星期日星期一星期二星期三星期四星期五星期六 无序列表也称为 项目列表 35 星期中的每一天星期日星期一星期二星期三星期四星期五星期六 列表类型 有序列表 在有序列表中 列表项以自动生成的顺序显示 36 使用水平线 动物世界老虎的夜间视觉老虎的夜视能力优于人类的夜视能力五倍以上 标签用于在页面上绘制水平线 HorizontalRule 37 使用字体和属性 动物世界了解有关动物的更多信息斑马的特性没有任何两匹斑马的斑纹是完全一样的 因此每匹斑马都是独一无二的 可以按名称或十六进制值指定颜色 可以为字体指定的大小范围为从1到7 可以指定一列字体 各字体间用逗号分隔 浏览器以最先找到的字体显示文本 元素及其相关属性 如SIZE COLOR和FACE 可用于控制网页上文本的显示 38 插入图像2 1 标签用于在HTML文档中插入图像 标签的两个常用属性是SRC和ALIGN SRC属性用于指定要插入的图像位置 ALIGN属性用于指定图像相对于文本的对齐方式 39 插入图像2 2 动物世界让我们看看这些可爱的动物底部对齐顶部对齐居中对齐 40 插入特殊字符2 1 某些字符在HTML中具有特殊意义 如小于号 定义HTML标签的开始字符实体用于在HTML文档中插入特殊字符 如版权号 注册商标等通常情况下 HTML会自动截去多余的空格 不管你加多少空格 都被看做一个空格 比如你在两个字之间加了10个空格 HTML会截去9个空格 只保留一个 为了在网页中增加空格 你可以使用表示空格 插入特殊字符需要用HTML字符实体 空格 41 插入特殊字符2 2 42 创建超级链接 动物会弹琴的狗狗单击此处查看 43 绝对和相对路径名 要链接到另一目录 C example 下的页面 可编写或 要链接到同一目录 C html 下的页面 可编写或 C html目录 C example目录 绝对路径名 相对路径名 44 链接到同一文档的某个部分2 1 锚记标签用于使用户 跳 到文档的某个部分HTML的NAME属性用于创建锚标记为达到这种跳转效果 请在HREF参数中使用该标记 主题名称 主题名称 45 链接到同一文档的各个部分2 2 狮子斑马印度豹狮子狮子的吼声从八公里之外就能听到 雄狮 很容易从鬃毛识别出雌雄 的重量达250公斤 而雌狮则要轻得多 只有180公斤 斑马没有任何两匹斑马的斑纹完全一样 因此每匹斑马都是独一无二的 斑马也称为黑白条纹相间的马 演示 锚链接例子 46 链接到其他文档的特定位置 让我们深入了解一些动物狮子斑马印度豹 Animals htm 狮子狮子的吼声从八公里之外就能听到 雄狮 很容易从鬃毛识别出雌雄 的重量达250公斤 而雌狮则要轻得多 只有180公斤 Animaldetails htm 47 电子邮件链接 用户可从网页发送电子邮件 海豚充分交流 密切配合据说 海豚的交流模式几乎与人类的一样复杂 请将您的疑问发送至DavidFernandez 表格 行 列 列标题 在HTML文档中 广泛使用表格来存放网页上的文本和图像 单元格 使用表格姓名性别分数RobertM80 创建表格 代表表格的开始 border 2表示边框尺寸为2 表示行 这是表格的第一行 有三列数据 代表列 表格的第二行 有三列数据 表格的第三行 也有三列数据 学员档案信息姓名性别分数RobertM80 表格的标题 表示表格标题 表示行或列标题 粗体显示 表格的第二行 有三列数据 表格的第三行 有三列数据 学员档案信息姓名性别分数RobertM80 表格的对齐方式 整个表格居中 姓名列默认左对齐 性别列居中 分数列右对齐 合并单元格 跨列 创建表格第一学期第二学期数学科学英语数学科学英语989580958788 COLSPAN n 属性表示跨多少列 合并单元格 跨行 创建表格螺母螺栓锤子第一季度一月250010001240二月300025004000 ROWSPAN n 属性表示跨多少行 学员档案信息姓名性别分数RobertM80MaryF18 表格的背景色和尺寸设置 表格的颜色设置 表格的背景色行的背景色列的背景色颜色值可以采用RGB red green blue 红绿蓝十六进制值表示 如红色 FF0000 或是一些预定义色彩名称 red blue yellow等 表格的尺寸设置 例如 表示一个长为200像素 宽为100像素的表格 表示一个宽为窗口的20 高为窗口的10 的表格 METHOD post或get 表单 ACTION METHOD 指定提交后由服务器上哪个处理程序处理 指定向服务器提交的方法 一般为post或get方法 post方法比较安全 ACTION URL 表单输入元素 1 文本框 按钮 单选按钮 复选框等都是输入元素 表单输入元素 2 BUTTON 按钮 表单输入元素 3 身份证号 TEXT 文本 密码 请填写您的工作经历 表单输入元素 4 性别 男性女性 单选按钮和复选框 你喜欢以下哪些明星 酒井法子郑秀文BonJovi 表单输入元素 6 下拉菜单 谁是2008年奥运会冠军 西班牙中国巴西德国 列表选项 设置属性这个段落应用了样式这个段落按默认样式显示 什么是样式 css 指定显示样式 常用的样式属性 根据样式代码的位置 分为三类 行内样式内嵌样式外部样式 样式的分类 在最后一个声明后面加上一个分号 是一个好习惯 链接外部样式表 使用LINK 链接 标签 语法 第一步 创建样式表文件newstyle css 第二步 把样式文件和网页关联 样式文件 newstyle cssP Onel htm another htm 第三步 浏览查看各网页 导入外部样式表 使用 import导入 语法 import样式表文件 css 操作步骤同链接样式表 外部样式文件 样式的混合使用 行内样式表 内嵌样式表 外部样式表各有优势 实际的开发中常常需要混合使用 有关整个网站统一风格的样式代码 放置在独立的样式文件 css某些样式不同的页面 除了链接外部样式文件 还需定义内嵌样式某张网页内 部分内容 与众不同 采用行内样式 对于某个HTML标签 1 如果有多种样式 如果规定的样式没有冲突 则叠加 2 如果有冲突 则最先考虑行内样式表显示 如果没有 再考虑内嵌样式显示 如果还没有 最后采用外面样式表显示 否则就按HTML的默认样式显示 内嵌样式 行内样式 某个HTML标签 层标签 关键代码 Z index 1 我是第一层 我是容器 包含图片段落Z index 2 我是第二层 包含图片和段落 使用Z index指定是哪一层