《Web应用开发》PPT课件.ppt

《《Web应用开发》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《Web应用开发》PPT课件.ppt（44页珍藏版）》请在三一办公上搜索。

1、Web应用开发,HTML,什么是HTML？HTML 指超文本标记语言。HTML 文件是包含标记/标签的文本文件。这些标签告诉 WEB 浏览器如何显示页面。HTML 文件必须使用 htm 或者 html 作为文件扩展名。HTML 文件能通过简单的文本编辑器来创建。,http:/,HTML文档的结构,HTML语言的基本结构,这是标题部分。你好，这是正文部分！,头部信息 正文部分,HTML标记,HTML文档标记 格式：功能：标志文档开始和结尾的标记HTML文件头标记 格式：功能：用于包含文件的基本信息HTML文件主体标记 格式：功能：文件主体标记,HTML标记,HTML标记HTML 标记被 符号包围

2、。HTML 标记是成对出现的，例如 和。位于起始标记和终止标记之间的文本是元素的内容。HTML 标记对大小写不敏感，和 的作用是相同的。HTML 标记可以包含属性，各属性之间以空格分隔。,设置的属性,background=URL,bgcolor=colorvalue,text=colorvalue,HTML格式化,文本加粗标记文本斜体标记文本下划线标记文本删除线标记,文本加粗标记 文本斜体标记 文本下划线标记 文本删除线标记 This text is strong This text is big This text is small,字体设置标记格式：功能：设置字体格式标记属性：可用于设置字

3、体的大小、颜色、字型等,HTML格式化,HTML格式化,标题标记格式：，功能：设置各种大小不同标题的标记段落标记格式：功能：设置段落标记预定义格式标记格式：功能：在浏览器中浏览时，按照文档中预先排好的形式显示内容,标题标记,例：,标题示例!hello world!hello world!hello world!hello world!hello world!hello world!,段落标记与预定义格式标记,例：,显示的区别 春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。,春晓,转义符号,HTML格式化,分区显示标记格式：功能：分区显示标记

4、换行标记格式：功能：强制换行水平线标记格式：功能：插入水平线标记注释标记格式：功能：注释标记,DIV和布局,是一个块级元素。这意味着它的内容自动地开始一个新行和表格相比较，结构更为清楚实现内容和结构的分离,关于DIV,国外近70%以上的网站采用div布局开发，90%以上的新网站均是DIV布局。国内越来越多的网站、软件均采用DIV布局来规划页面。国内各大门户，如163、凤凰网、闪吧、闪客帝国等均是DIV布局。,HTML格式化,例：,标记的使用 三种标记的使用！我在中间！中间 我在左边！左边 我在右边！右边,建立列表,有序列表格式：功能：建立有序列表无序列表格式：功能：建立无序列表属性,例：,列表

5、示例 计算机新书 ASP程序设计 HTML网页设计 FrontPage使用指南 英语新书 外经贸英语 实用英语翻译 朗文英语语法,建立列表,自定义列表格式：功能：根据需要自定义列表样式html 是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。,格式：功能：在当前页和其他页间建立超链接属性：,加入超级链接,href=URL,target=FrameTarget,target=“_blank”新窗口打开,name=L

6、able,命名锚：Useful Tips Section 将#符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个节：/html_links.asp#tips Jump to the Useful Tips Section,插入图像标记：属性：,加入图像,src=URL,格式：功能：创建表格。属性：决定表格的整体外观,建立表格,表 属性值,定义空表格，还需要定义行格式：功能：定义表格的一行主要属性：,定制表格,定制表格,表格的每一行还需要定义单元格格式：功能：定义表格的单元格主要属性：,例：多层表格嵌套实例！跟我学网页制作,基础知识简介 第一讲 HTML简介 第二讲 HTML标

7、记 第三讲 CSS基础,表格的制作,HTML最新课堂 高级应用技术 多层表格嵌套示例,样式表CSS,样式表的作用是什么？如何定义样式表？如何把样式表和HTML标记关联起来？CSS属性定义是否和HTML标记属性一致,CSS概念CSS是Cascading Style Sheets 的缩写，中文的意思是层叠样式表或级联样式表。,CSS功能简介CSS可以用来精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、边框等。使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。,问题描述,我的简历我的爱好我的图片,我的简历我的爱好我的图

8、片,改变所有字颜色为蓝色：,实现页面风格的统一控制,我的简历我的爱好我的图片,通过HTML标记定义 使用class定义样式表,CSS样式表的定义,css语句格式如下：selector property:value(选择符 属性：值)选择符的作用：限制样式作用的范围p font-size:15,当属性的值是多个单词组成时，必须在值上加引号h1 font-family:Courier New,如果需要对一个选择符指定多个属性时，使用分号隔开。p font-size:15;color:red,选择符主要包括：html选择符class选择符id选择符,例：css实例CSS基础定义HTML标记样式表,图

9、 使用标记定义样式表,例：id方法与class方法的使用与区别！使用class方法定义P使用id方法定义FONT！EX.9,图 id和class的使用和区别,实验,试验一、完成个人主页（静态网页）（必做）完成这个实验，你需要学习：HTML/XHTML(+CSS)实验要求：有图片，有几个按键，然后点按键了就会换一个界面。介绍下自己什么就够了。验收方式：新建一个txt文件文件命名为PBxxxxx-张三-静态网页，txt文件内容如下：姓名：王*学号：PB07210001 个人主页网：http:/账号：nhpcc 密码nhpcc4091.首先登陆http:/上传个人主页请创建目录 public_htm

10、l,主页的第一个文件是index.html3.别人访问您的主页时,地址是 http:/其中YourID是您的登录名4.用户的帐号和密码取自邮件服务器,因此修改密码请在邮件服务器上进行.修改密码后大约1个小时,本系统会进行同步.,实验,实验二：安装并运行Tomcat服务器Tomcat的下载地址安装步骤:首先安装JDK。接下来，解压Tomcat压缩文件。解压Tomcat的压缩文件的过程就相当于安装的过程。假定解压至C:tomcat目录。然后设定两个环境变量：JAVA_HOME，它是JDK的安装目录；CATALINA_HOME，它是Tomcat的安装目录。启动命令:binstartup.bat 关闭命令:binshutdown.bat 访问主页:http:/localhost:8080/将实验一的html部署到tomcat上 使用浏览器进行浏览,