基本网络开发技术 (2).ppt

《基本网络开发技术 (2).ppt》由会员分享，可在线阅读，更多相关《基本网络开发技术 (2).ppt（65页珍藏版）》请在三一办公上搜索。

1、基本网络开发技术,网站规划设计HTMLJavaScript语言,网站规划设计概述,网站规划设计是指在网站建设前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。,编写网站设计的计划书确定网站设计总体思想，即网站设计如何能实现网站规划中提出的目标，以及网站的风格和特点，网页的外观与使用方面的特点确定网站提供的内容网站交互设计，如信息反馈、意见调查等对网站的内容进行分类设计网页必有的内容，如公司标志、联系方法和导航条等制作网页的模板检查网页的链接根据需要修改不合适的地方正式发布网站,网站设计流程,网站规划设计,确定网站的类型,门户网站 搜索引擎

2、电子商务网站 数据中心 主题信息网站 团体网站 个人网站,网站规划设计,网页设计规划,(1)确定网页的整体风格,(2)设计网页框架,个人网页框架草图,网站规划设计,网页栏目规划,网页栏目规划是确定不同网页之间的逻辑关系，如先后关系、包含关系、并列关系等，多个网页按照它们之间的逻辑关系组织在一起形成一个逻辑结构。常见的逻辑结构：层次型结构、线性结构和网状型结构。,网站规划设计,（1）线性结构：最简单，网页按一定的先后顺序链接起来，用户没有完成上一个网页的访问就无法进入下一个网页。常用于需按步骤进行的栏目，如：用户注册、下订单、教程等。,网站规划设计,（2）层次结构：按照网页之间的包含关系组织而成

3、，其形状像一个倒置的树。简单直观，内容结构清晰，便于理解。几乎所有的网站都采用这种结构来进行总体栏目规划。,网站规划设计,（3）网状结构：是指多个网页相互之间都超链接的一种结构，这些网页可以是层次结构上的任意网页，但因为导航的需要或内容上的相关而链接在一起。,网站规划设计,栏目规划的任务,确定必需的栏目确定重点栏目建立层次型结构设计每一个栏目,网站规划设计,目录结构设计,不要将所有的文件都放在根目录下根据栏目规划来设计目录结构每个目录下都建立独立的images子目录目录的层次不要太深不要使用中文目录名可执行文件和不可执行文件分开放置数据库文件单独放置,网站规划设计,网站的建设技术,静态网页技术

4、（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 系列产品，素有网页“三

5、剑客”之称。它们是专门用于网页制作和站点管理的软件。其中Dreamweaver 被大家称为“织梦者”，众多专业网站和个人主页都把它列为首选工具。Flash 是“三剑客”中的“闪电”，其以网上动画为特长，它做出的动画效果真是精美致极。Fireworks 是“三剑客”中的“火焰”，它以处理页面图片为特长，并可以轻松制作GIF 动画。,设计制作好的网站页面文件，需要在Intenet上发布，才可以让互联网上的用户访问。网站发布方法：（1）个人服务器上发布：如果拥有一台独立固定的IP地址，可以将本机配置成Web服务器，即可发布网站；（2）专用服务器上发布：可以向ISP或网络公司申请专用服务器或虚拟主机空

6、间来发布网站。,网站发布,网站空间和域名申请,网站空间获得的两种方式：租用虚拟主机、申请免费空间；选择空间注意事项：空间大小、支持环境(ASP/PHP/CGI等)及数据库情况、访问与链接速度、FTP上传功能、服务商信誉度等；通过搜索引擎查找“免费空间”或“免费建站资源”；有些服务商申请域名赠送空间，有的收费也十分低廉（如10元/月），选择方式很多。,网站发布,HTML概述,1）什么是HTML？,HTML(Hyper Text Markup language,超文本标签语言)：一种用来专门制作超文本文档的简单标签语言。Html文件包括文档数据和显示格式两个部分，文档数据显示在WWW浏览器中的数据

7、内容，显示格式规定了要显示的内容以何种方式呈现给用户。HTML通过利用各种标签文档的结构以及标识超级链接的信息。HTML文件是纯文本文件，扩展名.htm或html，可用任何文本编辑器来编辑(如记事本、可视化编辑软件Frontpage、Dreamweaver等），还可由Web服务器实时动态生成。,HTML概述,网页文件命名：,*.htm或*.html无空格无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字区分大小写首页文件名默认为：index.htm 或 index.html,编辑器和浏览器,学习 HTML欢迎来到 HTML 世界,HTML 代码,在编辑器中编写 HTML 代码,

8、浏览器显示 HTML 文档/页面,HTML文档结构,学习 HTML 欢迎来到 HTML 世界,HTML 网页,头部部分,主体部分,标签标签 HTML 文档的开始和结束文档标签,这部分包括标题和其他说明信息。包括在 标签内,这部分包含文本、图像和链接。它包括在 标签内,HTML基本标签,1）标签的语法,标签分为单标签和双标签两种类型。-单标签：只需单独使用，语法：如 表示换行-双标签：由首标签和尾标签构成，须成对使用，语法：文档内容标签（双标签的首标签）内可包含一些属性，语法：如：,2）常用标签及其属性,文档标签,HTML基本标签,排版标签,排版标签,诗词学习我是第一段我是第二段左对齐显示居中显

9、示右对齐显示,标签用于标签段落,排版标签,只要在文本中放入 标签，就会强制换行,诗词学习我是第一行我是第二行 我是第一段我是第二段,排版标签,动物世界老虎的夜间视觉 老虎的夜视能力优于人类的夜视能力五倍以上,标签用于在页面上绘制水平线,排版标签,：称为居中标签。作用：令文字、图片、表格等显示于中间。虽然很多标签已有 align=“CENTER”的参数，但还是常用的标签之一，其简单易用，常用于文字上。,排版标签,：称为预设格式标签。作用：令文件按照原始码的排列方式显示。这标签允许保留原始码中输入的空白及Return。仔细看下列例子，除了运用一大堆表格标签之外，只有采用该标签才能有此效果。,排版标

10、签,：称为区隔标签。作用：设定文字、图像、表格等的摆放位置。应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class;Style;title;ID等属性，这里只介绍 一个属性设定。以 为例：align=“center”，可选值：center;left;right。决定文字、图像、表格等居中、靠左或靠右。的作用和居中标签 一样。,字体标签,字体标签包括：字体加粗标签：字体斜体效果：字体加线：上标字、下标字：字体变粗变大加宽：设定字形、大小、颜色,字体标签,：两者皆能产生字体加粗的效果。,字体标签,：这些标签于Internet Explorer都产

11、生斜体效果。这些标签中只有较为特别，因它包括换行效果，所以不必在它前面加上 标签。,字体标签,：可令每字母有相等宽度且每字母之间的距离稍为加宽。是加底线的标签，一些特别的浏览器并不支持，因顾虑到与链接混淆。加上删除线的标签；令字体加大；令字体变细。为下标字，则为上标字，仅剩的数学标签。,字体标签,：这些是标题标签，由 至 变粗变大加宽的程度逐渐减小。每个标题标签所标示的字句将独占一行且上下留一空白行。,字体标签,：这两个标签的参数设定是一样的，都是设定文字的大小、字形及颜色，但各有用处，且看以下比较：a.可以用于文件的开头部分，即 与 之间的位置，将影响全文字句，是一个空标签，用以改变字体显示

12、的默认值。b.是应用于文件的内文部分，即 与 之间的位置，只影响所标示的字句，是一个双标签。两标签可同时存在，凡没被 所标示的字句才直接受 所影响，而 本身亦受 的影响。,字体标签,字体标签,动物世界了解有关动物的更多信息斑马的特性没有任何两匹斑马的斑纹是完全一样的，因此每匹斑马都是独一无二的,可以按名称或十六进制值指定颜色,可以为字体指定的大小范围为从 1 到 7,可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本,元素及其相关属性（如 SIZE、COLOR 和 FACE）可用于控制网页上文本的显示,清单（列表）标签,清单标签,:称为顺序清单标签。则用以标示清单项目。所谓顺

13、序清单就是在每一项前面加上 1,2,3.等编号，又称编号清单。每个列表前必须加上标签。的参数设定（常用）：例如：type=“i”:设定编号样式，其值有五种，请参考表，默认type=1 start=“4”:设定开始编号，不论设定了哪一编号样式，其值只能是 1,2,3.等整 数，默认 start=1。,清单标签,:称为无序清单标签。所谓无序清单就是在每一项前面加上 等符号，故又称符号清单。的参数设定（常用）：例如 type=“square”设定符号样式，其值有三种，默认为 type=“disc”：当 type=“disc”时的列项符号为实心圆点；当 type=“circle”时的列项符号为空心小方

14、块；当 type=“square”时的列项符号为实心小方块。,表格标签,表格标签,列,在 HTML 文档中，广泛使用表格来存放网页上的文本和图像,单元格,行,列标题,表格标签综合应用：创建表格,使用表格 姓名 性别 分数 Robert M 80.,代表表格的开始，border=2表示边框尺寸为2,表示行，这是表格的第一行，有三列数据，代表列,表格的第二行，有三列数据,表格的第三行，也有三列数据,表格标签综合应用：表格标题,学员档案信息 姓名 性别 分数 Robert M 80.,表示表格标题,表示行或列标题，粗体显示,表格的第二行，有三列数据,表格的第三行，有三列数据,表格标签综合应用：表格对

15、齐方式,学员档案信息 姓名 性别 分数 Robert M 80.,整个表格居中,姓名列默认左对齐,性别列居中,分数列右对齐,创建表格 第一学期第二学期 数学 科学 英语 数学 科学 英语 98 95 80 95 87 88.,COLSPAN=“n”属性表示跨多少列,表格综合应用：合并单元格（跨列）,创建表格 螺母 螺栓 锤子 第一季度一月250010001240 二月300025004000.,ROWSPAN=“n”属性表示跨多少行,表格综合应用：合并单元格（跨行）,表格综合应用：背景和尺寸设置,学员档案信息 姓名 性别 分数 Robert M 80 Mary F 18,表格的颜色设置：表格的

16、背景色 行的背景色 列的背景色 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000,或是一些预定义色彩名称：red，blue，yellow等。,表单标签,表单的概念-表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互能力。,表单标签,：称为表单标签，用以创建表单，是双标签，表示其它表单标签需要在它的包围中才有效。标签提供了用户输入数据的常用控件，通过参数Type来指定控件的类型。Type可选值为Text,Radio,Checkbox,Password,Submit/Reset,Image,File,Hidden,Button

17、,表单标签,输入方式1：Text(单行文本框),表单标签,输入方式2：Radio(单选按钮),输入方式3：Checkbox(复选框),表单标签,输入方式4：Password(密码框),输入方式5：Submit(提交按钮)/Reset(清除按钮),表单标签,输入方式6：Image(提交图片),输入方式7：File(文件上传),表单标签,输入方式8：Button(按钮控件),：用来创建一个下拉列表框，每一选项皆由 所标示。,表单标签,：,表单标签,：是表单文字区块标签，常用于 创建一个多行文本框。,表单标签,表单标签综合例子,2004 年欧锦赛预测“最佳球员”RonaldoBeckhamZidan

18、e预测大赛亚军巴西法国阿根廷预测谁将成为 2004 年欧锦赛冠军？,阅读代码，请问网页中的显示结果？,：称图形标签，主要用以插入图片于网页中。,图形和链接标签,图形和链接标签,创建超级链接,聪明的狗狗会弹琴的狗狗 单击此处查看,：称链接标签，由 与 所围的文字、图片等等可以成为一个链接。,要链接到另一目录(C:example)下的页面，可编写 或,要链接到同一目录(C:html)下的页面，可编写 或,C:html 目录,C:example目录,绝对和相对路径名,绝对路径名,相对路径名,电子邮件的链接,用户可从网页发送电子邮件,海豚充分交流，密切配合据说，海豚的交流模式几乎与人类的一样复杂！请将您的疑问发送至 David Fernandez,：在上网时，经常会发现网页的文字会滚动，可以借助：标签来实现网页中的文字滚动。,滚动文字标签,例：,滚动文字标签,滚动字我会动啊，我是一天到晚游泳的鱼,注意:1、在.标签之间插入图像也可以使图像滚动起来。2、标签只能在IE浏览器中使用。,HTML教程参考网站：http:/,