用Dreamweaver 创建网站详细步骤

一、定义网站1 .在任意根目录下创建名为MyWeb的文件夹(在此为e盘)。 备注：网站使用的文件都必须是英文名称。打开Dreamweaver，然后选择“站点-新建站点”以打开对话框。 在站点名称中输入站点名称(中文可用)，然后在本地根文件夹中选择刚才创建的文件夹(E:web )。 然后确定下来就行了。注：当您重新打开Dreamweaver时，系统会自动搜索刚才配置的站点。 如果有多个站点，可以从菜单中的“站点-打开站点”选择。二、制作页面1、右键单击本地文件夹E:MyWeb下空白的“新建文件”，创建默认文件名为untitled.htm的页。 htm表示该网页文件是静态的HTML文件。 将名称更改为index.htm。 站点第一页的名称通常是index.htm或index.html。 其他页面的名字可以自己取。双击index.htm进入页面的编辑状态。 在标题空间中输入网页名称，右键单击页面属性以打开“页面属性”窗口。 在此，您可以设置站点的标题、背景色和背影图像、超链接的颜色(通常为默认颜色)，否则可以保留默认颜色。3 .此时，光标位于左上角，可以输入“欢迎来到主页”等词语。 选择文本，使用菜单“窗口/属性”打开“属性”面板，将文本大小设置为6，然后将文本居中，并在文本之前用几个回车将文本居中。4 .要选择字体，请选择字体的最后一项。 编辑字体列表。 然后，在对话框中选中，在“可用字体”栏中选择要添加到字体列表中的字体，单击中间的按钮即可添加。网页上最常用的是宋体字。 不要在列表中添加特殊字体。 因为没有安装在其他计算机上就看不见。 如果需要的话，先做好照片再用。 在网页上加空格的方法是将输入方式设为全角。 在网页上换行的方法是shift Enter。 只要按Enter，段就会改变。三、在页面上追加图像1、右键点击本地文件夹E:MyWeb下的空白处的“新建文件夹”，就能创建包含照片的文件夹，可以更改为tu或pic或images。2 .在菜单“窗口/对象”中打开“对象”面板，单击“插入图像”，然后在对话框中选择要插入的图像。 “要将此文件复制到根文件夹吗？ 对话框，您必须选择“是”保存到刚创建的文件中。3、选择该图像，打开属性面板，在上面命名图像，重新设定图像的高度、宽度，可以拖动图像角上的点来改变尺寸。 如果在拖动角点的同时按住shift键，图像将保持纵横比。 要恢复原来的大小，请单击右下角的“重置大小”按钮。4、“链接”可以直接在这里输入地址。 “替代”是图像的说明，用鼠标指向图像中显示的文本。“边框”是图像边框的宽度，“对齐”是对齐方式。四、增加超链接1 .给文字加上链接。例如，在页面上输入“我的文章”进行选择，打开属性面板，然后在“链接”栏中选择要链接的页面。 下面的“目标”是self打开的新窗口，而不是当前打开的窗口，或者选择blank打开新窗口。2 .向图像添加链接和上面文本中的链接一样，插入图像，然后在属性面板中选择其中一个链接。 图像可以建立各种各样的链接。 方法是，在属性面板的“地图”项目下，单击正方形后光标变成十字，图像上绘制蓝色矩形的热区域，此热区域的链接目标设定为属性面板，并显示鼠标指针。 同样，如果用圆来设定热区域，则可以在该图像上设定其他链接。添加电子邮件链接。选择要添加电子邮件链接的文本或图像，打开属性面板，并在链接栏中输入电子邮件地址。 mailto:电子邮件地址的格式如下。 请注意正中间没有空间。4、浏览器无法打开文件，例如链接exe、Zip等，阅览者点击该链接，就能实现文件的下载和在线播放功能。五、表的使用1 .点击插入/表，打开表面板进行设定。 “填充单元格”是单元格内部和内容之间的距离，“单元格间距”是单元格之间的距离，单位是像素。2、插入表格后，点击表格框，就能选择整个表格。 可以在以下属性面板中进行各种设置：3 .将光标移动到其中一个单元格时，显示的属性面板是单元格的属性面板。 还可以对单元格进行各种操作。 背景色、背景图、框线、结合、分割等。六、关于表的其他操作(1)制作细线表的原理：1 .选择整个表，将背景设定为黑色(表的线条颜色)。2 .选择所有单元格并将背景设置为白色。(2)自动格式化表格1、先做好表格，然后再检查。2 .选择菜单的命令/格式表。 可以从其中选择几个预先设定的表格样式。(3)一个像素的分割条插入1，1行1列，宽200像素，边界空白0的表。2 .选择表，将表的高度设定为1像素，设定背景色(所需线的颜色)。3 .切换到代码和设计窗口，删除代码。七、用表格构建完整的页面(1)网页的顶部(一般包括图标、广告、导航菜单)创建一个1、1行2列、宽760像素、边框和边距为0的表。2、检查表格，将配置方式设定为中央对齐，将背景色设定为#3366CC。3 .将光标置于左侧单元格中，横向左对齐，纵向上对齐，插入图像。 通常，这里会插入网站图标logo。4 .将光标放在右边的单元格上，宽度500，横向对齐，纵向对齐，插入图像。 一般是网络广告banner。5、把光标放在完成的表后面，/插入表，做成1行1列、宽760像素、框和边距0的表。6 .选择刚创建的表格，将排列设置为中心对齐，将背景色设置为#005173。7 .在此表中依次插入多个图像，设为导航栏菜单。(2)页中央部(左栏列表、中间网站新闻、右栏列表)1、在导航栏表后面插入/表，创建1行3列、宽760像素、边框和边距0的表。 将阵列设置为中间对齐，将背景颜色设置为#FFFFFFF。2 .将光标置于左侧单元格中，将宽度设置为18%，水平方向中央对齐，垂直方向上对齐，插入图像，并插入导航栏。3 .将光标置于刚插入的图像上，/插入表，插入12行1列、宽90%的表。 将单元格间距设置为1，背景颜色设置为#CCCCCC。4 .将光标置于表的第一个单元格上，将高度设置为20，将背景色设置为#FFFFFF。 插入/图像，插入导航文本前面的小点。 同样地设定其他11个单元格，就完成左列的分类列表。5 .将光标置于主体表中央的单元格上，将宽度设置为66%，水平对齐中央，垂直对齐上端，然后插入/图像，插入导航栏。6 .将光标置于图像上，插入/表，插入4行1列、宽95%的表。 将单元格间距设置为1，背景颜色设置为#CCCCCC。7 .将光标置于表的第一个单元格上，拖动鼠标以选择所有四个单元格，将高度设置为60，将背景色设置为#FFFFFF。8 .将光标置于主体表右侧的单元格中，宽度设置为16%，水平中央对齐，垂直上端对齐，插入插入/图像和导航栏。9 .将光标置于图像上，插入/表，插入7行1列、宽90%的表。 设定间隔为1，背景色为#CCCCCC。10、按住Ctrl键，用鼠标点击插入表格中的第1、3、5、7个单元格，设其高度为55，背景色为#FFFFFF。选择第11、2、4和6个单元格，将高度设置为6，背景颜色设置为#FFFFFF。12 .切换到源代码窗口，并删除第二、四和六个单元格中的空格符号“”。(3)网页的下部(一般包括着作权信息和其他相关内容)1 .将光标置于主表格上，插入/表格，创建宽760像素、边框和边距为0的表格2行2列。2、检查表格，将配置方式设定为中央对齐，将背景色设定为#3366CC。3、将光标置于表第一行左边的单元格上，将宽度设置为50%，横向设置为默认值，纵向设置为基线，背景色设置为#FFFFFF，输入着作权信息，使内容的颜色变得自由。4 .将光标置于表第一行右侧的单元格中，插入/图像，插入圆角图像，然后输入Email，将大小和颜色设置为1和#FFFFFF。5、插入/表格对象/文本字段和文本字段，可以自由插入宽度。6 .插入/图像和GO图像。7 .设置页面的属性。 单击“更改菜单”“页面属性”，在标题栏中输入标题以选择背景图像，并将顶部边界设置为0。将整个页面的部分汇总到不同的表中，可以缩短浏览器读页面的时间。 浏览器必须阅读整个表才能显示内容，所以最好不要在整个表中加框。八、用版面设计表构筑完整的页面1 .单击“插入/布局”后，内部的“布局视图”按钮将切换为“布局视图”状态(默认为标准视图)。 也可以使用菜单显示/表格视图/布局视图访问。2 .首先单击“绘制布局表”按钮，在页面上像图纸一样创建布局表。3、如上例所示，首先制作页面的顶部、中部和底部的大表格。4 .再点击“绘制布局单元格”按钮，在已经绘制的布局表中绘制布局单元格。5、回到标准视图，在分割的表格中插入嵌套的小表格，再对页面进行细化，就能完成整个页面的设计。请把整个页面放在大的版面设计表里。 因为这种页面的阅览速度很慢。 必须根据页面的布局和内容分割多个布局表，并在其中分别插入布局单元。九、层的使用1 .按一下插入/图层。 您也可以单击图标，然后拖动鼠标来创建层。3 .选择创建的层并显示属性面板。 默认情况下，“图层编号”和“标签”都使用。 “层号”是编程时必要的，我们现在不一般使用。 “上”是距页面上边界的距离，“左”是距左边界的距离。 “z轴”是层的顺序，数字大的一方与数字小的一方重叠。 如果不设置颜色，图层将是透明的。4、点中段左上角的小方块可以自由拖动层，尺寸也可以调节。5、在“溢出”栏中，在文本比层的尺寸多的情况下，显示为visible (溢出部分原样显示)、隐藏(溢出部分隐藏)、scroll (无论是否溢出都显示滚动条)，显示滚动条。6 .单击菜单窗口/其他/层，显示层管理窗口。 您可以变更图层的名称和z轴值，或按一下眼睛图示来显示或隐藏图层。 还有防止重复的选项。7、排列层。 按住shift键选择多个层。 然后，使用“修改”“对齐”来使用这里的选项。8、嵌套层。 首先在文件中插入层。 如果将光标放在该层内，再插入层，就能得到嵌套层。 中的称为子层、外的母层。 z轴的顺序相同。 拖动父层时，子层也相对移动。 移动子层不会移动父层。十、理解时间轴1 .按一下插入菜单/图层来插入图层。2 .像飞机的照片一样，在层上插入图像。 (这里的照片也可以是小动画的. gif图像)3 .点击菜单的窗口/其他/时间轴，打开时间轴窗口。4 .选择在页面上创建的图层，然后用鼠标按住图层左上角的小方形图标，将图层拖放到时间轴的第一帧中。 将自动创建15帧的时间轴。5 .选择时间轴上的第1帧，并将页面上的层拖到页面的左上角，即动画开始时的位置。6 .可以选择时间轴上的帧15，并将该帧拖动到任意长度，例如30帧。7、选择第30帧，将图层拖放到页面的右下方，则在窗口中显示图层从第1帧到第30帧的移动轨迹。 (此时的运动是直线)8、单击第15帧，右键单击“添加关键帧”，选中第15帧，然后将层拖到页面下方。9 .选中“自动再生”项目。十一、制定卷公告板1 .在页面中插入层，将层的背景设置为布告栏的框架。2 .在创建的层中插入嵌套层，并将嵌套层移动到父层下方。3 .在嵌套层中输入文本并将其居中。4 .打开“时间轴”面板，并将子层作为对象添加到面板中。5 .创建移动到子层上的路径，并将其移动到父层上。6 .拖动最后一个关键帧以增加动画时间，并检查“自动播放”和“循环”。7 .选择父层，并在其属性面板中将“溢出”属性设置为“隐藏”。十二、在页面上使用flash动画单击“插入Flash”按钮可在页面中插入动画。 也可以选择“插入菜单”“媒体”“/Flash”来执行此过程。2 .选择插入的动画并查看属性面板。 您可以在这里设定宽度和高度，也可以通过拖动来调整大小。3、在这里点击“播放”可以预览动画。十三、使插入的flash动画透明1 .如果网页有背景，或想在一张图像中插入flash动画，因为flash动画本身有背景色，所以会影响外观，所以要使用透明的动画。2 .在页面上插入图像。3 .在图像中插入图层，然后在图层中插入所需的flash动画。选择flash动画，然后在属性面板中单击“参数”按钮。5 .在“参数”的左栏中输入“wmode”。 在右边的“值”栏中输入“t