Сайт
Чукина
Владимира
Владимировича

5 октября 2023 г.

Лабораторная работа №4
Создание web-сайта

Цель работы - создание web-сайта, состоящего из трех html-страниц:
  • "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". В тексте письма указать адрес сайта, а также Фамилию Имя Отчество (прикрепленные файлы не отправлять).
Информацию о зачете лабораторной работы можно посмотреть в разделе "Список групп" рядом с описаниями лабораторных работ.

Православное радио "Воскресенье"   Валаамский монастырь   Медиа-сервер "Россия Православная"   Интернет-магазин "ЛинуксЦентр"   Яндекс цитирования   Valid CSS!   Valid XHTML 1.0 Strict!   Unicode Encoded Badge