Dreamweaver教案啊.docx

1、Dreamweaver教案啊Dreamweaver教案啊Dreamweaver教案 一、网页设计基础与制作流程 在网络高速发展的今天，网站已经成为一个自我展示和宣传的平台，一个网站是由多个相关联的网页构成的。一般网页上都会有文本和图像信息，复杂一些的网页上还会有声音、视频、动画、多媒体。要制作出精美的网页，不仅需要能够熟练的使用软件，还需要掌握一些网页制作的相关知识。 现在我们常用的浏览器有IE,火狐，欧朋，谷歌，搜狗，360，遨游，XX浏览器，hao123浏览器，腾讯TT。这些国产的浏览器大部分是以IE为内核的。因为浏览器的内核不同，所以同样的代码在浏览器上的显示可能不一样。如果制作页面的话

2、，我建议用火狐或者IE。 二、Dreamweaver简介 Dreamweaver CS6 是一款由Adobe公司大力开发的专业HTML编辑器，用于对WEB站点，WEB页面和WEB应用程序进行设计、编码和开发。利用Dreamweaver中的可视化编辑功能，用户可以快速创建页面而无须编写任何代码。 三、表格的基本应用 表格(table)是页面的重要元素，在DIV+CSS布局方式被广泛运用之前，表格布局在很长一段时间中都是最重要的页面布局方式。在使用DIV+CSS布局中，也并不是完全不可以使用表格，而是将表格回归他本身的作用，用于显示表格式数据。 现在在一些的系统中，无论是后台使用java或是c#做

3、的，在页面显示数据大部分使用到表格。这里的表格就类似于Excel表格，并且在项目中，通常可以使用表格导出Excel表或者是实现导入celEx表，这样在办公方面增加了用户体验。 (1)插入表格及设置表格属性 1、单击“插入”面板的“表格”按钮，弹出“表格”对话框，在该表格对话框中可以设置表格的行数、列数、表格的宽度、单元格间距、单元格边距、边框粗细等选项。 表格宽度:该选项用于设置表格的宽度，“宽度”的单位可以通过右边的下拉列表选择。如果以百分比定义的表格，会随着浏览器窗口大小的改变而改变。 单元格边距:用于设置插入的表格中单元格内容和单元格之间的边框数。 单元格间距:用于设置插入的表格中相邻的

4、表格单元格之间的像素数。 辅助功能:在该选项组定义与表格存储相关的参数，包括在“标题”文本框中定义表格标题，早“摘要”文本框中对标哥进行注释。 2、现在应用以下设置，单击确定按钮创建出一个表格。 单元格边距 单元格间距 边框 3、执行“文件打开”命令，打开第十二章的12-1-3.html。将光标放置在单元格内，用鼠标单击表格上方，在弹出的菜单中选择“选择表格”选项即可 还可以在表格中单击鼠标右键，在弹出的快捷键菜单中选择“表格选择表格”。 4、要选择单个单元格，将鼠标置于需要选择的单元格，在“状态”栏上的“标签选择器”中单击标签，如图 此时单元格已经被选中。 5、如果需要选择整行，只需要将鼠标

5、移至选择的行左边，单击即可。 6、如果要选择连续的单元格，需要使鼠标从一个单元格上方开始向要连续选择单元格的方向按下左键后拖动，即可连续选择单元格。要选择不连续的几个单元格，则需在单击所选单元格的同时，按住Ctrl。 (2)编辑表格 1、用户可以通过拖动选中表格时显示的3个选择柄来调整表格的大小。在水平方向调整表格大小，可拖动右边的选择柄。在垂直方向调整表哥的大小，可以拖动底部的选择柄。如果需要同时从两个方向调整表格大小，可以拖动右下角的选择柄。 2、如果要改变某个列的宽度并保持其他列的大小不变，可以按住Shift键，然后拖动列的边框。在一种方法是在属性面板上设置宽和高文本框内的数值。(推荐)

6、 3，对表格的插入删除 选中要插入行或列的单元格，单击鼠标右键，在弹出的菜单中选择“表格插入行(插入列)”命令，就可以插入。如果要插入多行多列，选择“插入行或列”命令。 4，导入表格内容:执行“文件-打开”，打开12章的12-3-2.html，执行“文件导入表格式数据”命令，弹出“导入表格式数据”对话框，将第12章关于我们.txt导入进去，单击确定。 5，转换到该文本所链接的外部CSS样式文件中，创建名为.font01的类CSS样式，返回设计视图，选中相应的文字，在“类”下拉列表中应用刚定义的类CSS样式font01 6，导出表格的内容:如果要导出表格数据，需要把鼠标指针放在表格中的任意单元格

7、中。执行“文件导出表格”,命令，弹出导出表格对话框。 四、了解框架 1，在网页中，框架的作用是将浏览器的窗口划分为多个部分进行显示，每个部分显示不同的网页元素。框架结构多用于较为固定的导航栏，同导航栏中相对应的较多变化的具体内容进行组合。框架结构是由框架和框架集组成的。 框架:是浏览器窗口中的另一个组成部分，其可以显示与窗口中内容无关的网页文件。 框架集:是将一个浏览器窗口运行几行几列的方式划分成多个组成部分，每部分的内容显示不同的网页元素。 PS: 因为女生经常逛什么网站不知道，所以用男生的网站做例子 2，Dreamweaver CS6提供了多种创建框架集合的方法，其中预定义框架集的存在避免

8、了自己建立框架集的麻烦，可以直接使用定义好的框架集。 打开Dreamweaver CS6 ，执行“插入HTML框架”命令，在弹出菜单中包含了所有的预定义框架集。选择“左对齐”选项后，会弹出“框架标签辅助功能属性”对话框。 单击“确定”按钮，即可插入预定义框架集。执行“窗口框架”命令，打开“框架”面板，可以在“框架”面板中看到刚插入的框架集。 当Dreamweaver CS6中预定义的框架集不能够慢走用户的需要时，用户还可以自己动手设计框架集。 打开Dreamweaver CS6，新建一个空白的HTML页面。执行“查看可视化助理狂加边框”命令，显示出框架边框。大家可以看到稍微一点点区别，看不到的

9、没办法了，带眼镜吧。 将鼠标放在框架的水平边框上，当鼠标变成双向箭头时，单击鼠标不放既可拖拽出一条垂直的框架边框。 将鼠标放在页面的一个角上，当鼠标变成十字箭头时，单击鼠标不放，即可将页面一次性划分成4个框架。 在划分好的框架上选中某个框架，单击鼠标不放进行拖拽，可划分出更多的嵌套框架。 五、DIV简单介绍 1，DIV是一个容器，在HTML页面中的每个标签对象几乎都可以称得上是一个容器，例如使用P段落标签对象。 文字内容 DIV是HTML指定的，专门用于布局设计的容器对象。在传统的表格式的布局当中之所以能进行页面的排版布局设计，完全依赖于表哥对象table。在页面当中绘制一个由多个单元格组成的

10、表格，在相应的表格中放置内容，通过表格单元格的位置设置，达到实现布局的目的。 2，如果需要在网页中插入DIV，可以像插入其他的HTML元素一样，只需在代码中应用这样的标签形式，将内容放置在其中，便可以应用DIV标签。 还可以通过Dreamweaver CS6的设计视图，在网页中插入DIV,单击“插入”面板上的“插入DIV标签”按钮，弹出“插入DIV标签”对话框。 在“插入”下拉列表中选择“在插入点”选项，在“ID”下拉列表框中输入需要插入的DIV的ID名称，单击“确定”按钮，即可在网页中插入一个DIV 标签只是一个标识，作用是把内容标识一个区域，并不负责其他事情，DIV只是CSS布局中做的第一

11、步，需要通过DIV将页面中的内容元素标识出来，而为内容添加样式则由CSS来完成。 2，DIV的嵌套 DIV对象除了可以直接放入文本和其他标签，还可以多个DIV标签进行嵌套使用，最终的目的是合理表示出页面的区域。 在插入点:选择该选项，即在当前光标所在的位置插入相应的DIV。 在标签之前:选择该选项后，在第二个下来列表中选择标签，可以在所选择的标签之前插入相应的DIV。 在开始标签之后:选择该选项后，在第二个下拉列表中选择标签，可以在所选择的标签的开始标签之后插入相应的DIV. 在结束标签之前:选择该选项后，在第二个下拉列表中选择标签，可以在所选择的标签的结束标签之前插入相应的DIV。 在标签之

12、后:选择该选项后，在第二个下拉列表中选择标签，可以在所选择的标签之后插入相应的DIV. PS:大家都知道HTML标签是成对出现的，以上结果大家可以动手测试，不要太懒。 六、使用IFrame框架页面 IFrame框架页面的操作非常简单，只需要在页面中显示IFrame框架的位置插入标签，然后手动添加相应的设置代码即可。 1，执行“文件打开”命令，打开页面“12章1-6-1.html”。 2，在代码视图中的标签中，输入相应的代码 其中，为IFrame的框架的标签，src属性代表在这个IFrame框架中显示的页面，name属性为IFrame框架的名称，width属性为IFrame框架的宽度，heigh

13、t属性为框架的高度，scrolling属性为矿建的框架滚动条是否显示，frameborder属性为框架边框显示属性。 3，执行保存命令，保存页面。在浏览器中玉兰整个框架页面。 4，为页面设置链接。选中页面上方的首页图像，在属性面板上设置链接地址为Home.html，在目标文本框中输入main. 5,使用相同的方法，选中海水鱼图像，在属性面板上对其相关属性进行设置。这里的Fish,html也是指做好的页面。 6，保存页面，在浏览器中预览整个浮动框架页面，单击海水鱼图像，在框架中会显示Fish.html页面的内容。 在IFrame框架中调用的各个二级页面内容的高度并不是统一的，当框架调用内容比较多

14、，页面比较长时，IFrame框架就会出现滚动条，如果想使框架无论调用的页面内容多少时，都不出现滚动条。可以在标签中添加框架高度自适应代码即可，代码如下: Onload=”this.height=this.Document.body.scrollHeight”. 七、建立站点 无论是一位网页制作的新手，还是一位专业的网页设计师，都要从构建站点开始，理清网站结构的脉络。当然，不同的我网站有不同的结构，功能也不会相同，所以一切都应按照需求来组织站点的结构。 (1)建立站点 1，执行“站点新建站点”命令，弹出“站点设置对象”对话框，在该对话框中的“站点名称”文本框中输入站点的名称，单击“本地站点文件夹

15、”文本框后面的“浏览”按钮，弹出“选择根文件夹”对话框，可以浏览到本地站点的位置。 2，单击“选择”按钮，确定本地站点根文件的位置，打开“站点设置对象”对话框。单击“保存”按钮，即可完成本地站点的创建。执行“窗口文件”命令，打开“文件”面板，在“文件”面板中显示出刚创建的本地站点。 在大多数情况下，都是在本地站点中编辑网页，再通过FTP上传到远程服务器。还可以执行“站点管理站点”命令，在弹出的“管理站点”对话框中单击“新建站点”按钮，同样可以弹出“站点设置对象”对话框。 (2)设置服务器 1，如果用户需要使用Dreamweaver连接远程服务器，将站点中的文件通过Dreamweaver上传到远

16、程服务器，则在创建站点时需要设置“服务器”选项卡中的相关选项，否则不需要设置“服务器”选项卡上的相关选项。在“站点设置对象”对话框中单击“服务器”选项，可以切换到“服务器”选项卡，在该选项卡中可以指定远程服务器和测试服务器。 2，单击“添加新服务器”按钮，可以弹出“服务器设置”对话框 (3)服务器的基本选项 1，在“服务器设置”窗口中分为“基本”和“高级”两个选项卡，在“基本”选项卡中可以对服务器的相关基本选项进行设置。 2，服务器名称:在该文本框中可以指定服务器的名称，该名称可以是用户任意定义的名称。 3，连接方法:再该选项的下拉列表中可以选择连接到远程服务器的方法，在Dreamweaver

17、中提供了七种连接远程服务器的方法。 FTP:该选项为默认的远程服务器的连接方法，大多数情况下都是通过FTP来连接到远程服务器的，FTP也是目前最常用的链接远程服务器的方法。 其他比较复杂，有心情的可以自己研究，也不好解释，自己动手，丰衣足食啊。 4，FTP地址:在该文本框种输入要将站点文件上传到其中的FTP服务器的地址。FTP服务器的地址是计算机系统中完整的Interner名称。注意，在这里需要输入完整的FTP地址，并且不要输入任何多余的文本，特别是不要在地址前面加上协议名称。 5，端口:端口21是接收FTP链接的默认端口，可以通过编辑右侧的文本框更改默认的端口号。 6，用户名和密码:分别在“

18、用户名和密码”文本框中输入用于连接到FTP服务器的用户名和密码，选中“保存”复选框，可以保存所舒服的FTP用户名和密码。 7，测试按钮:完成FTP地址、用户名和密码的选项的设置后，可以通过单机“测试”按钮，测试与FTP误区七的链接。 8，在该选项的文本框中输入远程服务器上用于存储站点文件的目录。在有些服务器上，根目录就是首次使用FTP连接到的目录。用户也可以连接到远程服务器，如果在“文件”面板中的“远程文件”驶入中出现public_html、www或用户名这样带名称的文件夹，他可能就是FTP的根目录。 (4)在站点中新建文件夹文件 1，默认情况下“文件”面板位于，DREAMWEAVER工作区的

19、右下方，打开文件面板，在文件面板中的站点根目录中单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”选项。 2，在站点中新建一个文件夹，默认新建的文件夹名称为untitled,直接为新建的文件夹重命名为“我的第一个文件夹”。 3，建立文件的方式与建立文件夹的方式相同。 4，在文件面板中只可以新建默认格式的HTML页面，而通过新建文档对话框可以新建多种格式的文件，并且还可以新建具有布局实力的页面和多种与网页相关文件。 八、实例 前面的HTML+CSS的相关基础知识，还有一些DIV+表格的简单介绍已经讲完了。因为大家要开始做课程设计了，现在就教大家弄一个简单的登陆界面，用到了以上刚学的几种知识。 1

20、，首先选择一张合适的图片做登陆界面的框框，类似于以下的效果。 2，找的图片是没有上面的用户名密码输入框的，我们需要的是一张类似于这样的图片。像素为740*500. 3，首先新建一个站点。 4，在站点中建立一个HTML文件，Login.html 5,打开这个HTML文件。 6，将刚才下载下来的图片放入与这个页面相同的文件夹下面，像photoshop一样，把他拖进来即可。 7，然后建立一个表格，表格的参数无所谓可以在调整。 8，代开代码按钮，为表格添加一背景，属性为background。 9,点击浏览，找到这张图片，点击确定。 10，将表格设置宽与高740*500 11，在火狐中是这样的 12，找

21、到下面的属性，选中居中对齐，图片到了中间顶部。 13，然后再添加一个DIV，把这个表格套入DIV中。会发现出现了一个蚂蚁线行的边框。 14，让此表格从中间的顶部靠下，设置一下代码。 15，在浏览器中的效果是这样的。 16，这个登入界面已经挺像那么回事了，就差一个用户名，密码框，加两个按钮了。咱继续往下做。现在先不解释，当初了效果之后，大家就明白了。 17，首先，插入3列下过如下。 18，我想现在脑子转的快的同学已经知道我现在正在干什么了。 19，然后再插入5行，然后拖动一下。 20，然后再输入文字。 大家注意到没有，密码中间控两个空格，在HTML中空格用  21，然后再用户名右边添加一

22、个文本框。执行插入标签表单常规，找到input type=”text”,单击确定。然后再name后面添加你想要的名字。 22，在密码后面添加的文本框跟他类似，只不过要选这一个。 23，然后再密码下面添加提交跟重置按钮即可。这个值代表了你的按钮要显示的中文内容。 24，最后一步，再table里面把边框调节成0，这样一个简单的登陆界面就完成了。 九、网页界面设计 一、DIV操作 (1)我们做一个以下类似的界面。(展示) (2)第一步建立一个站点，创建一个html. (3)首先可以看一下整个网页的布局,界面整体划分为一个大的DIV，里面嵌套个小的DIV。这两个DIV的内容分别是LOGO跟LOGO以上

23、部分和以下部分。 (4)首先创建一个大的DIV，这个大的DIV就代表了整个界面，设置DIV的ID，这样方便CSS上样式。id=templatemo_container (5)然后创建两个DIV，DIV分别是头跟内容，id=templatemo_header_section和 (6)再创建一个DIV用于保存菜单跟LOGO。id=templatemo_menu_panel (7)创建一个DIV用于调整头部的样式。id=templatemo_menu_section (8)创建一个DIV用于调整LOGO内的样式。id=templatemo_logo_section (9)插入这一段代码，在templ

24、atemo_menu_section下面，这其实是一个HTML标记， Home Recent Posts Archives Gallery About Us Contact Us (10)在templatemo_logo_section插入如下代码 Ice Bubble Blog Your tag line goes here (11)还看着不顺眼，把多余的汉字去掉。 (12)然后打开CSS，观看样式。CSS代码可以只看134行以前。 (13)继续，继续定义下面大DIV下面的左部分DIV。 (14)在左部分DIV中在建立一个上部分的DIV。(这里不是ID了是Class了，两个属性都能通过DIV上样式) (15)在定义一个左边框子的DIV (16)在定义一个上边的DIV，这个DIV包括两个DIV。 (17)在出入一个中间跟下部的DIV。 (18)在TOP里面在插入2个DIV (19)在打开CSS试试看。