Не волшебник, но хочу научиться

[Котики Инсайда]

Понятия не имею, можно ли такое спрашивать, но просто крик души:

Мастера-верстальщики, нужен ваш совет.
Я из мелконеха, в команде три калеки, но упарываемся славно, пишем тексты, рисуем арты и все в таком духе. Вот идем на битву. Но проблема в том, что верстальщика нет и не предвидится. Может, занесет кого, но фандом малюсенький, нас там мало, так что шансы крошечные. Поэтому я решил попробовать научиться верстать, хотя в этом ни в зуб ногой, вообще. Верстальщики, миленькие, посоветуйте, с чего начать! Онлайн-курсы, книги, что угодно сгодится. Вроде бы не глупый, за четыре месяца до битвы возможно научиться так, чтобы не слишком позорно?

URL комментария

@темы: Верстка, Прошу совета, Нам бы твои проблемы, Николай, Ньюфаг, ФБ-2017, Вы хотите об этом поговорить?

Comments

[Гость]

Меня в этом посте смущает жпег с качеством 55. Это же адовая грязь. Не 95?

[Гость]

на старых версиях браузеров,

То есть, на старых версиях ИЕ. А кто пользуется этим говном мамонта, тот сам себе дурак. Обязанность верстальщика, максимум, - расставить префиксы, а если у тебя и с префиксами не отображается - ну упс, обнови браузер.

[Гость]

Вдруг кому-нибудь понадобится: простой шаблон для текстовой выкладки, без красивостей, "резиновый".

[MORE=<img src="http://адрес картинки-заглушки" alt="название выкладки" style="display:block;margin:auto;max-width:100%">]<div style="width:850px;max-width:90%;margin:auto"><div style="padding:10px 30px 10px 30px;background:#ffffff;border:1px solid #808080;font-size:14px;line-height:21px;color:#404040;text-align:justify"><img src="http://адрес картинки-хедера" style="display:block;margin:auto;max-width:100%">
Здесь шапка.

[MORE=<img src="http://адрес картинки-читать-дальше" alt="читать дальше" style="display:block;margin:auto">]Здесь текст.[/MORE]

</div></div>[/MORE]

Цвет фона: белый (ffffff)
Цвет текста: темно-серый (404040)
Цвет рамки: серый (808080)

[Гость]

ТС, лучше не увлекайся разбором чужих выкладок. Дайри-верстальщики в массе такие же, как ты, пытались что-то уловить, копируя чужую вёрстку и таща за собой и ошибки такого же новичка, и костыли от опытных, дайри давно не падают на целые дни после дня выкладок, те подпорки уже не нужны. Разбор чужого кода хорош, когда разбираешь заведомо качественный код. htmlacademy, w3schools или htmlbook - тебе, как новичку, хватит сверх меры. Бегать по куче ресурсов тоже нехорошо, тебя просто растащит.
И обязательно - ОБЯЗАТЕЛЬНО - не пропускай введение, почитай, как работает веб-страница, что такое поток и т.д. Часик твоего времени будет стоить тебе крепкой основы и сохранённых нервов. Пока другой новичок будет путаться, будешь знать, в каком порядке что происходит и почему, избежишь массы ошибок, те же заборы из дивов. Большой плюс тебе будет, когда ваша выкладка будет быстро грузиться и отображаться без косяков. Ещё учебник - не пугайся, что js, загляни во 2 часть 1 главу, как раз основы, ниже есть css. И ещё справочник (есть русский, но попадается инглиш). Не пропускай css, как некоторые делают, то, что ты прописываешь в style - css и есть. И смотри комменты, к ним нужно относиться критичнее, но можно встретить ответы на вопросы. Пользуйся средствами браузера, смотри в инспектор объектов, если что-то не так работает, появились странные отступы и т.д.

И просто советы личного характера, к ним можно не прислушиваться, если нет желания.
Так называемая вёрстка всё больше раздражает и отвлекает от содержимого. Надо помнить, что дизайн и вёрстка для удобства чтения, а не соревнования красоты. Куча ненужной фигни отвлекает, не говоря уже про контраст с основным дизайном. Мне раньше тоже нравилось, а потом всё больше стало понятнее, что самое лучшее - это баннер, выравнивание и ширину можно задать для удобства. Лучше баннер покрасивее, чем вёрстка поцветастее.
Самые страшные люди - дайри-дизайнеры и кто делает "необычный контент" для визитки. Просто имей в виду, когда соглашаешься запилить какую-нибудь ненужную ерунду для красоты или впихнуть таблицу в двадцать колонок, хотя понимаешь, что это бред, что для читателей будешь козлом ты, даже если сделаешь всё красиво и валидно, сделаешь кучу опилок хотя бы немного читабельнее, даже деанон может не помочь (а до него ещё ого-го, а на верстальщика уже ведро помоев вылито), твои часовые усилия (не считая обучения) могут стать для тебя не очень приятным воспоминанием. Страшные люди потом и сами не рады, потому что понимают, кого всё-таки читатель имел в виду, так что могут тебе и спасибо не сказать. Не надо так.

[Гость]

Ещё учебник - не пугайся, что js, загляни во 2 часть 1 главу
Что-то дайре отказывается эту ссылку отображать.
Гугли просто "учебник Ильи Кантора".

[Котики Инсайда]

Из треда про визитку

Пишет Гость:

06.07.2017 в 12:29

Оо а чего так накинулись на анона с ссылками. Как будто это какая-то запредельная просьба, пол строчки кода, почему бы и не прописать?
Видимо, считают, что я доебался до мышей, хотя такая реакция меня удивляет, ведь в том же соо выкладки ссылки точно также будут цвета, заданного стилем соо. Я тоже не вижу проблемы прощелкать код с ктрл+ф и копипастой дописать строку стиля, но, видимо, проще сказать мне, что я тупой, ленивый и вообще охуел, чем выдержать свой собственный стиль. Ну ок, чо.

а зачем это? *анон-нуб в верстке*
Alt считается обязательным атрибутом, по той причине, что позволяет, если картинка не подгрузилась (упал хостинг, скажем, как случилось с тем же фаерпиком или как случается с имгуром, или у пользователя проблемы с интернетом) показать вместо нее альтернативный текст типа "заглушка" или хотя бы, при пустом заполнении альта, квадратик, который обозначит, что картинка тут была. Если его не прописать, то на месте неподгрузившейся картинки будет тупо пустота. Впрочем, некоторые современные бразузеры и компиляторы подставляют к картинкам такое значение автоматически, но далеко не все. Также, это не важно в контексте фб, но важно при написании сайта, альты у картинкам помогают поисковикам находить релевантную информацию.

URL комментария

[Гость]

Котики Инсайда, спасибо )

[Гость]

Хочу сделать вылупляшки, но не совсем понимаю, как. Читал советы, где говорят "используйте хостинг, который позволяет перезаливать картинку без замены ссылки". Неужели в самом деле те, кто их делают, в ночь перед назначенным временем перезаливают картинку на хостинге? И где найти такой волшебный хостинг, который меняет картинку, не меняя ссылку?

[Гость]

Нигде.) Только вручную

[Гость]

И где найти такой волшебный хостинг, который меняет картинку, не меняя ссылку?

У них просто имена должны быть одинаковые (у картинок). Удаляешь старые, заливаешь новые с теми же именами. Если хостинг не из тех, что принудительно меняют имена (типа imgur), то все ок будет.

[Гость]

Удаляешь старые, заливаешь новые

Ага, и он тебе создаст новые ссылки на новые картинки.

Я юзаю дропбокс. Заливаю первую часть картинок, в нужный день, не трогая первые (!), вручную заливаю вторую часть картинок с теми же именами. Дропбокс обновляет файлы, не меняя ссылок.

[Гость]

Ага, и он тебе создаст новые ссылки на новые картинки.

Photobucket не создавал. (Обновлялся по три часа, правда.)
Но, говорят, там теперь ссылки платные.

[Гость]

Photobucket не создавал

А) Ну, значит, этот момент нужно отдельно для используемого хостинга проверять.

[Гость]

я в прошлом году намучилась с этими вылупляшками, чуть все не запорола )))
меняются файлы только вручную и только на дропбоксе, причем там нужно хитро писать ссылку на картинку, потому что обычной ссылкой он ее не вставит картинку и я испробовала кучу сервисов, везде названия меняются автоматически и на photobucket в том числе

[Гость]

причем там нужно хитро писать ссылку на картинку

а хитро - это как?

[Гость]

и на photobucket в том числе

А потому что галочку scramble names в настройках снять надо было.

[Гость]

причем там нужно хитро писать ссылку на картинку
а хитро - это как?

там добавлются или убираются символы из ссылки и тогда картинку видно, но я не помню точно, нужно искать, если записи остались, но я нашла про это в гугле.

А потому что галочку scramble names в настройках снять надо было.

я там галочек никаких не находила, подскажите где именно ее искать?
и, может я конечно путаю, но кажется раньше это вроде работало, но потом перестало, а теперь вон вообще все платно становится.

[Гость]

я там галочек никаких не находила, подскажите где именно ее искать?

[Гость]

я там галочек никаких не находила, подскажите где именно ее искать?

сорри

[Гость]

О, спасибо анон с галочками, пойду искать )

[Гость]

причем там нужно хитро писать ссылку на картинку
а хитро - это как?

Ну примерно так https://dl.dropboxusercontent.com/s/ydaf7e31mcm178b/имякартинки.jpg

[Гость]

Где-то видел, как прописать код для моря, чтобы кнопка оставалась и закрывала море по клику. Казалось, что здесь. в итоге - потерял. Не подскажете, аноны?

[Гость]

Держи: diary.ru/~diary-tips/p164304303.htm

[Гость]

Анон в 09.27 - огромное спасибо!

[Гость]

аноны, может кто подскажет, как сделать, что бы ссылка имгура вела именно на картинку, а не на сайт?

[Гость]

что бы ссылка имгура вела именно на картинку, а не на сайт?

Никак, насколько я понял.
Т.е. если нажать на картинку правой кнопкой и выбрать "открыть изображение", оно потом всё равно на сайт закинет или вообще не откроется.

[Гость]

Никак, насколько я понял.

мне казалось что есть какая-то хитрость (
а то пишешь ссылку формата i.imgur.com/***.jpg, а он то картинку на сайте открывает, то прямую ссылку