Cамоучитель по созданию сайтов


Начнем с конца


Начнем с конца
Начнем с конца Представим себе, что наша веб-страничка (или сайт) уже готова и мы с умилением любуемся ею на экране своего компьютера. Как же теперь сделать так, чтобы и другие посетители Интерне...
Адрес в Интернете
Адрес в Интернете Подобно тому как любой телефон в телефонной сети имеет свой уникальный номер, любой компьютер, подключенный к Интернету, тоже имеет свой уникальный номер, который называется IP-...
Где найти сервер для публикации
Где найти сервер для публикации Не все имеют постоянное соединение с Интернетом. Тем, у кого соединение временное, гораздо проще разместить свою веб-страничку на каком-нибудь чужом компьютере, сп...
Как отправить материалы серверу
Как отправить материалы серверу Получив место на сервере, можно загрузить туда все файлы своей странички. Для этого удобнее всего воспользоваться так называемым FTP- соединением. При этом процесс...
Доменные имена
Доменные имена Хорошо, а как же будет “называться” наша страничка? Как пользователи Интернета смогут ее найти? Как мы уже говорили выше, любой компьютер в Интернете имеет свой уникальный IP-адрес...
Регистрация имен
Регистрация имен А как быть, если хочется сделать адрес странички более коротким, запоминающимся? Для этого существуют многочисленные службы переадресации, например: come.to, www.da.ru, attend.to...
Как написать вебстраницу
1.3. Как написать веб-страницу Как же приступить к созданию веб-страницы? Вообще говоря, главное — придумать и представить себе то, что на этой странице должно содержаться. В этой книге мы больше...
Простой текст загруженный в броузер
Рисунок 1.2. Простой текст, загруженный в броузер...
Теги HTML
Теги HTML Пользователь увидит эту страничку так, как показано на Рисунок 1.2. Это уже что-то, хотя и не слишком привлекательно: во-первых, исчезло форматирование текста (абзацы), во-вторых, — как...
Рисунок 1 3 Простейшая страничка текст и заголовок
Рисунок 1.3. Простейшая страничка: текст и заголовок Обратите внимание на то, что в заголовке окна броузера также появились слова “Домашняя страница Сергея Сергеева”. Это произошло потому, что в...
Страничка отформатированная с помощью тега
Рисунок 1.4. Страничка, отформатированная с помощью тега <PRE> заключенный между тегами <PRE> и </PRE> , именно так. Во-вторых (и это главное), в том, что броузер игнориру...
Та же страничка в форматированием текста узком окне броузера
Рисунок 1.6. Та же страничка в форматированием текста узком окне броузера <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <ТIТLЕ>...
Обзор программ для просмотра вебстраниц
1.4. Обзор программ для просмотра веб-страниц...
Различия между броузерами
Различия между броузерами Итак, прежде чем идти дальше, давайте окинем взглядом броузеры и посмотрим, что же они могут отображать, а что — нет. Действительно, ведь все, что мы напишем, пользовате...
Броузер Internet Explorer
Броузер Internet Explorer На сегодняшний день наиболее популярной программой просмотра веб-страниц является броузер Microsoft Internet Explorer, которым пользуется примерно половина всех бродящих...
Броузер Netscape Navigator
Броузер Netscape Navigator Вторым по популярности броузером в мире является Netscape Navigator. В отличие от MS Internet Explorer, эта программа реализована для многих платформ, включая OS/2 и UN...
Другие свойства просмотра
Другие свойства просмотра Несмотря на то что программами MS Internet Explorer и Netscape Navigator пользуется подавляющее большинство пользователей Интернета, существуют и другие броузеры, то и д...
Простейшие средства создания вебстраниц
Простейшие средства создания веб-страниц В предыдущем разделе мы рассмотрели программы, предназначенные для просмотра веб-страниц. Теперь, прежде чем приступить непосредственно к их созданию, дав...
Код HTML в текстовом редакторе Блокнот
Рисунок 1.7. Код HTML в текстовом редакторе Блокнот Однако в очень простых текстовых редакторах типа Блокнота весь HTML-текст приходится писать вручную, а многим хотелось бы какую-то часть работы...
Вебредактор TextPad
Веб-редактор TextPad Итак, начнем. Тем, кто предпочитает набирать код HTML вручную, но кому не хватает функциональности Блокнота и подобных ему программ, можно посоветовать программу под название...
Вебредактор Arachnophilia
Веб-редактор Arachnophilia Завершив краткий обзор возможностей программы TextPad, давайте рассмотрим другую программу для написания .HTML-кода — Arachnophilia, которую можно получить по адресу ww...
Вебредакторы типа WYSIWYG
Веб-редакторы типа WYSIWYG Мы рассмотрели программы, в которых основной упор при создании веб-страниц сделан на написание HTML-коца. вручную. Однако существуют программы, позволяющие редактироват...
Редактор Star Office
Редактор Star Office Более мощными средствами редактирования HTML-файлов располагает программа StarOffice. Здесь при открытии или создании HTML- файла соответственно меняется содержимое некоторых...
Netscape Composer
Netscape Composer Еще одна WYSIWYG-ориентированная программа для редактирования .HTML-файлов встроена в броузер Netscape. Она называется Netscape Composer гораздо меньше, чем в предыдущей, однако...
Создание вебстраниц при помощи программы Allaire Homesite/Cold Fusion
1.6. Создание веб-страниц при помощи программы Allaire Homesite/Cold Fusion Одним из самых замечательных программных продуктов, предназначенных для разработки веб-страниц, является программа Home...
Работа с файлами
Работа с файлами Первая вкладка — Files (Файлы) — самая очевидная в использовании. На ней представлен каталог файлов, имеющихся на компьютере. Двойной щелчок мыши на значке файла открывает его на...
Работа с проектами
Работа с проектами Вторая слева вкладка панели Resource Tab называется Projects (Проекты). Она очень похожа по внешнему виду на предыдущую, но позволяет собрать файлы, физически размещенные в раз...
Схема сайта
Схема сайта Средства третьей вкладки — Site View (Схема сайта) — предназначены для просмотра схемы разрабатываемого веб-сайта. Связи между HTML- документами, рисунками и прочими объектами на схем...
Прочие вкладки
Прочие вкладки Следующая вкладка. Snippets (Отрывки), предназначена для создания коротких шаблонных текстов для ваших веб-страниц, их каталогизации и быстрой вставки в документы. Затем идет вкла...
Панель редактирования
Панель редактирования Теперь давайте кратко рассмотрим основную часть окна программы — панель редактирования. Вкладки: Edit (Правка), Browse (Просмотр) и Design (Оформление). На первой HTML- док...
Автоматизация ввода
Автоматизация ввода Теперь давайте обратим внимание на панель инструментов для быстрого ввода тегов (Quick Bar), расположенную в правой верхней части окна программы. Элементы управления, представ...
Диалоговые окна редактирования тегов
Диалоговые окна редактирования тегов О том, что это все означает, мы поговорим в следующих главах, а пока что рассмотрим еще одно типичное диалоговое окно программы. Откройте вкладку Tables и наж...
Создание графических карт ссылок
Создание графических карт ссылок Для создания графической карты ссылок служит кнопка New Image Map (Создать изображение-карту) на верхней панели инструментов. Она открывает диалоговое окно, в кот...
Предварительный просмотр страницы
Предварительный просмотр страницы Вторая вкладка называется Browse (Просмотр). На ней страница отобража ется в том виде, в котором она будет видна в броузере. Собственно говоря, кроме как для про...
1 Как создают вебстраницы
1. Как создают веб-страницы...
От автора
1.1. От автора Меня часто спрашивают: “Легко ли создавать веб-страницы и как это делается? ” При этом выясняется, что под словом создавать разные люди понимают самые различные вещи: и как придума...
Самое главное на любой вебстранице — гиперссылки
2.2. Самое главное на любой веб-странице — гиперссылки В предыдущем разделе мы рассмотрели различные способы форматирования текста веб-страницы. Однако созданная нами в качестве примера “Домашняя...
Применение внутренних гиперссылок
Рисунок 2.7. Применение внутренних гиперссылок...
Гиперссылки в пределах сайта
Гиперссылки в пределах сайта Теперь рассмотрим другой случай. Обычно бывает целесообразно разместить разные логические фрагменты текста в разных файлах (особенно если они большие). Тогда время за...
Внешние гиперссылки
Внешние гиперссылки Однако гиперссылки можно устанавливать не только на файлы, содержа-щиеся в своем каталоге на сервере, но и на любые другие Интернет-ресурсы. В этом случае в качестве значения...
Применение гиперссылок для связей с удаленными серверами
Рисунок 2.8. Применение гиперссылок для связей с удаленными серверами Помимо значения "_blank", атрибут TARGET= может принимать еще значения "_self", "_top" и "...
Как создать списки на вебстранице
2.3. Как создать списки на веб-странице Иногда при создании веб-страниц бывает полезно (а порой даже необходимо) как-то упорядочить представленную на них информацию. В традиционном языке HTML для...
Маркированные и нумерованные списки
Маркированные и нумерованные списки Перечисление услуг хорошо смотрится в виде маркированного списка. Для его организации применяется тег <UL> . Все, что находится между ним и его открыва...
Применение маркированного и нумерованного списков
Рисунок 2.9. Применение маркированного и нумерованного списков Результат показан на Рисунок 2.9. Как видите, мы здесь не употребляли закрывающий тег </LI> . Броузер обычно все равно поним...
Применение вложенных списков
Рисунок 2.10. Применение вложенных списков щее место в словаре. Для этого каждая буква алфавита должна быть оформлена как гиперссылка, например: <A HREF="#BukvaV">B</A> а...
Использование списка терминов
Рисунок 2.11. Использование списка терминов соответствующий раздел словаря терминов, причем не куда-нибудь, а точно в то место, где этот термин поясняется. Если вы внимательно просмотрели послед...
Создание таблиц
2.4. Создание таблиц Для того чтобы двигаться дальше, давайте рассмотрим такой пример. Допустим, мы хотим поместить на свою страничку таблицу результатов хоккейного турнира. Поскольку для хорошег...
Рисунок 2 1
Рисунок 2.1 2 . Таблица, созданная простейшими средствами HTML Как же сделана эта таблица? Для того чтобы это понять, давайте рассмотрим сначала соответствующие средства HTML....
Формирование структуры таблицы
Формирование структуры таблицы Любая таблица определяется в HTML с помощью тега <TABLE> . Все, что расположено между тегами <TABLE> и </TABLE> , считается таблицей. О...
Основные атрибуты таблицы
Основные атрибуты таблицы Как видите, наша таблица получилась ровно такой ширины, какая нуж- ная, чтобы вместить написанную нами фразу, и ни на пиксел больше. С помощью атрибута WIDTH= можно...
Рисунок 2 1
Рисунок 2.1 3 . Таблица из одной ячейки то броузер отобразит таблицу шириной в 50 пикселов. При этом во фразе Это уже таблица! последнее слово, скорее всего, не поместится в длину таблицы и авт...
Рисунок 2 1
Рисунок 2.1 4 . Установка ширины таблицы А что делать, чтобы текст не “прилеплялся” так сильно к границе ячейки как показано на Рисунок 2.14 и 2.15? Для этого тоже существует специальный атрибу...
Рисунок 2 1
Рисунок 2.1 5. Применение атрибута CELLPADDING= Кроме того, имеется еще атрибут CELLSPACING=, который задает расстояние между ячейками таблицы. В данном случае мы можем увидеть действие э...
Рисунок 2 1
Рисунок 2.1 6 . Применение атрибута CELLSPACING= Кстати, рамка таблицы совершенно не обязана быть серой, по крайней мере в броузере Internet Explorer (версии 3 и выше). Для этого служит а...
Рисунок 2 1
Рисунок 2.1 7 . Окрашивание рамки таблицы Цвет фона таблицы можно задать с помощью атрибута BGCOLOR=. Он может отличаться от цвета общего фона всей страницы, определенного атрибутом BGCOL...
Рисунок 2 1
Рисунок 2.1 8 . Таблица из двух ячеек Теперь добавим в нашу таблицу вторую строку: <TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALI...
Рисунок 2
Рисунок 2. 19 . Пример таблицы с “недостающей” ячейкой...
Рисунок 2 2
Рисунок 2.2 0 . Пример таблицы с пустой ячейкой До сих пор мы рассматривали только атрибуты тега <TABLE> . Однако теги <TR> и <TD> тоже могут иметь собственные атриб...
Управление шириной столбцов
Управление шириной столбцов Если вы посмотрите на Рисунок 2.2 0 , то увидите, что ширина столбцов в нашей таблице разная. Это происходит потому, что броузер распределяет место в таблице в завис...
Объединение ячеек
Объединение ячеек Иногда в таблицах встречаются так называемые объединенные ячейки — когда несколько расположенных рядом ячеек сливаются в одну большую. Это можно сделать, установив атрибуты COL...
Пример объединения ячеек таблицы
Рисунок 2.22. Использование заголовка Результат показан на Рисунок 2.22. Осталось добавить, что использование обсуждавшегося выше атрибута RULES= со значением "groups" подразумевает име...
Анализ примера
Анализ примера Теперь, вооружившись полученными знаниями, давайте вернемся к таблице, представленной на Рисунок 2.13 и посмотрим, как же она сделана. В качестве основного цвета таблицы здесь выбр...
2 Основные средства языка HTML
2. Основные средства языка HTML...
Простейшее форматирование текста
2.1. Простейшее форматирование текста В разделе 1.2 мы начали знакомиться с тем, как пишется код веб-страницы, и увидели, что ничего принципиально сложного в этом нет. Давайте сейчас продолжим зн...
Управление выравниванием текста
Управление выравниванием текста В данном случае нам потребуется такой атрибут, как выравнивание (выключка) текста. Он может употребляться с разными тегами. Поскольку на нашей страничке и заголово...
Иллюстрация применения атрибута ALIGN
Рисунок 2.1. Иллюстрация применения атрибута ALIGN...
Оформление абзацев
Оформление абзацев Вообще говоря, для разделения абзацев вместо тега <BR> можно также использовать тег <Р> . Он, надо сказать, и был создан для этого. Но поскольку придумывали ег...
Оформление заголовков
Оформление заголовков Посмотрим еще раз на нашу страничку. Еще один ее недостаток заключается в том, что весь текст написан шрифтом одного размера. Вообще говоря заголовки выделяют более крупным...
Горизонтальная линейка
Горизонтальная линейка Более, на нашей страничке хотелось бы визуально отделить рассказы от вступительного текста. Это можно сделать с помощью горизонтальной черты. В принципе, для этого достаточ...
Применение заголовочных стилей
Рисунок 2.2. Применение заголовочных стилей тельный текст чуть крупней и выделить в нем некоторые моменты? Кроме того, текст эпиграфа обычно дается чуть более мелким шрифтом, а подзаголовки и под...
Управление шрифтом
Управление шрифтом Чтобы изменить размер шрифта, можно использовать тег <FONT> с атрибутом SIZE=. Вообще говоря, WWW-консорциум не особенно рекомендует использовать тег <FONT> в...
Применение зачеркнутого текста
Рисунок 2.3. Применение зачеркнутого текста Однако вернемся к нашему герою Сергею Сергееву. В таком виде страничка смотрится уже неплохо. Но вы, наверное, обратили внимание на то, что в Интернете...
Цветовое оформление
Цветовое оформление Для этого проще всего установить соответствующие атрибуты тега <BODY> . Атрибут ТЕХТ= определяет цвет текста на страничке, а атрибут BGCOLOR= — цвет фона. Названия цве...
Дополнительные варианты оформления
Дополнительные варианты оформления отображают текст, находящийся между тегами <CITY></CITY> курсивом. Например, если вы напишете следующее" А.С. Пушкин сам говорил, что он &...
Применение длинной цитаты
Рисунок 2.5. Применение длинной цитаты также отобразить и обычные типографские кавычки (“? ”) вместо машинописных (" "). Запись Книга &laquo; Путеводитель по Атлантиде &raquо; о...
Отображение исходного кода программ в броузере
Рисунок 2.6. Отображение исходного кода программ в броузере шрифтом, как код, а тег <ТТ> просто применяет к фрагменту моноширинный шрифт. Разница, прямо скажем, небольшая. Для отображен...
Графические форматы Интернета
3.2. Графические форматы Интернета В предыдущем разделе мы рассмотрели способы использования графических элементов на веб-странице. Но, как вы, вероятно, знаете, существует великое множество разл...
Формат GIF
Формат GIF Формат GIF предназначен в основном для “рисованных” изображений: чертежей, графиков и т. д. В нем используется так называемая индекси- рованная цветовая палитра. Максимальное количеств...
Страничка с круглой фотографией
Рисунок 3.6. Страничка с круглой фотографией Во-первых, GIF-рисунок может быть “прозрачным”. То есть, можно один цвет удалить из палитры GIF, определив его как прозрачный. Тогда при отображении,...
Общий вид программы WWW Gif Animator
Рисунок 3.7. Общий вид программы WWW Gif Animator...
Формат JPEG
Формат JPEG Теперь несколько слов о другом распространенном графическом формате — JPEG (файлы этого формата могут иметь расширение как .jpeg, так и .jpg). В отличие от GIF, этот формат предназнач...
Графические элементы оформления вебстраниц
3.3. Графические элементы оформления веб-страниц Тем, кто впервые начинают работать над созданием веб-страниц, обычно представляется, что использование графики здесь должно ограничиваться вставко...
Линейки и буквицы
Линейки и буквицы Какие же графические элементы возможно применять в качестве такого “украшения”? Здесь надо проявить фантазию. Если вы придумаете что-нибудь оригинальное, ваша веб-страница будет...
Графические маркеры
3.4. Графические маркеры Итак, в предыдущем разделе мы упомянули о возможности создания графических маркеров списков. Она настолько привлекла создателей веб-страниц, что для их удобства были созд...
Оформление кнопок
Оформление кнопок Еще одно частое применение графических элементов — это оформление кнопок. Вообще говоря, кнопка — это элемент взаимодействия с пользователем, так как предполагается, что когда о...
Подготовка рисунков в программе Xara Webstyle
3.5. Подготовка рисунков в программе Xara Webstyle Мелкие графические элементы оформления, которые мы рассматривали в разделе 3.3, удобно готовить в программе, которая называется Xara WebStyle. Э...
Выбор шаблона
Выбор шаблона Щелкнув кнопкой мыши на каком-либо из этих типов, мы попадаем в окно выбора шаблона, на основе которого будет создаваться графический элемент. Например, щелкнем на типе Headings — о...
Настройка параметров рисунка
Настройка параметров рисунка Выбрав шаблон, приступим собственно к созданию нашего элемента. Для этого можно воспользоваться кнопками, расположенными в левой части экрана: Text (Текст), Color (Цв...
Выбор способа сохранения
Выбор способа сохранения Когда графический элемент создан, его нужно сохранить в оптимальном виде — чтобы качество было получше, а размер поменьше. Для этого в программе Xara WebStyle есть очень...
Подготовка рисунков в программе Adobe Photoshop
3.6. Подготовка рисунков в программе Adobe Photoshop А сейчас давайте рассмотрим некоторые приемы подготовки изображений в графическом редакторе Adobe Photoshop. Конечно, подробно описать эту про...
Основное окно программы Adobe Photoshop
Рисунок 3.8. Основное окно программы Adobe Photoshop...
Пример 1 Создание градиентного фона
Пример 1. Создание градиентного фона...
Инструменты программы Adobe Photoshop
Рисунок 3.9. Инструменты, программы Adobe Photoshop В программе Adobe Photoshop выберем из меню Файл (File) пункт Новый (New). Появится диалоговое окно создания нового файла (Рисунок 3.10). Внем...
Создание нового изображения в программе Photoshop
Рисунок 3.10. Создание нового изображения в программе Photoshop Итак, определяем ширину рисунка: 1024 и высоту: 2 пиксела. Остальные параметры нам сейчас не важны. После щелчка на кнопке ОК откро...
Пример 2 Подготовка круглой фотографии
Пример 2. Подготовка круглой фотографии Как вы помните, на Рисунок 3.6 была изображена веб-страница с круглой фото графией. Посмотрим, как же такую фотографию подготовить, если у нас есть обычная...
Рисунок 3 11 Исходная
Рисунок 3.11. Исходная...
Очистка
Рисунок 3.12. Очистка...
Фотография ненужных областей
Рисунок 3.13. фотография ненужных областей. Кадрированньй снимок Обратно (Inverse). При этом на рисунке будет выделено все, кроме обведен ной области. Затем в меню Правка (Edit) выберите пункт О...
Выбор цвета который будет отображаться как прозрачный
Рисунок 3.14. Выбор цвета, который будет отображаться как прозрачный...
Пример 3 Подготовка рисунков произвольной формы
Пример 3. Подготовка рисунков произвольной формы В предыдущем примере мы продемонстрировали выделение овальной области. А что делать, если хочется, чтобы фотография или рисунок на веб-странице бы...
Подготовка изображения произвольной формы
Рисунок 3.15. Подготовка изображения произвольной формы Для выделения объектов произвольной формы в программе Adobe Photoshop имеются такие инструменты, как Лассо (Lasso Tool) и Волшебная палочка...
Изменение размера изображения в программе Photoshop
Рисунок 3.16. Изменение размера изображения в программе Photoshop...
Пример 4 Совмещение изображений
Пример 4. Совмещение изображений С помощью программы Adobe Photoshop можно делать и более интересные манипуляции. Рассмотрим такой пример. Допустим, у нас имеется фотография, изображенная на Рису...
Первая исходная фотография для монтажа
Рисунок 3.17. Первая исходная фотография для монтажа...
Вторая исходная фотография для монтажа
Рисунок 3.18. Вторая исходная фотография для монтажа Сначала с помощью инструмента Волшебная палочка...
Обтравка изображения по контуру
Рисунок 3.18. Обтравка изображения по контуру Итак, выберем из меню Правка (Edit) пункт Трансформ (Transform) и далее дадим команду Перевернуть по горизонтали (Flip Horizontal). В результате полу...
Двухслойное изображение в программе Photoshop
Рисунок 3.19. Двухслойное изображение в программе Photoshop — А дело в том, что здесь мы подошли к одному из самых замечательных свойств программы Adobe Photoshop — умению работать со слоями. Люб...
Эффект зеркального отражения одного из слоев
Рисунок 3.20. Эффект зеркального отражения одного из слоев...
Список слоев в программе Photoshop
Рисунок 3.21. Список слоев в программе Photoshop...
Числовые преобразования в программе Photoshop
Рисунок 3.22. Числовые преобразования в программе Photoshop Итак, попробуем разместить наше вставленное изображение. Для того чтобы его уменьшить, дайте команду Правка > Трансформ > Число (...
Перемещение слоя
Рисунок 3.23. Перемещение слоя...
Изменение масштаба
Рисунок 3.24. Изменение масштаба всех выполненных операций. Выделив любую из них, можно вернуться к тому состоянию, в которой она выполнялась. Вернувшись к моменту уменьшения изображения, снова...
Перемещение слоя за рамки кадра
Рисунок 3.25. Перемещение слоя за рамки кадра...
Удаление “лишней” тени из слоя
Рисунок 3.26. Удаление “лишней” тени из слоя Теперь осталось собственно наложить тень. Из меню Слой (Layer) выберите пункт Эффекты (Effects) и далее команду Наложить тень (Drop Shadow). Откроется...
Окно настройки эффектов применительно к слою изображения
Рисунок 3.27. Окно настройки эффектов применительно к слою изображения В соответствии с освещенностью на фоновой фотографии выберите режим Мягкий свет (Soft Light). При этом следует немного умень...
Наложение тени на слой если потребуется Перед вторым изображения
Рисунок 3.28. Наложение тени на слой если потребуется. Перед вторым изображения...
Законченная композиция после кадрирования
Рисунок 3.28. Законченная композиция после кадрирования сохранением (в формате JPEG) необходимо “спрессовать” все слои в один, так как раздельно хранить информацию о слоях можно только в формате...
Пример 5 Украшение изображения мелкими деталями
Пример 5. Украшение изображения мелкими деталями Иногда возникает потребность немного приукрасить имеющееся изображение, чтобы придать ему своеобразный колорит. Рассмотрим такой пример. Взгляните...
Пример 6 Заливка и заполнение объектов текстурами
Пример 6. Заливка и заполнение объектов текстурами В некоторых случаях возникает необходимость закрасить некоторую область каким-либо цветом или заполнить ее текстурой. Рассмотрим небольшой приме...
Исходный снимок
Рисунок 3.29. Исходный снимок...
Результат заливки
Рисунок 3.30. Результат заливки Инструмент Карандаш (Pencil Tool) альтернативен инструменту Линия (Line Tool). О том, как выбирают альтернативные инструменты (если их нет на панели инструментов),...
Пример 7 Наложение текста
Пример 7. Наложение текста Иногда хочется встроить в изображение текстовый материал. Допустим, вы задумали сделать открытку для дня рожденья . Логично разместить на ней надпись “Happy Birfday”. Х...
Ввод текста в программе Adobe Photoshop
Рисунок 3.33. Ввод текста в программе Adobe Photoshop В нем определим цвет будущего текста Happy Birthday, его размер (в данном случае 40 пункта) и шрифт (мы выбрали Regular). Теперь можно в нижн...
Наложение текста на фотографию
Рисунок 3.34. Наложение текста на фотографию Для переворота текста служит команда Правка >Трансформ > Вращать (Edit >Transform > Rotate). Вокруг нашего текста появятся маркеры, за кот...
Придание тексту рельефности
Рисунок 3.35. Придание тексту рельефности...
Надпись с наклоном
Рисунок 3.36. Надпись с наклоном нуть вниз. Для того чтобы это сделать, сбросьте флажок видимости у слоя Фон (Background) и выберите инструмент многоугольного выделения — только с его помощью (ил...
Заключение
Заключение Завершая этот краткий обзор приемов работы с программой Adobe Photoshop, хочется заметить, что за его рамками, разумеется, остались многие возможности программы, например такие, как фи...
Перемещение выделенной области в одном слое
Рисунок 3.37 Перемещение выделенной области в одном слое...
3 Графика на вебстранице
3. Графика на веб-странице...
Основные способы применения графики
3.1. Основные способы применения графики В предыдущей главе мы рассмотрели несколько примеров создания веб-страниц. Вы, очевидно, уже обратили внимание, что все они смотрятся довольно “строго”. А...
Фоновое изображение
Фоновое изображение Итак, давайте разберемся, каким же образом можно использовать графические элементы на веб-странице. Рассмотрим такой пример. Допустим, мы хотим, чтобы читатели узнали достоинс...
Фоновый рисунок
Рисунок 3.1. Фоновый рисунок Можно указать либо относительное местоположение файла рисунка (то есть путь доступа к нему относительно расположение исходного HTML-файла), либо его полный URL-адрес....
Не самое удачное применение фонового рисунка
Рисунок 3.2. Не самое удачное применение фонового рисунка Попробуем решить эти проблемы. Во-первых, немного уменьшим размер фонового рисунка, чтобы оставить в нем только цвета приблизительно одно...
Графические иллюстрации
Графические иллюстрации И, наконец, проиллюстрируем наш текст, вставив перед описанием фотографию клавиновы. Предположим, что фотография у нас уже готова и лежит в палке \lmages под именем clavi....
Пример странички с фоновым рисунком и иллюстрацией
Рисунок 3.3. Пример странички с фоновым рисунком и иллюстрацией видно! Да и вообще, фоновый рисунок может загрузиться и прорисоваться нe сразу, ведь это графический файл, имеющий гораздо большие...
Изображениекарта
Изображение-карта Теперь давайте рассмотрим более сложный пример. Представим себе, что надо сделать сайт, посвященный описанию старинного компьютера ATARI-800. Уже подготовлены файлы с описанием...
Изображение компьютера из которого мы будем делать
Рисунок 3.4. Изображение компьютера, из которого мы будем делать графическую карту ссылок 1. Сначала рисунок внедряется на веб-страницу обычным образом, с помощью тега <IMG>: <IMG SRC=...
Страничка с графической картой ссылок
Рисунок 3.5. Страничка с графической картой ссылок...
Определение стилей в специальной таблице
4.2. Определение стилей в специальной таблице Читая предыдущий раздел, некоторые, скорее всего, несколько раз поду мали: “Ну и где же здесь обещанное удобство? Неужели удобнее написать <SP...
Стили элементов
Стили элементов Таблица стилей обычно располагается в заголовке HTML-документа, в разделе <HEAD> . Она занимает место между тегами <STYLE> и </STYLE> . Синтаксис таблицы...
Стили классов
Стили классов Все это хорошо, конечно, но как быть дальше? Ведь в тексте нашего примера несколько раз (в данном случае два, но могло бы быть и гораздо больше!) определяется один и тот же стиль дл...
Внешние стилевые таблицы
Внешние стилевые таблицы Еще одно замечательное свойство стилевых таблиц заключается в том, что с помощью одной таблицы, находящейся в отдельной файле, можно задавать стили для целого набора веб-...
Обзор других возможностей стилевых таблиц
4.3. Обзор других возможностей стилевых таблиц В примерах предыдущих двух разделов мы кратко продемонстрировали способы применения стилевых таблиц CSS и их удобство. Однако, помимо упорядочивания...
Размещение блоков текста
Размещение блоков текста Вообще-то “Лентяй”, хоть и гипотетическая, но все же фирма, поэтому на ее сайте должны присутствовать несколько разделов, без которых корпоративный сайт уже не воспринима...
Как можно организовывать загрузку разделов
Как можно организовывать загрузку разделов. Обратите внимание на то, что для списка ссылок мы определили класс Ink. Пока что определения свойств этого класса у нас нет, но ясно, что блок ссылок д...
Добавим на страничку блок гиперссылок
Рисунок 4.5. Добавим на страничку блок гиперссылок .hdr { position: absolute; left: 50px; top: 10рх; } Мы немного отступили от края странички, хотя можно было указать, конечно, и нулевые значе...
Добавление фонового рисунка
Добавление фонового рисунка То, что у нас получилось, показано на Рисунок 4.6. Прежде чем мы займемся стилевым оформлением каждого блока, давайте вместо однотонового фона установим градиент. Пуст...
Позиционирование блока гиперссылок
Рисунок 4.6. Позиционирование блока гиперссылок Вот теперь получилось то, что нужно. Кстати, можно заставить фоновый рисунок повторяться только по горизонтали (repeat-x) или вообще не повторяться...
Оформление текста
Оформление текста Теперь давайте займемся информационным блоком. Чтобы информация хорошо читалась и воспринималась, он не должен особо страдать излишествами, однако, чтобы выделить заголовки спис...
Декоративное оформление текста
Декоративное оформление текста Для информационного блока оформление уже вполне закончено. Теперь займемся блоком гиперссылок. Вспомним, что мы для этого даже загото вили класс Ink. Чтобы наши раз...


- Начало -