网页设计.docx

网页设计

网页设计

网页设计

１．定义书签

　　在HTML中，首先要定义书签，然后才在链接使用。

定义书签的语法格式为：

书签名不能用中文，只能用英文和数字。

　　２．使用书签链接

　　其链接的格式为：

超链接标识

　　#与书签名之间不能有空格。

建立表格

表格标记有

定义标题单元格，在这个单元格中的文字将用粗体表示。

定义表格中的行。

定义单元格，使用

　　上述标记中，

表格属性

除了border外，常用的表格属性参数有：

>：

定义单元格之间的距离，值为大于等于“0”的整数，单位是像素，“0”表示没有间距。

>：

定义单元格内的文字或其他元素到边框的距离,值为大于等于“0”的整数，单位是像素，“0”表示没有距离。

>：

定义表格的高度，值有两种单位，一是像素，表示表格高度为固定大小，一是百分比表示表格占据整个网页的高度百分比。

>：

定义表格的宽度，与高度一样有像素和百分比两种单位。

>：

定义表格边框的颜色。

>：

定义表格的背景色

建立框架

1．框架页的基本结构

…不能和同时使用…：

标记一个普通的HTML文档，用于在不支持框架的浏览器中显示。

：

用于定义分割窗口，可以设置窗口的分割方式及是否显示框架边框等。

用于设置每个区域显示的内容，每个URL值指定一个事先己制作好的文件。

（1）建立纵向框架

　　建立纵向框架的基本语法为：

>

　　Cols：

设置垂直分割窗口，用“，”分隔，它的值可以是像素值或者是百分比，代表对应的子窗体占屏幕窗口的大小。

如要将屏幕分割成三个子窗口，其中两个都占整个窗口的30%，那么只给开始的两个窗口赋值。

语句为，*代表框架剩余的部分分给最后一个子窗口，当然也可以写成。

（2）建立横框架

　　建立横向框架的基本语法为：

>

　　rows：

这个参数用来水平分割窗口，它的值可以是数字或者是百分比，代表对应的子窗口的大小，使用方法与cols相同。

　　（3）嵌套框架

　　嵌套框架是在己有的框架中嵌入框架的结构，利用嵌套框架可以实现窗口的横向与纵向的混合分割。

嵌套框架的设置见例2.16.

用的框架属性有以下几种：

1．

>：

设置框架的边框。

值为yes（或1）有边框或no（或0）无边框。

2．

>：

设置各窗口之间的空白区域大小。

值是以像素为单位的数值。

3．

>：

设置边框的颜色。

值可以是的英文或颜色代码。

4．

>：

设置框架是否显示滚动条。

有三个值：

yes表示有滚动条，no表示没有，auto表示根据内容的多少浏览器自动设置。

5．：

设置框架在浏览器中不能被调整。

概述

网站的一般工作原理是指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

#ff0000">内联式样式表

v这种样式表只会对使用它的元素起作用，而不会影响HTML文档中的其他元素。

也正因为如此，内联式样式表通常用在需要特殊格式的某个网页对象上。

本案例就一个应用内联式样式表的一个网页实例，在这个实例中，各段文字都定义了自己的内联式样式表：

v

#ff0000">这段文字将显示为红色

v

#000000;background-color:

yellow;">这段文字的背景色为黄色

v

'华文彩云';font-size:

24px">这段文字将以黑体显示

v嵌入式样式表通常包含在HTML文档的头部，即HEAD元素中，并且有一个专门的元素style来标记这种样式表。

它的书写格式通常为：

v

v

--

vp{color:

red;font-weight:

bold}

v

v-->

v在这个格式中，style元素的type属性必须设为"text/css"，表示这定义的是一个层叠样式表。

这样一来，当不支持层叠样式表的浏览器读到这个属性时，会自动忽略这个样式表。

v另外，在STYLE元素中还添加了HTML的注释符"

--"和"-->"，这么做的好处是为了避免老版本的浏览器在网页上将这些样式以文字方式显示出来。

v外部式样式表是指将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。

样式在样式表文件中定义和在嵌入式样式表中的定义是一样的，只是不再需要style元素，比如要将本例中的嵌入式样式定义到一个样式表文件mystyle.css中，这个样式表文件的内容应该为嵌入式样式表中的所有样式，如下所示：

h1{font-size:

36px;

font-family:

"隶书";

font-weight:

bold;

color:

#993366;}

提示：

在定义嵌入样式表时，