HTML Урок 9. Разработка сайта с нуля

Авторadmin / Опубликовано

Разработка сайта с нуля самостоятельно

Цель урока: рассматривается алгоритм разработки сайта с нуля самостоятельно, т.е. без использования конструкторов сайта, систем управления сайтом и других вспомогательных подобным средств

Разработка структуры

Сегодня появилось много средств для разработки сайтов, это и специализированный порталы, предназначенные для конструирования сайта на основе предложенных шаблонов, и системы управления сайтами и другие подобные средства. Данные системы, естественно, облегчают процесс создания ресурса. Но в учебных целях необходимо научиться создавать сайт с нуля самостоятельно. Для этого выберем простую схему, при которой для организации интерфейса страниц сайта используется фреймовая структура.

Для начала необходимо подготовить каталог для работы и основные необходимые файлы.
Для работы с файлами рекомендуется использовать ПО Notepad++.
Создайте каталог для работы (с названием site, например) и расположите в нем две папки согласно рисунку:
Разработка сайта с нуля: структура

В основном каталоге создайте и сохраните html-файлы со следующими названиями:

  • index.html
  • header.html
  • menu.html
  • titul.html
  • footer.html
  • glava1.html

Откройте файл главный запускаемый файл — index.html (файл-раскладка) и добавьте код для организации фреймовой структуры:

<html>
<head>
	<title> Фреймы </title>
</head>
<frameset rows="10%,80%,*">
	<frame src="header.html" noresize>
	<frameset cols="20%,80%">
		<frame src="menu.html">
		<frame src="titul.html" name="main">
	</frameset>
	<frame src="footer.html" >
</frameset>
</html>

фреймовая структура сайта с нуля
Затем необходимо добавить код в предназначенные для этого веб-страницы:

  • header.html
    • <html>
<head>
</head>
<body>
<h1>Лого/Заголовок</h1>
</body>
</html>
  • menu.html
    • <html>
<head>
</head>
<body>
<h1>Меню</h1>
</body>
</html>
  • titul.html
    • <html>
<head>
</head>
<body>
<h1>Описание</h1>
</body>
</html>
  • footer.html
    • <html>
<head>
</head>
<body>
<h1>Копирайт</h1>
</body>
</html>
  • glava1.html
    • <html>
<head>
</head>
<body>
<h1>Глава 1</h1>
</body>
</html>

    Организация работы гиперссылок в меню

    Для правильной работы гиперссылок в файле menu.html, а именно, чтобы запускаемые файлы открывались именно в правом от меню фрейме, необходимо выполнить два пункта:

    1. В файле фреймовой структуры добавить имя для фрейма, в котором мы собираемся открывать веб-страницы в меню:

      <frame src="titul.html" name="main">

      Это мы уже сделали при создании фреймовой структуры. Нужный нам фрейм называется у нас main.

    2. В файле menu.html добавить код гиперссылок:

      <html>
<head>
</head>
<body>
<h1> Меню</h1>
<table>
<tr><td>
	<а href="glava1.html" target="main" rel="noopener noreferrer">Глава1 </а>
</td></tr>
<tr><td>
	<а href="glava2.html" target="main" rel="noopener noreferrer">Глава2 </а>
</td></tr>
<tr><td>
	<а href="glava3.html" target="main" rel="noopener noreferrer">Глава3 </а>
</td></tr>
</table>			
</body>

      В ссылках мы указали цель вывода страниц — фрейм с названием main — target="main".

      Добавление CSS-стилей

      Для оформления сайта, а в некоторых случаях и придания динамичности его элементов необходимо использовать каскадные таблицы стилей.

      Сначала создайте документ для хранения стилей — файл style.css, и расположите его в папке — files.

      Для подключения созданного стилевого файла ко всем страницам сайта, необходимо расположить ссылку на этот файл в код всех страниц, кроме файла с фреймовой структурой (index.html):

      <html>
<head>
<link rel="stylesheet" type="text/css" href="files/style.css">
</head>
...

      Для добавления правил стилизации тегов ознакомьтесь с уроками CSS нашего сайта.

    Рубрики