《基本网络开发技术》PPT课件.ppt

基本网络开发技术,网站规划设计 HTML JavaScript语言,网站规划设计概述,网站规划设计是指在网站建设前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。,编写网站设计的计划书 确定网站设计总体思想，即网站设计如何能实现网站规划中提出的目标，以及网站的风格和特点，网页的外观与使用方面的特点 确定网站提供的内容 网站交互设计，如信息反馈、意见调查等 对网站的内容进行分类 设计网页必有的内容，如公司标志、联系方法和导航条等 制作网页的模板 检查网页的链接 根据需要修改不合适的地方 正式发布网站,网站设计流程,网站规划设计,确定网站的类型,门户网站 搜索引擎 电子商务网站 数据中心 主题信息网站 团体网站 个人网站,网站规划设计,网页设计规划,(1)确定网页的整体风格,(2)设计网页框架,个人网页框架草图,网站规划设计,网页栏目规划,网页栏目规划是确定不同网页之间的逻辑关系，如先后关系、包含关系、并列关系等，多个网页按照它们之间的逻辑关系组织在一起形成一个逻辑结构。 常见的逻辑结构：层次型结构、线性结构和网状型结构。,网站规划设计,（1）线性结构： 最简单，网页按一定的先后顺序链接起来，用户没有完成上一个网页的访问就无法进入下一个网页。常用于需按步骤进行的栏目，如：用户注册、下订单、教程等。,网站规划设计,（2）层次结构： 按照网页之间的包含关系组织而成，其形状像一个倒置的树。简单直观，内容结构清晰，便于理解。几乎所有的网站都采用这种结构来进行总体栏目规划。,网站规划设计,（3）网状结构： 是指多个网页相互之间都超链接的一种结构，这些网页可以是层次结构上的任意网页，但因为导航的需要或内容上的相关而链接在一起。,网站规划设计,栏目规划的任务,确定必需的栏目 确定重点栏目 建立层次型结构 设计每一个栏目,网站规划设计,目录结构设计,不要将所有的文件都放在根目录下 根据栏目规划来设计目录结构 每个目录下都建立独立的images子目录 目录的层次不要太深 不要使用中文目录名 可执行文件和不可执行文件分开放置 数据库文件单独放置,网站规划设计,网站的建设技术,静态网页技术（HTML） 动态网页技术（Javascript、Java、JSP、ASP、PHP、CGI等）,网页的基本元素,文本 图片和动画 声音和视频 超链接 表格 表单 导航栏 其它常见元素,网站规划设计,网页设计工具,1.网页制作工具,文本编辑器 FrontPage Dreamweaver Adobe Pagemill,2.网页图形图像处理工具,Fireworks Photoshop CorelDraw,3.网页动画制作与特效工具,Flash Ulead Gif Animator,网站规划设计,网页三剑客,Adobe 公司的Dreamweaver、Fireworks 和Flash 系列产品，素有网页“三剑客”之称。它们是专门用于网页制作和站点管理的软件。其中Dreamweaver 被大家称为“织梦者”，众多专业网站和个人主页都把它列为首选工具。Flash 是“三剑客”中的“闪电”，其以网上动画为特长，它做出的动画效果真是精美致极。Fireworks 是“三剑客”中的“火焰”，它以处理页面图片为特长，并可以轻松制作GIF 动画。,设计制作好的网站页面文件，需要在Intenet上发布，才可以让互联网上的用户访问。 网站发布方法： （1）个人服务器上发布：如果拥有一台独立固定的IP地址，可以将本机配置成Web服务器，即可发布网站； （2）专用服务器上发布：可以向ISP或网络公司申请专用服务器或虚拟主机空间来发布网站。,网站发布,网站空间和域名申请,网站空间获得的两种方式：租用虚拟主机、申请免费空间； 选择空间注意事项：空间大小、支持环境(ASP/PHP/CGI等)及数据库情况、访问与链接速度、FTP上传功能、服务商信誉度等； 通过搜索引擎查找“免费空间”或“免费建站资源”； 有些服务商申请域名赠送空间，有的收费也十分低廉（如10元/月），选择方式很多。,网站发布,HTML概述,1）什么是HTML？,HTML (Hyper Text Markup language, 超文本标签语言)：一种用来专门制作超文本文档的简单标签语言。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。仔细看下列例子，除了运用一大堆表格标签之外，只有采用该标签才能有此效果。, 排版标签,： 称为区隔标签。作用：设定文字、图像、表格等的摆放位置。 应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class; Style; title; ID等属性，这里只介绍 一个属性设定。 以 为例： align=“center”，可选值：center ; left ; right 。决定文字、图像、表格等居中、靠左或靠右。 的作用和居中标签 一样。, 字体标签,字体标签包括： ：字体加粗标签 ：字体斜体效果 ： 字体加线 ：上标字、下标字 ：字体变粗变大加宽 ：设定字形、大小、颜色, 字体标签, ： 两者皆能产生字体加粗的效果。, 字体标签, ： 这些标签于Internet Explorer都产生斜体效果。这些标签中只有较为特别，因它包括换行效果，所以不必在它前面加上 标签。, 字体标签, ： 可令每字母有相等宽度且每字母之间的距离稍为加宽。 是加底线的标签，一些特别的浏览器并不支持，因顾虑到与链接混淆。 加上删除线的标签； 令字体加大； 令字体变细。 为下标字， 则为上标字，仅剩的数学标签。, 字体标签, ： 这些是标题标签，由 至 变粗变大加宽的程度逐渐减小。每个标题标签所标示的字句将独占一行且上下留一空白行。, 字体标签, ： 这两个标签的参数设定是一样的，都是设定文字的大小、字形及颜色，但各有用处，且看以下比较： 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 文档中，广泛使用表格来存放网页上的文本和图像,单元格,行,列标题,表格标签综合应用：创建表格, 使用表格 姓名 性别 分数 Robert M 80 . ,代表表格的开始，border=2表示边框尺寸为2,表示行，这是表格的第一行，有三列数据，代表列,表格的第二行，有三列数据,表格的第三行，也有三列数据,表格标签综合应用：表格标题, 学员档案信息 姓名 性别 分数 Robert M 80 . ,表示表格标题,表示行或列标题，粗体显示,表格的第二行，有三列数据,表格的第三行，有三列数据,表格标签综合应用：表格对齐方式, 学员档案信息 姓名 性别 分数 Robert M 80 . ,整个表格居中,姓名列默认左对齐,性别列居中,分数列右对齐, 创建表格 第一学期 第二学期 数学 科学 英语 数学 科学 英语 98 95 80 95 87 88 ,COLSPAN=“n” 属性表示跨多少列,表格综合应用：合并单元格（跨列）, 创建表格 螺母 螺栓 锤子 第一季度 一月 2500 1000 1240 二月 3000 2500 4000 .,ROWSPAN=“n” 属性表示跨多少行,表格综合应用：合并单元格（跨行）,表格综合应用：背景和尺寸设置, 学员档案信息 姓名 性别 分数 Robert M 80 Mary F 18 ,表格的颜色设置： 表格的背景色 行的背景色 列的背景色 颜色值可以采用 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 年欧锦赛 预测“最佳球员” Ronaldo Beckham Zidane 预测大赛亚军 巴西 法国 阿根廷 预测谁将成为 2004 年欧锦赛冠军？ ,阅读代码，请问网页中的显示结果？, ： 称图形标签，主要用以插入图片于网页中。, 图形和链接标签, 图形和链接标签,创建超级链接, 聪明的狗狗 会弹琴的狗狗 单击此处查看 , ： 称链接标签，由 与 所围的文字、图片等等可以成为一个链接。,要链接到另一目录 (C:example) 下的页面，可编写 或 ,要链接到同一目录 (C:html) 下的页面，可编写 或 ,C:html 目录,C:example目录,