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

网站开发工具的使用与网页设计实验指导书 网站开发工具的使用与网页制作实验指导书指导教师蔡莉第1页共15页百度。 Com云南大学软件学院综合技能实践网站开发工具的使用与网页制作实验指导书指导教师蔡莉（注意请先简要阅读实验指导书的要求再开始做实验） 一、实验目的1认识网页2构成网页的基本要素3制作网页的基本工具4美化网页的基本工具5网页制作的基本步骤 二、实验内容预习 一、网页概述网页其实是在这个世界的某一个地方某一台计算机上的一个文件，通过互联网，也就是Inter将两个不同的地址相连，把人们的信息传达到网络世界的各个角落。 人们通过互联网，可以在世界的任何一个地方互相交流沟通。 早期的Web1.0时代，大部分网页只有文字、图像信息可以浏览，这个时候最典型的互联网标志就是门户网站，如网易、搜狐。 从xx年开始，人们认为互联网开始进入Web2.0时代，这时的网页可以包含动画、音频、视频，也可以在网页中进行交流、上传文件，使用完全交互式的程序。 互联网开始更注重个人化的网络服务，任何使用网络的人，都可以参与到网页的制作中。 静态网页的后缀通常为.html或者.htm，例如index.html或者sunny.htm。 动态网页的后缀可以为.asp，.aspx，.php，.jsp等，例如index.asp或者first.jsp等。 二、构成网页的基本要素 1、文字网站开发工具的使用与网页制作实验指导书指导教师蔡莉第2页共15页文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。 另外，文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载，便于以后长期阅读，也可对其进行打印。 2、图形这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。 网页上的图形格式一般使用JPEG和GIF，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。 3、链接标志链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。 通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。 链接的标志有文字和图形两种。 制作一些精美的图形作为链接按钮，使它和整个网页融为一体。 4、交互功能Inter区别其他媒体的一个重要标志就是它的交互功能。 例如在商务网站的页面上，人们经过浏览，选择了某一个产品，就需要将自己的决定通过Inter告诉这个网站，网站能够自动对该产品的数据库进行检索，及时回应有还是没有，数量、规格、价格等信息。 如果用户选择确定，那么网站能够返回确认信息。 像这种交互功能其他媒体是无法比拟的。 通常网页的交互功能都是利用表单来实现的。 表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。 三、网页制作工具1超文本标识语言（HTML）HTML（Hypertext MarkupLanguage）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。 HTML文档由文本、格式化代码和导向其他文档的超链接组成。 2FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制作工具。 FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。 网站开发工具的使用与网页制作实验指导书指导教师蔡莉第3页共15页FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便，Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强大。 3Dreamweaver Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页人员的需要，同时也容易被业余网友们所掌握。 另外，Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用，即使是初学者也能制作出相当于专业水准的网页，所以Dreamweaver是网页设计者的首选工具。 四、美化网页的基本工具为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化工具对网页进行美化。 1Photoshop Photoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。 2Fireworks Fireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。 因为Fireworks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。 作为一款为网络设计而开发的图像处理软件，Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。 3Flash Flash是美国Macromedia公司开发的矢量图形和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。 它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。 Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。 五、网页制作的基本步骤1整体规划网站开发工具的使用与网页制作实验指导书指导教师蔡莉第4页共15页进行网站的整体规划也就是组织网站的内容和设计其结构。 网页制作者在明确网页制作的目的及要包括的内容之后，接下来就应该对网站进行规划，以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。 2网页设计与制作在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。 通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。 静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。 3测试网页当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。 所谓功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。 完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。 如果在测试过程中发现了错误，就要及时修改，在准确无误后，方可正式在Inter上发布。 在进行功能性测试和完整性测试后，有的还需要掌握整个站点的结构以备日后的修改。 1.4.4网页上传发布网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。 发布的服务器可以是远程，也可以是本地，但必须支持ASP，因为动态程序是建立在ASP基础上的。 六、使用Dreamweaver创建网页和站点1Dreamweaver的简介Adobe Dreamweaver CS4站点是Web站点中所有文件和资源的集合。 用户可以用它在计算机上创建Web页，可将Web页上传到Web服务器，并可随时在保存文件后传输更新的文件来对站点进行维护，还可以和维护未使用Dreamweaver创建的Web站点。 2Dreamweaver的界面介绍Dreamweaver CS的窗口分为7个部分（如图1所示），分别是A、应用程序栏（菜单栏）应用程序窗口顶部包含一个工作区切换器、几个菜单（仅限Windows）以及其它应用程序控件。 网站开发工具的使用与网页制作实验指导书指导教师蔡莉第5页共15页B、文档工具栏包含一些按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。 C、文档窗口显示当前文档。 可以选择下列任一视图设计视图、代码视图、拆分视图等。 D、工作区切换器查看文档和对象属性。 工作区还将许多常用操作放置于工具栏中，使用户可以快速更改文档。 E、面板组组织各种类型的面板。 F、标签选择器设置某个标签的class或ID属性。 G、属性检查器“属性”检查器使您可以检查和当前选定页面元素（如文本和插入的对象）的最常用属性。 “属性”检查器中的内容根据选定的元素会有所不同。 例如，如果您选择页面上的一个图像，则“属性”检查器将改为显示该图像的属性（如图像的文件路径、图像的宽度和高度、图像周围的边框（如果有），等等）。 H、文件面板使用“文件”面板可查看和管理Dreamweaver站点中的文件。 图1Dreamweaver的窗口3创建站点在Dreamweaver中，术语“站点”指属于某个Web站点的文档的本地或远程存储位置。 若要定义Dreamweaver站点，只需设置一个本地文件夹。 若要网站开发工具的使用与网页制作实验指导书指导教师蔡莉第6页共15页向Web服务器传输文件或开发Web应用程序，还必须添加远程站点和测试服务器信息。 （1）新建一个本地站点步骤一选择“站点”“新建站点”；步骤二在“站点定义”对话框中，输入设置信息若要使用站点设置向导来设置站点，请单击“基本”选项卡，然后按照提示进行操作，见图2。 进行必要设置如站点名称和站点的地址后，点击下一步。 图2新建站点步骤三在“文件，第2部分”窗口中选择“否，我不想使用服务器技术”，然后点击下一步；步骤四在“文件，第3部分”窗口中选择“我的计算机上的本地副本，完成后再上传到服务器（推荐）”，接着指定站点文件存放的位置，然后点击下一步；步骤五在“共享文件”窗口中的下拉列表框中选择“无”，然后点击下一步；步骤六在“总结”窗口中查看创建站点的基本信息，如果没有问题，选择“完成”按钮，结束创建站点的工作。 网站开发工具的使用与网页制作实验指导书指导教师蔡莉第7页共15页图3站点存储位置4Dreamweaver的基本操作 （1）新建网页新建站点完成后，Dreamweaver会在“文档”窗口中显示一个名为“untitled-1”的网页，可以把它作为第一个页面来使用。 也可以在“菜单栏”中选择“文件”“新建”“html”页面选项来生成新的页面。 注意以后的工作请在“设计”视图中完成。 可以在标题输入框中输入该网页的标题内容例如Wele tomy world!。 （2）设计网页内容A.插入文本若要向Dreamweaver文档添加文本，您可以直接在“文档”窗口中键入文本，也可以剪切并粘贴文本。 还可以从其它文档导入文本。 如果需要对文本进行，首先要选中需要的文本，然后单击鼠标右键，系统弹出快捷菜单，可以选择“段落格式”、“列表”、“对齐”等菜单选项进行排版，如图4所示。 完成插入文本后，将网页保存为“index.html”文件，“保存”操作见第 （3）部分。 本示例选中文本“Wele tomy world!”，将其颜色设置为“红色”，段落格式为“标题3”网站开发工具的使用与网页制作实验指导书指导教师蔡莉第8页共15页图4.选中要的文本B.插入图片可以选择“插入”菜单中的“图像”选项来插入一张图片。 将图像插入Dreamweaver文档时，HTML源代码中会生成对该图像文件的引用。 为了确保此引用的正确性，该图像文件必须位于当前站点中。 如果图像文件不在当前站点中，Dreamweaver会询问您是否要将此文件复制到当前站点中。 图5显示了插入图片后的页面。 网站开发工具的使用与网页制作实验指导书指导教师蔡莉第9页共15页图5带有图片的网页如果需要对图片进行修改，可以先选中图片，然后在“属性检查器”中对图片的属性进行更改，例如宽度、高等、边框等内容。 C.插入表格可以选择“插入”菜单中的“表格”选项来插入一张表格。 图6显示了表格窗口。 在这里可以指定表格的行数、列数、宽度、边框粗细等内容。 图6插入表格的窗口可以在表格的单元格中插入文本、图像、媒体等多种内容。 网站开发工具的使用与网页制作实验指导书指导教师蔡莉第10页共15页图7网页中插入表格图7显示了网页中插入了一个“1行2列”的“居中”对齐的表格，左边放文本，右边放图像，表格边框为1。 D.插入链接创建链接之前，一定要清楚绝对路径、文档相对路径以及站点根目录相对路径的工作方式。 在一个文档中可以创建几种类型的链接?链接到其它文档或文件（如图形、影片、PDF或声音文件）的链接。 ?命名锚记链接，此类链接跳转至文档内的特定位置。 ?电子邮件链接，此类链接新建一个已填好收件人地址的空白电子邮件。 ?空链接和脚本链接，此类链接用于在对象上附加行为，或者创建执行JavaScript代码的链接。 注意这里仅介绍第一种链接方式。 使用超链接命令添加链接“超链接”命令可以创建到图像、对象或其它文档或文件的文本链接。 1将插入点放在文档中希望出现链接的位置。 2执行下列操作之一，显示“插入超链接”对话框?选择“插入”“超级链接”。 ?在“插入”面板的“常用”类别中，单击“超链接”按钮。 3输入链接的文本，然后在“链接”后面输入要链接到的文件的名称（或单击文件夹图标以浏览到该文件）。 4在“目标”弹出菜单中选择一个窗口（应在该窗口中打开该文件）或键入其名称。 网站开发工具的使用与网页制作实验指导书指导教师蔡莉第11页共15页当前文档中所有已命名框架的名称都显示在此弹出列表中。 如果指定的框架不存在，所链接的页面会在一个新窗口中打开，该窗口使用您所指定的名称。 也可选用下列保留目标名?_blank将链接的文件加载到一个未命名的新浏览器窗口中。 ?_parent将链接的文件加载到含有该链接的框架的父框架集或父窗口中。 如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。 ?_self将链接的文件加载到该链接所在的同一框架或窗口中。 此目标是默认的，所以通常不需要指定它。 ?_top将链接的文件加载到整个浏览器窗口中，因而会删除所有框架。 5在“Tab键索引”框中，输入Tab顺序的编号。 6在“标题”框中，输入链接的标题。 7在“访问键”框中，输入可用来在浏览器中选择该链接的等效键盘键（一个字母）。 8单击“确定”。 举例说明如果要在index.html文件中插入一个超链接，链接文本为“旅游”，链接到的文件为“travel.htm”。 注意在设置链接时，需要首先创建好travel.htm文件。 图8显示了travel.htm的内容图8.travel.html文件接着打开index.html文件，在原有表格中增加一行用于存放超链接（先选中表格中的一行，然后右击快捷菜单，选择“表格”“插入行”选项即可在当前行之前插入新的一行。 ）。 先输入文本“旅游”，然后选中文本，点击右边“插入”面板中的“超级链接”，出现图9所示的窗口。 窗口中的文本为旅游，链接为“travel.html”文件（注意该文件与index.html文件处于相同路径），目网站开发工具的使用与网页制作实验指导书指导教师蔡莉第12页共15页标为“_blank”。 设置完成后，点击“确定”按钮。 图10显示设置超链接之后的index.html，链接文本变为蓝色，而且下方出现下划线。 图10“超级链接”窗口图10.设置超链接的网页index.html （3）保存网页网站开发工具的使用与网页制作实验指导书指导教师蔡莉第13页共15页在“菜单栏”中选择“文件”“保存”选择来存储这个新页面，此时，需要给页面命名，如index.html，另外还有选择保存位置。 缺省位置即为刚才创建站点时的位置，见图11。 图11保存网页 （4）浏览网页设计好网页后，可以直接在浏览器中查看该网页的效果，或者在Dreaweaver窗口右边的“文件面板”中选中需要预览的网页，例如index.html，然后点击鼠标右键，在弹出菜单中选择“在浏览器中预览”选项，并选择特点浏览器后即可看到网页的最终效果。 如果对效果不满意，可以返回Dreaw