Кот

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Архив обучения от 03.12 » slastnicova & группа


slastnicova & группа

Сообщений 21 страница 30 из 39

1

Всем привет, рада что Вы все записались на обучение ко мне! Меня зовут Тая, мне 18 лет. Надеюсь что научу Вас многому и качественно.

Обучение у нас пойдёт пойдёт по следующим ступеням:
1. Простейший дизайн (задний фон и тело однотонные, категории текстом, иконки картинкой)
2. Простой дизайн (задний фон, категории, иконки - картинкой, тело однотонное)
3. Улучшенный дизайн (задний фон, категории, иконки, тело - картинкой, меню текстом)
4. Сложный дизайн (два задних фона, тело, категории, иконки - картинкой, меню на подложке, картинками)


Теперь немного расскажите о себе и мы будем начинать с самых азов. Так же после изучения первой ступени мы будем разбирать составление таблицы в объявление форума, и разбирать divы для объявлений в шапке.

От вас небольшая анкета:
1. Тестовик
2. Что вдохновляет
3. Тематики с которыми работаете


работы учеников

Тестовики:
1. фантастика
2. Mira.Andreeva - не открывается
3. .false-king
4.

Отредактировано slastnicova (2012-09-12 07:06:33)

0

21

обещанное

http://s1.uploads.ru/t/1MSFX.jpg
http://s1.uploads.ru/t/9jKOm.png

0

22

Следующий блок CS3 Links, этот блок отвечает за ссылки на форуме.

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #993366;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #FF3300

отвечает за все ссылки на форуме без наведения. Прописывать оба значения одним цветом.

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #FF33FF;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

все ссылки на форуме при наведении

/* CS3.3 */
#pun-navlinks a {
  color: #CC00CC;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

главное меню без наведения.

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #FF33FF;
  font-weight: normal;
font-style: normal;
  border-bottom: 0px none #000;
  text-decoration: none;

  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  color: #FF33FF;
  }

главное меню при наведении, прописываем оба значения одним цветом.

Так же моно прописать тень ссылкам, для это добавляем к нужному селектору следующее:

text-shadow: 0px 0px 0px #cccccc;

смещение по горизонтали, смещение по вертикали, размытие и цвет тени.

Задание:
Поменять цвета ссылок на форуме, добавить тень со смещениями 1 и 1 без размытия белого цвета.
Поменять цвет ссылок меню с тенью при наведении без смещений с размытием 3 белого цвета.

И заодно сразу разберем иконки сообщений. Это сразу делаем, как дополнительное задание.
Следующий блок CS4 Post status icons, он отвечает за иконки новых/старых/выжных/закрытых сообщений/тем.
Его мы заменяем на следующее:

div.icon {border-color: transparent}
       tr.iredirect div.icon {border-color: transparent}
       div.inew {border-color: transparent}

       Div.icon {
              background-image : url(КАРТИНКА);
              background-repeat: no-repeat;
              }
       TR.inew Div.icon {
              background-image : url(КАРТИНКА);
              background-repeat: no-repeat;
              }
       TR.isticky Div.icon {
              background-image : url(КАРТИНКА);
              background-repeat: no-repeat;
              }
       TR.iclosed Div.icon {
              background-image : url(КАРТИНКА);
              background-repeat: no-repeat;
              }

0

23

.false-king написал(а):

Вчера 15:59:56

спасибо)

0

24

Все. Иконки пришлось через хтмл-верх прописать

0

25

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

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
  @import url(style_cs.css);

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

/* A2.1 */
html, body {margin: 0; padding: 0}

/* A2.2 */
.punbb * {
  margin: 0
  }

/* A2.3 */
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {
  padding: 0;
  list-style: none;
  }

/* A2.4 */
.punbb img {
  border:none
  }

/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  width: 100%;
  }

/* A2.6 */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}

/* A2.7 */
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle
  }

Эти пункты мы Не трогаем, ибо черевато последствиями.

Этот пункт A3 Text setup, отвечает за текст на всём форуме. Именно его мы и будем разбирать на этом уроке.

/* A3.1 */
body {
  font-size: 100.01%;
  }
/* A3.2 */
.punbb {
  font: normal 68.75% verdana, arial, helvetica, sans-serif;
  }

это мы не меняем, здесь размер всего текста относительно форуму.

/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif;
  }

текст в поле набора поста, кнопках, и модераторском меню.

/* A3.4 */
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th {
  font-size: 1em;
  font-weight: normal;
  }

текст для заголовка таблиц форум/тем/сообщений, название форума.

/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
  font-size: 1.1em;
  }

отвечает за категории/название темы(когда в теме)/форму быстрого ответа

/* A3.6 */
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* A3.7 */
.punbb address, .punbb em {
  font-style: normal
  }

/* A3.8 */
.punbb .post-content em {
  font-style: italic
  }

/* A3.9 */
.punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
  }

/* A3.10 */
.punbb a {
  text-decoration: underline
  }

/* A3.11 */
.punbb optgroup {
  font-weight: bold;
  }

эти пункты мы тоже не трогаем.

В пунктах мы меняем только размер, меняется он только в em 1em=16px (если память не изменяет)

Задание:
Увеличить размер текста в категориях и форме быстрого ответа.
Уменьшить размер текста для заголовка таблицы форум/тем\сообщений.

0

26

все

+1

27

Идём дальше пункт A4 Float clearing and hidden items мы не трогаем.
Дальше идёт пункт A5 Basic page layout and borders, он отвечает за тело форума.

Пункты:

/* A5.1 */
#pun {
  margin: 30px;
  position: relative;
  }

/* A5.2 */
.punbb {
  float: left;
  width: 100%;
  height: auto;
  }

Заменяем на:

/* A5.1 */
#pun {
  margin: auto;
  width : 830px;
  position: relative;
  padding-bottom: 100px;
  }

/* A5.2 */
.punbb {
  float: left;
  width: 100%;
  height: auto;
  }

Эти пункты отвечают за ширину тела форума.
жирным - ширина форума, настраивается по желанию. Но для того, чтобы форум смотрелся на всех разришениях одинакого, необходимо знать границы размера : 800 - 1000px.

/* A5.3 */
#pun-redirect, #pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
  }

отвечает за переадресацию на форуме, пока мы её трогать не будем.

Следующие что мы будем изменять будут иконки ищим пункт:

/* C2.15 */
.punbb div.icon {
  border-style: solid;
  border-width: 0.6em 0.6em 0.6em 0.6em;
  height: 0;
  line-height: 0.0;
  margin-top: 0.1em;
  width: 0;
  }

И заменяем его на:

/* C2.15 */
.punbb div.icon {
float: right;
    display: block;
    width: 100px;
    height: 100px;

padding-right: 50px;
}

расположение: справа/слева
ширина и высота оптимальные размеры 50 - 100рх
отступ справа, необходима регулировка

Пункт /* C2.16 */ удаляем для корректного отображения иконок.

Дальше весь пункт /* D1.4 */
заменяем на:

/* D1.4 */
#pun-title h1 span {
        display: none;
}

#pun-title table {
border: none;
height: 240px;
width: 900px;

background: url("КАРТИНКА") no-repeat; background-position: top center;

}

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

#pun-title TD.title-logo-tdr {
        border: none;
        padding-right: 0px;
}

#pun-title .title-logo {
color: transparent;
}

бордовое ширина и высота шапки подгоняем под картинку для шапки.

Далее в самый низ первого окна добавляем:

/* Баннер рекламы */
#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 415px; top:0px
}

с помощью этого мы будем двигать баннер рекламы.

Задание:
Сделать ширину форума 900рх.
Иконки сделать 70х70, расположение справа с отступом 80рх.
Шапка 900х450рх.
Соответственно всё это нарисовать в фш и вставить.

0

28

забыла пункт

/* A5.5 */
.punbb .category, .punbb .post {
  margin-top: 0.4em;
  }

заменяем на

/* A5.5 */
.punbb .category {
  margin-top: 0.4em;
text-align: center;
  }

.punbb .post {
  margin-top: 0.4em;
  }


эта часть отвечает за расположение названий категорий

.punbb .category {
  margin-top: 0.4em;
text-align: center;
  }


посмотрим что получилось, если что, ещё допишу.

0

29

все

0

30

.false-king
хорошо, теперь чтобы небыло пробелов в нашем "теле" форума нужно прописать следущее:
первое окно стилей.

/* A3.2 */
.punbb {
  font: normal 68.75% verdana, arial, helvetica, sans-serif;
background: #d2cdb9;
/*border: 3px solid #cdc9a5;
box-shadow: 0 0 10px #000000;
  -moz-box-shadow: 0 0 10px #000000;
  -webkit-box-shadow: 0 0 10px #000000;*/

жирное - задаст фон
курсив - тень у тела, если она нужна, то убери знаки комментария из кода /**/

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

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

0


Вы здесь » Кот » Архив обучения от 03.12 » slastnicova & группа


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC