Создание сайта по шаблону. Новый подход к редактированию

Создание сайта по шаблону. Новый подход к редактированию

Структура шаблона сайта. Стандартизация структуры и дизайна

Все сайты имеет схожую между собой структуру. Состоят из секций (section), контейнеров (container) и блоков (div). Изменение структуры и дизайна сайта достигаются путём комбинирования их расположения и размеров. Говорю лишь о глобальной структуре строения и дизайна.

Также, все сайты используют много стандартных скриптов и фреймворков, например:
- Скрипт jquery.js - библиотека (фреймворк) jаvascript, отец всех скриптов. Используется практически во всех современных сайтах;
- wow.js и animate.css - анимация всплывающих блоков, появление по мере прокрутки и т.п.
- owl.carousel.js - отвечает за функциональность слайдеров;
- font-awesome.css - иконочный векторный шрифт;
- ionicons.css - иконочный шрифт, значки разделов;
- font.css - всевозможные шрифты;
- Популярный фреймворк Bootstrap, обеспечивающий полную адаптивность сайта к просмотру на мобильных устройствах. Последняя версия v4.3.1 на конец 2019 г.

Конечно, любой сайт имеет свой основной рукописный файл, допустим style.css, который дополняет и корректирует все шаблонные .css файлы. Именно он отвечает за уникальность дизайна веб-проекта.

Однотипной является структура директорий (папок) сайтов.
- Файлы .css лежат в папке css/,
- Скрипты находятся в папке js/,
- Картинки и фотографии в папках img/ или images/.

Допускается создание подпапок типа: img/clients/.
Распространённые расширения размещаемых изображений: .jpg, .png, .gif, .ico, новый прогрессивный формат .svg

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

Новый подход к способу редактирования шаблонов

На этом сайте SiteY.ru можно скачать шаблоны, которые будут максимально удобны при редактировании. Кроме комментариев внутри кода они состоят из видимой на странице текстовой информации, которая одновременно является руководством к редактированию.

Используя подобный шаблон, все действия связанные с редактированием контента, сводятся к одному:
- заменить весь имеющийся русский текст на свой;
- заменить исходные картинки на свои изображения.

Вы можете скачать исходники и просмотреть работу такого шаблона онлайн.

Редактируем текст шаблонов от SiteY.ru

Для удобства редактирования, весь текстовый контент, подлежащий замене, составлен на русском языке!
Текст, который следует заменить, несёт полезную информацию по редактированию и оптимизации шаблона. Поэтому начинающий веб-мастер занимаясь редактированием кода, одновременно познаёт секреты веб-мастерства.

Основные рекомендации по работе с шаблоном

Корректно заполните метатеги для поисковых систем:
<title>Название страницы</title>
<meta name="description" content="Описание темы">
<meta name="keywords" content="ключевые, слова, через, запятую">

Редактируем картинки

Размеры новых изображений должны соответствовать исходным по высоте и ширине в px. Их несоответствие может повлиять на адаптивность сайта при просмотре на мобильных устройствах.

Если заменили наименование файлов картинок, то соответственно поменяйте их прописку в коде.
Например:
<img src="img/not-wash.jpg" alt=""> - было в коде.
Присвоили название новой картинке my-option.jpg
<img src="img/my-option.jpg" alt=""> - должно стать в коде.

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

Следите за тем, чтобы объём новых (ваших) изображений не превышал разумные пределы. Это влияет на скорость открытия сайта.
- Для отображаемого контента - в пределах 50Кб.
- Для картинок галереи, которые всплывают при нажатии на уменьшенные копии, объём можно увеличить.

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

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

С такой работой справится любой пользователь не обладающий специальными знаниями в веб-программировании.

Скачать дополнительные рекомендации по работе с шаблонами от SiteY.ru:
Edit-Templates-SiteY.ru [90,24 Kb] (cкачиваний: 5)

Автор: Saah | Просмотров: 154 | 6-09-2019,Пт, 03:48  

Похожие публикации

Добавить свой комментарий:

@