Вы здесь: Главная → Сборник статей → Оформление контента |
Перечень статей раздела Оформление контента:
Оформляем контент сайта
- Необходимость оформления контента сайта
- Правила оформления контента
- Подготовка к оформлению
- Создание файлов для основного содержания веб-страниц и размещение их в соответствии со структурой сайта
- Дополнение шаблона для избирательного вывода основного содержания веб-страниц
- Размещение оформляемого текста в режиме вывода контента из файла
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
В предыдущих статьях мы занимались созданием основы сайта с возможностью вывода из базы данных MySQL его содержимого, включая контент.
Теперь перейдем к следующему этапу, существенно влияющему на качество сайта - к оформлению контента. При этом следует учесть, что формирование области контента на этапе верстки в основном касалось лишь разметки веб-страницы и не относилось непосредственно к данному вопросу.
Этот раздел сборника составлен таким образом, что в данной статье будут затронуты основные моменты, на которые, по моему мнению, стоит обратить внимание при оформлении основного содержания сайта.
А кроме этого, для удобства формирования статей в HTML-коде здесь будут выполнены некоторые подготовительные работы, в результате которых в дальнейшем появится возможность использовать тексты основного содержания не только из базы данных, но и из непосредственно размещенных в файлах сайта. Что позволит визуально контролировать внешний вид статей на стадии формирования без необходимости их предварительного переноса в базу данных.
А практическая реализациия, с составлением соответствующего HTML-кода и назначением свойств CSS, будет показана в последующих статьях на примере оформления страниц сайта, содержащих основную часть элементов, включая использование изображений и видео.
При этом, следует обратить особое внимание на то, что это будет только один из вариантов. Так как оформление контента, как и сам контент, должно быть уникальным. Как говориться, это один из элементов творчества, который должен присутствовать при разработке и ведении собственного интернет-ресурса.
Поэтому, подробное изложение материала по практическому оформлению контента, которое будет показано в следующих статьях, предназначено для того, чтобы помочь каждому желающему при собственной разработке сайта оформить статьи под свои особенности и предпочтения.
А сделать это, будет не очень сложно, используя для этого в качестве основы предоставляемые здесь исходные коды и подробное их описание.
Оформляем текст статей сайта
- Оформляем заголовок статьи
- Структурируем текст по содержанию
- Формируем оглавление (содержание) используя HTML якоря
- Формируем подзаголовки
- Выделяем разделы статьи
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
В предыдущей статье мы рассмотрели основные вопросы, которые необходимо решить при оформлении контента. А также разместили на сайте неструктурированный текст главной страницы.
Теперь перейдем к непосредственному оформлению контента и в первую очередь займемся текстом главной страницы. Где рассмотрим такие важные вопросы, как оформление заголовка и подзаголовков, структуризация по содержанию, выделение разделов, формирования оглавления и гиперссылок.
Оформляем стилизованные нумерованные и маркированные списки
- Формируем стандартные нумерованные списки
- Оформляем нумерованные списки с помощью автоматического счета и нумерации
- Формируем стандартные маркированные списки
- Стилизуем маркированные списки с использованием спецсимволов
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
В предыдущей статье при оформлении главной страницы сайта мы разбили статью на разделы, оформили заголовки и сформировали оглавление и гиперссылки. Теперь же рассмотрим другие важные элементы контента, такие как нумерованные (упорядоченные) и маркированные (неупорядоченные) списки.
Следует отметить, что здесь речь пойдет не про обычное использование списков со стандартными маркерами и элементами нумерации. А будут рассмотрены варианты их стилизации иным способом, как бы в обход, заменяя обычные идентификаторы на спецсимволы и значения специального счетчика нумерации с помощью генерированного CSS контента.
Надеюсь, что для тех, кто не знаком с таким довольно интересным методом, приведенное здесь подробное рассмотрение, позволит в дальнейшем использовать данный материал при оформлении контента на своих собственных интернет-ресурсах.
А на основе прилагаемого здесь CSS-кода сделать это будет совсем несложно, заменив для этого лишь тип, цвет, размер шрифта, отступы и некоторые другие свойства используемых идентификаторов.
Вставляем картинки в HTML-страницы
- Формируем блоки div для возможных вариантов размещения картинок
- Размещаем картинки в HTML-странице
- Задаем параметры картинок с помощью стилей CSS
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
В предыдущем разделе "Работа с изображениями" мы подготовили все необходимые картинки для оформления статьи. А сегодня будем непосредственно их вставлять в HTML-страницу.
При этом с помощью стилей CSS мы создадим несколько типовых решений, которые в дальнейшем позволят без труда размещать в контенте разные варианты графических элементов.
Вставляем видео с YouTube на сайт
- Получаем с YouTube нужный видеоролик
- Вставляем HTML-код видео в оформляемую страницу
- Встраиваем видеоплеер YouTube с помощью стилей CSS
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Сегодня мы затронем еще один вопрос оформления контента и посмотрим, как можно вставить видео с YouTube на сайт.
Надо сказать, что хостинг YouTube с огромным количеством размещенных на нем видеоматериалов сейчас очень популярен. И использование его возможностей, несомненно, сможет в определенной степени повысить интерес пользователей к содержанию сайта.
При этом не надо забывать и о соблюдении требований авторских прав. Поэтому в данном случае мы рассмотрим вариант размещения видео с использованием функциональных возможностей, предлагаемых самим сервисом YouTube, а именно: с помощью стандартного видеоплеера YouTube. Что в соответствии с Условиями использования YouTube позволяет легально использовать этот сервис на своем сайте.
скриншот 29
Однако, следует учесть, что предоставляемый сервисом YouTube HTML-код видеороликов предусматривает применение контейнера
Поэтому здесь будет показан не совсем ординарный, но достаточно простой способ использования стилей CSS. С помощью которого несложно будет решить эту проблему и отображать видео с YouTube с учетом резиновой верстки на всем диапазоне, который для нашего сайта составляет 320px÷1920px.
Устанавливаем слайдер изображений
- Скачивание слайдера
- Создание и скачивание сопутствующих файлов
- Подключение файлов к HTML-страницам
- Размещение слайдера на сайте
- Настройка работы слайдера
- Исходные файлы сайта
Здравствуйте уважаемый посетитель!
Сегодня установим на сайт слайдер изображений, который в какой-то степени его оживит и добавит некоторую информативность и функциональность.
В сети имеется много вариантов слайдеров, которые можно установить на различные виды сайтов, основанных как на готовых CMS, так и в самописном исполнении.
Целью данной статьи является конкретная установка, поэтому сейчас мы не будем заниматься сравнительным анализом всех существующих слайдеров (эта тема довольна обширна и требует отдельного рассмотрения), а остановимся на одном из возможных вариантов. Как выглядит этот слайдер, можно увидеть здесь на сайте, где показываются анонсы бесплатных видеокурсов.
В данном случае это FlexSlider, который, на мой взгляд, является очень удобным в установке и настройке и имеет довольно хороший функционал. К тому же, этот плагин предоставляется бесплатно и, что также немаловажно, к нему имеется довольно подробная инструкция по применению. Его еще часто называют ротатором контента, так как помимо изображений с его помощью можно отображать различные элементы...
Сворачивание и разворачивание элементов на JavaScript
- Сворачивание элемента
- Разворачивание элемента
- Сохранение состояния элементов с использованием cookies
- Исходные файлы сайта
Здравствуйте, уважаемый посетитель!
Сегодня рассмотрим применение эффекта сворачивания и разворачивания элементов сайта. Такой способ преобразования контента в основном предназначен для экономии места на веб-странице. Но кроме того использование такого механизма может придать сайту и определенный презентабельный вид.
Поэтому довольно часто можно встретить на различных ресурсах возможность плавного сворачивания и разворачивания фрагментов текста, изображений, или какого-либо другого рода элементов.
Данный механизм мы рассмотрим на примере ранее установленного слайдера изображений. При этом все необходимые преобразования управляемых элементов будут выполняться с использованием библиотеки jQuery JavaScript и предусматривать выполнение следующих действий:
- сворачивание основного слайдера, размещенного центральной части страницы, с одновременным разворачиванием его копии в сайдбаре;
- обратное действие по разворачиванию основного слайдера с одновременным сворачиванием в сайдбаре;
Кроме того, чтобы при последующих запросах пользователя управляемые элементы отображались в соответствии с последними изменениями, посмотрим, как можно сохранять их состояние персонально для каждого пользователя.
Несмотря на то, что приведенное здесь решение привязано к конкретному примеру, основные моменты, которые будут показаны, возможно использовать и в других аналогичных случаях.
Надеюсь, что эта статья будет интересна тем, кто хочет несколько преобразить свой сайт, применив для этого такой своеобразный эффект как сворачивание разворачивание его элементов.