网站建设及其网页制作_第1页
网站建设及其网页制作_第2页
网站建设及其网页制作_第3页
网站建设及其网页制作_第4页
网站建设及其网页制作_第5页
已阅读5页，还剩44页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第11章网站建设与网页制作11.1网站的创建复制与发布11.2HTML和XHTML11.3页面定位与布局方法11.4母版页11.5CSS样式设计11.6使用JavaScript创建网页特效

本章教学学目的介绍HTML标记和XHTML标记的用用法及网网页制作作方法。。本章教学学要求（1）掌握基基本HTML标记和XHTML标记的用用法；（（2）掌握页页面布局局及CSS的用法；；

（3）掌握母母版页与与内容页页的设计计方法；；（（4）了解其其他内容容。网站开发发主要分分两方面面:Web页面设计计设计在客客户端呈呈现的能能被浏览览器解析析的界面面，即平平时所说说的网页页制作，，一般使使用HTML(超文本标标记语言言)实现。Web逻辑功能能设计指实现内内部逻辑辑功能，，早期使使用脚本本语言实实现，如如JavaScript、VBScript等，但是是脚本语语言功能能较弱，，实现复复杂。11.1网站的创创建VS2005提供了三三种创建建站点的的位置类类型:文件系统统FTPHTTP三种类型型中，一一般使用用文件系系统。它它可在本本机任何何一个位位置创建建网站，，也可直直接将创创建的网网站从一一个文件件夹移动动或复制制到另一一个文件件夹，或或者直接接复制到到另一台台机器中中。11.2HTML和XHTML在VS2005中网页默默认使用用的目标标架构为为：XHTML1.0TransitionalXHTML是在HTML（超文本本标记语语言）基基础上为为适应目目前流行行的XML（可扩展展标记语语言）而而发展的的新一代代Web标记语言言。W3C在2000年1月首次提提出XHTML时，目标标是将Web翻译为XML。XHTML1.0是作为一一种帮助助Web开发人员员和创作作工具制制造商放放弃传统统HTML标记语言言，迁移移到一个个基于XML的新的HTML-XML的混合体体而开发发的，因因此叫做做XHTML1.0Transitional。11.2HTML和XHTML(续)从使用角角度说明明HTML与XHTML的不同：：大小写HTML不区分大大小写，，元素和和属性名名称可以以是大写写、小写写或大小小写混合合；而XHTML要求所有有元素和和属性名名称必须须是小写写的，而而属性值值则大小小写均可可。标记嵌套套在HTML中使用不不正确的的嵌套，，一样可可以在很很多浏览览器中使使用；而而XHTML则要求嵌嵌套必须须完全正正确。有否结束束标记在HTML中有些标标记是可可以没有有结束标标记；而而XHTML要求所有有标记都都必须有有结束标标记。。引号HTML中的属性性值可以以用引号号引起来来，也可可以不使使用引号号；但XHTML中要求所所有属性性值都必必须加引引号。样式如果不使使用样式式表，HTML中的每一一个样式式都可以以直接使使用属性性名=属性值的的方法设设置样式式；但是是在XHTML中，如果果不样式式表，则则必须通通过Style属性来设设置。11.2.1HTML和XHTML的格式与与标记基本格式式：HTML文档=首部（head）+主体（body）首部：由由标记<head>和</head>>之间的内内容构成成。用于于设置HTML文件的标标题、作作者等信信息（浏浏览器中中不显示示）。首首部中可可包含标标题标记记符title、样式标标记符style、脚本语语言标记记符script等。主体：由由标记<body>和</body>>之间的内内容构成成。网页页中的所所有内容容，包括括文字、、图形、、链接以以及其他他页面元元素都包包含在该该标记符符内。11.2.1HTML和XHTML的格式与与标记(续)HTML文档的一一般形式式为:<html><head>><title>>文档标题题</title></head>><body>这是xhtml文档的主主体部分分</body>></html>>在HTML文档中，，〈标记〉和〈/标记〉都是配对对使用的的。11.2.1HTML和XHTML的格式与与标记(续)<标记>中可以包包含属性性，一般般格式为为：〈标记属属性1="值1"属性2="值2"…〉例如：<imgalt=="smile"src=="smile.png"//>标记之间间必须使使用空格格隔开，，属性名名和属性性值之间间用等号号隔开，，等号左左边是属属性名称称，右边边是属性性值。例11-4:HTML标记示例例，主要要代码如如下:11.2.1HTML和XHTML的格式与与标记(续)<bodystyle="background--color:Silver;color:Blue;""><h1style=""text-align:center">一个很有有意义的的计算题题！</h1><!---这是一个个巧妙的的利用英英语和数数学的关关系展示示了人生生哲理的的计算题题--><hr//><divstyle=""text-align:left">>如果令A--Z分别等于于百分之之1--26，那么<br//>Hardwork（努力工工作）H+A++R+D+W++O+R+K==8+1++18++4+23+15+18+11==98%<br//>Knowledge（知识））  & ;K+N+O++W+L+E++D+G+E==11+14+15+23+12+5++4+7+5==96%11.2.1HTML和XHTML的格式与与标记(续)<br//>Love（爱情）） & ; L++O+V+E==12+15+22+5=54%%<br//>Luck（好运）） & ; L++U+C+K==12+21+3+11=47%%<br//><pstyle=""font-size:larger">>（这些我我们通常常认为重重要的东东西往往往并不是是最重要要的）</p>><pstyle=""text-align:left">>什么能使使得生活活变得圆圆满？</p>>是Money（金钱））吗? ;不!<br//>M+O++N+E+Y==13+15+14+5+25=72%%11.2.1HTML和XHTML的格式与与标记(续)<br//>是Leadership（领导能能力）吗吗? ;不!<br//>L+E++A+D+E++R+S+H++I+P=12++5+1+4++5+18+19+9+16=89%%<p>那么，什什么能使使生活变变成100%%的圆满呢呢？</p>><imgalt=="smile"src=="smile.png"//></div></body>><h1>>标记：设置文文件中的的标题。。与其相相似的有有<h2>>到<h6>>，其中<h1>>表示最大大标题，，<h6>>表示最小小标题。。其中的的text-align属性设置置标题的的水平对对齐方式式。

11.2.1HTML和XHTML的格式与与标记(续)11.2.1HTML和XHTML的格式与与标记(续)例11-5：设计两两个静态态页面，，第一个个页面链链接到第第二个页页面。11.3页面定位位与布局局方法网页中常常用的布布局方法法有两种种：利用表格格进行布布局利用层进进行布局局两种布局局方法各各有优缺缺点，设设计者可可以根据据实际情情况选择择一种或或同时使使用，而而页面中的的元素定定位则是是利用position样式属性性。11.3.1表格表格除了了可直接接在单元元格内显显示内容容，还可可将整个页页面划分分为若干干个独立立的部分分，精确地地定位文文本、图图像或其其它元素素。表格格由行和和列组成成，行列列交叉构构成了单单元格。。如下面面代码对对应右边边的图：：<table>><tr>><td>>第一行第第一个单单元格</td><td>>第一行第第二个单单元格</td></tr></table>在这段代代码中，，每一个<tr>></tr>作为一行行，每一一个<td>></td>作为该行行中的一一个单元元格。11.3.1表格（续续）例11-6：使用可可视化界界面设计计表格。。11.3.1表格（续续）修改表格格

在VS2005中非规则则表格可可以通过过菜单和和代码两两种方式式操作。。例11-7：效果：：11.3.2利用表格格进行页页面布局局VS2005中的表格格布局模模板简化化了页面面布局的的制作过过程。例11-8：利用表表格模板板进行页页面布局局11.3.3页内框架架网页制作作中一个个页面内内的一部部分区域域中显示示另一页页面的内内容，可可以利用用页内框框架完成成。页内框架架只能在在源视图图下用直直接输入入代码的的方式创创建。常常用格式式为：<iframe>不支持页页内框架架浏览器器显示的的内容</iframe>例11-9：在上例例MyTable2.htm中使用页页内框架架制作页页面。11.3.3页内框架架（续））target属性是控控制超链链接的目目标文件件如何显显示的。。A标记的target属性的特特殊值：：_top：表示目目标页面面将占用用整个浏浏览器窗窗口_self：表示在在当前超超链接所所在的框框架中显显示目标标页面_blank：表示在在一个新新的浏览览器窗口口中显示示页面_parent：表示将将目标页页面装入入当前框框架的父父框架中中，但是是有的浏浏览器将将其解释释为_top自定义url：指出目目标页的的路径11.3.4层的使用用与布局局方法div标记是一个区块级的的HTML标记，在该标标记之间间可以添添加段落落、表格格、图片片等内容容。它的的基本功功能就是是将一些些标记元元素组织织起来，，应用div标记的属属性为这这些标记记元素定定义统一一的样式式，也可可以为某某些不支支持特定定属性的的标记元元素应用用该属性性样式。。利用Javascript技术，可可使同一一层中所所有元素素一起显显示、移移动或隐隐藏。例11-10：div标记的基基本用法法。11.3.4层的使用用与布局局方法（（续）z-index属性指当两个个或多个个元素占占据同一一区域时时应以什什么样的的顺序显显示元素素。利用它可以以实现不不同内容容的重叠叠显示效效果。其其值大的的层显示示时位于于上方，，值小的的位于下下方，该该值可正正可负。。若不定定义则默默认为第第0层。position属性指将层放放在页面面的位置置。它有有三个值值：absolute、relative和static。若不指指定则默默认为static（正常流流中的位位置）。。absolute指相对于父父容器左左上角的绝对坐标标位置，与屏幕分分辨率无无关；relative则指相对对于父容容器中流流的起始始位置，，不一定定是左上上角。父父容器指指包含它它的最近近的一级级，可以以是table，也可以以是div。例11-11：层的重重叠显示示效果。。11.4母版页母版页（（MasterPage）的扩展展名为“.master”，它相当当于网页页的模板板。母版版页除了了留给其其它网页页修改的的部分用用专门的的ContentPlaceHolder控件预留留出来以以外，其其它部分分与一般般网页的的设计没没有什么么区别。。母版页的的内容无无法直接接在浏览览器中察察看，只只有通过过其它页页面的引引用才可可以显示示。在其他网网页中，，只要引引用了母母版页，，母版页页的页面面就可以以自动被被解析出出来，但但是设计计者只可可以修改改引用的的母版页页中预留留的部分分，而其其它部分分则不能能修改，，这样就就可以使使多个页页面的风风格保持持一致，，给网页页设计带带来了很很大的方方便。11.4母版页（（续）例11-12：利用母母版页建建立页面面外观风风格一致致的网页页。11.5CSS样式设计计层叠样式式表简称称CSS（CascadingStyleSheets），它可以控制制网页中中一个或或多个元元素的外外观。由于改变变样式表表中任何何一个元元素的显显示样式式，网页页中所有有与该样样式级联联的元素素都会自自动发生生改变，，因此使使用样式表可可以减少少很多具具有相同同外观元元素的重重复设置置工作，从而给给网页的的设计和和维护带带来了很很大的方方便。设置样式式的方法法有两种种，一种种是在代代码编辑辑方式下下直接使使用style设置样式式，另一一种是使使用可视视化界面面。11.5.1样式与样样式表（（续）例11-13：使用style设置样式式，部部分代码码如下：：<body><div><h1style=="font-size::40px;color::Red;">>第11章网站建建设与网网页制作作</h1><h2style=="font-size::20px;color::Blue;"">11.1网站的创创建复制制与发布布</h2></div></body>>11.5.1样式与样样式表（（续）上面的方方法设置置的样式式称为内联式样样式设置。。优点：直直观、方方便。缺点：若若不喜欢欢某种样样式，只只好不厌厌其烦的的重新逐逐一修改改每一个个元素的的样式。。为避免一一个个重重复修改改的麻烦烦，可以以使用下下面介绍绍的直接嵌入入式样式设计。。部分分代码如如下：<head><title>>样式引用用示例</title><styletype=""text/css"">h1{font-size::40px;color::Red;}h2{font-size::20px;color::Blue;}}</style></head>>11.5.1样式与样样式表（（续）<body><div><h1>>第11章网站建建设与网网页制作作</h1><h2>>11..1网站的创创建复制制与发布布</h2><h2>>11..2常用HTML标记</h2><h1>>第12章ASP..NETWeb服务器控控件</h1><h2>>12..1标准控件件</h2><h2>>12..2数据操作作控件</h2></div></body>>与内联式式样式不不同的是是，直接接嵌入式式样式将将所有样样式集中中放了<head>和</head>>之间的<style>>和</style>中了，而而<body>和</body>>内的标记记不再有有style属性了。。11.5.1样式与样样式表（（续）直接嵌入入式样式式只适用用于它所所在的网网页。如果要要将其用用于其它网页页，就把把样式放放在一个个独立的的文件中中。样式表（（常用））样式表：：将网页页元素的的样式定定义设计计为一个个独立的的文件。凡是在网网页的head部分与该该样式表表文件建建立链接接的HTML文件，其页页面元素素的样式式就会按按照样式式表中的的定义显显示。样样式文件的扩扩展名为为“.css”文件中每每个样式式的一般般格式为为：样式定义义选择符符{样式属性性1:值1;样式属性性2:值2;……}11.5.1样式与样样式表（（续）浏览器采采用“就近使用用”的原则，，即采用用最近定定义的样样式。样式表中中若没设设置样式式，它会会以默认认黑色样样式显示示。例11-14：同时使用用三种方方法设置置样式11.5.2样式规则则定义样式式一般格格式为：：样式定义义选择符符{样式属性性1:值1;样式属性性2:值2;……}其中样式定义义选择符符指样式式定义的的对象，，可选项项有：HTML标记、用用户自定定义的类类、用户户自定义义的ID、虚类等等。HTML标记HTML标记是最最典型的的选择符符类型。。如果有有多个不不同的标标记要使用用相同的的样式，，则可以以采用编编组的方方法简化化定义。。如：H1,H2,H3{{color::red}则所有的的H1、H2、H3标题都将将以红色色显示，，这种表表示法中，各元元素之间间要用逗逗号“,”分隔。11.5.2样式规则则（续））类（class）用户自定定义的类类是用来来为某一一个HTML标记创建建多个样样式，或者者为多个个标记创创建同一一种样式式。语法格式式：样式定义义选择符符.类名{样式属性性1:值1;样式属性性2:值2;……}如：H1.first的样式代代码：H1.first{{color::red;font--size:32px}H1.second的样式代代码：H1.second{{color::green;;font-size:44px}}CssExample4.htm的代码码如下：：11.5.2样式规则则（续））<head><title>>样式引用用示例3</title><linktype=""text/css""href="CssExample4.css""rel=="Stylesheet""/>></head>><body><div><h1class="first">>第11章网站站建设与与网页制制作</h1><h1class=“second”>第12章ASP..NETWeb服务器控控件</h1></div></body>>在设计视视图下可可以看到到前一个个h1标题为红红色32像素大小小，而后一个个h1标题为绿绿色44像素大小小。11.5.2样式规则则（续））使用类的定义可以为同同一个标标记定义义不同的的样式，若要用用类的定义义为不同同的标记记定义相相同的样样式，则则在类的的定义时直直接使用“.”＋类名的的方式，而不需需要指定定或选择择某一标标记名。。如：在样样式表中中定义类类：.rr{{color::red}在HTML文档中做做如下引用：<pclass="rr"">本段落文文字为红红色</P>><h1class=="rr">本标题为为红色</H1>则<p>标记和<H1>>标记中的的文字因因属同一一个类，，都以红红色字体显示示。11.5.2样式规则则（续））自定义ID自定义ID以“#”为标志，如：#customId1{color:red}}网页中，，在引用用该样式式的标记记符内使使用id属性即可可，如：：<Pid=“customId1”>本段落文文字为红红色</P>>ID与类主要要区别：类可以以在同一一个网页页的多个个标记中中重复使用；而而ID则在同一一网页中中只能使使用一次次。11.5.2样式规则则（续））虚类虚类是专专用于A标记的选选择符，使用虚虚类可以以设置不不同类型型超链接的的显示方方式。A:link未被访问问过的超超链接A:visited已被访问问过的超超链接A:active当超链接接处于选选中状态态A:hover当鼠标指指针移动动到超链链接上使用【添加样式式规则】对话框，，虚类是是被作为为HTML标记中的一项来来定义的的，可以以从【元素】的下拉框框中找到到这些定定义对象。11.5.2样式规则则（续））11.5.2样式规则则（续））包含选择择符对于有包包含关系系的元素素可以利利用包含含选择符符来定义义被包含含元素的样样式。描描述方式式为：选择符1选择符2{属性:值;……}即选择符符1中包含选选择符2，选择符符之间用用空格分分隔，这这种方式的定定义只对对选择符符1中的选择择符2起作用，，对单独独的选择择符1或选择符符2无效。例11-16:定义包含含样式，，使段落落文字中中的粗体体字以红红色显示示。11.5.2样式规则则（续））HTML标记、类类和ID三者中，，因为ID选择符是是对所定定义元素的唯唯一标识识，所以以优先权最最高，其次是类类，HTML标记的优先权最最低。如，在一一个样式式表文件件中有如如下的样样式定义义：P{color::Blue}}.aa{{color:Red}}#bb{{color:Yellow}}在链接此此样式表表文件的的HTML文件中加加入代码码：<pclass=""aa""id=""bb"">本段落文文字为ID定义的黄黄色！</p>>在浏览器器中看到到的文字字是优先先权最高高的ID所定义的的黄色。。11.5.2样式生成成器（最最常用））例11-18:使用样式式生成器器设计h1、h2标记的样样式。11.5.4CSS单位长度单位位CSS的长度单单位主要要分绝对对单位和和相对单单位两种种。绝对单位位：cm（厘米））、mm（毫米））、px（像素））、in（英寸））、pt（点，1pt==1/72英寸）、pc（1pc==12点）相对单位位：％（百分分比）、em（当前浏浏览器字字体中大大写字母母“M”的宽度））、ex（当前浏浏览器默默认字体体中小写写字母“x”的高度））。常用：px、pt、%。11.5.4CSS单位（续续）颜色单位位常用有两两种：颜色名——直接使用用标

人人文库> 全部分类> 专业文献 > IT计算机

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论