《网络广告设计》第八章 网页动态广告设计与制作.pptx

;;轮替式广告又称轮播广告，是网站首页中应用较多的广告形式之一。这种广告形式是在旗帜广告的基础上发展演变而来的。

下图是一个简单的轮替式广告效果图，仅提供了广告图片轮播的功能，优点是代码相对简单，而且提供了能对轮播时间进行自由修改的功能。下面进行实例操作。;（1）打开AdobeDreamweaver软件，确认站点已经设置完成（默认进入上次编辑的站点）。执行【文件】→【新建】命令，创建一个空白的HTML页面。

（2）执行【文件】→【另存为】命令，将文件命名为“ad_roll1.html”，将其保存在根目录下。此时【设计】视图中是一个空白页面，单击【代码】视图，可以看到如图所示的代码，这是HTML文件最基本的一段代码。;（3）左图是轮替式广告的JavaScript代码，将其复制并放到网页文件【代码】视图中的head和/head之间。注意，script/script这一对标记千万不能遗漏。;（4）单击软件界面左侧上方的【设计】按钮切换回【设计】视图，执行【插入】→【表格】命令，在弹出的【表格】对话框中设置【行数】为“1”，【列】为“1”，【表格宽度】“1?000像素”，【边框粗细】【单元格边距】【单元格间距】均为“0”（不可为空），单击【确定】按钮插入表格。

（5）在页面中单击选中这个表格，在【属性】控制面板中设置【对齐】为【居中对齐】。然后单击表格的第一行。

（6）将下面的这一段代码复制到网页文件【代码】视图中的body和/body之间（注意，是插在【代码】视图中光标所在位置的后面）。;（7）执行【文件】→【保存】命令进行保存。

（8）此时，文件虽然做好了，但还没贴入相应的广告图片。我们可以从本书配套资源的素材文件夹中找到并复制这4张图片，在“images”文件夹下建一个名为“pic”的子文件夹，然后把它们粘贴进去。

（9）执行【文件】→【在浏览器中预览】→【IExplore】命令，就可以在本地机器上预览页面效果了。注意，通常情况下网页底部会出现一个阻止运行脚本和ActiveX控件的对话条，选择【允许阻止的内容】选项，否则就看不到该效果。;;焦点图像广告与轮替式广告相同，也??对广告图像进行轮播。本例中的焦点图像广告运用了经典的商业广告代码，比上例中的轮替式广告更复杂，功能更加全面。;本例中对网络资源代码的利用是一种典型的方式，包括三大部分：外部独立的JavaScript和CSS文件，文件头位置里（head和/head之间）调用上述两种代码文件的语句，页面内部（body和/body之间）的HTML语句。下面进行实例操作。;（2）在站点根目录下建立一个新文件夹，命名为“js”（如果已有可跳过此步骤）。在AdobeDreamweaver界面右下方的【文件】管理器中单击【站点】，然后单击【文件】管理器右上角的下拉菜单，执行【文件】→【新建文件夹】命令。

（3）执行【文件】→【另存为】命令，将文件命名为“adroll2”，设置【保存类型】为【JavaScriptDocuments（*.js；*.json）】，然后将其保存在“js”目录下（注意保存的位置）。

（4）打开本书配套资源“范例”中提供的纯文本文件“焦点图像广告js代码.txt”，将以下代码复制到当前的JavaScript文件中。;（5）执行【文件】→【保存】命令进行保存。

（6）执行【文件】→【新建】命令，在弹出的【新建文档】对话框中从左到右依次选择【空白页】【CSS】选项，单击【创建】按钮，创建一个空白的CSS页面。

（7）在站点根目录下建立一个新文件夹，命名为“css”（如果已有可跳过此步骤）。

（8）执行【文件】→【另存为】命令，将文件命名为“adroll2”，设置【保存类型】为【StyleSheets（*.css）】，然后将其保存在“css”目录下（注意保存的位置）。

（9）打开本书配套资源“范例”中提供的“焦点图像广告js代码.txt”，将以下代码复制到当前的CSS文件中。;（10）执行【文件】→【保存】命令进行保存。

（11）执行【文件】→【新建】命令，在弹出的【新建文档】对话框中从左到右依次选择【空白页】【HTML】【无】选项，单击【创建】按钮，创建一个空白的HTML页面。

（12）执行【文件】→【另存为】命令，将文件命名为“ad_roll2.html”，然后将其保存在根目录下（注意保存的位置）。;（13）切换到【代码】视图，复制以下内容，并粘贴到head和/head之间。;（15）执行【文件】→【保存】命令进行保存。

（16）从本书配套资源的素材文件夹中找到上述代码中提到的8张图片，将其复制并粘贴到“images/pic”的子文件夹里（如果没有可以自己创建）。;注意：代码中加灰色底的部分是可以修改的部分，找到其在文件中的位置并修改它。;;;（1）打开A