Dreamweaver制作网页设计制作全程教程

HTML第一讲,主讲：吴涛,硅谷动力网络学院,专业铸造品质知识成就未来-硅谷动力网络学院,作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系hzhang,HTML概念,HTML（HyperTextMarkupLanguage超文本标识语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档。,HTML文档的编写方法,手工直接编写记事本等，存成.htm.html格式使用可视化HTML编辑器Frontpage、Dreamweaver等由Web服务器（或称HTTP服务器）一方实时动态地生成。,网页文件命名,*.htm或*.html无空格无特殊符号（例如指向其他Internet应用的超级链接不是我们掌握的重点。,4.超级链接锚点(书签)1,指向本页面锚点aa的超级链接例：23.htm指向23页面的锚点top的超级链接例：24.htm,练习：手写代码实现,链接（新开窗口与Email）、背景、文字颜色、字体、换行、页面标题。练习：27.htm,HTML对图片的控制-1,基本语法:引用图片必须用元素标志。元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址例：28.htm,HTML对图片的控制-2,所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。定义图片替代文本的方法是：例：28.htm,HTML对图片的控制-3,图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。定义图片的显示大小的方法是：width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。例：29.htm,HTML对图片的控制-4,图片的边框我们可以为一幅图片加一个边框以突出显示：border的属性值为象素数例：30.htm,HTML对图片的控制-5,图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是：例：31.htm,HTML对图片的控制-6,图片的对齐方式定义图片的垂直对齐方式：对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。例：32.htm,HTML对图片的控制-7,定义图片与左、右的文本之间的间距图片在显示时，与左右的文本之间可以有一定的间距Hspace(horizontal)定义水平间距；Vspace(vertical)定义垂直间距。单位都是象素数.例：33.htm,HTML对图片的控制-8,图象的超级链接图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：所以，所谓超级链接实际上就是用元素标志一个图象的引用;例：34.htm,HTML对图片的控制-9,图象映射所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。,HTML对图片的控制-10,图象映射（只要求理解标记含义）图象映射由定义。有一个基本属性是name。Name给图象映射命名，这个命名将会被元素用usemap属性引用。所以，图象上的图象映射实际上是对定义的映射的一个引用。在定义图象映射时，可以定义三种形状的映射：circle(圆形)、rect(矩形rectangle)、poly(多边形),HTML对图片的控制-11,图象映射实例（35.htm）,HTML第三讲,主讲：吴涛,专业铸造品质知识成就未来-硅谷动力网络学院,硅谷动力网络学院,作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系hzhang,单元格（用来表示，每个单元格可以有背景颜色和背景图片）,表格（用来表示，表格可以有背景颜色、背景图片）,表格边框,每一行可以用来表示，单元格放在行中，每行可以有很多的单元格。,表头（用来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）,表格(TABLE)标记-1,元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。,表格(TABLE)标记-2,表格的基本结构定义表格定义表头定义表行定义单元格例：02.htm,表格(TABLE)标记-3,表格的属性1width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。border属性：表格边线粗细例03.htm、04.htm、05.htm,表格(TABLE)标记-2,表格的属性14、bgcolor属性：指定表格或某一个单元格的背景颜色。5、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。例：07.htm,表格(TABLE)标记-3,表格的属性26、bordercolor属性：指定表格或某一个单元格的边框颜色。例：08.htm7、Bordercolorlight属性：亮边框的颜色8、Bordercolordark属性：暗边框的颜色例：09.htm,表格(TABLE)标记-3,表格的属性29、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。例：10.htm,表格(TABLE)标记-3,表格的属性210、cellspacing属性：单元格间距。例：11.htm11、cellpadding属性：单元格边距。例：12.htm,表格(TABLE)标记-4,单元格属性1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：top：顶端对齐；middle：居中对齐；bottom：底端对齐;Baseline：相对于基线对齐;例：13.htm,表格(TABLE)标记-5,单元格属性2、Colspan：属性值表示当前单元格跨越几列例：14.htm3、Rowspan：属性值表示当前单元格跨越几行例：16.htm,表格(TABLE)标记-6,行属性1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包top：顶端对齐；middle：居中对齐；bottom：底端对齐。Baseline：相对于基线对齐。,表格(TABLE)标记-7,行属性2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式3、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素,表格进阶,表格的嵌套在之间插入表格，实现表格嵌套例：17.htm表格的作用一般只是控制文本和图像的显示，而不显示表格的边框例：18.htm,综合案例,表格的综合使用例：19.htm,表单(FORM)标记,HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。,表单(FORM)标记,表单是网页上的一个特定区域。这个区域是由一对元素定义的。元素action属性：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。Method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。,表单(FORM)标记,表单的基本语法:.*=GET有数据量限制，POST无以上限制,以文件形式传输例：22.htm,表单(FORM)标记,文本框?文本框的名字*text,password*默认值*长度?最大输入字符数例20.htm,表单(FORM)标记,3.文本域.例：20.htm,表单(FORM)标记,按钮包括普通按钮、重置按钮和提交按钮例：21.htm,表单(FORM)标记,5.复选框(Checkbox)在一个表单里的所有多选框可以有一个或多个被选中。例25.htm,表单(FORM)标记,6.单选框(RadioButton)一个表单里的所有变量名相同的单选框只能够有一个被选中。各个选项的name必须一样才能达到预期效果例：26.htm注意262.htm的写法是错误的,表单(FORM)标记,7.下拉列表基本语法说明说明2例：28.htm,表单(FORM)标记,7.下拉列表（2）列表框的长度（3）允许多选例：29.htm、30.htm,表单(FORM)标记,8.图象域例：image.htm,表单(FORM)标记,综合练习（*）实现留言簿要求：背景、文字颜色、字体、换行、页面标题、表单文本框、文本域、单选框、复选框、下拉列表、图象域、提交与取消按钮，内容以mail形式提交。,HTML第四讲,主讲:吴涛,专业铸造品质知识成就未来-硅谷动力网络学院,硅谷动力网络学院,作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系hzhang,网页中的框架,制作框架页面的步骤：1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接，在子框架中设定链接。注意：框架页面是不含标签的,网页中的框架,基本语法您的浏览器不支持框架，请考虑升级您的浏览器！,网页中的框架,定义框架的基本语法框架由一对定义有两个属性：rows和colsRows定义上下分割的框架的大小；cols定义左右分割的框架的大小；在定义大小时，rows和cols可以使用相对大小或以百分比为单位。,网页中的框架,各窗口的尺寸设置横排多个窗口排列方式：ABC例：02.htm,网页中的框架,各窗口的尺寸设置纵向排列多个窗口排列方式：ABC例：01.htm,网页中的框架,COLS&ROWS：纵横排列多个窗口排列方式：BAC例：14.htm,网页中的框架,框架边框的颜色bordercolor=ff0000“例：03.htm各窗口边框的设置frameborder=#=yes,no/1,0例：04.htm框架边框的宽度framespacing=10例：04.htm,网页中的框架,的属性name：定义该框架的名字。这个名字可以被一些网页元素引用，如被元素引用。例：06.htm、07.htmSrc：在本框架里显示网页的URL。Target：目标框架,引用的是目标框架的名字。,网页中的框架,在当前框架中打开超链接页面默认就是在当前框架页中打开,也可以采用Target=“_self”在指定框架中打开超级链接页面Target=“name”新开窗口打开链接页面Target=“_blank”跳出整个框架集Target=“_parent”,网页中的框架,的属性Scrolling：是否显示滚动条。yes,no,auto例：08.htm、09.htmNoresize：框架在浏览器里不可以被调整大小。例：10.htm、11.htm,网页中的框架,内含窗口.#=初始页面的URL#=框架名称(FrameName)例：15.htm,会移动的文字,基本语法.例：16.htm文字移动属性(1)方向：direction=#=left,right,up,down例：17.htm,会移动的文字,2、文字移动属性(2)方式：behavior=#=scroll(循环),slide(只走一次),alternate(来回走)例：18.htm(3)循环:loop=#=次数；若未指定则循环不止(infinite)例：19.htm,会移动的文字,2、文字移动属性(4)速度:scrollamount=#例：20.htm(5)延时:scrolldelay=#例：21.htm,会移动的文字,3、其他属性(1)底色:bgcolor=#=RRGGBB16进制颜色代码例：22.htm(2)面积:height=#width=#例：23.htm(3)空白:hspace=#vspa