Ешь, молись, собирай ссылки.
котики, я вот подумал, что нужно сделать командам простейший образец верстки с кодом и объяснить, что с ним делать, чтобы, если кто-то не найдет верстальщика, не страдал.
итак, как это выглядит в готовом виде (зелененькое на скринах - фон соо, в котором проверял верстку):
смотреть
код:
смотреть
2285 символов согласно официальной считалке слов.
картинки:
читать дальше
Можно заменить цвета.
читать дальше
само собой, в комментариях к этой записи будет много помарок, исправлений и тому подобного, может - кто-то предложит свои варианты или объяснит непонятное, так что вэлком!)
URL комментария
читать дальше
Ликбез для чайников. Урок 1.Что такое теги и атрибуты
Ликбез для чайников. Урок 2. Оформление фона записи
Совсем простой резиновый вариант
Вставка артов и коллажей(более правильный код)
В помощь юным кэпам - адаптируемый шаблон эпиграфа комсоо
итак, как это выглядит в готовом виде (зелененькое на скринах - фон соо, в котором проверял верстку):
смотреть
код:
смотреть
2285 символов согласно официальной считалке слов.
картинки:
читать дальше
Можно заменить цвета.
читать дальше
само собой, в комментариях к этой записи будет много помарок, исправлений и тому подобного, может - кто-то предложит свои варианты или объяснит непонятное, так что вэлком!)
URL комментария
Советы из комментариев
читать дальше
Ликбез для чайников. Урок 1.Что такое теги и атрибуты
Ликбез для чайников. Урок 2. Оформление фона записи
Совсем простой резиновый вариант
Вставка артов и коллажей(более правильный код)
В помощь юным кэпам - адаптируемый шаблон эпиграфа комсоо
-
-
05.03.2018 в 14:37-
-
05.03.2018 в 15:23-
-
05.03.2018 в 15:50Но анон, собственно, принёс простейший шаблон для тех, кто не умеет в коды. Таким командам не до изысков оформления. В принципе, можно сделать шаблончики и для других вариантов типичных вёрсток.
Завести тему «верстальщик на час» - приду и сверстаю шаблн по готовому дизу с уже порезанными картинками в заглушку/хедер/футер/кнопки ))) Останется только вставлять работы.
другой анон
-
-
05.03.2018 в 16:40В комментах отмечали изящную вёрстку ))))))))))) Не, не стебались )))))))))))
-
-
05.03.2018 в 16:48Навороты типа заковыристого фона мало кому нужны (а иногда и вредны *вспоминает зимних Гриндевальдов*), но вот со своим широкоформатным монитором я б таки не отказался от ограничения по максимальной ширине этак на 1000 пикселов (хотя ладно, обычно я браузерное окно на всю ивановскую один фиг не разворачиваю). И шрифт бы покрупнее чем стандартный в соо выкладок. А так да, почему бы не ограничиться заглушкой и кнопками.
-
-
05.03.2018 в 17:35-
-
05.03.2018 в 20:05-
-
05.03.2018 в 21:50анончик, я вспомнил, что не сделал, когда уже отправил( и про ширину картинок надо было бы написать для дизайнеров, и еще много чего, но умная мысля приходит опосля :с может, как посвободнее буду, чуть переделаю.
*обнимает все анонов, которые благодарят*
ТС
-
-
06.03.2018 в 07:35-
-
06.03.2018 в 18:34так уже ж сделали общедайровскую кнопки открыть все моря, вон она, рядом с сортировкой.
-
-
06.03.2018 в 18:35-
-
06.03.2018 в 20:18да, я заметил, о чём и написал в следующем предложении коммента (хотя некоторые команды продолжают прикручивать эту кнопку постам дополнительно). Но пустые посты всё равно выглядят так себе, когда заглушка пропадает. Так что лучше писать альтернативный текст картинкам. Да и проматывать развернувшиеся тексты не так удобно.
Кстати, интересно, всякие мелочи будущим верстальщикам по шаблону нужны?
Ну там, например, чтобы сделать перекрёстные ссылки между постами до того, как их выкладываешь, достаточно открыть посты в черновиках на "Предпросмотр" — отбрасыванием ?draft получаются будущие ссылки на ещё неопубликованные посты.
Или это уже лишнее
По поводу самой вёрстки, учитывая сужение центральной полосы в дневниках с неоплаченым сss/ отключением рекламы, всем картинкам бы неплохо прописывать резиновость, наверное, включая большие по ширине кнопки, разделители и артвыкладку / фото в челлендже. На время ФБ, понятно, орги оплачивают, но что там дальше будет — бабушка надвое сказала.
<img src="прямой_html_адрес_картинки" style="max-width:ХХХpx; width:100%;" alt="текст, который показывается на месте картинки, когда она по каким-то причинам не отображается">,
где ХХХ — ширина картинки в пикселах (здесь это число задаёт максимальную ширину, на которую картинка может быть растянута, чтобы её не развезло по всему экрану с потерей качества изображения, если вдруг у пользователя монитор с большим разрешением, а у самого поста максимальная ширина задана больше, чем у картинки)
-
-
06.03.2018 в 20:26о, спасибо за это, не знал.
-
-
08.03.2018 в 16:11-
-
10.03.2018 в 16:32-
-
10.03.2018 в 23:05где ХХХ — ширина картинки в пикселах (здесь это число задаёт максимальную ширину, на которую картинка может быть растянута, чтобы её не развезло по всему экрану с потерей качества изображения, если вдруг у пользователя монитор с большим разрешением, а у самого поста максимальная ширина задана больше, чем у картинки)
-
-
11.03.2018 в 02:10-
-
12.03.2018 в 00:58-
-
12.03.2018 в 01:05Картинкой ты имеешь в виду?
-
-
12.03.2018 в 01:08-
-
12.03.2018 в 01:26А то смотрю, ну у некоторых там просто чудеса.
-
-
12.03.2018 в 02:00очень надеюсь, что дайри не сожрет коды, а если сожрет - под катом две картинки чисто текста-скринов
смотреть, картинки в оригинальном размере, то есть огромные
Итак, у нас есть код, в котором нам нужно разобраться, учитывая, что мы ни хрена не знаем о коде ну прям вообще.
Начнем с простейшего.
Теги - это команды, которыми мы даем дайрику информацию, чего хотим от элемента/блока верстки. Все теги заключены в скобки: . Вот от открывающей скобки - - до ближайшей закрывающей - - все это один тег. В следующей паре скобок следующий тег.
Теги бывают одиночными и парными. Одиночный - это ты поставил его, и все. Парные же теги требуют постановки закрывающего тега в конце (про конец и где это он, мы поговорим чуть позже). Узнать закрывающий тег просто: - он ничем не отличается от открывающего, но обязательно требует слэша, то есть наклонной черты. Наклонной именно в эту сторону.
Вернемся к очередности парных тегов. "Дерево" тегов может быть длинным, то есть внутри одной пары тегов - другая, внутри них - третья, и так далее. Но самое главное: закрывающие теги должны идти строго в порядке, обратном тому, что в начале!
На самом деле это просто.
но нам недостаточно того оформления, которое дает нам один тег, поэтому мы используем еще один:
Заметили? Мы сразу ставим теги парами, чтобы не потерять ни один из них, а не пишем сначала то, что в начале, а потом в конце. Это делается, чтобы соблюсти порядок закрытия тегов (в начале перед текстом фика тег 2, потом тег 1, а в конце наоборот), и чтобы у нас не "поехала" верстка - то есть ничего не сломалось.
Дальше мы поговорим об атрибутах и одновременно узнаем про функции самых известных тегов.
Каждому тегу можно задать атрибут. Где-то - даже нужно, поскольку сам по себе этот тег не несет никакой информации.
Самым лучшим примером в этой ситуации будет парный тег Он обозначает, что дальше будет идти некий блок. В прямом смысле блок - то есть некое поле, которому с помощью атрибутов будут заданы определенные характеристики. Это поле закончится только тогда и там, где будет стоять (в правильной очередности, конечно), закрывающий тег .
Посмотрите в код.
Там местами есть вот такая строка:
Что это значит? Это значит, что дальше следует элемент, который с помощью атрибута align мы располагаем по центру. Еще можно слева - , и справа - .
Где-то к этому моменту мы вынужденно обращаемся к простейшему синтаксису html, то есть к правилам написания.
Итак, что мы уже узнали? Что теги обязательно стоят в угловых скобках. Что в закрывающем теге после первой скобки следует слэша, а только потом сам тег:
Что нам нужно еще знать?
- что между тегом и атрибутом обязательно стоит пробел;
- что после атрибута и перед его характеристикой (блок в центре, помните?) обязательно стоит знак равно, а сама характеристика обязательно стоит в кавычках, а пробелов в этом случае нет. Если у вас не работает эта характеристика - вы забыли или потеряли скобку, закрывающий тег или кавычки.
- что если характеристик несколько, они разделяются пробелами и точкой запятой (вот такое место в коде выше:
). Узнали знакомый синтаксис? Здесь атрибут style (к которому мы снова вернемся позже) включает в себя две характеристики: ширину (в процентах), и максимальную ширину (в четко определенном числе).
Давайте вернемся к тегам, которым обязательно нужны атрибуты.
Некоторые вы из них наверняка знаете (просто не знали, что это теги с атрибутами).
Простейший пример:
Это одиночный тег - тег картинки, который имеет атрибут src. Соответственно, внутри этого атрибута - с "равно", внутри кавычек, - стоит ссылка на картинку, которую мы хотим разместить.
Другой пример (в коде выше его нет, но мы все равно часто его используем):
Здесь мы используем парный тег - который обозначает ссылку на посторонний источник, и задаем ему атрибут href. У этого атрибута - в кавычках и с "равно" - характеристикой служит адрес, на который мы даем ссылку. Дальше идет текст, которым мы называем нашу ссылку - и показываться будет именно она, а не сама ссылка - и закрывающий тег , чтобы определить границы окончания этого самого показываемого текста. Кстати, вместо текста "пикабу" туда можно положить ссылку на картинку, и она будет при клике перекидывать нас на другой сайт.
Продолжу позже, не буду перегружать анонов
Анон-ТС
-
-
12.03.2018 в 02:32Мне все понятно, кроме - с тире
Где там тире, внутри кавычек? не вижу его в примерах. Или ты что-то другое так называешь?
-
-
12.03.2018 в 02:46ай!
со знаком равно, конечно же!) Спасибо, анон :3
Котики Инсайда, а можно в комменте поправить в обоих местах??
ТС
-
-
12.03.2018 в 03:01Может положить и в заглавный пост этот коммент?
Или пусть тема будет как бы уроком вся? а то я что-то помню про ограниченное количество знаков в посте))
-
-
12.03.2018 в 03:13спасибо!
Или пусть тема будет как бы уроком вся? а то я что-то помню про ограниченное количество знаков в посте))
можно, я искренне собираюсь еще чего-нибудь принести в продолжение. Но ограничение символов в посте - примерно в районе 62к, так что много ссылок - это не страшно) много символов, когда раскрываются, жрут коды, моря и теги [L] и [J], и вот там уже подсчитать сложнее в разы. Но это вопрос отдельной темы, конечно (и я надеюсь до нее дойти
-
-
12.03.2018 в 03:15то есть я имел в виду, можно на этот коммент банально ссылку положить, а не класть весь текст в шапку.
-
-
12.03.2018 в 03:28но не треда, я так понимаю)) эти яйца пусть в одной корзине лежат.
Там выше анончик спрашивал про картинку на фон, осветишь может и этот вопрос?
ссылку в пост сейчас положу.
-
-
12.03.2018 в 03:35с картинкой есть некоторые подводные камни, но ОК.
простыня с кодами и примерами их применения под катом
-
-
12.03.2018 в 03:40я не успел, выше донесли очень понятный мануал))
и, имхо, мануал тоже можно в шапку))
ТС