web设计_web设计尺寸 - CSDN
精华内容
参与话题
  • Web UI设计基础

    千次阅读 2018-07-31 12:55:43
    WebUI User-Interface,用户界面,交互设计,界面设计 WUI,网页用户设计,以人体验即用户为主,传统以功能为主 分辨率 显示器分辨率,垂直方向和水平方向像素的个数,因而像素尺寸不固定的 5:4 4:3 16:10 ...

    WebUI

    User-Interface,用户界面,交互设计,界面设计
    WUI,网页用户设计,以人体验即用户为主,传统以功能为主

    分辨率

    显示器分辨率,垂直方向和水平方向像素的个数,因而像素尺寸不固定的

    • 5:4
    • 4:3
    • 16:10
    • 16:9
    • 自适应布局

    Web基本分类

    • 门户类:新浪、搜狐、网易、腾讯,信息杂而多
    • 分类信息:58同城、赶集网,生活相关的
    • 交易类:B2B、B2C、C2C
    • 博客类:微博
    • 论坛:天涯、虎扑步行街、贴吧
    • 行业类网站:某行业主题
    • 企业类:公司形象、活动、广告
    • 机构类:政府事业单位
    • 功能性网站:提供一种或者几种功能

    网页的模块有哪些

    模块:网页布局的最小单位,展现不同类别的信息,具有特定的功能
    导航:网站整体架构,红框导航、蓝框二级菜单
    新闻:动态信息,更新频率快
    首页焦点图:banner,首页第一屏
    搜索:框和按钮
    这里写图片描述

    如何实现网页?

    布局原理:网页是多个网格,从上至下,自外而内

    设计维度

    版式
    这里写图片描述
    色彩
    图片
    字体:主题、副标题、正文
    段落:对齐方式,字体对比、字号对比
    细节:阴影、风格元素、对齐

    界面设计流程

    版式(需求-策划-原型图-设计图)——>制作——>输出
    PS草图/纸笔草图

    基本规范

    设计规范的使用人群,设计师前端运营开发等
    色彩规范:一个带颜色方框,写好用处、颜色值,主色、辅色、文字色
    这里写图片描述
    文字规范:字体大小、行间距、适用范围
    这里写图片描述
    图标规范:功能、默认、hover(如果有)
    这里写图片描述
    控件规范:一级按钮、二级按钮,默认、hover、点击
    这里写图片描述

    字体选择

    衬线字体/非衬线字体
    字体字号:磅(pt)、点、像素(px)
    粗细:粗体、细体、常规体、斜体
    颜色:正文黑色/链接蓝色
    选择字体:通用的字体、在线字体(打包到资源中,缺点是汉字字体太大达到几M)

    色彩运用

    和谐、均衡、重点突出、色彩心理学
    色块区分板块,减少视觉疲劳、模块清晰
    活泼、清新、商务大气

    Web中的单位

    px常用,非固定,显示器上的最小单位
    pt,物理尺寸,1pt=1/72英寸
    PPI(DPI),每英寸的像素(点)数,用来表示精度
    em,百分比(%)

    视觉层次

    透视:近大远小
    景深:近实远虚,表示元素层次
    色彩层次:亮的在前,暗的在后

    官网首页

    企业形象、主要业务、集合功能

    专题页面

    比如天猫活动页:强烈视觉效果、有趣味的体验、推广信息
    流程:结构-风格-头图-内容

    banner设计

    首页焦点图:
    需求-风格-版式-配色

    展开全文
  • Web网页设计代码

    千次阅读 2020-02-09 12:13:59
    代码分享: https://pan.baidu.com/s/1xf4AQlfM8e6Nvw2oXUdbrA 提取码:ap1v
    展开全文
  • web网页设计实现——04.16

    千次阅读 2019-04-16 16:49:36
    jQuery动画总结: show(),hide(),toggle(),slideUp(),slideDown(),slideToggle(),animate(),slide Window(滑动窗口) jQuery的淡出淡入: 代码实现: ...a href="#">...

    jQuery动画总结:

    show(),hide(),toggle(),slideUp(),slideDown(),slideToggle(),animate(),slide Window(滑动窗口)

    jQuery的淡出淡入:

    代码实现:

    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li class="navmenu"><a href="#">课程大厅</a>
                <ul>
                    <li><a href="#">web网页实战</a></li>
                    <li><a href="#">服务端技术</a></li>
                    <li><a href="#">Python开发</a></li>
                </ul>
            </li>
            <li class="navmenu"><a href="#">学习中心</a>
                <ul>
                    <li><a href="#">视频学习</a></li>
                    <li><a href="#">交流学习</a></li>
                </ul>
            </li>
            <li><a href="#">经典案例</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
    <script type="text/javascript">
        $(function(){
            $(".navmenu").mouseover(function(){
                $(this).children("ul").show();
                //$(this).children("ul").css({display:'block'})
            })
            $(".navmenu").mouseout(function(){
                $(this).children("ul").hide();
                //$(this).children("ul").css({display:'none'})
            })
        })
        $('*').css({'margin':'0','padding':'0'});
        $('#nav').css({"background":"#89c6d5","width":"600px","height":"20px","margin":"0 auto"});
        $('ul li').css({"list-style":"none","float":"left","text-align":"center","line-height":"20px","position":"relative"})
        $("#").css({"text-decoration": "none", "color": "#d5931b", "padding": "0 10px", "width": "100px"});
        $('ul li ul').css({"position":"absolute","top":"20px","left":"0"})
        $('ul li ul li').css({"float":"none","width":"100px","background-color":"#a8d584", "margin":"3px 0"})
        $('ul li ul li a').css({"padding":"0"})
    </script>

     

     

     jQuery尺寸:

    px em  (css盒子模型)

     

    width():设置或返回元素的宽度(不包括内边距,边框,外边距)
    height():设置或返回元素的宽度(不包括内边距,边框,外边距)

    通过jQuery获取元素的宽高:

    实现代码: 

    <div id="div1" style="height: 200px;width: 400px;padding: 10px;border: 10px solid red;margin: 1px"></div>
    <button>显示div元素的尺寸</button>
    <script>
        $(document).ready(function(){
            $('button').click(function(){
                var txt=" "
                txt +="div的宽度是:"+$("#div1").width()+"px"+"<br>"
                txt +="div的长度是:"+$("#div1").height()+"px"+"<br>"
                txt +="div的宽度,包括内边距"+$("#div1").innerWidth()+"px"+"<br>"
                txt +="div的长度,包括内边距"+$("#div1").innerHeight()+"px"+"<br>"
                txt +="div的宽度,包括内边距和边框"+$("#div1").outerWidth()+"px"+"<br>"
                txt +="div的长度,包括内边距和边框"+$("#div1").outerHeight()+"px"+"<br>"
                txt +="div的宽度,包括内边距和外边距"+$("#div1").outerWidth(true)+"px"+"<br>"
                txt +="div的长度,包括内边距和外边距"+$("#div1").outerHeight(true)+"px"+"<br>"
                $("#div1").html(txt)
            })
        })
        </script>

     

    展开全文
  • 30个酷毙的交互式网站(HTML5+CSS3)

    万次阅读 多人点赞 2013-10-11 00:05:32
    HTML5,CSS3,还有Javascript 让很多绚丽的设计...现在的网页设计是可以很有交互性的,已经不再被静态布局给限制住了。下面列出的这30个网站就是个很不错的证明,它通过诸如音频和视频让传统效果变得酷炫。开始欣赏吧!

    很久前就像找些文章来翻译,and这是第一篇,刚开始翻译着很有兴致,但中间就开始累了,感觉好多好多,因为不仅要翻译,还要看网站,还要排版,花了两天空闲时间还是硬着头皮翻译下来了,虽然翻译质量还是好渣,不少单词还得看词典~~

    ---------------------------------------------------------------------------------------------

    30个酷毙的交互式网站,原文地址:

    http://webdesignerwall.com/trends/30-great-interactive-sites

    我很抱歉很久没更新这个网站了,但不要担心,我还活着(在忙另外一个网站)。今天我有个很帅的主题要分享 — 30个酷毙的网站。

    HTML5CSS3,还有Javascript 让很多绚丽的设计效果得以展示。现在的网页设计是可以很有交互性的,已经不再被静态布局给限制住了。下面列出的这30个网站就是个很不错的证明,它通过诸如音频和视频让传统效果变得酷炫。开始欣赏吧!

    (译者注:最好备用多种浏览器来访问)

    01 Bienville Capital Management

    http://www.bienvillecapital.com/

    这个网站使用了页面无缝过渡效果。点击那些网页你就会发现跳转到别的网页基本是没有停顿的,因为网页通过褪色和滑行动画使得切换效果很流畅。

    02 Tool of North America

    http://toolofna.com/

    第一眼看到这个网站就觉得太像一个Flash网站了,但它确实是只由HTML5CSS3Javascript来实现的,而且动画效果超级平滑。因为使用了Ajax(对SEO一点都不友好),所以内容部分不能被搜索引擎索引到。如果你的浏览器不支持Javascript,就会只出现一个黑色页面。尽管这种模式对SEO(译者注:搜索引擎排名技术)不友好,但它的交互效果太棒了,而且在手机浏览器的表现效果的是很漂亮的。

    03 Whiteboard

    http://whiteboard.is/

    这个网站有着极好的背景模糊效果。亲眼看下:当浏览器分辨率较低(或在手机设备),背景会有模糊效果,否则就是一组动画效果。

    04 Cyclemon

    http://cyclemon.com/ (译者注:打不开~

    简单漂亮的滚动插图效果。

    05 Mahedine Yahia

    http://www.mahedineyahia.fr/

    主要的背景动画由191张图片组成,当你浏览器往下滚动时就能看到独帧动画效果了。

    06 Life of Pi 

    http://journey.lifeofpimovie.com/

    在这个网站浏览有更高水平的滚动独帧动画效果,如果你喜欢电影,那你会很喜欢拖动这个网站的滚动栏的。它使用独帧动画展示了变幻的背景材质,实现这个惊人的效果值需要用JavascriptCSS3来控制近100张图片。

    07 Teehan+Lax

    http://www.teehanlax.com/

    .这个网站精心处理了每个细节漂亮地展示了每一个故事。内容有着很好的排版和动画效果,但你也很可能没主要到这些细节:当你浏览到网页中间部分,突然想回到顶部菜单栏,这时往上滚动鼠标,顶部的导航栏就会出现了。这个逻辑很有道理的,想一想,当你鼠标往下滚动时,你是想继续往下阅读,所以不需要导航栏以免挡住一些阅读区域;当你鼠标往上滚动时,导航栏就自动出现因为你可能想到网页顶部找导航栏跳转到其它页面。

    08 Coffee Surfing illy

    http://coffeesurfing.illy.com/wps/wcm/connect/cs_en/home

    这个网页也许没有第一个介绍的那个网站那样好的无缝效果,但页面切换效果很有趣。当你滚动鼠标时,页面左右区域会向不同方向切换。

    09 Satorisan

    http://satorisan.com/

    这个网站针对购物商店进行设计,主要的商品页面允许你在一个列表中浏览所以的产品,点击任何产品会以漂亮的视差滚动效果跳转到产品详情页面。

    10 Wink TTD

    http://winkttd.es/

    这个网站在响应和交互方面表现得很棒。当你用不同的设备比如很大个的iMac或者很小个的iPhone来访问,页面和动画基本如一。

    11 Solasie

    http://www.solasie.com/en/

    这个网站在交互设计方面做得非常棒。你可以很愉快地在浏览富媒体内容(图片画廊、音乐和影视)。唯一的不足就是SEO做得不好,这个问题在Ajax输出内容的网页是很普遍的,但他们一般是通过提供带关键词的链接来分享这些网页。

    12 REI 1440 Project

    http://www.rei1440project.com/

    这个网站使用时间线很适合地表现他们的观念:“一分分钟”组成了24小时。你可以使用方向键浏览那些时间点,点击进入,你会发现效果做得非常棒。

    13 Sketchin

    http://www.sketchin.ch/en/

    隐藏在导航菜单的文本是这个网站的一个亮点。

    14 Anonymous

    http://weareanonymous.fr/

    这个网站布局有很好的设计,而且提供了不错的资源(隐藏在可爱的脸蛋后面)

    15 Beatbox Academy

    http://www.beatboxacademy.ca/

    这个网站可以用按键和鼠标来敲击不同的鼓。它没有其它服务(你不能保存或者导出鼓声),但挺好玩的。点击右上方的导航栏,视差滚动效果也是非常棒的。

    16 Quartz

    http://qz.com/

    这个网站把重点放在了内容部分。它不像新闻类网站让你去点击标题然后再阅读整篇文章,而是在一个页面中展示了所有内容。当你滚动左侧的标题栏目,内容会自动预读,点击之后,地址栏也会自动更新方面分享文章。手机流量可以有相同的体验。

    17 Evans Halshaw - Bond Cars

    http://www.evanshalshaw.com/bondcars/

    如果你是视差滚动效果爱好者,那这个网站就一定要看下。

    18 Zurb Manifesto

    http://zurb.com/manifesto

    另一个视差滚动效果为主的网站。

    19 Peugeot Hybrid4

    http://graphicnovel-hybrid4.peugeot.com/start.html

    如果你觉得上面介绍的视差滚动效果非常酷,那你肯定还没见过这个网站 — 漂亮的插图、关键帧动画、令人激动的音乐还有超强悍的切换效果。访问这个网站可一定要开着音响!


    20 Chrysler: Test of Ownership

    http://testofownership.com/

    这是具有优秀页面切换效果的另一个例子。当选择不同网页的时候,页面布局、内容过渡效果都非常好,更不要说 http://testofownership.com/proof 漂亮的动画。向下滚动,数字、图表会自动增加,向上滚动就会做出相反的动作。简单,但很酷炫。

    (译者注:暂时打不开~

    21 Tinke

    http://www.zensorium.com/tinke/

    这个网站会演示整个产品流程给你看,可惜不是响应式的。


    22 Milwaukee Police News 

    http://www.milwaukeepolicenews.com/

    Ajax和视差效果实现的酷炫的警察网站。


    23 2am Media

    http://2ammedia.co.uk/

    虽然这个树枝结构的菜单看起来是Flash效果,但难以置信它是用Javascript实现的。

    24 Minimal Monkey

    http://minimalmonkey.com/

    这是一个简单的网站,但布局、页面转换和导航都支持响应式。


    25 Athenos 

    http://www.athenos.com/

    这是一个可爱的网站并有着一系列的细节设计和切换效果,它证明了庞大的现代网站在加载时确实比较慢,因为仅仅一个Gif图片就有2.5mb这么大,漂亮程度与文件大小成正比。


    26 Meng To 

    http://mengto.com/

    这个网站用不俗的图片和突然的动画展示了漂亮的作品。

    27 RED 

    http://ff0000.com/

    当你浏览网站各个地方,你会发现这个网站有着相当丰富的设计细节和动画效果。

    28 Carbon Studio

    http://www.carbonstudio.co.uk/

    如果你错过了老式Flash可以拖控图片的时代,那你要好好欣赏这个网站。

    29 Oakley Airbrake MX

    http://moto.oakley.com/

    这是另一个让人疯狂的滚动视差网站,具有视觉冲击力地展示了他们的产品。

    30 Nick Jones

    http://www.narrowdesign.com/

    这个网站也许有点过时了,但它的交互设计依然是非常棒的。


     更多:

    这些网站大多在http://bestwebgallery.com/ 找到了。

    展开全文
  • 10款web前端基于html5/CSS3应用特效

    千次阅读 2017-05-02 09:15:35
    1.jQuery百叶窗效果焦点图 多种百叶窗动画方式 对于百叶窗动画效果,我们介绍的不是很多,目前就介绍过一款CSS3百叶窗图片切换。这次要给大家带来一个基于jQuery的多种百叶窗动画效果焦点图,焦点图的切换伴随随机...
  • WEB架构设计概述

    千次阅读 2018-05-24 16:55:55
    题记 初始搭建 开始就是各种框架一搭,然后扔到Tomcat容器中跑就是了,这时候我们的文件,数据库,应用都在一个服务器上。 服务分离 随着系统的的上线,用户量也会逐步上升,很明显一台服务器已经满足不了系统的...
  • 什么是web设计

    2010-03-23 09:44:00
    在平面印刷物上如鱼得水的人们并不一定会在web上表现出他们的睿智. 他们评论的才能, 完全的发挥在字距调整的斗争中, 视我们专业的困难为无物.那些未经世故的家伙为我们使用的难看的字体而感到悲哀. 他们会大声的惊叹...
  • 动态网页与静态网页的区别: &nbsp;&nbsp;&nbsp;&nbsp;...动态网页呈现的用户数据随着用户、时间、运行环境改变而改变。客户看到的网页内容是动态变化的。...•javaScript程序(用于提高页面与用户的交互...
  • 基于Python的Web开发

    千次阅读 2019-02-26 11:24:29
    下面来介绍一下基于Python语言的Web开发中几种常见的Web开发框架; 1、Python语言是第四代程序设计语言,是解释性的、交互性的和面向对象的。它在Web应用和非Web应用中都发挥了重要的作用。比如Google的核心代码是...
  • web设计器--设计流程图(raphael)(一)

    万次阅读 热门讨论 2015-01-06 16:40:18
    案例是采用raphael的js文件进行画图,适用web设计,可以下载案例,里边是一些html的案例,下载后自己研究一下数据格式引入到自己的项目里。 Demo下载地址:http://download.csdn.net/detail/lilinoscar/8332927 ...
  • web设计尺寸规范

    万次阅读 2016-09-12 21:33:44
    网页设计标准尺寸: 1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。 2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条...
  • web设计器--设计流程图(raphael)(二)

    万次阅读 热门讨论 2016-08-16 09:59:22
    这里介绍一下如何新增删除按钮: 如上图:右侧属性表格中有个“”删除“”按钮,可以进行删除节点。 解决方法: 1.打开myflow.js文件,该文件被压缩了,你需要格式化一下js,可以通过网上“格式化js”进行格式...
  • 响应式WEB设计 - 基本技术要素

    千次阅读 2011-05-23 23:19:00
    响应式WEB设计模式基于“移动第一”的原则而提出。主要使用如下基本技术要素:viewport meta标签, 可以在浏览器中禁止zoom排版,根据设备大小自动剪裁,包括字体大小和垂直空间布局大屏幕设备采用grid布局,小屏幕...
  • 关于activiti6web设计

    2017-09-29 07:40:43
    activiti6的web设计器会保存到ACT_DE_MODEL怎么转换到ACT_RE_MODEL呢???
  • 打造无懈可击的web设计——流动布局和弹性布局

    万次阅读 多人点赞 2012-05-11 13:39:08
     这样的规则同样适用于Web设计。通过增加网页的灵活性,以及采用必要的步骤来保证它在尽可能多的场景中都具备可读性,我们就给自己的作品赋予了一些与众不同的特色。这是一个循序渐进的过程,并且当采用HTML和CSS后...
  • web设计之:崛起中的九大HTML5开发工具
  • 10个最新交互式Web设计实例欣赏

    千次阅读 2018-03-06 10:05:09
    如今,越来越多的UX/UI设计师将交互/动画元素(例如鼠标悬停状态,音频或视频媒体,滚动交互等等)添加到其网站设计之中。这样一方面可以使网站本身更加绚丽有趣,吸引更多访问者,同时也能够激励访问者更多的关注和...
  • Bootstrap Web设计与开发实战pdf

    千次阅读 2018-08-14 12:19:49
    链接:https://pan.baidu.com/s/18yz2PGICMYnLrAMvW9qhnA 密码:wstf 本书为完整版,以下为内容截图:  
  • 2016年最好的15个Web设计和开发工具

    千次阅读 2017-05-02 09:18:56
    无孔不入的网络为Web设计师和开发人员开辟了新的机遇渠道。每家企业都在争取在这个在线平台上展现头角,以便于在这场竞争中占据优势。这就是为什么设计师和开发人员的需求大大增加。但是web开发的标准相比几年前,...
  • 信息架构:超越Web设计(第4版) 的前三个版本都是信息架构领域的开山著作。其中描述了信息组织的普遍和永恒原则,这一原则也适用于不断增长的移动世界。在第4版中,作者运用大量最新的插图和例子为这些原则提供了...
1 2 3 4 5 ... 20
收藏数 948,825
精华内容 379,530
关键字:

web设计