1、本人，胡德发, 愿成为 您最忠诚的朋友 13107019269 一办公楼309,Web(网页)的重要性,越来越多的人离不开web Web越来越多地渗透到人们的生活中,Web(网页)的重要性,自从有了各种网页（站）新闻站，报纸越来越不好卖了 自从有了各种网页（站）在线影院，以前大量出现的各种录像厅（投影厅）不见了 自从有了各种网页（站）电子商务站，人们购物越来越方便了 自从有了各种网页（站）婚恋交友站，人们交友越来越方便了 网页(网络)对人们的影响越来越大,Web所催发的财富,Google 约2500亿美元 百度 约500亿美元 阿里巴巴 约600亿美元 Facebook 网易 迅雷 各种各样的
2、网站,开发,-网页设计 -网站开发技术 一个网站由多张相互连接的网页所构成 网页可简单分成动态网页与静态网页二类 静态网页主要用于静态地显示信息 动态网页主要用来与用户进行交互,网页中元素,当我们看到一张网页时，我们要从专业人员的角度对其进行“解剖”。 网页中的主要元素可以简单分为二类： 1) 可见元素文字，图片，动画，各种视频，表格等 2) 不可见元素各种程序等,本课程所包含的主要内容,Html(超文本标记语言) -用于设计静态网页 Css(级联样式表) -用于网页修饰 Javascript -用于客户端控制的脚本语言 Jsp(java server page) -用于动态网页编程, 要求有
3、java基础 数据库,学好本课程的关键,上课认真听讲 课后多看各种资料（非教材） 多上机练习,第一部分HTML,HTML 第一讲,主要用到的工具,记事本 Editplus-加强版的文本编辑器 Dreamweaver-专业的网页设计工具 Frontpage-微软公司出品的专业网页设计工具最开始学习建议使用editplus,HTML概念,HTML（Hyper Text Markup Language 超文本标识语言） 是一种用来制作超文本文档的简单标记语言。 用HTML编写的超文本文档称为HTML文档。,HTML文档的编写方法,手工直接编写 记事本等，存成.htm 或者 .html格式 使用可视化
4、HTML编 辑 器 Frontpage、Dreamweaver等,网页文件命名,*.htm或*.html 无空格 无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字 区分大小写 首页文件名默认为：index.htm 或 index.html 切记，文档里面所有的字符都应是英文输入法下面输入的,HTML 文件结构,. . . 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。,HTML 文件结构 (Document Structures),
5、 HTML 文件的正文,第一张网页（01.htm）,my first pageThis is my first homepage!,基本组成部分 HTML元素属性,HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。,第二张网页（02.htm）,my first page This is my first homepage!,HTML基本结构的 有关元素和元素属性,HEAD元素1 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义HTM
6、L文档的标题。与之间的内容将显示在浏览器窗口的标题栏。,HTML基本结构的 有关元素和元素属性,HEAD元素2 元素 元素下面可以插入很多很有用的元素属性。下面介绍四种：用来标记搜索引擎在搜索你的页面时所取出的关键词。,HTML基本结构的 有关元素和元素属性,HEAD元素3 元素 用来标记文档的作者。,HTML基本结构的 有关元素和元素属性,HEAD元素4 元素 用来标记你的页面的解码方式。,HTML基本结构的 有关元素和元素属性,HEAD元素5 元素 用来自动刷新网页,练习（03.htm）,编写一个网页，要求3秒钟后自动跳转到湖南商学院的网站。my first page三秒钟后本网页将自动跳
7、转到湖南商学院首页,元素及元素属性1,元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。,元素及元素属性2,元素中有下列元素属性： (1)bgcolor bgcolor属性标志HTML文档的背景颜色。如：bgcolor=“#CCFFCC“。 例：04.htm,HTML对颜色的控制,HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.,常见颜色的代码,元素及元素属性3,元素中有下列元素属性： (2)backgro
8、und background属性标志HTML文档的背景图片。如：background=“images/bg.gif“。 可以使用的图片格式为GIF，JPG例：,元素及元素属性5,元素中有下列元素属性： (4)text text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。 例：,元素及元素属性7,元素中有下列元素属性： (6) leftmargin和topmargin 设置网页主体内容距离网页顶端和左端的距离如：leftmargin=“20“ topmargin=“30“ 例：,HTML 第二讲,文字标签属性1,文字属性标记 1.
9、文字颜色 指定颜色 . #=RRGGBB 16 进制数码 例：,文字标签属性2,文字属性标记 2.文字字体. #=客户端可获得的字体例:,文字标签属性3,文字属性标记 3.文字大小. #=1, 2, 3, 4, 5, 6, 7 or +#, -#例：,文字标签属性4,文字属性标记 4.文字标题. #=1, 2, 3, 4, 5, 6例：值越小，字越大,文字布局,行的控制 段(Paragraph) (可以看作是空行) 空白占位符 例：,文字布局,行的控制 HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即元素。元素可以使所在的位置出现换行。这种换行和浏
10、览器的自动换行的效果类似。元素不是成对出现的。 例：,HTML文字与段落格式控制,倾斜文本粗体文本下划线文本删除线文本 例：,基本组成部分HTML注释,HTML文档可以插入注释。注释内容不会在浏览器窗口显示 HTML注释的格式为： 例：,文字的对齐,. (n=1,2,3,4,5,6) . (#=left, center, right)例：,文字的分区显示, . (#=left, center, right) 例：,3.HTML段落与分行控制,居中- 元素 元素是一个独立的使所标记的字符居中的元素。它的作用与使用元素里的align=“center”类似 例如：居中段落,3.HTML段落与分行控制
11、,标尺线（水平线）：设定线宽：设定线长：设定对齐方式 #=left, right ：设定线的颜色例：,3. HTML的段落与分行控制,无序列表元素1 列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。,3. HTML的段落与分行控制,无序列表元素2 无序列表是由和元素定义的:sportsfood drink friends 例：,3. HTML的段落与分行控制,无序列表元素3 无序列表的默认符号是圆点。 元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有： disc(圆)、circle（圆圈）
12、、square（方块） 例：,3. HTML的段落与分行控制,有序列表元素1 有序列表由和定义:sportsdrinkfriends例：,3. HTML的段落与分行控制,有序列表元素2 元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C作为列表的编号 例： 19.htm 元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义元素的start属性 例：,4.超级链接普通超级链接1,超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义
13、。,4.超级链接普通超级链接2,超级链接是用锚元素定义的 在元素下，有元素属性href,href的属性值为一个URL地址 如：指向学院的超级链接 如：普通超级链接 例：,4.超级链接E-mail超级链接,超级链接可以指向E-mail地址 如：指向E-mail地址的超级链接例：,4.超级链接新开链接窗口,开一个新的(浏览器)窗口 (Target Window) . 例：,4.超级链接去除下划线,去掉超级连接的下划线：style=“text-decoration: none”例：,4.超级链接其他超级链接,WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用，如：Ftp等。
14、实际上mailto也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接; 指向其他Internet应用的超级链接不是我们掌握的重点。,4.超级链接锚点(书签) 1, 指向本页面锚点aa的超级链接 例：,练习：手写代码实现,链接（新开窗口与Email）、背景、文字颜色、字体、换行、页面标题。练习：,HTML对图片的控制-1,基本语法:引用图片必须用元素标志。元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。 src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址 例：,HTML对图片的控制-2,所谓图片的替代文本，指图片不能显示时在图片所在位置显示的
15、一段文本或当鼠标移到图片上时也会显示替代文本（用alt ）。 定义图片替代文本的方法是：例：,HTML对图片的控制-3,图片的显示大小 我们可以指定一幅图片在浏览器窗口里的显示大小。 定义图片的显示大小的方法是：width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。 例：,HTML对图片的控制-4,图片的边框 我们可以为一幅图片加一个边框以突出显示：border的属性值为象素数例：,HTML对图片的控制-5,图片的对齐方式 图片可以相对于页面或单元格有一个对齐方式。 定义水平对齐方式的方法是：例：,HTML对图片的控制-6,图片的对齐方式 定义图片的垂直对齐方式：
16、对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。 例：,HTML对图片的控制-7,定义图片与左、右的文本之间的间距 图片在显示时，与左右的文本之间可以有一定的间距Hspace(horizontal)定义水平间距； Vspace(vertical)定义垂直间距。单位都是象素数. 例：,HTML对图片的控制-8,图象的超级链接 图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：所以，所谓超级链接实际上就是用元素标志一个图象的引用; 例：,HTML 第三讲,表格,表格示例 表格的html代码,单元格（用来表示，每个单元格可以有背
17、景颜色和背景图片）,表格（用来表示，表格可以有背景颜色、背景图片）,表格边框,每一行可以用来表示，单元格放在行中，每行可以有很多的单元格。,表头（用来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）,表格(TABLE)标记-1, 元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。 元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。 元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。,表格(TABLE)标记-2
18、,表格的基本结构 定义表格定义表头定义表行 定义单元格例：,表格(TABLE)标记-3,表格的属性 1 width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。 height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。 border属性：表格边线粗细 例,表格(TABLE)标记-2,表格的属性 1 4、bgcolor属性：指定表格或某一个单元格的背景颜色。 5、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。 例：,表格(TABLE)标记-3,表格的属性 2 9、align属性：指定表格或某一个单元格里的内容（文本、图片等
19、）的对齐方式。 例：,表格(TABLE)标记-3,表格的属性 2 10、cellspacing属性：单元格间距。 例： 11、cellpadding属性：单元格边距。 例：,表格(TABLE)标记-4,单元格属性 1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括： top：顶端对齐； middle：居中对齐； bottom：底端对齐; Baseline：相对于基线对齐; 例：,表格(TABLE)标记-6,行属性 1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包 top：顶端对齐； midd
20、le：居中对齐； bottom：底端对齐。 Baseline：相对于基线对齐。,表格(TABLE)标记-7,行属性 2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式 3、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素,表格进阶,表格的嵌套 在 之间插入表格，实现表格嵌套 例： 表格的作用一般只是控制文本和图像的显示，而不显示表格的边框 例：,综合案例,表格的综合使用 例：,跑马灯滚动字幕,marquee 用法详解, . 移动属性的设置 ,这种移动不仅仅局限于文字，也可以应用于图片，表格等等 方向 #=left, right ,up ,dow
21、n 从右向左移,方式, #=scroll, slide, alternate 一圈一圈绕着走 只走一次就歇了 来回走,循环, #=次数；若未指定则循环不止(infinite) 只走 3 趟 只走 3 趟 只走 3 趟,速度 、延时, 啦啦啦，我走得好快哟！ 啦啦啦，我走一步，停一停！,外观(Layout)设置,对齐方式(Align) #=top, middle, bottom 啦啦啦，我会移动耶！ 底色 #=rrggbb 16 进制数码，或者是下列预定义色彩： 颜色,面积, 面积,动作,碰到我就停,实例,表单(FORM)标记,HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以
22、收集客户端提交的有关信息。,表单(FORM)标记,表单是网页上的一个特定区域。这个区域是由一对元素定义的。 元素 action属性：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。 Method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。,表单(FORM)标记,表单的基本语法:. * =GET有数据量限制，POST无以上限制,以文件形式传输 例：,表单(FORM)标记,文本框? 文本框的名字 * text,password * 默认值 * 长度 ? 最大输入字符数,表单(FORM)标记,3.文本域. 例：,表单(FORM)标记,按钮
23、包括普通按钮、重置按钮和提交按钮例：,表单(FORM)标记,5.复选框(Checkbox) 在一个表单里的所有多选框可以有一个或多个被选中。例,表单(FORM)标记,6.单选框(RadioButton) 一个表单里的所有变量名相同的单选框只能够有一个被选中。各个选项的name必须一样才能达到预期效果 例：,表单(FORM)标记,7.下拉列表 基本语法说明说明2 例：,表单(FORM)标记,7.下拉列表 （2）列表框的长度（3）允许多选例：,表单(FORM)标记,综合练习（*） 实现留言簿 要求：背景、文字颜色、字体、换行、页面标题、表单文本框、文本域、单选框、复选框、下拉列表、图象域、提交与取
24、消按钮，内容以mail形式提交。,HTML第四讲,网页中的框架,制作框架页面的步骤： 1.编写所有子框架页面 2.编写主框架页面 3.在主框架页面中设定子框架名称 4.如果框架页面之间存在链接，在子框架中设定链接。 注意：框架页面是不含标签的,网页中的框架,基本语法您的浏览器不支持框架，请考虑升级您的浏览器！,网页中的框架,定义框架的基本语法 框架由一对定义 有两个属性：rows和cols Rows定义上下分割的框架的大小； cols定义左右分割的框架的大小； 在定义大小时，rows和cols可以使用相对大小或以百分比为单位。,网页中的框架,各窗口的尺寸设置 横排多个窗口排列方式： ABC 例
25、：,网页中的框架,各窗口的尺寸设置 纵向排列多个窗口排列方式：A B C 例：,网页中的框架,COLS & ROWS：纵横排列多个窗口排列方式： BAC 例：,网页中的框架,框架边框的颜色 bordercolor=“ff0000“ 例：03.htm 各窗口边框的设置 frameborder=#=yes, no / 1, 0 例：04.htm 框架边框的宽度 framespacing=“10“ 例：04.htm,网页中的框架,的属性 name：定义该框架的名字。这个名字可以被一些网页元素引用，如被元素引用。例： Src：在本框架里显示网页的URL。 Target：目标框架,引用的是目标框架的名字
26、。,网页中的框架,在当前框架中打开超链接页面 默认就是在当前框架页中打开,也可以采用Target=“_self” 在指定框架中打开超级链接页面 Target=“name” 新开窗口打开链接页面 Target=“_blank” 跳出整个框架集 Target=“_parent”,网页中的框架,的属性 Scrolling：是否显示滚动条。yes, no, auto 例： Noresize：框架在浏览器里不可以被调整大小。 例：,网页中的框架,内含窗口. #=初始页面的 URL #=框架名称(Frame Name) 例：,多媒体页面,用嵌入多媒体对象 基本语法 #=URL 注： 使用 标记之前，需要安
27、装插件才可以； 对于不同的plugin，其embed属性也不同。 例：,多媒体页面（*）,嵌入背景音乐#=WAV 文件的 URL#=循环数 例：,多媒体页面（*）,特殊标记元素Object 元素用来包含图像、动态图像、Java小程序。 元素用以替换更具体的和元素，以及和元素。 例,基本概念,1，Internet 2，web 3，Html 4，超链接 5，浏览器 6，URL 7, HTML元素【3个】 8，源代码,设计网页正文,1.文字：大小（加大与缩小），颜色，字体，粗斜体，上下标，删除线，下划线，等宽字体，闪烁与滚动文字。 2.段落：换行，分段，文字的居左右中，段落的文字方向和语言、标题，水平线，自动换行与不换行，预定义格式，块引用。 3.网页整体布局：背景图片与颜色，两个路径，页边边距，默认字体大小，文本默认颜色，超链接的颜色。 4.其他应用技巧,Html中的内容,1，文字。 2，超链接。 3，图片。 4，列表、框架、表格、表单。 5，多媒体。,
