Совет 1: Как сделать макет сайта

Интернет-сайт может быть нужен для самых разных вещей - начиная от создания личной странички в интернете и заканчивая созданием корпоративного сайта с информацией о продуктах и услугах компании. В сети Интернет существует множество компаний, которые готовы за определенную сумму сделать сайт для вас, но также есть и возможности для создания макета сайта совершенно бесплатно.
Вам понадобится
  • - Компьютер
  • - Интернет
Инструкция
1
В первую очередь, если вы новичок в создании сайтов, попробуйте воспользоваться одним из онлайн-конструкторов, которыми вы можете воспользоваться при использовании таких сайтов, как ukoz.ru и narod.ru, с помощью которых вы можете создать простенький сайт. Это позволит вам посмотреть, как лучше всего располагать текст и поможет разобраться, как должен выглядеть сайт для его максимальной привлекательности.
2
После того, как вы освоите создание сайтов на этом уровне, попробуйте свои силы в создании flash-сайтов. Для этого используйте конструктор сайтов с графическим интерфейсом, который расположен по адресу wix.com. Этот бесплатный конструктор обладает гораздо большим функционалом нежели русскоязычные сайты - в считанные минуты он позволяет создать многофункциональный сайт с по-настоящему красивым интерфейсом.
3
Как только вы освоите графические конструкторы, смело переходите к созданию сайтов из готовых шаблонов либо к созданию сайтов своими руками. Для этого используйте Adobe Dreamweaver. Этот инструмент выделяется не только тем, что он может создавать высокофункциональные сайты, но и тем, что к нему очень легко найти как шаблоны, так и обучающие видео.

Совет 2: Как делать макет сайта

Разработка дизайна сайта делается, прежде всего как макет, представляющий собой некий скриншот будущего дизайна. Чтобы наложить в последующем дизайн сайта, нужно прибегать к верстке.
Инструкция
1
Сделать макет сайта можно в различных графических редакторах. Обычно это делается при помощи программного обеспечения Photoshop. Загрузите данный программный пакет на персональный компьютер. Желательно использовать лицензионную копию, так как в пиратских версиях часто возникают проблемы с горячими клавишами или русификатором. Версия программы может быть различной. Подбирайте на свое усмотрение.
2
Вам нужно придумать новый проект. Для этого на бумаге нарисуйте примерный шаблон сайта, который бы вы хотели видеть на сайте. Начинайте думать с тематики сайта. Например, нужно разработать макет дизайна сайта для автомобильной тематики. Как правило, шапка в таком случае состоит из некоторого коллажа автомобилей или одним автомобилем, представленном в разных ракурсах. Посмотрите другие проекты в интернете.
3
Вы можете сделать и несколько вариантов шапки сайта. Это поможет вам при разработке остального дизайна макета. Вы должны продумать полностью весь проект. Не забывайте о том, что все страницы, которые будут дополнительно разрабатываться на сайте с данным шаблоном, должны принимать примерно такие же цветовые гаммы, как и главная страница проекта. Чтобы видеть, как будет выглядеть конечный проект, создайте в макете некоторые примеры заголовков, страниц, добавьте некоторый материал.
4
Макет сайта сделайте в нескольких размерах. Чтобы данный макет выглядел красиво, используйте различные иконки, картинки, необычные композиции. В современное время разрабатывается большое количество разнообразных макетов. Это может быть как обычный пример дизайна автомобильной тематики, представленный в виде коллажа картинок, а может быть и многофункциональный проект умного дома, представленного в виде небольшого домика, дизайн которого меняется при переходе со страницы на страницу.

Совет 3: Как сверстать макет сайта

Верстка макета сайта - довольно занимательный процесс. Для того чтобы начать верстать, нужно освоить базовые навыки HTML и CSS. Для начала лучше прочитать специализированную литературу, а уже потом приступать к работе, но можно заниматься изучением и на практике, постигая азы в деле.
Вам понадобится
  • - браузер;
  • - текстовый редактор, желательно с подсветкой синтаксиса (например: Notepad, psPad);
  • - нарисованный макет сайта (как правило, в программе Photoshop).
Инструкция
1
Запустите все программные средства для создания макета. Разделите рабочую область монитора на две горизонтальные части. В верхнюю поместите графический редактор с загруженным макетом, а в нижнюю тестовый редактор. Это нужно для того, чтобы не отвлекаться на свертывание и развертывание окна при написании кода. Такой подход очень удобен и заметно увеличит КПД.
2
Рассмотрите структуру графического макета. Обратите внимание на то, как лежат слои. Точно также должен верстаться будущий веб-документ, потому что так задумывал дизайнер.
3
Пишите код, загрузив страницу в браузер. Обновляйте страницу и старайтесь сделать так, чтобы изображение макета было идентично будущей странице.
4
Напишите сначала только HTML код. Просто перечислите все блоки на странице. Присвойте каждому идентификатор, а группам блоков свой класс.
5
Приступайте к стилям. Создайте в каталоге со страницей папку и назовите ее СSS. В ней для удобства желательно разместить несколько файлов со стилями.
6
Создайте рядом с папкой CSS папку IMG. Затем вытаскивайте изображения из макета. Лучше это делать в такой последовательности: объединяете все слои, ищите нужный элемент, копируете его, создаете новый графический документ и сохраняете под понятным и «читабельным» именем.
7
После того как все вышеописанные шаги будут завершены, необходимо проверить сверстанную страницу на ошибки (второе название - валидность). Существуют сайты, специально для этого созданные. Не стоит паниковать, если вдруг валидатор покажет много ошибок. Они не критичны, но рекомендуется избегать их.
8
Напоследок проверьте созданную страницу во всех популярных браузерах. Возможно, в каком-то из них сайт будет выглядеть не так, как вы ожидали.
Совет полезен?
Небольшие и однотонные изображения желательно сохранять в формате gif. Те, которые требуют прозрачного фона, - в png. Если изображение большое, то «поиграйтесь» с его качеством и постарайтесь оптимизировать.
Источники:
  • Валидатор CSS
Видео по теме
Полезный совет
Имейте ввиду, что бесплатные конструкторы сайтов зачастую позволяют создать макет сайта только на их хостинге, без возможности скачивания.
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500