Кот

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

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


Вы здесь » Кот » Архивы » Nutella [faiko]


Nutella [faiko]

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

1

http://s1.uploads.ru/i/ax8G4.jpg
Здравствуй, Лёля! http://uploads.ru/i/n/V/d/nVdxX.gif
Спасибо, что записалась ко мне на обучение. Несколько вопросов:
1) Есть опыт работы с ксс/хтмл?
2) Если есть, то с чем ты работала?
3) Почему выбор учителя остановился на мне?
4) Есть ли какие-либо пожелания или предпочтения к обучению?
5) С чего начнем (хтмл, ксс)?
И на заметку: обучение продлится не очень долго. Я предпочитаю не зацикливаться на чем-то одном. Пара таблиц, пара блоков с настройками, около трех дизайнов - и гуляй. http://uploads.ru/i/z/U/e/zUe1x.gif

0

2

faiko
Доброго вечера.)))
1.) Ничтожный. в хтмл больно не совалась.
2.) Я так - могу шапку поменять и все. т.т
3.) Дизайны очень понравились. *_*
4.) Да нет вроде.
5.) ксс.

0

3

CSS. Ок. http://uploads.ru/i/z/U/e/zUe1x.gif
Тогда для начала теория:
Как сделать дизайн для форума или сайта?
CSS. Свойста текста
Делаем свой дизайн [супернатурал]
Скругленные края и тень для блоков.

Короткий урок от меня

Любой код CSS состоит из трёх частей: селектор, параметр и аргумент.

#селектор {параметр: аргумент}

#селектор - это название элемента, который мы меняем в дизайне. Например: когда на форум в поле "Объявление" в администрировании мы что-то ставим и нажимаем "Показать объявление", на главной странице под юзер-ссылками появляется наш контент, а над ним слово "Объявление". Селектор этого самого слова выглядит так: #pun-announcement h2. Селектор всего блока объявления выглядит так: #pun-announcement .container и так далее...
параметр: - это то, что мы собираемся менять в нашем элементе. Это может быть цвет, шрифт, фон, выравнивание, границы и так далее.
аргумент - это значение параметра. Ты знаешь, как я хреново объясняю, поэтому сразу пример: у параметра шрифта аргумент будет заключаться в названии шрифта.
Конкретный пример:

#pun-announcement h2 {text-align: center;
text-transform: uppercase;
font-family: Arial;
font-size: 0.9em}

После каждого значения, кроме последнего, должна стоять точка с запятой, иначе код не будет работать.
text-align: center; - выравнивает заголовок "Объявление" по центру.
text-transform: uppercase; - делает все буквы заглавными.
font-family: Arial; - делает текст шрифтом Arial.
font-size: 0.9em; - делает текст уменьшенным, как 8px в форме ответа.
Можно придавать одни и те же параметры для нескольких элементов. Для этого достаточно записать селекторы через запятую.

0

4

Прочитала, попыталась понять, создала сайт - ничего не вышло. х.х

0

5

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

создала сайт - ничего не вышло. х.х

Работать мы пока будем с форумами, а не с сайтами. http://uploads.ru/i/z/U/e/zUe1x.gif
Теперь применим теорию на практике. Создай div-блок (код пока вставь в объявление):

<div id="nutella">Произвольный контент. Здесь должно быть много текста, чтобы появилась прокрутка.</div>

nutella - селектор твоего блока. С его помощью можно будет задать стиль блоку через CSS.
Сделай оформление по эскизу:
http://s1.uploads.ru/t/6J7l9.jpg
Если что-то не понятно - тыкай меня или гугл. Есть еще раздел полезных статей. http://uploads.ru/i/d/Q/Y/dQYSp.gif

0

6

faiko
А если я скажу, что не понятно ничего - тапком не получу? хДДД

0

7

Nutella
Ну, как же. Помнишь в моем уроке было это:

#селектор {параметр: аргумент}

nutella - это селектор. Подставляешь его, получаешь следующее:

#nutella {параметр: аргумент}

Ставишь это в хтмл-верх с тегами стиля:

<style>#nutella {параметр: аргумент}</style>

Вот это ставишь пока в Администрирование - Настройки - Объявление:

<div id="nutella">Произвольный контент. Здесь должно быть много текста, чтобы появилась прокрутка.</div>

Теперь у тебя в объявлении стоит блок, а в хтмл-верху - его оформление, которое нужно сделать таким же, как и на эскизе.
Чтобы добавить блоку фон, вместо "параметр" прописываешь "background-color", а вместо значение - цвет фона. Это может быть слово (как в форме ответа, например, "red", "blue" и другие) либо шестнадцатеричный код цвета (в фотошопе, например, при выборе цвета внизу есть маленькое окошко с шестью буквами/цифрами - это и есть код цвета). Последний прописывается с решеткой перед ним. То есть, фон для блока при помощи ксс будет выглядеть так:

<style>#nutella {background-color: #a6e4a1;}</style>

Теперь понятнее? :)

0

8

faiko
*рыдает и бьется головой об стену*
не получаетсяяяяяяяяяя.

0

9

Nutella
В чем возникают трудности?

0

10

Пост учителя покидаю. Тема закрыта и помемщена в архив. http://uploads.ru/i/O/7/o/O7opj.gif

0


Вы здесь » Кот » Архивы » Nutella [faiko]


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