说实话现在很多做网站的大多数是个人站长，由于时间精力的限制没有学习到更多的专业知识，而处于兴趣爱好等做了网站，随之而来的就网站技术和模板这一块，这是真正的技术关。大部分会选择开源免费的cms和别人制作好的模板套一个网站出来，其实这种网站很有很多限制，想修改模板也太难，我这里分享一点网页前端设计技术的经验，即使不会代码一样可以制作出漂亮高质量的网页。
了解网页的基本组成
网页由html标签、css代码和js文件组成，我们在开始制作一个网页是需要知道网页的基本组成和大概的元素作用。一个网页的主要构成部分是head和body两个部分，在head标签内引入css文件和js文件，然后在body里面进行调用。需要修改css样式就在css文件里面去修改，如果有一些酷炫的效果，可能会需要特定的css和js代码共同完成，了解这些就够了，不需要知道具体的代码到底该怎么写。
网页设计
动手写前端网页代码
万事开头难但是也不要害怕，网页设计使用Dreamweaver工具来实现，新建一个HTML文件，默认都会自动填写好基础的通用代码，我们只需要在head和body里面添加相关的内容即可。首先引入css和js文件，只要你对基本的HTML代码都了解知道他们的大致用法就可以了。
HTML
遇到不会的太多怎么办？没有关系，这里分享具体的方法。
bootstrap前端框架解决各种css难题
虽然css的知识不是很多，但是在浏览器兼容、多终端自适应及代码量方面，我们学会使用一款可以快速制作网页的前端框架比去学习专门的课程要快很多。bootstrap就是这样的一个前端框架，网上有很多的教程，还有官方提供的帮助文档都很详细，边学边做也完全没有问题，学会了bootstrap就等于省去了大把的时间写一些有用而又没有什么意义的代码。
设计制作
Font Awesome解决网页图标制作
网页上面会用到一些小图标，比如电话图标、某些logo和特殊的元素小图片等，这些小图片需要使用PS软件制作，麻烦的不仅仅是需要会用PS而且在PC和移动端等图片的大小是完全不一样的。我们使用Font Awesome就可以完美解决，这是一个可以免费使用的字体图标框架，自适应多终端，不仅好看而且使用一个固定的标签引用即可，非常方便，您可以网上搜索找到。
Font Awesome图标
Font Awesome的使用很简单，首先在网页的head标签内引入css和js文件，然后在需要显示图标的地方使用的形式把图片加进来就可以。
特定的功能和效果实现方法
有时候为了网页能达到酷炫的效果，比如鼠标滑过显示下来菜单，鼠标移入显示大图片，弹出一个对话框，右侧悬浮在线客服等，这个不会代码怎么办？网上去搜索代码！有很多网站都有单个小功能的实现方法，有提供完整的js和css代码，将您需要的代码下载以后拷贝到你的网页项目里面，引入相关的js和css代码，如果css代码少可以和你原有的css文件合并，在对应的div标签加上相关的class或js的id，然后在浏览器上“审查元素”修改样式即可。
网页设计
网页设计就是这么简单，只要搞清楚原理，很多的代码到底怎么写的完全不用关心，学会搜索，找到合适的代码引入到自己的项目中即可。了解更多优质内容就关注一下我啦。
举报/反馈
557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
