网页制作基础.docx

网页制作基础.docx

《网页制作基础.docx》由会员分享，可在线阅读，更多相关《网页制作基础.docx（19页珍藏版）》请在冰豆网上搜索。

网页制作基础

网页制作基础

目录

一、网页制作基础1

1.网站与网页1

2.什么是静态网页和动态网页1

3.网站制作过程中把握的几点2

4.提升网页设计效果的方法和诀窍3

二、Dreamweaver应用4

1.建站与编辑网页5

2.CSS样式5

3.表格与布局6

4.文本修饰与超链接7

5.图像设置9

6.使用媒体9

7.表单应用10

8.行为应用10

9.模板与库的应用11

一、网页制作基础

1.网站与网页

•网站的概念

•WWW是由遍布世界各地的Web服务器组成，那么，这些Web服务器又是如何构成一个庞大的信息网络呢？

答案就是网页。

由于网页中包含所谓的“超链接”，这些超链接可以将一个网页链接到其他网页，从而构成了万维网的纵横交织结构。

•通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站

2.什么是静态网页和动态网页

静态网页，动态网页主要根据网页制作的语言来区分：

　　静态网页使用语言：

HTML（超文本标记语言）

　　动态网页使用语言：

HTML＋ASP或HTML＋PHP或HTML＋JSP等。

静态网页与动态的区别

　　程序是否在服务器端运行，是重要标志。

在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、CGI等。

运行于客户端的程序、网页、插件、组件，属于静态网页，例如html页、Flash、JavaScript、VBScript等等，它们是永远不变的。

　　静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。

　　静态网页是网站建设的基础，静态网页和动态网页之间也并不矛盾，为了网站适应搜索引擎检索的需要，即使采用动态网站技术，也可以将网页内容转化为静态网页发布。

　　动态网站也可以采用静动结合的原则，适合采用动态网页的地方用动态网页，如果必要使用静态网页，则可以考虑用静态网页的方法来实现，在同一个网站上，动态网页内容和静态网页内容同时存在也是很常见的事情。

　　我们将动态网页的一般特点简要归纳如下：

（1）动态网页以数据库技术为基础，可以大大降低网站维护的工作量；

（2）采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等；

　　（3）动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页；

　　（4）动态网页中的“？

”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“？

”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求

什么是静态网页？

静态网页有哪些特点？

　　在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。

　　静态网页的网址形式通常为：

　　也就是以.htm、.html、.shtml、.xml等为后后缀的。

在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。

　　我们将静态网页的特点简要归纳如下：

（1）静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“？

”；

（2）网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；

　　（3）静态网页的内容相对稳定，因此容易被搜索引擎检索；

　　（4）静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；

　　（5）静态网页的交互性交叉，在功能方面有较大的限制

　　第一看后缀名,第二看是否能与服务器发生交互行为

　　静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。

你编的是什么它显示的就是什么、不会有任何改变。

静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。

3.网站制作过程中把握的几点

1）重点信息放在突出醒目的位置，整个网站空间排序适当

　　一个网站很重要的就是标题，标题就像路牌一样，人家在你的网站上逛来逛去，全靠它指路了。

标题要意义清晰、描述性强，把最吸引人的地方放在突出显眼的位置，然后再慢慢展开。

2）、网页应该易懂，控制每个模块的信息量。

　　网页要易读就意味着，你必须花点心思来规划文字与背景颜色的搭配方案。

注意不要使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合，让人看起你的网页来很费劲。

一般来说，浅色背景下的深色文字为佳。

　　这个原则也意味着，你最好别把文字的规格设得太小、也不能太大。

文字太小，人家读起来难受；文字太大，或者文字视觉效果变化频繁，像是冲着人大喊大叫，看起来不舒服。

　　另外，最好让文本左对齐，而不是居中。

按当代中文的阅读习惯，文本大都居左的。

当然，标题一般应该居中，因为这符合读者的阅读习惯。

　　在内容上着笔尽量要细致，让人家能在最短的时间内，了解你想呈现给人家什么。

给人家一幅清晰的画卷，别云山雾罩的。

开门见山，直接了当。

大家都知道，网友的耐心尤其少。

你能提供的信息或许对他们有裨益，但如果要人家没完没了地翻下去才能找到，恐怕极少有人有这份耐心。

　　立体规划内容，将所有部分按一定的构架各就其位、分别纳入不同层次的页面。

注意先要把最重要的内容放到首页上，其他的依次就绪。

　　然后，你就可以勾划页面蓝图、编HTML了。

就文本内容的表现而言，记住尽量别让其一行文字的宽度，横跨整个屏幕。

段落一多，这样子看起来很费劲，而且别人的浏览器还可能和你的差别很大。

最好别超过屏幕宽度的一半。

　　3）、网页页面越小越好，最好别超过50k，尽量精简

　　有研究显示，如果一个网站页面的主体在15秒之内显现不出来，访客会很快失去对该站的兴趣。

当然，也有例外，比如内容实在太精彩，人家不去不行。

再像视觉艺术类站点，也不能以"快"为唯一设计标准。

不过，即使这类站点，也该在加个导引页，给读者一个提示，别不理睬人家的心情。

但是大多数网站还是以内容为主，大部分人感兴趣的还是信息量，追求的是速度。

　　要限定页面的大小，就得从各个角度考虑节省。

最大的一头是图像，有的好东西，只得割爱了。

想想看，在创意表达、品牌形象、挣钱几个目标之中，哪个最重要？

　　4）、网站导航要清晰，容易查找

　　所有的超链接应清晰无误地向读者标识出来，所有导航性质的设置，像图像按钮，都要有清晰的标识，让人看得明白，千万别光顾视觉效果的热闹的，而让人家不知东西南北。

　　链接文本的颜色最好用约定俗成的：

未访问的，蓝色；点击过的，紫色或栗色。

如果你一定要别出心裁，链接的文本就要想着以什么方式加以突出，比如说加粗体？

加字号？

两侧加竖标？

或者几者兼用。

总之，文本链接一定要和页面的其他文字有所区分，给读者清楚的导向。

　　清晰导航还要求：

读者进入目的页的点击次数，不能超过三次。

如果三次以上还找不到，人家可就没有耐心陪你玩了！

4.提升网页设计效果的方法和诀窍

下载时间——最好是15秒内下载一页。

如果你的网页加载时间超过了15秒，那么这就太慢了。

你的访问者可能会选择去其它网站，因为他再也不愿意等待这么长的时间。

　　匹配你的产品——举个例子来说，如果你是销售手机的，网站就应该设计得时尚点。

　　布局——好好分析一下你的布局，这些必须和网站的内容相适应。

你可以使用表格来布局。

使用表格可以加快下载速度，因为它是HTML代码，并且你可以在任何一处使用它，如：

菜单、首页。

　　图像——图像可以使你的网站看上去感觉非常好，但是它必须和你的内容相符合；同时不要忘了，它会花去很长的加载时间。

所以尽可能的使用小图，然后设定为通过点击后链接到大图。

　　信息或内容——确定你的信息是清晰易懂的，并且将所有的东西拆分成些许段落和片断。

尽可能不要让你的页面看上去太大，因此，需要尽量避免使用大篇幅的文章。

如果文章的内容确实很长，尽可能把它分成2-3页显示，这样可以暗示阅读者，如果他们不想读了，可以把它撇去。

　　链接——链接也需要通俗易懂。

最好在每个页面上安上一个菜单，访问者可以通过这个菜单访问站点中的所有页面。

尽量不要让访问者点击“返回”按钮；你也可以放上“返回页首”的链接；还有很重要的一点就是：

避免出现无效的链接。

　　Logo——设计一个与你的网站相匹配的logo。

使你的logo看上去清晰可辨、效果凸显。

　　背景颜色和文本颜色——一个优秀的背景色可以是白色，同样也可以是其它的颜色。

选择的背景色和字体颜色对比度不能太明显，不能太刺激视觉。

确定它的易读性。

　　社团——如果人们可以在你的网站上做些事情，那么他们就会非常愿意访问你的网站。

因此，你可以在网站上加一些类似于投票、论坛或留言本一样的功能。

　　保持简单的风格——你不必使用高深的网络技术来创建你的网站。

相信我，大多数人都对站点的访问轻松自由，因此，你必须使你的网站简明易懂，适当时，可以加上一些动态的内容。

还有就是要在网站上使用简单的语言。

　　站点地图、联系我们——不要放弃它。

当人们在网站中迷失方向时，站点地图将帮助访问者查找页面，这同样对搜索引擎的搜录也大有好处。

如“联系我们”页面，当人们希望为你提出一些意见时，它就派上用场了，特别是你将获取访问者的E-mail来了解E-mail市场。

　　使用CSS样式——使用CSS样式来设计你的网站将会减少网站中的代码量，并使你的网站加载速度更快。

　　Flash——特别要注意的是，使用flash可以使你的网站看上去更加美观，但是搜索引擎却不会搜录它，而且它也会延缓页面的加载速度。

如果你希望使用flash，尽可能将它用在HTML站点中，并保证加载时间不要太长。

二、Dreamweaver应用

1.建站与编辑网页

定义本地站点

站点就是一系列文件的组合，而这些文件通常位于一个特定的文件夹中，称为站点文件夹。

站点操作

•站点的基本操作包括：

–打开站点

–组织管理站点文件

•建立站点之后，所有的文件操作（例如创建网页、删除网页、文件重命名等操作）一般都在Dreamweaver中的“文件”面板中进行。

•通常可以使用“文件”面板右上角的功能按钮，打开菜单，选择一个文件操作命令即可。

新建网页

•在Dreamweaver中可以使用多种方式新建空白网页，主要包括使用“欢迎屏幕”、使用“文件”菜单命令使用快捷键（Ctrl+N）命令等方式。

•也可以在“文件”面板中，使用文件操作在站点中新建网页文件。

2.CSS样式

•CSS样式类型根据选择器的不同，可以有多种类型。

在Dreamweaver中包含了最常见的三种CSS样式选择器：

–HTML标签选择器，定义HTML特定标记样式

–类选择器，自定义名称的样式

–伪类（也叫做虚类）选择器，超链接相关。

a：

link未访问的

a：

visited已访问过的

a：

hover鼠标悬于之上的

a：

active鼠标激活的（按下鼠标键未松开时）

–此外，还有其他两种选择器：

ID选择器和具有上下文关系的选择器。

•字体属性（设置字体、字号、颜色等信息）

•背景属性（设置背景颜色、背景图像等信息）

•区块属性（设置文本对齐、首行缩进等信息）

•方块属性（设置浮动、填充等信息）

•边框属性（设置边框颜色、边框样式等信息）

•列表属性（设置列表项目符号样式、位置等信息）

•定位属性（设置定位的类型、可见性等信息）

•扩展属性（设置光标形状、过滤器等信息）

使用内部样式

•内部样式是指仅应用于当前网页的样式，它们对当前网页起作用。

•新建内部样式----标签选择器----body选项----设置

•新建内部样式----类选择器----自定义名称myscc1----设置-----选中网页元素-----属性检查器中应用样式

•新建内部样式----ID选择器----#myid1----设置---选中元素----在其所在标签中加入代码id=-#myid1，或者----选中元素-----在设计视图下方的标签上点右键----快速标签编辑器

•

使用外部样式表

•外部样式表是指文件扩展名为.css的样式文件，它们可以通过链接的方式在网页中使用，从而能更有效地做到“内容与形式的分离”。

3.表格与布局

表格在页面布局中的作用

•布局表格中包含若干多个布局单元格，只能在布局单元格中添加网页内容，例如，文本、图片以及其他的一些多媒体信息等，这样通过布局表格与布局单元格的相互配合，就形成了页面的布局。

•设计网页布局实际就是要设计布局表格与布局单元格，这两者之间位置排列、表格大小以及前后顺序的设计，往往直接决定了整个布局的质量。

CSS布局

•CSS页面布局使用层叠样式表技术，对页面内容进行组织。

CSS布局基本构造块是div标记符，在大多数情况下用作文本、图像或其他页面元素的容器。

•设计者创建CSS布局时，应将div标记符放在页面的不同位置上，然后向这些标记符中添加内容。

•div标记符可以出现在网页上的任何位置。

进行CSS布局时，既可以用绝对方式（指定x和y坐标）也可以用相对方式（指定与其他页面元素的距离）来定位div标记符。

•创建CSS布局有多种方法，最常见的包括三种：

–使用Dreamweaver提供的预设计CSS布局。

–使用Dreamweaver绝对定位元素（AP元素）创建CSS布局。

–手动插入div标记符创建页面布局。

框架布局

•框架是在一个浏览器窗口中显示多个网页的技术，通过为超链接指定目标框架，可以为框架之间建立起内容之间的联系，从而实现页面导航的功能，所以框架经常用于页面的导航和信息的组织。

•最典型的框架结构是各种联机帮助系统，它们通常都采用一种目录式结构，左边是帮助主题，右边是帮助内容；当单击左边的超链接时，相应的内容显示在右边的框架。

•框架结构的优点是：

导航清楚、下载速度快。

•框架的缺点是：

难以为特定页面设置书签。

（如果网站的观众是所有互联网用户，一般建议不要使用框架。

如果网站的观众是某特定群体，例如某教学网站针对的特定学生群体，则可以根据需要选择是否使用框架。

）

•可以使用插入栏布局类别中的框架按钮，创建框架结构的网页。

•框架结构网页包含了框架集和框架，可以使用框架面板来选择框架集或框架。

•如果需要修改框架集或框架的属性，应该使用属性检查器来修改具体的属性。

应用：

•文件—-新建—-实例中的页—-框架集

•调整各页面形式，保存时注意各个部分的命名

•网页目标：

__blank,_parent,_self,_top超级链接打开目标窗口的属性，作用：

•连接目标的属性

_blank在新建窗口中打开超连接

_parent在父窗口中打开超连接,常在有框架结构的网页中应用

_self在本窗口或本框架中打开超连接

_top在整个浏览器窗口中打开超连接,并删除所有框架结构

•选中文本，设置超链接地址，并设置目标为“mainframe”

4.文本修饰与超链接

段落格式的设置

–使用属性检查器中的“格式”框设置文本标题与段落格式

–使用属性检查器设置段落对齐方式（左对齐、居中对齐、右对齐、两端对齐）

–使用属性检查器上的缩进按钮，可以设置文本缩进

字符格式的设置

•字符格式包括字符样式、字体、字号、字符颜色等属性。

•属性检查器中的各项选项可以设置字符格式

项目列表

•项目列表是一种在文本段落前显示有特殊项目符号的缩排列表。

–选取文本或段落，单击属性检查器上的“项目列表”按钮可以创建项目列表文字。

–要更改项目符号，选取列表后单击属性检查器上的“列表项目”按钮，在打开“列表属性”对话框中设置相应选项即可。

编号列表

•编号列表也称有序列表，它是一种在文本段落前显示有编号的缩排列表。

•选取文本单击属性检查器上的“编号列表”按钮即可创建编号列表。

•要更改项目符号其方法与更改无序列表项目符号的方法类似，只不过在选择列表类型时应选择“编号列表”，在编号列表的“样式”下拉列表框中有六种编号选择，可根据需要任意选择其中的一种。

嵌套列表

•若要创建嵌套列表，可以在指定上一级的列表后单击“文本缩进”按钮，从而使下面的列表项被内嵌在列表中。

•如果是项目列表嵌套在一起则称为无序列表的嵌套，反之则为有序列表的嵌套，如果将编号列表与无序列表嵌套在一起则称为混合嵌套列表。

若要更改列表项目的符号或编号样式，单击属性面板中的“列表项目”按钮进行设置即可。

超链接基础

•在网页中，超链接是用URL（UniversalResourceLocator，统一资源定位器）来定位目标信息的。

•URL包括3部分：

协议代码、计算机地址（或一个电子邮件地址等），以及具体的文件地址和文件名。

•绝对URL是指Internet上资源的完整地址，包括完整的协议种类、计算机域名（所谓域名是指一个能够反映出Web服务器实际位置的化名）和包含路径的文档名。

其形式为：

协议：

//计算机域名/文档名。

•相对URL是指Internet上相对于当前页面（即正在访问的页面）的地址，它包含从当前页面指向目的页面位置的路径。

•超链接的分类根据超链接目标文件的不同，超链接可分为：

•页面链接

•锚点超链接

•电子邮件超链

•根据超链接源对象的不同，可分为：

•文字超链接

•图像超链接

•图像映射

•在文档窗口中选取要指定页面链接的对象后可以使用以下方法之一为其设置页面链接：

•在属性检查器上的“链接”框内输入（绝对或相对）URL；

•单击“链接”框旁边的“浏览”按钮，在打开的对话框中选取对应的文件；

•单击右键，在弹出的情景菜单中选择“创建链接”命令；

•选择“修改”菜单中的“创建链接”命令，或直接按下[Ctrl+L]快捷键

锚点链接

•锚点链接就是在页面特定区域指定一个锚点，然后创建一指向锚点的超链接，单击该链接时浏览器自动跳转到锚点所在区域。

•创建锚点链接的方法：

首先在要跳转的区域插入锚点，然后选择文本或其他对象，在属性面板中将URL设置为锚点名称即可，如果要转到其他页面的锚点则需要指定相对URL或绝对URL。

电子邮件链接

•所谓电子邮件链接就是指当浏览者单击该超链接时，系统自动打开客户端电子邮件程序（例如OutlookExpress）并打开新邮件窗口，使访问者能方便地撰写电子邮件。

•设置电子邮件链接最方便的方式是：

选取要创建超链接的文本或图片，在对象的属性面板的“Link”（链接）文本框中输入“mailto:

电子邮件地址”。

管理超链接

•使用文件面板中的“地图视图”功能可以查看站点中的所有链接情况。

•使用右键菜单中的“检查链接”命名可以检查网页中的链接或整个网站中的超链接。

•也可以使用结果面板上“链接检查器”来对网页或整个网站中的超链接进行检查。

5.图像设置

常用Web图像格式

•虽然有很多种计算机图像格式，但由于受网络带宽和浏览器的限制，在Web上常用的图像格式只包括以下三种：

–GIF

–JPEG

–PNG

制作鼠标经过图像

•鼠标经过图像就是当访问者的鼠标指针经过图像时，图像变为另一幅图像；而鼠标指针离开时，图像又恢复为原始图像。

它由两幅图像组成，即首次载入时显示的图像（原始图像）和鼠标经过后翻转的图像（翻转图像）。

•在创建翻转图时应该使用相同大小的两幅图像，可以使用Fireworks或PhotoShop等图像处理软件制作出需要使用的图像。

制作图像映射

•图像映射就是指在一幅图像中定义若干个区域（这些区域被称为热点，也就是hotspot）每个区域中指定一个不同的超链接，当单击不同区域时可以跳转到相应的目标页面。

•图像映射最常见的用法包括：

电子地图、页面导航图、页面导航条等。

6.使用媒体

添加背景音乐

•由于背景音乐并不是一种标准的网页属性，所以需要通过修改源代码的方式为网页添加背景音乐。

•