Тестовый форум

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

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


Вы здесь » Тестовый форум » Помощь » FAQ по созданию страниц ‡в помощь новичкам


FAQ по созданию страниц ‡в помощь новичкам

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

1

FAQ  от rps, адаптирован под новые функции

Не так давно на сервисе обновилась функция создания своих страниц. Что же появилось нового?
1. Косметические улучшения и улучшения по тексту.
2. Страницы открываются в новом окне.
3. Корректная установка ссылок на внутренние форумные страницы.
4. Переключение между обычным и визуальным редактором в одно нажатие.
5. Визуальный редактор TinyMCE обновлен до самой новой версии (улучшена работа в браузерах, в редакторе теперь отображаются Flash ролики).
6. Переключение редактора в полноэкранный режим на этой же странице.
7. Визуальное создание таблиц.
8. Отображение действий со страницами в логах форума.
9. При вставке ссылки на страницу в сообщениях, теперь отображается ее название.

Итак, можно создавать неограниченное число страниц, с интересующим Вас содержанием, будь то флеш-игры, чаты, таблицы, какая-нибудь реклама... Словом, простор для творчества велик. Осталось только разобраться, "как это работает"? Что сейчас мы и попробуем сделать!

А где находится - то эта опция, создание своей странички?

Всё очень просто! Переходите в Администрирование своего форума, и там, слева, в меню находите пункт с названием "Страницы". И тыкаем на него.

http://uploads.ru/t/R/T/z/RTzVn.png

На скриншоте отмечено красным цветом. Для тех, кто по каким либо причинам (а вдруг!) так и не нашёл этого, сделает следующее - в адресной строке браузера набирает такое:

Код:
Адрес Вашего форума/admin_pages.php

Вместо слов "Адрес Вашего форума" скопируете и подставите адрес форума, получится ссылка, ведущая как раз куда нужно.

p.s. Тон и цвета дизайна форума у Вас могут отличаться от цветов и оформления на скринах, не пугайтесь.

0

2

Я зашёл туда, но не могу разобраться, что к чему! Помогите!

Вы видите перед собой страничку с различными опциями и неким списком внизу. Давайте посмотрим, что что значит?

http://savepic.su/511758m.png

Теперь просто смотрите на цифры на скриншоте и читайте описание ниже:)

1 - "Заголовок" - это будущее название Вашей странички. Туда можно вписывать что угодно: русские буквы, латиницу, спецсимволы и так далее.
2 - "Адресное имя" - это адрес Вашей будущей странички. Тут уже применима только латиница, никаких русских букв, пробелов и прочего. Это поле заполняется автоматически, трансформируя то, что Вы набрали в поле Заголовка. Но Вы можете изменить автоматический вариант на свой.
3 - "Визуальный редактор" - Включение и выключения визуального редактора. По умолчанию он включен. Это значит, что Вы можете создавать страницу в визуальном режиме без особых знаний языка HTML. Включается и выключается простым кликом мыши по надписи "Включен/Выключен".
4 - "Панель инструментов" - с помощью неё Вы сможете создавать свою страничку точно так же, как если бы писали сообщение на форме. Такие же кнопочки, но есть и новые. Заметим, что если Вы выключили визуальный редактор, то эта панель пропадет, давая Вам возможность ввести готовый HTML-код в поле ниже.
5  - "Поле для просмотра" - тут будет отображаться эскиз Вашей странички(в визуальном режиме), чтобы Вы в процессе её создания могли постоянно следить за результатом. Или HTML код Вашей страницы, если Визуальный редактор выключен.
6 - "Объявление" - У Вас есть возможность показать на Вашей страничке объявление, которое размещено у Вас на форуме. Эта опция служит как раз для этого.
7 - "Кнопка "Создать" страничку" - по завершению всех операций, нажимать надо именно на неё.
Чуть пониже мы видим табличку (у Вас она пустая, я уже успел похимичить  ), где будет отображаться список созданных Вами страничек. Вот его элементы:

http://savepic.su/515854m.png

8 - "Колонка адреса" - здесь можно найти адрес нужной Вам странички из созданных Вами.
9 - "Колонка заголовков" - название Ваших страничек.
10 - "Колонка Редактировать/удалить" - Вы сможете изменить содержимое конкретной странички или удалить её совсем.

0

3

Так как же создавать страничку?

Сейчас будем учиться создавать свою страницу. Для этого сначала введём название (заголовок) будущей странички. Затем введём имя. Вы, наверное, уже обратили внимание, что пока мы вписывали имя будущего творения, в окне адреса тоже транслировалось это имя, но уже на латинице. Удобно ведь, правда. Например, если я выбрал названием "Моя страничка", то адрес у неё будет такой (в смысле по умолчанию):

Код:
Адрес форума/pages/moya_stranichka

Если Вам по каким-либо причинам не нравится этот адрес, можно в строчке для адреса ввести что-то своё. 
НО ПОМНИТЕ: не должно быть никаких пробелов! Их необходимо заменить нижним подчёркиванием "_"(как в моём примере).
Теперь приступаем непосредственно к созданию.

1. Вариант без использования визуального редактора.
Кликните по надписи "Включен" справа от строки с названием визуального редактора. Редактор выключен.
Теперь Вы можете вставлять HTML код непосредственно в поле, как показано на скрине:
http://uploads.ru/t/q/L/G/qLGXw.png

Помните, в любом варианте, при создании странички нет необходимости прописывать

Код:
<!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>

Так как это уже прописывается за Вас по стандарту!
Как только Вы закончили работать с кодом , нажмите кнопку "создать страницу". Она появится в списке страниц ниже. Ее можно отредактировать, кликнув по надписи "редактировать" в правом столбце таблицы.

2. Вариант с использованием визуального редактора.
Немножко про панель инструментов: можно совершать некоторые операции без редактора кода. Например, вставку текста или изображений, таблиц.
http://uploads.ru/t/8/R/H/8RHQp.png

Идём по порядку:
1 - Сделать текст жирным.
2 - Сделать текст курсивом.
3 - Сделать текст подчёркнутым (снизу).
4 - Сделать текст перечёркнутым.
5 - Выравнивание содержимого по левому краю.
6 - Выравнивание содержимого по центру.
7 - Выравнивание содержимого по правому краю.
8 - Выравнивание содержимого по ширине.
9 - Изменение шрифта текста.
10 - Изменение размера текста.
11 - Изменение цвета текста. Заметим, что кроме стандартных цветов можно создавать и свои. Достаточно нажать на "Другие цвета" внизу палитры и перед Вами откроется новая палитра, теперь уже для выбора своего цвета:
http://uploads.ru/t/e/g/S/egSoZ.png
Водите курсор, выбирайте оттенки и получайте моментально готовый код. Больше не надо лазить по таблицам веб-цветов, теперь всё под рукой.  Но и это ещё не всё! Кроме того имеется уже созданная небольшая палитра цветов, там можно подобрать себе готовый. А на третьей вкладке можно узать, как правильно пишется понравившийся цвет на английском! Это тоже удобно и окажется полезным!

Кстати, позволю себе заметить, что в отличие от привычной для нас формы ответа на самом форуме, где теги добавлялись в форму по нажатию кнопки, тут действует иной принцип. Например, чтоб сделать текст жирным, нам надо нажать на соответствующию кнопку (она будет выделена после нажатия) и начинать писать: текст будет вводиться УЖЕ жирным! По окончании просто ещё раз нажмите на кнопку жирного текста. Выделение с неё снимется, и далее можно строчить обычным текстом. Аналогично и для остальных кнопочек.
А ещё можно выделить нужный фрагмент текста и просто нажать на нужную кнопку (например, на курсив) и выделенный фрагмент будет написан курсивом.

12 - Добавить/изменить ссылку.
Выделив определенный текст в окне редактора, или любой другой элемент, кликните на этот значок, чтоб добавить ссылку для этого элемента. У Вас откроется окно:
http://uploads.ru/t/b/0/P/b0Pmd.png
В поле "Адрес" введите адрес ссылки, в поле "Цель" выберите как будет открываться ссылка (например, в новом окне), в поле "Заголовок" введите название, которое будет отображаться при наведении на ссылку. В поле "Класс" Вы можете выставить класс для стиля ссылки, но здесь, как и в трех остальных вкладках открытого окна (Развертывание, События и Дополнительно) от Вас потребуется более глубокие познания каскадных таблиц стилей и языков програмирования.

13 - Вставить изображение. При нажатии на кнопку перед Вами откроется окошко
http://uploads.ru/t/h/k/f/hkf1A.png
Приступаем к вводу данных:
Вкладка Общее
- Адрес изображения - вводим ссылку на него. Например, с Радикала или с Вашего форума.
- Описание - введите здесь то, что будет отображаться текстом вместо картинки при отключении графики или когда картинка будет подгружаться.
- Заголовок - введите то, что хотите, чтоб отображалось во всплывающей подсказке при наведении курсора на изображение.
- Область предварительного просмотра. Тут Вы можете видеть изменения перед вставкой картинки на страницу.
Вкладка Положение
- Выравнивание  - определит положение изображения относительно остальных элементов, например текста.
- Размер - введите длину и высоту изображения в пикселях. При вставке изображения его размеры будут автоматически подсчитаны.
- Вертикальный отступ - отступ от изображения до соседних элементов по вертикали.
- Горизонтальный отступ - отступ от изображения до соседних элементов по горизонтали.
- Граница - введите толщину рамки вокруг изображения в пикселях.
- Стиль - это стиль, который формируется автоматически в зависимости от выставленных выше параметров и будет вставлен в страницу автоматически вместе с изображением.
Нажмите "Вставить", чтоб добавить изображение (левый нижний угол) или "Отмена", чтоб отказаться от вставки изображения на страничку.

14. Добавить/Изменить клип
Здесь можно вставить или изменить видеофайл.
Поддерживаются форматы: HTML5 видео (.WebM), HTML5 аудио (.oga), Flash (.flv),  Quick Time (.mov, .qt, .m4v, .mp4), ShockWave, Windows Media, Real Media и IFrame

http://uploads.ru/t/Z/7/C/Z7Cyx.png

Вкладка Общее
- Тип - Выбираем тип вставояемого клипа.
- Адрес  - вводим ссылку на него. Например ссылку на ролик на youtube.
- Размеры - введите длину и высоту изображения в пикселях.
- Область предварительного просмотра. Тут Вы можете видеть изменения перед вставкой клипа на страницу.
Вкладка Дополнительно
Здесь можно выставить параметры отступов, выравнивания и фона, а так же ввести имя и название клипа.
Так же, в случае использования формата Flash, здесь можно выставить параметры клипа в этом формате.

15. Использовать шаблон - возможно, вставить один из трёх готовых шаблонов странички с играми или редактором изображений!

16. Полноэкранный режим. Этот режим позволит Вам растянуть форму на весь экран. Для выхода из этого режима еще раз нажмите на кнопке полноэкранного режима.

17. Предварительный просмотр - откроет окошко, где можно будет увидеть сотворённое Вами в полном размере.

18. Меню создания таблиц. Его мы рассмотрим отдельно.

Ещё одна тонкость: под формой будут показываться использованные Вами  и не закрытые теги. Кликните по любому из них, и он выделит фрагмент странички, за который отвечает. Например, кликнув по тегу "u" автоматически выделится подчёркнутый текст.
А ещё при наведении мыши на кнопку всплывает небольшая подсказка, для чего эта опция нужна.

Далее, мы можем указать, имеется ли необходимость показывать на Вашей страничке форумное объявление. Кому-то, возможно, оно надо, кому-то - нет. Дело вкуса. Соответственно устанавливаем "галочку" на "ДА" или "НЕТ". И, если ВЫ закончили, нажимаем на кнопку "Создать".
Обычно этот процесс происходит быстро, но если Вы создали нечто сложное или у Вас низкая скорость интернета - всё может затянуться. Наберитесь терпения. После переадресации Вам вернут на страничку создания своих страниц. А внизу, в списке появится только что созданная Вами. Если до этого Вы уже делали что-то, то странички будут расположены в порядке убывания, начиная с только что созданной. Кликайте по адресу и смотрите.

0

4

А что такое шаблоны страниц? Для чего они?

На сервисе, возможно, создавать страницы с уже готовым содержимым: две из них будут игры, а одна - графический редактор по типу Адоб Фотошоп. Про игры можно сказать следующее:
1. 99 Bricks : "Описание: Необычный форк игры Tetris. Вам нужно строить вверх так, чтобы конструкция не завалилась".
2. Hexxagon: "Описание: Побеждает тот, кто займет большее пространство, когда не останется свободных ячеек".
3. Графический редактор: "Описание: Добавляет графический редактор изображений на страницу".

Чтобы выбрать нужный из шаблонов, необходимо найти на панели инструментов кнопку http://uploads.ru/i/7/P/D/7PDAd.png и нажать на неё. Откроется новое окошко, где собственно и будет возможность выбирать шаблоны, а так же прочесть их описание и просмотреть их в действие перед тем, как добавить.

http://uploads.ru/t/i/Y/s/iYs2Z.png

Выбираем понравившееся изображение из списка и дожидаемся, пока оно загрузится. Затем, если Вы хотите добавить его на Вашу страничку - нажимайте "Добавить" (левый нижний угол) или "Отмена", если Вы не хотите, ставить подобного.

ОБРАЩАЮ ВНИМАНИЕ, ЧТО ДЛЯ ПРОСМОТРА ДАННЫХ ПРИЛОЖЕНИЙ ВАШ БРАУЗЕР ДОЛЖЕН ПОДДЕРЖИВАТЬ ТЕХНОЛОГИЮ ФЛЕШ! Для Internet Explorer эта опция встроена по умолчанию, и можно приступать к работе, для всех остальных браузеров - необходимо скачать Адоб Флеш Плеер (плагин) и установить его.

0

5

Как сделать таблицу и ее оформить?

Ну вот мы и подошли к тому, как создавать, оформлять и вставлять таблицы на страницу.
Итак, меню создания таблиц:

http://uploads.ru/i/u/n/p/unpeA.png
Для тех, кто освоил использование текстового редактора Microsoft Word, ничего нового в этих значках нет. Однако, рассмотрим подробнее:
1 - Добавление/изменение таблицы

http://uploads.ru/i/c/P/k/cPkSV.png

Вкладка Общее
- Столбцы и строки. Здесь вводим количество столбцов и строк таблицы.
- Отступы в ячейках. Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Называется он cellpadding и без него текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
- Расстояние между ячейками. Задает расстояние между внешними границами ячеек. В языке HTML называется cellspacing.
- Выравнивание. Здесь можно выбрать как будет отображаться таблица, слева, по центру или справа.
- Граница - Тут выставляется толщина границы таблицы. 
- Ширина и высота. Соответствующие параметры таблицы в пикселях.
- Заголовок. Добавляет к таблице заголовок. Текст заголовка можно заполнить самостоятельно.
Этот скрин прояснит параметры этой вкладки более подробно:
http://uploads.ru/i/P/k/S/PkSTf.png

Вкладка Дополнительно

http://uploads.ru/i/l/e/5/le56N.png
- Имя - Здесь вводим имя таблицы. Это тот же самый идентификатор id, он задает уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.
- Общее - это параметр summary. Атрибут summary предназначен для краткого описания таблицы или указания ее предназначения, никак не отображается и в браузере не выводится, однако может использоваться поисковыми системами или речевыми браузерами.
- Стиль - заполняется автоматически по заполненным величинам в полях параметров таблицы.
- Фоновое изображение - здесь задается ссылка на фоновое изображение таблицы
- Кадр - Сообщает браузеру, как отображать границы вокруг таблицы. Толщина границы указывается с помощью атрибута Граница на вкладке Общее.
Пояснения к параметру Кадр:
void - Не отрисовывать границы.
border -Граница вокруг таблицы.
above -Граница по верхнему краю таблицы.
below - Граница снизу таблицы.
hsides - Добавить только горизонтальные границы (сверху и снизу таблицы).
vsides - Рисовать только вертикальные границы (слева и справа от таблицы).
rhs - Граница только на правой стороне таблицы.
lhs - Граница только на левой стороне таблицы.

- Правила - Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку.
Пояснения к параметру Правила:
Все - Линия рисуется вокруг каждой ячейки таблицы.
Группы - Линия отображается между группами.
Колонки - Линия отображается между колонками.
Нет - Все границы скрываются.
Ряды - Граница рисуется между строками таблицы.

- Направление текста. Указывает как отображать текст.
- Цвет границы. Задается цвет границы таблицы. (На скрине выше - красный)
- Цвет заливки. Задается цвет заливки фона таблицы. (На скрине выше - зеленый)


2 - Параметры строки

http://uploads.ru//i/U/S/7/US7E1.png
Вкладка Общее
- Тип строки. Задает тип строки со следующими параметрами:
Тело (по умолчанию) - эквивалент HTML тег tbody. Предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.
Заголовок - эквивалент HTML тег thead. Предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.
Окончание - эквивалент HTML тег tfoot. Предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы.

- Выравнивание. Здесь можно выбрать как будет отображаться содержимое строки, слева, по центру или справа.
- Вертикальное выравнивание. Устанавливает вертикальное выравнивание содержимого ячеек в строке. По умолчанию содержимое ячейки располагается по ее вертикали в центре.
- Высота - Высота строки.
Ниже находится выпадающий список, который позволяет выбрать к каким строкам применять заданные параметры: текущей строке, к четным строкам, к нечетным строкам и ко всем строкам.
Вкладка Дополнительно
http://uploads.ru/i/p/T/i/pTi43.png

- Имя - Здесь вводим имя строки. Это тот же самый идентификатор id, он задает уникальное имя этого элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.
- Стиль - заполняется автоматически по заполненным величинам в полях параметров таблицы.
- Направление текста. Указывает как отображать текст.
- Фоновое изображение - здесь задается ссылка на фоновое изображение строки
- Цвет заливки. Задается цвет заливки фона строки. (На скрине выше - синий)


3 - Параметры ячейки

http://uploads.ru/i/m/7/W/m7WAZ.png
Вкладка Общее
- Выравнивание. Здесь можно выбрать как будет отображаться содержимое ячейки, слева, по центру или справа.
- Вертикальное выравнивание. Устанавливает вертикальное выравнивание содержимого в ячейке. По умолчанию содержимое ячейки располагается по ее вертикали в центре.
- Тип - предназначен для обозначения одной ячейки таблицы, как заголовочной. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Но нужно указать Область применения, см. ниже.
- Область - Этот атрибут связывает между собой ячейки с заголовком и обычные ячейки. Он предназначен для экранных ридеров вроде речевых браузеров, в обычных браузерах результат добавления области никак не заметен.
- Ширина и высота - задается ширина и высота ячейки.
Ниже находится выпадающий список, который позволяет выбрать к каким ячейкам применять заданные параметры: текущей ячейке, ко всем ячейкам в строке, ко всем ячейкам в столбце или ко всем ячейкам таблицы.
Вкладка Дополнительно

http://uploads.ru/i/B/c/M/BcMRA.png

- Имя - Здесь вводим имя ячейки. Это тот же самый идентификатор id, он задает уникальное имя этого элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.
- Стиль - заполняется автоматически по заполненным величинам в полях параметров таблицы.
- Направление текста. Указывает как отображать текст.
- Фоновое изображение - здесь задается ссылка на фоновое изображение в ячейке.
- Цвет границы. Задается цвет границы ячейки. (На скрине выше - синий - нижняя левая ячейка)
- Цвет заливки. Задается цвет заливки фона ячейки. (На скрине выше - желтый)


Далее продолжим с остальными операциями по объединению и удалению элементов таблицы.

0

6

Продолжаем. Напомним расположение элементов редактора :

http://uploads.ru/i/u/n/p/unpeA.png

В соответствии с обозначениями на скрине выше:
4 - Добавить строку сверху

5 - Добавить строку снизу
6 - Удалить строку
7 - Добавить столбец слева
8 - Добавить столбец справа
9 - Удалить столбец
10 - Разбить ячейку
11 - Объединить ячейку




0


Вы здесь » Тестовый форум » Помощь » FAQ по созданию страниц ‡в помощь новичкам