Создаем, программируем, шлифуем и раскручиваем web-caйт. Серия Быстро и легко - Алексеев Ю.М.
Скачать (прямая ссылка):
шрифта средствами браузера. Для определения способа выравнивания текста применяется свойство text-align со значениями left (влево), right (вправо), center (по центру), justify (по ширине).
;/
Атрибут style при установке стиля конкретного фрагмента текста удобно использо- ' . Л вать в тегах <Р></р>, которые позволяют представить фрагмент текста в виде абзаца.
Элемент в HTML-коде, начинающийся с тега <center>, можно представить с помощью стиля:
<р style=»font-style: italic; font-size: 130%; text-align: center "> Компания АТЛАНТ обеспечит вас компьютерами и программными' продуктами на любой вкус.</р>
Мы рассмотрели только один вариант использования- каскадных таблиц стилей, когда _ определение стиля располагается внутри тега элемента, хотя есть и другие способы использования CSS. Может оказаться, что необходимо описать одни и те же свойства, на- - ' пример цвет или размер текста, для разных элементов. Для присвоения какому-либо элементу определенных характеристик с помощью таблиц стилей достаточно один раз
ГЛАВА 1 .Первая Web-страница за несколько минут ^т> ,gg_ gt.
описать этот элемент* используя стили. В дальнейшем можно будет. просто указывать данный элемент, который будет принимать свойства созданного стиля. ' .- lMli
Есть возможность хранить описание стилей в отдельном файле, который может быть расположен на удаленном сервере, что позволяет ссылаться на файлы с таблицами стилей из разных
¦Описание основных элементов языка CSS вы найдете в приложении (см. файл Ргії CSS.pdf на каскадным
3*aicoau,a?o Вставляем изображения ; ^;?
Рисунки позволяют существенно повысить привлекательность Web-страницы, лучше передать содержание документа. В этом знакомстве мы расскажем, как вставлять изображение в Web-документ..^0. /. ,«,;,^.,^.;^.^ ^i,, ¦
Рисунки на Web-странице должны быть созданы в таком графическом формате,' который поддерживается браузером. К стандартным форматам Web-графики относятся GIF, JPGi и png. Эти форматы обеспечивают эффективное сжатие изображений и минимальный'-размер файлов, что значительно сокращает время загрузки из сети. Форматы, а также способы создания Web-графики подробно описаны в главе, посвященной программе Macromedia Fireworks [МакромедиаФаеуокс]. ...../' ^n,.. ... ; ;
Сначала подготовим необходимые графические файлы для вставки в Web-документ.
> Скопируйте файлы HLPBELL.GIF и BACKGRND.GIF из папки Примеры/Глава_1
компакт-диска, прилагаемого к книге, в папку, в которой файл с
кодом атлант.Мт!.; " • ' ' "."^" д
Дело в том, что в HTML-документе должно быть указано имя графического файла или полный путь к нему. Чтобы ваша Web-страница была независима от возможных изменений на диске, все файлы, относящиеся к создаваемому Web-документу или сайту, лучше хранить в одной папке.
Для вставки изображения в используется одиночный тег
. венный обязательный атрибут данного тега атс определяет имя вставляемого файла или его электронный адрес в Интернете. С помощью необязательного атрибута <border>
рамки вокруг рисунка. атрибута определяет
толщину рамки в пикселах. Вставим скопированный рисунок в
> Перейдите к редактору Блокнот (Notepad). '
>i После элемента заголовка раздела <Ы а1ідп=сех&ег>Компания АТЛАНТ</Ы>
^'..'веіаш.іс новую строку с кодом, который обеспечивает включение рисунка с рамкой в !Web-документ: . • • ^4' •
<іяа SrC=HLPBELL. GXF border=l> -м ' .
Сохраните на диске. .... .
> Перейдите к программе Internet Explorer и перезагрузите файл
г if*' Ha Web-странице появится 'рисунок звонка (Рис. 1:13).' ¦¦ ¦¦'
22
Быстро и легко создаем, программируем и раскручиваем Web-сайт
?52
Файл Прнм 0Hl Избранное Сервис Спнши
Парен
КомпанияАТ лаыТ
Компания A TJIAHT обеспечит вас компьютерами и программными продуюпами на любой вкус.
Рис. 1.13. Рисунок на Web-странице
По умолчанию вставленное изображение выравнивается по левому краю страницы. Давайте центрируем'вставленный рисунок.
> Перейдите к редактору Блокнот (Notepad).
> Добавьте ' в элемент встраивания изображения открывающий <center> и закрывающий </center> теги, чтобы выровнять рисунок по центру. Указанный фрагмент HTML-кода примет вид:
«centerximg src=»HLPBELL. GIFx/center >
> Сохраните HTML-документ на диске.
> Перейдите к программе Microsoft Internet Explorer и перезагрузите файлатлант.піті. На Web-странице рисунок будет выровнен по центру (Рис. 1.14).
C:\WEBWiHHT.hlBB
Компания АТЛАНТ
Компания АТЛАНТ обеспечит вас компьютерами и
программными продуктами на любой вкус.
1? My Сто»»
Рис. 1.14. Центрированный рисунок
У тега <imsr> довольно много полезных атрибутов. Например, атрибуты width и height задают ширину и высоту рисунка, align - расположение изображения относительно других элементов страницы, в том числе и по вертикали, alt - отображаемый текст при отключении загрузки рисунков.
ГЛАВА 1. Первая Web-страница за несколько минут