Как сделать сайт за 30 минут

Главная → Сайт на конструкторе

Практически у каждого из нас, кто довольно часто пользуется интернетом и просматривает просторы Рунета, возникает вполне нормальное желание сделать здесь же что-то своё. А точнее сделать свой сайт, или хотя бы одну HTML страничку, такую же привлекательную, красивую и необычную (не похожую на других).
И вроде есть идеи и замыслы, но, зачастую что-то мешает - то нет должного опыта (незнание языка HTML, PHP, CSS), то просто постоянно не хватает времени.

И в этой статье я расскажу и попытаюсь вам помочь Как сделать сайт за 30 минут без каких либо знаний и опыта в сайтостроение с помощью одного универсального конструктора сайтов.

Содержание страницы:

И здесь же в свою очередь, я хочу Вам порекомендавать изучить основы языка HTML и постораться сделать сайт на практически профессиональном уровне и полностью своими силами.

Сайт с помощью конструктора

Рассматривать мы с вами будем довольно не плохой на мой взгляд "Конструктор сайта" - Artisteer 4 с поддержкой Русского языка (что не мало важно).

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

Отличительной особенностью данного конструктора является то, что на выходе (при сохранении) мы получаем готовые файлы: .html, .css, .js а так же он сохраняет шаблоны для таких движков как: Joomla, WordPress, Drupal, DotNetNuke, Blogger.

Конструктор "Artisteer 4" имеет большой выбор красивых готовых шаблонов, которые вы с лёгкостью можете использовать в своих целях. Так же предоставляется возможность создать свой собственный и неповторимый дизайн.

Возможности конструктора: фон, меню, блоки, фото, вставки.

  • Меню - полное редактирование, т.е. вертикальное или горизонтальное с суб-меню, расположение где и как угодно, изменения в форме кнопок: цвет, градиент, текстура, величина, обводка, толщина рамки, при нахождении в "Активном", "Пассивном" и "Наведённом" состоянии, цвета и размера текста, и многое другое.
  • Блоки - создаёте неограниченное количество, сколько это необходимо вам. В любом количестве ячеек, в любом пиксельном или % соотношении, с градиентом или без, с прямоугольными или округлёнными краями, с любой толщиной и цветом рамки, наложение текстуры или фото.
  • Фото - само-собой неограниченное количество вставки фотографий, но, самое главное в конструкторе "Artisteer 4" есть встроенный красивый скрипт Slaider картинок, где автоматически происходит смена ваших фоток.
  • Вставки - так же предоставляется возможность вставлять музыку, Flash, поиск, строки ввода, RSS, кнопки, флажки, радиокнопки, таблицы, иконки, лайки: Twitter, Facebook, YouTube. Для тех, кто знаком с языком html - есть возможность редактирования созданного во встроенном HTML-редакторе.

Хочу сказать, что очень удобно пользоваться данным конструктором - при наведении курсором мыши на: цветовые схемы, шаблоны, стили и наборы шрифтов, да и впрочем всего остального, мы видим необходимые нам изменения в реальном времени, т.е. на что навели мышью - то, и сразу увидели.

Скачать конструктор "Artisteer 4" можно Здесь.
Там же можете выбрать любой другой бесплатный конструктор.
Скажу сразу - конструктор платный, но платить за него нам не потребуется, потому как нас вполне устроит пробная версия. Минус у бесплатной (пробной) версии один - при сохранении сайта данный конструктор накладывает почти на все фотографии свой "водяной знак". И вытащить оригиналы из папок, или самого конструктора не возможно - стоит очень хорошая защита. Но, как вы успели заметить на этом сайте нет ни одного знака, который напоминал бы об чужом авторском праве. Вы правильно поняли, - пользоваться можно вполне и пробной версией.

Как работать с конструктором - Artisteer 4

Запускаем программу "Artisteer 4" (разумеется после установки её на компьютер) и в появившемся окне нажимаем на самую первую кнопку "Запустить версию Standard".

P.S.
Для тех, у кого после установки программы ярлык не отобразился на рабочем столе - нажимаем меню "Пуск" ⇒ Все программы ⇒ Artisteer 4

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

Теперь мы выберем один из представленных шаблонов, пускай это будет "Alpha Motors" - и дальше будем работать на примере этого шаблона. Действия в работе идентичны для всех шаблонов, и в дальнейшем вы будете выбирать для себя шаблон, или вовсе обходиться без него.

Цвета и шрифты: цветовые схемы, коррекция, стиль, размер и набор шрифтов.
Нажмите в конструкторе в "Меню" ⇒ Цвета и шрифты, и далее в "Под-меню" нажмите на "Цветовые схемы".

  • Цветовые схемы - Перед нами открыто окно с огромным количеством цветовых оттенков для фона нашего содержимого (не путайте с фоном страницы). Наведите курсором мыши на любой из представленных нам цветовых макетов, и подберите тот цвет, который вам больше подходит.
  • Коррекция - это уже более тонкая настройка вашей цветовой гаммы для фона содержимого, где вы так же можете конкретно поменять цвета, яркость и насыщенность.
  • Шрифты - в наборах, стилях и размерах вы выбераете соответствующее вам, где так же просматриваете все изменения на ходу.

Фон сайта: цвет, градиент, текстура, блик, прокрутка.

Нажмите в конструкторе в "Меню" ⇒ Фон, и далее в "Под-меню" нажмите "Настройки". Перед нами откроется окно со всеми настройками "Фона" для нашей страницы. Для наглядного удобства, что бы вам было более понятно, начнём с пункта "Текстура" - нажмём на него.

  • Текстура - программа предлагает очень большой выбор текстур, а так же можно загрузить любую свою текстуру. И так в правом блоке этого окна нажмём на "Настройки текстур" и при наведении на любую из них, мы наблюдаем, как изменяется наш фон. Для начала выберем - "Без текстуры", и у нас получиться белый фон. Далее переходим к пункту "Цвет заливки".
  • Цвет заливки - здесь можно подобрать любой цвет фона для вашей страницы. Давайте выберем коричневый цвет и перейдём к пункту "Блик"
  • Блик - большой выбор бликов на ваш вкус. В правом блоке нажав на "Настройки бликов" сделаем выбор нашего блика - пускай это будет "Угловой". Здесь так же при наведении на любой из бликов идёт моментальное отображение его на странице. Теперь устанавливаем для блика: прозрачность - 50% (дело вкуса), маштаб - 100% (на ваш выбор), позиция - слева (на ваше усмотрение) и отразить - нет.
  • Градиент - в настройках выбираем стиль, высоту и контраст. Для примера возьмём самый первый "От тёмного к светлому" и с помощью ползунка контраста выберем нужную нам насыщенность.
  • Прокрутка - при расположении "Фиксированный" ваш фон при прокрутке страницы в браузере будет зафиксированным на одном месте (наилучший выбор), при "Скроллировать" - фон будет прокручиваться вместе со страницей.

Теперь когда разобрали основные настройки с фоном, вы смело можете поиграться: менять текстуры, накладывать блики на них, изменять размеры, насыщенность и т.д.
Конструктор располагает множественными настройками для редактирования страницы в целом, и описание каждой из них составит довольно большой объём (не одна страница), поэтому логично и правильно лучше перейти непосредственно к примеру создания сайта в этом конструкторе.

Видео-урок по работе с Artisteer 4


Скачать видео-урок по работе с конструктором Artisteer 4


Попутно, в следуще статье, хочу рассказать о том, как положительным образом влияет на ваш сайт в целях продвижения и раскрутки RSS-канал. Где Вы узнаете: как сделать правильно RSS-ленту и что для этого необходимо использовать.

Поделись ссылкой с друзьями:

Комментарии к статье

Селантий 10-09-2013

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

Admin 12-09-2013

Я с этим абсолютно согласен!
Только для готовых шаблонов нужны хотя бы не большие познания в HTML и CSS, для того, чтобы дизайн и оформление вашего сайта было приближено к эксклюзивному. А конструктор сайтов именно для тех, кто таковыми знаниями не обладает.

Павел 12-01-2014

Здравствуйте!
Такой вопрос, а на чем Ваш сайт сделан?

Admin 12-01-2014

В смысле на чём? - вы имеете ввиду движок или конструктор?
Вообще-то это полностью самописный сайт на HTML и CSS с применением набора фреймворков Bootstrap и PHP для автоматизации вывода информации.

Павел 12-01-2014

Еще такой вопрос, не как не могу зафиксировать шапку, как у вас было раньше, не подскажите как это сделать, а то я уже голову сломал.
И еще работаю на WYSIWYG Web Builder 9, но это так на всяк случай, заранее спасибо!

Admin 12-01-2014

Это делается в стилях (style.css), и отвечает за это параметр - position со значением в данном случае - fixed, т.е. вы фиксируете таким образом любой объект.
Совет - не забывайте так же указывать для объектов, которые помещаете в фиксированную область, значения z-index. И эти значения ставьте очень большими, например: 1000000, потому как, если будете пользоваться сторонними скриптами, то вывод информации от них (скриптов - объявления) может быть выведен поверх вашей шапки, что в итоге смотреться будет не красиво.

Павел 12-01-2014


Спасибо, нашел как это делается.

Таня 03-02-2014


подскажите как сохранить то сайт ,чтобы потом залить его на хостинг??

Admin 03-02-2014

В левом верхнем углу есть значок в виде "Палитры" - нажмите на него, и в открывшемся контекстном меню выберите "Экспорт" и нажмите на нужный вам пункт - HTML, шаблон WordPress и так далее. В зависимости от того, что вы сохраняете.