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 предлага полезни инструменти за уеб дизайн и ви препоръчаме да отделите време за тестване и свикване с начина на работа на софтуера. След това създаването на прецизни и професионално изглеждащи уеб страници става лесно, бързо и забавно.