网页制作教程html篇

1、html篇HTML（Hyper Text Markup language)超文本标记语言Html 4.011.html概述1.1Html文件基本结构Html文档文件头部文件头部文件体部文件体部1.2 HTML文件的编写方法手工直接编写使用可视化软件1.3编写HTML文件的注意事项“”是任何标记的开始和结束标记与标记之间可以嵌套在源代码中不区分大小写，建议使用小写任何回车和空格在源代码中不起作用HTML标记中可以放置各种属性,属性之间用空格隔开修改页面标题修改页面标题.在dreamweaver工具栏修改在页面空白处单击鼠标右键页面属性标题/编码2.页面属性设置设置页面背景色设置页面背景色在页面空

2、白处单击鼠标右键页面属性外观(HTML)背景设定页面文字颜色设定页面文字颜色 在页面空白处单击鼠标右键页面属性外观(HTML)文本知识点：HTML中的颜色指定方法 代表颜色名称的英文单词：black,silver,gray,white,maroon,red,purple,fuchsia,green,lime,olive,yellow,navy,blue,teak,aqua 六位16进制数表示RGB颜色值，应用的时候常在RGB值前加#以示分别,也可以不加.如#ff0000,#0000ff设置页面背景图象设置页面背景图象 在页面空白处单击鼠标右键页面属性外观(HTML)背景图象知识点：指定文件的位

3、置绝对路径相对路径指定同一级文件时，只需输入文件名指定下一级文件时，只需先输入目录名，然后加“/”，再输入文件名指定上一级文件时，先输入“./”,再输入目录名，文件名指定上两级文件时，“././”,再输入目录名，文件名设定页面的上边距设定页面的上边距 在页面空白处单击鼠标右键页面属性外观(HTML)上边距设定页面的左边距设定页面的左边距 在页面空白处单击鼠标右键页面属性外观(HTML)左边距设定页面的背景图象为固定设定页面的背景图象为固定3 .文本编辑标题字标题字 (n=1、2、3、4、5、6) 修改属性面板中的”格式”修改字体属性修改字体属性英文状态下输入修改字号属性修改字号属性Size=1

4、、2、3、4、5、6、7修改文本颜色属性修改文本颜色属性字体加粗字体加粗按属性面板上的”B”按钮格式样式粗体字体倾斜字体倾斜按属性面板上的”I”按钮格式样式斜体下划线下划线删除线删除线格式样式删除线上标标记上标标记x2+y2=100下标标记下标标记x1+x2=100段落段落 在设计视图中直接回车即可生成段落换行换行 在要换行处按shift+enter 插入/HTML/特殊字符/换行符对齐属性对齐属性-align段落缩进段落缩进按属性面板上的缩进按钮预格式化标记预格式化标记If value=0 then AlertLabel.ForeColor=vbRed AlertLabel.Font.Bol

5、d=TrueEnd if项目符号标记项目符号标记无序项目符号标记无序项目符号标记 也可按属性面板上的”项目列表”按钮有层次的项目符号有层次的项目符号 第一章 dreamweaver 简介 属性面板 参数设置 第二章 文本编辑无序列表的类型属性无序列表的类型属性type 也可按属性面板上的”编号列表”按钮项目符号标记有序项目符号标记有层次的项目符号有层次的项目符号 dreamweaver 8 简介 属性棉板 参数设置 文本编辑和基本操作有序列表的类型属性有序列表的类型属性 项目1 项目2 有序列表的起始属性有序列表的起始属性start定义列表request对象利用request对象从客户端获取信

6、息response对象利用response对象向客户端输出信息session对象利用session对象记载单个用户信息 是标题是解释分隔线标记水平线宽度属性width 水平线高度属性size (size=100)水平线颜色属性color 水平线对齐属性align 插入HTML水平线特殊符号特殊符号空格   >“ " ©插入HTML特殊字符4.1网页中图片的格式GIF图形采用非失真的压缩方式,在压缩的过程中,像素信息不会被牺牲掉,被牺牲的是图形的颜色,GIF图片文件最多只能保存256色,对于颜色不多、线条清楚的图，采用GIF格式

7、。JPG/JPEG图片文件采用失真的压缩方式，图片在压缩的过程中，图形的像素信息会被减去一些，但图片的颜色不会丢失。因此，全彩的连续色调、没有明显边缘的图，如风景照，适合采用JPG文件格式显示。PNG是Fireworks的默认文件格式，支持高级别无损耗压缩，受最新的web浏览器支持,支持透明图像的制作。4.图片编辑4.2插入图片插入图象src图象的源文件alt提示文字width,height宽度、高度border边框vspace,hspace垂直间距、水平间距align图像和文字的垂直位置关系align=“baseline”、align=“bottom”、align=“absbottom”是指

8、图象底端与文字的底端对齐align=“top”、align=texttop ，是指图象顶端和文字行最高字符的顶端对齐align=middle是指图象的中间线和文字的低端对齐align=“absmiddle”是指图象的中间线和文字的中间线对齐align=leftalign=right5.超级链接文字链接图片链接按载体分类5.1超级链接的分类内部链接:链接指向的是站点文件夹之内的文件 -相对路径外部链接 :链接指向站点文件夹之外的文件-绝对路径按链接指向的文件5.2 选中超级链接的载体,点击属性面板上的”链接”按钮,即可建立超级链接pHref 指定链接地址首页下载诗歌文件夹下载曲阜师范大学pTit

9、le 为链接指定提示文字ptarget=“_blank“ 指定链接的目标窗口为新窗口ptarget=“_self“ 指定链接的目标窗口为自身5.3链接标记 .5.4书签链接1.定义锚点(插入命名锚记)2.创建到锚点的超链接(在属性面板上创建指向锚点的超级链接)网页制作工具的使用（链接同一页面中的书签）5.5超链接颜色的设置Link链接文字颜色属性Alink激活链接文字颜色属性Vlink访问后链接文字颜色属性在页面空白处单击鼠标右键页面属性外观HTML5.6图片的超链接 选中图片在属性面板上设置超级链接6.表格6.1 表格标记. 表格标记. 行标记. 单元格标记插入表格表格宽度属性width,表

10、格的高度属性height表格边框宽度属性border表格的边框色属性 bordercolor单元格间距属性cellspacing单元格填充属性cellpadding如果不指定cellpadding和cellspacing的值，则cellpadding的默认值为1，cellspacing的默认值为2。6.2表格属性表格的背景颜色属性bgcolor表格的背景图象属性background表格的水平对齐属性align=left/center/right表格的亮边框色属性 bordercolorlight:表格左上边框的颜色，单元格右下边框的颜色表格的暗边框色属性 bordercolordark:表格右

11、下边框的颜色，单元格左上边框的颜色6.3行标记属性align行内容的水平对齐valign行内容的垂直对齐（top/middle/bottom）bgcolor行的背景颜色bordercolor行的边框颜色bordercolorlignt行的亮边框颜色bordercolordark行的暗边框颜色6.4单元格标记属性align,valign,bgcolor,background,bordercolor,bordercolorlight,bordercolordark,width,height1)插入表格插入记录/表格2)使用属性面板修改表格属性3)选择整个表格p 在单元格内单击鼠标右键/表格/选择表

12、格p 单击表格的外边框p 修改/表格/选择表格在dreamweaver中操作表格4)选择行p 直接用鼠标拖动p 鼠标指向行的左边缘,指针变为向右的箭头时单击5)选择列p 直接用鼠标拖动p 鼠标指向列的上边缘,当鼠标指针变为向下的箭头时单击6)选择连续单元格p 用鼠标从第一个单元格拖到最后一个单元格p 将光标定位在第一个单元格内,然后按住shift键单击最后一个单元格7)选择不连续的多个单元格p 按住ctrl键单击要选择的单元格8)插入行或列p 右击/表格/插入行或列9)删除行或列p 右击/表格/删除行或删除列6.5表格标题标记标题标记:标题的水平对齐属性align=right/left/cen

13、ter标题的垂直对齐属性valign=top/bottom6.6表格的表头表头中的文字可以实现居中并且加粗显示 6.7 表格嵌套将表格的边框宽度、单元格边距、单元格间距都设为0将表格的对齐方式设为“居中”构造网页整体布局的表格以像素为单位，被嵌套的表格依实际情况灵活选定单位可以使用单元格的合并，不建议使用单元格拆分6.8使用表格构造网页的整体框架元素常用分类o 块级元素（display:block）：每个块级元素都从一个新行开始，而且其后的元素也需另起一行开始，标题、段落、表格、层、body等都是块级元素。o 内联元素（display:inline）：内联元素不需要在新行内显示，而且也不强迫其

14、后的元素换行，如a、em、span等都为内联元素。 列表项（display:list-item）：在HTML中只有li默认是此类型，此类元素的表现形式和列表类似。框架可以将浏览器窗口分割成几个不同的小窗口,各个窗口包含不同的网页.框架有两个主要组成部分:框架集与个别框架.框架集页面定义了一个文件中框架的结构,包括一页中显示的框架数目、框架的大小、框架的源文件等属性。每个个别框架都包含了一个独立的HTML文件。7 使用框架设置页面布局使用html编写框架在dreamweaver中创建框架创建框架的两种方法 左右分割窗口属性cols定义框架集定义框架以象素为单位或以百分比为单位上下分割窗口属性ro

15、ws 嵌套分割窗口框架集的属性框架集边框显示属性frameborder=yes/no框架集边框宽度属性framespacing框架集边框颜色属性bordercolor框架属性框架页面源文件属性SRC框架名称属性name框架边框显示属性frameborder=yes/no框架滚动条显示属性scrolling=yes/no/auto框架尺寸调整属性noresize框架边界宽度属性marginwidth框架边界高度属性marginheight在dreamweaver中创建框架方法一：使用插入面板中的布局选项卡创建框架方法二：执行插入HTML框架菜单命令方法三：执行文件新建菜单命令，选择示例中的页选项

16、卡，选择框架页选项方法四：执行修改框架集，执行需要的拆分命令方法五：将现有文档分割为框架。在已创建了一个框架的情况下，按住alt键再拖动框架四周的边框也可创建框架框架面板o 框架面板中显示了所创建的框架的结构，并在不同的框架区域中显示框架的名称。o 执行窗口框架菜单命令可打开框架面板o 如果要选择框架集，只需单击框架集的边框即可选取对应的框架集。如果要选择框架，只需在框架面板中单击框架即可选取窗口中对应的框架。o 在文档窗口中选择框架的方法：按住alt键，在要选取的框架内单击鼠标左键，此时被选取的框架以虚线框显示o 在文档窗口中选取框架集的方法是：单击要选取的框架集边框，此时被选中的所有框架以

17、虚线框显示。保存框架和框架集框架集需要分别保存其中的框架，并保存一个框架集的结构文档，所以框架集文档的保存会在框架个数的基础上增加一个结构文档。框架集中包含多个框架，如果一个个的独立保存，非常繁琐。执行文件保存全部命令可以一次性的保存框架集中的所有框架target=“_blank“ 指定链接的目标窗口为新窗口target=“_self“ 指定链接的目标窗口为自身target=“_top”在浏览器的整个窗口中打开,忽略任何框架target=“right”在名称为”right”的窗口中打开链接使用链接控制框架内容浮动框架Src,width,height,name,align,frameborder(yes,no),scrolling(yes,no,auto),marginwidth,marginheight8插入多媒体对象8.1滚动文字(marquee.htm)滚动文字标记滚动文字滚动方向属性滚动文字滚动方式属性滚动文字滚动速度属性滚动文字滚动延迟属性:每次滚动的间隔产生一段时间的延迟滚动文字滚动循环属性滚动文字0.2秒滚动范围属性滚动文字滚动文字滚动背景颜色属性滚动文字滚动空间属性滚动文字8.2添加背景音乐8.3 插入s