Начало > Помощен център > Споделен Хостинг Linux > SiteBuilder - инструменти и настройки

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

Помощен център

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

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

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

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

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

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

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

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

Икона на ICN SiteBuilder в cPanel

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

Интерфейс Select a Domain

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

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

Панел с готови шаблони Изберете шаблон

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

Опции за Преглед и видео инструкция Guide

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

Импортиране на шаблон в SiteBuilder

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

Настройк за публикуване

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

Индикатор за състояние на процес Подготвяне

Индикатор за състояние на процес Завършено

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

Изглед на публикуван шаблон в браузър

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

Индикатор за състояние на процес Запази чернова

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

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

Изглед на икона Преглед

Интерфейс за разглеждане на сайт в различни резолюции

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

Изглед на панел Отговарящ

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

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

Икона Нов/Възстанови

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

Линк Промени шаблон

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

Потвърждение за промяна на шаблон

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

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

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

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

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

Изглед на панел Backup/Възстанови

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

Архивен файл на страницата

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

Настройка Възстанови от файл

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

Опция Изберете автоматичната 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:

Изглед на панел Grid and guides

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

Използване на Guides (водачи)

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

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

Използване на Grid (мрежа)

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

Настройки на Grid (мрежа)

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

Изглед на редактирана Grid (мрежа)

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