Планирование веб-сайта
Сначала вам необходимо спланировать веб-сайт. В этом руководстве в качестве примера для создания веб-сайта будет использован следующий рисунок.
рисунка 1
показана ниже:
Рисунок 2
в основном состоит из пяти частей:
1. Основная навигационная панель с эффектами кнопок.
Ширина: 760 пикселей. Высота: 50 пикселей.
2. Заголовок Значок заголовка сайта содержит логотип и название сайта.
Ширина: 760 пикселей. Высота: 150 пикселей.
3. Содержание Основное содержание сайта.
Ширина: 480 пикселей. Высота: меняется в зависимости от содержимого.
4. Граница боковой панели, дополнительная информация.
Ширина: 280 пикселей. Высота: меняется в зависимости от
5. Нижний столбец нижнего колонтитула сайта содержит информацию об авторских правах и т. д.
Ширина: 760 пикселей. Высота: 66 пикселей.
1. Создайте html-шаблоны, каталоги файлов и т. д.
Код выглядит следующим образом:
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<голова>
Рисунок 3
2. Создайте большой блок для веб-сайта .
Создайте блок шириной 760 пикселей, который будет содержать все элементы веб-сайта.
Напишите
Рисунок 4.
Теперь, чтобы центрировать поле, напишите Margin: auto;, чтобы файл css имел вид:
#page-container {
ширина: 760 пикселей;
маржа: авто;
фон: красный;
}
Теперь вы можете видеть, что между верхней частью окна и браузером есть зазор шириной 8 пикселей. Это связано с отступами и границами браузера по умолчанию. Чтобы устранить этот пробел, нужно в css файле написать:
HTML, тело {
маржа: 0;
заполнение: 0;
}
Разделите веб-сайт на пять разделов
1. Поместите пять частей, упомянутых в «Шаге 1», в поля и напишите в html-файле:
ведет себя следующим образом:
Рисунок 5
2. Чтобы различать пять частей, мы отмечаем эти пять частей разными цветами фона и пишем в css-файле:
#main-nav {
фон: красный;
высота: 50 пикселей;
}
#header {
фон: синий;
высота: 150 пикселей;
}
#sidebar-a {
фон: темно-зеленый;
}
#содержание {
фон: зеленый;
}
#footer {
фон: оранжевый;
высота: 66 пикселей;
}
Производительность следующая:
Рис. 6.
Макет веб-страницы, плавающий элемент div и т. д.
1. Плавающий: сначала позвольте границе перемещаться справа от основного содержимого. Используйте CSS для управления плаванием.
#sidebar-a {
плавать: вправо;
ширина: 280 пикселей;
фон: темно-зеленый;
}
Производительность следующая:
Рисунок 7
2. Напишите текст в поле основного содержимого. Напишите в html файле:
Рисунок 8.
Но вы можете видеть, что основное поле содержимого занимает всю ширину контейнера страницы, и нам нужно установить правую границу #content на 280 пикселей. чтобы оно не конфликтовало с границей.
CSS-код выглядит следующим образом:
#содержание {
поле справа: 280 пикселей;
фон: зеленый;
}
В то же время напишите текст в рамке. Напишите в html файле:
ведет себя следующим образом:
Рисунок 9.
Это не то, что нам нужно. Нижняя рамка веб-сайта опустилась ниже границы. Это потому, что мы перемещаем границу вправо. Поскольку она плавающая, можно понять, что она находится на другом слое над всем блоком. Таким образом, нижнее поле и поле содержимого выровнены.
Итак, пишем в css:
#footer {
ясно: оба;
фон: оранжевый;
высота: 66 пикселей;
}
Производительность следующая:
Рисунок 10
Расположение и представление дополнительных структур вне основного фрейма веб-страницы. Представление (Макет) дополнительных структур вне основного фрейма веб-страницы, включая следующие:
1. Основная панель навигации;
2. Название, включая название веб-сайта и название контента;
3. Содержание;
4. Информация в нижнем колонтитуле, включая авторские права, сертификацию и дополнительную панель навигации (необязательно).
При добавлении этих структур, чтобы не разрушить исходную структуру, нам нужно добавить под тегом «body» (TAG) файла css:
.скрытый {
дисплей: нет;
}
«.hidden» — это добавленный нами класс. Этот класс может сделать так, чтобы любой элемент на странице, принадлежащий скрытому классу, не отображался. Они будут использованы позже, поэтому пока забудьте об этом.
Теперь добавим заголовок:
сначала вернитесь к HTML-коду: от
Далее идет панель навигации :
CSS-код, управляющий работой панели навигации, относительно сложен. Мы подробно представим его на девятом или десятом шаге. Теперь добавьте код навигации в html-файл: