Язык гипретекстовой разметки HTML 4.0

Практическая работа № 1 – «Разметка страницы тегами HTML»

  • Задание № 1.1 – «Разметка и эскиз первой HTML-страницы»

Практическая работа № 2 – «Создание простого web-сайта»

  • Задание № 2.1 – «Создание первого web-сайта с тремя html-страницами» (+ пример: стр. 1, стр. 2, стр. 3)

Практическая работа № 3 – «Разметка web-страниц с использованием таблиц»

  • Задание № 3.1 – «Размещение таблиц на html-странице. Форматирование текста в таблице»
  • Задание № 3.2 – «Размещение таблиц на html-странице. Форматирование ячеек таблицы»
  • Задание № 3.3 – «Размещение таблиц на html-странице. Объединение ячеек таблицы»
  • Задание № 3.4 – «Создание web-страницы с использованием таблиц» (+ пример 3.4)

Практическая работа № 4 – «Дополнительные элементы языка HTML для форматирования web-страниц»

  • Задание № 4.1 – «Горизонтальные линии (тег )»
  • Задание № 4.2 – «Escape-поcледовательности»
  • Задание № 4.3 – «Физические и логические стили»

Практическая работа № 5 – «Форматирование web-страниц с использованием фреймов»

  • Задание № 5.1 – «Создание простых фреймовых структур»
  • Задание № 5.2 – «Создание сложных фреймовых структур»
  • Задание № 5.3 – «Форматирование элементов фреймовых структур»
  • Задание № 5.4 – «Создание сайта содержащего фреймовую структуру» (+ пример 5.4: стр. 1, стр. 2, стр. 3, стр. 4, стр. 5)

Практическая работа № 6 – «Отправка данных на web-сайт с использованием форм»

  • Задание № 6.1 – «Создание формы с использованием тега
    »
  • Задание № 6.2 – «Создание формы с использованием тега »
  • Задание № 6.3 – «Создание формы с использованием тега

»

  • Задание № 6.4 – «Создание формы с использованием таблиц»
  • Задание № 6.5 – «Создание формы с использованием тега

    • »

  • Задание № 6.6 – «Создание формы с использованием cписка определений»
  • Задание № 6.7 – «Создание формы с использованием нумерованного списка»
  • Задание № 6.8 – «Создание формы с использованием с размещением флажков/переключателей по горизонтали»
  • Задание № 6.9 – «Создание формы с использованием с размещением флажков/переключателей в списке»
  • Задание № 6.10 – «Создание формы с использованием сетки переключателей»
  • Задание № 6.11 – «Создание html-документа с несколькими формами»

    • Практическая работа № 7 – «Размещение на web-странице мультимедийных объектов»

    • Задание № 7.1 – «Встаивание в web-странницу модулей, содержащих flash-графику» (+ пример 7.1)
    • Задание № 7.2 – «Встаивание в web-странницу модулей, содержащих avi-изображение» (+ пример 7.2)
    • Задание № 7.3 – «Создание web-страниц с элементами ActiveX» (+ пример 7.3)
    • Задание № 7.4 – «Создание сайта с внедрением мультимедийных модулей» (+ пример 7.4 и страница page1.php)

    Практическая работа № 8 – «Форматирование web-страниц с использованием таблиц стилей. Создание каскадных листов стилей (css)»

    • Задание № 8.1 – «Форматирование HTML-страницы с помощью листа стилей – тег (+ пример 8.1)
    • Задание № 8.2 – «Cоздание внешнего листа стилей для форматирования HTML-страниц (+ пример 8.2)
    • Задание № 8.3 – «Создание web-сайта с использованием листов стилей» (+ пример 8.3: стр. 1, стр. 2, стр. 3, стр. 4, стр. 5)
    • Задание № 8.4 – «Применение визуальных фильтров для Internet Explorer» (+ пример 8.4)
    • Задание № 8.5 – «Форматирование страниц с использованием CSS»

    Динамический HTML (DHTML)

    Практическая работа № 9 – «Объектная модель DHTML. События»

    • Задание № 9.1 – События onMouseOver , onMouseOut . Объекты self и status (+ пример 9.1)
    • Задание № 9.2 – Событие onDblClick (двойной щелчок). Метод alert (+ пример 9.2)
    • Задание № 9.3 – Событие onHelp (+ пример 9.3)
    • Задание № 9.4 – Событие onMouseMove (+ пример 9.4)
    • Задание № 9.5 – События onClick , onMouseOut , onMouseOver и onMouseUp (+ пример 9.5)
    • Задание № 9.6 – Использование форм и JavaScript (+ пример 9.6)
    • Задание № 9.7 – Событие onChange (+ пример 9.7)

    Практическая работа № 10 – «Объектная модель DHTML. Методы»

    • Задание № 10.1 – Методы click и alert . Свойство returnValue ( + пример 10.1)
    • Задание № 10.2 – Метод insertAdjacentHTML ( + пример 10.2)
    • Задание № 10.3 – Метод insertAdjacentText ( + пример 10.3)

    Практическая работа № 12 – «Объектная модель DHTML. Визуальные фильтроы в DHTML для Internet Explorer»

    • Задание № 12.1 – Фильтр переходов RevealTrans . Методы Apply , Play , Stop ( + пример 12.1)

    Практическая работа № 13 – «Объектная модель DHTML. Примеры программ на JavaScript. Управление окнами»

    • Задание № 13.1 – Объект Window . Метод open . Событие onClick ( + пример 13.1)
    • Задание № 13.2 – Объект Window . Методы open , clоse . Событие onClick ( + пример 13.2)
    • Задание № 13.3 – Объект navigator . Метод appName ( + пример 13.3)
    • Задание № 13.4 – Методы alert , confirm , promt ( + пример 13.4)
    • Задание № 13.5 – Метод scroll ( + пример 13.5)

    Практическая работа № 14 – «Объектная модель DHTML. Примеры программ на JavaScript. Создание слайд-шоу»

    • Задание № 14.1 – Коллекция тегов image . Атрибут src ( + пример 14.1)
    • Задание № 14.2 – Событие onChange . Массив Array . Свойство selectedIndex ( + пример 14.2)

    Практическая работа № 15 – «Объектная модель DHTML. Примеры программ на JavaScript. Работа с датой и временем»

    Практическая работа № 16 – «Объектная модель DHTML. Примеры программ на JavaScript. Абсолютное и относительное позиционирование элементов»

    Практическая работа № 17 – «Объектная модель DHTML. Примеры программ на JavaScript. Создание раскрывающихся меню с иерархической структурой»

    Посоветуйте, где взять задания для портфолио начинающему веб-дизайнеру?

    На Бихенсе многие делают так — берут какой-нибудь известный сайт, типа Икеи или Никона, переделывают и пишут «концепт».

    Может быть есть какой-нибудь сайт с заданиями, которые можно сделать.
    Типа, бару нужен сайт, вот все тексты, нужны такие-то пункты меню — вот они. Или парикмахерская, или кафе. Но чтобы не самим выдумывать фейковую инфу (с этим почему-то проблема), а чтобы тексты и фото были и нужно было сделать сайт и положить себе в портфолио.

    Откуда мне знать, какие тексты нужны производителю воды? Или трубному заводу? Не хочется писать лорем ипсум вместо текстов.

    • Вопрос задан более года назад
    • 1762 просмотра

    и это не шутка — сумеете — докажете что вы гений, с первых телодвижений

    Самая лучшая практика — задизайнить настоящий сайт. Найди несколько плохих сайтов, и разошли по владельцам сообщение с подобным содержанием: «Здравствуйте, я — веб-дизайнер, предлагаю вам обновить дизайн вашего сайта, это позволит вам улучшить конверсию, время нахождения людей на сайте, и прочие плюшки».

    Бесплатно не стоит делать, иначе посчитают, что что-то не так, просто скажи, что оплата после принятия: то есть, в начале сделал, а потом, если принимают — оплата. И они ничего не теряют, и тебе работа в портфолио. А вообще, рекомендую заморочиться и сделать действительно современный дизайн — так ты получишь поток клиентов (по сарафанному радио). Вот современные тренды UI дизайна, которым желательно следовать.

    Если помог — пометь ответ как решение. Если возникли какие-то вопросы — пиши в комментарии

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

    Простой способ стать хорошим дизайнером — начать с копирования чужих работ. Но не просто перерисовывать макет, а анализировать и думать, почему автор выбрал тот или иной шрифт, зачем на странице несколько крупных заголовков и почему сайт хочется листать дальше. За такими дизайнерскими решениями чаще всего стоит хорошее знание теории.

    • Сайт выглядит скучно, если все блоки в нем одинакового размера, ничего не выделяется и нет контраста;
    • Страница с хорошо подобранными шрифтами и интересными цветовыми сочетаниями всегда будет казаться интересной и привлекать внимание пользователей.

    Разберем те знания и навыки, которые помогут начинающему дизайнеру стать первоклассными специалистом.

    Верстка

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

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

    Чтобы сверстать страницу хорошо, можно пользоваться такими приемами:

    • Группировать однородные элементы — ставить их ближе друг к другу, чтобы пользователю было легче воспринимать информацию.
    • Создавать контраст с помощью шрифтов, цветов, размеров. Так сайт не выглядит однообразным и монотонным. С помощью контраста выделяют главное, управляют вниманием и делают так, чтобы текст было интересно читать.
    • Пользоваться сеткой, чтобы выровнять элементы относительно друг друга, сделать страницу аккуратней.

    Страницу, сверстанную с помощью таких базовых приемов, удобно и интересно читать, на ней видны логические связи между разными объектами и понятно, какую информацию изучать в первую очередь.

    Ресурсы

    Книги

    Сетка

    Сетка — один из основных инструментов дизайнера. Она делит страницу на несколько колонок, по которым выравнивают блоки сайта, структурируют информацию, расставляют акценты. Сетка создает ощущение порядка. Также она полезна при проектировании нескольких однотипных страниц, чтобы они выглядели единообразно и аккуратно.

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

    На эти колонки стоит ориентироваться и выравнивать информацию. Но сетка — это не абсолютное правило, иногда от нее можно и нужно отходить.

    Ресурсы

    Книги

    Типографика

    Знание типографики — один из основных навыков любого дизайнера, и не важно, создает ли он интерфейсы, делает макеты печатных газет или верстает плакаты.

    Типографика на странице тесно связана с другими элементами интерфейса, поэтому нужно правильно ей пользоваться.

    Делать так, чтобы написанный текст хотелось прочитать. Искать хорошие шрифты, чтобы передать нужное настроение. Знать, чем отличаются кавычки-лапки от кавычек-елочек, что такое швейцарская красная строка.

    Дизайнер, который разбирается в типографике:

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

    Ресурсы

    Книги

    С помощью цвета дизайнер выделяет важные вещи, создает настроение у пользователей и управляет их вниманием. Цвет оказывает большое воздействие на сознание, меняет отношение к предметам, заставляет людей реагировать на него и предпринимать определенные действия.

    Для работы с цветом нужно знать, какие цвета сочетаются, какие — нет, что такое гармония.

    На то, как пользователь будет воспринимать ваш сайт, влияют сочетания цветов. Например, для сайта крупной компании можно подбирать холодные цвета, а для магазина детских товаров — теплые. Для поиска хороших цветовых сочетаний дизайнеры пользуются цветовым кругом, разнообразными палитрами и ресурсами.

    Цветовой круг — важный инструмент для работы с сочетаемостью цветов, который помогает грамотно смешивать цвета и показывает, как они взаимосвязаны друг с другом.

    Чтобы не ошибиться в выборе цветов, дизайнеры пользуются специальным палитрами.

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

    Ресурсы

    Книга

    На протяжении долгого времени сайты рисовали в Adobe Photoshop — универсальном графическом редакторе. Со временем появились редакторы для веб: Sketch, Figma или Adobe XD, которые работают быстрее, чем Photoshop, у них простой интерфейс и нет лишних функций. Поэтому они хорошо работают даже с большим количеством открытых макетов и их легко освоить.

    Вот программы, которые пригодятся веб-дизайнеру:

    • Axure — для проектирования сайта;
    • Sketch, Figma или Adobe XD — для работы с графикой и создания макетов;
    • Principle и Adobe XD — для создания анимированных прототипов сайтов и приложений;
    • Zeplin — для передачи файлов разработчику;
    • Adobe Illustrator — для создания иконок и логотипов, а также для работы с любой векторной графикой.

    Помните, что программы — это один из инструментов дизайнера. Не стремитесь в совершенстве овладеть всеми. Изучите основные возможности и выберите ту, которая вам больше нравится.

    Текст и редактура

    Текст для дизайнера — это такой же инструмент, как форма, цвет и размер. Дизайнер должен уметь писать текст, чтобы создавать сайты, в которых есть смысл.

    Полезное действие сайта или веб-приложения — привлечь, заинтересовать клиента или что-то продать.

    Полезное действие будет выполняться, если и текст, и дизайн взаимосвязаны и дополняют друг друга.

    Можно сделать красивый дизайн сайта, подобрать иллюстрации, но заполнить его текстом Lorem ipsum. Это значит, что дизайнер поработал над внешним видом сайта, но не думал над контентом в текстовых блоках. Скорее всего, такой сайт не будет выполнять свое полезное действие, потому что текст, который позже напишет редактор, будет оторван от дизайна.

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

    Ресурсы

    Книга

    Интернет-маркетинг

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

    На основе этих знаний дизайнер поймет, как сделать продукт удобным и понятным для целевой аудитории.

    Начинающим веб-дизайнерам нужно знать:

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

    Ресурсы

    Книги

    Технические навыки

    Полезно будет понимать, как из нарисованного макета создают работающий сайт, какие есть технические ограничения. Изучить на базовом уровне основы HTML и CSS. Будет легче общаться с технологами и верстальщиками, ставить им задачу и понимать, какие идеи нельзя реализовать с помощью кода.

    Простой способ узнать, как работает верстка, — познакомиться с кодом любого сайта с помощью веб-инспектора браузера.

    Ресурсы

    Психология и переговоры

    До этого мы говорили про навыки, которые непосредственно относятся к созданию новых проектов и их реализации. Но дизайнер работает не один и общается с заказчиками, с командой, с арт-директором, презентует свою работу.

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

    Ресурсы

    Книги

    Заключение

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

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

    Хороший дизайнер не просто много знает, но и применяет эти знания в работе.

    Ресурсы

    Книга

    Хорошим стартом также будут любые онлайн-курсы с проработанной программой обучения и системой преподавания. Если вы только начинаете свой путь дизайнера, то для вас исключительно важно присутствие рядом наставника. Опытного человека, который поможет отличить полезную статью или обучающий урок от бесполезных.

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

    • 32 часа теории и 16 практических заданий
    • Живая обратная связь с преподавателями
    • Неограниченный доступ к материалам курса
    • Стажировка в компаниях-партнёрах
    • Дипломный проект от реального заказчика
    • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы