DW教程-新华教育.ppt

《DW教程-新华教育.ppt》由会员分享，可在线阅读，更多相关《DW教程-新华教育.ppt（94页珍藏版）》请在三一办公上搜索。

1、HTML,河南新华电脑学院HTML教程,HTML,这是小编今天找的DW中的HTML语言教程，HTML语言是DW软件的基础语言，这里面肯能不全，不过大家一定要认真学习哦，能把这里面的学好，你就已经很不错了，后期小编会将更多的东西分享给大家,全部内容,基本概念HTML基本标识符CSS样式表Javascript,基本目标,学会基本的标记的功能及属性设置学会对样式表的设置学会基本的js方法及自定义函数自己设计并实现简单的个人网站(静态),基本英语单词,Client：客户机程序，顾客,客户,委托人 www：world wide web 万维网element：元素value：值，价值request：请求r

2、esponse：回答,响应 standard：标准document：文件attribute：属性,基本英语单词,form：表单frame：框架table：表格background：背景color：颜色title：标题 embed：嵌入head：头，头部body：身体Image:图片,基本英语单词,HTML：Hyper Text Markup Language超文本标记语言HTTP：Hyper Text Transfer Protocol超文本传输协议web page：网页web servers：网络服务器web clients：网络客户端web browser：浏览器HTML tags：HTM

3、L标记,基本概念,HTTP：超文本传输协议HTML：超文本标记语言网页：用于存储网页信息的文件网络服务器：用于存储网络文件的计算机客户端：用于浏览网页的一端的计算机浏览器：用于浏览网页的软件平台浏览器类型：IE、Netscape Navigator、MyIE等,用户如何从浏览器获得资源,基本概念,网络分类：按照范围分：广域网(WAN)、城域网(MAN)、局域网(LAN)按拓扑结构：总线型结构,星型结构,环形结构,网状结构网络的拓扑结构是指网络中通信线路(揽线)和计算机、以及其他组件的物理布局。,概述,当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML(HyperText M

4、arkup Language)语言所构成。HTML(超文件标记语言)是一种建立网页文件的语言，透过标记式的指令(Tag)，将影像、声音、图片、文字等连结显示出来。,概述,HTML标记是由 所括住的指令，主要分为:单标记指令、双标记指令(由，所构成)。它是一种介于前台和后台的语言。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成以.htm 或.html 为文件后缀保存将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器(Server)上，对外发布信息。,如何保存一个HTML文件,HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后以.htm或.html 为文件

5、后缀保存,编辑工具,FrontPageDreamweaver记事本,关于设计模式的解释,C/S模式B/S模式MVC模式,C/S模式,C/S（Client/Server）结构，即大家熟知的客户机和服务器结构。将任务合理分配到Client端和Server端来实现，降低了系统的通讯开销。目前大多数应用软件系统都是Client/Server形式的两层结构,B/S模式,B/S（Browser/Server）结构即浏览器和服务器结构。它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但

6、是主要事务逻辑在服务器端（Server）实现，形成所谓三层3-tier结构。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。,MVC模式,MVC是一种目前广泛流行的软件设计模式，早在70年代，IBM就推出了Sanfronscisico项目计划，其实就是MVC设计模式的研究。近来，随着J2EE的成熟，它正在成为在J2EE平台上推荐的一种设计模型，也是广大Java开发者非常感兴趣的设计模型。MVC英文即Model-View-Controller，即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一

7、个应用被分成三个层模型层、视图层、控制层。,HTML 语法示例1：,欢迎学习 HTML 我的第一个 HTML 文档,运行结果,基本结构标识,注意：在HTML中是不分大小写的。标记要书写规范，包括标记的缩进!,HTML基本标识符,HTML文件基本架构单标识特殊标识排版标识字体标识列表标识表格框架表单标识其他标识,HTML文件基本架构,文件开始 标头区开始.标题区 标头区结束 本文区开始 本文区内容 本文区结束 文件结束 网页文件格式。标头区:记录文件基本资料，如作者、编写时间。标题区:文件标题须使用在标头区内，可以在浏览器最上面看到标题。本文区:文件资料，即在浏览器上看到的网站内容,单标识,注意

8、：c语言中的两种注释,特殊标识,P12-13 空格,排版标识,-注意：和的区别不强行换行,字体标识,P21 打字体(固定宽度文字),列表标识,有序列表 无序列表 自定义列表 条目 内容,表格框架表单标识,表格 框架 表单,其他标识,链接标识 字幕标识 图片标识,标记,标记包含的元素有：标题描述非html标准的一些文档信息描述当前文档与其他文档间的链接关系脚本程序内容 样式表内容设置打开链接的方式,标记,Target属性值有：_blank_parent_self,标记,属性：attribute每个标记中用于修饰标记的一些描述信息。属性值：用来设置属性的值。如：,标记,Bgcolor背景色Back

9、ground背景图片Text文本颜色Link链接文字颜色Alink活动链接文字颜色Vlink已访问链接文字颜色Topmargin页面顶部留白距离Letfmargin页面左侧留白距离Bottommargin页面底部留白距离Rightmargin页面右部留白距离,补充内容,颜色的设定：三种方法#FFFFFF#六位十六进制数RGB(255,255,255)rgb码White英文单词名长度单位绝对长度：单位为像素相对长度：单位为百分比,标题标记,HTML 简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介 HTML 简介,可显示六种大小的标题，即到，为最大，为最小,标

10、题标记,我的网页Align的属性值有：left（默认）right center,段落标记,P的属性有align如：你们好，欢迎来到华育国际,标记,属性：color定义文字的颜色face定义文字的字体size定义文字的大小文字内容,标记,属性：align对齐方式color线条颜色size线条的粗度width线条的宽度如：,图片标记P17,在网页中插入图片属性：src指定图片的路径alt用于描述图片的文字width图片的宽度height图片的高度border图片的边框align图片的对齐方式,图片标记,Align的属性值top图片和文字顶部对齐middle图片和文字居中对齐bottom图片和文字底

11、部对齐left图片居左对齐文字沿图片绕排right图片居右对齐文字沿图片绕排absmiddle图片对齐到目前文字的绝对中央absbottom图片对齐到目前文字的绝对底部,插入图像,插入图像 插入图像底部对齐图2.15：示例15的输出结果顶部对齐居中对齐,IMG标记用于将图像插入到HTML文档中。可以将IMG标记放置在要显示图像的位置。语法为：其中SRC是属性，而值是指定图像文件位置的URL。IMG标记的ALIGN属性可以用于调整图像相对于周围文本的对齐方式。语法为：,超链接标记,通过链接可以调用另一个页面或是同页面某一区域的资源。属性：align对齐方式target目标窗口的显示形式title

12、链接提示href设置要连接的地址,target,Target的属性值_blank打开一个新窗口_self在当前窗口打开,链接到其他文档,使用链接 本页的所有内容都讲述关于如何创建到文档的链接 单击此处查看文档2,文档2 这是文档2。单击文档1中的超链接后将显示本页。返回,链接到同一文档的各个部分,使用链接 互联网 HTML简介 多样化和统一性 互联网 互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。HTML简介 超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言(SGML)

13、的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。多样性和统一性 万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。,单击,链接到另一文档中某个特定位置,主文档 互联网 HTML简介 多样性和统一性,单击,使用电子邮件,如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。我的电子邮

14、件,为图片加超链接,在图片上加上超级链接使它链接到另一个网页上。,列表,无序列表有序列表定义列表,使要表现的信息在页面上是一条一条整齐出现的。分类：,无序列表,学习 HTML星期一星期二星期三星期四星期五,无序列表是一种“项目符号列表”。其中的项目都带有项目符号前缀。该列表包含在无序列表标记.内。列表中的每个项目都使用列表标记进行标记，其中LI表示List Item（列表项）。关闭标记是可选的。,无序列表中的type的属性值,square方形项目符号disc（默认）实心圆项目符号circle空心圆项目符号,有序列表,学习 HTML星期一星期二星期三星期四星期五,有序列表包含在.标记内。有序列表

15、也显示列表项目。它与无序列表的区别在于有序列表项前面的编号是可设置的有序编号。,有序列表,属性type列表符号的类型start符号的起始,有序列表中的type的属性值,1数字A大写字母a小写字母I大写罗马字母i小写罗马字母,列表嵌套,学习HTML 星期一简介HTML创建列表星期二创建表插入图像星期三星期四星期五,定义列表,学习 HTML 星期日 一周的第一天 HTML 超文本标记语言 互联网 网络的网络,定义列表用于生成术语列表（术语和定义）。定义列表包含在.标记内。标记用于指定要定义的术语，而标记用于对术语的定义。,标记,实现字幕滚动效果属性behavior 滚动的方式bgcolor背景色d

16、irection滚动方向height窗体的高度loop循环次数scrollamount滚动速度scrolldelay滚动延迟时间width窗体宽度title文字描述,behavior,属性值设置alternate交替scroll滚动slide一次滑动,dirction,属性值设置leftrightupdown,例子1：不同方式的滚动文字,不同方式的滚动文字最新图书：超梦幻劲爆网页MX完美结合最新图书：超梦幻劲爆网页MX完美结合最新图书：超梦幻劲爆网页MX完美结合,例子2：不同方向的滚动文字,不同方向的滚动文字最新图书：超梦幻劲爆网页MX完美结合最新图书：超梦幻劲爆网页MX完美结合最新图书：超梦

17、幻劲爆网页MX完美结合最新图书：超梦幻劲爆网页MX完美结合,在HTML文档中插入多媒体,插入声音插入视频,添加声音,方法1：其中 pathsound filename 为声音文件的路径和文件名 Netscape Navigator 不支持 bgsound 元素,添加声音,方法2：,在HTML中插入声音示例,插入声音插入声音,添加音频/视频,要将音频或视频文件插入到 HTML 文档中，可以使用 标记,在HTML中插入视频示例,Inserting a Video fileInserting a Video,层简介,使用多个层，可以将一个层放到另一个层的上面或下面。Z 顺序决定元素的显示顺序。层就像

18、一个包含内容的框架，可以将它放置在所需的位置。,表格,表格,标记,Table中的属性WidthHeightCellspacingCellpaddingBorderBgcolorBackgroundbordercolor,标记,Table中的属性WidthHeightvalignBorderBgcolorBackgroundbordercolor,标记,Table中的属性WidthHeightColspanRowspanBorderBgcolorBackgroundbordercolor,作业：,表单简介,表单的用途用户注册某种服务时，收集其姓名、地址、电话号码、电子邮件地址和其他信息。收集购买

19、物品所需的信息。例如，如果想通过 Internet 购买一本书，就需要填写姓名、邮政地址和付款方式等。,一个样本表单,使用表单,例如，要使用POST方法将表单提交给“processform”程序，可编程如下：,.表单内容.,HTML 输入元素属性,Input Type 属性,TEXT CHECKBOXRADIOSUBMITRESETIMAGEBUTTON,示例：,表单示例证券调查示例投资经验新手中级专家投资类型股票期权互惠基金今年选择什么证券？,其他输入元素,TextArea 元素ColsRowsSizeTypeValueBUTTON 元素NameValueType,示例：,表单示例证券调查示

20、例有对其他投资者的建议吗？图4.3：示例2的输出结果发送重置,列表（下拉框）元素,SELECT 元素NameSizeMultiple,示例：,表单示例证券调查示例您用什么方式购买证券？1)网上交易2)电话交易3)经纪人代理图4.4：示例3的输出结果4)其他,示例：,求职申请表姓名：求职意向网站设计师网管网站开发人员工作经历无一年三年五年附注请在这里键入附注。发送确认,框架集,框架集（框架组）是框架的集合或是说是一个框架的组合。,框架,框架将 Web 浏览器分成多个不同的区域，每个区域都可以显示独立、可滚动的页面。例如，可以在网页中使用三个框架，一个显示标题，一个用作导航菜单，一个显示数据。必须

21、放在之中用于划分框窗，标识框架集中的每一个框窗。,标记的属性,Cols垂直切割窗口Rows横向切割窗口Frameborder设定框架的边框Border设定边框的厚度Bordercolor设定框架的边框颜色Framespacing框架与框架间保留空白的距离,FRAME 元素,FRAME 元素的属性包括：Name用来标记框架内显示的网页的名字Src用以标记要链接的网页的路径Noresize框架不可改变大小Scrolling是否要滚动条Frameborder,框架使用示例：,两个大小相等的框架图4.7：示例7的输出结果,嵌套的框架集,嵌套框架,NOFRAMES 元素,未显示框架。请单击这里 查看无框架版本,内嵌框架,IFRAME属性NameWidthHeight,示例：,很有趣吧。你已经对框架有所了解。浏览器不支持框架或者被配置为不显示框架。请在这里查看内容图4.13：示例14的输出结果（支援框架的浏览器）上面是一个内嵌框架。,