摘要:如今网络遍布世界各地,中国互联网经过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文件夹,新建网页首页文件,命名为”index.html”。
7)打开首页文件index.html进入编辑状态。
8)建立表格,使表格居中对齐。
9)点击表格内部在执行菜单中,插入——媒体——flash。
10)同样的方法插入flash背景音乐文件未命名-5.swf。
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.