实验7 Dreamweaver制作个人网站(选)
1 实验目的
利用Dreamweaver制作一个漂亮的个人网站。
2 实验效果
本实验的最终效果如图7-1和图7-2所示。其中图7-1为网站首页,图7-2为单击“简介”按钮超链接后的效果。
3 实验步骤
1)实验具体步骤:
(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小时内删除。
发表评论