项目三公开课教案教学设计课件资料.docx

导航的分类通常网页导航部分应服务于网页的整体布局和风格，根据网页的1OG0、Banner等安排导航中各个链接点的分布。良好的导航设计是提高网站可用性的有力措施，网站导航通常分为以下几个类型：(1)网站栏目导航。它为浏览者提供该网站的主要栏目板块导航。(2)站内功能服务导航。它为浏览者提供电子商务网站的功能服务。(3)产品分类导航。这是电子商务网站导航中展示产品和服务的部分。(4)当前位置导航。它标示浏览者当前所在位置，以避免浏览者迷航。(5)网站持有方信息导航。它是有关网站持有方信息的链接集群。导航条设计原则一般而言，导航条的主要功能和导航链接尽量不要超过10个。链接数量过多会使浏览者混乱,降低重要链接的点击率。所以要在链接数量的多少上取得平衡，同时要进行合理组织和规划,把握链接之中的重点和层次是设计的关键。网站链接与导航的设计要点：(1)对商务网站的导航进行适当的组织与分类(2)导航利于蜘蛛的识别，不用图片导航，优先选用文字导航。(3)导航栏目设置不宜过多，依据围绕网站主题的用户需求来定制，切记，放入相关性很低的栏目。如何让蜘蛛更容易抓取页面蜘蛛抓取是指搜索引擎爬取网站的记录。搜索引擎蜘蛛无时无刻不在互联网上爬行，抓取各种网页,但是搜索引擎蜘蛛再怎么努力,是不可能抓取互联网的所有页面的。既然蜘蛛不能完全抓取互联网的页面，那么蜘蛛所要做的就是尽量抓取内容重要且新鲜丰富的网页。那么哪些会被蜘蛛认为是比较重要或者是新鲜丰富的页面呢？1 .网站权重内容质量高、年龄大的网站,以及评估评价比较高的网站。这种网站上的页面被抓取的概率和蜘蛛抓取的深度一般都比较高，所要网站上的页面被抓取得比较多。2 .更新频率蜘蛛喜欢新鲜的内容，蜘蛛每次爬行都会把页面数据存储起来,如果再来的时候网站内容没有更新,那么蜘蛛以后就会减少来抓取的概率。3 .网站结构网站结构包括物理结构和逻辑结构，网站结构调整好了，蜘蛛爬来比较顺畅，所以会更受蜘蛛的喜爱。4 .导入链接数量与质量一个网站导入链接多,蜘蛛就会认为这个网站对人们有用，会给予很高的权重,抓取更多更深入的页面。5 .与首页点击距离网站的首页有大量的外部链接，内部链接也有大量的锚文本指向首页，并且更新的时候一般注重首页的更新，所以一般情况下首页的权重比较高，蜘蛛抓取的频率相应也高。“插入鼠标经过图像各选项含义图像名称:指鼠标经过图像的名称,这个名称必须设置，默认名通常为“Image1等原始图像:网页载入时的初始图像。鼠标经过图像:当将鼠标移动到原始图像时翻转的图像。预载鼠标经过图像:勾选则表示在网页加载时将翻转图像也同时载入，加快显示速度。替换文本:当网页所用图像不存在时，出现的替换文字。按下时，前往的UR1:插入的“鼠标经过图像”也可以作为链接对象，在鼠标放开时定UR1地址的网页。hover选择器:hover选择器用于选择鼠标指针浮动在上面的元素，而且:hover选择器可用于所有元素，不只是链接。a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式设置超链接样式时，：1ink选择器设置指向未被访问页面的链接的样式,：ViSited选择器用于设置指向已被访问的员面的链接，：active选择器用于活动链接。在超链接中设置鼠标悬停样式,在css定义中,:hover必须位于:IinkJsited之后(如果存在的话),这样样式才能生效。CSS选择符种类(Did选择符:定义方式为“id.""，id名称为网页中各元素唯一标识，在CSS定义中,id使用缈作为标识。(2)类(as)选择符:定义方式为“sss,网页中的多个元素都可以使用同一个c1ass定义。在css规则定义中,使用点符号加上c1ass名称作为标识。类型选择符:定义时直接使用XHTM1标签。(4)特殊选择符:如伪类，定义时以冒号开始，目前所有浏览器只支持a元素与超链接操作相关的4个伪类:a:Iink、a:ViSited、a:hover和a:active»CSS的三种使用方式1 .行间样式表行间样式表只需将CSS代码用分号隔开写在StyIe="”之中。这是最基本的形式，但是它没有实现表现与内容分离且不能灵活地控制多个页面，所以我们只是在调试CSS代码的时候使用。2 .内部样式表内部样式表与行间样式表相似都是把CSS代码写在HTM1页面中，稍微不同的是前者可以将样式表放在一个固定的位置，内部样式表编码是初级的应用形式，不能达到跨页面使用所以不适合使用。3 .外部样式表外部样式表是Css应用中最好的一种形式，它将css样式代码单独放在一个外部文件中,再由网页进行调用。多个网页可以调用一个样式文件表,这样能够实现代码最大限度的重用及网站文件的最优化配置。一个网站往往由多个网页文件组成，这就需要各个页面之间进行相互跳转,使网页形成一个有机整体。链接实现了网站内各面面间甚至不同网站间页面的相互跳转。超链接是指从一个网页指向另一个目标的连接关系，也可以理解为从一个网页跳转到另一个网页，还可以是同一网页的不同位置，可以是一个文件，一个部箱地址，张图片甚至是一个应用程序。超链接的分类按照连接路径的不同，网页中的超链接一般分为以下三种类型:内部链接、锚点链接和外部链接。内部链接是指同一网站域名下的内容页面之间互相链接。锚点链接是指同一页面内部的链接。常用于网页很长时，可以在网页适当位置插入"锚点,链接到“锚点”就可以快速到达指定位置。外部链接是指来自网站之外的链接，单击此类链接，会跳转到其他网站的页面,这类链接的地址通常是UR1地址。按照使用对象的不同，网页中的链接又可以分为:文本超链接、图像超链接、e-mai1链接、锚点链接、多媒体文件链接、空链接等。Dreanweaver软件中绝对相对路径区分网页中的路径大体可分为相对路径和绝对路径。绝对路径:指完整路径:不管源文件在什么位置,通过绝对路径都可以准确找到目标文档。缺点是当站点文件夹在同一道服务器上时，容易造成链接失败,通常只用于链接到其他站点的文件上。相对路径:利用文件夹的层次结构，指定从当前文档到所链接文件的路径。APDivAPDiV是一种能够随意定位的页面元素，如同浮动在页面里的透明层，可以将APDiV放置在页面的任何位置。由于APDiV中可以放置包含文本、图像或多媒体对象等其他内容，都会使用APDiv定位一些特殊的网页内容。CSS-P元素:在下拉框中设置APDiv的ID。左:设置APDiV的左边缘。输入一个数值,要带上单位px上:设置APDiv的顶部边缘。输入一个数值,要带上单位pxo宽:设置APDiv内容区域的宽度。输入一个数值,要带上单位pxo高:设置APDiv内容区域的高度。输入一个数值,要带上单位p×oZ轴:设置APDiv的层叠顺序。输入一个数值,不需要单位。可见性:设置APDiv是否可见。在下拉框中任选一项。默认defau1t（可见）,inferit（主用于嵌套的APDiV元素的父级上，表示继承父级的显示属性），ViSibIe（可见），hidden（不可见）。背景图像:设置APDiV的背景图像。直接输入图像的UR1地址，或者单击“文件夹”按钮,选择图像文件。背景颜色:设置APDiv的背景颜色。溢出:设置APDIv的内容超过其指定高度及宽度时处理的方式。剪辑:对APD1V包含的内容进行剪切。包括“左、右、上、下”项，可以分别输入一个数值，要带上单位px.行为面板的“显示.隐藏元素”“显示隐藏元素”行为可以显示、隐藏或者恢复一个或多个页面元素的默认可见性。主要用于在用户与页面进行交互时显示信息。行为面板行为由事件加动作组成,通过行为（在网页中进行的一系列动作），可实现与浏览者的交互，而这些交互只靠HTM1代码是无法做到的。事件由浏览器所定义，针对各种页面元素，如鼠标单击、指定键按下等。动作(action)是一段已经编好的JaVaSCriPt代码，用来完成某种特殊任务(如播放动画、显示提示信息等)，由事件触发。一般创建行为有三个步骤：选择对象、添加动作、调整事件。在DreamWaeVer软件中，对行为的添加和控制主要通过“行为”面板来实现。选择窗口/行为命令,打开行为面板。单击“+”按钮，打开动作菜单，添加行为;单击“一”按钮，删除行为。添加行为时，从动作菜单中选择一个行为项。单击事件列右方的三角形，打开事件菜单，可以选择事件。单击向上箭头或向下箭头，可将动作项向前移或向后移，改变动作执行的顺序。spry构件spry构件是一个页面元素,通过启用用户交互来提供更丰富的用户体验。SPry构件由以下几个部分组成：构件结构:用来定义构件结构组成的HTM1代码块。构件行为:用来控制构件如何响应用户启动事件的JaVaSCript。构件样式:用来指定构件外观的CSSoSPry构件包括验证文本城、验证文本区城、验证选择、验证夏选框、SPry菜单栏、spry选项卡面板、Spry折叠式面板、SPry可折叠面板等。下面介绍几项在网页导航中常用的Spryu1MenuBarHorizontaIa.MenuBarItemSubmenuHovert¾yf<)(1)spry莱单栏是一组可导航的菜单按钮，当将鼠标悬停在其中的某个按钮上时,将显示相应的子菜单。(2) SPry选项卡式面板构件:用来将内容存储到紧凑空间中。站点浏览者可以通过单击要访问面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当浏览者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩(3) SPry折叠式构件:可以将大量内容存储在一个紧凑的空间中。站点浏览者可通过单击该面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当浏览者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩。(4) 可折叠面板构件:可将内容存储到紧凑的空间中。浏览者单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。spry菜单组件的css样式1)SPry菜单项的文本样式要更改的样式垂直或水平菜单栏的CSS项目相关属性和默认值默认文本I.MenuBarVertica1aU1MenuBarHorizontaIaco1or:#333textdecoration:none当鼠标指针移过文本上方时，文本的颜色u1.MenuBarVertica1a:hover、U1MenuBarHorizontaIa:hoverco1or:#FF具有焦点的文本的颜色u1.MenuBarVertica1a:focus>U1MenuBarHorizontaIa:focusco1or:#FFF当鼠标指针移过菜u1.MenBarVertica1a.MenuBartemHover>co1or:#FFF单栏项上方时，菜单栏项的颜色U1pMenuBarHorizontaIa-MenuBarItemHover当鼠标指针移过子菜单项目上方时，子菜单项的颜色u1.MenuBarVertica1a.MenuBarItemSubmenuHover、U1MenuBarHorizontaIa.MenuBarItemSubmenuHoverco1or:#FFFm2)SPry菜单项的背景颜色要更改的颜色垂直或水平菜单栏的CSS规则相关属性和默认值默认背景u1.MenuBarVertica1aU1MenuBarHorizontaIabackground-co1or:#EEE当鼠标指针移过背景上方时，背景的颜色u1.MenuBarVertica1a:hover、U1MenuBar