12-02web设计
一、网站的元素
- 域名Domain Name
要不高于在数据传输时标识计算机的电子方位（有时候也指地理位置） - 空间interspace
虚拟主机是在网络服务器身上划分所使用的编程语言，换成源代码就是一堆按一定格式书写的文字和符号。 - 浏览器Brownser
浏览器会帮我们翻译html语言代码生产我们设计的模样。实现全页面的布局声音交互视频等
网页构成的基本元素
图片 文本 图标 视频 声音
网页的区分
- 静态网页
静态网页就是很简单的一个页面（一般都是以html或者结尾的），几乎可以一眼看到他能呈现的所有东西，基本没有交互设性，用户只能看，不能说。 - 动态网页
动态网页的交互性就很大了，它需要有自己的数据库，来让前台跟后台进行联系，用户可以看，可以说，后台也可以根据用户的反馈来修改前台所呈现的内容。
二、网页的分类
to c *（用户）
to b *（企业）
- to c端就是面向用户和消费者
门户网站、企业网站、电商网站，游戏网站、专题页面、视频网站、移动端H5等。 - to b端是面向商家以及专业人士的企业 OA ，网站统计后台
门户网站
是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。
企业网站
企业在互联网上进行网络营销和形象宣传的平台，相当于企业的网络名片，不但对企业的形象是一个良好的宣传，同时可以辅助企业的销售，企业可以利用网站来进行宣传，产品资讯发布、招聘等；
产品网站
从苹果公司的iPhone 介绍页到小米手机8的介绍页，我们会发现一种新的产品营销模式，就是产品网站，设计这类网站的内容主要是该产品的工艺，技术，设计吗，特点，使用场景等；
电商网站
电商网站就是企业、机构、或者个人在互联网上建立的一个站点，是企业、机构或者个人开展电商的基础设施和信息平台，是实施电商的交互窗口，是从事电商的一种手段。
游戏网站
游戏是一个巨大的产业，很多公司的收入打扮==大半都来自游戏产业。那么除了游戏需要制作精良之外，游戏的官网也必须设计精美。
视频网站
视频网站是指在完善的技术平台支持下，让互联网在线流畅发布，浏览和分享视频作品的网络媒体。
三、网页布局方式
垂直布局、流式布局、视差类型布局、全屏布局、无缝拼图布局、瀑布流。
垂直布局
按照先后顺序以及设置的对齐方式（居中、左对齐、右对齐）从左向右排列，横平竖直
- F型视觉流程（资讯门户网站）
流式布局（自带层级式导航）
- “z”字形式 分割形式（音乐网 视频网 产品网 企业网）（自如 QQ音乐 菜鸟）
视差类布局
图片叠加在后面（qq官网）
无缝拼图模式
（雷克萨斯）
全屏布局
（绝地求生）
整屏切换5-6张
瀑布流
（花瓣）
四、网页设计尺寸
分辨率太多，网页宽度没有固定的，但有一个范围。
京东安全区：1190px 腾讯安全区（1000px）
安全宽度区域范围（960px-1440px）
偶数原则，不能出现奇数，能被2，3，4整除为最佳
常用宽度安全范围：960px， 1000px， 1024px， 1190px。
新建尺寸1440px 4000px 72像素 rgb模式
五、网页字体规范
网页设计常用字号规范：
最小字号：12px，最大字号：无限大
网页字号：可以使用奇数
——————————————————————————
微软雅黑：
12号——辅助文字、内容等
14号——段落文字，正文文字
16号——分组、选项等文字按键
22号——标题&副标题
28号——特大标题
网页设计常用字体规范：
中文：微软雅黑，宋体，黑体、、、、华文细黑，苹方
英文：Arial，Helvetical，Times、、、Helvetica，苹方
其他：只能切图
——————————————————————————
网页设计只能用一套字体，保持统一
网页设计常用颜色规范
- 主色文字：自己设定
价格文字：# cc0000——所有的价格文字
常规文字：# 333333——主标题，副标题，文字按键
次级文字：# 666666——段落文字、说明性文字
辅助文字：# 999999——辅助性文字
网页设计常用图片规范
4：3
16：9
1：1
网页的按钮（点击热区）
最小范围：12px*12px
六、网页配色规范
色不过三，大面积灰或白，小面积点缀（豆瓣 灰白区分）
- 主色——用于标识、按钮、图标标志、标题、主菜单和主色块、给人以整体的感觉
- 层级颜色——文案的层级颜色，页面文案阅读起来会更加轻松；3-6-9
七、主页设计
一张页面由哪些部分构成
——页眉 内容 页脚
页眉（100px以内，颜色：主色，黑灰白）
在网页的最顶端，通常会放置网站Logo和导航
内容
网页内容头部通常放置banner，以下内容根据原型项目进行制作和分层级
页脚（400px左右，颜色：黑白灰）
在网页的最底端，信息没必要放在网页上很显眼的地方，只需要在页脚位置做个说明即可。
