Начиная с этого урока, мы будем учиться верстке сайта с нуля в популярном flat стиле. Эта тема очень объемная и мы посвятим ей не один урок. Что означает это на практике?
Представьте себе, что Вы на бирже фриланса получили заказ на верстку одностраничного сайта. Заказчик передал Вам макет в виде файла .psd и попросил сверстать HTML страницу. В работу верстальщика входит еще и нарезка макета на картинки, но мы опустим этот этап, поскольку это вопрос умения пользоваться фотошопом. На данную тему Вы можете самостоятельно поискать обучающие уроки по фотошопу.
Будем исходить из того, что заказчик оказался добрым человеком и предоставил нам вместе с макетом и заранее порезанные картинки. Для создания HTML страницы, нам потребуется: .psd макет, папка с картинками, Photoshop, Notepad++ и браузер.
Пример создания сайта.
Итак. Пришло время создать нечто более сложное, чем мы делали до этого, но используя полученные знания в предыдущих уроках.
В этом уроке курса MM часть 1 мы сделаем 2-страничный сайт. например, о заработке в интернете.
Создание сайта на html. Часть 1
Сначала определимся, как это будет приблизительно выглядеть.
Вверху сайта мы сделаем «шапку сайта». Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое ) сайта.
Идея понятна ? Приступаем.
Теперь напишем между тегами название нашей страницы, например, вот так
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете
Далее разместим теги и , чтобы все содержимое нашего сайта было размещено по центру страницы.
Если вы не забыли, теги и надо разместить между и , т.е. вот так
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете
Для создания каркаса страницы мы будем использовать таблицу, но чуть более хитрую, чем мы проходили в HTML-уроке о таблицах. Нам нужна таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2 ячейки, т.е. вот такая нам нужна таблица :
В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке 3 будет содержимое страницы.
Для того чтобы сделать такую таблицу, напишите вот такой код
Т.е. код нашей страницы будет вот такой :
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете
Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из расчета, что кто-то из посетителей сайта может использовать монитор 800х600 точек, и просматривать более широкий сайт ему будет некомфортно.
Высоту таблицы сделаем 600 пикселей
Т.е. код нашей страницы теперь будет вот такой.
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете
Создание html сайта в блокноте
Чтобы стало видно границы частей сайта — «зальем» область меню и область шапки цветом. Например, вот так
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете
Сохраните файл под именем index.html , для того чтобы его можно было просмотреть, как он будет выглядеть в браузере.
Страница должна выглядеть ТАК. Если у вас не так — ищите ошибку.
Возможно, возник вопрос. Почему назвали файл страницы именно так ?
Есть правило. Главная страница сайта должна называться index.html, или index.htm . ! Или index.php, если страница написана на языке PHP. Запомните это.
Тогда при обращении к сайту, т.е. когда набираешь адрес сайта в браузере, можно не набирать index.html или index.htm, достаточно набрать адрес вашего сайта.
Теперь вставим шапку нашего сайта.
Сохраните картинку шапки у себя на компьютере в той же директории, где находится файл страницы под ее «родным» именем sitelogo.jpg
(т.е. наведите курсор мышки на картинку, нажмите правую кнопку мышки и выберите «Сохранить рисунок как. » )
Где брать такие шапки ? Рисовать самим. О том, как это делать, будет рассказано в книге MM часть 2.
Теперь вставляем картинку шапки в наш сайт. О том, как вставить картинку на сайте, мы разбирали здесь.
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете
Теперь установим точные размеры ячейки таблицы, предназначенной для шапки. Т.к. картинка шапки у нас имеет размер 750х120, то и размер ячейки таблицы сделаем 750 х 120.
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете
Теперь наша страница будет выглядеть ТАК.
Установим ширину меню равной 200 пикселей, для этого добавим width=»200″ в соответствующий тег
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете
Задний план меню «зальем» вот таким фоном, для этого сохраните этот фон с его «родным» именем sv11.jpg в ту же директорию, где находится файл страницы.
А теперь прописываем нужный код
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете
Теперь наша страница будет выглядеть ТАК.
У вас, возможно, возник вопрос, почему браузер не «отрабатывает» ширину меню 200? Меню ведь выглядит шире, чем 200 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места, если начать писать текст в основном разделе страницы. (Или можно задать жестко ширину ячейки, в которой будем писать контент, дописав width=»550″ )
Чтобы подтвердить это, добавим текста на наш сайт.
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете
Сайт будет выглядеть вот ТАК.
Теперь все почти ОК. Почти, потому что налицо небольшие проблемки. Текст отображается ровно посередине (по вертикали), а следовало бы, чтобы текст был расположен вверху ячеек.
Этот параметр мы не проходили в уроке о таблицах, — это параметр выравнивания по вертикали valign=»top».
Значение top означает, что содержимое будет располагаться вверху.
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете
Теперь наша страница будет выглядеть ТАК.
Далее делаем меню. Пока наш сайт будет 2-страничный. Главная страница и страница ссылок.
Пусть пункты меню называются Главная и Ссылки. Для того чтобы «сдвинуть» текст на следующую строчку — используем тег
Два
сдвинут текст на 2 строки и т.д.
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете
Теперь надо сделать текст меню в виде ссылок. Слово Главная залинкуем на страницу index.html, а слово Ссылки на страницу ssilki.html, которую мы создадим чуть позже.
Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете
Теперь наш сайт будет выглядеть ТАК.
Осталось сделать вторую страницу сайта. Для того чтобы упростить работу, сделаем так — сохраним нашу страницу index.html под другим именем ssilki.html, а затем подредактируем файл.
Выбираем в блокноте команду Файл->Сохранить как. , выбираем ту же директорию, где находится файл index.html, пишем имя страницы, под которой мы хотим сохранить файл ssilki.html . жмем ОК.
Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы — index.html и ssilki.html.
Теперь изменим название страницы (между тегами и ), и изменим текст страницы, например, вот так
Ссылки на сайты о заработке в интернете
На этой странице будут размещены ссылки на сайты о заработке в интернете
И сохраним. (Файл -> Сохранить)
Вторая страница сайта будет выглядеть ТАК.
Возможно, у кого-то возник вопрос. А почему столько много пустых строк, нельзя ли уплотнить код ?
Можно. Я сделал пропуски, чтобы было наглядней видно структуру страницы. А так можно разместить весь код вообще в одну строчку
Но не стоит. Иначе будет трудно искать ошибки, если что.
Если есть какие либо вопросы по этому примеру — пишите .
Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете.
Очень многие спрашивают, как разместить сайт в и нтернете , чтобы его можно было видеть не только на своем компьютере, а чтобы его могли видеть и другие люди. Ок. Забегу немного вперед.
Для того, чтобы ваш сайт был доступен из интернет всему миру, надо найти хостинг, который предоставит вам место для вашего сайта. Хостинг бывает бесплатный и платный. Бесплатный хостинг дает вам также и адрес сайта.
Так например, если вы зарегистрировались на хостинге narod.ru, указав при регистрации логин pupkin, то адрес вашего сайта будет http://pupkin.narod.ru Но бесплатные хостинги обладают кучей недостатков и их следует использовать лишь для тренировки. Если же делать серьезный сайт, то надо покупать домен и покупать хостинг, затем связать домен и хостинг (подробнее эти вопросы рассматриваются в книге MoneyMaster-3), тогда ваш сайт будет иметь желаемый вами адрес типа http://gadukino.ru (если домен не занят), и вы получите еще кучу преимуществ по сравнению с бесплатным хостингом, например, возможность использовать скрипты, что позволит вам создавать динамические сайты. После того как вы определились с хостингом и получили место для вашего сайта, надо перебросить файлы сайта на хостинг. Сделать это можно с помощью специальных FTP- программ, например LeapFTP, CuteFTP, или можно сделать с помощью файловых оболочек Windows Commander, Total Commander и др. Вот здесь можете скачать видео-урок, из которого вы узнаете, как сделать переброску файлов на хостинг.
Если вы дошли до этого момента и у вас все получилось, значит, вы прошли своего рода тест-драйв и теперь с уверенностью можете двигаться дальше.
Конечно, сделанный для примера сайт не так крут. И даже в этом сайте пришлось использовать готовые картинки, которые вы скорей всего создавать не умеете.
А вы хотели бы научиться рисовать сами графический дизайн вашего сайта?
Этому вы можете научиться, пройдя обучение по книге MM-2.
Книга MM часть 2.
УЖЕ СЕГОДНЯ вы сможете сделать СВОЙ приличный, эксклюзивный дизайн для вашего сайта , не теряя недели/месяцы на изучение учебников и прочих материалов, не воруя дизайн у других и не используя темплейты.
ДАЖЕ ЕСЛИ ВЫ В ПРИНЦИПЕ НЕ ДИЗАЙНЕР — У ВАС ВСЕ РАВНО ПОЛУЧИТСЯ ПРИЛИЧНЫЙ ДИЗАЙН !
Как сделать красивый сайт, даже если вы пока не дизайнер.
Обучение необходимым навыкам и приемам для создания графических элементов сайта. Разновидности дизайна.
Основы композиции сайта.
Рекоммендуемые сочетания цветов.
Создание макета сайта в Adobe Photoshop.
Эффекты в Adobe Photoshop.
Нарезка сайта в Image Ready.
Верстка кода в DreamWeaver.
Таблицы стилей CSS.
К сожалению, книга 2 не бесплатная, но я уверен, что вы не пожалеете о ее покупке. Наверняка до прочтения книги MM-1 вы и представить не могли, что, изучив ее, вы научитесь создавать простенькие сайты. Скорей всего, вам это казалось чем то очень сложным, «не для вашего ума». Но я вас провел по самой короткой дорожке к результату, держа вас как ребенка за руку.
Точно так же, изучив MM-2, вы научитесь делать графический дизайн сайта, при этом, опять же пройдя по самой короткой дорожке, т.е. СЭКОНОМИВ ВРЕМЯ, не тратя месяцы на изучение различных книг. Потратив несколько вечеров на изучение MM-2, вы будете в силах делать свой дизайн для своих сайтов, значительно обогнав тех, кто решит купить книги в обычном магазине и будет месяцами их изучать.
Цена на книгу MM-2 также включает в себя цену на консультации. Да.
Каждый покупатель получает право на консультации в соответствующих закрытых разделах форума. Наверняка у вас будут появляться вопросы, а спросить некого. Покупая книгу — вы всегда будете иметь возможность задать вопросы и получить на них ответы от меня или от опытных учеников! При таком подходе ваше обучение будет максимально эффективным! При таком подходе вы максимально быстро научитесь делать сайты и зарабатывать с их помощью.
Если у вас совсем уж туго с финансами, то можете заработать необходимые деньги вот здесь. Много там не платят, но для кого-то это будет спасительной соломинкой, чтобы купить книги.
Источник: moneymaster.ru
Верстаем сайт на HTML5 и CSS3. Часть 1
От автора: с тех пор, как в сети стали появляться статьи, демонстрирующие новые свойства HTML5 и CSS3, у меня родилась идея создания верстки сайта без изображений. Взяв на вооружение улучшения HTML5 и CSS3 (по сравнению с предыдущими почтенными спецификациями), не слишком сложно сверстать достойно выглядящий веб сайт, которому не придется полагаться на изображения в качестве элементов разметки.
Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:
Изучите Веб-вёрстку с нуля
Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!
Подходит для новичков без опыта в программировании
Практика на вебинарах с разработчиками из крупных компаний
4 месяца обучения
24 практических работы
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Как обычно, я советую расположить все содержимое сайта в файле index.html еще до того, как вам в голову придет перейти к CSS, так что давайте прямиком к этому и приступим.
Верстка на HTML5 — разработка быстрее, а код гибче
Вдобавок к размещению новых семантических элементов HTML5 еще и сильно укорачивает код.
Fictive Company Blog | a blog showcasing the übercoolness of HTML5 со временем она вам за все отплатит. У вас в действительности может приключиться другая сложность — по привычке вы продолжите добавлять кавычки. Если в своем любимом текстовом редакторе вы пользуетесь великолепным плагином Zen Coding, то он добавляет кавычки автоматически. Единственное решение проблемы – найти и убрать их все после окончания работы над файлом.
В элементе head мы сначала определяем набор символов и добавляем заглавие. Весьма стандартно, без кавычек. Двигаясь дальше, вставляем условный комментарий, внутрь которого загружаем файл JavaScript, который поможет нам работать с Internet Explorer (IE) 8 и более ранними его версиями.
Условный комментарий – это вид HTML-комментария, который Microsoft использует в IE, по сути, для реализации отдельных (или всех) версий своего браузера.
Используемый нами здесь комментарий проверяет, является ли браузер, открывающий страницу, Internet Explorer’ом с номером версии менее 9. Другой комментарий, который мы бы использовали, это: ; он проверил бы, является ли открывающий страницу браузер IE версией ниже или равной 8. По существу, между этими двумя комментариями нет разницы; они оба направлены на один ряд версий IE, так что можете взять любой.
Причина включения скрипта HTML5Shiv Реми Шарпа (Remy Sharp) кроется в отсутствии у Internet Explorer’а поддержки элементов HTML5. Проблема IE в том, что он не применяет никаких стилей CSS к элементам, которые не распознает. Таким образом, чтобы заставить более старые версии IE правильно выполнять элементы HTML5, нам нужно при помощи JavaScript создать незнакомые элементы.
Продвигаясь к тэгу body, размечаем область заголовка своей страницы, где полно элементов HTML5: