Web应用开发.pptx
Web应用开发应用开发HTMLv什么是什么是HTML？ HTML 指超文本标记语言。指超文本标记语言。 HTML 文件是包含标记文件是包含标记/标签的文本文件。标签的文本文件。 这些标签告诉这些标签告诉 WEB 浏览器如何显示页面。浏览器如何显示页面。 HTML 文件必须使用文件必须使用 htm 或者或者 html 作为文件作为文件扩展名。扩展名。 HTML 文件能通过简单的文本编辑器来创建。文件能通过简单的文本编辑器来创建。 Web应用开发应用开发vhttp:/ 这是标题部这是标题部分。分。 你好，这是正文部分！你好，这是正文部分！ Web应用开发应用开发 头部信息头部信息 正文部分正文部分 HTML标记标记vHTML文档标记文档标记 格式：格式： 功能：标志文档开始和结尾的标记功能：标志文档开始和结尾的标记vHTML文件头标记文件头标记 格式：格式： 功能：用于包含文件的基本信息功能：用于包含文件的基本信息vHTML文件主体标记文件主体标记 格式：格式： 功能：文件主体标记功能：文件主体标记Web应用开发应用开发HTML标记标记vHTML标记标记 HTML 标记被 符号包围。 HTML 标记是成对出现的，例如 和 。 位于起始标记起始标记和终止标记终止标记之间的文本是元素的内容。 HTML 标记对大小写不敏感对大小写不敏感， 和 的作用是相同的。 HTML 标记可以包含属性，各属性之间以空格分隔。Web应用开发应用开发设置设置的属性的属性标记属性功能link=colorvalue设置尚未被访问过的超文本链接的颜色，默认为蓝色设置尚未被访问过的超文本链接的颜色，默认为蓝色vlink=colorvalue设置已被访问过的超文本链接的颜色，默认为紫色设置已被访问过的超文本链接的颜色，默认为紫色alink=colorvalue设置超文本链接在被单击的瞬间的颜色，默认为红色设置超文本链接在被单击的瞬间的颜色，默认为红色bgproperties =fixed设置背景是否随滚动条滚动设置背景是否随滚动条滚动leftmargin=size设置网页左边的空白设置网页左边的空白topmargin=size设置网页上方的空白设置网页上方的空白margingwidth=size设置网页空白的宽度设置网页空白的宽度marginheight =size设置网页空白的高度设置网页空白的高度background=URLbgcolor=colorvaluetext=colorvalueWeb应用开发应用开发HTML格式化格式化文本加粗标记文本加粗标记文本斜体标记文本下划线标记文本删除线标记 文本加粗标记 文本斜体标记 文本下划线标记 文本删除线标记 This text is strong This text is big This text is small Web应用开发应用开发Web应用开发应用开发v字体设置标记字体设置标记 格式：格式： 功能：设置字体格式标记功能：设置字体格式标记 属性：可用于设置字体的大小、颜色、字型等属性：可用于设置字体的大小、颜色、字型等HTML格式化格式化标记属性功能size=size设置文字的大小face=fontstyle设置字体color=colorvalue设置文字的颜色http:/ 标题示例标题示例! hello world!hello world!hello world!hello world!hello world!hello world! Web应用开发应用开发段落标记与段落标记与预定义格式标记预定义格式标记例：例： 显示显示<p>与与<pre>的区别的区别 春晓春晓春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。夜来风雨声，花落知多少。 春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。夜来风雨声，花落知多少。 春晓春晓http:/ 格式：格式：， 功能：设置各种大小不同标题的标记功能：设置各种大小不同标题的标记v段落标记段落标记 格式格式： 功能：设置段落标记功能：设置段落标记v预定义格式标记预定义格式标记 格式格式： 功能：在浏览器中浏览时，按照文档中预先排好功能：在浏览器中浏览时，按照文档中预先排好的形式显示内容的形式显示内容Web应用开发应用开发HTML格式化格式化例：例： 标记的使用标记的使用 三种标记的使用！三种标记的使用！ 我在中间！我在中间！中间中间 我在左边！我在左边！左边左边 我在右边！我在右边！右边右边 Web应用开发应用开发HTML格式化格式化v分区显示标记分区显示标记 格式：格式： 功能：分区显示标记功能：分区显示标记v换行标记换行标记 格式：格式： 功能：强制换行功能：强制换行v水平线标记水平线标记 格式：格式： 功能：插入水平线标记功能：插入水平线标记v注释标记注释标记 格式：格式： 功能：注释标记功能：注释标记标记属性标记属性功能功能align=alignstyle设置对齐方式。设置对齐方式。alignstyle的取值为：的取值为：left，right，centersize=size设置线条宽度（即高度）设置线条宽度（即高度）w i d t h =size设置线条长度设置线条长度c o l o r =colorvalue设置线条颜色，默认为设置线条颜色，默认为黑色黑色noshade设置线条是否有阴影设置线条是否有阴影Web应用开发应用开发例：例： 列表示例列表示例 计算机新书计算机新书 ASP程序设计程序设计 HTML网页设计网页设计 FrontPage使用指南使用指南 英语新书英语新书 外经贸英语外经贸英语 实用英语翻译实用英语翻译 朗文英语语法朗文英语语法http:/ 格式：格式： 功能：建立有序列表功能：建立有序列表v无序列表无序列表 格式：格式： 功能：建立无序列表功能：建立无序列表v属性属性 标记属性标记属性功能功能type=#无序列表：无序列表：# = disc, circle, square有序列表：有序列表：# = A, a, I, i, 1start = # = numberWeb应用开发应用开发建立列表建立列表v自定义列表自定义列表 格式：格式： 功能：根据需要自定义列表样式功能：根据需要自定义列表样式 6.html Web应用开发应用开发v格式：格式：v功能：在当前页和其他页间建立超链接功能：在当前页和其他页间建立超链接v属性：属性：标记属性功能给定链接目标的位置给定链接目标的位置设置显示链接目标的框架设置显示链接目标的框架，命名锚，用于跳转到页面的某一位置命名锚，用于跳转到页面的某一位置tabindex=num设置Tab键的顺序accesskey=char设置快捷键加入超级链接加入超级链接href=URLtarget=FrameTargettarget=“_blank”新窗口打开name=Lable命名锚：命名锚：Useful Tips Section 将将 # 符号和锚名称添加到符号和锚名称添加到 URL 的末端，就可以的末端，就可以直接链接到直接链接到 tips 这个节这个节 ： Jump to the Useful Tips Section 例子 http:/ 标记：标记： 属性：属性：标记属性功能通过通过URL给出图像来源的位置，不可缺省给出图像来源的位置，不可缺省width=size设置图像宽度height =size设置图像高度alt= txt设置在图像未载入前图片位置显示的文字border= size设置图像边框，缺省为0align=alignstyle对齐方式。取值：top，middle，bottom，left，righthspace=size设置图片左右边沿空白vspace=size设置图片上下边沿空白加入图像加入图像src =URLhttp:/ v功能：创建表格。功能：创建表格。v属性：决定表格的整体外观属性：决定表格的整体外观建立表格建立表格Web应用开发应用开发表表 属性值属性值标记属性功能border=size设置表格边框大小设置表格边框大小width= size设置表格的宽度height=size设置表格的高度cellspacing=size设置单元格间距cellpadding =size设置单元格的填充距background =URL设置表格背景图片bgcolor =colorvalue设置表格背景色设置表格背景色align=alignstyle设置对齐方式cols =size设置表格的列数Web应用开发应用开发v定义空表格，还需要定义定义空表格，还需要定义行行v格式：格式：v功能：定义表格的一行功能：定义表格的一行v主要属性：主要属性：定制表格定制表格标记属性功能bgcolor=colorvalue设置行背景颜色align=alignstyle设置行对齐方式valign=valignstyle设置单元格垂直对齐方式Web应用开发应用开发定制表格定制表格v表格的每一行表格的每一行还需要定义还需要定义单元格单元格v格式：格式：v功能：定义表格的单元格功能：定义表格的单元格v主要属性：主要属性：标记属性功能bgcolor=colorvalu设置单元格背景颜色rowspan=num设置单元格所占的行数colspan =num设置单元格所占的列数align =alignstyle设置对齐方式valign =valignstyle设置单元格垂直对齐方式width =size设置单元格宽度height=size设置单元格高度http:/ 跟我学网页制作跟我学网页制作 Web应用开发应用开发 基础知识简介基础知识简介 第一讲第一讲 HTML简介简介 第二讲第二讲 HTML标记标记 第三讲第三讲 CSS基础基础 Web应用开发应用开发 HTML最新课堂最新课堂 高级应用技术高级应用技术 多层表格嵌套示例多层表格嵌套示例 Web应用开发应用开发样式表样式表CSSCSSv样式表的作用是什么？样式表的作用是什么？v如何定义样式表？如何定义样式表？v如何把样式表和如何把样式表和HTML标记关联起来？标记关联起来？vCSS属性定义是否和属性定义是否和HTML标记属性一致标记属性一致http:/ CSS概念概念 CSS是Cascading Style Sheets 的缩写，中文的意思是层叠样式表或级联样式表。 CSS功能简介功能简介 CSS可以用来精确的控制页面里每一个元素的字体样式、背景、排列可以用来精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、边框等。使用方式、区域尺寸、边框等。使用CSS能够简化网页的格式代码，加快能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。重复劳动的工作量。 Web应用开发应用开发问题描述问题描述我的简历我的爱好我的图片我的简历我的爱好我的图片改变所有字颜色为蓝色：Web应用开发应用开发实现页面风格的统一控制实现页面风格的统一控制我的简历我的爱好我的图片EX.10.htmlWeb应用开发应用开发v 通过通过HTML标记定义标记定义 v使用使用class定义样式表定义样式表 CSS样式表的定义样式表的定义Web应用开发应用开发设置方式设置方式举举 例例特特 点点内联样内联样式式在这里使用了在这里使用了H1标记标记灵活，简单方便。灵活，简单方便。嵌入样嵌入样式式h1 font-family:宋体宋体;font-size:12pt;color:blue在这里使用了在这里使用了H1标记标记一个样式可以在一个一个样式可以在一个页面多次应用。页面多次应用。外部样外部样式式在这里使用了在这里使用了H1标记标记h1.cssh1 font-family:宋体宋体;font-size:12pt;color:blue需要有一个外部的样需要有一个外部的样式表文件式表文件(.css)(.css)，可，可以为多个网页所共同以为多个网页所共同引用，即减少代码，引用，即减少代码，又可以做到统一页面又可以做到统一页面风格。风格。Web应用开发应用开发v css语句格式如下：语句格式如下： selector property: value (选择符选择符 属性：值属性：值) 选择符的作用：限制样式作用的范围选择符的作用：限制样式作用的范围p font-size:15 当属性的值是多个单词组成时，必须在值上加引号当属性的值是多个单词组成时，必须在值上加引号h1 font-family: Courier New 如果需要对一个选择符指定多个属性时，使用分号隔开如果需要对一个选择符指定多个属性时，使用分号隔开。p font-size:15;color:red 选择符主要包括：选择符主要包括： html选择符 class选择符 id选择符Web应用开发应用开发例：例：css实例实例CSS基础基础定义定义HTML标记样式表标记样式表EX.8.htmlWeb应用开发应用开发图 使用标记定义样式表Web应用开发应用开发例：例：id方法与方法与class方法的使用与区别！方法的使用与区别！使用使用class方法定义方法定义P使用使用id方法定义方法定义FONT！详细区别：详细区别：http:/ id和class的使用和区别Web应用开发应用开发DIVDIV和布局和布局v是一个块级元素。这意味着它的内容自动地开始是一个块级元素。这意味着它的内容自动地开始一个新行一个新行v和表格相比较，结构更为清楚和表格相比较，结构更为清楚v实现内容和结构的分离实现内容和结构的分离Web应用开发应用开发关于关于DIVDIVv国外近国外近70%以上的网站采用以上的网站采用div布局开发，布局开发，90%以上的新网站均是以上的新网站均是DIV布局。布局。v国内越来越多的网站、软件均采用国内越来越多的网站、软件均采用DIV布局来规布局来规划页面。划页面。v国内各大门户，如国内各大门户，如163、凤凰网、闪吧、闪客帝、凤凰网、闪吧、闪客帝国等均是国等均是DIV布局。布局。Web应用开发应用开发实验实验试验一、完成个人主页（静态网页）（必做）试验一、完成个人主页（静态网页）（必做）v完成这个实验，你需要学习：完成这个实验，你需要学习：vHTML/XHTML (+CSS)v 需要完成的功能有：需要完成的功能有：直接链接到 tips 详见PPT.19v在线资源：在线资源：vhttp:/ 学号：学号：PB07210001 个人主页网：个人主页网：http:/ 账号：账号：nhpcc 密码密码nhpcc409v1.首先登陆首先登陆http:/ 上传个人主页请创建目录上传个人主页请创建目录 public_html, 主页的第一个文件是主页的第一个文件是index.htmlv3. 别人访问您的主页时别人访问您的主页时, 地址是地址是 http:/ 其中其中YourID是您的登录名是您的登录名v4. 用户的帐号和密码取自邮件服务器用户的帐号和密码取自邮件服务器, 因此修改密码请在邮件服务器上进行因此修改密码请在邮件服务器上进行. 修改密码后大约修改密码后大约1个小时个小时, 本系统会进本系统会进行同步行同步.v如有问题可联系：如有问题可联系：
