Начало урока. Разбор файла index.html
В index.html по сравнению с предыдущим уроком изменилось немного. Я только добавил после <body> следующий код:
<header class="header"> </header>
Верхнюю часть сайта, называемую «шапка», помещают в специальный тег <header></header>.
На вашем сайте в <header></header> будет вся красная верхушка, как на imdiz.ru/store/:
Цвет фона для header я задал свойством background в style.css. Если Вы еще не открыли файл style.css в SublimeText, то откройте.
Сейчас у Вас в SublimeText открыто 2 файла: index.html и style.css. Для удобства сделайте следующее: вверху SublimeText нажмите View, в выпавшем окне наведите на Layout, и выберите там Columns: 2. Ваш редактор разделится на 2 колонки и файлы можно разместить в разных колонках. Так вы будете видеть сразу оба файла. Смотрите видео:
Советы для названия заголовков
Советы ниже актуальны для заголовков всех уровней, будь то первый уровень <h1> или какой-то из уровней ниже.
Заголовки должны:
- выстраиваться в иерархическом порядке;
- не оканчиваться точкой;
- иметь смысл, передавать идею следующего за ним текста (а не просто для «пусть будет»);
- быть даже в небольших статьях, которые можно разделить на несколько частей;
- не иметь грамматических ошибок (наличие таковых может снизить релеватность заголовка).
Другие советы, которые можно дать при составлении заголовков:
- не стоит злоупотреблять заголовками и делать на странице множество <h2>…<h6> — поисковые боты могут расценить это как переоптимизацию сайта либо спам;
- в заголовках должны быть прямые вхождения ключевых слов, так как это повысит релевантность страницы в отношении этого запроса; однако слишком большая плотность ключевых слов не пойдет в плюс – поисковые боты будут игнорировать подробные заголовки из-за переоптимизации;
- заголовки должны быть уникальными (повторяющиеся заголовки поисковые системы могут не учитывать);
- заголовок должен быть близок к началу документа (то есть к началу HTML-кода): чем выше заголовок, тем более высокое значение он имеет (по сравнению с другими элементами страницы);
- желательная длина заголовка – не более 60 символов; это связано с поисковыми системами, которые воспринимают определенное количество символов (и длинный заголовок могут обработать не полностью).
Отдельно можно сказать о дизайне заголовков – будет здорово, если все заголовки на странице будут отличаться от другого текста (даже если речь идет не о <h1>, а о <h5> или <h6>). Можно как-то стилистически выделять заголовки, например, ставить их на цветную плашку или выделять шрифтом.
А подзаголовки можно нумеровать, при этом ставить цифры в виде картинок. И удобно, и красиво.
Макет с фиксированной шириной
Многие разработчики предпочитают фиксированные макеты резиновым, так как их легче реализовать, и они обеспечивают большую уверенность в том, что разработчик видит то же, что и пользователь.
Преимущества макетов с фиксированной шириной
Фиксированные макеты легче использовать;
Ширина фиксируется для всех браузеров, так что возникает меньше проблем с картинками, формами, видео и другим контентом, имеющим фиксированную ширину;
Нет необходимости задавать минимальную (min-width) или максимальную (max-width) ширину, которые, кроме того, до сих пор поддерживаются не всеми браузерами;
Даже если макет ориентирован на минимальное разрешение 800*600рх, контент будет все равно достаточно широким, чтобы быть читабельным;
В некоторых случаях использовать макеты с фиксированной шириной проще для создания определенных JavaScript эффектов или дизайнерских решений
Некоторые макеты дизайна разумно верстаются только с использованием фиксированной ширины основного контейнера;
Фиксированные макеты верстаются быстрее и легче, что очень важно на срочных проектах.
Недостатки макетов с фиксированной шириной
- Фиксированный макет будет оставлять много пустого пространство у пользователей с большим разрешением экрана;
- При разрешениях, меньших чем тот, на который рассчитан макет, в браузере появится горизонтальная прокрутка;
- Для пользователей с большим разрешением экрана может понадобиться бесшовный повторяющийся фон;
- Фиксированный макет несколько уступает по юзабилити остальным.
Примеры фиксированных макетов страниц
Далее следуют 5 примеров сайтов с фиксированной шириной.
Повторяющийся клетчатый фон по бокам страницы дает впечатление ее целостности даже на большом разрешении
Здесь фоновое изображение слишком узкое, поэтому при большом разрешение картинку портят «оборванные» линии
Разработчику при работе с фиксированным макетом всегда следует его центрировать, в противном случаи у пользователей с большим разрешением он будет прибит к краю браузера, что на больших разрешениях оставляет много пустого места:
Меняем размер картинки вашей будущей шапки.
Итак,мы с вами знаем точный размер нужной нам картинки,а размер картинки которую вы нашли- либо больше,либо немного меньше чем размеры нашей шапки.
Таким образом,нам необходимо подогнать все размеры по длине и ширине найденной вами картинки,под размеры вашей шапки!
Для этого мы будем с вами использовать программу фотошоп,но если у вас на данный момент нет данной программы тогда используйте программу ОНЛАЙН ФОТОШОП , которую вы можете найти при помощи поисковика google ,на первом месте в поисковой выдаче ее устанавливать не нужно,работа с фотошоп происходит онлайн.
Заходим на сайт http://editor.0lik.ru и сразу видим такую картину:-
Из вышеперечисленного на скрине выбираем кнопку-
Загрузить изображение с компьютера ==>>Выбираем папку==>>Выбранную нами ранее картинку для изменения вашей шапки ==>>Увеличиваем открывшиеся окно с вашей картинкой
после чего нажимаем две кнопки одновременно CTRL+A или воспользуйтесь инструментом Выделение и выделите курсором мыши всю область вашей картинки ==>>
Затем в верхнем меню фотошопа выбирите кнопку — Редактировать ==>> В выпавшем подменю нажмите Копировать —
Далее переходим ==>> Файл ==>> Новый рисунок ,после чего у вас высветится вот такое окошко-
Где вам нужно будет прописать нужные размеры вашей шапки (т.е те размеры которые мы с вами узнали при помощи 1-го и 2-го способов) и поставить галочку Прозрачность для того чтобы ваша в дальнейшем вставленная туда картинка не так много весила как с фоном с заливкой белого цвета по умолчянию==>>
Далее нажимаем кнопку Да. В открывшимся окне фотошопа сразу убираем все ненужные нам окна,которые находятся с правой стороны,после чего открываем ==>>
таким образом мы вставляем ранее скопированную картинку ==>>Далее нажимаем одновременно две кнопки Сtrl + T ==>>
После чего у вас появится полупрозрачный квадрат с синими квадратиками для регулировки размера вашего изображения под прозрачный фон (размеры прозрачного фона мы с вами делали под размеры нашей шапки) ==>>
Центрируем изображение по середине прозрачного фона зажимая и передвигая его левой кнопкой мыши==>>
Далее либо растягиваем,либо уменьшаем наше изображение при помощи зажатия правой кнопкой мыши на маленьких синих квадратиках и передвигая их вправо,влево,вверх,вниз.
После того как вы подгоните каждую сторону под прозрачный фон ==>>
Нажимаем Файл ==>> Сохранить ==>>
После чего у вас будет вот такое окошко:-
Здесь так сказать- Самый важный и ответственный момент. Все параметры которые мы сюда с вами впишем должны четко совпадать с параметрами вашей старой картинки(шапки).
Давайте разберемся по порядку:-
Для первого варианта нам потребуется найти в разархивированной папке вашего шаблона старую картинку вашей шапки и скопировать ее название.
Во втором варианте вам нужно зайти в админку вашего сайта ucoz ==>> Файловый менеджер ==>>
Папку с картинками- это либо images либо img ==>> По очереди открывать каждую картинку,если вы там не найдете приблизительное название вашей картинки(шапки)- этим приблизительным названием непосредственно является header .
Для просмотра любой картинки находящиеся у вас на хостинге используйте глазик ,который находится с правой стороны параллельно напротив названия ваших картинок
Формат картинки — здесь нам нужно выбрать точно такой же формат,который стоит у вашей старой картинке (шапке).
Форматов (расширений) у картинок любой шапки бывает всего два вида — это PNG и JPEG
Качество картинки — устанавливаем самое высокое 100% — это если у вас нужная картинка имеет расширение в формате JPEG ,если PNG — качество картинки устанавливается автоматически!
Поле четкого заполнения всех полей нажимаем кнопку- Да .После чего сохраняем нашу картинку в отдельную папку.Все.
Я вас поздравляю,Вы сделали и подготовили вашу картинку к установке!Теперь заходим в админку вашего сайта ==>> Файловый менеджер ==>>
Находим нашу старую картинку(шапки),в моем случае,это header и удаляем ее при помощи красного крестика,который находится с правой стороны,напротив вашей картинки ==>>
После чего там же в той же папке где удалили загружаем новую уже готовую картинку ==>> Заходим на свой сайт и нажимаем F5 (обновить) и что мы видем в итоге:- Вуаля. У вас новая шапка с нормальным визуальным отображением!
На этой замечательной ноте я думаю заканчивать этот немаленький пост и предложить вам прокомментировать все вышесказанное.
Вы должны знать и понимать,как нам всем важна ВЗАИМОПОМОЩЬ ,которая требуется нам как в жизни так и в интернете!
Переопределение стилей браузера. Инструменты разработчика в браузере
Теперь в Вашем style.css вернитесь к участку кода:
html, body{
margin: 0;
}
Селекторы можно прописывать через запятую. В данном случае CSS-стили в фигурных скобках будут применены и для тега html, и для тега body.
Этот код равнозначен следующему:
html{
margin: 0;
}
body{
margin: 0;
}
И еще обратите внимание, что здесь используется селектор тега, а не класса. Точка перед именем селектора не стоит
А теперь о том, для чего нужен этот участок кода. Если Вы удалите этот участок кода и сохраните style.css, то увидите в браузере, что шапка не на всю ширину браузера (слева, справа, а также сверху, будут белые полоски). Это потому, что в каждом браузере уже прописаны некоторые стили для всех HTML-тегов. Это стили браузера по умолчанию. В нашем случае белые полосы будут из-за того, что для тега <body></body> в браузере указаны отступы (в CSS для этого используется свойство margin). Чтобы это увидеть вызовите в браузере средства разработчика. Для этого, если у вас Google Chrome или Yandex Browser, просто нажмите на клавиатуре F12.
С инструментами разработчика удобнее работать, когда окно открыто внизу. Для того, чтобы его перенести вниз, нажмите справа на 3 точки, и в открывшемся окошке выберите нужное расположение. Смотрите видео:
В средствах разработчика видна структура HTML, а справа CSS-стили выделенного HTML-тега. Если Вы нажмете на <body>, то справа в CSS увидите, что помимо наших стилей у body есть еще другие стили, и в них margin: 8px;. Задав в style.css margin: 0; я переопределил стиль margin для тегов html и body.
Резиновый дизайн и необходимые свойства CSS
Резиновый дизайн сайта означает, что при изменении размеров окна браузера все слои масштабируются согласно текущей ширине. Это и есть основное преимущество резинового дизайна: независимо от размеров экрана, вся его область будет занята, при этом не возникают лишние полосы прокрутки при использовании «маленького» монитора.
«Резиновость» достигается за счет того, что определенные слои макета не имеют фиксированную ширину, приспосабливая свои размеры под размеры окна браузера.
Минусом данного типа дизайна являются «разногласия» между браузерами, необходимость применять «хитрости» css-стилей, для того чтобы достичь необходимой кроссбраузерности.
Выравнивание по центру
Если есть необходимость оставить макет выровненным по левому краю окна, делать
ничего не надо, данный эффект произойдет сам собой. А вот чтобы макет оказался
по центру окна браузера поможет еще один дополнительный слой,
который будет служить каркасом и включать в себя все остальные слои. Назовем
его container и пропишем для него следующий стиль (пример 3).
Пример 3. Выравнивание по центру
Свойства margin-right и margin-left со
значением auto задают выравнивание
слоя по центру веб-страницы. В этом
же селекторе указываем и общую ширину всех слоев.
Выравнивание макета веб-страницы по правому краю, как правило, никогда не
делается — используется выравнивание либо по центру, либо по левому краю.
Видео урок по замене шапки на uCoz
В этом уроке, Вы узнаете, как сменить шапку сайта ucoz. Хочу напомнить, что уроки по изменению дизайна, представленные на сайте http://webcaum.ru, НЕ являются универсальным решением, т.к. к каждому шаблону сайта нужен индивидуальный подход. Уроки даны лишь для того, чтобы было понимание, как меняются элементы сайта на Юкозе. Прежде чем продолжить, скачайте файлы для дальнейшей работы и разархивируйте их.
В первую очередь нам нужно закачать файл fon.gif . Чтобы закачать его зайдите в раздел: Инструменты -> Файловый менеджер.
Перед Вами появится окно загрузки файлов. Нажмите на кнопку «Обзор», зайдите в папку, где находятся скачанные файлы, и выберите картинку fon.gif . Затем нажмите на кнопку «Загрузить файл».
Зайдите в раздел: Дизайн -> Управление дизайном (CSS).
Вы попадёте в раздел, где мы можем менять данные таблицы стилей (CSS). Если с помощью HTML создаётся структура сайта, то с помощью CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) эта структура украшается. Если Вы не знаете, что такое HTML и CSS, то изучите сначала ниже представленные видеокурсы:
Итак, приступим к изменению дизайна шапки сайта. На 5-ой строчке в таблице стилей Вы увидите следующий код:
Именно этот код мы будем корректировать, чтобы привести шапку сайта в тот вид, который нам нужен. Замените полностью данный код на следующие данные :
Также этот код Вы можете привести в следующий вид (как Вам будет удобней):
#logoBlock <height:96px; border-top:2px solid #000000; border-bottom:2px solid #000000; background: url(‘/fon.gif’); >
Нажмите кнопку «Сохранить». Обновите главную страницу сайта, и Вы увидите, что шапка теперь выглядит так:
Бывает так, что не сразу браузер показывает изменения, произошедшие на сайте. Это происходит потому, что кэш браузера (копии веб-страниц, уже просмотренных пользователем) не всегда стирается после обновления сайта. Чтобы стереть кэш в таких браузерах, как Mozilla и Internet Explorer, нажмите «CTRL + F5». Если данное сочетание клавиш не работает (например, в Опере), то просто несколько раз нажмите клавишу F5.
Итак, фон шапки сайта мы поменяли. Теперь нужно красиво расположить заголовок «Белый каталог сайтов» в шапке.
Зайдите в раздел: Дизайн -> Управление дизайном (шаблоны).
После чего перейдите в раздел «Верхняя часть сайта».
Обратите внимание на код, который находится на первой строчке:
Приветствую дорогой мой подписчик,читатель или просто случайно зашедший прохожий!В этом посте я решил затронуть тему которая интересует многих начинающих вебмастеров,а также просто желающих видоизменить шапку (верхушку) своего недавно установленного шаблона…
Который мы с вами установили в прошлой статье Как поменять шаблон (дизайн) на сайте ucoz .В итоге моих рассуждений в этой статье у меня вышел вот такой дизайн (все картинки кликабельны) :-
В котором я буду сейчас менять шапку,т.е верхнюю часть этого шаблона!Для этого прежде всего вам понадобится узнать размер вашей шапки.Размер шапки вы можете узнать двумя способами:
Создание адаптивного заголовка
Шаг 1) добавить HTML:
Пример
<div class=»header»> <a href=»#default» class=»logo»>CompanyLogo</a>
<div class=»header-right»> <a class=»active» href=»#home»>Home</a>
<a href=»#contact»>Contact</a> <a href=»#about»>About</a>
</div></div>
Шаг 2) добавить CSS:
Пример
/* Style the header with a grey background and some padding */.header {
overflow: hidden; background-color: #f1f1f1; padding: 20px
10px;}/* Style the header links */.header a { float:
left; color: black; text-align: center; padding:
12px; text-decoration: none; font-size: 18px;
line-height: 25px; border-radius: 4px;}/* Style the logo
link (notice that we set the same value of line-height and font-size to
prevent the header to increase when the font gets bigger */
.header a.logo
{ font-size: 25px; font-weight: bold;}/*
Change the background color on mouse-over */.header a:hover {
background-color: #ddd; color: black;}/* Style the
active/current link*/.header a.active {
background-color: dodgerblue; color: white;}/* Float the
link section to the right */.header-right {
float: right;}/* Add media queries for responsiveness — when the
screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
.header a { float: none; display:
block; text-align: left; }
.header-right { float: none; }}
Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.
❮ Назад
Дальше ❯
Заголовок таблицы
Существует тег для создания заголовка таблицы и тег для создания заголовка столбца.
Для создания заголовка таблицы используется тег <caption>. Он идет сразу после тега <table> и задает название таблицы.
Для создания заголовка столбца используется тег <th> (от англ. table head — заголовок таблицы).
Все это немного запутано, правда? Давайте разбираться на примере.
<table border="1" bordercolor="grey"> <caption>Таблица сотрудников фирмы</caption> <tr> <th>ФИО</th> <th>Должность</th> </tr> <tr> <td>Иванов Иван Иванович</td> <td>Директор</td> </tr> <tr> <td>Петрова Любовь Николаевна</td> <td>Главный бухгалтер</td> </tr> </table>
Результат.
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Таблица по центру
Часто возникает необходимость выровнять таблицу по центру документа. Тут есть два варианта (как и с границей).С помощью HTML-кода добавить атрибут align со значением center тега <table>.
<table border="1" bordercolor="grey" align="center">
Этот вариант применим если нам нужно выровнять по центру одну таблицу. Если же нам нужно выровнять по центру все таблицы, тогда лучше применить CSS-код.
<style>
table { margin:0 auto; }
</style>
Размер таблицы
Если вы не указываете размер таблицы, то он определяется количеством текста (или иного контента) внутри. проще говоря таблица растягивается по размеру контейнера в котором она находится.
При этом можно указать размеры таблицы в пикселях, где width — ширина таблицы, height — высота таблицы. Например, сделаем нашу таблицу шириной 400 пикселей.
<table border="1" width="400"> <tbody> <tr> <th>ФИО</th> <th>Должность</th> </tr> <tr> <td>Иванов Иван Иванович</td> <td>Директор</td> </tr> <tr> <td>Петрова Любовь Николаевна</td> <td>Главный бухгалтер</td> </tr> </tbody> </table> </div>
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Более удобно задавать размер таблицы в процентах. В таком случае таблица становиться адаптивной. Изменим значение widthн равным 100%. Длинна будет адаптироваться в зависимости от контента. Результат будет следующим.
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Размер шрифта
Размер шрифта в таблице можно измять двумя способами. Наверное вы уже догадались какими.
С помощью HTML-кода можно изменять размер и начертание текста во всей таблице, но я рекомендую делать это с помощью CSS. А с помощью HTML менять шрифт в отдельных частях. Давайте изменим шрифт с помощью тега <span> в отдельной ячейке.
<table border="1" width="100%"><caption>Таблица сотрудников фирмы</caption> <tbody> <tr> <th>ФИО</th> <th>Должность</th> </tr> <tr> <td><span style="color: red; font-size: x-large; >Иванов Иван Иванович</span></td> <td>Директор</td> </tr> <tr> <td>Петрова Любовь Николаевна</td> <td>Главный бухгалтер</td> </tr> </tbody> </table> </div>
Результат.
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Теперь воспользуемся CSS для того что бы изменить шрифт в этой таблице.
<style>
.table-primer td,th{font-size:12px;font-family: 'Times New Roman'; }
</style>
<table class="table-primer" border="1" width="100%"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th>ФИО</th>
<th>Должность</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>
</div>
Результат.
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Здесь мы указываем что весь текст в таблице должен быть размером 12px, а шрифт — ‘Times New Roman’.
Выравнивание текста
Выровнять текст в таблице можно несколькими способами. Рассмотрим выравнивание с помощью HTML.
Разбираемся на примере заголовком столбцов. Горизонтальное выравнивание осуществляется с помощью атрибута align. Выровняем заголовки столбцов по центру.
<table border="1" width="100%"><caption>Таблица сотрудников фирмы</caption> <tbody> <tr> <th align="center">ФИО</th> <th align="center">Должность</th> </tr> <tr> <td>Иванов Иван Иванович</td> <td>Директор</td> </tr> <tr> <td>Петрова Любовь Николаевна</td> <td>Главный бухгалтер</td> </tr> </tbody> </table>
Теперь заголовки столбцов (ФИО и Должность) выровнены по центру.
Проценты — очень гибко, но всегда нужен родительский элемент
Кажется, что vh и vw — это и есть те самые проценты от ширины экрана и что можно обойтись без обычных процентов. Но на самом деле просто проценты в вёрстке тоже используются, но с одним важным моментом:
Чтобы использовать проценты, нужен родительский элемент, от которого эти проценты будут считаться.
Родительский элемент — тот, внутри которого находятся другие наши элементы. Например, мы хотим сделать на странице блок шириной 500 пикселей:
У этого блока есть точный размер, который браузер может взять или посчитать. Теперь внутри этого блока мы легко можем расположить свои блоки в тех же процентах, что и в предыдущем примере:
- первый блок — 10%;
- второй блок — 20%;
- третий — 50%.
Блок занял свои 500 пикселей, а внутри мы поделили его по процентам
Если мы явно не указали размер родительского элемента, то браузер постарается угадать его или посчитать самостоятельно. Но получится это не всегда.
Размер по умолчанию или внутренний размер
Элементы HTML имеют размеры по умолчанию, заданные до того, как на них повлияет какое-либо правило CSS. Простой пример — изображение. Изображение имеет ширину и высоту, определенные в файле изображения. Этот размер называется — внутренний размер, он исходит из самого изображения.
Если вы разместите изображение на странице и не измените его высоту и ширину, используя атрибуты тега или CSS, оно будет отображаться с использованием этого внутреннего размера. В примере ниже, мы установили для изображения рамку, чтобы вы могли видеть размер файла.
С другой стороны, пустой не имеет собственного размера. Если вы добавите в свой HTML-код без содержимого, а затем установите для него рамку, как мы это делали с изображением, вы увидите линию на странице. Это схлопнувшиеся границы элемента — содержимое, которое могло бы удерживать ее в открытом состоянии, отсутствует. В нашем примере ниже эта граница растягивается на всю ширину контейнера, потому что это элемент блочный, поведение которого должно быть вам знакомо. У него нет высоты, потому что нет содержимого.
В приведенном выше примере попробуйте добавить текст внутри пустого элемента. Этот текст теперь становится охваченным границами, потому что высота элемента определяется содержимым. Следовательно, размер этого устанавливается размером содержимого. Как и в предыдущем примере, этот размер является внутренним размером — размер элемента определяется размером его содержимого.
МЕНЮ
Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок
Гибрид резинового и фиксированного макета
На практике гораздо чаще, чем полностью резиновый макет, используется гибрид резинового и фиксированного макета. Он дает разработчику больший контроль над графическими элементами, чем полностью резиновый, и в то же время сохраняет главное преимущество резинового макета – адаптивность под каждого пользователя. Также в гибридном макете допускается фиксирование заданного при проектировании минимального разрешения (обычно это 1024*768), что дает при меньшем разрешении горизонтальную прокрутку и позволяет всем элементам дизайна оставаться на своих местах, не перекрывая и не налезая друг на друга при изменении размера окна.
Ниже приведены примеры различной комбинации фиксированных и резиновых частей в макетах.
На приведенные выше примерах сайтов фиксированную ширину имеют элементы шапки сайта, позиционированные по краям, а также боковые колонки. Центральная часть с контентом растягивается на всю ширину экрана пользователя.
На данном сайте фиксировано изображение и меню в шапке, а также боковое меню и колонка новостей между меню и основным текстом. Область с основным текстом растягивается по ширине.
Здесь фиксированную ширину имеют боковые колонки, а также меню снизу. Фоновая картинка меняется в зависимости от разрешения экрана пользователя.
Послесловие
Всё очень просто!
Где лучше всего искать изображения для создания всевозможных шапок, уже сказал в начале страницы. Вспомнить:
Мне нужен был нарядный, но только НЕ яркий рисунок, чтоб он не отвлекал от контента страницы, но главное — чтобы он
подходил по смыслу к названию сайта.
Название же всего сайта — «Старатель Интернета».
Вот я и подбирал фоновый рисунок для его шапки, как говорится: «по образу и подобию».
Но причём же здесь тогда «звёздное небо»?!
Так образно изображают связь между людьми, т.е. интернет.
А так те же самые связь и интернет выглядят схематично.
Ну а это шапка моего сайта.
Думаю, что из показанных выше изображений понятно, что такой фоновый рисунок для шапки выбран отнюдь НЕ случайно, и названию сайта он соответствует полностью!
* * *
Информация о том, как сделать шапку сайта, актуальна как в теме использования «Фотошоп», так и в разделе «Учебные сайты»,
откуда я сделал прямые переходы на эту страницу. Соответственно, вернуться в упомянутые большие разделы можно тоже прямо по нижнему мини-навигатору.
Присваивание определенного размера
Конечно, мы можем задать элементам нашей страницы определенный размер. Размер, который присваивается элементу (содержимое, которого затем должно соответствовать этому размеру), называется внешним размером. Возьмите наш из примера выше и установите ему специальные значения и и теперь он будет иметь эти размеры, независимо от того, какого размера содержимое в него помещается. Как мы узнали в нашем предыдущем уроке о переполнении, заданная высота блока может вызвать переполнение содержимого, если размер содержимого больше, чем внутреннее пространство элемента.
Из-за этой проблемы перекрытия, жестко задавать высоту элементов с помощью длины или процентного соотношения — это то, что нужно делать с большой осторожностью. Во многих отношениях проценты действуют как единицы длины, и, как мы , они часто могут использоваться как взаимозаменяемые с длиной
При использовании процентов вы должны знать, от чего этот процент рассчитывается. В случае блока внутри другого блока, если вы зададите дочернему блоку процентную ширину, это будет процент от ширины родительского контейнера
Во многих отношениях проценты действуют как единицы длины, и, как мы , они часто могут использоваться как взаимозаменяемые с длиной. При использовании процентов вы должны знать, от чего этот процент рассчитывается. В случае блока внутри другого блока, если вы зададите дочернему блоку процентную ширину, это будет процент от ширины родительского контейнера.
Это потому, что проценты рассчитываются в зависимости от размера содержащего элемент блока. Если процентное соотношение не применяется, наш будет занимать 100% доступного пространства, так как это элемент блочного типа. Если мы зададим ему ширину в процентах, он займет процент от пространства, которое он обычно заполняет.
Если вы установите и в процентах, вы можете заметить странное поведение. В приведенном ниже примере у нас есть блок. Мы присвоили внутреннему блоку 10% и 10%. Padding и margin сверху и снизу имеют тот же размер, что и margins слева и справа.
Например, вы можете ожидать, что процентное значение верхнего и нижнего margins будет в процентах от высоты элемента, а процентное левое и правое margins — в процентах от ширины элемента. Тем не менее, это не так!
При использовании margins и padding, заданных в процентах, значение рассчитывается на основе inline размера блока — следовательно, ширины при работе с горизонтальным языком. В нашем примере все поля и отступы составляют 10% width. Это означает, что вы будете иметь margins и padding одинакового размера по всему полю. Этот факт стоит запомнить, если вы действительно пользуетесь процентами.
Эластичный макет
При использовании эластичного макета размер основного контейнера и других (важных) элементов задается в em. Em прямо пропорциональны размеру текста или шрифта. Следовательно, при увеличении размера текста на странице, размеры разделов, заданные в em, увеличатся пропорционально.
Преимущества эластичного макета
- В случаи правильного исполнения макет может быть очень и очень дружественным пользователю (user-friendly). Цель – увеличивать или уменьшать все в зависимости от настроек пользователя;
- Эластичный макет понравится и разработчикам, предпочитающим фиксированный макет, и разработчикам, предпочитающим резиновый макет, так как он объединяет в себе преимущества обоих.
Недостатки эластичного макета
- Даже с учетом всех преимуществ, эластичный макет может стать источником проблем с юзабилити. Много времени уйдет на разработку и тестирование макета, чтобы сделать его подходящим для всех пользователей;
- Для разработки такого макета приходится приложить намного больше усилий и времени, чем для двух других, что не всегда оправдано;
- Зависимо от специфики, некоторые эластичные макеты требуют дополнительных стилей и «хаков» для IE6.
Примеры эластичных макетов
Эластичный и резиновый макеты очень похожи внешне, настолько, что их сложно отличить друг от друга. Однако эластичные макеты вместо процентов используют em и больше всего зависят от размера шрифта, установленного в настройках пользователя.
Создаем форму для поиска в шапке сайта
С логотипом разобрались, теперь нам надо разместить в шапке форму для поиска по сайту. Тут так же ничего сложного, создаем модуль с типом «Поиск», если кто не помнит, как создать модуль то читайте эту статью.
Настраиваем его по своему усмотрению, я в свою очередь оставил параметры без изменений, разве что добавил текст, который будет отображаться в строке поиска.
Осталось определиться с позицией, в которой будет выведен наш модуль поиска. Как посмотреть доступные позиции модулей в шаблоне Joomla был посвящен , поэтому повторяться не буду. Я выбрал позицию с именем «position-0», после чего сохранил изменения.
Теперь осталось изменить позицию и оформление главного меню.
ФОРМЫ
Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения
