Кот

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

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


Вы здесь » Кот » Архив обучения от 03.12 » Заострённые уши.


Заострённые уши.

Сообщений 31 страница 40 из 59

1

http://uploads.ru/i/k/s/p/kspng.png

Привет Лиза, очень приятно с тобой познакомиться. И надеюсь, что научу тебя многому. Я Тая, рада, что ты выбрала именно меня в учителя.

Твой тестовик - http://in.9bb.ru
Связь с тобой - скайп - lizziespring

И так приступим.
Чему именно хочешь научиться, какая структура дизайна, может примеры дизайнов?
Если уже что-то знаешь рассказывай.)

Дневник:


Урок №1 - 5-
Урок №2 - 5+
Урок №3 -


Был забыт сменен фон шапки и меню форума.
Работа выполнена идеально.

Отредактировано slastnicova (2012-08-29 16:08:08)

0

31

Ветвь написал(а):

Вот! Я нашла:

молодец)
я и забыла про него совсем)
у меня его вообще нет. удалила, иконки заезжали друг на друга.

0

32

Далее мы переходим в первое окно стиля.

/* 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

33

Урок проверю теперь только в понедельник, уезжаю на выходные.

0

34

Хорошо. Тогда до понедельника.
Кстати, готово.

0

35

Идём дальше пункт 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рх
отступ справа, необходима регулировка

Дальше весь пункт /* 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рх.
Шапка 900х450рх.
Соответственно всё это нарисовать в фш и вставить.


часть с иконками уже разбирали, но я этот урок ещё не переписала.

0

36

Сделано.

0

37

Ветвь
хорошо, молодец.

В пункт /* A3.2 */
нужно добавить это:

background: #d2cdb9;

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

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

0

38

slastnicova написал(а):

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

Оооо... Это долго делать. Вы не против, если я готовое задание выложу не сегодня, а завтра-послезавтра?
И из-за учебы я не смогу так быстро выставлять готовые задания. Но если появится жуткий завал в учебе, я обязательно предупрежу.

0

39

Ветвь написал(а):

Оооо... Это долго делать. Вы не против, если я готовое задание выложу не сегодня, а завтра-послезавтра?

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

0

40

Готово.

0


Вы здесь » Кот » Архив обучения от 03.12 » Заострённые уши.


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