шапка лого линия шапка
black-line
grey-line   grey-line   grey-line


grey-line   grey-line  
black-line
ДИСТАНЦИОННЫЕ КУРСЫ ВЕБ-ДИЗАЙНА
black-line
ПЕРВОЕ ЗАДАНИЕ
grey-line   grey-line   grey-line

Как добавить изображение в таблицу?



grey-line   grey-line  
grey-line   grey-line   grey-line

Этот урок является продолжением "Темы 0001". Смотрите предыдущее занятие:   Смотреть

УРОК-0002.

grey-line   grey-line  
добавить изображение
grey-line   grey-line   grey-line 1. КАК ДОБАВИТЬ ИЗОБРАЖЕНИЕ В ТАБЛИЦУ?

Для того чтобы добавить изображение, как на странице нам нужно для начала сохранить исходник этого изображения себе в папку "img".
Мы уже проделывали такую операцию в "УРОКЕ 0001" в пунктах 4.9 - 4.10 - 4.11.

1.1. Итак, открываем любой веб-браузер, подключенный к Интернету.
В поисковую строку копируем ссылку   http://chudesnaya-strana-17.ru/img/manikur-klassik.jpg   и нажимаем на клавиатуре клавишу "Enter".
Появляется следующая картинка для скачивания:


grey-line   grey-line  
картинка для скачивания
grey-line   grey-line   grey-line

1.2. Кликаем правой кнопкой мыши на изображение - появляется меню:


grey-line   grey-line  
появляется меню
grey-line   grey-line   grey-line

1.3. Выбираем пункт "Сохранить картинку как…".
Появляется меню "Сохранить как".
Находим нашу папку "img" и сохраняем в неё изображение "manikur-klassik.jpg" без изменения названия.


grey-line   grey-line  
сохраняем в неё изображение
grey-line   grey-line   grey-line

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


grey-line   grey-line  
таблица внутри которой две других таблицы
grey-line   grey-line   grey-line

1.4. Открываем наш файл "manicur-klassik.html" в веб-редакторе Allaire Home Site 4.0. Ставим курсор под закрывающим тегом

</table> 

и сдвигаем тег

<center> 

вниз, несколько раз нажав на клавишу "Enter" на клавиатуре.


grey-line   grey-line  
сдвигаем тег center вниз
grey-line   grey-line   grey-line

1.5. Ставим курсор ниже закрывающего тега

 </table>

и во вкладке "Table" нажимаем на пиктограмму "Table Wizard".


grey-line   grey-line  
Ставим курсор ниже
grey-line   grey-line   grey-line

1.6. Появляется меню "Table Wizard":


grey-line   grey-line  
меню Table Wizard
grey-line   grey-line   grey-line

1.7. Нажимаем на две кнопки с минусами, чтобы убрать лишние ячейки:


grey-line   grey-line  
Нажимаем на две кнопки с минусами
grey-line   grey-line   grey-line

1.8. Нажимаем на кнопку "Next" и попадаем в следующее меню:


grey-line   grey-line  
попадаем в следующее меню
grey-line   grey-line   grey-line

1.9. Здесь мы выбираем значения:
- alignment (выравнивание) - выбираем значение "center" (по центру),
- cell spacing (интервал между ячейками) - выбираем значение "0",
- cell padding (заполнение ячейки) - выбираем значение "0",
- width (ширина) - выбираем значение "960",
- border (ширина бордюра таблицы) - выбираем значение "0".
- use color (цвет таблицы) - выбираем временно "fuchsia".


grey-line   grey-line  
Здесь мы выбираем значения
grey-line   grey-line   grey-line

1.10. Нажимаем на кнопку "Next" и попадаем в следующее меню:


grey-line   grey-line  
попадаем в следующее меню
grey-line   grey-line   grey-line

1.11. Нажимаем на кнопку "Finish" и попадаем в код нашей страницы, который выглядит следующим образом:


grey-line   grey-line  
Нажимаем на кнопку Finish
grey-line   grey-line   grey-line

1.12. Цвет таблицы bgcolor="#FF00FF"


grey-line   grey-line  
Цвет таблицы bgcolor
grey-line   grey-line   grey-line

заменяем на нужный нам цвет bgcolor="#191414"


grey-line   grey-line  
заменяем на нужный нам цвет
grey-line   grey-line   grey-line

1.13. В единственную ячейку этой таблицы ставим курсор:


grey-line   grey-line  
ставим курсор
grey-line   grey-line   grey-line

1.14. Несколько раз нажимаем клавишу "Enter" на клавиатуре.
1.15. Теперь создаём первую маленькую таблицу внутри большой.
Ставим курсор ниже тега

  <td>  

и во вкладке "Table" нажимаем на пиктограмму "Table Wizard".


grey-line   grey-line  
нажимаем на пиктограмму Table Wizard
grey-line   grey-line   grey-line

1.16. Появляется меню "Table Wizard":


grey-line   grey-line  
Появляется меню Table Wizard
grey-line   grey-line   grey-line

1.17. Нажимаем на две кнопки с минусами, чтобы убрать лишние ячейки:


grey-line   grey-line  
Нажимаем на две кнопки с минусами
grey-line   grey-line   grey-line

1.18. Нажимаем на кнопку "Next" и попадаем в следующее меню:


grey-line   grey-line  
Нажимаем на кнопку Next
grey-line   grey-line   grey-line

1.19. Здесь мы выбираем значения:
- alignment (выравнивание) - выбираем значение "center" (по центру),
- cell spacing (интервал между ячейками) - выбираем значение "0",
- cell padding (заполнение ячейки) - выбираем значение "0",
- width (ширина) - выбираем значение "600",
- border (ширина бордюра таблицы) - выбираем значение "0".
- use color (цвет таблицы) - выбираем временно "fuchsia".


grey-line   grey-line  
выбираем значения
grey-line   grey-line   grey-line

1.20. Нажимаем на кнопку "Next" и попадаем в следующее меню:


grey-line   grey-line  
попадаем в следующее меню
grey-line   grey-line   grey-line

1.21. Нажимаем на кнопку "Finish" и попадаем в код нашей страницы, который выглядит следующим образом:
красным цветом выделена большая таблица, а белым цветом выделена маленькая таблица внутри большой таблицы:


grey-line   grey-line  
маленькая таблица внутри большой
grey-line   grey-line   grey-line

1.22. Заменяем цвет bgcolor="#FF00FF"


grey-line   grey-line  
Заменяем цвет
grey-line   grey-line   grey-line

На цвет bgcolor="#191414"


grey-line   grey-line  
На цвет
grey-line   grey-line   grey-line

1.23. Ставим курсор между тегами

 <td>

и

 </td>     

в маленькой таблице, чтобы вставить в неё картинку.


grey-line   grey-line  
Ставим курсор между тегами
grey-line   grey-line   grey-line

1.24. Затем выбираем вкладку "Сommon" и в ней пиктограмму "Image"


grey-line   grey-line  
Затем выбираем вкладку Сommon
grey-line   grey-line   grey-line

1.25. Появляется всплывающее меню "Image"


grey-line   grey-line  
Появляется всплывающее меню Image
grey-line   grey-line   grey-line

1.26. Нажимаем на пиктограмму открывающейся папки в ячейке "Source" (Источник):


grey-line   grey-line  
Нажимаем на пиктограмму
grey-line   grey-line   grey-line

1.27. Нажимаем на пиктограмму открывающейся папки в ячейке "Source" (Источник), появляется меню "Open":


grey-line   grey-line  
появляется меню Open
grey-line   grey-line   grey-line

1.28. Находим папку "lessons-nail-design", в которую мы сохраняли изображения для "шапки" страницы, открываем в ней папку "img" и выбираем файл "manikur-klassik", который мы недавно сохраняли. Нажимаем "Open".


grey-line   grey-line  
выбираем файл manikur-klassik
grey-line   grey-line   grey-line

1.29. Появляется форма "Image". Заполняем атрибут "alt". Пишем в ячейке "КЛАССИЧЕСКИЙ МАНИКЮР". Нажимаем "ОК".


grey-line   grey-line  
Пишем в ячейке КЛАССИЧЕСКИЙ МАНИКЮР
grey-line   grey-line   grey-line

1.30. Переходим к коду нашей страницы, который, с добавленным изображением, выглядит вот так:


grey-line   grey-line  
Переходим к коду страницы
grey-line   grey-line   grey-line

1.31. Сохраняем наш файл, выбрав в меню в верхнем левом углу вкладку "File", а в ней команду "Save".


grey-line   grey-line  
Сохраняем наш файл
grey-line   grey-line   grey-line

1.32. Теперь находим сохранённый нами файл "manicur-klassik.html" в папке "lessons-nail-design" и кликаем по нему дважды. Файл открывается в браузере и мы смотрим, что у нас получилось:


grey-line   grey-line  
смотрим что у нас получилось
black-line
КНОПКИ ОБРАТНОЙ СВЯЗИ КНОПКИ ОБРАТНОЙ СВЯЗИ
black-line
нижний блок
нижний блок Новые работы НАШИ ГРУППЫ ВКОНТАКТЕ:

Дизайн групп ВКонтакте

Разработка сайтов

Производство мультипликации

Поздравительные открытки

Инфографика


НАШ КАНАЛ НА ЮТУБ:

Смотреть>>
нижний блок НАШИ ТЕЛЕФОНЫ:
+7 (951) 375 92 45,
+7 (901) 452 63 27.


НАШ АДРЕС:
630120, г. Новосибирск, ул. Забалуева, 21.


E-MAIL:
knyazew2015@mail.ru, kindle888@rambler.ru

ICQ: 406472064
WhatsApp: 89513759245
Instagram: chudesnaya_strana_17


НАША КОМАНДА.

Подробнее>>
нижний блок
нижний блок
самый нижний блок Поделиться с друзьями:
самый нижний блок

Главная   |   Развлечения   |   Путешествия   |   Обучение   |   Дизайн


Сайт сделан в студии дизайна "Чудесная страна"


    Яндекс.Метрика Рейтинг@Mail.ru    



Valid HTML 4.0 Transitional


Правильный CSS!