计算机个人网站设计论文Word下载.docx

1、总结 12参考文献 12致谢 12个人网站建设 计算机专业学生 摘要：个人网站在现在的个人生活中可以起到非常重要的作用，本文主要介绍了个人网站设计规划，库文件和模板文件的制作，利用模板制作网页，制作网页特效的制作并使用ASPIISAccess技术实现了我的网站的各种功能，其中和数据库的连接使用到了ODBC技术等。通过此次的学习能快速掌握个人网站设计制作的基本技巧和基本网站建设过程。关键词：网站；网页制作；模版Abstract：Personal website personal life now can play a very important role, this article intro

2、duces a personal web site design and planning, library files and templates for the production of documents, using templates to create web pages, web pages, such as the production of special and Use ASP of + IIS + SQL technologies of it realize the various kinds of function in Web sites of me of,amon

3、g them and join and use and for ODBC technology at data bases .effects. Through this study can quickly grasp the personal website designed the basic skills training and basic site construction process.Keyword: web; web execution; stencil-plate1 引言在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们的政治、经济、

4、生活等方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet海洋中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设居Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设、个人网站建设中的重要组成部分，从而倍受人们的重视。个人网站已成为同学们讨论最热门的话题，适用于想通过建立网站交友、突出自我个性的广大网站制作爱好者。主要介绍了个人网站设计规划，库文件和模板文件的制作，利用模板制作网页，制作网页特效的制作等。首页中主要涉及了个人简介，照片匣子，我的作品，友情链接等。2 个人网站设计规划随着网络技术的飞速发展，越来

5、越多的个人拥有了自己的网站，为了设计一个有效的，引人注目的站点，应该有计划，有步骤地完成一系列操作。在动手建立网站以前，对网页进行完整，详尽的整体设计是至关重要的。个人网站设计制作主要包括以下几个步骤。2.1 确定网站的主题对于主题的选择主要按下列三个条件去考虑，本例所讲的是一个个人介绍性质的网站，主体就是介绍个人的相关信息。 主题要小而精。一般来说，个人主页的选材定位要小，内容要精。 对于个人网站来说主题最好是自己擅长或者喜爱的内容。这样在制作时，才不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有热情，很难设计制作出优秀的作品。 主题不要太滥或者目标太高。如果主题已经确定，就可以围绕主题

6、给该网站起一个名字，网站名称也是网站设计的一部分，而且是关键的要素。2.2 确定网站的目录结构网站的目录是指建立网站时创建的目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对站点本身的上传维护以及以后的内容的扩充和移植有着重要的影响。本站只是个人介绍性质的页面，主要是静态的几个页面，因此在建立目录的时候，可以将其中的页面文件直接放在根目录下，所有的图片可以放在images文件夹中。下面是建立目录结构的建议： 不要将所有文件都存放在根目录下。 按栏目内容建立子目录。 在每个主目录下都建立独立的images目录。 目录的层次不要太深。2.3 确定网站的整体风格风格是指站点的整体形象给浏

7、览者的综合感受，包括站点的标志，色彩，字体，标语，版面布局，内容价值，存在意义，站点荣誉等诸多因素。本站采用白色，绿色等为主的色调，绿色具有清爽，理想，希望，生长的含义,采用这种明亮的绿色，和褐色的沉稳,营造了一个清晰明块，充满无限希望与活力的氛围。从整体风格的角度来看，下面就是一个好的网站标准： 简洁实用：这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所想得到的信息传送给他就是最好的，所以要去掉所有冗余的东西。 整体性好：一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的。 网站形象突出：一个符合美的标准的网页是能够使网站的形象得到最大限度的提升的。页面用色协

8、调，布局符合形式美的要求：布局有条理，使网页富有可欣赏性。 交互式强：发挥网络的优势，使每个使用者都参与到其中来，这样的设计才能算是成功的设计。2.4 确定网站主要栏目和布局因为每台显示器分辨率不同，所以同一个页面的大小可能出现640*480像素，800*600像素，1024*768像素等不同尺寸。本站的所有页面采用800*600像素制作。通常版面布局按照如下步骤进行。1.草案 新建页面就像一张白纸，没有任何表格，框架和约定俗成的东西，可以尽可能地发挥想象力，用一张白纸和一支铅笔将想到的景象画上去，当然用作图软件Photoshop，Fireworks等都可以。这属于创作阶段，不讲究细腻工整，不

9、必考虑细节功能，只以粗陋的线条勾画出创意的轮廓既可。尽可能多画，几张，最后选定满意的作为继续创作的样板。2.粗略布局在草案的基础上，将确定需要放置的功能模块安排到页面上。必须遵循出重点，平衡协调的原则，将网站标志，主要栏目等最重要的模块放在最显眼，最突出的位置，然后再考虑次要模块的排放。根据本站的主要栏目确定了本站的布局草图。我们可以把顶部导航区作top库文件，在制作其他网页文件时直接引用。在本站中的其他页面风格和栏目相似，如果每次都重新设定网页结构以及导航条，各类图标就显得非常麻烦，可以利用Dreamweaver先制作一个模板，然后利用模板再来创建其他的页面。3 创建个人网站站点在制作网页前

10、，要先为网页定义一个个人网站站点，用来存放站点中所有网页文件及附属文件。建设站点前先将配套的素材文件夹复制到本地硬盘上，在本地硬盘上创建个人网站，具体操作步骤如下。1. 选择【站点】|【管理站点】命令，弹出【管理站点】对话框，在【管理站点】对话框中，单击【新建】按钮，然后从弹出的菜单中选择【站点】。如下图3-1所示：图3-1 管理站点图3-2 输入站点名称2弹出【站点定义】对话框，如果对话框显示的是【高级】选项卡，则单击【基本】选项卡，弹出【站点定义向导】的第一个界面，要求为站点输入名称。如图3-2所示.3单击【下一步】按钮，出现向导的下一个界面，询问是否要使用服务器技术。选择【否，我不想使用

11、服务器技术】选项，指示目前该站点是一个静态站点，没有动态页面。4单击【下一步】按钮，打开一个对话框，在文本框中输入站点路径。5. 单击【下一步】按钮，询问是否使用远程服务器，这里选择【无】，因为将整个站点制作完成以后再上传。7.单击【完成】按钮，即出现【管理站点】对话框，其中显示了新建的站点。8.单击【完成】按钮，关闭【管理站点】对话框。现在，已经为站点定义了一个本地根文件夹，就可以在站点中制作网页了，当制作完成以后，就可以上传到服务器上供大家浏览了。4 制作网页模板因为本网站中的几个页面都要用到相同的页面元素和排版方式，因此可以使用模板以避免重复地在每个页面输入或修改相同的部分，在网站改版的

12、时候，只要改变模板，就能自动更改所有基于这个模板的网页。4.1 制作库文件在Dreamweaver中，库项目是可以重复使用的项目之一，库的用途和模板类似，都是可将同一内容用于不同的网页，库文件具体制作步骤如下。1.选择【文件】|【新建】命令，新建一空白网页。2.选择【插入】|【图像】命令，弹出【选择图像源文件】对话框，选择lbi.jpg。3.单击【确定】按钮，即可插入图像。4.选择【文件】|【另存为】命令，弹出【另存为】对话框，在【文件名】文本框中输入文件名3.lbi，在【保存类型】中选择【库文件（* lbi）。5.单击【保存】按钮，至此库文件制作完成。4.2制作模板使用模板创建文档可使站点具

13、有统一的结构和外观，。无论是新建站点还是更新已有站点，如果要使站点中的所有页面都共有某种特色，则模板非常有用。使用模板可以个次修改若干页面，而不用对新页面逐个设置属性。制作模板具体步骤如下。1.选择【文件】|【新建】命令，弹出【新建文档】对话框，在【常规】选项卡中选择【模板页】类别中的【HTML模板】选项。如图4-1. 图4-1 HTML模板 2.单击【创建】按钮，创建一空白模板网页。选择【窗口】|【资源】命令，打开资源面板，在资源面板中选择images/bj_01.jpg文件。如图4-2 图4-2 打开文件3.单击【插入】按钮，即可插入库文件。4.将光标置于库文件的下边，选择【插入】|【表格

14、】命令，弹出【表格】对话框，并设置【行数】、【列数】，【表格宽度】设置为1005像素，单击【确定】按钮即可插入需要的表格。5.将光标置于第1行单元格中单击鼠标面板中【背景图像】文本框右边的图标，弹出【选择图像源文件】对话框，从中选择图像文件夹中的images/bj_01.jpg文件，如图4-3所示. 图4-3 选择文件6.单击【确定】按钮，即可插入背景图像7.用PHOTOSHOP CS2制作图片Bj-04.jpg，如图4-4图4-4 制作图片8.按需要分别插入图片，使其组合成一个完整的页面背景.9.预览，效果如图4-5所示图4-5 效果图4.3 设置模板可编辑区1.接上一节，将鼠标置于文档想创

15、建可编辑区域的位置。2.选择【插入】|【模板对象】|【可编辑区域】命令，弹出【新建可编辑区域】对话框，在对话框中，将【名称】设置为index_1,如图4-6所示.图4-6 创建可编辑区域3.单击【确定】按钮，即可创建可编辑区域，如图4-7所示。图4-7 可创建区域4.4 用模板制作网页说明可以利用模板快速的制作出大量的风格类似的网页，当模板改变时，所有基于模板的网页也随之改变，这样能有效的实现网站的更新。5 利用模板制作网页5.1 制作登录主页1.切换到【显示代码视窗】，在代码视图状态下，在和之间输入以下代码：table width=1005 border= cellpadding= cell

16、spacing= trfont face=宋体 size=3 color=#33CC66账号：/fontinput type=text name=name18 maxlength=20 /密码：password15button name=button value=登陆/form  /td/trmarquee direction=left behavior=scroll scrollamount= scrolldelay=6 bacolor=#aaeeaafont face=宋体 color=#0099332欢迎大家光临我的网站!/marquee&/tritd height=67 co

17、lspan=5 valign=top background=images/images/bj_11.jpg-DWLayoutEmptyCell-/table2.按F12键，在弹出的对话框中点击【确定】按钮，在浏览器中预览效果如图5-1所示：图5-1 效果预览图5.2 利用模板制作“照片匣子“页面制作新页面“照片匣子”，然后插入到可编辑区域中，预览效果如图5-2。图5-2 添加图片后的效果预览图5.3 利用模板制作“我的作品“页面制作新页面“我的作品”，然后插入到可编辑区域中，预览效果如图5-3.图5-3 效果预览图5.4 利用模板制作“经典搞笑“页面制作新页面“经典搞笑”，然后插入到可编辑区域

18、中，预览效果如图5-4.图5-4 效果预览图5.5 利用模板制作“友情链接“页面制作新页面“友情链接”，然后插入到可编辑区域中，预览效果如图5-5. 图5-5 效果预览图5.6 利用模板制作“另类下载“页面制作新页面“另类下载”，然后插入到可编辑区域中，预览效果如图5-6。图5-6 效果预览图总结 本文主要通过此次的学习能快速掌握个人网站设计制作的基本技巧和基本网站建设过程。个人网站设计规划，库文件和模板文件的制作，利用模板制作网页，制作网页特效的制作等参考文献1网页设计 弘博软件工程师研修计划 教材 2011年2Photoshop图形图象处理 弘博数码设计师研修计划 教材 2011年 3 赵

19、增敏编：ASP动态网页设计，电子工业出版社致谢经过一个多月的设计和开发，这个个人网站已基本结束。主要涉及了个人简介，照片匣子，我的作品，经典搞笑，友情链接，另类下载等方面，此外，在网站中还设计了登陆页面，以确保本网站的安全性。本网站设计合理、界面美观、，为制作基于ASP的动态网站起到了重要作用。但是由于毕业设计时间较短，所以该网站还有一些不尽人意的地方，比如用户界面不够美观等问题，这些都有待进一步改善，敬请各位老师指正。在本次毕业设计中，我从老师身上学到了很多东西，；老师认真负责的工作态度、严谨治学的精神和深厚的理论水平都使我受益匪浅。无论在理论上还是在实践中，都给予我很大的帮助，使我的Dream weaver及Photoshop应用水平得到了很大的提高，这对于我以后的工作和学习都有一种很大的帮助。今后的工作中，我一定要充分运用自己所学的计算机知识，并在工作中不断学习和完善，充分发挥一名计算机专业人员的作用，为企业的腾飞和发展贡献自己的力量。