1 / 32

第 8 章 艺术设计网站

渐变色的设置和填充 制作“鼠标经过图像”效果 使用 【 显示 - 隐藏层 】 欣慰制作 Banner 设置浏览器状态栏文本 设置滚动条颜色. 本 章 重 点. 第 8 章 艺术设计网站. 8.1 背景概述

edana
Download Presentation

第 8 章 艺术设计网站

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 渐变色的设置和填充 • 制作“鼠标经过图像”效果 • 使用【显示-隐藏层】欣慰制作Banner • 设置浏览器状态栏文本 • 设置滚动条颜色 本 章 重 点 第8章 艺术设计网站

  2. 8.1 背景概述 成功的艺术设计网站，是技术，艺术，创意的有机组合，以先进的网页技术为施展手段，以合理的结构层次和准确的连接关系表达网站的制作技巧，网站无门面，串串目录开头，层层文字说明，如同当街摆摊的小贩，难以提起人们的欣赏兴趣；而太复杂的页面设计，以技术逞强的站点虽然能领先一时，但不可能受宠一世。因此，创意网站的设计，应充当利用网站的分帧，分层，即连续又间接的特点，在明确网站运行主题的基础上，将风格的定位，结构布局，技术应用等以一种前后呼应，但又层层渗透的表现手法，将形象主题“润物细无声”地体现在各个层面上，用艺术设计的特点，体现网站魅力，与明确的设计理念融为一体。 根据众多艺术设计网站的表现形式，可以大致划分为3种类型。分别是平面设计网站，多媒体设计网站，综合设计网站

  3. 1.平面设计网站 平面设计网站是根据市场的需求，针对某些企业或个人而做出展现个人能力和推广业务的一种网络平台。因此，它有鲜明的设计风格 2.多媒体设计网站 多媒体设计网站已经成为一种全新的大众传媒，由于其交互性好，传播面广的特点，为视觉传达设计的传播提供了良好的条件。多媒 体设计网站不仅代表着崭新的信息交流方式，而且它使信息的传播突破了传统的地域文化的阻隔，使信息传递的范围，速度以及效率都产生了质的飞跃。多媒体设计网站一般包括 Flash网站，360°全景网站效果，在线视频，在线教育等

  4. 3.综合设计网站 综合设计网站是以多样性设计风格为特点，根据网站的特性而创造出来的视觉效果，但网页设计一般离不开这几个要求：网站信息架构，市场形象定位，导航系统设计，视觉传达设计，动画效果设计等。

  5. 8.2实例分析 艺术设计网站主要是以展现设计公司，工作室，或个人的作品与服务为主。该网站属于平面设计网站类型，是作者自己工作室的网站，主要涉及与制作UI（User interface,用户假面）类产品为主。网站界面设计非常精致，就页面本身而言就是一个非常不错的UI设计产品。 UI最初设计是指对软件的人机交互，操作逻辑，界面美观的整体设计。好的UI设计不仅让软件变得有个性，有 品味，还让软件操作的更舒适，简单自由，充分的体现了软件 的定位和特点。在制作网站时也要特别注意这些要点。

  6. 8.2.1 色彩分析 本章实例在设计技法上大量的运用了光的效果，在第一章中就介绍过色彩与光的关系，在图形设计上适当的运用发光效果，会使页面整体感觉更精致，更具有艺术性。 页面整体使用神色配色方案，给人一种神秘，期待，科技的感觉。页面中的主体深色（除黑色外）均是使用不同的蓝色（即通过调整蓝色的饱和度，明度来生成灰蓝，淡蓝，紫蓝，湖蓝等色彩）来调配的，也就是说配色方案使用的是同一色相中的不同饱和度，明度来对比搭配的。 各个区域的背景均是使用饱和度较底，明度较暗的颜色，而文字则使用饱和度较高，明度较亮的颜色，从而形成

  7. 视觉对比。标题和重要信息则使用绿色和黄色这对互补色来突出显示。视觉对比。标题和重要信息则使用绿色和黄色这对互补色来突出显示。 8.2.2 布局分析 该网站属于顶部导航和左侧导航与页面分割的复合结构，多数人都比较喜欢浏览器顶部导航固定且具有层次体系的网页。也就是说，这种网站导航（第一层菜单）位于网页顶部。第二层菜单位于网页左侧的网页布局很受使用者和客户的青睐。 网页整体均使用矩形样式布局，显得结构很清晰。头部区域与尾部区域的大小范围也搭配的很合理，一般比较优秀的网页在结构上有头有尾，首尾呼应。 网页中的各个元素在细节处理上也显得别有心思，这也 正是UI设计师必须具备的基本设计素质。

  8. 8.3 使用Photoshop 软件设计版面效果 平面设计网站的重点在于页面效果的设计，这就需要使用Photoshop软件来进行细致的设计与制作。该实例在设计技法上运用最多的就是渐变色的填充，以实现局部的发光与立体效果，在制作的过程中也需要特别注意这一点。下面将来介绍具体的操作步骤。

  9. 8.3.1 规划整体版面 首先依然是使用参考线进行版面的规划，然后在进行背景设计，为后面的操作打下基础。具体操作步骤介绍如下。 （1）规划版面，新建一个1000×884像素的文档，设置好参考线，并依照参考线规划处头部区域，Banner区域，左边区域，内容区域，尾部区域。

  10. （2）填充渐变色背景。使用【渐变工具】填充饱和度较低的渐变色。 8.3.2 设计Logo 因为该网站是设计师自己的网站。不像制作企业类网站可以直接放上企业的Logo即可，所以需要根据网站整体形象与定位进行Logo设计，具体操作步骤如下。 （1）使用【钢笔工具】绘制选框，然后使用【渐变工具】填充渐变色，完成作品查看效果。 （2）使用【椭圆工具】绘制图形，并在【样式】选框中选择“基本黑色”样式进行填充，然后再对样式进行设置。 （3）制作Logo表示文字。在圆形图形上输入文字“LE”，注意选用字体和字号；然后再【图层】面板上为文字所在的图层添加【渐变叠加】图层样式。

  11. （4）制作Logo全称文字。驶入文字“llemon”,注意所选的字体和字号，至此，网站的Logo已经制作完毕。 8.3.3设计导航栏 该实例在导航栏的设计上运用了渐变对比效果，我们可以通过调整同一渐变色的不同明度来产生此效果。利用同样的方法制作菜单按钮的触发效果，具体操作如下。 （1）制作导航栏背景。使用【矩形选框工具】绘制矩形选框。使用【渐变工具】调整渐变色。其中色标颜色值及位置依次是：#8C96A0,#273849、45%,#101722、50%，#18222C。 （2）在渐变色背景上输入“新闻中心”，“关于我们”，等栏目文字。 （3）制作菜单触发效果，使用【圆角矩形工具】在

  12. “新闻中心”文字下绘图，并填充黑色。 （4）在【图层】面板上复制图形所在的图层，并将复制后的内容缩小2像素，然后给复制后的图层添加【渐变叠加】图层样式。 其中色标颜色值及位置依次是：#8C989E,#243245、50%,#01040B、58%，#1945A8。 （5）使用【椭圆选框工具】绘制选框，并填充蓝色（颜色值为（#1945A8）。然后在图层面板上给该图层添加【外发光】图层样式。 （6）至此，导航栏已经制作完毕。 8.3.4 设计左边区域和Banner区域 左边区域和Banner区域的设计相对比较简单，填充渐变色和插入文字，Banner图片即可，需要注意的是文字的用色和Banner图片的风格，具体操作如下。

  13. （1）依照参考线的位置绘制矩形选框，并填充渐变色 (2)在渐变色背景上输入“最新公告，最新作品，联系方式”等文字。 （3）在Banner区域插入Banner图片，并作适当的修改，插入的Banner图片一定要与整体风格一直，否则画面将显得很不协调。 （4）在Banner图片右边插入两张Banner缩略图，以方便后面在Deramweaver制作“单击缩略图出现相应的Banner图片”效果。 8.3.5 设计其他区域 接下来设计内容区域和尾部的内容，内容区域包括工作室的服务项目，最新作品以及友情链接等内容，尾部区域放置版权类相关信息。具体操作步骤如下。

  14. （1）从标尺上拉出一条参考线，至左右两部分宽度相同的位置；然后绘制矩形选框，并填充渐变色，最后再插入图片和文字。 （2）绘制矩形现况，并填充渐变色，再插入图片和文字内容。 （3）在文字右边绘制圆角图形，在【图层】面板上给该图层添加“渐变叠加”和“斜面和浮雕”图层样式。 （4）在页面右边继续绘制矩形选框并填充灰蓝色（颜色值为#26394A）然后插入图片和文字内容。 （5）制作友情链接部分。接着前面制作的内容，绘制4个选框，并分别填充黑色及其他颜色，再插入图片和文字内容即可， （6）至此，内容区域的内容制作完毕。

  15. （7）制作尾部区域内容。在尾部区域内绘制选框并填充回来色（#141E27）然后输入相关文字内容。 （8）制作阴影效果。绘制选框，并填充渐变色。 （9）至此，首页版面设计完毕。 8.3.6 切割网页图像 版面设计完毕后，使用【切片工具】进行网页切割。因为版面各个区域呈矩形形状，所以切割起来比较容易。隐藏背景后，切割网页图像。 使用快捷键【ALT+SHIFT+CERL+S】将切割后的版面储存为Web所用的格式。 这样切割及储存后，很多图片就可直接在Dreamweaver 中使用了，但还有很多区域的内容需要单独切割，以便后续

  16. 续的工作更方便，例如，左边区域和友情链接部分的文字可在Dreamweaver中直接输入，无需切割成图片等。 8.4 使用Dreamweaver软件制作HTML页面 本实例在Dreamweaver里制作是除了使用表格布局外，同时还需要使用层来制作Banner区域，其中会涉及【行为】【层】面板的应用以及状态栏文本，滚动条颜色的设置。下面介绍制作各个元素的具体操作步骤。 8.4.1 利用表格布局 首先为网站建立本地站点，新建HTML文档后设置其页面属性，然后在利用表格进行初步布局，具体操作如下 （1）执行【站点】|【新建站点】命令，新建一个名为“design”的本地站点。

  17. （2）新建一个HTML文档，按快捷键【Ctrl+j】设置页面的【外观】属性。 （3）插入一个1行8列，宽为929，高为48像素的表格，并在【属性】面板中设置其“居中显示”和背景图像“menu_bg.gif”。 （4）依次设置这8个单元格宽度为180，92，78，78，78.78和78像素，最后一个单元格可以不设置宽度。 8.4.2 制作“鼠标经过图像效果”效果 下面将要介绍的是制作网页的导航栏，导航栏的各个菜单都有初始效果，也有当鼠标指针移到菜单上时的效果，这能使网页更有指引性该效果可以插入“鼠标经过图像”的方式来实现，具体操作如下。

  18. （1）插入logo图像。在【常用】工具面板中单击【图像】图标，在第一个单元格内插入图像”logo.gif”。 （2）插入鼠标经过图像。将光标定位在第二个单元格内，然后点击【鼠标经过图像】图标，在【插入鼠标经过图像】对话框中的设置。单机【确定】按钮后，再按【F12】键在浏览器中预览。 【插入鼠标经过图像】对话框中的各个选项进行以下说明。 【图像名称】文本框：该项设置插入图像的名称，作为一个几号而已，一般默认为即可。 【原始图像】文本框：该项的设置即为网页预览时图像的初始效果，可单机【浏览】按钮选择图像。

  19. 【鼠标经过图像】文本框：该项目设置即可为当鼠标经过图像时的效果，可单机【浏览】按钮选择图像。【鼠标经过图像】文本框：该项目设置即可为当鼠标经过图像时的效果，可单机【浏览】按钮选择图像。 【预载鼠标经过图像】复选框：选中该复选框，在互联网上浏览网页时会预先加载设置的图像，设计为默认即可。 【替换文本】文本框：当鼠标指针经过图像是显示的文本提示（实例中为“新闻中心”）。 【按下时，前往的URL】文本框：单机图像是所链接的地址（实例中设置的是空链接：“#”）。 （3）按照同样的方法，继续插入其他5个交换图像菜单，各个图像的“替换文本”为各菜单的名称，URL链接地址都为空链接“#”。 （4）若是插入交换图像后要再进行修改相关的参数，可选中图像后在【属性】面板或【行为】面板（按快捷键【Shift+F4】中进行编辑修改。

  20. 8.4.3 制作左边区域的内容 左边区域的内容在Dreamweaver中的制作很简单，插入表格设置单元格背景图像后，再在单元格内插入表格和文字即可，集体的操作步骤如下。 （1）插入一个1行2列，宽为“929”像素的表格，设置其居中显示；然后设置一个单元格的宽为“180”像素（与Logo的宽度相同），设置第二个单元格的宽为“749”像素。 （2）设置第一个单元格的背景图像为“back2.gif”，然后在其内插入一个9行1列，宽为83%的表格，并设置其居中显示。 （3）设置相关单元格的属性并在各个单元格内插入内容。

  21. 8.4.4 使用【显示-隐藏层】行为制作Banner 【显示-隐藏层】行为可以显示。隐藏，回复一个或多个层的默认可见性，此动作可以用来在用户与网页进行交互式动态的提示信息，下面将要介绍的是，使用该行为制作一下的图。 实现该效果的原理是，绘制两个小层（取名为small1和small2）和两个大层（取名为big1和big2），两个小曾放在达层上面；当单击层small1是显示层big1同时隐藏层big2，当单击small2时显示层big2同时隐藏层big1。 弄清楚原理后，制作是思路就比较清晰，制作过程也很容易，集体操作步骤如下。 （1）插入表格。在右边单元格内插入一个宽为749像素

  22. ，高为280像素的表格，（如下午称banner表格） （2）插入Banner图的层。将光标置入表格内，执行【插入】|【布局对象】|【层】命令插入一个层（Layer1）。 （3）设置层的大小和位置。选中插入的层，人后在【属性】面板中设置其宽度为“749px”高为“280px”以及上边距为“63px“。 （4）插入图片。将光标置于层内，在【常用】工具栏中单击【图像】图标插入图像“b4.jpg” （5）插入Banner图的层。按【F2】键打开【层】面板，单击眼睛图标将层Layer1隐藏，然后使用步骤（2）至步骤（4）的方法在Banner表格内再插入一个大小，位置相同的层（Layer2），并在层内插入图片“b5.jpg”。 （6）插入缩略图的层。将光标置入层Layer2内，执行

  23. 【层】命令再插入2个层（上面是Layer3下面是Layer4）然后分别设置两个层的大小和位置。【层】命令再插入2个层（上面是Layer3下面是Layer4）然后分别设置两个层的大小和位置。 说明：在层内插入层时，要注意层内插入的层的位置是相对的，会随着父级层位置的变动而变动。 （7）插入图片。在层Layer3内插入图片“b6.jpg”,在层Layer4插入图片“b7.jpg”，然后再为图片设置空链接“#”。这样当鼠标指针移上时会出现手形。 在【层】的面板上可看见Layer3和Layer4都隶属于Layer2,另外请注意Z的编号，Layer3和Layer4是堆叠在Layer1和Layer2之上的。

  24. 说明：z编号是制定的堆叠顺序号，Z编号较大的层出现在编号较小的层上面，编号可正可负，也可为0.说明：z编号是制定的堆叠顺序号，Z编号较大的层出现在编号较小的层上面，编号可正可负，也可为0. （8）添加行为。选中Layer3，按快捷键【Shift+F4】打开【行为】面板，单机按钮选择【显示-隐藏层】行为，然后在【显示-隐藏层】对话框中将层Layer1设为“隐藏”，将层Layer2设为“显示”。在【行为】面板中将触发时间设为“onClick”（当鼠标单机时）

  25. （9）以同样的方法，选中Layer4，将其【显示-隐藏层】行为设置为【层“Layer1”（显示）】 （10）至此，Banner效果已经制作完毕，按【F12】浏览效果，当单击缩略图时将出现相应的Banner图。此效果也可以用Flash软件来制作。 8.4.5 制作其他部分 （1）插入表格。在前面介绍的Banner表格下方插入一个3行2列，宽为100%的表格，并合并第二列上面的2个单元格，并设置背景色为“#26394a”（第3行的第一个单元格也是此背景色），最后一个单元格的背景色为黑色。 （2）插入图片。在第一行第一个单元内插入图片“ser.jpg”，在第二第一个单元格内插入图片“anner-2.jpg”

  26. （3）插入表格。在第二行第一个单元格内插入一个4行1列，宽为100%的表格，并设置其间距为“8”像素 （4）插入内容，在1，3个单元格内插入文字，设置第2，4单元格的虚线背景图像为“sean01.gif”，然后在该表格外插入图片“join.jif”。 （5）插入内容。在第3行的第一个单元格内插入一个1行1列，宽为100%的表格，设置其间距为“3“像素，背景色为黑色，然后输入“友情链接”文字。 （6）插入内容。接着插入一个1行2列，宽为100%表格，设置其间距为“8”像素，背景色为#273a4b，然后输入相关的链接网址。然后在表格外插入相关链接图片， （7）插入内容。在右边的单元格内插入5行1列，宽为100%表格，其中有一个单元格高度为1像素，然后在各个单元格内插入相关文字和图片。

  27. （8）制作尾部区域，将光标置入所有表格外，在插入一个2行1列的表格，并在第二个单元格内插入图片“back.jpg” （9）在第一个单元格内插入一个1行1列的表格，设置其间距为“8”像素，背景色为#141e27，并在单元格内插入相关文字。 （10）至此，该页面所有区域已经制作完毕，按【F12】在浏览器中预览。 8.4.6 设置状态栏文本 为了使页面浏览时更具有人性化和个性化，可以将浏览器状态栏的默认信息改成自定义的文本，具体操作如下。 （1）在【文档】窗口左下角选中<body>标签，然后在【行为】面板中执行【设置文本】|【设置状态栏文本】命令。

  28. （2）在【设置状态栏文本】对话框的【消息】文本框中输入显示的信息“欢迎访问本网站！”，然后在【行为】面板中将触发事件设为“onLoad”（当打开页面时）。 （3）按【F12】预览，左下角状态栏上显示了刚刚设置的文本。 8.4.7 设置滚动条颜色和隐藏滚动条 为了使页面浏览时效果更加美观，可以将浏览器滚动条的默认颜色改成与网页符合的颜色，具体操作步骤如下。 （1）将文档切换到【代码】视图窗口，在<style type=“text/css”>…</style>代码区域中的body｛…｝样式中插入如下代码。

  29. SCROLLBAR-FACE-COLOR:#1b2d3b; SCROLLBAR-HIGHLIGHT-COLOR:#1b2d3b; SCROLLBAR-SHADOW-COLOR:#1b2d3b; SCROLLBAR-3DLIGHT-COLOR:#1b2d3b; SCROLLBAR-ARROW-COLOR:#5c7691; SCROLLBAR-TRACK-COLOR:#5c7691; SCROLLBAR-DARKSHADOW-COLOR:#5c7691; SCROLLBAR-BASE-COLOR:#4b535e;

  30. 以上代码具体含义如下 SCROLLBAR-FACE-COLOR:滚动条突出部分的颜色。 SCROLLBAR-HIGHLIGHT-COLOR:滚动条空白部分的颜色。 SCROLLBAR-SHADOW-COLOR:滚动条亮边的颜色 SCROLLBAR-3DLIGHT-COLOR:滚动条立体发光的颜色。 SCROLLBAR-ARROW-COLOR:上下按钮上三角箭头的颜色。 SCROLLBAR-TRACK-COLOR:滚动条的背景颜色。 SCROLLBAR-DARKSHADOW-COLOR:滚动条强阴影的颜色 SCROLLBAR-BASE-COLOR:滚动条的基本颜色。 （2）按【F12】键在浏览器预览，滚动条的颜色已经发生改变。 （3）在<BODY>标签中加入如下代码，在浏览器中可隐藏滚动条，

  31. 若只是想隐藏横滚动条或竖滚动条，则可将“scroll=no”改用下面代码中的其中一段； style=“overflow-x:hidden” style=“overflow-y:hidden” 当然，隐藏滚动条并不适合加在本例中，这里只是顺便提一下。 8.4.8 加入防止网页被COPY代码 现在有很多网站我饿了防止浏览者复制，另存为网页资料，于是在代码中加入了相应的代码来避免这以时间，可以祈祷一定的效果。下面就来介绍加入代码的操作方法。 （1）禁止选择。 在<BODY>标签中加入如下代码，在浏览器中可禁止浏览者做相应的操作。

  32. oncontextmenu=“retuen false” 含义：取消右键菜单 onselectstart=“return false” 含义：页面内容无法选中 ondragstart=“return false” 含义：页面内容无法拖拽 (2)禁止另存为。 在<HEAD>…</HEAD>代码区域中插入如下代码，在浏览器中将无法执行【文件】|【另存为】命令储存网页，否则会出现近视对话框。 代码如下： <NOSCRIPT><IFRAMESRC=*.html></IFRAME></NOSCRIPT>

More Related