Декоративные элементы, пиктограммы навигации, кнопки и общий дизайн сайта должны соответствовать теме сайта.Дизайн всех этих элементов должен соответствовать теме вашего сайта

Методические указания для создания проекта

Веб-сайт по предмету основы веб-дизайна

1. Выберите тему проекта.
2. Подберите источники информации (прочитайте тексты, подберите графические иллюстрации). Предпочтительнее использование ваших авторских фотографий!
3. Составьте план веб-сайта. Запишите план в электронном виде, на странице 1 в файле процессора MS Word *.doc. Назовите план Содержание веб-сайта. Имя файла web-site-ivanova.doc (фамилию ivanova замените своей фамилией – латинскими буквами).

Первая страница плана – Главная, последняя – Об авторе(со списком источников информации).

Про текст веб-сайта

4. В том же файле, на следующих страницах cоставьте рассказ от своего имени по выбранной теме, своими словами – очень желательно (как в сочинениях по литературе) в прозе, осветив последовательно все пункты плана.

Текст рассказа – один из основных элементов вашего проекта. Он должен быть написан образно, непринужденным языком. Текст должен быть интересным, содержательным, ярким и зажигательным. Ваш рассказ должен показать читателям ваше заинтересованное отношение к предмету вашего рассказа, ваше увлечение им, вашу любовь, наконец! Текст должен способствовать тому, чтобы читатели увлеклись вашей темой, поняли предмет вашего повествования и полюбили его.

В тексте почаще используйте имена прилагательные!

Примером такого рассказа в Сети может служить авторская работа:
http://veranikolaeva.ru/london2004/

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

Для оживления повествования в рассказе вы можете использовать и стихи по теме (стихи других авторов).

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

Число веб-страниц на сайте = не менее 10(в том числе и страница Об авторе), но можно и более. Исходя из этих требований, напишите текст вашего рассказа с нужным объемом страниц.

5. Проверьте текст вашего рассказа в текстовом процессоре Microsoft Office Word на отсутствие орфографических и стилистических ошибок.

6. Придумайте вашему проекту оригинальное название и используйте его на сайте. Используйте слоган (или слоганы, для каждой страницы сайта – свой) – придумайте или подберите, или цитату (цитаты из Великих). Запишите слоган (цитату) под заголовком каждой страницы.

Из энциклопедического словаря:

Слоган (от англ. slogan, to slog – сильно ударять) – рекламная формула, постоянный рекламный девиз. Четкая, ясная и лаконичная формулировка основной темы рекламного обращения.

еще

Слоган – рекламный лозунг или девиз, содержащий сжатую, легко воспринимаемую, эффектную формулировку рекламной идеи.

Про графику веб-сайта

7. Подготовьте графику для веб-страниц. Форматы графических файлов – jpg или png (формат bmp недопустим!). Размеры графических файлов (ширина и высота) должны быть оптимизированы под размеры на веб-странице. Разрешение – не менее 72 пикс/дюйм(предпочтительнее 96 пикс/дюйм).

Графические файлы-картинки, представленные на сайте, должны иметь обработанные края (тень, рамка, размытие и т.д.) – призовите на помощь ваши умения по предмету компьютерная графика. Оправданная непрямоугольная форма изображения приветствуется!

В именах файлов – только латинские (английские) строчные буквы и/или цифры, желательно не более 8, пробелы в именах файлов не допускаются.

Имена файлов-картинок должны соответствовать их содержанию.

Интересные с точки зрения автора картинки должны быть представлены на веб-страницах в виде миниатюры с альтернативным текстом и возможностью просмотра в новом окне (в форматах jpg или htm).

Число файлов-картинок на сайте – не менее 20, но можно и более.

Про дизайн веб-сайта

8. Разработайте авторский дизайн сайта. Все страницы должны быть оформлены в едином стиле.

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

В цветовом решении сайта используйте «Таблицу безопасных цветов» Артемия Лебедева (предпочтительнее) или наборы цветов веб-палитры.

Обязательна отрисовка дизайна в графическом редакторе Adobe Photoshop c последующим «разрезанием» рисунка на блоки.

Пиктограммы меню (и другие) или кнопки на страницах должны быть созданы в программе Adobe Photoshop. Пиктограммы и кнопки должны иметь альтернативный текст.

Количество основных цветов на странице не более 3.

Декоративные элементы, пиктограммы навигации, кнопки и общий дизайн сайта должны соответствовать теме сайта.Дизайн всех этих элементов должен соответствовать теме вашего сайта.

Про меню сайта

9. Меню сайта может быть вертикальным (слева или справа) или горизонтальным (в верхней части страниц) с обязательным повтором в нижней части страниц. Меню веб-сайта может состоять из пиктограмм, быть текстовым или кнопочным (в крайнем случае).

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

Приветствуется выпадающее меню, созданное с помощью CSS (если меню текстовое)!

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

Если ваш сайт посвящен искусству, то последняя ссылка в меню – Сайты по искусству – ведет на веб-страницу http://www.junior.ru/mhk/ (ссылка должна быть прямой, то есть отдельную страницу для ссылки на сайты по искусству не делайте!).

Если ваш сайт создан на другую тему, то последняя ссылка в меню – спец. Реклама (http://www.junior.ru/1r/) или спец. Дизайн (http://www.junior.ru/1d/) – прямая ссылка.

Про верстку веб-страниц

10. Создайте страницы веб-сайта. Первая страница сайта index.htm (Главная) должна умещаться на одном экране (предпочтительнее). На первой странице веб-сайта напишите SEO-текст по материалам сайта.

Все файлы сайта (htm, jpg, gif, png, doc, zip, rar, css и т.д.) хранятся в одной папке, которая сдается преподавателю и предоставляется на защите проекта. Только Интернет-версия проекта не принимается. Страницы сайта должны иметь возможность редактирования в программе Блокнот (проверьте кодировку перед версткой).

Вся адресация на сайте (ссылки, картинки) – относительная. Абсолютными могут быть только ссылки на другие, чужие веб-сайты.

Имена файлов веб-страниц должны соответствовать их содержанию. Все имена файлов могут использовать только латинские (английские) строчные буквы и/или цифры, желательно не более 8. Пробелы в именах файлов недопустимы.

11. Для позиционирования объектов на страницах используйте таблицы. Все иллюстрации (каждая – в своей ячейке) должны быть подписаны шрифтом мéньшего кегля, чем основной текст.

Пример подписи под картиной:

Диего Веласкес «Менины». 1656 Холст, масло. Прадо. Мадрид

12. Сайт должен корректно смотреться при любом разрешении экрана. Появление горизонтальных линеек прокрутки недопустимо.

Про тег <title>

13. Заголовки окна (тег <title>) страниц должны соответствовать их содержанию. Недопустимы заголовки типа «Новая страница 1».

Тег <title> в тексте html веб-страницыобязательно должен идти сразу за тегом <head> (проверьте в тексте html страницы!).

Тег <title> должен обязательно включать основные ключевые слова – их наличие и соответствие содержанию страницы приводит к повышению страницы в рейтинге поисковых систем.

В теге <title> необходимо использовать только те слова и фразы, которые есть в тексте страницы. Если этих слов нет в содержании страницы, они не должны присутствовать в теге <title>, иначе это грозит наказанием от поисковых систем.

Рекомендуется не превышать длину тега <title> в 50 знаков с пробелами. Ключевое словосочетание может быть написано прописными (заглавными) буквами. Оно должно быть записано в начале <title>

Пример на странице: http://www.junior.ru

МОСКОВСКИЙ КОЛЛЕДЖ автоматизации и ИТ, образование СПО, техникум КАИТ 20

Про текст и гиперссылки

14. Текст на веб-страницах должен быть разбит на абзацы с числом строк – не более 7 – 10. Ключевые слова в тексте должны быть выделены полужирным начертанием, курсивом и/или цветом. Для отделения фрагментов текста друг от друга используйте горизонтальные линии или авторские орнаменты или задайте интервалы перед /после абзацами с помощью CSS.

15. Высота (длина) одной страницы не должна быть более 3-х экранов (три щелчка клавишей Page Down). Если это правило выполнить невозможно, разбейте страницы на две, на три и т.д.

16. Ширина массива текста должна быть не более 600 – 700 точек.

17. Количество ссылок на одной веб-странице должно быть не более 10 («удобным» считается число 7), не считая ссылок меню.

18. Отформатируйте текст веб-страниц. Для оформления шрифта текста и ссылок используйте только внешнюю каскадную таблицу стилей CSS: разработайте стили оформления текста, заголовков, подзаголовков, ссылок. Впишите стили в файл styles.css и свяжите его со всеми страницами сайта.

Шрифт основного текста в файле CSS по размеру (кеглю) можно либо не задавать (браузер выведет его по умолчанию – предпочтительнее), либо – от 10 до 12 пт. Для подписей под картинками используйте шрифт мéньшего кегля, чем основной текст.

Для заголовков (и подзаголовков) вы можете использовать другую гарнитуру шрифта и бóльший кегль. Для заголовков и подзаголовков используйте теги <h3> – <h5> (это предпочтительнее) или шрифт для заголовков = не более 16 пт.

Цвет шрифта веб-сайта может быть любым. Но помните, что всегда, при создании любого документа на компьютере необходимо соблюдать стиль! То есть, оформление отдельных элементов веб-сайта должно быть оправданным и не выглядеть пестрым или аляповатым. Например, как платье танцовщицы самбы на карнавале в Рио-де-Жанейро J (хотя не все платья на карнавале выглядят именно такими J).

Помните: по законам компьютерной верстки для текста на веб-сайте нельзя использовать более двух типов шрифтов. Таким образом, с использованием заголовков и подзаголовков – не более 3-х типов шрифтов.

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

Для текстовых вставок-пояснений терминов или понятий используйте шрифт меньшего кегля, чем основной текст, и с бóльшими отступами слева и справа. При желании выделите эти абзацы рамкой или линией обрамления сбоку, заливкой (как здесь) или узором. Для такого форматирования абзацев используйте CSS.

П

ри желании для первого слова текста абзаца используйте буквицу. При оформлении соблюдайте стиль в работе, не забывайте о гармонии! (буквицу можно создать с помощью CSS)

В тексте для перечислений используйте маркированные или нумерованные списки. При необходимости используйте таблицу с обрамлением.

Про CSS

19. Для форматирования шрифта, абзацев, заголовков и подзаголовков, гиперссылок, красных строк и т. д. используйте внешнюю каскадную таблицу стилей в файле styles.css. Форматирование средствами веб-редактора не допускается!

Если вы используете текстовое меню, предпочтительнее, чтобы меню сайта было выпадающим, созданным с помощью CSS.

Про объекты на сайте

20. Оптимизируйте графику для сайта – уменьшите информационный объем графических объектов в кб (в графическом редакторе Adobe Photoshop: меню File, Save for Web) и создайте для каждого графического элемента на сайте свой альтернативный текст.

21. На сайте используйте не менее 2-х эффектов Java Script. На сайте обязательна фото галерея, выполненная средствами Java Script.

22. На сайте используйте не менее 2-х анимированных картинок (созданных вами самостоятельно в программах Ulead Gif Animator или Adobe Image Ready).

23. На сайте используйте 1 – 2 мультимедийных объекта (звуковые или видео объекты).

Про копирайт

24. В нижнем абзаце каждой веб-страницы создайте абзац копирайта по форме:

© Имя Фамилия, 2013
E-mail: [email protected]

25. Нижний абзац первой (главной) веб-страницы index.htm должен иметь вид:

© Имя Фамилия Имя, 2013
E-mail: [email protected]

© – КАИТ 20, г. Москва, 2013
Преподаватель Николаева В.А.

С логотипа колледжа и с его имени сделайте гиперссылки на адрес сайта колледжа в Сети: http://www.junior.ru С имени Николаева В.А. сделайте гиперссылку на адрес персонального сайта http://veranikolaeva.ru

Примечание: используйте логотип колледжа, выложенный на страницу http://nikolaeva-lessons.ru Вы можете уменьшить его геометрические размеры в Adobe Photoshop, можете и перекрасить под цвет дизайна вашего сайта.

Про источники информации

26. На странице веб-сайта Об авторе под небольшим эссе о себе и ваших увлечениях перечислите источники информации по образцу:

При создании веб-сайта использованы источники информации:

1. Молотков А.И., Войнова Л.А., Жуков В.П., Федоров А.И. Фразеологический словарь русского языка. – М.: Русский язык, 1986.

2. Степанова М.И. Фразеологический словарь русского языка. – СПб.: Полиграфуслуги, 2005.

3. Розе Т.В. Большой фразеологический словарь. – М.: ОЛМА-ПРЕСС, 2002.

4. Веб-сайт «Название сайта» в сети Интернет
www.sitename.ru

Про метатеги

27. Под тегом <title> в области <head> текста html каждой веб-страницы запишите метатег ключевых слов

<meta name="keywords" content="…”>

Общая длина текста content не должна превышать 200 знаков с пробелами. Запятые в этом тексте не ставятся!

В тексте запишите те слова, которые (по вашему мнению) будет вводить пользователь в поле поиска поисковой системы, чтобы найти ваш сайт. Причем, «главные» слова напишите в начале текста content.

Пример на странице: http://veranikolaeva.ru/gallery/2012i/7caesarea/caesarea.htm

<meta name="keywords" content="фото фотогалерея израиль кесария кейсария средиземное море ирод великий крепость крестоносцы театр амфитеатр ипподром мозаика святая земля">