《Dreamweaver CC网页设计与制作教程》课件-第7章 HTML5

第7章HTML57.1

案例：利用HTML5创建博客页面【案例目的】利用html5的结构来设计制作一个博客网页，效果见图7-1。【核心知识】结合CSS使用html5进行网页布局和制作。图7-1使用html5和CSS制作的博客网页7.1.1DWCC中HTML5的语法结构和新标签1.HTML5有新的文档类型声明(DTD)，<!doctypehtml>在编写HTML5文档时，要求指定文档类型，以确保浏览器能在HTML5的标准模式下进行渲染。在DWCC中新建html文档时，此声明会自动产生。2.新增部分HTML5标签7.1.2在DreamweaverCC中编辑HTML5DreamweaverCC版本全面性的支持HTML5和CSS3，在编辑HTML5网页时可以方便地与CSS3相结合使用。在DWCC的html5文档中，插入结构标签有两种方法。选择“插入”下拉菜单中的“结构”；或者打开“窗口”→“插入”面板，选择“结构”。7.1.3在HTML5中编辑figurehtml5新增加的插图，包括两个元素，其中的<figure>标签规定独立的流内容（图像、图表、照片、代码等等），此内容应该与主内容相关，如果被删除，不会对文档流产生影响。<figcaption>用来为图片添加说明，它不仅能包含文本，任何html元素都可以，比如链接、小图标。所插入的图像的alt文本是多余的，此时可以把<img>元素中的alt属性删除。7.1.4HTML5中的article和sectionhtml5新增加的插入“章节<section>”标签用来定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。插入“文章<article>”标签用于定义外部的内容。article是一个特殊的section标签，它比section具有更明确的语义,它代表一个独立的、完整的相关内容块。一般来说，article会有标题部分(通常包含在header内)，有时也会包含footer。无论从结构上还是内容上来说，article本身是独立的、完整的。<article>元素可与section元素结合，需要时，可以使用<section>元素将文章分为几个段落。7.2在网页中使用html5画布7.2.1插入画布并设置画布属性画布元素默认宽300px，高150px，可以通过CSS或者属性面板来设置它的宽度和高度等属性。在DWCC的html5文档中，选择“插入”菜单中的“画布”；或者打开“窗口”→“插入”面板，选择“常用”→“画布”，可以插入画布。在画布的属性面板中可以规定画布的ID，设置其宽度和高度。7.2在网页中使用html5画布7.2.2在画布中使用JavaScript绘图canvas元素本身没有绘图能力，所有的绘制工作必须在JavaScript内部完成。用JavaScript在画布中画出一个宽150高70的红色矩形。找到canvas元素，创建绘制对象context，在画布上进行绘制。7.2在网页中使用html5画布7.2.3在画布中显示图像使用方法drawImage(image,x,y)可以在画布上画一幅图，x和y坐标是图像的起始位置，相对于其左上角来判断的。使用这种方法，图像可以简单的以其原尺寸被画在画布上。7.2在网页中使用html5画布7.2.4在画布中处理图像在画布中画出的图像也可以使用重载函数drawImage，对图片进行缩放和调整尺寸，将图片变换为所希望的宽度和高度。drawImage(image,x,y,width,height)函数为：在画布上画一幅宽度和高度为设定值的图，x和y坐标是图像的起始位置。7.2在网页中使用html5画布7.2.5在画布中裁剪图像在画布中，还可以从原图中取出一个矩形区域，对其进行裁剪，得到所需要的图像。一般图像的裁剪会在服务端进行，但是图片传送要消耗较多的流量。利用html5的canvas，可以在浏览器端以比较简单的方式来实现。drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,)函数定义为：在原图中以（sourceX,sourceY）坐标开始截取一个矩形区域，其宽和高分别为（sourceWidth,sourceHeight），在画布中以（destX,destY）坐标开始