[网页设计制作开放型实验指导书.doc

实验项目 《网页设计制作》实验指导书 一、实验内容 用Ｄreamweaver专业网页开发软件，设计制作静态网页。 二、实验目的 本实验通过实例讲解了利用Ｄreamweaver制作静态网页的方法，步骤详细，即使是初次接触Ｄreamweaver的学生也可以轻松完成操作。本实验最具特色的部分经过学习以后，学生能自行设计制作一个个人主页。 三、实验要求 1、了解网页设计常用的几种版式； 2、掌握表格的创建、结构调整与美化。 3、熟悉表格与单元格的主要属性及其设置。 4、掌握在表格和单元格中插入文字或图片。 5、掌握绘制及编辑布局表格和布局单元格； 6、掌握利用布局表格的嵌套来设计较复杂的版面； 7、掌握在布局表格中添加具体内容 ； 8、掌握设置布局表格和单元格属性 四、实验条件 计算机， Dreamweaver软件 五、实验内容 利用布局表格制作如图1所示的网页。 图1 知识点分解： 由上图可知，该网页的结构属于拐角型，先画出该网页的版式结构，如图2所示。 LOGO BANNER 导航菜单 导 航 网页内容 网页内容 版权信息 图2 由图2我们可以知道在进行该网页布局时，先要布最外面的表格，然后布最上端的表格，用来放置LOGO和BANNER，然后再布一个单元格放置导航菜单，接着下面布三个并排的表格，分别放置左边的导航，中间的网页内容，右边的网页内容，最下面再布一个单元格，放置版权信息。 实验步骤： 新建一个文档，打开“属性面板”，单击按钮，在弹出的页面属性对话框中将“背景图像”设为“bg-greenline.jpg”。 将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，如图3所示。 图3 3、单击布局工具栏中的按钮，进入布局模式。 4、首次执行以上操作之一后，会打开“从布局模式开始”对话框，在该对话框中给出在“布局模式”下创建表格的方法的提示。单击 按钮即可切换到布局模式。切换到“布局”模式后，在“文档”窗口的顶部会出现标有“布局模式”的蓝色长条。 5、在“插入”栏的“布局”选项卡中单击“绘制布局表格”按钮 。 6、将鼠标光标放置在页面上，此时鼠标光标变为加号（+）。 7、将鼠标移到要创建表格的左上角位置并按住鼠标不放拖动到要创建表格的右下角后释放鼠标。 8、选中该表格，打开属性面板，将表格的宽度设为“783px”，高度设为“845px”。 9、在“插入”栏的“布局”选项卡中单击“绘制布局表格”按钮 。将鼠标光标放置在刚才绘制的表格的左上角，拖动鼠标，绘制一个嵌套表格，规格为：宽度“783px”，高度“101px”。 10、选中该表格，切换到“标准”模式，将背景图像改为“log1-text.jpg”。 11、再切换到“布局”模式，在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮。选中该单元格，打开属性面板，将单元格的宽度设为“111px”，高度设为“101px”，水平对齐方式设为“左对齐”，垂直对齐方式设为“顶端”。 12、将图像“niux-home.gif”插入到该单元格，打开属性面板将其宽设为“35”，高设为“30”，对齐设为“绝对居中”，在紧接着该图像的旁边写上文字“加入收藏”，同时将该文字设为：字体“宋体”，大小“12px”。 13、将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“换行符”按钮，光标自动定位到下一行。 14、将“插入”栏中的“文本”选项卡改为“布局”选项卡，进入“布局”模式，重复步骤11、12两次。 15、在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮。选中该单元格，打开属性面板，将单元格的宽设为“783px”，高设为“29px”，水平对齐设为“居中对齐”，垂直设为“居中”，背景颜色设为“#FF9900”。 16、将光标定位到该单元格，输入文字“首页”，然后将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“不换行空格”按钮两次，出现了两个空格，紧接着输入“|”（该符号用键盘上的“shift+\”输入），再单击“不换行空格”按钮两次，紧接着输入“国内旅游”，后面文字按相同方法输入，选中导航栏的所有文字，将其设为：字体“宋体”，大小“14px”，颜色“#000099”。 17、紧接导航栏的布局单元格，在它下方绘制一个宽为“181px”，高为“665px”，颜色为“#dde56c”的布局表格，用来放左边导航内容。 18、在该布局表格内绘制一个宽“181px”，高“73px”的布局单元格，然后将“ygdd