《网页设计技术》由会员分享，可在线阅读，更多相关《网页设计技术（94页珍藏版）》请在金锄头文库上搜索。
1、网页设计技术,中国铁道出版社,第1章 网页基础知识,内容提要,用浏览器浏览网页 网页的基本概念 网页的设计,内容提要,用浏览器浏览网页 网页的基本概念 网页的设计,浏览新浪新闻,1.,2.,3.,查找列车时刻表,1.,2.,内容提要,用浏览器浏览网页 网页的基本概念 网页的设计,网页的定义,网页的英文是“Webpage”，它是指一种存储在Web服务器（网站服务器）上，通过Web进行传输，并被浏览器所解析和显示的HTML文件 从文件的角度讲，网页是一种由HTML，即超文本标记语言编写而成特殊的文本文件 从网站的角度讲，网页是网站的基本信息单位，一个网站通常由众多的网页组成 从组成元素的角度讲，网
2、页是由文本、图片和超链接等多种对象构成的多媒体页面,网页的基本描述语言HTML, 网页举例 点击下面的超链接可以打开新浪网主页 新浪网 ,网页的浏览过程,内容提要,用浏览器浏览网页 网页的基本概念 网页的设计,色彩的基本知识,颜色的数值表示 6位16进制的数值的表示方式：比如红色#FF0000、白色#FFFFFF、黑色为#000000 10进制数表示方式：比如红色color(255,0,0) 颜色带给人的感觉 红色：冲动、愤怒、热情和活力 绿色：和睦、宁静、健康、安全 橙色：轻快、欢欣、热烈、温馨和时尚 蓝色：凉爽、清新、专业 ,网页的色彩搭配,不同的颜色以及不同颜色的组合可以给人不同的感受,
3、网页的布局,重点区域,网页的特效,本章小节,上网最重要的活动就是浏览网页。 网页是一种存储在Web服务器（网站服务器）上，通过Web进行传输，并被浏览器所解析和显示的HTML文件。 网页的风格通常表现在网页的色彩、框架、特效和内容等多个方面。,第2章网页的基本描述语言HTML,内容提要,HTML概述 HTML文档的构成 HTML元素,HTML元素,HTML概述,HTML是网页的基本语言，它的全称是HyperText Markup Language，中文翻译为“超文本标记语言”。 HTML文件本身是一种文本文件，它的文件扩展名通常为“html”或“htm”。 HTML由国际标准定义，目前的最高版
4、本为HTML4.01。,内容提要,HTML概述 HTML文档的构成 HTML元素,HTML元素,元素、标记和属性,HTML元素是构成HTML文档的基本单位，它通常由起始标记、内容和结束标记三个部分组成。 每个元素都有一些相关的属性，属性只出现起始标记中，并且具有固定的描述结构，这个结构形如：属性名=”属性值”。,HTML文档结构, The document title Main heading A paragraph. Another paragraph. A list item. Another list item. ,内容提要,HTML概述 HTML文档的构成 HTML元素,HTML元素,
5、HTML元素,文档结构元素,HTML HTML元素表明这个文档是HTML文档 HEAD HEAD元素用来描述HTML文档本身的信息，比如网页标题 BODY BODY元素用以标明HTML文档的正文,BODY的语法, ,头部元素,TITLE TITLE用于设置网页的标题 META META元素通常用来指明如关键字、作者、网页制作工具等信息 STYLE STYLE用来内嵌一个样式单 BASE BASE用来指明该网页的根URL LINK LINK用来链接一个外部文件，如CSS、JS,字符格式元素,FONT用来设置字符的颜色、大小和字体 B是粗体显示 I是斜体显示 U是加下划线 S是加删除线 STRIK
6、E和S的效果一样 BIG是大字体 SMALL是小字体,图片元素IMG,IMG用来描述网页中的图片 IMG的语法 ,超链接元素A,A元素用来描述文字超链接、图片超链接和热区超链接 A元素的语法 ,块元素,H1H6用于将文字以标题的格式显示 ADDRESS用于格式化地址的显示 PRE用来保持文本原先的格式 P用来产生一个分段 BR也用于分段显示，但于P不同的是，它没有一行的间距,CENTER元素用于将某段文字、某个表格或某个对象居中显示,表格元素,TABLE表明这是一个表格，所有其他的表格元素都包含在它里边 CAPTION用来标识表格的标题或说明 TR表明这是表格的一行 TH表明表格一行中的一列，
7、但是这一列通常是表头，其内容会加粗显示 TD表明表格一行中的一列,表格元素举例, 表格一 不同语言的数字表示 English 中文 阿拉伯文 one 一 1 two 二 2 ,表单元素,FORM元素用来标识一个HTML表单 INPUT是最重要的表单元素，因为按钮、文本框、密码框、图片按钮、文件选择框、单选钮、复选框和隐藏控件都使用的是INPUT元素，然后通过type属性进行区分 SELECT元素用来表示选择列表 TEXTAREA元素用来表示多行文本框,INPUT元素表示的不同表单控件,层元素,LAYER和ILAYER都用来表示一个层，它们的区别在于LAYER通常使用绝对定位，而ILAYER通常
8、使用相对定位 DIV和SPAN是IE所支持的层元素，通常采用绝对定位,脚本元素 SCRIPT,SCRIPT元素用来包含JavaScript、VBScript或Jscript脚本 SCRIPT包含JavaScript举例： function changeBGColor (newcolor) document.bgColor=newcolor; return false; changeBGColor(“#ff0000”); ,本章小节,HTML是网页的基本语言，所以网页文件通常又被称为HTML文件 HTML元素是构成HTML文档的基本单位，它通常由起始标记、内容和结束标记三个部分组成。不同的元素通
9、常具有不同的属性，这些属性需要在起始标记中进行设置 HTML文档总是以标记开始，以标记结束。HTML元素中通常包含两个子元素：HEAD和BODY，这两个元素将HTML文档分为头部和主体两个部分 HTML的元素很多，按照元素的用途可以将HTML元素分为文档结构元素、头部元素、列表元素、超链接元素、图片元素等,第3章 动态网页设计技术,内容提要,动态的网页 层叠样式单CSS JavaScript,内容提要,动态的网页 层叠样式单CSS JavaScript,什么是动态网页,动态网页指的是使用DHTML（动态HTML）技术的网页 DHTML是一种在网页下载到浏览器以后仍然能够控制网页中各个HTML元
10、素，使其随时变换的HTML DHTML在实现时并不是独立的，它通常需要和脚本语言（JavaScript、VBScript和Jscript）、层叠样式单（CSS）及层技术组合在一起使用,动态网页举例,内容提要,动态的网页 层叠样式单CSS JavaScript,层叠样式单CSS,层叠样式单用于把内容和格式分离开，用一种统一的方式来管理各种不同网页内容的显示格式 层叠样式单可以分为三种：内联式样式单、嵌入式样式单和外部样式单,内联式样式单,内联式样式单是在现有HTML元素的基础上，用sytle属性把特殊的样式直接加入到那些控制信息的标记中 举例： 内联式样式单,嵌入式样式单,嵌入式样式单通常包含在
11、HTML文档的头部，即HEAD元素中，并且有一个专门的元素SYTLE来标记这种样式单 举例： ,外部式样式单,外部式样式单是指将样式单作为一个独立的CSS文件保存在计算机上，然后用LINK元素将其链接进来 举例： ,内容提要,动态的网页 层叠样式单CSS JavaScript,JavaScript,JavaScript来源于LiveScript，是网景公司开发的一种语言 JavaScript是一种基于对象（Object Based）和事件驱动（Event Driver）的脚本语言 JavaScript兼容于包括IE和Navigator在内绝大部分浏览器,在HTML中加入JavaScript,
12、JavaScript举例 ,JavaScript的数据类型、变量和运算符,数据类型 数值类型，包括整数和实数； 字符串类型，这个类型的数据需要用英文的双引号（“）或者单引号（）括起来； 布尔类型，JavaScript只分True或者False； 空值类型，即null 变量 var关键字 运算符 算术运算符包括加（+）、减（-）、乘（*）、除（/）、取模（%）、递增（+）、递减（-）及负数（-） 赋值运算符包括等于（=）、加等于（+=）、减等于（-=）、乘等于（*=）、除等于（/=）、模等于（%=）、左移位等于（=）等。 逻辑运算符包括与（&）、或（|）、非（!）三个运算符 比较运算符包括等等于
13、（=）、不等于（!=）、大于（）、小于（=）和小于等于（）和右移位左边补零（）,JavaScript的控制语句,IfElse条件语句 for循环条件语句 while循环语句 break跳出循环语句 continue循环中断语句,JavaScript的函数,Function关键字用来定义函数 ,JavaScript中的对象,JavaScript内置对象 字符串对象String 数学对象Math 日期时间对象Date 数组对象Array 浏览器相关的对象 文档对象Document 窗口对象Window 历史对象History 定位对象Location 浏览器对象Navigator 自定义对象, J
14、avaScript举例 现在是北京时间：“); document.write(curr.getYear(),“年“); document.write(curr.getMonth(),“月“); document.write(curr.getDate(),“日 “); document.write(curr.getHours(),“时“); document.write(curr.getMinutes(),“分“); document.write(curr.getSeconds(),“秒“); / 生成一个新的字符串对象 welcomestring = “Welcome to my homepa
15、ge!“; / 用window对象的alert方法弹出大写的欢迎信息 alert(welcomestring.toUpperCase(); ,JavaScript的事件,事件指的是在浏览器过程中，网页中的对象可能发生的各种动作，比如按钮被点击、网页被加载等 onClick，鼠标单击事件，比如按钮被点击 onFocus，获得焦点事件，也就是说某个对象被激活 onBlue，和onFocus相反，是失去焦点 onChange，某个对象发生改变时发生的事件，比如在菜单或列表中选择不同的项 onLoad，网页加载事件 onMouseOver，鼠标移动到某个对象上时发生的事件 onMouseOut，鼠标移
16、开某个对象时发生的事件,本章小节,动态网页指的是使用DHTML（动态HTML）技术的网页 除DHTML之外，动态网页技术主要还包括脚本语言技术、层技术和层叠样式单技术 层叠样式单通常分为内联式样式单、嵌入式样式单和外部样式单三种样式单，它最大的优点就在于把内容和格式分离开来 JavaScript是一种基于对象（Object Based）和事件驱动（Event Driver）的脚本语言。除了JavaScript内嵌对象和浏览器相关的对象外，JavaScript还可以自定义新的对象,第4章用 Dreamweaver 制作网页,内容提要,可视化网页制作工具 Dreamweaver的界面介绍 用Dreamweaver制作网页,内容提要,可视化网页制作工具 Dreamweaver的界面介绍 用Dreamweaver制作网页,Microsoft Frontpage,Macromedia Dreamweaver,Flash & Fireworks,内容提要,可视化网页制作工具 Dreamweaver的
