构成网页的元素.docx
《构成网页的元素.docx》由会员分享，可在线阅读，更多相关《构成网页的元素.docx（78页珍藏版）》请在冰豆网上搜索。
构成网页的元素
Dreamweaver3上手指南
定义网站
在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地对站点文件进行管理。
【定义的方法】
①在站点窗口的下拉菜单选择DefineSites；
②选择命令菜单Site中的NewSite选项。
进行基本设置，回到站点窗口。
新建页面
方法一：
选择菜单上的File>NewFile
方法二：
在本地目录的任意区域单击右键，选择NewFile
新建一页面后，可以即时修改文件名，后缀是htm或html；一般网络服务器默认的网站首页名字是index.htm。
双击新建的index.htm，进入编辑窗口，开始制作属于你的第一个网页。
设置页面属性
选择命令菜单中的Modify>PageProperties，对话框中显示：
①Title（页面标题）：
就是我们在浏览网页时，在浏览器最左上角看到一行小字。
务必要养成为每一页都设定一个标题的习惯，这既便于访问者的浏览，也有助于你在网页编辑的过程中区分不同的页面。
②Background（背景颜色）：
默认为白色，后面“#FFFFFF”是以16进制形式显示的RGB色值。
DW3的调色板比Frontpage的丰富得多，而且还可以在屏幕上直接取色。
③Text（文字颜色）：
白底黑字是最常见的配色方案。
④LeftMargin和TopMargin：
设置页边距，一般都设置为“0”以方便于网页的编辑。
一切设置完毕后，点击OK结束。
创建第一个网页
此时光标处于编辑窗口的最最左上角，输入你喜欢的任何文字，例如：
“欢迎来到”，并且在文字的前方加空格及回车，使文字接近于屏幕的中央。
【Tips】是不是觉得很奇怪，怎么总是不能插入空格？
其实这是DW3的“特色”之一——不能连续插入半角空格。
解决的办法是用全角空格代替。
最好，选取菜单File>Save保存页面，然后用浏览器打开该页面查看效果。
【Tips】一个快速查看效果的方法是在编辑状态下按F12预览。
用图片美化你的页面
美化页面，最简单直接的方法是在网页上加一些图片。
点击对象面板上的
按钮，弹出对话框，选择需要插入的的图片，如果被选择的文件，是网站目录以外的文件，系统就会问你是否将图片复制到网站内，答案当然是“Yes”，否则网页传上服务器后，图片就不会被显示，因为图片根本就不在网站里面。
接着，选择图片在网站的存放位置，可以将所有图片另存放在同一个目录，这样可以方便查找。
也有人喜欢将图片和网页文件混放在一起，看各人习惯，没有什么特别好，也没什么特别不好。
打开属性面板（Ctrl+F3），显示：
1图片的缩略图及图片的大小（8K）；
2图片的长宽，如果图片长于宽跟原图的大小不一致的话，这里的数字会用粗体显示；
3Src是图片所在的位置；Link是该图片对应的超链接；后面的两个按钮
，前者可以拉出一个箭头，直接将图片或链接指向文件夹的某一个文件，后者则是按照传统的方法打开文件夹去寻找某一个文件；Target则是链接的打开位置；
4Align是图片的对齐方式，这是最基本的网页排版方式之一；Alt是图片的说明，假如我在这里输入：
“你猜到了吗？
”，在浏览的时候，将鼠标移到图片上，就可以看到这些说明；Border是图片的边框宽度；
5
图片的置左、居中、置右；
6Map用于在一个图片上的不同区域制作多个不同链接。
文字上的小花招
适当的图片，可以令网页生色不少，但也不要忘记，文字，才是一个网页最基本的要素。
选取一段文字，显示属性窗口：
1Format：
文字的格式；
2选择文字的字体，这里可以选择的全是是英文字体，如果想选择其他字体，选择最底的一项，EditFontList...；
3Size：
文字的大小，数字越大，文字也越大；
4选择文字的颜色；你不仅可以在调色版上选取颜色，还可以选取屏幕上的任意颜色。
右下角的
，可以去掉文字上的颜色，使其显示为默认颜色值；而点击
，可以在扩展调色版上选取颜色，在这里，不仅可以选取更为丰富的颜色，好可以通过填写RGB数值来选取颜色并将该颜色值保存起来方便以后调用；
5
分别设置字体为粗体和斜体；
6
设置文字的置左、置中、置右；
7
设置文字段落标号。
样式表使文字更添风采
上面讲到的，都是一些最基本的对文字的设置，如果想在文字上玩出更多的花样，就需要借助样式表的帮忙了。
现在我们尝试制作一个简单的样式表，让页面上的文字产生更多的变化：
在编辑状态，按F7，可进入样式表对话框（CSSStyles），点击右下角的
，新建一个样式，在Name处为样式起一个名字，DW默认会在名字前一个小数点，目的是避免与其他HTML混淆。
例如在这里起的名字是“myfont”，按OK后，再接着的对话框中设置Size（文字的大小）、Line（行距），可以得到所谓的9磅字体（9pt）。
当设置完毕后，回到样式表对话框，可以看到一个叫“myfont”的样式已经被加入了。
接着，选取一段文字，再在样式对话框选择myfont，这段文字即被设置为9磅字体了，这是宋体在不变形的前提下能显示得最小大小，在网页制作中被广泛采用。
除了9磅字外，还有一种10.4Pixel的字体，是介于12pt和9pt之间的，也被经常使用到。
Dreamweaver3一学就会
界面篇
正式开始使用Dreamweaver之前我们先来熟悉一下Dreamweaver的操作界面。
这些界面的名词我们以后会经常提到。
Dreamweaver由两大部分组成：
站点管理器和页面编辑器。
页面编辑器用于制作网页，站点管理器用于对网站内的网页和相关文件进行管理。
制作网页主要在页面编辑器中进行。
Dreamweaver提供了丰富的面板提高我们的工作效率。
·Objects对象面板用于在页面中插入各种元素，例如表格图片等等。
·Properties属性面板用于设定元素的属性。
例如表格的宽高等等。
·快速启动栏将一些常用的模块放在其中，可以进行模块间的快速切换。
例如面板中的一个就是站点管理器按钮，单击启动站点管理器。
·面板组中存放着多种面板。
Dreamweaver的各种功能都可以在相应的面板中找到。
·时间轴：
Dreamweaver独有的网页动画制作工具。
注意这里的动画可不是flash而是完全用Dhtml写的网页动画。
建站篇
千里之行，始于足下。
在做网页之前第一步就是要学会做网站。
作为一个网站，里面有很多的图片、网页文件甚至Flash动画，如果不进行管理归档，分散在硬盘的各个地方就无法进行网页发布了。
因此建网站就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面以便进行网页的制作和管理。
下面我们就来用Dreamweaver3建立一个网站。
启动Dreamweaver
进入Dreamweaver，一般首先会进入页面编辑器。
在页面编辑器中，选择菜单Site>Newsite。
系统弹出站点定义对话框。
下面我们需要做这几步工作：
·Sitename：
填上网站的名称。
·LocalRoot：
站点本地目录。
在这个地方，您必须给您的网站在硬盘上指定一个目录。
以后所有的网页文件就都放在该目录里面。
相当于造房子先选址一样。
单击黄色文件夹，系统弹出对话框。
选中RefreshLocalFileListAutomatically选项：
自动刷新本地文件列表。
这个功能有了以后，当你往网站的目录中复制文件的时候，网站文件列表会自动的刷新。
选中Cache选项：
这个选项可以自动跟踪网站内的文件链接情况。
当你的文件改名、移动、删除以后。
原来指向这个文件的链接会段掉。
有了Cache就可以及时发现问题，并加以纠正。
OK，所有的工作都完了。
一个空白的网站就做好了。
站点管理器
下面我们来仔细观察站点管理器。
网站内所有的文件都会显示在管理器的右侧。
做网页的时候会用到很多的图片，把所有的图片文件都归档在一个目录里这是一种比较好的习惯。
在站点管理器右侧空白处，单击右键弹出菜单。
选择NewFolder新建目录，输入目录名即可。
一个网站建立好以后，下次启动Dreamweaver时。
会自动打开这个网站，那么您所做的每一个文件都保存在这个站内。
如果您建立了很多网站的话就要确保您要的网站是否打开了。
可以在页面编辑器中选择打开的网站。
使用菜单Site->Opensite。
可以用快速启动栏快速进入站点管理器。
在快速启动栏中第一个按钮就可以快速切换到站点管理器。
在页面编辑器的右下脚，也有一个袖珍的启动栏。
可以同样操作。
制作一个简单的网页
Step1：
插入标题图片
进入页面编辑器。
在对象面板中单击
按钮。
（如果对象面板看不见，可以按Ctrl+F2打开面板）系统弹出插入图片对话框。
在硬盘中找到这个图片。
选中后，对话框右侧会看到这个图片的预览图。
按“Select”按钮确定。
系统弹出一个信息框，大致意思是说要求插入图片后保存网页。
按OK确定。
接下来的对话框提示，这个图片不在站点目录内，是否要将这个图片文件复制到站点内。
由于和网站相关的所有文件都必须放在站内！
所以，理所当然，选择“是”。
系统弹出复制文件“Copyfileas”对话框。
为了文件管理的方便，可以把这个图片放在“images”目录下面。
直接按“保存”即可。
注意文件名不能用中文，否则要出现一些意想不到的情况。
一个标题图片就插入完毕了。
接下来要让标题图片居中安放。
单击图片，在属性面板中（如果面板不出现，按Ctrl+F3打开）选择
按钮将图片居中。
（如果面板中看不见这个按钮，是因为面板没有展开。
可以按面板右下角的
按钮展开面板）。
Step2：
插入机器猫图片。
回车换一行，按照上面的步骤插入机器猫图片。
这张图片要求不用居中。
如果图片继承上面的格式居中。
可以通过属性面板中的
按钮让其居左安放。
Step3：
输入文字
接着按照样例输入文字。
文字并没有按照期望的那样排在图片周围。
而是出现在图片的下方。
这是因为没有设置图片的对齐方式。
单击机器猫图片，在属性面板中，Align对齐方式选择Left（图片出现在文字的左边）。
图片的周围会出现一个黄色的标记。
这是Dreamweaver专用的对齐符号。
不会影响任何显示和效果。
文字就都按照我们期望的方式和图片对齐了。
下面设置文字的格式。
选中第一第二行文字。
在属性面板中将Format字体格式设置成为Heading3标题三号。
并选中“B”将字体变粗。
选中第三行，在属性面板中将Format字体格式设置为Heading2标题二号。
选中“I”将字体变斜。
设置“机器猫”的颜色。
首先选中这三个字，在属性面板中，单击颜色盒，在弹出的颜色盒中用吸管吸取颜色即可。
同样设置其他后面文字的颜色。
最后的三行文字想让他们前面带有项目符号的小圆点。
单击属性面板中的
按钮。
选中的文字就带有列表符号了。
Step4：
设置网页的标题和背景图片
选择菜单Modify>PageProperties。
系统弹出PageProperties页面属性对话框。
在Title域中输入标题文字“机器猫的小窝”在BackgroundImage处单击Browse按钮，系统弹出图片选择对话框。
选中背景图片，如果图片在站外将其保存在站内。
按“OK”关闭对话框。
网页的标题和背景图片设置完毕。
Step5：
预览网页
在页面编辑器中按F12预览网页效果。
嗯？
怎么凡是图片的地方都是一个叉呢？
原因很简单，在前面插入图片的时候要求我们将网
升级会员 