К счастью, форум удалось восстановить после взлома. Понятия не имею, кому могло понадобиться уничтожать и без того мёртвую ролевую. Пришлось снять с должности всех ныне действующих модеров и админов, в которых ныне отпала надобность, да и банально обезопасить форум от повторного взлома.
Также, к сожалению, слетели кнопки. Восстановить их не получилось, поэтому были поставлены кнопки от Марка. Если слетят и они, придётся искать хостинг для кнопок, что не так-то просто сделать последнее время. Также слетел старый дизайн из-за просроченных картинок. Ни один хостинг не работает сейчас стабильно, поэтому загрузила новый дизайн на свой страх и риск. Если снова что-то случится с оформлением форума, то на этот раз у меня хотя бы будут исходники.
Спасибо, если вы периодически заходите сюда поболтать. С вами было приятно играть в далёкие 2006-2010 года.
Отправлено: 01.10.11 17:41. Заголовок: Уроки по Borda.ru
Перечень имеющихся уроков (с заданиями): Урок 1. С чего начинается HTML. (Автор: Elly) Урок 2. С чего начинается работа. (Автор: Elly) Урок 2.1 (дополнительный). Вставка комментариев. (Автор: Elly) Урок 3. Разборка кодов форума. Параметры таблицы. (Автор: Elly) Урок 4. Настройка формы ответа/текстового поля. (Автор: Elly) Урок 5. Фон, текст и ссылки. (Автор: Elly) Урок 5.1 (дополнительный). Шрифт текста на форуме. (Автор: Elly) Урок 6. Цвет и оформление таблицы. (Автор: Elly) Урок 7. Создание самого простого дизайна для форума. (Автор: Elly) Урок 8. Текст на логотипе. (Автор: Elly) Урок 9. Ссылки на логотипе. (Автор: Elly)
Отправлено: 01.10.11 17:45. Заголовок: Урок 1. Цитата из В..
Урок 1.
Цитата из Википедии:
цитата:
HTML (от англ. Hypertext Markup Language — «язык разметки гипертекста») — это стандартный язык разметки документов во Всемирной паутине. Практически все веб-страницы создаются при помощи HTML.
----------
С чего начинается HTML
Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки". Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так:
цитата:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2 (это проверенная, но очень старая версия). Как видно из примера, самый короткий html-документ состоит буквально из одной строки. Пример самого короткого HTML-документа:
цитата:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
----------
Задание Создать HTML-файл, исходя из данного урока. 1. Создать текстовый документ. 2. Прописать код:
цитата:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
3. Сохранить с расширением ".html". Выполненные задания присылать на е-майл red-wind-rwf@yandex.ru
Отправлено: 01.10.11 17:45. Заголовок: Урок 2. С чего начин..
Урок 2. С чего начинается работа.
На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывется тегом <HTML> и им же закрывается.
Затем, между тегами <HTML> и </HTML> следует разместить заголовок и тело документа. Вот и все! Начало положено – вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:
цитата:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>Заголовок документа</TITLE> </HEAD> <BODY> Текст документа </BODY> </HTML>
Если приведенный выше пример пояснить схематически, получится следующее:
Из схемы видно, что документ состоит из двух основных блоков – "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY.
Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия (см. элемент TITLE).
Тело документа – святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тегами <BODY> и </BODY>.
----------
Задание. С помощью документа, созданного на прошлом уроке, вписать код второго урока. В заголовок вписать название ролевой, а в текст документа записать любой текст (например, впечатления от ролевой или рассказать о своём персонаже). 1. Открыть ваш html-документ с помощью Блокнота. 2. Вписать указанный в уроке код. 3. Дополнить текст документа и вписать название. 4. Сохранить и отправить на почту red-wind-rwf@yandex.ru.
Используется для создания комментариев в любой части документа. Все, что находится внутри <!-- -->, будь то элемент или текст – будет проигнорировано браузером (не будет обрабатываться и выводиться на экран). Пример:
цитата:
<HTML> ... <!-- Начинаем чуткую работу с телом документа --> <BODY> <!-- Всталяем табличку с прайс-листом --> ... </BODY> <!-- Все. Готово --> </HTML>
----------
Примечания:
цитата:
Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке окна. Иначе говоря, тег <!-- --> внутри TITLE не действует.
Не ленитесь комментировать все, что написали. Это волшебное правило сэкономит вам немало времени при попытке разобраться в собственном творении пару месяцев спустя.
----------
Дополнительное задание. Прокомментировать текст документа из предыдущего урока (внутри BODY).
html-код форума достаточно прост. Посмотреть его можно в настройках форума, в пункте Оформление. Именно здесь расположено всё, что касательно дизайна. И первое, что мы будем рассматривать, это основной код. На форуме он подразделяется на две части: html-верх и html-низ. В основном, в дизайне больше задействован html-верх. В html-низ же чаще вставляют разные полезные скрипты, но речь сейчас пойдёт не об этом. В стандартном дизайне html-верх выглядит так:
1. Собственно, это начало документа. Начало его тела и заголовок страницы:
цитата:
<HTML> <HEAD> <TITLE>Форум</TITLE>
2. Далее идёт вставка другого языка программирования - css. Такая вставка обязательно начинается с <STYLE type=text/css> и заканчивается </STYLE>. Этот код содержит в себе свойства и текстуру фона форума, цвет текста в разных частях дизайна, цвет ссылок, цвет и текстура верхних частей таблицы форума, а так же цвет и оформление текстового поля для набора сообщений. Иногда в эту же вставку дополняют разными другими кодами, например, оформление курсора. Мы будем ещё подробно об этом говорить, но на этом уроке мы пока отложим эту часть дизайна.
4. Следующий код задаёт цвет основному фону форума. Цвет можно выбрать абсолютно любой. Для этого существуют специальные коды цвета (сам код цвета отмечен синим). Их легко можно найти в интернете или скопировать с палитры фотошопа. Некоторые коды цветов можно посмотреть здесь: click here.
цитата:
<BODY bgColor=#e5e5e5>
5. А вот этот код - параметры таблицы. На нём-то мы сегодня и остановимся более подробно. Располагается он, обычно, в самом низу html-верха.
Возможно так же изменить цвет подложки таблицы (это белая табличка вокруг основной таблички форума). Тогда нам следует выбрать код цвета, который мы вставим в это место:
Если вы хотите выровнять таблицу по левому или по правому краю, то замените слово center (центр) на left (лево) или right (право).
Задания. №1. Для удобства, вставьте комментарий <!-- Параметры таблицы --> между основным цветом фона и параметрами таблицы форума. №2. Выровняйте таблицу по центру, сделайте ширину таблицы 1024 пиксела и в качестве подложки вставьте текстуру: http://lenagold.ru/fon/flo/fial/violet02.jpg
В этом коде указан размер шрифта и сам шрифт текста в текстовом поле и на кнопках (в данном случае, у нас кнопки "отправить" и "предпросмотр"). При желании, можно менять шрифт (он указан синим) и размер шрифта (указан красным).
----------
цитата:
textarea{width:100%;height:120;}
Здесь указаны параметры самого текстового поля: ширина и высота. Ширина у нас 100%, а высота 120 пикселов. Ширину обычно не трогают, а вот высоту иногда уменьшают или увеличивают, в зависимости от того, какое количество текста обычно пишется. Для удобства на ролевых делают высоту побольше, а на обычных форумах общения или гостевых её делают поменьше. Так же есть несколько дополнений к этому виду кода. Давайте их рассмотрим.
Картинка в форме ответа. Очень часто в тон дизайну подбирают текстуру в текстовое поле (например, если не могут подобрать нужный цвет). В таком случае, код прописывают так:
Рамка вокруг формы ответа. Существуют несколько видов рамок. Их код прописывается примерно так:
цитата:
textarea {height:120;width:100%;background-image:url(http://lenagold.ru/fon/uzor/fio/fiouzor49.jpg);border: название рамки1px#код цвета;}
Синим выделено название рамки, красным выделена ширина рамки в пикселах, а зелёным выделен цвет рамки. Вот некоторые виды рамок: solid - обычная сплошная рамка. none - рамка отсутствует, её ширина равна нулю. hidden - результат тот же, что и при none - рамка не отображается. dotted - рамка в виде последовательности точек (мелкий пунктир). dashed - пунктирная рамка. double - двойная линия. groove - "вдавленная" рамка, с эффектом объёма. ridge - "выпуклая" рамка, с эффектом объёма. inset - вариант "вдавленной" рамки, с эффектом объёма. outset - вариант "выпуклой" рамки, с эффектом объёма.
Параметры кнопок "отправить", предпросмотр", "поиск" и др. Имеет те же дополнения, что и у текстового поля. Если эту строчку удалить, то кнопки сами собой сменятся на стандартные выпуклые, без стиля и цвета.
Отправлено: 01.10.11 17:46. Заголовок: Урок 5. Фон, текст и..
Урок 5. Фон, текст и ссылки.
Фон. Обычно, в качестве фона подбирают бесшовную текстуру. Это очень просто и удобно, т. к. не у всех одинаковое разрешение монитора. Итак, в этом уроке я научу вас как вставлять на форум фон. В html-верху за фон страницы отвечает вот этот код:
Чтобы вставить фон, достаточно прописать следующее:
цитата:
body{background-image:url(Код картинки);}
Синее заменяем ссылкой на текстуру. Она может быть абсолютно любого цвета и размера, всё зависит от вашего вкуса. Для того, чтобы фон при прокрутки страницы оставался на месте, добавляем в конце background-attachment: fixed;
А теперь расшифруем подробней. font1 - текст внутри настроек, профиля. font2 - основной текст форума на гл. странице. font3 - названия подфорумов, подменю. font5 - заголовки в таблице (ответы, последняя тема и т. д.). font6 - названия больших разделов. font-size - размер шрифта в пикселах. font-weight - толщина/насыщенность шрифта. COLOR - цвет шрифта. Например, названия подфорумов будут чёрного цвета, размером 11 пикселов и насыщенностью в 700, если написать:
Так же можно задать другие свойства шрифта. normal - обычный прямой шрифт, без наклона. italic - курсивный шрифт - наклонный шрифт, имитирующий рукописный. oblique - наклонный шрифт. В большинстве браузеров отображается курсивом.
Ссылки. Свойства ссылок стандартного дизайна выглядят так:
a:link - обычный цвет ссылки. a:visited - ссылки, на которые вы кликали ранее. a:hover - цвет ссылки при наведении курсора. color - цвет ссылки. text-decoration - эффект ссылки. В эти эффекты входят: none - отменяет все оформительские приемы (включая, отображаемые браузером по умолчанию). underline - ссылка будет отображаться с нижним подчеркиванием. overline - ссылка будет отображаться с верхним подчеркиванием. line-through - ссылка будет отображаться зачеркнутым. blink - ссылка будет мигать. Возможны и другие разнообразные эффекты со ссылками, которых сейчас очень много на всевозможных сайтах, поэтому описывать их все я не буду.
Задания. №1. Вставить не прокручивающийся фон: http://lenagold.ru/fon/ori/nebo/obl/oblako63.jpg и убрать подложку таблицы. №2. Сделать текст синим цветом: #0000ff. №3. Сделать зачёркивающуюся ссылку при наведении курсора.
Урок 5.1 (дополнительный). Шрифт текста на форуме.
За шрифт текста отвечает вот эта часть css-кода в html-верху:
цитата:
td{font-family:Verdana;}
По умолчанию в нём всегда стоит шрифт Verdana. При желании, в можете заменить шрифт на другой, но всегда нужно учитывать, что не на каждом компьютере есть шрифт, который вам нравится, поэтому не стоит ставить редких шрифтов на свой форум. Ниже приведён список шрифтов, входящий в стандартный набор на каждом компьютере (т. е. указанные ниже шрифты будут отображаться у всех пользователей): Arial Arial Black Arial Narrow Arial Unicode MS Book Antiqua Bookman Old Style Calibri Cambria Candara Century Century Gothic Comic Sans MS cursive Constantia Corbel Courier New Franklin Gothic Medium Garamond Georgia Impact Lucida Console Lucida Sans Unicode Microsoft Sans Serif Mistral cursive Monotype Corsiva Palatino Linotype Segoe Print Segoe Script Segoe UI Sylfaen Tahoma Times New Roman Trebuchet MS Verdana
Отправлено: 01.10.11 17:47. Заголовок: Урок 6. Цвет и оформ..
Урок 6. Цвет и оформление таблицы.
На этом уроке мы рассмотрим стиль таблицы форума. Помимо внешних настроек, находящихся в настройках форума, есть ещё одни настройки, находящиеся в html-верхе. Выглядят они вот так:
Всё верно, это ещё один css-код, который мы сегодня будем разбирать. Итак, приступим.
tr.font3 - "шапка" внутри таблиц форума. tr.font5 - верхняя "шапка" таблицы. tr.font6 - "шапка" основных разделов форума ("Название раздела A" и прочее). HEIGHT - высота "шапок" в пикселах. FONT-WEIGHT - толщина текста в" шапке". BACKGROUND-IMAGE - текстура в "шапке".
Обычно, эти настройки мало кто меняет. Единственное, что в них обычно затрагивается, это текстура, установленная на форуме при создании. Многие её убирают, чтобы вставить свою, либо вообще оставляют без текстуры. Чтобы убрать текстуру, нужно удалить BACKGROUND-IMAGE вместе с прописаным кодом картинки:
А теперь рассмотрим настройки цвета таблицы в основных настройках форума. Выглядят они так:
цитата:
Цвет шапки таблиц: #006699 Светлый цвет в таблицах: #E0E4E8 Темный цвет в таблицах: #D0D8E0 Третий цвет в таблицах: #F0F0F0 Цвет формы для сообщений: #F7F7F7 Цвет разделительных линий в таблицах: #FFFFFF Цвет текста оффтопик: #FFFFFF Цвет рамки вокруг таблиц: #006699 Цвет линии-разделителя HR: #E0E4E8
Цвета подбираются на свой вкус и цвет. Таблица не должна быть слишком яркой и сливаться с текстом. Обычно для таблицы используют схожие по тону цвета.
Задания. №1. Убрать из "шапок" таблицы текстуру. №2. Самостоятельно подобрать цвета таблицы.
Отправлено: 01.10.11 17:47. Заголовок: Урок 7. Создание сам..
Урок 7. Создание самого простого дизайна для форума.
Итак, долгожданный урок настал. На этом уроке мы будем учиться делать самый простой дизайн с фиксированной шириной. Для этого нам понадобятся три картинки, которые нужно подготовить заранее: лого, середина и низ. Что располагается на этих картинках в нашем дизайне? Сейчас узнаем.
Лого. Это самая верхняя картинка или, как её ещё называют, шапка форума. В ней, обычно, находится название форума и она оформлена разной тематической графикой (на форумах о котах-воителях это лесные кошки, на форумах о волках изображены волки и т. д.). Размер шапки может быть любой. В ширину она обычно от 970 до 1024 пикселов, а в высоту от 250 до 400 пикселов.
Середина. Используется вместо подложки форума. Чаще всего это однотонная или с текстурой картинка, которая может быть с рамкой на левом и правом краю или вообще без рамки. В ширину она обязательно должна соответствовать лого.
Низ. Не самая обязательная часть дизайна, но тем не менее, тоже важная. В нижней картинке может располагаться всё, что угодно, касательно тематики, как и на лого. А так же именно на низе автор дизайна пишет свой ник или, как это ещё называется, копирайт, который подтверждает, что дизайн создали именно вы, а не кто-то другой.
Прежде чем вставлять всё это в код, мы должны немного его подготовить. Для начала сотрём все цвета из этого списка:
цитата:
Цвет шапки таблиц: Светлый цвет в таблицах: Темный цвет в таблицах: Третий цвет в таблицах: Цвет формы для сообщений: Цвет разделительных линий в таблицах: Цвет текста оффтопик: Цвет рамки вокруг таблиц: Цвет линии-разделителя HR:
Затем, очистим поле под названием "HTML логотипа". Логотип Борды нам ни к чему, он будет только мешать.
Следующими пойдут цвета текста и ссылок. Сделаем их чёрным цветом:
Т. к. цвет и текстура фона у нас уже стоит с прошлых уроков, то менять пока ничего не будем. Сразу после кода <BODY bgColor=#e5e5e5> пишем следующий код:
<b>А здесь сам текст:<b/> Уважаемый владелец форума! Добро пожаловать. Для получения прав администратора нажмите на ссылку «Вход-регистрация». Введите имя Admin и обязательно пароль форума, то есть тот пароль, который Вы указали при создании форума. Отметьте галочкой «зарегистрироваться, я новый участник». Нажмите «ОК». Дальнейшие указания Вы найдете в личном сообщении. Вам надо будет кликнуть на мигающий конвертик или открыть ссылку Л.С в шапке форума.
<tr><td width="240" height="120" bolder="0"> - этот код специально для того, чтобы текст поместился прямо на лого, а не вне его. Начало окошка с текстом left:300px; - отступ слева от края таблицы top:30px; - отступ сверху таблицы width:150px; - ширина блока новостей height:170px; - высота блока новостей overflow:auto; - автоматическая прокрутка <font size="1"> - размер шрифта текста font color="#000000" - цвет текста face="verdana" - шрифт текста </div> - конец окошка с текстом
Выделенное синим заменяем на своё. Значение отступов, ширину и длину окошка новостей регулируем самостоятельно, меняя соответствующие значения.
Отправлено: 01.10.11 17:48. Заголовок: Урок 9. Ссылки на ло..
Урок 9. Ссылки на логотипе.
Иногда не получается уместить всё самое важное в новостях форума, поэтому на логотип ставят несколько полезных ссылок. Например, правила, шаблон анкеты и т. д. На этом уроке мы научимся ставить ссылки на логотип. Давайте рассмотри на примере предыдущего html-верха. Код логотипа со ссылками будет выглядеть вот так:
area alt="Название ссылки1" - пометка с названием ссылки, чтобы не запутаться coords="460,143,560,166" - координаты наложенной на лого ссылки href="http://ссылка" - сама ссылка
Чтобы указать координаты ссылки, откройте своё лого в Paint. Да, в Paint, а не в фотошопе. Вот так к примеру выглядит наш логотип: Чтобы записать координаты ссылки, нужно навести подвести курсор к верхнему левому краю вашей предполагаемой ссылки (на картинке эти места обозначены красным): Внизу вы увидите вот такие цифры: Они-то нам и нужны. Вбиваем эти цифры в наш код:
Первая ссылка готова. по аналогичному примеру делаем всё остальное. Посмотреть как это получилось можно здесь: http://shablon14.forum24.ru/
Задание. Пользуясь уроком, разместить ссылки на логотипе своего форума.
Внимание! Для того, чтобы выполнить задание придётся стирать с логотипа новости. Если хотите сохранить созданный дизайн с новостями, создайте второй форум-"тетрадь".
Все даты в формате GMT
3 час. Хитов сегодня: 7
Права: смайлы да, картинки да, шрифты да, голосования нет
аватары да, автозамена ссылок вкл, премодерация откл, правка нет
- участник сейчас на форуме
- участник вне форума
