| Поиск по сайту |
|
На Главную Статьи современных авторов Художественные произведения Библиотека История Европы и Америки XIX-XX вв Как мы делали этот сайт Форум и Гостевая Полезные ссылки Статьи на заказ 
|
Урок 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"> Вставляем данный изменённый тег в нашу страницу и получается вот что: Наша первая страница, фон серый Нужный вам цвет можно найти вот в этих таблицах: http://www.artlebedev.ru/tools/colors/ http://www.antula.ru/palitra.htm http://fantasyflash.ru/index.php?&kontent=palitra2 http://webmastertools.narod.ru/OnlineTools/palettes.html http://www.board74.ru/colors/index.html http://www.board74.ru/colors/rgb.html http://www.board74.ru/colors/standard.html http://mytopics.narod.ru/palette/index.html http://www.antula.ru/colour-name_2.htm http://www.antula.ru/colour-name_3.htm http://he-lp.narod.ru/cvetinazvanie.htm http://skorpion-21.narod.ru/m/000/ http://www.butovo.com/~fiver/files/help/colors.html http://www.stm.dp.ua/web-design/color-html.php http://www.webclub.ru/archive/markup_refs/article-44.html http://www.kaplya.ic.km.ua/HTML-colors-1.html 2.2. Теперь зададим другое значение - background. Этот атрибут и означает фоновую картинку. Вставим в фон вот такую картинку:  Я поясню, почему она такая маленькая. При желании можно поставить фоновым изображением картинку, которая будет занимать весь экран. Но учтите, что это изображение в фоне имеет несколько присущих ему качеств: Предположим, у нас есть какая-то очень красивая картинка, например какой-нибудь зимний пейзаж. Картинка размером 1024х768. И если на неё смотреть монитора, разрешение которого 1024 на 768 - всё будет выглядеть прекрасно. Но если на наш сайт посмотрит пользователь у которого разрешение монитора 1280х1024, он увидит, что сама картинка отъехала в верхний левый угол, а свободные места снизу и справа от неё заполнились кусками этой же картинки, совершенно не состыкованными с первоначальным изображением. В общем, наш фон окажется на таком разрешении изуродованным. Перейти к Уроку 5 © М.В. Гуминенко. 2008 г. |
