网页设计上机操作练习题

网页设计第一次上机操作练习题练习一：网页站点的创建与修改一、创建本地站点首先在硬盘的D盘上创建文件夹mywebsite，本书涉及的网站将创建在该文件夹中，如图2.6所示。新建站点可以通过“文件”面板来完成。(1)展开“文件”面板组，单击“文件”面板中的“管理站点”超链接，如图2.7所示。(2)此时将打开“管理站点”对话框，在其中单击“新建”按钮，并从下拉菜单中选择“站点”命令，如图2.8所示。在打开的对话框中包括两个选项卡：“基本”和“高级”，如图2.9所示。(3)这里我们保持默认的“基本”选项卡，并在文本框中输入新建站点的名称mywebsite。(4)单击“下一步”按钮，在打开的对话框中选择将要采用的服务器技术，如图2.10所示。(5)继续单击“下一步”按钮，在打开的对话框的顶部包括两个选项。这里选择第2项，如图2.11所示。(6)在该对话框中最重要的是选择存放站点文件的位置。这里在文本框中输入站点文件夹的路径。用户也可以单击文本框旁边的浏览按钮 ，在打开的“选择站点mywebsite的本地根文件夹”对话框中，找到将要存放站点文件的文件夹，如图2.12所示。 单击“选择”按钮后，就会将选中文件夹的路径加入到文本框中，如图2.13所示。(7)单击对话框中的“下一步”按钮进入结束对话框，其中列出了设置中的关键信息。如果确信没有问题，单击“完成”按钮关闭对话框，如图2.14所示。(8)此时将返回“管理站点”对话框，其中列出了刚刚创建好的站点名称mywebsite，如图2.15所示。(9)单击“管理站点”对话框中的“完成”按钮，结束站点的定义。此时“文件”面板将会显示出本地站点的名称和存储路径，如图2.16所示。二、修改站点信息打开站点定义对话框的具体操作步骤如下。 (1)选择菜单命令“站点”|“管理站点”，在打开的“管理站点”对话框中单击“编辑”按钮，此时将重新打开“mywebsite的站点定义为”对话框。 (2)单击其中的“高级”标签，切换到“高级”选项卡，如图2.17所示。默认情况下，“高级”选项卡显示的是“本地信息”的参数设置设定默认的图像文件夹路径为D:mywebsiteimages，设定HTTP地址为http:/localhost，如图2.18所示。三、多站点管理在“管理站点”对话框中单击“新建”按钮，就可以打开站点定义对话框创建一个新站点。这里单击“新建”按钮创建另外一个站点mywebsite2，如图2.19所示。如果要在“文件”面板中显示其他站点的名称，可以先在“管理站点”对话框中选中要显示的站点，然后单击“完成”按钮。另外，在“文件”面板顶部的下拉列表框中，选择要切换到的站点，也可以在站点之间进行切换，如图2.20所示。选中要编辑站点的名称，然后单击“编辑”按钮，就可以重新打开站点定义对话框，修改选中站点的属性。l 复制站点首先选中要复制的源站点的名称，然后单击对话框中的“复制”按钮，就可以产生一个新的站点，如图2.21所示。l 删除站点先选中要删除的站点名称，然后单击“管理站点”对话框中的“删除”按钮。四、创建站点目录结构创建目录结构可以在“文件”面板中的站点窗口进行。单击“文件”面板中的“展开以显示本地和远端站点”按钮，这样将打开站点管理器，如图2.22所示。l 创建一级目录 (1)在站点管理器的根目录上单击鼠标右键，在打开的快捷菜单中选择“新建文件夹”命令，如图2.23所示。 (2)此时将在站点管理器中创建一个空的文件夹，将其修改为images，以后将用它来存放站点中公用的图片文件，如图2.24所示。(3)使用同样的方法，在站点根目录中创建出另外一些文件夹，构成一级目录如图2.25所示。l 创建二级目录由于images文件夹中保存的是整个网站中都可以使用的图片文件，具体的目录名称和用途如表2.1所示。最终建好的子目录如图2.26所示。在站点管理器中的根目录上单击鼠标右键，然后选择菜单命令“文件”|“新建文件”，此时将在站点的根目录下生成文件名为untitled.htm的网页文件，如图2.27所示。修改文件名的具体操作步骤如下。(1)选中该文件，然后按下键盘上的F2快捷键，或者在右键菜单中选择“编辑”|“重命名”，此时文件名变为可修改状态，如图2.28所示。(2)修改文件的文件名为index.htm，注意文件名结尾的.htm不能省略，最后按下Enter键确认文件的名称。(3)如果有其他文件链接到该文件，就会打开“更新文件”对话框，如图2.29所示。(4)单击其中的“更新”按钮，系统将会自动更改与该文件相关的所有链接。l 移动文件将文件index.htm移动到errors目录下。 (1)可以在选中文件index.htm后，按住鼠标左键拖动文件到errors文件夹上，如图2.30所示。(2)松开鼠标后，如果文件index.htm没有在任何页面中被链接过，文件就会被直接移动到errors文件夹中。如果文件曾被链接，此时将打开“更新文件”对话框。 (3)单击“更新”按钮，Dreamweaver就会自动更新文件中的链接。如果选择“不更新”，就会出现断链。练习二：认识HTML在DreamweaverCS中使用HTML标记。标记类型名称或意义作用备注文件标记文件宣告让浏览器知道这是 HTML 文件开头提供文件整体信息标题定义文件标题，将显示于浏览器顶端主体设计文件格式及内容所在排版标记说明标记为文件加上说明，但不被显示段落标记为字、图、表格等之间留下一空白行换行标记令字、图、表格显示于下一行水平线插入一水平线居中令字、图、表格等显示于中间反对预设格式令文件按原代码的排列方式显示定位标记设定字、图、表格等的摆放位置不换行令文字不因太长而换行建议换行预设换行部位字体标记加重语气产生字体加粗 Bold 的效果粗体标记产生字体加粗的效果强调标记字体出现斜体效果斜体标记字体出现斜体效果等宽字体Courier字体，字母宽度相同加下划线加下划线反对一级标题标记将字体变大，级数越高越小二级标题标记 将字体变大三级标题标记 将字体变大四级标题标记 将字体变大五级标题标记 将字体变大六级标题标记 将字体变大字体标记设定字体、大小、颜色反对基准字体标记设定所有字体、大小、颜色反对字体加大令字体稍微变大字体缩小令字体稍微缩小加删除线为文字加删除线反对程式码字体稍微加宽如键盘字字体稍微加宽，单一空白范例字體稍為加寬如变量斜体效果斜体标记斜体效果向右缩排文字向右缩排述语定义斜体效果地址标记斜体效果下标字文字下标上标字 文字上标清单标记顺序清单清单项目将以数字、字母顺序排列无序清单清单项目将以实心圆点作为符号排列清单项目清单中的项目，一个标记一行选项清单可用type参数指定项目符号。反對目录清单与相同反對定义清单清单分两层出现定义条目清单项标题定义内容清单项内容表格标记表格标记设定该表格的各项参数表格标题做成一打通列以填入表格标题表格列设定该表格的列表格栏设定该表格的栏表格标头相等于，但其内文字字体会变粗表单标记表单标记决定该表单的运作模式文字框提供文字输入栏输入标记决定输入形式选择标记建立弹出卷动清单选项每一个清单选项图形标记图形标记用来插入图形及设定图形属性链接标记链接标记加入链接基准标记可将相对 URL 转绝对及指定链接框架标记框架设定设定框架窗口设定设定框架中的窗口页内框架于网页中插入框架IE不支持框架设定浏览器不支持框架时的提示影像地图影像地图名称设定影像地图名称链接区域设定各链接区域多媒体背景声音令背景播放音乐或声音IE多媒体加入声音、音乐或影像其他标记走马灯令文字走动IE闪烁文字令文字闪烁NC页内寻找器可输入关键字寻找该页反对开头说明提供关于此页的信息给浏览器关系定义定义该文件与其他 URL 的关系StyleSheet式样表控制网页版面自订标记独立使用或与样式表一起用注： 表示该标记属于围堵标记，即需要结束标记 。 表示该标记属空标记，即不需要结束标记。 IE 表示该标记只适应于 Internet Explorer。 NC