《网页设计与制作基础》实验指导.doc

实验一 网页的认识 实验目的 掌握利用Internet进行信息游览、有哪些信誉好的足球投注网站，下载网页、图片、文字和文件； 利用记事本来编辑HTML文档并浏览； 熟悉HTML基本标记的使用。 实验环境 WindowsXP操作系统，内部组成局域网，外连Internet互联网等）下载网页制作时需要的小图片、动画及flash等网页制作素材。 收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。 通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页。 制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”，内容为司空曙江村即事实验二 Dreamweaver基本操作（一） 实验目的 熟悉Dreamweaver的工作环境并了解本地站点的建设和管理； 熟悉网页文件的基本操作； 熟练掌握在网页文件中文本、图像、超链接的添加和设置。 实验环境 WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网4像素，字体为幼圆，颜色为红色； 古诗文字大小为24像素，字体为隶书，颜色为蓝色； 在作者信息后加一条水平线，居中，水平线宽度为浏览器的30%，水平线的粗细为20个像素，颜色为棕色； 在站点“Dreamweaver基本操作”中对网页sy2-2.html按如下要求进行编辑并另存为sy2-3.html，效果如图所示。 插入背景图片：Welcome-Popup-Background.gif 在古诗左下方插入作者的照片：司空曙.jpg 在站点“Dreamweaver基本操作”中从提供的网页原始素材中把相关文字复制到网页文件sy2-3.html中按要求进行编辑并另存为sy2-4.html，效果如图所示。 改“目录”下的列表符号类型为方框。 给“【注释】/view/1121590.htm（使用绝对路径，在当前窗口中打开）。 为“目录”下的各条目创建书签，书签名为相应条目的拼音首字母。 在文档最后增加一行“如有诉求，请留言或邮件联系！谢谢！”的文字。 以“留言”为热点创建指向sy3-1.html的超链接。（使用相对路径，在新窗口中打开）。 以“邮件联系”为热点创建指向ggyx@的超链接。 实验三 Dreamweaver基本操作（二） 实验目的 熟练掌握在网页文件中多媒体对象的添加和设置； 熟练掌握在网页文件中表格的添加和设置； 熟练掌握在网页文件中表单的添加和设置。 实验环境 WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网实验四 CSS样式表 实验目的 了解CSS 的基本知识； 熟悉“CSS样式”面板； 掌握样式表的创建和应用。 实验环境 WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。 实验重点及难点 选择器的使用。 利用样式表对页面进行美化。 样式应用的优先级 实验内容 创建本地站点“CSS样式表”，在该站点下有若干网页文件：人生最美是淡然.html和淡然.html。将网页文件淡然.html另存为sy4_1.html，将网页文件人生最美是淡然.html另存为sy4_2.html。 对网页文件sy4_1.html的标题“淡然”做如下设置：字体为“华文行楷”，大小为50像素，颜色为#666666，并对该标题采用Glow滤镜进行特效处理：光晕颜色为蓝色，方向为45度。 在网页文件sy4_1.html中建立内部样式.ziti：字体为“仿宋_GB2312”，大小为24像素，颜色设置为#666699，粗体。将该样式应用于sy4_1.html中表格上方的正文内容（不包括表格本身）。 在网页文件sy4_1.html中建立内部样式.bg：字体为“隶书”，大小为24像素，颜色设置为#993366，粗体，背景颜色为#CCCCCC，表格的上边框是颜色为#003399的双线，表格的下边框是颜色为#669999的实线，表格的左边框是颜色为#FF6666的虚线，表格的右边框是颜色为#999999的点划线，表格所有框线的宽度均为8像素。将该样式应用于sy4_1.html中的表格部分。 在网页文件sy4_1.html中更改超链接的样式，其中a:link定义为：字体：幼圆，颜色：#669999，修饰：无（无下划线）；a:visited，字体：华文行楷，颜色：#660033，修饰：无；a:hover：字体：幼圆，颜色：#FF0000，修饰：下划线；a:active：字体：华文新魏，样式：倾斜，颜色：#0000CC，修饰：删除线。 建立外部样式表wenzi.css：字体为“楷体_GB2312”，大小为18像素，颜色设置为#996600，