>> Что такое верстка сайта
Что такое верстка сайта и зачем она нужна?
Верстка сайта
на сегодняшний день является неотъемлевой частью при создании всевозможных сайтов. Этот факт объясняется тем, что мы все чаще и чаще слышим слово верстка сайта в интернете. Появилось данное понятие буквально недавно. Все началось с того, как появились программы с помощью которых, можно делать всевозможные фишки для сайтов, которые прикрашали сайт из нутри. Первой из этих программ, появилась программа Adobe Photoshop
данную программу для своих нужд, а именно оформлять свой сайт. Они начали создавать кнопки для сайта, редактировать изображения, создавать красивые картинки и т.д..., после чего веб-дизайнеры вставляли свое творение себе на сайт.
Но, недавно веб-дизайнеры задумались над тем, а почему бы им не создать красивый шаблон
, который будет радовать глаз любого посетителя заглянувший на сайт и увидев там красивый дизайн сайта. Этот факт безпорно придасть магнетизма любому сайту, что даст возможность заманить к себе, возможно постоянных посетителей, которые станут Вашими поклониками. Ведь этого добивается каждый веб-дизайнер сайтов. Каждый хочет, чтобы его сайт был краше и лучше по всем аспектам и чтобы на его сайт приходили большое количество людей. Поэтому дизайн сайта сегодня приобретает второе дыхание. Для этого, чтобы создать красивый дизайн для сайта и придумали верстку сайта, которая положет начало красивым и интересным сайтам.
Но, что такое верстка сайта
? Это комплекс мер и действий, котрые необходимы, чтобы нарисовать и сверстать в HTML красиво оформленный дизайн для сайта. Для рисования дизайна к сайту, верстальщики используют программу Фотошоп
. Они начинают выдумывать и представлять, каким должен быть их сайт и как он должен выглядеть в интернете. По сути верстка сайта-это конкретный шаблон, который будет основным и постоянным для всего сайта.
Те люди, которые умеют хорошо пользоваться программой Photoshop , могут сверстать сайт за пару часов, после чего у них будет готовый вид, который по их мнению должен присутствовать на сайте.
Но, нарисовать шаблон для сайта
-это еще полдела. Ведь основная работа заключается в том, как применить нарисованный дизайн на сайте. Ведь сверстаный шаблон для сайта, так просто не применишь на сайт. Для этого существуют языки программирования, такие как HTML, CSS и так далее. Этот процесс является самым сложным и трудоемким. Именно от того, на сколько веб-дизайнер знает хорошо языки программирования сайта, на столько у него будет идеален его сверстанный в Фотошопе дизайн.
При верстке готового шаблона на сайте, нужно учитывать много моментов, такие как; отображение сайта в различных браузерах , его валидность, грамотной подачей того, что верстальщик хочет дать посетителю сайта, и так далее... Запомните, сверстать сайт-это еще полдела, основная работа заключается в том, чтобы данный шаблон правильно сверстать в HTML код
. Только от того, на сколько грамотно Вы сверстаете свой сайт в код, на столько он будет являтся качеством не только Вашего умения верстать сайты, но и правильности без ошибок применять данный шаблон у себя на сайте. От качество Вашего сверстанного сайта на прямую будет зависеть внимание к данному сайту со стороны посетителей, которые будут судить Ваш сайт по своим критериям.
Вывод:
если Вы в совершенстве владеете навыками верстки сайта в Фотошопе и при этом можете без ошибок данный дизайн сверстать в HTML код, то беритесь за это дело и создавайте красивые сайты, но если Вы плохо владеете навыками работы с программами, с помощь которых можно сверстать сайт и при этом плохо знаете языки HTML и CSS, то мой совет пока не выставляйте свое творение на всеобщее обозрение в интерене, а лучше закажите свой придуманный дизайн профессиональным верстальщикам сайтов.
Не красивые сайты никому не нужны, а красивые являються магнитом на хороший трафик со стороны посетителей.
На этом все, надеюсь Вы поняли, что такое верстка сайта
и зачем она нужна.
Видео на тему:
Верстка сайта.
Вёрстка страницы
представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.
Как создать структуру страницы с помощью блоков (блочная вёрстка)
1. Как разбить макет страницы на секции
Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье .
Стандартная веб-страница содержит следующие секции:
Рис. 1. Основные секции страницы
Мы не будем использовать элемент , так как он поддерживается не всеми браузерами.
Элементы , и
— блочные, поэтому они будут занимать всю ширину их блока-контейнера — элемента . Страница с такой разметкой будет хорошо смотреться на небольших экранах , но на устройствах с большим разрешением текст таких страниц будет неудобно читать. Поэтому необходимо добавить тег-контейнер для контента — содержимого каждой секции:
и задать для него максимальную ширину, внутренние отступы, которые будут отделять контент от краёв экрана устройств с небольшим разрешением, а также внешние отступы , позволяющие выровнять контейнер по середине родительского блока:
Container {
width: 100%;
max-width: 1024px; /*максимальная ширина может иметь другое значение*/
padding: 0 15px;
margin: 0 auto;
}
Таким образом мы получили каркас для нашей страницы (высота секций в данном случае виртуальная, так как без содержимого секции имеют нулевую высоту).
2. Разметка шапки сайта и позиционирование её элементов
Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега логотип сайта и навигационные ссылки:
Logo {
float: left;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block; /*один из способов разместить элементы в строку*/
}
Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке .
Обратите внимание, что после того, как мы применили обтекание, шапка исчезла. Это произошло потому, что плавающие элементы (для которых задано свойство float) изымаются из нормального потока и родительский контейнер больше не видит их высоту, поэтому и элемент и элемент внутри него с классом.container схлопнулись. Чтобы исправить эту ситуацию, воспользуемся очисткой потока для элемента с классом.container:
Container:after {
content: "";
display: table;
clear: both;
}
Также добавим ему вертикальные отступы , отделяющие элементы внутри него от краёв шапки. В результате стили будут иметь следующие вид:
Container {
width: 100%;
max-width: 1024px;
padding: 15px;
margin: 0 auto;
}
Рассмотрим ситуацию, когда в качестве логотипа выступает картинка. Она может быть добавлена непосредственно внутрь тега или же в качестве фонового изображения . Картинка будет иметь свою высоту, которая может сильно отличаться от высоты меню навигации, поэтому перед нами встанет проблема вертикального выравнивания элементов шапки.
В нашем примере высота логотипа равна 38px , поэтому чтобы выровнять ссылки меню по высоте по середине шапки, нужно задать для них соответствующую высоту строки:
Nav a {
text-decoration: none;
line-height: 38px;
}
Рис. 7. Выравнивание ссылок меню шапки
3. Создание сетки для основной части страницы
Основная часть страницы чаще всего представляет собой сетку из блоков разной ширины. Позиционирование таких блоков осуществляется также с помощью свойства float . Каждую строку блоков обернём дополнительным блоком с классом.row:
Для элемента с классом.row также применим очистку потока:
Container:after, .row:after {
content: "";
display: table;
clear: both;
}
Чтобы отделить ряды друг от друга, можно добавить нижний внешний отступ:
Row {
margin-bottom: 15px;
}
Высота блоков сетки определяется высотой их содержимого, поэтому она может быть разная:
Высоту блоков можно зафиксировать, указав её явно, например, .row div {height: 100px} . Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.
Если необходимо задать фоновый цвет для блоков ряда, то это можно сделать следующим образом: для элемента с классом.row добавим новый класс , который позволит стилизовать только этот ряд (получится.row row-one), укажем для него фоновый цвет меньшего по высоте блока, а для высокого блока зададим его собственный цвет , то есть таким образом мы сделаем фоновую подложку.
Lorem ipsum dolor sit amet.
Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.
.row-one {
background: lightblue;
}
.col-2-3 {
width: 66.6666666667%;
float: left;
background: seashell;
}
Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:
4. Разметка подвала страницы
Подвал страницы, или нижний колонтитул, обычно содержит информацию о копирайте, дополнительные ссылки и т.п. Вся эта информация также размещается в столбцах, которые могут быть одинаковой или разной ширины.
HTML-верстальщик – это специалист, выполняющий вёрстку web-страниц. Другими словами, он создаёт HTML-шаблон для web-сайта с использованием знаний HTML-кода и всех особенностей стиля и графического оформления .
HTML-верстальщик
- это специалист, выполняющий вёрстку web-страниц. Другими словами, он создаёт HTML-шаблон для web-сайта с использованием знаний HTML-кода и всех особенностей стиля и графического оформления.
Профессия подходит тем, кого интересует информатика (см.
выбор профессии по интересу к школьным предметам).
HTML - аббревиатура от Hyper Text Markup Language (англ.) - это язык разметки гипертекста, принятый в World Wide Web для создания и публикации web-страниц. Соответственно, HTML-верстальщик - это специалист, выполняющий вёрстку web-страниц. Другими словами, он создаёт HTML-шаблон для web-сайта с использованием знаний HTML-кода и всех особенностей стиля и графического оформления. Созданный код должен одинаково отображаться во всех браузерах («кросс-браузерность») с учетом разных разрешений монитора и количества цветов.
Особенности профессии
Функциональные обязанности HTML-верстальщика заключаются в реализации концепции и идеи сайта, разработанных веб-дизайнером, в виде HTML-кода. Процесс создания HTML-шаблона состоит из нескольких этапов:
анализ графического дизайна сайта
подборка модели шаблона
нарезка графических спрайтов
сборка HTML-шаблона
В настоящее время существует большое количество компьютерных программ , которые автоматизируют труд верстальщика, различные текстовые редакторы с подсветкой кода, визуальные редакторы (Notepad++, Adobe Dreamweaver ), front-end фреймворки (наборы фрагментов кода и библиотек классов для ускоренной разработки макета сайта путем прототипирования — ZurbFoundation-4 и т.п.). Они позволяют писать большие фрагменты кода в наглядном режиме, то есть результат каждого этапа работы можно наблюдать в отдельном окне. Но профессиональный HTML-верстальщик этими программами не пользуется. Он должен уметь использовать кодировку HTML вручную, без помощи визуальных редакторов, чтобы обеспечить максимальную корректность кода в минимальном весе.
HTML-верстальщик должен знать каскадные стилевые таблицы CSS , владеть JavaScript и базовыми навыками web-программирования на языках PHP , Perl или Java, а также основными графическими редакторами Photoshop, Fireworks, Gimp. Опытный верстальщик может создать небольшой сайт, используя текстовый редактор Microsoft Word c минимальным количеством средств и инструментов.
Успешная работа HTML-верстальщика строится на трех китах: качественный код, принцип юзабилити, адаптивный дизайн . Качественный код
должен быть хорошо структурирован и иметь правильное семантическое оформление в соответствии с правилами SEO-оптимизации. Принцип юзабилити
подразумевает простоту в разработке интерфейса. Навигация по сайту не должна заставлять посетителей напряженно думать. Простота интерфейса - залог успеха проекта. Адаптивный дизайн
сделает сайт дружелюбным к мобильным устройствам.
При работе над крупными проектами работа HTML-верстальщика сводится к созданию только лишь макета сайта. Различные модули и элементы в него устанавливают программисты узкой специализации. Но на небольших проектах HTML-верстальщику приходится выполнять работу с кодом от начала до конца.
Плюсы и минусы профессии
возможность самостоятельного освоения профессии
высокая востребованность на рынке труда
необходимость постоянного совершенствования и обновления знаний
возможность работать удаленно
нечеткие границы между работой веб-дизайнера, веб-программиста и баннер-мейкера дают возможность работать в смежных областях.
присутствует доля рутинности и однообразия
необходимость долговременного сидения за компьютером
Место работы
Интернет-компании, фирмы по разработке сайтов, дизайн-студии, организации со своими интернет-проектами, фрилансерская работа
Важные качества
внимательность, сосредоточенность
способность концентрироваться
терпение в выявлении собственных ошибок
усидчивость
аккуратность
желание работать на конечный результат.
Обучение на HTML-верстальщика
Как правило, HTML-верстальщики осваивают профессию самостоятельно. Но есть и специализированные курсы. Для устройства на работу специального образования не требуется. Основное требование работодателей: опыт работы, подкрепленный портфолио. Необходимо знать: HTML (вручную), CSS 1, CSS 2, JavaScript, Dreamweaver, Front Pages, Photoshop, PHP, MySQL, XML\XSL.
(очно, Москва). Международное учебное заведение , специализирующееся на компьютерном образовании. Работает с 1999 года. 42 филиала в 16 странах мира. Крупнейший авторизованный учебный центр Microsoft, Cisco, Autodesk. Студенты получают международные сертификаты и международный диплом. Главная цель - трудоустройство каждого выпускника.
Оплата труда
Зарплата на 02.04.2019 Россия
15000—70000 ₽
Москва
35000—100000 ₽
Оплата труда зависит от региона проживания HTML-верстальщика, специфики учреждения, в котором он работает и масштаба предприятия. Заработная плата может составлять от 40 до 70 тысяч рублей в месяц на начальном этапе. В Москве и крупных городах опытный HTML-верстальщик зарабатывает около 100 тысяч рублей в месяц.
Ступеньки карьеры и перспективы
Начинающий HTML-верстальщик с приобретением опыта и стремлении к повышению своего профессионального уровня в будущем может претендовать на должности веб-дизайнера, веб-программиста, баннер-мейкера.
Этапы верстки сайта, виды сайтов и методы вёрстки
Web-сайт представляет собой набор логически связанных html-документов. Логика, по которой эти документы связаны, называется структурой сайта или картой сайта.
Перед началом верстки графический файл дизайна детально анализируется, после чего разрезается на части, на основе которых верстается HTML-документ, который представляет собой структурированный набор HTML-тегов. Это происходит в несколько этапов:
формируется каскадная таблица стилей с описанием цветовой гаммы сайта и расположением элементов на странице
формируются меню, кнопки формы и все элементы управления сайтом
разрабатывается пользовательский интерфейс.
В результате этих действий получается HTML-шаблон сайта. Если мы имеем дело со статическим сайтом, на этом этапе происходит наполнение шаблона контентом, затем сайт закачивается на хостинг.
Если сайт динамический, то необходимо произвести интеграцию HTML-шаблона с системой управления содержимым сайта. На этом этапе требуются знания архитектуры шаблона CMS и серверного языка программирования.
По макету вёрстки все сайты подразделяются на 3 группы:
жёстко фиксированные (Rigid fixed)
адаптивные резиновые (Adaptable fluid)
расширяемые эластичные (Expandable elastic)
Фиксированный тип макета — дизайн, в котором ширина столбца или рисунка заданы в пикселях и оговорены точно.
Резиновый тип макета — дизайн, в котором ширина столбца или рисунка задана в процентах от текущего разрешения экрана.
У каждого вида дизайна есть свои преимущества и недостатки. В каждом конкретном случае выбор дизайна зависит от решаемой задачи. Возможен и смешанный дизайн: некоторые столбцы табличного дизайна можно задать в процентах, другие в - пикселях.
Методы вёрстки:
Табличная вёрстка
раньше была основным методом вёрстки; в настоящее время применяется для создания рамок, выравнивания элементов, задания модульных сеток , создания цветного фона.
Вёрстка с помощью слоёв.
Слои — это структурные элементы , которые размещаются на web-странице путем наложения их друг на друга с точностью до пикселя. Параметры слоя могут динамически изменяться скриптами, что дает возможность создавать на странице разные эффекты: выпадающее меню, игры, разворачивающиеся баннеры, плавающие окна и т.п.
Блочная вёрстка
осуществляется при помощи блоков тег (
) и описывающих их таблиц стилей (CSS), реализуя концепцию семантичной вёрстки
По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую). К примеру, курсивный текст можно получить как с помощью тега , так и с помощью тега . В первом случае на текст производится логическое ударение, которое обычно отображается курсивом, а во втором - курсив задаётся явным образом . То есть, первый случай ориентирован на логическое предназначение, второй - на внешний вид (презентацию), а во втором — на логическое предназначение. Логическая разметка обладает существенным преимуществом — независимостью от используемого типа и дизайна web-страниц. В данном случае можно использовать один и тот же вариант верстки для экрана, печати и мобильных устройств , при этом регулируя внешний вид с помощью отдельных файлов стилей.
Часто возникает вопрос, что такое верстка? Простым языком , верстка - это расположение составных элементов (текста, заголовков, изображений, таблиц) на странице документа. Верстка бывает следующих видов:
Книжная
Газетно-журнальная
Верстка веб-документов
Описание первых двух опустим и перейдем сразу к верстке веб-страниц. Чтобы лучше понять, что это такое рассмотрим процесс создания сайта. Сначала создают дизайн-макет: рисуют каждую страницу и все его элементы. В итоге получают изображение сайта, но это всего лишь «картинка».
Далее, полученный макет нужно отобразить в браузере, да так, чтобы все элементы «ожили» и откликались на действия пользователей. На этом этапе и вступает в работу верстальщик. Используя язык разметки html , он создает документы, которые понимает браузер и отображает их привычными всем веб-страницами.
Методы верстки
При верстке веб-страниц можно выделить два основных метода:
Табличная верстка
Блочная верстка
Табличная верстка
раньше была основной. Преимущество верстки с помощью таблиц заключается в ее простом исполнении и практически одинаковом отображении в разных браузерах . Недостатки - сложная и объемная структура, которая в разы увеличивает количество кода (по сравнению с блочной). Чтобы изменить табличную верстку нужно затратить большое количество времени и усилий, долго вникать в уже существующую структуру.
На сегодняшний день продолжают верстать сайты табличной версткой, но профессионалы уже давно перешли на более гибкую - блочную. Табличную верстку рекомендуют использовать только для отображения таблиц.
Блочная верстка
является основной в среде веб-разработчиков. В блочной верстке каркас документа состоит из тегов
. Главным ее преимуществом является концепция
семантической верстки , т. е. разделение содержимого и оформления.
Небольшой пример кода:
Табличная верстка
Код блочной верстки
Результат получается одинаковый:
Даже для самого простого макета уже видна разница в коде, а с увеличением элементов разница будет расти в геометрической прогрессии.
Программы для верстки
Чтобы сверстать простую веб-страницу можно обойтись и обычным блокнотом. Для более сложных проектов не обойтись без специальных html-редакторов. Они подсвечивают код, что значительно упрощает процесс верстки. В профессиональной среде используют следующие программы:
Notepad++
Macromedia Dreamweaver
Microsoft FrontPage
CoffeeCup HTML Editor
NetBeans
Редакторы html-страниц разделяют на обычные и визуальные. Используя визуальный редактор , сверстать страницу сможет даже неопытный пользователь . Но стоит понимать, что визуальный редактор дописывает много лишнего кода (мусора) и лишает верстальщика возможности использовать гибкость языка html на 100%.
Какие проблемы возникают при верстке?
Основная проблема при верстке сайтов - не одинаковое отображение одного и того же документа в разных браузерах. Сверстав качественно страницу для Firefox, она может отображаться немного по-другому в Opera, и полностью разъехаться в Internet Explorer.
Причина в том, что каждый браузер разрабатывают разные компании и используют различные технологии и правила. Попытки прийти к единому стандарту уже делаются, но до конечного результата еще далеко.
Часто верстке не уделяют должного внимания. С таким подходом можно загубить даже самый креативный дизайн и сложный функционал сайта. Если посетители вашего личного блога это вам простят, то разваливающаяся верстка корпоративного сайта или магазина серьезно отразится на имидже компании. Самое верное решение - доверить работу профессионалам.
Доброго времени суток, уважаемые читатели. Верстка сайта – интересное дело, как только начинаешь в ней разбираться. Проблема заключается лишь в том, чтобы найти по-настоящему хорошие материалы для обучения. На первых порах код может показаться нелепым набором символов, но стоит овладеть тайными знаниями, как они превращаются в довольно простой и понятный алгоритм, а также начинают приносить доход и моральное удовлетворение.
Сегодня поговорим про то, что такое html блочная верстка и css. Магический язык программирования станет менее страшен. Надеюсь, что к концу статьи вы научитесь уже видеть кое-какие элементы кода и сможете принять для себя твердое решение стоит ли вам во все это ввязываться.
Почему вам повезло больше, чем верстальщикам, начавшим работу уже давно
Существует два типа верстки: блочная и табличная. На заре времен верстка строилась в виде таблиц. Сперва создавалась всего одна, большая.
В нее встраивался head – голова, основная часть. Та, в которую входит логотип, какая-то основная информация типа телефонов и так далее.
Основная контентная часть. Текст статьи, вводное приветствие или что-то иное.
Внизу размещается футер. Его используют и сейчас. Сюда, как правило, вставляют небольшие ссылочки на контакты, вакансии, информацию «О нас». Могут прилепить даты существования ресурса или просто магическое слово «copyright», которым разработчики надеются указать или защитить свое авторское право. Пользы от него как от подковы, висящей над дверью, может отпугнуть только вурдалаков, хотя они, как правило, в футер и не заглядывают.
Чуть позже появились новые стандарты. Табличную верстку заменила блочная. Тег «div» — это и есть блочная верстка. Можете посмотреть код любого сайта. Кликните правой кнопкой мыши и выберите «Просмотр кода элемента». Взгляните на мой скриншот. Тут есть блок главной страницы , футера, левой и правой колонки. Все они подписаны.
Современные сайты строятся из блоков, покажу схематично пример, чтобы вы понимали. Разница тут скорее в коде страницы. Видите, никакой основной таблички нет. Блоки, размещенные в той или иной части. Иногда они могут заходить друг на друга или сочетать в себе несколько элементов, но один лишний элемент (большая таблица ) исчез.
Оформление блоков осуществляется при помощи CSS , это особый язык программирования. В нем сложно запутаться, он менее громоздкий нежели получается при использовании табличной верстки, все довольно логично, четко и удобно для верстальщика. Благодаря блокам можно решить больше задач , гораздо проще редактировать документы, да и странички загружаются значительно быстрее.
Пошаговая инструкция: как делаются сайты
Давайте по шагам разберем как вообще портал превращается в электронный ресурс . В этом нет ничего сложного. Да, придется приложить какие-то усилия для изучения, но это принесет не только моральное удовлетворение, но и стабильный доход. Верстка – это такое дело, в которое ввязываются не многие.
Более 80% людей просто смотрят на непонятный набор символов, вспоминают школьную программу по математике: логарифмы, дифференциалы – сходят с ума, пугаются и забывают об этой теме: «Пойду лучше китайский выучу, оно-то проще будет».
Вы же уже увидели кое-какой алгоритм и убедились, что в наборе символов есть повторяющиеся элементы. Это отлично и, согласитесь, стало не так страшно.
Давайте теперь посмотрим как происходит сотворение сайта. Сначала дизайнеры работают в Photoshop. У них получается примерно такая вот картинка. Пока это всего лишь фотография, однако, у нее есть свои отличия.
Она изготавливается в особом фотошоповском формате, типа блокнотного txt или вордовского doc. Из psd, так называется этот формат, раскраиваются блоки. Для этого есть специальная кнопка в меню слева.
После того как документ раскроен. Его можно «Экспортировать для web» и в результате на компьютере появляется папка images , которую верстальщик использует для распределения картинок по сайту.
Я сделал этот вариант за минуту, он не правильный. Просто хотелось вам показать примерный результат. Вы можете скачать электронную версию моего psd-макета (скачать
правильную версию , посмотрите, какие картинки пригодятся для размещения и как вы их будете вырезать. Заодно попробуете поработать самостоятельно над шаблоном в photoshop.
Для начинающих верстальщиков и дизайнеров это будет не только интересно, но и полезно. Поменяйте цвета, переставляйте элементы местами, дорабатывайте шаблон и смотрите что смотрится хорошо, а какие изменения вам не нравятся.
Ваш первый сайт. Верстка займет всего пять минут
Над самой версткой можно работать в программе Notepad ++. Сегодня я не буду затрагивать программу Adobe Dreamweaver, т.к. это тема отдельной статьи, но отмечу, что она как раз создана для верстальщиков.
Работы над сайтом обычно не начинаются с создания файла style.css, но думаю что так вам будет интереснее. Это основной документ, в котором описывается как именно будет выглядеть ваш портал. Все просто. Даже английский учить не обязательно.
Background – это цвет фона.
Кликнув два раза в Photoshop по цветовой палитре вы можете узнать и другие цвета.
Вот так будет выглядеть html документ с текстовой составляющей. Уже знакомые меню, тела и контейнеры… тег h2 тоже должен быть вам знаком. Это заголовки. Впишите в них свои слова.
Скачайте эти два документа в одну папку и откройте с помощью Notepad ++, затем отредактируйте цвет и текст, а затем запустите index.html с любого браузера (скачать
Получится примерно такой вариант.
Поздравляю. Это ваша первая страница в интернете! Вы сделали ее, у вас получилось. Естественно, что вместо цвета можно вставить и картинку, которая была вырезана из фотошопа в документ images. Для этого нужно просто прописать путь. Как вы видите, ничего супер сложного тут нет.
И напоследок… качаем видео уроки
Как я вам уже говорил, самое сложное в верстке – это найти хорошие обучающие материалы. Сам я начинал с книг и только через две недели смог сделать свой первый индекс-файл. Чтобы вы понимали, без таблицы стилей (css) она будет выглядеть вот так.
Согласитесь, вообще не впечатляет. Поэтому я рекомендую вам постигать основы при помощи видео курсов. Внизу я разместил ссылки, кликнув по ним, вы можете скачать бесплатные уроки html и css. Они позволяют быстрее достигнуть хороших результатов . Кроме того, чтение требует значительно большей силы воли, нежели просмотр интересных видео.
Html — уроки для начинающих
Css — уроки для начинающих
Бесплатный мини-курс по вёрстке сайта
Желаю вам успехов в ваших начинаниях. Уверен, что совсем скоро вы начнете не только учиться, но и работать онлайн, а также реализовывать невероятные проекты!
Если вам понравилась эта статья – подписывайтесь на рассылку и получайте больше полезных материалов для совершенствования собственных навыков!
Рис. 1. Основные секции страницы