Создайте среднюю часть шапки сайта, состоящую из повторяющейся картинки 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. Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач - это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню - справа. Можно использовать float и position:absolute, а для выравнивания по вертикали - добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем. Ниже описан лаконичный способ решения этой проблемы. HTML-разметка максимально проста: Высота шапки фиксированная, добавляем text-align: justify , для дочерних элементов: Header { text-align: justify; letter-spacing: 1px; height: 8em; padding: 2em 10%; background: #2c3e50; color: #fff; } Добавляем display: inline-block для всех элементов nav , чтобы можно было расположить их друг за другом: Header h1, header nav { display: inline-block; } Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block , автор Jelmer de Maat: Header::after { content: ""; display: inline-block; width: 100%; } В итоге получилось выравнивание по горизонтали, без использования float и position:absolute . Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока - шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания. Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown , упомянутый Michał Czernow: Header h1 {
height: 100%;
}
header h1::before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
Осталось решить две задачи: корректное отображение при большом количестве текста в шапке и адаптивность. Если заголовок сайта будет слишком длинный, верстка начнет съезжать: Используем трюк с псевдоэлементом на header
: CSS-код header {
text-align: justify;
height: 15em;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}
header::after {
content: "";
display: inline-block;
width: 100%;
}
header > div,
header nav,
header div h1 {
display: inline-block;
vertical-align: middle;
}
header > div {
width: 50%;
height: 100%;
text-align: left;
}
header > div::before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
Выглядит намного лучше:
Теперь перейдем к адаптивности. Есть несколько способов решения этой задачи, можно просто не задавать высоту шапке, и все внутренние элементы будут адаптивны высоте. При этом не потребуется второй трюк с псевдоэлементами, живой пример на jsbin. CSS-код header {
text-align: justify;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}
header::after {
content: "";
display: inline-block;
width: 100%;
}
header h1,
header nav {
display: inline-block;
vertical-align: middle;
}
header h1 {
width: 50%;
text-align: left;
padding-top: 0.5em;
}
header nav {
padding-top: 1em;
}
Если же необходимо задать высоту шапки, то придется использовать и второй трюк с псевдоэлементами, и добавлять media query для экранов разных размеров: @media screen and (max-width: 820px){ header { height: auto; } header > div, header > Результат адаптивен и на мобильных устройствах выглядит так: В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов. Финальный CSS-код @import url(http://fonts.googleapis.com/css?family=Lato:400,700italic);
* { padding: 0; margin: 0; }
body { background: #1abc9c; font-family: "Lato", sans-serif; text-transform: uppercase; letter-spacing: 1px;}
header {
text-align: justify;
height: 8em;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}
header::after {
content: "";
display: inline-block;
width: 100%;
}
header > div,
header > div::before,
header nav,
header > div h1 {
display: inline-block;
vertical-align: middle;
text-align: left;
}
header > div {
height: 100%;
}
header > div::before {
content: "";
height: 100%;
}
header > div h1 {
font-size: 3em;
font-style: italic;
}
header nav a {
padding: 0 0.6em;
white-space: nowrap;
}
header nav a:last-child {
padding-right: 0;
}
@media screen and (max-width: 720px){
header {
height: auto;
}
header > div,
header > div h1,
header nav {
height: auto;
width: auto;
display: block;
text-align: center;
}
}
Результат:
В этой статье рассмотрим, как сделать шапку сайта, и расположить на ней заголовок, и описание сайта Первым делом для шапки сайта нужна картинка. Её лучше всего сделать в фотошопе. А тем, кто не владеет этим редактором, я предлагаю самый простой способ , в имеющимся на всех 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 мм. Если вы печатаете документ в текстовом редакторе, то установите эти значения полей в пункте меню «Разметка страницы». В правой верхней части листа укажите наименование адресата, которому направляется заявление. Если это должностное лицо - укажите его должность, полное наименование организацию, фамилию и инициалы, полный организации. Текст заявления начните с обращения «Уважаемый Имя Отчество!». Сведения об имени и отчестве адресата вы можете узнать, позвонив в приемную организации, чьим руководителем он является. Если необходимо дать предварительное пояснение к вашему обращению, то напишите вводную часть. Используя официально-деловую лексику, начните ее с фразы: «Обращаю Ваше внимание», «Довожу до Вашего сведения» или «В соответствии с таким-то законом». Кратко изложите основание, по которому вы обращаетесь с заявлением к указанному лицу. Стандартным началом непосредственно обращения являются слова: «Прошу Вас…» или «В соответствии с вышеизложенным, прошу Вас». В этой части фиксируется сообщение граждан или организаций по поводу защиты и осуществления своих интересов и прав. В нем может быть зафиксирована просьба о принятии на работу, предоставлении очередного трудового отпуска, переводе на другую должность, допуске к экзаменам или к выполнению рабочих обязанностей. Если к заявлению приложены документы, укажите их в тексте под обращением, оформив в виде списка с указанием номера документа, его названия и количества листов в нем. Проставьте дату, подпись и ее расшифровку. Видео по теме
Правильно подобранная картинка наилучшим образом характеризует направление сайта, придает ему индивидуальность. К тому же, большинство людей по своей натуре является визуалами, а это значит, что графическое изображение запомнится им куда лучше.
Инструкция Если вы только создаете свой сайт на основе готового шаблона, то в его шапку можно с помощью простой замены. Для этого достаточно подобрать подходящее изображение и пересохранить его под именем стандартной иллюстрации. Здесь главное подогнать размеры, в противном случае ваша картинка попросту не впишется в параметры ресурса. Точно также можно поступить и с готовым сайтом, который имеет систему управления и уже отправлен в плавание по интернет-пространству. Откройте в графическом редакторе изображение, которое вы хотите заменить, и выберите в меню «Изображение» - «Размер изображения». Запомните, а лучше запишите значения в пикселах. Можете закрывать картинку – она больше не понадобится. От автора: приветствуем вас на нашем блоге о сайтостроении. У любого сайта есть то, чем он обычно запоминается и выделяется среди остальных. Обычно это именно шапка сайта. CSS позволяет сделать ее такой, как вам нужно. Шапка сайта – какой она бываетПоразительно, как много может зависеть сегодня от одного только дизайна веб-ресурса. Но что особенно сильно отделяет веб-ресурс от других? Как правило, это именно шапка сайта с фирменным логотипом и уникальным оформлением. Обычно именно по ней люди запоминают какой-то интернет-проект. Это очень хорошо запоминается в памяти людей. Например, если вы видите белую букву “В” на синем фоне, то наверняка сразу делаете вывод – это иконка социальной сети Вконтакте. А изображение почтового голубя у всех сразу же ассоциируется с Twitter. Все это стало возможным потому, что в шапках у этих сайтов были именно такие изображения и они очень хорошо запомнились людям. Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части. Как в CSS можно оформить шапку сайта?Вообще шапки бывают разными. По ширине их можно разделить на две группы: выровненные по центру и те, что на всю ширину веб-страницы. Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш , где вы можете посмотреть уроки по этой технологии. Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:
Конечно, на странице пока ничего не появится – нам еще нужно добавить в нее содержимое и оформить. Но давайте, например, сделаем блок на всю ширину экрана, а также немного оформим. header{ width: 100%; background: #D8E3AB; height: 70px; }
Вообще, если все делать по-правильному, то следовало бы задать блоку какой-то класс или даже идентификатор (поскольку это важный элемент веб-страницы), но мы пока просто обратимся к элементу по тегу. Свойство width: 100% делает так, что наш блок будет растягиваться на всю ширину вне зависимости от размеров экрана. Если же все-таки размеры нужно хоть как-то ограничить, используют дополнительно свойство max-width, где в пикселях записывают абсолютный размер, по достижению которого контейнер больше не будет расширяться. Сейчас перед нами просто полоска, окрашенная в выбранный цвет. Обычно высоту не задают – она определяется автоматически на основании тех элементов, которые будут в шапке.
Таким образом, наш верх сайта будет расположен ровно по центру. Остается только наполнить его. Рис. 1. Пока это только контейнер, в котором будет все содержимое. Что обычно содержится в шапке?Обычно там вставлен логотип, название, описание сайта. Также там может находиться какая-то контактная информация, навигация по страницам или даже реклама. Логотип обычно вставляют как фоновое изображение. Давайте, например, поставим такой: Для этого достаточно дописать некоторые правила к фону: background: #D8E3AB url(logo.png) no-repeat 5% 50%;
То есть помимо сплошного цвета даем еще и фоновую картинку (в нашем случае logo.png) и предварительно я ее положил в ту же папку, что и файл стилей. Запрещаем повторение логотипа и определяем его позицию в блоке – немного сместим влево и по центру по вертикали. Добавим в шапку какое-то содержимое. Например, заголовок и меню. Название сайта
Теперь все это оформим. Title{ font-size: 36px; padding-top: 10px; text-align: center; } .menu{ list-style: none; position: absolute; top: 10px; right: 100px; }
|
