Программа Macromedia Dreamweaver имеет очень интересную функцию: представьте себе, что вы открываете какую-нибудь страницу сайта, редактируете ее и сохраняете, так вот сразу после нажатия кнопки “сохранить” этот файл может автоматически отправляться на хостинг и заменить старый файл. Эта функция очень удобна, но требует того, чтобы во время редактирования сайта ваш компьютер был подключен к Интернету, иначе программа не сможет подключиться к хостингу.

Как настроить программу Дримвеар на автоматическую отправку отправку обновленных файлов на хостинг вы узнаете из следующего видеоурока:

Скачать видеоурок автоматическая загрузка измененных файлов на хостинг Скачали 291 раз

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

Скачать видеоурок 4.7 МБ. Скачали 321 раз

В программе Dreamweaver предусмотрена функция автоматического обновления файла на хостинге сразу после того как вы внесли в него какие-либо изменения. Об этой чудесной функции и будет рассказано в этом видеоуроке:

Скачать видеоурок по Dreamweaver 3.3 МБ. Скачали 131 раз

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

За пример возьмем теперь не таблицу, а слой, хотя и с таблицей можно сделать тоже самое.

Для ясности посмотрите на увеличенный угол слоя:

На самом деле мы будем использовать два слоя (окрашены в серый и черный цвета) и 7 блоков (цветные).

Для начала создайте слой в который вложите еще один в нем будет текст

<div id=”radius”>
<div id=”text”>
Закругляем углы на сайте computerlessons.ru
</div>
</div>

Создайте таблицу стилей и задайте для слоев следующие параметры:

#radius { width: 350px; }
#text { padding:5px; background-color: #ccc; }

Теперь над слоем text будем создавать шапку из блоков толщиной в 1 пиксель. Всего будет 7 блоков, можно использовать любое количество это зависит от радиуса закругления. Для создания блока можно использовать тег <div> или любой другой, но как правило используют устаревший тег <b>. Создадим первый блок:

<div id=”radius”>
<b class=”r1″></b>
<div id=”text”>
Закругляем углы на сайте computerlessons.ru
</div>
</div>

В таблицу стилей пропишите  параметры для нового блока:

#radius { width: 350px; }
#text { padding:5px; background-color: #ccc; }
#radius b { background-color: #ccc; display: block; height: 1px; overflow: hidden; font-size:1px; }
.r1 { margin: 0 10px; }

Для блока мы задали отступы по 10 пикселей слева и справа, для следующих блоков эти параметры будут уменьшаться, закругляя таким образом угол:

#radius { width: 350px; }
#text { padding:5px; background-color: #ccc; }
#radius b { background-color: #ccc; display: block; height: 1px; overflow: hidden; font-size:1px; }
.r1 { margin: 0 10px; }
.r2 { margin: 0 7px; }
.r3 { margin: 0 5px; }
.r4 { margin: 0 4px; }
.r5 { margin: 0 3px; }
.r6 { margin: 0 2px; }
.r7 { margin: 0 1px; }

Теперь добавим блоки в html-страницу:

<div id=”radius”>
<b class=”r1″></b>
<b class=”r2″></b>
<b class=”r3″></b>
<b class=”r4″></b>
<b class=”r5″></b>
<b class=”r6″></b>
<b class=”r6″></b>
<b class=”r7″></b>
<b class=”r7″></b>
<b class=”r7″></b>
<div id=”text”>
Закругляем углы на сайте computerlessons.ru
</div>
</div>

6-й и 7-й блоки повторяются для более мягкого закругления угла. Теперь осталось скопировать блоки и вставить их в обратном порядке под слоем text и получим вот такой слой:

Скачать готовый хтмл-код Скачали 180 раз

Можно поэкспериментировать и получить вот такое интересное меню:

Скачать готовый хтмл-код Скачали 76 раз

Создавать интересные css-меню с закругленными или скошенными углами можно до бесконечности:

Скачать готовый хтмл-код Скачали 44 раз

Скачать готовый хтмл-код Скачали 39 раз

Скачать готовый хтмл-код Скачали 39 раз

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

<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=page>
<div id=header>Мир автомобилей </div>
<div id=content>Только на сайте &quot;Мир автомобилей&quot; вы найдете все технические характеристики популярных марок авто. </div>
<div id=menu>
<p>Мерседес</p>
<p>BMW</p>
<p>Лексус</p>
<p>Рено</p>
<p>Пежо</p>
</div>
</div>
</body>
</html>

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

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:#FFECEC; width:800px; height:100px; margin-bottom:15px; }
#menu { background:#E8E8E8; width:140px; height:300px; }
#content { background:#DFDFFF; width:645px; height:300px; float:right; }

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

Если вы уже читали статьи об оптимизации сайтов, то наверняка помните, что заголовки страниц нужно выделять тегами <h1> </h1>. Выделим наш заголовок тегом h1, а ссылки в меню выделим менее значимым тегом h3

<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=page>
<div id=header>
<h1>Мир автомобилей </h1>
</div>
<div id=content>Только на сайте &quot;Мир автомобилей&quot; вы найдете все технические характеристики популярных марок авто. </div>
<div id=menu>
<h3><p>Мерседес</p>
<p>BMW</p>
<p>Лексус</p>
<p>Рено</p>
<p>Пежо</p></h3>
</div>
</div>
</body>
</html>

Текст на странице изменился:

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

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:#FFECEC; width:800px; height:100px; margin-bottom:15px; }
#menu { background:#E8E8E8; width:140px; height:300px; }
#content { background:#DFDFFF; width:645px; height:300px; float:right; }
/* задаем параметры для заголовков */
h1 { text-align:center; }
h3 { font-weight:normal; font-size:14px; }

Посмотрите как после этих действий изменится шрифт. По умолчанию браузер будет показывать весь текст на странице шрифтом Times New Roman, а мы зададим шрифт Arial для слоя page, соответственно весь текст в этом слое изменит шрифт на указанный в таблице стилей:

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; font-family:Arial, Helvetica, sans-serif; }
#header { background:#FFECEC; width:800px; height:100px; margin-bottom:15px; }
#menu { background:#E8E8E8; width:140px; height:300px; }
#content { background:#DFDFFF; width:645px; height:300px; float:right; }
/* задаем параметры для заголовков */
h1 { text-align:center; }
h3 { font-weight:normal; font-size:14px; }

Если понадобится изменить шрифт в каком-то из слоев, то это легко делается путем дописывания новых параметров, но помните что не стоит употреблять на сайте более 2 - 3-х вариантов шрифта!

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; font-family:Arial, Helvetica, sans-serif; }
#header { background:#FFECEC; width:800px; height:100px; margin-bottom:15px; }
#menu { background:#E8E8E8; width:140px; height:300px; }
#content { background:#DFDFFF; width:645px; height:300px; float:right; font-family:Georgia, Times, serif }
/* задаем параметры для заголовков */
h1 { text-align:center; }
h3 { font-weight:normal; font-size:14px; }

Для тегов h1 и h3 тоже можно прописать свои шрифты.

На следующем уроке вставим на страницу изображение и разберем для него некоторые параметры.

Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS

В 6-ом уроке мы довели хтмл-страницу почти до нужного вида, но хотелось бы оторвать шапку сайта от блоков меню и контента. Для этого используем специальный параметр margin, который отвечает за параметры полей, допишем этот параметр в таблицу стилей для шапки (header):

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:10px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; float:right; }

Вы заметили, что дописана строка не просто margin:10px, а вот так margin-bottom:10px - так мы указали параметры полей только для нижней стороны слоя, а не для всех сторон.

Итак, вы запомнили что поля задаются параметром margin, но это поля внешние, а можно еще задать поле (отбивка) и внутри слоя с помощью параметра padding, попробуйте дописать его в таблицу:

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:10px; padding:10px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; float:right; }

Теперь посмотрите как изменилась хтмл-страница, текст в шапке должен находиться на расстоянии 10 пикселей от края слоя:

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

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; margin-bottom:15px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:645px; height:300px; float:right; }

С полями (margin) и отбивками (padding) разобрались и теперь перейдем к форматированию шрифтов.

Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS

Чтобы выровнять слои нашей хтмл-страницы по правому или левому краю, существует специальный атрибут float, используем его в таблице стилей:

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc; }
#header { background:red; width:800px; height:100px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; float:right; }

Для слоя content мы задали выравнивание по правому краю, но как видно и это не помогло поставить этот слоя рядом с блоком меню:

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

<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=page>
<div id=header>Первый блок</div>
<div id=content>Третий блок</div>
<div id=menu>Второй блок</div>
</div>
</body>
</html>

Теперь хтмл-страница приняла “человеческий ” вид, но есть еще один момент - между меню и контентом есть отступ (пустое поле), а вот отступа от шапки (header) нету. Как сделать отступы читаем в седьмом уроке по CSS.

Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)

Памятка вебмастеру по CSS

У нас есть три блока, которые нужно собрать в один, 4-й блок, он будет определять размеры хтмл-страницы. Для этого в код файла index.html добавьте следующие строки:

<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=page>
<div id=header>Первый блок</div>
<div id=menu>Второй блок</div>
<div id=content>Третий блок</div>
</div>
</body>
</html>

Так мы сделали 4-й слой под названием page, он обьединил в себе все три слоя header, menu и content. Теперь для слоя page нужно задать параметры с таблице стилей:

/* таблица стилей */
/* задаем размещение блоков */
#page { width:800px; background:#ffffcc;}
#header { background:red; width:800px; height:100px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; }

Мы задали только ширину и фон для слоя. Если теперь посмотреть на нашу страницу, то видно, что слой page объединил все три слоя:

Шапка (header) и меню (menu) находятся на своих местах и двигать их не нужно, а вот слой content должен находиться справа от меню, как решить эту задачу читайте в следующем 6-ом уроке.

Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS

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

Теперь нужно задать слоям ширину и высоту, делается это следующим образом - откройте файл style.css допишите там параметры высоты и ширины для первого (красного) слоя:

/* таблица стилей */
/* задаем размещение блоков */
#1 { background:red; width:800px; height:100px; }
#2 { background:gray }
#3 { background:blue }

Сохраните документ и посмотрите как теперь выглядит страница:

Как видите слой изменил свои размеры, задайте размеры для остальных слоев:

/* таблица стилей */
/* задаем размещение блоков */
#1 { background:red; width:800px; height:100px; }
#2 { background:gray; width:140px; height:300px; }
#3 { background:blue; width:650px; height:300px; }

Давайте сейчас для удобства изменим названия наших блоков, первый блок назовем header, второй - menu и третий блок станет content, в итоге получим следующие коды:

код страницы index.html

<html>
<head>
<title>Дивный дизайн</title>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
<meta http-equiv=content-language content=ru>
<meta content=”дизайн, div, дивный” name=keywords>
<meta content=”Делаю сайт с дивным дизайном” name=description>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id=header>Первый блок</div>
<div id=menu>Второй блок</div>
<div id=content>Третий блок</div>
</body>
</html>

код таблицы стилей style.css

/* таблица стилей */
/* задаем размещение блоков */
#header { background:red; width:800px; height:100px; }
#menu { background:gray; width:140px; height:300px; }
#content { background:blue; width:650px; height:300px; }

Теперь будем считать что блок header - это шапка страницы, menu - это меню и content - содержание (контент).

Переходим к 5-ому уроку, где мы соберем все три блока в одном блоке.

Что такое дивный дизайн
Урок 1. Делаем сайт на div-ах (дивный дизайн)
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаем цвет фона для слоев
Урок 4. Ширина и высота слоев (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоев относительно горизонтали
Урок 7. Задание отступов (полей, отбивок) для слоев
Урок 8. Форматирование шрифтов (CSS)Памятка вебмастеру по CSS