⑴ dreamweaver做导航条
1.点击Dreamweaver,双击打开。
2.选择文件-打开(快捷键Ctrl+O),打开网页文本。
3.把鼠标光标放在需要插入导航条的地方,选择插入记录-图像对象-导航条命令。
4.此时会弹出插入导航条的对话框。
5.点击“状态图像”后面的浏览,在弹出的对话框中选择需要的图片。
6.同上步一样,插入鼠标经过图像和按下图像。
7.点击确定后出现下面效果。
8.保存文档,按F12使用浏览器浏览效果。
⑵ 导航栏目之间的分隔线用PS怎么制作
按住选框工具栏,选择弹出的单列选框工具,在需要分割的地方单击,产生一像素的选框填充白色,使选框右移一像素填充黑色,更改图层混合模式为叠加,删掉多余部分旦启只留下导航条上一小段,也可源迟胡以再调整图层雹拦透明度直到满意效果
⑶ 网页设计 制作导航条 如何制作
一, 键盘上可以直接输 |
二, 如果是一条虚线的话, 那么是这样做的:
用Fireoworks新建一个行纯1*3PX的图片, 在中间画一个点燃稿,然后将其导出,再在DW里建一个单元格,将其背景设为这个图片(注意,让它垂直方向重复,水平方向不档段咐重复 -- CSS),大功告成
三,CSS
<a href="#" style="border-right:1px solid #000">链接</a>
⑷ 新手如何用ps制作网页首页
1、我们打开ps软件,新建一个1920*3000的文件,分辨率选择72像素,颜色为白色。
2、在guideguide插件中,我腔握们将左右边距都设置为360,行数为12,余边为20,单位都为像素。
3、下面我们建立首屏线,在【视图】中找到【新建参考线】,选择水平,数值为785像素。
4、然后用矩形工具绘制一个1920*785的色块,换一下颜色,便于区分。
5、下面我们建立导伍行庆航条,大小为1920*80,我们用矩形工具去创建。
6、下带液面用文字工具输入导航内容。
7、下面为了更加方便的为了以后的创作,我们选择【窗口】【字符样式】,创建一个字符样式,以后的文字就可以用到了。
8、继续做下面的页面就可以了。
⑸ 个人主页的导航条要怎么做是不是要用到框架 这些素材要怎么用,用ps抠下来直接当图片放进去在加几
直接扣下来不能用的。需要先去找这些导航的背景。然后用DIV+CSS进行格式编辑。
你直模慧接扣上去,没有办法放超链接的。因为你的那些按钮都是死的李码搜。需要做框架的。。
先做一个框架然后把背景填进去,在你输入每个栏目时选好你喜欢的字体,就这样。。
纯哪历手打望采纳。
⑹ 怎么用ps设计网页主页
制作主页是一项非常复杂的工作,跟创意合成有点类似。首先要根据客户的要求去找一些好的作品作为参考,找出一些灵感,然后搜集相关的素材,并按照自己的思路去慢慢溶图、渲染颜色,处理明暗及细节等。最终效果
一、网页首页模版创建
1、首先打开我们下载的ps软件,左上角选择文件-新建(快捷键ctrl+N),然后创建一个1920x3000的画布,网页设计分辨率选择72就可以,颜色模式我们选择RGB,点击创建;(注意宽度选择的是像素)
为什么我们要创建1920宽的呢,目前我们的显示器分辨率一般为1920px,所以创建1920px宽度的可以使我们的网页背景正好显示完整,左右不会出现空白。
2、接下来我们要将单位与标尺调整为像素,方便我们测量宽高。操作步骤为:编辑-首选项-单位与标尺(快捷键ctrl+K,找到单位与标尺)
3、选择 视图-标尺(快捷键ctrl+R)调用我们的刻度尺,方便直观的看到宽度和高度;左击刻度尺拖出2条参考线分别到360和1560刻度,使中间留有1200px的宽度。两个刻度尺中间的距离就为我们内容展示的区域,使用 (快捷键ctrl+; )可以显示关闭刻度。
为什么要使用1200px的宽度呢,因为目前主流的网页设计主体内容宽度为980px和1200px,而1200px可以显示更多的内容,网页也可以显得更加的高端大气。
二、使用矩形工具制作黑色背景导航条:
1.选择“矩形工具”,设置填充色为“#333”,描边设为空;
2.创建“图层1”点击画布,在弹出的窗口中设置宽度1920,高度25,点击创建;
3.使用移动工具将导航条移动到左上角;
三、logo图片导入
1、使用文件->打开(ctrl+o),将logo图片打开;
2、ctrl+A选中图片,然后复制粘贴到当前页面中;
3、移动图片到指定的位置;
⑺ 怎么用列表和浮动,创建网页的横向导航条
1、用Dreamweaver新建一个HTML文件。
⑻ 制作网页怎么在主导航上显示子导航
先由设计师设计网页,在设计图上标注相关信息(比如说颜色,有些颜色肉眼分辨不太清楚。)
再接下来是前台制作,由网页制作人员完成,这里要注意以下几点:
1、拿到设计稿后不要直接切割,然后到DW里直接敲庆饥代码,首先要认真研究,把握大致的框架图,做到心里有一个整体的构思,其中还可以揣摩一些设计的风格,有兴趣的朋友完全可以让自己走上设计的道路。(设计人员比制作人员工资高多了呀!无奈!)
2、用PS或者FW等绘图软件做一些实体的框架图,这个框架的目的是让你在制作的过程中能够快速而准确的进行制作和在以后的修改工作中能够高效,所以框架图要具体的标示出块状的id号或者类名,父与子的层次关系等。
3、接下来就是进行重要的一项----制作,也就是敲那该死的代码,在制作过程时,就要体现你对技术的熟练程度和技巧运用了,比如css的架构搭建,类名的选择和用CSS的简写达到高效的目的等技巧。
4、制作完成后,就是自己的检验了,争取做到制作出的网页同设计师给侍差埋出的设计稿如出一辙。最后让自己的工作得到他们的肯定,当然改是难免的,不要急躁。(有些设计师太麻烦,总觉得你做出来的东西和他们的设计稿不符合!老蚂这时候你可以无视他们,直接找设计组的组长评理!还有一点就是向为网页制作人员应该和设计师搞好关系,不然工作中会遇到很多麻烦!汗一记!)
制作完成后就是程序员的工作了,制作后台程序,以方便管理网站!如果你在设计的时候用的id,name等都是乱起名字的,这时候可能需要你和程序员进行沟通,告诉他们这个id是什么,这个name是什么,麻烦!所以良好的命名习惯是必不可少的!
后台的页面设计没有什么讲究,越简单越好,当然简单不等于简陋。
这就是一个网站制作的流程!(当然,在设计之前要听取客户的意见,整个网站在表现什么风格,比如说:体现严谨,高科技,时尚等元素,这样设计师可以通过颜色表现这种风格!在设计稿定稿前要给客户过目,客户认可了才能进行制作!)
附:
CSS的命名规则
头:header
内容:content/containe
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:leftrightcenter
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:right
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
XHTML文件中id的命名
(1)页面结构
容器:container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:leftrightcenter
(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题:title
摘要:summary
(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的:current
小技巧:tips
图标:icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:right
个人整理,希望对你有点用!
⑼ 网页导航条怎么做
1、打开Deamweaver8,新建一网页文件。接着输入以下导航菜单的内容:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航栏示例</title>
</head>
<body>
<ul id="navigation">
<li></li>
<li><a href="#">首 页</a></li>
<li><a href="#">我的博客</a></li>
<li><a href="#">互动交流</a></li>
<li><a href="#">开心一刻</a></li>
<li><a href="#">悬 赏 令</a></li>
<li></li>
</ul>
</body>
</html>
⑽ 如何用PS来设计简单的网页
PS软件应用十分的广泛,修改图像,运用图层蒙版设计简单网页,文字排版,网页优化,包括导航图,网页底端的页脚,网页主题内容,特效文字的制作,动作按钮的设计等。今天和我一起来学习如何用PS来设计简单的网页这篇文章吧。
1、新建一个800X600像素的空白背景,颜色模式设置为RGB模式。RGB模式颜色是由红色,绿色,蓝色三种颜色相交构成,可以更好的显示网页中的色彩内容。
2、新建文件,点击确定,空白文件会自动显示在软件中。对于新建空白文件来说,图像的宽度和高度的大小要按照等比例进行设计,也可以不勾选重新定义新像素来实现。
3、打开一张车的图片,移动到白色背景画布中,选择圆角巧乱矩形工具,选择路径为了方便转换为选区,设置为5个像素,像素越大,圆角矩形的四个圆角就是更加的明显,然后选择渐变工具,选中系统缓宽敏自带的黑白渐变,修改黑白渐变的颜色,改为灰白,也可以设置前景色为灰色,背景色为白色进行渐变的填充,然后点击确定。
4、然后选择工作路径,鼠标CRL点击工作路径,设置为选区,选中线性渐变类型,然后画出渐变的颜色。渐变的方向是从上到下为白色到浅灰色的渐变效果图。
5、然后选择修改收缩2个像素,就是将选区收缩小2个像素,变小一些,然后再次从下向上渐变,然后alt快捷键复制2个,如图所示,然后找到车的一个的图标按钮,然后用磁性套索工具勾勒好,然后鼠标左键拉动到合适位置,然后选择3个图层,然后水平分布,和居中分布对齐。然后选择左对齐分布,分布均匀。分布按钮是在选择工具上方的工具栏中,有平均分布对齐等多个按钮。
6、然后再次用钢笔工具勾画另外一个车的图标,然后再用自由变换调整到合适位置,然后点击2个图层之后,进行左对齐分布。分布到形状扰枝中的最左边位置即可。
7、再次选择一个不同的车的图标设计图片,然后用钢笔工具进行勾画图标,或者为了方便,可以直接用魔棒工具来选择,选中其需要图形的一部分。
8、然后再次选中图形,形状图形,全部选中相应图层,调整水平分布和左对齐分布。当分布不均匀,可以按住鼠标左键自动进行调整。
9、所有的图标都自由变换,调整到合适位置,如图。按住crl+t来实现图形的自由变换的内容。如图
10、输入相应的文字,文字的颜色设置为黑色,将其三个文字图层,按住shift键和左右方向键进行移动调整来改变。之后将车的图片进行调整,便于观看,文字进行排版即可。