用一个项目讲解网页设计流程

2024-04-23 17:01:09

1、准备工作

1.1文件夹结构的准备

一半一个网页开发需要包括以下文件夹。项目文件夹（根文件夹），html文件夹，css文件夹，图片资源文件夹（一般是两个，一个是更换频率较小的背景、logo等图片，一个是更换较为频繁的商品等图片），字体资源文件夹，js文件夹。

1.2项目资源的准备

网页前端实现的前置流程一般是由UI设计人员（美工），提供相关的ps文件和图片。我们以此为基准进行代码实现。psd格式的文件可以用photoshop打开，其内的文字字体可以直接选择。psd中的图片需要进行切图处理。切图可以用cutterman插件。

1.3字体文件的准备

字体文件包括字体和字体图标。字体图标相比图片的优势在于，可以更改大小（不失真）和颜色。

字体图标的下载网站Icon Font & SVG Icon Sets ❍ IcoMoon

优势：如果需要添加新的字体图标可以直接在网站上添加，生成新的字体文件后下载即可。

2、布局设计

2.1确定技术选型。

本项目共设计1个页面，服务于pc端，布局方式采用传统布局方式。不使用新的盒子模型。

本项目主要的练习目的为传统布局的基本流程，应通过练习掌握基本的流程及定位技术。

本项目为静态页面，不涉及js文件。主页命名为index.html，公共样式命名为common.css。

2.2 网页分析（主页）

网页由以下几个板块构成：

网页板块划分
页头header
子导航subnav+轮播图banner
商品区goods
脚注footer

页头和脚注部分为共公样式，可用于其他页面的设计。

2.3网页实现过程

分析布局-测量+搭建结构（代码）-切图填充内容。

各板块实现流程:

页头-脚注-子导航-商品区。

耗时：约5h

2.4项目文件链接。

用一个项目讲解网页设计流程相关推荐

一个项目的整个测试流程
最近一直在进行接口自动化的测试工作,同时对于一个项目的整个测试流程进行了梳理,希望能对你有用~~~ 需求分析: 整体流程图: 需求提取 -> 需求分析 -> 需求评审 -> 更新后的 ...
一个项目的简单开发流程——需求、数据库、编码
关于一个项目的简单开发流程前言:从11月8号开始到11月12号我们小组使用html+easyUI+ashx+异步,开发了一个简易的网站,也就是简单的门户网站,下面我就将我们这几天开发中遇到的一些问 ...
软件项目研发的设计流程
一个软件项目研发的设计流程是怎样的呢?以通常标准的设计方法为例,(不过笔者喜欢快速原型法). 第一个步骤是市场调研技术和市场要结合才能体现最大价值. 第二个步骤是需求分析这个阶段需要出三样东西,用 ...
如何去设计一个自适应的网页设计或HTMl5
如何去设计一个自适应的网页设计或HTMl5 如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战! 移动设备正超过桌面 ...
Html：网站设计的内容概览简介、网页设计流程/工具/内容组成、脚本代码之详细攻略
Html:网站设计的内容概览简介.网页设计流程/工具/内容组成.脚本代码之详细攻略目录网站设计内容概览 1.申请域名 2.申请域名的企业邮箱 3.虚拟空间
转一篇网页设计流程的文章（YAH00）
王小丹:主要网络产品设计工作流程是这样的: 网络产品设计:产品制作人写产品计划书,确定新产品或新功能的市场意义和经济效益,提交部门审批,同意后,确认需要设计的部分,和用户体验研究员(user res ...
html网页设计简单吗,如何做一个简单的网页设计
很多网页设计初学者都说,国外的网页设计很简单,但是又很容易吸引用户,这里面有什么诀窍吗?做一个网页如何做到界面简洁,内容简单又能打动用户,粘贴住他们.本文素马将讲解简单容易出效果的网页设计技巧,附上精 ...
一个完善的产品设计流程是怎样的？
今天这篇好文全篇都是细节,特别是对于各个岗位的职能以及上线流程都非常明晰,相信每一个产品设计师们都可以从中有所收获. 看完本文你会学到: 1. 产品设计全流程 2. 用户体验部门职能 3. 跨部门如何 ...
网页设计流程中常见问题分析及建议
从和客户沟通了解客户需求到画出草图进行构思和创意,直至打开Photoshop完成整个的设计,每一个网页设计师都在每一个新的设计项目中不断重复这个过程.整个看上去规范而流程化的工作方式似乎按部就班就能够 ...

最新文章

热门文章