1、选择建站工具，不懂技术的可以用nicebox那一类的模板建站
2、选择一套模板进行安装，修改模板里面的图片和文字，改成自己的特色
3、预览网站，对网站的细节进行微调排版，比如手机和平板是特别容易错乱的
4、上传发布网站
5、坚持做网站关键词优化
本回答由网友推荐
再好的网站，如果打开速度慢，10个人会有9个人选择离开，我归纳了大约9大影响网站打开速度的因素，但网站页面显示的速度取决于众多的因素，包括服务器性能、网络传输质量、网站的带宽、DNS解析、网页内容包括涉及到的JS代码、图片和视频的大小等等各种因素，如有不全，欢迎跟帖补充和指正。
（再好的网站，如果打开速度慢，10个人会有9个人选择离开）
1：网络最小带宽
这是最主要的因素，在慢的网站放在好的带宽下访问速度一样快（就是多花钱），网络的带宽包括对网站所在服务器带宽和用户端两个位置，对接点指的是出口端与入口端(如电信对网通的对接点)，另一个就是用户本身的最小带宽，如果用户办的是512K宽带咱就爱莫能助了。
2：DNS解析时间
DNS解析包括往返解析的次数及每次解析所花费的时间，它们两者的积就是DNS解析所消耗的时间，因此，很多人忽视了DNS的问题，其实，DNS对网站解析速度也是非常重要的，如Google近期推出的PageSpeedService和国内的DNSPOD等免费给域名做DNS加速的，大家可以一试。
3：机器的配置
包括服务器端与客户机端的硬件配置程度，同样的网络环境下，双核的服务器的运算能力肯定要强一些，毫无疑问的，同样的网络环境下，你用一台赛扬的机器和奔四双核处理器的电脑，打开同样的网页，速度，也肯定不一样。
4：服务器软件
软件多少、稳定和软件的正确配置，都会影响到服务器环境，以致影响到网络速度。服务器安装软件防火墙，会牺牲一些网络速度，所以VPS、或独立服务器用户装一个防火墙足矣。
5：网页内容的大小（重要）
网页文件的大小是网站是否能快速打开最重要一个因素，如果说服务器等硬件方面我们决定不了，我强烈建议从这里下手，不管是表格还是DIV+CSS，适当的优化代码，都能减少网页大小。
尽量优化代码，用最少的代码，比如前几天卢松松把博客模板精简之后，使每个网页缩小了100多K，提高了网站打开速度，不要将整个内容包含在一个框内，在“给网站减肥，让网站提速”一文中，我详细介绍了，网页代码的优化方法。同时大量错误、冗余代码也是拖慢网站速度之一。
6：大量数据库操作
小网站在执行大量数据库操作时，也会影响网站打开速度，这里使asp+access结构的网站尤为明显，尤其是同时有大量用户提交评论时，就操作数据库锁死，导致网站打不开。比如我博客在发布文章时会有几分钟时间使网站速度大打折扣。
7：用很多javascript
网站上使用大量JS是大忌，不仅搜索引擎无法收录，同时会不断提交请求增加服务器负担，例如鼠标特效、栏目的特效、状态栏的特效等等。这些特效的原理是先由服务器下载到你本地的机器，然后在你本地机器上运行产生，然后你才能看到的。特效做的多了，在你本地机器上就要运行大半天才能全部完成，而如果你的主机配置一般的话，那就更慢了。所以，建议一定要少用javascript特效。
8：页面上用大图片和FLASH
我们知道图片是拖慢网速最重要一个因素，图片经过处理，可以使图片空间变小，卢松松博客每篇博文的图片都经过处理，但导致有部分图片清晰度不够，否则很多的图片一开始都会占用很多空间又使网站打开速度变得很慢，同样FLASH也是一个道理。
9：过多引用了其他网站的内容
包括你引用其他网站的图片、视频文件等，如果直接在页面引用别的网站的东西，而那个网站的速度又慢，或者那个网站的该页面已经不存在了，那么你打开的速度就会非常慢。
你指的是响应式模板吧，网上一搜一大堆，如果要带后台的，只有去找看哪个建站系统刚好在做响应式，如：米拓，dede，这些cms。
我来帮帮忙啊
可以上微 企 点看看，是一款免费好用的H5自助建站和网页制作平 台，上面有模板的，各种网站建设都能找到模板。
说起H5，想必大家都不陌生，其形式新颖，传播效果强，在做广告策划、视频营销时被使用的几率更高。
《睡姿大比拼》
在各式各样的活动中，H5不一定是首选，但也绝对是常被选择的一员，每到节假日等活动高峰期，朋友圈被刷屏时有发生，高流量和高传播度使得H5在国内的地位逐渐上升。
经常会有一些线下店铺需要用H5来推广形象。面对这样的需求，我们应该如何制作？跟随数艺君一起来看看。
案例：翻页类H5-线下门店案例
今天，数艺君将会以一个线下文创店铺为例，为大家讲解H5的制作过程，先来看看最后的项目案例。
项目素材（模拟案例）
“一拙”是一家坐落于北京胡同的文创茶社。小店自从开业以来，就在当地获得了非常好的口碑和影响力。但一直以来，门店在线上的曝光都不足，小店想借助H5更多地在网络上展现自己的品牌。关于门店的资料有很多，我拿到的内容就多达十几页，如图所示，对于一支H5来说，不可能展现这么多内容。所以，在前期策划阶段要做的主要是“减法”，将门店的主要品牌优势和特色进行归纳和精简，把大段的描述概括成用简单的图文就能讲清楚的内容。
门店的部分文件与图片素材
项目主题与内容框架
在梳理内容时，我们发现了3个要重点展示的信息，它们分别是品牌、功能和区位。
在品牌方面，要对店铺有具体介绍，让用户知道你是谁；在功能方面，要对店铺服务做说明，让用户知道你能干什么；在区位方面，要对店铺的位置和经营做一定说明，让用户知道你在哪里，什么时间可以找到你。
“你是谁”“你能干吗”“你在那里”，可以说是普通消费者要关注的3个信息点，如图所示，用这个思路对H5进行设计，方向就比较清晰了。
3个重点信息
在品牌方面，“一拙”的品牌文化主要围绕茶展开，品牌的座右铭是“用好物，喝好茶，现代品质生活”，这给人的理念感比较像是“现代城市中，一个带有文化情怀的独立休闲空间”，是一个可以让人放松、静心、会友的地方。而功能方面，围绕品牌特征，我们发现小店有以下3个主要经营特色：
（1）提供茶相关的饮品和食品；
（2）提供设计师原创设计器物（以茶类产品为主）；
（3）提供主题创意活动和沙龙的场地。
通过对品牌与功能的分析，这支H5的内容原型基本被梳理出来了。
（品牌）品牌展示：
第1屏：封面图-主副标题
第2屏：品牌门店介绍
（功能）产品展示：
第3屏：品茶（茶饮产品）
第4屏：好物（器物产品）
第5屏：展览（活动产品）
第6屏：媒体（活动产品）
（区位）门店区位：
第7屏：地址（门店位置展览）
第8屏：邀请（邀请大家来门店体验）
8屏这个数量，不会显得内容过多，不会让用户看得太疲惫，也正好交待了品牌、功能和区位这3个信息点。
而从主题来说，我们可以发散出很多方向。比如，喝茶可以让人静心和放松；比如，来这里喝茶可以会友和聊天；再比如，在这里你可以看到很多创意展览。经过发散后，我们得到了如下主题：
①不要错过一个能让你放松身心的空间；
②“一拙”是一个会友的好去处；
③这是一个在城市中能让你放松下来的空间。
对比下来，项目选择了（3）作为主题，因为独立空间不仅可以隐含喝茶、静心和会友这些特征，还有“放松”的含义，这与品牌调性是比较一致的。为了让文案更加生动和有吸引力，最后使用的标题是“请问你来“一拙”做过客吗？”
用疑问句会有着更加轻松的感觉，也容易让人愿意继续看下面的内容，避免了说教和太过于直白。确定了主题和内容后，下一步就可以出草图了。
H5原型和设计构思
有文化气息的文创品牌比较适合清雅、简约的风格，色彩不需要太多，对比也不应太强。H5的色调以Logo的金色作为主色调，整支H5的页面风格应追求简洁、大气的感觉，就像是中国画，会注意留白和视觉氛围。此次项目的原型图采用Illustrator（AI）绘制，具体样式如图所示。
H5的原型图
H5制作过程
在制作方面，采用了Photoshop和MAKA（如图所示）。Photoshop主要用来进行内容布局设计，动态效果则是在H5工具MAKA中完成的。其实项目完全可以在MAKA中完成，但为能演示更多的工具操作，这里选用了两个工具配合进行制作。
MAKA的网站主页
制作前要建立Photoshop尺寸文件，画布设置宽为 640px、高为1008px，如图所示，这是为了后期方便将设计文件导入到H5工具，这是目前H5工具普遍采用的页面尺寸。下面开始详细讲解。
设计的细则讲解
（1）图片设计
图片是此次设计的关键，因文字内容整体较简单，所以文字只起点缀作用，这就凸显出图的重要性。从品牌提供的图片中选择合适的图片分别安插在了8个页面当中，但很快就出现了一个难题。
因为在页面中整版图最为美观，所以计划用8张整图配8段文字来设计画面。但在产品展示部分，品牌方并没有可以包含所有产品的整图，只有单个产品的展示图片。
如果直接将不同产品图拼凑在一个页面，就会很不美观，但如果将产品图分散到其他页面，又会使得H5的页数太多。
Photoshop尺寸建立页面
为解决问题，我们使用了一个轮播图的互动插件，通过该插件可以做到在一个页面展示多张图，还能保证图版的整屏效果，而这个互动插件就是H5工具的一个功能组件。为了使页面更为美观，我们还找到了一张宣纸的背景作为背景图，这样会比白底要有更多的细节展现。设计过程如图所示。
一个页面展示多张产品图的设计过程
（2）文字与标题设计
H5大标题采用方正大标宋体，页面正文主要采用方正仿宋简体，如图所示。
H5设计选用的字体
在前面，我们已明确告诉大家尽量不要使用识别性较差的宋体字，但此项目例外，因为H5正文文字量少，文字排版可以非常稀松。在这种情况下，宋体字的使用不会影响阅读时的识别。为了更好凸显文化气息，文字排版方式是以竖版为主的，这样更像是古体字的书写方式，能够凸显文化气息，所以用宋体字就更合适了。标题与正文的字体的排版对比效果如图所示。
标题与正文的字体
大家也应该注意，H5的第2页正文描述部分还是采用了黑体字，这是因为文字量太大了，所以在具体设计时做了取舍。不管你用什么字体，设计目的都是一致的，就是让H5清晰地呈现内容。正文字体采用黑体和宋体的效果如图所示。
黑字体正文
（识别度更好）
宋体字正文
（识别度不如黑体字）
（3）地图设计
在设计地图时，项目采用了手绘地图的形式，但实际大可不必这样，因为现在的H5生成器内置了定位地图，在点击这样的地图后可以直接调取手机中安装的地图 APP，呈现位置信息。但因为书中的H5模拟案例是要长期使用的案例，所以还是选用了手绘地图来表现。地图在配色上沿用金色作为主色，与画面风格保持一致，如图所示。
从卫星地图转化为更加直观的手绘地图
（4）页面版式
为了让页面有更好的视觉效果，版式设计中运用了3阶排版法，尤其是产品部分的页面，在画面中，图片、文字描述和脚标构成3层关系，这样页面的视觉效果就比较美观了，如图所示。
3阶排版法，加上第三级脚标后，视觉效果更丰富
在第2屏的品牌介绍部分，为了让文字更清晰，弱化了背景图，为文字专门添加了金色底图来强化文字的识别性，这样的做法和第8屏形成了反差，在第8屏是弱化文字，凸显图片，如图所示。
第2屏- 文字为主，图片为辅
第8屏- 文字为辅，图片为主
不管是文字，还是图片，一定要有一个为主、一个为辅，这是做页面设计时的一个重要意识，时刻以主要内容为导向。
（5）页面的节奏感
在设计第1屏时，起初设计了好几个样式，如图所示，最后选择了最简单、最不起眼的一组（第3组），原因就是考虑到整支H5的节奏。
第1屏的3个备选方案
这样，让第1屏内容简单到只有一个问句，能够让观看节奏有一个从低到高的过渡，让内容的呈现有一个从简单到复杂的趋势。关于节奏的概念，在之前的章节已有具体介绍了，读者可查看之前内容。
（6）H5工具制作
打开MAKA，在界面中单击“Ps”按钮，会提示上传PSD文件，如图所示，需要观看和了解这里的上传说明。
MAKA后台的PSD文件上传教程
上传后，需要为H5各屏元素添加动效。清雅风格的H5同样不适合添加太过炫酷的动效，所以这里主要添加的动态就是“淡入”和“向上飞入”。
因为图片多为场景，所以图片不适合添加动效。动效的应用主要放在了文字上，每一屏的文字都可以添加动态效果。具体的操作如下：
①首屏文字动效使用了左右翻转（2 秒）；
②第2屏文字使用了“向上飞入”，为了让3组元素运动时有差异，所以设置了不同的延迟时间，分别是Logo延迟1.2秒、正文延迟1.4秒、图标延迟1.8秒；
③第3到第6屏采用了相同的动效，即“向上飞入”，思路与第2屏类似，让3组元素的运动有差异。设置分别是：标题的速度1秒，延迟0.5秒；正文的速度1秒，延迟0.6秒；图标的速度1秒，延迟2秒。在这里，图片的运动是最大亮点，这个轮播图运动在H5内是可以轻松实现的，步骤如图所示。
H5的动态选择与轮播图设置
④第7屏的动效设计思路也与第2屏类似，元素同样采用了动效“向上飞入”，让元素有差异地以先后顺序逐渐运动出现在画面中。
⑤第8屏的文字动效和按钮动效同样是“向上飞入”。
大致步骤如同文字描述那样，但文字很难描述清楚动效。如果想真正学会这套动效制作方法，还请观看本节配套的教学视频，里面有清晰的操作步骤。
（7）添加音效
最后一步就是为H5寻找背景音效了。虽然这支H5的整体氛围是偏古朴的，但内容又非常具有现代感。所以纯古典的音效和纯现代的音效都不适合这支H5，这些音乐搭配画面的话都会非常奇怪。
结合古扑和现代这两个特征，经过一番思考，我们锁定的热搜关键词是“现代古筝”和“流行民乐”，这样找音效的范围就小多了。通过音乐素材网站的歌单搜索，项目选用了音乐-常静-《空》的前奏部分作为背景音效，音效整体氛围清雅、现代，并且具备古典特征。
因为是非商业的模拟案例，所以直接使用了作者的音乐，如果是大型的商业项目，就需要一定的版权支持。
在制作过程中，我们可以通过预览功能在手机上观看页面效果。这时不要忘记采用不同的手机进行测试，同时不要忘记上传封面图和添加H5的正副标题。到这一步H5就算是制作完成了。如图所示为H5的8屏平面效果，整体风格基本上保持了一致。通过扫描本节案例的二维码，你可以看到H5的最终效果。
H5全图平面效果
为了让读者更深入理解H5的制作过程，已把案例的具体制作步骤编辑成了视频，通过扫描下方二维码，你可以看到详细的制作过程。
如今不管是做活动运营还是宣传，只要是通过互联网传播，离不开的就是H5内容，它可以承载图片、链接、音乐等等活动元素，今天给大家分享几个能够快速简单制作出好看的H5页面的工具。
一、凡科微传单
凡科微传单是免费的H5在线制作软件，4000+H5制作模板任意使用，三分钟轻松制作招聘微传单、电子邀请函、电子请帖、H5场景、宣传海报等H5页面。
二、易企秀
易企秀是一个基于智能内容创意设计的数字化营销软件，主要提供H5创景、海报图片、营销长页、问卷表单、互动抽奖小游戏和特效视频等各式内容的在线制作，用户可以根据自己的需要自由进行创意制作，并快速分享到社交媒体开展营销。
三、人人秀
人人秀是一款免费的H5制作工具，是制作H5页面、H5游戏、微信活动、H5活动、涨粉活动的利器。拥有超过200款活动营销玩法，通过多页面展示+活动营销、供能领先的互动营销、问卷调查工具、在线图片设计工具、在线小程序制作工具，覆盖企业营销全场景。
四、MAKA
MAKA是一个H5在线创作及创意工具，为企业提供包括企业形象宣传、活动邀请、产品展示、数据可视化展示、活动报名等应用场景的展示。5W+专业设计师提供原创精致的主题模板，10W+优质素材每天实时更新，点击拖拽即可轻松添加或替换文字、图片等素材。
通过以上四个工具就可以轻松制作出H5页面，而且都是有免费模板可以使用的，有需要的小伙伴可以试一试！
