微官网（三）——前端之制作网页

淩亂°似流年 2022-05-19 02:09 195阅读 0赞

开发一个网站，首先是前端开发，就是有个整体的网站页面的样子；如果就是后台开发，包括按钮、链接、增删查提，这些都需要后台编码；前端有了，后台也有了，那数据放哪里呢？所以就需要数据库了，姑且就叫做搭建数据库吧；这些都搞定后，在本地主机可以看网站了，但怎么让其他人也能看到呢？这就需要找到服务器发布了，就称之为网站发布吧；但是，网站发布出去后，想让别人统一用一个域名访问到网站怎么办呢？这就需要绑定域名了，这就叫域名绑定吧。这些工作都做完后，一个网站就成功搭建起来了。

整个步骤包括：前端开发->后台开发->搭建数据库->网站发布->域名绑定

本文讲解一下搭建网站中的第一个步骤，前端开发：前端网页的制作。这个需要做的有网站需求分析、原型设计、效果图、切图、美工，涉及知识有三剑客（HTML+CSS+JS）、jQuery、bootstrap等。在写网页时，希望大家对这些知识都有一定的基础。

具体步骤：

1、需求分析：设计好微官网的交互流程，确定好需要多少网页，需要什么功能。

2、原型设计：设计网页布局，特效，功能，交互方式。

3、创建好目录：HTML、CSS、JS、images四个主要目录。

4、切图：用PS或firework进行切图：图片、图标、logo等，把切好的图片素材放到images目录中

5、创建好html文件、css文件、js文件，分别放在对应的目录中，然后做好连接。css和js一般采用外联方式，便于维护

6、根据之前设计好的方案写代码。

注意：如果不想自己做前端开发，网上有很多开源的网站模板，比如博客网站wordpress、[17素材网][17]（只做介绍，并非打广告）上面也有很多模板下载。

另外，提一下移动端前端开发：由于微官网是在手机上面显示的，这里需要解决自适应问题，我在这里列出了我遇到的问题和解决方法。

1、对自适应问题不太了解。

以前写的都是pc端网页，所以自适应问题还没接触过，然后就百度移动端自适应问题，在第一条博客文章中有着详细的说明，上面提到了四种解决方法，其中还详细介绍了网易和淘宝的方法。随后，我自认为百分比应该不是很难，然而，用百分比+媒体查询的方法使我的开发速度大大降低。原因是元素宽度是参考设备宽度而设置的，这个没问题，但高度没有参照啊，我要设置多少百分比呢？然后我就继续百度，找到了一个通过padding设置高度的方法，因为padding是参考宽度来设置的，所以有参照物，可以设置确定值。使用后确实解决了我的一些问题，网页也最终写出来了，但是元素没有设置高度，我总觉得会有问题，所以还是不推荐大家使用百分比的方法，我还是去好好学习一下网易和淘宝的方法，然后再去写其他网页。

![jquery支持手机触屏的图片轮播效果][jquery]

2、移动端和pc端轮播广告的区别

轮播广告在移动端和pc端显示的效果差不多，移动端的效果相对简单，种类比较少；而pc端效果可以有很多。但是移动端跟pc端最大区别是手机是通过焦点交互，而电脑是通过鼠标，这两种不同的操作方式，就使两个有很大的差别。所以移动端要解决的问题是，如何实现左右切换幻灯片。我百度了一下，找到了一个素材[jquery支持手机触屏的图片轮播效果][jquery 1]，大概了解了一下，然后稍微修改了一下，应用到了自己的网页中，亲测了一下，完全可以用。（自己不懂怎么开发，可以上网找模块，然后稍微修改就能使用了，这样可以加快开发速度，但是对后期维护可能会有影响，所以建议套用后，要研究一下是如何实现的）。

[17]: http://www.17sucai.com/
[jquery]: /images/20220519/b7e9cfb5b54e438393e9849a7d743882.png
[jquery 1]: http://www.jqueryfuns.com/resource/1209