我的个人网页布局采用的是“三”字型的设计，就是最上方是体现个人网站风格图片和导航图片，中间是各个网页的主题的主打内容，最下方是网站的结尾宣示版权所有及邮箱联系方式等。总体布局来看比较整齐简洁和美观。
2．导航栏能让我们在浏览时会很容易的到达不同的网页，是网页元素中非常重要的部分，所以导航栏一定要清晰醒目，一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于435px，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏。
我的导航栏基于以上想法制作的是横向的导航栏，借用PS软件制作出类似毛笔笔画的导航，贴切与网页的整体风格。保证了网站统一的中国水墨风格。
3.3网站画面风格的设计及素材处理 3.3.1网页画面风格设计
首先要明确网站的目标，网站要有明确的主题，体现自己的风格，，特别是对于个人网站，不可能像大型网站那样做得内容全面，所以必须要找准一个自己感兴趣内容，做深、做透，办出自己的特色，这样才能给浏览者留下深刻的印象。 至于网站的内容则没有限制自己喜欢什么就弄什么，但是要主题鲜明，切合自己网站的名字。
一个网站设计得是否成功，很大程度上决定于设计前的规划。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。
网站的整体色调以黑白色为主，然后点缀其他不同的图片进行搭配，突出主题，颜色没有过多，过杂，以免给人一种杂乱的感觉。版面设计十分灵活，根据各部分的内容决定字体风格，相同的风格多次调用的是用CSS设定的样式，以保证随时，准确的调用。 网站中共分为10个页面，包括了开场的flash动画，和留言板等页面，页面的风格统一是中国水墨风格，每页分三部分，最上方是风格图片和导航图片，中间是个网页的主题内容，最下方是网站的结尾宣示版权所有及邮箱联系方式等。总体布局来看比较整齐简洁和美观。
3.3.2网页素材处理技术
1．网页的排版与制作使用的是Adobe Dreamweaver cs3，是一款在网页设计与制作中比较简单好用的软件.
2．用Photoshop制作和处理网页中相关的图片。 例如：
26
我的logo用的是ps软件中的图层蒙版工具，把风格相同的图片叠加在一起使用图层蒙版，运用画笔工具是最下图层突显出来，最后剪切完成。如图3-1、图3-2所示。
我的banner制作是用ps软件制作而成，因为要贴切去网站的整体风格我选用的是字体是汉仪粗篆繁字体和经典行书简字体。效果如图3-3所示：
图3-3
我的导航栏是用ps软件中的画笔工具和文字工具制作而成的，通过修改画笔的各项数值，使画笔画出的感觉如同毛笔的感觉，在其上用文字工具打上导航文字。每个导航各制作了两种不同颜色，在网页效果中使用了鼠标经过图片，效果如图3-4所示：
图3-4
3．用flash软件制作了网页中的动画。（网页中的开场动画效果为例）如图3-5所示：
3.3.3网站栏目介绍及功能简介
本网站前台包括首页、日记、心情、照片、留言板等栏目，下面是对个栏目的简介： 1.首页：开始是一个自制的flash欢迎动画，采用自动跳转动作，自动跳转到包含个人资料、日记等栏目的页面。
2.日记：主要是作者的平时转载的日记，及各种相关的知识存储。
3.心情：主要是作者平时的个人心情介绍。只有主人能够通过密码登录修改心情。游人没有权限去修改。
4.照片：是作者相关的图像资料。有人不需要登录即可浏览观看。
5.留言板：此栏目设立的主要目的是为了能够和大家进行交流。浏览者不需要登录即可留言。
6.档案：简单的罗列了主人个人资料的相关介绍。 7.音乐：是作者喜欢以及收藏的音乐,可以供游人下载。
8.个人作品：是作者以前做过的flash、photograph作品的展示。 9.后台管理：只有主人有权限去修改、添加、删除信息。
27
四、 网站的详细设计与制作
4.1站点
4.1.1创建和设计站点
1、启用Dreamweaver CS3，点击Dreamweaver 站点管理，建立一个站点。如图4-1、4-2所示：
28
图4-1
29
图4-2
2、在“站点定义”对话框的“高级”选项卡的“分类”栏中选择“本地信息”，设置站点名称，将“本地根文件夹”设置为“E：\\shixun\\”，本地信息设置结果如图4-3所示：
图4-3
3、选择“测试服务器”,将服务器类模型设置为ASP JavaScript，如图4-4所示：
图4-4
4、设置完毕，单击“确认”按钮返回到编辑站点对话框。
30