• Web界面设计


    Web界面安全宽度

      网页的内容宽度必须≤web安全宽度

      常用web安全宽度:(基于电脑分辨率)1200px、1000px、990px、980px、970px、960px

      颜色模式:RGB

      适合用在浏览器中显示的图像格式:Gif、Png、Jpg

    网页布局

      分析流程:从上到下、从左到右、从内到外(按页面构成模块分析)

      三种布局级别:

        1、行(横排)布局

        2、列(浮动)布局  float

        3、①行布局时,margin-top值在父子级间共用;margin上下值在行布局时共用,浮动后就变为边界增加了

          ②clear只允许用在最后一个布局对象上(不推荐随意使用)

            clear--清除其他元素的浮动值对本元素的影响;  {clear:left/right/both;}

    设计流程

      分析:网格结构、页面安全宽度

      创建结构(参考线和矩形):一定要按照页面模块来分组(建立图层组)

      添加效果(图层样式)

      添加内容、文字、图片

    贴图(高清图)

      贴图类型:通栏图像(图文结合)、广告图像(图文结合)、产品图像(全部给单色背景、实景、渐变色背景,在一定范围内背景效果要一致、产品角度要一致)

    字体规范

      文字边缘设置:

        常用字体:宋体、黑体、微软雅黑

        常用字号:12px、14px、16px、18px

        小号文字(12px、14px)边缘给“无”、大号文字边缘要消除锯齿

      标题多用黑体、微软雅黑或宋体加粗,正文建议用宋体

      web界面(没有溢出)宽度:用屏幕分辨率的宽度减去浏览器滚动条宽度

    Photoshop切片

      【文件】->【导出】->【存储为Web所用格式】->【[优化]界面】  选择所需的切片(按shift多选)

      预设:PNG-24、PNG-8

      存储->切片:选中的切片->保存(会自动在文件夹中自动创建images文件夹,内含切片),下一次存储切片时只需选到images文件夹所在的文件夹,保存切片会自动存入images文件夹内,不需要进入images文件夹再保存,否则会在images文件夹内自创另一层images文件夹

  • 相关阅读:
    【Java基础】2、Java中普通代码块,构造代码块,静态代码块区别及代码示例
    【Java基础】1、java中的instanceof
    【Java面试】1、基础知识篇
    【github&&git】3、git图像化界面GUI的使用
    【github&&git】2、github入门到上传本地项目
    Spring Boot属性配置文件详解
    微服务Spring Cloud与Kubernetes比较
    导入时如何定制spring-boot依赖项的版本
    spring容器ApplicationContext初始化(spring应用上下文初始化)
    spring概念简介、bean扫描与注册实现方式
  • 原文地址:https://www.cnblogs.com/zhouwanqiu/p/8854821.html
Copyright © 2020-2023  润新知