Дизайн веб-страниц
методическая разработка по информатике и икт (11 класс) по теме

Опубликовано 31.10.2012 - 16:24 - Ахметгареева Альбина Рамилевна

Разработка урока производственного обучения по теме "Язык разметки HTML"

Скачать:

ВложениеРазмер
Файл plan_uroka_html.docx269.38 КБ
Файл dizayn_web-stranicy.rar2.74 МБ

Предварительный просмотр:

ПЛАН ОТКРЫТОГО УРОКА

по производственному обучению

Профессия: «Мастер по обработке цифровой информации»

Мастер п/о: Фахриева А.Р.

Тема программы: «HTML – язык разметки гипертекста».

Тема урока: «Дизайн веб-страниц».

Обучающая цель урока: научить учащихся основным приемам дизайна веб-страниц.

Развивающая цель урока: развивать навыки создания веб-страниц, развивать логическое мышление.

Воспитывающая цель урока: воспитывать нравственные, поведенческие и другие качества личности, чувство ответственности, аккуратности.

Методическая цель урока: активация мыслительной деятельности учащихся с использованием наглядных средств обучения, технологии проектной деятельности.

Тип урока: урок по изучению трудовых приемов и операций.

Вид урока: урок упражнений, урок инструктирования.

Метод ведения урока: наглядный, словесный, практический.

Межпредметная связь:технологии создания и обработки цифровой мультимедийной информации «Дизайн веб-страниц», информатика «Поиск информации в Интернет», физика «Цветовая схема».

Внутрипредметная связь: «Создание веб-страниц. Основные теги»,  «Поиск информации».

Материально-дидактическое оснащение урока:доска, мел, проектор, персональные компьютеры, Интернет, технологические карты, карточки-задания.

Организационная часть урока – 2-3 мин.

Явка учащихся.

Проверка готовности группы к уроку.

Отметить отсутствующих (причина отсутствия)

Вводный инструктаж – 85 мин.

Проверка знаний учащихся – 15 мин.

Карточки-задания:

Напишите теги позволяющие создать

Веб-страницу;

Название страницы;

Заголовок страницы;

Заголовок 1-го уровня;

Абзац;

Горизонтальную линию;

Нумерованный список;

Список определений;

Маркированный список;

Жирное начертание шрифта;

Курсив;

Подчеркнутое начертание;

По фрагменту страницы определите его форматирование

  • снег
  • мороз

текст

Компьютерные технологии

Обмен листочками с ответами с товарищем по парте. Выставление оценок.

2.2.Техника безопасности при работе на персональных компьютерах 5 мин.

Какие требования безопасности необходимо соблюсти перед началом работы?

К чему приводит неправильное расположение рук при долгой работе на клавиатуре?

На каком расстоянии должна находиться клавиатура от края стола?

На каком расстоянии должен располагаться монитор от глаз?

В чем заключается эргономическая организация рабочего места?

2.3.Выполнение ранее изученных приемов создания веб-страниц, заголовков, списков, форматирование текста и абзацев (см. Приложение 1) –20 мин.

Мы с вами повторили возможности создания веб-страниц, форматирования текста и абзацев на страницах. Но любая страница будет смотреться не оконченной без цветового оформления. Рисунки, фотографии и картинки очень оживляют страницу. А таблицы позволяют структурировать текст.

2.4.Формирование новых знаний, умений и навыков учащихся 35 мин.

Показ презентации Дизайн веб-страниц с пояснениями.  

Подбор правильных, контрастных цветов очень важный момент в веб дизайне, при создании любого сайта. Вы должны быть уверены, что посетители вашего сайта смогут с легкостью прочесть информацию на вашем сайте

Цвет на веб-странице задают либо его названием, либо числовым шестиразрядным шестнадцатеричным кодом #RRGGBB(первые два разряда задают интенсивность красного цвета, вторые – зеленого, третьи – синего). Значение яркости цвета может меняться от минимальной 00 до максимальной FF.

Основные цвета представлены в таблице на слайде. Большее количество различных цветов вы можете увидеть в таблице в приложении 2.

Для задания цвета фона на странице надо внутри начального  элемента указать атрибут bgcolor =“цвет”.

Текстура задается атрибутом background=“цвет”.

Цвет текста для страницы задается атрибутом text =“цвет”

Цвет задается также как и для шрифта названием или цифровым кодом.

Пример

…

…

При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным тоном фонового рисунка.

Чтобы текст хорошо читался, цвета на странице подбирают контрастирующие по яркости: пастельный фон — темный текст, или темный фон — светлый текст. Нежелательны буквы белого цвета — они могут оказаться невидимыми при печати страницы на принтере.

Вставка изображений. Для размещения на Web – страницах используется графические файлы форматов GIF, JPEG и PNG.

IMG– тег для создания ссылки на графический файл. С его помощью также можно использовать изображение в гиперссылках, вставлять картинки в таблицы, использовать изображения для фона страницы. Не содержит конечного тега.

Необходимым атрибутом является

src- указатель пути к графическому файлу.

Атрибуты

alt – выводит текст, поясняющий загружаемый рисунок,

height  иwidth - высота и ширина рисунка,

border- рамка вокруг объекта.

Пример

“мойпортрет”

Обтекание рисунка текстом

рисунок в центре, текст сверху и снизу

рисунокслева

рисуноксправа

Вставка таблицы

...
  -внешний элемент таблицы

 ...  -элемент, задающий строку таблицы

  ...- элемент, задающий ячейку таблицы

 Атрибут width задают ширину таблицы

Атрибут height-задают высоту таблицы

Атрибут bgcolor-для задания цвета всей таблицы надо поместить внутри элемента

Для задания цвета ячеек этот атрибут надо поместить внутрь элемента

                

         

 

Атрибут border - задает толщину рамки таблицы

Пример

Таблица шириной 500 пикселей

        

                        Ширина этой таблицы 500 пикселей и она

состоит из одной строки и одного столбца

                

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

        

        

        

        

        

        

Можно сделать грани таблицы невидимыми,

 для чего толщину рамки таблицы надо задать равной нулю   border="0"

        

                

                

        

 

1 столбец2 столбец

Существует набор атрибутов предназначенных для выравнивания данных в ячейках таблицы:

align- позволяет выравнивать данные по горизонтали и может принимать следующие значения:         

        left- выравнивание влево

        right- выравнивание вправо

        center-выравнивание по центру

valign -позволяет выравнивать текст по вертикали и может принимать следующие значения:         

        top - выравнивание по верхнему краю ячейки

        middle- выравнивание по центру

        baseline- выравнивание по первой строке

Пример

        

        

                

                

                

        

        

        

                

                

                

        

выравнивание по горизонталипоцентрупо левому краюпо правому краю
выравнивание по вертикалипо верхнему краю поцентрупонижнемукраю

Бегущая строка.

Задается тегом …

Параметры:

BGCOLOR- фоновый цвет плашки

WIDTHHEIGHT-ширина и высота плашки

LOOP - количество повторений (INFINITE - непрерывно)

SCROOLLAMOUNT - скорость прокручивания, на котором строка смещается при каждом шаге прокрутки в пикселях

SCROOLLDELAY - задает задержку в миллисекундах между шагами прокрутки

DIRECTION-указывает направление прокрутки

BEHAVIOR=SCROOLL -направление слева направо

BEHAVIOR=SLIDE - направление справа налево

Пример


НАЗВАНИЕ ФИРМЫ
ПРИХОДИТЕ К НАМ!

Строка пять разпроплывает вправо-влево, затем останавливается возле правого края желтой плашки

2.5. Закрепление новой темы       10 мин.

Каким образом можно задать цветовое оформление элементу страницы?

По какой модели составляется код цвета?

С помощью какого тега выделяется фрагмент текста?

Какие атрибуты он имеет?

Для чего нужно задавать основной фон страницы, если также используется текстура?

С помощью какого тега задается основной фон страницы?

С помощью какого тега задается текстура страницы?

С помощью какого тега задается цвет текста всей страницы?

Каковы правила выбора цвета текста и фона страницы?

Как можно вставить рисунок на страницу?

Какие атрибуты можно при этом использовать?

Какой тег позволяет вставить таблицу в веб-страницу?

Как добавить бегущую строку?

2.6. Подведение итогов вводного инструктажа – 2 мин.

Текущий инструктаж – 245 мин.

Инструктаж по технике безопасности и элекробезопасности

Какие требования безопасности должны быть выполнены перед началом работы?

Каковы требования безопасности во время работы?

Что учащимся запрещается делать во время урока?

Что необходимо выполнить после окончания работы?

Выдача учащимся заданий и распределение учащихся по рабочим местам, сообщение нормы времени.

Обход рабочих  мест с целью выявления соблюдения правил техники безопасности.

Выполнение практических упражнений по технологическим и инструкционным картам (см. приложение 3):

Форматирование текста

Форматирование заголовков.

Форматирование шрифтов.

Формирование списков.

Размещение графики на странице

Размещение графики на странице (2).

Изменение графики на странице.

Создание собственной текстуры.

Создание таблиц.

Создание таблиц (2).

Разметка веб-страницы при помощи таблицы.

Вставка бегущей строки.

Создание веб-страницы по заранее выбранной теме индивидуально каждым учащимся (собственный проект)

Обход учащихся с целью проверки выполнения практических упражнений.

Особое внимание обратить на Нуриева Ягуба, Иванова Дмитрия, Бородина Владимира, Джаруллаеву Эльмиру.

Заключительный инструктаж – 20 мин.

Обобщение темы урока.

Разобрать наиболее типичные ошибки.

Провести анализ работы каждого учащегося.

Сообщить оценку качества работы каждого учащегося.

Домашнее задание – 3 мин.

Практическое задание: Продолжить создание веб-страницы по заранее выбранной теме индивидуально каждым учащимся (собственный проект).

Литература:

Б.С. Басаев, В.А.Каймин Информатика практикум на ЭВМ, стр. 220-226.

Повторить тему по предмету «Технологии создания и обработки цифровой мультимедийной информации»: «Интерактивные формы на веб-страницах».

Уборка рабочих мест – 2 мин.

Мастер производственного обучения                                                        Фахриева А.Р.

Приложение

Приложение 1

Практическое задание на повторение

1.Создайте страницу следующего вида

Приложение 2

Таблица цветов

Имя цвета

Hex

RGB

Mahogany

CD4A4A

205,74,74

FuzzyWuzzyBrown

CC6666

204,102,102

Chestnut

BC5D58

188,93,88

RedOrange

FF5349

255,83,73

SunsetOrange

FD5E53

253,94,83

Bittersweet

FD7C6E

253,124,110

Melon

FDBCB4

253,188,180

OutrageousOrange

FF6E4A

255,110,74

VividTangerine

FFA089

255,160,137

BurntSienna

EA7E5D

234,126,93

Brown

B4674D

180,103,77

Sepia

A5694F

165,105,79

Orange

FF7538

255,117,56

BurntOrange

FF7F49

255,127,73

Copper

DD9475

221,148,117

MangoTango

FF8243

255,130,67

AtomicTangerine

FFA474

255,164,116

Beaver

9F8170

159,129,112

AntiqueBrass

CD9575

205,149,117

DesertSand

EFCDB8

239,205,184

RawSienna

D68A59

214,138,89

Tumbleweed

DEAA88

222,170,136

Tan

FAA76C

250,167,108

Peach

FFCFAB

255,207,171

MacaroniandCheese

FFBD88

255,189,136

Apricot

FDD9B5

253,217,181

NeonCarrot

FFA343

255,163,67

Almond

EFDBC5

239,219,197

YellowOrange

FFB653

255,182,83

Gold

E7C697

231,198,151

Shadow

8A795D

138,121,93

BananaMania

FAE7B5

250,231,181

Sunglow

FFCF48

255,207,72

Goldenrod

FCD975

252,217,117

Dandelion

FDDB6D

253,219,109

Yellow

FCE883

252,232,131

GreenYellow

F0E891

240,232,145

SpringGreen

ECEABE

236,234,190

OliveGreen

BAB86C

186,184,108

LaserLemon

FDFC74

253,252,116

UnmellowYellow

FDFC74

253,252,116

Canary

FFFF99

255,255,153

YellowGreen

C5E384

197,227,132

InchWorm

B2EC5D

178,236,93

Asparagus

87A96B

135,169,107

GrannySmithApple

A8E4A0

168,228,160

ElectricLime

1DF914

29,249,20

ScreaminGreen

76FF7A

118,255,122

Fern

71BC78

113,188,120

ForestGreen

6DAE81

109,174,129

SeaGreen

9FE2BF

159,226,191

Green

1CAC78

28,172,120

MountainMeadow

30BA8F

48,186,143

Shamrock

45CEA2

69,206,162

JungleGreen

3BB08F

59,176,143

CaribbeanGreen

1CD3A2

28,211,162

TropicalRainForest

17806D

23,128,109

PineGreen

158078

21,128,120

RobinEggBlue

1FCECB

31,206,203

Aquamarine

78DBE2

120,219,226

TurquoiseBlue

77DDE7

119,221,231

SkyBlue

80DAEB

128,218,235

OuterSpace

414A4C

65,74,76

BlueGreen

199EBD

25,158,189

PacificBlue

1CA9C9

28,169,201

Cerulean

1DACD6

29,172,214

Cornflower

9ACEEB

154,206,235

MidnightBlue

1A4876

26,72,118

NavyBlue

1974D2

25,116,210

Denim

2B6CC4

43,108,196

Blue

1F75FE

31,117,254

Periwinkle

C5D0E6

197,208,230

CadetBlue

B0B7C6

176,183,198

Indigo

5D76CB

93,118,203

WildBlueYonder

A2ADD0

162,173,208

Manatee

979AAA

151,154,170

BlueBell

ADADD6

173,173,214

BlueViolet

7366BD

115,102,189

PurpleHeart

7442C8

116,66,200

RoyalPurple

7851A9

120,81,169

PurpleMountains’ Majesty

9D81BA

157,129,186

Violet (Purple)

926EAE

146,110,174

Wisteria

CDA4DE

205,164,222

VividViolet

8F509D

143,80,157

Fuchsia

C364C5

195,100,197

ShockingPink

FB7EFD

251,126,253

PinkFlamingo

FC74FD

252,116,253

Plum

8E4585

142,69,133

HotMagenta

FF1DCE

255,29,206

PurplePizzazz

FF1DCE

255,29,206

RazzleDazzleRose

FF48D0

255,72,208

Orchid

E6A8D7

230,168,215

RedViolet

C0448F

192,68,143

Eggplant

6E5160

110,81,96

Cerise

DD4492

221,68,146

WildStrawberry

FF43A4

255,67,164

Magenta

F664AF

246,100,175

Lavender

FCB4D5

252,180,213

CottonCandy

FFBCD9

255,188,217

VioletRed

F75394

247,83,148

CarnationPink

FFAACC

255,170,204

Razzmatazz

E3256B

227,37,107

PiggyPink

FDD7E4

253,215,228

JazzberryJam

CA3767

202,55,103

Blush

DE5D83

222,93,131

TickleMePink

FC89AC

252,137,172

PinkSherbet

F780A1

247,128,161

Maroon

C8385A

200,56,90

Red

EE204D

238,32,77

RadicalRed

FF496C

255,73,108

Mauvelous

EF98AA

239,152,170

WildWatermelon

FC6C85

252,108,133

Scarlet

FC2847

252,40,71

Salmon

FF9BAA

255,155,170

BrickRed

CB4154

203,65,84

White

EDEDED

237,237,237

Timberwolf

DBD7D2

219,215,210

Silver

CDC5C2

205,197,194

Gray

95918C

149,145,140

Black

232323

35,35,35

Приложение 3

Задания для закрепления

Форматирование текста

Форматирование заголовков.

Форматирование шрифтов.

Формирование списков.

Размещение графики на странице

Размещение графики на странице (2).

Изменение графики на странице.

Создание собственной текстуры.

Создание таблиц.

Создание таблиц (2).

Разметка веб-страницы при помощи таблицы.

 Вставка бегущей строки.

Задание 1. Форматирование текста

Наберите в Блокноте текст, сохраните под именем 12.htm

первые стихи

Первые стихи

В лесу родилась елочка.

В лесу она росла.

Зимой и летом стройная, зеленая была.

"Детская песенка"

Просмотрите

2. Внесите изменения в текст

выделенные слова

Первые стихи

В лесу родилась елочка.

В лесу она росла.

Зимой и летом стройная,

зеленая была.

"Детская песенка"

Просмотрите результат. Проанализируйте изменения

3. Внеситеизменениявтекст

выделенные слова

Первыестихи

Влесуродиласьелочка.

В лесу она росла.

Зимой и летом стройная,

зеленая была.

"Детскаяпесенка"

Просмотрите результат. Проанализируйте изменения

4. Составьте веб-страничку с загадками (оформление выберите самостоятельно: название шрифта, размер, цвет, начертание для разных фрагментов)

Он быстрее человека

Перемножит два числа,

В нем сто раз библиотека

Поместиться бы смогла,

Только там открыть возможно

Сто окошек за минуту.

Угадать совсем не сложно,

Что загадка про …

(Компьютер). Слово Компьютер оформите в таком виде (компьютер)

Есть на свете сеть сетей.

Очень интересно с ней.

Людям всем она нужна, миру очень сеть важна.

Что за сеть? Найди ответ.

Сеть зовется….

(Интернет)

Задание 2. Форматирование заголовков

1. Создайте новую страницу в редакторе блокнот.
2. В элемент укажите «Практическая работа 1» и вашу фамилию.<br>3. Отформатируйте текст по заданию:</span></p><p class="c4 c203"><span class="c7 c0"><html><br><head><br><title>Практическая работа 1 Фамилия <br>


Роман


Книга


Том


Часть


Глава

Параграф


4. Оформите каждый заголовок разным цветом и начертанием шрифта

Задание 3. Форматирование шрифтов

Написать разными по цвету буквами:

        КАЖДЫЙ ОХОТНИК ЖЕЛАЕТ ЗНАТЬ ГДЕ СИДИТ ФАЗАН

1. Создайте новую страницу в редакторе блокнот.
2. В элемент укажите «Практическая работа 3» и вашу фамилию.<br>3. Отформатируйте текст по заданию. Вместо многоточия вставьте тэги:<br></span><span class="c7 c0"><html><br><head><br><title>Практическая работа3 Фамилия

     ……..


Задание 4. Форматирование списков

Создайте новую страницу в редакторе блокнот.

В элемент укажите «Практическая работа 4» и вашу фамилию.</span></p><p class="c30 c4"><span class="c9 c7 c33 c0">Отформатируйте текст по заданию:</span></p><p class="c4"><span class="c7 c0">Солнце должно быть: </span><span class="c7 c33 c0">(шрифт размером 7, красного цвета, выравнивание по центру)</span></p><p class="c117 c4"><span class="c7 c0">Теплым.</span></p><p class="c4 c117"><span class="c7 c0">Круглым.</span></p><p class="c117 c4"><span class="c7 c0">Желтым.</span></p><p class="c4"><span class="c7 c0">Снег должен быть: </span><span class="c7 c33 c0">(выравнивание по центру, размер шрифта 7, синего цвета)</span></p><p class="c4"><span class="c7 c0">        А. Белым </span></p><p class="c4"><span class="c7 c0">        B. Холодным </span></p><p class="c4"><span class="c7 c0">        C. Пушистым </span></p><p class="c4"><span class="c7 c0">                (</span><span class="c7 c33 c0">шрифт списков черный, размер 3)</span></p><p class="c203 c4"><span class="c9 c7 c33 c0">4. Создайте страницы со следующими списками:</span></p><p class="c4"><span class="c7 c33 c0">Перечень покупок:</span></p><p class="c247 c4"><span class="c7 c0">Говядина -1кг</span></p><p class="c247 c4"><span class="c7 c0">Масло сливочное -500 г</span></p><p class="c247 c4"><span class="c7 c0">Хлеб - 2 батона</span></p><p class="c247 c4"><span class="c7 c0">Молоко -  1 литр</span></p><p class="c4"><span class="c7 c33 c0">Алгоритм вычисления дробей:</span></p><p class="c247 c4"><span class="c7 c0">очистить экран</span></p><p class="c4 c247"><span class="c7 c0">ввести значения X и Y</span></p><p class="c247 c4"><span class="c7 c0">если у=0, вернуться к пункту 2</span></p><p class="c247 c4"><span class="c7 c0">вычислить z=x/y </span></p><p class="c247 c4"><span class="c7 c0">вывести результат z </span></p><p class="c4 c82"><span class="c0"></span></p><p class="c4"><span class="c68 c27 c9 c7 c33">Задание 5. Размещение графики на веб-странице</span></p><p class="c30 c4"><span class="c7">Создайте новую страницу в редакторе блокнот.</span></p><p class="c30 c4"><span class="c7">В элемент <title> укажите «Практическая работа 5» и вашу фамилию.</span></p><p class="c30 c4"><span class="c7">В элементе <BODY> задайте атрибут, чтобы цвет фона страницы был черным.</span></p><p class="c30 c4"><span class="c7">Сделайте надпись «Спокойной ночи» голубым цветом, 6 шрифтом, центральным выравниванием.</span></p><p class="c30 c4"><span class="c7">Вставьте горизонтальную линию красного цвета.</span></p><p class="c30 c4"><span class="c7">Сделайте надпись желтого цвета «Приятных сновидений» 8 шрифтом, центральным выравниванием.</span></p><p class="c30 c4"><span class="c7">Вставьте горизонтальную линию синего цвета толщиной 10 пикселей, длиной 50%, выровняйте по центру.</span></p><p class="c30 c4"><span class="c7">Вставьте рисунок. </span></p><p class="c4"><span class="c68 c27 c9 c7 c33">Задание 6. Размещение графики на веб-странице</span></p><p class="c30 c4"><span class="c7">Создайте новую страницу в редакторе блокнот.</span></p><p class="c30 c4"><span class="c7">В элемент <title> укажите «Практическая работа 6» и вашу фамилию.</span></p><p class="c30 c4"><span class="c7">Разместите на странице рисунок </span></p><p class="c30 c4"><span class="c7">Сделайте надпись к рисунку </span></p><p class="c30 c4"><span class="c7">Создайте рамку вокруг рисунка шириной 2 пикселя.</span></p><p class="c30 c4"><span class="c7">Над рисунком поместите заголовок (например «Мир футбола») самого большого размера и выровняйте его по центру.</span></p><p class="c30 c4"><span class="c7">Вставьте горизонтальную линию синего цвета толщиной 8 пикселей, выровняйте по левому краю по центру.</span></p><p class="c4"><span class="c68 c27 c9 c7 c33">Задание 7. Изменение графики на веб-странице</span></p><p class="c30 c4"><span class="c7">Создайте новую страницу в редакторе блокнот.</span></p><p class="c30 c4"><span class="c7">В элемент <title> укажите «Практическая работа 6» и вашу фамилию.</span></p><p class="c4 c30"><span class="c7">В элементе <BODY> задайте атрибут, чтобы цвет фона страницы стал зеленым.</span></p><p class="c30 c4"><span class="c7">Вставьте изображение. Задайте его размеры 100x100 пикселей.</span></p><p class="c30 c4"><span class="c7">Отредактируйте картинку в графическом редакторе так, чтобы рисунок был на прозрачном фоне и добавьте это изображение на вашу страничку. </span></p><p class="c4"><span class="c68 c27 c9 c7 c33">Задание 8. Создание текстуры</span></p><p class="c30 c4 c62"><span class="c7">Создайте собственный рисунок, например, в программе  Paint.</span></p><p class="c30 c4 c62"><span class="c7">Задайте его как фон вашей  страницы.</span></p><p class="c30 c4 c62"><span class="c7">Задайте рисунок как текстуру.</span></p><p class="c4"><span class="c68 c27 c9 c7 c33">Задание 9. Создание таблиц</span></p><p class="c578 c4"><span class="c7 c0">Создайте новую страницу в редакторе БЛОКНОТ </span></p><p class="c4 c578"><span class="c7 c0">В элементе <TITLE> укажите "Практическая работа 9" </span></p><p class="c4"><span class="c7 c0">3.    Создайте таблицу из двух строк и трех столбцов </span></p><p class="c4"><span class="c7 c0">4.    Задайте фон таблицы зеленого цвета, толщину линии равную 3 пикселам, ширину таблицы равную ширине экране, шрифт внутри таблицы белый. </span></p><p class="c4"><span class="c7 c0">5.    Текст первой строки выровняйте по центру по горизонтали и по вертикали </span></p><p class="c4"><span class="c7 c0">6.    Текст второй строки выделите жирным шрифтом. </span></p><p class="c4"><span class="c7 c0">7.    В первую ячейку первой строки вставьте рисунок children.jpg </span></p><p class="c4"><span class="c7 c0">8.    Во второй ячейке второй строки напишите любое четверостишие. </span></p><p class="c4"><span class="c7 c0">9.    Задайте красный фон третьей ячейке второй строки. </span></p><p class="c4 c82"><span class="c0"></span></p><p class="c4"><span class="c68 c27 c9 c7 c33">Задание 10. Создание таблиц</span></p><p class="c4"><span class="c7 c0">1. Создайте новую страницу в редакторе БЛОКНОТ </span></p><p class="c4"><span class="c7 c0">2. В элементе <TITLE> укажите "Практическая работа 10" </span></p><p class="c4"><span class="c7 c0">3. Создайте таблицу для расписания ваших уроков из восьми столбцов и девяти строк. Ширина таблицы 100%. </span></p><p class="c4"><span class="c7 c0">4. В первом столбце укажите время начала и конца ваших уроков с выравниванием по левому краю. </span></p><p class="c4"><span class="c7 c0">5. В остальных ячейках - предметы по дням недели. </span></p><p class="c4"><span class="c7 c0">6. Выравнивание названий предметов - по левому краю. </span></p><p class="c4"><span class="c7 c0">7. Выравнивание дней недели - по центру ячейки и жирным шрифтом. </span></p><p class="c4"><span class="c7 c0">8. У всех столбцов фон задайте разным цветом. </span></p><p class="c4"><span class="c7 c0">9. Перед таблицей поместите заголовок первого уровня красного цвета "Расписание уроков". </span></p><p class="c4"><span class="c7 c0">10. Между заголовком и таблицей поместите рисунок. </span></p><p class="c4 c82"><span class="c0"></span></p><p class="c4"><span class="c68 c27 c9 c7 c33">Задание 11. Разметка веб-страницы при помощи таблицы</span></p><p class="c4"><span class="c7 c0">1. Создайте новую страницу в редакторе БЛОКНОТ </span></p><p class="c4"><span class="c7 c0">2. В элементе <TITLE> укажите "Практическая работа 11" </span></p><p class="c4"><span class="c7 c0">3. Разметку производить с использованием таблицы шириной на весь экран  (100%) </span></p><a href="#" name="cf8666fc43e7cff01b23260dc6468d3392702282"></a><a href="#" name="1"></a><table cellpadding="0" cellspacing="0" class="c366"><tbody><tr class="c89"><td class="c41"><p class="c4 c82"><span class="c0"></span></p></td><td class="c77"><p class="c4"><span class="c7 c0">Страницаразмеченатаблицей</span></p></td></tr><tr class="c1"><td class="c41"><p class="c4"><span class="c49 c9">Главная страница </span></p><p class="c4"><span class="c49 c9">Примеры </span></p><p class="c4"><span class="c9 c49">История </span></p><p class="c4"><span class="c49 c9">Об авторе</span></p></td><td class="c77"><p class="c4"><span class="c7 c0">Эта страница составлена с использованием таблицы, шириной 100%, состоящая из двух строк и двух столбцов </span></p><p class="c4"><span class="c7 c0">В первую ячейку первой страницы вставлен рисунок. Ширина ячейки -15%. Во второй ячейке первой строки располагается название сайта.</span></p><p class="c4"><span class="c7 c0">В первой ячейке второй строки располагается меню сайта.</span></p><p class="c4"><span class="c7 c0">Во второй ячейке второй строки располагается текст сайта </span></p></td></tr></tbody></table><p class="c4"><span class="c7 c0">Недостатком такой разметки является “плавучесть” содержимого     страницы при уменьшении разрешения экрана (текст должен   будет разместиться в более узкие рамки) </span></p><p class="c4"><span class="c7 c0">Чтобы таблица выглядела неизменной при любом разрешении экрана, надо задать ее фиксированного размера </span></p><p class="c30 c4"><span class="c7 c0">Создайте страницу, которая производится разметкой таблицы шириной 760 пикселей, выровненой по центру экрана.</span></p><p class="c30 c4"><span class="c7 c0">В таблице задайте три строки и  один столбец.</span></p><p class="c30 c4"><span class="c7 c0">В верхнюю строку поместите заголовок, во вторую - меню, а в третью содержание страницы.</span></p><a href="#" name="dcd16e79e84799c60753e86c4c38ae62b2b73ae8"></a><a href="#" name="2"></a><table cellpadding="0" cellspacing="0" class="c366"><tbody><tr class="c315"><td class="c172"><p class="c14 c4"><img height="74" src="https://lh6.googleusercontent.com/WxHIq6aKyGDK7m39ppQ66yy3o9fo6t-VobkMTnV5Tjuo1WmDcLcVm4QWMpvaV2Skzd29DzEGUCrqN6nNiIcYcCyPVs3gfI0BrqtsTxaNnOF5aQozlRs" width="99"></p><p class="c14 c4 c82"><span class="c414"></span></p><p class="c14 c4"><span class="c9 c33 c589">Названиестраницы</span></p></td></tr><tr class="c1"><td class="c504"><p class="c4"><span class="c49">              Главная страница     Примеры     История        Об авторе</span></p></td></tr><tr class="c1"><td class="c632"><p class="c4"><span>Страница составлена с использованием таблицы шириной 760 пикселей, состоящей из двух строк и двух столбцов </span></p><p class="c4"><span>В первую строку вставлен рисунок и располагается название страницы </span></p><p class="c4"><span>Во второй строке размещается меню сайта </span></p><p class="c4"><span>Третья строка содержит содержание страницы </span></p></td></tr></tbody></table><p class="c4 c82"><span></span></p><p class="c4"><span class="c68 c27 c9 c7 c33">Задание 12. Вставка бегущей строки</span></p><p class="c4 c82"><span class="c27"></span></p><p class="c4"><span class="c7 c0">1. Создайте новую страницу в редакторе БЛОКНОТ </span></p><p class="c4"><span class="c7 c0">2. В элементе <TITLE> укажите "Практическая работа 12" </span></p><p class="c351 c8 c4"><span class="c7 c0">3. Создайте бегущую строку на бежевом фоне плашки с текстом синего цвета жирного и курсивного начертания СЧАСТЛИВОГО ВСЕМ ДНЯ! </span></p><p class="c8 c4 c351"><span class="c7 c0">4. Задайте ей непрерывное движение.</span></p></div></div></div></div></div><br><br><div class="docpreview block marina-gradient-rounded-corners marina-title-rounded-green"><div class="inner clearfix"><div class="inner-wrapper"><div class="inner-inner"><h2 class="pane-title-center">Подписи к слайдам:</h2><div class="previewppt">Подбор правильных, контрастных цветов очень важный момент в веб дизайне, при создании любого сайта. Вы должны быть уверены, что посетители вашего сайта смогут с легкостью прочесть информацию на вашем сайте. <br>RGB <br>R-red 00-FF 0-255 <br>G-green 00-FF 0-255 <br>B - blue 00-FF 0-255 <br>Цвет <br>Код <br>Название <br>Цвет <br>Код <br>Название <br>Черный <br>#000000 <br>Black <br>Серый <br>#808080 <br>Gray <br>Белый <br>#FFFFFF <br>White <br>Золотой <br>#FFD800 <br>Gold <br>Красный <br>#FF0000 <br>Red <br>Оранжевый <br>#FFA500 <br>Orange <br>Ярко-зеленый <br>#00FF00 <br>Lime <br>Коричневый <br>#A82828 <br>Brown <br>Синий <br>#0000FF <br>Blue <br>Темно-синий <br>#000080 <br>Navy <br>Фуксия <br>#FF00FF <br>Fuchsia <br>Оливковый <br>#808000 <br>Olive <br>Бирюзовый <br>#00FFFF <br>Cyan, aqua <br>Зелёный <br>#008000 <br>Green <br>Желтый <br>#FFFF00 <br>Yellow <br>Серебристый <br>#C0C0C0 <br>Cilver <br>Пурпурный <br>#800080 <br>Purple <br>Сине-зеленый <br>#008080 <br>Teal <br>Для выделения фрагментов текста используется тег <FONT>. Атрибуты FACE определяет гарнитуру шрифта,SIZE определяет размер шрифта,COLOR определяет цвет шрифта.Пример, <FONT SIZE=4 COLOR=“#FF0000” FACE=“Arial”>Это шрифт Arial размером 4 красного цвета</FONT> <br>Задание фона страницы <br>Для задания цвета фона на странице надо внутри начального элемента <BODY> указать атрибут bgcolor =“цвет”. Текстура задается атрибутом background=“цвет”.Цвет текста для страницы задается атрибутом text =“цвет”Цвет задается также как и для шрифта названием или цифровым кодом. <br>Пример<BODY BGCOLOR=“blue”>… </BODY> <BODY BGCOLOR=“#00FF00”>… </BODY><BODY BACKGROUND=“FON.JPG”> <br>Вставка рисунков <br>IMG – тег для создания ссылки на графический файл. С его помощью также можно использовать изображение в гиперссылках, вставлять картинки в таблицы, использовать изображения для фона страницы. Не содержит конечного тега.Необходимым атрибутом является src- указатель пути к графическому файлу. Атрибутыalt – выводит текст, поясняющий загружаемый рисунок, height и width - высота и ширина рисунка,border - рамка вокруг объекта. <br>Пример.<IMG src=“boss.gif” border=2 height =121 width=76 alt=“мой портрет”><BODY BACKGROUND=“WOOD.JPG”> <br> <P align=center><IMG src="pic.gif" ></p> рисунок в центре, текст сверху и снизу<P align=justify><IMG src="pic.gif" align=left> </p> рисунок слева<P align=justify><IMG src="pic.gif" align=right> </p> рисунок справа <br><TABLE> ... </TABLE> -внешний элемент таблицы <TR>... </TR> -элемент, задающий строку таблицы <TD> ...</TD>- элемент, задающий ячейку таблицы Атрибут width задают ширину таблицыАтрибут height -задают высоту таблицыАтрибут bgcolor-для задания цвета всей таблицы надо поместить внутри элемента <TABLE>Для задания цвета ячеек этот атрибут надо поместить внутрь элемента <TD>Атрибут border - задает толщину рамки таблицы <br>Таблица шириной 500 пикселей<TABLE width ="500"bgcolor="#00CC99"> <TR><TD>Ширина этой таблицы 500 пикселей и она состоит из одной строки и одного столбца </TD> </TR> </TABLE> <br><TABLE width ="60%" border="1" align="center"> <TR> <TD bgcolor="#00FFFF"> </TD> <TD bgcolor="#00FFFF"> </TD> <TD bgcolor="#00FFFF"> </TD> </TR> <TR> <TD bgcolor="#00FFFF"> </TD> <TD bgcolor="#00FFFF"> </TD> <TD bgcolor="#00FFFF"> </TD> </TR> </TABLE>   <br><TABLE width ="100%" bgcolor="#00CC99" border="0"> <TR><TD> 1 столбец</TD><TD>2 столбец </TD></TR> </TABLE> <br>Существует набор атрибутов предназначенных для выравнивания данных в ячейках таблицы:align - позволяет выравнивать данные по горизонтали и может принимать следующие значения: left - выравнивание влевоright - выравнивание вправоcenter -выравнивание по центруvalign -позволяет выравнивать текст по вертикали и может принимать следующие значения: top - выравнивание по верхнему краю ячейкиmiddle- выравнивание по центруbaseline- выравнивание по первой строке <br>Пример: <br><TABLE width ="100%" border="1" align="center"> <TR><TD><B>выравнивание по горизонтали</B> </TD><TD align="center">по центру </TD><TD align="left">по левому краю</TD><TD align="rign">по правому краю</TD></TR><TR><TD><B>выравнивание по вертикали</B> </TD><TD valign="top">по верхнему краю </TD><TD valign="middle">по центру</TD><TD valign="baseline">по нижнему краю</TD></TR></TABLE> <br>Параметры:BGCOLOR- фоновый цвет плашкиWIDTH HEIGHT -ширина и высота плашкиLOOP - количество повторений (INFINITE - непрерывно)SCROOLLAMOUNT - скорость прокручивания, на котором строка смещается при каждом шаге прокрутки в пикселяхSCROOLLDELAY - задает задержку в миллисекундах между шагами прокруткиDIRECTION-указывает направление прокруткиBEHAVIOR=SCROOLL -направление слева направоBEHAVIOR=SLIDE - направление справа налево <br><MARQUEE BEHAVIOR=ALTERNATE DIRECTION=RIGHT LOOP=5 SCROOLLAMOUNT=3 SCROOLLDELAY=100 WIDTH=50% HEIGHT=150 BGCOLOR=“#F0F000” HSPACE=10 VSPACE=10><BR><TABLE WIDTH=300 BORDER=1 BGCOLOR=“FFF0DE”><TR><TD ALIGN=CENTER VALIGN=MIDDLE WIDTH=100></TD><TD ALIGN=CENTER VALIGN=MIDDLE><FONT COLOR=“RED”> НАЗВАНИЕ ФИРМЫ<BR> ПРИХОДИТЕ ПОЖАЛУЙСТА!</B></FONT></TD></TR></TABLE></MARQUEE>Строка пять разпроплывает вправо-влево, затем останавливается возле правого края желтой плашки <br>Составьте веб-страничку с загадками (оформление выберите самостоятельно: название шрифта, размер, цвет, начертание для разных фрагментов)Он быстрее человекаПеремножит два числа,В нем сто раз библиотекаПоместиться бы смогла,Только там открыть возможноСто окошек за минуту.Угадать совсем не сложно,Что загадка про … Слово Компьютер оформите в таком виде (компьютер) <br>Задание 1 Форматирование текста <br>1. Создайте новую страницу в редакторе блокнот.2. В элемент <title> укажите «Практическая работа 2» и вашу фамилию.3. Отформатируйте текст по заданию: <br><html> <head> <title>Практическая работа 1 Фамилия

Роман

Книга

Том

Часть

Глава
Параграф
4. Оформите каждый заголовок разным цветом и начертанием шрифта
Задание 2 Форматирование заголовков
Задание 3 Форматирование шрифтов
1. Создайте новую страницу в редакторе блокнот.2. В элемент укажите «Практическая работа 3» и вашу фамилию.3. Отформатируйте текст по заданию:<html> <head> <title>Практическая работа3 Фамилия Каждый охотник желает знать, где сидит фазан
Написать разными по цвету буквами:КАЖДЫЙ ОХОТНИК ЖЕЛАЕТ ЗНАТЬ ГДЕ СИДИТ ФАЗАН
Задание 4 Создание списков
Создайте новую страницу в редакторе блокнот.В элемент укажите «Практическая работа 3» и вашу фамилию.Отформатируйте текст по заданию:Солнце должно быть: (шрифт размером 7, красного цвета, выравнивание по центру)Теплым.Круглым.Желтым.Снег должен быть: (выравнивание по центру, размер шрифта 7, синего цвета)А. БелымB. ХолоднымC. Пушистым(шрифт списков черный, размер 3) <br>Задание 4 -1 Создание списков <br>Создайте страницы со следующими списками:Перечень покупок:Говядина -1кгМасло сливочное -500 гХлеб - 2 батонаМолоко - 1 литрАлгоритм вычисления дробей:очистить экранввести значения X и Yесли у=0, вернуться к пункту 2вычислить z=x/yвывести результат z <br>Задание 5 Размещение графики на Web - страницах <br>Создайте новую страницу в редакторе блокнот.В элемент <title> укажите «Практическая работа 5» и вашу фамилию.В элементе <BODY> задайте атрибут, чтобы цвет фона страницы был черным.Сделайте надпись «Спокойной ночи» голубым цветом, 6 шрифтом, центральным выравниванием.Вставьте горизонтальную линию красного цвета.Сделайте надпись желтого цвета «Приятных сновидений» 8 шрифтом, центральным выравниванием.Вставьте горизонтальную линию синего цвета толщиной 10 пикселей, длиной 50%, выровняйте по центру.Вставьте рисунок. <br>Задание 6 Размещение графики на Web - страницах <br>Создайте новую страницу в редакторе блокнот.В элемент <title> укажите «Практическая работа 6» и вашу фамилию.Разместите на странице рисунок Сделайте надпись к рисункуСоздайте рамку вокруг рисунка шириной 2 пикселя.Над рисунком поместите заголовок (например «Мир футбола») самого большого размера и выровняйте его по центру.Вставьте горизонтальную линию синего цвета толщиной 8 пикселей, выровняйте по левому краю по центру. <br>Задание 7 Изменение размеров изображения <br>Создайте новую страницу в редакторе блокнот.В элемент <title> укажите «Практическая работа 7» и вашу фамилию.В элементе <BODY> задайте атрибут, чтобы цвет фона страницы зеленым.Вставьте изображение. Задайте его размеры 100x100 пикселей.Отредактируйте картинку в графическом редакторе так, чтобы рисунок был на прозрачном фоне и добавьте это изображение на вашу страничку. <br>Создайте собственный рисунок, например, в программе Paint.Задайте его как фон вашей страницы.Задайте рисунок как текстуру. <br>Задание 8 Создание текстуры <br> Создайте новую страницу в редакторе БЛОКНОТВ элементе <TITLE>укажите "Практическая работа №7"3. Создайте таблицу из двух строк и трех столбцов4. Задайте фон таблицы зеленого цвета, толщину линии равную 3 пикселам, ширину таблицы равную ширине экране, шрифт внутри таблицы белый.5. Текст первой строки выровняйте по центру по горизонтали и по вертикали6. Текст второй строки выделите жирным шрифтом.7. В первую ячейку первой строки вставьте рисунок children.jpg8. Во второй ячейке второй строки напишите любое четверостишие.9. Задайте красный фон третьей ячейке второй строки. <br>Задание 9 . Создание таблиц <br>Задание 10. Создание таблиц <br>1. Создайте новую страницу в редакторе БЛОКНОТ2. В элементе <TITLE>укажите "Практическая работа №8"3. Создайте таблицу для расписания ваших уроков из восьми столбцов и девяти строк. Ширина таблицы 100%.4. В первом столбце укажите время начала и конца вашихуроков с выравниванием по левому краю.5. В остальных ячейках - предметы по дням недели.6. Выравнивание названий предметов - по левому краю.7. Выравнивание дней недели - по центру ячейки и жирным шрифтом.8. У всех столбцов фон задайте разным цветом.9. Перед таблицей поместите заголовок первого уровня красного цвета "Расписание уроков".10. Между заголовком и таблицей поместите рисунок. <br>1. Создайте новую страницу в редакторе БЛОКНОТ2. В элементе <TITLE>укажите "Практическая работа № 9"3. Разметку производить с использованием таблицы шириной на весь экран (100%) <br>Страница размечена таблицей <br>Главная страницаПримерыИсторияОб авторе <br>Эта страница составлена с использованием таблицы,шириной 100%, состоящая из двух строк и двух столбцовВ первую ячейку первой страницы вставлен рисунок. Ширина ячейки -15%. Во второй ячейке первой строки располагается название сайта.В первой ячейке второй строки располагается меню сайта.Во второй ячейке второй строки располагается текст сайта <br>Задание 11. Разметка WEB- страницы при помощи таблицы (вариант1) <br>Недостатком такой разметки является “плавучесть” содержимого страницы при уменьшении разрешения экрана (текст должен будет разместиться в более узкие рамки) <br>Задание 12 . Разметка WEB- страницы при помощи таблицы (вариант2) <br>Чтобы таблица выглядела неизменной при любом разрешении экрана, надо задать ее фиксированного размераСоздайте страницу, которая производится разметкой таблицы шириной 760 пикселей, выровненой по центру экрана.В таблице задайте три строки и один столбец.В верхнюю строку поместите заголовок, во вторую - меню, а в третью содержание страницы. <br> Название страницы <br> Главная страница Примеры История Об авторе <br>Страница составлена с использованием таблицы шириной 760 пикселей, состоящей из трех строк и одного столбцаВ первую строку вставлен рисунок и располагается название страницыВо второй строке размещается меню сайтаТретья страка содержит содержание страницы <br>Задание 12 Вставка бегущей строки <br>1. Создайте новую страницу в редакторе БЛОКНОТ 2. В элементе <TITLE> укажите "Практическая работа 12" 3. Создайте бегущую строку на бежевом фоне плашки с текстом синего цвета жирного и курсивного начертания СЧАСТЛИВОГО ВСЕМ ДНЯ! 4. Задайте ей непрерывное движение. <br>Создание веб-страницы по заранее выбранной теме индивидуально каждым учащимся (собственный проект) <br></div></div></div></div></div><br><div class="block marina-gradient-rounded-corners marina-title-rounded-green"><div class="inner clearfix"><div class="inner-wrapper"><div class="inner-inner"><h2 class="title block-title">По теме: методические разработки, презентации и конспекты</h2><div class="others"><h6><a href="/shkola/informatika-i-ikt/library/2013/02/14/sozdanie-dizayna-sayta-s-pomoshchyu-programmy-adobe">Создание дизайна сайта с помощью программы Adobe Photoshop CS 8 Создание дизайна сайта с помощью программы Adobe Photoshop CS 8 </a></h6><p class="search-excerpt">методические рекомендации...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2014/01/21/picture-387224-1390290918.jpg"><h6><a href="/shkola/dopolnitelnoe-obrazovanie/library/2014/01/22/konspekt-otkrytogo-zanyatiya-detskogo">Конспект открытого занятия детского объединения «Ландшафтный дизайн».Ландшафтный дизайн в условиях городской среды .</a></h6><p class="search-excerpt">Дизайн проект  цветника на пришкольном участкеРазвитие профессиональной компетенции учащихся старших классов к практически значимой деятельности их становление и социальной компетенции посредство...</p></div><div class="others"><h6><a href="/shkola/informatika-i-ikt/library/2014/05/24/konspekt-lektsiy-dizayn-internet-stranits">Конспект лекций дизайн интернет-страниц</a></h6><p class="search-excerpt">Конспект лекций по Web-программированию и дизайну интернет страниц...</p></div><div class="others"><h6><a href="/shkola/sotsialnaya-pedagogika/library/2015/03/22/tezisy-vystupleniya-na-pedsovete-na-temu-istoriya">ТЕЗИСЫ ВЫСТУПЛЕНИЯ на педсовете на тему : "История развития дизайна и место дизайна в новых тенденциях развития образования на современном этапе".</a></h6><p class="search-excerpt">Слово "дизайн"происходит от итальянского слова disegno, которым в эпоху Возрождения обозначали проекты и идеи, лежащие в основе работы.В русский язык слово "дизайн" пришло из английского языка, в кото...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2013/07/09/picture-271489-1373361447.jpg"><h6><a href="/shkola/tekhnologiya/library/2015/06/01/dizayn-intererov-raznovidnost-dizayna-vhodyashchuyu-v">Дизайн интерьеров - разновидность дизайна, входящую в программу предмета «Технология».</a></h6><p class="search-excerpt">Понятие о дизайне как профессиональной деятельности на стыке искусства и инженерного проектирования/...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2017/05/16/picture-925179-1494937366.jpg"><h6><a href="/shkola/informatika-i-ikt/library/2017/05/16/metodicheskaya-razrabotka-dlya-podgotovki-k">Методическая разработка для подготовки к соревнованиям по стандартам JuniorSkills в компетенции "Промышленный дизайн. Дизайн игрушки". Создание простой 3D-модели в Autodesk 123Design</a></h6><p class="search-excerpt">Разработка представляет собой пошаговую инструкцию для создания простой 3D-модели игрушки в редакторе Autodesk 123Desig...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2021/07/24/picture-1340424-1627092803.jpg"><h6><a href="/shkola/raznoe/library/2023/10/19/ekzamenatsionnoe-zadanie-po-professionalnomu-modulyu-sozdanie-0">ЭКЗАМЕНАЦИОННОЕ ЗАДАНИЕ По профессиональному модулю: Создание графических дизайн-макетов МДК: Информационный дизайн и медиа, Многостраничный дизайн По профессии: 54.01.20 Графический дизайнер</a></h6><p class="search-excerpt">Экзаменационное задание обучающиеся выполняют за установленное время по единому варианту задания. Во время выполнения экзаменационного задания обучающимся запрещено использование Интернет-ресурсов. Вр...</p></div></div></div></div></div><br><div id="poisk-materialov" data-1="657"></div> <ul class="links inline"><li class="flag-like first last"><span><span class='like-tooltip flag-like'><a href='#'>Мне нравится</a><span class='flag-throbber'> </span></span></span></li> </ul> <div class="share_buttons clearfix">Поделиться:<div class="ya-share2" data-services="vkontakte,odnoklassniki,telegram,moimir" data-url="https://nsportal.ru/shkola/informatika-i-ikt/library/2012/10/31/dizayn-veb-stranits" data-title="дизайн веб-страниц" ></div></div>  <div class="add-new-comment-button my-button-large"></div> </div> </div> </div> </div> </div> </div> </div><!-- /content-inner --> </div><!-- /content --> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="user_relationships_popup_form" class="user_relationships_ui_popup_form"></div><script type="text/javascript" src="/sites/default/files/advagg_js/js__S3bm1c7u9YzJnRE6QrV-HsLzADKLeupchfbrYg22kRU__S91yqV9ubUDMxzCK2GLBYdp1SFL3v48MFVTVZ3OSXjc__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script type="text/javascript" src="/sites/default/files/advagg_js/js__hxOxF7aEdhvlSyCfiIODtjKmufwiFkLnYBgfAc3JU2U__Zvl8DJBWOfPQpMnqpLsqpzRLZD7C0PqUDMlY8RRkYVw__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script type="text/javascript" src="/sites/default/files/advagg_js/js__c1zZbhXAByh0V-pY3W2l6b4e6e6URcR4okOH_epIox4__oVrjkf1Udl7K9Xgwtl5J3lSmv-cR7ynKeNmPgrmULSU__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script> </body> </html> <!-- Page cached by Boost @ 2024-02-24 07:30:18, expires @ 2024-06-15 07:30:18, lifetime 3 месяца 3 недели --> <!-- cache/normal/nsportal.ru/shkola/informatika-i-ikt/library/2012/10/31/dizayn-veb-stranits_ -->