原创CSS网页布局二HTML
上节视频我们一起讨论了Dreamweaver 8 的使用,创建网页,向网页中插入普通文字,图象,视频,表格,还学会了应用表格进行简单的布局,以及利用超级链接将多个网页组合起来形成网站.
在几年前,许多的个人网站就是这样创建起来的.
我们今天一起学习的实际同上节教程的内容没有什么区别,依旧是创建网页,添加文字,图片,表格,超级链接.但我们今天不是使用可视化图形工具[DW]通过点击鼠标来创建，这样是小儿科.我们要学习最基础的“网页编程”语言.我们将使用名为HTML/XHTML的“语言”来构建网页.
首先,我们先不用DW来创建网页，我们使用记事本.
新建一个记事本文件,将其文件名重命名为.htm或.html.[这个我们上节说过,网页文件的后缀就是这样的.]
然后我们先内添加普通文字,添加方式和DW一样,直接输入文字内容保存然后浏览该网页就成了.
我们知道网页还需要图片,不然太枯燥了,如果添加图片？这里就要用到HTML/XHTML语言了.
<img src=””></img>
先输入上面的代码,这个代码的作用就如同你使用DW向网页中添加图片时点击按钮.我们知道要添加图片,必须指定图片的路径.我们先以本地图片为例.
本地图片：baidu_logo.gif
我们把图片直接写进代码的src=””其中的双冒号里面.代码构建成.
<img src=” baidu_logo.gif”></img>
OK,我们保存,浏览,怎么样.HTML/XHTML是不是很简单？
如果添加网络图片呢？想想我们上节是如何添加网络图片的？需要一个网络图片的路径.如：
http://www.3800hk.com/hy07/images/a-2.jpg
我们同样写入代码里src=””的冒号中间,代码构建为：
<img src=” http://www.3800hk.com/hy07/images/a-2.jpg”></img>
那么？如果添加视频呢？
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400">
<param name="movie" value=" " />
<param name="quality" value="high" />
<embed src=" " quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed>
</object>
代码比较长,不过不需要害怕. 我也记不住,后来我们再教大家如何不用记忆这样BT的代码.我们先想如何使用这个代码.
我们知道要添加视频,首先需要一个视频.先来个本地的.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400">
<param name="movie" value="gaoxiao-yidong.swf " />
<param name="quality" value="high" />
<embed src=" gaoxiao-yidong.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed>
</object>
网络的大家肯定都会了吧？
http://player.youku.com/player.php/sid/XOTc2NDYzMzY=/v.swf
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400">
<param name="movie" value="http://player.youku.com/player.php/sid/XOTc2NDYzMzY=/v.swf
" />
<param name="quality" value="high" />
<embed src=" http://player.youku.com/player.php/sid/XOTc2NDYzMzY=/v.swf
" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed>
</object>
现在看怎么添加表格.
<table><tr><td></td></tr></table>
我们试着看看加入这个代码会有什么效果.
为什么没有反映？还记的我们上节用DW创建表格时为表格设置1象素的边框了吗？如果没有边框，自然看不见表格,我们需要修改上面的代码,为表格加上边框.
<table border=”
有了,但是表格好小啊,怎么变大？为它设定宽度和高度.
<table border=”
这个表格只有一行一列.我们来增加行数,
<table border=”
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
看按效果,还是没变化,因为单元格里没内容,我们加点内容就可以了.比如一个1.
<table border=”
<tr><td>1</td></tr>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
</table>
怎么增加列呢？
<table border=”
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
通过上面代码我们知道,表格的代码应该由行和列组成.行包含列.其中行是tr,列是td.
有点晕没？…别担心,咬咬牙,再坚持几分钟,谜底将被揭穿（柯南：因为真相只有一个…）
文字,图片,视频,表格.我们上节就是用这些制作了一个网页.最后我们用超级链接将几个网页连接起来.形成网站.
我们再看HTML/XHTML代码中的超级链接.视频,表格的代码都好BT啊,希望这个不会太复杂.
<a href=””></a> 如你所所愿
要链接网页,首先我们需要一个网页的路径.可以链接我们本地的网页,也可以链接网络上其他的网页.
<a href=”2.html”>本地网页</a>
然后链接黑鹰
<a href=”http://www.3800hk.com”>黑鹰</a>
呼… 终于完了..我们休息下..大家可以暂停下视频,喝口水,成年人可以去干点其他消遣活动.比如…刮刮胡子…
图片代码：<img src=””></img>
视频代码：
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400">
<param name="movie" value="http://player.youku.com/player.php/sid/XOTc2NDYzMzY=/v.swf
" />
<param name="quality" value="high" />
<embed src=" http://player.youku.com/player.php/sid/XOTc2NDYzMzY=/v.swf
" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed>
</object>
表格代码：
<table border=”
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
超级链接代码：
<a href=””></a>
我们现在知道了上面这些代码就是HTML/XHTML代码,作用是为网页增加元素的.或者说通俗些,就是制作网页的代码.我们试着总结下这个代码的特点.
⒈<> - 所有代码都是使用<.>来开始和结束的.
⒉所有代码开头和结尾都一致,结尾加个/.
⒊似乎代码后面还能加空格,然后加其他代码来为网页元素进行一些设置.
我们分析的一点也没错,HTML/XHTML就是这样简单.不过,为了我们以后能利用现在所学的知识进公司,或者同别人交流,我们需要知道一些行话,也叫术语,这样不会被人当做土捶…
拿<img src=””></img>来说：
其中img我们叫其为标签,然后标签后面加个空格的src我们称呼为img标签的src属性,属性我们可以理解为[如汽车的颜色就是其属性.]属性需要有属性值,属性值用=来传递给属性,属性值还需要用双引号包含起来.
恩,我们来利用现在所学的知识,来手动编代码创建网页,然后将多个网页整和成网站,就和上节教程一样.
现在,我们看看DW的代码视图.看见没有,实际上,DW的作用就是帮助我们来书写这些恶心人的代码.
至于为什么DW创建的代码有<html><head><body>等标签,我们下节教程再看.
计算机文件
计算机硬盘里除了文件夹就是文件.
计算机文件由3部分组成,前缀[文件名,我们可以任意修改起名] 中间一个点号 后缀[计算机用来区分文件类型的预定义标记] 这里大小写不区分.
比如：qq.exe 看俺七十二变.mp3
这里可执行程序的后缀是exe,比如我们经常用的QQ,还有一些游戏,他们都是可执行程序,因为后缀都是exe，当然,木马,病毒的后缀也是exe… 他们也是可执行程序.
而我们听的音乐则大多数是mp3,当然还有些可能是wma等等.
网页也是计算机文件,我们说计算机上除了文件夹其余都是文件.网页自然也不例外.网页自然也满足计算机文件的三要素.前缀,点号,后缀.其中前缀我们可以任意命名,但我们一般不将其命名为汉字.后缀则可能是：.htm或.html.[或许是其他后缀,但我们现在仅了解这2个就行了.]
客户端与服务端
我们从简开始,在网吧,我们要玩一个本地游戏,如红色警戒,首先需要选择联网模式.然后再由其中一台计算机建关[我们一般叫其主机],然后想一起联机进行游戏的朋友进入主机,并且需要选择接受,最后主机选择开始游戏.
在这里,我们需要从其中抽象出3个名词,网络,服务端,客户端.
网络,也就是多台可以互相收发信息的计算机组成.其中,可以是象一个网吧这样的小型居域网,只需要几根网线连接.也可以是象因特网这样大型的广域网一样实现全球连接.
服务端,在网络中的某台计算机提供一些供网络中其他计算机[相对服务端我们称为客户端]享受的服务,如游戏服务器,音乐服务器,电影服务器,下载服务器,FTP服务器,网站服务器.
本地文件与网络文件
有了上面的知识,相信理解本地文件与网络文件很简单.本地文件也就是我们计算机上保存的文件,网络文件则是网络中某台计算机硬盘上存储的文件.
本地路径与网络路径
文件在我们本地硬盘存储,而硬盘很大,我们要存放的文件又许多,如果直接存放,我们查找某个文件很难,因此,一般会将硬盘分区,分区后依旧很难满足我们多个文件的存放,又会在各个分区里建立文件夹,然后存放,或者在文件夹里再建立文件夹.这样,就有了路径的概念,用来标记我们计算机上某个文件在硬盘中的位置.本地路径则是类似C:\windows\ system32\ notepad.exe的格式的路径,我们看到路径就明白原来notepad.exe程序[也就是我们经常使用的记事本]存放在C盘的windows目录下的system32目录下面.方便我们查找和使用.而网络路径,我们当然会想到在本地路径前加个标识,如 网络计算机A\C:\windows\ system32\ notepad.exe 想法很正确,事实上差不多.网络上的标识用域名来实现, 网络计算机A的标市可能是 www.baidu.com 那么就换成了www.baidu.com\C:\windows\ system32\ notepad.exe 很象了,再减去一个盘符, 就正确了. www.baidu.com\windows\ system32\ notepad.exe 因为计算机上将 域名直接对应的是某个盘符. 所以浏览 www.baidu.com 实际就是在访问 网络计算机A\C:\ .
这些理论知识,确实很复杂和枯燥,远不如直接做个看上去很”闪”的网页来的有趣,但叉子认为,没有扎实的基本功,便犹如空中楼阁,一切都是虚幻的…
仿站咨询扫二维码
仿站教程推荐
- 相关链接：
- 教程说明：
原创CSS网页布局二HTML
。
