Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Приводим фреймы в опрятный вид.Содержание книги
Поиск на нашем сайте
В последнем нашем примере первое, что бросается в глаза, это целая куча полос прокруток, которые стоят где надо и не надо.. Давайте от них избавимся, ну можно и оставить кое где.. Делается это при помощи атрибута scrolling - тега <frame>, он может иметь одно из трёх значений: · no - никогда не показывать полосу прокрутки, · yes - всегда показывать, · auto - показывать в том случае если она необходима. Пример: <html> Поля фреймов или иначе расстояние от границ фрейма до текста или картинки, как в нашем случае, задаются в пикселях при помощи атрибутов marginwidth и marginheight тега <frame> Пример: <html> Поговорим немного о рамках вокруг наших фреймов. Если Вы обратили внимание, то в последнем примере наведя курсор на границу фрейма он, курсор то бишь, приобретает другой вид (захватить и переместить) и теперь эту границу можно перетащить в какую либо сторону удерживая левой кнопкой мыши. Иногда такая "мобильность" границ фреймов играет на руку веб-мастеру, но чаще всё же мешает.. Для того, чтобы запретить пользователю играться с размерами окон для тега <frame> придумали атрибут noresize Пример: <html> А вот давно нам знакомый атрибут border задаёт ширину в пикселях этих самых рамок между фрёймами.. пишется он внутри тега <frameset>. Как и раньше значение border="0" вовсе избавит нас от рамок. Пример: <html> Фреймы и ссылки. Настало время оживить наш сайт ссылками, да вот беда, знакомая нам обыкновенная ссылка <a href="text1.html">Бобы в горшочке по-итальянски</a> откроет данный документ в том же фрейме где она и находится, в нашем случае непосредственно в фрейме с содержанием, а само содержание в момент перехода по этой ссылки уйдёт в небытие.. можете взглянуть на корявый пример.. кликнете в нём на любую ссылку.. Что бы впредь такого не происходило, необходимо указывать браузеру в каком фрейме следует открывать необходимый нам документ, ну если конечно Вам и в правду не нужно открывать его в этом же фрейме. Помнится мы уже знакомились, в главе посвящённой ссылкам, с атрибутами name - имя и target - цель, применяются они также и при работе с фреймами механизм немного изменён а так почти тоже самое. первым делом фрейму в котором мы хотели бы открывать какие либо документы необходимо присвоить индивидуальное имя. пишется так: <frame src="text.html" name="osnovnoe" > имя можно придумать любое.. главное его не забыть.. А теперь в документе с ссылками (в нашем случае это файл menu.html)необходимо указать цель то есть собственно определить в каком окне стоит открывать тот или иной документ Пишется так: <a href="text1.html" target="osnovnoe" >Бобы в горшочке по-итальянски</a> Ну я думаю Вам уже не стоит объяснять, что прежде чем ссылаться на какие либо документы, их необходимо создать.. в моём случае файлы (рецепты) имеют имена text.html, text1.html, text2.html… Посмотрите пример: Файл index.html Файл menu.html Так же как и раньше документ можно открыть в отдельном окне. Напомню, пишется так: <a href="text1.html" target="_blank" >Бобы в горшочке по-итальянски</a> Или же присвоив атрибуту target значение _top открыть его в этом же окне браузера, но на весь экран.. "обнулив" при этом всё что бы там не находилось.. пишется так: <a href="text1.html" target="_top" >Бобы в горшочке по-итальянски</a> Такой вот сайтик получился.. конечно над ним ещё работать и работать.. к тому же по моёй задумке он будет иметь несколько иную структуру в плане навигации по сайту, в нем будет ёщё целая куча страниц, красивое меню, но что касается фреймовой структуры, думаю она останется прежней.. Плавающий фрейм Иногда в страницу содержащую в себе не фреймовую структуру необходимо в отдельном окне вставить другой HTML документ или даже ряд таковых документов. Для выполнения этой цели существует тег <iframe> - так называемый плавающий фрейм. Данный тег имеет ряд атрибутов: src - обязательный атрибут, указывающий путь к открываемой странице scrolling - показ полосы прокрутки · no - никогда не показывать полосу прокрутки, · yes - всегда показывать, · auto - показывать в том случае если она необходима. align - выравнивание пваюшего фрейма · left - слева · right - справа · top - выше · bottom - ниже frameborder - наличие рамки вокруг плавающего фрейма · 1 - включить рамку · 0 - выключить рамку Всё вместе пишется так: <iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1" ></iframe> Пример документа с плавающим фреймом: <html> Noframes Некоторые браузеры не поддерживают фреймовую структуру документа или неправильно её интерпретируют, кроме того зачастую пользователи в настройках своих браузеров умышленно отключают поддержку фреймовой структуры html документа. И хотя процент таких браузеров и пользователей невелик, но тем не менее они есть. Теперь представьте, что Вы построили свой сайт с помощью фреймовой структуры и вот некоторые посетители, может быть сами не подозревая в чем проблема, пытаются открыть Ваш сайт, а их браузер выдает ошибку! Что они подумают о Вашем сайте? я думаю, что то типа: "Фу.. ерунда какая то.. больше сроду сюда не зайду!". Для того что бы дать понять пользователю, что его браузер/настройки браузера не поддерживают фреймы существует тег <noframes>. Тег <noframes> выводит текст, заключенный в него в том случае, если браузер пользователя не поддерживает фреймы или они принудительно выключены в его настройках. Если же фреймы поддерживаются браузером пользователя, то данный тег попросту игнорируется. Пример: <html> Результат примера будет заметен, если Ваш браузер и в правду не поддерживает фреймы (тут я надолго задумался..:) если это так, то зачем вообще читать эту главу?) или же Вы в качестве эксперимента выключили поддержку фреймов в своём браузере. Тег <noframes> должен быть расположен внутри тега <frameset> С плавающим фреймом всё ещё более просто, достаточно написать нужный текст между <iframe> </iframe> и данная надпись будет выводится на экран, в том случае если браузер не поддерживает фреймы. Вот так: <iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1"> Извините, но Ваш браузер не поддерживает фреймы.. </iframe> Полезные советы: · Перед тем как начать создавать страницу с использованием фрёймовой структуры проанализируйте её макет, размеры каждого окна, наличие или отсутствие в них полос прокруток и т. д. После этого можно создавать подключаемые HTML файлы особо не переживая за их взаимное расположение относительно друг друга.. · Используйте тег <noframes>. Помните что если в Вашем браузере сайт работает и отображается так как Вы и задумывали то у других пользователей дела могут обстоять иначе!
Глава 8 Навигационные карты Мы с Вами уже говорили о том как сделать рисунок ссылкой.. в этой главе поговорим о том как сделать фрагмент, область рисунка ссылкой на тот или иной документ, а так же о том как сделать различные области одного и того же рисунка ссылками на различные документы. Для осуществления данной задачи нам не обойтись без так называемых навигационных карт. Предположим, у нас имеется такой рисунок:
..и нам необходимо сделать, так что бы пользователь, нажав на одну из этих "кнопок" переходил по ссылке в тот или документ.. что нам для этого нужно? В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap тега <img> (я думаю Вам не стоит напоминать о том что тег <img> имеет обязательный атрибут src который указывает путь к той или иной картинке <img src="knopki.jpg">) Назовём наш рисунок/карту именем panel. Это будет выглядеть так: <img src="knopki.jpg" usemap="#panel" > Не забываем по правилам синтаксиса поставить знак # решётки перед именем.. Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом <map> у которого есть атрибут name - имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя.. <map name="panel"> Теперь займемся тем, что укажем браузеру области рисунка которые будут являться ссылками, а заодно пропишем пути переходов по этим ссылкам. Эту задачу берет на себя тег <area>, закрывающего тега он не требует, и имеет следующие атрибуты, с которыми мы будем работать: href - указывает путь к открываемому документу (точно так же как в теге <a>) · rect - прямоугольная область · poly - область представляет собой некий многоугольник · circle - область заданная окружностью coords - координаты формы Прямоугольная область Теперь наша карта приобретает такой вид: <map name="panel"> По сути теперь "зелёная" квадратная кнопка стала рабочей. В чем Вы можете убедится нажав на неё в этом примере: <html> Немного поспешил с примером толком не объяснив суть написанного.. Заострим внимание на атрибутах тега <area>. href="primer1.html" - здесь думаю понятно, это путь к документу, который должен открыться при нажатии на "зелёную кнопку". Так как кнопка у нас квадратная, а квадрат как известно это "правильный" прямоугольник, форму области рисунка назначаем прямоугольной shape="rect". А теперь самое интересное coords="15,15,82,82" - координаты.. Для прямоугольника они задаются двумя точками по принципу "Х1,У1,Х2,У2" Где Х1,У1- первая точка и соответственно Х2,У2 -вторая. Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0,У=0, а самый нижний правый Х=300,У=100. Если не понятно, окунёмся в геометрию за пятый класс.. Взгляните на рисунок:
Так, выбрав прямоугольную форму shape="rect" для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения "рабочей" области всей кнопки. Полигон (многоугольник). Займёмся "жёлтой кнопкой", она у нас представлена в виде треугольника. Для того чтобы выделить её "рабочую" область из нашего рисунка, присвоим атрибуту shape значение poly - полигон, которое определит эту область как некий многоугольник, где координаты через запятую будут являться его вершинами, их может быть сколь угодно много "Х1,У1,Х2,У2,Х3,У3,Х4,У4… Х124,У124" фигура образованная этими точками вершинами углов может иметь вид любого многоугольника как правильного, так и неправильного. В нашем случае угла всего три, на то он и треугольник, следовательно его координаты будут заданы тремя парами значений "Х1,У1,Х2,У2,Х3,У3" Значит всё вместе пишем так: <area href="primer2.html" shape="poly" coords="148,15,185,82,110,82" > А вот рисунок который наглядно показывает откуда берутся координаты точек..
Пример: <html> Окружность Ну и последняя "красная кнопка" она у нас круглая.. значит форма области будет круглой shape= "circle". На сей раз с координатами дело обстоит немного иначе. Нам понадобится три значения Х,У,R. Х и У это координаты центра нашей окружности, а R - это длина радиуса в пикселях. Вот рисунок:
А вот пример: <html> Доводим до ума.. Теперь немного о том, что ещё желательно было бы сделать с нашей картой прежде чем "монтировать" её в какую либо страницу. Определим фиксированные размеры рисунка-карты атрибутами width и height Напишем альтернативный текст, как для всего рисунка карты, так и для её отдельных областей используя атрибут alt, а также описание элементов атрибутом title. Избавимся от рамки бордюра.. сделаем border="0"..(ну если Вам с бордюром больше нравится, можете этого не делать.. я не настаиваю..) В конце должно выглядеть примерно вот так: <html> Пересечение областей Иногда удобно формировать "рабочую" область изображения "смешивая" разные формы.. Предположим, наша очередная кнопка имеет такой вид:
Конечно, можно определить форму как многоугольник, но придется задать уйму координат для округлой части такой кнопки (ну это если нужна особая точность в навигационной карте). А можно определить в этом примере две формы прямоугольник rect и окружность circle как показано на рисунке:
А в коде указать путь к одному и тому же документу: Пример: <html> Однако стоит помнить о том, что если бы ссылки с разных форм вели к разным документам, то нажимая на область пересечения наших фигур посетитель будет переходить по той ссылке, чья область в коде указана первой.. в нашем случае это окружность. "Не область" Рассмотрим на примере.. предположим необходимо изготовить вот такую кнопку:
Как быть с отверстием в ней? Тег <area> помимо атрибута href имеет противоположенный по значению атрибут nohref - неактивная область, то есть если пользователь нажмет на такую область, то ровным счетом ничего не произойдёт, чего нам собственно и необходимо добиться при изготовлении "отверстия" в нашей карте. Карта будет задана двумя областями, неактивной окружностью circle и активной прямоугольной областью rect и как показано на рисунке чертеже иметь следующие координаты:
Как уже говорилось ранее, при пересечении областей наибольшим приоритетом будет пользоваться та область, которая в коде внутри тега <map> указана первой Следовательно, пример будет иметь такой вид: <html> Карта на сервере. Отрывок из справочника: (http://www.webremeslo.ru/spravka/spravka.html) (атрибуты тега <img>): usemap - изображение является навигационной картой на стороне клиента. Непонятно? Тогда читаем.. С атрибутом usemap мы вроде бы разобрались.. Смотрите, пользователь (клиент) открыв Вашу страницу, одновременно со всем остальным содержанием, загружает "на свою сторону" как сам рисунок, так и навигационную карту к нему и всё это дело обрабатывается его браузером. А вот атрибут ismap тега <img> говорит браузеру о том, что к данному изображению на сервере, ну там где Вы выложили или собираетесь выложить свой сайт, есть навигационная карта. И теперь, когда посетитель (клиент) кликнет по какой либо области рисунка с таким атрибутом, браузер запомнит координаты этого клика и отправит их на сервер, где специальная программка обработает эти данные и перенаправит пользователя на тот адрес который указан в карте на сервере, в соответствии с полученными от браузера клиента координатами точки. Пишется так: <a href="http://www.site.ru/imagemaps/karta"><img srs="knopki.jpg" ismap></a> Где <a href="http://www.site.ru/imagemaps/karta"> адрес навигационной карты на каком либо сайте.. размещённом на том или ином сервере.. Всё равно непонятно? Если да, то тогда не стоит заморачивотся по этому поводу.. используйте usemap, на мой взгляд такое решение будет лучшим в большинстве случаев при использовании навигационных карт. Полезные советы: · Что бы без труда определить координаты той или иной точки на Вашей навигационной карте откройте рисунок графическим редактором тем же Paint к примеру.. там, когда будете двигать указателем по рисунку, увидите две меняющиеся цифры, это и есть координаты пикселя Х и У на данном рисунке. В Paint эта панелька расположена в нижней части экрана. · При создании страницы с навигационной картой тег <img> всегда должен быть выше самой карты <map> То есть писать вот так: <map name="panel"> <img src="knopki.jpg" usemap="#panel"> ..можно, но не нужно.. потому что при загрузке страницы могут возникнуть проблемы, так как карта с разметкой уже загрузилась, а самого рисунка ещё нет.. · И ещё что касается загрузки.. <img src="knopki.jpg" usemap="#panel"> В этом месте кода может быть всё что угодно длинный текст, таблицы, графика.. но всё же лучше здесь ничего не писать <map name="panel"> А писать здесь, так как во время загрузки страницы, пользователь не дождавшись её окончания, может пытаться нажимать на кнопки указанные в навигационной карте которая к этому времени еще не загрузилась..
Глава 9 Списки В этой главе пойдёт речь о списках, которые могут быть: · неупорядоченные(маркированные) · упорядоченные (нумерованные) · и являться списком определений Такое вот нестандартное начало главы.. зато теперь Вам понятно, что есть список в html. Ну что ж давайте пройдёмся по нашему списку. Неупорядоченные списки Неупорядоченный список задаётся тегом <ul>. Любой список состоит из элементов, "пунктов", каждый элемент в свою очередь задаётся тегом <li> после которого собственно и идёт текст нужного нам "пункта". Для тега <li> закрывающий тег </li> необязателен. Вместе данные теги приобретают следующий вид: <ul> Пример неупорядоченного списка: <html> Теги <li> и <ul> имеют атрибут type который присуждает элементу списка или же всему списку целиком определённый стиль. Может иметь одно и трёх значений: · disk - кружок, диск (по умолчанию) o circle - полый круг § square - квадрат Пример: <html> Упорядоченные списки Упорядоченный или нумерованный список задаётся тегом <ol>, так же как и в неупорядоченном списке, элемент списка присуждается тегом <li>. Построение кода полностью схоже с неупорядоченным списком, поэтому сразу пример: <html> А вот атрибут type в сочетании с упорядоченным списком может иметь следующие значения: · А - Заглавные буквы · а - Строчные буквы · I - Заглавные римские цифры · i - Строчные римские цифры · 1 - Арабские цифры (по умолчанию) Вот пример их применения: <html> В упорядоченном списке есть ещё один атрибут start его числовое значение говорит о том с какого номера следует строить упорядоченный список. Пример: <html> Списки определений Со списком определений дело обстоит немного иначе, нежели чем с уже знакомыми списками. Задаётся данный вид списка тегом <dl>. Пункты списка определений размечаются тегом <dt>, а определения этих пунктов тегом <dd>. Всё вместе пишется по следующей схеме: <dl> Пример: <html> Собственно вот и вся премудрость.. Полезные советы: Психология посетителя страницы. · Не могу, не согласится с тем утверждением, что посетители страницы чаще просматривают документы, нежели чем вдумчиво читают их.. По-крайней мере так происходит практически всегда при первом визите посетителя на страничку. Первое на что обращает внимание пользователь просматривая какой либо документ это: заголовки в тексте, выделенные фрагменты текста, и списки. Умелое и ненавязчивое размещение таковых элементов залог того что посетитель окунётся в чтение Вашего документа более глубоко. · Что касается списков.. следует понимать что: Маркированные перечни <ul> используются тогда, когда порядок следования пунктов не важен.. и делаются они для того чтобы изложенная информация воспринималась легче. А нумерованные списки <ol> наоборот, применяются тогда, когда важен именно порядок следования пунктов, например - когда список является изложением последовательности каких либо действий.
Глава 10 Meta теги В первой главе этого учебника, об общем построении html документа, я говорил о том, что все html документы должны иметь вот такой шаблон кода: <html> - начало документа Где между тегами <body> </body> указывается информация предназначенная для вывода на экран в нужном нам виде, а между тегами <head> </head> исключительно служебная информация предназначенная для поисковых систем и браузеров тех или иных пользователей. Так что же это за информация такая и для чего она нужна? Отвечу, планомерно и порционально в этой главе. С тегом <title> мы уже знакомы, с помощью него мы указываем имя документа в заголовке страницы. Теперь новый тег <meta> (закрывающего тега не требует) с помощью него мы и будем указывать эту самую служебную информацию на нашей страничке. <meta> тег имеет следующие атрибуты: · http-equiv - указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных. · name - информационное имя. (применяется в паре с атрибутом content) · content - информационное содержание, связанное с мета именем (name) Теперь на примерах будем вникать в суть дела. Кодировка символов и язык Пример (очень нужный и важный): <meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> Сначала расскажу, зачем необходима эта строка в заголовке html документа. Данная запись указывает браузеру кодировку, в которой была написана данная страница - формат документа и раскладку клавиатуры, в данном случае это кириллица для Windows. Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку "иероглифов" у разных пользователей тех или иных браузеров. Конечно, пользователь может применить к такому документу команду в браузере Вид->Кодировка->Кириллица, но он может не знать о данной функции, да и зачем утруждать человека данным действием. Теперь разберём по "слогам" нашу запись: В настоящее время продвинутые веб-мастера рекомендуют использовать кодировку UTF 8 То есть писать в голове документа вот так: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Пример: <meta http-equiv="Content-Language" Content="ru"> В этой строчке говорится о том, что язык Language документа является русским Content="ru" Неправильная установка языка и раскладки клавиатуры может привести к печальным последствиям. Информация о документе Пример: <meta name="author" Content="Остап Бендер"> Данные метаописатели предназначены для заявления об авторских правах непосредственно в заголовке html кода, так name="author" указывает имя автора страницы, а name="copyright" авторское право (копирайт) в котором может указываться фамилия, имя, отчество автора сайта, название фирмы, бренда.. и т. д. Кроме того, включив в заголовок документа такое описание, Вы значительно упростите задачу поисковой машине при поиске Вашего сайта по имени автора, названию фирмы, бренду... Пример: <meta name ="Generator" Content="Microsoft Notepad"> Если хотите можете указать с помощью какого html редактора была написана данная страница.
|
||||
|
|
Последнее изменение этой страницы: 2016-12-17; просмотров: 249; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.12.34.150 (0.01 с.) |
