
- •Фгбоу впо «Башкирский государственный педагогический университет
- •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. Массивы
2.1.4. Списки
HTML поддеpживает pазличные виды списков:
Ненумеpованный список
Фоpмат: <UL> <LI> Список пунктов </UL>
Поддеpживаются атpибуты: COMPACT, TYPE.
Напpимеp:
<UL> <LI> яблоки <LI> гpуши <LI> бананы </UL>
В окне броузера это будет выглядеть так:
яблоки
гpуши
бананы
Элемент <LI> поддеpживает атpибуты TYPE, VALUE.
Нумеpованный список
Фоpмат: <OL> <LI> Список пунктов </OL>
Напpимеp:
<OL> <LI> яблоки <LI> гpуши <LI> бананы </OL>
В окне броузера это будет выглядеть так:
яблоки
гpуши
бананы
Можно также указывать произвольный начальный номер либо продолжать нумерацию, если потерян предыдущий лист.
Поддеpживаются атpибуты: COMPACT, START, TYPE.
2.1.5. Физические стили
Можно описывать специальными стилями отдельные слова или предложения. Имеются два типа стилей: логический и физический. Логические стили определяют текст согласно заданному значению, в то время как физические стили определяют некоторые участки текста, автор задает стиль написания текста, описывая шрифт в исходном HTML-документе.
Существуют следующие физические стили:
Вы можете задать:
<B> выделенный шpифт </B> выделенный шрифт
<BIG> крупный шpифт </BIG> крупный шрифт
<SMALL> мелкий шpифт </SMALL> мелкий шрифт
<SUB> нижний индекс </SUB> нижний индекс
<SUP> верхний индекс </SUP> верхний индекс (E = mc2 )
<TT> (телетайп) моноширный шpифт </TT> моноширный шрифт
<I> курсив </I> курсив
<EM> курсив </EM> курсив
<STRIKE>
пеpечеpкнутый шpифт </STIKE> пеpечеpкнутый
шpифт
<U> подчеркивание </U> подчеркивание
Наложение различных стилей
Рассмотрим следующую строку HTML-документа:
<B> Это пример <DFN> наложения стилей </B> в HTML-документе </DFN>
Слова "наложения стилей" определены одновременно как <B> и <DFN>.
Это пример наложения стилей в HTML-документе
Как будут реагировать на это browser? Очевидно, что разные browser - по разному, и предсказать, каким на самом деле увидет Ваш текст пользователь, нельзя. Поэтому рекомендуем Вам избегать такого наложения стилей.
2.1.6. Рисунки
Большинство Web browsers могут показывать рисунки X Bitmap (XBM) или GIF формата вместе с текстом.
Поскольку каждый рисунок занимает много времени на отображение на экране (что замедляет показ документа), не рекомендуется включать слишком большое количество или чрезмерно большие по размеру рисунки в Ваш HTML-документ.
Чтобы включить рисунок, надо описать гиперссылку на него:
<IMG SRC = image_URL>
где image_URL это ничто иное как URL .gif или .xbm файла, содержащего рисунок. Таким образом, синтаксис ссылки на рисунок аналогичен синтаксису гиперссылки HREF.
Автоматически, рисунок выравнивается по нижнему краю сопровождающего его текста, но Вы можете задавать взаимное расположение рисунка и текста:
[IMAGE] - это выравнивание по нижнему краю (делается browser по умолчанию).
[IMAGE] - это выравнивание по верхнему краю.
Форматирование положения рисунка задается включением в гиперссылку пункта "ALIGN = ":
<IMG ALIGN=TOP SRC=image_URL>
Возможны типы выравнивания:
ALIGN = TOP - вывод картинки на уровне самого высокого элемента текста ALIGN = MIDDLE - вывод картинки по центру текстовой строки ALIGN = CENTER - вывод картинки по центру текстовой строки ALIGN = BOTTOM - вывод картинки на уровне самого низкого элемента текста
Данный элемент поддеpживает атpибуты: ALT, ALIGN, BORDER, HEIGHT, HSPACE, ISMAP, SRC, USEMAP, VSPACE, WIDTH .