|
2、图形化的网页
俗语说：一图解千文！图形的影响力往往胜过冗长的文字叙述。在设计网页时，图形不但可以表达一定的信息和意义，还可以表现出一个网站的风格和特色。
看到这个主页了吗？这就是图形界面的主页（图1），整个画面基本由图形组成，链接也是加在图上的，当鼠标停在上面时，图形会发生一些变化。
///pc/homepage/dreamweaver/img/dw202001.gif" width="200" height="175" alt="点击可看到浏览效果" border="0">
图1 点击可看到浏览效果
你想知道这是如何完成的吗？那我们就一起来做一下吧！
（1）画出你的主页来
你是否羡慕一些网站的精彩布局和独特的视觉效果？
别急，还有一个方法可以帮助你定位图层，规划网页布局！你可以将主页画出来，然后在Dreamweaver中“临摹”。
打开一个绘图软件，比如PhotoShop，把你想象中最美的网站布局画出来，这其间既可以吸取其他网站的长处，也可以加入自己的构思和创意，画好之后，把这幅图存为JPG格式的文件，也可以存为GIF或PNG格式（图2）。
///pc/homepage/dreamweaver/img/dw20200.jpg" target="_blank">///pc/homepage/dreamweaver/img/dw20200a.gif" width="300" height="192" border="0" alt="用绘图软件做好的图片">
图2 用绘图软件做好的图片（点击放大）
在Dreamweaver中新建一个空文档，按下Ctrl+J，调出“Page
Properties”对话框（图3）。
///pc/homepage/dreamweaver/img/dw202003.gif" width="398" height="272" alt="页面属性对话框" border="0" usemap="#Map">
图3 页面属性对话框
选择“Tracing Image”输入框右侧的“Browse”按钮，从对话框中选择我们所画的草稿图，拖动“Image
Transparency”滑动按钮，调整草稿图的透明度，将其调为50%，单击“OK”，看，草稿图在网页中出现了（图4），你可以在这个图上建立表格或图层，将画出来的主页做出来，相信你很快就会进入佳境的。
///pc/homepage/dreamweaver/img/dw20200b.gif" target="_blank">///pc/homepage/dreamweaver/img/dw20200c.gif" width="300" height="225" border="0" alt="草稿图在页面中的显示">
图4 草稿图在页面中的显示效果（点击放大）
草稿图不同的网页的背景图，它只是设计阶段的辅助工具，在浏览时是看不到的，如果草稿图的颜色太深，也可以调整它的透明度，以方便制作。
上一节 下一节
/pc/bin/msg.pl?file_id=k_dreamweaver target="_blank">///pc/img/message.gif" width="64" height="54" alt="请您留言" border="0">
谈谈您的看法
|