个人生活网站的设计与制作

　　摘要：如今网络遍布世界各地，中国互联网经过10多年的发展，已经形成了一个巨大的产业。建立个人网站可以使更多地人展示自己的才能，更加的人性与多元化，因此越来越多的人选择建立自己的个人网站。学习好网站建设，不仅可以提高计算机的专业技术水平，更重要的是，今后对于网站的运用可以得心应手，方便交流，本网站设计主要应用了网页制作软件dreamreaver、flash、html技术。以静态网页为主，同时加入了部分的动态效果，包括简单的后台处理与内嵌网页技术。

　　关键词：个人网站；Dreamweaver；flash；html

　　中图分类号：TP393文献标识码：A文章编号：1009-3044（2013）35-8096-02

　　1网站制作基本说明

　　1.1制作人员所需具备技能

　　静态网页设计与制作是网站建设与开发的重要步骤，如果要想制作出美观、实用的网页，需要制作人员需掌握网页设计基本工具的使用，首先，制作者要掌握HTML标签和语法规则，可以使用记事本等工具编写基本网页，还要掌握dreamweaver网页设计与制作软件，同时，网页设计与制作过程中还要对图片进行处理，所以制作人员需要熟练操作photoshop等图像处理软件。网站制作完成后，制作人员需要具备空间、域名申请和上传网站的能力。

　　1.2网站运行环境

　　硬件环境

　　CPU：主频在166MHz以上，Intel或AMD。

　　内存：容量在32MB以上。

　　硬盘：空间在1GB以上，转速在5400转/秒或者更高。

　　显示器：尺寸在15英寸以上，色彩为16位色以上，分辨率800*600，推荐使用1024*768。

　　显卡：VGA显卡，显存在1MB以上。

　　软件环境

　　操作系统：简体中文版WindowsXP。

　　浏览器：InternetExplorer4.0/5.0。

　　调试与运行辅助工具：InternetInformationServer。

　　2网站的总体规划

　　2.1网站总体规划

　　根据自己的思考和设计前的准备，将此个人生活网站分为“首页”、“日志”、“相册”、“个人档”、“音乐”、“收藏”这6个网站模块。总体结构图1所示。

　　2.2网站的风格

　　网站整体运用格布做背景，格布上加入格布花、纽扣等进行点缀。风格上主要强调简洁、大方、布局简单的特点。主页由flash制作，通过div+css布局模式进行网站布局风格的统一，同时利用CSS层叠样式表对网站的导航和字体大小以及版权信息进行统一的设计，使得网站的风格得到了统一。

　　3网站开发过程

　　3.1素材准备

　　素材的准备是制作网站的基本条件，只有准备好必备的素材，才能够快速的制作网站，而不会浪费不必要的时间和精力。

　　准备网站的素材不仅要从网站的各个栏目的规划考虑，也要考虑各个页面用到的图片、内容、特殊效果等等，具体的网站有：网页大宝库、懒人图库、素材精品屋等。

　　准备好素材以后，需要对文本、图片、样式、特效等进行基本的处理，同时还要将素材进行分类，具体分类文件夹如：images、flash、music、style。

　　3.2首页制作

　　首先把整理好的素材分别放在images、flash、music三个文件夹下。

　　建立站点

　　1）打开Dreamweaver软件。

　　2）单击“站点”菜单，进行“新建站点”操作。

　　3）在站点定义对话框中输入网站名称“mywebsite”，本地根目录文件夹”是指你网站保存的磁盘路径，选择d：＼myweb后，单击“确认”按钮。

　　4）经过以上基本操作，一个站点就建立好了。

　　5）把images、flash、music三个文件夹剪切到站点文件夹下，再新建html文件夹。

　　6）右键单击“站点”面板中根目录下的html文件夹，新建网页首页文件，命名为””。

　　7）打开首页文件进入编辑状态。

　　8）建立表格，使表格居中对齐。

　　9）点击表格内部在执行菜单中，插入——媒体——flash。

　　10）同样的方法插入flash背景音乐文件未命名-。

　　11）点击修改——页面属性——外观——背景图像，单击浏览选择所需背景图片。

　　4模版的建立

　　1）首先建立一个大表格并且使表格居中，接着制作嵌套表格，使用插入表格命令，在大表格内插入所需行数和列数表格，设置宽度百分比“Percent”（百分比），在文本框中输入100，单击“OK”，所插入的表格刚好充满第一个单元，然后插入一行三列的表格，左右分别为100宽居中表格宽度为600，最后再居中嵌入一行七列的导航栏和一列的文本内容栏。

　　2）表格嵌套完成后开始编辑导航条，首先输入导航文字内容，给每栏文字分别添加链接为【#】点击导航条表格的，在属性菜单下编辑边框大小为3、颜色为#FFCC99。选择执行菜单中，页面属性——链接，设置文字链接，添加链接效果：链接颜色与已访问链接颜色为#ffcc99变换图像链接颜色为#ffff00，下划线样式为仅在变换图像是显示下划线。

　　3）添加网页背景图案，页面属性——外观——背景图像，选择好事先存放在images里的背景图案。

　　4）添加table中的背景图案，单击在属性中选择背景图像，添加图像，这样模板就完成了。

　　作者：胡旭

　　　参考文献： 

　　[1] 中文版Dreamweaver CS4案例教程（1CD）[M].北京：龙腾科技出版 ，2009. 

　　[2] 洪光，马希敏.静态网站建设[M]. 2版.大连：大连理工出版社，2008.