- •Государственная морская академия имени адмирала с. О. Макарова
- •Д. Н. Фомин основы разработки веб-страниц
- •Введение
- •1. Общие вопросы разработки веб-страниц
- •1.1. Цели и задачи создания веб-страниц
- •1.2. Основные понятия и пояснения к ним
- •1.3. Основные элементы веб-страницы и файловая структура веб-сайта
- •1.4. Программное обеспечение рабочего места веб-мастера
- •1.4.1. Редактор html-страниц
- •1.4.2. Редакторы графики
- •1.4.3. Браузеры
- •1.4.4. Вспомогательные программы
- •2. Непосредственная работа с html-кодом
- •2.1. Структура html-документа
- •2.2. Основные тэги
- •2.2.1. Заголовки
- •2.2.2. Абзацы и переводы строки
- •2.2.4. Вставка изображений на веб-страницу
- •2.2.5. Маркированные и нумерованные списки
- •2.2.6. Изменение шрифта
- •2.2.7. Горизонтальная линия
- •2.2.8. Комментарии
- •2.3. Вставка специальных символов в html-документ
- •2.4. Таблицы в html
- •2.4.1. Тэги для таблиц, строк и ячеек
- •2.4.2. Таблицы с объединёнными ячейками
- •2.5. Каскадные таблицы стилей (css)
- •2.5.1. Вводные замечания о таблицах стилей
- •2.5.2. Синтаксис таблиц стилей
- •2.5.3. Наследование
- •2.5.4. Контекстные селекторы
- •2.5.5. Способы включения стилевых таблиц в html-документ
- •2.5.6. Приоритет применения таблиц стилей
- •2.5.7. Классы в стилевых таблицах
- •2.5.8. Комментарии в стилевых таблицах
- •2.5.9. Оформление гипертекстовых ссылок
- •2.6. Свободно позиционируемые элементы
- •3. Визуальный редактор веб-страниц Microsoft FrontPage
- •3.1. Интерфейс Microsoft FrontPage
- •3.2. Ввод и редактирование текста в Microsoft FrontPage
- •3.2.1. Базовые средства редактирования
- •3.2.2. Средства отмены и возврата действий
- •3.2.3. Ввод символа, отсутствующего на клавиатуре
- •3.3. Форматирование текста
- •3.3.1. Базовые средства форматирования
- •3.3.2. Списки
- •3.3.3. Вставка изображений
- •3.4. Создание таблиц в Microsoft FrontPage
- •3.4.1. Создание таблицы при помощи панели инструментов.
- •3.5. Каскадные таблицы стилей в Microsoft FrontPage
- •3.5.1. Создание внешней стилевой таблицы
- •3.5.2. Создание внутренней стилевой таблицы
- •3.5.3. Определение стиля внутри тэга
- •3.5.4. Создание пользовательских классов
- •4. Язык сценариев JavaScript
- •4.1. Простейшие сценарии JavaScript
- •4.2. Типы данных в JavaScript
- •4.2.1. Строки
- •4.2.2. Числа
- •4.2.3. Булевы значения
- •4.2.4. Особые типы данных
- •4.3. Переменные в JavaScript
- •4.3.1. Простые переменные
- •4.3.2. Переменные-массивы
- •4.4. Выражения, условия и операции
- •4.4.1. Арифметические операции
- •4.4.2. Операции сравнения
- •4.4.3. Логические операции
- •4.4.4. Операция присваивания
- •4.4.5. Прочие операции
- •4.5. Основные операторы JavaScript
- •4.5.1. Оператор ветвления if…else
- •4.5.2. Операторы цикла
- •4.5.3. Прочие операторы
- •4.6. Функции в JavaScript
- •4.6.1. Объявление и вызов функций
- •4.6.2. Вызов функций JavaScript по событию
- •4.6.3. Передача параметров в функцию и возврат значений из функции
- •4.7. Использование объектов в JavaScript
- •4.7.1. Общие понятия об объектах в JavaScript
- •4.7.2. Использование объекта Math
- •4.7.3. Использование объекта Date
- •4.7.4. Использование объекта String
- •4.8. Использование объектной модели документа
- •4.8.1. Использование объекта document
- •4.8.2. Строки ввода и кнопки
- •4.9. Способы подключения сценария к веб-странице
- •4.9.1. Размещение сценария в отдельном файле
- •4.9.2. Размещение сценария внутри тэга
- •4.10. Примеры анимации на веб-страницах
- •4.10.1. Часы на веб-странице
- •4.10.2. Обратный счётчик
- •4.10.3. Движущийся текст
- •4.10.4. Изменение цвета текста под указателем мыши
- •4.10.5. Смена изображения под указателем мыши
- •4.10.6. Переливающийся текст
- •Литература
- •Приложение 1.
- •Приложение 2. Часто используемые символьные подстановки
- •Приложение 3. Часто используемые свойства стилевых таблиц
Федеральное агентство морского и речного транспорта
Федеральное государственное образовательное учреждение высшего профессионального образования
Государственная морская академия имени адмирала с. О. Макарова
________________________________________________________________
Кафедра автоматики и вычислительной техники
Д. Н. Фомин основы разработки веб-страниц
Учебное пособие
Санкт-Петербург 2006
УДК 004.9
Ф76
Фомин Д. Н.
Ф76 Основы разработки веб-страниц: Учебное пособие. – СПб.: ГМА им. адм. С. О. Макарова, 2006. – 72 с.
В учебном пособии изложены основы технологии создания веб-страниц. Рассмотрены: язык гипертекстовой разметки HTML; каскадные стилевые таблицы (CSS); редактор веб-страниц Microsoft FrontPage; язык сценариев JavaScript и примеры анимации на веб-страницах с его использованием. Даны рекомендации по практическому применению изучаемых технологий. В приложениях приведена справочная информация по HTML и CSS.
Рекомендовано к изданию на заседании кафедры автоматики и вычислительной техники. Протокол № 6 от 21.02.2006.
Рецензенты:
Солодовниченко М. Б., нач. каф. радиоэлектроники, канд. техн. наук, проф. (Государственная морская академия им. адм. С.О.Макарова)
Иванов В. Ю., канд. техн. наук, доц. (Санкт-Петербургский Государственный ун-т технологии дизайна)
© ГМА им. адм. С. О. Макарова, 2006.
© Фомин Д. Н., 2006.
Введение
При проведении учебной практики курсантов радиотехнического факультета по дисциплине «Начальная компьютерная подготовка» изучаются основы одной из наиболее актуальных современных информационных технологий – разработки веб-страниц. Для занятий по данной дисциплине предназначено данное учебное пособие.
Пособие состоит из четырёх основных разделов и приложений. Первый раздел является вводным, в нём рассмотрены общие вопросы разработки веб-страниц. Второй раздел посвящён ручной работе с HTML-кодом и каскадными стилевыми таблицами. В третьем разделе рассмотрено популярное программное средство визуального дизайна веб-страниц – редактор Microsoft FrontPage. В четвёртом разделе изучается язык сценариев JavaScript. В приложениях приведена необходимая справочная информация.
К моменту проведения учебной практики курсанты знакомы с работой в офисном пакете Microsoft Office и основами программирования на одном из языков высокого уровня (Паскаль или Бейсик). Знакомство с основами разработки веб-страниц естественным образом обобщает их имеющиеся знания и навыки, так как включает, с одной стороны, работу с визуальным веб-редактором Microsoft FrontPage, с другой – программирование веб-сценариев на языке JavaScript. Традиционно принято разделять работу человека с компьютером на пользовательскую (использование готового программного обеспечения) и программирование. Изучение веб-разработки способствует расширению кругозора обучающихся, показывая им условность этого разделения: они знакомятся с основами работы как веб-дизайнера, так и веб-программиста.
В процессе изучения гипертекстовой разметки необходимо предостеречь обучающихся от чрезмерного увлечения визуальным дизайном, при проведении занятий и оценке практических работ уделяя основное внимание логической структуре разметки веб-документов. Это будет способствовать развитию у курсантов навыков составления логически структурированных технических текстов, что будет полезным в дальнейшем учебном процессе при выполнении курсовых и дипломных работ.