Как разбираться с кодами

Страница: 1

Сообщений 1 страница 9 из 9

Поделиться12015-06-25 21:37:00

Автор: Mikkel Kiersted
sever
Зарегистрирован: 2015-06-23
Приглашений: 0
Сообщений: 283
Уважение: +17
Позитив: +12
Провел на форуме:
1 день 7 часов
Последний визит:
2017-03-10 10:38:57

В общем, ты можешь взять коды с Артишока, которые очень популярны, но я рекомендую пользоваться теми, что стоят на данном форуме. Мы их собирали сами, так что если будешь использовать их, не надо будет обязательно где-то писать "за коды спасибо Артишок" или какой-нибудь копирайт типа "by all", потому что мне эти коды не жалко с: И, в общем-то, объяснять буду по ним, а они имеют некоторые различия с остальными. Но, как мне кажется, они очень удобны, просты и не дают сбоев.

1. Очень многие дизайнеры прописывают свои дизайны в html-верх, html-низ, включая шапку, футер и вообще всё! Но, я не рекомендую так делать, потому что хтмл верх-низ вообще - ненадежная штука. Коды часто конфликтуют друг с другом, из-за чего дизайн может работать неадекватно или на всех браузерах, или на некоторых. Чаще всего Файрфокс выдает лаги. К тому же, никто не отменял настройки, прописанные в "свой стиль". Зачастую, хтмл верх-низ начинает с ним ругаться и тут уж "решай" (образно), кого дизайн будет слушаться.

2. Итак, первым делом, мы рисуем сам дизайн. Нам понадобится макет дизайна. Там шапка, бади форума и футер. Их надо будет разрезать и подготовить. Ну, это ты наверное знаешь что такое. Замеряем значения в пикселях. Например:

Свернутый текст

Ширина общая: 1000
Ширина края тела: 930 (то есть не считая темного фона)
Ширина основы, т.е. той части, на которой непосредственно будет писаться текст (короче, тело без голубых рамок и еще немного отсупа от них, чтобы текст писался не впритых к этим голубым рамкам): примерно 860
Записываем значения куда-нибудь.
Вместе с этим лучше сразу сделать и оформление профиля. Ширина у нас установлена - 220 пикселей. Делаем верх, середину и низ:
Верх:
Середина:
Низ:
Ну, разумеется смотрим чтобы нигде не было швов.

3. Начинаем с установок размеров форума. Заходим в свой стиль, смотрим верхнее окошко - ищем А5.1.

/* A5 Basic page layout and borders
-------------------------------------------------------------*/

/* A5.1 */
#pun {
width : 860px;
margin: auto auto auto auto;
position: relative;
padding: 0px 70px 0px 70px;
}

Я здесь установил под конкретно наш диз. 860 пикселей мы измерили раньше как та часть тела форума, на которой будет писаться текст. То есть, это данная картинка:

Которая сама по себе 1000 пикселей с оступами по бокам по 70 пикселей. = 860 т.к. 1000 - (170х2 (отступу же слева и справа)) = 860 пикс.

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

Поделиться22015-06-26 13:21:36

Автор: Terry Walko
на линии горизонта
Зарегистрирован: 2015-06-23
Приглашений: 0
Сообщений: 219
Уважение: +12
Позитив: +17
Провел на форуме:
1 день 13 часов
Последний визит:
2017-02-21 13:24:18

Mikkel Kiersted, ничего себе сколько всего я вчера пропустил!

Mikkel Kiersted написал(а):

Если ты эти основы итак знаешь, скажи, или если что не понятно тоже скажи) Что конкретно интересует

Нет-нет, мне всё интересно и нужно. Я смотрел другие уроки, но они явно были перегружены терминологией. Да и коды там действительно были другие. Если тебя это не напряжёт, я бы хотел и дальше постепенно обсудить все этапы)
И да, боюсь показаться чайником, но я всегда хотел понять, как получается у людей там быстро подготавливать и разрезать дизайн на части, которые потом вставляют в код. Если поделишься секретами, я буду рад х)
А ещё вопрос по тому, как именно ты загружаешь шрифты. Это делается через сам форум? Или где-то на другом сайте, а потом ссылка забивается в самом начале структуры) И тот же вопрос про файлы. Как можно дизайн сохранять в них?

А в остальном всё очень понятно. Я бы хотел сегодня вечером попробовать сделать что-то по твоей инструкции) И заодно дозагрузить свой пример, а то из головы вылетело, пока пост писал х)

Поделиться32015-06-26 14:54:15

Автор: Mikkel Kiersted
sever
Зарегистрирован: 2015-06-23
Приглашений: 0
Сообщений: 283
Уважение: +17
Позитив: +12
Провел на форуме:
1 день 7 часов
Последний визит:
2017-03-10 10:38:57

Terry Walko
Ну, когда я делаю какой-нибудь дизайн, я сначала рисую его в фотошопе и конечный результат является в таком виде:

Свернутый текст

То есть все склеено. Но, конечно, перед тем как начать устанавливать его на форум, нужно его разрезать на три части: шапка, бади и футер.

шапка

бади

футер

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

Свернутый текст

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

Свернутый текст

2. Шрифты выбираешь вот здесь вот: http://webfont.ru/category/#all - осторожно, не все шрифты поддерживают кириллицу. Для удобства лучше искать только те, что поддерживают русский язык. Как определишься, жми кнопочку "получить шрифт" и появится ссылка по типу:

@import "http://webfonts.ru/import/20db.css";

Копируешь ее и вставляешь в самое начало css к остальным шрифтам (администрирование- свой стиль- структура). Там у меня уже установален данный элемент:

/***************************************
A - SETUP
***************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/
@import url(style_cs.css);
@import "http://webfonts.ru/import/bradobrei.css";
@import "http://webfonts.ru/import/lobster.css";
@import "http://webfonts.ru/import/nautilus.css";
@import "http://webfonts.ru/import/playfair.css";
@import "http://webfonts.ru/import/lobstertwo.css";
@import "http://webfonts.ru/import/airport.css";
@import "http://webfonts.ru/import/garamond.css";
@import "http://webfonts.ru/import/grandhotel.css";
@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import "http://webfonts.ru/import/arsenal.css";
@import "http://webfonts.ru/import/engine.css";
@import "http://webfonts.ru/import/b20sans.css";
@import "http://webfonts.ru/import/attentica.css";
@import "http://webfonts.ru/import/sabado.css";
@import "http://webfonts.ru/import/intro.css";/* A1 Import the colour scheme
-------------------------------------------------------------*/

Так вопрос про файлы я не понял))

И тот же вопрос про файлы. Как можно дизайн сохранять в них?

Поделиться42015-06-26 15:08:47

Автор: Mikkel Kiersted
sever
Зарегистрирован: 2015-06-23
Приглашений: 0
Сообщений: 283
Уважение: +17
Позитив: +12
Провел на форуме:
1 день 7 часов
Последний визит:
2017-03-10 10:38:57

Terry Walko
Так, а теперь непосредственно продолжению к моему первому посту. Когда установили ширину форума, начинаем устанавливать элементы. Первым делом необходимо установить шапку, бади и футер. Шапку мы устанавливаем в структуре (верхнее окно стиля), а футер и бади прописываем в стиле (нижнее окно стиля).

1. Шапка. В верхнем окно стиля находим элемент:

/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/

/* D1 Logo and description
-------------------------------------------------------------*/

/* D1.1 */
#pun-title {
margin: 0;
border: none;
margin-bottom: -35px;
}

/* D1.2 */
#pun-title h1 {
display : block;
height: 0px;
margin: 77px 0px 0px -0px;
}

/* D1.3 */
#pun-title .container {
border: none ;
padding: 0.2em 1em 0.8em 1em;
}

/* D1.4 */
#pun-title table {
border: none;
height: 0px;
margin-left: -70px;
width: 1000px;
height: 110px;
background-image: url(http://savepic.su/5736407.png);
background-repeat: no-repeat; }

#pun-title TD.title-logo-tdl {
border: none;
width: 100%;
}

#pun-title TD.title-logo-tdr {
border: none;
width: 420px;
}

Собственно, легче всего зажать Ctrl+F и вбить D1.1, само найдется)
О более подробных настройках расскажу как буду в более адекватном состоянии, пока отмечу самое важное. D1.4 - шапка загружается сюда. Ширина шапки, ее расположение прописывается здесь же. Рассмотрим более детально:

/* D1.4 */
#pun-title table {
border: none;
height: 0px;
margin-left: -70px;
width: 1000px;
height: 110px;
background-image: url(http://savepic.su/5736407.png);
background-repeat: no-repeat; }

margin-left: -70px; - отступа влево. В данном случае отступ у меня с минусом, то есть он отрицательный. То есть, шапка даже не делает отступ от края, а наоборот выходит за край влево на 70 пикселей. Каждый дизайн данное значение меняется в зависимости от значений размеров твоей шапки и твоего бади. В данном случае, в первом посте мы установили отступ по бокам в 70 пикселей, чтобы текст писался только на светлой части бади. Поэтому, когда мы устанавливаем шапку, и если не введем данный margin-left: -70px; - шапка будет установлена криво на 70 пикселей. То есть вместе со всем форумов она будет смещена влево на данное значение. Чтобы игнорировать то, что мы прописали в первом посте, нужно вернуть ее обратно на те же самые 70 пикселей. Влево) И вуаля, все стоит ровно.
width: 1000px; - здесь все просто, это ширина картинки шапки.
height: 110px; - а это ее высота х)
background-image: url(http://savepic.su/5736407.png); а сюда нужна вставить картинку самой шапки)

Футер:
Находим в нижнем окне стиля данный элемент:

/* Футер*/

#pun-about p.container {background-color: #;
background-image : url(http://savepic.su/5742551.png);
margin-left: -82px;
background-position : center top;
background-repeat : no-repeat;
width: 1000px;
height : 70px;
overflow-x: hidden;}

Я их там вообще все подписал, так что можно легко найти. Здесь аналогично. Видишь, те же 1000 пикселей, также устанавливает высота, но отступ слева

margin-left: -82px;

не 70 пикс, а 82 пикселя. Футер нужно всегда сдвигать на 12 пикселей больше. То есть, если отступ будет например в 100 пикселей, то футер надо будет поправить до 112 х)

И, наконец, бади форума. Здесь вообще все просто:

/* Фон основы форума*/

#pun {background-image: url(http://savepic.su/5739479.png
);}

Также в нижнем окне стиля находим и просто меняем ссылку картинки на свою) Никаких значений писать не надо, потому что мы их уже назначили в первом посте:

Mikkel Kiersted написал(а):

/* A5 Basic page layout and borders
-------------------------------------------------------------*/
/* A5.1 */
#pun {
width : 860px;
margin: auto auto auto auto;
position: relative;
padding: 0px 70px 0px 70px;
}

Поделиться52015-06-26 15:11:51

Автор: Terry Walko
на линии горизонта
Зарегистрирован: 2015-06-23
Приглашений: 0
Сообщений: 219
Уважение: +12
Позитив: +17
Провел на форуме:
1 день 13 часов
Последний визит:
2017-02-21 13:24:18

Mikkel Kiersted написал(а):

То есть все склеено. Но, конечно, перед тем как начать устанавливать его на форум, нужно его разрезать на три части: шапка, бади и футер.

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

Mikkel Kiersted написал(а):

Так вопрос про файлы я не понял))

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

А про шрифты - всё понятно) Спасибо, я попробую сегодня что-нибудь сделать и тебе показать х)

Поделиться62015-06-26 15:17:56

Автор: Terry Walko
на линии горизонта
Зарегистрирован: 2015-06-23
Приглашений: 0
Сообщений: 219
Уважение: +12
Позитив: +17
Провел на форуме:
1 день 13 часов
Последний визит:
2017-02-21 13:24:18

Mikkel Kiersted написал(а):

1. Шапка. В верхнем окно стиля находим элемент:

Это я помню х) И сдвиги тоже, а вот про 12 пкс футера - не знал)) Спасибо, запомнил) С картинками вроде тоже всё понятно.

Поделиться72015-06-26 15:43:47

Автор: Mikkel Kiersted
sever
Зарегистрирован: 2015-06-23
Приглашений: 0
Сообщений: 283
Уважение: +17
Позитив: +12
Провел на форуме:
1 день 7 часов
Последний визит:
2017-03-10 10:38:57

Terry Walko написал(а):

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

Нууу, нет, я изначально все склееным делаю) А только потом разрезаю. Так еще до установки на коды видно картину в целом, как будет лучше смотреться и насколько хорошо гармонируют оттенки разных элементов друг с другом

Terry Walko написал(а):

И как режешь бади так, чтобы швов не было видно при повторении? Просто копируешь и стираешь края у одного из слоёв? Или всё гораздо проще?)

Нет, я обрезаю в нужном месте. Объясню на простой текстуре. Например, если идет полосатый фон: красный, белый, красный, белый - надо обрезать его так, чтобы наверху последний слой был одного цвета, а внизу - другого. Чтобы когда их друг за дружкой форум будет дублировать, то было незаметно что это много-много повторяющихся картинок. По сути, красный, белый, красный, белый в таком случае будут чередоваться бесконечное количество раз. Тоже самое в нашем примере чуть выше. Только под углом. Смотри, там наверху последний слой светло-фиолетовый и чуть-чуть темно-фиолетового, снизу же все наоборот. В итоге, они соединяются х)

Terry Walko написал(а):

И эти полосочки косые, стык которых нужно проверить, рисуешь конкретным "стилем" или "кистью" в фш?

Вот ссылка на бади - https://dropmefiles.com/rKUCa
Посмотри, там есть слой (четвертый снизу или третий сверху), у которого установлены параметры наложения - "наложения узора" - это и есть полоски)) Вообще, на этом псд файле можно понять как я делаю основу для дизайна х)

Terry Walko написал(а):

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

А, ну я так не делаю, или делаю но не знаю. Я просто оключаю мобильный вид)

Поделиться82015-06-26 15:51:43

Автор: Terry Walko
на линии горизонта
Зарегистрирован: 2015-06-23
Приглашений: 0
Сообщений: 219
Уважение: +12
Позитив: +17
Провел на форуме:
1 день 13 часов
Последний визит:
2017-02-21 13:24:18

Mikkel Kiersted написал(а):

Нууу, нет, я изначально все склееным делаю) А только потом разрезаю. Так еще до установки на коды видно картину в целом, как будет лучше смотреться и насколько хорошо гармонируют оттенки разных элементов друг с другом

И тут я понял, что коды знаю чуть лучше, чем фш. Внезапно.. Ты ещё не пожалел, что связался со мной? x)

Поделиться92015-06-26 16:26:55

Автор: Terry Walko
на линии горизонта
Зарегистрирован: 2015-06-23
Приглашений: 0
Сообщений: 219
Уважение: +12
Позитив: +17
Провел на форуме:
1 день 13 часов
Последний визит:
2017-02-21 13:24:18

Mikkel Kiersted, наверно, замучил я тебя с этим дизайном. Давай тогда лучше обратно на игру переключимся)

Страница: 1

hurt so good

Меню навигации

Пользовательские ссылки

Информация о пользователе

Как разбираться с кодами

Сообщений 1 страница 9 из 9

Поделиться12015-06-25 21:37:00

Поделиться22015-06-26 13:21:36

Поделиться32015-06-26 14:54:15

Поделиться42015-06-26 15:08:47

Поделиться52015-06-26 15:11:51

Поделиться62015-06-26 15:17:56

Поделиться72015-06-26 15:43:47

Поделиться82015-06-26 15:51:43

Поделиться92015-06-26 16:26:55