2020年个人生活网站的设计与制作论文.doc

个人生活网站的设计与制作论文 摘要：如今网络遍布世界各地，中国互联网经过10多年的发展，已经形成了一个巨大的产业。建立个人网站可以使更多地人展示自己的才能，更加的人性与多元化，因此越来越多的人选择建立自己的个人网站。学习好网站建设，不仅可以提高计算机的专业技术水平，更重要的是，今后对于网站的运用可以得心应手，方便交流，本网站设计主要应用了网页制作软件dreamreaver、flash、html技术。以静态网页为主，同时加入了部分的动态效果，包括简单的后台处理与内嵌网页技术。 关键词：个人网站；Dreamweaver；flash；html ：TP393：A：1009-3044（xx）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。 浏览器：InterExplorer4.0/5.0。 调试与运行辅助工具：InterInformationServer。 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。选择执行菜单中，页面属性链接，设置文字链接，添加链接效果：链接颜色与已访问链接颜色为#ff99变换图像链接颜色为#ffff00，下划线样式为仅在变换图像是显示下划线。 3）添加网页背景图案，页面属性外观背景图像，选择好事先存放在images里的背景图案。 4）添加table中的背景图案，单击在属性中选