4.2.1网站的结构设计 (2).ppt

第五章网页及其制作工具,请你欣赏,浏览下列三个网站htttp:/,万维网上的网页表现形式丰富多彩，这些网页内容虽然千差万别，但都含有那些基本元素呢？,文本图形图像除了三种基本元素外，还经常使用表格、表单、音乐、动画等美化网页、丰富网页内容,超级链接,还有其他元素吗？,1、制作网页常用的工具,1、用“超文本标记语言”制作网页2、用网页制作工具软件制作网页FrontPage：功能强大、简单易用Dreamweaver：较为专业的网页设计软件,1、网页就是一个用HTML语言标记的文件。一张或多张网页链接在一起就形成了一个网站。2、浏览器的首页：打开浏览器出现的第一个网页。3、网站的首页（主页）：在一个网站上查找信息的起点。是一个网站最重要访问最频繁的网页。一个网站的首页的名称通常为index.htm或default.htm，不能用中文命名。,2、网页,5.1.1网页栏目的构成,显示在浏览器标题上的文字。,位于网站首页顶部的标志性图标，是站点特色和内涵的集中体现。,提高用户的吸引力。,页面的主体。,网站最新内容的列表或是推荐列表。,用来放置页脚导航条，版权信息和站点的联盟与赞助商。,与网站标志组成网页的顶部。,与用户交互的栏目。,作用是罗列网站的重要栏目。,5.1.2静态网页与动态网页,动态网页与静态网页的区别：,动态网页可以实现网页浏览者和网页设计者的交互，实现交互技术有两种：一种是客户端技术如常用的JavaScript和VBScript；另一种是服务器端技术如目前常用的ASP和PHP。(1)ASP(ActiveServerPages)(2)PHP(HypertextPreprocessor)(3)JSP(JavaServerPages),动态网页技术,(1)动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量;(2)采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等;(3)动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页;,特征,缺点1、首先动态网页在访问速度上不占优势动态网页首先获得用户的指令，然后网页拿着指令到数据库中找和指令相对应的数据，然后传递给服务器，通过服务器的编译把动态页面编译成标准的HTML代码，传递给用户浏览器，这样用户就看到了网页。问题出来了，每次访问网页都要经过这么一个过程，这一过程至少需要几秒钟的时间，访问的人数一多，页面的加载速度就会变慢，对服务器来说也是一种负担;从用户角度来说，网页加载的慢，迟迟没有反应，下次谁还会来访问你的网站。而静态网页就简单了，静态网页是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。由此可见，动态网页在访问速度上并不占优势。2、在搜索引擎收录方面并不占优势上面从服务器和用户体验的角度说了一下，下面再从搜索引擎收录角度说一下，动态网页是在用户输入指令后才形成的页面，并不存在这个页面，而搜索引擎只会抓取现成的，并不会自己输入，因此网站在搜索引擎收录方面并不占优势。搜索引擎还是喜欢静态页面。不过搜索引擎在不断完善发展。到目前为止，绝大多数的搜索引擎都已支持动态页面的抓取。,ASP工作流程使用不同技术编写的动态页面保存在Web服务器内，客户端用户向Web服务器发出的访问动态页面的请求；Web服务器根据用户所访问网页文件名的后缀来确定该页面所使用的编程技术，然后把该网页文件提交给相应的服务器组件程序；服务器组件程序执行脚本代码，然后把执行结果返回给Web服务器；Web服务器把执行结果连同页面上的HTML内容以及各种客户端脚本一同传送到客户端。,1、如何查看网页的html代码打开某个网页执行“查看”菜单中的“源文件”，系统会用“记事本”打开该网页的html代码。2、用html语言编写的网页是普通的文本文档，可以由任何文本编辑器来编辑（记事本、写字板、wps、word）,5.2网页的文件结构及支持技术,HTML是一种标记语言，用来对web页面中显示内容的属性以标记的形式进行描述。一个web页面就是一个HTML文档。,3、HTML语言的基本应用基本信息标记：HTML标记，表示文件为HTML文件，表示代码结束网页文件的头部信息。主体标记，放置网页主体内容网页标题，放置网页标题名,Html语句的表达方式：文件或超文本文件或超文本,文字设置标题级别align=left;align=right;align=center对齐方式字体设置（主要属性：size=”n”color=”#rrggbb”，face=”字体”。）粗体下划线斜体（3）表格设置表格标记表头表行单元格,（4）超链接设置通过文字链接到另一页面：链接文字通过图片链接到另一页面：（5）图片设置（6）背景音乐设置,（7）设置字幕字幕内容（8）框架设置（9）其他换行符段落标记水平线,4、CSS层叠样式表的简单使用，能读懂简单的CSS样式表代码，并能根据需要，选择适当的方式（内联样式表，外部样式表）和适当的层叠样式表，插入到当前网页的HTML代码中。内联样式表样式表CSS内容在body部分，如果要引用位于head部分的样式表，形式为：具体内容外部样式表,5、JavaScript的简单使用。能读懂常见的Javascript代码(如日期显示、下拉菜单、计数器、动态字幕、跟随鼠标的图片、跟随鼠标的滚动文本、标题栏里的闪烁效果等)，并能根据需要，选择适当的JavaScript代码插入到当前网页的HTML代码中。(1)和标记对。该标记对可以放在和标记对之间，也可以放在和标记对之间。可以在一个HTML文件中使用标记对任意多次。(2)指定脚本语言。例如:(3)插入JavaScript代码的方法。在和标记对之间插入JavaScript代码。,1、为了标识一HTML文件应该使用的HTML标记是（）ABCD2、下列关于HTML语言描述不正确的是（）A.FRONTPAGE是制作网页的软件，它和HTML无关B.HTML语言中可以嵌入如ASP、JAVA等编程语言.C.HTML语言是通过一系列特定的标记来标识出相应的意义和作用的D.HTML文档本身就是文本格式的文件,课堂练习,B,A,3、超文本标记语言“新浪网”的作用是（）A.创建一个指向新浪网的电子邮件B.插入一幅新浪网的图片C.创建一个指向新浪网的超级链接D.插入一段新浪网的文字4、HTML语言中，表格标记符是（）A.B.C.D.,C,D,5、下面哪个选项是客户端脚本语言?()A其他三项都是BFrontPage和DreamweaverCjavaScript和VBScriptDFLASH5.0和InternetExplorer6、在HTML中嵌入JavaScript,应该使用的标记是()。ABCD,C,C,7、张三用同一关键字为“信息技术考试”出现的网页与3天前他用相同关键字搜索到的网页不完全相同，这是因为该网站使用了()。A、动态网页技术。B、静态网页技术。C、域名解析技术。D、动态分配IP她址。8、下列关于ASP的工作原理说法正确的是()A、所有脚本代码均在客户端计算机中执行B、使用不同技术编写的动态页面保存在Web服务器内C、使用不同技术编写的动态页面保存在客户端计算机中D、Web服务器仅把脚本代码的执行结果传送到客户端,A,B,5.3常用的网页制作工具,1.网页编辑工具(1)超文本标识语言（HTML）(2)FrontPage简介(3)Dreamweaver2.网页图像编辑工具(1)Photoshop(2)Fireworks(3)Flash,1.网页编辑工具,(1)超文本标识语言（HTML）。是一种使用一些约定的标记对WWW上的各种信息进行标记的语言。(2)FrontPage2003。是一种“所见即所得”的网站管理和网页制作的工具。FrontPage2003属于Office2003家族的成员。(3)Dreamweaver。集网页制作和网站管理于一身，将“所见即所得”的网页设计方式与源代码编辑完美结合，在网站设计制作领域应用非常广泛。,(1)Photoshop。是Adobe公司开发的，是当今最流行的图形图象处理软件之一，它能够实现各种专业化的图像制作、处理及合成。(2)Fireworks。是由Macromedia公司开发的图形处理工具，它是第一个专门