Основы интернет-технологий (ИНБ21, 2012)
На данной странице представлены задания лабораторных работ для студентов 2 курса специальности «Информатика» (бакалавриат).
Лабораторная работа №1: Создание простейшего HTML-документа
Задания:
1. Создайте в программе Блокнот XHTML-документ минимальной структуры: задания 1-9.
2. Сохраните созданный файл с расширением xhtml и откройте сначала в IE, а затем в каком-либо браузере, поддерживающем XHTML как тип документа. Сравните результаты.
3. Внесите в созданный документ ошибку, нарушающую правила XHTML (например, добавьте атрибут со значением без кавычек). Откройте документ в поддерживающем стандарты браузере - вместо документа там должно отобразиться сообщение об ошибке разбора.
4. Измените расширение файла на htm (оставив ошибку в документе). Откройте документ в разных браузерах.
Лабораторная работа №2: Создание сайта на основе табличной версткии веб-страниц
Табличная верстка — условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы.
Цель лабораторной работы - создать сайт из трех страниц на основе табличной верстки по заданной теме.
Рекомендации по созданию табличной верстки веб-страниц
ПЛАН ВЫПОЛНЕНИЯ ЛАБОРАТОРНОЙ РАБОТЫ:
Выбрать тему для сайта.
Создать в программе Блокнот документ «index.html» - главную страницу сайта.
Оформить созданную страницу: логотип, заголовок, меню (пока без гиперссылок), содержание.
Создать документы «page1.html» и «page2.html».
Оформить созданные страницы: логотип, заголовок, меню - такие же как на главной странице; содержание для каждой страницы свое.
Настроить гиперссылки на всех страницах.
Выложить созданный сайт для проверки: X:\homes\kat\public\ОИТ ИНБ21.
- До следующего занятия оставить свои отзывы на созданные сайты в коллективном документе
Лабораторная работа №3: Знакомство с CSS. Атрибуты стиля CSS
CSS (Cascading Style Sheets, Каскадные таблицы стилей) — технология, позволяющая описывать внешний вид элементов, создаваемых языком разметки.
Цель лабораторной работы - создать html-документ с использованием таблицы стилей CSS.
Задания лабораторной работы находятся здесь (начиная с 3-ей страницы): X:\homes\kat\shared\ИНБ21 Основы интрент-технологий\ЛР3.pdf
Программа для создания html-документов: X:\homes\kat\shared\ИНБ21 Основы интрент-технологий\PSPad.exe
Справочник по CSS
Индивидуальный проект "Создание тематического сайта"
ТЕМЫ ДЛЯ ИНДИВИДУАЛЬНЫХ ПРОЕКТОВ:
Сайт-площадка для печати научных статей.
Сайт для школьников по ТРИЗ.
Сайт зоомагазина (Радостев Д.)
Сайт-клуб рыболовов (Соломатин А.)
Сайт фирмы, занимающейся разработкой макетов зданий.
Сайт-альманах для любителей путешествий.
Сайт-магазин компьютерных новинок (Харланов И.)
Сайт магазина велосипедов (Мащенко И.)
Сайт-клуб садоводов (Водолазов Е.)
Сайт-сообщество кулинаров (Майкош А.)
Сайт студенческого клуба (Масликов А.)
Сайт-клуб любителей оригами (Демидок С.)
Сайт-сообщество коллекционеров авиомоделей (Олейников Н.)
1 ЭТАП: Начало проекта
Выбрать тему проекта.
Изучение роли дизайна при разработки Web-сайта. Работа с книгой О.Яцюк «Основы графического дизайна на базе компьютерных технологий» (X:\homes\kat\shared\ИНБ21 Основы интрент-технологий)
Анализ целевой аудитории сайта.
Изучение и анализ сайтов данной тематики, представленных в Интернете.
Составление сводной таблицы просмотренных сайтов:
Скриншот сайта | Адрес ресурса | Карта сайта | Оформление сайта |
| | | Достоинства | Недостатки | Особые «фишки», которые максимально привлекают внимание целевой аудитории |
… | … | … | … | … | … |
2 ЭТАП: Разработка эскиза web-сайта
Определение объектов, которые должны присутствовать на всех страницах сайта.
Изучение особенности использования цвета и текста в Web.
Создание в графическом редакторе Gimp эскиза, на котором отражена общая схема расположения основных элементов сайта, проработана детализация содержимого страниц: шрифтовое решение названия и заголовков, примерные иллюстрации, их количество и размер, формы и размеры кнопок или слов гиперссылок.
Сохранение эскиза сайта в формате GIF или JPEG, загрузка его в окно разных браузеров, анализ полученных результатов.
Доработка эскиза сайта.
Примеры эскизов сайта клиники пластической хирургии (три варианта для дизайна сайта):
3 ЭТАП: Домашняя страница сайта
Изучение роли и значимости различных типов страниц сайта.
Создание фирменного знака сайта в программе OpenOfficce Drow.
Разработка домашней страницы сайта.
Изучение и реализация приемов «оживления» домашней страницы сайта.
4 ЭТАП: Внутренние страницы сайта
Разработка карты сайта.
Подбор материалов для содержания каждой внутренней страница сайта.
Разработка внутренних страниц сайта.
Разработка специальных страниц сайта.
5 ЭТАП: Завершение работы над проектом
Проверка работоспособности сайта и корректного отображения всех графических элементов в различных браузерах.
Размещение сайта в сети Интернет.
Защита разработанного сайта.
Полезные ссылки