Web应用基础 - Fudan University

Web应用基础

HTML经典结构

<html><head><title> </title>

</head><body></body>

</html>

HTML元素(Element)属性(Attribute)属性值(Value)

HTML元素(Element)属性(Attribute)属性值(Value)

<element attribute="value">…</element>

HTML公有属性

专有属性

HTML公有属性

核心属性i18n属性事件属性

专有属性

核心属性

标题信息title

关联的样式信息style

以空格分隔的类列表class

文档范围内惟一的idid

说明属性

i18n属性

文字方向dir ( ltr | rtl )

语言代码lang

说明属性

事件属性

按下一个键onkeydown

释放一个键onkeyup

释放鼠标按钮onmouseup

鼠标在某范围内移动onmousemove鼠标被移动到其上onmouseover

鼠标从其上移出onmouseout按下并释放一个键onkeypress

按下鼠标按钮onmousedown双击鼠标按钮ondblclick

单击鼠标按钮onclick

说明属性

文本

<html><head><title>Example</title>

</head><body><p>This is the first paragraph.</p><p>This is the second paragraph.</p><p>This is the third paragraph.</p>

</body></html>

标题

<html><head><title>Example_Heading</title>

</head><body><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>

</body></html>

换行

<html><head><title>Example_BR</title>

</head><body><p>This line will not reach all the way <br>

to the edge of the screen.</p><p>This line will not reach all the way</p><p>to the edge of the screen.</p>

</body></html>

水平线<html><head><title>Example_HR</title>

</head><body><hr align="left" width="50%" size="1"><hr align="left" width="50%" size="2"><hr align="left" width="50%" size="4"><hr align="left" width="50%" size="8"><hr align="left" width="50%" size="16"><hr align="left" width="50%" size="32"><hr aligh=“left” width="50%" size="8" noshade>

</body></html>

空白<html><head><title>Example_PRE</title>

</head><body><p> This demonstrates how white space is handled.</p><p>This demonstrates how white space is handled.</p> <br><pre> This demonstrates how white space is handled.</pre>

</body></html>

网页创作工具

文本编辑器：记事本, UltraEdit, vi, SimpleTextHTML编辑器：Coffee Cup HTML Editor所见即所得程序：Macromedia Dreamweaver字处理器：Word

其它工具

链接检查器代码验证器兼容性测试器

网站设计

颜色文本风格导航内容运营

链接

<A href = "http://www.yahoo.com">Visit Yahoo! </A>

链接

<A href = "http://www.yahoo.com">Visit Yahoo! </A>

<A href = "index.html"> Visit the Yahoo! Home page</A>

内部链接

<html><body><A name="top"></A>…Rest of page content goes here…

<A href="#top">Back to Top</A></body></html>

其他链接类型

news:group.name

ftp://sitename.com/ filename.pdf

mailto:name@ emailaddress.com

href值

<A href="news:alt.html">Visit the HTML newsgrous</A>

<A href="news:12345.6789@news. com">View this news article</A>

新闻组

<A href="ftp://sitename.com/filename. pdf">Download from FTP site</A>

FTP下载文件

<A href="mailto:name@emailaddress. com" >Email Me!</A>

<A href="mailto:name@emailaddress. Com?Subject=Hello!&anothername@ emailaddress.com">Email Me!</A>

电子邮件

范例代码链接类型

BASE元素

<html><head><title>My Web Page</title><base href="http://www.sitename.com">

</head><body><A href ="/aboutus/index.html">About us</A><A href ="/employment/jobs.html">Jobs</A><A href ="/Services/index.html">Services</A>

</body></html>

http://www.networksolutions.com

域名注册

Web服务器

Sun Solaris OS使用Netscape或ApacheLinux使用ApacheWindows NT使用Internet Information Server (IIS)

http://www.netcraft.com

Web服务器配置类型查询

选择Web空间提供商

非虚拟主机虚拟Web主机专用服务器托管服务器

http://www.100best-free-web-space.com/

前100位免费Web空间服务列表

Linux: tracerout yahoo.com

Dos: tracert yahoo.com

文本格式<p>The word <I>italics</I> is italicized.</p>

<p>The word <B>italics</B> is italicized.</p>

<PRE>Preformatted text goes here.</PRE>

<p>We guarantee that CatMover <SUP>TM</SUP> will keep your doorway unblocked</p>

<p>It was nice to get some good old H<SUB>2</SUB>O after so long in the desert.</p>

字体尺寸

<font size="1">Font Size 1</font>

字体尺寸

<head><basefont size="6">

</head>

<font size="+1">Text goes here.</font>

<font size="-2">Text goes here.</font>

字体

<font face="Arial">Changed text goes here.</font>

<font face="Arial, Helvetica, sans-serif">Changed text goes here.</font>

<head><basefont face="Arial, Helvetica, sans-serif">

</head>

字体颜色

<font color="red">Changed text goes here.</font>

<head><basefont color="red">

</head>

<font size="3" color="red" face="Arial">Changed text goes here.</font>

文本对齐

<p align="right">Changed text goes here.</p>

<p align="left">Changed text goes here.</p>

<p align="center">Changed text goes here.</p>

<p align="justify">Changed text goes here.</p>

<blockquote>Changed text goes here.</blockquote>

特殊字符

♣

&clubs;

♣

不间断空隔

&

&

图像文件格式

GIF (Graphics Interchange Format)JPEG (Joint Photographic Experts Group)PNG (Portable Network Graphics)

免费图像网站http://images.jsc.nasa.gov http://www.clipart.com

http://www.hemera.com

图像

<img src="filename">

<img src="images/Squash.jpg">

图像

<img src="filename">

<img src="images/Squash.jpg">

<img src="http://www.sitename.com/filename.jpg">

图像

<img src="filename" width ="200" height= "234">

图像

<img src="filename" width ="200" height= "234">

<img src="filename" width ="200" height= "234" vspace="20" hspace="20">

图像边框

<img src="Images/Berry.jpg" width="128" height="93" border="2">

图像占位符

<img src="Images/Green.jpg" width="128" height="93" alt="picture of vegetables">

<img src="Images/huge_file.jpg" width="128" height="93" lowsrc="Images/small_version.jpg">

图像链接

<A href="http://www.fudan.edu.cn"><img src= "Images/Fudan.jpg"></A>

<A href="Images/Picture_Large.jpg"><img src= "Images/Picture_Small.jpg"></A>

图像对齐

<p><img src="Images/filename.jpg" align="top">

Your text goes here…</p>

<p><img src="Images/filename.jpg" align="left">

Your text goes here…</p>

图像对齐

顶端：同文本顶端top

底部：同基线bottom

中间：使文本的基线与图像的中心对齐middle

左：使图像脱离其原始位置并将其移动至左页边距left

右：使图像脱离其原始位置并将其移动至右页边距right

文本顶端：使图像的顶端与文本的顶端处于同一水平线texttop

基线：使文本的基线与图像的底部处于同一水平线baseline

绝对中间：使文本的中心和图像的中心对齐absmiddle

绝对底部：使文本中下行字母的底部与图像的底部对齐absbottom

说明aligh属性值

背景图片

<body background="Images/Apple_small.jpg">Your content goes here...</body>

颜色

RGB值 #号后跟6位十六进制数字

#FFFF00Yellow（黄色）#FFFFFFWhite（白色）#008080Teal（水鸭色）#C0C0C0Silver（银色）#FF0000Red（红色）#800080Purple（紫色）#808000Olive（橄榄色）#000080Navy（海军蓝）#800000Maroon（栗色）#00FF00Lime（石灰）#008000Green（绿色）#808080Gray（灰色）#FF00FFFuchsia（紫红色）#0000FFBlue（蓝色）#000000Black（黑色）#00FFFFAqua（浅绿色）十六进制值颜色名称

颜色

RGB值 #号后跟6位十六进制数字216种Web安全色

颜色

RGB值 #号后跟6位十六进制数字216种Web安全色互补色、对比色和调配色

颜色轮

图像编辑工具

PhotoshopFireworksPainterPaint Shop Pro

http://www.webpagesthatsuck.com/

Web拙劣设计大全

音频

<A href="Music\Classic.mp3">Click here to listen to Music!<A>

<embed src="Music\Classic.mp3" width="240" height="80" autostart="false" hidden="false" loop="2" volume="100"><noembed>Sorry, your Web browser won't play this song.

</noembed></embed>

视频

<embed src="Movie\Blood.wmv" width="384" height="288" autostart="flase" controller="false"><noembed>Sorry, your Web browser won't play this movie.

</noembed></embed>

表格<body>

<table border="1“><tr><td>First Cell</td><td>Second Cell</td>

</tr><tr><td>Third Cell</td><td>Fourth Cell</td>

</tr></table>

</body>

表格的宽度和高度

<table width="100%" height= "100%">

<table width="400" height= "250">

<table width="400" height= "75%">

表格单元格的宽度和高度<table border="1">

<tr><td width="33%">First Cell</td><td>Second Cell</td>

</tr><tr><td height="100">Third Cell</td><td>Fourth Cell</td>

</tr><tr><td>Fifth Cell</td><td>Sixth Cell</td>

</tr></table>

表格的填充和间距

<table border="1" cellpadding="2">

表格的填充和间距

<table border="1" cellpadding="2">

<table border="1" cellspacing="5">

表格水平和垂直对齐

水平对齐aligh (left, center, right)垂直对齐valigh (top, middle, bottom, baseline)

表格跨越行和列

<td rowspan="2">…</td>

<td colspan="3">…</td>

表格跨越行和列<table border="1">

<tr><td rowspan="2">Pets</td><td colspan="2" align="center">Cats</td><td colspan="2" align="center">Dogs</td>

</tr><tr>

<td>Male</td> <td>Female</td> <td>Male</td> <td>Female</td></tr><tr>

<td rowspan="2"><P>Measured<BR>Weight</P></td><td>17</td> <td>12</td> <td>40</td> <td>35</td>

</tr><tr>

<td>15</td> <td>16</td> <td>34</td> <td>27</td></tr>

</table>

电子杂志布局<html><head><title>Creating a Newspaper Design</title></head><body><table width="100%">

<tr align="center" valign="top"><td colspan="3">Logo Goes Here</td>

</tr><tr valign="top">

<td width="50%">First article goes here.</td> <td bgcolor="Black" width="1" height="100%"></td><td width="50%">Second article goes here.</td>

</tr><tr align="center" valign="middle">

<td colspan="3">Links go here.</td></tr>

</body></html>

表格用于表单<form>

<table><tr>

<td align="right">User Name:</td><td align="left"><input type="text" name="username"></td>

</tr><tr>

<td align="right">Passwork:</td><td aligh="left"><input type="password" name="pw"></td>

</tr><tr>

<td></td><td align="left"><input type="submit"></td>

</tr></table>

</form>

框架

框架基本结构

<html><head><title>Web Page Title</title>

</head><body><p>This is the first paragraph.</p><p>This is the second paragraph.</p>

</body></html>

框架基本结构


</head>

</html>

框架基本结构


</head><frameset rows="50%,50%"><frame name="top" src="test.html"><frame name="bottom" src="test.html">

</frameset></html>

框架基本结构


</head><frameset cols="50%,50%"><frame name="left" src="test.html"><frame name="right" src="test.html">

</frameset></html>

框架结构设置

<frameset rows="30%, *">

<frameset rows="200, *">

<frameset rows="*, 2* ,*">

框架结构设置

<frameset rows="200, 824">

<frameset rows="200, *">

<frame noresize>

框架嵌套

<html><head><title>Frames</title>

</head><frameset rows="150,*"><frame name="logo" src="test.html"><frameset cols="125,*"><frame name="links" src="test.html"><frame name="main" src="test.html">

</frameset></frameset>

</html>

框架命名

在上一级的框架和窗口中打开链接的网页_parent

在浏览器的一个新实例中打开被链接的网页_blank

在完整的浏览器窗口中打开被链接的网页，消除所有的框架

_top

在存储这个链接的框架中打开被链接的网页，这与默认的链接行为一致。

_self

功能框架名

目标框架

<A href="url" target="framename">Home</A>

框架边框

<frameset rows="200, *" border="5">

<frameset rows="200, *" frameborder="no">

<frameset rows="200, *" bordercolor="blue">

框架页边距和滚动条

<frame marginwidth="20" marginheight="20">

<frame scrolling="no">

框架注意事项

考虑用户屏幕尺寸框架不能太多提供支持性导航

表单元素

<form><input type="..." name="...">

</form>

Type vale: text, checkbox, file, password, radio, reset, submit, hidden.

文本框

<input type="text" size="20">

<input type="text" size="20" maxlength="30">

<input type="text" size="3" name="number" value="1">

文本框

<input type="text" size="3" name="number" value="1" readonly>

<input type="text" size="3" name="number" value="1" disabled>

文本框

<input type="text" size="3" name="number" value="1" readonly>

<input type="text" size="3" name="number" value="1" disabled>

<input type="hidden" name="number" value="1">

Textarea

<form><textarea cols="20" rows="20" wrap ="virtual" >Your default context go here…

</textarea></form>

文本会在当它到达文本区的边缘时自动换到下一行，并且当表单被提交时,文本会以其被显示的状态被发送。

physical

文本会在当它到达文本区的边缘时自动换到下一行，但当表单被提交时,文本是作为一个长行发送的。

virtual

文本会显示在一行中,直到用户按下Enter键.如果行比文本区的宽度大的话,文本会滚动

off

功能Wrap值

Select

<form>Please select where are you going to be?<br><select name="region" size="3" multiple><option value="SoReg">South</option><option value="NoReg">North</option><option value="EaReg" selected>East</option><option value="WeReg">West/option>

</form>

Button<input type="button" name="dosomething" value="INPUT element" onclick="JavaScript">

<button type="button"><font face="Arial" >BUTTON element!<font>

</button>

<button type="submit"><font face="Arial">SEND IT RIGHT <I><font color="#FF0000" NOW!</font></I></button></font>

<button type="reset"><img src="Images\Harry.jpg" width="75" height="20">

</button>

导航条

纯文本导航

表格导航条

列表导航条<UL>

<LI>…</LI><LI>…</LI><LI>…</LI>

</UL>

<OL><LI>…</LI><LI>…</LI><LI>…</LI>

</OL>

图形导航条

图形导航条

<A href="index.html"onMouseOver="document.homebutton.src='Home_Rollover.gif'"onMouseOut="document.homebutton.src='Home.gif'"><img src="Home.gif" width="108" height="25" border="0" name="homebutton">

</A>

网站设计与维护

确定内容网站结构和导航设计风格和配色测试站点保持更新网站推广

网站类型

个人主页信息类组织类政治类商业类

调查上网人群的状况

调查客观信息调查站点的访问者

确立目标

集中到网站的特色和目标之上有意地保持过时的技术建立预算

推广网站

搜索引擎Lycos, WebCrawler, Google

搜索引擎的注册表单All the web: www.alltheweb.com/help/webmaster/submit_site

AltaVista: addrul.altavista.com/addurl/new

Ask Jeeves: ask.ineedhits.com/sitesubmit.asp

Excite & WebCrawler: https://secure.ah-ha.com/guaranteed_inclusion/teaser.aspx

Google:www.google.com/addurl.html

Lycos: insite.lycos.com

www.submitit.com

搜索引擎主要关注标记

TITLEMETAALT

TITLE<html>

<head>

<title> XYZ Company: where you will find the best handbag

</title>

</head>

…

</html>

META<html>

<head>

<meta name="keywords" content="Massachusetts Institute of Technology,

MIT">

<meta name="description" content="MIT is devoted to the advancement of

knowledge and education of students in areas that contribute to or

prosper in an environment of science and technology.">

<title> MIT</title>

</head>

…

</html>

ALT

<img src="picture.jpg" width="417" height="163"

alt="The Alt tag is similar to the Description Meta tag and Title tags">

阻止搜索引擎

<html>

<head>

<title> This page will not be indexed by a Robot or Spider </title>

<meta name="ROBOTS" content="NOINDEX">

</head>

…

</html>

阻止搜索引擎

User-agent: *

Disallow: /

在站点的最顶层目录中使用robots.txt文件

阻止搜索引擎

User-agent: *

Disallow:

允许任何Spider搜索整个站点

阻止搜索引擎

User-agent: *

Disallow: /cgi-bin/

Disallow: /tem/

Disallow: /private/

Disallow: /finance/results

标识出个别的目录不被搜索:

阻止搜索引擎

User-agent: Lycos

Disallow: /

将个别搜索引擎排斥在外:

阻止搜索引擎

User-agent: Lycos

Disallow:

User-agent: *Disallow: /

只允许个别搜索引擎:

推广网站

搜索引擎Lycos, WebCrawler, Google使用Web目录Yahoo, Free-For-All

推广网站

搜索引擎Lycos, WebCrawler, Google使用Web目录Yahoo, Free-For-All发布新闻稿

推广网站

搜索引擎Lycos, WebCrawler, Google使用Web目录Yahoo, Free-For-All发布新闻稿电子邮件

推广网站

搜索引擎Lycos, WebCrawler, Google使用Web目录Yahoo, Free-For-All发布新闻稿电子邮件建立互惠链接

推广网站

搜索引擎Lycos, WebCrawler, Google使用Web目录Yahoo, Free-For-All发布新闻稿电子邮件建立互惠链接广告条

广告条资费

保证每月50万次的广告露脸量

搜索引擎：2万美元到5万美元关键字广告：4万美元到7万美元前100位网站： 2万5千美元到10万美元

推广网站搜索引擎Lycos, WebCrawler, Google使用Web目录Yahoo, Free-For-All发布新闻稿电子邮件建立互惠链接广告条传统媒体

Any Question?

Web应用基础 - Fudan University

Documents

Transcript of Web应用基础 - Fudan University