ДЗ#2

Задача

Нужно сверстать макет:

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;
}

У блоков заголовков постов и меню тоже много общего ;-)