网页设计和应用的基础知识

网页设计和应用的基础知识

 

一、网页设计基础

 

（一）什么是主页？

 

Internet快速发展，网民人数激增，能在网上拥有自己的主页是网民的心愿。在网络中有一种配置较高，24小时开机的计算机，之间连接在internet上的服务器。利用浏览器，通过internet可以直接查看硬盘（服务器）上的文件，这就是我们讲的网页。很多网页合起来就构成了主页。

 

（二）主页空间及免费服务

 

要做主页首先要在internet上找一个服务器空间放置主页。大的网站可以给你提供30M至100M的免费主页空间让你使用。因为是免费的，服务功能少一些。你要享受更好的服务，可以申请虚拟主机，但这是要收费的。

 

申请到主页空间后，会得到一个域名，就是你的主页地址，在浏览器地址栏输入这个网址就可以浏览你的主页了。如果网址名太长不好记，还可以申请一个新的域名。域名有免费和收费两种，免费的域名，注册一下就可以了；收费的域名要到指定的机构办理手续。国外域名可以自由申请，一个域名一年约十几元钱。

 

在internet上还有免费的计数器和聊天室，都可以用到你的网页中去。

 

（三）网页实际是文本文件

 

网页是用文本文件组成的，扩展名是htm或html。最初用html（超文本标记语言），现在扩展为有HTML、CSS、JAVAｓｃｒｉｐｔ组成的DHRML，就是常说的“动态网页”。

 

网页是纯文本文件，可以用文本编辑软件来编辑，记事本是最简单的网页编辑工具了，但功能太简单。Ultraedit是具有很强功能的文本编辑软件，专为网页编辑提供了很强的功能。

 

（四）所见即所得的网页制作工具

 

用文本编辑软件做网页必须会HTML语言，所见即所得的网页制作工具，和WORD排版差不多，你只要将文本、图形摆到网页中，网页会自动生成HTML代码。

 

Frontpage是微软公司出品的网页制作工具，和WORD、IE结合得非常好，简单易用、易上手，是初学者比较好的选择，但兼容性差一些，制作的网页不支持Netscape等其他浏览器，对复杂的动态网页的设计能力有限。

 

Macromedia公司的Dreamweaver是相当优秀的网页制作工具，功能强大，操作方便，代码简洁，有强大的动态网页设计能力，与Fireworks、Flash等软件结合紧密，受到大多数专业网页设计者的青睐。

 

（五）网页的大小与传输速率

 

初学网页设计的人喜欢在网页上放很多漂亮的图片，看起来很舒服。但是图片多，会使网页的文件很大，浏览相当费时间。要尽量少用图片，必须用的话也要尽量想办法减小图片的体积。

 

（六）网页上常见的图形格式

 

JPEG和GIF是网页中使用比较多的两种图形文件格式。

 

JPEG格式文件的扩展名是JPG，是一种高压缩率的真彩色图形文件，可按需要调整其压缩质量和文件大小，是用得最多的一种静态图形文件格式。

 

GIF文件扩展名是GIF,是一种256色的动画文件格式，可以在网页中显示动画效果。GIF文件采用无损压缩技术，压缩后图形质量不会有丝毫变化，还可以使用透明背景。GIF文件要有专用工具软件制作，如Addbe公司的Imageread和Macromedia公司的Fireworks。

 

（七）gif动画的制作

 

gif move gear、Animagicgif也是小巧实用的gif动画制作工具。

 

（八）网页内容与网页设计

 

网页内容和网页外观像写文章一样，是形式和内容的统一。不要在网页中加入太多的华而不实的图片、效果，网页要尽量明快、简洁才好。

 

（九）上传网页

 

网页做好以后，就可以上传到申请好的服务器中，一般采用FTP上传网页（如Leap FTP、CuteFTP），也可以用浏览器上传网页。

 

用Dreamweaver、Frontpage提供的FTP功能也可以上传网页。

 

要注意的两个问题

 

1、你的主页的第一个HTML文件必须是index.htm和index.html。这是你主页的大门。没有他，别人是无法访问你的网页的。

 

2、因服务器使用的操作系统不一样，所以网页文件名是区分大小写的。

 

二、利用Frontpage2000制作网页

 

（一）快速上手

 

1、从一个网页开始

 

（1）迅速建立简单的网页

 

用Frontpage2000几分钟就可以做一个网页。启动后自动打开一个新网页，输入内容，将文件保存为index，扩展名自动加上htm。在文件菜单点击浏览器预览，然后按预览按钮就打开刚创建的网页，题目显示nes pape网页。

 

切换到Frontpage2000，点击空白处右击选择“网页属性”，在标题处输入新的名字，确定后再用IE浏览器浏览，提示保存所做的修改，点“是”，浏览器上的网页标题就成为刚输入的标题。

 

（2）页面的修饰

 

插入图片。将光标放在要插入图片的位置，从插入菜单中选择图片选择来自文件，在弹出的对话框中选取所需要的文件（在右边可以预览图片），点确定就将图片插入到网页中了（多积累一些图片，方便使用）。

 

给网页加背景。在网页空白处，点击右键选择“网页属性”点“背景”选项卡，按浏览按钮，选择背景文件，确定后网页就有背景了。

 

如何将网页链接起来。制作若干个网页和一个宿主主页，在主页中输入要链接的相关文字，选中链接的文字，点工具栏中的超连接按钮，选择要链接的网页后确定。连接文字加上了下划线颜色改变了，用浏览器浏览时，点超链接文字处就可以观看相关网页了。个人主页就是这样做出来的。

 

（3）视频和音频

 

在网页中添加视频音频特效会使网页更加丰富多彩。给网页添加背景音乐，在空白处右击，点网页属性的背景音乐，浏览找到背景音乐(*.mid)确定保存后，网页中就有了背景音乐了。

 

在网页中插入视频。将光标定位到要插入视频的位置，在插入菜单选择高级选择插件，打开插件属性对话框，点浏览按钮，选择要插入的视频文件（*.mpeg）确定，在浏览器中浏览就可以播放视频文件。要注意的是：视频文件在网页中不要太多太大，因为网络速度有限制。

 

（4）让别人访问到自己的网页

 

将已编好的主页上传到WEB服务器，别人才能在网上看到你的主页。点文件菜单。选择“发布站点”进行发布，以后在浏览器地址栏输入地址，回车就可以打开你的站点了。

 

2、编辑网页

 

（1）视图与模式

 

Frontpage2000窗口右边是视图工具栏，有六种视图，点击图标可以进行视图切换。

 

网页视图：

 

文件夹试图：

 

报表视图：站点统计信息

 

导航视图：用于组织站点

 

超链接视图：了解网页中超链接情况

 

任务视图：站点维护

 

三种模式：

 

普通模式：

 

预览模式：了解当前网页在浏览器中的显示情况，不能对网页进行编辑。

 

HTML模式：可以直接对网页对应得HTML源代码进行编辑，为网页加特殊设置，实现特殊效果。

 

（2）利用模板创建网页

 

点新建按钮会创建新网页，点新建按钮后边的向下箭头，可以选择新建网页、站点、文件夹和任务。

 

要利用模板创建网页，在文件菜单选新建下的网页，可以选择网页的模板（在预览框中可以看到效果），确定后就建好一个网页的框架。

 

（3）修饰文本

 

有了网页框架，就要丰富内容了。内容输入后，可以利用文字工具栏、格式菜单、段落菜单对文本进行修饰。

 

（4）插入水平线

 

在要插入水平线的位置定位光标，从插入菜单中选择水平线就可以了。

 

双击水平线，可以设置水平线的属性，包括水平线的长度、高度、颜色和对齐方式。选择水平线，可以用插入图片方式，使水平线变成自己喜欢的图片样式，这样就更加美观了。右击水平线，用图片属性可以修改水平线的外观。

 

（5）插入时间标记

 

在网页上有时显示的时间是动态的，称为时间标记。输入“更新时间”，点击插入菜单，选日期/时间格式就可以了。

 

（6）预览新建网页

 

网页做好以后，点击预览模式就可以显示网页在浏览器中的实际效果（不能查找错误，查找错误要用浏览器）。

 

3、使用图形

 

用复制、粘贴方法可以替换文本，也可以插入、替换图片。

 

（1）插入图片

 

（2）设置图片透明

 

选中图片，点工具栏上的设置透明颜色按钮（JP文件不能设为透明，要转换为GIF格式才能设为透明），转换后点白色部分就可以了。

 

（3）调整图形

 

选中图片，用剪切按钮剪切就可以调整图片大小，拖动缩放点也可以。

 

（4）给图片加文字

 

选中图片，点工具栏上文本按钮，出现文本输入框输入文本。修改文字双击文字框就可以了。

 

（5）图形与文本的对齐

 

在图形上单击鼠标右键，用图片属性可以调整图片，点外观选项卡，选择对齐方式。

 

（6）设置特殊效果

 

选中图片，利用特殊效果工具可以设置图片的特殊效果。可以对图片向左、向右、水平、垂直翻转，可以调整对比度、亮度、冲蚀（半透明效果）。图片也有层的概念，可以叠加。

 

4、超链接

 

（1）用文本和图形建立超链接

 

在网页里，通过点击进行页面切换的网页界面元素叫超链接。选中文字或图形，从菜单中执行超链接，然后选择要链接的对象网页，就可以把网页连接起来。

 

在普通模式下是不可以直接激活超链接的，要激活超链接必须按下CTRL键。

 

超链接也可以指向其他网站，在地址栏输入要链接的网络地址就可以。

 

修改已设定的超链接，在普通模式下，右击超链接，从菜单中选择“超链接属性”，可以重选URL中的超链接对象。要取消超链接，删除已有的超链接地址即可。

 

利用超链接，还可以给指定的人发电子邮件。选定“请与我联系”文字，点超链接按钮，点信封按钮，输入自己的邮件地址。在浏览器中浏览时点击，就启动电子邮件，可以发Emial了。

 

（2）设置书签

 

如果页面太长，可设置书签，实现在同一页面内跳转，以快速定位到网页的相关部分。

 

选中要定义成书签的文字，插入书签，输入书签的名称（也可以用其文字本身）就可以了。设为书签后，文字将出现下划线。

 

设置书签以后，就可以为书签做超链接了，和设置普通超连接方法相同。点书签按钮，设置书签超链接。在页首设置超链接，也要设置返回超链接，否则就不能返回了。

 

（3）设置超链接的颜色

 

默认的超链接的颜色是蓝色的；用网页属性的背景可以设置超链接的颜色。

 

（二）更上一层楼

 

1、使用表格

 

将文本或图形放在表格中，可以使网页整齐、美观，达到对网页进行布局的目的。

 

（1）创建表格

 

创建表格有三种方法：一是用工具栏上插入表格按钮，在方格上拖动鼠标就可以制作出规则的表格；二是在表格菜单中选择插入表格，定制行列数、行高列宽、对齐方式、边框线粗细、单元格边距间距、表格宽度等就可以创建规则表格；三是手动绘制表格，在表格菜单选择手绘表格，用鼠标划线的方法绘制表格。建立表格的方法和WORD建立表格的方法一样，所以你会觉得很简单。

 

（2）添加单元格

 

类似于WORD中插入单元格的方法。

 

（3）操作单元格

 

选中要操作的单元格，可以进行合并、拆分，可以设置单元格背景色、边框色、高度、宽度、是否换行。

 

（4）行列操作

 

可以删除或插入行列，可以调整行高列宽。

 

（5）表格设置

 

利用表格属性可以设置表格的布局、边框、背景颜色。可以设置立体表格、边框宽度。明暗框要有不同的颜色。

 

1、组件的使用

 

（1）使用字幕

 

在浏览网页时，常会看到滚动文字发布的通告或提示信息，这就是字幕。

 

制作字幕的方法很简单：定位光标后，选择插入菜单组件下的字幕，在弹出的文本框中输入文字，然后设置方向、速度、表现方式、对齐方式、大小、是否连续、背景颜色。在字母文字上右击就可以修改字幕属性。

 

（2）站点计数器

 

站点计数器，可以统计访问主页或网页的人数。从插入菜单选择站点计数器，输入初始值和计数器的位数。

 

将站点发布到WEB服务器，并设置了网站的服务器Frontage扩展后，计数器才能正常显示。

 

（3）悬停按钮

 

网页上的链接按钮，有的鼠标移上去后，按钮会改变颜色，单击可以连接到其他网页，这种按钮叫悬停按钮。

 

从插入菜单组件中选择悬停按钮，输入按钮的文字、连接地址、按钮颜色、背景、效果。右击悬停按钮可以设置悬停按钮的属性。

 

站点发布后才可以看到实际效果。

 

（4）横幅广告管理器

 

横幅广告条可以使几幅图片按一定的切换效果不断地播放。

 

从插入菜单组件中选择横幅广告条管理器，输入宽度、高度、图片显示时间、过度效果。添加按钮用来添加横幅的图片。要给横幅广告条设置链接，双击广告条就可以。

 

（5）网页灰度

 

从格式菜单中选择网页灰度，选择相应的效果，对各事件可以设置持续的时间。

 

3、使用框架

 

框架类似于布告栏，有了基本的页面格式，加了相应的内容。利用框架制作网页，会使我们更方便更快捷。

 

（1）创建框架

 

从文件菜单选择新建中的网页，选择“框架网页”选项卡，有10种框架网页布局模板供我们使用，选择一种确定。

 

（2）填充框架网页

 

有了框架网页，就要在框架内放内容。点设置初始网页，也可点新建网页，重新组织框架的内容。

 

（3）调整框架

 

将鼠标放在框架边界上，拖动就可以改变框架大小。在框架内右击，从菜单中选择属性，可以改变名称、框架大小、滚动条显示方式，边距。

 

在框架内放入的网页太大，会出现滚动条。边距是指网页正文与框架间的距离。也可以用框架属性改变分割条的宽度，也可以设成没有分割条。

 

（4）框架操作

 

框架可以拆分或删除，从框架菜单中选择拆分或删除即可。在框架边界处按下CTRL拖动也可以分割框架。

 

（5）保存框架和内容网页

 

单击保存按钮，在另存为对话框中显示是保存框架网页还是保存内容网页，必须注意这个问题。

 

4、使用多媒体

 

（1）使用音频

 

定位光标后，选择插入/高级/插件，在打开的插件属性对话框中，单击数据源的浏览按钮，选择*.MID（音频文件），然后单击确定。在普通模式下，页面上会出现专用的音频插件标记，在预览模式下，出现浏览器自带的媒体播放插件Active movie。浏览器监测到网页中插入的音频插件后，就会自动显示并调用播放插件来播放。

 

如果浏览者的浏览器中没有安装媒体播放插件，就不能播放音频插件。如果能给浏览者一个提示信息就好多了，可以在音频文件图标上右击，选择插件属性，在“浏览器不支持插件时显示信息”框内输入提示信息，这样浏览器不能播放时就有提示了。

 

改变播放窗口的大小。选中音频图标后拖动缩放点可以改变窗口的大小，更精确的方法是在插件属性对话框中的大小栏中输入数据。对齐方式、间距、边框边界宽度也可以在属性对话框内设定；也可以将插件隐藏起来，好像是背景音乐了。

 

插入背景音乐。在网页空白处右击鼠标，选中网页属性，按下背景音乐的浏览按钮，找到背景音乐文件*.WAV，也可以设置循环播放的次数。

 

链接音频。音频文件（*.MID、*.WAV）也可以作为超链接的对象。

 

（2）使用视频

 

和使用音频文件差不多。定位光标后，选择插入/高级/插件，在打开的插件属性对话框中，单击数据源的浏览按钮，选择*.AVI（视频文件），然后单击确定。浏览时就会自动播放。也可以调整视频窗口的大小。

 

视频文件在浏览时默认是自动播放的。定位光标，选择插入/图片/视频，进行视频文件的插入。这样显示出来的是图片，鼠标移上去后自动播放。右击选择图片属性，点击视频选项卡，在播放下有“打开文件时”和“当鼠标悬停其上时”两个选项，可以实现不同的播放形式。

 

视频文件也可以作为超链接的对象。

 

（三）高级使用

 

1、站点操作

 

（1）创建新站点

 

从文件/新建/站点，弹出新建站点对话框，在指定站点的位置文本框内输入新站点的位置，然后确定，会提示你“是否把文件转换为新站点”，单击“是”。

 

点工具栏上的站点按钮，在新建站点中有个index.htm主页索引文件，访问站点时默认进入该页。现在主页是空的，可以往里边加内容。

 

新建站点时会自动生成imges和private文件夹，在编辑站点时可以把图片文件放到imges文件夹中。要形成良好的习惯，进行规范的文件存放，这会给我们带来许多方便。

 

利用模板或向导创建网站是相当方便的。

 

也可以创建没有主页的站点或个人站点。

 

（2）设计主题

 

主题包括了许多网页元素的格式定义，对形成站点的风格相当重要。

 

打开主页，点格式/主题，打开主题对话框，可以选择应用到所有页或应用到当前页。在主题列表中可以选择主题。主题也可以修改，单击修改按钮即可。颜色按钮可以修改主题的颜色，图形按钮可以修改主题图形，文本按钮可以修改文本外观。

 

颜色盘：修改主题颜色及亮度

 

自定义：选择网页元素进行修改

 

图形：选项目、设图片

 

主题要从头定义难度很大，用修改的方法可以形成具有自己风格的主题，用另存为输入主题名就可以保存自己特色的主题。

 

（3）共享边框设计

 

在浏览网站时常会发现每一个网页都显示相同的信息，如果在每一个网页上都输入就太麻烦了，使用共享边框的方法就容易多了。

 

格式/共享边框，选所有网页，选共享边框，确定。网页下边就有了一个共享边框，单击就可以修改共享边框的内容。

 

2、站点发布

 

做好站点就可以向网络发布了。如果没有Frontpage服务器扩展的支持，有些功能是不能正常运行的（如计数器、悬停按钮、搜索表单、讨论组）。在发布站点前，要了解服务器是否具备这一功能。

 

点工具栏上的打开按钮右边的小按钮，选打开站点，打开站点目录，双击index.htm，点文件/发布站点，在制定发布站点的位置输入自己的网站地址。点发布就开始发布，成功以后有提示。

 

没有服务器扩展，用HTTP协议不能发布站点，但可以用FTP形式发布站点。在站点发布中输入FTP地址，点发布后输入用户名和密码即可。

 

只有站点才可以发布，网页是不能发布的。

 

如果不支持服务器扩展的话，用选项点兼容性选项卡，清除服务器扩展选择。

 

3、表单设计

 

（1）搜索表单

 

在网页中允许你进行关键字搜索。有输入框、搜索按钮、重填按钮。制作搜索表单的方法是：定位光标后，插入/组建/搜索表单，进入搜索表单属性对话框，输入标签，设置搜索结果显示情况。

 

搜索表单需要Frontpage服务器的WEB服务器支持才行，在发布以前不能工作。

 

（2）创建表单网页

 

在网页上有浏览者填写信息，向网站管理者提供的表单。可以用表单模板、表单向导和自定义方式来创建表单。文件/新建/网页，在常规选项卡选择表单网页向导。

 

（3）添加表单字段

 

利用插入/表单元素/表单，就可以插入空表单。

 

插入/表单/单行文本框。

 

（4）表单字段使用

 

单行文本框：只能接受输入的单行文本信息

 

滚动文本框：可以输入多行，可以滚动文本

 

单选按钮：对属性进行设置

 

多选框：

 

下拉菜单：

 

双击文本框可以设置属性：行数、字符数、有效性检查、密码显示。

 

（5）确定网页

 

向浏览者显示服务器收到信息的网页成为确定网页，是由有服务器自动产生的。

 

你可以自己创建确定网页。新建一个空白网页保存起来，如thanks.htm。在提交表单页面上右击，选择表单属性，单击选项，选择确认网页选项卡，单击确认网页文本框后的浏览按钮，选择thanks.htm网页，确定。这样就把表单的确认网页指定到了新建的thanks.htm网页了。

 

打开thanks.htm网页，插入/组件/确认域，打开确认域对话框，一次输入表单字段名，在确认域加入适当的提示信息，做一个返回链接。提交后确认域的地方被对应字段向服务器发送的值代替了。

 

（6）保存表单结果

 

右击表单，选表单属性按钮，点发送到，点选项，对保存的具体文件进行设置，点文件格式选项卡，先设文本的保存格式，点浏览按钮选择保存的文件。

 

可以把表单发送的信息同时保存在两个文件中，在可选的第二个文件部分设文件的类型和位置。

 

点电子邮件选项卡，输入邮箱地址。提交表单时则表单里的结果会以邮件形式发送到指定的邮箱里。邮件的格式也可以设置。选择包括域名，则表单字段的名称和值都会保存在电子邮件里。

 

4、讨论组

 

讨论组允许浏览者就某一个话题进行讨论。

 

（1）创建讨论组

 

打开站点，新建/站点，选择讨论站点向导，指定文件夹选中加到当前站点，，这样就可以在当前站点添加讨论组了。确定后弹出讨论站点向导，下一步，选择讨论站点的主要特性（全选），点下一步，输入讨论组名字。讨论组把所有文章保存在讨论组文件夹内，点下一步，选择文章发表的条件，点下一步设置文章排列顺序，点下一步“否”下一步选择主题、大小、日期、匹配程度，下一步选目录位于当前文章旁边，下一步完成。

 

在主页上加一些欢迎讨论的话，建超链接到讨论组的欢迎网页，保存后发布。

 

（2）管理文章网页

 

文件/打开，输入服务器上的站点地址，打开服务器站点；工具/站点设置，点高级选项卡，选显示隐藏目录中的文档，确定。选择刷新站点，选“是”。找到保存文章的文件夹打开，在可以删除不要的文章。