HTML Компоновки - Использование Таблиц

Поможем в ✍️ написании учебной работы

Имя

Поможем с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой

Нажимая кнопку "Продолжить", я принимаю политику конфиденциальности

Простейший способ создания компоновок - использование HTML тега <table>.

Следующий пример использует таблицу с тремя строками и двумя столбцами - первая и последняя строки занимают оба столбца используя атрибут colspan:

Пример

<html> <body> <table border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>Главный Заголовок Страницы</h1> </td> </tr> <tr <td style="background-color:#FFD700; width:100px; text-align:top;"> <b>Меню</b><br /> HTML<br /> CSS<br /> JavaScript </td> <td style="background-color:#eeeeee; height:200px; width:400px; text-align:top;"> Здесь идет содержание</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500; text-align:center;"> © 2011 Uroki-HTML.ru</td> </tr> </table> </body> </html>

HTML код выше будет выглядеть в браузере так:

Главный Заголовок Страницы

Меню HTML CSS JavaScript Здесь идет содержание

Замечание: Даже если с помощью HTML таблиц можно делать приличные компоновки, таблицы были созданы для представления табличных данных - НЕ как инструмент для компоновки!

HTML Компоновки - Использование Div Элементов

Элемент div - это блочный элемент для группировки HTML элементов.

Следующий пример использует пять элементов div для создания компоновки с несколькими стобцами, в результате получается тот же результат как и в предыдущем примере:

Пример

<html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Главный Заголовок Страницы</h1></div> <div id="menu" style="background-color:#FFD700; height:200px; width:100px; float:left;"> <b>Меню</b><br /> HTML<br /> CSS<br /> JavaScript</div> <div id="content" style="background-color:#EEEEEE; height:200px; width:400px; float:left;"> Здесь идет содержание</div> <div id="footer" style="background-color:#FFA500; clear:both; text-align:center;"> © Uroki-HTML.ru</div> </div> </body> </html>

HTML код выше приведет к следующему результату в браузере:

Главный Заголовок Страницы

Меню
HTML
CSS
JavaScript

Здесь идет содержание

HTML Компоновки - Полезные Советы

Совет: Наибольшее преимущество использования CSS в том, что вы помещаете код CSS во внешний файл, и вашим сайтом становится ГОРАЗДО ПРОЩЕ управлять. Вы можете изменить дизайн всех ваших страниц редактируя один единственный файл. Подсказка: Поскольку создание продвинутых компоновок требует времени, более быстрый способ - использование шаблона. Используйте Google для поиска бесплатных шаблонов вебсайтов (эти уже готовые шаблоны веб сайтов вы можете использовать и настраивать под свои нужды).

Практическая работа №26

Тема: Создание сайта по шаблону (онлайн).

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

Оборудование: ПК с предустановленной ОS WINDOWS

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

Ход работы

1. Входной контроль:

§ Что такое хостинг? Что нужно для создания сайта по шаблону?

2. Выполнение работы:

· Получить индивидуальное задание для исполнения

· С помощью любого браузера войти на сайт http:// ucoz.com.ua либо

http://narod.ru и используя мастер создать:

1 Дизайн (используя имеющиеся шаблоны как отправную точку)

2 Страницы сайта (галерею, форум, новостную ленту, статьи, чат…)

3 Добавить возможность регистрации новых пользователей

· Для проверки изменений использовать режим отображения, а не админку

Вывод по работе

4. Дополнительные вопросы

§ Как вставить на сайт видео с YouTube?

§ Как составлять каталоги в галерее? Какие типы форумов возможно создать?

Дата: 2019-03-05, просмотров: 168.

⇐ Предыдущая 26 27 28 29 30 31 323334 35 Следующая ⇒