Создайте стилевую таблицу, реализующую следующие установки для сайта:

@Сергей_1981 · Регистрация: 18.02.2019

Студворк — интернет-сервис помощи студентам

Доброго времени суток, все!
В процессе обучения поставлена задача: "Создайте стилевую таблицу, реализующую следующие установки для сайта:
страница HTML длиной в 1000 пикселей и высотой 800 пикселей;
края левый, правый и верхний должны быть 50 пикселей;
используйте для фона цвета из схемы:

@Academik · 11.06.2019, 20:47

novichek_1905, раз пошел троллинг, придется вам показать как надо верстать таблицами)

CSS
1
2
3
4
5
6
7
8
9
10
11
body{font: 17px Arial; margin: 45px 45px 0 45px;}
.wrapper{max-width: 1000px; height: 800px; margin: 0 auto;}
 
.layer{color: #fff; text-align: center; width: 100%; height: 100%; border-spacing: separate; border-spacing: 5px;}
.layer td{border: 5px solid #fff;}
 
.nav{width: 80%; height: 15%; background-color: #cc0000;}
.date{width: 20%; height: 15%; background-color: #000;}
 
.content{height: 70%; background-color: #228b22;}
.footer{color: #000; height: 15%; background-color: #ffff00;}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="wrapper">
    <table class="layer">
        <tr>
            <td class="nav">Верхнее меню</td>
            <td class="date">Время и дата</td>
        </tr>
        <tr>
            <td class="content" colspan="2">Зона содержимого</td>
        </tr>
        <tr>
            <td class="footer" colspan="2">Футер</td>
        </tr>
    </table>
</div>

Изучайте

@novichek_1905 · 11.06.2019, 22:03

Не по теме:

Сообщение от Academik

придется вам показать как надо верстать таблицами)

Вы просто гуру оптимизации, и знаете как работает colspan="2") Снимаю шляпу 8-)
В школьном задании это действительно важно)

@Сергей_1981 · 12.06.2019, 09:21 **[ТС]**

Спасибо за Ваши ответы! Есть над чем работать. Учебным материалам 5 лет. Верстать таблицами по материалам и учат, хотя изучение материалов в сети показывает, что на смену вёрстке таблицами пришли div'ы. Вот что я отправил на проверку:
1. HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="site.css"/>
<title>Домашнее задание 4</title>
</head>
<body>
<div class="tot">
<div class="menu">
Верхнее меню<br>красный
<div class="time">
Время и дата<br>черный
<div class="content">
Зона содержимого<br>зеленый
<div class="footer">
Футер<br>желтый
</div>
</div>
</div>
<div align="center"></div>
</div>
</div>
</body>
</html>

2. CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
body {
margin:0px;
padding:0px;
font-size: 30pt;
font-weight:300;
}
.tot {
width:1000px;
height:800px;
margin:50px 50px 0px 50px;
}
.menu {
width:600px;
height:200px;
border:2px solid black;
text-align:center;
background:red;
position:absolute;
top:100px;
left:100px;
}
.time {
width:250px;
height:200px;
color:white;
border:2px solid white;
background:black;
position:absolute;
top:0px;
left:650px;
}
.content {
width:900px;
height:250px;
color:black;
border:2px solid black;
background:green;
position:absolute;
top:250px;
left:-650px;
}
.footer {
width:900px;
height:150px;
color:black;
border:2px solid black;
background:yellow;
position:absolute;
top:300px;
left:0px;
}

3. Вот как это выглядит в Adobe Dreamweaver CS6:

@Сергей_1981 · 12.06.2019, 09:38 **[ТС]**

Academik, Вам отдельное огромное спасибо! Ваш ответ и прост, и доступен (даже мне), и код короткий, и вообще!

Вот что я получил после непродолжительных манипуляций с Вашим кодом:
1. HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="site.css"/>
<title>Домашнее задание 4</title>
</head>
<body>
<div class="wrapper">
    <table class="layer">
        <tr>
            <td class="nav">Верхнее меню</td>
            <td class="date">Время и дата</td>
        </tr>
        <tr>
            <td class="content" colspan="2">Зона содержимого</td>
        </tr>
        <tr>
            <td class="footer" colspan="2">Футер</td>
        </tr>
    </table>
</div>
</body>
</html>

2. CSS:

CSS
1
2
3
4
5
6
7
8
body{font: 40px Arial; margin: 50px 50px 0 50px;}
.wrapper{max-width: 1000px; height: 800px; margin: 0 auto;}
.layer{color:black; text-align: center; width: 100%; height: 100%; border-spacing: separate; border-spacing: 5px;}
.layer td{border: 5px solid #fff;}
.nav{width: 80%; height: 15%; background-color:red;}
.date{color:white; width: 20%; height: 15%; background-color:black;}
.content{height: 70%; background-color:green;}
.footer{color: #000; height: 15%; background-color:yellow;}

3. Результат в Adobe Dreamweaver CS6:

@Academik · 12.06.2019, 20:56

Сообщение от Сергей_1981

3. Результат в Adobe Dreamweaver CS6:

Какой-то результат неожиданный получился в дримвивере: шапка слишком высокая, контентная часть наоборот меньшей высоты. Лучше код запускайте прям в браузере, так сказать в боевом режиме, а верстайте к примеру в sublime text 3.

@Сергей_1981 · 13.06.2019, 09:20 **[ТС]**

Вот скрин запущенного в браузере кода:

@Сергей_1981 · 13.06.2019, 09:24 **[ТС]**

А для вёрстки лично мне (лузеру, чайнику и пр.) удобнее использовать редактор WYSIWYG. Лично Вам ещё раз огромное спасибо за то, что не остаётесь безучастными к попыткам моим познать воистину волшебный мир кода! Спасибо!

Новые блоги и статьи Все статьи Все блоги /
Запрет пометки на удаление и отмены проведения Maks 16.07.2026 Алгоритм из решения ниже реализован на нетиповом документе "ПутевойЛист" разработанного в КА2. Задача: запретить помечать на удаление и отменять проведения путевого листа при условии, если он сдан. . .	Как надо было делать правильно - вообще не слушать ИИ, его дело - текст. Hrethgir 15.07.2026 А вообще надо было делать не так, чтобы не исправлять ошибку https:/ / www. cyberforum. ru/ blogs/ 223907/ 10996. html , правильно было : удалил кнопку, а потом добавил её. Всё это стресс конечно. Почему?. . .	Знаете, от чего появляется стресс? kumehtar 15.07.2026 Стресс появляется оттого, что вы, зная как поступить правильно, делаете наоборот. Ларри Уингет	Нас бьют, а мы крепчаем? Какая чушь! kumehtar 15.07.2026 Вот это вот бытующее мнение, что человек меняется только под действием проблем, всегда считал вредоносным. Поверь, от проблем у людей появляются не изменения, а нервное расстройство и ПТСР. А. . .
сукцессия 29. Переход от одних деревьев на другие делать более или менее вероятностным? anaschu 12.07.2026 Насколько смена типов микоризы — исключительное событие в двухвековой сукцессии? Оценка вероятности в пространстве параметров В текущей версии модели успешно реализован ключевой механизм. . .	сукцессия 27. Думаю, как переделывать уже написанную статью с планами на сукцессию. anaschu 12.07.2026 Анализ соответствия модели требованиям Реализованные компоненты: Механизм закисления почвы через протонную помпу Конкуренция между типами микориз pH как триггер сукцессии C/ P соотношение. . .	Сукцессия 26. Мат модель создана. anaschu 12.07.2026 Модель смены растительных сукцессий посредством управления грибами работает внутри небольшой ячейки почвы, восстанавливающейся после пожара, где ненадолго бывшее царство хвойных снова захватили. . .	Решил проблему с ошибкой пагинации сообщений с сервера на алгоритме обхода дерева "Эстафета хвоста". Hrethgir 12.07.2026 Проблема была в том, что удалялась именно новая кнопка, а не старая. Ни один ИИ не обнаружил это, а сам я смог только когда с работой стало попроще и когда заставил работать будущее автономное. . .

@Сергей_1981 9 / 8 / 3 Регистрация: 18.02.2019 Сообщений: 457

	Создайте стилевую таблицу, реализующую следующие установки для сайта: 10.06.2019, 14:28. Показов 3687. Ответов 26 Метки нет (Все метки) Доброго времени суток, все! В процессе обучения поставлена задача: "Создайте стилевую таблицу, реализующую следующие установки для сайта: страница HTML длиной в 1000 пикселей и высотой 800 пикселей; края левый, правый и верхний должны быть 50 пикселей; используйте для фона цвета из схемы: Миниатюры 0

@Сергей_1981 9 / 8 / 3 Регистрация: 18.02.2019 Сообщений: 457
	13.06.2019, 09:20 [ТС]
	Вот скрин запущенного в браузере кода: Миниатюры 0

@Сергей_1981 9 / 8 / 3 Регистрация: 18.02.2019 Сообщений: 457
	13.06.2019, 09:24 [ТС]
	А для вёрстки лично мне (лузеру, чайнику и пр.) удобнее использовать редактор WYSIWYG. Лично Вам ещё раз огромное спасибо за то, что не остаётесь безучастными к попыткам моим познать воистину волшебный мир кода! Спасибо! 0

Создайте стилевую таблицу, реализующую следующие установки для сайта:

Решение