该如何设计网页？页面设计

本文目录

• 该如何设计网页
• 页面设计
• 小程序（二） 一个简单的“欢迎”页面
• 如何使用div+css布局结构在网页设计中，下好模板这后该怎样运用
• 请问旅游网站的页面设计需要注意哪些问题

该如何设计网页

一、网站结构设计
网站结构设计包含网站栏目设计和网站模块设计以来确定网站提供服务的一种逻辑表现形式，也是网页之间的层次关系。
1.网站栏目能起到提纲挈领额作用
2.网站栏目具有清晰导航的功能
3.网站模块要做到顺序清晰且紧密结合
二、网站主题设计
网站主题设计实际就是网站视觉呈现风格的设计。网站的主题风格要能充分吸引用户的注意力，为用户提供愉快的访问体验。
1.设计能反映网站内容的logo,并且将logo放在网站的醒目位置。
2.网站的颜色要统一，要突出网站的主调色彩。
3.相同类型的图像要有相同的效果。
4.网站要有一句明晰的宣传标语。
三、网站布局类型
1. 国字型布局
这种布局类型分为上边栏、左边栏、中间内容区、右边栏和底部的页脚区域，其形状酷似一个“国”字。国字型是目前比较常用的一个网页布局结构，它适用于信息分类繁多、需要良好组织的网站。
2. T字型布局
这种布局类型由上边栏、左边栏、内容区、下边栏组成，其形状有点像一个英文字母写的“T”字。T字型网站目前在一些权威机构、企事业单位的公司网站出现得比较多。
3. 左右框架型布局
这类网站主要由左边栏和内容区组成，组成比较简洁，主要用于精彩内容的呈现，主要是很多个人站点、博客的首选。
4. 上下框架型布局
这类网站由上下边栏组成，上边栏用来放置logo和链接等信息，下边栏用来放置网页的内容。上下型网站经常用来进行个性化展示，在企业门户网站的公司展示中也比较常用。
5. 标题正文型布局
这类网站的布局结构由上边栏和内容区组成，上边栏用于显示文章的标题。主要用于显示文章的标题，内容区放置文章的内容，这类布局在一些论文、学术网站的设计中比较常用。
网站设计都不会单独使用以上列出的某一种布局结构，而是通过混合使用多种布局结构来实现自己想要的效果，这类布局通常称为“综合性布局”。
四、网站页面设计
网站页面是网站的最终表现形式。网站页面内容的质量度和页面的美观度来决定。页面设计应该遵循的原则如下：
1.符合企业的行业属性和企业特点。客户打开网站能直观感受企业所传递的理念和特征。
2.符合用户的浏览习惯。根据网站内容的重要性进行排序，让用户花最短的时间能够找到自己需要的信息。
3.符合用户的使用习惯。将用户经常使用的功能放在网站的醒目位置。
4.图文搭配。
5.利于搜索引擎优化。减少图片和动画，多使用文字描述，以便于搜索引擎收录，让客户更容易找到你。格子网络解答。

页面设计

页面尺寸规范

PC端页面的尺寸宽度1920px，高度尺寸按照页面所需信息来定即可，显示尺寸1920×1080px;手机端页面的尺寸宽度750px，高度尺寸按照页面所需信息来定即可。

PC端首页横幅广告尺寸为730×400px，手机端首页横幅广告尺寸为750×400px。专题活动页，主业页面宽度为1920px，高度为580—700px，最好不要超过700px，其中显示区域页面高度为1210px。产品详情页，宽度尺寸790px，高度尺寸充分展示所需信息即可。

文字规范

在页面中使用的中英文字体不得多于5种，页面中出现3次以上为主要字体，其他文字作陪衬字体。在产品详情页设计中，一般主要字体为黑体。

在做横幅广告字体时要经过设计变形，没有字体设计能力的，应在原字体基础上适当做些特殊效果;字体字号大小与颜色要和背景颜色对比分明，使消费者便于预览阅读。经过设计后的文字，显得很有扩张力，很有力量感。在原来的文字基础上做了一些特效，做了一个渐变的效果，比之前的文字在活跃度上有了很明显的提升。

颜色规范

规范分两类：设计风格规范、版式排版构图规范。页面颜色要求：页面中使用的颜色不得多于5种，黑白灰不算色;针对不同的主体使用合理的色系;主题颜色和辅助颜色要根据配色原理搭配。

版式规范

页面设计色彩要清新，布局要大方;页面设计要有整体性、一致性等。一致性包括色彩的统一、版式的统一和字体的统一等;页面布局应主次简约分明，中心突出，大小搭配，互相呼应，图文并茂，适当的空白利于消费者阅读。

广告语规范

广告语要注意极限用语的应用。根据广告法，极限用语不得出现在商品列表页、商品的标题、副标题、主图、详情页以及商品包装等位置。

关于电商设计有哪些基本规范，环球青藤小编就和您分享到这里了。如果您对页面排版、网站设计、图像处理等有浓厚的兴趣，希望这篇文章可以对您有所帮助。如果您还想了解更多关于平面设计的素材及技巧等内容。

小程序（二） 一个简单的“欢迎”页面

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。如图2-1所示

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如图2-2所示

一个小程序页面由四个文件组成，如图2-3所示

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

创建项目启动页，如图2-4所示：

新建一个空白项目，点击 图2-5所示 “+” 创建小程序主体部分的三个文件及pages文件夹，在pages文件夹下新建一个index文件夹，如图2-5所示，选中pages文件夹 右键 新建目录

在index文件夹下创建 index.wxml 、index.wxss 、index.js 、index.json 四个文件。

注：除 顶级 目录文件/文件夹使用 图2-5 中的 “+” 创建外，其他文件创建选中其上级目录文件夹 右键 新建目录/文件

创建好文件后，在app.json中写入：

index.wxml 文件，此处会用到图片，需在顶级目录创建images文件夹用来存放图片：

模拟器的机型设置为 iPhone6 ，小程序以IPhone6的屏幕尺寸为设计标准，像素使用 rpx 为单位， index.wxss 文件：

若使小程序呈现 图2-4 的效果，需编写 app.json 文件：

项目出现如图2-6 所示错误：

编写index.js：

启动页面就完成了 ^ _ ^

如何使用div+css布局结构在网页设计中，下好模板这后该怎样运用

1、div是个层，css来定义它的样式，比如《div class="mystyle"》《/div》，在css文件中写个样式：.mystyle{float:left;width:100px;height:200px;margin-top:10px;}，这样就能让这个div按这个样式显示（左浮动，宽100像素，高200像素，上边距10像素，），当然还有好多属性你可以再加。
2、你是下的网站模板吗?静态的话直接可以双击浏览了，动态的话要没编译过的才能改，主要改改数据库的连接（如用户名和密码），模板没错误的话一般可以运用了。

请问旅游网站的页面设计需要注意哪些问题

旅游网站主要是图片吧，排版好一点，图片要好看，图片最好适当处理下加上水印之类的，比价有品牌意识

然后就是栏目分类了，看你们主要是什么业务，栏目分类做好，用户体验也好

最后，不要少了资讯栏目，不然都是商务信息用户不喜欢的

这个其实你可以去看看那些知名的旅游网站设计，多看看参考一下