Создание сайта своими руками. Построение шаблона

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

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

Наиболее перспективные движки с быстрым обновлением шаблонов это wordpress, Joomla, и конструкторы A5, Wix.

Для создания сайта следует знать HTML и Adobe Photoshop. Чтобы выполнить более сложный дизайн, который получит максимальные шансы выйти в ТОП-10 поисковой системы, придется обратиться к дизайнерам, владеющим более сложными языками программирования.

Верстка  — пропись основных тегов HTML и для организации веб страниц, корректного расположения контента.

Сайт PHP – раскладка позволяющая преобразовать из статической страницы в динамический вариант.

Публикация сайта в глобальной информационной сети – описание этапов публикации сайта. Для этого используется домен, то есть имя (примеры: ru, com, org) и хостинг  — общий вид сайта.     

Создание простого сайта на HTML

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

 Перед вами находится текст простейшей страницы выполненной при помощи HTML.  Сохраните себе ссылку под именем  index.html, как первый пример для использования. Обычно таким именем отображается главная страница сайта.   

Этапы создания

  1. Создание шаблона сайта, определяющего его дизайн.
  2. Верстка сайта. Наполнение его контентом.
  3. Внедрение PHP. Для динамики.

В статье пока рассмотрим только этап создания шаблона.

Построение шаблона.

Для этого, вам нужно скачать и воспользоваться мощным графическим редактором Adobe Photoshop или CorelDRAW. Как правило, сайты выставляют пробные версии на 30 дней, позже составители по истечению срока предлагают купить у них программу, но можно скачать через uTorrent версию без пробного периода.

После установки графического редактора. Создаем в программе Adobe Photoshop документ с именем My Site. Дальше следует выбрать расширение 1000*1000, что гарантирующее правильность отображения страницы для любого юзера, параметры по вертикали можно потом увеличить. Выбираем расширение на 72 пикселя/дюйм и цвет типа RGB. Эти параметры нужно выставить обязательно, так как от них зависит правильное отображение страницы сайта.

Следом происходит коррекция фона, который начинающим авторам можно выставить при помощи цветовой палитры.

В меню выберите пункт Просмотр – «Направляющие» дальше активируется изображение направлений и линеек.

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

 Будущему владельцу сайта нужно назвать свое творение и, возможно, указать контакты. Для этого выбирается инструмент «Текст», при помощи которого пишем название посредине контакты справа, логотип слева в шапке макета. Проводятся фрагменты направления, позволяющие определить рамки по ширине сайта.

Опция «Формы» нужна создателю для выбора прямоугольника с закругленными краями с радиусом в 8 точек. При его помощи обозначается место под изображение в шапке. Сервис загрузки изображений поищите в интернете.

Снова выберите «Текст» и шрифт Georgia. Задача: создать навигационное меню, и заглавие первой страницы. В «Текст» выберите «Arial», добавьте блочный текст, которым вы будете работать.

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

При перемещении правой границы блока вставляется изображение в тексте (по правой стороне). В опции «Формы» выбирается «прямая», и проводится граница под текстом.

При помощи кнопки «Текст» вставляется уникальный текст. Дальше в меню файл выбираете «Сохранить как»,  и сохраняете файл под требуемым именем.      

Если у вас нет времени, то можно заказать подобный шаблон у опытных специалистов нашей Веб-студии.

Темы: Обо всем

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



Новые посты бесплатно через RSS-ленту или E-mail оповещения:

E-mail:


Похожие записи:


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

  • Имя (обязательно)
  • E-mail (не публикуется) (обязательно)
  • Блог