网页网站开发工具的使用与网页设计实验指导书

指导教师蔡莉

注意请先简要阅读实验指导书的要求再开始做实验

一、 实验目的

1 认识网页

2 构成网页的基本要素

3 制作网页的基本工具

4 美化网页的基本工具

5 网页制作的基本步骤

二、 实验内容预习

一、 网页概述

网页其实是在这个世界的某一个地方某一台计算机上的一个文件通过互联网也就是Interne t将两个不同的地址相连把人们的信息传达到网络世界的各个角落。人们通过互联网可以在世界的任何一个地方互相交流沟通。

早期的Web 1.0时代大部分网页只有文字、图像信息可以浏览这个时候最典型的互联网标志就是门户网站如网易、搜狐。从2001年开始人们认为互联网开始进入Web 2.0时代这时的网页可以包含动画、音频、视频也可以在网页中进行交流、上传文件使用完全交互式的程序。互联网开始更注重个人化的网络服务任何使用网络的人都可以参与到网页的制作中。

静态网页的后缀通常为.ht ml或者.ht m例如 in d e x.ht ml或者s unny.ht m。动态网页的后缀可以为.asp .asp x .p hp .j sp等例如 index.asp或者first.j sp等。

二、 构成网页的基本要素

1、文字

文字是网页发布信息所用的主要形式由文字制作出的网页占用空间小因此当用户浏览时可以很快的展现在用户面前。另外文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载便于以后长期阅读也可对其进行编辑打印。

2、 图形

这里的图形概念是广义的它可以是普通的绘制图形可以是各种图像还可以是动画。 网页上的图形格式一般使用JP EG和GIF这两种格式具有跨平台的特性可以在不同操作系统支持的浏览器上显示。

3、链接标志

链接是网页中一种非常重要的功能是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页也可以从一个网站转到另一个网站。链接的标志有文字和图形两种。制作一些精美的图形作为链接按钮使它和整个网页融为一体。

4、交互功能

Interne t区别其他媒体的一个重要标志就是它的交互功能。例如在商务网站的页面上人们经过浏览选择了某一个产品就需要将自己的决定通过Internet告诉这个网站网站能够自动对该产品的数据库进行检索及时回应有还是没有数量、规格、价格等信息。如果用户选择确定那么网站能够返回确认信息。像这种交互功能其他媒体是无法比拟的。

通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域当访问者单击按钮或图形来提交表单后数据就会传送到服务器上。

三、 网页制作工具

1超文本标识语言HTM L

HTMLHypertext Markup Language是一种专门用于Web页制作的编程语言用来描述超文本各个部分的内容告诉浏览器如何显示文本怎样生成与别的文本或图像的链接点。HTML文档由文本、格式化代码和导向其他文档的超链接组成。

2 FrontPage

FrontPage是由M icroso ft公司推出的新一代Web网页制作工具。 F ro ntPage使网页制作者能够更加方便、快捷地创建和发布网页具有直观的网页制作和管理方法简化了大量工作。

FrontPage界面与Word、 PowerPo int等软件的界面极为相似为使用者带来了极大的方便Microsoft公司将FrontPage封装入O ffice之中成为Office家族的一员使之功能更为强大。

3 Dre amwe aver

Dreamweave r是由Mac ro med ia公司推出的一款在网页制作方面大众化的软件它具有可视化编辑界面用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页不仅适合于专业网页编辑人员的需要同时也容易被业余网友们所掌握。另外Dre a mwe a ver的网页动态效果与网页排版功能都比一般的软件好用 即使是初学者也能制作出相当于专业水准的网页所以

Dre a mwe a ve r是网页设计者的首选工具。

四、 美化网页的基本工具

为了使制作的网页更为美观用户在利用网页制作工具制作网页时还需利用网页美化工具对网页进行美化。

1 Pho to s ho p

Photo shop是由Adobe公司开发的图形处理软件它是目前公认的PC机上最好的通用平面美术设计软件它功能完善、性能稳定、使用方便所以在几乎所有的广告、 出版、软件公司 Photo shop都是首选的平面制作工具。

2 Fire wo rks

Firewo rks是由Mac ro media公司开发的图形处理工具它的出现使Web作图发生了革命性的变化。因为F irewo rks是第一套专门为制作网页图形而设计的软件 同时也是专业的网页图形设计及制作的解决方案。

作为一款为网络设计而开发的图像处理软件 F ireworks还能够自动切割图像、生成光标动态感应的JavaS crip t程序等等而且F irewo rks具有强大的动画功能和一个相当完美的网络图像生成器。

3 Flash

Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件它是一种交互式动画设计工具用它可以将音乐、声效、动画以及富有新意的界面融合在一起以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域功能十分强大和独特已成为交互式矢量动画的标准在网上非常流行。 Flash广泛应用于网页动画制作、教学动画演示、 网上购物、在线游戏等的制作中。

五、 网页制作的基本步骤

1整体规划

进行网站的整体规划也就是组织网站的内容和设计其结构。网页制作者在明确网页制作的目的及要包括的内容之后接下来就应该对网站进行规划以确保文件内容条理清楚、结构合理这样不仅可以很好地体现设计者的意图也将使网站可维护性与可扩展性增强。

2 网页设计与制作

在开始制作网页之前建议应用少量时间对自己要制作的主页进行总体设计例如希望主页是怎样的风格应该放一些什么信息其他网页如何设计分几层来处理等等。

通常在进行网页开发时首先都进行静态网页的制作然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息而不具有任何交互功能的网页它是Web网页的重要组成部分。

3测试网页

当网页设计人员制作完所有网站页面之后需要对所设计的网页进行审查和测试测试内容包括功能性测试和完整性测试两个方面。

所谓功能性测试就是要保证网页的可用性达到最初的内容组织设计目标实现所规定的功能读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确链接准确无差错无遗漏。

如果在测试过程中发现了错误就要及时修改在准确无误后方可正式在Interne t上发布。在进行功能性测试和完整性测试后有的还需要掌握整个站点的结构以备日后的修改。

1.4.4网页上传发布

网页设计好必须把它发布到互连网上否则网站形象仍然不能展现出去。发布的服务器可以是远程也可以是本地但必须支持ASP因为动态程序是建立在ASP基础上的。

六、 使用Dre amwe aver创建网页和站点

1 Dre amwe aver的简介

Adobe Dreamweaver CS4站点是Web站点中所有文件和资源的集合。用户可以用它在计算机上创建Web页可将Web页上传到Web服务器并可随时在保存文件后传输更新的文件来对站点进行维护还可以编辑和维护未使用Dreamweave r创建的Web站点。

2 Dre amwe aver的界面介绍

Dreamweaver CS的窗口分为7个部分如图1所示 分别是

A、应用程序栏菜单栏 应用程序窗口顶部包含一个工作区切换器、几

个菜单 仅限Windows以及其它应用程序控件。

B、文档工具栏包含一些按钮它们提供各种“文档”窗口视图 如“设计”视图和“代码”视图的选项、各种查看选项和一些常用操作 如在浏览器中预览 。

C、文档窗口显示当前文档。可以选择下列任一视图设计视图、代码视图、拆分视图等。

D、工作区切换器查看文档和对象属性。工作区还将许多常用操作放置于工具栏中使用户可以快速更改文档。

E、面板组组织各种类型的面板。

F、标签选择器设置某个标签的class或ID属性。

G、属性检查器 “属性”检查器使您可以检查和编辑当前选定页面元素如文本和插入的对象的最常用属性。 “属性”检查器中的内容根据选定的元素会有所不同。例如如果您选择页面上的一个图像则“属性”检查器将改为显示该图像的属性如图像的文件路径、图像的宽度和高度、图像周围的边框 如果有 等等 。

H、文件面板使用“文件”面板可查看和管理Drea mw eaver站点中的文件。

图1 Dreamweaver的窗口

3创建站点

在Dreamweave r中术语“站点”指属于某个Web站点的文档的本地或远程存储位置。若要定义Drea mwe a ver站点只需设置一个本地文件夹。若要

向Web服务器传输文件或开发Web应用程序还必须添加远程站点和测试服务器信息。

 1新建一个本地站点

步骤一选择“站点”>“新建站点” 

步骤二在“站点定义”对话框中输入设置信息

若要使用站点设置向导来设置站点请单击“基本”选项卡然后按照提示进行操作见图2。进行必要设置如站点名称和站点的HTTP地址后点击下一步。

步骤三在“编辑文件第2部分”窗口中选择“否我不想使用服务器技术” 然后点击下一步

步骤四在“编辑文件第3部分”窗口中选择“编辑我的计算机上的本地副本完成后再上传到服务器推荐 ” 接着指定站点文件存放的位置然后点击下一步

步骤五在“共享文件”窗口中的下拉列表框中选择“无” 然后点击下一步

步骤六在“总结”窗口中查看创建站点的基本信息如果没有问题选择“完成”按钮结束创建站点的工作。

图3 站点存储位置

4 Dre amwe aver的基本操作

1新建网页

新建站点完成后Dr e a mwe a ver会在“文档”窗口中显示一个名为“unt it le d-1”的网页可以把它作为第一个页面来使用。也可以在“菜单栏”中选择“文件”——“新建”——“ht ml”页面选项来生成新的页面。

注意以后的工作请在“设计”视图中完成。

可以在标题输入框中输入该网页的标题内容例如Welcome to my world! 。

2设计网页内容

A.插入文本

若要向Dre a mwe a ve r文档添加文本您可以直接在“文档”窗口中键入文本也可以剪切并粘贴文本。还可以从其它文档导入文本。如果需要对文本进行编辑首先要选中需要编辑的文本然后单击鼠标右键系统弹出快捷菜单可以选择“段落格式” 、 “列表” 、 “对齐”等菜单选项进行排版如图4所示。完成插入文本后将网页保存为“inde x.html”文件 “保存”操作见第3部分。

本示例选中文本“Welcome to my world!” 将其颜色设置为“红色” 段落格式为“标题3”

图4. .选中要编辑的文本

B.插入图片

可以选择“插入”菜单中的“图像”选项来插入一张图片。将图像插入Dre a mwe a ve r文档时 H TM L源代码中会生成对该图像文件的引用。为了确保此引用的正确性该图像文件必须位于当前站点中。如果图像文件不在当前站点中Dre a mwe a ve r会询问您是否要将此文件复制到当前站点中。图5显示了插入图片后的页面。

图5 带有图片的网页

如果需要对图片进行修改可以先选中图片然后在“属性检查器”中对图片的属性进行更改例如宽度、高等、边框等内容。

C.插入表格

可以选择“插入”菜单中的“表格”选项来插入一张表格。图6显示了表格窗口。在这里可以指定表格的行数、列数、宽度、边框粗细等内容。

图6 插入表格的窗口

可以在表格的单元格中插入文本、 图像、媒体等多种内容。