Эта статья рассказывает о взаимном расположении текста и изображения на страничке.

Когда вы пытались вставить в страничку картинку, вы наверняка обратили внимание, что далеко не всегда она устанавливается так, как этого хочется. Происходит это потому, что броузер воспринимает изображение так же, как он воспринимает текст - как символ. Если, к примеру, вы напечатаете какое-нибудь слово, поместите внутрь него курсор и вставите в это место картинку, то у вас получится что-то похожее на это:

В этом примере изображение вставлено внутрь слова

Броузер считал из входного документа строку и начал ее вывод. Добравшись до тега <img> он воспринимает его как очередной объект для вывода в потоке, вывел изображение, а затем продолжил вывод строки.

И если подобный эффект броузер считает нормой жизни, то нас он может и не устроить. Для того, что бы добиться более приемлемого взаимного расположения текста и изображения используют параметр выравнивания. Воспользоваться им, как и всем в Dreamweaver, очень просто. Для этого нужно щелкнуть мышкой на нужном изображении, а затем вызвать панель свойств объекта (кстати, вызывается и убирается она еще и клавишами Ctrl-F3). В верхней строчке этой панели вы увидите список Align. Вот им то мы и воспользуемся. В приведенном ниже примере используется один и тот же абзац, с помещенным внутрь него изображением, но разными значениями Align

Этот текст располагается до начала изображения этот текст расположен сразу за ним Align= Default Browser Это исходный текст примера, я ничего не менял в Align Этот текст располагается до начала изображения этот текст расположен сразу за ним Align= Baseline Выравнивание по базовой линии. Никаких изменений на глаз не заметно, поскольку броузер по умолчанию использует именно этот метод Этот текст располагается до начала изображения этот текст расположен сразу за ним Align= Top Выравнивание по верхней линии изображения. В этом случае строка с текстом будет не над, а под строкой. Этот текст располагается до начала изображения этот текст расположен сразу за ним Align= Middle Выравнивание строки по средней линии изображения. Этот текст располагается до начала изображения этот текст расположен сразу за ним Align= Bottom Изображение выравнивается по нижней линии букв. Обычно совпадает в baseline. Этот текст располагается до начала изображения этот текст расположен сразу за ним Align= Text Top Следующие три примера учитывают не только базовую линию текста, но и выносные элементы шрифта (типа хвостики вверх и в низ в буквах "б" и "р"). Разница почти незаметна для маленького размера шрифта, но существенна при использования крупных букв. Этот текст располагается до начала изображения этот текст расположен сразу за ним Align= Absolute Middle Этот текст располагается до начала изображения этот текст расположен сразу за ним Align= Absolute Bottom Этот текст располагается до начала изображения этот текст расположен сразу за ним Align= Left Изображение расположено слева от оставшейся части абзаца. Обратите внимание, что абзац при этом не разрывается Этот текст располагается до начала изображения этот текст расположен сразу за ним Align= Right Изображение справа от остатка абзаца. Весь этот текст расположен сразу за изображением, картинка перед текстом, а не внутри него Align= Left А этот и следующий примеры - варианты использования двух предыдущих параметров, но картинка располагается перед текстом. Весь этот текст расположен сразу за изображением, картинка перед текстом, а не внутри него Align= Right

Давайте теперь взглянем на код, который вставил Dreamweaver в нашу страничку. Откройте ту часть окна, которая с кодом страницы и щелкните на изображение, к которому применена ппроцедура выравнивания

<img src="././_index_/arr_dn.gif" width="31" height="31" align="right">

Обратите внимание, что к знакомым нам параметрам в тегах <img> прибавился параметр align. Именно он и задает броузеру метод взаимного расположения текста и картинки.

И еще одно замечание. Когда вы используете выранивание справа и слева, то картинка перемещается в другое место странички, а в то место, куда вставлен тег <img> Dreamweaver поставит иконку якоря изображения. Это делается для того, что бы можно было видеть куда именно вставлена картинка. Иногда этот значек мешает, и его хотелось бы убрать. Делается это таким образом Выберите меню Edit-Preferences... Выберите категорию Invisible Elements и снимите галочку против всех значков, которые вы не хотели бы видеть. В любое время вы можете включить их обратно.

В следующей статье я начну рассказ о простых ссылках на изображениях, а в следующих мы научимся создавать ролловеры, навигационные панели и карты изображений.