В этом разделе мы поэтапно расскажем, как делался сайт "Созвездие Близнецов" |
|
|
Урок 4. Вставляем логотип. Цвет фона и фоновое изображение Для того, чтобы наполнить нашу таблицу содержимым, будем последовательно вставлять картинки, ссылки и текст в ячейки таблиц.
Внимание! Не забывайте важный момент (я хочу о нём напомнить, потому что такая ошибка встречается): одинарные (') и двойные (") кавычки в html и прочих языках программирования имеют разное значение. Две одинарные кавычки не заменят одну двойную. В данном случае, во всех кодах, которые я привожу, кавычки должны быть двойные. 1.1. Для начала нам нужна картинка, которую мы станем использовать, как логотип. Эту картинку нужно сделать определённого размера и загрузить либо на Радикал.ру, либо в корневую папку нашего сайта. Лучше в корневую папку, потому что тогда вы не будете зависеть от неполадок на сервисе изображений Радикал.ру, которые иногда случаются. Загружаем картинку нужного нам размера в корневую папку. Логотип нужно делать с учётом разрешения монитора. Вы должны учитывать, как ваш логотип будет смотреться на мониторах с разным разрешением: не будет ли он растягивать экран при разрешении меньше, чем ваше, не потеряется ли где-то в углу, отделённый от ячейки с ссылками огромным пустым пространством, на мониторе у которого разрешение больше, чем у вас. Учитывая, что мы поставили вторую ячейку таблицы, предназначенную для ссылок - 200 px, 600+200=800рх. При разрешении монитора 800 на 600 рх логотип и ссылки будут располагаться вплотную друг к другу. Нужно учитывать, что при любом разрешении, какое бы оно ни было у пользователей, на ваших страницах может появиться горизонтальная полоса прокрутки. Это можно счесть ошибкой в дизайне. Горизонтальной полосы прокрутки на странице с качественным дизайном быть НЕ ДОЛЖНО. Так же нежелательное явление - большой вес логотипа. Чем меньше весит логотип - тем лучше. Ваша страница будет грузиться быстро и пользователи не будут выражать недовольство по поводу потраченного траффика. Если ваш логотип будет весить меньше 15-ти Кb - будет очень хорошо. Про масштабирующиеся логотипы поговорим отдельно, а сейчас продолжим про обычный логотип. 1.2. Итак, мы загрузили нужную нам картинку в корневую папку нашего сайта, назвав её к примеру "logo". Далее мы вставляем картинку в соответствующие теги, как мы это делали, вставляя изображение в баннер: <img src="logo.jpg" border="0"> Красным цветом обозначена картинка. Не забывайте ставить формат, в котором выполнена картинка. Это в данном случае jpg, но может быть картинка, сохранённая в формате gif или каком-либо другом. 1.3. Теперь всю эту ссылку необходимо вставить в HTML-код нашей таблицы, на то место, где у нас написано слово "Логотип". Чтобы логотип встал с выравниванием по левому краю, добавим в ячейку атрибут выравнивания align="left"
Подставляем теперь эту таблицу в нашу страницу, на которой у нас сделаны все таблицы для нашего сайта и весь код будет выглядеть так:
1.4. Загрузим всю эту конструкцию на нашу страницу. Получится вот что: Наша первая страница 2. Цвет фона и фоновое изображение (bgcolor и background) 2.1. Для того, чтобы наша страница была определённого цвета, необходимо задать цвет фона. Поскольку цвет прописывается для всей страницы, то есть для её "тела", необходимо прописать атрибут цвета внутрь тега <body> Цвет фона задаётся атрибутом bgcolor, которому присваивается значение того цвета, какой вам нужен. Например, мы хотим, чтобы фон страницы был светло-серый. Мы находим в таблице цветов, или в фотошопе соответствующий цвет #c0c0c0 - который отвечает именно за светло-серый, и прописываем атрибут с его значением, так же, как мы прописывали значения других атрибутов: bgcolor="#c0c0c0". А теперь этот атрибут помещаем внутрь тега <body> . Получится следующее: <body bgcolor="#c0c0c0"> Вставляем данный изменённый тег в нашу страницу и получается вот что: Наша первая страница, фон серый 2.2. Теперь зададим другое значение - background. Этот атрибут и означает фоновую картинку. Вставим в фон вот такую картинку:  Я поясню, почему она такая маленькая. При желании можно поставить фоновым изображением картинку, которая будет занимать весь экран. Но учтите, что это изображение в фоне имеет несколько присущих ему качеств: Предположим, у нас есть какая-то очень красивая картинка, например какой-нибудь зимний пейзаж. Картинка размером 1024х768. И если на неё смотреть монитора, разрешение которого 1024 на 768 - всё будет выглядеть прекрасно. Но если на наш сайт посмотрит пользователь у которого разрешение монитора 1280х1024, он увидит, что сама картинка отъехала в верхний левый угол, а свободные места снизу и справа от неё заполнились кусками этой же картинки, совершенно не состыкованными с первоначальным изображением. В общем, наш фон окажется на таком разрешении изуродованным. Если же вдруг у пользователя разрешение монитора меньше, чем 1024х768 он увидит только кусочек вашего фона, точнее, его левый верхний угол. Нам это не подходит. Вторая сложность: чем больше картинка размером, тем больше её вес, тем дольше она будет грузиться и тем больше тратить трафика пользователя. Третья сложность: на ярком, красочном фоне ничего не возможно прочитать. Буквы будут просто теряться среди ярких красок. Поэтому пожертвуем пейзажами и картинами и поставим что-нибудь поскромнее, полегче весом, масштабирующееся под любое разрешение монитора и не мешающее читать текст. Итак, суммируем: вес фоновой картинки прибавляется к общему весу страницы, поэтому не грузите сильно тяжёлые картинки, экономьте трафик. Фоновое изображение может по каким-то причинам не открываться сразу, особенно если вы захотите загрузить его не на свой сайт, а для экономии места воспользуетесь чьим-нибудь сервисом картинок. К примеру, тем же Радикалом. И если на Радикале произойдёт сбой, ваше изображение может не загрузиться вовсе. Нужно учитывать так же, что если у вас текст набран чёрными буквами, а вы положили под фоновое изображение чёрный фон - если фоновое изображение не откроется, чёрный текст на чёрном фоне прочитать будет невозможно и гость будет очень удивлён, увидев сплошное чёрное пятно вместо вашей страницы. Иными словами, подбирая фоновое изображение, вы должны учитывать контрастность текста по отношению к фоновому изображению и фону под ним. Чтобы ваш текст ВСЕГДА был ХОРОШО ЧИТАЕМ! Для фона я в данном случае взяла очень маленькую картинку, 30 на 28 пикселов, которая весит очень мало, около 51 байта. И вес всей страницы будет считаться только по одной картинке, которая просто размножается в фоне бесчисленное множество раз. Теперь давайте посмотрим, как поставить фоновое изображение. 2.3. Допустим, мы загрузили в нашу папку, где лежат все наши страницы, фоновую картинку и присвоили ей имя "f3.gif" (формат может быть и jpg). Поскольку фон стоит для всей страницы, то и прописать его нужно в "тело" страницы, то есть всё в тот же <body> . Здесь нам понадобится атрибут "background", который и означает фоновое изображение. Оставим цвет фона на тот случай, чтобы если картинка не открылась, страница имела бы хотя бы цвет фона. Выглядеть это будет так: <body bgcolor="#c0c0c0" background="f3.gif"> Наша первая страница, фон серый + фоновая картинка Фоновое изображение можно прописать не только для всей страницы. Его можно прописать в ячейку таблицы или в какую-то определённую таблицу. Фоновое изображение в отличие от вставленной картинки, всегда масштабируется и поверх него можно вставлять текст. А картинка не масштабируется, имеет строго определённый размер и поверх неё ничего написать нельзя. Урок окончен. Перейти к Уроку 5 |
© М.В. Гуминенко. 2008 г.
По вопросам использования материалов сайта обращаться по адресу: Kippari2007@rambler.ru
