html模板制作

所谓模板绘图前准备工作点式标注式文字式等各种设置设置假想使用文件另存找文件类型选择图形板*DWT保存OK使用点击文件新建打保存模板OK,希望所帮助

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

dwt 文件是网页模板文件(Dreamweaver Template), 在创建网站的多个网页的时候，通常可以将网页的共同部分创建成为一个模板， 然后给多个网页调用， 以实现网页代码的重复利用· 制作模板的时候， 用户可以自定义的模板可编辑区域和非可编辑区域， 可编辑区域将在调用模板的网页中再次填充代码·dwt: 是CAD的模板文件，把图层、标注样式等等都设置好后另存为DWT格式；可以根据自己的习惯保存在电脑的路径。默认是在CAD安装目录下，以后在制图时找到DWT模板文件放置的文件夹，把刚才创建的DWT文件放进去，以后使用时，新建文档时提示选择模板文件选那个就好了，或者干脆把那个文件取名为acad.dwt（为CAD默认模板），替换默认模板，以后只要打开就可以了。

先把网页保存为模板，再在模板中选择你要编辑的区域，点击反键。选择可编辑区域选项。然后再为这个区域添加更改。然后再打开文件菜单，选择另存为选项，再把模板保存为HTML的格式就可以了。你按这个步骤试试看。模板和原稿都会在你的站点文件夹中。 我保存了dwt格式，可是再打开之后还是不能选中，还有一个很细幼稚的问题，哪个是反键啊？ 右键

其实ps有很多功能是你没有用过的哦，你是不是还在羡慕别人可以写出一个简单html静态页，别羡慕啦，看完这个，你也可以写简单的页面啦！打开ps软件，选中你要转换成html静态页的图片，这边我就以百度经验的页面为例！打开百度经验页面的保存为一张图片；看清楚是图片是jpg的；用ps打开这张图片；html静态网页一般都是图片、文字和效果组成的，这边主要是教你用ps生成html静态页，就是把图片转换成静态页；因为网页为了保证网速都不会把图片裁减的太大，所以这边我就按照正常的图片切图片；首页选择“切片工具”，如果没有就右击工具那边的右下角箭头，选择切片工具；切完图片，下面就是见证奇迹的时刻啦，右击菜单栏“文件——选择存储为web和设备所用格式”；弹出“存储页面”；点击“存储”；

　　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】和【兔展】，这两个相对来说更适合半天时间来完成；如想快速制作展示页面就用【初页】，这个在功能效率与设计感方面更突出一些；组织活动、制作邀请函、分发活动通知等用【快邀约】；平时推广新产品、联络客户和招聘新人用【易企秀】。转载

用word制作完成后，点击”文件“—”另存为“—HTML格式文件即可。1）点击最上角的蓝色向下箭头，2）点击”另存为“，出现如下页面3）下拉保存类型，选择”网页文件html“，4）选择完成后，点击保存5）就成功制作成HTML文件了。

其实标准的网制作完成的工作实际是：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

选择模板先百度搜索兔展，进入网站后注册账号并登录后，即可进入制作界面。在界面上可以看很多可供使用的模板，根据自己的需要，点击相应的模板。进入制作平台选择完模板后，会自动进入制作平台。在制作平台上，主要分三大区域：左侧的作品结构显示区域，中间的是作品制作区域，右侧的是组件属性修改区域。文字1、功能定义：用于展示文字内容，通过修改文字的显示属性，可以生成各式各样的显示效果。2、操作方法：点击右侧的文字选项，编辑面板的右上角会出现文字输入框，双击输入框可以修改文字内容；修改右侧的属性选项，可以改变文字的显示样式。3、属性说明：1）字体：改变文字的字体，提供的是兔展数据库的字体，非电脑本地字体。2）字号：修改文字的显示大小。3）行距：修改两行文字间的间距。4）调色板：修改文字颜色。5）宽度：修改文字输入框的宽度，单位像素。6）高度：修改文字输入框的高度，单位像素。7）透明度：修改文字的透明度，100%为不透明，0%为全透明。8）旋转：调整文字与水平线的夹角，正数为顺时针旋转，负数为逆时针旋转。图片1、功能解释：用于显示图片，通过修改图片的显示属性，可以改变图片的大小、透明度、角度等。2、操作方法：1）激活功能：点击右侧的图片选项，编辑面板的右上角会出现兔展的logo图片。2）上传新图片：点击属性栏中的上传按钮，上传本地电脑中的图片进入替换。3）图片库中的图片：如果之前已经上传过图片，可以从图片库中选择需要显示的图片。4）截图：按住鼠标左键拖动选择图片区域，然后点击截图按钮或者双击选中的图片区域，便可以裁剪出选中的图片区域。3、属性说明：1）宽度：修改图片的宽度。2）高度：修改图片的高度。3）原比例：此选项打上勾好，图片的宽度和高度将按照图片原来的比例显示，修改其中的一个数值，另外一个数值会除之改变。4）透明度：修改图片的透明度，100%为不透明，0%为全透明。5）旋转：调整图片与水平线的夹角，正数为顺时针旋转，负数为逆时针旋转。按钮1、功能解释：用于添加链接按钮，可以添加一切页面的链接，如:微博链接、微信公众号关注链接、官网链接、淘宝链接等等。2、操作方法：点击右侧的按钮选项，编辑面板的右上角会出现文字输入框；修改右侧的属性选项，可以改变按钮的参数和样式。3、属性说明：1）文字：修改按钮上显示的文字。2）链接：需要按钮链接到的页面，注意链接开头要包含“ http:// ”。3）填充色：按钮上的背景颜色。4）边框色：按钮的边框颜色。5）形状-边框：修改边框的宽度，“0”代表按键无边框。6）边框-圆角：修改边框边角的圆润程度，数值越大，按钮边角越圆润。7）宽度：修改按钮的宽度。8）高度：修改按钮的高度。9）透明度：修改按钮的透明度，100%为不透明，0%为全透明。10）旋转：调整按钮与水平线的夹角，正数为顺时针旋转，负数为逆时针旋转。表单1、功能解释：是允许用户在表单中输入并提交文本信息的功能组件，用户提交的信息可以在帐户栏目下的表单数据中显示。表单中，可以自定义每个选项的名称和项目的数量。2、操作方法：点击右侧的表单选项，弹出新建表单窗口，对表单内容进入添加。3、属性说明：1）表单标题：添加表单的标题。2）行标题：添加表单的行标题。3）按钮内容：添加按钮的显示文字。