Неофициальная техническая поддержка MyBB |
Приветствуем ;)
На форуме Неофициальной Технической Поддержки MyBB.
Нам 11 лет 6 месяцев.
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Неофициальная техническая поддержка MyBB » Справочная [FAQ] » Создание собственных ХТМЛ страниц
Выражаем благодарность Автору rps За составления данного фао.
Не так давно на сервисе появилась новая функция - своя страница. Можно создавать неограниченное число страниц, с интересующим Вас содержанием, будь то флеш-игры, чаты, какая-нибудь реклама... Словом, простор для творчества велик. Осталось только разобраться, "как это работает"? Что сейчас мы и попробуем сделать!
1. А где находится - то эта опция, создание своей странички?
Всё очень просто! Переходите в Администрирование своего форума, и там, слева, в меню находите самый последний пункт с названием "Страницы". И тыкаем на него.
На скриншоте отмечено красным цветом. Для тех, кто по каким либо причинам (а вдруг! ) так и не нашёл этого, сделает следующее:
Адрес Вашего форума/admin_pages.php
Вместо слов "Адрес Вашего форума" скопируете и подставите адрес форума, получится ссылка, ведущая как раз куда нужно.
2. Я зашёл туда, но не могу разобраться, что к чему! Помогите!
Теперь просто смотрите на цифры на скриншоте и читайте описание ниже:) :
1 - "Заголовок" - это будущее название Вашей странички. Туда можно вписывать что угодно: русские буквы, латиницу, спецсимволы и так далее.
2 - "Адресное имя" - это адрес Вашей будущей странички. Тут уже применима только латиница, никаких русских букв, пробелов и прочего.
3 - "Панель инструментов" - с помощью неё Вы сможете создавать свою страничку точно так же, как если бы писали сообщение на форме. Такие же кнопочки, но есть и новые.
4 - "Поле для просмотра" - тут будет отображаться эскиз Вашей странички, чтобы Вы в процессе её создания могли постоянно следить за результатом.
5 - "Объявление" - У Вас есть возможность показать на Вашей страничке объявление, которое размещено у Вас на форуме. Эта опция служит как раз для этого.
6 - "Кнопка "Создать" страничку" - по завершению всех операций, нажимать надо именно на неё.
Чуть пониже мы видим табличку (у Вас она пустая, я уже успел похимичить ), где будет отображаться список созданных Вами страничек. Вот его элементы:
7 - "Колонка адреса" - здесь можно найти адрес нужной Вам странички из созданных Вами.
8 - "Колонка заголовков" - название Ваших страничек.
9 - "Колонка Редактировать/удалить" - Вы сможете изменить содержимое конкретной странички или удалить её совсем. :_
3. Так как же создавать страничку?
Сейчас будем учиться создавать свою страницу. Для этого сначала введём название (заголовок) будущей странички. Затем введём имя. Вы, наверное, уже обратили внимание, что пока мы вписывали имя будущего творения, в окне адреса тоже транслировалось это имя, но уже на латинице. Удобно ведь, правда. Например, если я выбрал названием "Моя страничка", то адрес у неё будет такой (в смысле по умолчанию):
Адрес форума/pages/moya_stranichka
Если Вам по каким-либо причинам не нравится этот адрес, можно в строчке для адреса ввести что-то своё. НО ПОМНИТЕ: не должно быть никаких пробелов! Их необходимо заменить нижним подчёркиванием "_"(как в моём примере).
Теперь приступаем непосредственно к созданию. Найдите на панели инструментов кнопку 
и нажмите на неё. Перед Вами откроется окошко редактора кода странички, которое выглядит так:
Собственно сюда и надо вводить необходимый Вам код. Если Вам не нравится, что код уходит за пределы окошка и необходимо прокручивать вправо, можно установить галочку на "Перенос, по словам" (правый верхний угол). По окончании написания кода нажмите кнопку "Обновить" (левый нижний угол) или "Отмена" (правый нижний угол), если Вам не нужны Ваши изменения.
Помните, при создании странички нет необходимости прописывать.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Без названия 1</title> </head> <body> </body> </html>
Так как это уже прописывается за Вас по стандарту!
Как только Вы закончили работать с кодом и нажали "обновить" - в окне предпросмотра появится Ваша страничка в уменьшенном варианте. Кстати, маленькая хитрость: потяните за правый нижний уголок этого окошка, и оно увеличится в размерах (если Ваша страничка большая и не помешается в его стандартный размер, таким образом можно легко это поправить).
Теперь немножко про панель инструментов: можно совершать некоторые операции без редактора кода. Например, вставку текста или изображений.
Идём по порядку:
1 - Сделать текст жирным.
2 - Сделать текст курсивом.
3 - Сделать текст подчёркнутым (снизу).
4 - Сделать текст перечёркнутым.
5 - Выравнивание содержимого по левому краю.
6 - Выравнивание содержимого по центру.
7 - Выравнивание содержимого по правому краю.
8 - Выравнивание содержимого по ширине.
9 - Изменение шрифта текста.
10 - Изменение размера текста.
11 - Изменение цвета текста. Заметим, что кроме стандартных цветов можно создавать и свои. Достаточно нажать на "Выбрать цвет" внизу палитры и перед Вами откроется новая палитра, теперь уже для выбора своего цвета.
Водите курсор, выбирайте оттенки и получайте моментально готовый код. Больше не надо лазить по таблицам веб-цветов, теперь всё под рукой. Но и это ещё не всё! Кроме того имеется уже созданная небольшая палитра цветов, там можно подобрать себе готовый. А на третьей вкладке можно узать, как правильно пишется понравившийся цвет на английском! Это тоже удобно и окажется полезным!
12 - Вставить изображение. При нажатии на кнопку перед Вами откроется окошко
Приступаем к вводу данных:
- Адрес изображения - вводим ссылку на него. Например, с Радикала или с Вашего форума.
- Описание изображения - введите то, что хотите, чтоб отображалось во всплывающей подсказке при наведении курсора на изображении.
- Выравнивание изображения - определит положение изображения относительно остальных элементов, например текста.
- Размеры изображения - введите длину и высоту изображения в пикселях. При вставке изображения его размеры будут автоматически подсчитаны. .
- Граница - введите толщину рамки вокруг изображения в пикселях.
- Вертикальный отступ - отступ от изображения до соседних элементов по вертикали.
- Горизонтальный отступ - отступ от изображения до соседних элементов по горизонтали.
Нажмите "Вставить", чтоб добавить изображение (левый нижний угол) или "Отмена", чтоб отказаться от вставки изображения на страничку.
13 - Предварительный просмотр - откроет окошко, где модно будет увидеть сотворённое Вами в полном размере.
14 - Полноэкранный режим редактирования - для тех, кто любит, чтоб форма с панелью кнопок была во весь экран. В отдельном окне естественно.
15 - Редактирование HTML-кода - собственно, с неё и начиналось наше создание странички. Открывает окошко с исходным кодом (исходник), который можно отредактировать там же.
16 - вставить готовый шаблон - возможно, вставить один из трёх готовых шаблонов странички с играми или редактором изображений! Кстати, позволю себе заметить, что в отличие от привычной для нас формы ответа на самом форуме, где теги добавлялись в форму по нажатию кнопки, тут действует иной принцип. Например, чтоб сделать текст жирным, нам надо нажать на соответствующию кнопку (она будет выделена после нажатия) и начинать писать: текст будет вводиться УЖЕ жирным! По окончании просто ещё раз нажмите на кнопку жирного текста. Выделение с неё снимется, и далее можно строчить обычным текстом. Аналогично и для остальных кнопочек.
А ещё можно выделить нужный фрагмент текста и просто нажать на нужную кнопку (например, на курсив) и выделенный фрагмент будет написан курсивом.
Ещё одна тонкость: под формой будут показываться использованные Вами и не закрытые теги. Кликните по любому из них, и он выделит фрагмент странички, за который отвечает. Например, кликнув по тегу "u" автоматически выделится подчёркнутый текст.
А ещё при наведении мыши на кнопку всплывает небольшая подсказка, для чего эта опция нужна.
Далее, мы можем указать, имеется ли необходимость показывать на Вашей страничке форумное объявление. Кому-то, возможно, оно надо, кому-то - нет. Дело вкуса. Соответственно устанавливаем "галочку" на "ДА" или "НЕТ". И, если ВЫ закончили, нажимаем на кнопку "Создать". Обычно этот процесс происходит быстро, но если Вы создали нечто сложное или у Вас низкая скорость интернета - всё может затянуться. Наберитесь терпения. После переадресации Вам вернут на страничку создания своих страниц. А внизу, в списке появится только что созданная Вами. Если до этого Вы уже делали что-то, то странички будут расположены в порядке убывания, начиная с только что созданной. Кликайте по адресу и смотрите.
4.А что такое шаблоны страниц? Для чего они?
На сервисе, возможно, создавать страницы с уже готовым содержимым: две из них будут игры, а одна - графический редактор по типу Адоб Фотошоп. Про игры можно сказать следующее:
1. Тетрис: "Описание: Необычный форк игры Tetris. Вам нужно строить вверх так, чтобы конструкция не завалилась".
2. Хексагон: "Описание: Побеждает тот, кто займет большее пространство, когда не останется свободных ячеек".
3. Графический редактор: "Описание: Добавляет графический редактор изображений на страницу".
Чтобы выбрать нужный из шаблонов, необходимо найти на панели инструментов кнопку 
и нажать на неё. Откроется новое окошко, где собственно и будет возможность выбирать шаблоны, а так же прочесть их описание и просмотреть их в действие перед тем, как добавить.
Выбираем понравившееся изображение из списка и дожидаемся, пока оно загрузится. Затем, если Вы хотите добавить его на Вашу страничку - нажимайте "Добавить" (левый нижний угол) или "Отмена", если Вы не хотите, ставить подобного.
ОБРАЩАЮ ВНИМАНИЕ, ЧТО ДЛЯ ПРОСМОТРА ДАННЫХ ПРИЛОЖЕНИЙ ВАШ БРАУЗЕР ДОЛЖЕН ПОДДЕРЖИВАТЬ ТЕХНОЛОГИЮ ФЛЕШ! Для Internet Explorer эта опция встроена по умолчанию, и можно приступать к работе, для всех остальных браузеров - необходимо скачать Адоб Флеш Плеер (плагин) и установить его.
Вы здесь » Неофициальная техническая поддержка MyBB » Справочная [FAQ] » Создание собственных ХТМЛ страниц