1 / 24

第 2 章 .NET Web 编程基础 (2)

第 2 章 .NET Web 编程基础 (2). 3. 内容提要. 首先介绍网页设计基础 HTML 和 CSS 然后介绍 .NET 框架结构 .NET 框架的层次以及 .NET 的编程模式。并对常用的框架类进行介绍 使用框架类操作文件系统 使用框架类绘图 使用框架类处理电子邮件以及使用框架类进行网络操作。. 预排版标记. 包含在预排版标记中的字符会按照 HTML 原码的格式输出到浏览器上。 HTML 文件中的英文空格一般不起作用，但是在预排版标记中空格可以显示出来. 程序名称： 2-15.htm <HTML> <BODY> <PRE> 白日依山尽，

torsten-markku
Download Presentation

第 2 章 .NET Web 编程基础 (2)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第2章 .NET Web编程基础(2) 3

  2. 内容提要 • 首先介绍网页设计基础HTML和CSS • 然后介绍.NET框架结构 • .NET框架的层次以及.NET的编程模式。并对常用的框架类进行介绍 • 使用框架类操作文件系统 • 使用框架类绘图 • 使用框架类处理电子邮件以及使用框架类进行网络操作。

  3. 预排版标记 • 包含在预排版标记中的字符会按照HTML原码的格式输出到浏览器上。 • HTML文件中的英文空格一般不起作用，但是在预排版标记中空格可以显示出来 程序名称：2-15.htm <HTML> <BODY> <PRE> 白日依山尽， 黄河入海流。 </PRE> </BODY> </HTML>

  4. 设计网页框架 • 设计网页的时候，经常用到的一种格式是框架。 • 基本网页框架分成两种，一种是左右框架，另一种是上下框架。

  5. 上下框架 程序名称：2-16.htm <HTML> <FRAMESET ROWS="20%,*"> <FRAME NAME="TOP" SRC="TOP.HTM" NORESIZE> <FRAME NAME="BOTTOM" SRC="BOTTOM.HTM" NORESIZE> </FRAMESET> </HTML> • <FRAMESET ROWS=“20%,*”>的意思是：基本框架是上下框架，上面占20%，下面占80%。<FRAME NAME=“TOP” SRC=“TOP.HTM” NORESIZE>的意思是：框架的名称是top，放入的HTML网页是top.htm，而且不可改变大小。 • 如果有了FRAMESET标记，不可以有Body标记，否则无法显示。

  6. 左右框架 程序名称：2-17.htm <HTML> <FRAMESET COLS="20%,*"> <FRAME NAME="Left" SRC="Left.htm" NORESIZE> <FRAME NAME="Right" SRC="Right.htm" NORESIZE> </FRAMESET> </HTML> • 程序使用的是：COLS=“20%,*”，意思是框架左边占总宽度的20%，右边占余下的80％

  7. 使用框架 • 一般在工程应用中，都是由三个页面组成的框架组合。分成上框架，右框架和左框架

  8. 程序名称：Frame.htm <HTML> <FRAMESET BORDERCOLOR="#8E8E8E" ROWS="96,*" FRAMEBORDER="10"> <FRAME STYLE="BORDER-BOTTOM: #E7E6F8 2PX SOLID" NAME="TOPFRAME" SRC="HEAD.HTM" FRAMEBORDER="0" NORESIZE SCROLLING="NO"> <FRAMESET STYLE="BORDER-RIGHT: #8E8E8E 4PX SOLID; BORDER-TOP: #8E8E8E 4PX SOLID; BORDER-LEFT: #8E8E8E 4PX SOLID; BORDER-BOTTOM: #8E8E8E 4PX SOLID" FRAMESPACING="4" BORDERCOLOR="#8E8E8E" FRAMEBORDER="10" COLS="233,*"> <FRAME STYLE="BORDER-RIGHT: #DFDFDF 6PX SOLID; BORDER-LEFT: #DFDFDF 6PX SOLID; BORDER-BOTTOM: #DFDFDF 6PX SOLID" NAME="LEFTFRAME" SRC="LEFT.HTM" FRAMEBORDER="0" NORESIZE> <FRAME STYLE="BORDER-RIGHT: #DFDFDF 6PX SOLID; BORDER-LEFT: #DFDFDF 6PX SOLID; BORDER-BOTTOM: #DFDFDF 6PX SOLID" NAME="RIGHTFRAME" SRC="RIGHT.HTM" NORESIZE SCROLLING="YES"></FRAMESET> </FRAMESET> </HTML>

  9. CSS概述 • CSS（Cascading Style Sheets）中文翻译为层叠样式表单，简称样式单。 • 是近几年才发展起来的新技术，1998年5月12日，Cascading Style Sheets的level 2才成为W3C 的标准。 • 它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志里，也可以在外部附加文档作为外加文档。 • CSS的功能是无比的强大，W3C也极力向世界推广这一先进技术。

  10. 为什么要使用CSS • 原因主要有如下四点： • (1) 弥补HTML对网页格式化功能的不足，比如段落间距，行距等； • (2) 字体变化和大小； • (3) 页面格式的动态更新； • (4) 排版定位等。 • 简单来说，HTML是一种标记语言，而CSS是这种标记的一种重要的扩展，可以进一步美化我们的页面，换句话说，CSS是一种来装饰HTML的一种标记集合。

  11. 使用CSS 程序名称：2-18.htm <HTML> <HEAD> <TITLE></TITLE> <STYLE TYPE="TEXT/CSS"> H1 { FONT-SIZE: X-LARGE; COLOR: RED } H2 { FONT-SIZE: LARGE; COLOR: BLUE } </STYLE> </HEAD> <BODY> <H1>中国，我的祖国！H1显示的</H1> <H2>中国，我的祖国！H2显示的</H2> </BODY> </HTML>

  12. 加载CSS样式的三种方式 • 使用CSS来格式化网页，共有三种方式： • 在HEAD中引用 • 在BODY中引用 • 作为文件来引用。

  13. HEAD内引用 程序名称：2-19.htm <HTML> <HEAD> <TITLE></TITLE> <STYLE TYPE="TEXT/CSS"> H1 {COLOR:GREEN;FONT-SIZE:37PX;} P {BACKGROUND:YELLOW;} </STYLE> </HEAD> <BODY> <H1>北京大学，清华大学</H1> <P>南京大学，复旦大学</P> </BODY> </HTML>

  14. BODY内引用 • 在BODY中实现主要是在标记中引用，只要将定义在STYLE标记中的值拿到对应的标记中就可以了 程序名称：2-20.htm <HTML> <BODY> <H1 STYLE="COLOR:GREEN;FONT-SIZE:37PX;"> 北京大学，清华大学</H1> <P STYLE="BACKGROUND:YELLOW;"> 南京大学，复旦大学</P> </BODY> </HTML>

  15. 文件外引用 • 可以将HEAD中定义的样式另存成一个文件。CSS作为一个外部文件引入的方式有两种一种是做连接，另一种是导入 程序名称：mystyle.css H1 {COLOR:GREEN;FONT-SIZE:37PX;} P {BACKGROUND:YELLOW;} 程序名称：2-21.htm <HTML> <HEAD> <TITLE></TITLE> <LINK REL=STYLESHEET HREF="mystyle.css" TYPE="TEXT/CSS"> </HEAD> <BODY> <H1>北京大学，清华大学</H1> <P>南京大学，复旦大学</P> </BODY> </HTML>

  16. 导入CSS文件 • 使用@IMPORT关键字将外部文件导入，注意@IMPORT必须写在STYLE标记中。 程序名称：2-22.htm <HTML> <HEAD> <TITLE></TITLE> <STYLE TYPE="TEXT/CSS"> @IMPORT URL(MYSTYLE.CSS); </STYLE> <BODY> <H1>北京大学，清华大学</H1> <P>南京大学，复旦大学</P> </BODY> </HTML>

  17. CSS与标记对应的三种方式 • 让一个HTML标记和CSS样式表匹配，有三种方式： • 标记选择符 • 类选择符 • ID选择符。

  18. 标记选择符 • 任何HTML元素都可以是一个CSS的选择符。上面所有的样式表都是采用标记选择符引入的。 • 例如：P { BACKGROUND:YELLOW;}，这里用的标记选择符是P。

  19. 类选择符 • 在STYLE标记定义一个“.类名”，然后在HTML标记中使用CLASS=“类名”就可以引入该样式 程序名称：2-23.htm <HTML> <HEAD> <TITLE></TITLE> <STYLE TYPE="TEXT/CSS"> .LITTLERED{COLOR:RED;FONT-SIZE:9PT} .LITTLEGREEN{COLOR:GREEN;FONT-SIZE:9PT} </STYLE> </HEAD> <BODY> <DIV CLASS="LITTLERED">这是红色，而且比较小！</DIV> <SPAN CLASS="LITTLEGREEN">这是绿色，而且比较小！</SPAN> </BODY> </HTML>

  20. ID选择符 • 定义ID选择符的时候，在样式名之前加“#名字”，引用的是时候使用“ID=名字”。 程序名称：2-24.htm <HTML> <HEAD> <TITLE></TITLE> <STYLE TYPE="TEXT/CSS"> #SZG { COLOR:RED } </STYLE> </HEAD> <BODY> <P ID=SZG>这是ID选择符号！</P> </BODY> </HTML>

  21. 定义超级链接样式 • 可以指定A标记以不同的方式显示。一个超级连接有几种不同的状态：未被访问连接（Link）、已访问连接（Visited）和鼠标移动过（Hover）。 • 可以定义超级连接文字的颜色，可以定义字体的大小，一般超级链接都有下划线，可以利用“TEXT-DECORATION:NONE”将超级链接的下划线去掉。

  22. 定义超级链接样式 • 当鼠标移动到其之上时，自动变大并加一个下划线 程序名称：2-25.htm <HTML> <HEAD> <TITLE></TITLE> <STYLE TYPE="TEXT/CSS"> A:LINK{COLOR:RED ;FONT-SIZE:9PT;TEXT-DECORATION:NONE} A:VISITED{COLOR:BLUE;FONT-SIZE:9PT;TEXT-DECORATION:NONE} A:HOVER{COLOR:GREEN;FONT-SIZE:15PT;TEXT-DECORATION:UNDERLINE} </STYLE> </HEAD> <BODY> <A HREF="#">这是超级链接</A> </BODY> </HTML>

  23. 本讲总结 • 本讲主要介绍HTML的主要标记 • 介绍框架标记的使用 • 介绍CSS的基本概念以及使用方法

  24. 本章习题 • 如何在网页中设置字体，有哪些字体可以使用？ • 如何引入一张图片，如何给图片加上边框？ • 如何使用超级链接，如何将超级链接的下划线去掉？ • 如何定义跨行的表格。如何将表格的字体和边框的距离加大？ • 框架有几种基本形式？如何使用？ • 加载CSS样式的方式有哪些？如何使用？

More Related