14:14 

С чего начинать

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Пишет Гость:
10.02.2015 в 12:57


Можно советы вот для совсем начинающих? Когда верстальщик не предвидится и приходится знакомиться со всем самому. С чего начинать? Какой общий принцип работы и последовательность?

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

@темы: вопросы

URL
Комментарии
2015-02-10 в 14:40 

0. Придумываем дизайн, можно всей командой. Даже лучше, потом не докопаются свои же.
1. Разбивка на блоки (или разметка таблицы, если верстаем в таблицу)
2. Задаем блоку ширину, фон, положение (по центру, например), цвет текста, границы, отступы и т.д.
3. Ставим текст/картинки что там у нас в выкладке есть
4. Ставим где надо моря (на тексты, под общую заглушку и т.д.)
5. Закрываем моря картинками (этого можно не делать, но тогда придется учитывать, что их практически невозможно стилизовать при помощи верстви)
6. Еще раз просматриваем все, ищем косяки, в т.ч. те детали, которые тоже нужно стилизовать, я например ссылки всегда забываю. Правим. Смотрим.
И так до дедлайна или до ощущения, что выкладка идеальна :)

URL
2015-02-10 в 14:53 

Выравнивание блока. Ширина блока в пикселях, а лучше в процентах. Цвет фона. Параметры текста: шрифт, кегль, цвет, расстояние между строчками. Тени, скругления.
Как самый минимум вам хватит сверстать блок, какую-нибудь цветную рамочку вокруг, заглушки на всё, шрифт и расположение-обтекание картинок.

С чего начать: идёте по выкладкам, смотрите на дизайны, которые вам нравятся, выбираете самый прикольный, утаскиваете к себе копию и начинаете у себя в черновике копаться в коде, менять в нём циферки и смотреть, что получается. И так пока не поймёте фишку. С этого все и начинают.)))

URL
2015-02-10 в 15:13 

Ух, спасибо, анончики! Теперь не страшно браться, с такой-то пошаговой инструкцией) обязательно разберу чей-нибудь диз =)
Правильно понимаю, что ширина в процентах для нормального отображения на разных устройствах?

URL
2015-02-10 в 15:34 

Правильно понимаю, что ширина в процентах для нормального отображения на разных устройствах?
Правильно понимаешь. Ещё одна вещь, которая, по-моему, может быть полезна для начинающих - код в Гугл Хроме.
Там есть волшебная кнопочка на правой кнопке мыши - "код элемента", можно менять значения и дописывать параметры прямо в браузере, не отходя от кассы. В реальный код оно, конечно, не сохраняется, отдельно тянуть надо, но оч-чень наглядно выходит.

URL
2015-02-10 в 16:02 

Главное надо помнить, что оформление-вёрстка - это не просто красивая свистоперделка, она несёт функционал.

Во-первых, оформление-вёрстка - лицо выкладки и команды. Она может немного меняться от выкладки к выкладке (использованы разные арты для оформления, другая цветовая гамма, мелкие корректировки etc), но при этом всегда должна оставаться узнаваемой. Должен быть единый макет-шаблон, который и будет редактироваться. Особенно это касается заглушек - именно по ним выкладку будут искать.

Во-вторых, вёрстка нужна для удобства взаимодействия с контентом. Тут два основных момента.

Делайте вёрстку последовательной. В выделении определённых элементов цветом/шрифтом должна быть логика. Каты моря должны быть похожи на каты моря/кнопки/превью. А вот разделители не надо делать похожими на кнопки, они должны быть максимально похожи на линию, чтобы не появлялось желания их нажать. Каждый элемент должен быть для чего-то нужен и сделан так, чтобы выполнять свою функцию. И тут мы переходим ко второму моменту.

Думайте о юзабилити. Каты и заглушки нужны для того, чтобы а) уменьшить количество траффика б) не рвать ленту простынями - поэтому они должны быть максимально лёгкими (да, не у всех сейчас высокоскоростной анлим, не забывайте) и не слишком большими (ограничение 700 на 700 от оргов чуток спасает, но это всё равно очень много для заглушки).
Кат-превью изображений должно подсказывать, что нас под этим превью ждёт, поэтому: а) если вы делаете "необрезанное" превью, не делайте его слишком уж мелким (будет не ясно чего ожидать), но и не стоит слишком крупнить (тогда это уже не превью) - 250 по большей стороне достаточно б) если вы делаете "обрезанное" превью опять же не мельчите, выделяйте те части арта, которые могут дать представление о содержании, стиле и качестве работ (потому что хуже прошедшего мимо читателя - обманутый читатель), старайтесь показать лица персонажей или хотя бы достаточно крупные части их тел, а не одинокий цветочек на заднем плане, в) не делайте кат без превью к изображениям, не надо.
По возможности верстайте в резинке и не забывайте всем возможным элементам прописать резиновость, а картинкам не забудьте прописать ограничение размера, чтобы их не пидорасило на больших мониторах. Прописывайте альтернативный текст к тем изображениям, которые являются кнопками и катами море (к остальным - опционально) - у пользователей мобильных устройств и слоуинтернета могут быть отключены картинки. Не забывайте о кнопке "открыть все more" - опять же она важна для тех, кому не хочется перерасходывать трафик или не удобно кликать по стопицотому кату.

URL
2015-02-10 в 17:00 

Спасибо, анонимище! *_* тебе бы уроки писать да лекции вести- хорошо мысль доносишь :3
Прописывайте альтернативный текст
Мм, это как? Т. е. вместо картинки будет появляться просто текст?

URL
2015-02-10 в 17:47 

Спасибо, анонимище! *_*
Нзчт =)
тебе бы уроки писать да лекции вести- хорошо мысль доносишь :3
Спасибо u///u
Мм, это как? Т. е. вместо картинки будет появляться просто текст?
Да, если в браузере отключены картинки вместо них будет отображается текст. На мобильной опере: будет цветной блок - на такие все картинки изменятся - и в нём текст. Как конкретно оно в других браузерах выглядит не знаю, на стационарниках вроде такой финт ушами не работает нормально, но оно больше и рассчитано на мобильные браузеры. Также альтернативный текст будет показан, если сама картинка не прогрузится (сервер хостинга упал, например), но пашет оно адекватно если ширина картинки задана и в этот "картинкоблок" текст влезает (на стационарной опере так по крайней мере).

URL
2015-02-10 в 19:28 

Осталось только дорасти до всего этого :gigi:
Спасибо за советы :gh:

URL
2015-02-10 в 20:00 

Осталось только дорасти до всего этого :gigi:
вот кстати да =-=
чувствую, в следующем году мне придется делать все самой ибо фендом не особо популярный, да и герой тоже х)
может, кто-нибудь подскажет, с чего вообще начать? чтобы хоть как-то научиться разбираться и сверстать что-то приличное:alles:

URL
2015-02-10 в 20:06 

htmlacademy.ru всех спасет :) Самая адекватная обучалка верстке из известных мне.

URL
2015-02-10 в 20:08 

htmlacademy.ru всех спасет :) Самая адекватная обучалка верстке из известных мне.
спасибо *О* выглядит хорошо и даже интересно :alles: буду разбираться х)

URL
2015-02-10 в 20:09 

может, кто-нибудь подскажет, с чего вообще начать? чтобы хоть как-то научиться разбираться и сверстать что-то приличное
Можешь попробовать погуглить уроки html, если в опыте абсолютный нолик. А если не совсем уж абсолютный - делай так, будто реальную вёрстку планируешь. Придумывай что-то, тащи код, какой понравится, разбирай на потроха и переделывай под то, что в голове. Задавай вопросы или гугли, если не понимаешь значение какого-то параметра. Постепенно за глазами отложится. Главное ещё не праздные уроки, а желание прийти к какому-то конкретному результату.

URL
2015-02-10 в 20:14 

увы, пока ноль х) так что сначала уроки, а потом уже буду пытаться что-то самостоятельно делать х)
спасибо за советы х)

URL
2015-03-24 в 18:18 

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

URL
2015-03-27 в 11:53 

На инсайде зашла речь об оптимизации кода, у меня возник вопрос, можно ли средствами html прописать на весь пост не только шрифт и стиль текста, но и стили ссылок, или несколько стилей для разных видов текста?
Чтобы в деаноне, например, не у каждой из 100 ссылок прописывать одни и те же параметры, а задать их один раз.

URL
2015-03-27 в 11:55 

На инсайде зашла речь об оптимизации кода, у меня возник вопрос, можно ли средствами html прописать на весь пост не только шрифт и стиль текста, но и стили ссылок, или несколько стилей для разных видов текста? Чтобы в деаноне, например, не у каждой из 100 ссылок прописывать одни и те же параметры, а задать их один раз.
Нет, только не на ссылки/заголовки/абзацы. Это всё CSS.

URL
2015-03-27 в 12:00 

Нет, только не на ссылки/заголовки/абзацы. Это всё CSS.

Жаль(
Спасибо за ответ!

URL
2015-04-07 в 13:19 

Существует ли ссылка, которая раскрывает моря в комментариях к посту или хотя бы в одном комментарии?

URL
2015-04-07 в 14:32 

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

URL
2015-04-07 в 15:16 

Если открываешь море через правую кнопку мыши в новой вкладке, должна открыться ссылка именно на это море.
С комментариями это не работает. По крайней мере, у меня открывается пост с закрытыми комментариями, и не удивительно, потому что переход идёт по ссылке вида: адреспоста#more на любой кат в любом комментарии.

То есть я знаю, как посмотреть url комментария, я знаю, что моря открываются по номерам, и если внутри комментария один кат, это будет more1. Я не знаю, как это совместить со ссылкой, чтобы при переходе по ней море в комментарии открылось.

URL
2015-04-07 в 15:21 

тест

URL
2015-04-07 в 15:22 

в мобильной версии все каты в комментариях открыты. Это так, к слову

URL
2015-04-07 в 15:24 

Ага, ясно. Дело в том, что инфа после # уже забита айдишником коммента, поэтому more места нет. Вообще как-то наверняка можно это сделать, но я не знаю платформы, на которой написаны дайри, поэтому подобрать роутинг до моря не могу(

URL
2015-04-07 в 15:59 

в мобильной версии все каты в комментариях открыты. Это так, к слову
Давать ссылку на мобильную версию с примечанием "откроются все каты в комментариях" - это мысль)
Спасибо.

URL
2015-04-07 в 16:04 

Вообще как-то наверняка можно это сделать, но я не знаю платформы, на которой написаны дайри, поэтому подобрать роутинг до моря не могу(
Да я вот тоже извелся, должны же они как-то открываться.
Может быть, под эту тему попросить отдельный тред?

URL
2015-04-07 в 16:50 

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Может быть, под эту тему попросить отдельный тред?
Держите - MORE в постах и комментариях

URL
2015-04-07 в 17:48 

Diary HTML, спасибо!

URL
2015-04-12 в 10:33 

Чем отличается запись цветов в шестнадцатеричной системе и rgb кроме собственно формата записи? Это как-то сказывается на скорости загрузки страницы, отображении цветов у пользователя, чем-нибудь еще? Про альфа-канал, который можно дописать rgb, знаю, про то, что шестнадцатеричную запись можно укоротить до трех символов при их повторяемости, тоже.

URL
2015-04-19 в 09:34 

Чем отличается запись цветов в шестнадцатеричной системе и rgb кроме собственно формата записи?
Судя по тому, что говорит гугл, вообще нет никакой разницы. Только по восприятию для человека. И, конечно, rgba не во всех браузерах может отображаться, как и HSV.

URL
2015-04-19 в 11:08 

Да ладн, а где не воспоинимается?

Я принциаиально использую rgba в оформлении моря, когда подчеркивание убираю. Как раз из-за альфа-канала

URL
   

Верстка Фандомной Битвы

главная