《网页设计课程》.docVIP

《网页设计与制作》课程实 习 实 验 指 导 书实验目录 实验1 启动网页三剑客应用程序 实验2 站点的建立与管理 实验3 利用表格布局网页 实验4 网页中的超级链链 实验5 在网页中使用CSS样式 实验6 框架技术与模板 实验7 在网页中使用CSS样式 实验8 页面的交互方式 实验9 网站的测试与发布 实验1 启动网页三剑客应用程序 一．实验目的 1.熟悉Internet 和www 2.掌握安装与删除Dreamweaver8、Fireworks和Flash的方法 3.熟悉启动和退出Dreamweaver8、Fireworks和Flash 4.熟悉Dreamweaver8的桌面环境 二．实验内容 　　1、启动Dreamweaver8 安装了Dreamweaver8之后，按“开始”菜单—“程序”项——”MACOMEDIA”项—”MACOMEDIA Dreamweaver8”项的顺序找到Dreamweaver8的启动项,单击该项就可以启动Dreamweaver8如果在桌面上已经建立了启动Dreamweaver8的快捷方式图标,有可以通过双击该快捷方式图标来启动Dreamweaver8. 图15.1.3 “打开”对话框 图15.1.4 打开文件 （3）选择“文件”→“另存为”命令，在弹出的“另存为”对话框中将当前文件以新的名称保存到原位置，或者以相同名称保存到不同的位置（见图15.1.5），最后单击“保存”按钮。 　（4）按“Ctrl+Enter”键，测试动画效果，如图15.1.1所示 。 以新的名称保存到原位置 以相同名称保存到不同的位置 图15.1.5 保存文件 2、以相同的操作方式启动fireworks和flash.  实验2 站点的建立与管理 一．实验目的 　　 1.熟悉规划站点结构 2.掌握建立本地站点 3.熟悉站点的基本操作 二、实验内容 　　利用Ｄreamweaver8建立站点 在Dreamweaver中创建站点的方法有两种——通过“站点定义向导”定义站点和直接定义站点，下面通过建立“dqgl”站点来说明这两种创建站点的方法。 通过“站点定义向导“创建站点 打开“站点定义向导“ 在Dreamweaver 8的编辑窗口或站点面板选择命令菜单“站点”→“新建站点”，弹出“站点定义”对话框，选择默认的“基本”选项卡。 输入站点名称和URL地址 在对话框中输入要建立的站点名称，这里输入“dgql”，如教材图2-4所示。如果是远程站点还要输入该站点的URL地址，本案中忽略。单击“下一步”按钮，则会打开下一个对话框。 选择服务器技术 如果建立的站点需要使用ASP、JSP、PHP等动态服务器技术，选中“是，我想使用服务器技术”单选项，在出现的选项中选择一种服务器技术。如本案例只使用静态网页技术，选中“否，我不想使用服务器技术”单选项，单击“下一步”按钮。 （4）选择文件编辑方式及定位站点文件夹 在教材图2-6所示的对话框中，对于2文件的编辑方式，推荐选择“编辑我的计算机上的本地副本，完成后再上传到服务器”选项。本地文件的存储文件夹可以直接输入，本案例输入“d：\dgql”，也可以通过单击输入文本框的文件夹按钮，在打开的“选择站点dgql的本地根文件夹”对话框中进行选择。 （5）选择与服务器连接方式 在教材图2-7所示的对话框中,用户可以选择如何与服务器连接。如果选择“本地/网络”或“FTP”方式，将会要求用户输入更多的服务器信息，如服务器上的文件夹位置等。本案例只在本地进行网页的编辑练习，所以选择“无”选项。 （6）完成站点定义 在完成了以上各项设置之后,站点定义向导打开的最后一个对话框如教材图形控制2-8所示。在该对话框中显示了用户设置的信息。如果对所进行的设置不满意，则单击“上一步”按钮，退到相应的步骤重新进行设置，如果对所进行的设置满意则单击“完成”按钮进行确认并关闭该对话框，站点创建完毕。新的Dreamweaver站点显示在“文件”面板。 2．直接定义站点 （1）打开直接定义站点方式 在教材图2-3所示的“站点定义”对话框中选择“高级”选项卡，该对话框变成教材图2-9所示的形式。在此对话框中用户可以分别对站点的各类信息进行定义。 （2）进行站点参数定义 从“分类“列表框中选择”本地信息“选项，在“站点名称”文本框中输入新建站点的名称“dgql”。在“本地文件夹”文本框中输入本地站点根目录的位置“d:\dgql”。勾选“启用缓存”单选区按钮。 （3）设置完毕，单击“确定“按钮关闭该对话框。 2. 3 站点的基本操作 在Dreamweave