开发基础课件

《开发基础课件》由会员分享，可在线阅读，更多相关《开发基础课件（25页珍藏版）》请在金锄头文库上搜索。

1、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

2、，即超文本标记语言）是描述网页的标记语言。 HTML文件由Web服务器发送给客户端浏览器，客户浏览器按HTML描述的格式将其显示在浏览器窗口内。 HTML文件通过HTTP通信协议，使得HTML文件可以在互联网上顺畅的进行文件交换和访问。 HTML文件是纯文本文件格式，可以用文本编辑器、专业的网页编辑工具编辑制作。,4-,JSP程序设计 计算机工程系,2.1 HTML简介,URL URL是Uniform Resource Locator的缩写，中文称之为统一资源定位器。URL是Internet中资源的简单命名机制。 URL由三部分构成：协议、主机DNS名或IP地址和文件名。例如URL： http

3、:/ 其含义为：协议为http协议，主机为，文件名为index.html。,5-,JSP程序设计 计算机工程系,2.1 HTML简介,以下哪些是正确的URL? 1、http:/ 2、file:/ 3、 4、 5、http:/:80 6、/news/welcome.html,问题,6-,JSP程序设计 计算机工程系,2.1 HTML简介,HTML文件结构 HTML的标记与属性 HTML标记是用“”括起来的标识符，括号中间的标识符为标记名称，如标记属性是标记中的参数选项。大多数标记都有一些自己的属性，有些标记也有共用的一些属性，各属性之间无先后顺序，如果省略属性则采用默认值。 属性的一般使用格式：

4、内容,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

5、.3 表格,12-,JSP程序设计 计算机工程系,2.3 表格,行标记的属性 一般格式如下： ,13-,JSP程序设计 计算机工程系,2.3 表格,单元格和标记的属性 和标记属性相同。单元格内容,14-,JSP程序设计 计算机工程系,2.4 页面布局,CSS简介 Cascading Style Sheet(级联样式表) CSS代码按照其放置的位置不同可以划分为3种CSS样式，即嵌入样式、内联样式和外联样式。 内联样式 内联样式是将样式代码直接内联到标记内，以style作为属性，语句作为属性值，例如：嵌入样式 嵌入样式是使用标记将一段CSS代码嵌入到HTML文档中。一般是使用标记将一段CSS代码

6、插入到HTML文档头部，也就是标记之间,15-,JSP程序设计 计算机工程系,2.4 页面布局,外联样式 外联样式是通过外部样式文件对文档进行外观控制，css样式语句存储在一个独立文本文件中，通过在文档中指定样式文件来控制文档外观。 一般格式： ,16-,JSP程序设计 计算机工程系,2.4 页面布局,CSS选择器 一般格式： tagName attribute:value; attribute:value; 其中： tagName为标记名称，被所包含的规则指定。 attribute:value;在之内，用“属性:值；”的形式为tagName指定规则。 选择器可以有一个或多个attribute

7、: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等。

8、,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为层的类名称，

9、类名称要符合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所述

10、。盒子模型常用的定位属性有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程序设计 计算机工程系,