维亿CMS资源网,免费分享和下载
当前位置: 首页 > CMS建站 > 网页制作是什么意思?详解网页制作流程、规范及注意事项

网页制作是什么意思?详解网页制作流程、规范及注意事项

匿名站长 CMS建站
扫码手机访问

一、网页制作是什么意思

网页制作是以前端代码为主,运用Html、CSS、以及Javascript、jQuery以及交互动画等前端代码,将网页设计师所设计出来的设计稿,按照W3C规范制作成网页格式。网页制作在网站建设的流程上是在网页设计之后,通常是由WEB前端工程师来完成。前端工程师除了要配合网页设计师外,还要配合做后端工程师,做好网页端的数据收集处理等工作。

二、网页制作流程

1、需求沟通

与产品经理、网页设计师进行需求沟通,深入了解网页策划情况、交互过程、设备适配要求等具体实现要求。

2、源文件切图

分析网页设计源文件,对源文件中需要使用图片的位置进行文件切割或者图片制作,形成Html代码编写时可调用的图片。(注:也可能是网页设计师切图)

3、Html代码编写

根据网页设计效果图及网页设计师的页面标注,按照W3C规范,采用DIV+CSS技术对网页设计图进行"复原",制作成Html文件。

4、交互效果实现

对网页样式和js交互效果进行代码编写,如添加鼠标移上移出效果、头图自动播放效果等,让用户在使用网页的过程中具有"交互"感。

5、适配性调试

对网页进行硬件及软件兼容性调试,使制作好的网页满足预设的用户终端(PC、平板、手机)及浏览器(IE 9/10/11、Chrome、Firefox、Safari)下正常访问。

6、反馈与修改

根据产品经理、网页设计师以及客户的反馈,对制作好的网页(Html)进行调整,以达到最优的浏览以及交互效果。

三、网页制作的规范

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)、版权注释

(2)、网页显示字符集

简体中文:

英文:

(3)、制作者信息

(4)、网页标题

内容标题 - 栏目名称 - 网站名称

(5)、网页描述

(6)、网页关键词

(7)、网页css调用

(8)、网页javascript调用

4、网页制作标准检验站点

(1)、Html检验

http://validator.w3.org/

(2)、CSS 检验

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

四、网页制作注意事项

1、尽量把页面的背景图及小图标整合到一张图片,用CSS定位方法。这样以减少http请求,从而降底网站的下载速度。

2、尊从内容与页面样式的脱离,如需要,同样也要做到布局与COLOR的脱离。

首先是页面代码,做到精简,逻辑性清楚;公用部位可以引入进来,比如头部,脚部。其次CSS逻辑清析,精简。可在不改变功能的前提内,做到能更换页面布局及换色。

3、将脚本放在底部。这样页面就可以逐步呈现,而且页面中的可视组件可以尽早下裁。

4、页面文字处理,如最大显示长度,超过后加"…"省略号区域;在测试中经常也会碰到英文无空格情况,得用overflow: hidden的方法隐藏溢出部分。

5、在页面中尽量完成每步交互效果,包括既时响应的。

6、每个连接,按钮要做上鼠标hover时的一个变化效果。

7、图片应该有alt属性,以备图片阻止时,文字的替换。

8、提交程序员的DEMO必须是连贯的,交互效果是齐全的,而且经过自已在IE 9/10/11、Chrome、Firefox、Safari等浏览器整体测试完成的。

五、网页制作常用工具

制作网页常用的软件有这些: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格式的文件,并能导入到Flash动画中加以编程。虽然目前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部分的功能。

六、网页制作常见问题

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

修改于2023-08-14

标签:

网页制作

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail: 123456@qq.com

同类推荐
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网
维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网维亿CMS资源网