仙后家族网站的设计理念及制作流程.doc

仙后家族网站的设计理念及制作流程通过一个多月对Dreamwaver和Photoshop的学习，我已经对制作网站以及其本的图片修饰有了一些了解。在自己学习的基础上，我利用所学的软件知识制作了一个属于自己风格的个人网站，这既是对自己学习的检测，也是能更加熟悉软件的最好途径。 这次我的个人网站的主题是“仙后家族”，这就意味着我的网站的风格就是充满时尚气息的。因此我利用了许多的图片和一些特效图片文字来修饰整个网站的页面。当然了在网站的制作过程中必须注意到整个网站的风格与色调一致，网页中注重颜色的搭配，在布局上注意到了与文字的协调性以及网页中的一些图文特效。我利用的色调是清淡但又不失时尚，主要是在图片的特效上做了一些的修改。利用图文并茂的方法来制作每张网页的构造。 下面是我的个人网站的制作理念和制作流程：一、 制作理念根据各类网站的格式布局首先下载了相关的网页图片素材和网页结构素材。以及一些视频和歌曲的收集。这些都是制作网站最基础的条件。 （一）、首先是网站的结构图 （二）、在结构图的基础上进行每个网页的结构布局（三）、在制作首页时考虑到子页面的布局风格要与其一致（四）、制作中注意每张网页的保存与预览情况。所有素材全部放在当前文件夹中的images中，所有图片保存为JPG和PSD格式。二、制作流程（一）、首页的制作（欢迎进入仙后家族） 步骤：1、打开Photoshop软件和Dreamwaver软件。在中新建1024*768的空白文件，在素材中挑选出合适的图片来做为主页面，并作需要的修饰。2 选好图片后将该图片一到刚才的新建图层的背景（二副本中，在Photoshop中对其做特效。为了页面的整体立体效果考虑，首先要进如该图层，到新建调整图层，调整亮度、对比度：两度100，对比度-87。把亮度对比度这一层隐藏，用选择工具中的色彩范围选取范围，再用魔棒选择边上的范围，最后CTRL+C,CTRL+V粘贴到新的图层上。3 对图片进行修饰：到添加图层样式中，调整投影不透明度75%，角度54度，距离21，像素扩展12%，大小4像素。4 对修饰过的图片进行剪切，这一步很重要：这样在Dreamwaver中就可以对剪切过的图片进行特效处理，使整个网页更有吸引力。将剪切好的图片进行保存。 5 对鼠标移动制作效果变色：首先在Photoshop中对要改色的图片进行色相/饱和度的修改，使之与原图有明显的改变，保存为HTML格式。让后到Dreamwaver中 将需要的地方选中剪切掉，到插入图像，鼠标经过图像，选择对应的图片确定。6 制作鼠标经过出现图片的效果：利用行为面板的使用，选择热区，插入，层，选择图片，选中热区按钮，到窗口，行为，ONMOUSEOVER，选择增加，显示隐藏层确定，再做相同的步骤对ONMOUSEOUT进行设置，可产生效果，为网页增添动态效果。7 在首页中插入对应的文字（二）、子页的制作 步骤：1在PHOTOSHOP中选择好图片插入小子页的条幅按钮，对其做好相应的文字效果，插入返回主页的按钮，对整张图片进行剪切，保存。 2 在DREAMWAVER中插入子页图，制作鼠标经过变色的效果，过程如上 3 在网页中插入音频效果：到插入，布局，层，插入媒体插件，选择音频。 4到Dreamwaver中对该图片进行制作，利用热区对按钮进行链接到子页中。 5 最后按CTRL+S,F12保存预览 （三）、小子页1的制作（神奇介绍）步骤：1在Photoshop中选择图片，对其进行色相、饱和度的修改。 2 新建层，插入文字，对其进行文字效果的制作。 3 在新建图层，插入文字和返回按钮 4 对图片进行剪切，保存为HTML格式。 5 到dreamwaver中制作鼠标移动出现图片的效果。过程和上面的相同。 6到Dreamwaver中对该图片进行制作，利用热区对按钮进行链接到子页中。（四）、小子页3的制作（神奇私密） 步骤：1 在Photoshop中新建图层，插入图片和文字 2 插入返回的按钮 3 到Dreamwaver中对该图片进行制作，利用热区对按钮进行链接到子页中。（五）小子页4的制作（记忆永恒） 步骤：1 在Photoshop中新建图层，插入图片和文字 2 插入返回的按钮 3 到Dreamwaver中对该图片进行制作，利用热区对按钮进行链接到子页中。（六）小子页3.1的制作（西亚俊秀） 步骤：1在Photoshop中新建图层，插入图片和文字 2 对图片进行蒙版的制作 3 插入返回的按钮 4 对相应的图片调整色相、饱和度以及图片效果投影的制作，具体过程和上面的相同。 5 到Dreamwaver中对该图片进行制作，利用热区对按钮进行链接到小子页3 中。6最后按CTRL