网页设计理论

网页组成
网页文本传输和通信遵守的协议是超文本传输协议——http协议。
网页有通用的头和底部版权部分。
图片、视频、声音、动画等元素,网页文档只保存它们的位置信息。

分辨率
1024*768 水平线上包含1024个像素点,共768条线。
分辨率与显示尺寸有关,还与显像管点距、视频带宽等因素相关。只有当显示器刷新频率设置为“无闪烁刷新频率”时,显示器能达到最高分辨率,才称这个显示器的最高分辨率是多少。
分辨率以像素数计量,是面积单位。如640*480=307200。

像素
px,用来计算图形尺寸的单位。图片的尺寸以像素为单位时要指定其分辨率,如72。

网页基本尺寸
手机:网页宽度一般设置480px,高度视版面和内容决定。
ipad等:网页宽度一般设置768px,高度视版面和内容决定。( ipad等平板分辨率一般:800*600)
PC:网页宽度一般设置在1002px以内,因为还需减去浏览器边界和滚动条宽度,这两个相加22px。网页宽度根据网页类型和内容决定。1024*768时,有920px,940px,960px,980px或1002px。1002正好铺满整个浏览器。考虑到用户体验,高度一般不设计超过3屏,屏指显示器默认高度。( pc的分辨率:大于等于1024*768)
一些网页广告尺寸:
120*120 产品或新闻照片展示
120*60 网站logo
120*90 产品演示或大型logo
120*125 表现照片效果的图像广告
234*60 框架或左右形势主页的广告链接
392*72 有较多图片展示的广告条,位于页面头部或底部
468*60 应用最为广泛的广告条尺寸,位于页面头部或底部
88*31 网页链接或网站小型logo
注:根据网页设计规范,尽量让图片满足19:9、4:3、3:2三种长宽比。

网页布局
布局方式有两种:
自适应布局/流动性布局
固定布局
流动性布局缺点:不适合加载浮动层,只适合文字化界面,在加载浮动层,如客服界面等,会挡住一定区域。
流动性布局中网页内部模块也要求自适应。
固定布局:不会随浏览器大小和分辨率变化,固定在网页指定区域。优点:布局精细,有条理。
网页布局技术实现:
两种常用方法:表格布局、div+css布局。
表格布局:table元素具有零边框特性。核心是设计一个表哥家结构,将内容填入单元格中。
缺点:不利于页面设计和修改,改版时工作量大;页面内容与表现样式混合,可读性差;不利于数据调用分析;网页文件大,浏览器解析速度慢。
div+css:核心是网页表现、内容和行为分离。优点:高效率开发和维护;跨平台;降低服务器成本,加快网页解析速度;用户体验好。
结构:html。表现:css。行为:DOM,js脚本。

网页色彩
色环:三大色系:红、绿、蓝。#aabbcc:aa表示红,bb表示绿,cc表示蓝。
纯灰阶色:14种,#111111到#eeeeee。
每两位都是重复值时可简写成3位。
色彩三要素:色相、饱和度、亮度。
色彩搭配:
单色搭配:用明度来。同种颜色不同色调。
类比色:相邻颜色
补色:色环直线相对的颜色
分离补色:同时用补色和类比色。
原色:三原色
二次色:二次色之间都拥有一个共同颜色
全色相:所有色相

网页设计流程
设计原型——UI——页面编写(动态的需要和后台商量,代码文件命名应制定统一要求)——与后台嵌套——测试——交付

欢迎分享本文,转载请保留出处:前端ABC » 网页设计理论

分享到:更多 ()

发表评论 0