🗊Презентация Основы Web-дизайна. Введение в сайтостроение

Категория: Интернет
Нажмите для полного просмотра!
Основы Web-дизайна. Введение в сайтостроение, слайд №1Основы Web-дизайна. Введение в сайтостроение, слайд №2Основы Web-дизайна. Введение в сайтостроение, слайд №3Основы Web-дизайна. Введение в сайтостроение, слайд №4Основы Web-дизайна. Введение в сайтостроение, слайд №5Основы Web-дизайна. Введение в сайтостроение, слайд №6Основы Web-дизайна. Введение в сайтостроение, слайд №7Основы Web-дизайна. Введение в сайтостроение, слайд №8Основы Web-дизайна. Введение в сайтостроение, слайд №9Основы Web-дизайна. Введение в сайтостроение, слайд №10Основы Web-дизайна. Введение в сайтостроение, слайд №11Основы Web-дизайна. Введение в сайтостроение, слайд №12Основы Web-дизайна. Введение в сайтостроение, слайд №13Основы Web-дизайна. Введение в сайтостроение, слайд №14Основы Web-дизайна. Введение в сайтостроение, слайд №15Основы Web-дизайна. Введение в сайтостроение, слайд №16Основы Web-дизайна. Введение в сайтостроение, слайд №17Основы Web-дизайна. Введение в сайтостроение, слайд №18Основы Web-дизайна. Введение в сайтостроение, слайд №19Основы Web-дизайна. Введение в сайтостроение, слайд №20Основы Web-дизайна. Введение в сайтостроение, слайд №21Основы Web-дизайна. Введение в сайтостроение, слайд №22Основы Web-дизайна. Введение в сайтостроение, слайд №23Основы Web-дизайна. Введение в сайтостроение, слайд №24Основы Web-дизайна. Введение в сайтостроение, слайд №25

Содержание

Вы можете ознакомиться и скачать презентацию на тему Основы Web-дизайна. Введение в сайтостроение. Доклад-сообщение содержит 25 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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


Слайд 1





Основы Web-дизайна
Введение в сайтостроение
Описание слайда:
Основы Web-дизайна Введение в сайтостроение

Слайд 2





«Вся разница между созданием и творением сводится к следующему: создание можно полюбить лишь уже созданным, а творение любят еще не сотворенным»
                                     Гилберт Честертон
Описание слайда:
«Вся разница между созданием и творением сводится к следующему: создание можно полюбить лишь уже созданным, а творение любят еще не сотворенным» Гилберт Честертон

Слайд 3





Основные понятия Web-дизайна
Web-дизайн представляет собой деятельность по созданию Web-страниц и Web-сайтов. 

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

Слайд 4





Этапы создания сайта
Определение цели создания сайта

Выбор темы сайта

Определение содержания сайта

Построение структуры сайта 

Разработка дизайна сайта 

Регистрация и размещение сайта в Интернете

Далее
Описание слайда:
Этапы создания сайта Определение цели создания сайта Выбор темы сайта Определение содержания сайта Построение структуры сайта Разработка дизайна сайта Регистрация и размещение сайта в Интернете Далее

Слайд 5





Этапы создания сайта
Четкое определение цели сайта – половина дела!
Поэтому нужно для себя чётко уяснить – для чего
будет создаваться сайт. 
Вариантов может быть несколько:
чтобы просто был, чтобы хвастаться перед друзьями и знакомыми;
чтобы найти единомышленников в определённой деятельности;
сообщить о себе миру;
создать рекламный проект и т.д.
Именно от цели создания сайта зависит всё остальное – тема, содержание, дизайн.
Описание слайда:
Этапы создания сайта Четкое определение цели сайта – половина дела! Поэтому нужно для себя чётко уяснить – для чего будет создаваться сайт. Вариантов может быть несколько: чтобы просто был, чтобы хвастаться перед друзьями и знакомыми; чтобы найти единомышленников в определённой деятельности; сообщить о себе миру; создать рекламный проект и т.д. Именно от цели создания сайта зависит всё остальное – тема, содержание, дизайн.

Слайд 6





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

Слайд 7





Этапы создания сайта
Содержание сайта
После того, как тема будет выбрана, необходимо определиться с содержанием сайта. Набросайте на листке бумаги перечень разделов, и статей в них. 
Следующим этапом станет набор содержания сайта в текстовом редакторе. Одновременно подбираются название разделов, и статей в них. Придумайте каждой статье название (заголовок) и имя (название страницы по-английски). Если на сайте вы планируете разместить фотографии, то придумайте к ним описания и комментарии.
Описание слайда:
Этапы создания сайта Содержание сайта После того, как тема будет выбрана, необходимо определиться с содержанием сайта. Набросайте на листке бумаги перечень разделов, и статей в них. Следующим этапом станет набор содержания сайта в текстовом редакторе. Одновременно подбираются название разделов, и статей в них. Придумайте каждой статье название (заголовок) и имя (название страницы по-английски). Если на сайте вы планируете разместить фотографии, то придумайте к ним описания и комментарии.

Слайд 8





Этапы создания сайта
Построение структуры
После того, как набор текста будет завершен, нужно примерно определиться, что, и на какой странице будет находиться. Пора определить и структуру ссылок на сайте. Необходимо продумать иерархию статей, какая статья будет главной, в каком порядке вы предложите пользователям читать их. Одним словом – составить логическую структуру сайта. 
Теперь у нас есть модель сайта, а остальные формальности (ссылка с каждой страницы на главную, на предыдущую, следующую) будут соблюдены при разработке дизайна, которую можно начинать сразу после составления логической структуры.
Описание слайда:
Этапы создания сайта Построение структуры После того, как набор текста будет завершен, нужно примерно определиться, что, и на какой странице будет находиться. Пора определить и структуру ссылок на сайте. Необходимо продумать иерархию статей, какая статья будет главной, в каком порядке вы предложите пользователям читать их. Одним словом – составить логическую структуру сайта. Теперь у нас есть модель сайта, а остальные формальности (ссылка с каждой страницы на главную, на предыдущую, следующую) будут соблюдены при разработке дизайна, которую можно начинать сразу после составления логической структуры.

Слайд 9





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

Слайд 10





Этапы создания сайта
Теперь сайт готов к размещению во всемирной паутине. 
После того, как сайт появится в on-лайне необходимо проверить работоспособность всех его ссылок, а, следовательно, и наличие всех страниц. 
Создание сайта на этом завершено. 
Теперь требуется его раскрутка, но это уже, как говорится, совсем другая история.
Описание слайда:
Этапы создания сайта Теперь сайт готов к размещению во всемирной паутине. После того, как сайт появится в on-лайне необходимо проверить работоспособность всех его ссылок, а, следовательно, и наличие всех страниц. Создание сайта на этом завершено. Теперь требуется его раскрутка, но это уже, как говорится, совсем другая история.

Слайд 11





Начинаем работу…
Описание слайда:
Начинаем работу…

Слайд 12





Основные объекты Web-страниц
Советы, советы, советы…
Описание слайда:
Основные объекты Web-страниц Советы, советы, советы…

Слайд 13





Тексты
Выберите для вашего сайта подходящий стиль изложения информации. Старайтесь не использовать таких сленговых выражений, как, например, «типа ваще крутой чувак и т.п.».
Старайтесь не публиковать на сайте сомнительную информацию. Если вы не уверены в достоверности сведений, лучше укажите их источник, тогда у вас не возникнет проблем с претензиями посетителей по данному вопросу.
Если вы используете информацию (статьи, графику и т.п.) других ресурсов, никогда не забывайте указывать источник и авторские копирайты. В лучшем случае, можете заработать плохую репутацию для себя и своего ресурса, в худшем...
Описание слайда:
Тексты Выберите для вашего сайта подходящий стиль изложения информации. Старайтесь не использовать таких сленговых выражений, как, например, «типа ваще крутой чувак и т.п.». Старайтесь не публиковать на сайте сомнительную информацию. Если вы не уверены в достоверности сведений, лучше укажите их источник, тогда у вас не возникнет проблем с претензиями посетителей по данному вопросу. Если вы используете информацию (статьи, графику и т.п.) других ресурсов, никогда не забывайте указывать источник и авторские копирайты. В лучшем случае, можете заработать плохую репутацию для себя и своего ресурса, в худшем...

Слайд 14





Тексты
Выделяйте наиболее важные части теста. 
Это очень помогает читателям найти наиболее важные тексты и дает возможность автору заострить их внимание на чем-либо. 
Разделяйте текст на главы, делайте списки.
Даже если посетитель и не захочет читать весь текст, так вы сможете дать ему возможность ознакомиться с содержанием очень быстро, а может быть, заинтересовать и убедить прочитать. 
Иллюстрируйте материал. 
Оптимальное количество изображений – не более 2-х на страницу текста, при условии, что они туда подходят, конечно. 
Не делайте текст слишком мелким. 
Это самая распространенная ошибка при разработке сайта. Также не нужно блокировать стандартную возможность браузеров изменять размер шрифта. Поверьте, посетители предпочтут читабельный тест вашим представлениям о дизайне.
Описание слайда:
Тексты Выделяйте наиболее важные части теста. Это очень помогает читателям найти наиболее важные тексты и дает возможность автору заострить их внимание на чем-либо. Разделяйте текст на главы, делайте списки. Даже если посетитель и не захочет читать весь текст, так вы сможете дать ему возможность ознакомиться с содержанием очень быстро, а может быть, заинтересовать и убедить прочитать. Иллюстрируйте материал. Оптимальное количество изображений – не более 2-х на страницу текста, при условии, что они туда подходят, конечно. Не делайте текст слишком мелким. Это самая распространенная ошибка при разработке сайта. Также не нужно блокировать стандартную возможность браузеров изменять размер шрифта. Поверьте, посетители предпочтут читабельный тест вашим представлениям о дизайне.

Слайд 15





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

Слайд 16





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

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

Оптимизируйте каждое изображение для уменьшения «веса» загружаемых страниц. 

Не используйте графические объекты для гиперссылок, т.к. они увеличивают время загрузки страниц.
Описание слайда:
Графика Не используйте готовые изображения в качестве фона, т.к. различные разрешения монитора могут вызвать определенные проблемы. Используя фоновые изображения (бэкграунды) помните, что они должны отвечать содержанию вашего сайта. Оптимизируйте каждое изображение для уменьшения «веса» загружаемых страниц. Не используйте графические объекты для гиперссылок, т.к. они увеличивают время загрузки страниц.

Слайд 17





Дизайн
Выберите для своего сайта цветовую схему – три цвета, задающие текст, ссылки и фон (все текстовые элементы должны хорошо читаться на странице!). 
Все страницы должны оформляться в едином стиле (посетитель должен понимать что он находится на вашем сайте, а не перешел на другой).
Предусмотрите для посетителя возможность перехода с любой страницы на главную (дабы не заблудиться в дебрях информации). 
Для всех изображений используйте альтернативный текст, т.к. многие пользователи отключают графику.
Для привлечения посетителей все средства хороши, но во всем нужна мера, всегда больше привлекает строгий, выдержанный стиль, а не «новогодние фейерверки»!
Описание слайда:
Дизайн Выберите для своего сайта цветовую схему – три цвета, задающие текст, ссылки и фон (все текстовые элементы должны хорошо читаться на странице!). Все страницы должны оформляться в едином стиле (посетитель должен понимать что он находится на вашем сайте, а не перешел на другой). Предусмотрите для посетителя возможность перехода с любой страницы на главную (дабы не заблудиться в дебрях информации). Для всех изображений используйте альтернативный текст, т.к. многие пользователи отключают графику. Для привлечения посетителей все средства хороши, но во всем нужна мера, всегда больше привлекает строгий, выдержанный стиль, а не «новогодние фейерверки»!

Слайд 18





Дизайн
Способов сочетания различных цветов много. Вот некоторые из них: 
Контрастность, использование противоположных цветов. Этот способ хорошо подойдет для выделения наиболее важной информации, для рекламы, детских сайтов и т.д. 
Использование природных цветов. Возьмите любую красивую фотографию пейзажа. Выделите в ней основные цвета и реализуйте такое оформление на своем сайте. Эффект будет потрясающим! 
Использование разных оттенков одного и того же цвета. Сайт, созданный в таком стиле, не утомляет глаза, помогает направить все усилия на создание какого-то одного эффекта.
Описание слайда:
Дизайн Способов сочетания различных цветов много. Вот некоторые из них: Контрастность, использование противоположных цветов. Этот способ хорошо подойдет для выделения наиболее важной информации, для рекламы, детских сайтов и т.д. Использование природных цветов. Возьмите любую красивую фотографию пейзажа. Выделите в ней основные цвета и реализуйте такое оформление на своем сайте. Эффект будет потрясающим! Использование разных оттенков одного и того же цвета. Сайт, созданный в таком стиле, не утомляет глаза, помогает направить все усилия на создание какого-то одного эффекта.

Слайд 19





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

Слайд 20





Таблицы
Главное средство, используемое дизайнерами для оформления сайтов. 
Задавая параметры таблиц определяйте их ширину не в точках, а в процентах, тогда избавитесь от проблем отображения структуры на мониторах различного разрешения.
Не задавайте 100% таблицы, оставьте пространство для оформления вокруг таблицы. 
При необходимости можно скрыть границы таблиц, установив размер границы равным нулю.
Описание слайда:
Таблицы Главное средство, используемое дизайнерами для оформления сайтов. Задавая параметры таблиц определяйте их ширину не в точках, а в процентах, тогда избавитесь от проблем отображения структуры на мониторах различного разрешения. Не задавайте 100% таблицы, оставьте пространство для оформления вокруг таблицы. При необходимости можно скрыть границы таблиц, установив размер границы равным нулю.

Слайд 21





Подведем итоги
Описание слайда:
Подведем итоги

Слайд 22





Примеры работ
Использовать полученные знания можно для:
 
создания личной страницы;

создания обучающих учебных материалов; 

формирования Web-портфолио;

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

Слайд 23





Заключение…
Описание слайда:
Заключение…

Слайд 24





На полном серьёзе…
Все советы учли?
Вымучили свои первые страницы?
А теперь самое интересное…
Берем готовый шаблончик (платный или бесплатный – это как захочется), меняем все тексты и картинки на свои и сайт готов!
Правда с ним тоже нужно повозиться, но это уже мелочи по сравнению с тем, что вам пришлось пройти…
Описание слайда:
На полном серьёзе… Все советы учли? Вымучили свои первые страницы? А теперь самое интересное… Берем готовый шаблончик (платный или бесплатный – это как захочется), меняем все тексты и картинки на свои и сайт готов! Правда с ним тоже нужно повозиться, но это уже мелочи по сравнению с тем, что вам пришлось пройти…

Слайд 25





Вместо послесловия…
Другой, не менее интересный вариант – создание собственного сайта в on-line. 
За небольшую плату вы можете создать сайт в Конструкторе сайтов.
Один из самых доступных и недорогих расположен по адресу:
http://www.webstolica.ru/pages.php 
Дерзайте, и возможно уже завтра вы пригласите меня в гости на свой сайт.

До встречи на страницах Интернета!
Описание слайда:
Вместо послесловия… Другой, не менее интересный вариант – создание собственного сайта в on-line. За небольшую плату вы можете создать сайт в Конструкторе сайтов. Один из самых доступных и недорогих расположен по адресу: http://www.webstolica.ru/pages.php Дерзайте, и возможно уже завтра вы пригласите меня в гости на свой сайт. До встречи на страницах Интернета!



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