×
Закрытие
4
×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Статья сборника Как установить графический редактор GIMP

Перейти к статье

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

Здравствуйте уважаемый посетитель!

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

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

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное "Руководство пользователя", а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

Для тех же, кто хочет заниматься дизайном на платном Adobe Photoshop (фотошоп), здесь также упомянут и такой вариант, основанный на использовании продления льготного бесплатного периода фотошопа на неопределенное время...

    Cайт на практическом примере

    Текущее состояние создаваемого сайта

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

    Исходные файлы данного сайта можно скачать из прилагаемых к статьям дополнительных материалов.

    Вы здесь: Главная → Сборник статей → Контент → Оформление текста статей сайта


    Автор: / Дата:

    Оформляем текст статей сайта

    Здравствуйте, уважаемый посетитель!

    В предыдущей статье мы рассмотрели основные вопросы, которые необходимо решить при оформлении контента. А также разместили на сайте неструктурированный текст главной страницы.

    Теперь перейдем к непосредственному оформлению контента и в первую очередь займемся текстом главной страницы. Где рассмотрим такие важные вопросы, как оформление заголовка и подзаголовков, структуризация по содержанию, выделение разделов, формирования оглавления и гиперссылок.

    Содержание


    • Оформляем заголовок статьи
    • Структурируем текст по содержанию
    • Формируем оглавление (содержание) используя HTML якоря
    • Формируем подзаголовки
    • Выделяем разделы статьи
    • Исходные файлы сайта

    Оформляем заголовок статьи


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

    Как известно, основной заголовок должен прописываться тегом

    , который имеет самый значимый уровень. При этом

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

    до
    .

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

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

    Для начала заключим заголовок в тег

    .

    1. Что такое противоугонная маркировка стекол и как она работает

    Рис.1 Заключение заголовка в тег

    И теперь рассмотрим как можно подобрать нестандартный шрифт и подключить его к HTML-страницам.

    Для этого воспользуемся сервисом "Google Fonts", в котором имеется большая коллекция всевозможных шрифтов. В начале перейдем по ссылке www.google/fonts и выберем из возможных вариантов подходящий шрифт. При этом, для того, чтобы упростить поиск, можно воспользоваться имеющимся в сервисе фильтром. Ниже на скриншоте показан вариант выбора с исключением шрифтов с засечками и поддерживающих кириллицу.

    фрагмент с возможными вариантами нестандартного шрифта

    Рис.1 фрагмент с возможными вариантами нестандартного шрифта

    В случае, если заблаговременно известно наименование шрифта, то несложно будет его найти через соответствующее поле, как показано на следующем скриншоте. Где в качестве примера через поиск найден шрифт "Comfortaa", который будет использован в дальнейшем при оформлении заголовка.

    Поиск шрифта по наименованию

    Рис.2 Поиск шрифта по наименованию

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

    Выбор шрифта

    Рис.3 Выбор шрифта

    После чего в нижней части должно появиться окно с выбранным шрифтом.

    Окно с выбранным шрифтом

    Рис.4 Окно с выбранным шрифтом

    Если теперь его развернуть, кликнуть в его область, то можно получить все необходимые данные для использования выбранного шрифта, а именно:

    • метатег для вставки в заголовок HTML-страницы;
    • соответствующее выбранному шрифту свойство family-name для назначения стилей CSS.

    Рис.5 Данные для использования выбранного шрифта

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

    Для этого требуется указать в заголовке файла "index.php" шаблона главной страницы ссылку на сервер Google, с которого будет скачиваться необходимый шрифт при загрузках HTML-страниц.

    Ниже показано, как к уже имеющимся на данный момент метатегам заголовка добавлен полученный код со ссылкой на сервер Google.

    1. charset="utf-8">

    2. <span class="red"><?php</span> <span class="blue"><b>echo</b></span> $titlepage_add;<span class="red">?></span>

    3. name="Description" content=" echo $description_add;?>">

    4. name="viewport" content="width=device-width, initial-scale=1.0">

    5. rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

    6. rel="stylesheet" type="text/css" href="/styles/main.css">

    7. rel="stylesheet" type="text/css" href="/styles/flexslider.css">

    8. href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">

    Рис.6 Добавления элемента в заголовок HTML-страницы;

    И теперь, с помощью стилей CSS, включая значение свойства family-name, полученное для выбранного шрифта, оформим заголовок исходя определенных ранее требований.

    Следует отметить, что на этапе верстки при формировании области контента для уровней заголовков с

    до

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

    Исходя из этого, для тега

    заголовка статьи добавим в файл "main.css", расположенный в папке "styles" следующий CSS-код. (Для удобства поиска данного фрагмента CSS-кода в файле "main.css", размещенном в дополнительных материалах, приведенная нумерация строк использована в соответствии с общей таблицей CSS).

    1. main h1 {

    2. font-size: 1.5625em;

    3. font-style: normal;

    4. font-weight: normal;

    5. color: #006;

    6. font-family: 'Comfortaa', cursive;

    7. text-shadow: 1px 1px 0px #eee, 2px 2px 2px #222;

    8. text-align: center;

    9. margin-bottom: 1em;

    10. }

    Рис.7 Оформление заголовка с помощью стилей CSS

    Здесь видно, что в строке 309 для свойства family-name определено то значение, которое мы получили ране при выборе шрифта с помощью сервиса "Google Fonts".

    А кроме этого, используя свойство text-shadow (поз.310) к буквам заголовка добавлены две тени, с начала светлая, затем темная. Это сделано для того, чтобы, как и предполагалось, попытаться в какой-то мере преобразить внешний вид заголовка, придав ему некоторую объемность.

    Остальные же используемые свойства CSS здесь нет необходимости подробно рассматривать, так как они неоднократно пояснялись ранее в статьях на этапе верстки сайта. В случае необходимости можно вернутся к соответствующему разделу.

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

    Оформленный заголовок статьи

    Рис.8 Скриншот страницы с оформленным заголовком

    Как видно, теперь основной заголовок статьи принял несколько отличающийся от всего текста объемный вид, и на общем фоне достаточно хорошо выделяется.

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

    Но, несомненно, это не единственные средства, можно использовать и другие, не менее интересные. Как говорится, нет пределу совершенства. Но пока, в нашем случае, мы остановимся на таком варианте.

    Структурируем текст по содержанию


    Следует отметить, что порядок написания статей у разных авторов может существенно отличаться. Одни создают свой пост в основном лишь отталкиваясь от темы и следуя по течению своих мыслей. Другие же, наоборот, в начале решают каким будет содержание статьи с учетом ее структуры, предварительно определив основные ее части (разделы). А уж затем излагают суть, придерживаясь сформированного плана.

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

    Хотя я отношусь ко второй части и обычно пишу статьи, заведомо представляя, из каких частей они должны состоять, тем не менее, для наглядности, ранее в файле "main.php" сознательно был размещен неструктурированный текст в виде обычных абзацев, как можно увидеть на рис.1. И вот такой текст требуется в первую очередь структурировать по содержанию.

    Как вариант, исходя из содержания, данную статью можно разбить на следующие логические части, обозначив их такими подзаголовками:

    • Зачем нужна противоугонная маркировка
    • Почему противоугонная маркировка действительно работает
    • Дополнительные преимущества противоугонной маркировки
    • Какие существуют способы нанесения маркировки и ориентировочная ее стоимость

    Конечно, у кого-нибудь могут возникнуть и другие варианты, но для меня, по крайней мере, сейчас это видится так.

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

    Формируем оглавление (содержание) используя HTML якоря


    Вообще, правилом хорошего тона является размещение в начале каждой статье перечня входящих в нее разделов в виде оглавления, или по другому - содержания.

    Такое представление информации о статье позволяет пользователям в самого начала лучше в ней ориентироваться. Ведь, посмотрев на оглавление статьи не трудно будет сразу понять, какие вопросы там рассматриваются, и стоит ли ее читать. А если да, то на какое место можно акцентировать внимание для получения ответа на свой запрос.

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

    Механизм создания якоря по сути состоит из двух частей. В начале при помощи атрибута "id", в нужном месте необходимо поставить метку (закладку). При этом присвоенное имя закладки должно быть уникальным, составленным из русских или латинских букв.

    А затем, в оглавлении с помощью тега следует поставить ссылку на эту метку, используя ее имя с добавлением символа решётки #.

    Вот и все, что требуется для создания в оглавлении гиперссылок на разделы статьи. Более подробно об HTML якорях можно ознакомиться в соответствующей справочной литературе, например в одном из разделов интернет-ресурса WebReference.ru.

    скриншот 56

    В нашем случае, для первого раздела, закладку и гиперссылку можно изобразить в следующем виде:

    Как видно, здесь закладка с именем "metka_1" вставлена в тег

    первого подзаголовка. А в гиперссылке используется то же самое имя, но уже с символом решётки #.

    И таким образом, кликнув по элементу оглавления, пользователь автоматически попадет на то место, где начинается выбранный раздел с размещенной закладкой.

    Как это будет выглядеть в целом для оглавления, можно посмотреть на следующем фрагменте HTML-кода. (Приведенная нумерация строк использована в соответствии с общим HTML-кодом, размещенным в файле "main.php" каталога "articles", который можно найти в дополнительных материалах).

    1. class="catalog">

    2. href="#metka_1">Зачем нужна противоугонная маркировка

    3. href="#metka_2">Почему противоугонная маркировка действительно работает

    4. href="#metka_3">Дополнительные преимущества противоугонной маркировки

    5. href="#metka_4">Какие существуют способы нанесения маркировки и ориентировочная ее стоимость

    Рис.9 Формирование оглавления (содержания)

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

    с классом catalog, в элементах которого размещены теги . И таким образом, используя стили CSS можно отформатировать пункты оглавления, задав необходимые отступы.

    CSS-код, относящийся к списку оглавления, приведен в следующем фрагменте таблицы CSS.

    1. .catalog {

    2. text-indent: 0;

    3. padding-left: .8125em;

    4. }

    Рис.10 CSS-код списка оглавления

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

    Содержание статьи

    Рис.11 Скиншот содержания статьи

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

    Формируем подзаголовки


    После того, как мы разбили статью на разделы и создали оглавление, теперь можно сформировать подзаголовки разделов и разместить в них HTML закладки.

    Как известно, в HTML теги заголовков имет разные уровни значимости, от

    до
    . Для

    ранее мы определили его в качестве основного заголовка.

    Что же касается остальных, то переход заголовков от одного уровня к другому должен быть только на один уровень ниже или выше.

    Так, для разделов, сформированных для данной статьи мы должны использовать в качестве подзаголовка следующий по уровню тег

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

    и т.д.

    Исходя из этого, сформируем подзаголовки разделов и добавим к ним закладки HTML якорей. Фрагмент HTML-кода после внесенных дополнений, включающий ранее составленное оглавление, вводную часть, подзаголовки и начало текста первого раздела, будет выглядеть следующим образом.

    1. Что такое противоугонная маркировка стекол и как она работает

    2. Здравствуйте уважаемый посетитель!

    3. Здесь Вы можете узнать о том, почему противоугонная маркировка автомобилей является надежной защитой автомобиля от угона и как ее можно сделать.

    4. Содержание


    5. class="catalog">

    6. href="#metka_1">Зачем нужна противоугонная маркировка

    7. href="#metka_2">Почему противоугонная маркировка действительно работает

    8. href="#metka_3">Дополнительные преимущества противоугонной маркировки

    9. href="#metka_4">Какие существуют способы нанесения маркировки и ориентировочная ее стоимость

  • id="metka_1">Зачем нужна противоугонная маркировка


  • В настоящее время угон автомобилей и кража дорогостоящих комплектующих стало одним из самых распространенных преступлений в России. И трудно возразить тем, кто утверждает ...

  • Рис.12 Формирование подзаголовков

    Наверное, какого-либо дополнительного пояснения к этому фрагменту HTML-кода не требуется, так как все используемые здесь элементы ранее подробно рассматривались на этапе верстки сайта.

    Можно лишь указать на закладку HTML якоря, которая размещена в теге

    с именем "#metka_1" в подзаголовке первого раздела статьи (поз.13).

    А также обратить внимание на то, что здесь к заголовкам второго уровня

    добавлена линия
    (поз.6,14). Что позволяет несколько лучше показать начало разделов статей.

    Таким образом необходимую разметку подзаголовков мы выполнили, осталось их лишь оформить с помощью стилей CSS.

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

    Например, если мы планируем использовать в качестве подзаголовков все возможные теги от

    до
    , то это один вариант. При котором требуется учитывать взаимосвязь внешнего вида (размер, выделение и т.д.) для такого значительного количества элементов.

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

    В нашем случае в качестве подзаголовков разделов статей будем предполагать использовать лишь заголовки 2-го и 3-его уровней - теги

    и

    . Это означает, что при формировании контента не будут предусматриваться заголовки ниже 3-его уровня. Возможно, что этого вполне будет достаточно для структуризации всех будущих статей сайта.

    Поэтому для оформления внешнего вида подзаголовков назначим стили CSS только для

    и

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

    Учитывая, что ранее для заголовков основного содержания уже были определены свойства CSS, то это несколько упрощает задачу. Так как для оформления подзаголовков с тегом

    будет достаточно оставить существующие свойства CSS, а новые отдельные свойства добавить лишь для

    .

    Вариант CSS-кода, определяющего оформление подзаголовков

    и

    представлен в следующей таблице.

    1. main h2 {

    2. font-size: 1.1875em;

    3. font-style: italic;

    4. color: #bd072e;

    5. font-weight: bold;

    6. }

    7. main hr {>

    8. height: .0625em;

    9. background: #bd072e;

    10. margin: .3125em 0 .625em 0;

    11. box-shadow: 0 0 .0625em 0 #bd072e;

    12. }

    13. main h3 {

    14. font-size: 1.0625em;

    15. font-style: italic;

    16. color: #a76403;

    17. font-weight: bold;

    18. text-decoration: underline;

    19. margin-bottom: .5em;

    20. }

    Рис.13 CSS-код подзаголовков

    и

    Здесь более темным фоном обозначены строки с ранее назначенными свойствами CSS на стадии верстки. В данном случае они относятся к подзаголовкам

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

    Что касается подзаголовков с уровнем

    , то как видно в них в отличие от

    лишь несколько уменьшен размер шрифта (поз.327) и изменен цвет (поз.329).

    Кроме того, в качестве подчеркивающей линии здесь используется свойство text-decoration со значением underline (поз.331). Это обусловлено тем, что тег

    менее значим. И в этом случае, наверное, не стоит использовать дополнительную отдельную линию, как это сделано в заголовке второго уровня в теге

    .

    Фрагмент текста с подзаголовками

    Рис.14 Фрагмент текста с подзаголовками

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

    Выделяем разделы статьи


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

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

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

    и с помощью стилей CSS задать необходимые отступы.

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

    Таким образом, с учетом соответствующих дополнений HTML-код рассматриваемого выше фрагмента примет следующий вид.

    1. id="metka_0">Что такое противоугонная маркировка стекол и как она работает

    2. class="chapter">

    3. Здравствуйте уважаемый посетитель!

    4. Здесь Вы можете узнать о том, почему противоугонная маркировка автомобилей является надежной защитой автомобиля от угона и как ее можно сделать.

  • class="chapter">

  • Содержание


  • class="catalog">

  • href="#metka_1">Зачем нужна противоугонная маркировка

  • href="#metka_2">Почему противоугонная маркировка действительно работает

  • href="#metka_3">Дополнительные преимущества противоугонной маркировки

  • href="#metka_4">Какие существуют способы нанесения маркировки и ориентировочная ее стоимость

  • class="chapter">

  • id="metka_1">Зачем нужна противоугонная маркировка


  • В настоящее время угон автомобилей и кража дорогостоящих комплектующих стало одним из самых распространенных преступлений в России. И трудно возразить тем, кто утверждает ...

  • ...

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

  • class="start"> href="#metka_0">В начало

  • Рис.15 Выделение логически законченных частей текста

    Как видно, теперь каждая часть текста заключена в отдельный контейнер

    , что позволяет используя стили CSS лучшее отделить их друг от друга.

    Кроме того, в конце каждого раздела включены гиперссылки (поз.24) на закладку с именем "#metka_0", которая помещена в заголовок

    (поз.2). И при каждом переходе по этим ссылкам можно снова возвращаться к началу текста статьи.

    С разметкой мы закончили, и теперь можно перейти к назначению соответствующих свойств CSS. Ниже показан CSS-код, относящийся к добавленным элементов HTML.

    1. .chapter {

    2. margin-bottom: 1.5em;

    3. }

    4. .start {

    5. text-align: right;

    6. padding: 0.25em 0 1em 0;

    7. }

    Рис.16 CSS-код выделения разделов статьи

    Как видно, для контейнера

    с классом .chapter расстояния между выделяемыми частями здесь заданы с помощью внешнего отступа снизу в размере 1.5em (поз.344).

    Что же касается гиперссылки на начало статьи, помещенной в элемент с классом .start, то она свойством text-align выровнена в право (поз.347) с заданными отступами (поз.348).

    Теперь, если посмотреть на обновленную страницу, то можно увидеть окончательный вид оформляемого текста.

    Скриншот оформленного текста

    Рис.17 Скриншот оформленного текста

    Таким образом мы выполнили одни из основных преобразований текста и сформировали такие важные элементы, как разделы, оглавление, заголовки, гиперссылки.

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

    Исходные файлы сайта


    Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

    • Файлы каталога www
    • Таблицы базы данных MySQL

    Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

    Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

    Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

    С уважением,


    Комментарии


    Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учета мнения посетителей.

    Буду Вам за это очень признателен!