精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网页软件>Dreamweaver教程>正文

孤风和你一起学Dreamweaver MX 2004


来源: 时间:07-02-24 点击: 点击这里收藏本文
昨天我们学习和制作了我们的框架,还记得要领么?一句话,妙用表格,事实上,也就是表格套表格,大表格里面套小表格。

框架是拉出来了,今天我们就填充一下里面的东西吧!首先要收集一些图片,当然,如果你的PS比较好的话,那你就自己制作几个图片,为了大家的学习方便,我将我使用的一些小的图片打包发到网上给大家下载。好了,先把我们的第一行的东西给填上去吧````

第一行第一个框我们是准备放我们的LOGO的````嘿嘿````先把图片放上去吧!

方法是点击“插入”-->“图片”

然后在弹出的窗口里点这个IMG文件夹

由于我不记得图片的名字,所以先点下这个图标,选择第一个“缩略图”

然后点下拉的那个箭头,找到我们事先做的那个LOGO图片

最后点“确定”你就可以看到图片被插到网页当中了。

如果你发现插得不是地方````那是因为````你先没有用鼠标点一下你准备插入的单元格````

如果没我说中了`````ctrl+z 重新来一遍吧`````

好了```我们来看一下效果`````

记得上一个教程中我们准备在LOGO的旁边放上广告的,现在你可以用同样的方法在这边插上一个广告图片。当然,你也可以插上一个FLASH做为广告,方法:插入-->媒体-->FLASH

选择和图片差不多````不过```这可没有缩略图哦````自己先看清楚吧````

我在这个位置写上广告位招租```

不过这样不好看哦````把它居中吧````好不?

把鼠标放到这里面````然后点这个`````和WORD差不多吧`````

就大功告成了`````

后面的联系方式那边怎么做呢??

一般那边分三个,设为首页 加入收藏 联系站长 然后在前面加上一个小图标```

看到了么?

其实我们可以直接在里面输入,并插如小图就可以了,但这样的话容易混乱,所以我准备放一个三行二列的表格在这里面,有人反对么??

插入后略微调整一下。

用刚才的方法往里面插入小图片和文字。大家自己练习着做。
好了,这个已经做好了```可是```没什么背景````不好看`````

先用鼠标点一下刚刚插入的那个小表格的里面的任意一个地方,然后点这个地方<table>

第一章的时候我就说了```这里非常关键,这是表格的意思,你点了这个<table>那么你可以看到这个表格处与选中状态。

这个比较难理解,也不容易一下子就学会,大家要反复琢磨和体会,这个就是表格的意思,前面还有<table>这样的字符,这个就是外面的大一点的表格,点到最前面的<table>,就是我们制作的网页的最外面的表格了。大家现在不必理解透彻,在以后我们学习了HTML代码之后大家就自然理解了。现在我们只要知道这是表格的意思,另外点这个就能选中表格。

选中表格之后,我们按一下键盘的方向键的向右键 →

然后可以看到我我们的鼠标就在大一点的表格的单元格里面了。

这个不太容易一次就会,大家要细细琢磨。

然后我们回到属性那一栏,忘记了?就是下面的那一大块啊!!

看到“背景颜色”这四个字了么?其实这就是设置这一个单元格的背景颜色的控制按纽````

第一章里我们成功设置了整个网页的背景颜色,那么现在你设置这个单元格的背景颜色能成功么??

期望你能成功哦!!

好了!!我成功啦!!

好了```上一行的东西我们做得差不多了`````

现在我们开始做导航栏吧````这个设计其实有很多不同的方法,你们喜欢什么样的方法呢?我做了如图的效果:

分析一下,其实这是一个一行三列的表格,中间的图片是背景,两边各一个图片。

现在大家可能还不能理解我说的意思,我们慢慢来做。

先插入一个一行三列的表格,然后略微做一些调整,如图

先在第一个表格里面插入那张图片,方法大家都会了吧

第二个列就略微复杂了一点点,要仔细哦!!很重要的哦!!

先在那个单元格用鼠标点一下,然后到属性面板(不会用忘记了吧??看一下前面的!)

然后点这个文件夹一样的图标````出现的面板和插入图片的面板是一样的

就是这个,和刚才的一样吧````

然后找到如图名字的图片

大家可能奇怪,这个图片怎么这么窄啊???

但效果却是???

事实上,当你把一个图片作为背景的时候,DMX会自动的把它排列起来,这样就形成了很长的一段了啊!!大家可以拉拉这个单元格试试,就会明白了!(如果拉了回不来了,可以撤消返回!!)

这个概念比较重要,大家一定要掌握,自己多琢磨琢磨,回味回味,我想应该都能明白的!!

最后那个单元格插入那个尾部的图片就可以了,这个和先前的没什么区别。

看看效果,满意了吧!!

好了,今天就说到这里,虽然做得比较少,但学到的应该还是比较多的,大家慢慢的练习几次,知道熟悉了其中的一些关键操作为止。
9 7 3 1 2 3 4 5 4 8 :

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.