🗊Презентация Веб-дизайн

Категория: Интернет
Нажмите для полного просмотра!
Веб-дизайн, слайд №1Веб-дизайн, слайд №2Веб-дизайн, слайд №3Веб-дизайн, слайд №4Веб-дизайн, слайд №5Веб-дизайн, слайд №6Веб-дизайн, слайд №7Веб-дизайн, слайд №8Веб-дизайн, слайд №9Веб-дизайн, слайд №10Веб-дизайн, слайд №11Веб-дизайн, слайд №12Веб-дизайн, слайд №13Веб-дизайн, слайд №14Веб-дизайн, слайд №15Веб-дизайн, слайд №16Веб-дизайн, слайд №17
Скачать
Вы можете ознакомиться и скачать презентацию на тему Веб-дизайн. Доклад-сообщение содержит 17 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


ЛЕКЦИЯ 1: Веб-дизайн Web-design
Описание слайда:
ЛЕКЦИЯ 1: Веб-дизайн Web-design

Слайд 2


Как работает сайт?
Описание слайда:
Как работает сайт?

Слайд 3


Этапы построения веб-проекта Обозначение тематики проекта Создание макетов страниц (PSD, AI и пр.) Оценка нагрузки на сервер Выбор платформы , ЯП, архитектуры проекта Построение каркаса сервера (back-end) Перевод макетов в сверстанные страницы (front-end) «Склеивание» проекта
Описание слайда:
Этапы построения веб-проекта Обозначение тематики проекта Создание макетов страниц (PSD, AI и пр.) Оценка нагрузки на сервер Выбор платформы , ЯП, архитектуры проекта Построение каркаса сервера (back-end) Перевод макетов в сверстанные страницы (front-end) «Склеивание» проекта

Слайд 4


Что такое back-end и front-end? Front-end и back-end — термины в программной инженерии Front-end — интерфейс взаимодействия между пользователем и сервером (браузер) Back-end  — основная программно-аппаратная часть (сервер)
Описание слайда:
Что такое back-end и front-end? Front-end и back-end — термины в программной инженерии Front-end — интерфейс взаимодействия между пользователем и сервером (браузер) Back-end  — основная программно-аппаратная часть (сервер)

Слайд 5


HTML Язык разметки Директивно «сообщает» браузеру что и куда поместить в окне браузера Элементарен в изучении Универсальный Обновляется, тренд на насыщение клиентской части новыми возможностями Конечно, база для front-end
Описание слайда:
HTML Язык разметки Директивно «сообщает» браузеру что и куда поместить в окне браузера Элементарен в изучении Универсальный Обновляется, тренд на насыщение клиентской части новыми возможностями Конечно, база для front-end

Слайд 6


Старт HTML Тег – элемент языка разметки. <html> <a href=“google.ru”> <hr /> Теги бывают парными ( <p> </p>)и одиночными (<img>) Каждый тег точно обозначает элемент на странице
Описание слайда:
Старт HTML Тег – элемент языка разметки. <html> <a href=“google.ru”> <hr /> Теги бывают парными ( <p> </p>)и одиночными (<img>) Каждый тег точно обозначает элемент на странице

Слайд 7


Как это работает? Допустим, вы написали <button> Нажми меня </button> Каким будет результат?
Описание слайда:
Как это работает? Допустим, вы написали <button> Нажми меня </button> Каким будет результат?

Слайд 8


Tips Все, вообще все, что есть в программировании и верстке работает на английском В веб-дизайне английский объясняет смысл команды или тега практически сразу Не пренебрегайте помощью Google
Описание слайда:
Tips Все, вообще все, что есть в программировании и верстке работает на английском В веб-дизайне английский объясняет смысл команды или тега практически сразу Не пренебрегайте помощью Google

Слайд 9


Основные теги HTML <a href=“ google.ru “> Ссылка </a> href – атрибут. У тегов есть атрибуты. Для тега <a> атрибут href обозначает адрес назначения <button> Кнопка </button> <p> Абзац </p> <h1> Огромный заголовок </h1> <h6> Крошечный заголовок </h6> <div> Контейнер без свойств </div>
Описание слайда:
Основные теги HTML <a href=“ google.ru “> Ссылка </a> href – атрибут. У тегов есть атрибуты. Для тега <a> атрибут href обозначает адрес назначения <button> Кнопка </button> <p> Абзац </p> <h1> Огромный заголовок </h1> <h6> Крошечный заголовок </h6> <div> Контейнер без свойств </div>

Слайд 10


Основа HTML Посмотрите и постарайтесь запомнить эту структуру: <html> <head> <title> Заголовок страницы </title> </head> <body> <h1> Я – заголовок страницы </h1> </body> </html>
Описание слайда:
Основа HTML Посмотрите и постарайтесь запомнить эту структуру: <html> <head> <title> Заголовок страницы </title> </head> <body> <h1> Я – заголовок страницы </h1> </body> </html>

Слайд 11


Тег <head> Вся скрытая информация, не отображаемая на странице в явном виде Всегда идет перед <body> Обычно занимает 5-10% от общего кол-ва строк кода Примеры тегов – <meta> <title> <link> <script>
Описание слайда:
Тег <head> Вся скрытая информация, не отображаемая на странице в явном виде Всегда идет перед <body> Обычно занимает 5-10% от общего кол-ва строк кода Примеры тегов – <meta> <title> <link> <script>

Слайд 12


Тег <body> Часть страницы, отображаемая на странице Именно в ней расположены <a>, <button>, <h1> Подавляющее большинство ошибок валидации страниц расположены именно в ней Пожалуй, самая объемная часть курса изучения HTML 
Описание слайда:
Тег <body> Часть страницы, отображаемая на странице Именно в ней расположены <a>, <button>, <h1> Подавляющее большинство ошибок валидации страниц расположены именно в ней Пожалуй, самая объемная часть курса изучения HTML 

Слайд 13


Реалии разработки веб-проектов Заказы корпоративного сектора требуют меньших вложений в дизайн (B2B) Остальные заказы – самые интересные, и, как правило, сложные  (B2C) Тренды, как ни странно, задаются именно от этой части рынка
Описание слайда:
Реалии разработки веб-проектов Заказы корпоративного сектора требуют меньших вложений в дизайн (B2B) Остальные заказы – самые интересные, и, как правило, сложные  (B2C) Тренды, как ни странно, задаются именно от этой части рынка

Слайд 14


Тренды – поверхностный анализ С момента появления WWW остался неизменным принцип загрузки веб-страниц Появление телефонов не сразу заставило развиваться «адаптивный» веб Только с 2008 года стал активным процесс перехода с «табличной верстки»
Описание слайда:
Тренды – поверхностный анализ С момента появления WWW остался неизменным принцип загрузки веб-страниц Появление телефонов не сразу заставило развиваться «адаптивный» веб Только с 2008 года стал активным процесс перехода с «табличной верстки»

Слайд 15


Тег <table> <table> <thead> <tr><td>Заголовок 1</td> <td>Второй заголовок</td></tr> </thead> <tbody> <tr> <td> Ячейка 1 </td> <td> Ячейка 2 </td> </tr> </tbody> </table>
Описание слайда:
Тег <table> <table> <thead> <tr><td>Заголовок 1</td> <td>Второй заголовок</td></tr> </thead> <tbody> <tr> <td> Ячейка 1 </td> <td> Ячейка 2 </td> </tr> </tbody> </table>

Слайд 16


Важное о верстке Любые элементы на странице браузера будут «стремиться» разместиться в левом верхнем углу страницы Первая задача – научиться располагать элементы так, как мы этого хотим, а не как захочет браузер 
Описание слайда:
Важное о верстке Любые элементы на странице браузера будут «стремиться» разместиться в левом верхнем углу страницы Первая задача – научиться располагать элементы так, как мы этого хотим, а не как захочет браузер 

Слайд 17


Способы располагать элементы Табличная верстка Устаревшая, ужасная, не адаптивная С использованием целого «букета» технологий. Их немало, но они несложные. Современная, логичная, адаптивная, интересная и удобная
Описание слайда:
Способы располагать элементы Табличная верстка Устаревшая, ужасная, не адаптивная С использованием целого «букета» технологий. Их немало, но они несложные. Современная, логичная, адаптивная, интересная и удобная

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию