基本网络开发技术.ppt

基本网络开发技术 网站规划设计HTMLJavaScript语言 网站规划设计概述 网站规划设计是指在网站建设前对市场进行分析 确定网站的目的和功能 并根据需要对网站建设中的技术 内容 费用 测试 维护等做出规划 编写网站设计的计划书确定网站设计总体思想 即网站设计如何能实现网站规划中提出的目标 以及网站的风格和特点 网页的外观与使用方面的特点确定网站提供的内容网站交互设计 如信息反馈 意见调查等对网站的内容进行分类设计网页必有的内容 如公司标志 联系方法和导航条等制作网页的模板检查网页的链接根据需要修改不合适的地方正式发布网站 网站设计流程 网站规划设计 确定网站的类型 门户网站搜索引擎电子商务网站数据中心主题信息网站团体网站个人网站 网站规划设计 网页设计规划 1 确定网页的整体风格 2 设计网页框架 个人网页框架草图 网站规划设计 网页栏目规划 网页栏目规划是确定不同网页之间的逻辑关系 如先后关系 包含关系 并列关系等 多个网页按照它们之间的逻辑关系组织在一起形成一个逻辑结构 常见的逻辑结构 层次型结构 线性结构和网状型结构 网站规划设计 1 线性结构 最简单 网页按一定的先后顺序链接起来 用户没有完成上一个网页的访问就无法进入下一个网页 常用于需按步骤进行的栏目 如 用户注册 下订单 教程等 网站规划设计 2 层次结构 按照网页之间的包含关系组织而成 其形状像一个倒置的树 简单直观 内容结构清晰 便于理解 几乎所有的网站都采用这种结构来进行总体栏目规划 网站规划设计 3 网状结构 是指多个网页相互之间都超链接的一种结构 这些网页可以是层次结构上的任意网页 但因为导航的需要或内容上的相关而链接在一起 网站规划设计 栏目规划的任务 确定必需的栏目确定重点栏目建立层次型结构设计每一个栏目 网站规划设计 目录结构设计 不要将所有的文件都放在根目录下根据栏目规划来设计目录结构每个目录下都建立独立的images子目录目录的层次不要太深不要使用中文目录名可执行文件和不可执行文件分开放置数据库文件单独放置 网站规划设计 网站的建设技术 静态网页技术 HTML 动态网页技术 Javascript Java JSP ASP PHP CGI等 网页的基本元素 文本图片和动画声音和视频超链接表格表单导航栏其它常见元素 网站规划设计 网页设计工具 1 网页制作工具 文本编辑器FrontPageDreamweaverAdobePagemill 2 网页图形图像处理工具 FireworksPhotoshopCorelDraw 3 网页动画制作与特效工具 FlashUleadGifAnimator 网站规划设计 网页三剑客 Adobe公司的Dreamweaver Fireworks和Flash系列产品 素有网页 三剑客 之称 它们是专门用于网页制作和站点管理的软件 其中Dreamweaver被大家称为 织梦者 众多专业网站和个人主页都把它列为首选工具 Flash是 三剑客 中的 闪电 其以网上动画为特长 它做出的动画效果真是精美致极 Fireworks是 三剑客 中的 火焰 它以处理页面图片为特长 并可以轻松制作GIF动画 设计制作好的网站页面文件 需要在Intenet上发布 才可以让互联网上的用户访问 网站发布方法 1 个人服务器上发布 如果拥有一台独立固定的IP地址 可以将本机配置成Web服务器 即可发布网站 2 专用服务器上发布 可以向ISP或网络公司申请专用服务器或虚拟主机空间来发布网站 网站发布 网站空间和域名申请 网站空间获得的两种方式 租用虚拟主机 申请免费空间 选择空间注意事项 空间大小 支持环境 ASP PHP CGI等 及数据库情况 访问与链接速度 FTP上传功能 服务商信誉度等 通过搜索引擎查找 免费空间 或 免费建站资源 有些服务商申请域名赠送空间 有的收费也十分低廉 如10元 月 选择方式很多 网站发布 HTML概述 1 什么是HTML HTML HyperTextMarkuplanguage 超文本标签语言 一种用来专门制作超文本文档的简单标签语言 Html文件包括文档数据和显示格式两个部分 文档数据显示在WWW浏览器中的数据内容 显示格式规定了要显示的内容以何种方式呈现给用户 HTML通过利用各种标签文档的结构以及标识超级链接的信息 HTML文件是纯文本文件 扩展名 htm或html 可用任何文本编辑器来编辑 如记事本 可视化编辑软件Frontpage Dreamweaver等 还可由Web服务器实时动态生成 HTML概述 网页文件命名 htm或 html无空格无特殊符号 例如 符号 只可以有下划线 只可以为英文 数字区分大小写首页文件名默认为 index htm或index html 编辑器和浏览器 学习HTML欢迎来到HTML世界 HTML代码 在编辑器中编写HTML代码 浏览器显示HTML文档 页面 HTML文档结构 学习HTML欢迎来到HTML世界 HTML网页 头部部分 主体部分 标签标签HTML文档的开始和结束 文档标签 这部分包括标题和其他说明信息 包括在 标签内 这部分包含文本 图像和链接 它包括在 标签内 HTML基本标签 1 标签的语法 标签分为单标签和双标签两种类型 单标签 只需单独使用 语法 如表示换行 双标签 由首标签和尾标签构成 须成对使用 语法 文档内容标签 双标签的首标签 内可包含一些属性 语法 如 2 常用标签及其属性 文档标签 HTML基本标签 排版标签 排版标签 诗词学习我是第一段我是第二段左对齐显示居中显示右对齐显示 标签用于标签段落 排版标签 只要在文本中放入标签 就会强制换行 诗词学习我是第一行我是第二行我是第一段我是第二段 排版标签 动物世界老虎的夜间视觉老虎的夜视能力优于人类的夜视能力五倍以上 标签用于在页面上绘制水平线 排版标签 称为居中标签 作用 令文字 图片 表格等显示于中间 虽然很多标签已有align CENTER 的参数 但还是常用的标签之一 其简单易用 常用于文字上 排版标签 称为预设格式标签 作用 令文件按照原始码的排列方式显示 这标签允许保留原始码中输入的空白及Return 仔细看下列例子 除了运用一大堆表格标签之外 只有采用该标签才能有此效果 排版标签 称为区隔标签 作用 设定文字 图像 表格等的摆放位置 应用于StyleSheet 式样表 方面会更显威力 它最终目的是给设计者另一种组织能力 有Class Style title ID等属性 这里只介绍一个属性设定 以为例 align center 可选值 center left right 决定文字 图像 表格等居中 靠左或靠右 的作用和居中标签一样 字体标签 字体标签包括 字体加粗标签 字体斜体效果 字体加线 上标字 下标字 字体变粗变大加宽 设定字形 大小 颜色 字体标签 两者皆能产生字体加粗的效果 字体标签 这些标签于InternetExplorer都产生斜体效果 这些标签中只有较为特别 因它包括换行效果 所以不必在它前面加上标签 字体标签 可令每字母有相等宽度且每字母之间的距离稍为加宽 是加底线的标签 一些特别的浏览器并不支持 因顾虑到与链接混淆 加上删除线的标签 令字体加大 令字体变细 为下标字 则为上标字 仅剩的数学标签 字体标签 这些是标题标签 由至变粗变大加宽的程度逐渐减小 每个标题标签所标示的字句将独占一行且上下留一空白行 字体标签 这两个标签的参数设定是一样的 都是设定文字的大小 字形及颜色 但各有用处 且看以下比较 a 可以用于文件的开头部分 即与之间的位置 将影响全文字句 是一个空标签 用以改变字体显示的默认值 b 是应用于文件的内文部分 即与之间的位置 只影响所标示的字句 是一个双标签 两标签可同时存在 凡没被所标示的字句才直接受所影响 而本身亦受的影响 字体标签 字体标签 动物世界了解有关动物的更多信息斑马的特性没有任何两匹斑马的斑纹是完全一样的 因此每匹斑马都是独一无二的 可以按名称或十六进制值指定颜色 可以为字体指定的大小范围为从1到7 可以指定一列字体 各字体间用逗号分隔 浏览器以最先找到的字体显示文本 元素及其相关属性 如SIZE COLOR和FACE 可用于控制网页上文本的显示 清单 列表 标签 清单标签 称为顺序清单标签 则用以标示清单项目 所谓顺序清单就是在每一项前面加上1 2 3 等编号 又称编号清单 每个列表前必须加上标签 的参数设定 常用 例如 type i 设定编号样式 其值有五种 请参考表 默认type 1 start 4 设定开始编号 不论设定了哪一编号样式 其值只能是1 2 3 等整数 默认start 1 清单标签 称为无序清单标签 所谓无序清单就是在每一项前面加上等符号 故又称符号清单 的参数设定 常用 例如type square 设定符号样式 其值有三种 默认为type disc 当type disc 时的列项符号为实心圆点 当type circle 时的列项符号为空心小方块 当type square 时的列项符号为实心小方块 表格标签 表格标签 列 在HTML文档中 广泛使用表格来存放网页上的文本和图像 单元格 行 列标题 表格标签 综合应用 创建表格 使用表格姓名性别分数RobertM80 代表表格的开始 border 2表示边框尺寸为2 表示行 这是表格的第一行 有三列数据 代表列 表格的第二行 有三列数据 表格的第三行 也有三列数据 表格标签 综合应用 表格标题 学员档案信息姓名性别分数RobertM80 表示表格标题 表示行或列标题 粗体显示 表格的第二行 有三列数据 表格的第三行 有三列数据 表格标签 综合应用 表格对齐方式 学员档案信息姓名性别分数RobertM80 整个表格居中 姓名列默认左对齐 性别列居中 分数列右对齐 创建表格第一学期第二学期数学科学英语数学科学英语989580958788 COLSPAN n 属性表示跨多少列 表格综合应用 合并单元格 跨列 创建表格螺母螺栓锤子第一季度一月250010001240二月300025004000 ROWSPAN n 属性表示跨多少行 表格综合应用 合并单元格 跨行 表格综合应用 背景和尺寸设置 学员档案信息姓名性别分数RobertM80MaryF18 表格的颜色设置 表格的背景色行的背景色列的背景色颜色值可以采用RGB red green blue 红绿蓝十六进制值表示 如红色 FF0000 或是一些预定义色彩名称 red blue yellow等 表单标签 表单的概念 表单在Web网页中用来给访问者填写信息 从而能获得用户信息 使网页具有交互能力 表单标签 称为表单标签 用以创建表单 是双标签 表示其它表单标签需要在它的包围中才有效 标签提供了用户输入数据的常用控件 通过参数Type来指定控件的类型 Type可选值为Text Radio Checkbox Password Submit Reset Image File Hidden Button 表单标签 输入方式1 Text 单行文本框 表单标签 输入方式2 Radio 单选按钮 输入方式3 Checkbox 复选框 表单标签 输入方式4 Password 密码框 输入方式5 Submit 提交按钮 Reset 清除按钮 表单标签 输入方式6 Image 提交图片 输入方式7 File 文件上传 表单标签 输入方式8 Button 按钮控件 用来创建一个下拉列表框 每一选项皆由所标示 表单标签 表单标签 是表单文字区块标签 常用于创建一个多行文本框 表单标签 表单标签 综合例子 2004年欧锦赛预测 最佳球员 RonaldoBeckhamZidane预测大赛亚军巴西法国阿根廷预测谁将成为2004年欧锦赛冠军 阅读代码 请问网页中的显示结果 称图形标签 主要用以插入图片于网页中 图形和链接标签 图形和链接标签 创建超级链接 聪明的狗狗会弹琴的狗狗单击此处查看 称链接标签 由与所围的文字 图片等等可以成为一个链接 要链接到另一目录 C example 下的页面 可编写或 要链接到同