SlideShare a Scribd company logo
1 of 20
Основы Web-дизайна
Введение в сайтостроение
«Вся разница между созданием и
творением сводится к следующему:
создание можно полюбить лишь уже
созданным, а творение любят еще не
сотворенным»
Гилберт Честертон
Основные понятия Web-дизайна
Web-дизайн представляет собой деятельность по
созданию Web-страниц и Web-сайтов.
Web-страница – документ, который можно открыть и
посмотреть с помощью программы просмотра –
браузера.
Web-сайт – совокупность Web-страниц, объединенных
по смыслу и навигационно.
Web-сервер – компьютер, подключенный к сети, на
котором хранятся Web-страницы и Web-сайты.
Этапы создания сайта
1. Определение цели создания сайта
2. Выбор темы сайта
3. Определение содержания сайта
4. Построение структуры сайта
5. Разработка дизайна сайта
6. Регистрация и размещение сайта в Интернете
Далее
Четкое определение цели сайта – половина дела!
Поэтому нужно для себя чётко уяснить – для чего
будет создаваться сайт.
Вариантов может быть несколько:
• чтобы просто был, чтобы хвастаться перед друзьями и
знакомыми;
• чтобы найти единомышленников в определённой
деятельности;
• сообщить о себе миру;
• создать рекламный проект и т.д.
Именно от цели создания сайта зависит всё остальное –
тема, содержание, дизайн.
Этапы создания сайта
Выбор темы для сайта
Выбирать тему необходимо на основе имеющихся у вас
знаний в различных областях, т.к. сайт придётся
пополнять. Наилучшим вариантом будет какой-
нибудь познавательный ресурс, пусть даже очень
маленький. Первый сайт и не должен быть большим,
десятка страничек будет вполне достаточно. Если у вас
есть какое-либо хобби, то непременно расскажите
людям о нём. Ну а если вы счастливый обладатель
сканера, или цифровой фотокамеры, то открывается
буквально необозримый простор для творчества.
Снимайте, сканируйте, размещайте любые материалы,
главное, чтобы это было интересно вашим
посетителям.
Этапы создания сайта
Содержание сайта
После того, как тема будет выбрана, необходимо
определиться с содержанием сайта. Набросайте на
листке бумаги перечень разделов, и статей в них.
Следующим этапом станет набор содержания сайта в
текстовом редакторе. Одновременно подбираются
название разделов, и статей в них. Придумайте каждой
статье название (заголовок) и имя (название страницы
по-английски). Если на сайте вы планируете
разместить фотографии, то придумайте к ним
описания и комментарии.
Этапы создания сайта
Построение структуры
После того, как набор текста будет завершен, нужно
примерно определиться, что, и на какой странице
будет находиться. Пора определить и структуру
ссылок на сайте. Необходимо продумать иерархию
статей, какая статья будет главной, в каком порядке вы
предложите пользователям читать их. Одним словом –
составить логическую структуру сайта.
Теперь у нас есть модель сайта, а остальные
формальности (ссылка с каждой страницы на главную,
на предыдущую, следующую) будут соблюдены при
разработке дизайна, которую можно начинать сразу
после составления логической структуры.
Этапы создания сайта
Разработка дизайна – крайне важный этап.
От дизайна будет зависеть читабельность текста, удобство
навигации, внешний вид, привлекательность,
возможность акцентировать внимание посетителя на
чём-либо конкретном.
После того, как завершена разработка дизайна,
остаётся лишь вставить текст на соответствующие
страницы.
Существуют неписаные законы дизайна, с которыми
неплохо познакомиться на досуге.
Этапы создания сайта
Теперь сайт готов к размещению во всемирной
паутине.
После того, как сайт появится в on-лайне
необходимо проверить работоспособность
всех его ссылок, а, следовательно, и наличие
всех страниц.
Создание сайта на этом завершено.
Теперь требуется его раскрутка, но это уже, как
говорится, совсем другая история.
Этапы создания сайта
Начинаем работу…
Основные объекты Web-страниц
Советы, советы, советы…
Текст Графика
Дизайн Таблицы
Тексты
• Выберите для вашего сайта подходящий стиль
изложения информации. Старайтесь не использовать
таких сленговых выражений, как, например, «типа ваще
крутой чувак и т.п.».
• Старайтесь не публиковать на сайте сомнительную
информацию. Если вы не уверены в достоверности
сведений, лучше укажите их источник, тогда у вас не
возникнет проблем с претензиями посетителей по
данному вопросу.
• Если вы используете информацию (статьи, графику и
т.п.) других ресурсов, никогда не забывайте указывать
источник и авторские копирайты. В лучшем случае,
можете заработать плохую репутацию для себя и своего
ресурса, в худшем...
Графика
• Не используйте готовые изображения в качестве фона,
т.к. различные разрешения монитора могут вызвать
определенные проблемы.
• Используя фоновые изображения (бэкграунды) помните,
что они должны отвечать содержанию вашего сайта.
• Оптимизируйте каждое изображение для уменьшения
«веса» загружаемых страниц.
• Не используйте графические объекты для гиперссылок,
т.к. они увеличивают время загрузки страниц.
Дизайн
• Выберите для своего сайта цветовую схему – три цвета,
задающие текст, ссылки и фон (все текстовые элементы
должны хорошо читаться на странице!).
• Все страницы должны оформляться в едином стиле
(посетитель должен понимать что он находится на вашем
сайте, а не перешел на другой).
• Предусмотрите для посетителя возможность перехода с
любой страницы на главную (дабы не заблудиться в
дебрях информации).
• Для всех изображений используйте альтернативный
текст, т.к. многие пользователи отключают графику.
• Для привлечения посетителей все средства хороши, но во
всем нужна мера, всегда больше привлекает строгий,
выдержанный стиль, а не «новогодние фейерверки»!
Таблицы
Главное средство, используемое дизайнерами для
оформления сайтов.
• Задавая параметры таблиц определяйте их ширину не в
точках, а в процентах, тогда избавитесь от проблем
отображения структуры на мониторах различного
разрешения.
• Не задавайте 100% таблицы, оставьте пространство для
оформления вокруг таблицы.
• При необходимости можно скрыть границы таблиц,
установив размер границы равным нулю.
Подведем итоги
Примеры работ
Использовать полученные знания можно для:
• создания личной страницы;
• создания обучающих учебных материалов;
• формирования Web-портфолио;
• создания сайта школы или организации и т.д.
Заключение…
На полном серьёзе…
Все советы учли?
Вымучили свои первые страницы?
А теперь самое интересное…
Берем готовый шаблончик (платный или бесплатный
– это как захочется), меняем все тексты и картинки
на свои и сайт готов!
Правда с ним тоже нужно повозиться, но это уже
мелочи по сравнению с тем, что вам пришлось
пройти…

More Related Content

What's hot

Cайт, который нравится пользователям и поисковым системам
Cайт, который нравится пользователям и поисковым системамCайт, который нравится пользователям и поисковым системам
Cайт, который нравится пользователям и поисковым системамFresh IT
 
Формула высокой конверсии: дизайн, навигация и контент
Формула высокой конверсии: дизайн, навигация и контентФормула высокой конверсии: дизайн, навигация и контент
Формула высокой конверсии: дизайн, навигация и контентМедведев Маркетинг
 
Как самостоятельно увеличить посещаемость сайта
Как самостоятельно увеличить посещаемость сайтаКак самостоятельно увеличить посещаемость сайта
Как самостоятельно увеличить посещаемость сайтаJulia Yakovleva
 
Построение внутренней ссылочной структуры
Построение внутренней ссылочной структуры Построение внутренней ссылочной структуры
Построение внутренней ссылочной структуры Alexey Kostin
 
Professiya web d
Professiya web dProfessiya web d
Professiya web dir_556
 
Solit 2014, Наивный заказчик Vs. лживый seo. Как распознать seo-мошенника: ин...
Solit 2014, Наивный заказчик Vs. лживый seo. Как распознать seo-мошенника: ин...Solit 2014, Наивный заказчик Vs. лживый seo. Как распознать seo-мошенника: ин...
Solit 2014, Наивный заказчик Vs. лживый seo. Как распознать seo-мошенника: ин...solit
 
Kak cozdat sait
Kak cozdat saitKak cozdat sait
Kak cozdat saitfioggy
 
Как разработать интернет-магазин и не проспать SEO
Как разработать интернет-магазин и не проспать SEOКак разработать интернет-магазин и не проспать SEO
Как разработать интернет-магазин и не проспать SEOiSEO
 

What's hot (9)

Priz
PrizPriz
Priz
 
Cайт, который нравится пользователям и поисковым системам
Cайт, который нравится пользователям и поисковым системамCайт, который нравится пользователям и поисковым системам
Cайт, который нравится пользователям и поисковым системам
 
Формула высокой конверсии: дизайн, навигация и контент
Формула высокой конверсии: дизайн, навигация и контентФормула высокой конверсии: дизайн, навигация и контент
Формула высокой конверсии: дизайн, навигация и контент
 
Как самостоятельно увеличить посещаемость сайта
Как самостоятельно увеличить посещаемость сайтаКак самостоятельно увеличить посещаемость сайта
Как самостоятельно увеличить посещаемость сайта
 
Построение внутренней ссылочной структуры
Построение внутренней ссылочной структуры Построение внутренней ссылочной структуры
Построение внутренней ссылочной структуры
 
Professiya web d
Professiya web dProfessiya web d
Professiya web d
 
Solit 2014, Наивный заказчик Vs. лживый seo. Как распознать seo-мошенника: ин...
Solit 2014, Наивный заказчик Vs. лживый seo. Как распознать seo-мошенника: ин...Solit 2014, Наивный заказчик Vs. лживый seo. Как распознать seo-мошенника: ин...
Solit 2014, Наивный заказчик Vs. лживый seo. Как распознать seo-мошенника: ин...
 
Kak cozdat sait
Kak cozdat saitKak cozdat sait
Kak cozdat sait
 
Как разработать интернет-магазин и не проспать SEO
Как разработать интернет-магазин и не проспать SEOКак разработать интернет-магазин и не проспать SEO
Как разработать интернет-магазин и не проспать SEO
 

Viewers also liked

'RH18940828-V71-35__B.pdf'
'RH18940828-V71-35__B.pdf''RH18940828-V71-35__B.pdf'
'RH18940828-V71-35__B.pdf'guest8e1b493
 
How do machines work
How do machines workHow do machines work
How do machines workCBMSUSARTE
 
Wild plants and crops
Wild plants and cropsWild plants and crops
Wild plants and cropsCBMSUSARTE
 
Shekhar kishore, vamnicom
Shekhar kishore, vamnicomShekhar kishore, vamnicom
Shekhar kishore, vamnicomShekhar Kishore
 
Db corp a strong growth story at attractive valuations
Db corp   a strong growth story at attractive valuationsDb corp   a strong growth story at attractive valuations
Db corp a strong growth story at attractive valuationsHBJ Capital Services Pvt. Ltd
 
Krishi Rasayan Exports Pvt Ltd (KREPL)
Krishi Rasayan Exports Pvt Ltd (KREPL)Krishi Rasayan Exports Pvt Ltd (KREPL)
Krishi Rasayan Exports Pvt Ltd (KREPL)India Business Reports
 
Trabajo de gestión básica de la información
Trabajo de gestión básica de la informaciónTrabajo de gestión básica de la información
Trabajo de gestión básica de la informaciónGabriel Beltran
 
Интернет-сайт российско-белорусского информационного центра
Интернет-сайт российско-белорусского информационного центраИнтернет-сайт российско-белорусского информационного центра
Интернет-сайт российско-белорусского информационного центра rorbic
 
україна літературна
україна літературнаукраїна літературна
україна літературнаEretr Wer
 
Cuadro sinóptico diamar
Cuadro sinóptico diamarCuadro sinóptico diamar
Cuadro sinóptico diamardiamar_19
 
Franz june xii ips1
Franz june xii ips1Franz june xii ips1
Franz june xii ips112is1smakat
 

Viewers also liked (16)

'RH18940828-V71-35__B.pdf'
'RH18940828-V71-35__B.pdf''RH18940828-V71-35__B.pdf'
'RH18940828-V71-35__B.pdf'
 
How do machines work
How do machines workHow do machines work
How do machines work
 
Wild plants and crops
Wild plants and cropsWild plants and crops
Wild plants and crops
 
Shekhar kishore, vamnicom
Shekhar kishore, vamnicomShekhar kishore, vamnicom
Shekhar kishore, vamnicom
 
Computers
ComputersComputers
Computers
 
Db corp a strong growth story at attractive valuations
Db corp   a strong growth story at attractive valuationsDb corp   a strong growth story at attractive valuations
Db corp a strong growth story at attractive valuations
 
CEI Email 6.29.05
CEI Email 6.29.05CEI Email 6.29.05
CEI Email 6.29.05
 
NBCC - A Quality Cash Bargain
NBCC - A Quality Cash BargainNBCC - A Quality Cash Bargain
NBCC - A Quality Cash Bargain
 
Krishi Rasayan Exports Pvt Ltd (KREPL)
Krishi Rasayan Exports Pvt Ltd (KREPL)Krishi Rasayan Exports Pvt Ltd (KREPL)
Krishi Rasayan Exports Pvt Ltd (KREPL)
 
Trabajo de gestión básica de la información
Trabajo de gestión básica de la informaciónTrabajo de gestión básica de la información
Trabajo de gestión básica de la información
 
Upside downside
Upside downsideUpside downside
Upside downside
 
Интернет-сайт российско-белорусского информационного центра
Интернет-сайт российско-белорусского информационного центраИнтернет-сайт российско-белорусского информационного центра
Интернет-сайт российско-белорусского информационного центра
 
I can
I canI can
I can
 
україна літературна
україна літературнаукраїна літературна
україна літературна
 
Cuadro sinóptico diamar
Cuadro sinóptico diamarCuadro sinóptico diamar
Cuadro sinóptico diamar
 
Franz june xii ips1
Franz june xii ips1Franz june xii ips1
Franz june xii ips1
 

Similar to 2 prezent 8kl_30_inf-

Cоветы по созданию библиотечного сайта
Cоветы по созданию библиотечного сайтаCоветы по созданию библиотечного сайта
Cоветы по созданию библиотечного сайтаNina Panasenko
 
Разработка сайта
Разработка сайта Разработка сайта
Разработка сайта Tatsiana Ramanchik
 
Memo for-webdesigner
Memo for-webdesignerMemo for-webdesigner
Memo for-webdesigner3liblib
 
Web дизайнер
Web дизайнерWeb дизайнер
Web дизайнерvaxden
 
Life after finish
Life after finishLife after finish
Life after finishb2bfest.com
 
тпцми пр№ 10 создание сайта
тпцми пр№ 10  создание сайтатпцми пр№ 10  создание сайта
тпцми пр№ 10 создание сайтаannuta123
 
Создание веб-сайта. Курс молодого бойца
Создание веб-сайта. Курс молодого бойцаСоздание веб-сайта. Курс молодого бойца
Создание веб-сайта. Курс молодого бойцаAnton Cherepov
 
Create a site in a preschool educational
Create a site in a preschool educationalCreate a site in a preschool educational
Create a site in a preschool educationalVictor Filimonov
 
Дизайн сайта как средство повышения его информативности. С. Добровольская.
Дизайн сайта как средство повышения его информативности. С. Добровольская.Дизайн сайта как средство повышения его информативности. С. Добровольская.
Дизайн сайта как средство повышения его информативности. С. Добровольская.Таня Быстрова
 
Виртуальная экскурсия. Часть 4 (Текст к докладу)
Виртуальная экскурсия. Часть 4 (Текст к докладу)Виртуальная экскурсия. Часть 4 (Текст к докладу)
Виртуальная экскурсия. Часть 4 (Текст к докладу)Ya-i-mir
 
как создать сайт для бизнеса (пособие для частного предпринимателя)
как создать сайт для бизнеса (пособие для частного предпринимателя)как создать сайт для бизнеса (пособие для частного предпринимателя)
как создать сайт для бизнеса (пособие для частного предпринимателя)Tatiana Kozlovskaya
 

Similar to 2 prezent 8kl_30_inf- (20)

Cоветы по созданию библиотечного сайта
Cоветы по созданию библиотечного сайтаCоветы по созданию библиотечного сайта
Cоветы по созданию библиотечного сайта
 
Разработка сайта
Разработка сайта Разработка сайта
Разработка сайта
 
Texnolog
TexnologTexnolog
Texnolog
 
Memo for-webdesigner
Memo for-webdesignerMemo for-webdesigner
Memo for-webdesigner
 
Web дизайнер
Web дизайнерWeb дизайнер
Web дизайнер
 
yurkevich
yurkevichyurkevich
yurkevich
 
yurkevich
yurkevichyurkevich
yurkevich
 
yurkevich
yurkevichyurkevich
yurkevich
 
yurkevich
yurkevichyurkevich
yurkevich
 
Life after finish
Life after finishLife after finish
Life after finish
 
интернет2
интернет2интернет2
интернет2
 
тпцми пр№ 10 создание сайта
тпцми пр№ 10  создание сайтатпцми пр№ 10  создание сайта
тпцми пр№ 10 создание сайта
 
интернет3
интернет3интернет3
интернет3
 
WEB
WEBWEB
WEB
 
Создание веб-сайта. Курс молодого бойца
Создание веб-сайта. Курс молодого бойцаСоздание веб-сайта. Курс молодого бойца
Создание веб-сайта. Курс молодого бойца
 
Create a site in a preschool educational
Create a site in a preschool educationalCreate a site in a preschool educational
Create a site in a preschool educational
 
two
twotwo
two
 
Дизайн сайта как средство повышения его информативности. С. Добровольская.
Дизайн сайта как средство повышения его информативности. С. Добровольская.Дизайн сайта как средство повышения его информативности. С. Добровольская.
Дизайн сайта как средство повышения его информативности. С. Добровольская.
 
Виртуальная экскурсия. Часть 4 (Текст к докладу)
Виртуальная экскурсия. Часть 4 (Текст к докладу)Виртуальная экскурсия. Часть 4 (Текст к докладу)
Виртуальная экскурсия. Часть 4 (Текст к докладу)
 
как создать сайт для бизнеса (пособие для частного предпринимателя)
как создать сайт для бизнеса (пособие для частного предпринимателя)как создать сайт для бизнеса (пособие для частного предпринимателя)
как создать сайт для бизнеса (пособие для частного предпринимателя)
 

2 prezent 8kl_30_inf-

  • 2. «Вся разница между созданием и творением сводится к следующему: создание можно полюбить лишь уже созданным, а творение любят еще не сотворенным» Гилберт Честертон
  • 3. Основные понятия Web-дизайна Web-дизайн представляет собой деятельность по созданию Web-страниц и Web-сайтов. Web-страница – документ, который можно открыть и посмотреть с помощью программы просмотра – браузера. Web-сайт – совокупность Web-страниц, объединенных по смыслу и навигационно. Web-сервер – компьютер, подключенный к сети, на котором хранятся Web-страницы и Web-сайты.
  • 4. Этапы создания сайта 1. Определение цели создания сайта 2. Выбор темы сайта 3. Определение содержания сайта 4. Построение структуры сайта 5. Разработка дизайна сайта 6. Регистрация и размещение сайта в Интернете Далее
  • 5. Четкое определение цели сайта – половина дела! Поэтому нужно для себя чётко уяснить – для чего будет создаваться сайт. Вариантов может быть несколько: • чтобы просто был, чтобы хвастаться перед друзьями и знакомыми; • чтобы найти единомышленников в определённой деятельности; • сообщить о себе миру; • создать рекламный проект и т.д. Именно от цели создания сайта зависит всё остальное – тема, содержание, дизайн. Этапы создания сайта
  • 6. Выбор темы для сайта Выбирать тему необходимо на основе имеющихся у вас знаний в различных областях, т.к. сайт придётся пополнять. Наилучшим вариантом будет какой- нибудь познавательный ресурс, пусть даже очень маленький. Первый сайт и не должен быть большим, десятка страничек будет вполне достаточно. Если у вас есть какое-либо хобби, то непременно расскажите людям о нём. Ну а если вы счастливый обладатель сканера, или цифровой фотокамеры, то открывается буквально необозримый простор для творчества. Снимайте, сканируйте, размещайте любые материалы, главное, чтобы это было интересно вашим посетителям. Этапы создания сайта
  • 7. Содержание сайта После того, как тема будет выбрана, необходимо определиться с содержанием сайта. Набросайте на листке бумаги перечень разделов, и статей в них. Следующим этапом станет набор содержания сайта в текстовом редакторе. Одновременно подбираются название разделов, и статей в них. Придумайте каждой статье название (заголовок) и имя (название страницы по-английски). Если на сайте вы планируете разместить фотографии, то придумайте к ним описания и комментарии. Этапы создания сайта
  • 8. Построение структуры После того, как набор текста будет завершен, нужно примерно определиться, что, и на какой странице будет находиться. Пора определить и структуру ссылок на сайте. Необходимо продумать иерархию статей, какая статья будет главной, в каком порядке вы предложите пользователям читать их. Одним словом – составить логическую структуру сайта. Теперь у нас есть модель сайта, а остальные формальности (ссылка с каждой страницы на главную, на предыдущую, следующую) будут соблюдены при разработке дизайна, которую можно начинать сразу после составления логической структуры. Этапы создания сайта
  • 9. Разработка дизайна – крайне важный этап. От дизайна будет зависеть читабельность текста, удобство навигации, внешний вид, привлекательность, возможность акцентировать внимание посетителя на чём-либо конкретном. После того, как завершена разработка дизайна, остаётся лишь вставить текст на соответствующие страницы. Существуют неписаные законы дизайна, с которыми неплохо познакомиться на досуге. Этапы создания сайта
  • 10. Теперь сайт готов к размещению во всемирной паутине. После того, как сайт появится в on-лайне необходимо проверить работоспособность всех его ссылок, а, следовательно, и наличие всех страниц. Создание сайта на этом завершено. Теперь требуется его раскрутка, но это уже, как говорится, совсем другая история. Этапы создания сайта
  • 12. Основные объекты Web-страниц Советы, советы, советы… Текст Графика Дизайн Таблицы
  • 13. Тексты • Выберите для вашего сайта подходящий стиль изложения информации. Старайтесь не использовать таких сленговых выражений, как, например, «типа ваще крутой чувак и т.п.». • Старайтесь не публиковать на сайте сомнительную информацию. Если вы не уверены в достоверности сведений, лучше укажите их источник, тогда у вас не возникнет проблем с претензиями посетителей по данному вопросу. • Если вы используете информацию (статьи, графику и т.п.) других ресурсов, никогда не забывайте указывать источник и авторские копирайты. В лучшем случае, можете заработать плохую репутацию для себя и своего ресурса, в худшем...
  • 14. Графика • Не используйте готовые изображения в качестве фона, т.к. различные разрешения монитора могут вызвать определенные проблемы. • Используя фоновые изображения (бэкграунды) помните, что они должны отвечать содержанию вашего сайта. • Оптимизируйте каждое изображение для уменьшения «веса» загружаемых страниц. • Не используйте графические объекты для гиперссылок, т.к. они увеличивают время загрузки страниц.
  • 15. Дизайн • Выберите для своего сайта цветовую схему – три цвета, задающие текст, ссылки и фон (все текстовые элементы должны хорошо читаться на странице!). • Все страницы должны оформляться в едином стиле (посетитель должен понимать что он находится на вашем сайте, а не перешел на другой). • Предусмотрите для посетителя возможность перехода с любой страницы на главную (дабы не заблудиться в дебрях информации). • Для всех изображений используйте альтернативный текст, т.к. многие пользователи отключают графику. • Для привлечения посетителей все средства хороши, но во всем нужна мера, всегда больше привлекает строгий, выдержанный стиль, а не «новогодние фейерверки»!
  • 16. Таблицы Главное средство, используемое дизайнерами для оформления сайтов. • Задавая параметры таблиц определяйте их ширину не в точках, а в процентах, тогда избавитесь от проблем отображения структуры на мониторах различного разрешения. • Не задавайте 100% таблицы, оставьте пространство для оформления вокруг таблицы. • При необходимости можно скрыть границы таблиц, установив размер границы равным нулю.
  • 18. Примеры работ Использовать полученные знания можно для: • создания личной страницы; • создания обучающих учебных материалов; • формирования Web-портфолио; • создания сайта школы или организации и т.д.
  • 20. На полном серьёзе… Все советы учли? Вымучили свои первые страницы? А теперь самое интересное… Берем готовый шаблончик (платный или бесплатный – это как захочется), меняем все тексты и картинки на свои и сайт готов! Правда с ним тоже нужно повозиться, но это уже мелочи по сравнению с тем, что вам пришлось пройти…