个人网站制作的建站技巧

1.设计
进行页面总体规划，包括风格、布局等。网站制作要有整体风格，各部分要保持协调，整个页面看起来才不显得凌乱。然后用平面设计软件制作整个页面，常用的软件有Adobe photoshop、CorelDraw、Macromedia Fireworks等。photoshop是平面设计的大拿，小编也一直用它做页面设计，它从6.0版开始特别增强了对网页制作的支持，显得非常方便。现在流行的Fireworks是Macromedia网页制作，由于它与Dreamweaver及Flash无缝集成，越来越受到网站制作人的欢迎。

2.切割
做完第1步，我们得到的只是一个图片文件，还没集成网页上应该有的元素。接下来要将图片按制作需求切割成小图。切割功能前面提到的两个设计软件中已经集成了（如photoshop中提供的切片工具），不需要专门的软件来处理。

3.代码生成
这是整个制作过程中最重要的一环。我们要用HTML语言将切割下来的组件按整体设计“拼装”回去。众所周知，HTML语言是一种标记型语言，不须要编译就可以直接在浏览器中执行。所以理论上，我们可以用记事本等文本编辑工具来写代码。手写代码虽然被看作是一种很“酷”的行为，但是很耗时间，而且很难精确地控制格式。这时，便该专门的HTML编辑软件出场了。

HTML编辑软件大体上可分为两类：一类是代码型，典型代表为Homesite、Hotdog等；一类是所见即所得型，典型代表为Frontpage。也有两者兼具的，就是大名鼎鼎的Macromedia Dreamweaver。代码型实际上就是一个文本编辑器，不同的是，它可以有专门的代码提示功能，用起来比较方便。所见即所得是目前大家最推崇的方式，因为可视化的编辑基本丢弃了代码，方便快捷。

4.发布
将制作好的页面放到服务器上，以便更多的人能浏览。发布通常采用FTp的方式，将文件上传到服务器。目前的网页制作工具基本上都有发布工具，可以通过各种方式发布你的页面，如Dreamweaver中的“站点管理器”。用户亦可使用FTp客户端软件进行这步操作。

成都创新互联是一家专注于网站设计制作、成都网站制作与策划设计,昭化网站建设哪家好?成都创新互联做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:昭化等地区。昭化做网站价格咨询:13518219792

如何让浏览器判断设备尺寸呢?

有两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件，弃用。原因是博客CSS文件不大代码也不多，不需要多个CSS文件，也能减少并发。

第二种就是我现在用的这种，请直接查看本站CSS文件，

核心代码来了，开始研究响应式web设计朋友，CSS3 Media Queries是入门。

在CSS中加入语句：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/

大家可以看到我博客里有多个判断，1024px，768px，650px，500px，400px，350px。

这意味着宽度在1024px以下的屏幕，我博客会呈现六种不同的效果。但为了保证网页的连续性与完整性，同时也是图省事，下面六个CSS几乎相同。

唯一不同的是加入了display:none，不显示某些内容。所以通过CSS观察发现，屏幕越小，显示的内容就越来越少。

这也是文章开头为什么pad和移动端显示的界面不同的原因之一。

要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。

参考代码：

核心CSS文件，适用于任何程序http://lusongsong.com/zb_users/theme/LuSongSong/style/LuSongSong-Index.css

代码文件，鼠标右键查看本站源代码(注意导航代码的变化)，此代码仅供zblog用户参考。

图省事的、试用Wp系统的朋友可直接下载

使用asp版的朋友，可以直接把本站的CSS拿去用。

总结：

只要制作两个导航，能看懂CSS文件就可以搞定，照猫画虎，人人都能做出响应式的网页设计，看似很难，实际上很简单。服务器空间不推荐使用wordpress、godaddy等一系列国外虚机/VpS，具体原因不能多说。建议用国内的各种云做个备案。如果确实需要一个域名：购买域名途径很多，建议比较一下国外域名商与国内域名商的价格，找到一个合适的分模块的主题，把不同的内容分成几个分类，在首页展示每个分类就可以做到。

当前标题：个人网页制作设计，个人网站制作流程，网站制作费用
分享链接：http://scyanting.com/article/egosci.html