Как создать красивый сайт? Пошаговое создание сайта

Скачать материалы:

Скачать 5-ый бонусный видеоурок по CSS Размер: 53.86 MB, скачали: 703 раз.
Скачать исходники к 5 бонусному видеоуроку по CSS Размер: 529.65 kB, скачали: 609 раз. 

Как запустить видеоурок:

1. Разархивировать скачанный файл.
2. Открыть папку index.
3. Запустить файл index.html в браузере.

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

1. Создание или использование готового дизайна сайта.
2. Создание или редактирование HTML-файлов.
3. Создание или редактирование CSS-файлов.
4. Форматирование файлов и проверка на валидность. (Этот шаг может понадобиться не всем)
5. Размещение сайта в интернете. (Этот шаг относится не совсем к созданию сайта, но он важен, и вы в любом случае с ним столкнетесь)

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

1. Создание дизайна сайта

Итак, начинаем с создания дизайна сайта. У вас есть пять способов получить дизайн сайта:

1. Вы рисуете дизайн сайта в фотошопе сами.
2. Вы покупаете дизайн в формате psd у профессионалов. (.psd – формат Adobe Photoshop)
3. Вы скачиваете бесплатный psd-шаблон в интернете. (Искать можно в Google или любом другом поисковике)
4. Вы создаете дизайн в процессе кодирования. (Вы пишите HTML и CSS файлы и одновременно создаете дизайн)
5. Вы скачиваете HTML-шаблон. Такие шаблоны включают в себя и CSS файлы. (По сути, скачиваете шаблон — и сайт готов. Остается лишь изменить ссылки и отредактировать что-то под себя)

Как видите, второй и третий варианты связаны с созданием дизайна в фотошопе. В будущем этому будет посвящен отдельный видеокурс. Дизайн рисовать именно в фотошопе не обязательно, но, как правило, используется эта программа.  Пятый вариант вы можете поискать в Google, как и третий, но я вам покажу один сайт. Он называется unishablon.com. Слева находятся категории шаблонов. Выберем, например, «Компьютеры».  Далее можно увеличить шаблон, а также скачать его, нажав на кнопку «Скачать».  Вы скачиваете rar-архив, затем разархивируете его. В нем, как и в нашей папке site, находятся html-и css-файлы. Нажав на html-файл главной страницы, вы увидите главную страницу. Все, что вам нужно будет сделать – это отредактировать ее под себя, то есть, под тот сайт, который вы хотите видеть.

2. Создание HTML-файлов

Переходим к следующему шагу – «Создание html-файлов». Здесь есть три варианта. Вы выбираете свой вариант в зависимости от того, какой вариант вы выбрали на первом шаге.

1. Вы создаете html-файл под свой psd-шаблон. (1-3 варианты предыдущего шага, то есть там, где мы работали с psd-файлом)
2. Вы создаете html-файл под свой будущий дизайн. То есть намечаете каркас: где будет шапка, где — контент и т.д. (4 вариант предыдущего шага)
3. Вы редактируете html-файлы под себя. Вы открываете html-шаблон и изменяете его по вашему усмотрению. (5 вариант предыдущего шага)

В принципе, все три варианта одинаковы. Главное запомнить крупный шаг – «Создание html-файлов».

Полезные сайты для создания html-файлов

Переходим к полезным сайтам. Первый сайт, который вам понадобится – это lipsum.com. Чтобы выбрать русский язык, вам нужно нажать на слово «Русский» с русским флагом. Этот сайт вам пригодится в том случае, если вы, например, создали html-каркас сайта и вам нужен текст для наполнения. Чтобы не писать его самому и не ставить кучу одинаковых букв, можно зайти на этот сервис и скопировать столько абзацев, сколько вам нужно. Внизу можно указать количество абзацев, которые нужно сгенерировать.

Следующий сайт (caniuse.com) поможет вам в проверке, какие свойства и функции  поддерживает той или иной браузер. Можете сразу перейти в таблицы – там увидите множество css-свойств, а можете выбрать css-свойства из списка. Например, «Text-shadow» (тень для текста). На открывшейся странице вы видите, какой фон что означает. Зеленый – поддерживает, розовый – не поддерживает, бежевый – поддерживает частично, сиреневый – поддержка неизвестна. Внизу мы видим таблицу с данным свойством. Из нее становится понятно, что IE версий 6-9 не поддерживают его, Safari 3.2 поддерживает частично, как и Operamini 5.0-6.0, а все остальные браузеры поддерживают. Увидеть все таблицы со свойствами вы можете, нажав на ссылку  «Showalltables».

Третий сайт, который вам понадобится –  htmlbook.ru. Это русский справочник по HTML и CSS. Здесь вы можете выбрать любой тег, который вам понадобится, либо css-свойство, о котором вы хотите узнать. Например, тег <audio>. Слева вы видите атрибуты для данного тега, сверху – поддержку браузерами, спецификацию, ниже – список поддерживаемых браузером кодеков (например, Opera не поддерживает mp3-файлы, как и Firefox 3.6), атрибуты, необходимость закрывающего тега, пример использования и результат примера в браузере Opera. Очень полезный сайт. Советую.

Следующий сайт – html5please.us. Он вам поможет в HTML5 и CSS3. Это справочник по HTML5. Вы можете что-то искать, можете воспользоваться метками для поиска. Внизу выдаются найденные теги.  Здесь написаны очень хорошие советы, правда, на английском языке. Поэтому вам придется либо пользоваться переводчиком, либо, если вы знаете английский язык, переводить самостоятельно. Сайт очень полезен. Если вы решите разрабатывать свой сайт на HTML5, то обязательно примите его к сведению.

Последний сервис, который я вам посоветую – csstemplater.com. Он генерирует css- и html-шаблон. Вы можете писать код вручную, а можете сразу сгенерировать макет, а потом добавлять в него то, что хотите. Итак, первым делом вы выбираете doctype.  Например, HTML 5. Потом выбираете CSS-сброс. Вы можете выбрать {margin:0; padding:0;} ( но я вам этот вариант не советую), а можете выбрать сброс стилей от EricMeyer, который мы использовали в курсе по CSS, или сброс стилей от Yahoo!. После выбора сброса стилей, вы выбираете ширину макета: фиксированную или резиновую. Например, фиксированную, шириной в 800 пикселей. Шапка у нас будет высотой в 120 пикселей, два сайдбара (слева и справа). В предпросмотре мы уже видим созданный макет. Уменьшим сайдбары на 50 пикселей и создадим подвал высотой в 80 пикселей. Вы можете добавить дополнительные опции: либо прижать футер к низу браузера, либо эмулировать одинаковую высоту колонок, либо ни то, ни другое.  Выберем второе. Жмем «получить ссылку». На экране появляется сгенерированный макет. Вы можете скачать zip-архив или перейти на главную страницу сервиса и создать новый макет.

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

3. Создание CSS-файлов

Переходим к следующему шагу. Шаг 3 – «Создание CSS-файлов». Здесь есть два варианта:

1. Вы создаете css-файлы под свой psd-шаблон. Используете этот вариант, если вы работаете с psd-шаблонами. Например, вы видите, что на шаблоне меню имеет красный фон, значит и в CSS вы делаете меню с красным фоном. Так строите свой сайт в соответствии с макетом, который вам дан. (1-3)
2. Вы создаете/редактируете css-файлы под себя. Используете этот вариант, если вы создаете дизайн вместе с кодированием, или если вы скачали готовый шаблон для  сайта. (4-5)

В обоих случаях вам пригодятся те сайты, которые я сейчас покажу.

Первый сайт – памятка записи селекторов в CSS.  Это уникальная авторская разработка (моя памятка записи селекторов, которой нет нигде в интернете, кроме как на моем сайте). Скачать ее можно по адресу http://info-line.net/downloads/csscurs/memo-record-selectors-in-CSS.png . А посмотреть видеоурок по работе с ней вы можете в первом бонусном видеоуроке по CSS. Все ссылки я прикладываю в дополнительных материалах в файле Ссылки.txt.

После того, как вы создали html-файлы и начали работу над файлами css, скорее всего вы начнете с создания фона. С ним вам поможет сайт patterns.ava7.com. Здесь вы можете подобрать тот фон, который хотите, выбрать форму фона и нажать «download», если вам понравился фон и вы хотите его скачать.

После создания фона, возможно, вы захотите украсить сайт. Вам могут понадобиться иконки. В этом вам поможет сайт findicons.com. Вы вводите на английском языке какой-нибудь запрос, например «people», и на странице высвечиваются иконки по данному запросу. Вы можете выбрать, сколько иконок отображать на странице, их размер и цвет. Затем нажимаете на понравившуюся иконку и скачиваете в любом доступном формате.

Как вы знаете, CSS отвечает за внешний вид сайта. Чтобы вы еще раз убедились в этом, я хочу показать вам сайт csszengarden.com.  Чтобы открыть сайт на русском языке, вы жмете «translations» и выбираете «Russian». Что это за сайт – написано слева: «Демонстрация того, что может быть достигнуто визуально посредством дизайна на основе CSS. Выберите любой stylesheet из списка, чтобы загрузить его в эту страницу».  Вы можете скачать пример файла с html, и всплывающая подсказка говорит вам, оставить его неизменным. А вот css-файл вам следует модифицировать. Тогда вы сможете поучаствовать в данном проекте. Вы можете посмотреть на дизайны, которые уже созданы, по соответствующей ссылке. Они основаны на одном и том же html-коде, меняется только CSS. Как вы видите, очень много дизайнов создано только с изменением CSS и изображений. Этот сайт показывает вам всю мощь CSS.

Итак, после создания html-файлов вы создаете css-файлы – это то, что нужно запомнить из текущего шага. Создавать вы их будете или редактировать – это уже не важно. Ну и на этом этапе вам помогут те фишки и сайты, которые я показал.

4. Оптимизация файлов

Шаг четвертый – «Форматирование файлов и проверка на валидность». Возможно, здесь стоило даже употребить выражение «оптимизация файлов».

Оптимизация (форматирование) файлов.

Вы форматируете html-и css-файлы. То есть, вы их оптимизируете, сокращаете и делаете удобными для себя. Для этого существует три сервиса:

• www.cssoptimiser.com . Этот сервис посвящен оптимизации CSS. Давайте загрузим файл, например, st.css и жмем «Optimize!».  Мы видим, что наш файл оптимизировался в какие-то непонятные строчки кода, но зато он сохранил 20% места.  Если раньше файл весил 3.5Кб, то теперь он весит 2.8Кб. Вернемся в оптимайзер и выберем другой css-файл, например, style.css. Жмем «Optimize!». Этот файл сократился почти на 50%. Вы видите силу оптимизации. Если вам нужно будет уменьшить место, занимаемое сайтом, то можете воспользоваться этим сервисом. Чтобы потом вы могли отредактировать текст, как нормальный человек, я советую сохранить файл на своем компьютере в нормальном состоянии прежде, чем его оптимизировать.  Тогда, если вам потребуется что-либо отредактировать,  то вы будете это делать на своем компьютере, а на сайт загрузите уже оптимизированный файл. На сервисе можно также вставить css-код файла, а вверху указать ссылку. Если вы загрузите тот же файл, но поставите галочку «Do not remove line breaks» и нажмете кнопку «Optimize!», то у вас не будут удалены линии. Будут удалены только лишние пробелы.  Таким образом мы тоже сократили довольно много информации – целых 42%, и наш код читается довольно легко.
• www.cssdrive.com . Еще один сервис для оптимизации. Он тоже уменьшает css-код файла. Также можно выбрать, удалять или не удалять комментарии, посмотреть информацию о режимах оптимизации, выбрать «Advanced mode» и, если хорошо знаете английский язык, то указать те настройки, которые вам нужны. Этот сервис более сложный, но вам придется вставлять css-код вручную, после чего жать «Compress-it!».
• www.processor.com. Этот сервис поможет вам в форматировании css-стилей. Помните ту абру-кадабру, которая получилась в первом сервисе? Мы ее сейчас вставим сюда и нажмем «procss».  Наша таблица стилей стала выглядеть красиво. Она отсортирована по важности (приоритетности),  а потом — по алфавиту. Чтобы скачать полученный код, вы жмете кнопку «download». Очень советую пользоваться этим сервисом.

Проверка файлов на валидность.

После оптимизации вы проверяете полученные файлы на валидность. После проверки на валидность, сайт можно считать законченным. Вы его уже полностью создали, и он у вас валиден (невалиден, если вы решили не исправлять ошибки).  Теперь вам следует разместить сайт в интернете.

5. Размещение сайта в интернете

Переходим к шагу 5 – «Размещение сайта в интернете». Для того, чтобы разместить сайт в интернете, вам нужно сначала сделать два простых шага:

1. Вы заходите на сайт info-line.net
2. Вы ищите видеокурс по размещению сайта в интернете и начинаете его изучать. После изучения видеокурса на вашем сайте будет красоваться постфикс.

Спасибо за внимание, до встречи в следующем видеокурсе по размещению сайта в интернете! Подписывайтесь на RSS, чтобы не пропустить его!

Приступить к изучению видеокурса по размещению сайта немедленно!