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

14 ci10 brochure secret2 fr
14 ci10 brochure secret2 fr14 ci10 brochure secret2 fr
14 ci10 brochure secret2 frKavaler
 
Maurizio Anolfo - Consumo del suolo
Maurizio Anolfo - Consumo del suoloMaurizio Anolfo - Consumo del suolo
Maurizio Anolfo - Consumo del suolodireWeb
 
M5S Pomezia - Esito questionari rifiuti
M5S Pomezia - Esito questionari rifiutiM5S Pomezia - Esito questionari rifiuti
M5S Pomezia - Esito questionari rifiutiFabio Fucci
 
Дорожньо транспортні пригоди
Дорожньо транспортні пригодиДорожньо транспортні пригоди
Дорожньо транспортні пригодиOlgaBratischenko
 
Громадський транспорт і зупинки
Громадський транспорт і зупинкиГромадський транспорт і зупинки
Громадський транспорт і зупинкиOlgaBratischenko
 
Utah
UtahUtah
Utah84121
 
Ratificados 31 de mayo 3a reunión
Ratificados 31 de mayo 3a reuniónRatificados 31 de mayo 3a reunión
Ratificados 31 de mayo 3a reuniónUTTA OSPAT
 
Система роботи МО вчителів української мови та літератури
Система роботи МО вчителів української мови та літературиСистема роботи МО вчителів української мови та літератури
Система роботи МО вчителів української мови та літературиOlgaBratischenko
 
Шляхи розвитку креативності учителя.
Шляхи розвитку креативності учителя.Шляхи розвитку креативності учителя.
Шляхи розвитку креативності учителя.OlgaBratischenko
 

Viewers also liked (20)

14 ci10 brochure secret2 fr
14 ci10 brochure secret2 fr14 ci10 brochure secret2 fr
14 ci10 brochure secret2 fr
 
Maurizio Anolfo - Consumo del suolo
Maurizio Anolfo - Consumo del suoloMaurizio Anolfo - Consumo del suolo
Maurizio Anolfo - Consumo del suolo
 
Gestione+forestale+e+biomasse+termiche
 Gestione+forestale+e+biomasse+termiche Gestione+forestale+e+biomasse+termiche
Gestione+forestale+e+biomasse+termiche
 
M5S Pomezia - Esito questionari rifiuti
M5S Pomezia - Esito questionari rifiutiM5S Pomezia - Esito questionari rifiuti
M5S Pomezia - Esito questionari rifiuti
 
Catálogo atualizado da taiff 2012
Catálogo atualizado da taiff 2012Catálogo atualizado da taiff 2012
Catálogo atualizado da taiff 2012
 
Визитка 10-Б
Визитка 10-БВизитка 10-Б
Визитка 10-Б
 
Дорожньо транспортні пригоди
Дорожньо транспортні пригодиДорожньо транспортні пригоди
Дорожньо транспортні пригоди
 
Громадський транспорт і зупинки
Громадський транспорт і зупинкиГромадський транспорт і зупинки
Громадський транспорт і зупинки
 
Pau 2015
Pau 2015Pau 2015
Pau 2015
 
Utah
UtahUtah
Utah
 
EPM & BI Platform
EPM & BI PlatformEPM & BI Platform
EPM & BI Platform
 
Ratificados 31 de mayo 3a reunión
Ratificados 31 de mayo 3a reuniónRatificados 31 de mayo 3a reunión
Ratificados 31 de mayo 3a reunión
 
Система роботи МО вчителів української мови та літератури
Система роботи МО вчителів української мови та літературиСистема роботи МО вчителів української мови та літератури
Система роботи МО вчителів української мови та літератури
 
Шляхи розвитку креативності учителя.
Шляхи розвитку креативності учителя.Шляхи розвитку креативності учителя.
Шляхи розвитку креативності учителя.
 
Semana 2
Semana 2Semana 2
Semana 2
 
Síntesis unidad1
Síntesis unidad1Síntesis unidad1
Síntesis unidad1
 
Angi 1
Angi 1Angi 1
Angi 1
 
Merca4
Merca4Merca4
Merca4
 
Ativ1 4 tecnologiadaminhaescola-bete
Ativ1 4 tecnologiadaminhaescola-beteAtiv1 4 tecnologiadaminhaescola-bete
Ativ1 4 tecnologiadaminhaescola-bete
 
Constitucion de bolsillo
Constitucion de bolsilloConstitucion de bolsillo
Constitucion de bolsillo
 

Similar to Welcome

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 Welcome (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 (Текст к докладу)
 
как создать сайт для бизнеса (пособие для частного предпринимателя)
как создать сайт для бизнеса (пособие для частного предпринимателя)как создать сайт для бизнеса (пособие для частного предпринимателя)
как создать сайт для бизнеса (пособие для частного предпринимателя)
 

More from OlgaBratischenko

Візитка 9 - Б класу
Візитка 9 - Б класуВізитка 9 - Б класу
Візитка 9 - Б класуOlgaBratischenko
 
Презентація 3 - В
Презентація 3 - ВПрезентація 3 - В
Презентація 3 - ВOlgaBratischenko
 
Druzhnyj nash 4-В Тklass
Druzhnyj nash 4-В ТklassDruzhnyj nash 4-В Тklass
Druzhnyj nash 4-В ТklassOlgaBratischenko
 
ВІзитка 3-Б класу
ВІзитка 3-Б класуВІзитка 3-Б класу
ВІзитка 3-Б класуOlgaBratischenko
 
Презентація-візитка 2-В клас
Презентація-візитка 2-В класПрезентація-візитка 2-В клас
Презентація-візитка 2-В класOlgaBratischenko
 
ПрезентацІя 6 - Б
ПрезентацІя 6 - БПрезентацІя 6 - Б
ПрезентацІя 6 - БOlgaBratischenko
 
ПрезентацІя 4 - Б
ПрезентацІя 4 - БПрезентацІя 4 - Б
ПрезентацІя 4 - БOlgaBratischenko
 
Візитка-презентація 4 - А
Візитка-презентація 4 - А Візитка-презентація 4 - А
Візитка-презентація 4 - А OlgaBratischenko
 
Презентация 1- В
Презентация 1- ВПрезентация 1- В
Презентация 1- ВOlgaBratischenko
 
Наша візитка 1- Б
Наша візитка 1- БНаша візитка 1- Б
Наша візитка 1- БOlgaBratischenko
 
Візитка 1-А классУ
Візитка 1-А классУВізитка 1-А классУ
Візитка 1-А классУOlgaBratischenko
 
Візитка 11-А класу
Візитка 11-А класуВізитка 11-А класу
Візитка 11-А класуOlgaBratischenko
 
Наш дружній 9 а
Наш дружній 9 аНаш дружній 9 а
Наш дружній 9 аOlgaBratischenko
 
Органічна єдність у нпв зш №6 6
Органічна єдність у нпв зш №6 6Органічна єдність у нпв зш №6 6
Органічна єдність у нпв зш №6 6OlgaBratischenko
 
Робота з національно патріотичного виховання в початковій школі
Робота з національно патріотичного виховання в початковій школіРобота з національно патріотичного виховання в початковій школі
Робота з національно патріотичного виховання в початковій школіOlgaBratischenko
 

More from OlgaBratischenko (20)

Present 2
Present 2Present 2
Present 2
 
Present 1
Present 1Present 1
Present 1
 
Візитка 9 - Б класу
Візитка 9 - Б класуВізитка 9 - Б класу
Візитка 9 - Б класу
 
Презентація 3 - В
Презентація 3 - ВПрезентація 3 - В
Презентація 3 - В
 
Druzhnyj nash 4-В Тklass
Druzhnyj nash 4-В ТklassDruzhnyj nash 4-В Тklass
Druzhnyj nash 4-В Тklass
 
Візитка 5 - А
Візитка 5 - АВізитка 5 - А
Візитка 5 - А
 
Наш класс 10-А
Наш класс 10-АНаш класс 10-А
Наш класс 10-А
 
ВІзитка 3-Б класу
ВІзитка 3-Б класуВІзитка 3-Б класу
ВІзитка 3-Б класу
 
Презентація-візитка 2-В клас
Презентація-візитка 2-В класПрезентація-візитка 2-В клас
Презентація-візитка 2-В клас
 
ПрезентацІя 6 - Б
ПрезентацІя 6 - БПрезентацІя 6 - Б
ПрезентацІя 6 - Б
 
ПрезентацІя 4 - Б
ПрезентацІя 4 - БПрезентацІя 4 - Б
ПрезентацІя 4 - Б
 
Візитка-презентація 4 - А
Візитка-презентація 4 - А Візитка-презентація 4 - А
Візитка-презентація 4 - А
 
Презентация 1- В
Презентация 1- ВПрезентация 1- В
Презентация 1- В
 
Наша візитка 1- Б
Наша візитка 1- БНаша візитка 1- Б
Наша візитка 1- Б
 
Візитка 1-А классУ
Візитка 1-А классУВізитка 1-А классУ
Візитка 1-А классУ
 
Візитка 11-А класу
Візитка 11-А класуВізитка 11-А класу
Візитка 11-А класу
 
Наш дружній 9 а
Наш дружній 9 аНаш дружній 9 а
Наш дружній 9 а
 
Мастер класс
Мастер классМастер класс
Мастер класс
 
Органічна єдність у нпв зш №6 6
Органічна єдність у нпв зш №6 6Органічна єдність у нпв зш №6 6
Органічна єдність у нпв зш №6 6
 
Робота з національно патріотичного виховання в початковій школі
Робота з національно патріотичного виховання в початковій школіРобота з національно патріотичного виховання в початковій школі
Робота з національно патріотичного виховання в початковій школі
 

Welcome

  • 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. На полном серьёзе… Все советы учли? Вымучили свои первые страницы? А теперь самое интересное… Берем готовый шаблончик (платный или бесплатный – это как захочется), меняем все тексты и картинки на свои и сайт готов! Правда с ним тоже нужно повозиться, но это уже мелочи по сравнению с тем, что вам пришлось пройти…