网站构建培训课件_第1页
网站构建培训课件_第2页
网站构建培训课件_第3页
网站构建培训课件_第4页
网站构建培训课件_第5页
已阅读5页,还剩28页未读 继续免费阅读

下载本文档

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

文档简介

6.1.1网站建设概述1.网站策划准备阶段2.内容设计与实现阶段3.网站的发布与推广、维护阶段1/2/202316.1.2网站开发工具(1/5)静态网页静态网页就是标准的HTML文件,其扩展名为.htm或.html,它可以包含HTML标记、文本、声音、图像、动画、Java程序以及客户端ActiveX控件,这种网页不包含任何脚本代码,在程序员开发好后不会自行改动。1/2/202326.1.2网站开发工具(2/5)客户端动态网页客户端动态网页包含一些可在客户端浏览器中执行的脚本程序,这些程序可以在浏览器中被解释执行,这些脚本可以根据用户的操作做出响应,实现这种动态效果的语言主要有JavaScript和VBScript。1/2/202336.1.2网站开发工具(3/5)客户端动态网页有很大的局限性。首先,其脚本程序是程序员在设计网页的时候事先写好的,响应的内容和方法有限;其次,这些脚本程序在客户端是可见的,减低了网站的安全性。为了改进客户端动态网页的问题,人们提出了服务器端动态网页。1/2/202346.1.2网站开发工具(4/5)服务器端动态网页服务器端动态网页中也包含脚本程序,但是当网页被访问时,这些脚本程序首先在服务器端被解释执行,然后把执行的结果以一个新的纯HTML网页返回客户端。在交互的过程中,客户端可以得到服务器处理的结果,但是源程序并不能在客户端看到,所以大大提高了网站的安全性。动态网页的文件扩展名不再是.htm或.html,而是与所使用的服务器端动态网页开发技术有关,例如,使用ASP.NET技术开发时,网页文件的扩展名是.aspx。1/2/202356.1.2网站开发工具(5/5)静态网页设计类框架结构类FrontPage微软公司的Office套装软件之一,简单易学,适合初学者使用。DreamweaverMacromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,是第一套针对专业网页设计师特别发展的视觉化网页开发工具。图形处理类FireworksMacromedia公司发布的一款专为网络图形设计的图形编辑软件。PhotoshopAdobe公司出品的最流行的图像编辑软件,所设计的图像也可用于网页图像。FlashMacromedia公司发布的一款优秀网页动画设计软件。动态网页开发类代码类ASP.NET微软公司开发的用来在服务器端构建功能强大的web应用程序。JSPJSP(JavaServerPages)是由SunMicrosystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术是用JAVA语言作为脚本语言的,JSP网页为整个服务器端的JAVA库单元提供了一个接口来服务于HTTP的应用程序。PHP一种超级文本预处理语言(PHP:HypertextPreprocessor),在服务器端执行的嵌入HTML文档的脚本语言,语言的风格有类似于C语言,现在被很多的网站编程人员广泛运用。开发环境类Editplus一个功能很全面的文本、HTML、程序源代码编辑器,方便输入和编辑代码。VisualSVisualStudio.NET是一套完整的开发工具,用于生成ASPWeb应用程序、XMLWebservices、桌面应用程序和移动应用程序。Webmatrix一款小巧的ASP.NET开发环境,方便安装,简单易用。1/2/202366.3Web语言HTMLHTML语言基础知识HTML语言常用标记及属性1/2/202376.3.1HTML语言基础知识(1/4)

HTML:HyperTextMarkupLanguage,即超文本标记语言,是一种用来编写超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX,WINDOWS等)。自1990年以来HTML就一直被用作WWW的信息表示语言,用于描述网页的格式设计以及它与WWW上其它网页的连接信息。使用HTML语言描述的文件,需要通过WWW浏览器显示网页效果。所谓超文本,就是因为它可以加入图片、声音、动画、影视等内容,并且可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。1/2/202386.3.1HTML语言基础知识(2/4)

1.HTML的基本结构<HTML>

<HEAD>

<TITLE>一个简单的HTML示例</TITLE>

</HEAD>

<BODY>

<CENTER>

<H3>欢迎光临我的主页</H3>

</CENTER>

</BODY>

</HTML>

━┓

┃文档头

━┛

━┓

┃文档体

━┛1/2/202396.3.1HTML语言基础知识(3/4)

图6-23一个简单的HTML示例1/2/2023106.3.1HTML语言基础知识(4/4)

2.标签单标签:这类标记的语法是:<标签名称> 最常用的:<BR>表示换行。双标签:由“始标签”和“尾标签”两部分构成,必须成对使用:<标签>内容</标签>单标签和双标签的始标记内可以包含一些属性,其语法是:

<标签名字属性1属性2属性3…>

<HRSIZE=3ALIGN=LEFTWIDTH="75%">1/2/2023116.3.2HTML语言常用标记及属性(1/20)

1.页面格式标记1)段落标记<p></p>用来创建一个段落,中间可以加入文本,按段落文本显示在浏览器中。可使用align属性,说明段落的对齐方式,语法为:<palign="">文本内容</p>

align可以是left/center/right1/2/2023126.3.2HTML语言常用标记及属性(2/20)

2)换行标记<br>如果加在<p></p>的外边,将产生一个大的回车换行,在<p></p>的里面,产生一个小的回车换行。1/2/2023136.3.2HTML语言常用标记及属性(3/20)

3)列表标记(1)<dl></dl>、<dt></dt>、<dd></dd>

创建普通列表(2)<ol></ol>、<ul></ul>、<li></li><ol></ol>用来创建标有数字的列表,<ul></ul>用来创建一个标有圆点的列表。1/2/2023144)标题格式标记:共有6个标题标记对,<h1></h1>…<h6></h6>,<h1></h1>是最大的标题,<h6></h6>是最小的标题。6.3.2HTML语言常用标记及属性(4/20)

1/2/2023156.3.2HTML语言常用标记及属性(5/20)2.文本标记<b></b>文本以黑体字形式输出<i></i>用来使文本以斜体字的形式输出<u></u>用来使文本以下划线的形式输出<tt></tt>输出打字机风格的文字<cite></cite>输出引用方式的文字(通常是斜体)<em></em>输出需要强调的文本(通常是斜体加黑体)<strong></strong>输出加重文本(通常是斜体加黑体)<font></font>设置文本的字体大小、颜色,比如:<fontsize="5"color="red">红色</font>表6-2文本标记1/2/2023166.3.2HTML语言常用标记及属性(6/20)3.图像标记1)图像属性赋值标记<img>:在HTML文档中不是真正加入图像,而是加入图像的路径,路径可以是相对路径,也可以是绝对路径。<img>的属性根据路径的不同有不同的书写形式,如果使用相对路径,有下列几种情况:(1)如果HTML文件与图像文件(比如为logo.gif)在同一个文件夹下,则代码应为:<imgsrc="logo.gif">(2)如果图像文件放在当前的HTML文档所在的文件夹的子文件夹中(比如images),则代码应为:<imgsrc="images/logo.gif">1/2/2023176.3.2HTML语言常用标记及属性(7/20)(3)如果图像文件放在当前的HTML文档所在的文件夹的上一层文件夹中(比如为files),则代码应为:<imgsrc="../files/logo.gif">

如果files是该网站下的home文件夹里的一个子文件夹,则代码应为<imgsrc="../home/files/logo.gif">另外<img>还有alt/border/width/height属性,alt是浏览时鼠标移动到图像上时显示的文本。如果使用绝对路径,比如图像存放在E盘根目录下,代码应为:<imgsrc="file:///E:/logo.gif">2)水平线标记:<hrsize=""width=""noshade>noshade表示无阴影1/2/2023186.3.2HTML语言常用标记及属性(8/20)4.表格标记1)创建表格标记<table></table><tablebgcolor="">bgcolor表示背景色的属性2)行、单元格和表格头标记

tr的属性值有align:<tralign=left/center/right>td的属性值可以有width、colspan(单元格所跨行数)、rowspan(单元格所跨列数):<tdwidth=""colspan=""rowspan="">1/2/2023196.3.2HTML语言常用标记及属性(9/20)标志含义<table>最外层,创建一个表格<tr>创建一行<td></td>创建一个单元格</tr>行末尾</table>最外层表6-3行、单元格和表格头标记1/2/2023206.3.2HTML语言常用标记及属性(10/20)5.链接标记1)创建链接页面标记指向Internet上的网页文件链接:<ahref="">搜狐</a>指向本地网页文件的链接:<ahref="file:///d:/web/interest.htm"target="_blank"><fontsize="2"color="red">兴趣</font></a>1/2/2023216.3.2HTML语言常用标记及属性(11/20)指向电子邮件的链接:<ahref="mailto:">与我联系</a>target属性:_blank:链接的网页以新窗口形式打开_self:在本窗口打开_parent:在父窗口打开_top:在整个浏览器窗口打开1/2/2023226.3.2HTML语言常用标记及属性(12/20)2)创建链接标签标记<aname="1">1</a>建立标签<ahref="#1">1</a>建立指向标签的链接1/2/2023236.3.2HTML语言常用标记及属性(13/20)6.帧标记frame用来向浏览器窗口中装载多个HTML文件,即每一个HTML文件占据一个帧,多个帧可以显示在同一个浏览器窗口中,帧也可以称为框架。1)帧属性标记<frameset></frameset>在<body></body>外边,可以嵌套使用1/2/2023246.3.2HTML语言常用标记及属性(14/20)示例说明<framesetrows="*,*,*">总共有三个按列排列的帧,每个帧占整个浏览器窗口的1/3<framesetcols="40%,*,*">总共有三个按行排列的帧,第一个帧占整个浏览器窗口的40%,剩下的空间平均分配给另外两个帧<framesetrows="40%,*"cols="50%,*,200">总共有六个帧,先是在第一行中从左到右排列三个帧,然后在第二行中从左到右再排列三个帧,即两行三列,所占空间依据rows和cols属性的值,其中200的单位是像素表6-4常见的帧标记1/2/2023256.3.2HTML语言常用标记及属性(15/20)2)帧内容标记(1)<frame>放在<frameset>中间,用来定义某一个具体的帧,具有src、name、scrolling、noresize属性,src和name必须赋值,src是帧的源HTML文件名(包括相对路径或网址),name是帧的名字。例如:<framesrc="jc.htm"name="main"strolling="auto"noresize>strolling指定是否显示滚动轴,取值可以是“yes”、“no”或“auto”noresize直接加入,不需赋值,用来禁止用户在浏览器中调整一个帧的大小。(2)<noframes></noframes>放在<frameset></frameset>中,用来在那些不支持帧的浏览器中显示文本或图像信息。1/2/2023266.3.2HTML语言常用标记及属性(16/20)7.表单标记1)创建表单标记<form></form>属性:action、method和targetaction的值是处理程序的程序名,如<formaction="/login.asp">method用来定义处理程序从表单中获取信息的方式,可取get或post。2)定义输入区标记<inputtype="">例如创建一个单行文本输入框:<inputtype="text"name="T1"size="20">1/2/2023276.3.2HTML语言常用标记及属性(17/20)3)创建列表框标记(1)<select></select>定义下拉菜单或者是列表菜单(2)<option>指定列表框中的一个选项4)创建文本框标记<textarea></textarea>创建一个多行的文本框,属性有name、cols和rows。1/2/2023286.3.2HTML语言常用标记及属性(18/20)8.多媒体标记1)插入背景音乐<bgsoundsrc="song.mid"autostart=trueloop=infinite>2)插入各种多媒体标记<embed>用于插入各种多媒体,格式可以是MIDI、WAV、AIFF、AU等。<embedsrc="song.mid"autostart="true"starttime="00:30">1/2/2023296.3.2HTML语言常用标记及属性(19/20)9.其他标记1)<marquee>走动的文字例如:<marqueebehavior=scrolldirection=leftscrolldelay=0scrollamount=1>滚动的文字</marquee>behavior属性:scroll/slide/alternatedirection属性:left/right/up/down移动的方向scrolldelay属性:移动的延时scrollamount属性:移动的速度1/2/2023306.3.2HTML语言常用标记及属性(20/20)2)<meta>放在<head></head>之间的标记<metahttp-equiv="Content-Language"content="zh-cn"><

温馨提示

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

评论

0/150

提交评论