网页制作代码模板

使用ME微杂志APP或者电脑端来设计制作并发布，可以分享到朋友圈，也可以发布到微信公众号里面，搜索“ME微杂志”即可；

　　HTML5页面制作工具，大体分为两类：基于HTML5的网站工具和手机APP工具（当然还有一些其他的，例如基于微信公众号的等，下面也会介绍）。　　先总的说一下个人感受1.基于HTML5的工具网站：功能较强大，单页面的操作性较强，可完成各种页面交互效果；但是某些时候会有操作“失灵”的现象，如上传图片失败，点击保存失败，生成失败等。原因你懂得~2.手机工具APP：相比起工具网站来讲，显得比较顺手，有大量模板套用，制作简单快捷；但是拘泥于现有的模板，使得单页面不会有较大的可操作空间，从而无法实现DIY交互效果。　　下面展开说下每个使用过的工具吧基于HTML5的工具网站：【兔展】 优点：页面DIY程度较高，动效实现起来也简易方便，可制作比较任性的H5页面。缺点：屏幕界面大小不可调节，上传的图会比例失调；生成后到各尺寸屏上页面会存在拉伸现象。（此图意在说明上传的图片的尺寸都是网站自己默认的一个尺寸，不是图片本身的尺寸，不利于使用者调整）【MAKA.im】 可以具体编辑，单页操作性较高，有新手（有模板）和高阶（无模板）两种编辑模式；翻页效果比兔展多，模板也更强大一些。【居高互动刊】 优点：最简单易上手的工具之一，根据提示一步一步的添加，共4步，最后生成微杂志。相比其他在线工具，较稳定。缺点：目前没试通制作单页上的交互效果，没找到开启pro功能的入口。【ANIMATRON】 优点：像flash的在线版，功能强大，可以创建HTML5动画。适合有动画基础的人做演示制作。缺点：需要动画制作基础；工作界面响应时间长；貌似只能分享到twitter、Facebook、google+、tumblr？【iSpring 7】 噱头是PPT转HTML5工具，完美与PPT兼容，可制作Html5移动课件。不过，目前我只能连着VPN再用Safari才能打开网站链接。【秀制作】 优点：版式轻松，制作快捷，宽带稳定。缺点：对图片和文字在各种屏幕上的显示没有做很好的适配；不能对模板中文字的编辑调整位置。手机工具APP：【初页】优点：模板质量高，套用模板编辑时效率高，操作简单快捷，效果和体验在制作H5页面的APP工具里面算是出类拔萃。缺点：单页面可操作性较低，仅支持套用模板。【快邀约】快速制作邀请函优点：易上手，省时高效，便于统计。缺点：页面简陋，只能选择固有模板创建文字和添加图片。【易企秀】中小微企业的移动场景营销管家优点：套用模板，创建快捷，用来做企业介绍、产品推荐。拥有强大的推广统计、客户管理功能。嗯，这里应该赞一个。缺点：只能用模板，DIY程度低；统计数据是否准确需要进一步确认，目前看来可能有遗漏数据的现象（在小范围测试中，统计到的数量小于应有的数量）。【微贴】：通过微信公众号创建H5页面优点：手机公众号内直接创建简单页面，根据提示创建即可，无脑方便快捷。缺点：只是单页面展示，承载不了交互效果等特效和内容。　　总结　　工具网站做的H5页面，多注重单独页面的自定义交互方案，DIY程度高，相对来说用时较长，又受制于带宽因素，故影响操作；工具APP做的H5页面，多注重效率，目前都是套用模板，因而对单页面的DIY程度较低，交互效果受限。作为我个人而言，移动互联的新任PM，我平时常用到的是【MAKA】和【兔展】，这两个相对来说更适合半天时间来完成；如想快速制作展示页面就用【初页】，这个在功能效率与设计感方面更突出一些；组织活动、制作邀请函、分发活动通知等用【快邀约】；平时推广新产品、联络客户和招聘新人用【易企秀】。转载

首先，学会网站模板构架找准修改主题。准备工作：修改网站模板必须要懂一些基本的技术：1.HTML语言　2.DIV+CSS　3.图片制作方法：Photoshop/Fireworks网站模板的三大构架：1.网页的HTML文件　2.CSS文件　3.图片文件然后，学会网站模板可视化便捷修改思路。可视化编辑器中包含了一个编辑模板的辅助接口，但为了要让这个界面更加有用，接口需要向用户显示关于每个模板的特定信息，例如模板目的地简要说明，以及其中个参数的意义等。这些信息即是通过模板数据提供。一般情况默认的网页模板路径是系统自带的标签，将HTML文件放入Dreamweaver里时会是一推的代码，修改下CSS和图片路径，就可将程序模板转换为可视化界面。最后，学会修改网站模板图片替换独特风格。框架构建好后，Logo和Banner等相关图片，就是需要做的工作。对于修改网站模板中的图片推荐使用Fireworks,因为其不仅可以打开图片源文件，还可以打开PSD源文件，而photoshop无法打开PSD源文件。如遇到未提供源文件的模板，比如修改logo,无论是JPG格式还是其他格式，都建议用Fireworks打开，在原基础上进行修改，保存后即可看到效果，加上一些PS的技巧，就没有任何问题了。

模板自助建站或者代写源码建站有点区别，根据需求选择：自助建站是在一个基础平台上，以固有的模板配置，来进行选择，是选择固有的模式。而网站公司手工做的网站，是可以有私人订制的部分，无论哪里或有什么功能都可以先行协商，落实后进行。综合来讲，各有优势，在基本企业网站的基础上，自助建站也是非常不错的。现在的自助建站系统，好的模式更加强大，包含PC电脑站+手机站+APP端+微信公众平台整合，完整的各方位包含，而这些所有功能，在一个后台统一管理，非常方便。

　　HTML5页面制作工具，大体分为两类：基于HTML5的网站工具和手机APP工具（当然还有一些其他的，例如基于微信公众号的等，下面也会介绍）。　　先总的说一下个人感受1.基于HTML5的工具网站：功能较强大，单页面的操作性较强，可完成各种页面交互效果；但是某些时候会有操作“失灵”的现象，如上传图片失败，点击保存失败，生成失败等。原因你懂得~2.手机工具APP：相比起工具网站来讲，显得比较顺手，有大量模板套用，制作简单快捷；但是拘泥于现有的模板，使得单页面不会有较大的可操作空间，从而无法实现DIY交互效果。　　下面展开说下每个使用过的工具吧基于HTML5的工具网站：【兔展】 优点：页面DIY程度较高，动效实现起来也简易方便，可制作比较任性的H5页面。缺点：屏幕界面大小不可调节，上传的图会比例失调；生成后到各尺寸屏上页面会存在拉伸现象。（此图意在说明上传的图片的尺寸都是网站自己默认的一个尺寸，不是图片本身的尺寸，不利于使用者调整）【MAKA.im】 可以具体编辑，单页操作性较高，有新手（有模板）和高阶（无模板）两种编辑模式；翻页效果比兔展多，模板也更强大一些。【居高互动刊】 优点：最简单易上手的工具之一，根据提示一步一步的添加，共4步，最后生成微杂志。相比其他在线工具，较稳定。缺点：目前没试通制作单页上的交互效果，没找到开启pro功能的入口。【ANIMATRON】 优点：像flash的在线版，功能强大，可以创建HTML5动画。适合有动画基础的人做演示制作。缺点：需要动画制作基础；工作界面响应时间长；貌似只能分享到twitter、Facebook、google+、tumblr？【iSpring 7】 噱头是PPT转HTML5工具，完美与PPT兼容，可制作Html5移动课件。不过，目前我只能连着VPN再用Safari才能打开网站链接。【秀制作】 优点：版式轻松，制作快捷，宽带稳定。缺点：对图片和文字在各种屏幕上的显示没有做很好的适配；不能对模板中文字的编辑调整位置。手机工具APP：【初页】优点：模板质量高，套用模板编辑时效率高，操作简单快捷，效果和体验在制作H5页面的APP工具里面算是出类拔萃。缺点：单页面可操作性较低，仅支持套用模板。【快邀约】快速制作邀请函优点：易上手，省时高效，便于统计。缺点：页面简陋，只能选择固有模板创建文字和添加图片。【易企秀】中小微企业的移动场景营销管家优点：套用模板，创建快捷，用来做企业介绍、产品推荐。拥有强大的推广统计、客户管理功能。嗯，这里应该赞一个。缺点：只能用模板，DIY程度低；统计数据是否准确需要进一步确认，目前看来可能有遗漏数据的现象（在小范围测试中，统计到的数量小于应有的数量）。【微贴】：通过微信公众号创建H5页面优点：手机公众号内直接创建简单页面，根据提示创建即可，无脑方便快捷。缺点：只是单页面展示，承载不了交互效果等特效和内容。　　总结　　工具网站做的H5页面，多注重单独页面的自定义交互方案，DIY程度高，相对来说用时较长，又受制于带宽因素，故影响操作；工具APP做的H5页面，多注重效率，目前都是套用模板，因而对单页面的DIY程度较低，交互效果受限。作为我个人而言，移动互联的新任PM，我平时常用到的是【MAKA】和【兔展】，这两个相对来说更适合半天时间来完成；如想快速制作展示页面就用【初页】，这个在功能效率与设计感方面更突出一些；组织活动、制作邀请函、分发活动通知等用【快邀约】；平时推广新产品、联络客户和招聘新人用【易企秀】。转载

其实标准的网制作完成的工作实际是：psd to html，一般情况下，我们会拿到美工的psd,这时候不同的人会有不同的做法： 1.打开fireworks将图片切割导出为html。 2.直接在dreamweaver之类的工具去拖拉布局，导入相关的图片,flash资源。 3.先在ps中完成切图后，在文本编辑器中看着效果图一步步的制作。 以上是大多被采用的方法，但都不好： 第一种方法最为不好，这样的代码根本不具维护性和可读性。 第二种方法也不好，代码难免会有冗余，做出来的东西基本需要排查一遍。 第三种方法也不好，因为你需要看效果图一点点的拼，也就是说写html标签的时候，你在不断的假设这块要怎么去显示。 正确的做法是： 1.拿到psd后，先不要做别的，直接在文本编辑器中将网页的框架写出来，不要假设这块将来css要去怎么渲染，完全自然化的标签，不加任何的css。 2.写完之后在各个浏览器运行之后确保大体定位都没有问题。 3.书写总体css,这里的css只负责大块的定位及样式。 4.切出需要的图片资源，在写好的框架中一点点的去构造，不断的调试，最终为成品。 5.最后，为自己的代码添加注释，在css，html中都要合适的为自己的代码添加注释。 要想做出能灵活切换皮肤，让css主导表现，还有很多要注意的地方，但大体的流程就是这样的，当然我们一开始不能直接就做到先写html，但起码要有这个意识，循序渐进。。。谢谢热心会员"linxz"提供实际经验，我贴上来供大家参考：PSD出网站从两个大点考虑一、一个独立的页面1、分析这个页面，先在脑袋中或者草稿纸上描绘大概的结构2、根据设计稿的的情况，分析背景图的分布、ICO图的分布等3、切割相应的图片，导出、合并图片4、在编辑器中写整体结构XHTML代码，包括页面中出现的所有元素的结构5、编写CSS样式中的整体以及模块代码6、细节调整7、收工，浏览器验证是否正确二、由多个页面组成的小站点或者大站点1、浏览所有设计稿，统一规划站点模块、图片、文件分布2、开始第一点的操作，但规划站点的内容分布很重要整体考虑点：图片的合并，减少请求量结构的合理性，语义化样式的简洁，便于后期维护多为后期的维护以及程序开发着想，如何简单实现效果 参考资料： http://www.wzsky.net/html/Website/Experience/107671.html

Html5和以前html，jsp写法一样的，基本上区别不大，如果要写手机页面的话，可以用dw然后在里面用手机版块看效果