网页设计遇到的问题

第页网页设计遇到的问题〔网页〔制定〕〕碰到的问题

CSS样式表在网页制作中一般有3种方式的用法，当有多个网页要用到CSS，采纳外联CSS文件的方式，这样网页的代码大大减少，修改起来非常方便。下面介绍网页制定碰到的问题，希望这些内容对您有帮助。

一、如何使用3种类型的CSS样式?

CSS样式表在网页制作中一般有3种方式的用法，那么具体在使用时该采纳哪种用法呢?当有多个网页要用到CSS，采纳外联CSS文件的方式，这样网页的代码大大减少，修改起来非常方便;只在单个网页中使用的CSS，采纳文档头部方式;只在一个网页一两个地方才用到的CSS，采纳行内插入方式。

二、关于冲突的CSS样式

将两个或更多的CSS样式应用于同一文本时，这些样式可能发生冲突并产生意外的结果。浏览器依据以下规则应用样式属性;如果将两种样式应用于同一文本，浏览器显示这两种样式的所有属性除非特定的属性发生冲突。如一种样式可能将蓝色指定为文本颜色，而另一种样式可能指定红色作为文本颜色。如果应用于同一文本的两种样式的属性发生冲突，则浏览器显示最里面的样式(离文本本身最近的样式)的属性。因此，如果外部样式表和内联CSS样式同时影响文本元素，则内联样式为其中所应用的那一个。

如果有直接冲突，则CSS样式(使用class属性应用的样式)中的属性将取代HTML标签样式中的属性。

例如，hl定义的样式可以指定所有hl段落的字体、大小和颜色，但应用于该段落的自定义CSS样式.Blue将取代hl样式中的颜色设置;另一个自定义CSS样式.Red将取代.Blue，因为它位于.Blue样式的内部。

三、文档相对路径的表示方法

关于文档相对路径省略关于当前文档和所链接的文档都相同的绝对URL部分。如果要链接的目标文件与当前文档位于同一文件夹中，输入文件名;如果位于子文件夹中，则提供子文件夹的名称，后跟正斜杠"/'，然后输入文件名;如果位于父文件夹中，则在文件名前添加"../'(其中"..'表示文件夹层次结构的上一级目录)。

四、解决跳转菜单可能出现的问题

选择跳转菜单项后，如果再次导航回到该页面，或者如果在【插入跳转菜单】对话框的【打开URL于】文本框中指定了一个框架，则无法重新选择此菜单项。解决此问题有两个途径：

●使用菜单项选择择提示(如类别)或用户说明(如"选择其中一项：')。在选择每个菜单之后将自动重新选择菜单项选择择提示。

●使用【前往】按钮，该按钮同意重新访问当前所选链接。

必须要注意的是：由于这些选项应用于整个跳转菜单，因此在【插入跳转菜单】对话框中，每个跳转菜单只能选择这些选项中的一项。

五、善用拖放

在使用Dreamweaver编辑网页时，常常必须要插入一些图像，如果要插入的图像很多，按照常规方法来操作就显得非常麻烦。可以利用拖动技巧来很好地解决这个问题。首先把Dreamweaver的操作窗口变成活动窗口，找到要插入的图像文件后，把它们一一用鼠标拖动到网页的适当部位，Dreamweaver将自动把这些图像的URL添加到文件的HTML代码中，这里要求被拖动的图像文件必须是GIF、JPEG等Web图像格式的文件。关于已经在网页中的图像也是一样，直接拖过来即可，但如果被拖动的图像上有超链接，就不可以再使用拖动技术了，因为那时拖过来的仅仅是超链接地址。

网页制定流程中常常遇见的问题

问题1、跳过网站功能及信息架构上的研究，直接开始视觉创作。

网站的功能和信息架构是网站的核心，一个网站不是单纯的让访问者去感受视觉上的美观，美观永远是第二位的，而功能性却是第一位的。一个企业网站是为了展示企业的形象、售卖企业的产品和服务;一个门户网站是为了更好的提供信息内容，一个个人博客是为了分享个人的观点，树立个人品牌等等，确保了这些功能更好的实现了之后才应该去合计视觉上是否美观的问题。

我在之前的一篇文章《从千鸟志看网页制定中的功能性》中分析过千鸟的个人博客在功能性和用户体验方面的优点，虽然初次打开该博客并不会被它看上去似乎没怎么制定的灰白界面所吸引，但这个网站优良的用户体验却一定会让你记忆深入。

更重要的是，网站功能以及它的信息架构关于视觉是有非常重要的影响的，这点我在《网页核心内容对视觉表现的影响》这篇文章中有较为具体的论述，在这里就不再展开了。

问题2、制定过程中碰到困难，随意调整制定方向。

画好了草图就要按照制定方向坚决执行，这样才干确保前期的创意阶段的工作不被浪费。很多制定师前期的创意构思都很有想法，但是一旦开始制定，途中碰到寻找素材或者技术方面的困难，或者突然发现某一个素材很不错，很美丽，马上抛弃前面的整个创意，开拓一条新路从头开始，但往往做到半中间就再做不下去了，导致制定总是半途而废，情绪上不断受挫，焦躁不堪。而我们如果看过高手的制定过程，比如文子的光大银行的制定视频，我们就会发现高手从来都不轻易的改变已经设定好的制定方向，并且总能把我们看来完全用不着的素材变废为宝，从而拥有化腐朽为神奇的本事。千万不要花费大量时间去寻找完美的、拿来不用调整就能用的制定素材，能找到这样的素材的几率比中彩票还要低，而是要不断提升我们将看上去和整体制定毫不搭边的素材融合进整体制定的能力。

问题3、细节不够讲究，显得粗糙。

一些制定师给我发来个人作品让我给说说建议，我发现其中共同存在的问题就是制定中细节做的不好。渐变和高光过于生硬、阴影的距离和不透明度太高、对齐方式偏差几个像素、上下左右边距距离太小、元素和背景的反差不够造成元素清楚度不够等几个问题是常见的制定毛病。这些问题虽然也涉及到技术的问题，但是最重要的我认为还是用心不够、认为做到差不多就行了的态度问题。这里我向大家推举Dribbble和PremiumPixels这两个网站，这其中的制定作品无论哪一个细节都是非常完美、无可挑剔的，下面是我随手从这两个网站中拿出来的作品，大家应该能从这里理解网页制定就是细节的艺术这句话的含义。

问题4、技术不过关，创意无法得到实现。

只有通过大量的制定和学习才干尽可能多的掌握具体的技术。但是无论是跟着网上的制定教程学习，还是通过研究别人的PSD文件也好，不能做过一遍就过去了。一般来说我们常常必须要必须要通过教程掌握的是如何处理手头的素材，将其融合于整体的场景之中的思路的方法，看看高手是如何通过使用调整图层、自由变幻、色彩范围选择等一系列的技术去实现必须要的效果，而不仅仅是按照教程做一遍就完了，下次碰到必须要自己动手创建场景的时候依旧无所适从。如果你已经有了一定的PS基础，应该多学习些图标和场景的创建，认真研究，你一定能学到很多东西

网页制定注意什么问题

1、不要让你的用户长时间等待加载

不管是面对APP还是网页，用户的耐心都非常之有限。有研究说明，7秒的等待几乎是用户的等待极限，而10秒的加载时间，只会让绝大多数的用户关闭页面，再精美的加载动画都安抚不了用户的烦躁。所以，不要让你的用户等待加载，尤其是这个加载时间很长的时候。相关的应对策略很多，比如你可以采纳占位符先显示布局，逐步加载内容，至少让用户知道，这个过程正在推动。

2、不要让促销广告盖住内容

现实生活中广告已经让人难以忍受了，如果你的网页中广告竟然挡住了主要内容，这几乎是逼着你的用户生气关闭页面，这样换来的广告营收从某种意义上也是饮鸩止渴。

另外一方面，长时间的互联网浏览经验会培养出用户的另外一种广告应对策略：当他们看到广告的时候会主动忽略它。这关于广告的转化率同样是毁灭性的打击，不是么?

3、避免滚动劫持

滚动劫持通常指的是开发者或者制定师为了实现新的布局、动画或者排版，而修改了滚动的固定点甚至滚动条和体验本身，带来的非常规的滚动体验。滚动劫持是最恼人的状况之一，所以，通常而言，除非极各别的原因，尽量不要过度调整和修改用户滚动浏览的体验制定。

视频和音频自动播放关于用户而言是一种失控的体验，关于用户也是一种刺激。这样的制定应该慎重使用，除非用户对此已经有所预期。

4、不要为了美丽而牺牲可用性

网站和APP的界面制定的外观不应该影响它本身的可用性。避免繁琐的制定，为了美观而牺牲内容的可读性和对比性都是不能让人接受的体验。

5、不要使用晃眼的文本和广告

令人晃眼的文本和广告本身体验不佳，它们会让人分心，而且还会触发体质敏感的癫痫患者发病。

网站制定中不要忽视哪些问题

1、使用不合理的模板

用模板确实是一件非常方便的事情。大型企业用模板确实说不过去，但是初创公司借助BootStrap做网站绝对是情有可原。使用类似Bootstrap模板来作为基础，借制定师之手针对品牌和企业气质稍加定制，其实是个很不错的主意，如果〔沟通〕优良，说不定最终能浮现出一个非常不错的网站，关于企业的产品与服务也是很不错的加成。

但是仅仅只是套用模板而不予以调整和定制，你所遭遇最常见的问题是模板与品牌本身的视觉制定上无法达成一致，从LOGO使用的色彩，到品牌中独特的字体，都无法与网站构成较高的匹配度。

不过如果你真的是在这方便也捉襟见肘的话，尽量挑选在各方面与品牌形象本身更接近的模板，将疏离感降到最低。

2、使用默认外观

和中文网站的状况不一样，英文网站使用多种多样的字体是一件很轻松的事情。如果你使用了Bootstrap、Wordpress这样的工具来创建网站，而仅仅使用默认的设置，你愚弄不了任何人，大家一眼就会把你偷懒的事情看出来连字体都是默认的OpenSans。用Wordpress默认外观也是一样的道理。如果你不打算在网站视觉上和别人稍作区别的话，对品牌的伤害是显而易见的。

当然，如果你能用好诸如FontAwesome这样的字体和CSS工具，也有点铁成金的奇效。它能以增加图标库和样式的方式，让Bootstrap等各种各样的系统，拥有美丽一致的视觉语言。

毫无疑问，这些被精心制作过的原创的图标，自然是比系统内置的通用图标好。如果你有自己的创意和点子，为什么不去寻找更有个性，更符合你的品牌调性的图标、插画和字体呢?或许时间成本、实现成本并没有你想象中那么高。

3、排版对比度的问题

字体的排版的问题之大，远非绝大多数非制定人员想象的那么简单。文字和字母看起来很简单，但是它们可以成就好制定，也可以毁掉整个版面。

在许多"自制'的网页中，最常见的问题是标题和正文字体之间的对比度较低，整个页面的信息层级不显然。仅仅只是调整字体大小并不够以构成对比，标题字体的字重应该比正文更大，也就是说字体应该更粗，保证它们够显眼，更容易被眼睛注意到。

4、使用深色背景

虽然背景处于网页的最底层，但是它实际上是占据网站面积最大的部分，在用户看到网页的时候会第一时间感受到，精心选择背景色彩很重要。

作为一个久经验证的法则，黑色色调的网站，除开真正专业的制定师做出来的，其他的基本都没法看。使用白色作为基本的背景色是非常安全的，不过多数的制定师会选择浅灰色打底。值得注意的是，网站的灰度越高，黑色的文字的可阅读性越差，为了保证网站的可阅读性，灰度最好坚持在15%以下。

5、多级行为呼唤

CallToAction，通常被称为行为呼唤，一般指