导航:首页 > 万维百科 > 网页设计直线

网页设计直线

发布时间:2020-09-25 00:24:50

1、什么是web设计中的组件线条颜色

一、 视觉引导功能
视觉引导功能遵循的是一条流畅的路径,网页色彩能顺利地引导用户在页面上移动体验。
在WEB界面设计中,色彩担负起和线条、文字一样的视觉引导和强调的作用。设计师可以充分利用色彩导向作用力量去美化页面,对重要的信息进行色彩的整合和强化,引导浏览者的注意力,有利于推广新产品。对需要强调的内容适当运用色彩加以突出,使浏览者加深记忆,提高网站的信息传递效率。在产品展示类型的网页中,色彩的强调功能尤为明显。我们在浏览一些页面中不难发现世界顶级护肤品牌HR赫莲娜的展示页面,它成功地利用色彩将浏览者的注意力引导到产品之上,给人留下深刻的印象。又如在某些商品展示类的网站,色彩的导向传递功能运用尤为明显:亮色系比如以黄色为背景一般所代表的意思是促销产品热卖产品,而蓝色、褐色或深绿色等冷色调的搭配则多用来表现商品的价值。
二、企业形象识别功能
企业标准色是企业形象识别要素之一,网站设计者将企业网络界面色彩与企业标准色相呼应起到了加深企业形象的作用。格罗佩斯(Walter Gropius)在他的《艺术家与技术家在何处相会》一文中提到“如果物体的形象很适合于它的工作,它的本质就能被人看的清楚明确。”从这里可以很深刻的了解到企业形象在信息传递和接纳过程当中所起到的非常重要的作用因素。色彩也是形成企业形象的关键要素,企业标准色是企业形象的色彩表示系统,人们一看到此色彩就会联想到该企业。把CI设计这一理念应用到网站整体形象规划与设计开发上来,以企业CI设计中的标准色作为WEB界面的主色调展开设计,使WEB界面成为企业形象的延伸和宣传,无疑是把WEB界面设计推向正规化、品牌化发展的道路。它可以使网站与企业具有共通的视觉特征,便于宣传和识别,通常达到事半功倍、相得益彰的效果。
百事可乐在全世界拥有较高的知名度,使人过目不忘的蓝色和标准字体已成为它的标志。我们可以浏览一下百事可乐系列站点,每个网站的主体风格不尽相同,美国总站稳重些,英国站比较活泼,即使站点风格有些差异但都保持了一致的文化特点,都采用了大快蓝色的底色,给人以热情、活力、喜悦的感觉,应用在网络界面设计中,让受众群联想到饮用百事可乐所带来的快乐心情,无形中就加深了百事可乐品牌在消费者的心目中的形象。
三、 视觉区域划分功能
WEB界面的首要功能是信息传递,色彩正是创造有序的视觉信息流程的重要因素。利用不同色彩设计进行视觉区域划分是网络界面设计中的常用手法,也是色彩在WEB界面设计中的重要功能。网络界面中的信息不仅数量多,而且种类繁杂,往往在一个页面中可以看到各种各样的信息问题,利用色彩分布,可以将不同类型的信息分类排列,并配合相应内容,有针对性地设计色彩;利用各种色彩带给人的不同心理效果,很好的区分出主次顺序,从而形成有序的视觉流程。
色彩的视觉区域划分功能实用性强,变化性强,灵活易用,适用面广泛,在信息繁杂丰富的门户类网站中应用较多,而且效果较为明显。利用色彩和辅助线把网络界面分成几个区域,这些区域可以是规则也可以是不规则的,以适应多种信息内容编排的需要。“FDI世界园”是一家招商投资网站,它的网络界面设计十分简洁,多趣味性。由多种色块矩形区域拼合成了网络界面的整体框架,用按钮形式来显示导航功能选择,很清晰地把网站的内容分类展示给浏览者,配合上网站通用的icon,整个网站十分舒畅,同时减轻的用户的视觉负担。
四、审美功能
WEB界面不仅具有实用的物质功能,而且具有审美的精神功能,发挥审美功能的界面形象与发挥实用功能的界面实体是同一的,它们具有同质同构的联系,网络界面是以一定的使用目的或物质功能为存在前提的,其审美功能必须以其使用目的为导向,即审美功能不能背离其使用目的。由于人的视觉对于色彩有着特殊的敏感性,因此色彩所产生的美感魅力往往更为直接。
色彩既是视觉信息传达的方式(实用功能),又是艺术设计的语言(审美功能),当网络界面的色彩所反映的情趣与人们的审美情绪发生共鸣时,也就是说色彩配合的形式结构与人们审美心理的形式结构相对应时,人们就会感觉到色彩和谐的愉悦。色彩设计对WEB界面设计作品的艺术品位起着举足轻重的作用,不仅在视觉上,而且在心理作用和象征作用中都可以得到充分的体现。因此,网络界面设计要以色彩的科学知识为基础,进而从美学的角度去探讨色彩设计的表现形式,增强WEB界面设计作品的艺术性,以创造出更富审美情趣的作品。在国内68design网页设计的站点,其中国内优秀设计作品中一家叫冰艺工作室的网站还是比较吸引人的眼球,让人不由自觉的想去点击它。它每个网络界面所选择的色彩和图形都能使浏览者自然地将其与产品风格联系在一起,界面中间色彩和四周部分黑、白、灰无彩色的色调搭配形成了动静相宜、多样统一的韵律美,给网络界面注入了活泼而新鲜的活力,从而达成令人赏心悦目的界面形式,和谐中富于变化,具有独特的创造性和审美价值。
五、品牌语言传递功能
品牌宣传效果不仅应该在视觉上,而且应该在心理上和象征上得到体会和理解。不同色相具有不同的语意特征。人们经过长期的社会生产实践和生活体验,对色彩形成了不同的情感和心理感受,人们将这种长期积累的色彩印象赋予各种语意特点并将其应用到生产、生活中。
在众多的网站类型中,不同的网站类型都有自身的色彩语意相关性。如儿童用品的网站设计多使用色彩亮丽、醒目的纯色;蓝色常用在表现同科技产业等相关新兴产业的WEB界面设计上。因此,设计者在界面色彩语言表达中应充分考虑不同色彩的语意特点,并将其和WEB界面主题内容结合起来。
六、主题鲜明功能
网络是信息的海洋,浏览者在网络中漫游无疑是寻找他们所需要的信息资源,网络界面传递的信息内容与传递方式应该是相互统一的,这是设计作品成功的必要条件之一。网络界面如何使浏览者迅速、快捷、准确的掌握主题,整合信息资源,这就需要设计师利用色彩的对比调和手段,产生视觉落差,来表现信息的重点,从而提高浏览者获取信息的效率。设计师可利用不同色彩自身的表现力、情感效应以及审美心理感觉等,使网络界面的内容与形式有机地结合起来,以色彩的内在力量来美化页面,或含蓄优雅,或动感强烈,或时尚新颖,或单纯醒目,烘托主题、突出主题。在网络界面设计的许多成功作品中我们都可以看出这一点。三星galaxys3公司的商业网站,进入该网站的第一需要就是找到所需的产品,WEB界面设计者就利用了产品图片显示颜色和灰色块强烈对比所产生的视觉落差,突出了右上角黑色文字主题内容和产品薄轻便的优势,以色彩的内在力量引起浏览者的重点关注,引导浏览者以最便捷的方式使用该网络界面,同时,灰色色块背景好似深沉的蓝色里的交音阶,高贵、气质不凡,铺色用心,恰到好处,使网站风格突出,大大增强了网站的艺术性和吸引力,从而提高了网站的知名度。

2、在html静态页面中,用哪个标签插入一条直线?

使用<hr />标签可以插入一条直线。

3、word,dreamweaver或做网站的高手请进。。。。求带线条的排版效果

您说的这个是设计网页上的吧? 具体实现方法:
1、用图形处理软件(如photoshop)做一个横线的图,必须注意图的高度(如28像素),然后在最底画一横线;
2、在网页适当位置建一个表格,设置各行高度也同上图的高度(如28像素),然后设置表的背景图为上述的图;
3、然后在此表中输入文字即。

================================
如果你觉得用做表格各行输入文字不方便,那么就:
1、先把此文章内容输入到一个大的单元格中,并调整行高(一些网页设计软件都可以设置行间距的;
2、根据行间距和字体大小,就可以确定每一行的高度了。
3、然后在用图形处理软件(如photoshop)做一个带横线的图,如上述方法。

这两种方法我都用过,效果很好。

================================

源码? 哪个网页没有源码?我做的网站都是编制好从后台去控制的,无论静态还是动态的。您是指动态网页吧?
要是动态网页,更好办了,直接做一个母版或叫样式就行了,然后把需要的文字插入,全OL。

4、jsp页面中如何显示一条横线....

<p>hr控制

<!-- width控制线的长度size控制线的粗细 -->

横线:<hr width=500 size=0 color="#999999">

<!-- width控制线的宽度,size控制线的长短 -->

横线<br><div style="position:relative; width:600; height:1px; background-color:red"></div>

<div style="background:#fff;

text-align: center;

margin:0 auto;

margin-bottom:-18px;

width: 90px;

position:relative;

">XXXXXXXXX</div><hr/>

(4)网页设计直线扩展资料

在网页中画一条竖线

1<div style="width:1000;height:1;;border-top:1px dotted #000000"></div>2<s 

style="width:1000;height:1;border-top:1px dotted #000000"></s>3<b 

style="width:1000;height:1;border-top:1px dotted #000000"></b>4<input 

style="width:1000;height:1;border-top:1px dotted #000000">5<a 

style="width:1000;height:1;;border-top:1px dotted #000000"></a>6<center 

style="width:1000;height:1;;border-top:1px dotted #000000"></center>7<iframe 

style="width:1000;height:1;;border-top:1px dotted #000000;" frameborder=no>

</iframe>8<img style="width:1000;height:1;;border-top:1px dotted #000000">

</img>9<hr size="1" noshade style="height:100;width:1;border:1px dotted 

#000000;zoom:2">线条长度=zoom*height10<hr size="1" noshade style="border:1px 

dotted #000000">部分不能显示请装IE5.5+

5、网页设计 里面的线条是怎么画的?

有的是画的,有的是表格,线条粗细是可以在属性那改的

6、(分)电脑绘画,电脑动画,电子报刊,网页设计,怎么弄?

一、在草纸上设计封面。

二、建立一张空白幻灯片,页面设置为“纵向”,“背景色”“填充效果”设置为“双色(颜色自定)”。

三、使用矩形工具:

1、画一矩形,比页面略小,无填充色,彩色实线。

2、画一细长矩形,横向,无线条色,填充色为白色,长度与页面宽度一致,位置在页面中间偏上;再复制一个细长矩形,向下移动靠近第一个举行下边。

3、用第2步方法画一纵向矩形,无线条色,填充色为白色,高度与第2步中两矩形距离相同,靠近第一个矩形左边,置于第2步中两矩形中间;再复制一个矩形置于页面中间偏右位置。

四、插入艺术字:式样自定,以整体效果美观为标准。

1、插入大号艺术字“芳草地”,作为报刊名称。

2、插入红色粗环形艺术字“教师节特刊”置于左上角。

3、插入艺术字“FANGCAODI·JIAOSHIJIETEKAN”置于第一个矩形下边处。

4、插入艺术字“2005”和“第九期”,使二者上下排列,中间画一直线。置于“芳草地”右下方。

五、插入文本框:

1、插入文本框“本期导读”,无线条颜色,填充色为红色。

2、在“本期导读”下方插入竖排文本,使用“项目符号”,输入主要文章标题。置于“三、2”矩形下、“三、3”第二个矩形与“三、1”矩形右边之间。

3、插入文本框“增长知识 拓宽视野”,置于“三、2”矩形之上靠近左端;插入竖排文本“小学生自己的读物”,置于“三、3”第一个矩形左边靠近下端。

六、插入图片:

插入……图片……来自文件,插入一幅能够体现报刊主题的图片,调整大小,裁剪掉不需要部分,置于“三、2—3”四条矩形框围成的矩形中,叠放次序置于底层。

七、对插入的矩形、艺术字、文本框进行调整。

第二章 制作扉页

一、插入一个文本框,无填充色,线条格式设置为粗细线,黑色,6磅,比页面略小(留边)。文本框内插入文字内容,调整文字大小、行距、字距等填满文本框。插图可以绘制或从剪贴画和其它位置插入。

二、插入两个文本框“FANGCAODI·JIAOSHIJIEGEKAN”、“2005/第9期”,分别置于正文文本框顶端左、右两端。将二者组合,方便复制到其它页面中。

三、制作页号和链接按钮,置于页面右边下端。

1、利用绘制一个小圆形,插入文本“1”,作为页号。

2、在页号下面画一个纵向长矩形,直到页下边,无线条颜色,填充色为兰色。

3、在在兰色矩形上半部画一个纵向长矩形,无线条颜色,填充色为粉红,宽度是兰色矩形的1/2。

4、在粉红矩形左边插入一个与之同样大的竖排文本“芳草地·教师节特刊”,文本框无线条颜色,填充色为白色。

5、在粉红矩形和竖排文本框下边绘制一橘色矩形,无线条颜色,比粉红矩形略宽,置于页边。

6、在橘色矩形上插入5个同样大的纵向圆角矩形(自选图形……基本形状,可用复制的方法),线条黑色,填充绿色;分别添加文字“封面”“上页”“下页”“目录”“封底”。

7、将“三1—6”绘制的图形和插入的文本框组合。方便复制到其它页面中。

第三章 制作目录页

一、安排版面

将版面划分为三部分。右边约占三分之二的部分,用于目录内容;左边上面约三分之二用于标题,下面插入一张图片和文本框,录入刊物的编辑者等信息。

二、录入与排版

1、插入横向长条形矩形,无线条颜色,填充墨绿色,置于页面顶端。

2、插入纵向矩形,线条为墨绿色虚线,无填充颜色,置于右边,作为目录内容区域。

3、模仿第二章第三步介绍的方法,插入页号和链接按钮,置于左上部,纵向长条形。

4、插入艺术字“芳草地·”和“教师节特刊”,纵向,分别设置不同式样,置于链接按钮条右边。

5、插入图片“机器人”,置于标题下方,大小适中。

6、在图片下插入文本框,无线条和填充颜色,录入责任编辑、指导教师、发行者、出版社、联系方式等。

在标题右下方插入文本框,录入期刊号。

7、在标题所占区域上部右边插入矩形和三角形,并合并为向下的箭头形状,矩形内录入“目录”,或插入艺术字。图形填充为墨绿色,无线条色。

8、在目录内容区内插入多个文本框(每个栏目标题和文章标题分别占用一个文本框,逐个插入或复制),栏目文本框设置为无线条色,填充墨绿色;文章标题文本框设置为无线条和填充色。

第四章 制作内容页

一、根据需要设置页面背景色。

二、将第二章中制作的页眉和页号、链接按钮条复制后粘贴到第四张幻灯片及第一张内容页中相同的位置。在页眉下和页脚处分别绘制一条直线,设置为淡兰色、双线,并将其与页眉、页号与链接按钮条合并。并将它们复制到以后制作的内容页中。

三、插入文本框输入第一篇文章内容,如果要分栏则每栏插入一个文本框,注意调整每个文本框的大小及内容多少。

四、在预留区域内插入图片,标题可插入艺术字。

五、用同样的方法,完成第二篇文章的录入和排版设置工作。如果需要底色和线条,可按版面需要进行设置。比如设置文本框的线条颜色、式样,填充颜色。并非文章周围都出现线条时可单独插入直线后对颜色、粗细、式样进行设置。

六、制作其它内容页。

第五章 制作封底页

一、设置页面背景色,设置为双色,上部为粉红、下部为土黄色。

二、将封面中制作的环行艺术字“教师节特刊”和用作无填充色的大矩形几两个横向的白色矩形复制到此。

三、将两个矩形设置为白色线条、填充绿色,并将上面举行适当上调。

四、在艺术字“教师节特刊”下插入弧形艺术字“芳草地”,设置为白色,其下插入文本框“2005.9”,右边靠下一点插入文本框“责任编辑和审订”,仍为白色。

五、在靠近下边出插入文本框,录入出版者和出版日期,分别安排到靠近页面左右两边处。

六、完成相关链接的设置和目录页的分页工作。

七、放映观看制作完成的电子报刊,并作出适当调整和设置。

第六章 深入了解绘图工具

Powerpoint的绘图工具功能自然无法与专业的绘图工具相提并论,但如果恰倒好处的使用却会使你制作的电子报刊增色不少,当然,同样可以使你制作的Powerpoint课件更加美观。

1、自选图形。为我们提供了一些常用的线条型图片,可以很方便地插入,为我们节省绘制所需要的大量时间,并且这些图形可以旋转、设置线条和填充颜色、相互组合。

2、直线工具。绘制的直线可以设置其颜色、虚实、线型、粗细、箭头、旋转、组合。可以用作文章分栏的线条。

3、箭头工具。

4、矩形工具。按住SHIFT键可以绘制正方形。矩形可以很方便地用作报刊封面的线条。

5、圆形工具。按住SHIFT键可以绘制圆形,否则,绘制椭圆形。

对于绘制出的矩形和圆形,不同的线条颜色和填充效果可以使你的电子报刊增色不少。

6、艺术字工具。单击插入的艺术字,艺术字工具条就会出现,利用该工具可以很方便地编辑文字、设置艺术字的式样、格式、形状、文字环绕方式、间距等。

7、三维效果样式。可以很方便地设置图片的三维效果样式。

7、网页设计如何插入水平线

在Dreamweaver里有以下办法:
1、设计视图,点插入菜单-HTML-水平线,或者在代码视图,直接输入<hr>即可;
2、插入一个高度为1px的表格或div,一定要删除空格符 ,div的话还要设置超出隐藏;
3、可以用CSS:border-bottom:1px solid #ccc;
4、可以用插入一个直线图片

8、在html静态页面中,使用哪个标签插入一条直线

HTML <hr> 标签 定义和用法 <hr> 标签在 HTML 页面中创建一条水平线。水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。 http://www.w3school.com.cn/tags/tag_hr.asp 具体用法和可用属性看这个地方。

9、请问在网页制作中加入一条水平线的HTML代码是什么?

网页中制作一条水平线的HTML代码有以下的方法可以实现:

1.使用html中的border属性来设置一条水平线

<div style="width:500px; border:1px solid red;"></div><!--复制到html文件中就会是一条红色水平直线,线的颜色、长短、可自己调节--> 

2.使用hr标签可以制作一条水平直线

<hr/>

3.使用background-color来制作一条线,和border基本类似

<div style="width:500px; height:1px;background-color:red;"></div><!--复制到html文件中就会是一条红色水平直线,线的颜色、长短、可自己调节--> 

4.可利用背景图来实现和background-color原理一样

<div style="width:500px; height:1px;background:url(背景图的路径) repeat-x;"></div><!--复制到html文件中就会是一条红色水平直线,线的颜色、长短、可自己调节--> 

10、如何在HTML中设计<hr>即水平线的颜色??

在HTML中设计水平线的方法如下

1  在网页设计过程中,如果随意利用缺省水平线,常常会出现插入的水平线与整个网页颜色不协调的情况。打开水平线属性面板也只有宽、高、对齐以及阴影方面的设置。

2,对水平线颜色的设置,怎么办? 其实,你只要仔细看一下水平线的属性设置面板,就会发现一个“快速标签编辑器”,点击此标签并在后面输入color=颜色。这里的“颜色”可以是任何颜色,一般格式为:< hr color=#FF0000>。

3,用这个方法设置后,在Dreamweaver中无法直接看到效果,我们可以点击“F12”键,在浏览器里浏览水平线的颜色变化。 

最后,再告诉你个小技巧

诸如“#FF0000”这样的颜色代码对于初级朋友来说不容易分辩,你可以这样做:给网页中的字体加上颜色此颜色是你想给水平线所要加的颜色,然后把颜色代码复制并粘贴到水平线的“快速标签编辑器”即可。

与网页设计直线相关的知识