Лабораторная работа №4
Создание web-сайта
- "index.html" - главная страница
- "info.html" - страница с информацией о городе
- "map.html" - страница с картой города
1. Создание внешней таблицы стилей
Создать на "Рабочем столе" каталог "lab4".
Создать в каталоге "lab4" текстовый файл "styles.css", для этого
- Запустить текстовый редактор, например, программу "Блокнот"
(меню "Пуск"->"Программы"->"Стандартные"->"Блокнот") - В меню "Файл" выбрать пункт "Сохранить как..."
- Указать каталог "lab4"
- Указать имя файла "styles.css" (имя файла взять в двойные кавычки, для того, чтобы автоматически к названию файла не добавлялось расширение .txt)
- Нажать на кнопку "Сохранить"
Начиная с первой строки файла "styles.css" между символами "/*" и "*/" расположить комментарий, указывающий на авторские права в произвольной форме на английском языке, например:
Далее в файле "styles.css" вручную задать все необходимые свойства тегов, используемых в Ваших html-страницах.
Например, для тега <body> можно установить свойства отступов от границ окна, равными нулю и цвет фона:
для задания цвета и размера текста, размещаемого внутри тегов <p></p> в файл стилей "styles.css" можно добавить:
для задания свойств заголовков первого уровня <h1></h1>:
для задания свойств таблиц <table></table>:
для задания свойств всех ячеек таблиц <td></td>:
и так далее для всех тегов, которые будут встречаться в html-коде Ваших трех страниц.
Сохранить файл "styles.css" на диск.
2. Создание заглавной страницы "index.html"
Создать в каталоге "lab4" текстовый файл "index.html".
В файле "index.html" вручную разместить html-код страницы.
Например, можно написать основную структуру html-страницы:
Тег <link> подключает внешнюю таблицу стилей "styles.css".
Между тегами <title></title> расположить название страницы, например, "Томск - Главная".
Затем, между тегами <body></body> расположить таблицу, состоящую, например, из четырех строк, а в каждой строке по три ячейки, причем в первой, второй и четвертой строке три ячейки объединены в одну:
Такая таблица в этом случае должна выглядеть примерно так:
Наполнение страницы информацией (контентом)
- В первой ячейке первой строки таблицы разместить герб и название города
- Во первой ячейке второй строки таблицы поместить информацию о назначении Вашего сайта, например, "Информационный портал", "Учебный проект"
- В первой ячейке третьей строки разместить три гиперссылки на каждую из Ваших html-страниц ("index.html", "info.html", "map.html")
- Во второй ячейке третьей строки разместить описание сайта (это та первая информация, которую видит новый посетитель, по-этому она должна быть краткой и по сути дела), например, "На сайте представлена информация о городе Томск. Для получения информации воспользуйтесь меню в левой части окна."
- В третьей ячейке третьей строки расположить ссылки на другие сайты похожей тематики, и другую информацию, которая может заинтересовать посетиля сайта
- В первой ячейке четвертой строки поместить подпись разработчика
Задание размеров ячеек
Если посмотреть на таблицу, то видно, что она состоит из шести ячеек. По-этому можно в таблицу стилей добавить шесть стилей - для каждой ячейки свой стиль (высота, ширина, цвет).Добавления в файл "styles.css"
Например, можно добавить в файл "styles.css" стиль первой ячейки "cell1" (высота ячейки: 100 пикселей):создать стиль второй ячейки (высота ячейки: 20 пикселей):
для третьей (высота: 500, ширина: 200):
и так для каждой ячейки: "cell4" (высота: 500), "cell5" (высота: 500; ширина: 200), "cell6" (высота: 30).
Сохранить файл "styles.css" на диск.
Добавления в файл "index.html"
В файле "index.html" в свойствах каждой ячеки указать название применяемого к ней стиля. Например, для первой ячейки в теге <td> добавить свойство class='cell1'для второй ячейки указать
и так далее (нумерация ячеек идет сверху вниз и слево направо).
В итоге в теге <td> каждой ячейки должен быть указан стиль.
Сохранить файл "index.html" на диск.
Задание внешнего вида ячеек
При необходимости для каждой ячейки можно задать (добавлением свойств в стили "cell1", "cell2", ... "cell6")- цвет шрифта (например, "color: blue;")
- размер шрифта (например, "font-size: 12pt;")
- начертание шрифта (например, "font-weight: bold;")
- тип шрифта (например, "font-family: Sans-Serif, Arial, Tahoma, Helvetica;")
- выравнивание текста (например, "text-align: center;")
- вертикальное выравнивание в ячейке (например, "vertical-align: top;")
- фоновый цвет (например, "background-color: lightblue;")
- фоновое изображение (например, "background-image: url('clover.png');")
3. Создание страницы с информацией о городе "info.html"
- Создать текстовый файл "info.html" в каталоге "lab4"
- Копировать весь текст из файла "index.html"
- Поменять название страницы в теге <title>, например на, "Томск - Информация"
- Поменять содержимое второй ячейки третьей строки на информацию о городе
- Сохранить файл на диск
4. Создание страницы с картой города "map.html"
- Создать текстовый файл "map.html" в каталоге "lab4"
- Копировать весь текст из файла "index.html"
- Поменять название страницы в теге <title>, например на, "Томск - Карта"
- Поменять содержимое второй ячейки третьей строки на изображение карты города
- Сохранить файл на диск
5. Размещение сайта на сервере
- Создать на сервере в корневом каталоге подкаталог "lab3" (именно номер 3, для сохранения файлов предыдущей лабораторной работы)
- Скопировать содержимое корневого каталога (файлов предыдущей лабораторной работы) в каталог "lab3" на сервере
- Скопировать содержимое каталога "lab4" локального компьютера в корневой каталог на сервере
6. Оформление отчета по лабораторной работе
Отправить электронное письмо на адрес @.
В теме письма обязательно указать номер лабораторной работы, например, "lab4".
В тексте письма указать адрес сайта, а также Фамилию Имя Отчество (прикрепленные файлы не отправлять).
Информацию о зачете лабораторной работы можно посмотреть в разделе "Список групп" рядом с описаниями лабораторных работ.
