БЛОГ АНТОНА
РУХЛИНА

Умное создание собственного сайта -
раскрутка и заработок в интернете

Как абсолютно самостоятельно сверстать свой сайт — инструкция по шагам

Автор: Антон Рухлин Дата: 03 июня 2018

Просмотры: 4

krut-site

 

Как создать/сверстать свой первый интернет ресурс? Реально ли создать свой собственный сайт без каких либо технических умений  и навыков в этом деле? В интеренте так много написано на эту тему, но нет ничего структурированного и по существу.

 

Если Вы уже задавались этими вопросами, то эта статья по самостоятельному созданию сайта будет как раз кстати.  help

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

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

Поэтому я предлагаю пошагово вовлечься в процесс, и абсолютно самостоятельно создать свой сайт действительно — ну прямо с полного нуля. И так поехали!

Шаг №1

Подготавливаем макет и расстанавливаем направляющие в программе Photoshop

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

Макет рисуем от начала и до конца. Ширина 1920 пикселей и высота около 5000 пикселей. Если Вы сомневаетесь с расположением тех или иных функциональных блоков, то советую сначала попробовать сделать наброски так сказать «на коленки» с карандашом и бумагой. Вот как вышло примерно у меня.

my blog

Тут бывает зачастую нехватка собственного профессионализма что несомненно парадило стопор. К счастью, я компенсировал все нехватки в вопросах photoshop просмотром курса Алексея Захаренко по web дизайну.

web-disgn

Это далеко не единственные образовательные видео курсы по этому ремеслу от этого автора, есть другие и от Андрея Вернадского (в конце статьи обязательно дам прямую ссылку на полное скачивание).

my-mokup

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

mnogo-sloi

Как Вы успели наверно заметить на рисунке макета присутствуют светло-голубые линии. Это и есть направляющие(в фотошоп берутся вытягиванием(лев. клавиша мыши) инструментом «стрелка перемещения» из линеек по бокам и с верху, линейки вызываются клавишами Ctrl+R). Их надо располагать до рисования макета для основных ориентиров — элементов будущей страницы. Т.к. все эти элементы в основном квадратные и прямоугольные, поэтому и все линии направляющих будут хаотично напоминать разбросанные квадраты и прямоугольники на листке.

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

header

Взял пару фотографий, вырезал и соединил в одну картину.

footer

Далее будем верстать этот макет фотошоп в html страницу. Но прежде чем мы это сделаем сначала проделаем шаг №2 — продумаем макет и нарежем его.

Шаг №2

Продумываем разметку страницы и нарезаем макет.

Тут будет небольшой подготовительный подэтап. Скачайте программу Adobe Dreamweaver

dreamweaver

У меня восьмая версия и скачать её можете от сюда. При открытии и запуске будет такое окно. Тут просто нажмите в средней колонке создать новый:

  • HTML
  • CSS

Они автоматически создаются в программе и прописывать кода пока в них ни какого не надо. Все что Вам надо знать на этом этапе, так это то, что это самые первые файлы для того, чтобы сайт отображался в браузере. Сохраняем их в отдельной папке на своем компьютере. Один будет почти пустым, файл CSS:

а другой с нулёвым — базовым, можно сказать почти пустым кодом. Файл HTML:

Разметка

Для того чтобы приступить к верстке, надо сначала определиться с разметкой, а с ней мы вроде как определились — ширина 1920 пикселей, поэтому нам надо сразу прикинуть на какие блоки будет разбит наш макет.

Вот эти блоки: main — это основной блок, каркас нашего сайта.

div-blok

content-main — основная подложка для отображаемой части, внутри которой располагаются остальные блоки menu, content, sitebar.




Оставить комментарий

Правила комментирования ?