- •Фгбоу впо «Башкирский государственный педагогический университет
- •2. Требования к уровню освоения содержания дисциплины «Технологии Internet (Web-мастерство)»
- •3. Объем дисциплины «Технологии Internet (Web-мастерство)» и виды учебной работы
- •4. Содержание дисциплины «Технологии Internet (Web-мастерство)»
- •4.1. Разделы дисциплины и виды занятий
- •4.2.Содержание разделов дисциплины «Технологии Internet (Web-мастерство)»
- •5. Учебно-методическое обеспечение дисциплины
- •6.5. Система подготовки материалов и методических разработок
- •7. Содержание итогового и промежуточного контроля
- •7.1. Перечень примерных контрольных вопросов и заданий для самостоятельной работы
- •7.2 Теоретические вопросы к зачету.
- •Практические задания
- •8. Методические рекомендации по организации изучения дисциплины
- •8.1. Методические рекомендации для преподавателей
- •9.Учебная практика по дисциплине «Технологии Internet (Web-мастерство)» не предусмотрена.
- •2.1. Конспекты лекций по дисциплине «Технологии Internet (Web-мастерство)»
- •2.1. Язык гипертекстовой разметки html.
- •2.1.1. Основные теги.
- •Комментарии
- •Общий вид html-документа
- •2.1.2. Обычный текст или абзац
- •Обычный текст или абзац в сеpедине стpоки
- •2.1.3. Ссылки
- •Ссылки на главы дpугих документов
- •2.1.4. Списки
- •Ненумеpованный список
- •Нумеpованный список
- •2.1.5. Физические стили
- •Наложение различных стилей
- •2.1.6. Рисунки
- •Составные картинки
- •Элемент map
- •2.1.7. Таблицы
- •2.1.8. Формы html
- •Атрибут checkbox
- •Атрибут image
- •Атрибут password
- •Атрибут radio
- •Атрибут reset
- •Атрибут select
- •Атрибут submit
- •Атрибут textarea
- •2.1.9. Фpеймы
- •3.1. Базовый синтаксис css
- •3.3. Применение свойства цвета.
- •Свойство 'background-color'
- •3.4. Фоновые изображения [background-image]
- •3.5. Семейство шрифта [font-family]
- •3.6. Боксовая модель
- •Боксовая модель в css
- •3.7.Принципы css-позиционирования
- •Абсолютное позиционирование
- •Относительное позиционирование
- •4.1. Цвет и форма.
- •4.2. Модульная сетка в дизайне.
- •4.3. Типы сайтов. Модели организации сайта.
- •4.3.1. Линейная организация
- •4.3.2. Решетка
- •4.3.3. Иерархия
- •4.3.4. Паутина
- •5.1. Теория навигации
- •5.1.1 Размещение элементов навигации
- •5.1.2. Правила навигации
- •5.1.3. Основные приемы создания ссылок
- •5.2. Программы для создания web-страниц
- •6.1. Изображения в Интернет: технологии gif, jpeg, png, Flash.
- •6.1.1. Форматы изображений
- •6.1.2. Формат gif
- •6.1.3. Формат jpeg
- •6.1.4. Формат png
- •6.1.6. Другие форматы изображений
- •6.2. Анимация
- •6.3. Звук
- •6.4 Видео
- •7.1. Технологии программирования
- •7.2. Программирование на стороне клиента
- •7.2. Синтаксис языка JavaScript и основы программирования на нем
- •8.1. Технологии, работающие на стороне сервера
- •8.2. Сценарии на стороне сервера
- •8.3. Технологии создания интерактивных страниц: asp, php, ssi
- •8.4. Серверные программные интерфейсы приложений
- •8.4. Сетевые и сопутствующие протоколы
- •8.4.3. Адресация: url/uri/urn/urc
- •9.4 Работа с формами
- •9.5. Рнр: выборочная загрузка
- •9.6 Рнр: гостевая книга
- •10.1. Базовая модель Web-процесса
- •10.2. Планирование сайта
- •I определение цели
- •2. Определение аудитории
- •3. Профилирование пользователей
- •4. Требования к сайту
- •II план сайта
- •III разработка дизайна
- •Логотип
- •Навигатор по сайту
- •IV создание пробного сайта
- •V тестирование
- •10.3 Публикация и продвижение сайта
- •Упражнение 2 – создание списка
- •Упражнение 3 - вставка рисунка
- •Упражнение 4 – гиперссылки
- •Лабораторная работа № 2 Создание home page средствами Notepad (папка web)
- •Последовательность выполнения работы
- •Лабораторная работа № 3
- •Сведения о пользователе
- •Лабораторная работа № 4 Создание домашней странички (папка web)
- •Лабораторная работа № 5 JavaScript
- •Лабораторная работа № 6 JavaScript Создание и обработка форм в электронных документах, их назначение.
- •Лабораторная работа № 7 Тема «Использование Flash-технологий для создания Web-сайтов»
- •Задания для самостоятельной работы
- •Упражнение 4 Создание анимационного ролика «Шарик летит по улице города»
- •Упражнение 6 Создание собственных кнопок
- •Задания для самостоятельной работы
- •Лабораторная работа № 8. Создание web-сайта средствами редактора Dreamweaver (папка web-6)
- •5 Проверить корректность работы файла стилей!
- •Лабораторная работа №9 по технологиям Internet.
- •Лабораторная работа 10. Введение в язык php
- •Лабораторная работа 11. Обработка данных форм
- •Лабораторная работа 12. Массивы
Составные картинки
Параметр ISMAP используется для указания на то, что картинка составная. Таким образом можно поставить в соответствие одному изображению несколько гиперссылок. В этом случае элемент IMG ISMAP указывается внутри элемента <A> с соответствующим HREF.
Элемент map
Используется для обозначения области изображения, по которой пользователь может щелкнуть мышкой и перейти по ссылке к другому ресурсу. Поддерживает атрибут NAME, где указыватся наименование области изображения (используется атрибутом USEMAP ).
Например:
<MAP NAME= "SQUARE"> <AREA SHAPE = RECT COORDS = "0, 0, 10, 10"> </ MAP>
2.1.7. Таблицы
Элемент <TABLE>
Используется для создания таблиц в HTML-документах. Таблица начинается с необязательного заголовка, за которым следует одна или более строк. Каждая из этих строк состоит из одной либо нескольких ячеек, представляющих заголовок и ячейки с данными. Таблица может содержать параграфы, списки, заголовки, формы, рисунки и отформатированный текст.
По умолчанию броузер выводит текст по центру в ячейке заголовка таблицы, а в ячейках с данными - с выравниванием по левому краю.
Данный элемент поддеpживает атpибуты: ALIGN, BORDER, CELLPADDING, CELLSPACING, WIDTH.
Элемент <TH>
Используется для определения ячеек заголовка таблицы. Обычно заголовок броузер выводит более крупным и жирным шрифтом нежели данные.
Данный элемент поддеpживает атpибуты: ALIGN, COLSPAN, HEIGHT, NOWRAP, VALIGN, WIDTH .
Элемент <TD>
Используется для определения атрибутов отдельных ячеек таблицы.
Данный элемент поддеpживает атpибуты: ALIGN, COLSPAN, HEIGHT, NOWRAP, VALIGN, WIDTH .
Элемент <TR>
Используется для формирования строк в таблице. С его помощью устанавливается вертикальное и горизонтальное выравнивание содержимого ячеек по всей строке. Можно также запретить перенос слов в любой строке таблицы.
Данный элемент поддеpживает атpибуты: ALIGN, VALIGN.
Пример:
<TABLE BORDER> <TR> <TH COLSPAN=3 HEIGHT=10> <B> Моя таблица </B> </TH> </TR> <TR> <TH> Данные </TH> <TH> Доп. данные </TH> <TH> Примечания </TH> </TR> <TR> <TD> A </TD> <TD> B </TD> <TD> C </TD> </TR> <TR> <TD> D </TD> <TD> E </TD> <TD> F </TD> </TR> </TABLE>
Что дает на экране:
Моя таблица | ||
Данные |
Доп. данные |
Примечания |
A |
B |
C |
D |
E |
F |
Элемент <CAPTION>
Используется при форматировании наименований таблиц. Поддерживает атрибут ALIGN.
Например: <CAPTION ALIGN=CENTER> Таблица расходов </CAPTION>
2.1.8. Формы html
Форма HTML представляет собой документ, созданный с использованием элементов HTML. Назначением формы является сбор информации от пользователей. После того как пользователь заполнит форму и запускает процесс ее обработки, информация из нее попадает в программу, работающую на сервере. Другая программа под названием Common Gateway Interface (CGI) обрабатывает ее. Таким образом пользователь может интерактивно взаимодействовать с сервером Web через Internet.
Элементы формы (элемент <FORM>)
Элемент <FORM> используется для обозначения документа как формы. Данный элемент определяет границы использования других элементов, размещаемых в форме.
<FORM> определяется последовательностью элементов <INPUT>, размещенных внутри пары <FORM> и </FORM>. Элемент формы использует как метод, так и действие для описания обработки формой данных, вводимых пользователем:
метод (GET или POST) - определяет, как программист должен обрабатывать входные данные из формы.
действие - указывает на URI программы, ответственной за обработку данных.
Данный элемент поддерживает атрибуты ACTION, ENCTYPE, METHOD .
Сбор данных при помощи форм (элемент <INPUT>)
Элемент <INPUT> используется для определения области внутри формы, где собираются данные. Данный элемент представляет собой поле для ввода информации пользователем (обычно одна строка текста). В этом случае требуется наличие атрибута NAME для определения наименования переменной поля.
Можно использовать следующие атрибуты:
MAXLENGTH - ограничивает число вводимых символов (по умолчанию ограничений нет)
SIZE - размер видимой на экране области, занимаемой текущим полем. Если MAXLENGTH> SIZE, броузер будет прокручивать данные в окне.
VALUE - определяет начальное значение поля ввода.
а также атpибуты: ALIGN, CHECKED, NAME, SRC, TYPE .