02 сен 2022 · 18:47
{"document": [{"text": [{"type": "string", "attributes": {"bold": true}, "string": "Модуль 2. Урок 3. Делаем табличный сайт с текстовым меню"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Важно"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Выполненный в этом уроке сайт обязательно сохраните. Он нам потребуется в нескольких дальнейших занятиях для его модификации."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вспомним пройденный ранее материал о том, строки таблицы можно объединять по вертикали "}, {"type": "string", "attributes": {"bold": true}, "string": "<rowspan= «n» >"}, {"type": "string", "attributes": {}, "string": ", а столбцы таблицы – по горизонтали "}, {"type": "string", "attributes": {"bold": true}, "string": "<td colspan= «n» >, "}, {"type": "string", "attributes": {}, "string": "где "}, {"type": "string", "attributes": {"bold": true}, "string": "n –"}, {"type": "string", "attributes": {}, "string": " число объединяемых ячеек. Опираясь на эту информацию из предыдущих занятий, мы сейчас сделаем небольшой табличный сайт такого вида (рис. 1). "}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "1.jpg", "filesize": 39193, "height": 437, "pic_id": 144334, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/09/02/1_e7X0FX7.jpeg", "width": 455}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 1."}, {"type": "string", "attributes": {}, "string": " Табличный сайт из 4х страниц"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Если разобрать структуру таблицы, на которой построен этот сайт, то можно заметить, что здесь три строки и 2 столбца (рис. 2)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "2.png", "filesize": 3885, "height": 140, "pic_id": 144335, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/09/02/2_frypTm2.jpeg", "width": 577}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 2. "}, {"type": "string", "attributes": {}, "string": "Таблица, на основе которой создан сайт"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Как видим, это таблица следующего вида:"}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "2_a.png", "filesize": 4048, "height": 144, "pic_id": 144340, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/09/02/2_a.jpeg", "width": 259}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Код подобной таблицы теперь вы напишете без проблем:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<table border= «1» cellspacing= «0» > <! -- расстояние между ячейками =0-->"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr><td colspan= «2» >ячейка 1</td></tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr><td>ячейка 3</td><td>ячейка 4</td></tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr><td colspan= «2» >ячейка 5</td></tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</table> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Сайт будет состоять из четырех файлов, то есть, из четырех связынных между собой страниц"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "главная. html"}, {"type": "string", "attributes": {}, "string": ", "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "десятка. html"}, {"type": "string", "attributes": {}, "string": ", "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "жигули. html"}, {"type": "string", "attributes": {}, "string": ", "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "нива. html"}, {"type": "string", "attributes": {}, "string": "). "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Примечание"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Строго говоря, русские названия в профессиональном веб-дизайне недопустимы, а главную страницу принято называть "}, {"type": "string", "attributes": {"bold": true}, "string": "index. html"}, {"type": "string", "attributes": {}, "string": ". Но, пример учебный, поэтому пусть будут небольшие ошибками, которые вы у себя должны будете находить и исправлять. (Они будут держать вас начеку, чтобы не расслаблялись)."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Основной каркас страниц мы сделаем с помощью табличной верстки. В основе сайта будет таблица с тремя строками. В первой строке таблицы будет "}, {"type": "string", "attributes": {"bold": true}, "string": "шапка ("}, {"type": "string", "attributes": {}, "string": "заголовок"}, {"type": "string", "attributes": {"bold": true}, "string": " "}, {"type": "string", "attributes": {}, "string": "страницы). Во второй строке сделаем две ячейки, в одной из них будет "}, {"type": "string", "attributes": {"bold": true}, "string": "меню"}, {"type": "string", "attributes": {}, "string": ", в другой "}, {"type": "string", "attributes": {"bold": true}, "string": "фото"}, {"type": "string", "attributes": {}, "string": ". В третьей строке таблицы будет "}, {"type": "string", "attributes": {"bold": true}, "string": "подвал"}, {"type": "string", "attributes": {}, "string": " (в виде текста). "}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Делаем табличный каркас страниц сайта"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Каркас нашего сайта будет выглядеть так (рис. 3)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "3.png", "filesize": 22186, "height": 694, "pic_id": 144341, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/09/02/3_ZdNhB4I.jpeg", "width": 836}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 3. "}, {"type": "string", "attributes": {}, "string": "Каркас нашего сайта"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В каждую из ячеек таблицы мы напишем слова помощники – "}, {"type": "string", "attributes": {"bold": true}, "string": "заголовок"}, {"type": "string", "attributes": {}, "string": " (шапка), "}, {"type": "string", "attributes": {"bold": true}, "string": "меню"}, {"type": "string", "attributes": {}, "string": " (левый сайдбар), "}, {"type": "string", "attributes": {"bold": true}, "string": "фото "}, {"type": "string", "attributes": {}, "string": "(контент), "}, {"type": "string", "attributes": {"bold": true}, "string": "текст "}, {"type": "string", "attributes": {}, "string": "(подвал). Размеры каркаса выберем как на рис. 4."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "4.png", "filesize": 33778, "height": 531, "pic_id": 144343, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/09/02/4_NVWbAA6.jpeg", "width": 654}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 4."}, {"type": "string", "attributes": {}, "string": " На рисунке обозначены размеры ячеек таблицы"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Главная (первая) страница сайта"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Создадим в блокноте главную страницу:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! DOCTYPE html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<html> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<head> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<title>Российские автомобили</title> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta charset= «utf-8» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</head> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body bgcolor= «grey» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<table border= «1» cellspacing= «0» align= «center» width= «750px» bgcolor= «white» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr height= «70px» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td colspan= «2» align= «center» ><h1>Российские автомобили</h1></td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr height= «400px» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td width= «150px» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a href= «главная. html» > Главная </a> <br>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a href= «десятка. html» > лада десятка </a> <br>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a href= «жигули. html» > жигули </a> <br>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a href= «нива. html» > нива </a> <br>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td width= «590px» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<img src= «2_2на_главную. s2UFg. jpg» alt= «российские автомобили» width= «600px» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr height= «150px» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td colspan= «2» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p>Российские автомобили всегда были известны своим качеством. Во всем мире, наверное, нет автолюбителей, которые не слышали бы о российских автомобилях. Мало того, все они знают, что это образец престижности и комфортабельности. Поэтому никого не удивляет тот факт, что автомобильные бренды России были и остаются одними из лидеров рынка автомобилей. </p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</table> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Пояснения к коду: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Для того, чтобы задать серый цвет фона страницы, тегу "}, {"type": "string", "attributes": {"bold": true}, "string": "<body> "}, {"type": "string", "attributes": {}, "string": "мы прописываем атрибут "}, {"type": "string", "attributes": {"bold": true}, "string": "bgcolor"}, {"type": "string", "attributes": {}, "string": " и даем значение "}, {"type": "string", "attributes": {"bold": true}, "string": "grey"}, {"type": "string", "attributes": {}, "string": ". "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Цвет фона таблицы сделаем белым, для этого тегу "}, {"type": "string", "attributes": {"bold": true}, "string": "<table>"}, {"type": "string", "attributes": {}, "string": " мы прописываем атрибут "}, {"type": "string", "attributes": {"bold": true}, "string": "bgcolor "}, {"type": "string", "attributes": {}, "string": "и даем ему значение "}, {"type": "string", "attributes": {"bold": true}, "string": "white"}, {"type": "string", "attributes": {}, "string": ". Таким образом, на странице серого цвета у нас будет белая таблица (фон страницы – серый, а фон таблицы-белый)."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Для тега "}, {"type": "string", "attributes": {"bold": true}, "string": "<table>"}, {"type": "string", "attributes": {}, "string": " мы задали атрибут "}, {"type": "string", "attributes": {"bold": true}, "string": "border"}, {"type": "string", "attributes": {}, "string": " со значением 1, тем самым, задав границы для таблицы (рамку). Атрибут "}, {"type": "string", "attributes": {"bold": true}, "string": "cellspacing"}, {"type": "string", "attributes": {}, "string": " со значением 0, означает, что отступы между ячейками таблицы равны 0, то есть их просто нет. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "С помощью атрибута "}, {"type": "string", "attributes": {"bold": true}, "string": "align"}, {"type": "string", "attributes": {}, "string": " и его значения "}, {"type": "string", "attributes": {"bold": true}, "string": "center"}, {"type": "string", "attributes": {}, "string": ", мы выравниваем заголовок по центру ячейки. Атрибутом "}, {"type": "string", "attributes": {"bold": true}, "string": "width "}, {"type": "string", "attributes": {}, "string": "со значением "}, {"type": "string", "attributes": {"bold": true}, "string": "750 px"}, {"type": "string", "attributes": {}, "string": " мы задали ширину таблицы в 750 пикселей. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Высоту таблицы (атрибут height) можно не прописывать, так как у нас будет задана высота для каждой отдельной строки таблицы."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Количество ячеек у нас в средней строке – 2 (две) Это значит, что по правилам объединения, в каждой строке таблицы у нас должно быть по две ячейки. Поэтому для этих ячеек будет прописан атрибут "}, {"type": "string", "attributes": {"bold": true}, "string": "colspan "}, {"type": "string", "attributes": {}, "string": "со значением 2. Благодаря этому атрибуту мы объединяем 2 ячейки в одну "}, {"type": "string", "attributes": {"bold": true}, "string": "ПО ГОРИЗОНТАЛИ."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Для первой строки (заголовка) мы задали высоту (height) "}, {"type": "string", "attributes": {"bold": true}, "string": "70px"}, {"type": "string", "attributes": {}, "string": ". В первой строке содержится одна ячейка, объединяющая в себе две ячейки. Поэтому для нее задан атрибут colspan со значением 2. Также для этой ячейки мы прописываем атрибут align и даем ему значение center, благодаря которому, текст, написанный в этой ячейке (заголовок) будет выравниваться по центру. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Вторая строка табличного сайта содержит в себе 2 ячейки (меню и фото). В нашем сайте будут использованы фотографии, все они имеют размер"}, {"type": "string", "attributes": {"bold": true}, "string": " 600 x 400 "}, {"type": "string", "attributes": {}, "string": "пикселей, поэтому, чтобы все было красиво, мы задаем высоту строки равную высоте фотографий, это значит"}, {"type": "string", "attributes": {"bold": true}, "string": " 400 px"}, {"type": "string", "attributes": {}, "string": ". "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Ширина всех фотографий "}, {"type": "string", "attributes": {"bold": true}, "string": "600 px"}, {"type": "string", "attributes": {}, "string": ", поэтому для второй ячейки, где будет фото, мы задаем ширину строки "}, {"type": "string", "attributes": {"bold": true}, "string": "600 px"}, {"type": "string", "attributes": {}, "string": ". Общая ширина таблицы у нас "}, {"type": "string", "attributes": {"bold": true}, "string": "750 px"}, {"type": "string", "attributes": {}, "string": ", а ширина 2-ой ячейки средней строки 600 px. Соответственно 1-ая ячейка средней строки (меню) будет иметь ширину "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": ""}, {"type": "string", "attributes": {"bold": true}, "string": "750 минус 600 равно 150 px."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Для третьей строки (текст) мы задали высоту "}, {"type": "string", "attributes": {"bold": true}, "string": "150 px"}, {"type": "string", "attributes": {}, "string": ". Эта строка, как и первая строка, содержит в себе одну ячейку, которая объединила в себе две. Поэтому для этой ячейки задан атрибут "}, {"type": "string", "attributes": {"bold": true}, "string": "colspan"}, {"type": "string", "attributes": {}, "string": " со значением 2."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Сам текст "}, {"type": "string", "attributes": {"bold": true}, "string": "Российские автомобили"}, {"type": "string", "attributes": {}, "string": " заключается в тег <p> (тег абзаца)."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Остальные теги кода мы поясним далее."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Совет"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Нарисуйте себе макет сайта, разберитесь с кодом. При ответе на оценку вы должны понимать и уметь объяснить значение каждой строки этого кода."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вторая страница сайта"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Созданный нами каркас будет одинаковый для каждой страницы сайта, поэтому весь код с главной страницы мы копируем и вставляем в другие 3 файла нашего сайта. Задаем делаем редактирование и в результате, код страницы"}, {"type": "string", "attributes": {"bold": true}, "string": " десятка. html "}, {"type": "string", "attributes": {}, "string": "будет таким"}, {"type": "string", "attributes": {"bold": true}, "string": ":"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<! DOCTYPE html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<html> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<head> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<title>Российские автомобили</title> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta charset= «utf-8» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</head> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<body bgcolor= «grey» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<table border= «1» cellspacing= «0» align= «center» width= «750px» bgcolor= «white» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr height= «70px» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td colspan= «2» align= «center» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<h1> лада десятка</h1>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr height= «400px» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td width= «150px» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a href= «главная. html» > Главная </a> <br>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a href= «десятка. html» > лада десятка </a> <br>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a href= «жигули. html» > жигули </a> <br>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a href= «нива. html» > нива </a> <br>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td width= «600px» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<img src= «десятка. t1OLO. jpg» alt= «десятка» width= «600px;» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr height= «150px» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td colspan= «2» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p>В постоянной работе над своими техническими возможностями, плодами которой стали сверхмощные двигатели, инновационные системы их оснащения, российский производитель смог за 90 лет своего развития шагнуть далеко вперед своих конкурентов. Немецкие конструкторы достигли таких вершин мастерства, что смогли «оживить», «очеловечить» автомобиль. </p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</table> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</body> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</html>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В браузере этот код будет таким (рис. 5)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "5.png", "filesize": 303334, "height": 825, "pic_id": 144344, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/09/02/5_UTRi9Rp.jpeg", "width": 1031}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 5."}, {"type": "string", "attributes": {}, "string": " Код для страницы "}, {"type": "string", "attributes": {"bold": true}, "string": "десятка. html "}, {"type": "string", "attributes": {}, "string": "в браузере"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Давайте продолжим разбирать код веб-страниц нашего сайта."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Заголовок сайта"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Заголовок прописывается с помощью тега <h1>. Поэтому 1-ая строка таблицы в табличном сайте будет такой:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<tr height= «70px» > "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td colspan= «2» align= «center» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<h1> лада десятка</h1>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</tr>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Меню сайта"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Меню у нас будет состоять из 4 ссылок. Это ссылка на главную страницу и три ссылки на страницы с марками авто. Поэтому код меню будет таким:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td width= «150px» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a href= «главная. html» > Главная </a> <br>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a href= «десятка. html» > лада десятка </a> <br>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a href= «жигули. html» > жигули </a> <br>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<a href= «нива. html» > нива </a> <br>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Для того, чтобы меню было расположено в столбик, после каждой ссылки в конце строки мы ставим тег "}, {"type": "string", "attributes": {"bold": true}, "string": "<br>,"}, {"type": "string", "attributes": {}, "string": " отвечающий за перенос строки. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Изображение"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Любое изображение перед вставкой его в сайт нужно подготовить. Иначе говоря, все изображения для интернет должны, как правило, иметь формат JPG и должны быть оптимизированы, то есть, иметь небольшой вес. Все это выполняется в графических редакторах, например, в Adobe Photoshop. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Примечание"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В конце учебника будут описаны другие способы задания размеров рисунков для сайта, если вы в Adobe Photoshop работать не умеете."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В нашем случае, чтобы фото хорошо смотрелись, они должны быть приведены к размеру 600 x 400 пикселей (рис. 6)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "6.png", "filesize": 27160, "height": 358, "pic_id": 144345, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/09/02/6_3iT6XOy.jpeg", "width": 519}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 6. "}, {"type": "string", "attributes": {}, "string": "Задание размеров изображения в графическом редакторе Adobe Photoshop"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Все наши четыре фотографии с марками автомобилей будут находиться в папке "}, {"type": "string", "attributes": {"bold": true}, "string": "image"}, {"type": "string", "attributes": {}, "string": ". Загружаться из этой папки они будут такими тегами:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<td width= «600px» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<img src= «десятка. t1OLO. jpg» alt= «десятка» width= «600px;» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</td> "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Здесь конструкция "}, {"type": "string", "attributes": {"bold": true}, "string": "alt= «десятка» "}, {"type": "string", "attributes": {}, "string": " выводит на экран альтернативный текст в том случае, если браузер картинку не обнаружит."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Примечание"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вывод для картинок такого альтернативного текста это одно из правил хорошего тона в работе веб-дизайнера."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Кроме подготовки фото, вы также должны предварительно подготовить тексты для остальных веб-страниц:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Текст для главной страницы (уже приведен);"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Текст для страницы "}, {"type": "string", "attributes": {"bold": true}, "string": "десятка"}, {"type": "string", "attributes": {}, "string": "(уже приведен);"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Текст для страницы "}, {"type": "string", "attributes": {"bold": true}, "string": "жигули "}, {"type": "string", "attributes": {}, "string": "будет такой:"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "«Марка автомобилей Lada сочетает в себе изысканный стиль и самые современные технологические решения. Успех обусловлен креативностью, энтузиазмом и стремлением соответствовать запросам наших клиентов во всем, что мы делаем. Мы стараемся постоянно находиться в авангарде инноваций, устанавливая новые стандарты, определяющие техническое совершенство». "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Текст для страницы "}, {"type": "string", "attributes": {"bold": true}, "string": "нива "}, {"type": "string", "attributes": {}, "string": "будет такой:"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "«При разработке автомобилей класса Lada разработано и внедрено множество технологий для улучшения безопасности водителя и пассажира. Но, мало кто знает, что Lada разрешает использовать свои технологии на любых других автомобилях, если это обеспечивает безопасность человека, т. е. Компания ставит ценности человека намного Выше своих доходов». "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Завершаем работу над сайтом"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Теперь аналогичным образом, абсолютно так же, как мы писали код для второй страницы сайта «"}, {"type": "string", "attributes": {"bold": true}, "string": "десятка. html» "}, {"type": "string", "attributes": {}, "string": "пропишите код для страниц "}, {"type": "string", "attributes": {"bold": true}, "string": "жигули. html"}, {"type": "string", "attributes": {}, "string": " (рис. 7) и "}, {"type": "string", "attributes": {"bold": true}, "string": "нива. html"}, {"type": "string", "attributes": {}, "string": " (рис. 8). На страницах будет меняться заголовок, фотография и текст, но код будет практически тем же, что мы уже разобрали выше. В результате должен получиться табличный сайт из 4-х страниц."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "7.png", "filesize": 454613, "height": 650, "pic_id": 144347, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/09/02/7_CvgQAqP.jpeg", "width": 757}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 7. "}, {"type": "string", "attributes": {}, "string": "Третья страница сайта"}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "8.png", "filesize": 416052, "height": 649, "pic_id": 144348, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/09/02/8_d5GWFfy.jpeg", "width": 756}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 8. "}, {"type": "string", "attributes": {}, "string": "Четвертая страница сайта"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Как задать одинаковые размеры рисунков?"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В нашем сайте использованы фотографии, которые имеют размер"}, {"type": "string", "attributes": {"bold": true}, "string": " 600 x 400 "}, {"type": "string", "attributes": {}, "string": "пикселей. Все фото на сайте должны иметь одинаковый размер, чтобы таблица не меняла размеры и все страницы визуально смотрелись по размерам одинаково (рис. 9). Это можно выполнить разными способами."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "9.png", "filesize": 1724041, "height": 1075, "pic_id": 144351, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/09/02/9_lrrada3.jpeg", "width": 2379}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 9."}, {"type": "string", "attributes": {}, "string": " Фото на сайте имеют разный размер, поэтому размер таблицы на разных страницах разный"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Способ 1. Задаем размеры рисунков программно"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "На рис. 10 приведен код сайта, в котором на каждой странице прописаны размеры картинок 210 на 87px."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "10.png", "filesize": 44107, "height": 190, "pic_id": 144352, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/09/02/10_31Q46jD.jpeg", "width": 650}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 10."}, {"type": "string", "attributes": {}, "string": " Размеры картинок по высоте и ширине заданы кодом (тегами)"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Способ 2. Задаем размеры рисунков в MS Paint"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Чтобы в Paint подогнать все рисунки под один размер в px, нужно их выделять рамкой и тянуть мышь (стрелка справа) до нужного размера (стрелка снизу) – рис. 11."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "11.png", "filesize": 589259, "height": 661, "pic_id": 144354, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/09/02/11_XdA3H46.jpeg", "width": 1118}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Рис. 11."}, {"type": "string", "attributes": {}, "string": " Показан процесс подгонки размеров рисунка под величину 1140 на 900 px мышью"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Задание 1"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Посмотрите в папке "}, {"type": "string", "attributes": {"bold": true}, "string": "Примеры"}, {"type": "string", "attributes": {}, "string": " сайты, выполненные студентами в прошлом учебном году."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Задание 2"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Создайте ваш табличный сайт с текстовым меню из четырех страниц по выбранной вами теме, например, «"}, {"type": "string", "attributes": {"bold": true}, "string": "Породы собак"}, {"type": "string", "attributes": {}, "string": "», или «"}, {"type": "string", "attributes": {"bold": true}, "string": "Мои любимые музыкальные исполнители"}, {"type": "string", "attributes": {}, "string": "» и т. п. Изображения для сайта возьмите из Интернет. Все изображения приведите к одинаковым размерам и оптимизируйте их. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Пояснение"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Оптимизация изображений - это их обработка с целью уменьшить «вес», но, без визуальной потери «качества» картинок. В нашем случае достаточно будет сделать размер картинок по ширине 600 px, по высоте 400 px и сохранить их в формате JPG."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Вопросы"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Как задать одинаковые размеры рисунков и зачем это нужно делать?"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Объясните каждую строчку кода вашего сайта (ее смысл)."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "реклама.png", "filesize": 315686, "height": 555, "pic_id": 144356, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/09/02/%D1%80%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B0.jpeg", "width": 572}}], "attributes": []}], "selectedRange": [13017, 13017]}
Комментарии 0