网页设计培训html_第1页
网页设计培训html_第2页
网页设计培训html_第3页
网页设计培训html_第4页
网页设计培训html_第5页
已阅读5页，还剩56页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计何铮2012.10.25什么是网页什么是网页？静态网页和动态网页？网页设计需要掌握些什么？做网页的一些好习惯？动手做网页前要准备和了解些什么？1.1网站与网页

1．网站与网页

当我们在浏览器中输入一个已知网址后，即可打开一个页面，让我们了解有关这个网址的一些信息和内容，这个页面就是我们通常所说的网页，而打开网络由网址进入时第一个看到的页面，我们通常把它称为首页（homepage）或主页，所有的信息都会清楚地整理在这个页面上，目的就是为了让用户在使用这个网页时能快速链接到需要的资料，它既是一个单独的网页，同一般网页一样可以存放各种信息,又是一个特殊的网页，是整个Web站点的起始点和汇总点，是用户开始浏览站点的“入口处”。由首页所延伸下去的页面，就是一个个网页。

网站与网页

网页又称Web页面（.html、php、asp等），是网络文件的组成部分，是可以被浏览器访问的单个HTML超文本文件,它由文字、表格、图片、声音、视频以及各种功能按钮等组成，这些文字、图片、按钮往往又是指向别的主页的连接点。在Internet网上，这些连接点又叫超级链接。所有由首页链接出去的网页集合起来就是网站。即在设计时，将某个主题明确后，再按所需的单元、内容经过安排，化为各个不同的网页，在同一个结构及诉求下出现的集合体，就是网站（WebSite）。有主题性的网站是要经过规划和构架过的网站。在互联网上，Web站点由一组相互关联的页面组成，如果把整个WWW信息世界看作一个村子，那么一个Web站点可以理解成一个家庭。返回2.网页的分类（1）静态网页：html,htm

静态文本和图片 网页动画：滚动的字幕、Flash动画、.gif（2）动态网页 动态内容和网页特效：当前时间 交互式网页内容：登录用户名 交互式网页内容：读写服务器数据库数据

2.1．服务器（Server）与浏览器（Browser）

服务器是局域网的核心设备,它管理着局域网中的各种资源,它的基本功能是网络通信服务、管理和提供网络共享资源，以及进行网络管理。服务器实质是一台配置较高的计算机。不同的电脑操作系统，有不同的适用服务器软件，如：微软视窗windowsXPProfessional操作系统适用的服务器软件IIS5.1．网站上动态的数据，必须要通过网站服务器的服务才能运作。

2.1．服务器（Server）与浏览器（Browser）

用于查看Web站点的软件被称作浏览器。它是WWW的窗口,用户可以利用浏览器从一个文档跳转到另一个文档实现对整个网站的浏览,也可以下载并解释HTML文档中所描述的动画、声音、文本、图形、图像，并能实现电子邮件查看、下载文件、FTD等功能。它有多种版本,如微软英特尔版本、苹果电脑版本等，大多数浏览者（目前已经超过90％）使用MicrosoftInternetExplorer(简称IE)浏览器.还有一些其他的浏览器，不同版本的浏览器功能大体一样，主要区别在于各功能区在版面上的排列不同。

WWW信息浏览方式：B/S返回3、网页设计需要掌握些什么(1)网页编辑软件：FronPage、Dreamweaver(2)静态网页编程语言：HTML、CSS、XML(3)网页物资编程语言：JavaScript、VBScript(4)交互式网页编程语言：JSP、ASP、PHP(5)网页设计辅助工具：Photoshop、FireWork、Flash返回HTML语言什么是HTML？HTML的标记

<标记符>

标记成对出现<a></a>

标记可以嵌套静态网页的文件类型？

htm,html网页的结构<html><head><title></title></head><body>这是一个最简单的HTML结构。</body></html>HTML元素属性

HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的<>内，并且和元素名之间有一个空格分隔；属性值用“”引起来。例：<imgsrc=“img/aa.gif"alt="图片"border="0">HTML注释及空白符HTML文档可以插入注释。注释内容不会在浏览器窗口显示HTML注释的格式为：<!

<!--注释内容-->

<!--多行注释内容-->空白占位符:

IMG标记<img>标记：显示一个图像属性：src

图片的路径属性：border

是否显示边框属性:width

图片的宽度属性：hight

图片的高度属性:alt

图片注释其他常用标记（1）<p>标记:段落 属性align:段落对齐（left,center,right）<br>标记：换行<h1>~<h7>标记：文字标题<font>标记：字体设置标记 属性color：字体颜色 属性size:字体大小<sup>标记：上标<sub>标记：下标

其他常用标记（2）<i>标记：倾斜文本<b>标记：粗体文本<u>标记：下划线文本<s>标记：删除线文本<del>标记：双删除线文本<pre>标记:预排版（保留空格和换行）

<hr>标记：水平分隔线 属性size

：设定线宽 属性width：设定线长 属性align：设定对齐方式（left,right） 属性color：设定线的颜色HTML对颜色的控制

HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。

16进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.下面关于颜色的定义都是合法的:#f00#ff0000redrgb(255,0,0)rgb(100%,0%,0%)颜色颜色名和RGB值黑色Black=”#000000”银色Silver=”#c0c0c0”红色Red=”#ff0000”蓝色Blue=”#0000ff”白色White=”#ffffff”黄色Yellow=”ffff00”绿色Green=”#00ff00”海蓝色Aqua=”#00ffff”常见颜色的代码<body>标记属性-1<body>元素中有下列元素属性：Bgcolor：bgcolor属性标志HTML文档的背景颜色。如：bgcolor="#CCFFCC"<body>标记属性-2<body>元素中有下列元素属性：Background：background属性标志HTML文档的背景图片如：background="images/bg.gif"可以使用的图片格式为GIF，JPG<body>标记属性－3<body>元素中有下列元素属性：Leftmargin，rightmargin，topmargin：设置网页主体内容距离网页顶端和左端，右端的距离如：leftmargin="20"topmargin="30“A标记-1<a>标记：超连接标记基本语法<ahref=“URL”>…..</a>

属性href

：连接的文件路径和名称属性title

：鼠标移动到连接内容时的提示文字A标记-2<a>标记：超连接标记属性target：页面打开方式

_self :在本页面打开

_blank :在新页面打开

_parent :在父页面打开

_top :在上部页面打开A标记-3

属性name：可以跳转到一个文件的指定部位

<ahref="#C1">参见第一章</a><aname="C1">第一章</a>

相对路径和绝对路径

在网页引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。

相对路径：

“/img/test.jpg”

绝对路径： “/aa/test.jpg”HTML相对路径(RelativePath)

同一个目录的文件引用 如果源文件和引用文件在同一个目录里，直接写引用文件名即可。 我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。 假设info.html路径是： c:\web\www\sites\test\info.html

假设index.html路径是： c:\web\www\sites\test\index.html

在info.html加入index.html超链接的代码应该这样写：

<ahref="index.html">index.html</a>

如何表示上级目录 ../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。 假设info.html路径是c:\web\sites\test\info.html

假设index.html路径是：c:\web\sites\index.html

在info.html加入index.html超链接的代码应该这样写：

<ahref="../index.html">index.html</a>

假设info.html路径是：c:\web\sites\test\info.html

假设index.html路径是：c:\web\index.html

在info.html加入index.html超链接的代码应该这样写：

<ahref="../../index.html">index.html</a>

假设info.html路径是：c:\web\sites\test\info.html

假设index.html路径是：c:\web\sites\story\index.html

在info.html加入index.html超链接的代码应该这样写：

<ahref="../story/index.html">index.html</a>如何表示下级目录引用下级目录的文件，直接写下级目录文件的路径即可。假设info.html路径是：

c:\web\www\sites\test\info.html假设index.html路径是：c:\web\www\sites\test\html\index.html在info.html加入index.html超链接的代码应该这样写：

<ahref="html/index.html">index.html</a>假设info.html路径是：

c:\web\www\sites\test\info.html假设index.html路径是：c:\web\www\sites\test\html\a\index.html在info.html加入index.html超链接的代码应该这样写：<ahref="html/a/index.html">index.html</a>HTML绝对路径(AbsolutePath)HTML绝对路径(absolutepath)指带域名的文件的完整路径。假设你注册了域名，并申请了虚拟主机，你的虚拟主机提供商会给你一个目录，比如www，这个www就是你网站的根目录。假设你在www根目录下放了一个文件index.html，这个文件的绝对路径就是：/index.html。假设你在www根目录下建了一个目录叫main，然后在该目录下放了一个文件index.html，这个文件的绝对路径就是/main/index.html。滚动字幕标记

我们可以经常在一些网页里看到不断滚动的字幕，使网页变得更加丰富多彩。我们也可以利用HTML里的<marquee>…</marquee>标记来制作一个可以不断自动滚动的字幕，用来显示文字或图案,从而大大加强网页的动态效果。它也称为跑马灯效果。这种移动不仅仅局限于文字，也可以应用于图片，表格等等。滚动字幕标记1<marquee>标记：滚动字幕标记 属性direction

：运动方向（left,

right

,up,down

） 属性behavior

：运动方式（scroll,

slide,

alternate）Scroll: 内容向同一个方向滚动

Slide: 内容接触到字幕边框就停止滚动

Alternate: 来回交替运动

属性loop

：循环次数，若未指定则循环不止

属性scrollamount

：速度 属性scrolldelay

：延时 属性bgcolor

：背景颜色 属性align

：对齐方式（top,

middle,

bottom） 属性height

：字幕的高度 属性width

：字幕的宽度 属性hspace

：字幕的水平空白 属性vspace

：字幕的垂直空白Table标记<table>标记：定义表格标记<tr>：定义表行标记<th>：定义表头（粗体显示）标记<td>：定义表元(表格的具体数据)

标记<tbody>:表格的主体

（可选）例子：<table><tr><td>内容</td></tr></table>表格标记Table常用属性（1）

属性width

：定义宽属性height

：定义高属性border

：表格是否显示边线属性align

：（left,center,right）设置单元内容横向位置属性valign

：（top,middle,bottom,baseline）设置单元内容纵向位置属性colspan

：设置表格多列单元格属性rowspan

：设置表格多行单元格表格标记Table常用属性（2）

属性cellpadding

：单元格内容与边框的间距属性cellspacing

：单元格之间的间距属性bgcolor

：背景颜色属性background

：背景图片（IE支持）属性bordercolor

：表格边框的色彩

（IE支持）属性rules

：定义隐藏的表格分隔线（IE支持）它有三个参数(cols,rows,none)

属性frame

：定义表格隐藏的边框（IE支持） 它有6个参数 (above,below,vsides,hsides,lhs,rhs,void)框架标记<frameset>标记：框架标记决定如何划分框架

属性cols

：表示按列分布框架

属性rows

：表示按行分布框架属性frameborder:是否现显示边框边界属性framespacing:框架间的间距<frame>

标记：设定框架内含的网页属性src

：网页的路径和文件名

属性noresize

：如果设置了noresize属性，就不能移动边界了

属性name

：框架的调用名称<noframe>标记:

来显示在不支持框架的浏览器窗口中的内容，方便那些不支持框架的用户阅读网页框架标记示例<html><head><title>这是个左右框架</title></head><framesetcols="25%,75%"><framesrc="b.htm"><framesrc="c.htm"></frameset><noframes><body>该浏览器不支持框架</body></noframes></html>HEAD标记

<head>标记出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的子标记有特殊重要的意义。<title><title>标记定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。HEAD标记—关键词<meta>标记出现在<head></head>里面<meta>标记下面可以插入很多很有用的属性。下面介绍四种：<metaname="keywords"content="study,computer">用来标记搜索引擎在搜索你的页面时所取出的关键词。HEAD标记—文档作者<metaname="author"content="wutao">用来标记文档的作者。HEAD标记—解码方式<metahttp-equiv=“Content-Type”content=“text/html;charset=gb2312”>用来标记你的页面的解码方式。上例指明用中文GB2312方式对页面进行解码HEAD标记—页面跳转<metahttp-equiv="refresh"content="5;URL=/eschool">用来自动刷新跳转到指定的网页其中的5指明5秒以后开始跳转(为0表示直接跳转)URL指明跳转的地址页面跳转练习编写一个网页，要求3秒钟后自动跳转到信息系论坛。<html><head><title>myfirstpage</title><metahttp-equiv="refresh"content="3;URL=/bbs"></head><body><palign="center">三秒钟后本网页将自动跳转到信息系论坛</p></body></html>HEAD标记—页面过渡效果

网页过渡是指当浏览者进入或离开网页时，页面呈现的不同的刷新效果，比如放射，卷动，百叶窗等。这样我们的网页看起来会更具有动感，不过也要注意适可而止，否则太花哨的变化也容易引起浏览者的反感。

HEAD标记—页面过渡效果1在<head>与</head>插入代码：<metahttp-equiv="Exit"content="revealTrans(Duration=3,Transition=3)">http-equiv的值为: Enter:指页面进入

Exit:指页面退出revealTrans:指使用转换滤镜Duration:指效果持续时间3秒Transition:指转换效果为3即以圆形向外转换HEAD标记—页面过渡24种效果转换类型值转换类型值以框图向内转换0随机溶解12以框图向外转换1垂直向内分割13以圆形向内转换2垂直向外分割14以圆形向外转换3水平向内分解15向上擦除4水平向外分解16向下擦除5左下条带17向右擦除6左上条带18向左擦除7右下条带19垂直闪烁8右上条带20水平闪烁9随机水平条21交叉翻板10随机垂直条22向下翻板11随机23页面转换效果练习编写一个网页，页面进入时随机出现转换效果<html><head><title>页面转换效果</title><metahttp-equiv="exit"content="revealtrans(duration=3,transition=23)"></head><body><palign="center"><ahref=img.htmtarget=_self>点击看页面转换效果</a></p></body></html>页面转换效果说明页面转换效果也可以使用blendtrans滤镜实现渐隐效果:<metahttp-equiv="enter"content="blendTrans(Duration=5)">图像其它常用效果图像地图 见例子图像翻转 见例子表单表单的作用

表单提供了从用户那里收集信息、向数据库中添加信息和从数据库中搜索信息的方法，是建立动态网页的最重要的工具。表单的组成

一般的表单由两部分组成，一是描述表单的HTML源代码，二是客户端的脚本，或者服务器用来处理用户所填写信息的程序。

表单的工作原理

当访问者将信息输入表单并单击提交按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序在该处对这些信息进行处理，服务器通过将请求信息发送回用户，或基于该表单内容执行一些操作来进行响应。一个包含表单的页面文本字段列表/菜单

文本区域按钮单选按钮复选框文本字段列表/菜单

文本区域按钮单选按钮复选框表单的对象表单对象包括：文本区域、隐藏域、复选框、单选按钮、列表（菜单）、跳转菜单、文件域、表单按钮等<form>标记:表单标记 属性method

：数据提交的方式（post,GET

） 属性action

：数据提交的地址<input>标记:表单对象标记

属性type:通过<input>标记的type属性来定义表单对象（text，radio，checkbox，file，submit，reset，hidden,button等）表单的对象例子文本：<inputtype="text"name="tf">

隐藏域：<inputtype="hidden"name="tf">

复选框：<inputtype="checkbox"name="tf">

单选按钮：<inputtype="radio"name="tf">

文件域：<inputtype="file"name="tf">

按钮：<inputtype="button"name="tf">

文本区域：<textareaname="tf"cols=20rows=40>

属性cols:文本区域的宽属性rows:文本区域的高表单的对象例子2表单列表对象:

<select>标记例子：

<select> <option>大学</option> <option>高中</option> <option>小学</option> <option>初中</option></select>表单的例子<formaction=/1.aspmethod=post><inputtype="text"name="textfield"value=姓名>

<inputtype="radio"checkedname="rbu0">北京<inputtype="radio"name="rbu0">上海<inputtype="radio"checkedname="sex">男<inputtype="radio"name="sex">女</form>多媒体

在网页中插入视频和声音可以让我们的网页更加生动和形象。插入视频和声音要慎重，过大的视频和声音文件会因为长时间无法载入完成而达不到网页设计者所要展现的内容。 插入不同视频媒体时，需要网页浏览者的电脑上安装相应的视频媒体播放插件，才能正常播放媒体。多媒体embed标记用<EMBED>嵌入多媒体对象属性src：多媒体对象的路径及文件名属性autostart：是否自动开始（true,false）属性loop：播放次数注：使用

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论