制作个人网页小技巧

第一篇：制作个人网页小技巧

网页美工的一些小技巧

在众多做站长的人里，程序员至少占9成，而真正有水平的美工，真的少之又少，简直可以用“罕见”来形容了。其实，网页美工和平面美工的差别很大。平面美工重视的是软件操作，颜色，图案等，而且网页美工重视的是搭配，感觉。为什么有的网站是行业网站，有些网站是企业网站?有些网站是女性网站，有些网站是儿童网站?只从网页的布局和搭配，就足已改变网站的性质了。

网页美工不需要太多图片，甚至不需要太多的颜色，但是需要很多的经验和很深的感觉才能做好。我做网站六年了，美工一直很发愁，但是通过这么多年的观察和尝试，也算是能做一些了，在这里，就介绍一些简单的美工技巧，虽然不能凭此找到什么美工方面的工作，但是确实可以完成很多网站美工任务了。

一 工具和素材。我不用PS，一方面不会，另一方面那个操作太慢太复杂了，适合影楼，但是，网页美工应该是很难用到的，我用的是FIREWORKS，这个就足够了。素材方面，主要是一些网页图标，直接百度搜索，或者却是一些大网站找就行，并不需要太多的大型图片资源，而是需要一些小的ICO，PNG等小图标。颜色和尺子工具是必备的。

二 字体方面。我曾发现很多自称专业的美工，连基本的字体都没有。虽然常见的是宋体字，但是，一般电脑里英文字体很多，中文字体还是太少了，所以，需要你下载一些字体。只从美工而言，我最初发现了“微软雅黑”，这是个好东西，换上这个以后，网站就会变得漂亮了。另外，还有一些其他的字体，至少也得10种以上吧，用在不同的网站类型，不同的地方，字体很好找，但是要知道哪种字体用在哪儿，就不容易了。

三 空白也是一种美。网页上可以没必要放很多的图片，但是却必须留下一些空白。行间距，外间距，字与字之间的距离，这些都是必要的，这是通过代码来实现的，也就是MARGIN和PADDING，这个用法并不难，可还是那句话：知道用在哪儿，就难了。

四 边框与背景。网页的一块一块都需要边框来框住，我一般使用的是1PX，#CCCCCC的实线，后来使用#EEEEEE又多一些，另外，像新闻列表的底部线，图片的边框线等，也有很多地方用到。至于背景，很少用到，因为网页美工大多以浅色为主，背景用不好就会很丑，所以，一般很少用到。

五 发光与投影。这是FIREWORKS里的功能。发光主要是用在字体上的，字体的发光滤镜，可以让字体更漂亮一些，但是很多时候用着却显得有点“俗”，主要还是“度”的问题。投影也可以用于字体，但是，主要还是用在图形上，比如边框，图片，栏目条，背景等，可以增加立体感觉。发光和投影要注意度，一般都用的比较轻。

六 鼠标行为。网页美工与平面美工最大的一个区别就是，网页美工是动态的。鼠标点击，滑过等，增加一些颜色变化，加粗，颜色等，还有滚动，变换一类的，也可以增加网站的美工效果，比如导航的滑过变背景图片等。

什么工作都有难度，但是什么工作也都有技巧，关键看你是否认真去观察了。 本文转自 上虞人才网

第二篇：个人网页制作过程：

制作个人网页的目的就是向大家介绍自己，我制作个人网页的过程如下

(1) 首先是熟悉并熟练一款网页制作软件的使用方法，这样制作出来的个人主

页才不会显得粗糙，我选择的是frontpage，这款软件比较适合于初学者来使用。虽然在制作效果上也许会逊色一点，但是其优点的是比较容易上手。

(2) 其次就是选择素材了，网页上那些好看的背景还有点缀以及一些装饰，标

志性的图片，元素都是需要自己来选择的。选择好了这些图片元素会为你的网页增添很多生气。这里介绍一个比较好的网站。我的所有图片元素以及背景都是从这里面找的。

(3) 所需要介绍的当然是自己的个人信息，包括自己的基本信息以及自己的爱

好，工作以及一些零碎的感悟。这些都是要在网页里面表达出来的文本信息，所以必须要实现准备好。

(4) 现在就是需要布置自己的网站了，我的计划是用多页面网站来介绍自己，

制作个人主页。首先必须有一个主页，里面是我的基本信息，然后有几个选项，分别超链接我的爱好，我的工作以及我的感悟。在下面会有三个子网页，分别就是我的爱好，我的工作以及我的感悟。出去剩下的两个不在超链接以外，我的爱好会再向下借三个子网页，分别是我喜欢的歌，我喜欢的书和我喜欢的电影。

(5) 有了明确的目标就开始着手制作，在上面那个网站里下载的背景和矢量图

都是需要加工的，需要利用绘图工具把需要的元素从整个照片里抠出来，把不需要的多余的部分擦除，在这个时候什么图片需要放置在什么地方用来做什么已经有一个大致的想法。

(6) 没有用其他的网页制作工具，frontpage里面需要事先插入表格，将图片

文本信息填到适合的表格里，这里面的布局工作就需要自己动手了，以个人爱好而定，里面遇到了不少问题，但都最终被我解决了。这里面插入图片需要在插入选项里面选择插入图片，设置背景则是在格式选项里选择背景，背景图片也要在绘图工具里设定好尺寸。一开始我选择的网页形式是新建一个只有一个网页的网站，后面的子网页可以在网站里新建网页来实现。

第三篇：■制作个人网页的步骤

一、准备材料

你首先做一个小计划,准备在主页上告诉人家什么?比如介绍三个方面：自我介绍,我的爱好,我的工作,那你就先起一个总目录(文件夹,比如d:html),来放你的所有文件，然后再在这个目录建立三个子目录：myself,interest，job。文件名你可以任意，但最好全部小写，因为有的主机要认大小写。然后将你的材料copy进相应的子目录。比如你要在你的主页里展示你的靓照，那就将你的照片扫描成JPG格式的文件，放在myself的目录下.要注意,网上只能使用JPG和GIF两种图象格式，其他诸如BMP和TIF等很通用的格式都不能用在网上,因为它们太大了,但你可以用图象软件进行转换，比如Office 97的照片编辑器。把你准备在你主页上出现的图象放进相应的目录里后,你就可以开始制作了。

二、开始制作

你无须去记复杂的HTML语言，你可以用Netscape4.0或者WORD7.0,我用的是Frontpage.打开Netscape,在file菜单里选Edit Page,便可以制作了.文字的处理基本跟Word没什么两样,关键是插入图片和产生链接.我们先做关于你自我介绍的一页，你先写上“大家好，我是superboy，下面是我的照片：”这时要放图片了，只须点击Insert菜单，选取Image,在Choosefile里选取你的图象文件即可，然后把这个文件保存为myself.html文件，放在myself的目录下。好，现在必须做封面了，你在封面写：“欢迎来到superboy的主页”以下是“自我介绍，我的爱好，我的工作”。你的自我介绍要链接到下一页去，你只须用鼠标选“自我介绍”后按鼠标右键 ，再选create link，然后再选你myself目录下的myself.html，就将“自我介绍”链接到下一页了，以后在浏览器中一按，就可以跳到镶有你靓照的页面啦。

在你的封面做好了所有链接和图片后，记住你必须将这一页保存为index.htm(有的主机要求必须为index.html),因为网页默认的主页名称是index.制作主页其实很简单，只要多实际制作，工多艺熟。还可以拿来主义，在网上看到什么好的主页，用另存为功能保存为.html格式的文件，细细研究人家是如何做的。还可以借用网页模版来搞，我的就是~~~~~~

三、将你制作好的安放在网上

要在网上安你自己的家，你必须先申请一个主页空间，即向某一个主机申请一快硬盘空间。现在有较多的主机提供免费主页空间，具体见实用链接栏目。这些主机不仅提供免费个人主页空间，并且还提供留言簿、计数器等很有用的功能。只要到有关站点申请即可，具体方法，参考相关题目。申请完成以后用FTP将你所有的主页文件上传至主机指定的目录就可以了!

需要注意的是，一定要保持网页的相对位置，否则会看不到网页的，有很多朋友都问我:为什么我的网页传上去了可是看不到,老是出现网页错误呢?其实他们都是因为位置的问题，只要把位置改动一下就可以的了。

参考资料：http:///xhelp/

第四篇：网页制作的个人体会

以前我一直在做网页，不过是在空间上，那里提供了摸板，只需要自己在里面添舔改改就行了，对一些代码我更本就看不懂，现在好了，虽然我不是很会，但是可以看懂一些了，也能改一些代码了。通过这学期的学习，在老师的精心教导下和同学们的帮助下，以及通过自己在平时的学习和实践，对ASP动态网页知识有了初步认识。通过学习ASP动态网页，不但增加了我的知识面，还使我学会了很多以前不会使用的工具，当然这样还不够，因为我还有很多需要学习的地方，课程虽然上完了，但是在以后的时间里我一定会继续努力，争取做更多的精美的网页出来。通过这次个人网页的制作，我对计算机更深层次得到了解，也有了更浓厚的兴趣。尤其是对网页制作的过程与一些技巧手法更有了另外一番了解，对网页制作的基础知识也有了一定的掌握。通过把自己的网页上传到互联网上，对文件的保存、上传、下载以及修改等知识有了更牢靠的掌握。通过自己的努力完成了自己上传到网上的第一个作品，那种成就感是无法用语言形容的。所以我觉得这次制作网页我已经达到了自己的目的，而不是单单为了完成作业而已。这是一个完全关于自己的个人网页，既然是介绍自己，就应该让观者在浏览了之后了解自己其人，我觉得这点我已经基本上做到了

通过网页的学习还让我明白了做网页时页面不一定要很复杂，但留白的地方不能很多，这样看起来就不会觉得呆板，反面显得有层次，比较高档，而且百看不厌。网页的特点就是要有一副漂亮的背景图，整个页面看起来就比较舒服。网页的文字要排得整齐紧凑，这样才能给人一种舒服的感觉。在网页适当的地方可以加一些图片，每张画面再加一些不同的文字说明和加一些不同的文字效果，再加一些小动画，这样网页会显得更加的精美。

我的网业制作不是学得很精，细节上处理的不是很好。但是对于网业来说一般：个人主页的选材要小而精。如果你想制作一个自己认为能容大千世界的网业.而把那些精彩的照片放上去的话，那么会引得人的一些不好的看法，还有给人一种很没有主题的感觉让人不一目了然，在第一次视觉上就觉得模糊，很没有特色，主题不鲜明，虽然大千无所不有，但是却样样都不突出，那样会影响我们做网业的效果，一个好的网业当然是要有个好的题材，制作方面也需要非常的细心，自己喜爱的东西可以放上去只是要知道一个适度，制作好一个网业还要经常更新.制作网业这方面也要靠熟能生巧,多做多得 ,也要经常向老师请教,经常去浏览别人的网业,作为借鉴,学习别人的长处,我们都是爱学习的人,这些应该早就懂了,这次做的网页虽不是很好看，可是我花了很多时间来按成它，所以呢它对我以后做网页有很大的帮助。在此次做网页的过程中也让我学到了很多东西，所以呢从我内心来说我是很满意我的这次经历。在制作过程中我不仅学到了书上没有的东西，也培养了我独立思考问题的能力。

谁都知道成功是喜悦的，自己第一次成功了，就会想着更加的努力，向更远的方向发展。每个人都是这样的.....

这次制作还有很多不足的地方,但是我相信我下次会更成功的…。

第五篇：网页制作论文--个人网站设计

网页制作课程论文

(个人网站设计论文)

姓名：薛金鸽 学号：105031040025 班级：103212 专业：市场营销(电子商务方向) 学期：2011-2012学年第2学期 任课教师：刘新飞

个人网站策划书

1.组织机构描述

1.1个人网站的应用背景

网络发展到今天，建立网站已经成为一个很普遍的问题了， 对于个人来说，建设好时间的个性化网站可以更加方便的收集信息，开展更加直接的网络交流，使用自己构筑的友善平台，我们可以为自己毕业后找工作做好充分的准备，通过自己建设的网站，用人单位可以更好的去了解你，从而给自己增加了一份很重的砝码。在我的这个个人网站的制作过程中，我选择了我比较熟悉的大学生活中的许多内容做为我的网站的重要组成部分，这样相对于其他包括种类齐全的网站，我就有了一定的材料基础。这是我这个网站选择大学生主题的原因之一。

其次，做为在校大学生，我知道大学生现在对什么事物，内容，活动等等感兴趣，所以，我做起来的时候相对来说是比较随手的，我不用像其他的网站那样去刻意的收集信息，资料，我只要在校园里稍微留意，我就会捕捉到大学生的兴趣点。所以，在整个网站的设计过程中，我广泛的听取同学的意见和建议，不断的改进和提高我的网站的内容和质量，这些都取得了比较好的效果。

在整个网站的设计过程中，我根据自己以往的设计经验和自己找来的资料，又经过老师的指点，经过了近一个月的努力，几经易稿，最终做成了我的这个个人主页。

1 .2 个人网站建设的目的

在我们的工作、日常生活中，能够拥有一个自己的网站，一个已经成为不少人的希望和骄傲。一个网站项目的确立是建立在各种各样的需求上面的，这是个人网站，所以这种需求往往来自于个人的实际需求，其中每个人的实际需求占了绝大部分[6]。因此如何更好地的了解、分析、明确需求，并且能够准确、清晰以文档的形式表达出来，保证开发过程按照个人需求为目的正确项目开发方向进行。 不同的网站目的要求通过不同的方式来实现。一个展示个人能力的网站与一个以花卉种植为主题的网站，以及一个大型门户网站和一个小型企业网站，其出发点和建站目的都有所不同，在整个网站的建设规划方面的要求也是肯定是大不一样的。因此在规划我的这个网站时，我选择了和大学生的生活和学习相关联的主题。

1.3 相关应用软件选用、技术采用

在网页的设计过程中，我选用的软件包括Dreamweavercs

5、Fireworks cs5和Photoshopcs5，其中，Dreamweaver 是网页编辑软件，Fireworks cs5是图形/图像处理软件，photoshopcs5是图片处理软件。它们是Macromedia公司专门为网页设计、制作开发的系列软件套件，三者之间可以无缝集成，能够有效地解决网络带宽问题，是设计动画网页的最佳工具。

Dreamweaver cs5采用“所见即所得”的直观设计模式，充分尊重设计人员的原始意识和想象力。她成功地将网页设计功能中的技术实现部分和设计部分分离开来，使用户只需专注于设计，而其余的工作由Dreamweavercs5自动完成。另外，还有一点值得说明的是，Dreamweaver cs5可以控制和删除冗余代码，减小网页文件的大小。从而能够快速上传和下载。

Fireworkscs4的独特之处在于它能够优化、切分图片映射图，并提供了功能强大的翻滚图工具。它是基于WEB应用的图形/图象处理软件，提供了一种革命性的新方法来创建WEB图形，并且具有所有其他图形处理工具的诸多优点。Fireworks cs4的最大优势就在于它在任何时候可以从任何阶段开始设计工作，这样既可以节约时间又可以对产品进行扩展。另外，Fireworks cs4中的诸多功能都是面向WEB应用的，因此对于WEB设计新手来说也很容易学习的。

在我设计我的个人网站的过程中，我选择了Dreamwearcs5和 Photoshopcs5 Fireworks cs4三种软件。因为自己向对于其它的软件来说，这三个还算是比较熟悉的。

2.网站的技术参数部分

2.1我的导航系统

我所制作的个人网站的导航系统包括：

1.个人简介2.个人专题4.我的相册5.网站说明6.给我留言 8.发送邮件9.链接百度10.女生花园

2.2功能模块的划分

1.搜索引擎：

根据浏览者的要求，使用主页上的搜索引擎链接到百度，在整个Internet上进行搜索，完成信息的优化与提取。

2.论坛：

主要功能是网友和网站之间的交流平台，也是网友给版主提出意见的主要渠道。在论坛中用户可以发表意见，这些意见可以让所有人看到，也可以只让版主看到，版主和其他人可以针对留言的内容进行回复，只留给版主的留言只有版主能够回复，并且版主可以登录后台对留言进行管理，是否发表或删除。

3.发送电子邮件：

网友可以通过“联系我”利用outlook 向版主或其他人发送电子邮件。 4.精品收藏：

在其中展示我喜爱的东西，包括电影、歌曲和一些优美的文章。奇文共欣赏，疑义相与析。我只想起到抛砖引玉的作用，让大家从中认识我和了解我，让一些美好的东西我们大家共同来欣赏。但我增加了管理权限，我以管理员的身份可以对加入的新内容进行管理，即允许加入和对其进行删除。

5.留言板：

是一个我与大家谈心交流的地方，在留言板中，我们可以畅所欲言，和大家进行交流。就我们感兴趣的话题展开讨论。和大家进行沟通。

2.3 首页的设计 我的网站首页主要采用简单大方的设计方法，用的是色调一致的一组图片做的LOGO和相关的背景图片，主要页面布局如下：

2.4主要栏目的介绍

1.个人简介：

介绍版主的一些基本信息，希望各位访客能够认识版主。 2.我的论坛：

此版块又分为主页、发表意见、回复意见、显示论坛内容、版主后台管理以及版主的回复界面。其中发表意见界面是所有访客都可以在论坛里面发表自己的意见，这些意见可以是发表给所有的访客，也可以是只发表给版主，如果只发表给版主，只有版主可以看到和回复;回复意见是所有访客针对自己感兴趣的话题进行回复;这些发表的意见和回复可以在显示论坛内容的界面都显示出来，供大家讨论;那些只有版主才能看到的信息在版主的管理界面，这个界面需要登录，设有用户名和密码，在这里版主可以对所有评论进行发表或删除的管理。 3.个人专题：

这里收录了我平时搜集的一些文章和音乐，各位访客可以根据自己的喜好进行阅览。 4.我的相册：

在这个板块可以看到我的照片，班级照片和搜集的校园照片，如果大家喜欢可以收藏。更改照片的时候只要更新数据库就可以了。 5.网站说明：

里面是我对整个网站的介绍，不太清楚网站构架的访客可以先到这里。 6.给我留言：

这是每位访客针对我的网站情况给我留言，这些留言会直接保存到数据库里面，并且能够轻松的读取。 7.发送邮件：

各位访客可以通过outlook向版主或者其他人发送电子邮件。 8.链接百度：

如果访客想在互联网上查找东西，可以直接点击这里。 9.女生花园：

收集了一些女生喜欢的东西，如果你是女生，可以进来看看。

2.5二级页面的设计

我的网站主页内容简单所以主要内容再二级页面里要有详细的说明，具体说明如下：

2.5.1个人简介

本模块是个人简介部分，每个个人网站都会有作者介绍。在这个模块访客会了解到作者的一些基本信息.

2.5.2文学欣赏

这个版块主要介绍我自己喜欢的相关文学作品。此版块的界面如图所示：

图3.6 文学欣赏界面

2.5.3快乐音乐

进入此版块，界面如图所示：

通过在数据库中存放音乐路径，达到在网页上播放的效果。在音乐的首页上放置了歌曲的名字，网友无需登录，即可收听自己喜欢的歌曲。

音乐界面

2.5.4我的相册版块

个人网站中又一亮点就是个人相册的设置，在我的相册里，放置了我自己的照片、班级照片和校园照片。

相册里面的这三个版块具有相同的版面设计，如下图所示：

相册界面

2.5.5网站说明版块

此版块是我根据自己的网站结构对整个网站以及每个版块所做的网站结构和功能的说明，以及网站和作者版权说明。如下图所示：

网站说明界面

如果网友不清楚网站的构架，可以查看此版块。 2.5.6给我留言版块

留言板是目前最为流行的网络应用之一，使用留言板，可以为留言者提供发言的机会，让他们能够及时、准确地交换自己的观点。

2.5.7留言板主界面

完整的留言板具有发表留言和察看别人留言的功能，如图所示的留言板主界面index1.ASP，可由此进入留言界面和察看留言界面。

留言主界面

在主界面中存有全部留言的作者和主题，点击你想察看的主题就会进入察看留言界面，点击 “发表帖子”进入留言界面。

3.网站的维护方案

3.1域名的申请

域名(Domain Name)，是由一串用点分隔的名字组成的,Internet上提供用户访问某网站或网页的路径，用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

域名申请的含义

“域名申请”：为保证每个网站的域名或访问地址是独一无二的，需要向统一管理域名的机构或组织注册或备档的一种行为。也就是说，为了保证网络安全和有序性，网站建立后为其绑定一个全球独一无二的域名或访问地址，必须向全球统一管理域名的机构或组织去注册或者备档方可使用的一种行为。 由于域名是网站必不可少的“门牌号”，域名可用于：网站地址访问、电子邮箱、品牌保护等用途，所以很多企业或个人均会进行域名申请。

3.2空间或者主机的租用

有了自己的域名这个门牌号后，就需要一个空间来存放自己的网站，也就是虚拟主机。一般虚拟主机提供商都向用户提供100MB、500MB、3GB等虚拟主机空间。我的个人网站选择100-300MB的虚拟主机空间。购买虚拟主机主要考虑几个方面：售后服务、稳定性、访问速度等。首先我选择在万网上注册一个域名然后申请租用空间建立个人网站。

3.3网站链接稳定性测试

超级链接对于网站用户而言意味着能不能流畅的使用整个网站提供的服务，因而链接将作为一个独立的项目进行测试。网站能够正确运行首先要保证链接能够连贯运行。

网站的运行中整个系统是否运行正常，我主要采用将测试网站长时间运转进行测试，派生出执行程序所有功能需求的输入条件，从而导出测试用例，进行测试，网站中的每个版块的每个页面都出现了很多的链接，所以每个版块要先进行单独测试，单独测试完成后，根据个版块之间的连接结构再进行总体测试，从而达到网站的整体的运营能够顺利地进行。在测试这个环节时，没有特定的测试方法，就要做到细心，做到网站的顺利运行。

总结：

通过这次个人网站设计的制作，我学会了很多东西，也了解了很多关于个人网站的资料。不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。在整个的学习过程中，我学习了Dreamwave、Firework、Html语言、网站建设的基本思想等重要内容。到现在为止，我还是很庆幸能够学到这么多的内容。

虽然整个网页的结构还有很多不足，还有一些板块没有开通，但是我的确能够感到在我们制作过程中技能的提高。整个网站的不足我想是没有使用到一些动态网页的知识，使得日后网站的维护较为繁杂。希望以后可以自学动态网站的课程，从而弥补自己在动态网络语言方面的不足。这样以后可以利用业余的时间为自己或者公司，根据自己的爱好建立一个个人网站。

[参考文献] [1] 袁晓红. 《网页设计与制作》[M] .高等教育出版社 2006 385页~389页 [2] 甘登岱. 《我也能掌握Flash编程》[M]. 航空工业出版社 2000 [3] 赵更生.《Flash动画制作培训实录》[M]. 人民邮电出版社 2004 [4] 鲍嘉.卢坚.陈丁法《Dreamweaver CS5网页设计从入门到精髓》[M].中国电力出版社2010 [5] 张成龙.《网页制作一点通》.延边人民出版社

[6] 刘瑞新，《ASP动态网站开发、毕业设计指导及实例》[M]. 机械工业出版社 2000 [7] 石晓燕、苏萍《网页设计基础》[M]. 清华大学、交通出版社 20 04 [8] 王玉芬.《网站规划与设计》[M]. 西北工业出版社 2003 [9] 谢希仁. 计算机网络(第5版) [M]. 北京：电子工业出版社,2008