㈠ 我已经做了个一级导航,如何修改成二级导航,代码如下
这里有一个js的多级联动下拉菜单
可以自定义位置和样式 比较实用
里面有教程和源码
㈡ 请教网页制作的高手,如何做出导航和标签页的效果
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME
<ul>
<li>二级</li>
<li>二级</li>
<li>二级</li>
</ul>
</li>
</ul>
思路就是这样。
标签页的话:
也是上面那个思路了
<ul>
<li>TAB</li>
<li>TAB</li>
<li>TAB
<div>content</div>
</li>
</ul>
者都要写好多样式去控制;
如果只是想学习的话,就可以试试
如果只是为了完成工作,嘿嘿 ,去网上找现成的把,太多了。
㈢ 如何给网站前台添加二级导航
没有必要那么麻烦吧,魔法菜单就可以了
㈣ 如何设计二级页面
改版前,在本地调试好所有程序及页面,做到上线稳定不变;然后在现有网站上提前通知用户网站即将改版,以免引起不必要的误会,最后选择凌晨迅速把网站所有程序上传覆盖。2网站的title改版前后的title尽量保持一致,如非必要,建议不做改动。3关键词
改版之前可以收集一些网站的重要数据,如网站的关键词及排名,用户的来源、地域、年龄分布等数据。特别是改版后对新网站有重要作用的关键词,还是应该在网站中合理的布局,不管是title、导航、文章、描述中等都应该合理的出现,避免关键词密度大幅度的降低影响以后关键词的优化排名。
4.网站的链接
网站改版前后应尽量和原来的文章链接及名称一致,对于需要更换的链接可以使用301重定向,这么做目的是为了把网站改版的影响减少到最小。
5.友好404页面
虽然未来避免死链,我们做了很多的准备工作,但是难免会有漏网之鱼,势必会出现一些错误页面,所以这时候就需要一个十分友好的404页面,一是告诉用户网站刚刚改版,并给出网站地图增加用户体验,而是为了减少用户流失。
6.网站改版后内容要充实
这个问题特别针对首页来说,不能出现一些栏目下没有内容或者内容严重不足,必须让网站版面充实起来,并且是原创内容。
7.外部链接
网站改版过后及时的做一些高权重的外部链接,然后重新调整网站地图,并向搜索引擎重新提交网址,重写robots.txt文件并提交给Google,可以让搜索引擎蜘蛛迅速的爬行抓取网站的数据。
8.平和的心态
这个是一个非常重要的问题,一般网站改版都是迫不得已而为之,但是网站改版后的一系列问题总是让人心烦,不管是用户意见还是搜索引擎的惩罚,虽然我们前期做了很多的准备工作。因此改版过后我们应该有一个平和的心态,只要我们处理好方方面面的问题,保持不断的更新,那这些问题也会迎刃而解了。
㈤ 如何设计网站导航系统
导航模式
网站的导航如何设计,在设计网站导航时首先应该明确用户的浏览习惯,根据用户的浏览习惯,首先会先大概地扫视一遍页面,其次则会开始寻找导航栏,快速从导航栏上找到主要信息,引导用户寻找网站对他有用的信息。一般来说左边的权重要比右边的权重要高一些。
网站的导航信息应该明确,,设计一个有魅力的导航还能留住用户浏览更多的内容信息,带给用户良好的体验。在网站导航设计上应该主要关注一下几点:导航的模式常见的导航模式有很多,例如顶部水平横栏式,垂直导航栏,侧边固定式,滑出或者弹出窗口导航等,通常网站是根据所要展示的内容要点来选择不同的导航。如果网站的内容较少,在网站导航上可以选取水平式导航,这样既可以重点内容而且简单清晰,网站内容较多的时候可以选择抽屉式的导航,用户在浏览网站时各种信息都很明确。如果网站的显示页过长,比较试用的是垂直式导航,方便用户在浏览内容时导航信息始终保持在一个位置可以被快速找到。
导航内容
网站的导航应该是对整个网站想要展示的信息总结,导航的信息要与详细页面符合,标题的总结要精简,注意网站小内容最好不要以导航的总标题形式出现,可通过细分的下拉菜单,或者以更多形式的小菜单栏里出现。
导航细节
在导航设计时可以设置一个“回到顶部”的标志,以便用户快速到达头部的导航位置。这样对于网站内容较多用户下滚的内容过长时就可以快速的回到顶部了。
导航创意
我们都喜欢新的东西,在看惯了千篇一律的导航形式如果能给导航加点创意,那么肯定会非常吸引人眼球。
网站的导航在网站设计中有着举足轻重的地位,好的网站导航是成功的一半,所以在网站的导航设置上更加注意。
㈥ dw网页二级菜单代码怎么做!很着急把它放在一级导航底下!
方法和详细的操作步骤如下:
1、第一步,打开dw软件并创建一个新文件,见下图,转到下面的步骤。
㈦ 怎样用 显示/隐藏层 制作二级下拉子菜单项
不是吧山东农业大学选修课网页制作作业也是这个题哎我直接把题全给你们行了呵呵以后考试就轻松了呵呵
2009-2010学年第二学期
《信息发布与网页制作》课程
本科生 期末考试要求-(A卷)
课程课序号:CMP332
学 号___________姓 名_________成 绩__________
班 级_____________课序号_________任课教师___________
题号
一
二
三
四
五
合计
得分
综合考试要求
1、按题中要求,独立完成。如有拷贝或与他人雷同者,以0分论处。
2、作业提交的截止日期为:2010年7月2日。
一、(共5分)按如下要求提交文件 得分______
以自己的学号命名文件夹,并以此根文件夹为基础创建站点;
在根文件夹下,至少包含如下子文件夹,按类存放站点中的所有文件;
1、Html文件夹:存放HTML网页文件(1)
2、Image文件夹:存放图片文件(1)
3、Sound文件夹:存放声音文件(1)
4、Flash文件夹: 存放Flash文件(1)
5、压缩整个学号文件夹,然后提交交互平台。(1)
二、(共10分)设计小型网站,内容主题为“上海世博会”,要求如下: 得分______
设计有3个窗口的框架集网页(3),框架集网页文件命名为index.html(2)。框架集网页中,左侧窗口中放置导航栏目网页(1),右下侧窗口作为导航栏被链接网页的“目标”窗口,用于显示被链接的网页(1)。右上侧窗口显示网站主题、网站设计制作者学号、姓名(1)。要求框架集网页的边框可调(1),窗口中内容超出窗口时,要设置滚动条(1)。
三、(共65分)分别制作6个网页,要求如下: 得分______
1) 导航栏网页(15分)
网页的功能是网站导航,围绕站点主题,设置5个导航栏目(6)。
1. 上海世博会主题介绍
2. 上海世博会拼图游戏
3. 历届世博会科技亮点
4. 上海世博会调查问卷
5. 历届世博会统计资料 (年份、国家、举办城市、主题)
建立每个栏目与之相应的网页之间的链接,并指定被链接的网页在“目标”窗口显示(4)。利用行为,建立二级弹出子菜单,通过二级子菜单链接,显示相关的内容(5)。所有链接正确(如不正确,1处扣2分)。
2) “网页1-上海世博会主题介绍”:(10分)
1. 首行显示网站主题内容,用标题1、居中、“华文新魏”字体显示(2);
2. 第2行,插入水平线;设置水平线的宽度为浏览器窗口宽度的80%(2);
3. 第3行,插入上海世博会导览图,设置800宽、600高(2),图片居中并有边框显示(1);对图中内容分别用矩形、椭圆、多边形热区画图工具设立3个热区,通过链接,说明相关内容。(3)
3) “网页2-上海世博会拼图游戏”(10分)
利用拖动层的行为,制作至少由6块图片组成的拼图游戏。要求:
1. 选择1个国家场馆的图片,用自己的学号命名图片;(2)
2. 利用Fireworks将图片切割成大小相同的6块;导出切片;(2)
3. 在DreamWeaver中,导入Fireworks HTML,将表格转换为层;添加拖动层的行为,制作拼图游戏;(2)
4. 插入1个布局对象层并以字母L及自己的学号命名,在层中输入拼图游戏的说明文字,设置层中文字的大小:18px ;字体:隶书(2);
5. 设置拖动层的吸附距离为100:吸附到正确位置时显示弹出信息(2)
4) “网页3-历届世博会科技亮点”(10)
要求:利用“显示/隐藏层”制作二级下拉子菜单项,
1、 利用层和表格制作下拉菜单(4)
2、 下拉菜单项中,至少有2个菜单项要有链接功能(2)
3、 指定被连接的内容在当前窗口显示并有返回机制。(4)
5) “网页4-上海世博会调查问卷”(共10分)
要求:使用表单,做1个网上调查表
1、 插入表单域,在表单域中插入如下表单元素:
2、 参与调查人员的性别:男 〇 女 〇(使用单选按钮)(1);
3、 2010年世博会主题是: (设定为:单行文本框(宽度32字符 ));(1)
4、 年龄 (设定为:字符宽度2);(2)
5、 中国举办过几次世博会?(使用“列表/菜单”表示,列表项有:一次、二次、三次、四次)(2)
6、 提交按钮、重置按钮。(2)
7、 为表单添加检查表单行为,用以检查输入年龄的合法性(15~80为有效)。(2)
6) “网页5-历届世博会统计资料 (年份、国家、举办城市、主题)”(共10分)
该网页要求:
1、 用表格显示历届世博会举办的年份、国家、举办城市、主题;(2)
2、 利用DreamWeaver工具,格式化表格;(2)
3、 将歌词放在层中,滚动显示;(2)
4、 能控制歌词的滚动,以保证与歌曲同步。(4)
四、(共12分)按如下要求,在网页中插入自己制作的Flash作品 得分______
1、 在Flash文件夹中,存有Flash原始文件(2);
2、 Flash片头显示作者学号、姓名(2)
3、 Flash表现的内容与网站内容主题一致(2);
4、 分别使用“形状”、“动画”补间(2);
5、 背景图层用自己的学号命名(2);
6、 Flash作品中包括引导层、遮罩动画(2)
五、(共8分)综合分 得分______
整体色调协调(2),结构合理、浏览方便(2),网站难度(2),创新(2)
附件(0 个)
㈧ 网页设计问题:如何制作下拉菜单式导航栏
这段代码比较经典的下拉菜单,不过没有美化,自己要美化的话,对列的项a a:hover的属性进行定义即可,比如定义一个好的背景等。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font:14px "宋体"; color:#333;}
#nav{ width:800px; height:30px; margin:50px auto; background:#ccc; line-height:30px; }
#nav li{ list-style:none; float:left; font-weight:bold; vertical-align:middle;}
#nav li a{ display:block; width:100%; text-align:center; color:#000; text-decoration:none;}
#nav li a:hover{ color:#fff; background:#f00; text-decoration:none;}
#nav li ul{ display:none; position:absolute; background:#999; line-height:25px;}
#nav li.show ul{ display:block;}
#nav li.show ul li{ float:none; font-size:12px;}
#nav li.show ul li a{ text-align:left; padding-left:10%; width:90%;}
#nav li.show ul ul{ display:none;}
#nav li li.show ul{ display:block;}
</style>
<script type="text/javascript">
function getCss(elem,property){
if(elem.style[property]){
return elem.style[property];
}
else if(elem.currentStyle){
return elem.currentStyle[property];
}
else if(document.defaultView && document.defaultView.getComputedStyle){
property = property.replace(/([A-Z])/g,'-$1').toLowerCase();
var s = document.defaultView.getComputedStyle(elem,'');
return s&&s.getPropertyValue(property);
}
else{
return null;
}
}
window.onload = function() {
var obj = document.getElementById("nav");
var lis = obj.getElementsByTagName("li");
var arr = new Array();
var uls = obj.getElementsByTagName("ul")[0];
for(var i=0; i<lis.length; i++){
if(lis[i].className.indexOf("firstLevel")>=0){
arr.push(lis[i]);
}
}
for(var i=0; i<lis.length; i++){
lis[i].style.width = obj.offsetWidth/arr.length - 1 + "px";
if(lis[i].className.indexOf("thirdLevel")>=0){
lis[i].parentNode.style.marginLeft = obj.offsetWidth/arr.length - 1 + "px";
lis[i].parentNode.style.marginTop = -parseInt(getCss(uls,"lineHeight")) + "px";
}
lis[i].onmouseover=function(){
this.className+=(this.className.length>0?" ":"") + "show";
}
lis[i].onmouseout=function(){
this.className=this.className.replace(new RegExp("( ?|^)show\\b"), "");
}
}
}
</script>
</head>
<body>
<ul id="nav">
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
</li>
<li>
<a href="#">二级栏目</a>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
</ul>
</li>
<li class="firstLevel">
<a href="#">一级栏目</a>
<ul>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
<li>
<a href="#">二级栏目</a>
<ul>
<li class="thirdLevel"><a href="#">三级栏目</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
㈨ 网页设计 制作导航条 如何制作
一, 键盘上可以直接输 |
二, 如果是一条虚线的话, 那么是这样做的:
用Fireoworks新建一个1*3PX的图片, 在中间画一个点,然后将其导出,再在DW里建一个单元格,将其背景设为这个图片(注意,让它垂直方向重复,水平方向不重复 -- CSS),大功告成
三,CSS
<a href="#" style="border-right:1px solid #000">链接</a>
㈩ 网站二级导航菜单问题
把#menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}
改成#menu ul li ul li { float:left; width:100px; background:#eee; margin:0;}就好了设置它的浮动和高度