Dreamweaver网页设计项目教程王雪松项目二任务4网页美化与特效1章节.pptVIP

* * * * * * Dreamweaver网页设计项目教程 机械工业出版社 任务4网页美化与特效1（建议2学时） 01 任务分析 02 任务实施 任务分析 比较上面的一组图片，可以看出设计样式中的头部设计草图中“文本框”和“按钮”都有自己的独特外形。它给浏览者的外观视觉效果比默认的样式好得多。 任务分析 导航设计草图中当前页主导航显示背景为白色，文字颜色为灰黑，且当鼠标滑上主导航按钮时弹出相应的子导航，滑出主导航按钮时隐藏子导航区。这样的显示效果不仅美观，而且更方便浏览了解自己当前处理的网站位置，及了解当前页所包含的有关内容。 任务实施 文本框美化 （1）创建类样式 1）创建.inp_srh的CSS样式。单击CSS样式面板下方的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中做如图所示的设置，设置完成后单击“确定”按钮 。 任务实施 文本框美化 （1）创建类样式 2）单击“确定”按钮后，弹出“.inp_srh的CSS规则定义”对话框，设置它的背景图片及背景图片不重复 。 任务实施 文本框美化 （1）创建类样式 3）在方框样式中，设置它的宽度140px，高度17px 。 任务实施 文本框美化 （1）创建类样式 4）在边框样式中，设置它的边框线样式（style）为实线（solid）、边线粗细(width)为1px、边线颜色(color)为#cbcbcb 。 任务实施 文本框美化 （2）应用类样式 1）返回index.html，选中头部#search中的“文本框”，在属性窗口中选择类下拉列表菜单，选择“.inp_srh” 。 任务实施 文本框美化 （2）应用类样式 2）实时显示效果如图所示： 在Index.html中，类样式“.inp_srh”已经添加到了表单代码中，如图所示 ： Thank you! 谢谢观赏 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 馋死 PPT研究院 POWERPOINT ACADEMY * * * * * *