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

《网页设计与制作基础实验指导书.doc》由会员分享，可在线阅读，更多相关《网页设计与制作基础实验指导书.doc（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实验一 网页认识实验目1、 掌握利用Internet进行信息游览、搜索，下载网页、图片、文字与文件；2、 利用记事本来编辑HTML文档并浏览。3、 熟悉HTML基本标记使用。实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。实验重点及难点u 熟悉HTML结构、语法。u 熟悉HTML基本标记使用。实验内容1、 从网上（如网页制作大宝库等）下载网页制作时需要小图片、动画及flash等网页制作素材。2、 收集你认为比较好网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。3、 通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页

2、。4、 制作一个简单网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档结构”，内容为司空曙江村即事，如下图所示。5、 通过附录1练习熟悉HTML基本标记使用。（可参考第二章内容）实验二 Dreamweaver基本操作（一）实验目1、 熟悉Dreamweaver工作环境并了解本地站点建设与管理；2、 熟悉网页文件基本操作；3、 熟练掌握在网页文件中文本、图像、超链接添加与设置。实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点u 文字插入及设置。u 图像插入及设置。u 各种超链接创建。实验内容1、 使用Dr

3、eamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几个文件与文件夹：图片文件夹（images）；音乐文件夹（sound）等。2、 在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html网页文件，从提供网页原始素材中把相关文字复制到该网页文件中，并进行适当文字设置，结果如下图所示。3、 在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为sy2-2.html，效果如图所示。l 标题文字大小用标记；l 作者信息文字大小为24像素，字体为幼圆，颜色为红色；l 古诗文字大小为24像素，字体为隶书，颜色为蓝

4、色；l 在作者信息后加一条水平线，居中，水平线宽度为浏览器30%，水平线粗细为20个像素，颜色为棕色；4、 在站点“Dreamweaver基本操作”中对网页sy2-2.html按如下要求进行编辑并另存为sy2-3.html，效果如图所示。l 插入背景图片：l 在古诗左下方插入作者照片：5、 在站点“Dreamweaver基本操作”中从提供网页原始素材中把相关文字复制到网页文件sy2-3.html中按要求进行编辑并另存为sy2-4.html，效果如图所示。l 改“目录”下列表符号类型为方框。l 给“【注释】”下条目加数字编号l 以标题为热点创建空超链接l 以图片为热点创建空超链接l 以“大历十才

5、子”为热点创建空超链接6、 在站点“Dreamweaver基本操作”中新建一个名为sy3-1.html网页文件，以作实验三制作留言簿备用。7、 在站点“Dreamweaver基本操作”中对网页sy2-4.html按要求进行编辑并另存为sy2-5.html，如下图所示。l 以标题与图片为热点超链接均指向（使用绝对路径，在当前窗口中打开）。l 为“目录”下各条目创建书签，书签名为相应条目拼音首字母。l 在文档最后增加一行“如有诉求，请留言或邮件联系！谢谢！”文字。l 以“留言”为热点创建指向sy3-1.html超链接。（使用相对路径，在新窗口中打开）。l 以“邮件联系”为热点创建指向。实验三 Dr

6、eamweaver基本操作（二）实验目1、 熟练掌握在网页文件中多媒体对象添加与设置。2、 熟练掌握在网页文件中表格添加与设置。3、 熟练掌握在网页文件中表单添加与设置。实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点u 多媒体对象添加与设置。u 表单及表单对象添加及设置。u 利用表格来归整表单。实验内容1、 为站点“Dreamweaver基本操作”中网页文件sy2-5.html添加背景音乐：，要求循环播放，结果另存为sy3-2.html。2、 在站点“Dreamweaver基本操作”中新建一个名为sy3-3.html网

7、页文件，在该网页文件中建立一个如图所示表格，并在表格下方添加文字“让我们回到快乐童年时光吧！”并嵌入音频文件“捉泥鳅”与插入Flash动画“拔萝卜”。3、 打开站点“Dreamweaver基本操作”中网页文件sy3-1.html，制作一个留言簿表单，效果如下图所示。4、 在站点“Dreamweaver基本操作”中新建一个名为sy3-4.html网页文件，在该网页文件中用表格来布局sy3-1.html网页文件中留言簿，效果如下图所示。实验四 CSS样式表实验目1、 了解CSS 基本知识；2、 熟悉“CSS样式”面板；3、 掌握样式表创建与应用。实验环境WindowsXP操作系统，Dreamwea

8、ver软件，内部组成局域网，外连Internet互联网。实验重点及难点u 选择器使用。u 利用样式表对页面进行美化。u 样式应用优先级实验内容1、 创建本地站点“CSS样式表”，在该站点下有若干网页文件：人生最美是淡然.html与淡然.html。将网页文件淡然.html另存为，将网页文件人生最美是淡然.html另存为。2、 对网页文件标题“淡然”做如下设置：字体为“华文行楷”，大小为50像素，颜色为#666666，并对该标题采用Glow滤镜进行特效处理：光晕颜色为蓝色，方向为45度。3、 在网页文件中建立内部样式.ziti：字体为“仿宋_GB2312”，大小为24像素，颜色设置为#666699

9、，粗体。将该样式应用于中表格上方正文内容（不包括表格本身）。4、 在网页文件中建立内部样式.bg：字体为“隶书”，大小为24像素，颜色设置为#993366，粗体，背景颜色为#CCCCCC，表格上边框是颜色为#003399双线，表格下边框是颜色为#669999实线，表格左边框是颜色为#FF6666虚线，表格右边框是颜色为#999999点划线，表格所有框线宽度均为8像素。将该样式应用于中表格部分。5、 在网页文件中更改超链接样式，其中a:link定义为：字体：幼圆，颜色：#669999，修饰：无（无下划线）；a:visited，字体：华文行楷，颜色：#660033，修饰：无；a:hover：字体：

10、幼圆，颜色：#FF0000，修饰：下划线；a:active：字体：华文新魏，样式：倾斜，颜色：#0000CC，修饰：删除线。6、 建立外部样式表：字体为“楷体_GB2312”，大小为18像素，颜色设置为#996600，粗体。将该样式应用于中表格下方正文内容（不包括表格本身）。7、 在网页文件中为“淡然释义”部分加上方块列表符号，并给这部分内容设置为字体颜色为#993333，背景颜色为#999999。8、 使用内嵌样式使得第二段文字“淡然，常用义为淡泊失意坦然”。”实现首行缩进两个字符。9、 将外部样式表应用于网页文件正文部分。对标题“人生最美是淡然”做如下设置：字体为“华文行楷”，大小为50像

11、素，颜色为#CC3366，并对该标题采用Shadow滤镜进行特效处理：光晕颜色为蓝色，方向为45度。实验五 Dreamweaver网页布局（一）实验目1、 熟悉布局表格绘制与设置，掌握利用布局表格来规划网页技能；2、 熟悉框架集与框架创建与编辑，掌握用框架来设计网页技能；实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点u 利用布局表格来规划网页设计。u 利用框架来来设计网页。u 利用表格、框架这两种布局工具来共同布局网页。实验内容1、 建立一个名为“布局表格及框架”本地站点并在该站点中新建一个名为sy5-1.html网页

12、文件，利用布局表格来布局表单。效果如图所示。2、 在本地站点 “布局表格及框架”中新建一个名为sy5-2.html网页文件，利用布局表格来与表格配搭使用来布局网页。效果如图所示。3、 利用框架集与框架来规划在本地站点 “布局表格及框架”建立首页文件index.html，为目录内容“主讲课程”、 “请您留言”建立超链接，分别链接到网页文件sy5-2.html、sy5-1.html,此外为目录内容“与我联系”建立电子邮件链接。实验六 Dreamweaver网页布局（二）实验目1、 CSS页面分割技术、盒子模式与定位技术；2、 熟悉层（AP Div）基本操作并能利用层来定位页面元素；3、 掌握模板创

13、建、编辑与应用。实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点u CSS盒模式与定位技术u 灵活利用层来实现网页元素精确定位。u 利用模板生成多个风格一致网页。实验内容1、 在本地站点“基于CSS网页布局设计”中创建文件夹sy6。在sy6文件夹下创建两个文件：my.html与zzy.html。并将给定多媒体文件放入相应文件夹中。2、 结合所学CSS布局知识与AP Div（层）知识，利用Dreamweaver对my.html进行设计编辑，效果如下图所示。3、 编辑网页文件“”，效果如下图所示。4、 根据网页文件“”生成模

14、板文件“”。文件存放于sy6文件夹下。5、 根据模板文件“”创建网页文档“”、“”与“”“拙政园”、“颐与园”、“避暑山庄”以及“留园”分别链接到网页文件“”、“”、“”与“”。实验七 行为与时间轴实验目1、 了解行为、事件与动作含义以及认识行为面板，掌握行为编辑方法以及具体应用。2、 了解时间轴、帧与关键帧以及通道含义，掌握利用时间轴制作动态效果网页。实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点u 利用行为实现网页交互效果。u 利用时间轴实现网页动态效果。实验内容1、 建一个名为“行为与时间轴”本地站点，包含以下几

15、个文件与文件夹：倡议书.html；图片文件夹（images），里面有若干图片文件。2、 在站点“行为与时间轴”中新建一个网页“”，效果如下图所示：l 当单击文字“行为”时，效果如下图所示：l 当单击文字“时间轴”时，效果如下图所示：3、 在站点“行为与时间轴”中新建一个网页“”，在网页中实现交换图像与恢复交换图片功能，即当鼠标指针位于图像“”时，会自动变为“”；而当鼠标指针离开图像“”时，图像会自动变回“”。效果如下图所示：4、 当单击网页“”中文字“请注意！”时，弹出一个浏览器窗口，显示一则倡议书。5、 在站点“行为与时间轴”中新建一个网页“”，可以实现一打开该页面就弹出一个信息窗口，信息窗

16、口内容为“记得跟妈妈说声“谢谢”哦！”。效果如下图所示。6、 当鼠标指针移向网页“”中生日蛋糕图片时，在状态栏显示“您许愿了吗？”。效果如下图所示。7、 在站点“行为与时间轴”中新建一个网页“”，可以实现一打开该页面，一只蝴蝶就从页面左上角按直线飞到右下角。8、 在站点“行为与时间轴”中新建一个网页“”，可以实现一打开该页面，一只蝴蝶就从页面左上角按曲线飞到右上角，期间进行了俯冲与仰冲动作。9、 在站点“行为与时间轴”中新建一个网页“”，可以实现一打开该页面，一条鱼儿在蓝色海洋里欢快地游来游去。效果如下图所示。10、 把站点“行为与时间轴”网页index.htm设为主页并在其中设置相应超链接，

17、如下图所示。实验八 综合实验实验目u 掌握本地站点创建与管理以及熟悉网页文件基本操作；u 善于运用各种网页布局设计方法；u 熟悉在网页中基本网页元素（如文字、图片、超链接、多媒体元素、表格与表单等）插入与相关设置；u 利用模板生成多个风格一致网页；u 通过行为实现网页交互效果。实验环境u WindowsXP操作系统u Dreamweaver软件实验内容u 设计一个小型校园跳蚤市场网站（教材第9章）。附录1 HTML标记使用实验目1、 掌握HTML文档结构及其制作规范。2、 掌握文本段落格式标记，包括注释标记，分段标记，换行/不换行标记，标题标记，分节标记，水平线标记，文本居中标记等；3、 掌握

18、文字显示效果标记，包括字体标记，字符样式标记以及转义字符等；4、 掌握列表格式标记，包括无序列表标记，有序列表标记等；5、 掌握超链接使用，包括锚点标记、页面跳转链接、书签超链接、下载文件链接以及电子邮件链接等；6、 掌握图片标记，包括插入图片标记，图片超链接标记网页背景标记；7、 掌握音频与视频标记，包括链接音频或视频文件、设置网页背景音乐标记，内嵌音频或视频播放插件等；8、 掌握动态元素标记。9、 掌握使用表格标记来创建与设置表格；10、 熟悉表单标记并掌握利用这些标记来创建表单以及其中各种表单域。实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。实验重点及难

19、点u 熟练掌握各种常用标记并利用其来实现网页排版。u 不规则表格创建。u 使用表格来布局表单。实验内容1、 创建目录sy2。l 本次实验中所有网页文件均放在目录sy2下；l 图片、音频文件分别放在sy2子目录media子目录images与music子目录下。2、 通过记事本编辑网页sy2-1.html，实现如下页面：3、 通过记事本对网页sy2-1.html按要求进行编辑并另存为sy2-2.html，效果如下图所示。l 标题文字大小用标记；l 作者信息文字大小为4，字体为幼圆，颜色为红色；l 古诗文字大小为4，字体为隶书，颜色为蓝色；l 在作者信息后加一条水平线，居中，水平线宽度为浏览器50%

20、，水平线粗细为20个像素，颜色为棕色；4、 通过记事本对网页sy2-2.html按要求进行编辑并另存为sy2-3.html，效果如图所示。l 插入背景图片：l 在古诗左下方插入作者照片：l 为网页添加背景音乐：，要求循环播放5、 通过记事本对网页sy2-3.html按要求进行编辑并另存为sy2-4.html，效果如图所示。l 改“目录”下列表符号类型为方框。l 给“【注释】”下条目加数字编号l 以标题为热点创建空超链接l 以图片为热点创建空超链接l 以“大历十才子”为热点创建空超链接6、 建立一个新网页文件并命名为liuyanbu.html，内容如下图所示。7、 通过记事本对网页sy2-4.html按要求进行编辑并另存为sy2-5.html，如下图所示。l 以标题与图片为热点超链接均指向（使用绝对路径，在当前窗口中打开）。l 为“目录”下各条目创建书签，书签名为相应条目拼音首字母。l 设置方向向左、方式为scroll、活动字幕滚动速度为3像素、内容为“如有诉求，请留言或邮件联系！谢谢！”滚动字幕。l 以“留言”为热点创建指向liuyanbu.html超链接。（使用相对路径，在新窗口中打开）。l 以“邮件联系”为热点创建指向。第 17 页