Искитимский филиал ФГОУ СПО «Новосибирский монтажный техникум»
Рассмотрено: |
|
«Утверждаю» |
На заседании цикловой комиссии |
|
Зав. Учебной частью |
Информационных дисциплин |
|
Пицына Т.М. __________ |
Протокол № ___ от «__»_____2013 |
|
«___»____________2013 |
ППЦК Шебалина Т.К. ___________ |
|
|
Смирнова Елена Викторовна
Методические указания для проведения практических работ по дисциплине «Web-программирование»
Специальности 230115 Программирование в компьютерных системах
2013г
Содержание
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА 3
Цвет и фон в CSS 16
Шрифты в CSS 17
Текст в CSS 17
Списки в CSS 18
Блоковая модель в CSS 19
Рамки в CSS 19
Пояснительная записка
В курсе изучения учебной дисциплины ОП.16 «Web-программирование» значительная часть учебного времени отводится на проведения практических занятий.
Практические работы проводятся с целью закрепления и систематизации полученных знаний в форме учебной самостоятельной работы, при подготовке к которой студентами изучается теория поставленного вопроса с использованием учебной литературы, справочного материала и лекций преподавателя. Преподаватель руководит работой студентов, выполняющих задания по имеющимся рекомендациям, оказывая необходимую помощь слабым учащимся. Представленные ниже методические рекомендации являются образцом руководства к выполнению практических работ студентами.
В результате выполнения практических работ по дисциплине «Web-программирование» студенты должны:
знать
основы web-дизайна и программирования;
основы проектирования сайтов и технологии проектирования;
основы программирования сайтов различными программными средствами;
уметь
разрабатывать Web-сайты, используя технологии проектирования сайтов и web-программирования, и использовать их на практике.
Описание каждой практической работы содержит: тему, цели работы, порядок выполнения работы, а так же перечень контрольных вопросов, с целью выявить и устранить недочеты в освоении рассматриваемой темы. Для получения дополнительной, более подробной информации по изучаемым вопросам, приведено учебно-методическое и информационное обеспечение. Предложенные к выполнению практически занятия выполняются с использованием возможностей компьютера и периферийных устройств.
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ №1
Управление проектом. Анализ сайтов.
Цель работы: Получение навыков управления проектом и анализа похожих сайтов для определения потребностей.
Коды формируемых профессиональных компетенций: ПК 1.1–1.5, ПК 3.3
Задание: Определение потребностей клиентского дизайна (работа малыми гркппами)
Откройте сайт заказчика: www.bluerouses.ru
Оцените дизайн сайта, обращая внимание на следующие детали:
согласованность;
легкость исполнения;
цветовые решения;
универсальную навигацию;
контекст;
ссылки;
удобство использования;
доступность.
Обсудите предполагаемые улучшения в дизайне сайта и подведите итоги по качеству сайта.
Согласованность
Какие элементы повторяются на внутренних страницах для удобства идентификации сайта?
Каким образом эти повторения помогают или затрудняют реализацию основных задач сайта?
Приходя на сайт, как пользователи узнают, где они находятся, куда они могут перейти, и остаются ли они на том же сайте, переходя со страницы на страницу?
Универсальная навигация
Где находится навигационное меню сайта и насколько навигация согласована между страницами?
Как посетители могут вернуться к стартовой странице с любой другой страницы сайта?
Как пользователи могут отследить свое перемещение по сайту (например, всегда ли есть возможность вернуться на предыдущую страницу)
Контекст
Достаточно ли логично выглядит размещение элементов дизайна на странице?
Насколько взаимное расположение и размер изображений и текстовых блоков соответствуют их относительной важности?
Насколько часто приходится использовать полосу прокрутки, чтобы найти важные элементы?
Насколько ясно изображения передают информацию, если они есть?
Каким образом изображения придают весомости содержимому сайта, или они используются только для украшения и привлечения внимания?
Каким образом цветовая схема содействует цели и настроению сайта?
Удобство использования
Насколько понятно подписаны ссылки?
Стоит ли время загрузки страницы ожидания?
Как легко посетители находят нужную информацию?
Как легко посетители могут вернуться к основным разделам сайта и могут ли вообще?
Доступность
Все ли изображения подписаны альтернативным текстом?
До какой степени текст и заголовки легко читать и воспринимать всем посетителям (цвет, размер ит.д.)?
Все ли ссылки и активные области (карты ссылок) сопровождаются альтернативным текстом?
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ №2
Web-дизайн и планирование стартовой страницы
Цель работы: Планирование главной страницы сайта, следуя основам Web-дизайна и сайтостроения
Коды формируемых профессиональных компетенций: ПК 1.1–1.5, ПК 3.3
Задание: Разработать макет стартовой страницы средней школы, используя средства MS Power Point
Цели и задачи:
Средней школе Коуста необходимо перепроектирование веб-сайта, чтобы улучшить его навигацию и облегчить поиск информации. Текущий веб-сайт предоставляет информацию о местонахождении школы, карту, список учителей, краткое описание школы и ее деятельности. Школа использует сайт для информирования родителей и членов школьного сообщества о школе. Задача школы — вовлекать родителей и сообщество в деятельность школы, сообщая им о программах для волонтеров и других событиях в жизни школы.
Аудитория:
Предполагаемая аудитория сайта — родители, члены сообщества, администрация школы, учителя и ученики. Они будут использовать сайт для получения информации о школе, преподавательском составе, событиях, а также возможностях участия в жизни школы.
Цели перепроектирования сайта:
Перепроектирование сайта должно включать в себя следующее:
• Сайт должен легко обновляться, предоставлять информацию о новых событиях в школе, также отображать изменения в преподавательском составе и персонале школы.
• Создать новый логотип.
• Предоставить более подробную информацию о деятельности школы, спортивных секциях, организациях и кафедрах, поскольку эти группы будут создавать свои собственные веб-сайты.
• Использовать календарь для информирования сообщества о новых событиях.
• Предоставить легкий доступ к тематическим разделам.
• Привлечь аудиторию для увеличения сообщества и участия родителей в жизни школы.
Содержание:
Стартовая страница
• Логотип средней школы Коуста.
• Название средней школы Коуста.
• Ссылки на следующие тематические разделы:
• учебные занятия: кафедры, расписания, страницы по классам, библиотека;
• деятельность учеников: спортивные секции, клубы и организации;
• информация о школе: новости, календарь, справочник, волонтерство;
• преподавательский состав и персонал: учителя, администрация, персонал;
• о нас: миссия, руководство, права и обязанности, контактная информация, карта, ссылки.
Образец страницы.
• Текстовая навигационная панель.
• Универсальная навигационная панель по следующим разделам:
• учебные занятия;
• деятельность учеников;
• о нас;
• информация о школе.
• Преподавательский состав и персонал.
• Новый логотип средней школы Коуста.
Структура сайта:
Визуальный дизайн:
Это первоначальный сайт школы. Он содержит только одну страницу и прокрутку для доступа ко всей информации о школе. Сайт трудно обновлять, текст слишком плотный.
