搜索
实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览。3、熟悉HTML基本标记的使用。实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。实验重点及难点熟悉HTML的结构、语法。熟悉HTML基本标记的使用。实验内容1、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页。4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”，内容为司空曙的《江村即事》，如下图所示。5、通过附录1的练习熟悉HTML基本标记的使用。（可参考第二章内容）实验二Dreamweaver基本操作（一）实验目的1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理；2、熟悉网页文件的基本操作；3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点文字的插入及设置。图像的插入及设置。各种超链接的创建。实验内容1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为sy2-2.html，效果如图所示。标题文字大小用h1/h1标记；作者信息文字大小为24像素，字体为幼圆，颜色为红色；古诗文字大小为24像素，字体为隶书，颜色为蓝色；在作者信息后加一条水平线，居中，水平线宽度为浏览器的30%，水平线的粗细为20个像素，颜色为棕色；4、在站点“Dreamweaver基本操作”中对网页sy2-2.html按如下要求进行编辑并另存为sy2-3.html，效果如图所示。插入背景图片：Welcome-Popup-Background.gif在古诗左下方插入作者的照片：司空曙.jpg5、在站点“Dreamweaver基本操作”中从提供的网页原始素材中把相关文字复制到网页文件sy2-3.html中按要求进行编辑并另存为sy2-4.html，效果如图所示。改“目录”下的列表符号类型为方框。给“【注释】”下的条目加数字编号以标题为热点创建空超链接以图片为热点创建空超链接以“大历十才子”为热点创建空超链接6、在站点“Dreamweaver基本操作”中新建一个名为sy3-1.html的网页文件，以作实验三制作留言簿备用。7、在站点“Dreamweaver基本操作”中对网页sy2-4.html按要求进行编辑并另存为sy2-5.html，如下图所示。以标题和图片为热点的超链接均指向（使用绝对路径，在当前窗口中打开）。为“目录”下的各条目创建书签，书签名为相应条目的拼音首字母。在文档最后增加一行“如有诉求，请留言或邮件联系！谢谢！”的文字。以“留言”为热点创建指向sy3-1.html的超链接。（使用相对路径，在新窗口中打开）。以“邮件联系”为热点创建指向ggyx@yahoo.com.cn的超链接。实验三Dreamweaver基本操作（二）实验目的1、熟练掌握在网页文件中多媒体对象的添加和设置。2、熟练掌握在网页文件中表格的添加和设置。3、熟练掌握在网页文件中表单的添加和设置。实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点多媒体对象的添加和设置。表单及表单对象的添加及设置。利用表格来归整表单。实验内容1、为站点“Dreamweaver基本操作”中的网页文件sy2-5.html添加背景音乐：江村即事.mp3，要求循环播放，结果另存为sy3-2.html。2、在站点“Dreamweaver基本操作”中新建一个名为sy3-3.html的网页文件，在该网页文件中建立一个如图所示的表格，并在表格下方添加文字“让我们回到快乐的童年时光吧！”并嵌入音频文件“捉泥鳅”和插入Flash动画“拔萝卜”。3、打开站点“Dreamweaver基本操作”中的网页文件sy3-1.html，制作一个留言簿表单，效果如下图所示。4、在站点“Dreamweaver基本操作”中新建一个名为sy3-4.html的网页文件，在该网页文件中用表格来布局sy3-1.html网页文件中的留言簿，效果如下图所示。实验四CSS样式表实验目的1、了解CSS的基本知识；2、熟悉“CSS样式”面板；3、掌握样式表的创建和应用。实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点选择器的使用。利用样式表对页面进行美化。样式应用的优先级实验内容1、创建本地站点“CSS样式表”，在该站点下有若干网页文件：人生最美是淡然.html和淡然.html。将网页文件淡然.html另存为sy4_1.html，将网页文件人生最美是淡然.html另存为sy4_2.html。2、对网页文件sy4_1.html的标题“淡然”做如下设置：字体为“华文行楷”，大小为50像素，颜色为#666666，并对该标题采用Glow滤镜进行特效处理：光晕颜色为蓝色，方向为45度。3、在网页文件sy4_1.html中建立内部样式.ziti：字体为“仿宋_GB2312”，大小为24像素，颜色设置为#666699，粗体。将该样式应用于sy4_1.html中表格上方的正文内容（不包括表格本身）。4、在网页文件sy4_1.html中建立内部样式.bg：字体为“隶书”，大小为24像素，颜色设置为#993366，粗体，背景颜色为#CCCCCC，表格的上边框是颜色为#003399的双线，表格的下边框是颜色为#669999的实线，表格的左边框是颜色为#FF6666的虚线，表格的右边框是颜色为#999999的点划线，表格所有框线的宽度均为8像素。将该样式应用于sy4_1.html中的表格部分。5、在网页文件sy4_1.html中更改超链接的样式，其中a:link定义为：字体：幼圆，颜色：#669999，修饰：无（无下划线）；a:visited，字体：华文行楷，颜色：#660033，修饰：无；a:hover：字体：幼圆，颜色：#FF0000，修饰：下划线；a:active：字体：华文新魏，样式：倾斜，颜色：#0000CC，修饰：删除线。6、建立外部样式表wenzi.css：字体为“楷体_GB2312”，大小为18像素，颜色设置为#996600，粗体。将该样式应用于sy4_1.html中表格下方的正文内容（不包括表格本身）。7、在网页文件sy4_1.html中为“淡然的释义”部分加上方块列表符号，并给这部分内容设置为字体颜色为#993333，背景颜色为#999999。8、使用内嵌样式使得第二段文字“淡然，常用义为淡泊……失意坦然”。”实现首行缩进两个字符。9、将外部样式表wenzi.css应用于网页文件sy4_2.html的正文部分。对标题“人生最美是淡然”做如下设置：字体为“华文行楷”，大小为50像素，颜色为#CC3366，并对该标题采用Shadow滤镜进行特效处理：光晕颜色为蓝色，方向为45度。实验五Dreamweaver网页布局（一）实验目的1、熟悉布局表格的绘制和设置，掌握利用布局表格来规划网页的技能；2、熟悉框架集和框架的创建和编辑，掌握用框架来设计网页的技能；实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点利用布局表格来规划网页的设计。利用框架来来设计网页。利用表格、框架这两种布局工具来共同布局网页。实验内容1、建立一个名为“布局表格与框架”的本地站点并在该站点中新建一个名为sy5-1.html的网页文件，利用布局表格来布局表单。效果如图所示。2、在本地站点“布局表格与框架”中新建一个名为sy5-2.html的网页文件，利用布局表格来和表格配搭使用来布局网页。效果如图所示。3、利用框架集和框架来规划在本地站点“布局表格与框架”建立的首页文件index.html，为目录内容“主讲课程”、“请您留言”建立超链接，分别链接到网页文件sy5-2.html、sy5-1.html,此外为目录内容“和我联系”建立电子邮件链接。实验六Dreamweaver网页布局（二）实验目的1、CSS的页面分割技术、盒子模式和定位技术；2、熟悉层（APDiv）的基本操作并能利用层来定位页面元素；3、掌握模板的创建、编辑和应用。实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点CSS盒模式和定位技术灵活利用层来实现网页元素的精确定位。利用模板生成多个风格一致的网页。实验内容1、在本地站点“基于CSS的网页布局设计”中创建文件夹sy6。在sy6文件夹下创建两个文件：my.html和zzy.html。并将给定的多媒体文件放入相应的文件夹中。2、结合所学的CSS布局知识和APDiv（层）的知识，利用Dreamweaver对my.html进行设计编辑，效果如下图所示。3、编辑网页文件“zzy.html”，效果如下图所示。4、根据网页文件“拙政园.html”生成模板文件“my.dwt”。文件存放于sy6文件夹下。5、根据模板文件“my.dwt”创建网页文档“yhy.html”、“bssz.html”和“ly.html”，本地站点的网页文件my.html中的目录内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文件“zzy.html”、“yhy.html”、“bssz.html”和“ly.html”。实验七行为和时间轴实验目的1、了解行为、事件和动作的含义以及认识行为面板，掌握行为的编辑方法以及具体应用。2、了解时间轴、帧和关键帧以及通道的含义，掌握利用时间轴制作动态效果的网页。实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点利用行为实现网页的交互效果。利用时间轴实现网页的动态效果。实验内容1、建一个名为“行为和时间轴”的本地站点，包含以下几个文件和文件夹：倡议书.html；图片文件夹（images），里面有若干图片文件。2、在站点“行为和时间轴”中新建一个网页“index.html”，效果如下图所示：当单击文字“行为”时，效果如下图所示：当单击文字“时间轴”时，效果如下图所示：3、在站点“行为和时间轴”中新建一个网页“交换图像.html”，在网页中实现交换图像和恢复交换图片的功能，即当鼠标指针位于图像“海豚.jpg”时，会自动变为“狗.jpg”；而当鼠标指针离开图像“狗.jpg”时，图像会自动变回“海豚.jpg”。效果如下图所示：4、当单击网页“交换图像.html”中的文字“请注意！”时，弹出一个浏览器窗口，显示一则倡议书。5、在站点“行为和时间轴”中新建一个网页“弹出信息.html”，可以实现一打开该页面就弹出一个信息窗口，信息窗口内容为“记得跟妈妈说声“谢谢”哦！”。效果如下图所示。6、当鼠标指针移向网页“弹出信息.html”中的生日蛋糕图片时，在状态栏显示“您许愿了吗？”。