实验7  Dreamweaver制作个人网站（选）
１　实验目的
    利用Dreamweaver制作一个漂亮的个人网站。
２　实验效果
    本实验的最终效果如图7-１和图7-2所示。其中图7-1为网站首页，图7-2为单击“简介”按钮超链接后的效果。
３　实验步骤
１）实验具体步骤：
（1）Dreamweaver打开已经加工处理好的HTML文件“加工后的图.html”（此文件已由第三方软件加工完成并导出得到），参照“切割原则.JPG”图片，选择需要修改并添加按钮图片的切片区域，在“属性”面板中复制图片源文件地址，然后删除图片，并在背景栏中粘贴地址，这样就将所需要修改的区域的图片转换成了背景图片。
（2）参照第1步，将四个按钮区域和中间主体区域（中间模糊的部分）中的图片全部转换成对应的背景图片。
（3）下面在中间主体区域（中间模糊的部分）中插入一个透明框架嵌套，作用是在该区域调用其他页面。做法是：切换到“代码”视图将下面的HTML代码插入到中间主体区域所在的单元格标记<td></td>中，代码为：
    <iframe src="first.html" width="100%" height="330" name="qiantao" noresize marginWidth="0" marginHeight="0" frameborder="0" framespacing="0" scrolling="no" allowtransparency="true" > </iframe>
    其中width和height可以根据该单元格的大小进行调整，一般比单元格略小以防止错位；first.html使该框架默认的初始链接页面，存放在实验文件夹中可直接调用。
（4）在4个模糊的圈内插入images文件夹中已经做好的“星星”按钮图片。下面给“星星”按钮添加透明特效，步骤如下：
    ①切换到“代码”视图，将星星透明效果.txt文件中的透明效果HTML代码放在<head></head
>区域内。
②分别选择相应的4个“星星”按钮，在“代码”视图中进行替换。如将“星星01”按钮图片原来的代码<img src="images/星星01.gif" width="70" height="70" >替换为
<img  src="images/星星01.gif" width="70" height="70" border="0" onMouseOver="change_opacity(this,'up')" onMouseOut="change_opacity(this,'down')">
（5）选择“文件”|“另存为”菜单项，将页面保存为index.html。在分别将“简介”“心情”“相册”“联系”几个子页面依次在首页中设置链接，并设置好链接目标为qiantao（步骤3中设置好的嵌套框架的名字）。如在“简介”星星按钮上设置链接jianjie.html，目标为qiantao。
（6）点击index.html浏览页面，看看效果。
4 实验思考
    参照本实验制作一个网站首页，子页面可适当运用一些其他效果。
dw制作个人网站代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。