《网站设计指南》第23章基于div+css的个人网站

第23章 基于DIV+CSS的个人网站,前面介绍了Web标准的基本概念，及其实现的基本方法。采用DIV+CSS可以很快实现页面布局，而且在页面设计和维护时都带来了极大的方便。本章将使用一个简单的实例，介绍DIV+CSS页面方式的简单设计过程，希望借此能抛砖引玉。,23.1 网站前期规划,在网站设计之前，都需要进行精心的规划，以便设计能顺利进行。在第12章中介绍了网站规划的一些常用方法。网站规划工作主要是分析网站的主题，根据主题确定网站内容及其风格定位。个人网站，用于展示个人的相关信息，更多的是体现个人的色彩。因此该网站的风格就不必循规蹈矩，需要强调个性和自由洒脱。在色彩搭配上主要采用活泼和阳光，当然也可以选择与性格相符或极具个性的搭配,23.1 网站前期规划,例如，苹果公司网站采用的是色彩素雅的银灰色作为主色调，从而突出了科技的主题，与其多彩的产品图片进行呼应，更显情趣，如图所示。,23.2 制作准备,在网站的大致内容确定下来后，可以为网站的设计做一些准备活动。这是网站制作顺利进行的基础。准备活动主要是排列各个页面的具体内容，然后绘制出布局草图。根据布局草图准备素材，最后用图形软件制作出效果图。把效果图分割，提出有用部分进行修改，然后进入页面设计。,23.2.1 布局草图,首页作为网站的入口，必须为浏览者提供进入栏目页面的链接，从而方便浏览者对相关内容进行有选择的阅读。另外，首页也是整个网站的综合展示，在首页中可以看到各个栏目的相关信息，以吸引浏览者继续进行阅读。因此把各部分排列如图所示。,23.2.2 素材准备,成了页面布局草图的设计，那么页面的整个框架已经显现出来。此时所需要的工作就是为设计过程准备素材。素材是网页设计中不可缺少的，只有准备了充分的素材，才能在设计时做到顺手拈来，从而不至于在设计时由于缺少素材而被迫中断设计，阻碍网页设计的顺利进行。设计所需素材的来源途径主要有两种：一种是使用现成的素材；另一种是根据自己需要来设计素材。,23.2.3 绘制效果图,收集或制作好素材后，根据布局草图，使用图形制作软件（如Photoshop和Fireworks等）把它们装配起来，基本可以绘制出网页的效果。对不满意的地方可以进行修改，直到满意为止。效果图制作完成后，对其进行切割，以便在网页中使用，如图所示。,23.2.4 建立站点,在Dreamweaver中设计网站都需要创建一个站点，然后才能在站点中进行设计和测试。Dreamewaver CS3提供了强大的站点管理功能，不论网站程序是在本地服务器还是在远程服务器，都可以方便地进行管理和修改，而且可以同时管理多个站点。创建站点的具体步骤如下：,23.3 页面编写,一系列的准备活动完成后，就可以进入到页面编写。在前一章已经介绍了如何使用DIV+CSS进行布局，那么在本节中使用的方法也大同小异。在本节中还有一些新的方法，但基本原理都差不多，读者应该在实践中仔细体会。,23.3.1 整体布局,前面已经介绍了布局草图，本小节介绍把布局草图转化为页面布局，同时还需要结合效果图。DIV+CSS使用层来划分区域，使用CSS样式表完成定位，具体步骤如下：,23.3.2 添加首页内容,完成整个布局后，便可以为各个区域添加详细的内容，具体步骤如下：,23.3.3 制作相册详细页面,详细页面与首页有许多共同的区域，可以通过修改首页中的区域从而减少工作量，具体步骤如下：,23.4 网站发布与上传,在所有页面都制作完成后，需要把网站发布到Internet服务器上，才能被他人所浏览。服务器空间有租用的，也有免费提供的。免费提供的没有服务保障和足够的支持，不过对于初学者，也可以满足要求。除了空间之外还需要网站域名，也就是别人访问网站时的地址。一般在申请免费空间时会一起提供。但大多数都是二级域名。如果需要一级域名，则需要向域名提供商注册，并交纳相应的费用。把本地网站文件上传到网络空间上，有多种方法。一般采用FTP软件进行，另一个是通过Dreamweaver进行发布和上传。在此介绍使用Dreamweaver进行发布和上传。具体步骤如下：,23.5 专家总结,本章介绍了基于DIV+CSS的个人网站的制作过程，重点介绍了如何规划网页的设计，以及内容的安排。素材准备是网站制作过程中必不可少的一步，素材的好坏直接影响到网站的效果。通过本章的学习，读者可以在实践中掌握DIV+CSS布局，制作出符合Web标准的网站，只有