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

Как создать заголовок веб-страницы?
Как задать цвет фона web-страницы при помощи тега "body"?
Как задать цвет фона web-страницы на CSS?
Как правильно разместить файлы веб-страницы на компьютере?
Как открыть файл с расширением "html"?
Как сделать топ веб-страницы из картинки при помощи таблицы?



grey-line   grey-line  
grey-line   grey-line   grey-line УРОК-0001.

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

1.1. Так выглядит Исходный код пустой страницы html:

grey-line   grey-line  
Исходный код пустой страницы html
grey-line   grey-line   grey-line

1.2. В теге

<title>Untitled</title>

заменяем заголовок шаблона "Untitled" на свой заголовок   -   "Татьяна Князева, классический обрезной маникюр".

 <title>Татьяна Князева, классический обрезной маникюр.</title>

В редакторе Allaire Home Site 4.0. это будет выглядеть так:



grey-line   grey-line  
заменяем  заголовок шаблона
grey-line   grey-line   grey-line




2. КАК ЗАДАТЬ ЦВЕТ ФОНА WEB-СТРАНИЦЫ ПРИ ПОМОЩИ ТЕГА "BODY"?

2.1. В разметке страницы мы ставим курсор в теге

<body> 

перед закрывающей скобкой тега body, как показано на рисунке ниже.


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

и нажимаем кнопку пробел на клавиатуре. Появляется всплывающее меню:


grey-line   grey-line  
всплывающее меню
grey-line   grey-line   grey-line

2.2. В нем мы выбираем пункт "Bgcolor" (цвет фона).
Программа сама добавляет элемент

<Bgcolor> 

в тег

<body>

и выдаёт следующее меню выбора цвета фона:


grey-line   grey-line  
меню выбора цвета фона
grey-line   grey-line   grey-line

2.3. Выбираем пока, для наглядности, цвет "fuchsia", потом мы его заменим на нужный нам цвет. И теперь разметка у нас выглядит так:


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

2.4. Если нажать кнопку "Design" на верхней вкладке,


grey-line   grey-line  
Если нажать кнопку - Design
grey-line   grey-line   grey-line

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


grey-line   grey-line  
цвет страницы
grey-line   grey-line   grey-line

Несколько лет назад мы именно так бы и сделали, "по простому", но сейчас так не делают потому что появились новые браузеры и у них изменились требования к   валидности   web-страниц. Проще говоря, браузер может воспринять неправильно написанный код, как ошибку и начнет показывать Ваш сайт некорректно. А также и поисковики перестанут "выдавать" Ваш сайт в своих списках. Сами понимаете, чем это грозит.

Поэтому, мы пойдём более сложным, но общепринятым на данный момент путём - мы зададим цвет фона при помощи CSS.






grey-line   grey-line  
grey-line   grey-line   grey-line 3. КАК ЗАДАТЬ ЦВЕТ ФОНА WEB-СТРАНИЦЫ НА CSS?
grey-line   grey-line  
grey-line   grey-line   grey-line Что такое CSS?

Вот, что написано об этом в Википедии: "CSS - это язык программирования.
CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля".





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

3.1. Берём исходный html-код, который выглядит так:


grey-line   grey-line  
Берём исходный html-код
grey-line   grey-line   grey-line

3.2. И добавляем в него тег  style


<style type="text/css">      
      body {
      background-color: #313131; /*цвет фона*/
      }

    </style>
    

grey-line   grey-line  
grey-line   grey-line   grey-line Тег style применяется для определения стилей элементов веб-страницы. Тег style необходимо использовать внутри контейнера head.

И теперь наш html-код выглядит так:


grey-line   grey-line  
style type
grey-line   grey-line   grey-line

3.3. Если нажать на кнопку "Design" на верхней вкладке, то мы можем увидеть, что цвет нашей страницы изменился,


grey-line   grey-line  
цвет нашей страницы изменился
grey-line   grey-line   grey-line

как и было задумано при создании дизайна страницы. Смотреть конечный вариант: Смотреть

3.4. Теперь мы добавляем в наш фон background-image (фоновое изображение).



<style type="text/css">      
    body {
    background-color: #313131; /*цвет фона*/
    background-image: url(img/nail-studia-background.gif); /*подключаем изображения*/
    }

    </style>


     


И наш код в программе будет выглядеть так:


grey-line   grey-line  
наш код в программе
grey-line   grey-line   grey-line

Но пока фоновое изображение не будет видно в браузере, потому что мы не добавили файл фонового изображения в папку,
откуда браузер его будет доставать при помощи url-ссылки, прописанной в коде:


grey-line   grey-line  
url-ссылкa
grey-line   grey-line   grey-line

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







4. КАК ПРАВИЛЬНО РАЗМЕСТИТЬ ФАЙЛЫ ВЕБ-СТРАНИЦЫ НА КОМПЬЮТЕРЕ?


4.1. Выбираем на рабочем столе иконку "Мой компьютер".


grey-line   grey-line  
Мой компьютер
grey-line   grey-line   grey-line

4.2. Выбираем диск, на котором будем располагать нашу веб-страницу.


grey-line   grey-line  
Выбираем диск
grey-line   grey-line   grey-line

4.3. Добавляем на диск папку с названием "lessons-nail-design".


grey-line   grey-line  
папка - lessons-nail-design
grey-line   grey-line   grey-line

4.4. Добавляем в папку "lessons-nail-design" папку "img", в которую мы будем сохранять картинки для сайта.

4.5. Сохраняем в папку "lessons-nail-design" наш файл с кодом под названием "manicur-klassik.html".


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

4.6. Открываем любой браузер с выходом в Интернет


grey-line   grey-line  
Открываем любой браузер с выходом в Интернет
grey-line   grey-line   grey-line

и копируем ссылку  http://chudesnaya-strana-17.ru/img/nail-studia-background.gif   в поисковую строку Вашего браузера.


grey-line   grey-line  
копируем ссылку
grey-line   grey-line   grey-line

4.7. Нажимаем "Enter" и у нас появляется фоновое изображение нашей страницы.


grey-line   grey-line  
появляется фоновое изображение
grey-line   grey-line   grey-line

4.8. Кликаем левой кнопкой мыши на лупу, чтобы увеличить картинку.

4.9. Правой кнопкой мыши кликаем на саму картинку, возникает следующее меню:


grey-line   grey-line  
Правой кнопкой мыши кликаем
grey-line   grey-line   grey-line

4.10. Левой кнопкой мыши кликаем на строку "Сохранить картинку как…", появляется меню "Сохранить как"


grey-line   grey-line  
Сохранить как
grey-line   grey-line   grey-line

4.11. Сохраняем картинку, без изменения названия в созданную нами ранее папку "img".

4.12. Вновь заходим в программу Allaire Home Site 4.0 на созданную нами страницу "manicur-klassik.html" и нажимаем кнопку "Design" на верхней вкладке. Мы видим, что URL-путь для фонового изображения прописан правильно и поэтому изображение появилось в браузере программы Allaire Home Site:


grey-line   grey-line  
изображение появилось в браузере
grey-line   grey-line   grey-line

ВНИМАНИЕ:

В этих уроках мы будем брать уже готовые изображения для вёрстки наших веб-страниц.
Как сделать изображения для вёрстки веб-страниц самостоятельно, смотрите уроки в разделе
"ФОТОШОП ДЛЯ WEB-ДИЗАЙНА".



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






5. КАК ОТКРЫТЬ ФАЙЛ С РАСШИРЕНИЕМ "HTML"?


5.1. Открываем папку, где у нас лежит сохранённый файл manicur-klassik.html



grey-line   grey-line  
Открываем папку
grey-line   grey-line   grey-line

5.2. Кликаем по файлу дважды левой кнопкой мыши и в веб-браузере, установленном у нас по умолчанию, открывается наша страничка, с установленными нами цветом фона и фоновым изображением:


grey-line   grey-line  
открывается наша страничка
grey-line   grey-line   grey-line

Ещё мы добавим свойство background-position: center top; чтобы выровнять фоновое изображение по центру страницы и прижать к верхнему краю страницы.



body {  background-color: #313131; /*цвет фона*/
    background-image: url(img/nail-studia-background.gif); /*подключаем изображения*/
    background-position: center top; /*позиция изображения, по центру экрана, прижатого к вверх*/
    }


Ещё мы добавим свойство background-repeat: no-repeat; чтобы фоновое изображение не повторялось.



body {  background-color: #313131; /*цвет фона*/
    background-image: url(img/nail-studia-background.gif); /*подключаем изображения*/
    background-position: center top; /*позиция изображения, по центру экрана, прижатого к вверх*/
    background-repeat: no-repeat; /*не повторять изображение ни по одной оси*/
}

grey-line   grey-line  
добавим свойство
grey-line   grey-line   grey-line

И ещё продублируем тег

center

который выравнивает содержимое контейнера по центру относительно родительского элемента.



<center></center>
     


Продублируем в коде самой страницы.


grey-line   grey-line  
Продублируем в коде самой страницы
grey-line   grey-line   grey-line

Теперь мы будем наполнять нашу страничку контентом: изображениями и текстом.
Делать мы это будем при помощи таблиц - элемент

  <table>	





5. КАК СДЕЛАТЬ ТОП ВЕБ-СТРАНИЦЫ ИЗ КАРТИНКИ ПРИ ПОМОЩИ ТАБЛИЦЫ?


Элемент

 <table> 

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

  <tr> 

и

 <td> 


Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки.
Подобный способ применения таблиц нашел воплощение на многих сайтах.


ИТАК НАЧНЕМ:

Для начала скачаем два файла для шапки (топа) страницы.
Изначально, изображение топа страницы мы разрезали на два куска, чтобы топ меньше весил и быстрее загружался.

5.1. Переходим по ссылке    Ссылка


grey-line   grey-line  
кусок изображения топа
grey-line   grey-line   grey-line

и сохраняем изображение в папку "img", как мы уже делали прежде в пунктах 4.9, 4.10, 4.11.

5.2. Переходим по ссылке    Ссылка


grey-line   grey-line  
кусок изображения топа
grey-line   grey-line   grey-line

и сохраняем изображение в папку "img", как мы уже делали выше.



5.3. Мы будем располагать наши таблицы внутри тега

<center>

Перед этим немного сдвинем, закрывающий тег

</center>

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

<center>

и

</center>

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

И нажимаем раз 15-20 на кнопку "Enter" на клавиатуре.

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

 <center>

и нажимаем на значок "Table Wizard" на вкладке "Table".


grey-line   grey-line  
Чтобы создать таблицу снова
grey-line   grey-line   grey-line

5.5. Появляется меню "Table Wizard",


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

в этом меню видно как строится таблица. Она стоит из горизонтальных ячеек - строк "Row span"  и вертикальных ячеек - столбцов  "Column span".

При помощи кнопок  "+"  и  "-"  можно добавлять и убирать количество горизонтальных и вертикальных ячеек.


grey-line   grey-line  
добавлять и убирать количество ячеек
grey-line   grey-line   grey-line

5.6. Нам нужно сделать таблицу, состоящую из двух ячеек по горизонтали, Поэтому, в появившемся меню мы нажимаем кнопку  "Row"  "-"  убираем лишний ряд ячеек и у нас остаются две горизонтальные ячейки:


grey-line   grey-line  
убираем лишний ряд ячеек
grey-line   grey-line   grey-line

5.7. Нажимаем кнопку "Next"


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

и у нас появляется следующее меню "Table Properties":


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

5.8. Здесь мы выбираем значения:
- 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

Нажимаем кнопку "Next", появляется меню:


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

Пропускаем его, нажимаем кнопку "Next". И в разметке появляется таблица в виде кода:


grey-line   grey-line  
появляется таблица в виде кода
grey-line   grey-line   grey-line

5.9. Заменяем цвет bgcolor="#FF00FF" на цвет bgcolor="#212121"
5.10. Заменяем тег

<td>

на тег

<td width=480>

то есть указываем конкретное значение ширины ячейки таблицы "480". И у нас получается такой кусок кода таблицы:


grey-line   grey-line  
кусок кода таблицы
grey-line   grey-line   grey-line

55.11. Добавляем изображения в ячейки таблицы:
    5.11.1. Для этого ставим курсор в первую ячейку таблицы.


grey-line   grey-line  
ставим курсор в первую ячейку таблицы
grey-line   grey-line   grey-line

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


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

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


grey-line   grey-line  
меню Image
grey-line   grey-line   grey-line

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


grey-line   grey-line  
ячейкa Source
grey-line   grey-line   grey-line

5.11.5. Появляется меню "Open":


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

5.11.6. Находим папку "lessons-nail-design", в которую мы сохраняли изображения для "шапки" страницы, открываем в ней папку "img" и выбираем файл "nail-studia-top-block-01"


grey-line   grey-line  
и выбираем файл nail-studia-top-block-01
grey-line   grey-line   grey-line

5.11.7. Снова появляется меню "Image", но уже с выбранным нами файлом фонового изображения. Ширину и высоту изображения программа выставляет автоматически, а в окошке с полосами прокрутки мы можем видеть само изображение.


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

5.11.8. Нам только остаётся добавить описание картинки в атрибуте "alt", а именно "Татьяна Князева".


grey-line   grey-line  
Татьяна Князева
grey-line   grey-line   grey-line

Мы можем этого и не делать, но это плохо скажется на валидности нашего кода и валидатор будет ругаться при проверке кода на наличие в нём ошибок. К тому же, игнорирование заполнения атрибута "alt", также считается грубейшей ошибкой при SEO-оптимизации Вашей страницы и Вашего сайта.



ПРИМЕЧАНИЕ:
Атрибут alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.


В итоге у нас должен получиться такой код в нашей таблице:

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

5.11.9. Теперь нам нужно вставить второе изображение "шапки", файл "nail-studia-top-block-02" в ячейку, где стоит курсор. Посмотрите выше, как вы вставляли изображение в первую ячейку и повторите операцию с этой ячейкой. После того, как вы справитесь с этой операцией, у Вас должен получиться следующий код таблицы:


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

Теперь можно сохранить наш файл "manicur-klassik.html" и посмотреть в веб-браузере, что у нас получилось, просто кликнув дважды на файл "manicur-klassik.html" в папке, где он у Вас хранится.


grey-line   grey-line  
сохранить наш файл
grey-line   grey-line   grey-line

Если Вы занимаетесь вёрсткой веб-страниц впервые, то процесс может Вам показаться очень долгим и нудным, но поверьте, у верстальщика, который занимается вёрсткой веб-страниц ежедневно, все перечисленные выше операции займут не более 3-5 минут.






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!