SiteBuilder - инструменти и настройки

Защо софтуера за създаване на сайтове ICN SiteBuilder е много подходящ за създаване точно на целеви страници?

Припомняме някои от препоръките за създаване на успешна целева страница:

• бързо зареждане в браузър;
• опростени структура и дизайн;
• адаптивни настройки за мобилни устройства;

ICN SiteBuilder работи на базата на популярния framework Bootstrap, с който се създават статични сайтове - цялата информация се записва директно в HTML файловете, а не се изпращат заявки към база данни, както работят динамичните CMS системи като WordPress.

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

В допълнение на казаното, ICN SiteBuilder предоставя достатъчно възможности за прецизно настройване на адаптивните настройки (responsive design) и коректна работа на сайта в мобилни устройства с различна резолюция на екрана.

При регистриране на услугата ICN SiteBuilder (https://www.icn.bg/bg/sitebuilder/) в потребителския cPanel се появява икона за достъп до софтуера в секция Софтуер:

При кликане на иконата се отваря панел Select a Domain, в който трябва да изберете домейн/поддомейн за целевата страница, която ще създавате:

Готови шаблони

При първо зареждане на SiteBuilder се зарежда панел с готовите шаблони:

Всеки шаблон предлага удобната опция Преглед за разглеждане на шаблона преди импортиране. През бутона Guide имате достъп до кратка видео инструкция. За улеснение на потребителите шаблоните са сортирани по категории:

След като изберете подходящия шаблон кликнете бутона Избери за да импортирате шаблона в SiteBuilder:

За да заредите шаблона в браузер трябва да го публикувате през иконата със символ дискета и линка Публикувай в менюто:

Зарежда се индикатор за процеса, който трябва да изчакате да приключи:

Избраният шаблон се зарежда в браузъра:

Може да запазите промените в страницата или секцията без да ги публикувате като кликнете в менюто линка Запази чернова:

Адаптивни настройки (responsive design)

Може да прегледате как изглежда сайта в различни резолюции през иконата Преглед:

Настройките в панела Отговарящ зареждат шаблона в избраната резолюция според вида на устройството - през този интерфейс редактирате адаптивните настройки на сайта:

Смяна на шаблон

Ако в даден момент решите, че избраният шаблон не е подходящ, може да го смените през настройката Нов/Възстанови:

като изберете в менюто линка Промени шаблон:

В новия панел Промени шаблон маркирайте полето Got it и кликнете бутона Да, промени шаблона:

Възможно е възстановяването на предишния шаблон през панела Възстанови като кликнете линка Възстанови в менюто, маркирате полето Got it и натиснете бутона Да, възстанови шаблона:

Система за архивиране на сайта

SiteBuilder има прецизна система за създаване временни архиви на сайта, от които може лесно да се възстанови по-стара версия. За целта изберете иконата със символ дискета (Публикувай) и в менюто кликнете линка Backup/Възстанови.

Отваря се панел със същото име, в който генерирате резервно копие на сайта от бутона Свалете Backup (резервно копие):

Информацията се запазва във файл с името на домейна и суфикс _project.sitebuilder на вашия компютър:

Освен този ръчно създаден архив, системата генерира автоматични архиви, които са достъпни в раздела Възстанови. Опцията Възстанови от файл ви дава възможност да възстановите сайта от файла на вашия компютър:

Опцията Изберете автоматичната Backup версия... дава достъп до списък със системните архиви.

За да възстановите сайта, без значение коя опция сте избрали, кликнете бутона Възстанови.

Навигиране в работния панел

Навигиране между отделните страници/секции на сайта става през менюто Начало (системата ползва името на линка от менюто за навигация):

Може да промените страницата/секцията като кликнете друг линк в падащото меню. Ако сте пропуснали да запазите промените, следния прозоцец ще ви помогне да го направите (Запази чернова) или да откажете промените (Не запазвай) като изберете съответния бутон:

Може да откажете промяната на страницата/секцията през бутона Откажи.

Панелът Потвърдете всъщност е много полезен в случаите, когато сте допуснали грешка при създаване на страницата и желаете да отмените действията си, но бутонът Премахни (Undo) не успява да възстанови всички действия.

В този случай изберете промяна на страницата преди да сте публикували/запазили съдържанието и в панела Потвърдете изберете Не запазвай. SiteBuilder зарежда новата страница, върнете се на предишната страница през менюто с навигационните линкове и започнете редактирането отново.

Навигиране между съседни страници/секции е възможно през интерфейса на SiteBuilder като кликнете сините икони със стрелка в горния или долния край на екрана:

Ако не сте запазили промените ще се зареди същия подсещащ прозорец за да потвърдите или отмените решението си.

Меню с настройки

Достъп до много полезно меню с настройки имате през иконата със символ зъбно колело, които настройки ще ви бъдат необходими при изграждането на вашата целева страница:

Фон

През настройката Фон (background) може да задавате фон в различен цвят (през функцията Цвят) за отделни секции от страницата, за отделни или за всички страници (Apply to all pages):

Вместо цвят може да използвате за фон изображение през функцията Изображение, след което избирате подходяща снимка от галерията или вашия компютър:

и дефинираме размерите, разположението и прозрачността на изображението през допълнителните настройки:

Стилове

Панелът Стилове е предназначен за предварително дефиниране на всички шрифтове, които ще бъдат използвани в сайта - заглавия, подзаглавия, параграфи, списъци, цитати, линкове, footer текст, дребен (small) текст, етикети на формуляри, етикети на бутони и т.н. Един от сигурните белези за професионализъм е постоянството и добрия подбор (family, размер, стил, ширина на линията, тежест...) на шрифтове в уеб страниците.

На изображението виждате изглед на панела Стилове в раздел Стандарт с полетата за редактиране на параметрите на шрифта, който избирате в лявата лента (в примера Page Title):

В раздел Връзки може да дефинирате стил на линковете (Връзка към текст) и променен дизайн на линка при посочване с мишката (Завъртане на линкове, hover):

В раздел Напреднал може да избирате от менюто Промени текст (text transform) между следните настройки:

• Никакъв (none) - текста в CSS класа не се променя;
• Акцентирай (Capitalise) - всяка дума започва с главна буква, подходящ за заглавия;
• Главни букви (Upper Case) - текст само с главни букви;
• Малки букви (Lower Case) - текст само с малки букви;

В полето Междинно разстояние може да дефинирате персонализирани стойности за позициониране на текста (CSS настройките margin и padding). Bootstrap дефинира стойности по подразбиране, но те ще бъдат пренаписани ако въведете стойности в този интерфейс.

В секция Размер на шрифта за различни устройства може да промените стойностите по подразбиране.

Запазените параметри на стиловете се визуализират в текстовия редактор при създаване/редактиране на текст в лентата Блокови стилове:

В дъното на тази лента имате достъп до панела Стилове през линка Редактирайте стилове ако желаете да редактирате стойността на даден параметър:

Може да приложите различен стил към част от текста като го маркирате и от лентата Блокови стилове изберете различен стил.

Икона на сайта

Икона на сайта се нарича изображението, което се зарежда в раздела (tab) на браузъра, който визуализира сайта. SiteBuilder предоставя удобна система от инструменти, с които може лесно да инсталирате икона на сайта.

Отворете панела Промени икона (Настройки > Икона на сайта) и кликнете полето със символ молив в секция Икона на сайта:

Отваря се прозорец Изберете медия, в който може да изберете от качените изображения, може да качите ново изображение (Качете нова картинка):

или през бутона Пълна медийна библиотека може да отворите меню с достъп до всички типове медийни файлове в панела Качване на медия. Върнете се назад през бутона Затвори:

Изберете изображение за икона на сайта и кликнете Избери:

Изображението се зарежда в секция Икона на сайта, инсталирайте го през бутона Приложи:

След публикуване на сайта иконата се зарежда коректно в раздела на браузъра:

Целева

Тази настройка променя структурата на шаблона и начинът на работа на сайта, превръщайки страници в секции и обратно.

Aко премахнем отметката в полето Целева всяка секция от шаблона ще бъде публикувана като отделна уеб страница със собствени header и footer секции:

Ако поставим отметка в полето и публикуваме сайта, шаблона работи като one-page-site и при кликане на линк в менюто страницата плавно скролира до избраната секция:

Мрежа (grid and guides)

Уеб дизайн инструментите за напреднали потребители grid и guides позволяват прецизното позициониране (pixel perfect) на елементите (секции, области, изображения, заглавия, текст...) в структурата на сайта.

В зависимост от опитността и стилът на работа на дизайнера може да активира и двата инстумента едновременно в панела Grid and guides:

Guides (водачи) се наричат вертикалните червени линии, които трябва да издърпате с мишката от тънката лента в левия край на екрана и да ги плъзнете до желаната позиция, спрямо която да позиционирате даден елемент:

За да премахнете guide го хващате с мишката за квадратните дръжки в долната част на екрана (курсора на мишката се променя в две хоризонтални стрелки) и го пускате извън работната област на сайта без значение от коя страна.

Grid (мрежа) се нарича мрежа от квадратчета, която се наслагва върху работната област на страницата и позволява прецизно позициониране на елементите:

През настройките Grid size (размер на мрежата) и Grid color (цвят на мрежата) може да промените размера на квадратчетата и цвета на линиите:

Изглед на редактирана мрежа с увеличен размер на квадратчетата и променен цвят:

SiteBuilder предлага полезни инструменти за уеб дизайн и ви препоръчаме да отделите време за тестване и свикване с начина на работа на софтуера. След това създаването на прецизни и професионално изглеждащи уеб страници става лесно, бързо и забавно.