Профессия верстальщик HTML

1. Презентация на тему: Верстальщик HTML

Выполнила:Миронова
М.Н.,студент гр.17860
«Проверила:Урмакшин
ова Е.Р,
преподаватель по

2.

3.

• HTML - аббревиатура от Hyper Text Markup
Language (англ.) - это язык разметки
гипертекста, принятый в World Wide Web для
создания и публикации web-страниц.
Соответственно, HTML-верстальщик – это
специалист, выполняющий вёрстку web-страниц.
Другими словами, он создаёт HTML-шаблон для
web-сайта с использованием знаний HTML-кода
и всех особенностей стиля и графического
оформления. Созданный код должен одинаково
отображаться во всех браузерах («кроссбраузерность») с учетом разных разрешений
монитора и количества цветов.

4. Особенности профессии:

Функциональные обязанности HTML-верстальщика
заключаются в реализации концепции и идеи сайта,
разработанных веб-дизайнером, в виде HTML-кода. Процесс
создания HTML-шаблона состоит из нескольких этапов:
анализ графического дизайна сайта
подборка модели шаблона
нарезка графических спрайтов
сборка HTML-шаблона
В настоящее время существует большое количество
компьютерных программ, которые автоматизируют труд
верстальщика, различные текстовые редакторы с подсветкой
кода, визуальные редакторы (Notepad++, Adobe
Dreamweaver), front-end фреймворки (наборы фрагментов
кода и библиотек классов для ускоренной разработки макета
сайта путем прототипирования — ZurbFoundation-4 и т.п.).
Они позволяют писать большие фрагменты кода в наглядном
режиме, то есть результат каждого этапа работы можно
наблюдать в отдельном окне. Но профессиональный HTMLверстальщик этими программами не пользуется. Он должен
уметь использовать кодировку HTML вручную, без помощи
визуальных редакторов, чтобы обеспечить максимальную
корректность кода в минимальном весе.

5.

• HTML-верстальщик должен знать каскадные стилевые
таблицы CSS, владеть JavaScript и базовыми навыками
web-программирования на языках PHP, Perl или Java,
а также основными графическими редакторами
Photoshop, Fireworks, Gimp. Опытный верстальщик
может создать небольшой сайт, используя текстовый
редактор Microsoft Word c минимальным количеством
средств и инструментов.
• Успешная работа HTML-верстальщика строится на
трех китах: качественный код, принцип юзабилити,
адаптивный дизайн. Качественный код должен быть
хорошо структурирован и иметь правильное
семантическое оформление в соответствии с
правилами SEO-оптимизации. Принцип
юзабилити подразумевает простоту в разработке
интерфейса. Навигация по сайту не должна
заставлять посетителей напряженно думать.
Простота интерфейса - залог успеха
проекта. Адаптивный дизайн сделает сайт
дружелюбным к мобильным устройствам.

6.

• При работе над крупными проектами
работа HTML-верстальщика сводится
к созданию только лишь макета сайта.
Различные модули и элементы в него
устанавливают программисты узкой
специализации. Но на небольших
проектах HTML-верстальщику
приходится выполнять работу с кодом
от начала до конца.

7. Плюсы и минусы профессии:

Плюсы:
возможность самостоятельного освоения
профессии
высокая востребованность на рынке труда
необходимость постоянного
совершенствования и обновления знаний
возможность работать удаленно
нечеткие границы между работой вебдизайнера, веб-программиста и баннермейкера дают возможность работать в
смежных областях.
Минусы:
присутствует доля рутинности и
однообразия
необходимость долговременного сидения
за компьютером
Место работы

8.

9.

Место работы:
• Интернет-компании, фирмы по
разработке сайтов, дизайн-студии,
организации со своими интернетпроектами, фрилансерская работа

10.

Важные качества верстальщика
HTML:
• внимательность, сосредоточенность
• способность концентрироваться
• терпение в выявлении собственных
ошибок
• усидчивость
• аккуратность
• желание работать на конечный
результат

11.

Ступеньки карьеры и
перспективы:
Начинающий HTML-верстальщик с приобретением опыта
и стремлении к повышению своего профессионального
уровня в будущем может претендовать на должности вебдизайнера, веб-программиста, баннер-мейкера.
Этапы верстки сайта, виды
сайтов и методы вёрстки:
Web-сайт представляет собой набор логически связанных
html-документов. Логика, по которой эти документы
связаны, называется структурой сайта или картой сайта.
Перед началом верстки графический файл дизайна
детально анализируется, после чего разрезается на
части, на основе которых верстается HTML-документ,
который представляет собой структурированный набор
HTML-тегов. Это происходит в несколько этапов:
формируется каскадная таблица стилей с описанием
цветовой гаммы сайта и расположением элементов на
странице
формируются меню, кнопки формы и все элементы
управления сайтом
разрабатывается пользовательский интерфейс.

12.

• В результате этих действий
получается HTML-шаблон сайта. Если
мы имеем дело со статическим
сайтом, на этом этапе происходит
наполнение шаблона контентом,
затем сайт закачивается на хостинг.
• Если сайт динамический, то
необходимо произвести интеграцию
HTML-шаблона с системой
управления содержимым сайта. На
этом этапе требуются знания
архитектуры шаблона CMS и
серверного языка программирования.

13.

14.

По макету вёрстки все сайты
подразделяются на 3 группы:
•жёстко фиксированные (Rigid fixed)
•адаптивные резиновые (Adaptable fluid)
•расширяемые эластичные (Expandable elastic)
•Фиксированный тип макета — дизайн, в котором
ширина столбца или рисунка заданы в пикселях и
оговорены точно.
•Резиновый тип макета — дизайн, в котором ширина
столбца или рисунка задана в процентах от текущего
разрешения экрана.
•У каждого вида дизайна есть свои преимущества и
недостатки. В каждом конкретном случае выбор
дизайна зависит от решаемой задачи. Возможен и
смешанный дизайн: некоторые столбцы табличного
дизайна можно задать в процентах, другие в - пикселях.

15.

Методы вёрстки:
•Табличная вёрстка раньше была основным
методом вёрстки; в настоящее время применяется
для создания рамок, выравнивания элементов,
задания модульных сеток, создания цветного фона.
•Вёрстка с помощью слоёв. Слои — это структурные
элементы, которые размещаются на web-странице
путем наложения их друг на друга с точностью до
пикселя. Параметры слоя могут динамически
изменяться скриптами, что дает возможность
создавать на странице разные эффекты:
выпадающее меню, игры, разворачивающиеся
баннеры, плавающие окна и т.п.
•Блочная вёрстка осуществляется при помощи
блоков тег (<div>) и описывающих их таблиц
стилей (CSS), реализуя концепцию семантичной
вёрстки

16.

• По принципам использования средств
разметки HTML различают логическую
разметку и презентационную (физическую).
К примеру, курсивный текст можно получить
как с помощью тега <em>, так и с помощью
тега <i> . В первом случае на текст
производится логическое ударение, которое
обычно отображается курсивом, а во втором курсив задаётся явным образом. То есть,
первый случай ориентирован на логическое
предназначение, второй - на внешний вид
(презентацию), а во втором — на логическое
предназначение. Логическая разметка
обладает существенным преимуществом —
независимостью от используемого типа и
дизайна web-страниц. В данном случае
можно использовать один и тот же вариант
верстки для экрана, печати и мобильных
устройств, при этом регулируя внешний вид
с помощью отдельных файлов стилей.

17.

18. Спасибо за внимание!