|
第二讲 初识代码
我的网页之路是从洪恩网站里的DW教程开始的，从零到现在这个半调子水平。那里的很多教程都是从最基础的开始，很合适广大初学者，所以建议大家也从那里开始了。洪恩网站的学习网址：http://www.hongen.com/pc/homepage/index.htm
在这里，基本上不讲软件的具体使用，只讲总结性的东西，要注意的技巧吧，在最后，也会写一两个用DW做的简单特效实例。
随便打开一个网页，点击查看，再点源代码，一般都可以看到这个网页的代码，做网页说白了，也就是把文字、图象等多媒体效果有机的结合在一起，DW和FP等只是书写代码的利器，只要你知道代码，用记事本也一样能做出精美的网页（真正的高手据说就是用记事本做网页），但对我们初学者来说，没有必要去记代码，只需知道利用DW或FP，能实现哪些操作，就象用WORD一样，画一条线就有一条线，画一个表格就有一个表格，在软件的演示窗口里，有着同WORD一样所见即所得的最后效果察看。因此，可以说，做网页入门很简单！可后面还有半句话：做好网页不简单！因为，一个好的网页，不单单是代码书写，更重要的是美工设计，内容的充实。虽然很多代码不需要一一手工书写，可有些代码的基本组织结构了解一些，还是对做网页大有帮助的。我们可以这样学习、研究代码：在用DW或FP中做了某一个操作，把效果与上面的代码窗口比较一下，就可以知道什么代码是实现什么效果的，还可以通过查看别人的网页的源代码分析学习。想学ASP网页的朋友们，有些基本代码是非记不可的。
现在很多做网页的人，都是用借鸡生蛋的办法做的网页，做法是从网上下载现成的网页模板，对模板稍加更改，替换下内容成了。当然，这也是新手们做网页速成的一种好办法。模板在很多有提供空间的网站都有下载。很多以前收录的网址，现在打开都没有用了，在这里，能提供给大家的，只有这些了。
1.源代码下载：要下载ASP源代码的可以到“中国站长站”去，网址：http://www.chinaz.com/download/，这是个比较权威的源代码下载点，在这里下到动网源码，说不定可以下到动网7.0 for SQL Server版本（excelhome的论坛就是用这个版本）。
2.网页图片及音乐等素材：http://www.dabaoku.com/sucai/shejilei/bj/
3.网页特效代码：推建一个小工具：“水晶情缘网页特效专家”，有1M，本来想发上来，太大了，算了，要的话，留下邮箱，我发过去。如，下雪的效果，鼠标滑动效果等，这里都有。
下面我把一些常用的写下来，以供大家参考：
DREAMWEAVER常用标记：（都是以前记的一些笔记了）
标记一般成对出现，一个表示特定代码部分的开始，另一个表示特定代码部分的结束(表示结束的前面带"/"符号)，但也不是绝对的，比如，<br>标记。基本的HTML标记：html、head和body必不可少。
1. <head>和</head>标记中仅包含网页标题(如<title>我的网页</title>)和程序脚本。
2. <body></body>标记中包含网页的全部内容。是网页的主体部分。
3. <center>和</center>：是中间内容居中标记；
4. <h2>和</h2>：从h1~h6，将文本标注为标题，通常要比正文粗大，h1最大；
5. <p>和</p>：段落标记，在行与行之间添加额外的空白行；
6. <br>：强行换行标记，插入单行，不需要封闭标记
7. 图象标记：<img src="aaa\bbb.gif" width="500" height="198" align="center">
align水平对齐(left、right或center)，valign垂直对齐(top，bottom或middle)，border边框宽度
alt="鼠标放在图片上时出现的提示文字"
8. <p><font size="3"><b>本行字符将以粗体显示</b></font></p>
9. <p><font size="3"><i>本行字符将以斜体显示</i></font></p> (<i>等效于<em>)
10.<p><font size="3" face="宋体" color="#RRGGBB">本行字符将宋体显示</font></p>
11. <a href="test.htm">点击此处文字打开链接的网页</a> ：该处文字有下划线标示
12. <HR>显示一长灰色细线，分割网页为上下两部分。可以只用单边。完整的如下：
<HR align=center width="100%" SIZE=1>显示一灰色矩形，SIZE为1时，宽为1(很细，可看作一直线)
13.<LI>在文字前出现一个圆点的项目符号</LI>，可单个使用，也可结合<br>使用
14.<OL type=2 start=1><li>标记</li><li>区段</li></ol>：控制项目序号及显示方式，如1,2,3
15.<UL>使该段文字首行和下面都缩进约两个字符</UL>
16.<BLOCKQUOTE>使该段文字整体都缩进约两个字符，可以多重使用<BLOCKQUOTE>
17.<SUP>这是上标字</SUP>，<SUB>这是下标字</SUB>，<U>这是加下划线字</U>
18.<TT>这是Windows的等宽字</TT>
19.<FONT SIZE=+1>字体放大一级</FONT>
20.<DL><DT>语言<DD>基础要素</DL>:“语言”显示为列表标题，“基础要素”显示为列表内容，自动缩进。
21.<DIV Align="Right">这是右对齐的段落一<P>这是右对齐的段落二<P></DIV>默认为左对齐方式。
表格及其标志：Align:水平，Valign:垂直。Align或Valign写在<TR >中时表该行的几个列都用同一方式。
22<BLINK>闪烁</BLINK>:标记中的文字实现闪烁效果，但并不适用于所有的浏览器。
23.<TABLE BORDER=1> <TR><TD>第一列第一栏</TD><TD>第一列第二栏</TD></TR>
<TR BgColor="yellow"><TD >第二列的第一栏</TD><TD>第二列的第二栏</TD></TR>
<TR><TD Align="Left" Valign="Center">水平:左对齐<br>垂直:居中</TD></TR></TABLE>
BgColor可写在<TABLE>、<TR>、<TD>中，分别为整个表格、整行、单一单元格的背景颜色设置。
以上是我以前笔记中收录的一些常用的标记，今天看到lfspecter大虾也发了一些关于网页的帖子，可以两边对照着看，侧重点各有不同，也许更有利于初学者的理解，链接如下：http://club.excelhome.net/viewthread.php?tid=78021
技巧篇：
1. 在<BODY>标签中可以规定整个文档的一些基本属性：
"bgcolor":指定html文档的背景色。
"text":指定html文档中文字的颜色。
"link":指定html文档中待连接超链接对象的颜色。
"alink":指定html文档中连接中超链接对象颜色。
"vlink":指定html文档中以连接超链接对象颜色。
"background":指定html文档的背景文件。 有两种方式表示颜色对象： <body bgcolor="green">或<body bgcolor="#00FF00">。文档主体部分可用颜色列表：black 黑色 Red 红色 Line 石灰色 Maroon 栗色 Gray 灰色 Silver 银白色 Navy 海军蓝 Olive 橄榄绿 Purple 紫色 Yellow 黄色Aqua 浅绿色 Blue 蓝色 Green 绿色 Fuchsia 紫红色 White 白色 Teal 暗蓝绿
2. 浏览器的状态列提示文字控制
(1).鼠标经过:<a href="tpage.htm" onMouseOver="window.status='相关提示'; return true">页面上鼠标经过的文字<a>
(2).改变状态栏提示文字：打开"Behaviors"行为编辑窗，单击"＋"按钮，选择"Set Text Set"下的"Text Of Status Bar"选项，然后在方框中输入自己的文字，例如"欢迎来到我的主页"等，单击"确定"即可。
3.链接控制：
a. 返回前页：使用OnClick="history.go(-1)"
返回主页：使用OnClick='top.location.href="../index.html"'
b. 链接提示:在链接语句中增加,如：去哪儿？ (在点击链接前注意看状态行显示的变化)
OnMouseOver="window.status='这里是 ...'; return true" OnMouseOut="window.status=''; return true"
c. 链接的不同方式:
在帧里显示：在链接处加target="main"语句，其中main为帧名
整页显示：在链接处加target="_top"语句
开新窗口：在链接处加target="resource window"语句，如<A HREF="index.htm" TARGET="resource window"></A>
d. 强制主页每次都不进行缓存，而从服务器上重读
在Head部分加<MEAT HTTP-EQUIV="Pragma" CONTENT="no-cache">
e. 自动刷新
定时刷新：<META HTTP-EQUIV="Refresh" content="10; URL=http://自己的URL">
幻灯片效果：语句类似上面，但在页面1中URL指向页面2，而页面2指向页面3 ... 页面n指回页面1，即可实现循环显示页面的效果。
f. 在某一个时间内自动链接到其他主页，这只需在〈title〉######〈/title〉之后加入下面这一行即可：
〈meta http-equiv="refresh" content="20; url=otherpage.htm"〉（"20"代表二十秒后连到另一个主页）
h. 在打开指定网页的同时打开另一指定网页'next.htm，只需在指定网页的body中加入指令onload：
<html><body onload="parent.banner.location.href='next.htm'">指定打开的一个网页内容</body>
4. 设置"添加到收藏夹"链接：
选中"添加到收藏夹"文字，在属性面板中的链接（Link）中输入："javascript:window.external.AddFavorite ('http://www.excelhome.net','学习之家')"。点击此链接时会弹出对话框，可以将你的主页地址加到收藏夹中。
5.文字移动动态效果：
1) 文字从右移到左边：<marquee><b>大家好</b>欢迎您经常光临！</marquee>
2) 让文字在固定的区域内出现从下到上的滚动效果：
例1:<table height=542 cellspacing=0 cellpadding=0 width=800 border=0>
<tr><td valign=center align=middle width=316 height=405>
<marquee scrollamount=1 scrolldelay=140 direction=up width=382 height=403><center>谨以此网站送给xxx
<font color=#ff0000></font></center><br>此处为长篇大论!</marquee></td></tr></table>
例2:<body><div align="center"><p><marquee aligh=left bgcolor=#FFFED7 direction=up behavior=scroll height=100
hspace=1 scrollamount=2 Scrolldelay=1 width=250 VSpace=1 loop=-1>
<font color="#FF0000" size="5" face="方正大黑简体">望 岳</font><br> <br>
<font color="#FF0000">岱宗夫如何，齐鲁青未了。<br>造化钟神秀，阴阳割昏晓。<br>汤胸生层云，决眦入归鸟，<br>会当凌绝顶，一览众山小。<br></font></marquee></p></div></body></html>
3) 在指定宽度内移来移去的文字代码：<TD height=20><P align=center><MARQUEE scrollDelay=120 direction=right
behavior=alternate width=150 height=12>产品导航</MARQUEE></P></TD>
6.E-mail链接：
选中字或图片，在属性中设置Alt为"给我来信"，链接为"mailt ketang.pc@goldhuman.com"，在浏览器中单击此图，就会启动发送邮件窗口。在链接地址前加"#"符号，可以在网页中不打开实际链接。
7.动画背景为透明：
选中Flash(gif)，在源代码</object></p>前加入代码：<param name="wmode" value="transparent">。或在swf文件属性栏里 "参数"输入wmode,value="transparent"。
8.浮动背景图象(主页内容向下滚动而背景图象不动的效果)：
(1).<body backgroud="image.jpg" bgproperties="fixed">
(2).在Dreamweaver中用「Text」-「Custom Style」-「Edit Style Sheet」-「New」-Redefine HTML Tag中选择Body，然后在Background中的Attachment里选fixed
9.滚动条换颜色：
默认的网页滚动条是灰色，在网页代码<head></head>里插入一对<style></style>标签，标签里写入下面的代码：
body {SCROLLBAR-FACE-COLOR:#3333FF;(立体滚动条凸出部分的颜色)
SCROLLBAR-HIGHLIGHT-COLOR:#505050;(滚动条空白部分的颜色)
SCROLLBAR-SHADOW-COLOR:#fc2400;(立体滚动条阴影的颜色)
SCROLLBAR-ARROW-COLOR:#666666;(上下按钮上三角箭头的颜色)
SCROLLBAR-BASE-COLOR:#333333; (滚动条的基本颜色)
SCROLLBAR-DARK-SHADOW-COLOR:#b4fc48} (立体滚动条强阴影的颜色)
后面的16位颜色值你可以随意更改，括号内是解释说明，在输入时请不要插入。
10.背景音乐:
body中加入以下任一个代码（建议为midi格式的）：
显示操作面板：在相应地方加:
<embed src="aladdin.mid" width="140" height="35" autostart=true controls="middleconsole">
不显示操作面板：在页中任意地方加<embed src="aladdin.mid" hidden=true autostart=true loop=true>
<bgsound src=音乐路径 loop=次数>－1为无数次
<embed src=音乐路径 width=0 height=0>
11.在Dreamweaver中轻松设置行间距：
用层叠样式表（CSS）来实现，在Dreamweaver中编辑层叠样式表不用编写代码，具体操作方法如下：
（1）在快速启动栏中点击层叠样式表按钮（"show css styles"按钮），在弹出的CSS Styles面板上双击（none）；
（2）此时，可看到弹出的Edit Style Sheet 面板，在该面板上按New按钮；
（3）再在弹出的New Style 面板上点取Redefine HTML Tag（重新定义HTML标记），再在Tag中选择"body"标记后按OK按钮；
（4）这时可看到弹出的Style dehinition for body 的对话框，在此对话框中可以设置"body"标记的许多属性，可以按你的意愿设置，但我们这里主要是要设置行距，所以在line属性输入框中填上行距的像素点数，现在流行的九号字，行距一般用12，按OK按钮返回到Edit Style Sheet 面板，此时已把"body"的行距设置好了；
（5）由于"body"中定义的行距对表格不起作用，所以再在Edit Style Sheet 面板上再按New按钮；
（6）再在弹出的New Style 面板上点取Redefine HTML Tag（重新定义HTML标记）再在Tag中选择"td"标记后按OK按钮；
（7）在弹出的Style dehinition for td 的对话框中设置td的行距，按OK按钮返回到Edit Style Sheet 面板；
（8）在Edit Style Sheet 面板上再按Ｄon按钮，至此所有设置结束，你在源代码检视窗中将看到如下代码：
<style type="text/css"> <!--
body { line-height: 12pt; font-size: 9pt}
td { font-size: 9pt; line-height: 12pt}
-→ </style> 有了这段代码，你在该网页上的所有文本的行距都确定好了，若不满意，可修改设置。
空间介绍：
1.免费的：
(1).首推网易免费空间，这是在看了http://csksoft.nease.net/game/stage4.htm和另一个朋友做的网页后的提示，首页有广告，但因为速度快，对用户没有时间限定，申请容易，所以还是第一个推建它了。但它附带的留言本的风格倒很中我的意，无广告，界面简单，层次分明。
(2).http://www.ik8.com/，这里有人用过，没有广告，但时间方面不知道能用多久。
(3).http://free.icpcn.com/index.asp：100M,申请时先看下论坛关于申请的方法吧，以前我用过，无广告。果果没申请成功。
(4).www.51.net：有名气的虎翼网，有广告且还要安装一个插件，烦，速度超快。
(5).国外的ASP空间：http://www.7host.com/free_hosting/free_hosting.asp，以前有申请成功过，这次有一个ACCOUNT空格不知道是什么意思？我总写不对内容。
2.收费的：我用过的收费的只有两个，所以也只能向大家介绍这两个：
(1). 宁波海博网络技术发展有限公司：http://www.haibo.com，速度快，很稳定。
(2).多来米：http://diy.lycos.com.cn/，前一阵子扫黄网页受干扰，一次黑客入侵，不过数据后来都恢复了。
上传工具:
有的空间只能用WEB方式上传网页，这种方式就是在网页上，一个一个文件的指明路径，一个一个文件的上传，这样，对于文件或图片多的网页，上传是非常累的。
一般空间都能支持FTP方式上传，这种上传方式是借助于某个工具软件，多个文件或文件夹同时上传，支持断点续传。常用于网页上传的软件有CuteFTP、FLASHFXP和Dreamweaver，这三个文件上传方式差不多，差别在于FLASHFXP可以针对服务器的要求可能设置一些额外的参数，实际上这三个差不多。下图为CuteFTP 5.0 XP软件上传的界面。左边为本地网页所在的目录，右边窗口为服务器中为我开通的空间目录，在“站点设置”中设置好FTP主机地址、用户名、密码、连接端口后就可以开始上传网页了。主机地址和连接端口在申请空间后，服务器供应商会主动告诉你的，连接端口一般用默认的21就可以了。上传时，把要上传的目录，从左边拖放到右边就可以了，就这么简单。
[此贴子已经被作者于2005-1-12 20:58:49编辑过] | 
沪公网安备 31011702000001号 沪ICP备11019229号-2
发表于 2005-1-9 11:27
楼主
发表于 2005-1-9 12:02
![[分享]网页制做入门](https://files-c.excelhome.net/forum/dvbbs/2005-1/200519185843331.gif "[分享]网页制做入门")