《dreamweaver网页制作教学案》由会员分享，可在线阅读，更多相关《dreamweaver网页制作教学案（36页珍藏版）》请在金锄头文库上搜索。
1、 . . . . dreamweaver网页制作教案（Dreamweaver MX）一、Dreamweaver MX中文版建站初步建立一个，首先要在本地机器上做好，再传到网上的虚拟空间上。现在免费的网页空间很少了，在还可以申请到可以使用几个月的免费空间，这对于学习网页制作已经够了。接下来主要介绍本地站点的建立，站点文件命名。简明步骤：在C盘新建一个文件夹在Dreamweaver中定义站点新建文件和文件夹给文件和文件夹命名。目标是做一个个人。打开“我的电脑”，打开C盘，点鼠标右键，选择新建。选择文件夹选项C盘下会出现一个新建文件夹图标输入你想要的站点名称，这里输入media,其实可以任意输入名称
2、的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦！现在开始在Dreamweaver MX中把media这个文件夹定义为站点。打开Dreamweaver，在菜单栏上，点击站点菜单，选择新建站点接下来需要给站点起一个名字，可以起任意一个名字。这里起名为media,按下一步按下一步按钮，选择是否使用服务器技术。因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。按下一步，选择要定义的本地根文件夹这里选择media文件夹点“选择”按钮，因为没有使用远程服务器，就选择“无”。
3、按下一步按完成按钮，一个站点就定义好了。二、文件命名与修改默认扩展名站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件。给新建的文件输入名称新建文件夹与新建文件类似，就不重复了。在文件命名和站点结构方面，养成良好的习惯很重要。首页默认的文件名，取决于你申请的主页空间，一般是index.htm,index.html,default.htm等。同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。不要把所有文件都放在根目录下，把一个栏目的所有文件放在一个文件夹中，在网页和维护时，会很方便。文件和文件夹的命名，可以用栏目名称的拼音，也可以用栏目名称
4、的英文，团队开发时，有统一的命名规则相当重要。例如个人简历这个栏目，命名的文件夹名称可以是jianli，如果命名成英文，可以是me。论坛这个栏目的命名，大家都是用bbs作文件夹名称。应该有人发现了，怎么Dreamweaver MX默认扩展名是.htm，可我的空间默认扩展名是.html啊，难道要一个一个改扩展名？有方法的！修改Dreamweaver MX的一个配置文件，就可以把默认扩展名从.htm改到.html。以windows2000操作系统，Dreamweaver MX默认安装路径为例，找到文件名（MMDocumentTypes.xml）这个文件，此文件位于：C:Program FilesM
5、acromediaDreamweaver MXConfigurationDocumentTypes文件夹下。双击MMDocumentTypes.xml，在Dreamweaver MX中打开把第三行的html移动到htm,html,shtml,shtm,stm,lasso,xhtml这部分最前面的位置，就是改成html,htm,shtml,shtm,stm,lasso,xhtml。保存文件。重新打开Dreamweaver MX，新建一个文件，默认扩展名变成.html了，其它扩展名修改方法类似。三、页面属性的设置双击media站点中的index.htm，打开一个空白的页面。我们将从这个空白页面开始
6、制作，了解页面属性的设置和作用。在工作区点鼠标右键，选择页面属性。打开页面属性对话框下面是我设置的一个页面属性在标题上输入5dmedia，在背景，文本，访问过的，活动几部分选取颜色。Dreamweaver MX有强大的颜色选取功能，将在下一篇中详细介绍。设置左边界，顶部边界，边界宽度，边界高度都为0，可以使页面中的表格与背景没有空隙。如果不设置设置左边界，顶部边界，边界宽度，边界高度，就会与顶部和左边有明显的空隙在中国大陆，使用的是简体中文（GB2312）编码。繁体，使用的是繁体中文（big5码）。英文使用的是西欧语系（Latinl）。 用得比较多的还有背景图像，选择一个已经做好的图像，就可以
7、设置成页面的背景图像。四、用表格搭建页面现在有好几种尺寸的显示器，“14、15、17、19”英寸，网页要在每个显示器上显示正常，就要设置恰当的参数，常用的是在页面中插入表格放容，采用象素和百分比两种。采用象素为单位，是以使用最多的显示器为参照的，现在数量最多的显示器是15英寸和17英寸的，所以页面使用象素为单位时，是以15英寸为标准，常用800600的分辨率。 使用百分比，可以在各种显示器上有相同的效果，宽度设置为100时，在各种显示器上全屏显示。下面分别介绍这两种方法。简明步骤：打开一个页面插入表格设置表格宽度在以前建立的media站点中，新建index.htm文件，双击打开。点击插入表格图
8、标打开“插入表格”对话框，设置行数为1，列数为1，宽度选百分比，值为100，边框为0在下面直接按确定一个可以在各种显示器上全屏幕显示的网页就搭建好了。以后要做的是在表格里填充容。下面介绍象素大小的表格设置，选择像素为单位，值为768。可以在15英寸显示器上全屏幕显示，在17英寸显示器上也有好的显示效果。相对使用百分比制作网页，采用像素比较简单。使用像素作单位时，可以用不同的值，下面是一些站点的宽度值：5D多媒体 5dmedia./首页：宽760像素。Microsoft 中文主页 microsoft./china/ms.htm：宽100Apple中国主页.apple.：宽680像素。三星电子.i
9、samsung./：宽700像素。联想.legend./：宽725像素。以上这些站点的网页宽度，说明宽度没有一个固定值。做一个在800600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：“宽768高430”，“宽776高430”等。用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。 完全下载一个表格的容，才能在IE中显示出来。如果页面文件小，可以只有一个表格放容。如果页面文件很大，可以在页面中，从上到下放几个宽度相同的表格，分别放不同的容，这样就会一个一个显示表格里面的容，不用等整个网页的容下载完。下面是Apple中国主页的结构五、版式设计设计精
10、美的，都是采用了优秀的版式设计。做一个网页，先要规划好版式。本篇主要介绍制作网页时的版式设计。主要容：几种常用的版式（分栏结构），LOGO（标志）尺寸，Banner（横幅）尺寸，导航栏类型，导航菜单位置，网页容，声明。以上是一个主页的简单结构，由三个表格组成。第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页容。典型的二分栏结构。下面一个表格，一行一列，放声明。几种国际尺寸的Banner：46860(全尺寸Banner)，39272（全尺寸带导航条Banner），23460（半尺寸按钮）
11、。LOGO: 8831实际中Banner和LOGO尺寸是根据设计需要选择大小，并不受标准的限制。常见的LOGO在页面的左上方，Banner在页面的右上方。也有相反的例子。例如三星电子 isamsung./ ，说明在设计时，并不受什么标准的限制。常见的分栏结构，还有三分栏，四分栏。下面是一个三分栏的结构：最下面的表格，一行一列，放声明，联系方式。 导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。如果是以容为主的网页，直接放入文字作为栏目，以键盘上的“|”分隔，一行一列的表格，如果栏目多，可以变成二行一列的表格。常见于门户，如 163.如果容很多，兼顾美观，推荐使用弹
12、出式菜单，在Dreamweaver MX中文版中可以直接做出弹出式菜单，不象以前的版本那么复杂，将在以后的文章中介绍。如果是个人，容较少，可以使用尺寸较大的图片作菜单，应用CSS滤镜后，可以有很好的效果。现在最流行的就是Flash导航菜单了，晃到一个按钮上时，有动画有声音，效果非常好。但是在没有装Flash播放器的电脑上，不能显示。现在国使用较多的是使用按钮做导航。在Dreamweaver MX中文版提供了直接制作Flash按钮的功能，输入文字就可以做出中文的Flash按钮。网页的容主要是文字和一些图片，为了方便阅读，两行文字之间的距离不宜太近。需要在CSS中设置行距。六、移动布局单元格和表格
13、与调整它们的大小调整布局单元格的大小:选择一个单元格，按住 Ctrl 键的同时单击该单元格中的任何位置，该单元格周围出现选择控制点。拖动选择控制点来调整单元格的大小。移动布局单元格:按住 Ctrl 键的同时单击该单元格中的任何位置, 将该单元格拖到其布局表格中的另一个位置。按箭头键移动该单元格，每次移动 1 个像素。在按住 Shift 键的同时按箭头键移动该单元格，每次 10 个像素。调整布局表格的大小:通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。拖动选择控制点来调整表格的大小。移动布局表格:通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。将表格拖到页上的另一个
14、位置。(只有当布局表格嵌套在另一个布局表格中时，才可以移动该布局表格)。七、在布局视图中设置对象属性在布局视图中可以设置各种对象的属性，本篇的主要容是了解各种设置的作用。1给图像描边作用：增加图片的美观。简明步骤：选中一个图像，边框设置为1，就给图像加了一个像素的边框。选中页面中的一个图像。在属性面板边框中填1。经过描边后的图像在浏览器中显示如以下图。2设置图文混排图文混排的作用：当没有设置图文混排，页面看起来很不美观。要使图像和文字在一起美观，必须设置好图文混排。简明步骤：选中图片，在属性面板中设置对齐方式为左对齐或者右对齐。采用默认设置时的图片和文字：选中图片，在属性面板中选择对齐方式为左
15、对齐。图文混排的结果：3给图片增加提示作用：使用浏览者知道所选择项目的容。简明步骤：选中一个图片，在属性面板的替代下拉栏，输入提示文字。选中一个图片。在属性面板的替代下拉栏，输入提示文字。 在浏览器中，当指向这个图片时，就会出现文字提示。4创建图像地图作用：当点击一个图像的不同部分，可以到一个新的网页。也可以在当前窗口打开。简明步骤：选中目标图片选择属性面板中的热点工具用热工具在图片中画出热点区域在属性面板中输入地址，选择目标窗口打开方式。选中目标图片，选择属性面板中的矩形热点工具。用热工具在图片中画出热点区域。在属性面板中输入地址，选择目标窗口打开方式。5设置图像边距作用：设置图像边距，可以使图像和表格边框产生一个边距，也会和相邻的文字或者其它图片产生一个边距。有时候设
