Методические указания для создания проекта Веб-сайт по предмету основы веб-дизайна

Колледж автоматизации и информационных технологий КАИТ 20
г. Москва
Методические указания для создания проекта
Веб-сайт по предмету основы веб-дизайна
(и история изобразительного искусства)
1. Выберите тему проекта.
2. Подберите источники информации (прочитайте тексты, подберите графические
иллюстрации). Предпочтительнее использование ваших авторских фотографий!
3. Составьте план веб-сайта. Запишите план в электронном виде, на странице 1 в
файле процессора MS Word *.doc. Назовите план Содержание веб-сайта. Имя
файла web-site-ivanova.doc (фамилию ivanova замените своей фамилией – латинскими буквами).
Про текст веб-сайта
4. В том же файле, на следующих страницах cоставьте рассказ от своего имени по
выбранной теме, своими словами – очень желательно (как в сочинениях по литературе) в прозе, осветив последовательно все пункты плана.
Текст рассказа – один из основных элементов вашего проекта.
Он должен быть написан образно, непринужденным языком. Текст
должен быть интересным, содержательным, ярким и зажигательным. Ваш рассказ должен показать читателям ваше заинтересованное отношение к предмету вашего рассказа, ваше увлечение
им, вашу любовь, наконец! Текст должен способствовать тому,
чтобы читатели увлеклись вашей темой, поняли предмет вашего
повествования и полюбили его.
В тексте почаще используйте имена прилагательные!
Примером такого рассказа в Сети может служить авторская работа:
http://vnikolaeva.narod.ru/london2004/
Нельзя использовать в тексте вашего сайта тексты с других сайтов
сети Интернет. Допускается использование фрагментов текстов из печатных изданий (книг, журналов) с обязательным указанием их в списке
источников информации.
Для оживления повествования в рассказе вы можете использовать и стихи по
теме (стихи других авторов).
Рассказ должен полностью раскрывать тему, быть материалом для ответа по
этому вопросу (в том числе и на экзамене!). В рассказе используйте ключевые
слова и словосочетания для описаний и/или анализа произведений искусства.
Число веб-страниц на сайте = не менее 10 (в том числе и страница Об авторе), но можно и более. Исходя из этих требований,
напишите текст вашего рассказа с нужным объемом страниц.
5. Проверьте текст вашего рассказа в текстовом процессоре Microsoft Office Word
на отсутствие орфографических и стилистических ошибок.
6. Придумайте вашему проекту оригинальное название и используйте его на сайте.
Используйте слоган (или слоганы, для каждой страницы сайта – свой) – придумайте или подберите, или цитату (цитаты из Великих). Запишите слоган (цитату) под заголовком каждой страницы.
© Чмига Марина Афанасьевна, 2008 – 2011
© Николаева Вера Александровна, 2008 – 2011
1
Колледж автоматизации и информационных технологий КАИТ 20
г. Москва
Из энциклопедического словаря:
Слоган (от англ. slogan, to slog – сильно ударять) – рекламная
формула, постоянный рекламный девиз. Четкая, ясная и лаконичная формулировка основной темы рекламного обращения.
еще
Слоган – рекламный лозунг или девиз, содержащий сжатую, легко
воспринимаемую, эффектную формулировку рекламной идеи.
Про графику веб-сайта
7. Подготовьте графику для веб-страниц. Форматы графических файлов – jpg или
png (формат bmp недопустим!). Размеры графических файлов (ширина и высота) должны быть оптимизированы под размеры на веб-странице. Разрешение
– не менее 72 пикс/дюйм (предпочтительнее 96 пикс/дюйм).
Графические файлы-картинки, представленные на сайте, должны иметь обработанные края (тень, рамка, размытие и т.д.) – призовите на помощь ваши умения
по предмету компьютерная графика. Оправданная непрямоугольная форма
изображения приветствуется!
В именах файлов – только латинские (английские) строчные буквы и/или цифры,
желательно не более 8, пробелы в именах файлов не допускаются.
Имена файлов-картинок должны соответствовать их содержанию.
Интересные с точки зрения автора картинки должны быть представлены
на веб-страницах в виде миниатюры с альтернативным текстом и возможностью просмотра в новом окне (в форматах jpg или htm).
Число файлов-картинок на сайте – не менее 20, но можно и более.
Про дизайн веб-сайта
8. Разработайте авторский дизайн сайта. Все страницы должны быть оформлены в
едином стиле.
При разработке дизайна, элементов оформления (пиктограмм и
др.) смелее используйте все ваши умения и навыки, полученные на
уроках композиции, компьютерной графики, живописи и рисунка.
Дизайн вашего веб-сайта должен быть авторским!
В цветовом решении сайта используйте «Таблицу безопасных цветов» Артемия
Лебедева (предпочтительнее) или наборы цветов веб-палитры.
Приветствуется отрисовка дизайна в графическом редакторе Adobe Photoshop c последующим «разрезанием» страницы на блоки.
Пиктограммы меню (и другие) или кнопки на страницах должны быть созданы в
программе Adobe Photoshop. Пиктограммы и кнопки должны иметь альтернативный текст.
Количество основных цветов на странице не более 3.
Декоративные элементы, пиктограммы навигации, кнопки и общий
дизайн сайта должны соответствовать теме сайта. Дизайн всех этих
элементов должен соответствовать теме вашего сайта.
© Чмига Марина Афанасьевна, 2008 – 2011
© Николаева Вера Александровна, 2008 – 2011
2
Колледж автоматизации и информационных технологий КАИТ 20
г. Москва
Про меню сайта
9. Меню сайта может быть вертикальным (слева или справа) или горизонтальным
(в верхней части страниц) с обязательным повтором в нижней части страниц.
Меню веб-сайта может состоять из пиктограмм (предпочтительнее!) или быть
текстовым.
На каждой странице сайта меню должно быть одинаковым, с обязательными
ссылками на все страницы сайта (или на первые страницы каждого из разделов сайта, если страниц много и они структурированы по разделам).
Приветствуется выпадающее меню, созданное с помощью CSS (если меню текстовое)!
Предпоследняя ссылка – Об авторе – ведет на соответствующую страницу вашего сайта с вашим рассказом о себе. Под рассказом о себе поместите список
источников информации (см. текст ниже).
Последняя ссылка в меню – Сайты по искусству – ведет на веб-страницу
http://www.junior.ru/mhk/ (ссылка должна быть прямой, то есть отдельную страницу для ссылки на сайты по искусству не делайте!)
Про верстку веб-страниц
10. Создайте страницы веб-сайта. Первая страница сайта index.htm должна умещаться на одном экране (это очень приветствуется!). На первой странице вебсайта напишите вступление или изложите свою авторскую позицию по выбранной теме.
Все файлы сайта (htm, jpg, gif, png, doc, zip, rar, css и т.д.) хранятся в одной
папке, которая сдается преподавателю и предоставляется на защите проекта.
Только Интернет-версия проекта не принимается. Страницы сайта должны
иметь возможность редактирования в программе Блокнот (проверьте кодировку
перед версткой).
Вся адресация на сайте (ссылки, картинки) – относительная. Абсолютными могут быть только ссылки на другие, чужие веб-сайты.
Имена файлов веб-страниц должны соответствовать их содержанию. Все имена файлов могут использовать только латинские (английские) строчные буквы и/или цифры, желательно не более 8. Пробелы в
именах файлов недопустимы.
11. Для позиционирования объектов на страницах используйте таблицы. Все иллюстрации (каждая – в своей ячейке) должны быть подписаны шрифтом мéньшего
кегля, чем основной текст.
12. Сайт должен корректно смотреться при любом разрешении экрана. Появление
горизонтальных линеек прокрутки недопустимо.
Про тег <title>
13. Заголовки окна (тег <title>) страниц должны соответствовать их содержанию. Недопустимы заголовки типа «Новая страница 1».
Тег <title> в тексте html веб-страницы обязательно должен идти сразу за
тегом <head> (проверьте в тексте html страницы!).
© Чмига Марина Афанасьевна, 2008 – 2011
© Николаева Вера Александровна, 2008 – 2011
3
Колледж автоматизации и информационных технологий КАИТ 20
г. Москва
Тег <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 по размеру (кеглю) можно либо не задавать (браузер выведет его по умолчанию – предпочтительнее), либо – от 9 до 12
пт. Для подписей под картинками используйте шрифт мéньшего кегля, чем основной текст.
Для заголовков (и подзаголовков) вы можете использовать другую гарнитуру
шрифта и бóльший кегль. Для заголовков и подзаголовков используйте теги <h3>
– <h5> (это предпочтительнее) или шрифт для заголовков = не более 16 пт.
Цвет шрифта веб-сайта может быть любым. Но помните, что всегда, при создании любого документа на компьютере необходимо соблюдать стиль! То есть,
оформление отдельных элементов веб-сайта должно быть оправданным и не
выглядеть пестрым или аляповатым. Например, как платье танцовщицы самбы
на карнавале в Рио-де-Жанейро  (хотя не все платья на карнавале выглядят
именно такими ).
Помните:
по законам компьютерной верстки для текста на веб-сайте
нельзя использовать более двух типов шрифтов. Таким об© Чмига Марина Афанасьевна, 2008 – 2011
© Николаева Вера Александровна, 2008 – 2011
4
Колледж автоматизации и информационных технологий КАИТ 20
г. Москва
разом, с использованием заголовков и подзаголовков – не
более 3-х типов шрифтов.
Для заголовков (и подзаголовков) можно использовать любой
способ выравнивания, в зависимости от предпочтений автора.
Для основного текста в русском языке принято выравнивание по
ширине.
Для текстовых вставок-пояснений терминов или понятий используйте
шрифт меньшего кегля, чем основной текст, и с бóльшими отступами слева
и справа. При желании выделите эти абзацы рамкой или линией обрамления сбоку, заливкой (как здесь) или узором. Для такого форматирования абзацев используйте CSS.
П
ри желании для первого слова текста абзаца используйте буквицу. При
оформлении соблюдайте стиль в работе, не забывайте о гармонии! (буквицу можно создать с помощью CSS)
В тексте для перечислений используйте маркированные или нумерованные
списки. При необходимости используйте таблицу с обрамлением.
Про CSS
19. Для форматирования шрифта, абзацев, заголовков и подзаголовков, гиперссылок, красных строк и т. д. используйте внешнюю каскадную таблицу стилей в
файле styles.css. Форматирование средствами веб-редактора не допускается!
Если вы используете текстовое меню, предпочтительнее, чтобы меню сайта было выпадающим, созданным с помощью CSS.
Про объекты на сайте
20. Оптимизируйте графику для сайта – уменьшите информационный объем
графических объектов в кб (в графическом редакторе Adobe Photoshop: меню
File, Save for Web) и создайте для каждого графического элемента на сайте свой
альтернативный текст.
21.
На сайте используйте не менее 5-ти эффектов Java Script.
22.
На сайте используйте не менее 3-х анимированных картиннок (созданных вами самостоятельно в программах Ulead Gif Animator или Adobe Image Ready).
23.
На сайте используйте 1 – 2 мультимедийных объекта (звуковые или видео
объекты).
© Чмига Марина Афанасьевна, 2008 – 2011
© Николаева Вера Александровна, 2008 – 2011
5
Колледж автоматизации и информационных технологий КАИТ 20
г. Москва
Про копирайт
24. В нижнем абзаце каждой веб-страницы создайте абзац копирайта по форме:
© Имя Фамилия, 2012
E-mail: login@postserver.ru
25.
Нижний абзац первой (главной) веб-страницы index.htm должен иметь вид:
© Имя Фамилия Имя, 2012
E-mail: login@postserver.ru
©
– КАИТ 20, г. Москва, 2012
Преподаватель Николаева В.А.
С логотипа колледжа и с его имени сделайте гиперссылки на адрес
сайта колледжа в Сети: http://www.junior.ru С имени Николаева В.А.
сделайте
гиперссылку
на
адрес
персонального
сайта
http://www.junior.ru/nikolaeva
Примечание: используйте логотип колледжа, выложенный на страницу
http://vnikolaeva.narod.ru/lessons/web-design2.htm Вы можете уменьшить его геометрические размеры и перекрасить под цвет дизайна вашего сайта.
Про источники информации
26. На странице веб-сайта Об авторе под небольшим эссе о себе и ваших увлечениях перечислите источники информации по образцу:
При создании веб-сайта использованы источники информации:
1. Молотков А.И., Войнова Л.А., Жуков В.П., Федоров А.И. Фразеологический словарь
русского языка. – М.: Русский язык, 1986.
2. Степанова М.И. Фразеологический словарь русского языка. – СПб.: Полиграфуслуги, 2005.
3. Розе Т.В. Большой фразеологический словарь. – М.: ОЛМА-ПРЕСС, 2002.
4. Веб-сайт «Название сайта» в сети Интернет
www.sitename.ru
Про метатеги
27. Под тегом <title> в области <head> текста html каждой веб-страницы запишите
метатег ключевых слов
<meta name="keywords" content="…”>
Общая длина текста content не должна превышать 200 знаков с пробелами. Запятые в этом тексте не ставятся!
В тексте запишите те слова, которые (по вашему мнению) будет вводить пользователь в поле поиска поисковой системы, чтобы найти ваш сайт. Причем, «главные» слова напишите в начале текста content.
© Чмига Марина Афанасьевна, 2008 – 2011
© Николаева Вера Александровна, 2008 – 2011
6
Колледж автоматизации и информационных технологий КАИТ 20
г. Москва
Пример на странице: http://www.junior.ru
колледж москва образование спо техникум портфолио обучение среднее профессиональное компьютер автоматизация информационные технологии специальность реклама государственная программа бесплатно диплом
Для каждой страницы сайта нужно написать свой тег keywords!
28. Под тегом <meta name="keywords" …> в области <head> текста html каждой
веб-страницы запишите метатег аннотации (описания) страницы
<meta name="description" content="…“>
От аннотации нужно добиться лаконичности и уместить ее в 20 – 30 слов. Общая
длина текста content не должна превышать 200 знаков с пробелами. Причем,
«главные» слова напишите в начале текста content.
Пример на странице: http://www.junior.ru
МОСКОВСКИЙ КОЛЛЕДЖ автоматизации и инф. технологий дает образование бесплатно по специальностям СПО Реклама, Документоведение и др., использующим
компьютер. Студенты имеют награды, гранты. Гос. диплом
Для каждой страницы сайта нужно написать свой тег description!
29. Под тегом <meta name=" description" …> в области <head> текста html каждой
веб-страницы запишите метатег, устанавливающий ваше авторство:
<meta name="Author" content="Иванова С.И.">
Про фотографии на сайте
30. Фотографии на веб-сайте можно использовать ваши, авторские (сделать самостоятельно, это предпочтительнее), а можно взять фото или с компактдисков или сканировать из книг.
При необходимости можно использовать фотографии с веб-сайтов (с обязательным указанием их названий и адресов на странице источников информации):
http://www.flickr.com/
http://ru.wikipedia.org/wiki/Заглавная_страница
http://artclassic.edu.ru/
http://www.wga.hu/
http://school-collection.edu.ru/catalog/
http://fcior.edu.ru
http://window.edu.ru
http://nearyou.ru/
Примечание: в проектах Веб-сайт необходимо использовать фотографии (или
картинки) только высокого качества! Предпочтительнее использование ваших авторских фотографий!
Про приложения (и средства интерактивного взаимодействия с пользователями)
31. По материалам вашего веб-сайта создайте
– тест
(примеры на странице http://www.junior.ru/mhk)
© Чмига Марина Афанасьевна, 2008 – 2011
© Николаева Вера Александровна, 2008 – 2011
7
Колледж автоматизации и информационных технологий КАИТ 20
г. Москва
– кроссворд
(примеры на странице http://www.junior.ru/mhk)
– ребус
(примеры на странице http://www.junior.ru/mhk)
Примечание: эти страницы не входят в число обязательных 10-ти страниц на
сайте.
Про редактирование папки сайта
32. На последнем этапе работы над веб-сайтом избавьтесь от черновых вариантов веб-страниц, картинок и других объектов сайта. Для этого переместите черновые варианты этих файлов в другую папку (например, chernoviki), за пределами
папки сайта.
Про учет затраченного времени
33. Для определения времени, необходимого вам для разработки, создания и
верстки веб-сайта фиксируйте затраченное время на всех этапах, заполняя
таблицу либо в бумажном блокноте, либо в электронном виде – в процессоре
MS Word. Например:
Дата
29.12.11
Время
Время
по часам
всего
11:00 – 13:00
120 мин.
Вид работы
Разрабатывала дизайн главной страницы
и т.д.
© Чмига Марина Афанасьевна, 2008 – 2011
© Николаева Вера Александровна, 2008 – 2011
8
Колледж автоматизации и информационных технологий КАИТ 20
г. Москва
Приложение.
Ключевые слова и словосочетания для описаний произведений искусства.
АРХИТЕКТУРА, СКУЛЬПТУРА
Монументальная, грандиозная
Обобщенная моделировка
Статика поз - сдержанность, мужество, сила, женственность, эстетизм
Гармоничный, ясность, простота
Величественность, жизненность
Спокойствие, торжественность
Живость движения, внутреннее напряжение
Чувство пропорций, соразмерность всех частей
Одухотворенная, монументально-героическая, драматическая,
многофигурная, героическая, мифологическая (сюжет)
Сложный ракурс, жанровый характер
Гигантский размер, сложная светотеневая моделировка
Театральность (в позах)
Реалистическая, реалистичная
Натуралистичность
Художественное обобщение
Пластика движения
Статичность
Пластическая лепка формы
Уравновешенная
Пластичность и динамичность
Светотеневой контраст
Античная
Пронзительная эмоциональность
Поглощение человека безграничным пространством
ЖИВОПИСЬ
Натуралистичные детали
Декоративность
Станковая живопись (портеры)
Многофигурность
Перспектива
Пропорции
Анатомия
Цельный образ
Тщательность
Манера - благородна, сдержанна, величественна
Картина - аллегорична, мифологична, светский сюжет, жанровый
Композиция - конструктивна, оригинальная
Ритм - плоскостной, цветовой
Пейзаж - идеализированный, выдуманный, романтический
© Чмига Марина Афанасьевна, 2008 – 2011
© Николаева Вера Александровна, 2008 – 2011
9
Колледж автоматизации и информационных технологий КАИТ 20
г. Москва
Портрет - парадный, театрализованный, декоративный
Выразительные средства
Цвет, линии, массы, свет
Звучный, интенсивный, праздничный
Живописная гамма
Лаконичный, условный, обобщенный
Пронзительно звонкий
«Нарядная» живопись
Легкая лессировка
Мощная, бурная, пастозная
Яркая красочность
Цветовое решение
Колористическое решение
Локальные
Сочный
Богатые цветовые нюансы
Письмо смелое, свободное
Тональные отношения
Равновесие цветовых звучаний
Отношения холодных и теплых тонов
Повышенная цветность
Красочная стихийность
Тональная живопись
Цветовые вспышки
Градации цвета
Открытый цвет
Конструктивная ясность
Четкость композиции
Пластическое равновесие обобщенных форм
Цельность силуэта
Статика
Многокрасочность
Пластичность по форме
Тональная перспектива
Контурность
Несгармонированные сочетания
Контраст
Резкая светотень
Контрастность цветовых пятен
Светотеневой контраст, светотеневая моделировка
© Чмига Марина Афанасьевна, 2008 – 2011
© Николаева Вера Александровна, 2008 – 2011
10
Колледж автоматизации и информационных технологий КАИТ 20
г. Москва
Объемно-пространственные и глубинно-пространственные задачи
Пространственная среда
Иллюзорное пространство
Световоздушная атмосфера
Пластичность, ясность линии и объема
Монументальность
Повышенная динамика
Перегруженность в композиции
Дробность
Пластическая лепка формы
Дробность
Пластическая лепка формы
Ритм пластических масс
Открытость
Панорамность
Высокий, низкий (рельеф)
Эмоциональное воздействие
Необыкновенное величие
Истинная монументальность
Ощущение зыбкости
Впечатление трепетности
Жизненности
Драматическая подавленность человека
Напряженность
Драматизм
Реалистическая выразительность
Эмоционально выразительная
Религиозная
Экспрессивность
Величественность
Цельность и гармоничность
Трагическое мироощущение
Состояние надломленности
Призрачная
Ирреальная (то есть, нереальная)
Безмерная глубина скорби
Величественная красота человеческого существования
Произведения глубоко философские, высоко этические
Эффектная
Театральная композиция
Спокойный, безмятежный пейзаж
Психологическая глубина
© Чмига Марина Афанасьевна, 2008 – 2011
© Николаева Вера Александровна, 2008 – 2011
11
Колледж автоматизации и информационных технологий КАИТ 20
г. Москва
Эмоциональное воздействие (продолжение)
Выразительная
Аллегоричный язык
Натурализм
Трагичность мироощущения
Внутренняя напряженность
Гротеск
Алтарный образ
Цельность человеческого существа
Устойчивость
Иллюзорность
Меланхолическое переживание
Возвышенное настроение
Живописная
Жизненная
Фантастическая
Интеллектуальная, психологическая значимость
Историческая
Ясная праздничность
© Чмига Марина Афанасьевна, 2008 – 2011
© Николаева Вера Александровна, 2008 – 2011
12