Особенности верстки | htmlbook.ru
Хотя прародителем верстки веб-страниц является верстка полиграфических материалов, между ними есть одно важное различие. Любая полиграфия вроде буклета, листовки или брошюры печатается на листах установленного размера и в пределах одного тиража имеет лишь незначительные или даже незаметные глазу различия. Веб-страница же запускается на компьютере под управлением клиентской программы называемой браузером. Понятно, что операционная система, ее настройки и собственно сам браузер отличается от компьютера к компьютеру. Из чего следует банальный вывод, что один и тот же документ сайта по-разному отображается у каждого пользователя.
Напрашивается вопрос, можно ли сделать так, чтобы веб-страница отображалась одинаково? Учитывая, сколько придется принять во внимание разных неоднозначных факторов, следует сказать, что нет, нельзя. Поэтому задача верстки веб-страниц формулируется так: сформировать документ, который бы корректно отображался с небольшими различиями на основных платформах и в браузерах. Корректно означает, что соблюден исходный замысел автора, воплощен требуемый дизайн документа, и он показывается в браузере без ошибок.
Чтобы реализовать указанную задачу надо понимать, как вообще происходит верстка веб-страниц и соизмерять свои идеи с их исполнением. Далее описаны некоторые особенности, которые имеют большое значение при верстке документов сайта.
Ширина документа
Изначально разработчику сайта ширина окна браузера пользователя неизвестна, поскольку она может меняться в самых широких пределах. Ширина зависит от разрешения монитора, длины его диагонали, размера окна и еще некоторых варьируемых данных. Иными словами предугадать ее заранее простыми средствами не представляется возможным. С учетом этой особенности утвердилось два способа верстки: фиксированный и «резиновый».
Фиксированный макет
В данном случае действуем от обратного и устанавливаем общую ширину макета жестко заданной и равной определенной величине. Если взять некоторую обобщенную статистику посетителей сайтов и посмотреть, какое разрешение монитора они преимущественно используют, то узнаем, что это 1024х768 пикселов. Возьмем за ориентир 1000 пикселов, тогда общая ширина макета за вычетом вертикальной полосы прокрутки и рамки браузера окажется 800×990 пикселов. На этот размер ориентируемся и устанавливаем ширину макета, например 900 пикселов.
Преимущество такой схемы следующее. Раз общая ширина макета точно известна, то мы можем легко подгонять под нее дизайн и делать изображения уже известной ширины. В целом подобная верстка приближается к верстке печатного буклета, и в том и другом случае ширина носителя информации строго задана, за счет чего верстка хоть частично, но упрощается.
Недостаток, который инкриминируют этому виду верстки фактически один — недостаточно эффективное использование свободной площади. Действительно, для монитора с большо-о-о-й диагональю или высоким разрешением экрана документ будет смотреться по-другому, чем на предполагаемых 800 пикселах. На рис. 1 показано, как выглядит макет в таком случае.
Рис. 1. Макет фиксированной ширины с размещением по левому краю
Справа появляется широкая пустая полоса, размер которой зависит от разрешения экрана пользователя и диагонали его монитора. Чтобы хоть как-то уменьшить пустое пространство, макет обычно помещают по центру окна браузера (рис. 2).
Рис. 2. Макет фиксированной ширины с размещением по центру
«Резиновый» макет
Этот вид макета основывается на том, что в качестве одной из единиц измерения выступают проценты. Общая рабочая ширина окна браузера — 100%, и колонки макета в сумме не должны ее превышать, поэтому для удобства, как правило, везде применяют процентную запись. При изменении размеров окна происходит переформатирование данных страницы, чтобы они вписались в новую ширину (рис. 3).
Рис. 3. Веб-страница занимает всю отведенную ширину
Этот вид верстки набирает все большую популярность и практически все известные сайты выбрали именно его в силу того, что эффективно задействуется вся площадь веб-страницы. Но следует сразу отметить некоторые особенности и недостатки, присущие «резиновой» верстке.
- Хотя веб-страница и подстраивается под ширину окна браузера, при достижении некоторой величины читать текст становится неудобно — строки слишком длинные и глаза устают по ним бегать. Впрочем, браузер можно свернуть в окно, подобрав его комфортный размер.
- Верстать «резиновый» макет сложнее, чем аналогичный, но фиксированной ширины. Это связано с тем, что приходится учитывать множество дополнительных факторов и знать некоторые приемы верстки. К тому же, популярные браузеры неоднозначно трактуют некоторые параметры и в них «резиновый» макет может отображаться по-разному. Говоря проще, знать о правилах верстки надо больше.
- Любой макет имеет некоторую минимальную ширину, при достижении которой веб-страница «рассыпается» или появляется горизонтальная полоса прокрутки. Например, если в документ вставлен рисунок шириной 600 пикселов, то при уменьшении окна до этой величины браузер начнет отображать полосу прокрутки.
- «Резиновый» дизайн характеризуется активным использованием фоновых изображений, которые по горизонтали собираются без швов встык. Действительно, изменить без потери качества ширину рисунков не получится, а вот «подложить» под них фон — всегда пожалуйста.
Высота документа
Исторически сложилось, что пролистывание большого документа на компьютере происходит сверху вниз. Для удобства листания предназначены вертикальные полосы прокрутки, клавиатурные комбинации, колесо прокрутки мыши. А вот перемещение по горизонтали происходит не так удобно, поэтому горизонтальной полосы прокрутки быть не должно. Из чего следует, что веб-страница должна вписываться в окно браузера по ширине, но никак не по высоте, которая может изменяться в очень широком диапазоне. На рис. 4 видно, что реальная высота документа не ограничена рамками браузера, но в окне показывается лишь часть страницы.
Рис. 4. Отображение документа в окне браузера по высоте
В принципе, чем больше на странице информации, и, следовательно, больше высота документа, тем сложнее находить нужные данные. Поэтому текст структурируют, разбивают на блоки и каждому из них дают свой заголовок, чтобы взгляду читателя было за что зацепиться.
Также следует учесть, что объем статей на сайте может достаточно сильно различаться между собой. При этом будет меняться и высота страницы, поэтому следует заранее побеспокоиться о том, чтобы макет отображался без ошибок, несмотря на различное значение высоты.
Объекты веб-страницы прямоугольны
Все объекты на веб-странице имеют прямоугольную форму. Этот простой постулат не всегда согласуется с тем, что мы видим в действительности, поэтому следует сделать пояснения. В отличие от традиционной верстки (речь идет о полиграфических материалах), где в документ можно вставлять любые объекты, в том числе и векторные фигуры произвольной формы, верстка веб-страниц имеет ряд ограничений. К числу ограничений относится и то, что добавляемые объекты прямоугольны. Причем это относится к их форме, но не к содержимому, благодаря чему требуемый нам дизайн можно конструировать с помощью набора изображений. На рис. 5 показана картинка весьма неправильной формы. Но из-за того, что фон у этого рисунка совпадает с фоном веб-страницы, исходная прямоугольность изображения не видна.
Рис. 5. Изображение на рисунке может иметь произвольную форму
Однако стоит добавить вокруг рисунка рамку, как становится понятно, что изображение
все-таки прямоугольно (рис. 6). Например, если включить обтекание картинки
текстом, то он будет обходить ее именно по границе рамки.
Рис. 6. Но сам рисунок остается прямоугольным
Данная особенность породила некоторые техники, связанные с версткой, которые перечислены далее.
Активное использование рисунков
Рисунки не только применяются для иллюстрации текста, но и выполняют на сайте много различных ролей, например, используются для создания привлекательного дизайна, служат распоркой между ячейками таблицы, создают градиентные заливки, фоновые изображения и т.д.
Разрезание изображения на фрагменты
Один рисунок может занимать слишком большую исходную площадь. Разрезав его на прямоугольники, получим замечательный конструктор, в котором одни фрагменты изображения допускается заменять текстом, другие анимацией, а третьи модифицировать «на лету». Таким образом, имеем в своем распоряжении средство для обхода прямоугольной природы изображений, ведь в «склеенном» рисунке может недоставать некоторых фрагментов, уголков, например.
Применение фонового рисунка
Фоновый рисунок удобен тем, что он может заполнять всю отведенную ширину или высоту под блоком. Это позволяет создавать линии или другие декоративные элементы, которые привязываются к ширине или высоте текста и не зависят от размеров окна. К тому же поверх фона можно накладывать текст, что также расширяет возможности по дизайну веб-страниц.
Картинки вместо текста
Если средства верстки имеют определенные ограничения, то почему бы не создать текст в графическом редакторе и не вставить его в качестве картинки или Flash? Это гарантирует, что текст сохранит свой вид и начертание несмотря ни на какие внешние условия. Однако здесь имеется и оборотная сторона — рисунки занимают больший объем, чем рядовой текст, их сложнее править, они не индексируются поисковыми машинами, их показ пользователи могут отключить. В общем, недостатков масса, поэтому изображения на сайте хотя и применяют вместо текста, но достаточно ограниченно. Например, для заголовка сайта.
Веб верстка в стиле «Газетная страница»
Верстка веб страницы в «газетном» стиле смотрится очень необычно и интересно. Такая верстка может подойти разным веб сайтом (или отдельным их разделам), но самое интересное, что сделать «газетную» верстку достаточно легко, зная немного CSS3 и HTML5.Что же понадобится для того, чтобы добиться вида «газетной» или «журнальной» веб страницы?
Основными характеристиками таких страниц является разбиение текста на колонки, врезка небольшого фрагмента текста крупным шрифтом где-то в середине статьи, линии-разделители, находящиеся между колонками. На газетных страницах также вставляются фотографии. Можно выбрать черно-белые фото и тогда верстка будет напоминать газетную страницу. Если выбрать цветные фотографии, то верстка будет больше похожа на журнальную.
Я возьму две черно-белые фотографии и текст о Мерлин Монро. Все это Вы можете найти в дополнительных материалах к уроку или использовать свои материалы.
1. Первое, что нам нужно сделать – это создать новый html5 документ, в котором мы будем использовать html5 теги. Внутри тегов
Также тег article будет иметь заголовок (тег header) и область для врезки отрывка из статьи (тег aside). Где-то между абзацами текста нужно будет вставить картинки (заранее создайте для них папку img и сохраните картинки в нее).
Также создадим файл таблицы стилей и дадим ему имя «style.css». Его нужно сохранить в той же папке, что и сам html файл и подключить к нему (если Вы будете сохранять файл стилей в отдельной папке, не забудьте проверить правильность пути к нему).
На коде ниже Вы можете увидеть всю структуру html файла. Я только не вставляла текст в демонстрационный код, чтобы не перегружать его. Думаю, с этим у Вас не возникнет проблем (если что, то Вы всегда можете заглянуть в файл в дополнительных материалах).
<!doctype html> <html> <head> <meta charset="windows-1251"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Untitled Document</title> </head> <body> <article> <header><h2>Заголовок статьи</h2> <h5>Подзаголовок</h5> </header> <p>Здесь должен быть первый абзац текста</p> <img src="img/1.jpg"> <p>Второй абзац текста</p> <p>Третий абзац и так далее</p> <img src="img/2.jpg"> <p>абзац текста</p> <aside>Врезка из статьи</aside> <p>абзац текста</p> </article> </body> </html>
Положение картинок в тексте и тег для врезки куска статьи в текст Вы можете регулировать в зависимости от величины Вашей статьи и от того, какой Вы хотите ее видеть. Вы можете это делать в процессе работы, находя наилучший вариант.
Демонстрационный код выше дан для того, чтобы Вы поняли принцип построения страницы.
Если этого будет Вам недостаточно, Вы можете заглянуть в дополнительные материалы и посмотреть код демо страницы там.
Сейчас наша страница будет выглядеть вот так:
2. Теперь займемся стилями нашей веб страницы.
Переходим в файл «style.css» и для начала пропишем основные стили для страницы. Мы придадим цвет для тега body, а также для тега article, где находится наша статья. Также настроим параметры ширины, позиционирования основных элементов и шрифта.
Пропишите в файле «style.css» следующий код:
body{
background:#444;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:62.5%;
line-height:1.4em;
}
article{
position:relative;
margin:auto;
width:920px;
padding:20px;
background:white;
box-shadow:0px 0px 10px #333;
}
article p{
font-size:1.2em;
line-height:1.6em;
}
Теперь наша страница выглядит так:
3. Теперь нужно разделить весть наш контент на 2 колонки (кстати, Вы можете делить и на больше колонок. Просто меняйте значения параметра column-count). А также нужно указать расстояние между колонками. Эти свойства нужно прописывать, используя присавки для разных браузеров (так мы обеспечим кроссбраузерность нашей веб страницы). Итак, продолжите стили для article следующим кодом:
-webkit-column-count:2; -moz-column-count:2; -ms-column-count:2; -o-column-count:2; column-count:2; -webkit-column-gap:1em; -moz-column-gap:1em; -o-column-gap:1em; -ms-column-gap:1em; column-gap:1em;
Если мы перезагрузим браузер, то увидим следующую картину:
4. Настало время поработать с заголовком нашей статьи. Нужно сделать его размер гораздо крупнее, чем текст самой статьи и сделать все буквы заглавными. Также расположим его по всей ширине страницы и сделаем нижнюю рамку.
У нас есть также и небольшой подзаголовок. Его мы выровняем про правому краю.
article header{
position:relative;
display:block;
-webkit-column-span:all;
-moz-column-span:all;
-o-column-span:all;
-ms-column-span:all;
column-span:all;
border-bottom:2px solid #333;
}
article header h2{
font-size:8em;
line-height:1em;
font-weight:bold;
text-transform:uppercase;
margin:0;
padding:0;
}
article header h5{
text-align:right;
padding:0;
margin:0;
}
Немного о поддержке браузерами свойства column-span
Свойство column-span определяет сколько колонок будет охватывать данный элемент.
Некоторое время назад оно не поддерживалось ни одним из популярных браузеров. Сегодня ситуация значительно изменилось и это свойство прекрасно работает во всех популярных браузерах кроме Firefox.
Будем надеяться, что браузер Firefox тоже в скором времени будет поддерживать свойство column-span.
Однако, на данный момент наша страница во всех остальных браузерах будет выглядеть вот так:
А в браузере Firefox вот так:
Вы должны помнить об этом и тестировать страницу во всех браузерах. Даже если какое-то из свойств не поддерживается браузером, нужно постараться чтобы страница выглядела красиво при любом варианте.
5. Теперь нам нужно сделать врезку в статью. Для этого обычно выбирается наиболее интересный кусочек из статьи, копируется, вставляется где-то в тексте, выделяясь более крупным шрифтом другого стиля (в нашем случае он находится в теге aside). При желании можно также поменять и цвет у этого кусочка. Все зависит от Вашего дизайна.
Итак, пропишем для тега aside следующие стили:
article aside{
position:relative;
display:block;
font-size:2em;
line-height:1.2em;
font-style:italic;
-webkit-column-span:all;
-moz-column-span:all;
-o-column-span:all;
-ms-column-span:all;
column-span:all;
border-top:2px solid #333;
border-bottom:2px solid #333;
margin-bottom:20px;
}
Теперь он будет выглядеть вот так:
Здесь происходит то же самое, что и в случае с заголовком.
К сожалению, пока что в браузере Firefox это будет выглядеть несколько иначе:
6. Остался последний штрих. Нужно сделать линии между колонками нашей статьи. А делается это достаточно просто.
Необходимо к стилям тега article добавить следующие стоки:
-webkit-column-rule: 1px solid #333; -moz-column-rule: 1px solid #333; -o-column-rule: 1px solid #333; -ms-column-rule: 1px solid #333; column-rule: 1px solid #333;
Перезагрузите браузер и посмотрите на результат:
Вот так просто можно сделать газетную или журнальную страницу у себя на сайте.
С каждым днем свойства CSS3 поддерживаются разными браузерами в более полном объеме. И конечно же, использовать их уже сейчас имеет смысл.
Оставляйте Ваши комментарии и делитесь этим уроком с друзьями с помощью кнопок социальных сетей. Это будет расценено как благодарность.
А также подписывайтесь на обновление блога, если Вы еще не подписались. Я обещаю Вам много интересных и полезных статей и уроков. Все о веб!
Успехов Вам и до встречи в следующих уроках!
Как правильно сверстать журнал. Все этапы от верстки до офсетной и цифровой печати
Если вы не готовы взяться за верстку журнала, то можете обратиться к нам и наши верстальщики профессионально выполнят работу. Верстая журналы в нашей типографии, вы получаете скидку на печать журналов!
Автор статьи, дизайнер отдела верстки типографии «Роликс», Некрасов А.
Верстка журналов и другой многостраничной полиграфической продукции – это не только огромная наука, со своими правилами, накопленные целыми поколениями книгопечатников каноны, но и искусство, требующее обладанием чувства стиля, вкуса, ритма и позволяющее создавать не только содержательные, но радующие восприятию глаз произведения.
Вёрсткой обычно принято именовать процесс формирования печатной страницы изделия. Понятно, что осуществляется сей процесс посредством компьютера в специальных программах верстки, таких как QuarkXPress и Adobe InDesign. Какая лучше, зависит от личных предпочтений верстальщика. Заметим только, что первая – QuarkXPress – имеет на сегодня меньшие функционал и удобство в работе, а также ориентирована больше на электронные издания, тогда как вторая – Adobe InDesign – на изготовление полиграфической продукции. Использование Microsoft Word и Publisher не только не может рассматриваться как альтернатива данным приложениям, но и верстать в них просто-напросто запрещается, так как получить на выходе что-либо полностью готовое к печати представляется затруднительным.
ОСНОВНЫЕ СОВЕТЫ ПО ВЕРСТКЕ ЖУРНАЛА:
- не верстать разворотами, а только постранично (чтобы составить в программе страницы разворотами, используйте опцию Spreads).
- Формат документа должен строго соответствовать готовому размеру изделия.
- Не злоупотребляйте ложными разворотами (изображениями и заголовками, переползающими с левой полосы на правую; при конечной сборке изделия изображение слева на развороте будет не совпадать с изображением справа – актуально для ВСЕХ типов скрепления).
- Не скупитесь на поля, больше “воздуха” – это красиво! Соблюдайте закон вылетов: изображение выводится за обрез на 5 мм, дабы после сборки брошюры не осталось белых полосок по краям страницы.
ГРАФИЧЕСКИЕ ИЗОБРАЖЕНИЯ И ВЕКТОРНАЯ ГРАФИКА.
Графические изображения, используемые в вёрстке, можно поделить на растровые и векторные.
Растровую графику (условно, фотографии) для публикаций редактировать придётся только в Adobe Photoshop, тут альтернатив нет и, скорее всего, не будет. Учтите, что изображения завёрстываются в 100% размер и разрешение, какие заложены в макете.
Векторная графика готовится в Adobe Illustrator (предпочтительнее) либо в CorelDRAW. Выбор, разумеется, в пользу первой, так как с файлами второй что Quark, что InDesign не работают вообще, графику из Corel придётся переводить в файлы формата *.eps (универсальный формат описания графических изображений), которые затем будут вставляться в макет. Здесь нюанс такой: эффекты, генерируемые Corel после импорта в *.eps иногда выглядят не так, как задумывалось, что обусловлено особенностями обработки PostScript в Corel.
ВНИМАНИЕ!
Ни в коем случае не используйте векторную программу в качестве растрового редактора: в некоторых случаях эффекты наложения или прозрачности для растровых изображений в векторных программах могут сыграть с вами злую шутку – от появления артефактов на растре до пропадания изображения.
КАК СДЕЛАТЬ ОБЛОЖКУ ЖУРНАЛА?
Этой проблеме (именно так – проблеме) уделяем особое внимание, так как макеты, изготавливаемые для разных типов скрепления (скоба, КБС (клеевое бесшовное скрепление), твёрдый шитый переплёт) имеют свои особенности. Например, для КБС потребуется дополнительно сверстать корешок, предварительно узнав в типографии его толщину, а для твердого переплёта помимо корешка придётся продолжить изображение с обложки на загиб вокруг переплёта. Если этого не сделать сразу, потом придётся тратить лишнее время и нервы на доработку.
КАК ПРАВИЛЬНО СВЕРСТАТЬ СТРАНИЦУ ЖУРНАЛА. КАК ПОДОБРАТЬ ШРИФТЫ И ЧТО ТАКОЕ СЕТКА?
Шрифтов в макете не должно быть чрезмерно много, обычно их два-три, не более. Один – основной, которым набирается весь текст публикации, и один-два дополнительных, на заголовки и подзаголовки. Также важны кегль (размер) шрифта и междустрочный интервал (интерлиньяж).
Модульная сетка – это, проще говоря, разметка страницы под вёрстку: сколько отводится места на поля, на заголовки и картинки, расположение колонтитулов; само собой, принципы симметрии тоже никто не отменял, они должны обязательно учитываться.
Когда все этапы вёрстки закончены, следует передать для проверки макет профессиональному корректору, так как орфографические ошибки или глупые описки в самом неподходящем месте, например, в заголовке аршинным шрифтом (да-да, бывает и такое!), могут свести на нет все старания, затраченные выше.
Итак, макет журнала готов, в каком же формате предоставлять навёрстанное в типографию? Данный вопрос лучше обсудить там, где будет печататься журнал. Оптимально – файлы в формате pdf, главное, чтобы они были грамотно выведены (как правильно сгенерировать pdf для сдачи в производство – см. технические требования к макетам). Сборка вёрстки журнала тоже приветствуется, главное, чтобы грамотно была собрана вёрстка (присутствовали все графические файлы, обязательно приложены шрифты и сгенерированы файлы экспорта для того, чтобы вашу вёрстку можно было открыть в ранних версиях программ, если типография использует не последние версии).
P.S.
Не перемените воспользоваться техническими требованиями для подготовки макетов к офсетной и цифрой печати, скачать которые можно в свободном доступе на сайте типографии. Пренебрежение ими в начале работы над макетом зачастую может привести к ПОЛНОЙ переделке макета впоследствии.
Помните, что заниматься подготовкой макета должен профессиональный верстальщик, которому все текстовые и графические материалы должны быть переданы ЗАРАНЕЕ, до начала технической работы, так как замена материалов повлечёт за собой временные и материальные затраты.
Также напоминаем, что полиграфия находится на стыке производства и искусства, и отношение к этому факту должно быть соответствующим.
онлайн конструктора верстки страниц сайта
C тех пор как в Интернет массовую популярность получила тема создания собственных блогов, кто только не открыл для себя этот новый род занятий: от школьника до пенсионера. Причем большинство из них напрочь забыли о том, что чтобы достичь в чем-то хороших успехов, надо либо хорошо разбираться в этой сфере (по крайней мере иметь начальное представление) либо иметь много денег, чтобы платить тому, кто разбирается и сможет помочь.
Создавать хорошие сайты не такое уж простое дело как может показаться. Системы управления сайтами (CMS) конечно же способны значительно облегчить работу, однако всякий шаблон надо редактировать, удалять лишние исходящие ссылки, править под себя. Еще больше знание основ верстки требуется при создании HTML страниц с нуля. Даже для вебмастера верстка страниц с нуля представляет собой монотонный шаблонный процесс, который не лишним было бы как-то упростить.
Сегодня рассмотрим еще молодой, но весьма перспективный проект, который призван облегчить процесс верстки кода html-страницы. Благодарю наличию визуального конструктора и автоматического выполнения ряда стандартных операций, он поможет быстро сверстать страницу с кроссбраузерным неперегруженным (что немаловажно!) кодом!
Конструктор верстки BuildMak предназначен как для опытных вебмастеров, которые ценят свое время и хотят упростить задачу создания блочной структуры сайта, так и для новичков в деле сайтостроения – всё-таки делать структуру в визуальном конструкторе гораздо проще и быстрей, чем писать теги в текстовом файле ).
После регистрации в системе Вам будет предложено создать новый проект. На бесплатном тарифе (он будет предоставлен по умолчанию) можно создать только один проект, который можно скачать только один раз. Остальные тарифы отличаются между собой размером доступного дискового пространства, числом проектов и их скачиваний.
Сам конструктор верстки выглядит таким образом:
Слева (1) находится панель инструментов для работы с блоками (DIV) и их настройки. По центру (2) расположена рабочая область, выше неё (3) – кнопки создания элементов структуры сайта (div, заголовки, списки, таблицы и пр.), кнопка просмотра проекта в браузере. Справа от рабочей области (4) – дерево элементов, где представлена иерархия всех структурных элементов страницы сайта, а также кнопка их удаления.
По сути, тому кто работал в редакторе DreamWeaver, не составит никакого труда быстро освоиться в BuildMak. Однако последний предоставляет гораздо больше возможности по созданию блочной верстки. Если в DreamWeaver для этого нужно писать код ручками, то здесь всё делается в визуальном конструкторе при помощи кнопок и задания значений: выравнивание блоков на странице, относительно и абсолютное позиционирование, отступы (margin, padding), границы, заливка и пр.
В принципе всё очень легко, но хотя бы базовые знания html и css должны быть, потому что надо обязательно представлять за что отвечают такие параметры как relative, absolute, visibility, Z-index, overflow и пр.
А что же на выходе? После создания страницы Вы скачиваете zip-архив, в котором расположен файл index.html, файл стилей (style.css), папка с картинками (если Вы их использовали). Создатели конструктора BuildMak гордо заявляют о чистоте и кроссбраузерности созданного html кода. Это действительно так – код чистый, без лишнего мусора, но вот вручную придется править некоторые вещи, например, метатеги. Делать это непосредственно в конструкторе пока невозможно, но разработчики обещают очень скоро добавить эту и многие другие возможности, которые позволят верстать код онлайн еще быстрей и удобней!
Обучающее видео по созданию сайта в BuildMak:
Друзья, своими впечатлениями о конструкторе BuildMak делитесь в комментариях. Также можно задавать вопросы по работе сервиса.
Обновлено 08.2019: BuildMak больше не работает.
Автор статьи: Сергей Сандаков, 40 лет.
Программист, веб-мастер, опытный пользователь ПК и Интернет.
Макет страницы
Центр помощи- Структура Дом
- Начиная
- Что нового
- Обзор
- Панель приложений
- Панель
- Библиотека
- Обучающие видео
- Основы с Джоан
- Советы и приемы
- Фаза проектирования
- Свойство
- Элементы воды
- Наружные элементы
- Фаза материалов
- Фаза садовых принадлежностей
- Завершить этап
- Умные данные
- Этап строительства
- ДВОР
- Членство
- Поиск проблемы
макетов страниц, столбцов и разделов | Центр обработки данных и сервер Confluence 7.10
Макет ваших страниц может иметь большое влияние на то, как они читаются, а макеты, при правильном использовании, позволяют размещать текст, изображения, макросы, диаграммы и многое другое для наилучшего визуального воздействия.
Есть два способа изменить макет страницы Confluence:
- Использовать макеты страниц для добавления разделов и столбцов
- Используйте макросы для добавления разделов и столбцов.
Макеты страниц обеспечивают простое визуальное представление макета вашей страницы в редакторе, а макросы более гибкие и позволяют усложнить макет.
Использование макетов страниц
Инструмент макетов страниц позволяет структурировать страницу, используя горизонтальные разделы и вертикальные столбцы. Добавляя несколько разделов с различными конфигурациями столбцов, вы можете очень легко создавать довольно сложные макеты.
Снимок экрана: вид редактора страницы, показывающий три раздела с различными конфигурациями столбцов.
Начните с добавления горизонтального раздела на вашу страницу.
Чтобы добавить раздел:
- Нажмите кнопку « Макет страницы» на панели инструментов.
Появится панель инструментов «Макет страницы». - Выберите Добавить раздел
Новый раздел появится под текущим содержимым, а границы раздела (-ов) обозначены пунктирными линиями (пунктирные линии не видны при просмотре страницы).
Чтобы изменить макет столбца в разделе:
- Поместите курсор в раздел, который хотите изменить
- Выберите макет на панели инструментов макета страницы (например, два столбца или три столбца)
Любой текст, изображения или макросы в вашем разделе не теряются при изменении макета столбца.Когда вы уменьшите количество столбцов, Confluence переместит ваш контент влево. Когда вы увеличиваете количество столбцов, Confluence добавит пустые столбцы справа от вашего существующего контента.
Чтобы переместить раздел в другую часть страницы:
- Поместите курсор в раздел, который вы хотите переместить
- Выберите Переместить вверх или Переместить вниз кнопок
Раздел и все его содержимое будет перемещено выше или ниже других разделов на странице.
Чтобы удалить раздел:
- Поместите курсор в раздел, который вы хотите удалить
- Выберите Удалить раздел
Раздел и все его содержимое будут удалены.
Примечания к макету страницы
- Ширина столбца — Ширина столбцов фиксированная. Если вам нужно более трех столбцов или столбцов определенной ширины, вы должны использовать макросы раздела и столбца, описанные ниже.
- Очень широкие таблицы — Ширина каждого столбца устанавливается в процентах от ширины страницы.Значки в раскрывающемся меню указывают относительную ширину для каждого макета. В большинстве случаев Confluence адаптирует ширину столбцов к ширине страницы. Если в столбце есть слишком широкий для него элемент, вы увидите горизонтальную полосу прокрутки при просмотре страницы.
Макросы раздела и столбца
Вы можете использовать макросы раздела и столбца, чтобы добавить на страницу набор столбцов. Макрос раздела определяет область, которая будет содержать столбцы. Вы можете иметь столько разделов, сколько захотите.В каждом разделе вы можете иметь столько столбцов, сколько захотите.
Макросы раздела и столбца полезны, если вы хотите определить конкретный процент или ширину в пикселях для каждого столбца.
Чтобы добавить раздел и несколько столбцов на страницу:
- В редакторе Confluence выберите Insert > Other Macros
- Найдите макрос Section , выберите его и вставьте на страницу
- Выберите Вставить > Другие макросы снова
- Найдите и вставьте столбец макрос
- Добавьте содержимое в столбец
Вставьте столько столбцов, сколько хотите, в раздел.
У вас всегда должен быть хотя бы один макрос столбца в макросе раздела. Использование макроса раздела без макроса столбца может отрицательно повлиять на время загрузки страницы.
Снимок экрана: раздел и два столбца в редакторе
Параметры макроса
Если имя параметра, используемое в формате хранения Confluence или вики-разметке, отличается от метки, используемой в обозревателе макросов, оно будет указано ниже в скобки ( пример ).
Параметры макроса раздела
Параметр | По умолчанию | Описание |
|---|---|---|
Показать границу
| Показать границу 247 | возможность рисовать рамку вокруг раздела и столбцов.
Параметры макроса столбца
Параметр | По умолчанию | Описание | |
|---|---|---|---|
Ширина столбца ширина страницы, деленная поровну на количество столбцов в разделе. | Укажите ширину столбца в пикселях (например, |
Все содержимое раздела должно быть заключено в макрос столбца, иначе макет раздела не будет работать должным образом.
Размер и макет веб-страницы
Высота, ширина и выравнивание страницы
До того, как смартфоны и планшеты стали популярными, веб-дизайнеры создавали страницы с фиксированной шириной, которые работали на экранах наиболее распространенных размеров — обычно 1024 пикселей в ширину и 768 пикселей в высоту. Все изменилось примерно в 2013 году с резким увеличением использования iPhone для просмотра веб-страниц.Сейчас нет однозначного ответа на вопрос «какого размера должен быть мой сайт?» — все сайты должны быть отзывчивыми.
Адаптивный дизайн означает создание веб-страниц, которые адаптируются к различным устройствам и разным размерам экрана. Он использует один и тот же контент, но представляет его по-разному в зависимости от того, используете ли вы мобильный телефон, iPad, ноутбук или настольный компьютер. Он реагирует на различные взаимодействия, такие как состояния наведения для пользователей с помощью мыши и события щелчка для сенсорных экранов, а также изменяет макет в соответствии с доступным дисплеем.
Наличие адаптивного сайта важно не только для максимального удобства посетителей, но и для вашего рейтинга в поисковых системах. В 2015 году Google начал включать степень мобильности сайта в свой алгоритм ранжирования для мобильных устройств. Вы можете использовать их удобный для мобильных устройств инструмент тестирования для проверки своих веб-страниц.
Задачи мобильного дизайна
Большинство планшетов могут без проблем отображать неотзывчивые веб-страницы, но у мобильных устройств есть несколько проблем:
- Форма экрана — большинство пользователей смартфонов держат телефон вертикально, в портретном режиме .Это означает, что экран выше ширины, в отличие от настольного компьютера или ноутбука.
- Размер экрана — у смартфонов очень маленькие экраны по сравнению с настольными компьютерами, поэтому дизайнерам необходимо упростить страницы. Разные модели имеют разные размеры экрана, но, как правило, стремитесь к максимальной ширине 340 пикселей для мобильного портретного дизайна.
- Взаимодействие с пользователем — в мобильных телефонах нет мыши, поэтому эффекты, появляющиеся «при наведении» или «размытии», не работают.
- Навигация — большинство веб-сайтов, как правило, имеют полноразмерную верхнюю панель навигации, которая вообще не работает на смартфоне в портретном режиме.
- Более низкая пропускная способность — это зависит от того, находитесь ли вы в центре города или в сельской местности, но мобильные пользователи, подключенные к сотовой связи (подключающиеся к Интернету с использованием «данных»), могут иметь более низкую скорость Интернета. Вы можете заменить полноэкранное фоновое видео в мобильной версии своего сайта.
Реагирует на помощь
Адаптивный дизайн решает эти проблемы, позволяя дизайнерам адаптировать свои веб-страницы к различным устройствам.Мы используем две основные концепции:
- Гибкие макеты — эти веб-страницы легко масштабируются от размера настольного компьютера до мобильного браузера. Это технически более сложно, потому что для этого требуется, чтобы страница хорошо выглядела при любом мыслимом размере
- Несколько макетов — это более простая версия, в которой разные дизайны создаются для наиболее распространенных размеров экрана, например большие настольные компьютеры, небольшие ноутбуки и iPad, а также мобильные устройства в портретном режиме. Для iPad в портретном режиме может быть промежуточный размер.
Следует иметь в виду, что вам не нужно его использовать только потому, что у вас есть место на экране. Дизайн, который растягивается до полной ширины при любом размере экрана, может стать нечитаемым на очень широких экранах. Лучше всего стремиться к максимальной ширине, которая подходит для дизайна, например, страница шириной 1300 пикселей читается в двух столбцах, но ее ширина примерно такая же, как у большинства людей, которые могут с комфортом прочитать один столбец текста. Нам легче следить за текстом, который обтекает более мелкие блоки.
Нет складки
Важно не зацикливаться на том, как дизайн веб-сайта выглядит на вашем компьютере. Вам нужно подумать, как это будет выглядеть на других устройствах и на чужих компьютерах.
Какие браузеры используют ваши посетители, сколько у них панелей инструментов и закладок, увеличен ли их дисплей, ориентация планшета или телефона и тип экрана, который у них есть, — все это повлияет на цвет, макет и поток страницы. .
Когда экраны были одинакового размера, люди описывали нижний край экрана как «изгиб» и стремились показать наиболее важный контент над ним, чтобы посетителям не приходилось прокручивать страницу вниз.Сгибов больше нет, или, точнее, их много, поэтому важно, чтобы ключевые сообщения и призывы к действию были четко отображены в верхней части страницы. Не беспокойтесь о прокрутке! Прокрутка хороша на мобильном телефоне или планшете, потому что это легко сделать на сенсорном экране. Прокрутка длинной страницы на рабочем столе может быть утомительной, но небольшая прокрутка — это нормально.
Изменение стиля и удобство использования
После перехода от просмотра на больших экранах к мобильным устройствам более чистый и простой стиль, который лучше работает на мобильных телефонах, стал определять дизайн веб-сайта в целом.Дизайн для больших экранов также стал более плоским и простым. Отчасти это связано с тем, что мобильные версии сайтов не выглядят иначе, чем один и тот же сайт на других устройствах, но это также мода в дизайне веб-сайтов.
Неужели эти текущие тенденции дизайна делают веб-сайты менее удобными? Новое интересное исследование предполагает, что они могут быть такими.
Чтобы понять, для чего нужны отдельные элементы страницы и зачем они вам нужны, прочтите нашу анатомию веб-страницы.
Наш адаптивный дизайн
Мы предпочитаем несколько макетов из соображений стоимости.Наши адаптивные веб-сайты обычно бывают трех размеров, которые подробно описаны ниже на примере школ Корнуолла.
Большие настольные компьютеры
Макет рабочего стола имеет ширину 1200 пикселей и поэтому подходит для экранов настольных компьютеров (обычно 1366 на 768 пикселей или больше), а также для ноутбуков большего размера. Дизайн находится посередине страницы, с пустым пространством слева и справа.
Ноутбуки и iPad
Макет iPad имеет ширину 970 пикселей, что хорошо подходит для экрана iPad в альбомной ориентации с небольшим белым пространством слева и справа.Этот дизайн также подходит для небольших ноутбуков и старых компьютеров с размером экрана 1024 на 768 пикселей. Он также отображается на смартфонах в альбомной ориентации.
Этот макет имеет точно такую же функциональность, что и макет рабочего стола, но все уменьшено, чтобы соответствовать меньшему экрану.
Мобильные устройства
Мобильный макет разработан, чтобы соответствовать iPhone и другим смартфонам в портретном режиме при ширине 340 пикселей. Как видите, есть некоторые различия в макете, и функциональность часто упрощается, чтобы пользователи могли взаимодействовать с веб-сайтом с помощью пальцев — кнопки обычно больше.На веб-сайте часто есть всплывающая гамбургерная навигация, которая заменяет основную панель навигации вверху, хотя на этой нет.
Резюме
Итак, на вопрос «какого размера должен быть мой веб-сайт?» Не существует однозначного ответа. — это зависит от ваших посетителей! Очень важно подобрать размер экрана, чтобы он соответствовал устройствам ваших посетителей.