Секреты создания сайта

Секреты создания сайта.

Создание сайта во многом похоже на постройку нового дома (Кейт Ричи).

1.Статья – Создание страниц и постов в административной панели WordPress.

2.Секреты вебмастера – Видео-Создание страницы Видео-Персонализация админа в сайдбаре.

3.Начало HTML – Формирование списков

Сегодня мы рассмотрим один из основных вопросов создания сайта – тему наполнения вашего проекта информацией, контентом.

Как создать страницу? Как создать пост и вставить в него изображения, видео, аудио? Для создания поста или статьи в WordPress используется визуальный редактор WYSIWYG (Что вижу, то и получаю) расположенный – административной панели – Записи – Добавить новую. (Понятно, что ‘Изменить’ откроет этот же редактор, но уже со вставленной статьей, постом).

Включаем визуальный режим – справа вверху.

Вставляем или печатаем текст.

В нужное время и в нужном месте вставляем изображения, аудио, видео.

Добавляем ключевые слова – метки.

Добавляем пост в рубрику.

Формируем окна плагина SEO

Финал – Публикуем!

При входе в редактор открывается одна линия кнопок, вторая может быть открыта специальной кнопкой.

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

Цитата – выделенная часть текста. Используется для привлечения внимания читателя, это может быть совет, предостережение, примечание и т. д. Внешний вид задается при создании шаблона и имеет вид, или рамки вокруг абзаца, или абзац выделенный цветом с графическим элементом в углу. Копируйте только чистый текст (без тегов) в поле редактора. Просматривая сайты в Интернете вы наверняка заметили, что на первой странице находится начало постов и далее идет ссылка ‘Читать далее..’ Это сделано для удобства пользователей – просмотр N-го количества анонсов постов – при выборе нужного кликаем ‘Читать далее..’ и читаем пост полностью.

Оформляется это довольно просто – мышкой выделить место разрыва поста и кликнуть по кнопке ‘Далее’.(см. рис.) Для изменения цвета шрифта – выделяете необходимую фразу мышкой, открываете палитру цветов и кликаете по нужному цвету. Изменение цвета шрифта применяйте только в крайних случаях, так как по умолчанию в web-дизайне цветной шрифт обозначает гиперссылку.

Установка изображений

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

Для установки картинки в визуальном редакторе кликаем ‘Открыть изображение’

После загрузки в открывшемся окне кликаем ‘Обзор’ – откроется ‘Проводник’ - в нем находим нужную папку и в ней нужное изображение. Далее ‘Загрузить’ – после загрузки даем название изображению латиницей (Важно! Тег alt), определяем обтекание текстом или нет, размер картинки и наконец финал - ‘Вставить в запись’. После небольшой тренировки вы поймете, что вставить картинку в пост очень просто.

Установка аудио и видео материалов.

Аудио и видео устанавливаются по тому же сценарию как и изображения. Но имея в виду большой размер аудио и видео файлов (десятки МГБ), будет слишком расточительно использовать для этого дисковое пространство нашего сервера. Особенно это касается начинающих вебмастеров – для небольших тарифных планов вставка медиафайлов может оказаться вообще невозможной. Кстати это касается и изображений в виде фотосессий – фотоальбомы, слайд-шоу и т. д. В Интернет существует огромное количество бесплатных хостингов для хранения аудио, видео файлов и файлов изображений.

После загрузки изображения вы получаете URL ссылку для вставки изображения непосредственно в пост. Для вставки изображений с хостинга вам не надо открывать окно загрузки картинок – следует перейти в режим HTML – вставить скопированную URL-ссылку в текст и обязательно сохранить, после чего перейти обратно в визуальный режим. Можете посмотреть бесплатный хостинг RadikalRu с регистрацией и предоставляемыми услугами.

Вставка видеофайлов.

Для показа видео материалов на своем ресурсе мы будем использовать замечательный плагин WordPress – Video-Embedder с поддержкой наших видеосервисов Smotri. Com и Rutube. Ru. Скачиваем и разархивируем плагин. Заходим по FTP на сервер - Wp-content – Plugins и закачиваем файл. Активируем плагин в административной панели – Плагины – Установленные.

После активации плагина в – административной панели – Параметры появятся настройки Video Embedder – посмотрите в справке как вставить видео в пост, изменять ничего там не надо. Закачиваем видеофайл на хостинг или используем уже имеющиеся видео и получаем URL ссылку. Из URL ссылки нас интересует следующий код. Создаем следующую запись в нужном месте поста. В итоге получаем видеоблог на странице.

Вставка аудиофайлов

Для аудиофайлов советую использовать новый сервис PodFm. Ru На сайте необходимо зарегистрироваться и закачать файл в формате. mp3 Далее заходите в ‘Мои подкасты’, кликаем мышкой по названию музыкального файла и в открывшемся окне копируем ссылку.

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

И наконец последние действия.

Справа от окна редактора расположены небольшие окна:

Опубликовать

Во время работы над постом можете сохранитьи просматривать результат в браузере.

Метки

Добавляете ключевые слова по теме поста

Рубрики

Отмечаем рубрику или создаем новую в которой будетнаходится пост.

В верхнем окне жмем – ‘Опубликовать’

На этом работа над постом закончена.

НАЧАЛО

2.Основы HTML – Создание списков на Web-странице

Списки – довольно распространенный элемент на веб-страницах.

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

Списки бывают:

Упорядоченные (нумерованные)

Неупорядоченные

Вложенные

Формируются списки с помощью парных тегов ul, ol и тега li.

Пример упорядоченного списка view source print?

1 <ol> - Начало списка

2 <li> Элемент списка</li>

3 <li> Элемент списка</li>

4 <li> Элемент списка</li>

5 <li> Элемент списка</li>

6 </ol> - Конец списка

Элемент списка

Элемент списка

Элемент списка

Элемент списка

Неупорядоченный список формируется точно также, но с помощью тега ul view source print?

1 <ul> - Начало списка

2 <li> Элемент списка</li>

3 <li> Элемент списка</li>

4 <li>Элемент списка</li>

5 <li>Элемент списка</li>

6 </ul> - Конец списка

Элемент списка

Элемент списка

Элемент списка

Элемент списка

Вложенные списки

Все виды вышеописанных списков могут вкладываться друг в друга. Причем первый вид может вкладываться во второй или наоборот. Здесь только необходимо соблюдать правило парных тегов – обязательно закрывать контейнер перед открытием другого.

View source print?

01 <ul>

02 <li>Список 1</li>

03 <ol> <li>элемент 1 списка закроем</li>

04 <li>элемент 1 списка закроем</li>

05 </ol>

06 <li>Список 2</li>

07 <ol> <li>элемент 2 списка закроем</li>

08 <li>элемент 2 списка закроем</li>

09 </ol>

10 <li>Список 3</li>

11 <ol> <li>элемент 3 списка закроем</li>

12 <li>элемент 3 списка закроем</li>

13 </ol>

14 </ul>

Список 1 элемент 1 списка закроем элемент 1 списка закроем

Список 2 элемент 2 списка закроем элемент 2 списка закроем

Список 3 элемент 3 списка закроем элемент 3 списка закроем

С основными списками на этом все. Но несмотря на простоту создания они играют значительную роль при оптимизации сайта.


Карта сайта


Информационный сайт Webavtocat.ru