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