шапка лого линия шапка
black-line
ДИСТАНЦИОННЫЕ КУРСЫ ВЕБ-ДИЗАЙНА
black-line
ТЕМА-0001
grey-line   grey-line   grey-line

Как разместить текст внутри таблицы?



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

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

УРОК-0003.

grey-line   grey-line  
grey-line   grey-line   grey-line 1. КАК РАЗМЕСТИТЬ ТЕКСТ ВНУТРИ ТАБЛИЦЫ?

1.1. Устанавливаем курсор мыши ниже нашей внутренней таблицы с картинкой.


grey-line   grey-line  
Устанавливаем курсор мыши
grey-line   grey-line   grey-line

1.2. Выбираем во вкладке "Common" пиктограмму "br" и нажимаем на неё дважды.


grey-line   grey-line  
Выбираем во вкладке Common пиктограмму br
grey-line   grey-line   grey-line

Тег

 <br> 

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


grey-line   grey-line  
Тег br устанавливает перевод строки
grey-line   grey-line   grey-line

Теперь, там где стоит курсор, мы повторим операцию с созданием таблицы.

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


grey-line   grey-line  
повторим операцию с созданием таблицы
grey-line   grey-line   grey-line

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


grey-line   grey-line  
Table Wizard
grey-line   grey-line   grey-line

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


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

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


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

1.7. Здесь мы выбираем значения:
- 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.8. Нажимаем на кнопку "Next" и попадаем в следующее меню:


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

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


grey-line   grey-line  
будет помещён текст
grey-line   grey-line   grey-line

1.10. Заменяем цвет таблицы 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.11. Добавляем к тегу

<td>  

размер и позицию как будет расположен текст в ячейке

<td width=600 align="left"> 

"600" - ширина ячейки
"left" - расположение контента в ячейке притягивается к левому краю.


grey-line   grey-line  
Добавляем к тегу
grey-line   grey-line   grey-line

1.12. Ставим курсор в ячейку таблицы, между тегами

<td width=600 align="left"> 

и

</td>

1.13. Выбираем вкладку "Font" и нажимаем на пиктограмму "Tag Editor - Font"


grey-line   grey-line  
Выбираем вкладку Font
grey-line   grey-line   grey-line

Появляется меню "Tag Editor - Font".


grey-line   grey-line  
Появляется меню Tag Editor - Font
grey-line   grey-line   grey-line

1.14. Здесь мы выбираем:
Font (шрифт) - Arial
Color (цвет) - пока выбираем White
Size (размер шрифта) - 4


grey-line   grey-line  
Здесь мы выбираем
grey-line   grey-line   grey-line

1.15. Нажимаем "Apply" и видим код, сгенерированный редактором.


grey-line   grey-line  
видим код
grey-line   grey-line   grey-line

1.16. Там, где у нас стоит курсор, дважды нажимаем "Enter" на клавиатуре, чтобы сместить закрывающий тег

 </font>  

на две строчки вниз. И добавляем туда надпись "КЛАССИЧЕСКИЙ (ОБРЕЗНОЙ) МАНИКЮР".


grey-line   grey-line  
добавляем туда надпись
grey-line   grey-line   grey-line

1.17. Выделяем надпись "КЛАССИЧЕСКИЙ (ОБРЕЗНОЙ) МАНИКЮР"


grey-line   grey-line  
Выделяем надпись
grey-line   grey-line   grey-line

1.18. Теперь нажимаем на пиктограмму "В" во вкладке "Fonts", чтобы сделать надпись "КЛАССИЧЕСКИЙ (ОБРЕЗНОЙ) МАНИКЮР" жирной "Вold".


grey-line   grey-line  
жирной Вold
grey-line   grey-line   grey-line

1.19. Заменяем цвет фона color="White" на наш цвет color="#c9c9c9"
И теперь наш код выглядит так:


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

1.20. Теперь сохраняем нашу страничку "manicur-klassik.html" и смотрим как получилось в веб-браузере:


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!