Если основой макета Вашего сайта является «резиновая» таблица , то иногда возникает необходимость создать шапку сайта так, чтобы при изменении ширины окна браузера и при разных разрешениях монитора свободное место заполнялось узором. Технологии создания резинового сайта читайте в нашей статье Как создать резиновый сайт. Технологии создания бесшовного узора читайте в нашей статье Как создать бесшовный узор для фона сайта.
В этой статье мы рассматриваем технологию создания «резиновой» шапки сайта .
Мы будем создавать web-страницу, как показано на рисунке 1. Также Вы можете просмотреть ее по этой ссылке . Изменяйте ширину браузера и понаблюдайте, как работает «резиновая» шапка сайта .
Рисунок 1
Шапка сайта создана из изображения, показанного на рисунке 2.
Рисунок 2
Нарезка изображений для создания «резиновой» шапки1. Откройте в Photoshop файл shapka.jpg . .
2. Установите направляющие как на рисунке 3, «вытянув» их из линейки файла. Если линейки не отображаются, выполните команду View - Rules (Вид - Линейки) .
Рисунок 3
3. Включите функцию Snap в меню View (Вид) .
4. Инструментом прямоугольного выделения выделите часть изображения до первой направляющей (рис. 4). При выделении пунктирная линия выделения должна «прилипать» к направляющей благодаря включенной функции Snap . Это обеспечивает точность выделения при нарезке изображения.
Рисунок 4
5. Из выделенной части создайте новый файл, сохраните под именем shapka_01.jpg. Ниже приведена последовательность команд для создания нового файла из выделенной зоны:
- Edit - Copy (Правка - Копировать);
- File - New (Файл - Новый), нажать OK;
- Edit - Paste (Правка - Вставить);
- Layer - Flatten Image (Слой - Соединить слои):
- File - Save As… (Файл - Сохранить как…), задать имя файла shapka_1.jpg.
Результат на рис. 5.
Рисунок 5
6. Аналогичным образом инструментом прямоугольного выделения выделите часть изображения между направляющими (рис. 6).
Рисунок 6
7. Из выделенной части создайте новый файл, сохраните под именем shapka_2.jpg . Результат на рисунке 7.
Рисунок 7
8. Сделаем из файла shapka_2.jpg повторяющийся узор. Для этого сначала увеличьте холст изображения вправо ровно в два раза больше. Для этого выполните команду Image-Image Size… (Изображение-Размер холста…) и увеличьте размер по ширине в два раза (у меня этот размер равен 65х2=130 пикселей), анкор поставьте в левый средний квадрат, как на рисунке 8. Результат на рисунке 9.
Рисунок 8
Рисунок 9
9. Выделите цветную часть изображения. Скопируйте этот фрагмент командой Edit-Copy (Редактировать-Копировать) , а затем вставьте Edit-Paste (Редактировать-Вставить) .
10. Откройте палитру слоев Window-Layers (Окно-Слои) . В палитре должно быть два слоя, как на рис. 10.
Рисунок 10
11. Инструментом перемещения сдвиньте верхний слой и установите, как показано на рисунке 11.
Рисунок 11
12. Теперь верхний слой надо развернуть по горизонтали. Для этого выполните команду Edit-Transform-Flip Horizontal (Редактировать-Трансформация-Развернуть по горизонтали) . Результат на рисунке 12.
Рисунок 12
13. Склейте все слои командой Layer-Flatten Image (Слой-Выполнить сведение) . В результате в палитре слоев у Вас должен снова образоваться один слой (рис. 13).
Рисунок 13
14. Сохраните файл. Изображения для «резиновой» шапки готовы.
16. Для создания «резиновой» таблицы , нам необходимо знать размеры изображения shapka_1.jpg . Откройте в Photoshop файл shapka_1.jpg . Выполните команду Image - Image Size (Изображение - Размер изображения) . Установите параметры, как на рисунке 14.
Рисунок 14
17. Код страницы для «резиновой» шапки приведен на рисунке 15.
Рисунок 15
18. Ячейка с фоном shapka_2.jpg будет «резиновой» , т.к. в коде не описан параметр ширины ячейки width и она будет растягиваться в зависимости от свободного места экрана. Обратите внимание, что для первой ячейки мы делаем ширину width="347" , т.е. меньше на 2px , чем ширина изображения shapka_1.jpg .
19. Откройте шаблон в блокноте и измените код, как показано на рисунке 15.
20. Запустите web-страницу в браузере. Результат на рис. 16.
Сделайте в таблице строку, в ячейке которой разместите левую часть шапки сайта 1.gif:
 |
Создайте среднюю часть шапки сайта, состоящую из повторяющейся картинки 2.gif. Для этого в CSS-коде сделайте такую запись:
.header{background-image:url("images/2.gif");}
Теперь в строке таблицы создайте еще одну ячейку и поместите в нее средний элемент верхней части сайта, указав на его название header в CSS-коде:
| Название сайта Создав третью ячейку в строке таблицы, расположите в этой ячейке правую часть шапки сайта 3.gif:
Источники:
Когда вы создаете собственный сайт, естественно, вы хотите, чтобы он отображался как можно более привлекательно независимо от версии браузера пользователя. В частности, чтобы фоновое изображение растягивалось и подстраивалось под разрешение монитора компьютера. Вам понадобится
Инструкция Откройте код своего сайта в любом редакторе, например, программе «Блокнот» либо специальной программе для веб-дизайна, Dreamweaver. Вставьте в код следующие строки, чтобы растянуть . Пропишите Background: url (‘ «Вставьте ссылку на изображение»’). Для того чтобы размер картинки подгонялся по горизонтали, используйте следующий код: Background: url (‘ «Вставьте ссылку на изображение»’ repeat-x), по вертикали – в конце кода х замените на у. Если стиль сайта прописан в файле css, вставьте код в него. Таким образом, вы сможете поставить резиновый фон на ваш сайт. Воспользуйтесь следующим примером кода, который помещает фоновый рисунок на страницу и позволяет автоматически растянуть его, подстраиваясь под разрешение того монитора, на котором происходит просмотр страницы. Пример кода: body {background: «Вставьте ссылку на фоновое изображение» () no-repeat fixed left center; затем background-size: [...]. Используйте для растягивания фонового изображения простую вставку картинки в качестве фоновой и установите для нее ширину 100%. К примеру, вставьте в код страницы следующий текст: фоновое изображение» alt= «Введите название картинки» width="100%" / >. Таким образом, будет использоваться подгон ширины картинки, но ее пропорции будут нарушены. Аналогично можно установить растягивание рисунка по высоте, вместо атрибута width используйте height. Либо воспользуйтесь следующим примером кода для css: фоновое изображение сайта)" > и после него добавьте 100% ширину изображения, как в предыдущем примере. Также вы можете с помощью скрипта узнать разрешение экрана пользователя и отредактировать под него размеры вашей таблицы. Видео по теме «Резиновой» называется картинка, обладающая способностью масштабироваться. Создать такую картинку можно, используя компьютерные программы. Ее удобство заключается в том, что она «растягивается» в нужном направлении. Такое веб-творение успешно отображается в любом браузере. Если картинка содержит какие-то полезные элементы, «резиновые» свойства повышают ее функциональность.
Вам понадобится
Инструкция Найдите или создайте изображение, которое необходимо сделать масштабирующимся и разместить в сети интернет. Запустите программу Adobe Photoshop. Откройте это изображение в программе. На панели инструментов найдите Slice Tool. С его помощью разрежьте изображение на части. Разделите ее таким образом, чтобы вся картинка состояла из трех графических элементов и центральная была пустой. Это поможет картинке растягиваться при любом разрешении монитора. Сохраните картинку с оптимизацией для веб-формата (Save for web). При сохранении установите необходимый формат файла - gif, jpeg или png. Для того, чтобы изменить отдельные фрагменты изображения, найдите в меню опцию Slice Select Tool и измените части картинки таким образом, чтобы из размер был минимальным при наименьших потерях качества во время визуализации на экране. После изменения сохраните картинки как html и images. В этой статье рассмотрим, как сделать шапку сайта, и расположить на ней заголовок, и описание сайта Первым делом для шапки сайта нужна картинка. Её лучше всего сделать в фотошопе. А тем, кто не владеет этим редактором, я предлагаю самый простой способ , в имеющимся на всех Windows по умолчанию Paint. Ширину картинки сделаем 900px, по ширине сайта, высоту — 200px. У Вас конечно могут быть свои размеры, лишь бы ширина картинки совпадала с шириной сайта (оболочка wrapper), высота на Ваше усмотрение Как только картинка будет готова, и размещена в папке images , возьмём , созданный на предыдущей странице, и приступим к установке шапки на сайт. В селекторе #header убираем заданную ему высоту, и прописываем ширину и высоту сделанной картинки. #header
{ Затем вставляем саму картинку. #header
{ Свойство background-color указывается на тот случай, если картинка вдруг, в каком либо браузере посетителя, не отобразится. Если картинка разместилась с каким-либо смещением, и нужно её подправить, то сюда же добавляется свойство Теперь дошла очередь до заголовка и описания сайта. Для этого прописываем в теге body блок div с идентификатором id="header" , и в нём два заголовка h1 и h3 , в которые и вставляем название сайта и его описание
Посмотрим, что у нас получается. Теперь, придадим вид заголовку и описанию. Создаём для них два селектора, и прописываем следующие свойства: Для h3 зададим ширину в 200 пикселей, чтоб он не растянулся на всю картинку. Отступами можно манипулировать в зависимости от того, в каком месте шапки будет удобнее разместить текст. Посмотрим результат.
По моему, очень даже симпатично. Обобщим код этой страницы.
Есть ещё один вариант вставки картинки в шапку сайта. Можно вставить адрес картинки в блок перед заголовком (к примеру, адрес моей картинки
В таком случае, в селекторе #header убираем свойство background-image: (../images/position.png); , и прописываем position: relative . А в селекторах тегов h1 и h3 , прописываем свойство position: absolute; . При этом необходимо будет изменить отступы для заголовков. Подробнее о том, почему так делается, можно прочитать в статье #header
{ Всё остальное остаётся без изменения. Теперь немного информации для тех, у кого сайт расположен на CMS WordPress. На WordPress устанавливается готовая тема, с готовой шапкой, но допустим, Вам захотелось в эту готовую шапку, добавить какой нибудь свой логотип, или ещё какое изображение. Делается это следующим образом. Открываете в консоли «Записи — Добавить новую», переводите редактор в режим HTML, и загружаете то изображение, которое потом будет добавлено в шапку сайта. В редакторе после загрузки появиться код картинки, его нужно скопировать, а «Запись» можно удалить. Затем переходим во «Внешний вид — Редактор», и открываем для редактирования файл header.php . В этом файле, находим строку , и после неё вставляем скопированный код картинки. После этого обновляем файл, и смотрим, как изображение разместилось в шапке сайта. Если его нужно куда то подвинуть, то возвращаемся в редактор файла, и в код изображения, в тег img , добавляем атрибут style со свойством margin style ="margin:0 0 0 0; " И двигаем изображение туда, куда нам нужно. Вот мы и создали первую страницу сайта. После доработки шапки, и ещё кое каких доработок, описанных далее, можно этот файл назвать index.html , и выложить его на хостинг. Затем, по этому же шаблону, создаются другие страницы, создаётся меню и так далее. И сайт начинает свою жизнь в интернете. P.S. Если кому-то захочется поменять картинку в шапке сайта на WordPress, и по манипулировать расположением заголовков, то об этом в статье Желаю творческих успехов. Вы уже заранее подготовили для размещения в сети, и затем разрежьте его на части, используя инструмент Slice Tool на панели инструментов. Разрежьте шапку так, чтобы центральная ее была пустой, и чтобы в итоге у вас получилось три графических элемента. Это позволит шапке растягиваться под любое разрешение экрана. После того, как вы разрежете шапку, сохраните ее, оптимизируя файлы при сохранении для веб-формата (Save for web). Установите нужный формат файла для сохранения – например, gif, jpeg или png. Для изменения каждого фрагмента изображения кликните в меню на опцию Slice Select Tool и измените так, чтобы их размер был как можно меньше при наименьших потерях в качестве визуального отображения на экране. Сохраните отредактированные картинки как html и images. После того как картинки будут сохранены, отредактируйте HTML-код, открыв сохраненный html-документ с помощью Блокнота. В блокноте сотрите все ненужные строки кода. Оставьте только необходимые строки – данные о таблице, в которую встроены ваши картинки: В данных строках вместо yourimage.gif должен быть указан путь к вашим изображениям с соответствующей шириной и высотой. Для того чтобы средняя часть изображения растягивалась, разводя крайние изображения по сторонам, пропишите соответствующие атрибуты кода в строках. Все параметры ширины и высоты в коде указывайте свои собственные. Загрузите созданные картинки для шапки в корневой каталог своего сайта, а затем отредактируйте HTML-код, указав новые пути к изображениям шапки на сервере. Вставьте код шапки между тегами . Видео по теме Заявление – официально сделанное в устной, а чаще письменной форме, сообщение. Оно относится к категории официальных документов, поэтому оформляется в соответствии с ГОСТ Р.6.30-2003. Заявление пишется в произвольной форме, но к его тексту предъявляются стандартные требования. Инструкция Некоторые заявления, которые пишут физические лица, требуется писать от руки, но это требование должно быть специально внутренним регламентом по делопроизводству. Во всех остальных случаях заявление может быть напечатано на компьютере. Печатается заявление на стандартном листе писчей бумаги формата А4. Предусматривается, что размеры полей должны быть не менее следующих значений: левое – 20 мм, правое – 10 мм, верхнее и нижнее – 20 мм. Если вы печатаете документ в текстовом редакторе, то установите эти значения полей в пункте меню «Разметка страницы». В правой верхней части листа укажите наименование адресата, которому направляется заявление. Если это должностное лицо - укажите его должность, полное наименование организацию, фамилию и инициалы, полный организации. Текст заявления начните с обращения «Уважаемый Имя Отчество!». Сведения об имени и отчестве адресата вы можете узнать, позвонив в приемную организации, чьим руководителем он является. Если необходимо дать предварительное пояснение к вашему обращению, то напишите вводную часть. Используя официально-деловую лексику, начните ее с фразы: «Обращаю Ваше внимание», «Довожу до Вашего сведения» или «В соответствии с таким-то законом». Кратко изложите основание, по которому вы обращаетесь с заявлением к указанному лицу. Стандартным началом непосредственно обращения являются слова: «Прошу Вас…» или «В соответствии с вышеизложенным, прошу Вас». В этой части фиксируется сообщение граждан или организаций по поводу защиты и осуществления своих интересов и прав. В нем может быть зафиксирована просьба о принятии на работу, предоставлении очередного трудового отпуска, переводе на другую должность, допуске к экзаменам или к выполнению рабочих обязанностей. Если к заявлению приложены документы, укажите их в тексте под обращением, оформив в виде списка с указанием номера документа, его названия и количества листов в нем. Проставьте дату, подпись и ее расшифровку. Видео по теме Правильно подобранная картинка наилучшим образом характеризует направление сайта, придает ему индивидуальность. К тому же, большинство людей по своей натуре является визуалами, а это значит, что графическое изображение запомнится им куда лучше.
Инструкция Если вы только создаете свой сайт на основе готового шаблона, то в его шапку можно с помощью простой замены. Для этого достаточно подобрать подходящее изображение и пересохранить его под именем стандартной иллюстрации. Здесь главное подогнать размеры, в противном случае ваша картинка попросту не впишется в параметры ресурса. Точно также можно поступить и с готовым сайтом, который имеет систему управления и уже отправлен в плавание по интернет-пространству. Откройте в графическом редакторе изображение, которое вы хотите заменить, и выберите в меню «Изображение» - «Размер изображения». Запомните, а лучше запишите значения в пикселах. Можете закрывать картинку – она больше не понадобится. Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты. Рис. 6.3. Ширина шапки Само добавление картинки в шапке делается через фоновый рисунок, который необходимо выровнять по центру элемента . Header { display: block; /* Для старых браузеров */ height: 405px; /* Высота шапки */ background: url(images/header-bg.png) no-repeat center bottom; } В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.
Рис. 6.4. Совмещение изображения по горизонтали На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали). Header { display: block; height: 405px; background: url(images/header-bg.png) repeat-x center bottom; }
Рис. 6.5. Фоновая картинка для шапки В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже - около 15 Кб. Можно разбить фон на две составные части - градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить. Оптимизация шапкиПоскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности. Рис. 6.6. Градиентный рисунок (header-gradient.png) Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.
Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png) Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое. Два рисунка для фона шапки подготовлены, пишем код HTML.
И стиль для элемента и слоя header-bg . Header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; } В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого. Название сайтаНазвание написано на облаке с растушёванными краями, что должно создать трудности при наложении на градиент. Есть два способа, как их обойти. Очевидно, что второй способ имеет ряд недостатков - изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся. Header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; /* Высота шапки */ text-align: center; /* Выравнивание по центру */ } .header-bg img { position: relative; /* Относительное позиционирование */ top: 40px; /* Сдвигаем картинку вниз */ } Выравнивание по центру делается через свойство text-align
, добавляемое к родителю тега На главной странице сайта картинка с названием выводится как обычно, на остальных страницах она служит ссылкой на главную страницу. Для этого достаточно слегка изменить код:
Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально. Окончательный код для шапки приведён в примере 6.14. Пример 6.14. Шапка сайта HTML5 CSS 2.1 IE Cr Op Sa Fx
Как поймать льва в пустыне?
body { margin: 0; }
header {
display: block;
background: #00b0d8 url(images/header-gradient.png) repeat-x;
/* Градиент */
}
.header-bg {
background: url(images/header-animal.png) repeat-x center bottom;
/* Животные */
height: 405px; /* Высота шапки */
text-align: center; /* Выравнивание по центру */
}
.header-bg img {
position: relative; /* Относительное позиционирование */
top: 40px; /* Сдвигаем картинку вниз */
}
Больше информации по теме
|
