ДЗ#2
Front-end basic April, 2018Задача
Нужно сверстать макет:
https://www.dropbox.com/sh/z8hzcd8s8avcoyi/AABV9Cq3K5F4ypswEKSUiDDGa?dl=0
Колонки на сайте сделать с помощью таблицы, это принципиальный вопрос.
Аннотации в виде картинки: https://i.imgur.com/1APy75x.png
Результат жду в телеграм.
- Можно прислать в виде архива
- Можно сделать в каком-нибудь code sandbox (http://codepen.io, https://jsfiddle.net/, http://jsbin.com, http://plnkr.co/, https://liveweave.com/)
- Можно сделать всё в виде одной жирной html-ки и прислать её :/
- Картинки я на всякий случай захостил вот тут: https://o.andrienko.org/hillel/fe2/ и можно ссылаться прям на них :)
Шрифты
Коротко - везде в этом макете используется
font: normal 12px Arial, Helvetica, sans-serif;
На шрифты при вёрстке обычно стараются не заморачиваться. Если заказчик не предоставил их с самого начала - обычно или ищем похожие сами, или юзаем вообще системные. Как подключать сторонние шрифты мы поговорим позже отдельно, сейчас все, что будут в наших макетах - системные, которые есть в винде.
Гарнитура(шрифт) в CSS задаётся с помощью свойства font-family:
font-family: Arial, Helvetica, sans-serif;
В этом свойстве имена шрифтов просто перечисляются через запятую. При этом если в имени шрифта есть пробел (Например, "Roboto Slab") - это имя пишется в кавычках:
font-family: "Roboto Slab", "Arial Narrow", "Helvetica Condensed", sans-serif;
В первом примере, если система найдет шрифт Arial - она использует его. Если не найдет - поищет шрифт Helvetica (Грубо говоря, Helvetica это Arial в MacOS). Если не найдёт его - использует sans-serif. sans-serif - это ключевое слово в CSS, которое значит "шрифт без засечек, установленный в браузере по умолчанию".
Шрифты, грубо говоря, бывают всего двух видов - с засечками и без (антиквы и гротески, если угодно).
Самые яркие примеры шрифтов с засечками и без - соответственно Times New Roman и Arial в винде и Times и Helvetica в MacOS X.
Правило простое - в список шрифтов, по-хорошему, следует в конец добавлять sans-serif для шрифтов без засечек, serif для шрифтов с засечками и monospace для моноширинных шрифтов (Шрифт Courier - моноширинный).
Например, если мы используем шрифт Roboto (это шрифт без засечек) список шрифтов будет выглядеть как Roboto, sans-serif. Можно добавить в него (список) еще и других шрифтов, которые наверняка есть в системах, например, Arial и Helvetica. И в итоге это все будет выглядеть примерно как
font-family: Roboto, Arial, Helvetica, "Open Sans", sans-serif;
У шрифтов, которые написаны "первее" - выше приоритет, то есть sans-serif, шрифт без засечек, установленный по умолчанию в браузере, будет использован в последнюю очередь.
Не все шрифты, которые есть в винде, будут в линуксе или макоси. Для того чтобы знать, какие имена соответствуют шрифту в других ОСях - есть списки вроде этого: https://www.w3schools.com/cssref/css_websafe_fonts.asp
Но конкретно на это можно пока не заморачиваться, о шрифтах мы поговорим и попрактикуемся потом отдельно.
Аннотации в виде текста
Эту страницу предлагаю сверстать с помощью таблицы.
Для того, чтобы сделать меню (которое слева) нам понадобится создать таблицу из одной строки и двух колонок, левая колонка - для меню, правая - для содержимого сайта.
Можно попробовать начать с вот такого:
<table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="200px"> тэги меню - сюда </td> <td> тэги контента - здесь </td> </tr> </table>
Не стесняйтесь создавать много-много div-ов внутри других div-ов. Со временем приходит понимание, что чем больше div-ов -- тем проще их верстать.
Для всех логических "частей" сайта имеет смысл делать свой div. Контент сайдбара? делаем какой-нибудь div с каким-нибудь классом .sidebar. Внутри него - несколько блоков меню? Делаем для них что-то типа div.menu-block. Внутри этих блоков есть заголовок и тело блока? делаем .div.header и .div.body.
Имена классов - полностью на ваше усмотрение, конечно же, но лучше не называть классы транслитом, пользуйтесь английскими словами ;-)
По-хорошему, элементы меню оформляют тегами списка. Потому что меню обычно - ни что иное как список.
Здесь элементам <li> можно указать list-style-type: none; (это уберет точечки слева) и добавить им черточку слева с помощью псевдоэлемента before:
.menu li:before{ content: '-'; }
Для полей ввода служит тег
<input type="text">
Для кнопок - тег
<button>Вход</button>
Стили для них можно задавать так же как для других тегов. Не забудьте переопределить шрифт.
У заголовков этих меню есть в начале -== и в конце ==-. Этот текст носит скорее декоративную функцию и можно вынести его в :after и :before
.sidebar .header:before{ content: "-=="; }
Разумеется, текст в этих "записях" - полностью произвольный. Никто не заставляет (кроме случаев, когда об этом явно сказали, конечно же) слово в слово повторять то, что написано в макете. Основная задача - чтобы в вёрстке были все основные элементы, которые есть на макеете)
Имеет смысл задавать таким вот картинкам max-width:100%, чтобы они не только не вылазили из родительского блока (если вдруг окажется, что потом, когда сайт будет работать, сюда кто-то зачем-то вставит огромную картинку), но и растягивались по ширине чтобы пользователь увидел картинку целиком.
.post img { max-width: 100%; }
Вообще - хорошая идея оформлять абзацы текста с помощью тегов абзаца.
Контент-менеджеры сайтов, если это CMS, обычно пользуются какими-то визуальными редакторами (как Word, только на вебе), а эти редакторы сами генерируют теги абзацев и много чего еще.
Надо исходить из того, что на "живом сайте" вёрстка будет та же самая, а контент - другой, и как бы представить себе места, где будет "вставлен" пользовательский контент.
Текст записи - определенно одно из таких мест.
Эта стрелочка - просто картинка.
Наклонный текст здесь - это просто ссылка на некую категорию ("Пресса"), и если здесь для наклонного текста использовать тег <i> и потом кому-то захочется изменить стиль (чтобы слово "пресса" было, например, просто жирным, а не наклонным) - ему придётся переопределять внешний вид тега <i>, а это нелогично. Никто не запрещает использовать тут тег <i>, но по-хорошему он существует для оформления текста. Лично я использовал бы здесь тег span или просто добавил некий класс ссылке.
И в нижней части новости - тоже добавил бы классы ссылкам.
у этих кремовых блоков много общих свойств (они есть и в "заголовке" сайта, и в записях, и в меню слева). Имеет смысл создать отдельный класс, например,
.block { background: #f4edde; border: 1px solid #65623b; }
У блоков заголовков постов и меню тоже много общего ;-)