山东胜利学院企业实训课程

《山东胜利学院企业实训课程》由会员分享，可在线阅读，更多相关《山东胜利学院企业实训课程（90页珍藏版）》请在金锄头文库上搜索。

1、山东胜利学院企业实训课程客户端页面技术应用课程目标 理解静态网页工作原理 掌握 HTML 表单元素 JAVASCRIPT 语言 了解DW( Dreamweaver )工具的使用课时安排第1天上午 知识点1： WEB概述与超链接 知识点2：页面排版布局与表格 项目任务：实现一个简单的餐厅连接设计 第1天下午 知识点1：表单与表单元素 项目任务：实现一个注册界面的设计 第2天上午 知识点1：JavaScript动态脚本语言 项目实战：实现微博系统的登录和注册的表单验证 第2天下午考核测试：实现一个注册的表单验证（机试）第一章 WEB概述与超链接 本章目标 了解Internet和万维网(www)?

2、了解 Html语言历史 和 W3C组织 学习Html的全局架构标签 什么是标签及其属性? 如何创建超级链接?Internet和万维网(www) 什么是Internet? Internet的历史 定义 - 连接网络的网络 TCP/IP(传输控制协议/Internet协议)，一种能保证计算机之间进 行通信的标准规范Internet和万维网(www) 万维网(world wide web) 是一个基于超文本（Hypertext ）方式的信息检索服务工具。 万维网提供这样一种友好的信息查询接口：用户仅需提出查询要 求，而到什么地方查询及如何查询则由万维网自动完成。 -超文本开发语言HTML -信息资源

3、的统一定位格式URL -超文本传送通信协议HTTP Internet和万维网(www) 超文本传输协议HTTP 定义：网络传输协议 作用：发布和接收Html页面 统一资源定位符URL 定义：网页地址 格式：协议:/域名:端口号/文件路径/文件名.文件后缀http:/www.QQ:80/tq/index.htmlHTTP协议示例GET / HTTP/1.1 Host: UserAgent: Mozilla/5.0 (Windows; U; Windows NT 6.0; enUS; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10 Accept: tex

4、t/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 AcceptLanguage: enus,en;q=0.5 AcceptEncoding: gzip,deflate AcceptCharset: ISO88591,utf8;q=0.7,*;q=0.7 KeepAlive: 300 Connection: keepalive IfModifiedSince: Mon, 25 May 2009 03:19:18 GMTHTTP/1.1 200 OK CacheControl: private, maxage=30 Conte

5、ntType: text/html; charset=utf8 ContentEncoding: gzip Expires: Mon, 25 May 2009 03:20:33 GMT LastModified: Mon, 25 May 2009 03:20:03 GMT Vary: AcceptEncoding Server: MicrosoftIIS/7.0 XAspNetVersion: 2.0.50727 XPoweredBy: ASP.NET Date: Mon, 25 May 2009 03:20:02 GMT ContentLength: 12173 消息体的内容（略）HTML超

6、文本标记语言 Html（超文本标记语言） 定义：为网页创建和其它可在网页浏览器中看到的信息设计 的一种标记语言 以“”标识标签的开始，以“”标识标 签的结束 成对标签又称为容器，一对标签中还可以嵌套其它标签 单独标签不需要与之配对的结束标签，又称之为空标签，例 如 属性设置的格式为：属性名=“属性值”Hi大家好!浏览器访问网页文件的方式http协议网页文件本地存储系统（硬盘）www服务器网页文件Html 规范与版本 不同浏览器之间的不兼容问题 从软件开发角度：多个公司开发了浏览器软件，根据网页中的标 签决定显示内容,有点浏览器根据自己的需要，定义了特有的显示 效果标签，导致不兼容 规范的制定

7、IETF 制定 Html 2.0 W3C 组织 3W联盟 http:/www.w3c.org 正在使用的Html的版本 Html 4.01 XHTML HTML 5 最新版网页 与 网站 什么是网页? 定义：构成网站的基本元素 格式：分为静态网页和动态网页 静态网页文件扩展名为.html或.htm 动态网页文件扩展名为.jsp或.aspx .asp .php等 什么是网站? 实例：新浪，网易 定义：展示特定内容的相关网页的集合 如何上网? 网络的工作原理客户端向服务器发送页面请求Web 服务器处理请求并返回 请求的页面HTTP 负责请求和响应如何上网?Web 服务器客户端HTTP协议协议 用于

8、访问 Web 上资源的一组 规则 HTTP 是 Web 协议 站点地址或 URLHTML语言用于制作网页静态网页动态网页(1)动态网页(2)编辑工具 Dw( DreamWeaver) EditPlus 记事本(Notepad)Html的全局架构标签 网页的基本结构 网页以开始结束 两个主要的结构：head首部，body主体Html的全局架构标签 网页的头部 结构： 内容：, , CSS, Javascript 网页的主体 结构： 内容：包含网页中显示的文本、图像和链接等欢迎来到中软国际ETC.欢迎来到ETC什么是标记？什么是属性?什么是标记? 定义：Html命令称为标 记(标签) 作用：用于控

9、制Html文 档的内容和外观 分类：单独标签 :， 成对标签 :标记的属性 作用：修饰或进一步制 定信息。 如颜色，对齐方式，高 度，宽度等标签属性属性值学习 HTML 欢迎来到 HTML 世界DOCTYPE标签 文档类型,会使浏览器使用相应的方式加载网页并显示。 示例：Head - Meta元素 META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME) HTTPEQUIV 似于HTTP的头部协议，它回应给浏览器一 些有用的信息，以帮助正确和精确地显示网页内容 ,响应 报头信息，如页面编码、缓存模式等等. NAME 定义页面基本信息，这些信息是提供给网络搜索引

10、 擎的，搜索引擎通过这些信息可以找到页面标签及其属性示例xxxxxxxxxxxxx标签及其属性 标签 属性 bgcolor 设置网页文档的背景颜色 十六进制RGB颜色码，使用一个#号后跟六位十六进制数据，例如 #FF0000 Html的颜色常量名，例如red 属性 background 设置网页文档的背景图片 属性 text 设置网页中文字的颜色 属性 leftmargin 设置网页中的内容到左边距之间的距离 属性 topmargin 设置网页中的内容到上边距之间的距离标签及其属性 标签 属性 align 设置标题文字的水平对齐方式 取值范围(left,right,center, justif

11、y) 标签 属性 size 设置水平线的粗细 属性 width 设置宽度路径 相对路径 由当前文件所在的路径引起的跟其它文件(或文件夹)的路径关系（ ”./” 代表上一级文件夹） 范例: web/article/01.htm 绝对路径 目标文件的完整路径 范例: http:/ 物理路径 物理路径指的是某一台计算机本地的路径 范例:C:/Web/index.html标签及其属性标签 属性 align 设置段落文字的水平对齐方式 取值范围(left,right,center)标签 标签 作用:显示图片 属性 src 指明图片位置(相对路径，绝对路径) 属性 align 设置图片周围内容对齐方式 取

12、值范围( top,middle,bottom ) 属性 alt 图片无法显示时的替代信息 属性title 提示信息超级链接 标签 作用:超级链接 1)实现页面之间的跳转 2)页内跳转 3）mailto 属性 href=“” 属性 target 锚记 作用:页内跳转 利用锚记可以实现页面内跳转 结合超级链接，可以跳到另外页面指定的位置 Html语言注释 好的html编码习惯 文件扩展名为 .html 标签必须正确地嵌套 要符合XHTML标准 标签元素必须要关闭 比如、 标签名、属性名要用小写字母 文档必须要有根元素 标签的属性必须有属性值,属性值需要加上引号 合理必要的注释 不要使用W3C不推荐

13、使用的标签总 结 了解internet , 万维网 熟悉网页的基本组成结构 标记及其属性的构成 段落标记，图片标记，超级链接标记 相对路径，绝对路径，物理路径任务项目：为新开的餐厅设计网站 要求： 1.共有三个页面，分别为 A 文件名index.html 站点首页，用来显示餐厅介绍信息，如餐厅主营品种，餐 厅规模，餐厅地理位置，餐厅营业时间，餐厅服务项目等。其中，餐厅主营品种 ，餐厅地理位置，营业时间为必须选项 B 文件名 west.html 介绍西餐的页面（至少4种） 分别介绍菜名，图片，价格 C 文件名 Chinese.html 介绍中国菜的页面( 至少4种 ) 分别介绍菜名，图片， 价格

14、 2.三个页面之间要建立超级链接 A 分别建立超级链接到另外两个页面 B 对于west.html和 Chinese.html要求有目录分别链接到本页面内的具体菜肴 C west.html和Chinese.html之间能够有互相访问的超级链接作业（二）Web 开发基础第二章 表格与页面布局 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记，图片标记，超级链接标记 相对路径，绝对路径，物理路径本章目标 网页设计注意事项 什么是表格？ 为什么需要表格？ 如何创建表格？ 表格如何使用？网页设计注意事项 多浏览器支持 样式与风格统一 网站结构、文件命名 页面尺寸

15、与屏幕分辨率 图片文件命名、大小尺寸限制 相对路径的应用 页面内容（title、meta、alt、tbody等属性的应用）什么是表格？ 表格是html高级构件之一，它表示数据之间的关系，使对 比分析更容易理解。表格由特定数目的行和列组成球员得分 篮板 姚明27 8 麦克格雷迪 31 2 海耶斯 8 15 巴蒂尔 7 5 阿尔斯通 2 3 表格应用示例什么是表格？ 表格的作用： 用于显示数据，便于理解、分析 组织网页版面信息什么是表格？行列列标题在 HTML 文档中，广泛使用表格来存放网页上的文本和图像单元格表格标题如何创建表格? 表格用表示 一个表格可以有很多行，用表示 每行可以分为多个单元格，用表示 演示： 一行一列 一行三列 两行三列标签及其属性border 属性 表格边框 演示：不显示边框的表格 演示：显示边框的表格 align 表格对齐