HTML框架制作导航
HTML框架制作导航
本节单词记忆:属性 1.target 2._blank 3._self 4._top 5._parent
网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的。
在上节作业中,如果单击left窗口中的导航列表超链接(如“注册&认证”、“买家帮助”等),在right窗口中显示链接的页面内容,其实这就是典型的导航页面,该如何实现?这就需要使用标签中的name属性和标签的target属性。
target目标窗口属性分为两类:一类是框架页面之间的链接;另一类是4个特殊窗口的超链接。
1.框架页面之间的链接
要设置框架之间的超链接,需要两步:
第一步:设计好框架集页面,并为每个框架窗口定义名称。https://www.360docs.net/doc/c35309148.html,
如:
第二步:设置导航栏中的超链接的target目标窗口属性,使其值为框架窗口的名字。
下面我们就在上节示例的基础上,来实现框架之间的超链接。
示例1:
首先根据需要,创建好框架集页面,然后为每个框架窗口定义名称。设置框架集页面(frame Sets.html)的代码如下:
下面设置导航页中的超链接,也就是设置示例1 1中left.html中的超链接,最关键的是将导航页中的各个链接图片或文字的目标打开方式设置为在框架中打开,即将target属性值设为框架窗口的名字。
由于left.html文档中有多个超链接,而且为了说明框架之间的链接,所以我们先准备几个链接页面,如:buy.html、sale.html、person_info.html。
设置了框架之间链接的left.html文档代码如下:
/>
/>
/>
设置左侧导航栏的超链接之后,使用浏览器打开frame Sets.html文档,运行效果如图1所示。
单击框架导航栏中的链接图片“买家帮助”,将会打开如图2所示的页面效果。同理,单击“卖家帮助”和“个人资料修改”超链接,在内容区都会打开相应的HTML文档页面。
图1 框架页面的默认显示页面
图2 在框架窗口中打开“买家帮助”介绍页面
2.4个特殊的窗口
在制作网页中的超链接时,默认情况下超链接会在当前窗口中打开。通过使用target属性,可以将目标页面在一个新的窗口中打开。
语法:
其中,target属性可以取4个值,这些值的具体含义见下表。
属性说明
_blank新启一个窗口打开链接
_self在同一个窗口中打开,默认取值(指没有设置target属性值时的情况)
_parent在上一级窗口中打开(框架页面中使用较多)
_top在整个浏览器窗口中打开
示例2:
/>
/>
/>
图3 打开了一个新窗口
本章总结
● 表单主要用来制作动态网页,方便和用户进行交互。例如:会员注册、购物订单、调查问卷、搜索等页面都会用到表单。
● 常用的表单元素有:文本框(text)、密码框(password)、单选按钮(radio)、复选框(checkbox)、列表框 (
● 一个框架结构是由两部分组成的:框架集(FRAMESET)和框架(FRAME)。
● 框架集(FRAMESET)页面被划分的区域多少是通过属性rows和cols来设置的。
● 网页中超链接目标页面的打开方式有5种,可以通过target属性来设置。
本节作业:
制作如下图网页。
注意事项:
1.框架制作导航对于新手还是较为复杂的,先要理清思路再来制作。
2.注意框架导航是多个网页,分清各个网页的关系和作用。
3.关键是导航中的中target一定要指定右边框架name属性的值。
网页学习网提示:光看教程是无法让你掌握HTML知识,最好是完成作业后才进入下一次教程,动起手来吧!
点击下载第三章案例及作业资源返回《HTML入门经典》教程列表
转载请注明本文地
址:https://www.360docs.net/doc/c35309148.html,/html/jc/506.html
10个导航栏的设计技巧
10个导航栏设计技巧 想要全面掌握UI设计技能,需要自己付出更多的努力,除了专业的学习,在平常还要多看书,多动手,进行一些实践训练,这样才能更好地提升自己的能力,在工作中游刃有余,推荐10个导航栏设计技巧,希望对学习UI的你有所帮助! 1、超大菜单栏 即使许多设计师不喜欢这样的设计,但是对于许多客户而言,它依然是一个客户反响很好的设计方案。 不过过大的导航栏可能还是存在一些可用性问题的。通常,超大的导航栏存在的主要原因在于,导航栏项目很多难以缩减。对于网站的运营者而言需要仔细考量这件事情,或者通过搜集来的数据来做设计决策的论据。 2、加入显眼的搜索框 用户常常使用搜索来筛选信息,更快更直接地获取重要的信息,所以,搜索框应该突出展示。它应该出现在每个页面上,应该和主导航栏一起存在,应该够大也易于访问。 用户对于搜索的需求是刚性的,不要试图打破这种客观存在的规律,尽量让搜索融入到主导航当中来吧。(确保输入框足够大,可以输入,并且足以一次显示常见的搜索内容) 3、限制导航内条目数量 作为设计师,你需要预测用户经常访问的内容,将最重要、最常用到的条目置于导航栏当中。值得一提的是,几乎每个网站的导航中都会包含搜索、关于我们、首页,而电商类网站则通常会包含购物车、购买的按钮。 但是无论如何,永远将最关键、最重要的导航类目让用户看到,才是导航所应该做到的事情,换句话来说,就是关键内容驱动导航分类。
4、更聪明的导航机制 好的导航设计,能让用户能在页面和页面之间合理快速切换,网站不同的内容和功能之间是有一定的自然逻辑的,这个自然逻辑可以作为导航设计的一个重要参考。 在这个用户体验高度个性化的时代,网页导航的玩法可以更加多样。以Amazon 为例,当你登录了之后,会发现导航开始围绕着你的信息进行了调整,导航栏从通用的条目变为更贴近你的个人情况的样式,其中包括最近的购买记录,信用额度和Amazon 的服务信息等。 5、正确地排布导航内的条目 导航内的元素的排布顺序和条目内容同样重要。导航栏两头的条目是最引人注意的,并且也通常是用户点击最多的,所以作为设计者,你需要特别注意这些条目的设计。 对于这一点,还有不少科学研究和理论支持。比如,序列位置效应指的就是人会更容易记住列表的开头和结尾的条目。新近效应说的是用户更容易记住最新看到的条目,而首位效应说的是,相比于列表中间的内容,用户更容易记住列表开头的几个条目。 6、垂直导航 垂直导航设计也是目前越来越流行的设计之一。最常见的是垂直导航,是侧边栏导航,它和许多软件的UI设计不谋而合。侧边栏导航对于如今的许多网站是个合理的选择,尤其是诸如长滚动式的页面。 侧边栏导航通常为常驻式的,让用户可以随时定位,快速跳转,并且其中所能承载的元素相对比顶部导航更多。垂直导航尤其要注意条目之间的空间间隔。 7、长滚动页面上使用悬浮导航 对于长滚动页面而言,导航设计是否可靠是一件颇为重要的事情,无论导航是在顶部、侧边栏还是在底部,它最好能够悬浮置顶,不论用户滚动到哪个
如何做好网站导航设计
如何做好网站导航设计集团档案编码:[YTTR-YTPT28-YTNTL98-UYTYNN08]
是网站中一个很重要的因素,一个合理的导航设计不但利于搜索引擎优化,还对提升用户体验至关重要,迅速了解自己所处的位置,这对提高用户的转化率十分有用。在中做好各类导航设计对网站后期的优化推广十分有利。那如何做好网站导航设计 1、辅助网站指引用户 为了给用户提供直观的显示,让用户知道他们所处的位置,以便每个级别的位置名称都可以链接,每个页面必须包含辅助导航和站点的左上角的logo标识。 2、网站logo 在中,指向网站主页的链接将添加到站点logo出现的每个站点上,很多用户习惯于单击网站logo作为返回网站主页的标记。 3、导航跳跃的位置 主导航栏应位于顶部附近,或位于站点左侧。如果需要子导航,因为内容太多,用户可以容易地告诉哪个是主导导航栏,哪个是某个导航的辅助导航栏。 4、导航的简单性 在时,尽量简单,避免使用下拉菜单导航或弹出菜单导航,因为导航不是网站的主流,它只是网站的指南。主要功能是让用户在网站上迷路,可以快速找到方向,这对用户来说是方便的,而不是给用户增加负担。 5、网页指示 用户应该知道网页现在是什么,现在浏览网页的相关网页是什么,例如,例如通过辅助导航“首页→新闻频道→新闻全名”里面的对所在网页位置的文字说明,同时配合导航的颜色高亮,可以达到视觉直观指示的效果。 6、页面提示 有些网站有太多的信息,此时让用户浏览和没有浏览区别,最简单的方法是让已经浏览过的网页被浏览,如果不是在一个统一的网页锚文本页面中,你可以显示用户已经在其他地方已经浏览过的内容。 7、登录并退出 登录入口和退出登录出口可在整个站点的每个页面上使用,允许用户登录和退出任何网页。
实验八 制作网页导航条
实验八制作网页导航条 使用实验八给的实验素材建立站点文件夹,然后制作如下的导航条。 一、利用列表制作垂直方向的导航栏 步骤: 1.在站点中新建nav01.html,页面设置如下。 2.在“插入”菜单中选择“Div”命令,在弹出的对话框中设置如下: 3.在插入的Div标签中输入如下段落文字,给文字设置空链接并应用项目列表, 如下图所示效果: 4.打开【CSS样式】面板,新建以下CSS规则,保存在当前文档,具体设置如 下: 1)新建“ID”的样式#navigation,属性设置如下: 2)新建“复合内容“样式#navigationul,属性设置如下: 3)新建“复合内容”样式#navigation li ,属性设置如下
4)新建“复合内容”样式#navigation li a ,属性设置如下 5)新建“复合内容”样式#navigation li a:hover ,属性设置如下 6)保存并预览该页面,最终效果图如下: 7)可修改其中相应样式的属性,将导航菜单变为水平排列的菜单,操作参 考如下: 选择【CSS样式】面板中的#navigation样式,将【方框】分类中的“width”属性改为600px。
选择【CSS样式】面板中#navigationli样式,将【方框】分类中的“width”属性设置为100px。“float(浮动)”属性设为:left(左对齐),单击【应用】按钮查看效果。继续将“margin”的右right、左left属性分别设为5px,单击【应用】按钮查看效果。最后单击【确定】按钮,则可看到垂直导航菜单变为水平导航菜单。 二、制作垂直方向的导航栏 在Dreamweaver CC打开实验素材文件夹中的nav02文件夹中的nav02.html 文件,将图1左侧竖排的导航栏制作成如2的效果: 图1 初始竖排导航栏图2 导航栏最终效果
如何有效利用dw制作漂亮的导航栏效果
目录 目录 (1) 增加新框架 (1) 如何有效利用dw制作漂亮的导航栏效果 (1) 建立CSS 导航代码 (6) Dreamweaver网页设计技巧 (7) 怎样用Dreamweaver制作导航栏下拉菜单 (11) 增加新框架 如何有效利用dw制作漂亮的导航栏效果 最近论坛中很多网友问到各种菜单和导航的制作方法,下面我们就网上常见的一些菜单和导航效果做简单的介绍。考虑到满汉全席的菜单应该是最全的了,我们就以此为名,来顿super大餐。Let’s Go! 一、进门点心:利用Dreamweaver MX制作最基本的下拉菜单 实现下拉菜单的思路是首先建立一个相对定位的层,调整其位置,并设置其显示属性为隐藏,然后通过给链接文本或图象添加onclick(点击)或者onmouseover(鼠标划过)的事件来触发“显示-隐藏层”的行为,显示隐藏的层,并且在鼠标划出层时隐藏层,实现下拉菜单的完整效果。下面介绍在Dreamweaver中的具体操作步骤: 1.使用菜单在页面中插入一个层,这个层是相对定位的层,然后再在其中插入一个子层,因为子层的位置是相对于父层而言,所以只要父层的位置不发生变化,改变子层的位置和大小不会改变其相对性,效果如图1所示。 图片如下: 图1 为了父层不占据页面空间,可以设置其宽和高为0,因为以后要调整子层的位置,所以先不设定子层的显示属性为隐藏,而是到确定子层到合适位置后再设置。
2.选中导航条上的链接文本。使用快捷键Shift+F3激活行为面板,单击行为面板中的加号按钮,在弹出的行为下拉菜单中选择“显示-隐藏层”,在弹出的设置对话框中选中子层,单击显示按钮,如图2所示。 图片如下: 图2 显示层 设置完毕后单击确定按钮,修改其触发事件为onmouseover,即当鼠标划过文本时显示层。接下来还需要设置鼠标划出文本后的行为,继续使用行为面板,选择“显示-隐藏层”,在弹出的对话框中选中子层,单击隐藏按钮,如图3所示。 图片如下: 图3 隐藏层 设置完毕后单击确定按钮,在行为面板中修改该行为的触发事件为onmouseout,即鼠标划出时隐藏子层。 3.拖动子层,调整其位置到和导航条贴近并垂直位于导航文本的下方的位置。层在编辑页面中的位置和在浏览器页面中的位置是有差异的,所以需要多次调整并在浏览器中预览效果,只到达到合适的位置。 4.设置子层的显示属性为隐藏。 按F12键在浏览器中预览页面,下拉菜单效果如图4所示。 图片如下:
DIV+CSS网页布局技巧实例
DIV+CSS网页布局技巧实例1:设置网页整体居中的代码
DIV+CSS网页布局技巧实例4:使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 注意:在同一个CSS配置节中,不要交错使用全写和缩写的颜色配置,在系统资源极低时,会导致浏览器渲染失败。 盒尺寸 通常有下面四种书写方法: ?property:value1; 表示所有边都是一个值value1; ?property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 ?property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3 ?property:value1 value2 value3 value4; 四个值依次表示top,right,bottom, left 方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:margin:1em 0 2em 0.5em;
边框(border) 边框的属性如下: ?border-width:1px; ?border-style:solid; ?border-color:#000; 可以缩写为一句:border:1px solid #000; 语法是border:width style color; 背景(Backgrounds) 背景的属性如下: ?background-color:#f00; ?background-image:url(background.gif); ?background-repeat:no-repeat; ?background-attachment:fixed; ?background-position:0 0; 可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是background:color image repeat attachment position; 你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:?color: transparent ?image: none
基于CSS技术的网页导航栏制作
基于CSS技术的网页导航栏制作 摘要:CSS的开发技术已成为现如今网页前台开发的主要应用技术,导航栏作为整个网站的向导,用途至关重要,基于CSS技术开发的导航栏能在各类浏览器中正常使用,解决了浏览器不兼容的情况,从而解决了网页开发的难题。 关键词:CSS;网页制作;导航栏;浏览器兼容 对网页前台设计师而言,网页的兼容性至关重要,用户的体验是设计师设计的出发点,随着浏览器的更新,许多网页的导航栏无法正常使用,导致网站浏览异常,使得网页需要频繁地更新维护。而使用CSS技术进行开发的网页导航栏,在多个浏览器中都可正常使用,并且还能在网页开发中广泛应用。 1 CSS简介 1.1 CSS概述 CSS(Cascading Style Sheet,层叠样式表)是用于控制网页元素显示样式的标记语言,是目前流行的网页设计技术,与传统使用的HTML技术布局网页相比,CSS可以实现网页分离,同一个网页应用不同的CSS,会呈现不同的效果的特点。同时,CSS可以支持几乎所有的字号和字体,对网页中的对象可以进行精确到像素为单位的排版,是目前最主流的
设计语言之一,并且具有较强的易读性,可针对各类人群。 1.2 CSS语法 CSS样式表分为嵌入式样式表、外部样式表和内联样式表3种,其中,优先级:内联式>嵌入式>外联式,本文所采用的主要为外部样式表设计,更加方便应用、修改。 CSS基本语法:td{ text-align:center;},td为选择器,text-align为属性,center为值。期中,选择器分为类选择器、标签选择器、ID选择器和复合内容,属性与属性值之间使用“:”隔开,多个属性之间使用“;”隔开。 2 CSS技术的导航栏制作 2.1 使用Photoshop设计导航栏美工 在使用CSS制作网站导航栏之前,首先使用Photoshop 制作网站导航栏的美工设计,根据网站整体风格以及色彩搭配,设计好网页所需的一级菜单和二级菜单的图片样式。要注意视觉区域的划分、重点主题突出等特点。并且使用Photoshop保存出透明无底色的背景图片作为备用,以我校实验教学部网站为例(见图1-2)。 2.2 使用CSS和表格布局制作导航栏初步结构 使用DIV+CSS的布局方式设置导航栏的位置,布局好整体架构,并使用表格的布局方法完成导航栏内部文字的布局设计。代码如图3所示。 设置ID选择器dh和类选择器mainMenu属性,完成导
html,表格,空隙
竭诚为您提供优质文档/双击可除 html,表格,空隙 篇一:html表格布局实例 [html]表格布局之实例版 |[>] 前面我们讲了html表格的基础知识,今天我们通过一个实例让大家更清晰的了解下表格的用途。 例如:我们做一个简单的网站布局,代码如下: bordercolor="#00ff99"> 网站名称 网站标题 搜索框 左边 中间 右边
网站底部信息 产生如下的表格: 这是一张整体的表格,第一行和第四行分别跨度了三列,这里用 colspan="3"来限制,而第二行的“搜索框”占用了两 列的位置,用colspan="2"控制;align="center"是对表格 内文字的对齐限制,center表示中间,right表示靠右,left 靠左。 表格的基础设置,可以参考: [html]利用表格规划网站布局 [html]如何制作多行多列的表格 [html]设定表格的尺寸和边框 如果你现在可以根据自己的想法制作出一个表格了,那么你就是向自己制作模板迈近了一步。^o^ 表格布局现在仍然很多人在用,方便实在。 网页设计现有两种布局方法,一种即是表格布局,另一种是现在w3c极力推荐的css布局。不过,就目前来说,由于xhtml并未完全占据主流,表格布局依然是大多数网页设计师的首选。
你所描述的问题属于表格的对齐问题,解决方式有以下几种: 如果两个表格的宽度不一致,那么选择默认的对齐方式,也即左对齐,在html中的标签和属性是:就能实现左边对齐。你现在出现的问题有可能是第一个表格设置了对齐方式,例如居中对齐,而第二个表格并没有设置对齐方式,所以默认为左对齐,这样就出现了上述问题。 我的一些表格布局的经验: 1、表格布局第一步:先插入一个表格,宽度是760-780px (记住,一定要用px,不要用百分比),高度不用设置,然 后令这个表格居中。以后所有的内容都限制在这个表格中。 2、熟练使用表格嵌套。也就是说,在一个表格中再插 入另一个表格。举个例子,把你要设计的页面分成大的几个部分,然后利用表格的行数和列数来控制它们的布局,如果某一个单元格中的内容又要分成几部分,可以继续在这个单元格中插入表格,方法同上。 3、补充:表格的边框一定要为0,即table中的border 属性值为"0"。也就是让表格在网页预览中不可见,这样才 能实现表格布局的目的。 如何利用表格实现画中画,也就是页中页效果 网页的排版大多使用表格,利用一个表个单元可以嵌入一个网页,你知道吗?这样做有很多好处,比如你把经常更
第十天 div+css网页标准布局实例教程(一)
第十天div+css网页标准布局实例教程(一) 今天学习《十天学会web标准(div+css)》的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的完成,整个流程下来,希望能对各位有所帮助。由于本节内容较多,将分三部分来讲解。 建立站点 结构分析 搭建框架 切割效果图 布局页面——头部和导航 布局页面——侧边栏 布局页面——主体部分 底部和细节调整 相对路径和相对于根目录路径 一、建立站点 前面的课程都是零碎讲解一些相关知识,那么要做一个网站,首先需要建立一个站点。那么什么是站点,为什么要建立一个站点呢?因为网站不同于其它文件,比如一个图片,放到哪个盘哪个目录下都可以访问。而网站是许多文件相互关联的,所以要专门一个目录把它们分门别类存放起来。如果搞过视频编辑的朋友都知道,需要先建立一个工程,把原始的视频文件、图片素材分类放好,也是这个道理。下面以在D盘建立一jiaocheng文件夹为例,在dreamweaver(简称DW)里创建一个站点指向这个文件夹,然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。
保存后,一个站点就建立起来了,我用的是DW cs5版本,不同版本界面有所不同。如果要连接FTP,需要设置服务器选项(后面会涉及到)。站点建立好后,我们先建立一个images和css文件夹,分别用来存放图片和css文件。直接在windows的资源管理器下建立或者在dw里建立都是可以的;在dw建立需要在文件面板列表的根目录上点击右键,选择新建文件夹后更改名字即可。
网页导航设计的常见样式
网页导航设计的常见样式 导航是指引用户找到自己所需内容的一个入口,对于导航栏目的设计,自然也有一套方法。让用户能够快速、便捷的找到所需,让用户能够清晰明了的了解到导航条的内容,让用户能够青睐于导航栏目结构的设置,从视觉上做到醒目的效果。 对于导航栏目的最佳设计就是采用文本链接的方式,文本链接方式便于人们了解,直接的看到内容,更醒目,提高了网站的易用性。对用户来说,易用,易理解,易操作的网站比较重要,而那些因为花哨而制作的导航栏目是不会受用户所喜爱的。 在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式,可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了流行的站点导航设计模式。对于每一种网站导航栏设计模式,我们将讨论它的一般特征,它的缺点,以及什么时候使用它最好。 顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单,且最通常地放在网站所有页面的网站头的直接上方或直接下方。顶部水平栏导航设计模式有时伴随着下拉菜单,当鼠标移到某个项上时弹出它下面的二级子导航项。顶部水平栏导航一般特征:导航项是文字链接,按钮形状,或者选项卡形状,水平栏导航通常直接放在邻近网站logo的地方,它通常位于折叠之上。 顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包 含的链接数。对于只有几个页面或类别的网站来说,这不是什么问题,但是对于有非常复杂的信息结构且有很多模块组成的网站来说,如果没有子导航的话,这并不是一个完美的主导航菜单选择。 顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常 好的。这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时,这种设计模式可以支持更多的链接。 竖直/侧边栏导航,侧边栏导航的导航项被排列在一个单列,一项在一项的上面。它经常在左上角的列上,在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究,左边的竖直导航栏比右边的竖直导航表现要好。侧边栏导航设计模式随处可见,几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一,可以适应数量很多的链接。它可以与子导航菜单一起使用,也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。侧边栏导航的一般特征:文字链接作为导航项很普遍(包含或不包含图标),很少使用选项卡(除了堆叠标签导航模式),竖直导航菜单经常含有很多链接。
html信息显示模板
竭诚为您提供优质文档/双击可除 html信息显示模板 篇一:html表格布局实例 [html]表格布局之实例版 |[>] 前面我们讲了html表格的基础知识,今天(html信息显示模板)我们通过一个实例让大家更清晰的了解下表格的用途。 例如:我们做一个简单的网站布局,代码如下: bordercolor="#00ff99"> 网站名称 网站标题 搜索框 左边 中间 右边
网站底部信息 产生如下的表格: 这是一张整体的表格,第一行和第四行分别跨度了三列,这里用 colspan="3"来限制,而第二行的“搜索框”占用了两 列的位置,用colspan="2"控制;align="center"是对表格 内文字的对齐限制,center表示中间,right表示靠右,left 靠左。 表格的基础设置,可以参考: [html]利用表格规划网站布局 [html]如何制作多行多列的表格 [html]设定表格的尺寸和边框 如果你现在可以根据自己的想法制作出一个表格了,那么你就是向自己制作模板迈近了一步。^o^ 表格布局现在仍然很多人在用,方便实在。 网页设计现有两种布局方法,一种即是表格布局,另一种是现在w3c极力推荐的css布局。不过,就目前来说,由于xhtml并未完全占据主流,表格布局依然是大多数网页设
计师的首选。 你所描述的问题属于表格的对齐问题,解决方式有以下几种: 如果两个表格的宽度不一致,那么选择默认的对齐方式,也即左对齐,在html中的标签和属性是:就能实现左边对齐。你现在出现的问题有可能是第一个表格设置了对齐方式,例如居中对齐,而第二个表格并没有设置对齐方式,所以默认为左对齐,这样就出现了上述问题。 我的一些表格布局的经验: 1、表格布局第一步:先插入一个表格,宽度是760-780px (记住,一定要用px,不要用百分比),高度不用设置,然 后令这个表格居中。以后所有的内容都限制在这个表格中。 2、熟练使用表格嵌套。也就是说,在一个表格中再插 入另一个表格。举个例子,把你要设计的页面分成大的几个部分,然后利用表格的行数和列数来控制它们的布局,如果某一个单元格中的内容又要分成几部分,可以继续在这个单元格中插入表格,方法同上。 3、补充:表格的边框一定要为0,即table中的border 属性值为"0"。也就是让表格在网页预览中不可见,这样才 能实现表格布局的目的。 如何利用表格实现画中画,也就是页中页效果 网页的排版大多使用表格,利用一个表个单元可以嵌入
83网站导航栏制作案例
本案例将练习 Dreamweaver 中行为的使用。案例的制作思路: (1) 向预留的导航栏位置插入嵌套表格。 (2) 插入导航栏图片。 (3) 对图片添加“交换图像”行为,使得鼠标移到图片上时文字发光,如图所示,鼠标移开图片时文字恢复,如图所示。 图鼠标移到导航栏上 图鼠标从导航栏移开 在介绍案例的具体实现之前,先来介绍相关的知识。 8.3.1 行为概述 Dreamweaver 提供了一种称为“行为”的机制,帮助用户构建页面中的交互行为。行为,就是在网页中进行一系列动作,通过这些动作实现用户与页面的交互,是一个带有面向对象设计思想的工具。事实上,行为是由预先书写好的JavaScript 代码构成的,使用它可以完成诸如弹出浏览器窗口、显示-隐藏元素等任务。利用Dreamweaver 中的行为,不需要书写代码,就可以实现丰富的动态页面效果。 行为有 3 个重要的组成部分:对象、事件和行为。
对象是产生行为的主体,许多网页元素都可以成为对象,如图片、文字、多媒体文件等。 事件是触发动态效果的条件,它可以被添加到各种页面元素上,也可以被添加到 HTML 标记中。不同的浏览器支持的事件种类和数量不一样,通常高版本浏览器支持更多的事件。 行为通过动作来完成动态效果。例如,弹出信息、改变属性、交换图像等都是动作。动作是一段JavaScript 代码,在Dreamweaver CS3 中使用内置的行为,系统会自动往页面中添加JavaScript 代码,用户完全不必自己编写。Dreamweaver 内置了很多行为动作,形成一个JavaScript 程序库,用户还可以到官方网站下载并安装更多的行为。另外,如果精通JavaScript 语言,也可以编写自己的行为,添加到Dreamweaver CS3 中。 选择“窗口”→“行为”可以显示“行为”面板。在网页中添加行为时,首先需选择要添加行为的对象,然后在“行为”面板中单击按钮打开“动作”菜单,如图所示。因为浏览器版本或选择对象的不同,在“动作”菜单中有些选项呈灰色状态,表明当前情况下不能使用该动作。设定好动作以后还需要在“行为”面板中选择相应的事件,如图所示。
html网页布局模板
1 html笔记 一、HTML的概述(了解) a.html是什么: hypertext markup language 超文本标记语言 超文本:音频,视频,图片称为超文本。. 标记:<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成。 b.作用:编写HTML页面。 c.HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程). HTML页面直接由浏览器解析执行。 二、HTML的历史(了解) 三、HTML的网络术语(明白) * 网页:由各种标记组成的一个页面就叫网页 . * 主页(首页) : 一个网站的起始页面或者导航页面 . * 标记:称为开始标记 称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。 * 元素:内容 称为元素. * 属性:给每一个标签所做的辅助信息。 * xhtml:符合XML语法标准的HTML。 * dhtml:dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml * http:协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议,ftp:文件传输协议.
四、HTML的编辑工具(了解) *.notepad 记事本 *.editplus : 语法高亮显示 技巧:根据颜色判断单词是否出错。(不是100%) *.ultraedit : 根据颜色判断单词是否出错,可以显示2进制数据. *.dw(dreamweaver,专业工具) 代码提示. 五、HTML的规范(知道) *.HTML是一个弱势语言 *.html 不区分大小写 *.html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符,比如dos系统) *.html 的结构 1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。是HTML5标准。 2)head部分:不会显示在页面上。作用是告诉浏览器一些页面的额外信息。 3)body部分:我们缩写的代码必须放在此标签內。 六、HTML的各种标签(掌握) 明确:每个标签都有私有属性。也都有公有属性。 html中表示长度的单位都是像素。HTML只有一种单位就是像素。 body: bgcolor: 背景颜色 background:背景图片
网页设计-导航条
顶部水平栏导航 顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单,且最通常地放在网站所有页面的网站头的直接上方或直接下方。 顶部水平栏导航设计模式有时伴随着下拉菜单,当鼠标移到某个项上时弹出它下面的二级子导航项。 顶部水平栏导航一般特征 导航项是文字链接,按钮形状,或者选项卡形状 水平栏导航通常直接放在邻近网站logo的地方 它通常位于折叠之上
顶部水平栏导航的缺点 顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说,这不是什么问题,但是对于有非常复杂的信息结构且有很多模块组成的网站来说,如果没有子导航的话,这并不是一个完美的主导航菜单选择。 何时使用顶部水平栏导航 顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时,这种设计模式可以支持更多的链接。 竖直/侧边栏导航 侧边栏导航的导航项被排列在一个单列,一项在一项的上面。它经常在左上角的列上,在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究,左边的竖直导航栏比右边的竖直导航表现要好。 侧边栏导航设计模式随处可见,几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一,可以适应数量很多的链接。
它可以与子导航菜单一起使用,也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。侧边栏导航的一般特征 文字链接作为导航项很普遍(包含或不包含图标) 很少使用选项卡(除了堆叠标签导航模式) 竖直导航菜单经常含有很多链接
如何做好网站导航设计
是网站中一个很重要的因素,一个合理的导航设计不但利于搜索引擎优化,还对提升用户体验至关重要,迅速了解自己所处的位置,这对提高用户的转化率十分有用。在中做好各类导航设计对网站后期的优化推广十分有利。那如何做好网站导航设计? 1、辅助网站指引用户 为了给用户提供直观的显示,让用户知道他们所处的位置,以便每个级别的位置名称都可以链接,每个页面必须包含辅助导航和站点的左上角的logo标识。 2、网站logo 在中,指向网站主页的链接将添加到站点logo出现的每个站点上,很多用户习惯于单击网站logo作为返回网站主页的标记。 3、导航跳跃的位置 主导航栏应位于顶部附近,或位于站点左侧。如果需要子导航,因为内容太多,用户可以容易地告诉哪个是主导导航栏,哪个是某个导航的辅助导航栏。 4、导航的简单性 在时,尽量简单,避免使用下拉菜单导航或弹出菜单导航,因为导航不是网站的主流,它只是网站的指南。主要功能是让用户在网站上迷路,可以快速找到方向,这对用户来说是方便的,而不是给用户增加负担。 5、网页指示 用户应该知道网页现在是什么,现在浏览网页的相关网页是什么,例如,例如通过辅助导航“首页→新闻频道→新闻全名”里面的对所在网页位置的文字说明,同时配合导航的颜色高亮,可以达到视觉直观指示的效果。 6、页面提示
有些网站有太多的信息,此时让用户浏览和没有浏览区别,最简单的方法是让已经浏览过的网页被浏览,如果不是在一个统一的网页锚文本页面中,你可以显示用户已经在其他地方已经浏览过的内容。 7、登录并退出 登录入口和退出登录出口可在整个站点的每个页面上使用,允许用户登录和退出任何网页。 汇桔网设计服务提供,打造店铺个性。专业设计大咖操刀,为您提供有创意的原创设计,让设计更简单,登录汇桔网咨询吧。
利用dw制作漂亮的导航栏效果
利用dw制作漂亮的导航栏效果 最近论坛中很多网友问到各种菜单和导航的制作方法,下面我们就网上常见的一些菜单和导航效果做简单的介绍。考虑到满汉全席的菜单应该是最全的了,我们就以此为名,来顿super大餐。Let’s Go! 一、进门点心:利用Dreamweaver MX制作最基本的下拉菜单 实现下拉菜单的思路是首先建立一个相对定位的层,调整其位置,并设置其显示属性为隐藏,然后通过给链接文本或图象添加onclick(点击)或者onmouseover(鼠标划过)的事件来触发“显示-隐藏层”的行为,显示隐藏的层,并且在鼠标划出层时隐藏层,实现下拉菜单的完整效果。下面介绍在Dreamweaver中的具体操作步骤: 1.使用菜单在页面中插入一个层,这个层是相对定位的层,然后再在其中插入一个子层,因为子层的位置是相对于父层而言,所以只要父层的位置不发生变化,改变子层的位置和大小不会改变其相对性,效果如图1所示。 图片如下: 图1 为了父层不占据页面空间,可以设置其宽和高为0,因为以后要调整子层的位置,所以先不设定子层的显示属性为隐藏,而是到确定子层到合适位置后再设置。 2.选中导航条上的链接文本。使用快捷键Shift+F3激活行为面板,单击行为面板中的加号按钮,在弹出的行为下拉菜单中选择“显示-隐藏层”,在弹出的设置对话框中选中子层,单击显示按钮,如图2所示。 图片如下: 图2 显示层 设置完毕后单击确定按钮,修改其触发事件为onmouseover,即当鼠标划过文本时显示层。接下来还需要设置鼠标划出文本后的行为,继续使用行为面板,选择“显示-隐藏层”,
在弹出的对话框中选中子层,单击隐藏按钮,如图3所示。 图片如下: 图3 隐藏层 设置完毕后单击确定按钮,在行为面板中修改该行为的触发事件为onmouseout,即鼠标划出时隐藏子层。 3.拖动子层,调整其位置到和导航条贴近并垂直位于导航文本的下方的位置。层在编辑页面中的位置和在浏览器页面中的位置是有差异的,所以需要多次调整并在浏览器中预览效果,只到达到合适的位置。 4.设置子层的显示属性为隐藏。 按F12键在浏览器中预览页面,下拉菜单效果如图4所示。 图片如下: 默认状态 图片如下:
html table布局
第一章HTML基本知识 1.1 HTML是超链接标签语言或超文本标记语言,它是以标签来描述文件中的多媒体信息。1.2 HTML文件结构(由标题、段落、表格和文本等各种嵌入的对象构成。)
网页头部信息 1.3 HTML可由记事本和网页编写软件编写,如Dreamweaver。 1.4 HTML页面主体标签的属性 网页背景色(bgcolor); 。 网页背景图片(background); 。 文本颜色(text)。 。 链接文本颜色属性(link); 。 网页内容的边距设置(margin); 。第二章HTML网页中的文字段落和列表2.1 插入特殊字符 空格符(&nasp;)。 引号(";)。 版权(©;)。 2.2 设置文本属性,文字标签(font); 2.3 段落格式设置 常用标签: (用于起始一个段落) align=”center”、”left”、”right”(设置每一个段落的对其方式: 居中,居左,居右)
(换行,当段落间隔过大,可完成文字的紧凑换行)
属性 width 改变水平线的宽度 size 改变水平线的高度 noshade 定义水平线是否显示阴影 color 定义水平线的颜色 align 设置水平线的对起方式
表格与DIV+CSS的布局设计分析
表格与DIV+CSS的布局设计分析 摘要:网页的布局是给浏览者的第一印象,往往决定着网站的可看性。在网页中应用不同的布局技术所能呈现的效果也不尽相同,它们各有其自己的优点,使用表格进行布局是传统的网页布局显示技术,仍是现在最常见的网页制作方法,而div+css布局是一种新的排版布局理念,可以使页面载入得更快,修改设计时更有效率而代价更低。 关键词:网页布局表格 div+css 中图分类号:tp393.092 文献标识码:a 文章编号:1007-9416(2011)12-0191-01 随着互联网应用的日渐普遍,网络应用进入了人们生活的多个层面,进而人们对网站需求的增大,市场对网页制作人员的需求也大大增加。对于一个网站来说,要要给用户带来好的享受,就必须提高网页布局设计的美观度。网页就好比一张图纸,通过排版布局之间的对比才凸显它的美,网页布局的效果直接影响到网页设计的质量。目前常见的网页布局技术有表格技术和div+css技术。 1、表格布局技术 1.1 表格布局技术的特点 表格是网页的一个非常重要的元素,表格主要由行、列和单元格组成。在使用表格布局时,设计者一般会先根据页面版式的设计需要将整个网页以水平切割的方式分解成多张独立的表格,而表格的行、列数则由该表格中所包含的版块数目来决定。对于复杂的版块,
还必须在里面插入嵌套表格来完成。 1.2 表格布局技术的优势 对于初学者来说,表格可能是最好的布局方式,容易上手。表格布局能对不同对象加以处理,而又不用担心不同对象之间的影响;而且表格在定位图片和文本上比起用css更加方便。网上绝大部分的页面都是使用表格来美化的,因为表格有很好的兼容性,可被绝大部分的浏览器所支持,而且使用表格会使页面结构清晰、布局整齐。 1.3 表格布局技术的缺陷 使用table布局会生产很多冗余代码,会影响浏览速度以及占用过多服务器空间。而且,表格结构单一,难以体现出层次感,无法将设计的美感流畅地通过网页表现出来。 2、div+css布局技术 2.1 div+css布局技术介绍 div+css的布局技术其实涉及到了网页的两个重要组成部分:结构和表现。比如,在一个网页中,其内容可以包含很多,如各种级别的标题、正文段落、图片等,通过div,我们可以将网页中的这些内容元素放置到各个div中,构成网页的“结构”;然后,我们再根据页面的设计需要运用css样式表文件设置其中的文字、图片和列表等元素的“表现”效果。 在div+css的布局技术中,设计者运用html来确定网页的结构和内容,而用css来控制网页中内容的表现形式,很好地实现了内容与形式的分离。
利用dw制作漂亮的导航栏效果
利用dw制作漂亮的导航栏效果 浏览:1031 次最近论坛中很多网友问到各种菜单和导航的制作方法,下面我们就网上常见的一些菜单和导航效果做简单的介绍。考虑到满汉全席的菜单应该是最全的了,我们就以此为名,来顿super大餐。Let’s Go! 一、进门点心:利用Dreamweaver MX制作最基本的下拉菜单 实现下拉菜单的思路是首先建立一个相对定位的层,调整其位置,并设置其显示属性为隐藏,然后通过给链接文本或图象添加onclick(点击)或者onmouseover(鼠标划过)的事件来触发“显示-隐藏层”的行为,显示隐藏的层,并且在鼠标划出层时隐藏层,实现下拉菜单的完整效果。下面介绍在Dreamweaver中的具体操作步骤: 1.使用菜单在页面中插入一个层,这个层是相对定位的层,然后再在其中插入一个子层,因为子层的位置是相对于父层而言,所以只要父层的位置不发生变化,改变子层的位置和大小不会改变其相对性,效果如图1所示。 图片如下: 图1 为了父层不占据页面空间,可以设置其宽和高为0,因为以后要调整子层的位置,所以先不设定子层的显示属性为隐藏,而是到确定子层到合适位置后再设置。 2.选中导航条上的链接文本。使用快捷键Shift+F3激活行为面板,单击行为面板中的加号按钮,在弹出的行为下拉菜单中选择“显示-隐藏层”,在弹出的设置对话框中选中子层,单击显示按钮,如图2所示。 图片如下: 图2 显示层 设置完毕后单击确定按钮,修改其触发事件为onmouseover,即当鼠标划过文本时显示层。接下来还需要设置鼠标划出文本后的行为,继续使用行为面板,选择“显示-隐藏层”,在弹出的对话框中选中子层,单击隐藏按钮,如图3所示。 图片如下:
Div+CSS基础代码网页布局+实例教程
Div+css 一,什么是CSS CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术统称。 二.DIV+CSS 简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV 是用于搭建html网页结构(框架)标签,像、、等html标签一样,再认识CSS是用于创建网页表现(样式/美化)样式表统称,通过css来设置div标签样式,这一切常常我们称之为div+css。 表格 以前html直接设置高度width="300"这种方式嵌入表格标签内,而且无需带单位,默认以px(像素)为单位。 例子:
分别设置了高度为100px和50px的两行表格 DIV的布局方法 CSS 代码 .yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;} Html body内代码: 我的高度为100px 我高度为50px
网站制作导航栏种类汇总
网站制作导航栏种类汇总 我们知道,网站建设中,导航栏的设计是关键,如果用户查找什么信息大都是通过导航栏,一个好的导航栏设计不仅能更好的提升用户体验,还能有利于搜索引擎蜘蛛抓取。导航的设置是为了更方便的帮助用户在更短的时间找到他们需要的内容,起到的是一个引导作用。那么,通常情况下网站建设中导航栏制作的种类有哪几种呢?下面就跟大家聊聊这个问题。 首先,我们需要了解一下网站建设中导航栏的作用: 网站导航布局的逻辑性 上面已经说了是帮助用户快速找到信息的,起到一个引导作用的,因此你就不应该把同等级别的目录放到下一级目录下。比如说你公司业务是网站建设,网络营销这两块,那么这两个就是同一级的目录,是同级别的,你就不能把网络营销放在网站建设的二级目录下面。如果你要在导航上放上关于公司或者关于我们这么一个导航模块,那么比如说公司介绍,荣誉资质,企业文化,公司优势这类的就可以作为关于公司的一个二级目录。 网站导航设置的合理性 例如你网站可以用一排导航去显示的内容,但却使用了两排,这样完全就是多余的,一丁点必要都没有。你本身只有7-8个产品,但是却使用了2排导航,我真不知道你第二排的导航对用户有多大的意义或者说价值! 打开网站眼看到的就是导航栏的部分,因此导航栏通常都设置的非常醒目。清楚了导航的作用,下面来了解一下网站建设导航栏的种类: 1、图标导航的使用比较灵活,可以用于一些空间有限,但内容比较繁琐的情况,可以放在网站任何位置,图标导航也没有固定类型。
2、弹出导航。常用导航条结合横向子菜单组成的弹出导航条,这种导航条形式可以有效节约空间,对于一些子类比较多的导航条是个不错选择。 3、双选项卡导航条,用TAB选项卡形式的导航条,具有很清晰的分层结构,一般此类导航条的二级子菜单的字体都要小于主菜单字体。 4、垂直导航条,横向导航条一般是网站最常用的导航形式,而垂直导航条是另一种比较方便的导航条形式,使用垂直导航条的好处是,可以无限增加网站分类,毕竟网站宽度是有限的,而高度是可以调整的。 5、扩展菜单。除了主菜单,有时候网站也有一些其他子类菜单,但并不适合放在主菜单中,所以就有了扩展菜单。扩展菜单相当于另一套菜单。 6、下拉框导航,通过下拉框直接连接到对应的页面。 7、滚动菜单导航,可以结合图片,是比较生动有趣的导航形式,对于一些图片类网站很实用,一般这类导航条都以中心为原点,左右移动鼠标进行滚动。 8、伸缩导航条。当网页屏幕空间有限时,伸缩导航条就是不错的选择,同时这种导航形式也可以用于辅助导航。 9、图片类导航,导航菜单全部由图片组成,多见于FLASH这类网站中,是比较酷的一类导航形式。