龙南 / 建站文章 / 网页设计和应用的基础知识

分享

   

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

2014-12-23  龙南

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

 

一、网页设计基础

 

(一)什么是主页?

 

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

 

(二)主页空间及免费服务

 

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

 

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

 

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

 

(三)网页实际是文本文件

 

网页是用文本文件组成的,扩展名是htmhtml。最初用html(超文本标记语言),现在扩展为有HTMLCSSJAVAscript组成的DHRML,就是常说的“动态网页”。

 

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

 

(四)所见即所得的网页制作工具

 

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

 

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

 

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

 

(五)网页的大小与传输速率

 

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

 

(六)网页上常见的图形格式

 

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

 

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

 

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

 

(七)gif动画的制作

 

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

 

(八)网页内容与网页设计

 

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

 

(九)上传网页

 

网页做好以后,就可以上传到申请好的服务器中,一般采用FTP上传网页(如Leap FTPCuteFTP),也可以用浏览器上传网页。

 

DreamweaverFrontpage提供的FTP功能也可以上传网页。

 

要注意的两个问题

 

1、你的主页的第一个HTML文件必须是index.htmindex.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主页索引文件,访问站点时默认进入该页。现在主页是空的,可以往里边加内容。

 

新建站点时会自动生成imgesprivate文件夹,在编辑站点时可以把图片文件放到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)管理文章网页

 

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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多

    ×
    ×

    ¥.00

    微信或支付宝扫码支付:

    开通即同意《个图VIP服务协议》

    全部>>