Web开发基础-实训课程.ppt
《Web开发基础-实训课程.ppt》由会员分享,可在线阅读,更多相关《Web开发基础-实训课程.ppt(90页珍藏版)》请在三一办公上搜索。
1、山东胜利学院企业实训课程,客户端页面技术应用,课程目标,理解静态网页工作原理 掌握 HTML 表单元素 JAVASCRIPT 语言 了解DW(Dreamweaver)工具的使用,课时安排,第1天上午知识点1:WEB概述与超链接知识点2:页面排版布局与表格项目任务:实现一个简单的餐厅连接设计第1天下午知识点1:表单与表单元素项目任务:实现一个注册界面的设计第2天上午知识点1:JavaScript动态脚本语言项目实战:实现微博系统的登录和注册的表单验证第2天下午考核测试:实现一个注册的表单验证(机试),第一章 WEB概述与超链接,本章目标,了解Internet和万维网(www)?了解 Html语言
2、历史 和 W3C组织学习Html的全局架构标签什么是标签及其属性?如何创建超级链接?,Internet和万维网(www),什么是Internet?Internet的历史定义-连接网络的网络TCP/IP(传输控制协议/Internet协议),一种能保证计算机之间进行通信的标准规范,Internet和万维网(www),万维网(world wide web)是一个基于超文本(Hypertext)方式的信息检索服务工具。万维网提供这样一种友好的信息查询接口:用户仅需提出查询要求,而到什么地方查询及如何查询则由万维网自动完成。超文本开发语言HTML 信息资源的统一定位格式URL 超文本传送通信协议HTT
3、P,Internet和万维网(www),超文本传输协议HTTP定义:网络传输协议作用:发布和接收Html页面统一资源定位符URL定义:网页地址 格式:协议:/域名:端口号/文件路径/文件名.文件后缀 http:/www.QQ:80/tq/index.html,HTTP协议示例,GET/HTTP/1.1Host:User-Agent:Mozilla/5.0(Windows;U;Windows NT 6.0;en-US;rv:1.9.0.10)Gecko/2009042316 Firefox/3.0.10Accept:text/html,application/xhtml+xml,applicat
4、ion/xml;q=0.9,*/*;q=0.8Accept-Language:en-us,en;q=0.5Accept-Encoding:gzip,deflateAccept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive:300Connection:keep-aliveIf-Modified-Since:Mon,25 May 2009 03:19:18 GMT,HTTP/1.1 200 OKCache-Control:private,max-age=30Content-Type:text/html;charset=utf-8Content-E
5、ncoding:gzipExpires:Mon,25 May 2009 03:20:33 GMTLast-Modified:Mon,25 May 2009 03:20:03 GMTVary:Accept-EncodingServer:Microsoft-IIS/7.0X-AspNet-Version:2.0.50727X-Powered-By:ASP.NETDate:Mon,25 May 2009 03:20:02 GMTContent-Length:12173消息体的内容(略),HTML超文本标记语言,Html(超文本标记语言)定义:为网页创建和其它可在网页浏览器中看到的信息设计的一种标记语
6、言以“”标识标签的开始,以“”标识标签的结束成对标签又称为容器,一对标签中还可以嵌套其它标签单独标签不需要与之配对的结束标签,又称之为空标签,例如属性设置的格式为:属性名=“属性值”,Hi大家好!,浏览器访问网页文件的方式,http协议网页文件,本地存储系统(硬盘),www服务器,网页文件,Html 规范与版本,不同浏览器之间的不兼容问题从软件开发角度:多个公司开发了浏览器软件,根据网页中的标签决定显示内容,有点浏览器根据自己的需要,定义了特有的显示效果标签,导致不兼容规范的制定IETF 制定 Html 2.0W3C 组织 3W联盟 http:/www.w3c.org正在使用的Html的版本H
7、tml 4.01XHTMLHTML 5 最新版,网页 与 网站,什么是网页?定义:构成网站的基本元素 格式:分为静态网页和动态网页静态网页文件扩展名为.html或.htm动态网页文件扩展名为.jsp或.aspx.asp.php等什么是网站?实例:新浪,网易定义:展示特定内容的相关网页的集合,如何上网?,网络的工作原理,客户端,向服务器发送页面请求,Web 服务器处理请求并返回请求的页面,HTTP 负责请求和响应,如何上网?,Web 服务器,客户端,HTTP协议,协议用于访问 Web 上资源的一组规则HTTP 是 Web 协议,站点地址或 URL,HTML语言用于制作网页,静态网页,动态网页(1
8、),动态网页(2),编辑工具,Dw(DreamWeaver)EditPlus记事本(Notepad),Html的全局架构标签,网页的基本结构网页以开始结束两个主要的结构:head首部,body主体,Html的全局架构标签,网页的头部结构:内容:,CSS,Javascript网页的主体结构:内容:包含网页中显示的文本、图像和链接等,欢迎来到中软国际ETC.,欢迎来到ETC,什么是标记?什么是属性?,什么是标记?定义:Html命令称为标记(标签)作用:用于控制Html文档的内容和外观分类:单独标签:,成对标签:标记的属性作用:修饰或进一步制定信息。如颜色,对齐方式,高度,宽度等,标签,属性,属性值
9、,学习 HTML 欢迎来到 HTML 世界,DOCTYPE标签,文档类型,会使浏览器使用相应的方式加载网页并显示。示例:,Head-Meta元素,META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)HTTP-EQUIV 似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容,响应报头信息,如页面编码、缓存模式等等.NAME 定义页面基本信息,这些信息是提供给网络搜索引擎的,搜索引擎通过这些信息可以找到页面,标签及其属性,示例xxxxxxxxxxxxx,标签及其属性,标签 属性 bgcolor 设置网页文档的背景颜色十六进制RG
10、B颜色码,使用一个#号后跟六位十六进制数据,例如#FF0000Html的颜色常量名,例如red属性 background 设置网页文档的背景图片属性 text 设置网页中文字的颜色属性 leftmargin 设置网页中的内容到左边距之间的距离属性 topmargin 设置网页中的内容到上边距之间的距离,标签及其属性,标签 属性 align 设置标题文字的水平对齐方式 取值范围(left,right,center,justify)标签 属性 size 设置水平线的粗细属性 width 设置宽度,路径,相对路径由当前文件所在的路径引起的跟其它文件(或文件夹)的路径关系(”./”代表上一级文件夹)范
11、例:web/article/01.htm 绝对路径目标文件的完整路径范例:http:/范例:C:/Web/index.html,标签及其属性,标签 属性 align 设置段落文字的水平对齐方式 取值范围(left,right,center)标签 标签 作用:显示图片属性 src 指明图片位置(相对路径,绝对路径)属性 align 设置图片周围内容对齐方式取值范围(top,middle,bottom)属性 alt 图片无法显示时的替代信息属性title 提示信息,超级链接,标签 作用:超级链接1)实现页面之间的跳转 2)页内跳转 3)mailto属性 href=“”属性 target锚记作用:页
12、内跳转利用锚记可以实现页面内跳转结合超级链接,可以跳到另外页面指定的位置Html语言注释,好的html编码习惯,文件扩展名为.html标签必须正确地嵌套要符合XHTML标准标签元素必须要关闭 比如、标签名、属性名要用小写字母文档必须要有根元素 标签的属性必须有属性值,属性值需要加上引号合理必要的注释不要使用W3C不推荐使用的标签,总 结,了解internet,万维网熟悉网页的基本组成结构标记及其属性的构成段落标记,图片标记,超级链接标记相对路径,绝对路径,物理路径,任务,项目:为新开的餐厅设计网站要求:1.共有三个页面,分别为A 文件名index.html 站点首页,用来显示餐厅介绍信息,如餐
13、厅主营品种,餐厅规模,餐厅地理位置,餐厅营业时间,餐厅服务项目等。其中,餐厅主营品种,餐厅地理位置,营业时间为必须选项B 文件名 west.html 介绍西餐的页面(至少4种)分别介绍菜名,图片,价格C 文件名 Chinese.html 介绍中国菜的页面(至少4种)分别介绍菜名,图片,价格2.三个页面之间要建立超级链接A 分别建立超级链接到另外两个页面B 对于west.html和 Chinese.html要求有目录分别链接到本页面内的具体菜肴C west.html和Chinese.html之间能够有互相访问的超级链接,作业(二),Web 开发基础,第二章 表格与页面布局,回顾,Internet
14、 和 万维网网页的工作原理网页的基本结构标记及其属性段落标记,图片标记,超级链接标记相对路径,绝对路径,物理路径,本章目标,网页设计注意事项什么是表格?为什么需要表格?如何创建表格?表格如何使用?,网页设计注意事项,多浏览器支持样式与风格统一网站结构、文件命名页面尺寸与屏幕分辨率图片文件命名、大小尺寸限制相对路径的应用页面内容(title、meta、alt、tbody等属性的应用),什么是表格?,表格是html高级构件之一,它表示数据之间的关系,使对比分析更容易理解。表格由特定数目的行和列组成,表格应用示例,什么是表格?,表格的作用:用于显示数据,便于理解、分析组织网页版面信息,什么是表格?,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 开发 基础 课程
![提示](https://www.31ppt.com/images/bang_tan.gif)
链接地址:https://www.31ppt.com/p-6524440.html