бедная кэти. ахах только я могла превратить её в зомби
Привет,дорогая) Очень рада,что ты стала моей ученицей. Будем бродить по заковыристым просторам Великого кодинга. Оставь мне тут свою связь и внимательно слушай. Если хочешь у меня обучаться,то запомни. Мои ученики - продолжают моё дело. Так что это как кодекс малефисент,которому должен каждый подчиняться. Если ты согласна со всеми пунктами,то кидай сюда пробник и ник - парроль аккуанта-администратора. И начнём работать)) Расскажи чему хочешь научится. Что не получается и к чему стремишься.
Буду рада,если ты продолжишь моё дело - делать дизайны не за реальную валюту.
1) Новички.
Рассматривание общих аспектов CSS, структуры, "как оно работет", начальные сведения, основные селекторы/параметры/аргументы, вёрстка самого простого дизайна.
атмосферно.
Сообщений 11 страница 20 из 39
Поделиться12012-08-27 18:53:13
Поделиться112012-08-28 18:32:21
теперь дальше.
окошко А5
/* A5 Basic page layout and borders
-------------------------------------------------------------*/
рассмотрим А5.1
/* A5.1 */
#pun {
margin: 0px auto auto auto;
width : 889px;
padding: 0px 10px 0px 10px;
border: none;
border-top: none;
}
Вторая строка - #pun – поясняет, что параметры распространяются на все страницы ресурса, эдакую базисную сетку, где располагаются все остальные элементы.
Третья строка – margin. Сверяясь со шпаргалкой, мы понимаем, что это линия отбивки дочернего объекта. Именно этот параметр и обеспечивает положение страницы форума относительно границ окна вашего браузера. Можно задавать значения как в пикселях, так и в процентах, варьируя положение как вашей душе будет угодно.
Четвертая строка – width – ширина. Параметры можно задавать как в пикселях, так и в процентах. Законы веб-дизайна советуют подобный параметры задавать все-таки в процентах – ведь в наше время различия между разрешениями экранов скачут, как белки, у разных пользователей.
border: none;
border-top: none;
если посмотреть на табличку,которую я тебе довала, border - рамка, border-top: none - значит что параметр верхней кромки(начала контента) в рамки не нуждается,то есть её нет)
/* A5.2 */
.punbb {
float: center;
width: 90%;
height: auto;
margin-left: 5%;
}
окошко а5.2 так же очень важное для дизайна.
у стандартных тем такого нет(по-моему),эти элементы можно добавить,если нуждаешься,то есть если без этих тегов у тебя есть проблемы с границами.
width: 90%; - отвечает за границы с правой стороны форума,то есть чтобы текст не заходил за рамку или тело форума с правой стороны.
margin-left: 5%; - отвечает за подобную функцию,но только с левой стороны. чтобы иконки не выходили на рамку и тело)
Поделиться122012-08-28 19:42:04
Всё ясненько! Так здорово
Поделиться132012-08-28 21:32:55
Всё ясненько! Так здорово
ахах)) я очень рада,что ты пока всё понимаешь х)
теперь перейдём к самому главному))
В число базовых элементов форума входит все – от мала до велика: логотип, иконки, графы, строки, полоски… В общем. Все, что ты так или иначе видите на страницах форума. И практически все можно извратить и подогнать под свою концепцию дизайна. Работа это увлекательная.
это окошко логотипа. сюда вбиваем параметры шапки.
/* D1 Logo and description
-------------------------------------------------------------*/
Ключевые параметры логотипа: /* D1.2 */
#pun-title h1 {
display : block;
height: 120px;
margin: -1px 0px 0px -43px;
}
Параметры логотипа: /* D1.4 */
Внимание! Мы разбираем только этот кусок кода
#pun-title TABLE {
border: none;
height: 120px;
width: 100%;
}
Высота в данных участках кодов должна соответствовать высоте изображение, которое ты ставишб. То есть – если высота твоей картинки 200px, в параметре height ты также пропишешь height: 200px.
Объявлению посвящен целый раздел D6:
/* D6 Announcement
-------------------------------------------------------------*/
Мы с тобой можем узреть ровно три кода. Из них нас могут заинтересовать два:
D6.1 – заголовок объявления
D6.3 – окно объявления, где на форумах обычно расположена таблица.
Оперируя кодами внутри пунктов, мы добиваемся поставленных перед дизайном задач.
Поделиться142012-08-28 21:59:30
Параметры логотипа
Логотип, это, я так понимаю, иконка, которая стоит внизу рядом с "кол-вот тем", "кол-во сообщений" и т.д., верно? Ну а шапка, ясное дело, сама по себе. Или в данном случае логотип и шапка - одно и тоже?
заголовок объявления
Это, допустим, на ролевых "События в игре", "Погода" и т.д. Так?
окно объявления, где на форумах обычно расположена таблица.
Фото игрока дня, активистов, данные о погоде, о событиях.
Я всё правильно понимаю или запуталась? ХД
Отредактировано shadow (2012-08-28 21:59:58)
Поделиться152012-08-28 22:10:10
Логотип, это, я так понимаю, иконка, которая стоит внизу рядом с "кол-вот тем", "кол-во сообщений" и т.д., верно? Ну а шапка, ясное дело, сама по себе. Или в данном случае логотип и шапка - одно и тоже?
не-не-не.
шапка и лого - одно и тоже.
мастера называют "логотип",а в народе просто "шапка".
ахах
Это, допустим, на ролевых "События в игре", "Погода" и т.д. Так?
Нет,это мы прописываем в настройках-объявление. там мы записываем текстом всё,а там задаём параметры таблицы.
те же самые границы,или шрифт и так далее. но это же можно сделать и в htlm,лучше второй вариант,так как всё что нам нужно находится,грубо говоря в этом месте.
Ну,это ты должна знать на всякий пж.
http://magicps.mybb.ru/admin_options.php
в самом низу есть объявление,вот туда мы пишем,то что нам надо.
Я всё правильно понимаю или запуталась? ХД
ещё раз
в D6 вводятся параметры таблицы.
а http://magicps.mybb.ru/admin_options.php тут саму таблицу и текст информации.
Поделиться162012-08-28 22:20:53
не-не-не.
шапка и лого - одно и тоже.
мастера называют "логотип",а в народе просто "шапка".
ахах
*фейспалм* Позорище, простых истин не знаю.
Нет,это мы прописываем в настройках-объявление. там мы записываем текстом всё,а там задаём параметры таблицы.
те же самые границы,или шрифт и так далее. но это же можно сделать и в htlm,лучше второй вариант,так как всё что нам нужно находится,грубо говоря в этом месте.
Т.е. получается что, например, в html-верх мы задаём параметры таблицы (длина, ширина, толщина границ и т.д.), вставляем картинку таблицы и называем это в народе "заголовок объявления". Эти же параметры можно прописать в пункте D6.1 и D6.3. Верно? Но лучше это писать в html, поскольку и сам текст объявления мы будем писать там же, но только в другом окне.
в самом низу есть объявление,вот туда мы пишем,то что нам надо.
А в "Окно объявления" мы заносит данные этой таблицы. Т.е. "Погода" +6/+12, дождик, листики падают и т.д.
Теперь до меня всё правильно дошло? ХД
Отредактировано shadow (2012-08-28 22:23:20)
Поделиться172012-08-28 22:30:34
Т.е. получается что, например, в html-верх мы задаём параметры таблицы (длина, ширина, толщина границ и т.д.), вставляем картинку таблицы и называем это в народе "заголовок объявления". Эти же параметры можно прописать в пункте D6.1 и D6.3. Верно? Но лучше это писать в html, поскольку и сам текст объявления мы будем писать там же, но только в другом окне.
да)) всё правильно поняла))
мы просто это будем на практике проходить и всё глянем и разребрём.
просто есть множество способов прописать дизайн через код.
можно вообще в htlm вверх и низ это сделать,но каждый делает по-своему,как ему удобней.
в тут так же,можно сделать одну и ту же операцию двумя способами))
Теперь до меня всё правильно дошло? ХД
ееес)) правильно)
Поделиться182012-08-28 22:44:00
можно сделать одну и ту же операцию двумя способами))
Всё, теперь поняла. В названиях всех элементов и действий я тоже, пока что, слабо разбираюсь((( Так что, ты уж прости меня за нубские вопросы)))
ееес)) правильно)
Урраааа!
Отредактировано shadow (2012-08-28 22:44:28)
Поделиться192012-08-29 11:29:00
Всё, теперь поняла. В названиях всех элементов и действий я тоже, пока что, слабо разбираюсь((( Так что, ты уж прости меня за нубские вопросы)))
Ничего)) нам,главное,пройти теорию,а когда перейдём к практике всё будет гораздо понятнее)
Основные элементы форума при переработке дизайна
Окно статуса пользователя: /* D5.1 */
Главная страница:
Графа с описанием и названием локации: /* C2.1 */
Графа с количеством тем и сообщений в локации: /* C2.2 */
Графа с указанием последнего сообщения: /* C2.3 */
Страница поиска и списка участников:
Первая графа – ники: /* C2.4 */
Вторая графа - /* C2.5 */
Строка со словами «Форум – Тем – Сообщений – Последнее сообщение»: /* C2.12 */
Списки модераторов в описании локаций: /* C2.10 */
Отображение иконок: /* C2.14 */
Внимание! Параметр margin-left должен иметь значение в пикселях на 5-6 единиц больше, чем ширина ваших иконок!
Параметры иконок: /* C2.15 */ - считайте, что вы забиваете стоянку под будущие иконки.
Сообщение: /* C3.1 */
Черточка-граница между временем отправки сообщения и профилем автора: /* C3.3 */
Форма ввода текста: /* C1.16 */
Статистика
Статистике форума также посвящен целый раздел D7:
/* D7 Statistics
-------------------------------------------------------------*/
Мы видим в нём пять пунктов. Из них в деле разметки дизайна нас будут интересовать всего лишь сам контейнер (окно) статистики, где размещены все данные: /* D7.1 */. Остальные четыре пункта, при желании, вы можете разобрать сами, но они предусмотрены для более детальной работы даже не с самим оформлением – а с работой статистики.
Поделиться202012-08-29 12:49:13
малефисент
Ого, ты прямо по всем-всем пунктикам пробегаешься. Здорово! Всё поняла и, надеюсь, усвоила)))