(构成网页的元素.docVIP

Dreamweaver3上手指南 定义网站 　　在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地对站点文件进行管理。 　　【定义的方法】 　　① 在站点窗口的下拉菜单选择 Define Sites； 　　② 选择命令菜单 Site 中的 New Site 选项。 进行基本设置，回到站点窗口。 新建页面 　　方法一：选择菜单上的 File New File 　　方法二：在本地目录的任意区域单击右键，选择 New File 　　新建一页面后，可以即时修改文件名，后缀是htm或html；一般网络服务器默认的网站首页名字是index.htm。 双击新建的index.htm，进入编辑窗口，开始制作属于你的第一个网页。 设置页面属性 　　选择命令菜单中的 Modify Page Properties，对话框中显示： 　　①Title（页面标题）：就是我们在浏览网页时，在浏览器最左上角看到一行小字。务必要养成为每一页都设定一个标题的习惯，这既便于访问者的浏览，也有助于你在网页编辑的过程中区分不同的页面。 　　② Background（背景颜色）：默认为白色，后面“#FFFFFF”是以16进制形式显示的 RGB 色值。DW3 的调色板比 Frontpage 的丰富得多，而且还可以在屏幕上直接取色。 　　③ Text（文字颜色）：白底黑字是最常见的配色方案。 　　④ Left Margin 和 Top Margin：设置页边距，一般都设置为“0”以方便于网页的编辑。 一切设置完毕后，点击 OK 结束。 创建第一个网页 　　此时光标处于编辑窗口的最最左上角，输入你喜欢的任何文字，例如：“欢迎来到 ”，并且在文字的前方加空格及回车，使文字接近于屏幕的中央。 　　【Tips】是不是觉得很奇怪，怎么总是不能插入空格？其实这是 DW3 的“特色”之一——不能连续插入半角空格。解决的办法是用全角空格代替。 最好，选取菜单 File Save 保存页面，然后用浏览器打开该页面查看效果。 【Tips】一个快速查看效果的方法是在编辑状态下按 F12 预览。 用图片美化你的页面 美化页面，最简单直接的方法是在网页上加一些图片。 点击对象面板上的按钮，弹出对话框，选择需要插入的的图片，如果被选择的文件，是网站目录以外的文件，系统就会问你是否将图片复制到网站内，答案当然是“Yes”，否则网页传上服务器后，图片就不会被显示，因为图片根本就不在网站里面。接着，选择图片在网站的存放位置，可以将所有图片另存放在同一个目录，这样可以方便查找。也有人喜欢将图片和网页文件混放在一起，看各人习惯，没有什么特别好，也没什么特别不好。 　　打开属性面板（Ctrl+F3），显示： 1 图片的缩略图及图片的大小（8K）； 2 图片的长宽，如果图片长于宽跟原图的大小不一致的话，这里的数字会用粗体显示； 3 Src是图片所在的位置；Link是该图片对应的超链接；后面的两个按钮，前者可以拉出一个箭头，直接将图片或链接指向文件夹的某一个文件，后者则是按照传统的方法打开文件夹去寻找某一个文件；Target则是链接的打开位置； 4 Align是图片的对齐方式，这是最基本的网页排版方式之一；Alt是图片的说明，假如我在这里输入：“你猜到了吗？”，在浏览的时候，将鼠标移到图片上，就可以看到这些说明；Border是图片的边框宽度； 5 图片的置左、居中、置右； 6 Map用于在一个图片上的不同区域制作多个不同链接。 文字上的小花招 　　适当的图片，可以令网页生色不少，但也不要忘记，文字，才是一个网页最基本的要素。 　　选取一段文字，显示属性窗口： 1 Format：文字的格式； 2 选择文字的字体，这里可以选择的全是是英文字体，如果想选择其他字体，选择最底的一项，Edit Font List...； 3 Size：文字的大小，数字越大，文字也越大； 4选择文字的颜色；你不仅可以在调色版上选取颜色，还可以选取屏幕上的任意颜色。右下角的，可以去掉文字上的颜色，使其显示为默认颜色值；而点击，可以在扩展调色版上选取颜色，在这里，不仅可以选取更为丰富的颜色，好可以通过填写RGB数值来选取颜色并将该颜色值保存起来方便以后调用； 5 分别设置字体为粗体和斜体； 6 设置文字的置左、置中、置右； 7 设置文字段落标号。 样式表使文字更添风采 　　上面讲到的，都是一些最基本的对文字的设置，如果想在文字上玩出更多的花样，就需要借助样式表的帮忙了。 　　现在我们尝试制作一个简单的样式表，让页面上的文字产生更多的变化： 　　在编辑状态，按F7，可进入样式表对话框（CSS Styles），点击右下角的，新建一个样式，在Name处为样式起一个名字，DW 默认会在名字前一个小数点，目的是避免与其他