Приуэт, Света)
Спасибо, что выбрала меня в учителя других-то пока и нет, лол хд
С чего начнём? С разбором кодов или будем учиться делать дизы как их делаю я?
французский клубняк
Сообщений 1 страница 24 из 24
Поделиться1Воскресенье, 11 декабря, 2011г. 14:33:51
Поделиться2Воскресенье, 11 декабря, 2011г. 14:40:21
гилберт'
давай с разборки кодов, ибо я учусь всегда методом тыка, хочется все-таки выучить основу, а там уже я соображаю)
Как раз можно будет замутить и нам диз
Поделиться3Воскресенье, 11 декабря, 2011г. 14:45:54
Приуэт
мегамозг, родной **
Поделиться4Воскресенье, 11 декабря, 2011г. 16:19:11
`бурлеск
в каждой структуре диза всё по разному. Будем учиться на структуре здешнего дизайна.
Поделиться5Воскресенье, 11 декабря, 2011г. 16:24:50
`бурлеск
начнём с style_cs.css
в самомо начале кода:
#pun-title TABLE { background : transparent url(http://savepic.net/2193369.png) no-repeat left top; margin-left : 0px;
это сама шапка.
дальше идёт:
body {background-color: #000000; background-image : url(""); background-repeat: no-repeat; background-position : top center; }
body {background-color: #000000; - это цвет заднего фона. в данном случае он - чёрный.
background-image : url(""); - картинка вместо фона. Но только в том случае, если фон совмещён с шапкой. Этот фон не зафиксированный, то есть как только фон закончиться пойдёт чёрный цвет (ну или какой ты там хочешь). это тоже следует учитывать при создании фона, слитного с шапкой.
идём дальше:
#pun { background-image : url(""); background-color: #e4e4e4; background-position : center; background-attachment : fixed; }
background-image : url("");
background-color: #e4e4e4;
это как ты понимаешь - внутренний фон картинкой и цветом. В этом поле цвет можно не писать, а только вставить картинку, ибо фон фиксирован. (поле: background-attachment : fixed;)
отсюда можно вывести, что если добавить эту строчку в графу с задним фоном - он будет зафиксирован.
ай да я, ай да молодец хд Я сама только сейчас додумалась до этого хд ибо ранее я этот код не разбирала)
Поделиться6Воскресенье, 11 декабря, 2011г. 16:28:35
Я знаю, что иду не по порядку, но пофиг. Идём в style.css и ищём
/* A5 Basic page layout and borders
-------------------------------------------------------------*/
/* A5.1 */
#pun {
margin: 0px auto auto auto;
width : 848px;
padding: 0px 0px 0px 0px;
border: none;
border-top: none;
}
width : 848px; - это ширина самого форума. У CSS и фотошопа немного разные понятия о пикселях. Тут стоит 848, но на самом деле это 850.
теперь ищем:
/* D1.4 */
#pun-title h1 span {
font-size: 1.5em;
}
#pun-title table {
border: none;
height: 458px;
width: 100%;
}
height: 458px; - это высота шапки.
width: 100%; - её ширина. вообще никогда не меняла это значение и тебе не советую)
Поделиться7Воскресенье, 11 декабря, 2011г. 17:08:27
кст, твоя структура наверное поудобнее будет тебе, ведь ты с ней работаешь. давай я буду на ней объяснять, если хочешь?
Поделиться8Воскресенье, 11 декабря, 2011г. 17:16:32
гилберт'
да нет, давай на твоей, мне нормально, я часто структуры меняю)
Поделиться9Воскресенье, 11 декабря, 2011г. 17:18:38
`бурлеск
просто твоя и получше будет. там и тень у ссылок и то и сё)
Поделиться10Воскресенье, 11 декабря, 2011г. 17:26:24
гилберт'
я через код ставила)) хтмл, а не в стиле прописывала)
Поделиться11Воскресенье, 11 декабря, 2011г. 17:27:10
`бурлеск
о, крутяк не поделишься кодом? хд
Поделиться12Воскресенье, 11 декабря, 2011г. 17:30:03
гилберт'
поделюсь, я не жадина **
<style type="text/css"> .punbb A:link, .punbb A:visited {text-shadow: #675b50 0.5px 0.5px 1px } .punbb A:hover {text-shadow: black 0.5px 0.5px 1px} </style>
хтмл-вверх
Поделиться13Воскресенье, 11 декабря, 2011г. 17:44:20
`бурлеск
спасибо :3
щас испробую хд
Поделиться14Воскресенье, 11 декабря, 2011г. 17:54:07
Перед тем, как продолжить обучать тебя работе с этой структурой, хочу сказать, что в этой структуре есть несколько минусов, но они убираются при помощи хтмл.
Например - текст в шапке (там высвечивается название форума).
сдвигаем рекламу с шапки,убираем название форума с шапки на главной странице
<style> #pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 400px; top: 440px } </style> <style> #pun-title .title-logo { display : none; } </style>
это в верх
<style> #pun-main .code-box, #pun-main .quote-box, #pun-main .hide-box { background: url(ссылка на изображение в цитату и форму ответа); } </style> <style> .punbb .post-sig dt { background:url(http://xmages.net/upload/200dc293.jpg); height: 1px;width: 800px; border: none; } </style> <style type="text/css">#pun .tc2 { text-align: center; } </style> <style type="text/css"> #pun-main h2 { text-align: center; } </style> <style type="text/css"> #pun-ulinks .container { text-align: center; } </style> <style type="text/css"> #pun-navlinks .container { text-align: center; } </style> <style type="text/css"> #pun-main .post-author ul {text-align: center;} </style>
Скрипт на изображение в цитату и форму ответа, скрипт отделяющий сообщение от подписи картинкой,
весь форум по центру.
Поделиться15Воскресенье, 11 декабря, 2011г. 18:01:26
Вечно замечаю, что начинаю не с того.
Для начала, наверное, надо было рассказать о самом CSS немного и о параметрах. Никогда не поздно исправляться хд
Размерности:
em – высота шрифта
ex – высота буквы
px - пикселы
in - дюймы
cm - сантиметры
mm - миллиметры
pt - пункты
% - проценты
Основные параметры:
Height - высота элемента
Width - ширина элемента
Background (фон)
background-color – цвет заливки (веб-значение)
background-attachment – прокрутка фона
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.
background-image – фоновая картинка
url ("...") – в скобках указываете адрес изображения
none – отсутствие картинки
background-repeat – автоматическое размножение фона
no-repeat - не размножается
repeatx - размножается по горизонтали
repeaty - размножается по вертикали
repeatxy - размножается в обоих направлениях.
background-position – расположение фона. Примечание: сначала указывается расположение по вертикальной оси: top, center или bottom, затем - по горизонтальной: left, center или right.
Border (рамка)
border-color – цвет рамки (веб-значение)
border-width – толщина рамки (px)
border-style – стиль начертания
none – отсутствие рамки
dotted – пунктир (точки)
dashed – штрих-пунктир
solid - одинарная
double - двойная
groove – трехмерный эффект
ridge - трехмерный эффект возвышения
inset - трехмерный эффект углубления
outset - трехмерный эффект выпуклости фона
border-top – параметр верхней кромки
border-bottom – параметр нижней кромки
border-left – параметр левой кромки
border-right – параметр правой кромки
Color (цвет) – цвет шрифта элемента (веб-значение)
Font (шрифт)
font-size – размер шрифта. Можно задавать в размерности, можно – по возрастающим значениям, методом научного тыка:
xx-small
x-small
small
medium
large
x-large
xx-large
font-style - начертание
normal - стандарт
italic - курсив
oblique - чуть менее наклонный, чем курсив
font-weight – толщина. Значения:
normal - стандарт
bold – полужирный
Text (текст)
text-align - выравнивание текста внутри элемента.
left - по левому краю
right - по правому краю
center - по центру
justify - по ширине
text-decoration - украшение текста
underline - подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание
Display – отображение элемента. Значения:
none - отсутствует
block – обведено рамкой
list-item – элемент как часть списка, присваивается маркер
inline – вывод элемента в одну строку
Padding - линия отбивки материнского объекта
padding-top - верхняя отбивка
padding-bottom - нижняя отбивка
padding-left - левая отбивка
padding-right - правая отбивка.
Margin - линия отступа дочернего объекта.
margin-top - верхний отступ
margin-bottom - нижний отступ
margin-left - левый отступ
margin-right - правый отступ
Vertical-align - выравнивание элемента по вертикали
top - по верхнему краю
bottom - по нижнему
middle - посередине
Общий код (Структуры – около 26 страниц WORD, Цвета – чуть меньше) пишется в несколько разделов. Они носят названия, состоящие из латинской буквы и порядкового номера: А3, А4, C1, D2 и так далее. Каждый раздел начинается подобным заголовком
/* A4 Float clearing and hidden items
-------------------------------------------------------------*/
И продолжается вплоть до заголовка следующего раздела. Каждый раздел управляет какими-то параметрами оформления. Это может быть шрифт, рамки, положения различных элементов форума… На основных разделах мы остановимся поподробней чуть ниже. Пока что вам следует четко различать, где находится один раздел, а где искать другой. Это намного проще и не так страшно, как кажется попервой, я вас уверяю.
взяла всё отсюда: http://wolfcentre.mybb.ru/viewtopic.php?id=535
Поделиться16Понедельник, 12 декабря, 2011г. 22:42:16
всё пока понятно?
Поделиться17Вторник, 13 декабря, 2011г. 09:58:12
гилберт'
да, да, все понятно))
Поделиться18Четверг, 15 декабря, 2011г. 03:28:31
гилберт, любовь моя, свет очей моих, где же ты **
Поделиться19Четверг, 15 декабря, 2011г. 10:05:50
`бурлеск
тут я хд
сейчас урок напишу)
Поделиться20Четверг, 15 декабря, 2011г. 10:28:36
Вернёмся к фонам. Я расскажу об этом поподробнее)
body {background-color: #000000; background-image : url(""); background-repeat: no-repeat; background-position : top center; }
Это задний фон.
Если хочешь шапку слитную с фоном, то в background-image : url(""); ставишь картинку фона с шапкой (например: http://xmages.net/storage/10/1/0/1/6/up … 57e6da.jpg ), но строку background-color: #000000; ты не убираешь. В данном случае фон не зафиксированный, поэтому после картинки пойдёт цвет (плавный переход нужно продумывать когда фон создаёшь)
Если хочешь фон замощенный картинкой (наподобие такого: http://s49.radikal.ru/i124/1112/a3/2155df830e1e.jpg), то ставишь адрес картинки, цвет можешь убрать, а вот в строку background-repeat: no-repeat ставишь repeatxy
(Вот и сгодилась та подсказка, что я давала тебя в предыдущих сообщениях)
Если хочешь фон цветом - всё понятно. Всё как сейчас в структуре. Только код меняешь на свой)
далее
#pun { background-image : url(""); background-color: #e4e4e4; background-position : center; background-attachment : fixed; }
уже цвет внутреннего фона.
Можно картинкой (применяем то, что я тебе рассказала про замощенный фон), можно цветом. А можно и делать рамочку! Ты знаешь как)
Заливаем на саверпик или куда тебе привычнее и ставим ссылку в background-image : url("");
код цвета можешь убрать.
Поделиться21Воскресенье, 25 декабря, 2011г. 10:59:22
Продолжаем?
Поделиться22Вторник, 27 декабря, 2011г. 18:34:56
гилберт'
да, да, прости, солнышко, у меня просто в жизни проблематика, но я все читаю))) очень помогает :*
Поделиться23Вторник, 27 декабря, 2011г. 21:04:05
batman'
если хочешь, может временно приостановить до решения личных проблем))
Поделиться24Вторник, 27 декабря, 2011г. 21:47:10
гилберт'
да нет, они никогда не закончаться. продолжаем, буду отписываться.