网页建造是甚么意思
？详解网页建造流程 、圭表类型及寄看事项

1
、网页建造是建造解网寄甚么意思

网页建造是之前端代码为主，独霸Html
、甚意思详事项CSS 、页建和JavaScript、造流jQuery和交互动画等前端代码，程圭将网页筹划师所筹划出来的表类筹划稿 ，屈就W3C圭表类型建构成网页格式。型及网页建造在网站培养汲引的网页流程上是在网页筹划此后，但凡是建造解网寄由WEB前端工程师来完成。前端工程师除要合营网页筹划师外 ，甚意思详事项还要合营做后端工程师，页建做好网页端的造流数据群集措置等工作。

2、程圭网页建造的表类中心构成部分

为了更深切地邃晓
，我们但凡把网页建造分为三个层面，就像盖房子的三个法度圭表类型：

1. 筹划层（HTML -  HyperText Markup Language）

• 比如：房子的骨架和筹划（钢筋 、水泥、承重墙） 。
• 感染
  ：定义网页的内容和根本筹划 。比如 ，何处是问题，何处是段落 ，何处是图片，何处是按钮 。
• 下场
  ：一个只需纯文字和图片，没有任何色彩和斑斓排版的“毛坯房”页面。

2. 默示层（CSS - Cascading Style Sheets）

• 比如
  ：房子的装修和丑化（油漆 、壁纸 、家具摆放 、灯光筹划）。
• 感染：独霸网页的视觉默示。包含色彩
  、字体 、筹划、间距 、动画终局等。
• 下场
  ：让阿谁“毛坯房”变得美不美不雅不雅不雅不雅不雅不雅
  、整洁，具有出色的视觉终局和用户体验。

3. 行动层（JavaScript）

• 比如：房子的交互下场（按开关灯亮  、水龙头出水、电梯凹凸）。
• 感染：完成网页与用户的交互。比如 ，点击按钮有回响、轮播图主动切换、表单提交验证、加载静态数据等。
• 下场：让网页从静态的“宣传册”变成静态的 、可交互的“独霸法度圭表类型” 。

3
、网页建造流程

1、需求类似

与产品经理  、网页筹划师举办需求类似，深切体味网页运营气候、交互过程 、设备适配请求等具体完成请求
。

2、源文件切图

分化网页筹划源文件
，对源文件中需求独霸图片的职位举办文件切割或图片建造，构成Html代码编写时可调用的图片。（注：也多是网页筹划师切图）

3、Html代码编写

屈就网页筹划终局图及网页筹划师的页面标注，屈就W3C圭表类型，采取DIV+CSS技能对网页筹划图举办"答复答复" ，建构成Html文件 。

4 、交互终局完成

对网页格式和js交互终局举办代码编写，如添加鼠标移上移出终局 、头图主动播放终局等，让用户在独霸网页的过程中具有"交互"感 。

5、适配性调试

对网页举办硬件及软件兼容性调试，使建造好的网页知足预设的用户终端(PC、平板、手机)及不雅不雅不雅不雅鉴赏器(IE 9/10/11、Chrome 、Firefox
、Safari)下正常访谒。

6 、回响与改削

屈就产品经理、网页筹划师和客户的回响 ，对建造好的网页(Html)举办调剂，以抵达最优的不雅不雅不雅不雅鉴赏和交互终局。

4、网页建造的圭表类型

1  、元素圭表类型标准
：

(1) 、网页的元素和文件限制以下：

● 深化页面：.html；

● 脚本文件：.js；

● 格式表文件：.css；

● 动画互动元素：.swf/.gif；

● 图片元素 ：.jpg/.gif/.png；

● 视频元素 ：.asf/.mpg/.rm/.mpeg/.rmvb/.flv；

● 音频元素 ：.mp3/.wma；

(2)、元素文件大年夜小标准 ：

● 首页页面大年夜小不超出300K，其他子页面大年夜小不超出500K；

● 图片元素 ，切图后担保单张图片体积大年夜小应在100K 以内，图片格式包含：.jpg /.gif/.png；

● 单个flash 元素不超出1M，flash 格式包含：.swf；

● 单个视频元素不超出4M ，视频格式包含：.asf/.mpg/.rm/.mpeg/.rmvb/.flv；

● 单个音频元素不超出2M
，音频格式包含：.Mp3/.Wma；

● 动画互动元素菜单类大年夜小必须限制在100K 以下。游戏类大年夜小必须限制在1M 以下 ，超出500K后必须建造loading 终局。

(3)、元素切割编制标准
：

● 筹划稿切图对象选择 ：建造前应屈就筹划师源文件 ，选择契合切图的对象，如PSD 文件选择Photoshop CS；

● 筹划稿页面导出文件设置：页面切图应导出.gif 或.jpg 两种文件格式
，不推荐png、bmp等；

● 格式图片：像素图、矢量色块化图
、吵嘴图选择gif 格式；色彩渐变的
 、图片内容筹划丰富的
、色采饱和度高的选择jpg 格式 。

● 齐截性绳尺 ：按钮图片切图后，应担保按钮图片布景的通明性和和集团页面的迟滞融合性 。确保与筹划稿没有偏向。

● 可轮回几回独霸的布景图片不该切割成除夜图 。

2、文件定名标准 ：

全数的文件定名请求只能包含
：小写字母、数字、下划线。

(1)、目次文件定名标准：

● images：目次存放静态图片；

● js：目次存放JavaScript 脚本文件；

● swf：目次存放Flash 文件；

● css：目次存放css 格式文件；

● Xml ：目次存放XML 文件，如Flash 的设置设备放置文件 json；

寄看：文件夹名、文件名及文件扩大年夜大年夜大年夜大年夜名均为英文小写字母
，一个项目最多2 个css 文件
，根本css 和扩大年夜大年夜大年夜大年夜css，css 文件不要写在页面中要不合放在.css文件中。

(2)、页面文件定名标准 ：

● 图片定名绳尺：圭表类型描摹*.gif(jpg) 如：top_btn_help.gif；

● 表格图片定名 ：同上，与标识表记标帜定名不异；

● 网站栏目文件定名标准 ：栏目称号-网站称号 ，比如 ：作品展示-优化猩
。

3
、Html文件head区代码圭表类型：

(1)、版权诠释

<!--- The site is designed by --->

(2)、网页展示字符集

简体中文 ：<meta http-equiv="content-type" content="text/html  charset=gb2312"> ；

英文：<meta http-equiv="content-type" content="text/html  charset=iso-8859-1">；

(3) 、建造者信息

<meta name="author" content="mail@mail.com">

(4)、网页问题

<title>内容问题 - 栏目称号 - 网站称号</title>

(5)、网页描摹

<meta name="description" content="往后网页描摹">

(6) 、网页关头词

<meta name="keywords" content="关头字,关头字1,关头字2,关头字3">

(7)、网页css调用

<link href="***/***.css" rel="stylesheet" type="text/css">

(8) 、网页javascript调用

<script language="javascript" src="***/***xx.js"></script>

4
、网页建造标准考验站点

(1) 、Html考验

http://validator.w3.org/

(2)、CSS 考验

http://jigsaw.w3.org/css-validator/

5、网页建造寄看事项

1 、尽大年夜大年夜约把页面的布景图及小图标整合到一张图片，用CSS定位编制。多么以促进http请求
，从而降底网站的下载速度 
。

2、尊从内容与页面格式的离开 ，如需求 ，一样也要做到筹划与COLOR的离开 。

起首是页面代码，做到精简 ，逻辑性了然；公用部位可以引进出往，比如头部，脚部 。其次CSS逻辑清析
，精简。可在不改削下场的前提内，做到能交换页面筹划及换色。

3、将脚本放在底部 。多么页面便可以慢慢展示，并且页面中的可视组件可以尽早下裁。

4、页面文字措置，如最除夜展示长度，超出后加"…"省略号区域；在测试中经常也会碰着英文无空格气候，得用overflow: hidden的编制湮没溢出部分
。

5、在页面中尽大年夜大年夜约完成每步交互终局，包含既时照顾的。

6
、每个邻接，按钮要做上鼠标hover时的一个改削终局。

7 、图片理应有alt属性，以备图片阻拦时 ，文字的更调。

8、提交法度圭表类型员的DEMO必须是邻接的 ，交互终局是无缺的，并且经由自已在IE 9/10/11、Chrome、Firefox、Safari等不雅不雅不雅不雅鉴赏器集团测试完成的
。

6、网页建造经常独霸对象

建造网页经常独霸的软件有这些：Frontpage、Dreamweaver 、自助建站平台 、Fireworks
。个中Dreamweaver支撑JS,Java,ActiveX等特点，另也支撑网页在编辑器直达换。

1 、Dreamweaver

Adobe Dreamweaver，简称"DW" ，中文称号"胡想编织者"，最初为美国公司斥地 ，2005年被Adobe公司收购。Dreamweaver是一款有着壮除夜网页排版的软件，我们可以疾速直接的举办各类页面的筹划排版 。我们可以经由过程独有的行动 、模板 。时分轴等技能 ，疾速地成立各类具有专业程度的网页 ，并且不须要编写任何代码。

2 、FrontPage

FrontPage是由Microsoft公司推出的新一代Web网页建造对象，使网页建造者可以愈加利便
、快捷地成立和宣布网页 ，具有直不美不雅不雅不雅不雅不雅不雅的网页建造和治理编制，简化了除夜量工作 。FrontPage界面与Word、PowerPoint等软件的界面极端近似，为独霸者带来了极除夜的利便。

3 、Fireworks

Fireworks是由Macromedia公司斥地的图形措置对象 ，是第一套专门为建造网页图形而筹划的软件，同时也是专业的网页图形筹划及建造的措置筹划。作为一款为群集筹划而斥地的图象措置软件
，Fireworks还可以主动切割图象 、生成光标静态感应的JavaScript法度圭表类型等等，并且Fireworks具有壮除夜的动画下场和一个相当完竣的 群集图象生成器。

4、Swish

Swish软件可以对指定的文字举办各类特效措置 。独霸文字的挪动和职位，末尾可以输进swf格式标文件，并能导进到Ｆlash动画中加以编程。当然如今Swish只供给了一些文字终局的建造，但据斥地该软件的公司说往后将有图片 、声响
、按钮和矢量图支撑
。

5  、Vscode

这是前端斥地人员必备的斥地对象，拆卸复杂 
，需求甚么插件直接在里面拆卸。

Visual Studio Code是针对编写现代Web和云独霸的跨平台源代码编辑器，可在桌面上运转 ，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支撑
，并具有丰富的其他言语扩大年夜大年夜大年夜大年夜的生态琐细。

6 、微信web斥地者对象

次要用户斥地微信小法度圭表类型 。微信web斥地者对象是一款便捷合用的微信调试对象 。微信web斥地者对象采取的是集成Chrome DevTools和根本的挪动调试模块，小火伴们可以借助微信web斥地者对象更利便、安然的斥地或是针对调试基于微信斥地的网页代码。

7、Hbuilder

Hbuilder这个对象可以和微信web斥地者对象一同独霸，斥地微信小法度圭表类型，还可以斥地app ，斥地的法度圭表类型可以同时在安卓手机和苹果手机上运转，不须要分袂写两套代码。HBuilder是DCloud（数字地狱）推出的一款支撑html5的Web斥地IDE 。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写 。

8、WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 斥地对象 。如今已被恢弘中国JS斥地者誉为"Web前端斥地神器"
、"最壮除夜的HTML5编辑器"、"最智能的JavaScript IDE"等。与IntelliJ IDEA同源，延续了IntelliJ IDEA壮除夜的JS部分的下场
。

7 、网页建造罕有问题

1、CSS是甚么
？用来做甚么的？

CSS就是一种叫做格式表（stylesheet）的技能
。也有的人称之为层叠格式表（Cascading Stylesheet）。在网页建造时采取CSS技能，可以有效地对页面的筹划 、字体、色彩
、布景和此外终局完成愈加切确的独霸。只需对比应的代码做一些复杂的改削，便可以改削不合页面的不合部分 ，或页数不合的网页的外不美不雅不雅不雅不雅不雅不雅和格式
。

2、若何来剖断一副图片可否存JPG仍是存GIF
？

色采较多的图片，假定要贯穿连接高质量 ，建议用jpg格式，假定色采斗劲单一的最好用gif，一样往常来讲 ，一样的图片gif格式图片要比jpg小（这里指色系较少，无多余改削的图片）。

3、标准行距是若干很多若干良多若干很多若干良多若干很多若干?

行距除对可读性的影响，行距本身也是具有很强默示力的筹划言语 
，为了加强版式的装潢终局 ，可以居心识地加宽或缩窄行距，闪现稀少的审盛情趣。比如，加宽行距可以闪现轻松 、伸展的神情，独霸于文娱性
、抒情性的内容恰到益处。行距一样往常用字体大年夜小的150%-200%斗劲多。

总结

优化猩SEO：跟着技能的进步
，社会分工也在改削，如今的网页建造和互联网初期的网页建造已产生发火很除夜的改削，如今网页建造由前端斥地工程师完成
，前端斥地工程师连同数据调用一同完成
。

参考链接 ：

网页建造圭表类型_会飞得猪的博客-CSDN博客

https://blog.csdn.net/wuwenjie_1997/article/details/89287382

网站培养汲引标准_网站履行圭表类型_天津市匠人匠心

https://www.wzjs888.com/news/knowledge/1898.html

改削于2025-09-28