Как создать собственный сайт | Усложняем страницу: добавляем блок с меню, flash-баннер, контекстную рекламу Google Adsensе
Видеоуроки
- Добавляем блок с меню, flash-баннер, контекстную рекламу Google Adsense
дата: 21.04.2008 -
На уроке будет немного усложнена страница, созданию которой был посвящен урок. Кроме блоков для flash-баннера и меню (из трех ссылок: "Домой", "Об авторе", "Реклама") я добавила блок для контекстной рекламы Google Adsense. Посмотреть результат.
На сегодняшний день мы можем менять внешнее оформление рекламных блоков Google Adsense прямо на аккаунте. Со сменой дизайна нам не нужно менять код объявлений на каждой HTML-страничке. Мы можем сделать так, чтобы реклама стала органичной частью сайта. На уроке я показываю пример оформления текстового блока на аккаунте Google Adsense.
В какой последовательности мы будем добавлять блоки? Допустим, нам нужно, чтобы flash-баннер визуально находился наверху страницы. Следует ли нам при этом размещать код баннера в начале HTML-разметки и не будет ли это нарушать исходную структуру документа?
На уроке я добавляю рекламный баннер интернет-магазина ozon.ru. Приведу код, который предлагается использовать партнерам магазина:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="ozon_bbc_468x60" width="468" height="60">
<param name="movie" value="http://www.ozon.ru/graphics/img_ass/ozon_bbc_468x60.swf?target=_blank&link=http://www.ozon.ru/?partner=mysite&from=prt_bbbc2468">
<param name="quality" value="high">
<param name="allowScriptAccess" value="sameDomain">
<param name="bgcolor" value="#FFFFFF">
<embed name="parthners_genie_468x60" src="http://www.ozon.ru/graphics/img_ass/ozon_bbc_468x60.swf?target=_blank&link=http://www.ozon.ru/?partner=mysite&from=prt_bbbc2468" quality="high" bgcolor="#FFFFFF" allowScriptAccess="sameDomain" width="468" height="60" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed></object>Подобный код лучше вставлять в конце HTML-разметки, но с помощью CSS flash-объект можно визуально разместить в любом месте страницы. Таким образом, наш текст на сайте не будет прерываться каким-то бессмысленным и тяжелым кодом, и это хорошо с точки зрения поисковых систем, которые отдают предпочтение контенту. На уроке я показываю, каким образом это можно сделать.
Так же усложнена структура блока со ссылками: добавлены три блока в этом контейнере. На следующем уроке я покажу, как можно изменить внешнее оформление этого блока: три списка ("Рубрики", "Архивы", "Партнеры") получат свое оформление.
Длительность урока — 27 мин.35 сек. Размеры ролика — 768 х 556. Формат ролика .wmv. Просматривать можно в проигрывателях Windows Media, Media Player Classic. Не забывайте о полноэкранном режиме.
- Как скачать
- Статьи
-
Блочная верстка сайтов
- Какой стандарт предпочтительнее выбрать при создании нового сайта? Отличия XHTML от HTML.
- Филоcофия CSS-дизайна. Позаботьтесь о красоте HTML-разметки.
- Почему XHTML+CSS? 15 доводов в пользу перехода на XHTML+CSS.
- Как декларация DOCTYPE влияет на отображение сайта браузерами?
- Как проверить сайт на кроссбраузерную совместимость?
- Как «угодить» IE6, IE7? Пишем хаки для Internet Explorer.
- Недостатки меню на javascript. Из опыта создания ниспадающих меню в NavStudio.
- Зачем нужна печатная версия сайта. Как создать печатную CSS-версию?
Контент для сайта