【网页设计自习室#002】网站页面基本布局与结构

一.网站中基础概念

1.域名

1.1域名解析

http：www.baidu.com
http：超文本传输协议
www：万维网
baidu.com：顶级域名，二级域名等子域名，唯一的存在
https：经过高级加密的网页

baidu.com 为百度的一级（顶级）域名
fanyi.baidu.com 为百度的二级域名
xxx.fanyi.baidu.com 为百度的三级域名
以此类推

1.2域名分类

.com 商业公司
.edu 教研机构
.gov 政府部门
.net 网络服务商
.org 非营利组织
.ac 科研机构
.cn 中国
.uk 英国

可以通过www.net.cn（阿里云万网）来查询域名是否被注册

2.网站中的硬件

虚拟主机：类似于我的世界服务器
服务器：拥有小规模主机处理器
服务器集群：大型数据处理，需要专用场地用于散热

二.网页的结构

2.1基本页面展示

以戴尔官方为例

2.2 header头部区域基本布局

Logo往往放在头部区域的左边，也有放在中间的创新案例

2.3 banner
2.3.1 banner基本概念

banner：广告图，也叫焦点图
基本尺寸：1920px*1200px ，高度随实际需求而定
banner主要作用是宣传展示，增加用户点击率，带来商业转化
可通过搜索百度统计—footer中流量研究院—分辨率，可查看尺寸流量占比

2.3.2banner的组成

banner主要由背景，文案，产品，模特，点缀物组成
banner构图方法：左右构图，三角构图，中轴构图，上下构图，倾斜构图

2.4 main内容

主打本产品详细信息，用户交互主要区域等详细展示

2.5 footer内容

主要存在快速导航，版权信息，技术支持（二维码联系方式友情链接分享图标）

三.常见页面布局

国字型布局
T字型布局
左右布局
上下布局
标题正文型布局
三字型布局

3.1国字型布局

3.2 T字型布局

3.3 左右布局

3.4上下布局

3.5标题正文布局

3.6 三字型布局

【网页设计自习室#002】网站页面基本布局与结构相关推荐

div css网页设计源代码_HTML+CSS网页设计，企业网站服务项目布局样式
大家好,本篇文章分享企业网站服务项目的布局样式,这种布局样式通常用于企业网站首页,企业可以向客户提供的服务内容,不同类型的企业服务项目样式也不同,这只是其中一种. 效果图: 服务项目 HTML代码: ...
div css网页设计源代码_HTML+CSS网页设计，企业网站资讯文章布局样式
大家好,本篇文章分享企业网站资讯文章的布局样式,这种布局样式通常用于企业网站首页. 效果图: 资讯文章 HTML代码: 最新资讯 Newest information 高效简洁但稳定实用的网站程序20 ...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课 ...
web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript
web前端大三实训网页设计:餐饮网站设计--烧烤美食山庄(7个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
DW静态网页设计与制作 JavaScript大作业 HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS)
HTML静态网页作业--海贼王主题网页设计制作6个页面(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
网页设计（四）——DIV+CSS布局3
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
HTML5期末大作业：web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript
HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网 ...
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...

【网页设计自习室#002】网站页面基本布局与结构

一.网站中基础概念

二.网页的结构

三.常见页面布局

【网页设计自习室#002】网站页面基本布局与结构相关推荐

最新文章

热门文章