1、怎么提高网站的设计感
一、 色调
到这几乎差不多已经完成调整了,但如果你够细心的话会发现按钮以及导航菜单的颜色还是 Bootstrap 默认的蓝色系。在有着设计师存在网站,设计师都会负责进行网站色调的调整,为了保证网站的一致性,所有按钮和导航一般是三到四种颜色。
在这里,虽然不可能像大公司网站那样取色严谨,但还是有一些快速的方法使网站看起来很搭配的。
使用 GIMP 的取色器读取背景图片的主题颜色,确认其 GBR 十六进制值;
使用 Color Scheme Designer 确认与差异大但同时又互补的颜色;
最后根据确定的颜色来制定按钮,可以用[Bootstrap Buttons][]等在线直接生成。
这样首页上那个大大的注册按钮就搞定了,接下来是修改导航菜单的颜色,这个比较简单,写入代码 .nav-pills > .active > a, .nav-pills > .active > a:hover {background-color: #FF9473;} 即可。
二、 字体
修改网页字体是让网站看起来更有特色、有现代感的捷径,我们可以去谷歌的字体服务(免费正版)中随意挑选自己喜欢的字体,但是要注意字体间的搭配,在这里我们选择由 DesignShack 推荐的谷歌字体搭配中的一种:Cardo(用于标题) 和 Nobile(用于主体内文)。
在网页头部中加入此代码:
在 CSS 样式表 custom.css 中加入以下代码:h1, h2, h3, h4, h5, h6 {font-family: 'Corben', Georgia, Times, serif;} p, div {font-family: 'Nobile', Helvetica, Arial, sans-serif;}
添加完后刷新即可查看效果了,现在我们的网站样式已经变成下面这样了,看起来比默认好多了。
此外,除了谷歌的字体服务外还可以使用像 Fontdeck 或 Typekit 字体服务,它们的字体更多,更多的字体搭配方案可以参考 Type Connection。
三、 CSS3
将上面都搞定后接下来要做的就是再加点 CSS3 特效了,如果时间不够的话简单的添加上盒阴影 box-shadow 和字体阴影 text-shadow 就可以让网站增色不少,CSS 代码如下。
h1 { text-shadow: 1px 1px 1px #ccc; } .div-that-you want-to-stand-out { box-shadow: 0 0 1em 1em #ccc; }
如果时间足够的话还可以添加一个放射渐变填充效果,可以让标题的显示效果更重一些,如下面对比图所示。(如果想要更多 CSS 效果的话可以去学习一下 CodeSchool 的在线教程)
四、jQuery
其实到这里了话网站看起来已经很不错了,但为了让它更加个性化,还需要再添加上一张背景图片。对很多程序员来说这一步是比较难以进行的,那么应该如何选择一张设计师可能会使用的图片呢?答案就是去 iStockPhoto 或类似的付费图库中去寻找。
这里我们将使用 Winter Sun 这张照片,为了让网站保持自适应布局,还需要使用 Backstretch 这个 jQuery 插件让背景图可以随时自动调整大小。
首先需要付费下载背景图片,然后放到 /img/ 文件目录中去。
将此图片设置为的背景图(background-image): $.backstretch ("/img/winter.jpg");
加入背景图后网页主题部分会产生遮挡,所以可以让其透明,这样网站效果看起来会更加现代、有设计感。这里可以使用这个技巧将网站变得透明,代码见右边,.container-narrow {background: url (/img/cream_st_transparent.png) repeat 0 0;}
五、 纹理
知道如何让一个网站看起来更加高雅优雅一些吗?是的,纹理。就像 24WAY 的背景纹理一样。
但是这些纹理效果应该去哪里寻找呢?设计师 Atle Mo 的 Subtle Patterns 网站是个不错的去处,我们接下来就使用这个网站上的 Cream Dust 纹理。点击下载,将纹理图片保存到本地,然后放到根目录下的 /img/ 目录文件夹中,最后到 CSS 样式表中加入代码 body { background: url (/img/cream_st.png) repeat 0 0;} 即可。
六、 图标
这里的图标并不是指那些透明的 PNG 图片图标,而是图标字体,其加载方式和字体一样,由 CSS 样式控制,比起图片图标来说这种图标字体加载速度更加,对资源的消耗也更低。在去年 24WAY 曾经有一篇如何在网站中使用图标字体的文章。
对于 Bootstrap 框架来说,整合的图标字体是 Font Awesome (Shifticons 也是一个不错的选择),和谷歌的字体服务一样也是免费开源的。要使用它只需将其下载下来,然后在根目录下创建 /fonts/ 文件夹,将其放进去。然后再将 font-awesome.css 文件放到 /css/ 目录文件夹。
接着将引用写入网页头部中,代码为 ,这时候我们可以随时在网站上任意地方自由使用这些图标字体了,如要想将一个卡车图标添加到注册按钮的话只需声明一下就可以,Sign up today。同时为了防止加入图标字体后引起按钮拉伸变形,还需要一点点额外的工作,将按钮宽度加大一点(.jumbotron .btn i { margin-right: 8px; })。
2、如何让一个网站看起来高大上?或者更有设计感
哈哈,那就得靠你自己进行建设了啊 高大上不一样适合欧 ,要根据自己的网站定内位而定。而且是什么风格的啊
是那容种的?
建议你自己慢慢琢磨,或者根据网上的相关视频进行学习。设计的时候要有思想,可以在设计的时候弄个框架布局看看
3、请问有谁知道哪些网站的网页好看,设计感要强一些的
这个就说不清楚的,自己看了好看就是了
4、谁知道哪些网站上有设计感很强的图?
不知道你需要哪方面的图,我这里介绍的网站是平面设计方面,
“亚洲CI论坛”http://bbs.asiaci.com/index.php
“中国包装设计网”http://www.chndesign.net/subject/
“魅惑之都”http://www.fanci.cn/bbs/index.php
“圆点视线”http://www.apoints.com/
“盘古视觉”http://www.cgpk.com/
“中国商业插画师联盟”http://www.cgpk.com/
“设计在线”http://cn.dolcn.com/
“韩国设计网”http://www.artglim.com/kr/
5、怎样培养设计感
工业设计专业
专业前景 本专业是随着社会发展、科学进步,人类进入现代生活而发展起来的一门新兴学科。随着物质生活条件的改变,人们的审美品位在逐步提高,设计出性能优良、美观大方、具有强烈时代感的产品,是企业提高产品市场竞争力的迫切需求。本专业旨在开展工业设计的理论研究和推广工作,培养出一批高水平的工业设计人才。
培养目标 本专业培养具有较强的创新意识和设计思维能力,具有良好的机械工程技术素质、计算机技术应用素质和造型艺术素质,掌握现代设计理论与方法,能够从事工业产品开发设计和人—计算机交互设计的应用型高级工业设计人才,侧重培养产品策划、设计、宣传、广告等方面高级专业人才。
培养特色 致力于培养学生的设计思维能力,特别是创新思维能力;培养学生具有一定的美学修养、较强的审美能力和设计的表现能力;培养学生适应以人为中心,以产品为对象,在“人—产品—环境—社会”系统中进行最优化的产品开发与创新设计。
主干课程 设计素描、色彩设计、造型艺术、工程制图、工程力学、电工电子学基础、平面设计、立体设计、产品三维形态设计、多媒体设计表达、设计思维与战略、三维图形学、技术美学、产品设计程序与方法学、产品计划与价值分析、产品创新设计、计算机辅助工业设计、人因工程学、工业产品设计等。
所授学位 工学学士
就业方向 毕业后可到传统工业、IT产业、科研单位和高等学校从事工业产品设计、人—计算机交互设计、视觉传达设计等方面工作。
机械设计专业简介
培养目标:培养从事机械设计制造、CAD/CAM技术应用的高技能应用型人才。
主要就业方向:机电设备的操作、保养、维护和设备管理岗位;机械制造;现代制造技术应用(含CAD/CAM软件应用);数控机械及其它产品制造部门的生产、管理、销售等技术岗位。
主要专业课程:信息技术基础;液压与气动;机械设计;电机与控制;自动化技术基础;测试技术;机械CAD/CAM;数控技术应用;电气控制;模具设计基础等。
6、怎样培养设计感和色感?
WordPress 博客,建议你去用一下,这是一个注重美学 和 css标准的开源博客系统,跟他们这些人交流以及看他们博客的配色等,,,我想会好点的...
找一些配色,怎么配比较好看..
7、如何让一个网站看起来高大上?或者更有设计感
让一个网站看起来高大上的方法很多,我们可以从内容上,观感上,体验等各个方面入手。当然,做容易实现的一种方法当然还是从观感入手,因为这既不需要有很高的文化底蕴,也不需要有很高的技术水平,只需要自己细心的琢磨一下就可能会有很好看的一个页面呈现在别人面前,或许更简单只需要下载几个插件就行。
当然,从观感上入手也有各种不同的方向,有走简洁路线的,有走炫技路线的。。实现手法各不相同。
具体可以看一下:http://browser.qq.com/?adtag=SEM1 这个就是很多炫酷的特效
也可以看一下:https://www.apple.com/cn/ipad/ 这个就是简洁风格,白黑灰的主旋律搭配也意外的让人觉得很好看。
或者你也可以去bootstrap中文网去看看网站实例,虽然只是简单的使用bootstrap来做了一下,但是 效果也还是很不错的。
8、如何提高网站的设计感
确认风格,这是最重要的。
什么行业,就选一种什么风格,想好自己网站的主要作用,是展示企业文化,还是企业产品,还是招聘介绍企业,想好了就容易多了,另外,一白遮百丑,如果没有特殊的想法,可以借鉴。
9、如何让一个网站看起来高大上?或者更有设计感
使用响应设计,才有html5语言来写
建议参考一些高大上的网站或者页面即可