- •Фгбоу впо «Башкирский государственный педагогический университет
- •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 Создание home page средствами Notepad (папка web)
Основные требования:
1. табличная структура (меню, контент, заголовок);
2. сайт содержит 4 страницы:
Главная – index.htm
Обо мне – str1.htm
Мои друзья - str1.htm
Мои увлечения - str1.htm
3. Используются иллюстрации (в отдельной папке img).
заголовок | |
Обо мне Мои друзья Мои увлечения
На главную |
контент |
Последовательность выполнения работы
1. Определите контент вашей домашней странички.
2. Определите внешний вид (расположение меню, заголовков, контента)
3. Напишите главную страничку index.htm, на которой с самого начала предусмотрено наличие ссылок на страницы str1.htm, str2. htm, str3.htm
<html>
<head>
<title>my home page</title>
</head>
<body>
<table width="100%" height="100%" border="1" cellpadding="5" cellspacing="5" bordercolor="#000000" bgcolor="#000000">
<tr bordercolor="#FFFFFF">
<td height="50" colspan="2" >Моя домашняя страничка</td>
</tr>
<tr>
<td width="30%" valign="top">
<p> <a href="str1.htm">Обо мне </a></p>
<p> <a href="str2.htm">Мои друзья</a></p>
<p> <a href="str3.htm">Мои увлечения</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> на главную </p>
</td>
<td width="70%" height="100" valign="top">
<p>Добро поажаловать на мою домашнюю страничку! </p>
<p>Вы находитесь на ее главной страничке </p>
</td>
</tr>
</table>
</body>
</html>
4. Для сохранения единого стиля сохраните файл index под именами: str1.htm, str2. htm, str3.htm.
Структура сатй готова.
5. Последовательно, начиная с файла index, заполните контент (2, 3 предложения на страницу).
Лабораторная работа № 3
Упражнение 1. Создание гостевой книги:
Напишите страничку вашей гостевой книги gk.htm вида:
Сведения о пользователе
Начало формы
Ваше имя:
Ваш пол: МужскойЖенский
Ваши интересы: КомпьютерыНаукаСпорт
Конец формы
<html>
<head>
<title>Сведения о пользователе</title>
</head>
<body>
<div align=center><b>Сведения о пользователе</b>
<form action=mailto:e-mail method=post>
<label for name=imya>Ваше имя: </label>
<input type =text name=imya value=ФИО size=30>
<p>
<label for=age>Сколько Вам лет? </label>
<select name=age size=1>
<option value=10> менее 20
<option value=20> 20-30
<option value=30> 30-40
</select>
<p>
<label for=pol>Ваш пол:</label>
<input type=radio name=pol value=M> Мужской
<input type=radio name=pol value=W > Женский
<p>
<label for="intrests">Ваши интересы:</label>
<br>
<input type=checkbox name=intrests1 value=comp checked> Компьютеры
<input type=checkbox name=intrests1 value=science> Наука
<input type=checkbox name=intrests1 value=sport> Спорт
<p>
<input type=submit value="отправить">
<input type=reset value="очистить форму">
</form>
</body>
</html>
Упражнение 2. Использование таблиц стилей Простой пример использования каскадных таблиц стилей включает в себя html и css файлы, текст которых указан ниже:
Содержимое файла example.html:
<html> <head> <link rel=stylesheet type="text/css" href="style.css"> <title>пример использования каскадных таблиц стилей</title> </head> <body> <div class=first>каскадные таблицы стилей -</div> <div class=second>это</div> <div class=third>удобно!</div> </body> </html>
Содержимое файла style.css:
body {font-family: Arial, sans-serif; text-align: center} .first {color: brown; margin-top: 60px; font-size: 40px;} .second {color: green; margin-top: -50px; font-size: 100px;} .third {color: black; margin-top: -80px; font-size: 120px; font-weight: bold}