- •Фгбоу впо «Башкирский государственный педагогический университет
- •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. Массивы
Лабораторная работа №9 по технологиям Internet.
Тема: Верстка страницы с помощью таблиц.
Цель: научиться структурировать web-страницу с помощью таблиц.
Краткие теоретические сведения:
Для создания таблицы служит тег <table></table>. Чтобы мы смогли увидеть границы таблицы есть у этого тега атрибут border, величина которого измеряется в пикселях.
Тег <tr></tr> разбивает таблицу на строки.
Чтобы разбить строки на ячейки (именно строки — не разбив таблицу на строки мы не сможем разбить её на ячейки) есть тег <td></td>.
Для указания заголовка таблицы служит тег <th></th>.
cellspacing — расстояние между соседними ячейками.
Также можно указать расстояния между ячейками и их содержанием — с помощью атрибута cellpadding.
Таблице и её столбцам (ячейкам) можно задавать такие атрибуты, как ширину (width) и высоту (height) в пикселях или процентах, цвет фона (bgcolor). У строки нет атрибута ширины, она шириной на всю таблицу.
Colspan – объединение по горизонтали.
Rowspan – объединение ячеек по вертикали.
пример:
<table border="1" cellpadding="10"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> </table>
пример объединения ячеек:
<table border="1" cellpadding="10"> <tr><td colspan="2">1</td><td rowspan="2">2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td colspan="3">7</td><td>8</td><td>9</td></tr> </table>
Работа с якорными тегами документа содержит два важных этапа. Во-первых, определите, на какие разделы HTML-документа вы хотите сослаться (<a name="raz1">Раздел 1</a><br>). Во-вторых, введите теги (<a href="#raz1">Переход к разделу 1</a><br>), указывающие на эти разделы.
Вопросы:
Как вставить изображение?
Как создается ссылка-изображение?
Как создается список нумерованный и маркированный?
С помощью каких тегов создается таблица?
Какой тег задает строку таблицы?
Какой тег задает ячейку таблицы? И в каком теге должна прописываться ячейка?
Задание:
Необходимо написать такую страницу:
Ход работы:
В текстовом редакторе Блокнот наберите следующий код. Затем сохраните этот файл под названием mypage.html и просмотрите, что у вас получилось.
<html>
<head>
<title>Верстка страницы с помощью таблиц</title>
</head>
<body>
<table width="800" height="100%" align="center" cellspacing="1" bgcolor="000000">
<tr height="150" align="center" bgcolor="ffffff"><td colspan="2">
<a href="http://yandex.ru" title="Перейти на сайт yandex.ru"><img src="i.jpg" alt="Логотип сайта Yandex.ru" border="0"></a>
</td></tr>
<tr valign="top" align="center" bgcolor="ffffff"><td width="200">Меню</td><td>Содержание</td></tr>
</table>
</body>
</html>
Для создания окошек для меню будет использовать всё те же таблицы:
<table border="1" width="180" cellspacing="0">
<tr bgcolor="4682b4" height="20"><th><font color="ffffff" size="1" face="verdana">
.:: Название меню ::.</font></th></tr> <tr><td><font size="1" face="verdana">Содержание</font></td></tr> </table>
Сделаем аккуратный черный бордюр нашегоменю толщиной в 1 пиксель. В HTML нет специального атрибута для изменения цвета бордюров, но это можно исправить следующим образом: отключаем бордюры (border="0" или просто удаляем этот атрибут), затем расстояние между ячейками задаем равным 1 пикселю (cellspacing="1"), фон таблицы задаем чёрным, а фон ячейки с содержанием — белым — с помощью атрибута bgcolor:
<table border="0" width="180" cellspacing="1" bgcolor="000000" cellpadding="5">
<tr bgcolor="4682b4"><th><font color="ffffff" size="1" face="verdana">.:: Название меню ::.</font></th></tr>
<tr><td bgcolor="ffffff"><font size="1" face="verdana">Содержание</font></td></tr>
</table>
Заполнение нужными пунктами и вставка в страницу:
<table width="180" cellspacing="1" bgcolor="000000" cellpadding="5">
<tr bgcolor="4682b4"><th><font color="ffffff" size="1" face="verdana">
.:: Избранное ::.
</font></th></tr>
<tr><td bgcolor="ffffff"><font size="1" face="verdana">
<a href="http://yandex.ru" title="Перейти на сайт Yandex.ru">Yandex.ru</a><br>
<a href="http://bspu.ru" title="Перейти на сайт bspu.ru">bspu.ru</a><br>
</font></td></tr>
</table>
Просмотрите что получилось и аналогично пропишите второе меню.
Настало время сделать окошки для новостей сайта — они выполняются по аналогии с менюшками. В данном случае снизу необходимо добавить ещё одну строку и окошко сделать пошире:
<table border="0" width="550" height="200" cellspacing="1" bgcolor="000000" cellpadding="5">
<tr bgcolor="4682b4"><th><font color="ffffff" size="1" face="verdana">.:: Учим язык HTML | Дата: 3.11.2009 ::.</font></th></tr>
<tr><td bgcolor="ffffff"><font size="1" face="verdana">
<center><img src="simple1.jpg" alt="Просто пример картинки..." vspace="7"></center>
Итак, допустим, что мы уже нарисовали все элементы, входящие в дизайн сайта (это могут быть: логотип, кнопки, окошки, меню и другая графика), придумали как это будет выглядеть в сборе, сделали эскиз. Теперь нам нужно всё это как-то собрать, объединить на web-странице. Для этого, для начала, нам понадобятся знания языка HTML.<br><br>
<center>[ <a href="http://yandex.ru/">Подробнее</a> ]</center>
</font></td></tr>
<tr bgcolor="4682b4" height="16"><td><font color="ffffff" size="1" face="verdana">Автор новости: Иванов И.И.</font></td></tr>
</table>
Помимо всего выше указанного:
измените бордюры основной таблицы;
добавьте комментарии к коду;
создайте нумерованный список с вложенным в него маркированным списком;
Требования к оформлению отчета по работе:
Отчет должен содержать цели и выводы. Необходимо описать ход работы, прописав окончательный код с комментариями и картинкой получившейся странички.
Задание для самостоятельной работы:
Создайте странички на которые будет осуществляться переход из меню:
22 группа (главная страничка) – на ней нужно разместить логотип вашей группы по центру, а вокруг логотипа ссылки-изоброжения на все остальные странички.
Учащиеся – эта страничка должна содержать список студентов группы и короткие характеристики по каждому студенту. Ссылки на характеристики нужно прописать с помощью якорей.
Дисциплины – перечислить дисциплины изучаемые вами. Коротко описать суть каждой дисциплины. Переход в описанию прописать с помощью якорей.
Преподаватели – в меню этой страницы разместите список ФИО, чтобы при наведении мыши на ФИО всплывала подсказка о преподаваемом предмете, а в контенте фотографии каждого преподавателя, если нет фото должен быть альтернативный текст.
Мероприятия – в меню список мероприятий, в контенте фотографии.
О нас – свободная форма заполнения, на ваше усмотрение.