网站5_静态网页制作

第五章静态网页制作技术第五章静态网页制作技术5.1网页制作概述5.1.1静态网页、动态网页及其区别5.1.2静态网页的处理流程5.1.3动态网页的处理流程第五章静态网页制作技术5.2HTML5.2.1HTML的基本语法5.2.2页面布局与文字标记5.2.3多媒体5.2.4列表5.2.5表格5.2.6超级链接标记5.2.7表单标记第五章静态网页制作技术5.3CSS5.3.1CSS简介5.3.2CSS三种应用方式5.3.3常用样式5.3.4DIV+CSS5.4XML5.4.1XML概述5.4.2XML实例第五章静态网页制作技术5.5其他网页制作工具5.5.1Fireworks5.5.2Dreamweaver5.5.3Flash5.5.4Photoshop5.1网页制作概述一般而言，一个电子商务网站中的web资源总是包括静态网页和动态网页两种。5.1.1静态网页、动态网页及其区别程序是否在服务器端运行，这个是判断网页属不属于动态网页的重要标志。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、CGI等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如html页、Flash、JavaScript、VBScript等等，它们是永远不变的。静态网页和动态网页各有特点，网站采用静态网页还是动态网页主要取决于网站的功能需求和网站内容的多少。如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。5.1.2静态网页的处理流程浏览器请求回答htmlph1/html网络服务器静态页面静态页面的处理流程静态页面的处理流程1.浏览器发出对静态页面的请求；2.Web服务器寻找该页面；3.Web服务器将该页面返回给浏览器。5.1.3动态网页的处理流程请求回答htmlcode/htmlhtmlph1/html应用服务器浏览器网络服务器简单动态页面的处理流程简单动态页面处理流程1.浏览器发出对动态页面的请求；2.Web服务器找到该页面，传给应用服务器；3.应用服务器扫描页面，执行代码，生成结果；4.应用服务器把结果页面返回给Web服务器；5.Web服务器发回该结果页面给浏览器。请求回答htmlcode/htmlhtmlph1/html应用服务器浏览器网络服务器复杂动态页面的处理流程询问记录集数据库驱动程序数据库复杂动态页面处理流程1.浏览器发出对动态页面的请求；2.Web服务器找到该页面，传给应用服务器；3.应用服务器扫描页面，执行代码；4.遇外部资源访问代码，应用服务器发送资源访问命令给资源服务器；5.资源服务器执行资源访问命令，返回结果数据集；6.应用服务器执行余下的代码，插入数据到结果页面；7.应用服务器把结果页面返回给Web服务器；8.Web服务器发回该结果页面给浏览器。5.2HTMLHTML（超文本标记语言）是制作网页的基础，是世界通用的语言。HTML标记是HTML的核心与基础，用于修饰、设置HTML文件的内容及格式。一个HTML文件中包含了所有将显示在网页上的文字信息。其中也包括对浏览器的一些指示，如文字应放置在何处，显示模式如何等。如果还有一些图片、动画、声音或是任何其他形式的资源，HTML文件也会告诉浏览器到哪里去查找它们，以及它们将放置在网页中的什么位置。5.2.1HTML的基本语法HTML是HypertextMarkedLanguage的英文缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言(就是制作网页的最基本的语言)。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。所谓超文本，是因为它可以加入图片、声音、动画和影视等内容。HTML的基本结构htmlhead网页头部信息/headbody网页主体正文部分/body/html头部描述浏览器所需的信息主体包含所要说明的具体内容HTML的标记HTML的任何标记都由“＜”和“＞”符号围起来，称为标记，是用来分割标记文本的元素，从而形成文本的布局、文字的格式及五彩缤纷的画面。在起始标记的标记名前加上符号“/”便是其终止标记，如/html。单标记某些标记称为“单标记”，因为它只需单独使用就能完整的表达意思。单标记语法如下：标记名称最常用的单标记是BR，它表示换行。双标记它由“始标记”和“尾标记”两部分构成，必须成对使用。其中，始标记告诉Web浏览器从此处开始执行该标记所表达的功能；尾标记告诉Web浏览器在这里结束该功能。双标记语法如下：标记内容/标记其中“内容”部分就是要被这对标记施加作用的部分。标记属性许多单标记和双标记的始标记内可以包含一些属性。其语法如下：标记名字属性1属性2属性3……各属性之间无先后次序，属性也可省略。示例1：创建一个简单HTML文档执行效果图TitleBody示例2：最基本的超文本文档运行效果图最基本的超文本文档源代码HTML和/HTML双标记HTML标记说明该文件是用HTML来描述的，它是文件的开头。/HTML则表示该文件的结尾。HEAD和/HEAD双标记这部分内容分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记是title/title，它用于定义网页的标题，它的内容显示在网页窗口的标题栏中。BODY和/BODY双标记网页中显示的实际内容均包含在这个正文标记之间。正文标记BODY中提供以下属性来改变文本的颜色及页面背景：bgcolor＝颜色，用于定义网页的背景颜色。backgrond＝url，用于定义网页背景图案的图像文件。text＝“……”，用于定义正文字符的颜色，默认为黑色。link＝颜色，用于定义网页中超级链接字符的颜色，默认为蓝色。vlink＝颜色，用于定义网页中已被访问过的超链接字符的颜色，默认为紫红色。alink＝颜色，用于定义被鼠标选中，但未使用时超链接的颜色，默认为红色。示例3：背景示例①代码htmlheadtitle网页标题/title/headbodybgcolor=23478atext=1ae2dflink=789dfealink=651ae2vlink=bca231p这是正文部分！/ppahref=2.htm这是链接部分！/a/p/body/html背景示例①代码运行效果图点击此处查看运行结果示例4：背景示例②运行效果图背景示例②源代码htmlheadtitle正文body标记示例/title/headbodybgcolor=#000000text=#FFFFFFlink=#FFFF00正文标记示例p请访问:ahref=搜狐主页/a/body/htmlHTML文件的创建HTML的格式非常简单，是由文字和标记组合而成的纯文本文件，几乎任何的文字编辑器，如Windows中的记事本、写字板都可以用来编写HTML文件，只需保存时修改其扩展名即可。使用记事本创建HTML文件启动WindowsXP，打开记事本窗口，即可编写HTML代码。当编辑完HTML文件后，选择菜单中的【文件】→【保存】命令，将它存为扩展名为.htm或.html的文件即可。然后就可以在浏览器中浏览网页。使用所见即所得的网页编辑工具创建HTML文件例如使用Dreamweaver，可打开其代码视图，在代码视图中输入HTML代码。输入代码完成后，可在设计视图中浏览效果。5.2.2页面布局与文字标记文本是网页传播信息的基本载体，在网页中的重要地位可想而知。对于任何一个基本网页来说，文本都是必不可少的，文本的格式化也是非常重要的。标题HTML中提供了相应的标题标记Hn。HTML总共提供6个等级的标题，n越小标题字号就越大。字号大H1…/H1一级标题H2…/H2二级标题H3…/H3三级标题H4…/H4四级标题H5…/H5五级标题字号小H6…/H6六级标题示例5：标题示例代码htmlheadtitle标题示例/title/headbody这是一行标题文字PH1一级标题/H1H2二级标题/H2H3三级标题/H3H4四级标题/H4H5五级标题/H5H6六级标题/H6/body/html标题示例代码运行效果图换行对于需要换行的地方，应加上Br标记，有了它浏览器会自动将右边的文字转移至下一行。请注意，Br是单标记。示例6：没有换行效果示例代码运行效果图没有换行效果示例代码htmlheadtitle没有换行示例/title/headbody第一阶段：2006年1月1日---2006年1月16日第二阶段：2006年1月17日---2006年2月6日第三阶段：2006年2月7日---2006年3月1日第四阶段：2006年3月2日---2006年3月11日/body/html示例7：换行效果示例代码运行效果图换行效果示例代码htmlheadtitle换行示例/title/headbody第一阶段：2006年1月1日---2006年1月16日br第二阶段：2006年1月17日---2006年2月6日br第三阶段：2006年2月7日---2006年3月1日br第四阶段：2006年3月2日---2006年3月11日/body/html段落标记为了使文本排列的整齐和清晰，文字段落之间常用P和/P来做标记。/P是可以省略的，因为下一个P的开始就意味着上一个P的结束。P标记还有一个属性ALING，它用来指明字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT3种。示例8：段落标记示例运行效果图段落标记示例代码htmlheadtitle段落标签/title/headbodyPALIGN=CENTER活动细则P一等奖1名5000元电脑P二等奖5名1100元音响/P/body/html示例9：段落标记与换行标记效果区分示例代码htmlheadtitle段落标记与换行标记效果区分/title/headbodyp这是正文部分！/pp这是正文部分！/pp这是正文部分！/p这是正文部分！br这是正文部分！br这是正文部分！br/body/html段落标记与换行标记效果区分运行效果图水平线段水平线对组织信息很有用。在页面上可以使用一条或多条水平线以可视方式分隔文本和对象。水平线标记为单标记Hr，它有以下几个属性：Size：水平线的宽度，默认值为１；Width：水平线的长，用占屏幕宽度的百分比或像素值来表示；Align：水平线的对齐方式，有LEFT、RIGHT、CENTER3种。Noshade：线段无阴影属性，为实心线段。示例10：水平线示例①运行效果图水平线示例1代码HTMLHEADTITLE线段粗细的设定/TITLE/HEADBODYP此线段没有size设定，取内定值SIZE=1来显示BRHRP设置此线段的SIZE=5BRHRSIZE=5P设置此线段的SIZE=10BRHRSIZE=10noshade/BODY/HTML示例11：水平线示例②代码HTMLHEADTITLE水平线示例2代码/TITLE