发新话题
打印

【网站】网页制作技巧

4.如何去掉主页超链接的下划线?  
在访问一个页面的时候,我们会发现,当鼠标移动到具有超级连接的文字上的时候,有的会产生相应的下划线。然而有些网页却没有。主页超链接的下划线是如何去掉的呢?

  我们在<HEAD>...</HEAD>之间插入下面的代码。

  <style>B {font-weight: 700; }
   P {padding: 5px 0px;  
     margin: 0px;
     font-family: 宋体,黑体,宋体;  
    }
   A {text-decoration: none}
   TD { font-family: 宋体,黑体,宋体; }
  </style>
  <script language="javascript">
   var contents = true;
  </script>  

  更简单的方法是:

   <style>
    <!--
     a {text-decoration:none}
     a:hover {color: red;text-decoration:none}
    --!>
   </style>

  5.DreamWeaver中如何防止出现重叠现象
文字和图像混排,可以为我们的页面增加色彩和活力。当然这是在文字和图像搭配得比较得当和得体的前提下。然而有的文字和图像的排列却往往不尽人意。有时我们发现利用Dreamweaver制作的页面在Internet Explorer中看很漂亮,图形定位也很准确,但是当你使用Netscape或其它的浏览器时,发现图形位置错位或者覆盖文字,这大大影响了网页的效果。

(不好意思哈,这里有两幅图的,在写字板里弄不出来)


那么怎样改变上面出现的不正常的情况呢?很简单,我们查看以下源程序,发现上面一段的源程序是这样的:

  <span class="p2" style="line-height:17pt">
    <p align="left">
     下面是这段代码产生的显示效果:</p>
    <p align="center"><img src="img/ol04006.gif" width="425"  
         height="97"></p>
    <p align="left">  怎么样?如果你选择的背景图片质量很
           高的话,背景会更漂亮的。</p>
  </span>  

  在上面的源代码中,我们发现代码对图像做了行间距的设置,我们只要将图片的行间距去除掉,就可以了。下面是变更后的代码:

  <span class="p2" style="line-height:17pt"><p align="left">
     下面是这段代码产生的显示效果:</p></span>
  <p align="center"><img src="img/ol04006.gif" width="425"  
         height="97"></p>
  <span class="p2" style="line-height:17pt"><p align="left">
    怎么样?如果你选择的背景图片质量很高的话,背景会更漂亮的。
    </p></span>  

  另外我们也可以利用表格进行图形的定位,也不失为一种好方法,但是也可能会出现其他的问题。这一点我们会在其他的技巧中讨论。  
6.中文网页制作中段落缩进的方法   
  在利用Dreamweaver制作有关文档资料内容的网页时,如果是英文书写格式,段落一般不缩进(不支持半角空格);如果需要缩进往往需要人为的加入两个中文全角空格,才能够显示出位置缩进效果。

  除了上面所说的外,还有下面几种方法,可以值得一试,现介绍如下。 -

  1.预格式(PRE)

  用预格式编写的源文件,在显示时照源文件中的排版字样显示,空行和空格都能很清楚地区别开来。如源文件为:   

  <pre>
  --预格式显示……
  </pre>

  网页就会按照你预先设置好的显示方式显示,即在“预格式显示”的前面就会空两个汉字的位置。

  2.插入点图或图形

  点图是指图片中只有一个或几个像素点,用肉眼看不出来。当我们在段落开头插入这样一个点图,并用HSPACE和VSPACE属性来调整点图的左右和上下的空格,以达到段落缩进。

  同样可以插入图形,只不过该图形的颜色需要用网页背景色,这种方式用IMG的WIDTH和HEIGHT属性调整图形大小,以达到缩进。

  插入图形的方法,需要我们掌握好HSPACE和VSPACE大小的尺度,使之刚好留出两个汉字的位置,这样才比较美观。

  3.插入没有边框和内容的表格

  这种方式与上述的插入图形方式类似,该表格没有边框和内容,是空表格。用TABLE的WIDTH和HEIGHT属性调整表格大小适合缩进的需要。

  利用表格来定位一般来说比较可靠,我常常就采用这种方式来对比较复杂的页面进行定位。不过这种方法有一个问题,就是可能是页面的源文件变大。因此也不见得是格式控制的首选。

  4.插入特殊的空格字符“&nbsp”

  “&nbsp”代表非显示空格字符。插入若干个“&nbsp”字符,中间用分号(;)或者空格隔开,也可以实现中文段落缩进。不过在Netscape 3.01中只能写小写字母,而在IE中大小写都可以。

  这四种方法主要是针对利用HTML的语言编写网页而言。在一些网页制作工具,如网景浏览器中有专门加入空格的工具条,也可以完成段落缩进。  

7.如何调整表格高度  
  我们在使用Dreamweaver制作主页时候往往需要改变表格的高度。然而有时当我们拖动表格的边框,无论怎样拖动,等到放下鼠标,表格却又恢复到原来的样子。试着拖动表格的边框看看。

  出现这种情况的原因在于我们已经为表格提供了一个固定的高度,当我们要改变表格的高度,尤其是压缩表格的时候,表格的高度仍然保持原来的设定值,其直观表象就是无论你怎样拖动表格的边框,表格的高度都不变化。

  在这种情况下,我们只需要去处掉表格高度的设定,然后拖动表格的边框就可以了。

  如何去除表格的高度设置呢?首先我们需要选定表格。比较简单的方法是,将光标移动到表格内,然后按“ctrl+a”,看看,不是就选中了与包含光标所在位置的最小的表格了吗。

  选定了表格以后,在properties框(属性框)中点击一下“clear row heights”图标(下图中带红框的按钮),表格的高度设定值就被取消了。这时表格的高度会按照表格的内容自动的匹配高度。


  当然删除表格高度的方法,不只有上面的一种方法,我们也可以选中表格,在表格的属性框中直接删除掉表格的height值就可以了。

  同样的,该方法也适用于改变表格的宽度的情况,只不过,选定了表格以后,删除的不是行的高度,而是列的宽度。

8.超级链接时如何设定目标窗口
用源代码target属性来设置:
TARGET是链接标签的属性,它的作用就是指定目标窗口,TARGET有以下几个值:

  _self-将链接指向的内容装载到当前页的窗口或框架中;

  _top-完全取代当前页面的所有框架;

  _blank-为链接指向的内容打开一个新的窗口

  _parent-把链接指向的内容装入当前页〈FRAMESET〉父窗口中

  下面这段代码,便会使超级链接产生一个新的窗口:

  <a href="www.hongen.com" target="_blank">洪恩在线</a>  

9.如何实现文字的自动换行
我们认为很有效的方法就是采用表格来对文字进行定位。当然这里的表格我们一定要给定它的绝对宽度(直接给定或间接给定宽度),那么输入的长文字便会自动的换行了。

  这里所说的直接给定表格的宽度,是指我们直接设定表格的width属性值为某一个设定值。如我们可以如下设定:

  <table width="420">...</table> 

  相对值是指采用相对于上一级表格的宽度,通常用一个百分数来表示。比如我们在一个相对外层的表格中设定了表格的宽度,那么在内层的表格中只要给出一个相对的宽度就相当于已经给定了表格绝对宽度。我们可以看看下面的源代码:

  <table width="760">
    ...
    <table width="60%">
      ...
    </table>
  </table>  

  这里就相当于我们已经给定了内层表格的宽度为760*60%=456个像素点了。  

10 如何制作HTML字幕动画效果  
当然我们可以利用flash或者采用Gif动画来实现,但是这种方式往往占用的空间比较大,而且不如HTML标记来得那么简单。这个标记就是Marquee标记,中文翻译为“跑马灯”。
Marquee标记的基本语法结构如下所示 :
  <MARQUEE ALIGN=″alignment″ BEHAVIOR=″type″ BGCOLOR=″color″ DIRECTI ON=″direction″ SCROLLAMOUNT=″n″ SCROLLDELAY=″n″ LOOP=″n″ WIDTH=″x″ HEIGHT=″y″ HSPACE=″x″ VSPACE=″y″>洪恩在线,12亿中国人的网上大学</MARQUEE>

  其中ALIGN可以用来指定滚动字幕与左右文字的对齐方式,它的值可以有top、middle、bottom等;

   BEHAVIOR用来指定滚动字幕的滚动方式,它的属性值有scroll、slide和alternate三个,scroll表示滚动字幕内容向同一方向重复滚动,slide表示滚动字幕内容从一端向另一端滚动并在另一端停止,alternate表示滚动字幕内容在两端之间来回往复滚动;

   DIRECTION指定滚动字幕的滚动方向,它的属性值有left和right两个,分别表示滚 动字幕由右向左和由左向右滚动;SCROLLAMOUNT用来设置多次滚动之间的间隔距离,其 单位是pixels(像素);

   SCROLLING用来指定滚动字幕滚动一次所需要的时间,单位是ms(千分之一秒), 其值的大小将直接影响滚动字幕的滚动速度;

  LOOP属性是用来指定滚动字幕的滚动次数 的,当它的值为“-1”时,滚动字幕将连续滚动直到浏览器载入下一个页面;

  HSPACE和 VSPACE则分别用来指定滚动字幕与其上一级页面在水平方向和竖直方向上的距离。  

  下面我们看一看跑马灯的效果。(注意:这种跑马灯的效果只在Internet Explorer中能看到,Netscape不支持marquee标记)  
PS:在底色条上跑动:<marquee bgcolor=#>
   面积(底色条的高和长):<marquee height=# width=# bgcolor=#>
   空白(margins)<hspace=# vspace=#>

11 灵活运用DREAMWEAVER的SITE功能
在DREAMWEAVER中,有一个SITE菜单,利用它可以实现对网站设计阶段的管理。有了它,可以大大减少在网站开发阶段的维护工作量。下面我们具体看看它的一些功能:

一、利用Site更改文件名

  在制作网站的过程中往往需要更改文件名,但是,这些文件名可能是某些超级连接所链接的对象。如果我们按照常规的方法去更改文件名,不仅工作量大,而且有可能由于工作的疏忽而造成某些链接找不到相应的链接对象,从而影响到网站的形象。利用dreamweaver的site功能可以大大简化这一工作。

  点击site菜单下的open site命令,选择要打开的site名。这里我们选择hongen site。这时dreamweaver便会弹出一个site的操作窗口,如要将jiqiao001.html改为jiqiao003.html,我们便选中jiqiao001.html文件,然后按F2键,遍可以为jiqiao001.html更名,输入新的文件名后,dreamweaver会弹出一个对话框如图所示:


  提示是否需要对整个site文件进行更新(update),选择yes,系统便会自动的更改与该文件相关的所有链接 。  

二、利用site查找链接错误和检查浏览器支持程度

  在开发建设网站的过程中,如果我们的页面越来越多,则链接出错的可能性会很大,单凭我们人力去检查这些链接显然是特别麻烦的,而且有些隐蔽的链接我们也不会一一点击,有没有自动检查链接错误的功能呢?其实Dreamwaver为我们提供了一个很好的链接检查器,让它帮我们检查不但速度快而且准确,为何不试一试呢?

  点击“File”菜单下“Check Links”项(快捷键为Shift+F8),Dreamwaver便开始检查当前Site下的所有连接,如果发现了链接的错误则会在弹出的“Link Checker”对话框中列出链接错误所在的页面,接下来我们要做的只是记下出错页面,然后打开页面修改错误,既快又方便。

由于我们制作的网页上传后,并不能知道网友使用何种浏览器,而我们应用在网页制作中的有些技巧,并不是所有的浏览器都能支持的,也就是说别人也许看不到网页应有的效果,甚至是一团糟,所以我们必须保证自己的网页被主流的浏览器所支持。Dreamwaver提供了这样一个功能,即检查目标浏览器,我们在Site中选中要测试的文件,然后在“File”菜单中找到“Check Target browser”并单击,这时会弹出一个对话框。
我们一般选择“IE 4.0”和“Netscape4.0”检查即可,如果检查结果发现有浏览器不支持的地方,我们在测试结果窗口中能够看到是哪个语句有问题,我们只须做相应的修改即可

12.如何弹出公告窗口
有时我们需要采用公告窗口来展示一些重要的信息,所谓公告窗口是指我们浏览主页时,随主页面的加载而自动弹出的小窗口,公告窗口中一般会放上新闻、布告的信息。下面我们看看怎样用几句简单的JavaScript语句来实现它。

  源码粘贴框:
方法一:
在<head></head>之间插入如下一段JavaScript代码:

<script language="JavaScript">
<!--
var gt = unescape(\'%3e\');
var popup = null;
var over = "Launch Pop-up Navigator";
popup = window.open(\'\', \'popupnav\', \'width=200,height=170,resizable=0,scrollbars=auto\');
if (popup != null) {
if (popup.opener == null) {
popup.opener = self;  
}
popup.location.href = \'test.htm\';
}
// -->
</script>

方法二:
直接在<body>与</body>插入如下一段代码:

<script language="JavaScript">
  window.open("test.htm","测试公告窗口","width=340,height=163,toolbar=0,status=0,menubar=0,resize=0");
</script>

方法是直接在<head>与</head>之间插入一段JavaScript代码(你可以选择上面两段之一,它们的作用是相同的),其中windows.open()的作用是打开一个窗口,括号内的各项参数的用法我们可以在下面表格中看到,我们可以根据自己的需要设置各个参数的值。

窗口参数                       参数介绍  
toolbar=yes,no               是否显示工具条  
location=yes,no              是否显示网址栏  
directories=yes,no           是否显示导航条  
status=yes,no                是否显示状态条  
menubar=yes,no               是否显示菜单  
scrollbars=yes,no            是否显示滚动条  
resizable=yes,no             是否可以改变公告窗口大小  
copyhistory=yes,no           是否显示历史按钮  
width=300                    公告窗口的宽  
height=200                   公告窗口的高  
left=100                     公告窗口的左上顶点距屏幕左边100像素  
top=100                      公告窗口的左上顶点距屏幕顶端100像素  


13.如何让背景图象不滚动?
前面我们讲过往页面添加图形背景的方法,但是这种背景会与页面一道移动。如何让页面内容翻动使而背景图像固定不动呢?

  HTML也给出了这样的代码,只是不经常用而已。我们只需要将body的bgproperties属性设置为“fixed(固定)”。

  在Dreamweaver中“Text”菜单下,选择“CSS Styles”子菜单,然后选择“Edit Style Sheet”命令(快捷键为:ctrl+shft+E),弹出如下的窗口:

点击“New”弹出如下的对话框:

选中“Redefine HTML”选项,将Tag选择为“Body”,点击“OK”,出现如下的窗口:

在Background中的Attachment里选“fixed”,背景图片选择为待设定的图片,点击OK以后就可以了。  


14.如何为网页设置背景音乐?
往网页中插入背景音乐会使页面声色不少。但是在使用音乐背景的时候要注意,背景音乐不能太大,否则文件传输会成问题,从而使网页的吸引力下降。

  在HTML中有embed标签可以实现背景音乐的插入功能,其语法规则如下:(在<body>中插入)

  <EMBED&nbs
发新话题
最近访问的版块