《企业网站的设计与制作.doc》由会员分享，可在线阅读，更多相关《企业网站的设计与制作.doc（8页珍藏版）》请在三一文库上搜索。
1、第四部分 精美网页设计实战篇书到第 11 章，很多读者一看，觉得只是一些小例子的制作，而并没有涉及到整个网页 的制作。 实际上，第一部分的色彩设计与风格创意运用了大量的网页实例来说明各种色彩及 配色对网页的风格创意的影响以及对浏览者的视觉影响； 而第二部分的网页元素设计篇则侧 重于对网页至关重要的元素的设计， 让读者在这些简单易学的实例中去体会前几章节的理论 知识， 同时也培养读者对色彩的感觉， 通过这一部分， 很多读者应该找到一些设计的感觉了 吧；第三部分的网页布局美化篇主要是让读者对 Dreamweaver 软件操作有所熟悉，能够独 立实现一些网页制作的简单操作； 到了第四部分， 也就是本
2、书最精彩的部分了， 在这一部分 中，作者将会讲解 2 个完整的网页设计制作的实例。 所谓更多的知识还来自于自我实践和对 他人作品的鉴赏与总结，相信读者们在自己亲自尝试、实践后能取得进步。第 11 章 企业网站的设计与制作这一章介绍的是中小型企业的网站实例制作过程。对于中小型企业，信息量不会太多， 但又不能像个人主页那么天马行空，往往会显得平凡却又不失特色，如图 11-1-1 所示就是 作者制作的放飞思维创意设计公司网站的首页。图 11-1- 1 放飞思维创意设计公司网站的首页11.1 创建背景背景对于这个网页来说太重要了， 三种色彩的搭配使网页典雅而不失活泼， 而每种色彩 所占的页面比例也不能
3、忽视，这关系到整个网页的平衡哟。1. 打开Photoshop,按【Ctrl+N】，新建一个宽“800px”高600px”的文件，将它命名为“放 飞思维创意设计公司” 。2. 在【背景】图层上填充草绿色(R204, G204，B102)；新建图层，将其命名为“蓝色”， 在页面左边创建“ 50pxX600px”的矩形选区，填充蓝色(R0, G51, B102);再次新建图层，将其命名为“米色”，在蓝色背景右侧创建“ 560px X600px”的矩形选区，填充米色(R255, G255, B204),如图 11-1-2 所示。图 11-1- 23. 双击【米色】图层的缩览图，调出【图层样式】对话框，
4、勾选【外发光】复选框， 做如图 11-1-3所示的设置，页面效果如图 11-1-4所示。 图 11-1- 3 【外发光】设置图 11-1- 4至此，背景就创建完毕了，下面我们就要开始制作导航了。11.2 制作导航除了用 Flash 制作的绚丽的导航条以外， 现在的静态网页越来越倾向于简介的导航条了， 甚至有些网站直接用代码实现在单色背景上写栏目文字， 而放弃用图片来装饰， 这样做的好 处是网页下载速度快， 并且在栏目文字有改动时， 能够方便及时改写。 这个网页的栏目文字 同样是在 Dreamweaver 里添加的，但是栏目的背景却是图片。1. 新建图层，命名为“白色虚线”，制作如图 11-2-
5、1 所示的虚线，制作虚线的具体操作步骤已经在前面的章节中叙述过了，这里的点划线高“2px、宽2px、间隔2px”把【白色虚线】图层调整到【米色】图层的下面，使其被外发光遮盖。图 11-2- 1 制作白色虚线2. 给【白色虚线】图层添加矢量蒙版，将前景色和背景色设置成白色和黑色，用【渐变工具】在矢量蒙版上由左到右拉出渐变，效果如图 11-2-2 所示。图 11-2- 2 添加矢量蒙版3. 新建【小三角符号】图层，制作栏目文字前的暗红色（R153, G51，B0）小三角符号，放大后如图 11-2-3所示。图 11-2- 3 制作小三角符号 接下去是最重要的，就是代表公司形象的 Logo 了。11.
6、3 设计 Logo这里的 Logo 并非为这个网页特别制作的，只是作者为了方便，在因特网上找的素材。 读者在独立设计企业网站时要切忌盗用已有的 Logo 设计，而要为企业量身定做一个只属于 它的 Logo 。1. 打开“放飞思维Logo.psd ”将【Logo】图层复制过来，并移动到合适的位置上，如图11-3-1 所示。图 11-3- 1 添加 Logo2. 用暗红色（R153，G51，B0）的方正粗倩简体在 Logo左边写上企业名称，其中可以逐个调整字体大小和行间距，使其如图 11-3-2所示。图 11-3- 2 添加企业名称3. 新建【蓝色虚线】图层，按照之前制作白色虚线的方法制作蓝色虚线
7、，这里不用添加矢量蒙版。然后用黑体在虚线下面写上企业标语，如图 11-3-3 所示。图 11-3- 3 添加蓝色虚线和企业标语首页已经基本上完成了， 可以看出这个网页的标准色吧， 那么信息文字、 链接样式以及 内页的设计都要围绕着标准色进行， 这样设计出来的网页才不会给人混乱的感觉。 那么下面 我们就要在 Dreamweaver 8 中对网页进行布局和美化， 添加了栏目文字和版权信息以后这个 首页就完整了。11.4 创建网页下面要做的事情就是在 Dreamweaver 8 里用表格以及 CSS 样式来布局和美化网页，使 其成为真正的“网页” 。有很多读者可以会感到疑惑，之前不是说先要进行切图，
8、才能导入 到 Dreamweaver 里进行编辑吗？也不尽然，对于初学者来说，那样按部就班固然不错，但 其实那样生成的网页不太规范， 会自动产生一些不必要的代码， 往往在编辑时都不知道到底 是哪里出了错。 另外，因为这个网页的图片很少， 基本上都是纯色填充，所以我们直接用表 格嵌套就可以完成，大家拭目以待吧。1. 打开 Dreamweaver 8 ，选择【文件】 |【新建】，在【新建文档】对话框中【类型】选择“基本页，”然后在【基本页】选项中选择“ HTML ”，单击【创建】按钮创建一个空白的网页，并把它保存为“ home.html ，” 放在“放飞思维创意设计公司”文件夹中。2. 单击【属性
9、】面板中的【页面属性】按钮，在弹出的对话框中做如图 11-4-1 所示的设置，这样设置是为了网页在浏览器中显示时四周没有默认的空白。图 11-4- 1 【页面属性】对话框设置3. 切换到代码视图，在 <body> 标签中插入代码使其变为： <body bgcolor="#CCCC66"style="width:100%"> 。这样做是为了当浏览者的显示器分辨率设置成比“800000”高时，除了网页的800px X600px”的空间，浏览器的剩余空间不会因为出现空白而显得难看。4. 插入表格。根据网页的结构在【表格】对话框中做如图
10、11-4-2 所示的设置。图 11-4- 2 插入放网页的表格5. 在【属性】面板中将表格的高度设置为“ 600px:第1列宽度设置为“ 50px:第2列宽度设置为“560px:那么剩下的第3列宽度就默认为“ 190px”了。，将6. 回到 Photoshop 软件中，选中除了字体图层以外的图层，选择【矩形选框工具】 其【样式】改为“固定大小”，【宽度】为“50像素”，【高度】为“10 像素”，在图像上单击，然后 将出现的矩形选区移动到图像的最左边，其使恰好选中的是蓝色背景中的一部分。按 Ctrl+Shift+C 复制选区内的可见图层，然后按 Ctrl+N 新建文件，按 Ctrl+V 粘贴，新
11、的图像 如图 11-4-3 所示。如果复制的时候只按 Ctrl+C 就不会把阴影部分也复制过来了。图 11-4- 3 复制部分蓝色背景7. 在“放飞思维创意设计公司”文件夹中新建一个文件夹，命名为“images”， 将刚才复制的图像保存在其中，文件名为“ bluebg.jpg ”。8. 用同样的方法复制米色区域右边的背景，尺寸为“190pxXIOpx:如图11-4-4所示。将其保存为"greenbg.jpg，同样放在“images”文件夹中。图 11-4- 4 复制部分绿色背景9. 再回到 Dreamweaver 软件中，使光标在表格第 1 列单元格中闪烁时，在【属性】面板的【背景】
12、选项中设置单元格背景URL为“mages/bluebg.jpg ”再用同样的方法把greenbg.jpg”添加到第3列单元格中作背景，如图11-4-5所示。图 11-4- 5 设置好单元格的背景10. 将第 2 列的背景颜色设置为“ #FFFFCC ”。11. 在【属性】面板中将第 3列单元格的垂直对齐方式改为“顶端” ，在其中插入一个 190px 宽的14行1列的表格来放置导航。 将第1行的高设置为“150px:之后的单数行设置为“ 25px” 高，用作输入栏目文字。12. 在 Photoshop 中将虚线复制到新建图像中，并保存为“dash.jpg”， 在 Dreamweaver 刚才插入
13、表格的双数行中插入“ dash.jpg，” 如图 11-4-6 所示。图 11-4- 6 插入虚线13. 在 Photoshop 中将两条虚线间宽 190px 高 25px 的区域复制到新建图像中， 并保存为navibg.jpg ，” 在 Dreamweaver 刚才的表格的 25px 高的单数行中设置单元格背景，注意，这里不像上一步那样插入图像，而是像第9步一样操作，如图 11-4-7 所示。图 11-4- 7 添加栏目文字的背景14. 输入栏目文字， 为了和小三角符号保持一定的距离， 我们在文字前输入了 5 个空格， 在 Dreamweaver 中用键盘敲入 1 个空格和 n 个空格的效果
14、是一样的，都只显示一个空格， 所以用代码实现，输入 6个 ”即可。15. 在 Photoshop 中将 Logo 和标语部分复制到新建图像中，并保存为“ logo.jpg ”，又回到 Dreamweaver ，把米色背景单元格的水平对齐方式改为“居中对齐” ，垂直对齐方式改为“顶端”， 插入宽 410px 的 3 行 1 列的表格，将 3 个单元格的水平对齐方式改为“居中对齐” ， 在上面一 行中插入"logo.jpg ”图像。16. 输入公司历程和版权信息， 为了平衡页面作者栏目文字的英文在版权信息的下面重 复了一次，这样也方便了浏览者。17. 网页的内容已经完
15、整了， 但是却不够美观， 该是 CSS 样式大显身手的时候了。 新建 CSS 规则， 与以前不同的是， 在【定义在】 选项中选择的是“（新建样式表文件） ，”如图 11-4-8 所示。单击【确定】按钮后，在弹出的【保存样式表文件为】对话框中将其命名为“ style.css”， 同样放在“放飞思维创意设计公司”文件夹中。图 11-4- 8 新建“ black ”样式18. black ”样式用于控制网页的主要信息，所以是要对【类型】分类进行设置即可，如图 11-4-9 所示。图 11-4- 9 “ black ”样式【类型】分类设置19. 选中输入公司历程的单元格，在【属性】面板中对其应用“bl
16、ack ”样式后，发现文字和上面的 logo 图像以及下面的版权信息没有间隔，这就需要我们输入一些代码控制。在这个单元格的 <td>标签中写入：style="padding-top:35px; padding-bottom:35px;"，使文字离单元 格上下边距 35px。20. 再新建gray”样式，字体颜色设置为“#666666，不设置行高，其他设置和“ black”样式相同，加上代码使其离单元格上边距35px。选中输入版权信息的单元格，在【属性】面板中设置【样式】为“ gray”就可以看到效果了。21. 整个网站一共有2种链接样式，一种是右边的栏目文字，还
17、有一种是信息中的链接,也就是页面中默认的链接。而Dreamweaver的【页面属性】中的【链接】分类只能定义一种，那么我们就用来定义默认的链接，如图11-4-10所示。图11-4- 10设置【页面属性】的【链接】分类22. 选中要添加链接的文字，在【属性】面板的【链接】选项中输入地址后按回车确认，你会发现添加了链接的文字样式自动变成刚才设置的链接样式了。23.另外1种链接样式要靠自己写代码实现了，大家可要注意哦。读者在Dreamweaver中打开Style.css”文件可以看到很多代码，除了“ black”样式和gfay”样式以外，剩下的都是作者定义的链接样式了，读者可以好好看一下。a fon
18、 t-family: Verda na, Arial, Helvetica, san s-serif;fon t-size: 11px;color: #003366;text-decoratio n: none;a.yellow color: #666633;fon t-weight: bold;a:li nk text-decorati on: none; color:#003366;a:visited text-decoratio n: none; color: #003366;a:hover text-decoration: underline;color: #993300;a:acti
19、ve text-decoratio n: none; color: #993300;a.yellow:li nk a.yellow:visited a.yellow:hover text-decoratio n: none; color:#666633; text-decoratio n: none; color:#666633; text-decoratio n: none; color:#993300;a.yellow:active text-decorati on: none;color:#993300;24.逐个选中右边栏目文字，在【属性】面板的【链接】选项中输入地址，按回车确认后自动
20、应用了默认的链接样式，这时只要在【样式】选项中选择yellow ”样式就可以看到效果了。25. 现在整个网页的布局和美化完成了，我们保存好文件以后在浏览器中预览，如图11-4-11 所示。图 11-4- 11 浏览器中预览首页效果 放飞思维创意设计公司的首页到这里已经完成了， 那么读者有没有想过栏目首页会是什 么样子的呢？要是让你来设计， 你会怎样做呢？这里作者制作了 “ profile.html ”，也就是 “关 于公司”栏目首页，如图 11-4-12 所示。图 11-4- 12 “关于公司”栏目首页在栏目首页里，作者把 Logo 缩小了一定比例并放在了栏目文字的上面，一方面给信息 让出了空间， 另一方面也可以作为回到首页的链接图片；另外， 在信息显示区域不再用米色而是换为白色作为背景， 是考虑到信息的可读性； 上面的图片则向浏览者说明了目前正在浏 览的页面，配色方面同样用了 Logo 里的标准色。读者可以作为参考设计出更出色的页面。