网页设计Word文档下载推荐.docx
《网页设计Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《网页设计Word文档下载推荐.docx（20页珍藏版）》请在冰豆网上搜索。
浏览者与网页制作单位之间互动的窗口，可以单向或双向传递信息。
3、传输的作用。
作为传输各种电子文件或信息之用，如下载说明书、更新文件、驱动程序等。
网页的基本要素一般包括：
文字、图像、动画和链接标志等，除此之外，网页的元素还包声音、多媒体和视频等。
•文本是网页中最基本的元素。
网页中文字的设计一般从以下几个方面来考虑：
1．字体的选择。
2．字号、行距的选择。
3．特殊字体的使用。
4．字体的颜色。
•图像
现在网络上使用的绝大多数图片和图像是gif、jpeg和png文件格式。
网页上使用图像要注意的问题：
•JPEG格式适合于照片图像，GIF格式适合于包含纯色的图像，例如插图和线条图。
•利用图像编辑软件来放大或缩小图像
•屏幕显示图像的分辨率一般为72dpi。
制作图像时，不必使用比此再高的分辨率。
•链接也叫超链接（Hyperlink），是从一个网页指向另一个目的端的链接，是页面间的链接关系。
•链接标志（载体）指的是网页中特殊的文本或图像，它们常常用不同的颜色和下划线来标识，在浏览器中，访问者可以用鼠标单击它们，能够从当前的网页转到链接的目的端位置。
•超链接的标志一般有：
文本、图像、热区三种。
要注意的是，所有超链接标志均应清晰无误地向浏览者标识出来，让人一看就知道。
•除上述几种要素之外，在网页上经常使用的还有动画、视频、声音等各种信息的形式。
1．动画。
目前网络上常用的动画类型有gif和Flash动画两种。
2．视频。
是多媒体网页的一个重要组成部分，常用的视频格式有avi、mpeg和mov等，视频会大大增加网页的文件量，从而使用访问速度受到影响，因此要慎用。
3．音频。
在网页中插入音频会增加网页的生动性。
常用的音频格式有rm（ram）、midi、wav和mp3等格式。
音频文件和视频文件一样都会增加网页的文件量，因此要慎用。
•4.表格
表格是HTML语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观。
•5.框架
框架是网页的一种组织形式，将相互关联的多个网页的内容组织在一个浏览器窗口中显示。
6.表单
表单是用来收集访问者信息或实现一些交互作用的网页，访问者填写表单的方式是输入文本、单击单选按钮或复选框、从下拉菜单中选择选项等
HTML（HyperTextMarkupLanguage）又称超文本标识语言，是一种标识性的语言，是网页设计的最初语言。
文件的扩展名:
“html”或“htm”。
例2.1简单的HTML文档
<
html>
head>
title>
欢迎您！
/title>
/head>
body>
这里是***网，我们带您畅游杭州！
/body>
<
/html>
由“<
”和“>
”组成的就是标记。
在HTML语言中标记分“单标记”和“围堵标记”。
HTML>
文件开始
HEAD>
标头区开始<
TITLE>
...<
/TITLE>
标题区<
/HEAD>
标头区结束<
BODY>
文件主体内容开始文件主体内容……<
/BODY>
文件主体内容结束<
/HTML>
文件结束
1．段落（<
P>
）
基本语法格式为：
<
palign=left/center/right>
其中参数align用于设定段落的位置是靠左、靠右还是居中。
默认值是靠左；
除align之外<
p>
还有其他参数如class。
class参数是可选项，如果没有将按照默认值显示。
2．换行<
br>
单标记，放在一行的末尾，可以在一个段落内实现文本的强制换行，设置标记后面的文本字、图像和表格等内容显示于下一行。
1．字体标记<
font>
其基本语法格式为：
fontface=？
size=？
color=？
>
…<
/font>
Size：
设置字体的显示字号。
Color：
设置文本的颜色，值可以是颜色名（英文如red代表红色）或颜色的十六进制代码（#000000代表黑色，#FFFFFF代表白色）。
Face：
设置文本显示的字体，值为字体的名称。
在文本的标记中还有很多常用的标记，比如表示字体效果的，<
b>
（黑体），<
i>
（斜体），<
u>
（加下划线）。
字体修饰示范<
!
--注释：
字体修饰-->
宋体:
fontsize=1face="
宋体"
网页设计<
br/>
华文行楷:
fontsize=3face="
华文行楷"
color="
#00FF00"
隶书:
fontsize=5face="
隶书"
#FF0000"
标题的设置<
/p>
hralign="
center"
red"
width="
300"
size="
5"
/>
h1align="
/h1>
h2align="
left"
/h2>
h3align="
right"
/h3>
h4>
/h4>
h5>
/h5>
h6>
/h6>
１．定义书签
在HTML中，首先要定义书签，然后才在链接使用。
定义书签的语法格式为：
aname=”书签名”>
书签名不能用中文，只能用英文和数字。
２．使用书签链接
其链接的格式为：
ahref=”#书签名”>
超链接标识<
/a>
#与书签名之间不能有空格。
建立表格
表格标记有<
table>
、<
th>
tr>
和<
td>
四个，他们的具体含义是：
/table>
:
定义表格,是表格必须的元素
/th>
：
定义标题单元格，在这个单元格中的文字将用粗体表示。
/tr>
定义表格中的行。
/td>
定义单元格，使用<
标记一定要放在<
标记内部。
上述标记中，<
可以省略，其他三个是必须的。
Table>
标记中可以添加属性和参数，其中 border，用于设置表格的边框宽度，值为大于等于“0”的整数，当值为“0”，在浏览器中显示无边框表格，无边框表格是网页布局最主要的手段。
表格属性
除了border外，常用的表格属性参数有：
tablecellspacing=？
定义单元格之间的距离，值为大于等于“0”的整数，单位是像素，“0”表示没有间距。
tableCellpadding=？
定义单元格内的文字或其他元素到边框的距离,值为大于等于“0”的整数，单位是像素，“0”表示没有距离。
tableheight=？
定义表格的高度，值有两种单位，一是像素，表示表格高度为固定大小，一是百分比表示表格占据整个网页的高度百分比。
tablewidth=？
定义表格的宽度，与高度一样有像素和百分比两种单位。
tablebordercolor=？
定义表格边框的颜色。
tablebgcolor=？
定义表格的背景色
建立框架
1．框架页的基本结构
noframes>
/noframes>
frameset>
framesrc="
url"
/frameset>
不能和<
同时使用<
标记一个普通的HTML文档，用于在不支持框架的浏览器中显示。
用于定义分割窗口，可以设置窗口的分割方式及是否显示框架边框等。
frame>
用于设置每个区域显示的内容，每个URL值指定一个事先己制作好的文件。
（1）建立纵向框架
建立纵向框架的基本语法为：
framesetcols=？
Cols：
设置垂直分割窗口，用“，”分隔，它的值可以是像素值或者是百分比，代表对应的子窗体占屏幕窗口的大小。
如要将屏幕分割成三个子窗口，其中两个都占整个窗口的30%，那么只给开始的两个窗口赋值。
语句为<
framesetcols="
30%,30%,*"
，*代表框架剩余的部分分给最后一个子窗口，当然也可以写成<
30%,30%,30%"
。
（2）建立横框架
建立横向框架的基本语法为：
framesetrows=？
rows：
这个参数用来水平分割窗口，它的值可以是数字或者是百分比，代表对应的子窗口的大小，使用方法与cols相同。
（3）嵌套框架
嵌套框架是在己有的框架中嵌入框架的结构，利用嵌套框架可以实现窗口的横向与纵向的混合分割。
嵌套框架的设置见例2.16.
用的框架属性有以下几种：
1．<
framesetframeborder=？
设置框架的边框。
值为yes（或1）有边框或no（或0）无边框。
2．<
framesetframespacing=？
设置各窗口之间的空白区域大小。
值是以像素为单位的数值。
3．<
framesetbordercolor=？
设置边框的颜色。
值可以是的英文或颜色代码。
4．<
framesetscrolling=？
设置框架是否显示滚动条。
有三个值：
yes表示有滚动条，no表示没有，auto表示根据内容的多少浏览器自动设置。
5．<
framesetnoresize>
设置框架在浏览器中不能被调整。
概述
网站的一般工作原理是指Web服务器与客户端浏览器交互的基本原理，简单的说就是网站服务器上的文件和数据库最终成为客户所看到的页面的过程。
实质上这个过程就是解决下面三个问题的过程：
（1）网站的数据如何变成页面数据——网站程序解决。
（2）如何根据用户请求将指定的数据体送达客户端——Internet解决。
（3）客户端如何将页面数据显示为页面（所谓页面就是图形界面上的文本、图像、图形的集合）——浏览器解决。
IIS简介IIS是InternetInformationServer的缩写，它是微软公司主推的服务器，IIS与WindowNTServer完全集成在一起，因而用户能够利用WindowsNTServer和NTFS（NTFileSystem，NT的文件系统）内置的安全特性，建立强大、灵活而安全的Internet和Intranet站点。
IIS支持HTTP（HypertextTransferProtocol，超文本传输协议），FTP（FeleTransferProtocol，文件传输协议）以及SMTP协议，通过使用CGI和ISAPI，IIS可以得到高度的扩展。
IIS的一个重要特性是支持ASP。
IIS3.0版本以后引入了ASP，可以很容易的张贴动态内容和开发基于Web的应用程序。
对于诸如VBScript，JScript开发软件，或者由VisualBasic，Java，VisualC++开发系统，以及现有的CGI和WinCGI脚本开发的应用程序，IIS都提供强大的本地支持。
3.IIS配置
在进行管理设置之前，首先要进入管理界面。
打开控制面板，双击打开“管理工具”，然后选择“Internet信息服务”，双击图标，进入管理工具界面。
树型结构“默认网站”已经被展开，可以看到下面有很多字节点，每一个字节点就是一个应用程序或者是一个虚拟路径。
接下来的任务就是设定虚拟路径了。
虚拟路径可以通过多种方式来设定，只有设定了虚拟路径后，才可以通过URL来访问资源。
最简单的设定虚拟路径的办法，就是把自己的网页或者目录拷贝到服务器的根目录下，默认的服务器根目录是“C:
\Inetpub\wwwroot”。
当然每次都拷贝文件到根目录，是很麻烦的，因此还有一种设置虚拟路径的方法。
在“Internet信息服务”窗口中，单击菜单“新建“，选择”虚拟目录（V）“选项，弹出创建向导对话框，单击“下一步”按钮，输入虚拟目录别名后单击“下一步”按钮，输入虚拟目录的路径，设置以后，可以通过虚拟别名来访问里面的文件，用户可以通过“浏览”按钮来选择目录。
接着单击“下一步”按钮，进行权限设置，为了保证网站的安全，只需要选择前3个选项就可以了。
接着单击“下一步”按钮，单击“完成“按钮，便可完成虚拟路径的设定。
完成设置以后，用户就可以通过虚拟路径http:
//localhost或者http:
//127.0.0.1来访问了。
vCSS（CascadingStyleSheets，层叠样式表）技术是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
vHTML是网页制作的基础，主要用于定义文档内容，CSS用于描述页面的整体布局设计以及各个子元素的显示控制。
v使用CSS可以非常灵活并更好地控制页面的外观。
v今后网页页面制作内容和页面表现的主流技术是XHTML和CSS，XHTML是HTML的升级版。
v简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。
v只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。
避免了一个一个网页的修改，大大减少了重复劳动的工作量。
vCSS是一种格式化网页的标准方法，它就颜色、字体、间隔、定位以及边距等格式提供了几十种属性，这些属性可通过style应用于在HTML标记中。
v一个样式表是由许多样式规则组成的，用来控制网页元素的显示方式，其规则的形式为：
选择符{属性1：
值1；
属性2：
值2；
……}
v规则由选择符以及紧跟其后的一系列“属性：
值”对组成，所有“属性：
值”对用“｛｝”包括，各“属性：
值”对之间用分号“;
”分隔。
选择符是指要引用样式的对象，可以是一个或多个HTML标记（各标记之间用逗号分开），也可以是类选择符（如.text）、id选择符或上下文选择符。
样式定义中还可以加入注释来说明代码的意思，注释有利于自己或别人以后编辑和更改代码时理解代码的含义。
v换句话说，一个网页对象（文本、图片或者表格等）可以被多层的样式表所修饰，但是最终它会以优先级最高的样式表所定义的格式来显示。
v层叠样式表中“层叠”的意思是指在同一个HTML文档中可以有多层样式表存在，不同层次的样式表根据其所在的位置拥有不同的优先级。
内联式样式表（行间样式表）
嵌入样式表（内部样式表）
外部样式表
内联式样式表是在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些控制信息的标记中，比如下面的例子：
v<
pstyle="
color：
#ff0000"
内联式样式表<
v这种样式表只会对使用它的元素起作用，而不会影响HTML文档中的其他元素。
也正因为如此，内联式样式表通常用在需要特殊格式的某个网页对象上。
本案例就一个应用内联式样式表的一个网页实例，在这个实例中，各段文字都定义了自己的内联式样式表：
color:
这段文字将显示为红色<
#000000;
background-color:
yellow;
"
这段文字的背景色为<
I>
黄色<
/I>
font-family:
'
华文彩云'
;
font-size:
24px"
这段文字将以黑体显示<
v嵌入式样式表通常包含在HTML文档的头部，即HEAD元素中，并且有一个专门的元素style来标记这种样式表。
它的书写格式通常为：
v<
styletype="
text/css"
--
vp{color:
red;
font-weight:
bold}
/style>
v-->
v在这个格式中，style元素的type属性必须设为"
，表示这定义的是一个层叠样式表。
这样一来，当不支持层叠样式表的浏览器读到这个属性时，会自动忽略这个样式表。
v另外，在STYLE元素中还添加了HTML的注释符"
--"
和"
-->
，这么做的好处是为了避免老版本的浏览器在网页上将这些样式以文字方式显示出来。
v外部式样式表是指将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。
样式在样式表文件中定义和在嵌入式样式表中的定义是一样的，只是不再需要style元素，比如要将本例中的嵌入式样式定义到一个样式表文件mystyle.css中，这个样式表文件的内容应该为嵌入式样式表中的所有样式，如下所示：
h1{font-size:
36px;
"
font-weight:
bold;
color:
#993366;
}
提示：
在定义嵌入样式表时，<
style>
标记必须放在<
标记之间。
v同时使用多层样式表
很可能的情况是在一个网页中既定义了内联式样式表和嵌入式样式表又链接了外部样式表，这时网页会变得怎么样昵？
其实前面也已说过，这三种样式表具有不同的优先级，其中内联式样式表的优先级大于嵌入式样式表的优先级，嵌入式样式表的优先级又大于外部式样式表的优先级，所以某个元素在挑选多层样式表时，会首先选择优先级最高的样式，即就近原则。
vCSS语法由三部分构成：
选择器（选择符）、属性和值。
语法形式：
selector{property:
value}
vCSS选择器分为多种，常见的有标签选择器、id选择器和class选择器。
v选择器最基本的形式就是使用XHTML中已有的标签来命名。
v例如：
p,h1{color:
background-color:
blue}
v这个选择器有两个标签，这两个标签都将以定义的样式（字体颜色、背景颜色）显示。
v在XHTML中，id选择器用来对指定的单一元素定义单独的样式。
v定义id选择器要在id名称前加“#”，id名称可以自定义，但不能以数字开头。
v相同的id名称在页面中只能出现一次，以保证其唯一性。
v定义class选择器要在class名称前加“.”号。
v多个标签可以使用同一个class名称，这样多个标签就拥有统一的样式。
v语法结构：
selector.classname{property:
value:
……}
v虚类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。
虚类主要针对超链接A标记符，可以为超链接定义不同状态下的不同样式效果。
v定义虚类的方法和常规类很相似，但有两点不同：
一是连接符是冒号而不是句点号；
二是它们有预先定义好的名称，而不能随便取名。
虚类中最常见的是a虚类，a虚类可以指定超链接标记a以不同的方式显示链接，表示链接处在4种不同的状态下：
link、visited、active、hover。
v如a：
link{color:
（一）插入表格
1．定位光标在要插入表格的位置，然后执行以下操作之一：
•单击菜单栏中的“插入”|“表格”命令。
•在“插入”栏的“常用”类别中，单击“表格”按钮。
2．打开表格对话框。
二）插入嵌套表格
1．将光标定位在表格的一个单元格内。
2．执行插入表格的操作，即可在表格内嵌套表格如图。
（一）选择整个表格
选择整个表格执行以下操作之一：
•单击表格的左上角、右边或底部边缘的任意位置。
•单击表格单元格，在菜单栏单击“修改”|“表格”|“选择表格”命令。
（二）选择行或列
1．鼠标指向行的左边缘或列的上边缘，光标变为或。
2．单击鼠标则选择鼠标指向的行或列。
3．拖动鼠标，则选择连续的多行或多列。
4．按Ctrl同时单击鼠标，则可选择不连续的多行或多列。
（三）选择单元格
1.选择单个单元格，请执行以下操作之一：
•单击单元格，然后在文档窗口左下角的标签选择器中选择<
标签.
•在单元格内双击鼠标则可选择该单元格。
•在单元格内单击，然后按组合键Ctrl+A。
2．选择连续的多个单元格可以执行以下操作之一：
•单击第一个单元格，按住Shif
升级会员 