导航:首页 > 万维百科 > 网页层次设计

网页层次设计

发布时间:2020-08-09 18:09:21

1、网页设计层中可插入的网页元素有哪些?

图层是网页的一个区域,在一个网页中可以有多个图层存在,它最大的魅力在于各个图层可以重叠,并且可以决定每个图层是否可见,同时也能够自定义各图层之间的层次关系。在熟练掌握了图层技术之后,就可以给网页提供强大的页面控制能力。 为了说明图层的功能,我们先来制作简单的实例: 1、实现特效 在Dreamweaver MX 2004中新建一个页面,运行“Insert→Layer Objects→Layer”命令,此时编辑窗口中会出现一个黑色矩形框,这就是插入的图层。当鼠标移动到矩形的框线上时,鼠标会变成十字箭头形状,此时点击鼠标则框线周围出现8个黑色实心方块,左上角还有一个空心方块,表示这个图层被选中了。 提示:用鼠标拖拽实心方块可以改变图层大小,拖拽左上角的空心方块可以改变图层的位置。 第二步 在图层中点击一下鼠标,并且在其中输入“中国电脑教育报”,然后在属性面板窗口中将文字设置为蓝色。 第三步 单击图层边框选中图层,接着运行“Edit→Copy”命令复制当前图层,然后在编辑窗口其它空白处点击一下鼠标,并且运行“Edit→Paste”命令,这样在编辑窗口中就又出现了一个图层,不过目前它们重叠在一起,需要移动图层之后才能看见这两个图层。 第四步 把其中一个图层的文字颜色更改为黑色,并且移动图层位置,使得两个图层的位置相差几个像素,这样就产生了阴影效果。 2、嵌套图层 所谓嵌套图层指的是一个图层创建在另外一个图层中,比如图3所示的就是一个典型的嵌套图层(如图3)。实际上制作这种嵌套图层很简单,只要创建了一个父图层之后用鼠标点击图层内部,并且再次插入一个图层即可。不过嵌套的图层并不意味着子图层必须要在父图层内部,它们之间存在着继承关系。 继承的作用是可以使子图层的可见性和父图层保持一致,由于很多动态网页的特效是通过控制图层的可见性来实现的,因此当父图层可见性改变时,子图层的可见性也随之改变。而且继承关系也可以让子图层和父图层的相对位置不变,比如我们拖拽父图层移动,此时子图层也会跟随着移动,这在制作动态网页的时候将显得非常有用。 3、图层的“Z-顺序” 和表格相比,图层最大的优势在于图层可以重叠,为了表示各个图层哪个在上面,哪个在下面,就要给每个图层设定一个序号,这个序号就是“Z-顺序”,它的意思就是除了屏幕的X和Y坐标之外,人为增加一个垂直于屏幕的Z轴。 4、使用图层建立表格 虽然使用图层来定位网页元素比使用表格方便得多,但是只有IE 4.0以上版本的浏览器才支持图层功能,因此为了让使用旧版本浏览器的朋友也可以看到你辛苦制作出来的作品,最好的方法就是把图层转换为表格。 如果想把自己的网页制作的绚丽多彩,就必须掌握图层技术,否则日后制作动态网页时候将会遇到不少困难,因此建议大家通过上文的介绍深入研究一下,才能够真正掌握图层技术。

2、标准的网页设计思路分哪三个层次

这问题没法回答,这是个人适合的东西,没固定哪样就是标准。
一般注重代码的严谨,代码搜索引擎优化,前端的用户体验度。

3、如何利用UI设计一个清晰的网站结构

UI网页设计和网站建设不同,网站建设单单只是通过程序源码实现网站功能的实现,而UI设计则是体现在视觉角度,当两者相辅相成之时则将会成就网站建设的核心。深圳网站建设公司都会配备有专业的全职设计师,可能在设计师的需求上大都是创意,然而在我们真正做一个项目或者工程的时候则会发现“艺术家并不是需要创新,而是需要会活用技巧。”优秀的设计效果离不开技巧的运用,而技巧的运用则能够烘托出设计之美。
新华针对UI网页设计的实战经验和总结,以直观的改善网页视觉效果为目的来提升网站的高级感为目的,从网页的设计层次、字体、结构、对比、透明度等诸多因素上进行对比和调整,其详细内容可以分为以下几点:

1、使用色彩和字重来创造层次结构,而不是单纯的大小对比

在对UI 文本进行样式控制的时候,最常见的错误莫过于过度依赖字体大小差异来营造对比。

单纯实用字体大小对比,所营造的对比并不够,尝试结合色彩和字重来营造更好的对比效果。

如果可以的话,你甚至可以采用两到三种颜色:

(1)主要内容采用深色(诸如标题,但是不要用纯黑)

(2)次要内容采用灰色(比如文章发表日期)

(3)辅助性内容采用浅灰色(比如页脚中的版权声明)

类似的,在UI设计的时候,通常两种不同的字重足以营造出优秀的层次感:

(1)大多数的文本采用正常的字重(400到500,具体取决于字体)

(2)对于需要强调的文字采用较重的字重(600到700,具体取决于字体)

应当尽量不要让正文部分字重低于400,因为这一部分字体字体本身尺寸已经较小,低于400会使得可读性不佳。如果你依然需要降低字重,那么不妨让字体色彩更浅一点,或者替换成其他识别度较强、字重相对较小的字体。

2、不要在有色背景上实用灰色的文本

在白色背景下,将黑色的文本改成灰色,是不错的淡化其视觉效果的做法,但是在彩色背景下这么做,则是另外一回事。

实际上,让白色背景下文本由黑变灰实际上是达到降低对比度的效果。

但是在彩色背景下,想要降低对比度是应该让文本逐步接近背景色,而不是改为灰色。

想要降低和背景色之间的对比,通常有两种方法:

(1)降低白色文本的不透明度

降低不透明度,能够让背景的颜色透过来一些,以一种不冲突的方式降低前景文字和背景之间的对比度。

(2)基于背景色手工挑选文本的颜色

当背景是图像或者图案的时候,半透明的文本会影响可读性,这个时候最好是基于背景主色调来挑选相应的文本色。

(3)阴影设计

相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,更自然,它模拟了最常见的光源特征,光线从上往下照下来所营造的阴影效果。

如果你对此有兴趣,Material Design Guideline 非常清晰地给你讲明白了这样的阴影的制作细节。

4、尽量少使用 Borders

盒子模型是网页前端最常用到的工具。当你需要在两个元素之间创建分隔的时候,尽量避免实用两者的边界直接接触。

虽然 Border 是分隔两个元素的好办法,但是它不是唯一的方法,使用过多会让整个布局的设计感降低,甚至会造成混乱。

所以你可以尝试下面的办法来规避:

(1)使用 box shadow

box shadow 同样可以营造出边界感,而且更加微妙,并不会显得突兀,不会分散用户的注意力。

(2)实用不同的背景色来区分

通常,相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以,你所需要做的就是在不同的区块采用不同的背景色,并且尝试删除边框,因为你根本不需要它。

(3)增加额外的留白

创建元素之间的分离效果,并不一定要通过线框来表现,只要增加留白,让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。

5、不要让小图标无端地放大

当你在设计着陆页的时候,可能会突出产品的功能,这个时候你需要一些大图标来作为视觉锚点,这个时候你可能会去 Font Awesome 或者 Zondicons 这样的网站找几个免费的矢量图标,然后放大到符合你需求的尺寸。

它们都是矢量图标,照说是可以无损放大的。但是一个通常只有16×16 的图标放大三四倍,它固然无损,但是在视觉上就显得颇为不专业了:缺乏细节,总感觉过于矮胖。

可是,如果这些小图标是你唯一能够搞得到的素材的话,那么不妨试着将它置于另外一个带有颜色的图形当中:

这样的设计不仅能够让图标达到预期的视觉体积,而且看起来要比单纯放大,看起来细节会更多一些。当然,如果你手头不是那么紧的话,最好还是买几个大尺寸的高素质图标,比如 Heroicons 或 Iconic。
真正而有效的UI设计需要符合用户、符合网民的需求进行设计,在网站建设的基础上完成网站的维护,网站建设离不开UI设计,所以掌握以上技巧后运用到设计中辅助网站建设,将会使得用户对网站的体验感和高级感更加满意。

4、网页层次设计具体指什么?

如同穿衣服,先里后外,但整体得协调搭配

5、如何提升网页设计的视觉层次感

1. 明确元素设计目标
网页上的各项元素通常都有其存在的目的和意义,在构建视觉层次时我们就可以从这方面着手,根据网页元素的不同角色确定优先级,然后进行视觉层次的构建。
2. 考虑用户浏览模式
当用户初次访问网站时,他们一般不会仔细浏览所有内容,而是会进行快速的扫视,确定其中是否有自己感兴趣的内容。
3. 功能性优先
我们常常会有这样一个误区,认为视觉层次是服务于网站设计美感的。其实,视觉层次设计的功能性反而要更重要一些。设计师在构建视觉层次时首先需要确保每个元素发挥了自己的作用,比如提供给用户清晰的导航菜单、可见的购买途径等,然后再考虑元素组合的界面美观与否。
4. 善用留白
留白或者说负空间,不仅仅是指界面元素之中空白的区域,它更是视觉层次构成的核心元素之一。在视觉层次设计中,留白一方面可以用来联系或区分不同内容元素,创造别具一格的布局。另一方面它还可以帮助强调某个关键元素,让它获得用户额外的关注。
5. 使用黄金分割
黄金准则主要是指1:1.618的页面比例,它被公认为是最具美感的,在自然界、日常生活、舞台布局等多个方面都有着不同的应用。

6、网页设计的时候层次怎么调

设置相对点
然后 提高层级
z-index

百度 软偷界论坛 office
要么付费 要么那些key 或者软件
有教程的 去吧

7、求一份网页设计作业,要求三个层级的网页设计。

我有以前做的dreamweaver的网页作业。 为了方便大家下载参考。
我把网页作业源文件打包上传到我的百度网盘。
网页作业下载地址公布于本人的百度空间的文章中。
找不到的可以私信我
你可以下载下来参考一下,对你有所帮助,请采纳,谢谢

8、网页页面设计的时候没有层次感,请问怎么可以加强一下?

段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常常陷于对于某一种色彩或是某一种效果的偏爱,而这种情况会使我们的设计缺乏长久的生命力。并且我们自己在审美上会局限于对这种偏爱的执着从而影响我们的进步。而这种偏执也常会导致我们的设计缺乏层次感。

那么层次感通常表现在什么地方呢?在以前写的《色彩解答》系列中第一篇就讲过关于色彩的层次,在那篇文中有讲到用“黑、白、灰”去分析色彩的层次。我们在设计的时候可能会使用一种色彩把整个网站做出来,结果发现这单一的色彩做出来的效果让我们的网站变得很单调,很土气。有时就算是多用了色彩也一样的土气,网站使用的色彩并没有层次感,也没有对比。都处在相似的灰度上,所以网站看起来就灰头土脸的。当然我们还可以使用高对比纯色块来做设计,(韩国的网站有很多都是这种手法)这种手法有讨巧的地方,因为相对来说比较简单,但是同样也比较容易被抄袭。但这样的设计缺乏生命力,作为一种风潮,也有点像是快餐,谁都能复制得了。不需要任何的文化作为基垫。当然并不是说这种手法就真的一无是处,这种只能作为一种手法来应用,不能当作是万用灵药到处使。

光用文字来说必然是感觉不到的。那么我们来看看这张图。

我们看到IBM的设计色彩并不多,但是层次感就却是有了。他这里有黑色、淡蓝色、白色、其中黑色与淡蓝色之间的对比较为吸引眼球。并且我们发现黑色是纯黑、而浅蓝色却是属于高亮的那种。这种强对比对人的视觉是有一定吸引力的。并且黑白灰三者都有了。加上三者之间的比例并非均等的。而我们在设计的时候通常会使用一些灰度相近的色彩放在一起,并且饱和度也不高,所以最后出来的作品只能是灰头土脸。这样的网站我就不找例子了,找谁的来说谁也不开心。当然也包括我自己。呵呵,大家可以去我的作品集去找找,一定有那种灰头土脸的东西。

另外我们还可以看到IBM这次新的设计比原来的设计更有立体感,这就是我上面所说的元素层次。这种层次感拉开了浏览者的视觉深度,使得我们的网页不再平面。虽然也不是3D的效果,但是我相信2D的效果必然会成为网页设计的一个新的趋势。通过2D模拟出视觉立体感,会使得网页设计更有张力,内容也更为丰富。

而在纯色块的布局之中色彩鲜艳的图片更加显得醒目。这又是一种视觉层次,也可以说是复杂与简单的对比!设计没有什么一定的规律,这里包含的因素有很我。设计得好与不好,重要的是在于设计师对于这个世界的理解有多宽广。所以设计师不能只光顾着加强自己的制作技巧,更要不断的积累自己的文化知识。不断的增加自己的厚度,那样才能设计出更多精彩的作品。

9、网站规划可分为哪三个层次

网站建设可以分为三个层次:

1、信息发布层次。在网页上提供关于企业及其产品特性的一般信息,让用户可以访问站点、浏览信息。交互性体现在企业提供了信息,而顾客通过主动输入域名、搜索或点击看到了企业网站并浏览其页面信息,这是互联网最初级的交互性。

2、培养兴趣层次。网页内容与形式设计尽量考虑潜在客户的特征与需求,提供与企业行业、产品相关的各种信息,使潜在顾客访问页面后,可以通过点击按钮、搜索信息和发现兴趣点,培养起对产品、公司、服务的进一步兴趣。这一层次的交互性体现在企业向顾客提供相关信息,满足顾客的兴趣需求,以吸引顾客、刺激需求;顾客通过必要的参考信息的支持,更充分地认识企业产品并确认自己的需求。

3、建立关系层次。企业网站运用各种Web交互性技术,使网站访问者可以通过数据库搜索、发送邮件、网上交谈、定购、实时付款、货物派送等方式,与企业建立起有效的商品交易的信息流与物流关系。

10、网页的设计有几种方法

第一、靠前、无边框设计。无边框设计在近几年比较流行,在设计页面的时候,将页面中的风格线、边框删掉,用间距来代替的一种设计方法。无边框设计一般是以大图为主,图片本来就是一种分割元素。而内容基本是有规律的,留白间距之间的内容一定要相对一致、重复、紧密,这样用户在浏览的时候才会认为这些内容是一体的。一般来说,小众垂直的产品更适合使用无边框设计。

第二、卡片设计。卡片的设计打破了传统上固定的排版布局方式,提升了版面的使用率,可以给网站建设增加更多的惊喜。那么卡片设计有哪些优势呢?1、可以提高页面的使用率。卡片就好像是一个容器,将类型不一样的内容设置在不一样的卡片中,这样就可以很好地区分内容,还能够统一页面的风格。比如传统列表,内容一般是纵向滚动的方式,能够展示的内容比较有限,卡片式的设计采用的滑动方式,就可以有效地解决空间问题。2、区分卡片上的内容。卡片就好像是一个容器,将不同的内容放置在不同的卡片,更好地区分内容的类型。卡片的维度是不一样的,而且相对独立、有互相有联系,所以通过卡片归纳网站的内容,整个网站就显得更有秩序。3、卡片式设计可以提升可控性、提升体验度。卡片式设计的使用范围比较广泛,可以覆盖、滑动、堆叠,有良好的扩展性和可操作性。

第三、分割线的设计。这也是常见的一种页面布局设计方式,可以更好地帮助用户快速熟悉页面的布局,有良好的内容组织性。分割线可以贯穿整个页面,将不同的内容进行分割,成为独立的信息。

网站建设中的页面布局,有不同的设计方式,而且设计的趋势不断在变化,在设计页面布局之前,就要考虑好合适的样式,不能一味地追求潮流,根据产品的实际需求,选择合适的设计方式。而分割线的设计,想要做得出色,就要处理好线的间距、粗细、颜色等等

与网页层次设计相关的知识