Содержание
1. Создайте папку в которой будут находиться все файлы, используемые в вашем сайте: выберите Пуск | Программы | Проводник | выберите диск C:, выберите папку Мои документы, выберите Файл | Создать | Папка, введите gord_website (где вместо gord введите свой логин).
2. Создайте файл в формате HTML: выберите Пуск | Программы | Блокнот, выберите Файл | Сохранить как, в списке Тип файла выберите Обычный текст, в поле Имя файла введите okna.htm (используйте только прописные буквы, не употребляйте пробелы или какие-либо знаки пунктуации, кроме знака подчеркивания), нажмите Сохранить.
3. Создайте web-страницу: откройте okna.htmи введите код на языке XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Коллекция окон</>title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> </head> <body> </body> </>html>
4. Что в 1-ой строке? В теге <DOCTYPE> определен DTD (document type definition - определение типа документа), который задает список элементов и атрибутов, определяющих тип документа и разрешенных в данной версии XML-документа. DTD может присутствовать в том же файле, что и документ, либо содержатся в отдельном DTD-файле.
5. Что во 2-ой строке? Открывающий тег <html>, обязательный для всех HTML-документов. Его отличие в том, что он содержит атрибут xmlns (XML Name Space - пространство имен языка XML). В этом параметре указывается источник всех тегов. В XML этот параметр необходим, поскольку существует вероятность того, что два языка на основе XML будут использовать один и тот же тег. Если по умолчанию указано пространство имен, то программа, отображающая документ (в данном случае веб-браузер), способна устранить подобные конфликты.
6. Что есть XHTML и чем он отличается от HTML? Стандарт XHTML был разработан, чтобы заменить HTML, - таким образом, отношения между двумя стандартами носят исторический характер. Это принципиально новый подход, который позволяет привести HTML в соответствие языку XML (eXtensible Markup Language - расширяемый язык разметки). XML является мета-языком, то есть набором правил, которые позволяют разрабатывать новые языки, не выходя за рамки общего стандарта. XML - это язык разметки, такой же, как и HTML, - так что их синтаксис очень похож. Пример фрагмента XML-кода: <authornametype="first">Александр</authorname>. Существуют различные вариации XML, например, MathML, язык разметки, используемый математиками для записи математических выражений. XHTML - это вариация языка, которая применяется разработчиками для разметки веб-страниц.
Один из основных принципов спецификации XML заключается в том, что теги описывают содержимое документа, а не его внешний вид. Внешний вид страниц, выполненных в формате XML, определяется отдельным типом кода (например, CSS, XSLT или XSL-FO).
Если говорить кратко, XHTML применяется для описания логической структуры документа: заголовков разного уровня (<h1>, <h2> и т. д.), списков (<ol>, <ul>, <li>), текста в теле документа (<p>), выделяемого текста (<strong>, <em>), ссылок (<a>) и т. п. Для указания правил, по которым браузеры должны отображать информацию, вместо тегов внешнего вида (таких как <font>или <b>) используются каскадные таблицы стилей CSS.
XHTML в основном подобен HTML. Многие теги остались точно такими же:<body>, <head>, <h1>, <p>, <ol>, <a>, <table>, <tr>, <td>, <form> и другие. Фактически, при переходе к XHTML большая часть HTML-кода остается неизменной. Это значительно сокращает необходимое количество изменений.
Но XHTML имеет и ряд отличий от HTML. В последующих упражнениях эти различия будут найдены и соответствующим образом изменены. Вследствие обязательного разделения логической разметки страниц от их внешнего вида, о чем говорилось выше, важно выделить следующие различия:
все теги XHTML и их атрибуты записываются в нижнем регистре. В HTML теги <p> и <P> допустимы в равной степени, и многие разработчики использовали верхний регистр, поскольку это позволяло выделять теги на фоне остального кода. Но язык XHTML построен на основе правил XML, согласно которым все теги должны записываться в нижнем регистре, так что здесь допустим только тег <p>. Атрибуты тегов, например атрибут cellpadding="3" тега <table>, тоже вводится в нижнем регистре;
все XHTML-теги должны быть закрытыми. Например, если на странице применяется тег <h1>, где-то должен быть и закрывающий тег </h1>. Однако у некоторых элементов нет закрывающих тегов. В частности, к таким пустым тегам относятся теги <br>, <img src="xyz.gif">, <hr> и <input>. Помимо этого, в HTML такие теги, как <p> и <li>, могли быть как закрытыми, так и пустыми. В XHTML они должны быть парными, то есть иметь закрывающие теги, в частности, </p> и </li>. Пустые теги закрываются особым образом при помощи следующего синтаксиса: <пустой_тег />. Следовательно, приведенные выше пустые теги должны быть преобразованы таким образом: <br />, <img src="xyz.gif" />, <hr /> и <input />. Пробел и обратная косая черта (обратный слэш) заменяют закрывающий тег;
поскольку существует множество различных версий HTML, разработчики в коде страниц указывают тип документа. Например, Dreamweaver в верхнюю строку большинства документов добавляет следующий код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">. Эта строка сообщает браузерам о том, какая версия кода (Модификация Transitional стандарта HTML 4.01) и какой язык (скажем, английский) используются в документе. В XHTML применяется другая форма объявления типа документа. Помимо этого, поскольку XHTML соответствует стандартам XML, документ должен содержать и объявление XML;
как говорилось ранее, теги физического форматирования отменены. Вместо этого для управления внешним видом применяются каскадные таблицы стилей.
7. Просмотрите страницу в браузере: выберите Пуск | Программы | Firefox, выберите Файл | Открыть файл, выберите файл okna.htm
8. Создайте файл таблицы стилей: выберите Пуск | Программы | Блокнот, выберите Файл | Сохранить как, в списке Тип файла выберите Обычный текст, в поле Имя файла введите gord_styles.css, нажмите Сохранить.
9. Подключите таблицу стилей: введите в okna.htmследующую строку с тегом link, который может быть помещен в любое место между открывающим и закрывающим тегом head:
<link rel="stylesheet" type="text/css" href="gord_styles.css"/>
10. Правило каскадных таблиц стилей начинается с указания элементов, которые вы форматируете (например, body) и фигурных скобок, в которых заключается информация о стилях элементов. Сама инструкция по форматированию представляют собой пары в виде параметра (например, background) и значения (например, #edf2ff, так в CSS задается оттенок синего цвета). Создайте цвет фона: откройте файл gord_styles.css и введите код CSS:
body {background: #edf2ff}
11. Просмотрите страницу в браузере: выберите Пуск | Программы | Firefox, выберите Файл | Открыть файл, выберите файл okna.htm, должен появиться голубой фон.
12. Существуют заголовки шести уровней: начиная с h1 и заканчивая h6. Добавьте в okna.htmпосле тега <body> такую строку:
<h1>Коллекция окон</h1>
13. Просмотрите страницу okna.htm в браузере. Браузеры воспринимают заголовок h1 как текст написанный 24 кеглем шрифтом Times черного цвета, и оставляют большие отступы сверху и снизу от заголовка.
14. Некоторые из параметров CSS являются наследуемыми (inherited). Это например, font-family. Это означает, что они влияют не только на элементы, к которым они применяются (body). Но также на элементы, содержащиеся в данном элементы (h1). Параметр font - family позволяет устанавливать предпочтительные шрифты для отображения данных элементов. Если первый шрифт окажется недоступным на компьютере посетителя, будет совершена попытка использовать второй шрифт и так далее. Установите шрифт: откройте файл gord_styles.css и введите код:
body {background: #EDF2FF;font-family: Verdana, Arial, Helvetica, sans-serif}
15. Измените цвет текста: откройте файл gord_styles.css и введите :
body {background: #EDF2FF;font-family: Verdana, Arial, Helvetica,
sans-serif;color:#4D65A0}
16. Просмотрите страницу okna.htm в браузере.
17. В файле okna.htm создайте абзац после тега </h1>:
<p>На открытках представлены снятые крупным планом яркие и красочные образцы окон из Енисейска и Красноярска.</p>
18. Просмотрите страницу okna.htm в браузере. Текст абзаца унаследует синий цвет и шрифт от body, также как это было в заголовочной части.
19. Заголовок смотрится лучше, если он расположен близко к абзацу. Параметр margin отвечает за пространство, оставленное между элементами. Для того, чтобы поместить заголовок непосредственно перед абзацем, следующим за ним, установите отступы равным 0. Для того, чтобы сохранять определенное расстояние между абзацами, установите отступ 12. Установите расстояние между элементами: откройте файл gord_styles.css и введите код:
h1 {margin:0}
p {margin-top:0; margin-bottom:12px}
21. Скопируйте в свой каталог gord_websiteграфические файлы и каталог little из каталогаdoc_for_4/okna/
22. Элемент img используется для добавления изображений на страницу. При помощи атрибута src можно указать имя и местонахождение графического файла. Атрибут alt появится в том случае, если изображение не загрузится. Добавьте фотографию на стрницу: откройте файл okna.htm и после тега </p> введите код:
<img src="okno_1.jpg" alt="Окно в Енисейске" width="94" height="150"/>
23. Просмотрите страницу okna.htm в браузере.
24. Всплывающая подсказка появляется в тот момент, когда указатель мыши находится на изображении. Она автоматически исчезает через несколько секунд, поэтому текст должен быть коротким, чтобы бы его можно было прочесть за короткое время. Для того, чтобы создать всплывающую подсказку откройте файл okna.htm и введите атрибут title:
<imgsrc="okno_1.jpg" alt="Окно в Енисейске" width="94" height="150” title="Енисейские окна: 10 открыток для записей - 50 руб., 10 почтовых открыток - 40 руб." />
25. Просмотрите страницу okna.htm в браузере.
26. Существует шесть уровней заголовков. Заголовки автоматически начинаются с новой строки. Браузеры автоматически делают заголовки больше и жирнее, чем обычный текст, причем для каждого следующего заголовка меньшего уровня применяется меньший шрифт. Добавьте подзаголовок: откройте файл okna.htm и после тега <img> введите:
<h2>Енисейские окна</h2>
27. Коды специальных символов называемые подстановкой начинаются с амперсанда & и заканчиваются точкой с запятой. Откройте файл okna.htm и введите:
<h2>“Енисейские окна” </h2>
28. Просмотрите страницу okna.htm в браузере.
29. Каждый новый абзац начинается с новой строки под заголовком. У него будет тот же формат, что у первого абзаца. Добавьте абзац: откройте файл okna.htm и после тега </h2> введите:
<p> На Юге и востоке главное в доме - дверь. Окон мало и днем они, как правило, закрыты от жары и солнца. В северной стране России окно стало внешним украшением жилища. Фотограф видит окна снаружи. Как художник он не мог обойти вниманием аккуратное окошко, где наличники гармонично сочетаются с тюлевыми занавесками и комнатными цветами на подоконнике. </p>
30. Измените размер шрифта. Для этого используйте параметр font-size. Параметр line-height задает пространство между строками. Откройте файл gord_styles.css и введите:
p {margin-top:0; margin-bottom:12px; font-size:12px; line-height:1.2}
31. Просмотрите страницу okna.htm в браузере. Все абзацы изменились. Заголовки остались прежними.
32. Параметр float представляет изображение в виде острова, который окружает текст и другие элементы, как вода. Разместите изображение с одной стороны: откройте файл gord_styles.css и введите код:
img {float:left}
33. Просмотрите страницу okna.htm в браузере.
34. Для привлекательности текста сделайте его распложенным не вплотную к фотографии. Для этого добавьте отступ в 10 пикселей с правой стороны от сдвинутых влево изображений: откройте файл gord_styles.css и введите:
img {float:left; padding-right:10px}
35. Просмотрите страницу okna.htm в браузере.
36. Установите для заголовков 2 уровня нулевой отступ: откройте файл gord_styles.css и введите:
h1, h2 {margin:0}
37. Просмотрите страницу okna.htm в браузере.
38. Чтобы заголовки только 2 уровня имели границу, мы создаем новое правило только для h2. Параметр border имеет три атрибута: ширина (1px), стиль (solid) и цвет. Создайте границу: откройте файл gord_styles.css и введите код:
h2 {border-top: 1px solid #4D65A0}
39. Просмотрите страницу okna.htm в браузере.
40. Создайте новый вид абзаца для размещения информации и продаже открыток. Для этого потребуется атрибут class, чтобы обозначить нужные абзацы. Откройте файл okna.htm и после цветами на подоконнике . </p> введите:
<p class="sales_info">Номер изделия: 7845-C</p>
41. Изменим параметры форматирования абзацев для продаж. Точка после p говорит о том, что данное правило применяется к тем элементам p для которых атрибут class равен sales_info. Откройте файл gord_styles.cssи введите код:
p.sales_info {font-style:italic}
42. Просмотрите страницу okna.htm в браузере.
43. Для того чтобы перейти на следующую строку, нужно поставить тег <br /> в нужное место. Между выражением br и прямым слешем ставится пробел. Откройте файл okna.htm и введите:
</p> <p class="sales_info">Номер изделия: 7845-C <br />10 открыток для записей - 50 руб., <br />10 почтовых открыток - 40 руб. </p>
44. Просмотрите страницу okna.htm в браузере.
45. Чтобы отобразить небольшой фрагмент текста курсивом следует использовать тег <i> . Для текста большого объема нужно применять параметр font-style. Для выделения части текста жирным начертанием следует заключить его в теги <b>. Для текста большого объема нужно применять параметр font-weight.
Откройте файл okna.htm и введите:
<p> На открытках в разделе <i>Коллекция окон</i> представлены снятые крупным планом яркие и красочные образцы окон из Енисейска и Красноярска. </p> <br />10 открыток для записей - <b>50 руб.</b>, <br />10 почтовых открыток - <b>40 руб</b>.
46. Просмотрите страницу okna.htm в браузере.
47. Разбейте страницу на структурные элементы посредством элементов div и затем отформатировать эти блоки как отдельные единицы. Откройте файл okna.htm и введите:
<div class="intro"> <h1>Коллекция окон</h1><p>На открытках в разделе <i>Коллекция окон</i> представлены снятые крупным планом яркие и красочные образцы окон из Енисейска и Красноярска.</p> </div> <div class="postcard"> <img src="okno_1.jpg" alt="Окно в Енисейске" width="94" height="150" title="Енисейские окна: 10 открыток для записей - 50 руб., 10 почтовых открыток - 40 руб." /> <h2>“Енисейские окна”</h2> <p>На Юге и востоке главное в доме - дверь. Окон мало и днем они, как правило, закрыты от жары и солнца. В северной стране России окно стало внешним украшением жилища. Фотограф видит окна снаружи. Как художник он не мог обойти вниманием аккуратное окошко, где наличники гармонично сочетаются с тюлевыми занавесками и комнатными цветами на подоконнике.</p> <p class="sales_info">Номер изделия: 7845-C <br />10 открыток для записей - <b>50 руб.</b>, <br />10 почтовых открыток - <b>40 руб</b>.</p> </div>.
48. Просмотрите страницу okna.htm в браузере.
49. Применим таблицы стилей к целому блоку. Добавляем отступ в 15 пиксилей со всех сторон блока атрибут class которого равен postcard: откройте файл gord_styles.css и введите код:
div.postcard {padding:15px}
50. Установите для элементов div параметра clear значение both, так чтобы новый блок класса postcard не начинался до тех пор, пока слева и справа стоят сдвигаемые элементы и не закончится изображение предыдущей открытки. Сделайте обтекание: откройте файл gord_styles.css и введите:
div {clear:both}
51. Добавьте еще одну открытку. Новый блок состоит из тех элементов, что и предыдущий: изображение с заглавием, потом заголовок 2 уровня, абзац, и информация о продажах. Откройте файл okna.htm и после тега </div> введите:
<div class="postcard"> <img src="okno_2.jpg" alt="Еще окно в Енисейске" width="97" height="150" title="Енисейские окна: 10 открыток для записей - 50 руб., 10 почтовых открыток - 40 руб." /> <h2>“Другие енисейские окна”</h2><p> По окнам в России легко составить представление о жизни обитателей дома. </p> <p class="sales_info">Номер изделия: 7845-C <br />10 открыток для записей - <b>50 руб.</b>, <br />10 почтовых открыток - <b>40 руб</b>. </p></div>
52. Просмотрите страницу okna.htm в браузере.
53. Разделим изображения на два класса: четные (odd) и нечетные (even). Откройте файл okna.htm и введите:
<div class="postcard"> <img src="okno_1.jpg" class="odd" alt="Окно в Енисейске" width="94" height="150" title="Енисейские окна: 10 открыток для записей - 50 руб., 10 почтовых открыток - 40 руб." /> <div class="postcard"> <img src="okno_2.jpg" class="even" alt="Еще окно в Енисейске" width="97" height="150" title="Енисейские окна: 10 открыток для записей - 50 руб., 10 почтовых открыток - 40 руб." />
54. Добавляем второе стилевое правило: откройте файл gord_styles.css и введите:
img.odd {float:left; padding-right:10px}
img.even {float:right; padding-left:10px}
55. Просмотрите страницу okna.htm в браузере.
56. Создайте файл в формате HTML: выберите Пуск | Программы | Блокнот, выберите Файл | Сохранить как, в списке Тип файла выберите Обычный текст, в поле Имя файла введите index.htm, нажмите Сохранить.
57. Создайте главную страницу index.htm: введите код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Машины открытки</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> </head> <body> </body> </html>
58. Определите структуру. Содержание страницы обычно заключается в теги body. Наша body будет разбито на два основных блока: центральную область (main) и навигационную панель (nav_bar). Откройте файл index.htm и после тега <body> введите:
<div class="main"> </div> <div class="nav_bar"> </div>
59. Подключите таблицу стилей: откройте index.htm и после charset=windows-1251" /> введите:
<link rel="stylesheet" type="text/css" href="gord_styles.css"/>
60. Просмотрите страницу index.htm в браузере.
61. Создайте файл таблицы стилей: выберите Пуск | Программы | Блокнот, выберите Файл | Сохранить как, в списке Тип файла выберите Обычный текст, в поле Имя файла введите home.css, нажмите Сохранить.
62. Подключите новый файл таблиц стилей. Порядок подключения таблиц очень важен. Таблица подключенная позже имеет приоритет перед ранними таблицами стилей. Откройте файл index.htm и после href="gord_styles.css"/> введите:
<link rel="stylesheet" type="text/css" href="home.css"/>
63. Добавьте изображение: откройте файл home.css и введите:
body {background: url(curly.jpg)}
64. Просмотрите страницу index.htm в браузере.
65. Добавьте логотип: откройте файл index.htm и после <div class="main"> введите:
<p><img src="header_logo.gif" alt="Машины открытки" width="445" height="77" /></p>
66. Просмотрите страницу index.htm в браузере.
67. Добавьте текст на главную страницу: откройте файл index.htm и после тега height="77" /></p> введите:
<p>Мне всегда хотелось совместить любовь к живописи и любовь к архитектуре. Путешествуя по Сибири, я сделала несколько снимков, которые затем использовала как основу для новой серии почтовых открыток и открыток для записей. Это удивительные русские окна подлинные шедевры. Я надеюсь, что вам понравятся эти снимки.</p>
68. Просмотрите страницу okna.htm в браузере.
69. Увеличим размер шрифта. Откройте файл home.css и введите:
p {font-size: 16px}
70. Просмотрите страницу index.htm в браузере.
71. Создайте ссылку: откройте файл index.htm и после понравятся эти снимки.</p> введите:
<p>Вы можете просмотреть каталог открыток <a href="okna.htm">русских окон</a>.</p>
72. Создайте стили для ссылок. Вместо привычного светло-синего цвета для не посещенных и посещенных ссылок мы используем тот же цвет, что и в основном тексте. Для ссылок, которые выделены при помощи кнопки табуляции (a:focus), на которые указали (a:hover) или по которым кликнули мышью (a:active), мы установим фиолетовый цвет, уберем подчеркивание и сделаем их полужирными. Откройте файл home.css и введите код:
a:link, a:visited {color:#4D65A0}
a:focus, a:hover, a:active {color:#7A4DA0; text-decoration: none;
font-weight:bold}
73. Просмотрите страницу index.htm в браузере. Браузеры по умолчанию подчеркивают текст ссылок. Изменяя цвет делаем их менее заметными. Когда выбирается наша ссылка она теряет подчеркивание, становится полужирной и меняет цвет на фиолетовый.
74. Скопируйте в свой каталог папку little из каталога doc_for_4
74. Создайте графические ссылки. Откройте файл index.htm и введите:
<p>Или вы можете нажать на одну из картинок внизу, чтобы перейти непосредственно к набору открыток.</p> <p><a href="ceramic.htm"><img src="little/okno_2.jpg" alt="Окна" width="100" height="133" /></a> <a href="architecture.htm"><img src="little/spiral_lit.jpg" width="100" height="133" alt="Архитектура" /></a> <a href="market.htm"><img src="little/market_lit.jpg" alt="Базары" width="100" height="133" /></a> <a href="festivals.htm"><img src="little/festival_lit.jpg" alt="Фестивали" width="100" height="133" /></a> </p>
75. Просмотрите страницу index.htm в браузере.
76. Добавьте атрибут class к каждой из четырех графических ссылок. Откройте файл index.htm и введите:
<p><a href="ceramic.htm"><img src="little/okno_2.jpg" alt="Окна" width="100" height="133" class="little" /></a> <a href="architecture.htm"><img src="little/spiral_lit.jpg" width="100" height="133" alt="Архитектура" class="little" /></a> <a href="market.htm"><img src="little/market_lit.jpg" alt="Базары" width="100" height="133" class="little" /></a> <a href="festivals.htm"><img src="little/festival_lit.jpg" alt="Фестивали" width="100" height="133" class="little" /></a></p>
77. Создайте правило стиля, которое добавит границу вокруг каждого графического изображения и с нашим синим цветом. Откройте файл home.css и введите:
img.little {border: 1px solid #4d65A0}
78. Просмотрите страницу index.htm в браузере.
79. Добавьте абзац, включающий в себя информацию об авторских правах. Откройте файл index.htm и введите перед тегом </div>:
<p class="copyright">© Copyright 2007. Все права защищены. Маша.</p>
80. Уменьшите абзац об авторских правах. Атрибут smaller вычисляется в зависимости от элементов которые содержат данный элемент. У нас это элементы div класса main. Откройте файл home.css и введите:
p.copyright {font-size: smaller; padding-top: 40px}
81. Просмотрите страницу index.htm в браузере.
82. Разместите изображение навигационной панели. Откройте файл index.htm и введите:
<div class="nav_bar"> <p><img src="leftcurls.jpg" alt="" width="75" height="314" /></p> </div>
81. Просмотрите страницу index.htm в браузере.
82. Откройте файл home.css и введите:
div.nav_bar {position: absolute; left: 10px; top: 10px}
83. Переместите блок main: откройте файл home.css и введите:
div.main {margin-left: 90px}
84. Просмотрите страницу index.htm в браузере.
85. Добавьте ссылки в навигационную панель для улучшения навигации в целом и для того, чтобы предоставить альтернативу на случай, если изображения не загрузятся.. Откройте файл index.htm и введите после height="314" /></p>:
<p><a href="ceramic.htm">Окна</a><br /><a href="architecture.htm">Архитектура</a><br /><a href="market.htm">Базары</a><br /><a href="festivals.htm">Фестивали</a><br />
86. Просмотрите страницу index.htm в браузере.
87. Выравните ссылки по правому краю. Откройте файл home.css и введите:
div.nav_bar {position: absolute; left: 10px; top: 10px; text-align:right}
88. Просмотрите страницу index.htm в браузере.
89. Уменьшите длину ссылок. Откройте файл home.css и введите:
div.nav_bar a {font-size: 10px}
90. Просмотрите страницу index.htm в браузере.
91. Сделайте основной текст курсивом. Откройте файл home.css и введите:
div.main p {font-style:italic}
92. Просмотрите страницу index.htm в браузере.