Как сделать свой сайт за 10 минут без программирования
vk f t

Как сделать свой сайт за 10 минут без программирования

Для неко­то­рых это ста­но­вит­ся источ­ни­ком посто­ян­но­го дохо­да, если подой­ти к про­цес­су с умом.

В про­шлый раз мы свер­ста­ли стра­ни­цу «О себе» на HTML и Бут­стра­пе. Давай­те сде­ла­ем то же самое, но без про­грам­ми­ро­ва­ния — на кон­струк­то­ре сай­тов «Тиль­да».

Какие такие конструкторы

Кон­струк­то­ры сай­тов — спе­ци­аль­ные про­грам­мы и сер­ви­сы, кото­рые помо­га­ют собрать сайт из гото­вых бло­ков. Одни бло­ки отве­ча­ют за текст, дру­гие за кар­тин­ки, тре­тьи — за спис­ки и так далее.

Бло­ки мож­но настро­ить по вку­су, но в целом они огра­ни­че­ны по воз­мож­но­стям. Зато их не нуж­но про­грам­ми­ро­вать: в боль­шин­стве кон­струк­то­ров всё про­ис­хо­дит в режи­ме drag’n’drop. Это зна­чит, что доста­точ­но выбрать блок, пере­та­щить его на нуж­ное место, впи­сать текст, вбро­сить кар­тин­ку, и всё — блок рабо­та­ет. В ито­ге мы жерт­ву­ем гиб­ко­стью и воз­мож­но­стя­ми настрой­ки ради того, что­бы делать сай­ты было про­сто.

В этой ста­тье мы будем исполь­зо­вать кон­струк­тор «Тиль­да». У него «этаж­ная» архи­тек­ту­ра: каж­дый блок — это этаж, поста­вить блок сле­ва и спра­ва нель­зя. Но зато мы полу­ча­ем пол­ную адап­тив­ность: каж­дый эле­мент хоро­шо выгля­дит на любом экране.

Регистрируемся и создаём проект

Преж­де чем соби­рать стра­ни­цу о себе, заре­ги­стри­ру­ем­ся в сер­ви­се. На стра­ни­це созда­ния акка­ун­та для это­го вво­дим имя, почту и пароль:


Сра­зу после реги­стра­ции сер­вис пред­ла­га­ет при­ду­мать внут­рен­нее назва­ние про­ек­та. Оно ни на что не вли­я­ет, про­сто для того, что­бы было удоб­нее ори­ен­ти­ро­вать­ся, когда про­ек­тов будет мно­го. Пусть назва­ние будет «Сайт о себе»:


Обыч­но сайт состо­ит из мно­гих стра­ниц, но нам пока хва­тит одной. Нажи­ма­ем «Создать новую стра­ни­цу»:



Настраиваем заголовок

В Тиль­де есть два пути — выбрать уже гото­вый шаб­лон или создать стра­ни­цу с нуля. Шаб­лон под­хо­дит в тех слу­ча­ях, когда надо быст­ро сде­лать типо­вой сайт и не хочет­ся думать над дизай­ном. Это не наш слу­чай, пото­му что у нас дизайн уже есть — мы повто­ря­ем то, что сде­ла­ли в про­шлой ста­тье, поэто­му выби­ра­ем вари­ант «Пустая стра­ни­ца»:


Что­бы уви­деть все эле­мен­ты, из кото­рых мож­но соби­рать стра­ни­цу, нажи­ма­ем на «Все бло­ки»:


У нашей стра­ни­цы нет облож­ки, она сра­зу начи­на­ет­ся с заго­лов­ка. Откры­ва­ем раз­дел «Заго­ло­вок» и выби­ра­ем тот, кото­рый под­хо­дит боль­ше все­го. Неваж­но, что там напи­са­но боль­ше, чем нам нуж­но — лиш­нее мы уда­лим или скро­ем. Допу­стим, мы реши­ли, что самый пер­вый заго­ло­вок (TL01) нам под­хо­дит, поэто­му нажи­ма­ем на него, и он сра­зу попа­да­ет на стра­ни­цу:


Смот­ри­те, здесь мно­го лиш­не­го и не тот текст, кото­рый нам нужен. Сна­ча­ла раз­бе­рём­ся с лиш­ним — выде­ля­ем по оче­ре­ди текст свер­ху и сни­зу заго­лов­ка и сти­ра­ем его. Тиль­да пой­мёт, что нам эти эле­мен­ты не нуж­ны, убе­рёт их и подви­нет заго­ло­вок повы­ше:


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


Оста­лось настро­ить раз­мер и поло­же­ние тек­ста как на уже гото­вой HTML-странице. Для это­го сна­ча­ла выде­ля­ем текст и с помо­щью инстру­мен­тов, кото­рые появ­ля­ют­ся на верх­ней пане­ли, дела­ем заго­лов­ку нуж­ный раз­мер и вырав­ни­ва­ем по лево­му краю:


Но у нас оста­лись боль­шие отсту­пы сле­ва и свер­ху, их тоже нуж­но попра­вить. Нажи­ма­ем кноп­ку «Настрой­ки» воз­ле заго­лов­ка и в появив­шем­ся меню настра­и­ва­ем раз­ме­ры отсту­пов и нажи­ма­ем «Сохра­нить и закрыть»:



Наполняем всю страницу

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

Основ­ной текст и кар­тин­ка — блок IM10:


Мои науч­ные рабо­ты — бло­ки TL03 для под­за­го­лов­ка и CL04 для четы­рёх коло­нок тек­ста. Ссыл­ки ста­вят­ся тоже через верх­нее меню:


Кон­так­ты для свя­зи — бло­ки TL03 для под­за­го­лов­ка и TX01 для тек­ста:


Перед публикацией

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

Назва­ние стра­ни­цы меня­ет­ся по кноп­ке «Настрой­ки» в верх­нем меню. Пишем там то же самое, что и про­шлый раз:


Там же мож­но перей­ти к настрой­кам все­го сай­та — это нам пона­до­бит­ся для настрой­ки цве­тов и общих пара­мет­ров. В пер­вом раз­де­ле сра­зу про­пи­шем общее назва­ние сай­та и его опи­са­ние, а так­же при­ду­ма­ем имя для суб­до­ме­на:


Домен — тот же сайт в интер­не­те с отдель­ным име­нем. Yandex.ru, tilda.ws, thecode.media — это всё при­ме­ры доме­нов. А если у сай­та есть под­раз­дел со сво­им отдель­ным име­нем в интер­не­те, это уже суб­до­мен: rabota.yandex.ru, docs.google.com, mihailmaximov.tilda.ws. Суб­до­ме­ны обыч­но нуж­ны, что­бы офор­мить раз­де­лы на раз­ные темы в рам­ках одно­го сай­та. Наш суб­до­мен mihailmaximov озна­ча­ет, что внут­ри боль­шо­го сай­та tilda.ws будет раз­дел про Миха­и­ла Мак­си­мо­ва — и толь­ко про него.

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


Когда все настрой­ки сде­ла­ны, сохра­ня­ем изме­не­ния и нажи­ма­ем кноп­ку «Пуб­ли­ко­вать». В этот момент наш сайт ста­нет досту­пен все­му миру по адре­су mihailmaximov.tilda.ws.


Что дальше

Мож­но сде­лать мно­го стра­ниц, настро­ить пере­хо­ды меж­ду ними и полу­чить пол­но­цен­ный сайт.

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

А если хоро­шо осво­ить Тиль­ду, то мож­но брать зака­зы на изго­тов­ле­ние сай­тов и зара­ба­ты­вать на этом.

Ещё по теме