Веб-дизайн и интернет-программирование (ПИБ21), 2013-2014 уч.гг.

На данной странице представлены задания лабораторных работ для студентов 2 курса направления «Прикладная информатика» (бакалавриат).

Рейтинговая схема по дисциплине

Освоение теоретического курса10 баллов (2 теста к рубежным срезам)
Выполнение заданий СРС 20 баллов (2 задания для СРС к рубежным срезам)
Посещение лабораторных работ, выполнение заданий лабораторных 30 баллов

Материал лекций

Вопросы к зачету

Здания для СРС

Лабораторная работа №1: Анализ веб-дизайнов современных сайтов

лр1_анализ_веб-дизайнов_2013-2014.doc

Наши сводные таблицы:

ПИБ21(1)

ПИБ21(2)

Лабораторная работа №2: Язык HTML

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

Вам необходимо выполнить один из поступивших заказов:

№ 1.

Задание: разработать сайт фирмы, занимающейся разведением собак.

Профиль заказчика – фирма, занимающаяся разведением собак.

Сфера деятельности – собаководство.

Цель сайта – презентационное воздействие на клиентов и потенциальных клиентов.

Обоснование причин создания сайта: фирма «Самый верный друг» уже 3 года находится на рынке. Укрепившись на рынке, она решила запустить сайт в Интернете, который сначала будет выполнять только презентационную функцию. В дальнейших планах фирмы – развитие сайта: информационный центр, где можно будет получить экстренную консультационную помощь, заказывать приобретение щенков, обсуждая основные требования к ним, в перспективе оплачивая услуги при помощи кредитной карточки.

Требования заказчика: сайт должен

1) привлечь клиентов;

2) содержать небольшие информационные тексты, фотографии, видео; 3) содержать прайс-лист (выполненный в виде таблицы с перечислением вида услуг и их стоимости);

4) демонстрировать специфику деятельности фирмы и ее особенности (например, фирменный стиль и фирменный логотип);

5) единообразие дизайна страниц второго уровня;

6) содержать контактные данные: ФИО руководителей, с указанием занимаемой должности, телефон, адрес, электронную почту;

7) наличие схемы проезда к фирме, разработанной в Google картах на одной из web страниц (в зависимости от выбранной платформы реализации карта может быть либо встроена на саму страницу, либо открываться при нажатии на ссылку).

№ 2.

Задание: создайте сайт фирмы космического туризма.

Профиль заказчика – фирма, занимающаяся космическим туризмом.

Сфера деятельности – туризм.

Цель сайта – презентационное воздействие на людей, имеющихся средний финансовый достаток и интересующихся перспективами космического туризма.

Обоснование причин создания сайта: фирма космического туризма создана 1 год назад, только начинается ее развитие; принято решение: проведение массового информирования общественности, для этого решили запустить сайт в Интернете, который сначала будет выполнять только презентационную функцию, в дальнейших планах – развитие сайта как информационного центра с обменом информацией с клиентами.

Требования заказчика: сайт должен

1) привлечь людей к космическому туризму;

2) содержать небольшие информационные тексты, фотографии, видео;

3) содержать прайс-лист (выполненный в виде таблицы с перечислением вида услуг и их стоимости);

4) демонстрировать специфику деятельности фирмы и ее особенности (например, фирменный стиль и фирменный логотип);

5) единообразие дизайна страниц второго уровня;

6) содержать контактные данные: ФИО руководителей, с указанием занимаемой должности, телефон, адрес, электронную почту;

7) наличие схемы проезда к фирме, разработанной в Google картах на одной из web страниц (в зависимости от выбранной платформы реализации карта может быть либо встроена на саму страницу, либо открываться при нажатии на ссылку).

№ 3.

Задание: создайте сайт фирмы, занимающейся строительством жилищных комплексов.

Профиль заказчика – строительство жилищных комплексов.

Сфера деятельности – строительство.

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

Обоснование причин создания сайта: фирма «ЖилСтрой» только начинает разворачивать свою компанию на рынках нашего города. Принято решение: проведение массового информирования общественности, для этого решили запустить сайт в Интернете, который сначала будет выполнять только презентационную функцию, в дальнейших планах – развитие сайта как информационного центра с обменом информацией с клиентами, оказание необходимых консультаций.

Требования заказчика: сайт должен

1) привлечь клиентов;

2) содержать небольшие информационные тексты, фотографии, видео;

3) содержать прайс-лист (выполненный в виде таблицы с перечислением вида услуг и их стоимости);

4) демонстрировать специфику деятельности фирмы и ее особенности (например, фирменный стиль и фирменный логотип);

5) единообразие дизайна страниц второго уровня;

6) содержать контактные данные: ФИО руководителей, с указанием занимаемой должности, телефон, адрес, электронную почту;

7) наличие схемы проезда к фирме, разработанной в Google картах на одной из web страниц (в зависимости от выбранной платформы реализации карта может быть либо встроена на саму страницу, либо открываться при нажатии на ссылку).

№ 4.

Задание: создайте сайт банка «Стабильность».

Профиль заказчика – предоставление всевозможных банковских услуг: вклады, кредитование, ипотека.

Сфера деятельности – банковское дело.

Цель сайта – презентационное воздействие на людей, имеющихся достаток любого уровня, с целью привлечения большего количества клиентов в банк.

Обоснование причин создания сайта: банк «Стабильность» уже 4 года находится на рынке. Укрепившись на рынке, руководство решило запустить сайт в Интернете, который сначала будет выполнять только презентационную функцию. В дальнейших планах руководства банка – развитие сайта: информационный центр, где можно будет получить экстренную консультационную помощь, рассчитать возможные кредитования, отслеживания состояния собственного лицевого счета и т.д.

Требования заказчика: сайт должен

1) привлечь клиентов;

2) содержать небольшие информационные тексты, фотографии, видео;

3) содержать прайс-лист (выполненный в виде таблицы с перечислением вида услуг и их стоимости);

4) демонстрировать специфику деятельности банка и его особенности (например, фирменный стиль и фирменный логотип);

5) единообразие дизайна страниц второго уровня;

6) содержать контактные данные: ФИО руководителей, с указанием занимаемой должности, телефон, адрес, электронную почту;

7) наличие схемы проезда к банку, разработанной в Google картах на одной из web страниц (в зависимости от выбранной платформы реализации карта может быть либо встроена на саму страницу, либо открываться при нажатии на ссылку).

№ 5.

Задание: создайте сайт фирмы, занимающейся аутсорсингом.

Профиль заказчика – оказание различных услуг аутсорсинга.

Сфера деятельности – аутсорсинг.

Цель сайта – презентационное воздействие на фирмы, заинтересованные в передаче своих определённых базнес-процессов или производственных функций на обслуживание (сорсинг) данной компании.

Обоснование причин создания сайта: фирма «Аутсорсинг 34» создана 1 год назад, только начинается ее развитие; принято решение: проведение массового информирования общественности, для этого решили запустить сайт в Интернете, который сначала будет выполнять только презентационную функцию, в дальнейших планах – развитие сайта как информационного центра с обменом информацией с клиентами.

Требования заказчика: сайт должен

1) привлечь фирмы-клиенты;

2) содержать небольшие информационные тексты, фотографии, видео;

3) содержать прайс-лист (выполненный в виде таблицы с перечислением вида услуг и их стоимости);

4) демонстрировать специфику деятельности фирмы и ее особенности (например, фирменный стиль и фирменный логотип);

5) единообразие дизайна страниц второго уровня;

6) содержать контактные данные: ФИО руководителей, с указанием занимаемой должности, телефон, адрес, электронную почту;

7) наличие схемы проезда к фирме, разработанной в Google картах на одной из web страниц (в зависимости от выбранной платформы реализации карта может быть либо встроена на саму страницу, либо открываться при нажатии на ссылку).


Для выполнения лабораторной работы используем сайт:

Лабораторная работа №3: Каскадные таблицы стилей

CSS (Cascading Style Sheets, Каскадные таблицы стилей) — технология, позволяющая описывать внешний вид элементов, создаваемых языком разметки.

Выполнить следующие задания:

К индивидуально разработанному сайту применить таблицу стилей, используя основные возможности каскадных таблиц стиля (CSS) задать следующие элементы для HTML-документов:

  • отступы слева и справа в документе, общий фон документа (стилевую информацию описать во внешней таблице стилей),
  • шрифт для заголовков и абзацев (стилевую информацию описать во внешней таблице стилей),
  • цвет для заголовков и абзацев (стилевую информацию описать во внешней таблице стилей),
  • выравнивание абзацев по ширине (любой способ подключения стилевой информации),
  • особое оформление для введения статьи и выделений в тексте (внедренный стиль),
  • особое оформление ссылок, их “живое” поведение (стилевую информацию описать во внешней таблице стилей),
  • отступы слева и цвет для полезных советов (внедренный стиль или inline-стиль).

Полезные ресурсы для выполнения задания:

Лабораторная работа №4-5: Основы JavaScript

Задания:

  1. изучить базовые конструкции языка JavaScript, последовательно выполнив следующие уроки;
  2. выполнить задания по работе с объектами браузера.

Материал в помощь:

При работе с функцией prompt, следует учитывать, что переменная, в которую сохраняется ее результат, становится строковой!


ФУНКЦИИ ДЛЯ ПЕРЕВОДА СТРОКИ В ЧИСЛО

eval

Функция eval предназначена для преобразования текстовой строки в численное значение. Через единственный параметр она получает текстовую строку и вычисляет ее как выражение языка JavaScript. Функция возвращает результат вычисления:

var nValue = Eval(szStr);

parseInt

Эта функция предназначена для преобразования текстовой строки в целочисленное значение. Строка передается функции через параметр:

var nValue = parseInt(szStr);

parseFloat

Функция parseFloat пытается преобразовать текстовую строку в число с плавающей точкой. Текстовая строка передается этой функции через первый параметр, а основание счисления - через второй:

var nFloat = parseFloat(szStr, nRadix);

Лабораторная работа №6: Базовые конструкции языка PHP

PHP (официальное название «PHP: Hypertext Preprocessor») — язык скриптования на стороне сервера, встраиваемый в HTML-документ.

Отличие языка PHP от языков клиентского программирования (таких, как JavaScript), состоит в том, что программный код исполняется на стороне сервера, т.е. еще до того, как страницу получит браузер пользователя.

Все страницы, содержащие программный код, должны иметь расширение .php (или .phtml).

ХОД РАБОТЫ:

  1. Пройти по указанной ссылке
  2. Скачать архив Denwer+Wordpress
  3. Установить и запустить локальный веб-сервер (см. пошаговое руководство)
  4. Выполнить задания.

ПОЛЕЗНЫЕ МАТЕРИАЛЫ И РЕСУРСЫ:

ОТКРЫТИЕ PHP-СТРАНИЦ ЧЕРЕЗ ЛОКАЛЬНЫЙ ВЕБ-СЕРВЕР:

1) Создайте новую папку по адресу: 1337534822-denwer-wordpress-3.3.2\home\localhost\www\

2) Сохраните в созданную папку файл «index.php»

3) В адресной строке браузера наберите адрес: http://localhost/имя_вашей_папки/