资源描述
韩顺平J2EE视频教程第二版轻松搞定网页设计html+css+javascript全42讲笔记轻松搞定网页设计html+css+javascript内容介绍 该教程用循序渐进的手法和项目驱动的案例，由浅入深的讲解网页设计的基础部分和高级部分，包括以下内容：1、html详解；2、css(块级元素、行内元素、标准流盒子模型、浮动定位)；3、div+css网页布局(盒子模型经典案例、仿sohu首页面布局)；4、javascript深入讲解(js基本语法、数组、js面向对象编程，js系统函数、事件、js dom编程详解、正则表达式) 做web开发的程序员都知道，网页设计是web开发的重要部分，不管你是php web开发，还是java web、.net web都需要网页设计，说白了就是你的web程序的界面，以前的程序员可能不大注重界面，但是一个布局合理，设计优雅，简洁易用的网站界面无疑会给我们的项目增光添彩，这就好比一个你去推销一个产品，如果这个产品的包装非常精美漂亮，显然就会受到客户的欢迎。我们这个视频专题就是详细深入的讲解如何做出符合商业要求的网页。html是什么 HTML(HyperText Mark-up Language)即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。html可以做什么1、HTML可以编写静态网页；2、该静态网页可以包括文字、图形、动画、声音、表格、链接。从而构成一个个漂亮的网面html发展历史1993标记语言第一版 1995html2.0 1996html3.2w3c推荐标准2001xhtml1.1w3c推荐标准2000xhtml1.0w3c推荐标准1999html4.0.1w3c推荐标准 2008 html5蒂姆伯纳斯-李万维网之父html设计者w3c创始人w3c的介绍W3C是英文World Wide Web Consortium的缩写，中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院的计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee。W3C组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员(大约500名会员)包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。html和xhtml区别html-xhtml-xml html语言本身有一些缺陷(比如内容和形式不能分离，标记单一，数据不能复用等)，随着xml的兴起，xml越来越受到国际认可，所以人们希望xml来弥补html的不足，但是目前有成千上万的网页都是html编写的，所以完全使用xml来替代html还为时过早，于是w3c在2000推出xhtml1.0，建立xhtml的目的就是实现html向xml的过渡。html的运行原理1、本地运行；2、远程访问运行；helloworld.html示例：第一个网页hello,worldhtml的基本结构不管html文件有多复杂，它的基本结构如下:内容如果没有内容，可以这样写-注：中的都是标记，标记是要成对出现如:内容元素也叫标记段落标记字体标记 标题字体 #=1,2,3,4,5,6字体加粗html001.html字体案例字体及颜色案例第一行文字第二行文字粗体第三行文字蓝色字第四行文字变大第五行字变小HTML符号实体-介绍 在网页上显示一些特殊的符号，我们需要使用html的符号实体，有些人把它称为字符实体。 为在网页上显示版权符号，我们就需要使用html的符号实体©才能在网页上正确显示。html002.html字体实体案例字符实体案例©-版权字符实体£-英磅字符实体®-注册商标字符实体html常用标记/元素-超链接html超链接显示内容显示内容锚（显示在页面上的文本）使用超链接，可以让网页连接到另一个页面html003.html超链接案例超链接案例本窗口切换到网易123的电子邮箱新窗口打开凤凰网通过此标签找本页面中的新浪标签新浪在这里新浪的内容在这里说明：href可连接到外部的文件html图像元素-image标记名称html004.html图像元素案例图像元素案例特别说明:src可以是外中网站的一个图片urlhtml常用标记/元素-table表格的主要用途是显示数据和图片，并且可以布局表格元素 名称是table表示行表示列cellspacing表示列与列之间的距离有多大cellpadding表示各行各列内容的填充大小html005.html表格示例表格table元素案例1行1列1行2列1行3列2行1列2行2列2行3列3行1列3行2列3行3列-html006.html表格table综合小练习表格table元素综合小练习星期一菜谱素菜清炒茄子花椒扁豆小葱豆腐炒白菜荤菜油闷大虾海参鱼翅红烧肉烤全羊-html007.html表格table综合练习-课程表表格table元素综合练习-课程表课程表项目上课休息星期星期一星期二星期三星期四星期五星期六星期日上午语文数学英语英语物理计算机休息数学数学地理历史化学计算机化学语文体育计算机英语计算机政治英语体育历史地理计算机下午语文数学英语英语物理计算机休息数学数学地理历史化学计算机html常用标记/元素-ul/li列表内容的属性设定(常用)：例如：type=square设定符号款式，其值有三种，如下，默认为type=disc:type=disc时的列项符号为实心圆点。type=circle时的列项符号为空心圆。type=square时的列项符号为空心正方形。html008.html无序列表ul/li示例无序列表-ul/li示例三国演义水 浒 传红 楼 梦西 游 记html的有序列表-ol/li列表内容称为顺序列表标记。则用以标示列表项目。所谓顺序列表就是每一项有顺序，又称编号列表。的属性设定(常用):例如:type=i start=4设定开始数目，不论设定了哪一数目款式，其值只能是1,2,3.等整数，默认start=1i可以取以下值中的任意一个：1阿拉伯数字1,2,3.a小写字母a,b,c.A大写字母A,B,C.i小写罗马数字i,ii,iii.I大写罗马数字I,II,III.html009.html有序列表-ol/li示例有序列表-ol/li示例三国演义水 浒 传红 楼 梦西 游 记html常用标记/元素-framesethtml列表-框架html010.html框架frameset/frame使用示例(配合html010_1.htmlhtml010_1.html使用)框架frameset/frame使用-html010_1.html周杰伦-html010_1.html东风破歌词一盏离愁孤单伫立在窗口我在门后假装你人还没走旧地如重游月圆更寂寞特别说明：html010.html中不能带body标记*框架frameset/frame综合案例html011.html框架frameset/frame综合案例(由html011_left.html/html011_right1.html/html011_right2.html/html011_top.html配合使用)框架frameset/frame综合使用示例-html011_top.html-html011_left.html东风破青花瓷东风破青花瓷-html011_right1.html东风破歌词一盏离愁孤单伫立在窗口我在门后假装你人还没走旧地如重游月圆更寂寞-html011_right2.html青花瓷歌词素胚勾勒出青花笔锋浓转淡瓶身描绘的牡丹一如你初妆*html常用标记/元素-表单formhtml的表单元素，主要用于让用户输入数据，并提交给服务器基本语法是：各种元素输入框、下拉列表、文本域、密码框等注意：action把指定的请求交给哪个页面；get不安全，会将输入的密码显示在浏览器地址栏中。所以建议使用post方法进行内容提交。表单元素的格式type=text(文本框)/password(密码框)/hidden(隐藏域)/checkbox(复选框)/redio(单选框)/submit(提交按钮)/reset(重置按钮)/image(图片按钮)name是你给该表单控件取名html012.html表单form示例form表单提交示例 登录界面用户名：密 码： html012_ok.html登录成功，OK!-input元素的举例说明html013.htmlinput元素示例input元素示例名字密码*水果*西瓜苹果香蕉葡萄*性别*男女*隐藏*html常用标记/元素-select/option/textarea下拉框和文本域textarea的使用html014.html下拉框和文本域的使用示例下拉选择框和文本域示例请选择你的出生地：-请选择-北京上海重庆*留言板*请在这里输入. *请选择你要上传的文件*html的加强语言字符集metameta的content属性可以指定网页内容的样式可以是text/html,text/xml等charset指定显示的编码，默认为系统指定的字符集，也可以人为指定使用字符集。如：charset=GBK即使用国标码显示，charset=utf-8则使用utf-8来显示网页内容html015.htmlmeta浏览器显示样式和字符集示例html加强练习你好!背景色彩和文字色彩bgcolor-背景色彩text-非可链接文字的色彩link-可链接文字的色彩alink-正被点击的可链接文字的色彩vlink-已经点击(访问)过的可链接文字的色彩html016.html示例背景色彩和文字色彩你好!sohuhtml017.html示例页面空白Margin你好!sohu超链接target属性加强新窗口本窗口父窗口整个浏览器窗口指定区域显示标尺线size属性控制标尺线的粗细；width控制标尺线的长短；align居左left居右rightnoshade标尺线是否有阴影color标尺线的颜色字体标记. #=1,2,3,4,5,6.标记显示黑体字.字体加粗.斜体字.字体加下划线.居中显示.靠上显示.靠下显示.字体加删除线.html018.html物理字体示例物理字体字体加粗斜体字字体加下划线居中显示靠上显示靠下显示字体加删除线字体加删除线客户端字体(Font Face).#=客户端可获得的字体文字布局标记行的控制表示段落换行不换行文字的分区显示 .align可表示left/center/right图象标记#=在浏览器尚示完全读入图象时，在图象位置显示的文字会移动的文字基本语法.direction移动属性left/rightbihavior移动方式scroll循环/slide移动一次/alternate来回往返loop循环次数，可以指定。不指定为循环不止。scrollamount设置移动速度scrolldelay延时移动多媒体页面嵌入多媒体文本(EMBED)基本语法 #=url地址html019.html企业邮箱首页面示例(table布局)邮箱界面演示 用户名：密码： 找回密码 注册新用户 DIV+CSS学习div+css的介绍div+css是什么 div元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。 css是英语Cascading Style Sheets(层叠样式表单)的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。 div+css是网站标准(或称“WEB标准”)中常用术语之一，通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现和种定位。 我们可以简单的这样理解div+css: div是用于存放内容(文字、图片、元素)的容器。css是用于指定放在div中的内容如何显示，包括这些内容的位置和外观。div+css的好处：1、 html文件就会减少大量的table,tr,td,html变简单2、 内容和样式分离3、 符合搜索引擎的喜好4、 节约带宽使用IDE(Myeclipse)进行开发，好处是有提示Myeclipse的web prject介绍div+css的优势1、 符合W3C标准。微软等公司均为W3C支持者。2、 搜索引擎更加友好。3、 样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均div+css的框架模式，更加印证了div+css的大势所趋。4、 Css的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。5、 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。 css的必要性使用元素来编写css1.html示例 css1.html !- 栏目一 栏目二 栏目三 栏目四 栏目五 栏目一从使用span元素我们可以看到，css的基本语法内容元素可以是html的任意元素；属性名与属性值:不同的元素属性名不同；(可参考W3C组织给出的文档)使用css可以统一网站的风格css分类：内部css，外部csscss1_1.html使用style统一风格 css1_1.html !- .style1font-size: 20px;color:red;font-weight: bold;font-style: italic;text-decoration: underline; 栏目一 栏目二 栏目三 栏目四 栏目五 css的滤镜体验css2.html将图片通过滤镜变成灰色(注：此方法在IE10以上浏览器中不被支持) css2.html /*使用滤镜*/a:link img filter:gray;a:HOVER imgfilter:; !- css的三种选择器选择器选择器是css中非常重要的概念，css中有三种不同的选择器1、类选择器，又叫class选择器2、id选择器3、html元素选择器4、通配符选择器简单的说，选择器就是在css中创建，而在网页页面(html,jsp,php,asp.net)中使用类选择器基本语法.类选择器名属性名:属性值;.css3.html 类选择器示例 css3.html类选择器示例 新闻1 新闻2 新闻3 新闻4 新闻5 mycss3.css类选择器/*.style1就是类选择器*/.style1
展开阅读全文