Итак. Пришло время создать нечто более сложное, чем мы делали до этого, но используя полученные знания в предыдущих уроках.
В этом уроке курса MM часть 1 мы сделаем 2-страничный сайт...например, о заработке в интернете.
Сначала определимся, как это будет приблизительно выглядеть.
Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое) сайта.
Идея понятна? Приступаем.
Запускаем Блокнот и пишем наш минимальный набор для создания страницы .
Теперь напишем между тегами
Далее разместим теги
Если вы не забыли, теги
Для создания каркаса страницы мы будем использовать таблицу, но чуть более хитрую, чем мы проходили в HTML-уроке о таблицах . Нам нужна таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2 ячейки, т.е. вот такая нам нужна таблица:
В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке 3 будет содержимое страницы.
Для того чтобы сделать такую таблицу, напишите вот такой код
Т.е. код нашей страницы будет вот такой:
Как видите, в такой вот "хитрой" таблице используется лишь 1 пара тегов
Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из расчета, что кто-то из посетителей сайта может использовать монитор 800х600 точек, и просматривать более широкий сайт ему будет некомфортно.
Высоту таблицы сделаем 600 пикселей
Т.е. код нашей страницы теперь будет вот такой.
Здесь у нас будет шапка
Здесь будет меню
Чтобы стало видно границы частей сайта - "зальем" область меню и область шапки цветом. Например, вот так
Здесь
у нас будет шапка
Здесь будет меню
Здесь будет содержимое страницы
Сохраните файл под именем index.html , для того чтобы его можно было просмотреть, как он будет выглядеть в браузере.
Теперь вставляем картинку шапки в наш сайт. О том, .
Здесь будет меню
Здесь будет содержимое страницы
Теперь установим точные размеры ячейки таблицы, предназначенной для шапки. Т.к. картинка шапки у нас имеет размер 750х120, то и размер ячейки таблицы сделаем 750 х 120.
Здесь будет меню
Здесь будет содержимое страницы
ТАК .
Установим ширину меню равной 200 пикселей, для этого добавим width="200" в соответствующий тег
Здесь будет меню
Здесь будет содержимое страницы
Задний план меню "зальем" вот таким фоном, для этого сохраните этот фон с его "родным" именем sv11.jpg в ту же директорию, где находится файл страницы.
А теперь прописываем нужный код
Здесь будет меню
Здесь будет содержимое страницы
Теперь наша страница будет выглядеть ТАК .
У вас, возможно, возник вопрос, почему браузер не "отрабатывает" ширину меню 200? Меню ведь выглядит шире, чем 200 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места, если начать писать текст в основном разделе страницы. (Или можно задать жестко ширину ячейки, в которой будем писать контент, дописав width="550" )
Чтобы подтвердить это, добавим текста на наш сайт.
Здесь будет меню
Теперь все почти ОК...Почти, потому что налицо небольшие проблемки. Текст отображается ровно посередине (по вертикали), а следовало бы, чтобы текст был расположен вверху ячеек.
Для этого нам надо прописать еще один параметр в теге
Этот параметр мы не проходили в уроке о таблицах , - это параметр выравнивания по вертикали valign="top".
Значение top означает, что содержимое будет располагаться вверху.
Здесь будет меню
Этот сайт посвящен
заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать
и подскажет где и как можно заработать в сети.
Теперь наша страница будет выглядеть ТАК .
Главная
Этот сайт посвящен заработку в интернете. Если
вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и
как можно заработать в сети.
Теперь надо сделать текст меню в виде ссылок. Слово Главная залинкуем на страницу index.html, а слово Ссылки на страницу ssilki.html, которую мы создадим чуть позже.
Главная
Ссылки
Этот сайт посвящен заработку в интернете. Если
вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и
как можно заработать в сети.
Теперь наш сайт будет выглядеть ТАК .
Осталось сделать вторую страницу сайта. Для того чтобы упростить работу, сделаем так - сохраним нашу страницу index.html под другим именем ssilki.html, а затем подредактируем файл.
Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы - index.html и ssilki.html.
Теперь изменим название страницы (между тегами
Главная Сайт
о заработке в интернете MoneyMaster
На этой странице будут
размещены ссылки на сайты о заработке в интернете