当前位置:首页> 自助建站新闻> 网站建设概论

网站建设概论

发布时间:2020-05-18 17:00:00

在网站制作中,我们可能会遇到很多问题,因此网站设计者通常要扮演各种角色,掌握如何建立一个有效实用的网站布局知识。

因此,今天,我将与大家分享在这个平台的帮助下,网页制作过程中的10个关键点,每个新的网页设计师都应该知道。

一个好的网页不仅好看,而且用户友好。一般来说,一个简洁的网页设计最终会成为一个高可用性的网页设计,因为它不会在与用户的交互中产生混淆。

当页面上有太多的网站功能和组件时,会分散网站用户的注意力,失去浏览网站的初衷。确保每个页面元素都有自己的目的。然后问自己以下问题:

1、此组件用于什么?它如何帮助用户浏览?

2、如果我突然删除这个组件,大多数人会希望它“回来”吗?

3、如何将这些元素与网站的目标、信息和目的结合起来?

此外,虽然它可能是一个很酷的新概念或界面设计模式,但您需要确保设计仍然方便和直观地为您的用户。

人们似乎已经习惯了通用的交互模式、网站功能和网络接口。如果你的设计真的很独特,一定不要太模糊和晦涩。要有创造力,但要保持简单。

网站最重要的部分是整个网站的导航。没有它,不管是哪个页面,用户都会被困在这个页面上。在这个明显的实践方向上,我们将讨论网站导航建设中的一些重要问题。

首先,在网站的导航结构上投入足够的时间和大量的计划是非常重要的。虽然这是常识,但仍有许多设计师想当然地设计网站导航。

布局、样式、使用的技术(Java或CSS)、可用性和可读性都是设计导航时需要考虑的因素。

在缺乏客户端技术(如Java或Flash)的情况下,导航功能应该易于访问和使用。由于安全或公司策略的原因,用户不能打开或安装它。

因此,有必要为导航系统的放置做好准备。例如,一个好的导航功能可以放在显眼的地方。只要网页被加载,它就会出现,而鼠标不会再次向下滚动。这就是为什么页面应该保持干净和简单。有关详细信息,请参阅“如何规划和构建网站的导航信息结构”关闭介绍)。

复杂而非传统的设计可能会让用户感到困惑。即使是一瞬间,用户也不会怀疑:“网站导航在哪里?”

最后,建立网站的层次结构,多层次管理。确保在父层和子层之间易于导航。此外,无论在哪个页面上,都应该很容易到达顶级页面(如网站主页)。

主要目标是浏览你的网站,尽可能减少操作(操作),并让用户达到他想要浏览的内容。

随着各种所见即所得网页编辑器充斥市场,网页设计已经成为设计网站的简单1-2-3步。然而,大多数网页编辑器都掺杂了不必要的代码,使得你的HTML结构设计不当,难以维护和更新,导致网页膨胀。

通过您编写的web代码,您可以轻松地获得简单的代码,阅读和维护它。你可以说这是你自己的代码。

但是知道如何使用所见即所得ide或预览功能不会妨碍学习HTML和CSS。您需要了解如何创建一个高效、高度优化的web设计(详细信息请参阅“网页制作过程中常用的20个功能代码”的相关介绍)。

一个好的网页设计师可以确保网站在未来可以很容易地更新或修改。设计一个具有可塑性和易维护性的网站是一个伟大的网页设计师的标志,它使你的工作从结构化转向模块化,尽可能多(有关详细信息,请参阅如何创建网站或应用程序的风格指南和标准的介绍)。

网页设计是一个充满活力和“年轻”的行业。事情往往在短时间内改变。记住这一点将促进建立更灵活的网页设计。

普通人需要几秒钟的时间来决定是阅读更多的网页内容还是去另一个网站,因此作为一个网页设计师,应该有一个很好的方法来鼓励用户在这宝贵的几秒钟内选择前者(查看更多内容)。

重要的是要知道,如果用户在页面的开头看不到他们感兴趣的内容,没有多少人会向下滚动查看整个页面的内容。

所以,把重要的元素放在网站上,你可以很容易地在页面的顶部看到它们,但是不要过度拥挤在页面的上半部分,否则你会吓坏用户,不会继续阅读内容。

记住前半部分网页设计的卖点:把它当作一个推销员,让人们知道他们想在你的网站上看到什么。

虽然有成千上万种字体,但你只能使用一小部分(至少在主浏览器完全支持CSS3之前),所以要坚持使用web安全字体。如果你不喜欢网页安全字体,你可以考虑使用sifr或cufon来逐步增强网页设计。

保持字体的一致性,确保标题和段落的内容看起来不同,并使用空格、行高、字体大小和字母间距等属性,让用户轻松愉快地阅读和扫描内容。

也许网页设计师经常犯的错误是使用了错误的字体大小,因为我们希望将内容尽可能地放在网页中,所以我们有时会设置字体大小,让用户感到不舒服(详情请参阅如何使页面文本阅读更舒适的相关介绍)。

如果可能的话,尽量保持字体大小超过12像素,尤其是对于段落内容。虽然他们中的很多人不会因为字体太小而遇到阅读困难,但想想老年人、近视眼等有类似视力障碍的群体吧!

完成字体后,还需要指出使用正确颜色的重要性,例如,白色背景上的黑色文字,如果使用高对比度,橙色背景上的红色文字会让眼睛紧张。

此外,对于特殊形式的色盲,使用一些用户友好的颜色(这种检查工具称为vischeck,它可以测试某些类型的色盲)。

有些颜色组合只适用于前景色的一部分,而不适用于背景色。例如,粉色背景的深蓝文本和深蓝背景的粉色文本使用相同的两种颜色,但不同的部分会影响其可读性和阅读舒适性。

不仅要使用好的颜色组合,而且要在页面的适当元素上使用它。

学习如何通过选择正确的格式来优化web图像,并确保文件大小足够小,使其可行。

虽然人们现在正在使用宽带,但仍有拨号上网的用户。此外,尽管移动设备技术的普及,移动设备并不一定支持与宽带相同的速度。图片文件的大小可能会延长网页的加载时间,从而将用户赶走。

这里有一个选择合适文件格式的技巧:如果图片是单色的,最好保存为PNG或GIF格式;如果是连续色调(如照片),最好保存为JPG格式(参见“网站图片优化的分类”的相关介绍)。

有许多工具可以帮助您进一步优化图片并减小其文件大小。您可以参考此工具列表来帮助优化图片、最小化图片数量、灵活使用图片并尽可能减小文件大小。

这样可以大大缩短页面的阅读时间,提高页面的性能。

一件事,网页设计师必须知道,你的工作环境(浏览器)是关键和不可预测的。如果您的web设计只能在多个web浏览器中运行,这是不够的。您需要测试尽可能多的浏览器。

创建兼容页面的方法是:每次我们编写一小段代码(布局中的一行或一个块)时,都需要查看它在不同浏览器中是否兼容。当然,如果我们足够熟练,就不会那么困难了。此方法仅推荐给经常遇到兼容性问题的新手。

许多兼容性问题是由不同浏览器对标记的默认属性解析造成的。只要我们设置一点,就可以轻松解决这些兼容性问题。如果我们熟悉标记的默认属性,我们就可以理解为什么存在兼容性问题以及如何解决这些问题。

在设计网站时,一个好的网页设计师应该时刻牢记SEO的基本概念,例如网页的内容结构和文本表达的标题(即网页的标题和徽标)。

在这个时候,如何合理地编写您以前学习过的代码的能力将开始使用。在您了解了正确的、基于语义和标准的HTML/CSS之后,您很快就会意识到div比table布局好得多,它不仅能更准确地显示内容,而且有助于搜索引擎排名。

此外,了解如何使用CSS替换背景、文本和图片也是一项很好的技能。

评论:

在网页制作中所学到的技能大多来自工作经验。学习是一个持续的过程,没有比犯错误更好的方法来获取知识。

因此,实战是解决问题的最好办法,也是解决问题的唯一办法。你可以通过亲自做更多的事情来更快更好的成长。此外,建议你从别人的经验中学到更多,这也是进步的捷径。