网页设计与制作课件.ppt

网页设计基础本章要点：qInternet概述知识q网页设计基本知识q网络基础知识1.2 网页设计基本知识1.2.1 WWW简介 万维网万维网万维网万维网WWW 是 World Wide Web（环球信息网）的缩写，也可以简称为 Web，中文名字为“万维网”。它是一种基于超文本文件的交互式浏览检索工具。用户可用WWW在Internet网上浏览、传递、编辑超文本格式的文件。HTML：HyperTextMarkupLanguage，超文本标记语言，是一套独立于平台的格式定义(用标记说明),用来描述3W文档中的各个组成部分网页网页网页网页就是我们通过网络浏览器看到的网站页面，网页通常都符合HTML的规范。静态网页静态网页静态网页静态网页是在动态网页出现后相对而言的传统采用HTML编写的网页。动态网页动态网页动态网页动态网页指的是采用ASP、PHP、CGI等程序动态生成的页面，在网络空间中并不存在这个页面，只有在接到用户的访问要求后才生成并传输到用户的浏览器中。第二章 HTML应用基础本章要点：qHTML基础知识q基本标识q文本/图像/表格/链接/框架/多媒体/表单等标识2.1 HTML基础知识Html文件是标准的ASCII文件，Html文件由元素(element)组成，每一个元素都有名称和可选择的属性。是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作WorldWideWeb的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。HTML文件是一种纯文本格式的文件描述HTML文件结构的标识符。规定文件的逻辑结构控制页面显示方式扩展名：.html，htm编写工具：记事本，写字板Editplus及各种网页制作工具。网页标题网页的内容超文本与标记：所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。所谓标记，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“”来表示。理解知识HTML标识是由“”所括住的指令，可分为双标识指令也称为围堵标识（由，所构成）、单标识指令也称为空标识（只有）。2.1.1 标识的写法 demoThisismyfirsthtmlfile.起始标注开始注：元素名也叫标注名起始链接结束注：结尾标注用。注：一个元素的元素体中可以有另外的元素HTML并非大小写敏感（WIN）属性只可加于起始标识中Html的元素有下列三种表示方法：1)文件或超文本2)文本或超文本3)X2.1.2 双标识指令与单标识指令2.1.3 与网页有关的常见名词 绝对路径:通过文件在文件系统中的绝对位置进行描述。例如：c:html2pagesexalink1.htmhttp:/ 基本标识结构html文件开始文件头开始网页标题网页标题文件头结束文件体开始文件体 文件体结束html文件结束色彩是用16进制的红绿蓝(red-green-blue,RGB)值来表示。16进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.RGB颜色可以有四种表达形式:：#rrggbb(如，#00cc00)#rgb(如，#0c0)rgb(x,x,x)x是一个介乎0到255之间的整数(如，rgb(0,204,0)rgb(y%,y%,y%)y是介乎0.0到100.0之间的整数(rgb(0%,80%,0%)或者是下列预定义色彩：作为一般的原则，大多数属性值不用加双引号。但是包括空格、号，号等特殊字符的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。2.3 页面格式标识1.设置网页的背景色格式：2.设置网页的图像背景格式：3.设置网页的文本颜色格式：4.设置网页的文本链接颜色格式：5.设置网页的文本已使用链接颜色格式：6.设置网页的文本正使用链接颜色格式：7.设置网页的左方距离格式：8.设置网页的上方距离格式：9.设置网页的固定背景格式：用BODY标记设定文字的颜色春夜喜雨唐杜甫好雨知时节，当春乃发生。随风潜入夜，润物细无声。野径云俱黑，江船火独明。晓看红湿处，花重锦官城。BMP格式BMP是英文Bitmap（位图）的简写，它是Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持。GIF格式GIF是英文GraphicsInterchangeFormat（图形交换格式）的缩写。GIF格式的特点是压缩比高，磁盘空间占用较少，GIF87a简单地用来存储单幅静止图像，GIF89a格式文件可形成连续的动画。JPEG格式JPEG是常见的一种图像格式，扩展名为.jpg或.jpeg，其压缩技术十分先进，PEG格式的文件尺寸较小，下载速度快。PSD格式Adobe公司的图像处理软件Photoshop的专用格式PhotoshopDocument（PSD）。2.4 文本标识标签用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。1.文本的字体标记格式意义文字串标准打印机字体文字串斜体文字串黑体文字串带下划线文字串带删除线文字串下标文字串上标大字体文本小字体文本例：今天天气真好！2.短语标记格式意义文字串斜体强调文本文字串粗体显示的强调文字串文字串显示def定义的文字串文字串计算机代码引用文字串表示程序或脚本输出文字串命令的参数或变量文字串斜体显示引用文字串用户输入文本文字串略语文字字头略语知识点：uHTML 指超文本标签语言。uHTML 文件是包含一些标签的文本文件。u这些标签告诉 WEB 浏览器如何显示页面。uHTML 文件必须使用 htm 或者 html 作为文件扩展名。uHTML 文件可以通过简单的文本编辑器来创建。uHTML 标签是用来标记 HTML 元素的。uHTML 标签被 符号包围。u这些包围的符号叫作尖括号。uHTML 标签是成对出现的。例如 和。u位于起始标签和终止标签之间的文本是元素的内容。uHTML 标签对大小写不敏感，和的作用的相同的。注意点：1.推荐您使用纯文本编辑器来学习HTML。2.扩展名使用.html 是相当安全的做法。3.要使用小写的标签和使用小写属性。4.始终为属性值加引号 5.不要忘记关闭标签 6.使用空的段落标记 去插入一个空行是个坏习惯。用 标签代替它。3.行和段1.强制换行2.段落3.标尺线或 注释标签 4.预置格式段落格式4.布局1.居中（1）使用标记和align属性的center值格式：文本或图像（2）使用标记格式：文本或图像（3）使用标记和align属性的center值格式：文本或图像2.右对齐（1）使用标记和align属性的right值格式：文本或图像（2）使用标记和align属性的right值格式：文本或图像3.左对齐（1）使用标记和align属性的left值格式：文本或图像（2）使用标记和align属性的left值格式：文本或图像4.标记文本或图像文本或图像文本或图像2.5 图像标识在网页中加入图像主要考虑两个方面的问题。一是下载速度，二是图像质量图像文件的格式有几十种，如：GIF、JPEG、BMP、PCX、TGA等等，但网页支持的、最常用的图像文件是GIF、JPEG格式。1.图像文件的格式格式：注：x、y可取像素数，也可以取百分数。图像布局图像布局1.图像在页面居中标记align属性设置图像与文本之间的空白格式：hspace=x设定水平方向的空白vspace=y设定垂直方向的空白属性：垂直/环绕对齐格式：文本文本参数：align=top文本与图像的顶部对齐align=middle文本与图像的中央对齐align=bottom文本与图像的底部对齐align=left图像居左，文本在图像的右侧align=rigth图像居右，文本在图像的左侧2.6 表格标识用表格对网页进行排版表项1表项2表项n表项1表项2表项n1.基本格式(1)标记border=“n”-定义表格的粗细bordercolor=“颜色值”-定义表格边框的颜色summary=“简要说明”-简要说明表格的格式和内容bgcolor-设定表格的背景色background-设定表格的背景图像width=“n”/“n%”-设定表格的宽度height=“n”-设定表格的高度align=“left”/“right”/“center”-表格在页面上的水平对齐方式cellpadding-调节表单元线与数据之间的距离cellspacing-调节表元与边框之间的距离rules=“参数”-设定表格线frame=“参数”-设定表格边框(2)标记定义表行bgcolor-设定表格一行的背景色。align=“left”/”right”/”center”-设定表格一行的表数据项的水平对齐方式。bordercolordark=“颜色值”-设定表格边框的暗色颜色bordercolorlight=“颜色值”-设定表格边框的明色颜色(3)标记定义表元(表格的具体数据)bgcolor-设定背景色。align=“left”/”right”/”center”-定义表数据项的水平对齐方式。bordercolordark=“颜色值”-定义表格边框的颜色width=“n”/“n%”-设定表格单元宽度height=“n”-设定表格单元高度2.表题表题-定义表头，以粗体字显示3.表头4.行和列的合并（1）行合并表项（2）列合并表数据项5.表格尺寸1.设定表格宽度2.设定表格高度 3.设定表元宽度 4.设定表元高度 2.7 链接标识超链接是WWW上的一种链接技巧，它通过已定义好的关键字和图形，只要点取某个图标或某段文字，就可以自动连上相对应的其他文件。所以在WWW站点画面中，可以通过超链接点取的方式，从一个网页链接到另一个网页。什么是超链接(Hyperlink)?1.创建网页间的链接文本或图像四种情况：（1）链接同一个目录内的文件（2）链接下一级目录内的文件文本文本（3）链接上一级目录内的文件文本（4）链接同级目录内的文件文本2.链接指定的文章段定义锚点字符串链接锚点文本或图像TARGET=窗口名称 TITLE=指向连接显示的文字2.8 框架标识2.8.1 框架标识 1.标记格式：注：x、y可以取像素数、百分数和符号*例一：例二：例三：例四：2.初始化框架是指给各个框架指定初始显示的网页。FRAMEsrc=“文件名”name=“框架名”3.边框宽度和颜色设定frameborder-指定框架有无边框border-确定边框的宽带borercolor-给框架边框着色值为yes时为3D边框，为no时边框消失。默认值为yes。值为像素数，默认值为像素宽4.空白Marginwidth-设定框架内容与左右边框间的空白Marginhwidth-设定框架内容与上下边框间的空白5.加入滚动条强制加入垂直滚动第和水平滚动条框架内不加滚动条自动使用滚动条6.固定边框noresize属性7 框架间的链接格式：热点文本target属性：框架名_top_self_blank_parent8 内联框架格式：src-指定内联框架内显示页的URLwidth-指定内联框架的宽height-指定内联框架的高align-指定内联框架的对齐方式frameborder-用数值指定内联框架的立体框宽name-指定内联框架的名字scrolling=“yes”/“no”-指定内联框架是否加入滚动条hsapce=x-指定内联框架水平方向上左侧间隔vsapce=x-指定内联框架垂直方向上顶部间隔2.9 表单标识输入表单主要由输入表项、单选钮、选择框、成段文字输入及发送、复位按钮等表单控制组成。1.建立表单表单内容：输入表项、单选钮、选择框、输入成段文字、发送、复位按钮表单的作用是从用户方收集信息，当用户填好表单上所需信息并将表单提交后，服务器就可以得到表单中包含的信息，并经进行处理。您的姓名:您的主页的网址:密码:.其中GET|POST表示二者选择一个。表单中提供给用户的输入形式为：*=text,password,checkbox,radio,image,hidden,submit,reset*=一般是一个唯一标识符表单的基本结构标记属性：Action-设定表单的处理手段。Method-设定传送表单数据组的方法。Enctype-指定当method为post时向服务器传送表单所使用的内容类型Accept-charset-设定由服务器处理表单时必须收到的输入数据的字码列表Accept-指定用“,”分开服务器处理表单内容类型的列表文本输入和密码输入格式：属性：Type=“text”或“password”-表示指定输入的单行文本以标准字符显示Size=x-表示输入单行文本区域的宽度，为字符数Name-表项名Maxlength-单行文本输入的最大字符数复选框和单选框 1.单选钮格式：2.预置按钮格式：3.复选框控制格式：4.Reset按钮和Submit按钮发送复位重置：提交查询内容：5.图像Reset按钮和Submit按钮隐藏表单的元素 基本语法：列表框分为弹出式列表框和字段式列表框，使用和标记标记属性：Name-指定控制操作名Size-在列表选择栏中一次可见的列表项目数Multiple-布尔型，可进行多元选择标记属性：Selected-布尔型，设定该项被预置Value-指定控制操作的初始值，缺省为OPTION的内容Label-指定选择项的标签1.弹出式列表框格式：选项1选项2选项32.字段式选择栏预置选择项：标记中无selected属性时，该菜单不被预置。标记中selected属性时，该菜单被预置。当标记中有multiple属性设定，且多个标记有selected属性设定时，则多项被预置。当标记中无multiple属性设定，且多个标记有selected属性设定时，则为错误。文本区域格式：多行文本属性：Name-指定控制操作名Rows-设定可视区输入文本的行数Cols-设定可视区输入文本的列数2.10 多媒体标识格式：播放1.以链接的形式引入多媒体文件2.为网页插入背景声音格式：loop为声音的播放次数loop=infinite不停播放3.以一定的高度与宽度进行媒体播放格式：4.播放视频文件5.播放Flash动画2.11 2.11 其他标识其他标识列表无序列表有序列表定义列表无序列表无序列表无序号列表使用的一对标签是，每一个列表项前使用。1.创建无序列表格式：第一项第二项第三项2.嵌套无序列表在无序列表嵌套中，不同层间标记的加重记号依浏览器的种类而变化。3.设定加重记号disc实心圆点circle空心圆点square实心小矩形使用标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。格式：第一项第二项第三项有序列表有序列表2.有序列表的嵌套1.创建有序列表3.序号种类格式1阿拉伯字母A大写英文字母a小写英文字母I大写罗马数字i小写罗马数字type值Type属性默认时自动设定为阿拉伯数字的作用域为整个标记范围的作用域为当前项在实际应用中多使用在标记内设定的方法4.设定起始序号作用域为当前标记，的作用域为从当前项开始直到当前的为止的各项。定义项目的列表第一项叙述第一项的定义第二项叙述第二项的定义第三项叙述第三项的定义 标识 用来排版大块用来排版大块html段落，也用段落，也用于格式化表。于格式化表。Dreamweaver MX中叫层。中叫层。水平线加入一条水平线；加入一条水平线；设置水平线的颜色；设置水平线的颜色；设置水平线的厚度；设置水平线的厚度；设置水平线的长度。可以是设置水平线的长度。可以是百分比或绝对像素点；百分比或绝对像素点；设置水平线在浏览器中左中设置水平线在浏览器中左中右的位置；右的位置；没有阴影的水平线；没有阴影的水平线；活动的文本移动的文字建立活动文本；移动的文字活动文本从右向左移left或从左向右移right；移动的文字alternate和slide分别确定文本左右来回移动或只移动一次；移动的文字确定文本移动的次数；移动的文字文本移动的速度、文本移动的延时；移动的文字文本移动区的背景颜色；移动的文字文本移动区的宽度和高度；移动的文字表示移动文本靠左、右、居中、上、底显示；移动的文字表示移动文本和其左右文本及上下两行文本间的距离。特殊字符“&”用于转义；转义序列各字符间不能有空格；转义序列必须以“；”结束；单独的&不被认为是转义开始。字符转义序列区分大小写。第三章 CSS基础应用本章要点：qCSS的语法知识qCSS的使用qCSS的特点和引用3.1 什么是CSSCSS是Cascading Style Sheet的缩写，译为“层叠样式单”或“级联样式单”。W3C（TheWorldWideWebConsortium）把动态HTML（DynamicHTML）分为三个部分来实现：脚本语言（包括javascript、Vbscript等）、支持动态效果的浏览器（包括InternetExplorer、NetscapeNavigator等）和CSS样式表。3.1.1 CSS与HTMLCSS是一种为HTML提供增强补充服务的技术，可对每一个HTML的标记tag做精雕细刻的修饰，是HTML的一个补充。H1 text-align:center;color:red;Web管理组织W3C在1996年11月批准了CSS1的规范。1998年5月，W3C批准了CSS2的规范。你可以将格式和结构分离。你可以以前所未有的能力控制页面布局。你可以制作体积更小下载更快的网页。你可以将许多网页同时更新，比以前快更容易。浏览器将成为你更友好的界面3.1.3 CSS的优点只修改一个文件就改变页数不定的网页的外观和格式。在所有浏览器和平台之间的兼容性。更少的编码、更少的页数和更快的下载速度。样式表能为我们做什么？3.2 CSS的创建3.2.1 样式的基本格式和用法样式的基本格式和用法基本语句结构：基本语句结构：选择符选择符 属性：属性值属性：属性值 第一个样式表样式表：选择符属性：属性值可以通过此方法定义某选择符的属性和值，属性和值要用冒号隔开。如果属性的值是多个单词组成，必须加双引号如果需要对一个选择符指定多个属性时，使用分号将所有的属性和值分开 如果多个选择符共同使用同一组属性设定，只需将所有元素的名称包含在选择符中，并以逗号来分隔每一个名称 为了使定义的样式表方便阅读，可以采用分行的书写的格式 将样式表植入HTML文件中。将一个外部样式表链接到HTML文件上。将一个外部样式表输入到HTML文件中。将样式表加入到HTML文件行中。引用方法引用方法3.2.2 类选择器如何让主体文字的如何让主体文字的1段用绿段用绿色显示，第色显示，第2段用紫色显示，段用紫色显示，而第而第3段用灰色显示？段用灰色显示？类选择器（ClassSelector）有两种：一种叫相关类选择器，另一种叫独立类选择器。1.相关类选择器相关类选择器与一个HTML的tag有关系。tag.Classnameproperty:valueH2.hongcolor:red;text-align:center然后只要在HTML标识里加入你定义的class参数:ThisisredH2例：2.独立类选择器独立类选择器可以被任何HTML的tag使用。.Classnameproperty:value.hongcolor:red;text-align:center然后只要在HTML标识里加入你定义的class参数:ThisisredH2ThisisredP例：3.2.3 ID选择器 ID选择器的应用和类选择器类似，只要把CLASS名换成ID名前面加#即可。#IDnameproperty:value#hongcolor:red;text-align:center在HTML标识里加入：ThisisredH2ThisisredP例：CSS是DHTML的基础，CSS用于设定HTML元素在页面上的显示风格，而CSS-P则是CSS的一个扩展，它可用来控制HTML元素在网页上或者说在窗口的位置。动态HTML-DHTML是DynamicHTML的缩写。利用CSS（CascadingStyleSheets，即样式表），并依靠JavaScript使一向静止不变的页面得以“动”起来。DHTML是一种完全“客户端”技术，直接通过WEB页面实现页面与用户之间的交互性。JavaScript-和它的名字表面意义恰巧相反，JavaScript和Java事实上没有任何联系，JavaScript是一种用于在页面中控制HTML元素的语言。3.2.4 上下文选择器 一个包含一个或多个被继承元素名称的选择器，则被之称为上下文选择器。而一个不包含被继承元素名称的选择器则称为一般选择器。H2Ptext-align:center/*注意H2和P之间是空格*/在HTML标识里加入：我是读者我是读者例：外部样式表：是一种保存在外部的样式表文件，外部文件以.CSS为扩展名。3.2.5 建立样式文件 3.3 CSS的引用四种方式：整页套用样式；样式定义中引用样式文件的方式；引入样式文件的方式；使用局部样式。3.3.1整页套用样式格式：3.3.2 样式定义中引用样式文件 格式：3.3.3 样式文件的引入 格式：3.3.4 使用局部样式 局部样式可称为内嵌样式。局部样式是混合在HTML标识里使用的，用这种方法，可以很简单的对某个元素单独定义样式，只对所定义的标识起作用，并非对整个页面起作用。内嵌样式的使用是直接将在HTML标识里加入style参数。而style参数的内容就是CSS的属性和值。CSS扩 展 了HTML的功能Stylesheets:TheTooloftheWebDesignGods3.4 CSS的继承性 继承性就是层叠性。所谓CSS的继承性是指被包在内部的标识将拥有外部标识的样式性质。3.5 CSS的优先顺序引用方式的优先级依照后定义的优先原则，优先级最高的是内嵌样式，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。3.5.1 不同引用方式的优先顺序 3.5.2 不同选择器的优先顺序 ID选择符优先级高于类选择符和HTML标识选择符；因为ID选择符是最后加在元素上的，所以优先级最高；其次是类选择符；如果特定属性的某条规则拥有上下文选择器的设定，而且该元素还有另一条规则内含一般选择器的设定，那么位于上下文规则中的设定将取得更高的优先权，因为它比较特殊。_blank将链接的文档载入一个新的、未命名的浏览器窗口。_parent将链接的文档载入父框架页或包含链接的框架窗口。如果包含链接的框架没有嵌套，则相当于_top；链接的文档载入整个浏览器窗口。_self将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。_top将链接的文档载入整个浏览器窗口，从而删除所有框架。