图（3-2）：Adobe Flash CS5的主界面
3.3 Adobe Photoshop介绍
PS除了是Postscript（备注的意思）的缩写外，也是Photoshop 的缩写，并且以此为世人广泛使用。Adobe Photoshop是世界公认的最好的图像处理软件，它是Adobe公司所开发的图形处理系列软件之一，主要应用于在图像处理、广告设计的一个软件。
Photoshop有十分强大的图像处理功能，例如图像编辑、图像合成、校色调色及特效制作等等。图像编辑是图像处理的基础，可以对图像做各种处理如修补、修饰、放大、缩小、镜像、旋转、倾斜、透视等等。图像合成则也就对图像去背景、抠图、蒙版、通道、透明、半透明、局部透明等等各种方法将几张图像合成一张自己所需求的图像。校色和调色是该软件十分强大的功能之一，可以方便快捷地对图像的颜色进行各种变换，例如明暗、色偏的调整和校正。特效制作是Photoshop最让人痴迷的功能，主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，例如可以让万里无云的天空瞬间下去倾盆大雨、闪电雷鸣，再例如可以制作陈3D效果和各种变形的字体特效。
Photoshop主要用于处理位图。所谓位图，就是图像由许多像小方块一样的\像素\组成的，它在放大的操作下，图像质量会有损失，与Flash所制作的矢量图像相反。
11
Adobe Photoshop十分强大的图像处理功能、与Dreamweaver的兼容，还有它的切片功能，这些都注定Photoshop在网页图像处理方面能够大放异彩。
在Adobe Flash CS5的工作界面中，包括标题栏、属性栏、菜单栏、图像编辑窗口、状态栏、工具箱和控制面板等组成部分，如图（3-3）所示：
图（3-3）：Adobe Photoshop CS5的工作界面
12
4 主体设计
在网页设计过程中，一般是先由美工人员利用Adobe Photoshop进行网页页面效果的处理与制作，包括网页中各种图像的制作，例如网站Logo、Banner、背景图像和页面所需要图像处理等等。由动画制作人员利用Adobe Flash或者Adobe Photoshop进行Flash动画或者GIF动画的制作。当美工人员将网页页面效果图制作完成后，使用Photoshop将图像进行切片并输山，此时网页设计人员就可以利用切片输出的图像，以及页面效果图的布局等，使用Dreamweaver对网页进行制作，此时完成的页面还是属于静态网页。如果有设计成动态网页的需求，则让程序人员编写相应的应用程序，这些应用程序使浏览器与数据库可以发生交互。
由于本文的特殊需求，Photoshop的图像处理与Flash的动画制作过程都在现实中完成，只在此对已经准备好的资源加以运用，而动态网页设计方面也不在论文中详述。 4.1准备工作
网页设计的前期准备工作是不容忽视的，在创建站点前先要规划好站点，例如网站的名字、风格和结构，并收集或者设计好相关的素材、资料，这样才会高效率地完成网页设计。
不管是企业网站，还是个人网站，网站设计的第一件事就是给网站命名。一般情况下，企业网站直接以企业名字作为网站名，个人网站就可以依照自己的爱好来命名。本次设计的网站是一个个性化的个人网站，名字可以个性、活泼一些，网站就命名为“黄者风范”。
第二件事就是确定网站的风格。就犹如命名一样，对于企业网站而言，通常是根据公司的性质以及标志来确定其风格，而个人网站就任意而为。本次制作的个人网站因为个人的喜好，选用了代表生命、青春、和平、宁静、自然、环保、成长、生机、希望的绿色作为主色调，又加以紫色作为点缀，不仅突出了重点，又能产生强烈的视觉效果。
第三件事就是为网站划分栏目和确定结构。只有事先将网站的栏目规划好和结构确定好，才能在后面的制作中做到有章可循。本次设计，我将该网站划分为7个栏目：首页、日记、推荐大全、轻松一刻、留言、登录和注册。其中，日记主要记载我的日常生活，推荐大全主要是分为电影推荐、电视剧推荐、音乐推荐、小说推荐和旅游推荐等5个部分，轻松一刻主要是分享一些幽默笑话，留言主要是为了与浏览者互动。依照这些
13
栏目，我画出了“黄者风范”的网站结构图，如图（4-1）所示：
图（4-1）：网站结构图
4.2定义站点
在正式设计网页之前，最好先定义一个站点，并将建站需要的图像以及其它资源放置在站点文件夹中，这是为了能够更好地利用站点窗口对站点文件进行管理。现在市场的大部分软件都是不能够用中文进行编程的，而Dreamweaver也不例外，所以在对各种文件、资源命名时，要用英文或者拼音来命名。接下来就说明定义站点的步骤：
1、首先在本地磁盘创建一个以 “personal”命名的文件夹，并在该文件夹下创建一个新文件夹，以“images”命名，以存放站点中的各种图像文件。
2、在Dreamweaver 菜单栏中，选择“站点”>“新建站点”菜单，在打开的“未命名站点1的站点定义为”对话框中选择“高级”选项卡。
3、在“站点名称”文本框中输入“personal”，单击“本地根文件夹”文本框后的文件夹图标，在打开的对话框中选择前面创建的文件夹“personal”，然后采用同样的方法，设置“默认图像文件夹”为“images”。
4、单击“确定”按钮，可以看到在Dreamweaver左下角的 “文件”面板中显示了刚才定义的站点。
到此，站点定义就算是完成了。 4.3制作首页
为了便于制作，我将网站首页的制作细分为定义CSS样式、制作首页上部、制作首页中部以及制作首页下部等4部分。
14
4.3.1定义CSS样式
在实际的网页设计中，一般都是先定义“bodv”标签样式，然后再设计网站内容，最后定义其它的样式，但是这里我就一次性全部定义先。所谓CSS是指Cascading Style Sheets（层叠样式表单）的简称，更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。以下是对CSS样式定义的步骤：
1、在“文件”面板中的空白处新建一个网页文档，命名为“index.html”。 2、在文档编辑窗口中打开刚刚创建的“index.html”文档，然后点击“属性”面板中的“页面属性”按钮，随着打开“页面属性”的对话框，在“分类”列表中选择“标题，编码”，设置标题为“黄者风范网站主页”，编码为“Unicode(UTF-8)”，然后点击“确定”按钮。
3、打开“CSS样式”面板，点击“新建css规则”按钮，打开“新建CSS规则”对话框。在随着打开的“选择器类型”对话框中，选择“标签”，在“标签”的下拉列表中选择“bodv”，在“规则定义”列表区选择“新建样式表文件”，然后点击“确定”按钮。随着打开“保存样式表文件为”的对话框，在“保存在”下拉列表中选择网站的根文件夹“personal”，在“文件名”文本框中输入“c1”，然后点击“保存”按钮，保存完毕。
4、打开“body的CSS规则定义”对话框，设置“大小”为“10像素”，“行高”为“22像素”。在“分类”列表中选择“方框”，然后在右侧的“边界”区域“上”编辑框中输入“0”，由于“全部相同”的选项已经打钩，所以下方的所有值都将变为“0”，最后点击“确定”按钮，完成了对“bodv”的标签样式定义。
5、再次打开“新建CSS规则”对话框，在“选择器类型”区选择“类”，在“名称”的编辑框中输入“line”，在“规则定义”列表区选择“c1.css”，然后单击“确定”按钮。随着打开了“.1ine的CSS规则定义”的对话框，在“分类”列表中选择“边框”，点击已经打钩的“全部相同”复选框，取消了选择样式、宽度和颜色列表区的同值化，之后，“下”在样式区的下拉列表中选择“虚线”，“下”在宽度区的编辑框中输入“1”，“下”在颜色区的编辑框中设置颜色为蓝色“#O9F”，单击“确定”按钮，完成对“line”类样式的定义。
6、再次打开“新建css规则”对话框。在“选择器类型”区中选择“类”，在“名称”编辑框中输入“list”，在“规则定义”列表区中选择“cl.css”，然后点击“确定”
15