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

Категория: Интернет
Нажмите для полного просмотра!
Веб-дизайн, слайд №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
Загрузить презентацию