所有的内容都采用了左右分块布局(大多数为左

设计灵感 急速飞驰 浏览

小编:在这次暑假期间,集中性的针对html开发进行了一次学习,但在实际制作网页中遇到一些困难。你们也许认为肯定是关于技术的问题,其实不然,我所遇到的最大问题就是ui设计方面,不

  在这次暑假期间,集中性的针对html开发进行了一次学习,但在实际制作网页中遇到一些困难。你们也许认为肯定是关于技术的问题,其实不然,我所遇到的最大问题就是ui设计方面,不知道如何去布局一个网页,使之既能完整的表达我所表达的东西,又能美观地给展示出来。

  针对这个问题,我认为第一是自己经验不足,第二没有做好前期调研工作,若做好了第二点工作将大大加快制作的进程。例如在简单的完成作业时,如果单纯直接开始完成作业,这是盲目的,肯定每个同学都是从了解作业是由哪些科目的作业构成的吧,这也就是前面所提到的第二点。

  前面分析了造成这个问题的原因,从处理的角度,也就有了更多的处理方式。对于这次的漏洞,以下文章我将针对如何去制作一个网站的首页进行研究与分析,该调研主要为新闻社交类和旅游类。

  从调研的情况来说,对于网页总体的布局,除导航、轮播图和尾部三部分外,所有的内容都采用了左右分块布局(大多数为左窄有宽的布局,个人意见此种布局更好看)。在我看来,对这种布局的实现可以采用大盒子里面嵌套两个左右盒子,再分别进行添加各自的小盒子进行内容的填充。左边的盒子可以根据实际网页的作用添加一些兴趣文章或主题相关的超链接等,右边的盒子才是真正内容的东西。这种布局好处不仅可以使用户注意力集中在一个区域内,也不会觉得网页内容过于单一。

  关于内容无论是社交类、购物类还是旅游类,大多数的导航栏都有和网页自己的特色标志或者特色功能(具有标志性代表的)。从导航界面一看,就能够初步了解和认识该网页是什么内容,例如新浪网导航内出现了“微博”“博客”类标签,那么这个网站会更加偏向将事实类的信息发送给使用者。例如csdn的顶部导航里含有多个实用且快捷的标签。

  关于布局大多都是采用浅色为底色、与内容更小的字体组成,不会分散使用者对整个网页主题的注意力,但对于长期使用者来说,更加的方便快捷。

  总结导航应该使用一些图标、特色功能(经典)和一些基本的登陆注册的链接,布局简单最好,也可对网页所倾向的链接进行突出引导(不能太多)。

  关于内容新闻类网页大多数此处框架是对一些信息的分类。购物类网页大多数此处框架是对一些商品的分类。而一些旅游类的大多会用到轮播图进行一些景点的展示,然后在轮播图上添加复选框的搜索。

  关于布局针对旅游类网页,我对排名前十的旅游网站进行了研究,大多数都是将购票放在首页,更多繁琐的超链接让我眼花缭乱,减少了阅读网页的兴趣。在其中,我最欣赏的是马蜂窝的布局,这部分由轮播图、就具有选择功能的搜索浮框、图片来源文字三个主要模块构成,在整个页面占据四分之三的内容。此布局具有简单大方扁平化,而这些特点正是当前pc端用户所喜欢的,大多说的客户端和网页都已经向扁平化进军。

  总结这部分的内容主要是去引导阅读者的使用该网页,可以利用这个区域去突出网页的主题。另外再调研中大多数网页的搜索框部分都含有热门推荐,指引读者去了解可能会感兴趣的词语。但对于本人个人审美和使用感受来说,更喜欢简洁和自己去选择。

  关于内容:目前我所调研的网页中发现,每个网页都含有热门推荐的功能:购物类网站大多是一些关于秒杀或销售较好的产品信息链接;社交类网站大多是一些关于当前热门、实时或者具有讨论意义的文章;旅游类网站大多是一些关于购买优惠头条、旅游套餐的推荐。

  关于布局:在我本人看来,这一部分可以采用左右分块布局。如果是制作新闻和社交类网页,这部分应该去使用大面积的去堆积;如果是制作旅游类网页,这部分不建议使用太大面积,就个人调研大部分网页来看,旅游类网站若使用大面积的热门推荐(特别是关于金钱有关的推荐,以穷游网为例),会让使用者从该网页去获得旅游相关信息的兴趣大大减少。该部分一般为三个浮动小盒子构成较美观,且每个小盒子的内容能够独立且抓住眼球。

  关于内容:我调研中的所有网页中都是一个一个盒子构成,每个盒子类型各不同,展示了网页的个性化和丰富化。每个盒子又以链接的形式进行填充,里面会含有更多内容的链接。对于新闻社交类网站,传递的更多应该是信息与文字,所以整体都以文字链接堆积进行填充,让使用者能够得到更多更丰富的信息;对于旅游类网站,传递的更多是景点信息与特色,所以在整体可以使用标题突出、图片展示、简短的文字描述的一个小盒子。

  关于布局:首先从整体布局来讲,依旧采用左右分块布局。左侧制作一些标准流的小盒子进行堆积,每一个小盒子的内容和性质各不相同且最好实时;右侧制作一些浮动流的小盒子,一行中三个小盒子比较适当,太阳城娱乐城每一个小盒子是具有不同的方向但性质相同。其次这一部分也将是整个网站首页的主要布局,最好在整个页面的二分之一以上。

  关于内容:以马蜂窝为例,大多数的尾部都是对自身网站所属公司的版权声明和备案工号的声明,一般会对自身的app、微博、微信进行宣传,和一些友情合作网站公司进行宣传。

  关于布局:大多数都采用左右布局,也会有一些是标准流式布局。左右布局大多左侧为“指南”、“关于我们”、总体服务类型,右侧为一些二维码。最后底端就是一些声明和客服电话与帮助中心,底端部分会再次放入网页的标志。

  总结:尾部部分的备案相关是必备的内容,布局可以随个人偏好进行血案则标准流或者浮动布局。个人觉得上下标准流较好。

  本文对网页整体布局和一些个人觉得较好的布局进行了简单的分析。网页整体布局对于整个网站的发展至关重要。

  网页的界面将会直接决定用户的去和留,页面的结构也是衡量用户体验度的重要标准。

  现在基本都离不开做网页,但是不同网页给人的感觉完全不一样,如何让你的网页看起来更加清爽,怎样让用户更愿意停留在你的网页中,就需要很好的设计了,偶然发现一篇《网页设计中常见的错误》,将其中的内容...博文来自:刘小绪同学的博客

  通过前面八章的介绍,现在你就可以通过添加图片、设置列表、添加字体、背景颜色等标签,做一个很简单的静态网页了。下面的例子就是我在CodeAcademy中的作业。      gc_2299   ...博文来自:gc_2299的博客

  在您的计算机上创建和查看网页要求:文本编辑器互联网浏览器介绍当您导航到Internet上的网页时,浏览器正在做很多工作。浏览器读取所有必需的文件(HTML,CSS和JavaScript)并解释这些原始...博文来自:weixin_42266907的博客

  第一次网页,是0基础,自己一边查资料一边学习,现在在学习采购订单的录入,期中采购订单上的表头,要选择供应商,我想请教下该用什么控件比较,并且可以模糊搜索的功能,谢谢论坛

  用bootstrap做一个背景可轮转的登录界面,基于css的旅游信息服务系统 基于JSP的旅游信息服务系统下载

  这次来总结一下公司的Task1实现一个登录界面。登录界面其实在大三的时候就有做过,但是当时做的界面超级low,主要区别在于有无css,由于公司的设计要求,对于该界面的很多细节处理实在不容易。所以,还是...博文来自:Kurokos Development Notes

  简洁美观的登录和注册html页面,从17素材网站充钱下载所得,分享出来供大家使用。下载

  我想用delphi把界面做的像media player一样美观,应该看什么样的书,请大家介绍介绍,感谢!论坛

  朋友叫我用dreamweaver做个网页,好像购物网交作业,不知道怎么实现登录 注册留言等。我我也只用过那个软件几次,我大多用visual studio 2008 C#,感觉用那个挺好做的,不知道哪位大哥大姐用这方面的资料,最郁闷的是自从装了W7 SQL数据库我也没装,又大又麻烦,做好是access,虽然没学过,感觉差不多。谁有这方面的资料麻烦,贴下网址,小弟自己去研究下。论坛

  原来做网页都是table,做个新闻列表或者物品展示列表之类的需要的时候写循环就可以了rnrn后来在就用控件直接输出rnrn现在DIV+CSS是不是DIV也要在程序中输出?全部都编成串然后输出?rnrnrn没做过希望大家指点一二论坛

  总是感觉自己用Vb做的程序不够美观,请问怎么让自己的程序更加的美观?有没有相关的vb资料。请帮帮忙论坛

  谁有比较好的jquery或scritp加div的弹出式层 的列子或代码。rn比如里面的全部分类按钮弹出的层!rn功能越强大越好啊···rn谢谢了啊论坛

  请问如何将完整网页转换文本网页?rn 保留其链接和文字,不要图片,FLASH等其他内容!论坛

  比方说:有一个静态的首页,想在其中嵌入一个登陆的界面。rn登陆的界面是用vb.net编的。该如何实现呢?论坛

  代码行长度到底多长最为美观?rnrn即:代码写多长后应该按回车键?以使在其他的机器上打开观看时,显示器的宽度和代码行的宽度正好,不至于宽于或窄于显示器的宽度?论坛

  请问,我做个网页,我想在它加载的时候再直接加载个swf,rnrn而这个swf不是做在网页里面的,而是弹出来的,我本来做了个,用弹出窗口的,但是,swf不能充满rn整个窗口的,郁闷rnrn请问有什么办法能实现显示swf,而不会出现空隙的问题。rnrn谢谢!论坛

  我用NT4+IIS3组成了一个网部网络并做了一个类部站点,网页中图片文字一切都正常,可当做一个关于文件的下载的网页时(用FORNTPAGE2000做的网页,这样做的首先打一个标题例如:WINZIP然后全选WINZIP做超链接到服务器的的一个文件)当在服务器上打开些网页时正常可在其它工作站却总是出错说访问出错。论坛

  我是一个初学网页的人,我想问一下各位大虾,用dreamweaver中的什么布局好啊?rn论坛

  不知道能不能用多层分布开发的,发布到网络上使用?rnDELPHI做电子商务的网站不知道如何?rn用什么技术可以实现?谢谢!论坛

  weixin_43699349:我尝试了一下,结果。。。全都不行,又没有报错,,,

当前网址:http://www.builder.org.cn/linggan/webdesign/3547.html

 
你可能喜欢的: