Создание собственной web-страницы в Internet
| Вид материала | Документы |
- План занятий Web взгляд изнутри. Вводная часть в курс. Web-страницы, web-сайты, web, 11.42kb.
- Моу сош №18 г. Новотроицк, моу сош, 95.86kb.
- Программа для просмотра web-страниц, которая преобразует тэги html-документа в соответствующее, 47.68kb.
- Сценарий занятия «html-проектирование: Достопримечательности Мурманской области», 72.96kb.
- Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура, 214.3kb.
- Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура, 213.14kb.
- Пояснительная записка Курс предназначен для учащихся 9-х классов общеобразовательных, 47.51kb.
- Концепция www 5 Создание Web-страницы с помощью языка html 7 1 Язык html 7 Структура, 217.81kb.
- «Создание и использование таблиц на Web-страницах», 223.42kb.
- План урока: «Internet Explorer web страницы» (фронтальная лабораторная работа) Цель:, 35.19kb.
Вы можете сочетать вертикальные и горизонтальные фреймы в любом порядке. Для этого необходимо лишь применять уже известные вам правила использования вложенных тегов (см. выше) и правильно описывать структуру в теге , соблюдая желаемую последовательность расположения.
Взгляните на исходный код «материнской» странички (ссылка скрыта):
| |
Как вы видите, здесь используется набор из двух горизонтальных фреймов, вложенный в другой набор из двух вертикальных фреймов. Взгляните на значения ширины фреймов в тегах – в этом примере вместо значения ширины второго фрейма используется знак «*». Он сообщает броузеру, что для этого фрейма необходимо отвести все свободное пространство, оставшееся после первого фрейма. Вы можете указывать ширину фреймов как в процентах относительно свободного окна броузера, так и в пикселях.
Как и большинство тегов HTML, теги и имеют дополнительные параметры, управляющие отображением фреймовой структуры.
Давайте рассмотрим параметры, с которыми может использоваться тег :
BORDER – может принимать значение 0 (границы фреймов не отображаются) или 1 (границы фреймов отображаются по умолчанию)
FRAMEBORDER – любое значение (в пикселях)
FRAMESPACING – управление шириной границ фреймов. Для Netscape Navigator может принимать значение 0 (границы фреймов не отображаются) или 1 (границы фреймов отображаются по умолчанию), а для Microsoft Internet Explorer – любое значение (в пикселях).
Броузеры Netscape Navigator и Microsoft Internet Explorer работают с фреймами немного по-разному (впрочем, они и все остальное делают с большими отличиями).
Для того чтобы отключить отображение границ фреймов в броузере Netscape Navigator, необходимо указать параметры BORDER=0, FRAMESPACING=0, а для выполнения той же задачи в Microsoft Internet Explorer необходимо указать параметры FRAMEBORDER=0 и FRAMESPACING=0. Поэтому, если вы хотите отключить отображение границ фреймов, для адекватного отображения Web-страниц в обоих броузерах в теге необходимо указывать все три параметра равными нулю.
А теперь давайте разберемся с параметрами, которые можно использовать с тегом .
SRC=«URL» – как вы уже знаете, этим параметром определяется страница-источник для данного фрейма.
NAME=«название фрейма» – используется для присвоения фрейму имени. Это требуется для целевых операций с фреймами, т. е. для загрузки определенного документа в соответствующий фрейм.
MARGINWIDTH=«n(пикселей)» – значения отступов от края страницы (по горизонтали) для страниц, которые будут отображаться в заданном фрейме.
MARGINHEIGHT=«n(пикселей)» – то же, но по вертикали.
SCROLLING=«yes/no/auto» – принудительное включение/отключение/установка автоматического режима отображения линеек прокрутки для данного фрейма.
NORESIZE – запрет изменения размеров фреймов при просмотре.
А теперь посмотрим, как мы можем, используя полученные знания, сделать нашу тестовую страничку об истории подводных лодок более удобной и привлекательной.
Создадим два фрейма, в одном из них, содержащем графику, мы расположим меню, а второй фрейм будет содержать тексты статей. Таким образом, при переходе от статьи к статье будет перезагружаться только текстовый фрейм – это позволит значительно увеличить скорость загрузки.
Вот исходный код набора фреймов, применяющегося для ссылка скрыта (Пример 11.):
| FRAMEBORDER=0 FRAMESPACING=0> WIDTH=”0” MARGINHEIGHT=”0” SCROL- LING=”auto” NORESIZE> MARGINWIDTH=”0” MARGINHEIGHT=”0” SCROLLING=”auto” NORESIZE> |
Картинки, используемые в верхнем фрейме, для удобства форматирования расположены внутри таблицы. Взгляните на исходный код верхнего фрейма:
|
Обратите внимание на параметры TARGET в теге . При указании параметра TARGET="_top" после щелчка по ссылке первая страничка сайта будет загружена в окно, не содержащее фреймов. Для указания броузеру этого действия мы использовали зарезервированное имя "_top".
Всего в HTML существует четыре таких зарезервированных имени, из них для нас пока важны только два. Одно из них вы уже знаете, а второе, «_blank», используется для открытия гиперссылки в новом окне броузера. Обратите внимание: зарезервированные имена следует писать строчными буквами! Также вы не можете использовать зарезервированные имена для обозначения ваших фреймов.
Во втором теге мы использовали параметр TARGET со значением "main". Посмотрите на исходный код «материнской» странички – этим именем там был назван нижний фрейм. Таким образом, при щелчке по гиперссылке «Следующая история» файл со статьей будет загружен не в верхний фрейм (в котором находится гиперссылка), а в нижний.
Нижний фрейм можно оформить с помощью таблицы, создав три колонки и окрасив правую и левую в цвет фона, а в среднюю поместив текст статьи.
Вот как это можно воплотить в HTML:
|
Напоследок дам еще один совет: при создании страниц постарайтесь думать о тех людях, у которых всего лишь 14-дюймовый монитор и разрешение дисплея, равное 640 х 480 точек. Учитывайте, что максимальный размер странички, который они увидят, будет примерно 600 х 300 точек и постарайтесь исходить из этого при расчете ваших таблиц и фреймов. Не перегружайте страницы лишними фреймами – это раздражает просматривающих. Помните: ВСЕ ГЕНИАЛЬНОЕ ПРОСТО.
Официальную спецификацию языка HTML 4.0, которую вы можете использовать как справочник, вы найдете на сайте WWW-консорциума (W3C) по адресу: ссылка скрыта.
| На следующем занятии мы рассмотрим принципы работы с CSS (Cascading Style Sheets) – новым стандартным языком — расширением HTML, который в ближайшем будущем в корне изменит приемы создания Web-страниц, сделает их более привлекательными и упростит их разработку. |
Занятие 4.
Страшный сон дизайнера.
Пробуждение...
24 марта 1998 года WWW консорциум (W3C) принял рабочую спецификацию CSS2 как официально рекомендованную для применения, стабильную и соответствующую современным нуждам Web. После завершения окончательного просмотра спецификации и голосования членов консорциума этот стандарт будет принят и утвержден как одно из официальных расширений HTML. Впрочем, сейчас уже ничто не мешает нам использовать CSS для оформления страниц, поскольку стандарт достаточно хорошо подготовлен для практического применения и единственной проблемой, которая встанет перед нами при использовании CSS, будет его несовместимость со старыми версиями броузеров. Более подробно эту проблему мы рассмотрим в конце занятия.
Основы CSS
Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTMLкода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.
CSS действует другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами. Удобно, не правда ли?
Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Webстраниц. Потрясающе удобно. И еще одно, связанное с этим, преимущество – возможность изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.
Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой. Посмотрите, что можно сделать, используя CSS (рис. 1, 2).
Рис. 1. Эта страничка оформлена только
шрифтами, без использования графики
Рис. 2. Та же самая страница,
но с отключенными стилями
Давайте рассмотрим, как мы можем воплотить столь замечательные возможности в жизнь.
Практическое освоение CSS
Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега , располагающегося внутри тега ваших страниц:
| |
Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («лучае, если файл стилей находится на другом сервере.
Второй вариант, при котором описание стилей располагается в коде Webстранички, внутри тега , в теге . В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type="text/css" является обязательным и служит для указания броузеру использовать CSS.
И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.
Давайте рассмотрим механизм, с помощью которого стили присваиваются элементам Webстраниц. Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:
| НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;}, |
Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTMLтега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Более подробно команды языка CSS мы рассмотрим чуть позже.
Пример:
| H1 {font-size: 30pt; color: blue;} |
В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.
Также элементы страниц, созданные с использованием CSS, используют механизм наследования: т. е. если вы располагаете изображение внутри тега
...
, оформленного с помощью CSS, с отступами, так, чтобы параграф занимал только определенную часть ширины страницы, изображение также унаследует значения отступов, указанные для этого параграфа.
CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = "имя класса" или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее.
Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных).
Пример:
| .b-с {font-weight: bold; text-align: center} – описание стиля для класса b-с |
Все элементы класса b-с будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).
| Текст параграфа – параграфу присвоен стиль класса b-с. | текст |