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

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

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

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

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

Для начала необходимо подготовить каталог для работы и основные необходимые файлы.
Для работы с файлами рекомендуется использовать ПО 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>
      	<a href="glava1.html" target="main">Глава1 </a>
      </td></tr>
      <tr><td>
      	<a href="glava2.html" target="main">Глава2 </a>
      </td></tr>
      <tr><td>
      	<a href="glava3.html" target="main">Глава3 </a>
      </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 нашего сайта.

      А теперь, предлагаем пройти тест по HTML онлайн. Если у Вас есть пароль, то выберите пройти тест HTML с паролем.

    Поделитесь уроком с коллегами и друзьями:

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    *
    *


    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить