шапка лого линия шапка
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". Смотрите предыдущее занятие:   Смотреть

УРОК-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  
смотрим как получилось в веб-браузере
grey-line   grey-line   grey-line

1.21. Итак, заголовок статьи у нас есть, теперь, ниже заголовка, нам нужно добавить на нашу страничку текст самой статьи.

1.22. Открываем файл "manicur-klassik.html" и устанавливаем курсор после тега

 </font>

перед тегом

 </td>

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

1.23. Добавляем тег

 <br> 

чтобы сместить строку с текстом вниз.


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

1.24. Теперь добавим текст статьи. Для этого ставим курсор после тега

 <br>	 

grey-line   grey-line  
Теперь  добавим текст статьи
grey-line   grey-line   grey-line

1.25. Открываем вкладку "Fonts".


grey-line   grey-line  
Открываем вкладку Fonts
grey-line   grey-line   grey-line

1.26. Нажимаем кнопку "Font".


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

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


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

1.28. Выбираем:
- Font - Arial,
- Color (пока выберем Aqua, потом заменим на нужный на цвет),
- Size - 2

Нажимаем кнопку "Apply"


grey-line   grey-line  
Выбираем Font
grey-line   grey-line   grey-line

1.29. После закрытия меню у нас получается такой код:


grey-line   grey-line  
у нас получается такой код
grey-line   grey-line   grey-line

1.30. Мы заменяем color="Aqua" на наш цвет color="#c9c9c9"


grey-line   grey-line  
Мы заменяем color
grey-line   grey-line   grey-line

1.31. Ставим курсор перед тегом , как указано на картинке


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

1.32. Вставляем вместо курсора текст статьи.
Для этого выделяем весь текст (смотри ниже) и нажимаем комбинацию клавиш Ctrl+C.
Потом вставляем текст (комбинация клавиш Ctrl+V) в то место, где находится курсор.


grey-line   grey-line  
Вставляем текст статьи
grey-line   grey-line   grey-line

Текст для копирования:

ТЕХНОЛОГИЯ:

1. Мастер обрабатывает свои руки и руки клиента антисептиком.

2. Мастер пилочкой 240 грит придает форму свободному краю ногтя. Пилочка должна двигаться параллельно ногтевой пластине в одном направлении. Если двигать пилочкой туда-обратно разрушается структура ногтей и они начинают слоиться, а потом ломаются.

3. На одну руку наносится средство для удаления кутикулы (это специальное средство размягчающее кутикулу для наиболее быстрого и безболезненного ее удаления) .

4. Мастер кладет эту руку в ванночку с теплой водой (40 - 50°C).

5. Мастер обрабатывает каждый ноготок по очереди:
- отодвигает кутикулу, с помощью закругленной части пушера;
- вычищает птергий (тонкую плёночку/нижний слой кутикулы, которая прилегает к ногтевой пластине), с помощью заостренной части пушера;
- обрезает все лишнее вокруг ноготка, с помощью кусачек для маникюра (обрезая кутикулу следите за тем, чтобы срез был плавным, а не прерывистым).

6. Обработав три пальца клиента, мастер переходит ко второй руке.

7. Мастер наносит на вторую руку средство для удаления кутикулы и помещает руку в ванночку с теплой водой.

8. Мастер возвращается к правой руке и обрабатывает ее до конца.

9. Мастер достает руку из ванночки и повторяет ту же процедуру и с другой рукой.

10. Мастер наносит крем для рук. Втирает массажными движениями - каждый палец по очереди, затем тыльную и внешнюю сторону ладони.



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

1.33. Вот, что у нас получилось:


grey-line   grey-line  
что у нас получилось?
grey-line   grey-line   grey-line

Почему текст "слипся"?
Потому что мы не сделали разметку страницы.
Сейчас мы этим и займёмся:
Для начала поставьте тег

 <br> 

как показано на картинке ниже. Тег

 <br> 

устанавливает перевод строки в том месте, где этот тег находится.


grey-line   grey-line  
Для начала поставьте тег
grey-line   grey-line   grey-line

Для того, чтобы добавить тег

  <br> 

нужно установить курсор в то место, куда вы хотите добавить тег и выбрать значок BR во вкладке Сommon.


grey-line   grey-line  
добавить тег
grey-line   grey-line   grey-line

1.34. Теперь последовательно нужно добавить тег

 <br> 

, во все места, где указано курсорами на картинке:


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

1.35. В итоге у нас должен получиться такой код:


grey-line   grey-line  
должен получиться код
grey-line   grey-line   grey-line

1.36. А в Интернете страничка теперь выглядит так:


grey-line   grey-line  
страничка теперь выглядит так
grey-line   grey-line   grey-line

1.37. И напоследок, выделим жирным шрифтом заголовок статьи и несколько ключевых фрагментов текста.
Чтобы произвести эту операцию, сначала нужно выделить фрагмент текста:


grey-line   grey-line  
сначала нужно выделить фрагмент текста
grey-line   grey-line   grey-line

1.38. Далее нужно войти во вкладку "Fonts" и нажать значок "В":


grey-line   grey-line  
нажать значок В
grey-line   grey-line   grey-line

1.39. И код у нас изменяется на следующий:


grey-line   grey-line  
код изменяется на следующий
grey-line   grey-line   grey-line

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

 <b></b> 

а в Интернете наш фрагмент страницы теперь выглядит так:


grey-line   grey-line  
а в Интернете наш фрагмент страницы теперь выглядит так
grey-line   grey-line   grey-line

1.40. А теперь, напоследок задание:
Вам нужно последовательно выделить несколько фрагментов в тексте (как показано на картинке)


grey-line   grey-line  
выделить несколько фрагментов
grey-line   grey-line   grey-line

Войти во вкладку "Fonts" и нажать значок "В" (смотри подсказку в пункте 1.38), чтобы в итоге код наш выглядел так:


grey-line   grey-line  
чтобы код наш выглядел так
grey-line   grey-line   grey-line

А в Интернете наша страничка выглядела так:


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!