资源预览内容
第1页 / 共25页
第2页 / 共25页
第3页 / 共25页
第4页 / 共25页
第5页 / 共25页
第6页 / 共25页
第7页 / 共25页
第8页 / 共25页
第9页 / 共25页
第10页 / 共25页
亲,该文档总共25页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
2012年9月,JSP程序设计,第二章 Web开发基础,第2章 Web开发基础,JSP开发环境的搭建 Web服务目录的设置 B/S结构特点 使用MyEclipse开发和部署B/S应用程序的基本步骤 软件 部署 创建JSP文件常用的方法,复习,2-,JSP程序设计 计算机工程系,第2章 Web开发基础,HTML/XHTML 文档结构、常用标记等技术 DIV+CSS页面布局原理与实现技术 页面表格的制作技术掌握页面表格的制作技术 掌握定义css选择器的方法,内容,要求,3-,JSP程序设计 计算机工程系,2.1 HTML简介,HTML HTML(Hyper Text Marked Language,即超文本标记语言)是描述网页的标记语言。 HTML文件由Web服务器发送给客户端浏览器,客户浏览器按HTML描述的格式将其显示在浏览器窗口内。 HTML文件通过HTTP通信协议,使得HTML文件可以在互联网上顺畅的进行文件交换和访问。 HTML文件是纯文本文件格式,可以用文本编辑器、专业的网页编辑工具编辑制作。,4-,JSP程序设计 计算机工程系,2.1 HTML简介,URL URL是Uniform Resource Locator的缩写,中文称之为统一资源定位器。URL是Internet中资源的简单命名机制。 URL由三部分构成:协议、主机DNS名或IP地址和文件名。例如URL: http:/www.sina.com/index.html 其含义为:协议为http协议,主机为www.sina.com.cn,文件名为index.html。,5-,JSP程序设计 计算机工程系,2.1 HTML简介,以下哪些是正确的URL? 1、http:/www.linkwan.com.cn/talk/talk1.htm 2、file:/ftp.linkwan.com 3、ftp.linkwan.com/pub/files/foobar.txt 4、www.baidu.com 5、http:/www.linkwan.com.cn:80 6、/news/welcome.html,问题,6-,JSP程序设计 计算机工程系,2.1 HTML简介,HTML文件结构 HTML的标记与属性 HTML标记是用“”括起来的标识符,括号中间的标识符为标记名称,如标记属性是标记中的参数选项。大多数标记都有一些自己的属性,有些标记也有共用的一些属性,各属性之间无先后顺序,如果省略属性则采用默认值。 属性的一般使用格式:内容,7-,JSP程序设计 计算机工程系,2.2 常用HTML标记,HTML的文字标记 标记 、和标记 标记 标记 标记 标记,8-,JSP程序设计 计算机工程系,2.2 常用HTML标记,特殊标记和图形标记 和"标记 标记 标记 标记,9-,JSP程序设计 计算机工程系,2.2 常用HTML标记,超级链接标记 标记为超级链接标记,一般使用格式为如下: 超链接显示名称,10-,JSP程序设计 计算机工程系,2.3 表格,定义表格的基本语法第1行1列标题第1行2列标题 第2行1列内容第2行2列内容 第3行1列内容第3行2列内容 ,11-,JSP程序设计 计算机工程系,表格标记的属性 ,2.3 表格,12-,JSP程序设计 计算机工程系,2.3 表格,行标记的属性 一般格式如下: ,13-,JSP程序设计 计算机工程系,2.3 表格,单元格和标记的属性 和标记属性相同。单元格内容,14-,JSP程序设计 计算机工程系,2.4 页面布局,CSS简介 Cascading Style Sheet(级联样式表) CSS代码按照其放置的位置不同可以划分为3种CSS样式,即嵌入样式、内联样式和外联样式。 内联样式 内联样式是将样式代码直接内联到标记内,以style作为属性,语句作为属性值,例如:嵌入样式 嵌入样式是使用标记将一段CSS代码嵌入到HTML文档中。一般是使用标记将一段CSS代码插入到HTML文档头部,也就是标记之间,15-,JSP程序设计 计算机工程系,2.4 页面布局,外联样式 外联样式是通过外部样式文件对文档进行外观控制,css样式语句存储在一个独立文本文件中,通过在文档中指定样式文件来控制文档外观。 一般格式: ,16-,JSP程序设计 计算机工程系,2.4 页面布局,CSS选择器 一般格式: tagName attribute:value; attribute:value; 其中: tagName为标记名称,被所包含的规则指定。 attribute:value;在之内,用“属性:值;”的形式为tagName指定规则。 选择器可以有一个或多个attribute:value;形式指定的规则。,17-,JSP程序设计 计算机工程系,2.4 页面布局,标记选择器 类型选择器 tagName.className attribute:value; attribute:value; id选择器 tagName#idName attribute:value; attribute:value;,18-,JSP程序设计 计算机工程系,2.4 页面布局,CSS的盒子模型 在CSS中一个盒子模型包括4个区,分别是内容(Content Container)、内边距(padding)、边框(border)、外边距(margin)、内容高度height、内容宽度width等。,19-,JSP程序设计 计算机工程系,2.4 页面布局,DIV层 层又称为Block-Level区块或Div Element 或CSS-Layer,中文一般都称之为层。 div标记是为HTML文档定义层的标记。 标记定义的层可以方便地放在页面的任何一个位置,除了平面上的并行定位,层还增加了三位空间的定位z-index,因为z-index定义了堆叠的顺序,类似于图形设计中使用的图层,所以拥有了z-index属性的元素被形象的称为层。,20-,JSP程序设计 计算机工程系,2.4 页面布局,DIV标记 在HTML中使用定义层,标记使用内联样式定义层的格式如下: ,其中: class为层的类名称,类名称要符合HTML标识符的规范,类名称可以重名。 id为层的ID,在整个HTML文档中,id必须是唯一的。 title为层的标题属性,取值为文字。 style为层样式属性,取值为css样式语句, 如“background:#cc6666;border:#cc99cc; position:absolute; left:50px;top:50px;width:200px; height:200px;z-index:1;“, 样式语句采用“属性:属性值;”形式。,21-,JSP程序设计 计算机工程系,2.4 页面布局,div层定位 样式在控制层的大小、背景时使用了CSS的盒子模型,如2.4.1所述。盒子模型常用的定位属性有position、float、z-index、top、right、left、bottom和visiblity等,对这些属性的理解,会极大地帮助读者控制定义的层,使设计的页面更美观。 position属性有五个取值,分别为:static、relative、absolute、fixed、inherit。,22-,JSP程序设计 计算机工程系,上机实践,掌握基本HTML文件组成及标记使用 理解CSS+DIV页面布局模式 完成“陕西省职称计算机考试报名系统”首页面,23-,JSP程序设计 计算机工程系,作业,P50:1-1;1-5,24-,JSP程序设计 计算机工程系,2.4 页面布局,div+css页面布局 在W3C标准中,DIV+CSS实现页面布局是一个典型的应用。 div+css页面布局工作流程 手工绘制网站页面效果图 对照效果图,在页面制作工具(如Dreamweaver、Editplus等)用div+css代码绘制页面框架 细化每个板块,填充内容信息。,25-,JSP程序设计 计算机工程系,
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号