《电子商务网页设计与制作》课件项目五.ppt

1、能力目标：能力目标：(1)能够进行能够进行Dreamweaver的基本操作的基本操作(2)能够进行网页基本元素的添加能够进行网页基本元素的添加(3)利用利用Dreamweaver进行网页布局进行网页布局(4)利用利用Dreamweaver创建站点和页面创建站点和页面知识目标：知识目标：(1)掌握掌握Dreamweaver CS6的界面与操作的界面与操作(2)掌握网页的创建及保存的方法掌握网页的创建及保存的方法(3)掌握在网页中添加文本、图像及超链接等基本元素的方法掌握在网页中添加文本、图像及超链接等基本元素的方法(4)掌握表格的使用及网页布局方法掌握表格的使用及网页布局方法(5)掌握站点的建立

2、与管理掌握站点的建立与管理任务一任务一 添加网页基本元素添加网页基本元素任务一任务一 添加网页基本元素添加网页基本元素菜单栏：菜单栏中包含了Dreamweaver中大多数的命令，它是编辑和管理网页文件的重要工具。菜单栏主要包括“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”和“帮助”菜单。单击菜单名称，或按住 Alt键的同时按键盘上各菜单英文名称的首字母，都能打开相应的下拉菜单，显示其中的命令。文档工具栏中包含一些按钮，使用这些按钮可以在文档的不同视图间快速进行切换，文档工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。“属性

3、”面板主要用于查看和更改所选对象的各种属性，每种对象都具有不同的属性。任务一任务一 添加网页基本元素添加网页基本元素文档窗口用于显示当前创建和编辑的网页文档。Dreamweaver提供了4种查看文档的方式：代码视图、拆分视图、设计视图和实时视图。代码视图：用于编写和编辑HTML、JavaScript、服务器语言代码，以及任何其他类型代码的手工编码环境。拆分视图：用于在一个窗口中同时看到同一文档的代码视图和设计视图。设计视图：用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。实

4、时视图：与设计视图类似，实时视图更逼真地显示文档在浏览器中的表示形式。实时视图不可编辑，不过可以在代码视图中进行编辑，然后通过刷新实时视图来查看所做的更改。任务一任务一 添加网页基本元素添加网页基本元素Dreamweaver CS6中添加文本的方式：一种是直接输入，另一种是导入外部文档数据。前者的操作相对简单，只需要在文档窗口中直接输入文字或从其他程序中复制或剪切所需文本再粘贴到文档窗口中即可；后者则需要通过菜单命令来完成。图像的属性：宽、高：图像的宽度和高度，其默认单位是“像素”，也可以用“点”、“英寸”或“毫米”作为单位。替换：图像的替换文字。当用户的浏览器不能正常显示图像时，在图像的位置

5、会用这个替换文字代替图像。链接：设置图像链接的目标页面。地图：用于制作图像映射。原始；当前图像的低分辨率副本的路径。任务一任务一 添加网页基本元素添加网页基本元素超链接的相关内容超链接的相关内容图像热点：图像热点链接可以将一幅图像分割为若干个区域，并将这些区域设置成熟点区域（简称热区），不同热点区域可以链接到不同的页面，当浏览者单击图像上的不同热点区域可以实现不同页面的跳转。绝对路径：是包括服务器规范在内的完全路径，不管源文件在什么位置，通过绝对路径都可以非常精准地将目标文档找到，采用绝对路径的好处是它同链接的源端点无关，只要网站的地址不变，无论文档在站点中如何移动，都可以正常实现跳转而不会发

6、生错误。；采用绝对路径的缺点在于这种方式的链接不利于测试。相对路径：指向相对于原文档同一服务器或者同一文件夹中的文件。相对路径通常仅包含文件夹和文件名，甚至只有文件名。任务二任务二 使用表格和框架进行布局使用表格和框架进行布局表格创建对话框中个参数含义如下：表格创建对话框中个参数含义如下：（1）行数：在文本框中输入新建表格的行数。（2）列：在文本框中输入新建表格的列数。（3）表格宽度：用于设置表格的宽度，其中右侧的下拉列表中包含百分比和像素。（4）边框粗细：用于设置表格边框的宽度，如果设置为0：在浏览时则看不到表的边框。（5）单元格边距：单元格内容和单元格边界之间的像素数。（6）单元格间距：单

7、元格之间的像素数，（7）标题：可以定义表头样式，4种样式可以任选一种。（8）摘要：用于对表格进行注释。任务二任务二 使用表格和框架进行布局使用表格和框架进行布局table标签的使用标签的使用：（1）语法：建立一个最基本的表格，必须包含一组标记、一组标记以及一组标记，这也是最简单的单元格表格。标记的作用是定义一个表格标记的作用是定义一行，而标记的作用是定义一个单元格。（2）常用属性：属性名作用定义语法参数align对齐方式align=Center、right、leftcolspan列合并colspan=所需合并列数rowspan行合并rowspan=所需合并行数width列宽width=数值he

8、ight行高height=数值任务二任务二 使用表格和框架进行布局使用表格和框架进行布局利用表格布局网页的优劣：利用表格布局网页的优劣：（1）表格布局的特点：table布局是过去流行的网页布局技术，能够轻松地将整个页面划分成需要的各个块，如若某个块中的内容需要再划分，可以通过嵌套表格来实现。整体思路明了，易于操作，简单易学，建站速度快。（2）表格布局的缺点：用表格设计的代码相对复杂，维护和升级困难。如果需要更改版面布局，相当于重新设计网页。而且，当页面嵌套层次较多时，会降低浏览速度。任务二任务二 使用表格和框架进行布局使用表格和框架进行布局框架布局的特点框架技术可以将浏览器分割成多个小窗口，并

9、且在每个小窗口中，可以显示不同的网页，这样我们就可以很方便的在浏览器中浏览不同的网页效果。当浏览器分割成多个窗口后，各窗口就会扮演不同的角色，实现不同的功能。框架基本语法框架分割方式垂直分割水平分割。任务二任务二 使用表格和框架进行布局使用表格和框架进行布局框架的各属性含义框架的各属性含义（1）Frameborder：显示或隐藏框架的边界，与border一起使用。值为1（显示）或0（隐藏），也可以是yes或no（2）Border：显示或隐藏框架的边，与frameborder一起使用。值为0或像素值（3）scrolling：显示或隐藏框架的滚动条，值为yes（显示滚动条）或no（隐藏滚动条）或a

10、uto（根据框架内容范围自动地显示或隐藏滚动条，默认）（4）noresize：禁止用户调整框架尺寸，如果不设置该属性，那么用户可以自由地调整框架尺寸（5）marginheight：设置框架内容的上、下边距的像素数值（6）marginwidth：设置框架内容的左、右边距的像素数值（7）bordercolor：设置框架边界的颜色任务三任务三 使用使用Dreamweaver CS6Dreamweaver CS6创建站创建站点点规划和设计站点的主要内容规划和设计站点的主要内容首先将内容分类，将相关的页面放在同一文件夹中，必要时可以使用文件夹，这种组织类型使站点结构更容易维护和导航；其次确定图像和声音文

11、件等项目的位置。例如，将所有图像放在一个位置，这样当将图像插入页面时，就知道在何处可以找到它。网站的链接结构网站的链接结构页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。一般来说，建立网站的链接结构有两种基本形式。，树状链接结构（一对一）、星状链接结构（一对多），在实际的网站设计中，总是将这两种结构混合起来使用。任务三任务三 使用使用Dreamweaver CS6Dreamweaver CS6创建站创建站点点规划和设计站点的主要内容规划和设计站点的主要内容首先将内容分类，将相关的页面放在同一文件夹中，必要时可以使用文件夹，这种组织类型使站点结构更容易维护和导航；其次确定图

12、像和声音文件等项目的位置。例如，将所有图像放在一个位置，这样当将图像插入页面时，就知道在何处可以找到它。网站的链接结构网站的链接结构页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。一般来说，建立网站的链接结构有两种基本形式。，树状链接结构（一对一）、星状链接结构（一对多），在实际的网站设计中，总是将这两种结构混合起来使用。任务三任务三 使用使用Dreamweaver CS6Dreamweaver CS6创建站创建站点点Dreamweaver站点的组成站点的组成Dreamweaver站点由以下三部分组成，具体取决于环境和所开发的Web站点类型。（1）本地文件夹：工作目录，称

13、为“本地站点”。（2）远程文件夹：称为“远程站点”，可以是专供开发用的临时定义的文件夹，也可以是使用运行系统为其定义的站点。（3）动态文件夹：测试服务器，是Dreamweaver处理动态页的过程。任务三任务三 使用使用Dreamweaver CS6Dreamweaver CS6创建站创建站点点站点高级设置的属性站点高级设置的属性（1）本地信息：用于设置本地站点的基本信息。（2）设计备注：提供与文件相关联的备注信息，单独存储在独立文件中。可以使用该功能来记录与文档关联的其他文件信息。（3）遮盖：用于设置“遮盖”功能。该功能能够实现在执行“获取”或“上传”等操作时，排除本地或服务器上的特定文件或文

14、件夹的效果。（4）文件视图列：主要用于设置在“文件”窗口中各文件需要显示的信息。（5）模板，用于设置站点模板在执行更新操作时是否重新设置模板文件中链接文档的相对路径。（6）Web 字体：用于设置站点使用的特殊字体的存放路径。任务三任务三 使用使用Dreamweaver CS6Dreamweaver CS6创建站创建站点点站点的作用站点的作用（1）可以使用Dreamweaver高级功能。比如在新建页面时可以使用的Dreamweaver预载的模板：页面设计（CSS）、入门页面、页面设计（有辅助功能的）等，这些都是需要在Dreamweaver中建立站点后才能使用的。（2）可以对站点里的网页中断掉的链接进行检查，即坏链检查。（3）可以直接使用Dreamweaver将网页上传到服务器空间中。（4）可以形成明晰的站点组织结构图，明确站点结构，方便增减站点文件夹及文档等