网页制作实验.docx
《网页制作实验.docx》由会员分享，可在线阅读，更多相关《网页制作实验.docx（20页珍藏版）》请在冰点文库上搜索。
网页制作实验
《网页设计基础》实验指导书
实验项目一：
Html语言基础（12学时）
一、实验类型
验证性实验
二、实验目的和任务
了解Web站点的各种结构特点，掌握网站的设计步骤。
三、实验仪器与设备
使用计算机、Dreamweaver软件。
四、实验内容
1、仿照实例设计一个网站作品
2、制作层结构网站
3、制作框架结构网站
五、实验步骤
1.仿照实例设计一个网站作品
使用Dreamweaver软件进行操作，熟悉网页设计软件的界面窗口和基本制作流程，重点掌握网页设计的流程。
（1）设置站点和项目文件
a.在硬盘上创建名为local_sites的新文件夹。
b.在硬盘上的Dreamweaver应用程序文件夹中找到cafe_townsend文件夹。
c.将cafe_townsend文件夹复制到local_sites文件夹中。
（2）定义本地文件夹
a.启动Dreamweaver，选择“站点”>“管理站点”。
b.单击“新建”按钮，然后选择“站点”。
c.如果显示向导（“基本”选项卡），请单击“高级”选项卡，然后从“分类”列表中选择“本地信息”.
d.在“站点名称”文本框中，输入CafeTownsend作为站点名称。
e.在“本地根文件夹”文本框中，指定在上一节中复制到local_sites文件夹中的cafe_townsend文件夹。
f.在“默认图像文件夹”文本框中，指定cafe_townsend文件夹中已有的images文件夹,单击“确定”。
g.单击“完成”关闭“管理站点”对话框。
（3）创建基于表格的页面布局
a.查看设计草样。
图形设计人员已经提供了Web页面设计草样，其中包括一些内容区域和图形方案。
在后面的部分，将使用Dreamweaver制作此设计页面。
b.选择“文件”>“新建”，在“新建文档”对话框的“常规”选项卡上，从“类别”列表中选择“基本页”，从“基本页”列表中选择“HTML”，然后单击“创建”。
保存新页面为index.html。
c.在新文档顶部的“文档标题”文本框中，键入CafeTownsend。
d.在页面上单击一次，在页面左上角放置插入点。
选择“插入”>“表格”。
在“插入表格”对话框中，执行下面的操作：
●在“行数”文本框中，输入3。
●在“列数”文本框中，输入1。
●在“表格宽度”文本框中，输入700。
●在“表格宽度”弹出式菜单中，选择“像素”。
●在“边框粗细”文本框中，输入0。
●在“单元格边距”文本框中，输入0。
●在“单元格间距”文本框中，输入0。
e.单击“确定”。
一个三行一列的表格即出现在文档中。
该表格的宽度为700像素，边框、单元格边距和单元格间距均为0。
f.单击一次该表格右侧取消对它的选择。
g.选择“插入”>“表格”以插入另一个表格。
在“插入表格”对话框中，对第二个表格执行下面的操作：
●在“行数”文本框中，输入1。
●在“列数”文本框中，输入3。
●在“表格宽度”文本框中，输入700。
●在“表格宽度”弹出式菜单中，选择“像素”。
●在“边框粗细”文本框中，输入0。
●在“单元格边距”文本框中，输入0。
●在“单元格间距”文本框中，输入0。
h.单击“确定”。
第二个表格（该表格具有一行三列）即出现在第一个表格下方。
i.单击该表格右侧取消对它的选择。
j.通过选择“插入”>“表格”，然后在“插入表格”对话框中输入以下值来插入第三个表格：
●在“行数”文本框中，输入1。
●在“列数”文本框中，输入1。
●在“表格宽度”文本框中，输入700。
●在“表格宽度”弹出式菜单中，选择“像素”。
●在“边框粗细”文本框中，输入0。
●在“单元格边距”文本框中，输入0。
●在“单元格间距”文本框中，输入0。
k.单击“确定”。
第三个表格（该表格具有一行一列）即出现在第二个表格下方。
l.选择“查看”>“表格模式”>“扩展表格模式”。
m.在第一个表格的第一行内单击一次，在“属性”检查器（“窗口”>“属性”）的“单元格高度”文本框中输入90，然后按Enter键。
n.用同样的方法将第一个表格的第二行的“单元格高度”设为166，第三行的“单元格高度”设为24。
o.在第二个表格的第一列内单击一次，在“属性”检查器的“单元格宽度”文本框中输入140，然后按Enter键。
p.用同样的方法将第二个表格的第二列的“单元格宽度”设为230，第三列的“单元格宽度”设为330。
q.最后，在最后一个表格（该表格包含一行和一列）内单击一次，在“属性”检查器的“单元格高度”文本框中输入24，然后按Enter键。
r.单击“文档”窗口顶部的“退出扩展表格模式”链接，返回到“标准”模式，保存页面。
s.在文档窗口中，在第一个表格的第一行内单击一次，选择“插入”>“图像对象”>“图像占位符”，在“图像占位符”对话框中，执行下面的操作：
●在“名称”文本框中，键入banner_graphic。
●在“宽度”文本框中，输入700。
●在“高度”文本框中，输入90。
●单击颜色框并从颜色选择器中选择红棕色（#993300）。
●保留“替换文本”文本框为空。
t.单击“确定”，保存页面。
（4）向页面添加内容
a.在第二个表格的第一个单元格内单击一次，单击标签选择器中的
标签（单元格标签）以选择该单元格。 在“属性”检查器（“窗口”>“属性”）中，在“背景颜色”文本框内输入十六进制值#993300，然后按Enter键。 同样，将第二个单元格的颜色设置为十六进制值#F7EEDF，将第三个表格单元格的颜色更改为浅棕色。 b.选择“修改”>“页面属性”，在“页面属性”对话框的“外观”类别中，单击“背景颜色”颜色框，然后从颜色选择器中选择黑色（#000000）。 单击“确定”并保存页面。 c.双击页面顶部的图像占位符banner_graphic，在“选择图像源文件”对话框中，浏览至您定义为站点根文件夹的cafe_townsend文件夹中的images文件夹，选择banner_graphic.jpg文件并单击“确定”。 d.在第一个表格的第三行（低于刚插入的横幅图形两行，彩色表格单元格之上）内单击一次，选择“插入”>“图像”，在“选择图像源文件”对话框中，浏览至cafe_townsend文件夹中的images文件夹，选择body_main_header.gif文件，然后单击“确定”。 e.在页面上最后一个表格的最后一行（彩色表格单元格之下）中单击一次，在“文件”面板（“窗口”>“文件”）中，找到body_main_footer.gif文件（它位于images文件夹中），将该文件拖到最后一个表格的插入点。 f.在由三列组成的表格（第一个浅棕色表格单元格）的中间一列内单击一次，在“属性”检查器（“窗口”>“属性”）中，从“水平”弹出式菜单中选择“居中对齐”，然后从“垂直”弹出式菜单中选择“顶端”。 该操作将表格单元格的内容对齐到单元格的中间，并使单元格的内容从单元格顶端开始。 g.按一次Enter键，单击“文件”面板中的“资源”选项卡，或选择“窗口”>“资源”，在“资源”面板中，选择street_sign.jpg文件，将street_sign.jpg文件拖到中心位置的表格单元格中的插入点，单击“资源”面板底部的“插入”。 h.在第一个表格的第二行内单击一次，在“属性”检查器（“窗口”>“属性”）中，从“水平”弹出式菜单中选择“居中”，然后从“垂直”弹出式菜单中选择“居中”。 选择“插入”>“媒体”>“Flash”，在“选择文件”对话框中，浏览至站点的cafe_townsend根文件夹中的flash_fma.swf文件，选择该文件，然后单击“确定”。 在“属性”检查器（“窗口”>“属性”）中单击“播放”可以开始Flash文件播放，单击“停止”可以结束Flash文件播放。 i.在由三列组成的表格的中间一列中放置的图形之上单击一次，选择“插入”>“媒体”>“Flash视频”，在“插入Flash视频”对话框中，从“视频类型”弹出式菜单中选择“渐进式下载视频”。 在URL文本框中，单击“浏览”，浏览至cafe_townsend_home.flv文件（位于站点的cafe_townsend根文件夹中），并选择该FLV文件。 从“外观”弹出式菜单中选择HaloSkin2，在“宽度”文本框中键入180，在“高度”文本框中键入135，然后按Enter键。 单击“确定”关闭对话框并将Flash视频内容添加到Web页面。 j.在“文件”面板中，找到sample_text.txt文件（在cafe_townsend根文件夹中）并双击该文件的图标，在Dreamweaver中打开它，选择所有文本，然后选择“编辑”>“复制”以复制该文本。 单击文档右上角中的X关闭sample_text.txt文件。 k.在由三列组成的表格的第三个表格单元格（包含图形和Flash视频的列的右侧的单元格）内单击一次，选择“编辑”>“粘贴”。 在“属性”检查器（“窗口”>“属性”）中，从“垂直”弹出式菜单中选择“顶端”。 这会将刚刚粘贴的文本沿表格单元格的顶端对齐。 l.在由三列组成的表格的第一列（红棕色的列）中单击一次，键入单词Cuisine，按空格键并键入ChefIpsum，接着键入单词Articles、SpecialEvents、Location、Menu、ContactUs，在每个单词之间留一个空格。 m.在插入点仍旧处于由三列组成的表格的第一个单元格中时，在标签选择器中单击 | 标签，在“属性”检查器（“窗口”>“属性”）中，从“垂直”弹出式菜单中选择“顶端”，将刚刚键入的文本沿表格单元格的顶端对齐。 n.选择在由三列组成的表格的第一个单元格中键入的单词Cuisine，请小心只选择单词Cuisine，不要选中它后面的空格。 在属性检查器中（“窗口”>“属性”），单击“链接”文本框旁的文件夹图标，在“选择文件”对话框中，浏览至menu.html文件（与index.html文件处于同一个文件夹中），并单击“确定”。 o.重复上一步，为作为导航而键入的每个单词或一组单词建立链接。 还需要创建6个链接： 为ChefIpsum、Articles、SpecialEvents、Location、Menu和ContactUs分别创建一个链接。 p.按F12键，主浏览器启动（如果尚未运行）并显示索引页面。 2.制作框架结构网站 框架的最常见用途就是导航。 一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。 采用框架结构制作一个网站，合理布局导航区和目录区，在窗口间正确链接各网页。 （1）创建框架集 a.选择“文件”>“新建”，在“新建文档”对话框中，选择“框架集”类别。 从“框架集”列表选择“上方固定，左侧嵌套”框架集，单击“创建”。 b.如果出现“框架标签辅助功能属性”对话框，请为每个框架完成此对话框，然后单击“确定”。 c.选择“窗口”>“框架”，在“框架”面板中单击框架最外边的边框选择框架集。 将框架边框从“设计”视图的底边拖入“设计”视图的中下位置，增加一个横向框架。 d.编辑完成后如下图所示，有四个框架。 e.在“框架”面板（“窗口”>“框架”）中单击框架集的最外边边框，在“属性”检查器（“窗口”>“属性”）中，单击第一行，将“行”中的数值更改为90，单位选择“像素”；单击第三行，将“行”中的数值更改为24，单位选择“像素”。 在“文档”工具栏的“标题”字段中，键入框架集文档的名称： CafeTownsend。 f.在“框架”面板中单击单击topFrame框架和mainFrame框架的分隔线，在“属性”检查器（“窗口”>“属性”）中，单击第一列，将“列”中的数值更改为140，单位选择“像素”。 g.在“框架”面板中单击第三行的框架，在“属性”检查器（“窗口”>“属性”）中的“框架名称”中输入“bottomFrame”。 h.选择“文件”>“保存全部”，在“设计”视图中框架集的周围将出现粗边框，在出现的对话框中输入index文件名。 对随后出现的topFrame框架，输入top文件名，leftFrame框架，输入left文件名,mainFrame框架，输入main文件名,rightFrame框架，输入right文件名,bottomFrame框架，输入bottom文件名。 本次将保存一个框架集文件，四个框架文件。 （2）向框架中添加内容 a.在“框架”面板中单击topFrame框架，在“设计”视图中插入一个三行一列的表格，用于布置页面的页头部分，在该表格中插入相关的内容。 b.在“框架”面板中单击leftFrame框架，在其中插入一个一行一列的表格，用于布置页面的索引部分，在该表格中插入相关的内容。 c.在“框架”面板中单击mainFrame框架，在其中插入一个一行两列的表格，用于布置页面的内容部分，在该表格中插入相关的内容。 d.在“框架”面板中单击bottomFrame框架，在其中插入一个一行一列的表格，用于布置页面的页尾部分，在该表格中插入相关的内容。 e.选择“文件”>“保存全部”，保存文件。 （3）设置链接目标 a.在“设计”视图中，选择leftFrame框架中的一个用作链接的对象，在属性检查器的“目标”弹出式菜单中，选择“mainFrame”作为链接的文档应在其中显示的框架。 b.选择“修改”>“框架集”>“编辑无框架内容”，在“文档”窗口中，像处理普通文档一样键入或插入内容，用于在不支持框架的基于文本的浏览器和较旧的图形浏览器中显示内容。 c.再次选择“修改”>“框架集”>“编辑无框架内容”以返回到框架集文档的普通视图。 d.选择“文件”>“保存全部”，保存文件。 六、注意事项 本任务应上机反复练习，直到熟练掌握Dreamweaver的基本操作，并对表格、层和框架有足够的认识为止。 七、实验报告或上机要求 不撰写实验报告，根据实验内容上机验证。 《网页程序设计》实验指导书 实验项目二： CSS层叠样式表设计及JavaScript入门（12学时） 一、实验类型 验证性实验 二、实验目的和任务 通过本实验课程的学习和实践，使学生了解CSS层叠样式表语言，掌握静态网页制作的全过程。 按照多模块有机结合、循序渐进的方式开展实验，有效的培养和提高学生网站设计的基本编程能力和网页布局、美化等能力。 三、实验仪器与设备 使用计算机、Dreamweaver软件。 四、实验内容 1、制作一个JavaScript程序 2、制作网页对话程序 3、实时显示系统日期程序设计 五、实验步骤 1.使用CSS设置页面格式 （1）完成实验一的“仿照实例设计一个网站作品”。 （2）使用CSS设置页面格式” a.选择“文件”>“新建”，在“基本页”列中选择“CSS”，然后单击“创建”，将该页保存（“文件”>“保存”）为cafe_townsend.css。 b.在样式表中键入以下代码： p{ font-family: Verdana,sans-serif; font-size: 11px; color: #000000; line-height: 18px; padding: 3px; } c.保存样式表。 d.单击index.html选项卡，选择在页面中的第一段文本，在“属性”检查器中查看，并确保使用段落标签设置了该段落的格式。 同样，在第二段文本上使用段落标签。 e.在“CSS样式”面板（“窗口”>“CSS样式”）中，单击位于面板右下角的“附加样式表”按钮。 在“附加外部样式表”对话框中，单击“浏览”并浏览到上一节创建的cafe_townsend.css文件，单击“确定”。 f.在“CSS样式”面板中，单击面板右下角的“新建CSS规则”，从“选择器类型”选项中选择“类”，在“名称”文本框中输入.bold，在“定义在”弹出式菜单中，选择cafe_townsend.css，单击“确定”。 在“CSS规则定义”对话框中，执行下面的操作： ●在“字体”文本框中，输入Verdana,sans-serif。 ●在“大小”文本框中，输入11，并在紧靠其右的弹出式菜单中选择像素。 ●在“行高”文本框中，输入18，并在紧靠其右的弹出式菜单中选择像素。 ●从“粗细”弹出式菜单中选择“粗体”。 ●在“颜色”文本框中，输入#990000。 g.单击“确定”，单击“CSS样式”面板顶部的“所有”按钮。 h.在“文档”窗口中，选择第一段中文本的前四个单词： CafeTownsend’svisionarychef，在“属性”检查器（“窗口”>“属性”）中，从“样式”弹出式菜单中选择“bold”。 同样，将“bold”类样式应用到第二段的前四个单词。 i.在cafe_townsend.css选项卡单击，在.bold类样式后面定义一个新规则，键入以下代码： .navigation{ } j.保存cafe_townsend.css文件。 k.在index.html选项卡单击，在“CSS样式”面板中，确保选中了“全部”模式，选择新的.navigation规则，然后单击面板右下角的“编辑样式”。 在“CSS规则定义”对话框中，执行下面的操作： ●在“字体”文本框中，输入Verdana,sans-serif。 ●从“大小”弹出式菜单中选择16，然后从紧靠其右的弹出式菜单中选择像素。 ●从“样式”弹出式菜单中选择“正常”。 ●从“修饰”列表中选择“无”。 ●从“粗细”弹出式菜单中选择“粗体”。 ●在“颜色”文本框中，输入#FFFFFF。 l.单击“确定”。 m.在“CSS样式”面板中，确保选中了.navigation规则，然后单击“显示列表视图”。 单击background-color属性右边的列，输入十六进制值#993300，按Enter键。 在display属性右边的列中单击一次，从弹出式菜单中选择block。 在padding属性右边的列中单击一次，输入值8px，按Enter键。 在width属性右边的列中单击一次，在第一个文本框中输入140，从弹出式菜单中选择像素，按Enter键。 n.保存并关闭cafe_townsend.css文件。 o.打开index.html页，单击单词Cuisine将插入点置于该单词中的某个位置，在标签选择器中，单击最右边的标签，在“属性”检查器（“窗口”>“属性”）中，从“样式”弹出式菜单中选择“navigation”。 对于导航条中的每个链接，重复同样的操作。 p.保存该页面，然后按F12在浏览器中预览该页面。 2.制作层结构网站 用层替换上面例子中的表格，制作一个布局基本相同的页面。 （1）创建新文档 a.在Dreamweaver中，新建一个html文件命名为index_css.html。 b.在新文档顶部的“文档标题”文本框中，键入CafeTownsend。 （2）创建层 a.从“插入”栏中选择“布局”模式，单击“绘制层”，将任意大小的层拖动到页面上，然后释放鼠标按钮。 单击该层左上角的选择柄，确保选中它。 在“属性”检查器（“窗口”>“属性”）中执行以下操作： ●单击“层编号”文本框，然后将该层重命名为banner_graphic。 ●在“宽（W）”文本框中，输入700px。 ●在“高（H）”文本框中，输入90px。 ●在“左（L）”文本框中，输入20px。 ●在“上（T）”文本框中，输入20px。 ●按Enter键。 b.用同样的方法，添加新层。 选中新层后，在“属性”检查器中执行以下操作： ●单击“层编号”文本框，然后将该层重命名为flash_fma。 ●在“宽（W）”文本框中，输入700px。 ●在“高（H）”文本框中，输入166px。 ●在“左（L）”文本框中，输入20px。 ●在“上（T）”文本框中，输入111px。 ●按Enter键 c.选择“查看”>“可视化助理”>“CSS布局背景”。 d.在flash_fma层下面新添三个层，使用“属性”检查器执行以下操作： ●选择第一个层，将它命名为header，并将它的大小设置为宽700像素，高24像素，按Enter键。 ●选择第二个层，将它命名为center_content，然后将它的大小设置为宽700像素，高350像素，按Enter键。 ●选择第三个层，将其命名为footer，并将它的大小设置为宽700像素，高24像素，按Enter键。 e.选择header层，并拖动选择柄，直到header层直接定位到flash_fma层之下。 f.选择并拖动center_content层和footer层，直到center_content层定位到header层之下、footer层定位到center_content之下。 g.当各层就位后，通过选择“查看”>“可视化助手”并取消选择“CSS布局背景”来禁用“CSS布局背景”。 h.在层的右侧单击一下，确保取消选择所有内容。 i.在“插入”栏的“布局”类别中，单击“绘制层”并将另一个层拖动到center_content层的内部单击新层的选择柄，确保选中该层。 在“属性”检查器中执行以下操作： ●单击“层编号”文本框，然后将该层重命名为navigation。 ●在“宽（W）”文本框中，输入140px。 ●在“高（H）”文本框中，输入350px。 ●在“左（L）”文本框中，输入20px。 ●按Enter键。 j.使用键盘上的向上箭头键移动该navigation层，直到它恰好适合center_content层。 k.在center_content层中创建另一个层，选中新层后，在“属性”检查器中执行以下操作： ●单击“层编号”文本框，然后将该层重命名为flash_video。 ●在“宽（W）”文本框中，输入230px。 ●在“高（H）”文本框中，输入350px。 ●按Enter键。 l.拖动flash_video层或使用键盘上的方向键定位该层。 m.在center_content层中再创建一个层，选中新层后，在“属性”检查器中执行以下操作： ●单击“层编号”文本框，然后将该层重命名为text。 ●在“宽（W）”文本框中，输入330px。 ●在“高（H）”文本框中，输入350px。 ●按Enter键。 n.拖动text层或使用键盘上的方向键
展开阅读全文
相关搜索
资源标签
|