Создание сайта
Технология разработки внешней и внутренней структуры сайта. Определение структуры web-документа. Создание простейших сайтов с помощью кодировки. Создание web-страниц в прикладной программе FrontPage. Создание анимации с помощью Adobe ImageReady.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | учебное пособие |
| Язык | русский |
| Дата добавления | 20.10.2016 |
| Размер файла | 3,2 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Введение
Как создать свой сайт?
Итак, создание сайта всегда начинается с идеи.
Прежде, чем приступить к работе над сайтом, вы должны четко представлять, что вы в итоге хотите получить, подумать о перспективах развития сайта.
Итак, вы должны решить:
- Зачем вам создавать сайт (нужно ли вам это вообще).
- О чем будет ваш сайт (тематика).
- Что это будет (домашняя страница, портал, или что-то еще).
- Отличие от сайтов с такой же тематикой (если это не домашняя страница).
- Какова будет аудитория вашего сайта (пол, возраст, интересы и т.д.).
- Какого рода сервисы вы будете предоставлять на своем сайте (форум, каталог, почта и т.д.).
- Планы на ближайшее будущее.
- Планы дальнейшего развития (перспективы).
Далее необходимо сначала на бумаге начертить структуру будущего сайта, чтобы было легче воплотить идею.
Структуру сайта можно условно разделить на внешнюю и внутреннюю.
Давайте для начала поговорим о внутренней структуре сайта. Она зависит от того, какую информацию вы будете размещать, какие у вас есть материалы. Вам предстоит решить, какие у вас будут на сайте разделы, подразделы - вам предстоит продумать древо сайта.
Рассмотрим разработку внутренней структуры на примере домашней страницы. Какую информацию мы можем на ней разместить? Рассказ о себе (на главной странице), свои фотографии, контактную информацию - это по минимуму. Значит, внутренняя структура нашей домашней странички прорисовывается такая:
На этом можно остановиться, а можно создать более сложную внутреннюю структуру.
Когда у нас перед глазами такой план внутренней структуры, можно смело продолжать работу над сайтом, не боясь чего-то забыть или упустить.
Теперь поговорим о внешней структуре, под ней я имею ввиду расположение основных значимых элементов на каждой странице. Вам надо решить, где и как будут располагаться ваши баннеры, если вы их будете внедрять на сайт, счетчик, меню, возможно, поиск, основное содержание, какие-то анонсы о новых разделах сайта, обновлениях, и т.д.
При разработке внешней и внутренней структуры ваша главная задача сделать так, чтобы в будущем посетителю было легко ориентироваться на вашем сайте, чтобы важная и нужная информация легко находилась.
Оформление сайта
Оформление или дизайн - это внешний вид сайта. Эта та оболочка, которую вам придется надевать на ваш сайт, как этикетку на коробку с товаром. От этой самой этикетки зависит многое. По ней вас будет судить привередливый ваш посетитель, и если этикетка ваша покажется ему непривлекательной, отталкивающей, то вы его потеряете.
Оформление сайта подсказывает посетителю, куда он попал: корпоративный ли это сайт какой-либо компании, или информационный портал, или литературный сайт, или что-то еще. Оформление помогает посетителю ориентироваться по сайту, а может, и наоборот, сбить посетителя с толку так, что даже при хорошо разработанной структуре посетителю будет трудно ориентироваться. От оформления зависит многое - визуальная информация не менее важна, чем текстовая, которой вы свой сайт в последствие наполните.
Когда сайт готов, его выкладывают в сеть (интернет). Для этого вам нужно завести для сайта доменное имя (адрес), и хостинг (место для вашей страницы).
Язык HTML
То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы браузер правильно отображал форматирование к примеру текста т.е. разделял его на абзацы, выделял цитаты, заголовки, списки и.т.д. ему надо как-то сообщить, что мол это заголовок, а это - параграф и.т.д. Этим как раз и занимается язык html.
Основное, что нужно знать для того, чтоб сделать простую html-страничку, это HTM L. (от Hypertext Markup Language -- язык разметки гипертекста) - это язык разметки документов в среде WEB. А пишется этот язык специальными знаками (тегами), которые находятся в угловых скобках, как вот этот тег <html> он означает, что началась страничка с кодировкой, он обязателен в любой интернет страничке. У большинства тегов есть заканчивающий тег. Он выглядит так </тег>он нужен для определения того места, где действие тега закончилось. <тег>действие тега</тег>. Желательно вводить все теги в нижнем регистре (маленькими буквами), хотя не обязательно.
Организация связи в Internet
При организации связи между вычислительными машинами, используется специальный набор правил, которые называются протоколом связи. Схема связи: клиент - протокол - сервер. В конкретном сеансе связи используются, как минимум, две машины. Одна машина (точнее - программа на машине), которая содержит информацию, называется сервером, а другая программа, которая делает запрос на получение информации - клиентом.
Примеры протоколов:
- протокол Hyper Text Transfer Protocol (HTTP) - протокол передачи гипертекста в информационной системе World Wide Web (www) (всемирная паутина);
- протокол FTP - служит для передачи файлов между клиентом и сервером;
- протокол TELNET - служит для организации удаленного доступа на компьютер;
- протокол FILE - используется для доступа к ресурсам на локальном компьютере.
Система адресации в Internet
В адресном поле клиента (браузера) вводится адрес информационного ресурса, к которому необходимо получить доступ. Адрес состоит из двух частей: левая часть описывает протокол связи, а правая указывает собственно адрес ресурса. Например:
Информационная система World Wide Web
Всемирная компьютерная сеть Internet никогда не смогла бы стать столь популярной, не появись в 1991 году новая информационная система, названная World Wide Web (www) (всемирная паутина). Программа просмотра оказалась настолько удобна и проста в обращении, что позволила приобщиться к Internet-сообществу людям, чьё знакомство с компьютером оканчивалось лишь текстовым редактором. Более того, система www позволила пользователю, знающему нетрудный язык HTML, создавать свои собственные документы и размещать их в сети Internet.
Какие же принципы обеспечили такой успех www?
1. Язык гипертекстовой разметки HTML;
2. Протокол обмена гипертекстовой информацией HTTP;
3. Универсальный способ адресации ресурсов URL.
Приведу пример:
<h1> Крупный заголовок </h1>
<h2> Заголовок чуть поменьше </h2>
В браузере это будет выглядеть следующим образом:
Что понадобится нам для обучения?
Браузер и Блокнот (или аналогичный простой редактор) - вот всё, что вам необходимо для работы. Блокнот найти не составит труда (Пуск - Программы - Стандартные - Блокнот).
Почему простой текстовый редактор идеально подходит для изучения HTML? Да потому, что он не изменяет вводимый вами код. Так вы быстро продвинетесь, а ошибки будут только вашими, а не программными.
Структура web-документа
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>, которая обычно выглядит примерно так:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.01. Не пытайтесь запомнить эту строчку наизусть, главное - вы должны знать, что она необходима. Ведь именно она помогает сделать сайт, который будет одинаково смотреться во всех браузерах (обычно это три основных Internet Explorer, Opera, Firefox).
Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги головы (<head></head>) и тела документа(<body></body>).
Обычно основой головы документа является элемент TITLE - заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и.т.п. А основное содержимое: текст, таблицы, картинки, - находится в теле документа.
На этой смешной картинке схематически изображена структура:
Как вы видите голова находится над телом, поэтому никогда не размещайте голову документа в теле документа (или наоборот). Сначала закрываем голову документа </HEAD>, и лишь затем открываем тело <BODY>. И еще, у документа одна голова и одно тело, и не стоит пытаться создавать их большее количество.
Включение в документ заголовочной части не является обязательным. Задачей заголовка является представление необходимой информации для браузера и сервера HTTP. Информация, размещенная внутри заголовка документа, обычно не выводится на экран (кроме названия документа).
Заголовок документа открывается тегом <HЕAD>, который обычно следует сразу же за тегом <HTML>. Закрывающий тег </HEAD> показывает конец этого раздела, между ними располагаются остальные теги заголовка документа.
Чаще всего в заголовок документа включают парный тег <TITLE>... </TITLE>, определяющий название документа. Так же, между тегами <HЕAD>... </HЕAD> вписываются различные Java - скрипты, которые отображаются непосредственно для всей Html-странички (JavaScript - язык, созданный (разработчик - фирма Netscape.) для организации выполнения в HTML - документе некоторой последовательности операций - сценария (скрипта) - на компьютере пользователя. Все, что стоит между тэгами <script> и </script>, интерпретируется как код на языке JavaScript.).
В отличие от заголовка, тело документа является обязательным элементом, так как в нем располагается весь материал вашего документа (есть только одно исключение, с которым мы познакомимся далее, когда документ содержит вместо тела группу фреймов). Тело документа размещается между тегами <BODY> и </BODY>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML, позволяющими корректно отображать страницу на экране монитора.
Тег <BODY> не только обозначает начало содержимого документа, но и задает его основные свойства: цвет фона, текста и многое другое. Эти свойства определяются с помощью атрибутов.
Очень полезным при создании сайтов является вставка комментария. Почему? да потому, что через месяц после создания, вам будет трудновато разобраться, что к чему, ведь кода будет очень много. А если вы будете комментировать свои действия - тогда разобраться будет значительно легче!
Закомментированный текст нужен только для Вас, т.е. при просмотре документа через браузер его видно не будет.
В начале комментарий нужно открыть тегом <!-- затем вписать текст, и закрыть тегом -->
Например:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Сайт о фирме ООО «ДИНАС»
</title>
</head>
<!-- начнем работать с телом документа -->
<body>
<!--пишем контактные данные о фирме, вставляем таблицу с ценами-->
...
</body>
<!--закончили с телом документа-->
</html>
Создаем свою первую страничку для фирмы ООО «ДИНАС».
Шаг 1. Создайте свою личную папку (Ф.И.)и сохраните ее на SERVER\Личные папки. В ней создайте новую папку с названием «Сайт для ООО «ДИНАС».
Шаг 2. Создадим текстовый файл. Пуск - Программы - Стандартные - Блокнот.
Для написания сайта желательно разбираться в тегах. Основные будем запоминать.
Итак, начинаем написание с фразы:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Далее вставляем тег, обозначающий начало документа (<html>),
тег головы(<head>), тела (<body>)
<html>
<head>
<title> Составляем сайт для ООО «ДИНАС»
</title>
</head>
<body>
Далее напишите следующий текст:
Вас приветствует общество с ограниченной ответственностью "ДИНАС"
Наши контактные данные: Адрес: 600000, г.Владимир, ул.Большая Московская, дом № 28б телефон 43-52-89
Сохраните файл с расширением HTML, выбрав в окне сохранения тип файла - все файлы. Имя оставьте ООО ДИНАС.
Можете открыть сохраненный файл. Вот что у вас должно получиться:
Как вы заметили, текст идет слитно, без разделений на абзацы, также ничего не выделено заголовком, короче форматирование отсутствует! Т.е. чтобы Браузер правильно отображал текст, необходимо задать его форматирование.
Для того, чтобы внести изменения в страничку, Вам нужно открыть данный файл через обычный блокнот.
Для начала нового абзаца служит тег (тэг) <P>… </P>
После открытия страницы в окне Веб-браузера все абзацы ее текста, помеченные тегом (тэгом) <P>, разделяются пустыми строками, что улучшает ее компоновку и внешний вид.
По умолчанию браузер обычно форматирует абзац с выравниванием по левому полю. Для принудительного выравнивания служит атрибут align. С его помощью абзацы могут быть выровнены влево, вправо, по центру и по ширине.
Для перехода к новой строке используется тег (тэг) <BR>.
Он сообщает браузеру, что следует прекратить размещение текста и других элементов страницы в пределах текущей строки и перейти к новой строке. Этот тег (тэг) не имеет своего двойника с косой чертой, так называемого закрывающего тега (тэг).
Основное использование этого тега (тэга) - для принудительного размещения встроенных элементов в определенном месте страницы. Он удобен, также, в тех случаях, когда необходимо увеличить пустые области между отдельными элементами страницы.
Создание заголовков
Заголовки - отличный инструмент структурной организации содержимого Веб-страницы. Стандарт HTML предусматривает возможность использования заголовков шести уровней. Заголовки 1 уровня обозначаются тегом <Н1> и отображаются самым крупным шрифтом, а уровня 6 (<Н6>) - самым мелким. Заголовки с крупным шрифтом (1, 2, 3) обычно используют в качестве выделения разделов документа, а теги <Н5>, <Н6> часто применяют для выделения фрагментов текста, содержащих сведения об авторских правах и другую служебную информацию. Шрифт заголовков, форматируемых с помощью тега <Н4>, как правило, не отличается по размеру от шрифта, которым набран основной текст страницы. Грамотное использование заголовков значительно улучшает читабельность страницы, но надо заметить, что не следует использовать на одной странице заголовки более трех различных уровней вложенности.
Шаг 3.
Откроем наш файл с помощью программы Блокнот и внесем добавления:
<body bgcolor="#CCFF99 ">, что означает, наш документ, т.е. страница, будет светло зеленого цвета. Мы добавили атрибут тела, отвечающий за цвет. Значение атрибута помещается после знака «=» и в кавычках.
Цвета и изображения фона задаются с помощью команды <BODY>.
Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее параметры:
bgcolor = "# код цвета " - цвет фона документа,
text = "# код цвета " - цвет текста документа,
link = "# код цвета " - цвет текста, используемого в качестве ссылки,
vlink = "# код цвета " - цвет ссылки на просмотренный ранее документ,
alink = "# код цвета " - цвет ссылки в момент нажатия на нее правой кнопки мыши.
Код цвета задается в кодировке RGB - шесть шестнадцатеричных чисел. Важно отметить, что цвет фона не отображается на бумаге при выводе HTML - документа на печать.
Ниже приводятся коды простейших цветов:
|
Название цвета на английском языке |
Название цвета на русском языке |
красная составляющая |
зеленая составляющая |
синяя составляющая |
|
|
aqua |
Бирюзовый |
00 |
ff |
ff |
|
|
black |
Черный |
00 |
00 |
00 |
|
|
Blue |
Синий |
00 |
00 |
ff |
|
|
fuchsia |
Розовый |
Ff |
00 |
ff |
|
|
gray |
Серый |
80 |
80 |
80 |
|
|
green |
Зеленый |
00 |
80 |
00 |
|
|
Lime |
Светло-зеленый |
00 |
Ff |
00 |
|
|
Maroon |
Коричневый |
80 |
00 |
00 |
|
|
Navy |
Ультрамариновый |
00 |
00 |
80 |
|
|
Olive |
Оливковый |
80 |
80 |
00 |
|
|
Purple |
Пурпурный |
80 |
00 |
80 |
|
|
Red |
Красный |
Ff |
00 |
00 |
|
|
Silver |
Серебряный |
C0 |
C0 |
C0 |
|
|
Teal |
Темно-зеленый |
00 |
80 |
80 |
|
|
Yellow |
Желтый |
Ff |
Ff |
00 |
|
|
White |
Белый |
Ff |
Ff |
Ff |
*Более подробную информацию по цветам можно почитать здесь: http://www.wikireality.ru/wiki/Цвета_в_HTML
Для изменения цвета текущего текста можно в любом месте домашней страницы воспользоваться командами:
<FONT COLOR= Код цвета > Текущий текст </FONT COLOR>
Обратите внимание: мы одновременно можем прописать в теге <body> и цвет текста в документе, и цвет фона.
Кроме того, атрибут цвета можно записывать не только как: #код цвета, а еще и так: red. Green - если известно само название цвета на английском языке.
Для форматирования непосредственно шрифтов, в HTML есть тег < FONT> </FONT>. У этого тега существуют следующие атрибуты:
color - цвет шрифта;
face - гарнитура шрифта;
size - размер шрифта. Может быть задан абсолютным (от 1 до 6), либо относительным значением (от +1 до +6 и от -1 до -6). По умолчанию размер шрифта 3. Если указать < font size="+1">< /font>, то текст, размещенный между тегами < font> и < /font>, будет отображаться увеличенным на 1 по сравнению с другим текстом. Аналогично и с -1, только уменьшенным на 1.
Тег <DIV> является контейнером (блоком) и предназначен для того, чтобы быстро задать общие параметры ко всему содержимому. Закрывается блок тегом </DIV>.
Атрибуты тега <DIV>:
align - задает выравнивание содержимого контейнера.
Аргументы
center
Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок.
left
Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается лесенкой.. Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right
Выравнивание текста по правому краю. Строки текста равняются по правому краю, а левый остается рваным..
justify
Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю.
Значение по умолчанию - left.
Шаг 4.
Добавим в начало первой строки тег <div align="center">, чтобы выровнять по центру.
Сохраните файл еще раз. Откройте в браузере. Обратите внимание, что надпись встала по центру страницы.
Добавим в этот контейнер теги для увеличения размера заголовка и поменяем цвет текста на красный, сделаем его жирным.
<div align="center"><h1><span style="color: red"> <strong> Вас приветствует общество с ограниченной ответственностью "ДИНАС" </strong> <br></span></h1></div>
С помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль. В нашем примере мы изменили цвет предложения. Тег <STRONG> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Сохраните файл. Посмотрите изменения.
Шаг 5.
В Интернете всегда привлекает внимание текст с применением различных эффектов, например бегущая строка. Попробуем наше предложение сделать бегущей строкой. Для этого в контейнер добавим тег <marquee> </marquee>.
<div align="center"><h1><span style="color:red"><strong><marquee> Вас приветствует общество с ограниченной ответственностью "ДИНАС" </marquee><br> </strong> <br></span></h1></div>.
Сохраните измененный файл. Откройте в браузере и посмотрите результат.
Можно задать определенные параметры движения строки, параметры задаются непосредственно в теге <marquee>:
· чтобы задать направления движения строки, используется аргумент direction="" и значения аргумента: left, right
· чтобы задать скорость перемещения пикселов необходимо внести значения следующих аргументов scrollamount="" (количество пикселов) и scrolldelay="" (число миллисекунд)
· также задаются и другие параметры сходные с параметрами как для обычной строчки текста: width="", height="" - ширина и высота бегущей строки в пикселах или в % от ширины и высоты окна, соответственно
· bgcolor="" - цвет бегущей строки.
Добавим параметры нашей бегущей строке:
<div align="center"><h1><span style="color: red"><strong><marquee height="100" width="1050" bgcolor="#CCFF99 ">,
Шаг 6.
Чтобы остальной текст смотрелся красиво, также отформатируем его: выровняем по центру, увеличим шрифт, если необходимо, изменим цвет текста, разобьем по строкам, добавим горизонтальную линию. Обязательно «закроем» теги. Откройте файл через Блокнот и внесите дополнения:
<em> <h1><p align="center"> Наши контактные данные: </p></h1> </em> <br>
<div align="center"><h2><em>Адрес: 600000, г.Владимир, ул.Большая Московская, дом № 28б<br></em><br></div>
<div align="center"><h1><font color ="red">телефон 43-52-89</font><br><hr width="50%" align="center" size ="6"color="red"></h1></div>
<div align="center"><h1>< font face="Garamond">
Наша фирма предлагает вам <br> большой ассортимент канцелярских товаров: </font></h1></div>
Тег <em> делает текст курсивом, тег <hr> рисует горизонтальную линию, которая по своему виду зависит от используемых параметров. Параметры линии:
Align - Определяет выравнивание линии.
Color - Цвет линии.
Size - Толщина линии в пикселах..
Width - Ширина линии в пикселах или в процентах.
Работаем с изображениями
Изображения - это неотъемлемая часть любого сайта в сети интернет. Они используются везде, поэтому давайте разберемся, что к чему. Есть три типа файлов изображений, которые можно вставить на ваши страницы:
· GIF (Graphics Interchange Format)
· JPG / JPEG (Joint Photographic Experts Group)
· PNG (Portable Network Graphics)
Вставить изображение на страницу очень просто, если оно лежит в той же папке что и страница.
Шаг 7.
Скопируйте файлы ruchki.jpg и Динас.jpg в ту папку, где сохранен файл ООО ДИНАС.html.
Для того, чтобы вставить рисунок необходим элемент IMG не имеющий закрывающего тега и атрибут SRC (сокращение от source - положение) который указывает где находится изображение. Вы легко можете вставлять изображения, размещенные в других папках или на других сайтах. Просто укажите правильный путь).
<img src="название рисунка.jpg">
Вставим в нашу страницу рисунок «ruchki.jpg». Поместим его на странице слева от текста.
Откройте файл в блокноте и добавьте туда следующую надпись:
<img src="ruchki.jpg"width="250" height="250"hspace="35" align="left">
Вот еще очень необходимые атрибуты:
ALIGN - определяет способ выравнивания картинки по горизонтали. Очень полезное свойство при обтекании картинки текстом. Обычно используют LEFT (выравнивание по левому краю, текст будет обтекать справа) и RIGHT (выравнивание по правому краю, текст обтекает слева). Если на странице есть текст, то это обязательное свойство.
BORDER - задает ширину рамки вокруг иллюстрации.
HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других объектов документа. Легко запомнить название, если взять и просто перевести с английского. HSPACE - Horizontal Space - горизонтальный отступ и VSPACE - Vertical Space - вертикальный отступ.
HEIGHT и WIDTH - высота и ширина изображения в пикселах. Золотое правило web-мастера - всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах (или при подключении к сети через модем) это смотрится просто отвратительно. Но в принципе, можно и не задавать размеры, просто будет дольше загружаться. И еще, не советую Вам искажать реальные размеры картинки.
Дополнительные сведения
GIF -- Graphics Interchange Format
* Разработан коммерческой Online-службой CompuServe для передачи графики и иллюстраций по сети между различными платформами.
* Поддерживает до 256 цветов; поэтому GIF пригоден не для всех целей - фотографического качества на нем достичь трудно.
* GIF87a является исходным стандартом без расширений. К важнейшим расширениям дополнительно разработанного GIF89a стандарта относятся:
Опции прозрачности: Иллюстрации могут быть объявлены прозрачными. Сквозь такие прозрачные иллюстрации можно увидеть фон, например, графику заднего плана в окне браузера.
Опция чересстрочности (Interlaced): Иллюстрация (аналогично телевизионной картинке) разделяется на четыре иллюстрации, каждая из которых изображает четвертую часть графики, полученную выделением каждой четвертой строки пикселов. Загрузка иллюстрации выполняется по частям.
Если чересстрочность выключена, то загрузка четверти иллюстрации соответствует заполнению четвертой части ее рамки. При включенной опции четверть иллюстрации занимает всю рамку, но точность (четкость) отображения по сравнению с окончательным вариантом ощутимо хуже (значительно крупнее зерно).
Включенная опция чересстрочности дает возможность еще до полной загрузки иллюстрации, загрузив только четверть (половину, три четверти), понять, что она собой представляет. Пользователь, у которого скорость доступа к сети ограничена, оценит данную опцию.
Браузеры не делают различий между GIF-форматами. А программы работы с графикой, как правило, явным образом требуют выбрать между GIF87a и GIF89a. Если существует возможность, этот выбор следует сделать в пользу GIF89a.
Размер GIF-файла иллюстрации сильно зависит от содержимого иллюстрации. Растровое (bitmap) изображение в этом формате сжимается с помощью LZW-алгоритма, причем эффективность сжатия зависит от разнообразия цветов в иллюстрации (наличия одноцветных областей). Это означает, что наибольшую экономию объема файла дают иллюстрации с небольшим количеством цветов и большими одноцветными областями. Полноцветные фотографии, напротив, плохо сжимаются и в GIF-формате занимают много места (см. JPEG-формат).
JPEG -- Joint Photographic Experts Group
JPEG был разработан для передачи иллюстраций фотографического качества между различными платформами. Поддерживает 24-битовую цветовую палитру (миллионы цветов).
Размер файла JPEG-иллюстрации зависит от необходимого качества отображения иллюстрации. Алгоритм упаковки JPEG-формата реализует необратимую процедуру сжатия, т.е. теоретически JPEG-иллюстрация никогда не достигает такого же хорошего качества, как такая же иллюстрация другого формата (например, TIFF).
Чем меньше претензий вы предъявляете к качеству, тем большего сжатия можно достичь и тем меньше становится файл. Чем хуже качество JPEG, тем более размытой выглядит иллюстрация на экране.
Последний JPEG-стандарт поддерживает опцию, похожую на Interlaced GIF-формата: Прогрессивный JPEG. При этом речь идет только о внутренней переструктуризации JPEG-данных. Иллюстрация делится не на несколько чересстрочных частей как в случае GIF, а на несколько иллюстраций полного размера, но различного уровня качества (качество иллюстрации следующего уровня выше предыдущего). Размер прогрессивных JPEG-файлов несущественно отличается от оригинального JPEG. Все традиционные Web-браузеры уже поддерживают прогрессивный JPEG.
Прозрачная графика
GIF-иллюстрации, наряду с Interlaced-опцией, позволяют задавать другой параметр, который недоступен ни в одном другом графическом формате. При этом определенный цвет (размер палитры в GIF-файлах равен 256) объявляется прозрачным. Это означает, что в тех местах, где на иллюстрации использован данный цвет, сквозь нее просматривается фон окна броузера - разумеется, это может быть и другая иллюстрация, расположенная позади данной. Благодаря этой возможности иллюстрации, изображаемые в World Wide Web, больше не ограничены прямоугольным форматом и могут принимать любую форму, например, окружностей и других значков для командных кнопок.
На практике графика загружается в программу графического редактора, например, Photoshop или Paint shop Pro, после чего определенный цвет объявляется прозрачным - в зависимости от программы - либо путем ввода номера цвета, либо выполнением щелчка на соответствующем цветовом поле.
Анимированная («ожившая») графика
С помощью GIF-формата в HTML-документ можно встроить простую анимацию графики. При этом используется тот факт, что в один GIF-файл помещается множество GIF-иллюстраций. В HTML такой файл обрабатывается точно так же, как и любая другая графика. Это означает, что для интегрирования анимации в Web-страницу вам нужен дескриптор <img> и все его атрибуты.
Создание ссылок
Давайте поговорим о ссылках - переходах с одной страницы на другую или в определенное место в документе. Ссылки это базовый элемент, без которого невозможно представить интернет.
Создать html ссылку очень просто. Для этого используется простенький элемент с одним атрибутом.
<a href=" "> </a>
Элемент а (ancor) является как бы якорем, т.е. текст, заключенный между открывающим <a> и закрывающим </a> тегом, будет текстом ссылки.
Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфирует место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.
Сделать html ссылку между страницами одного и того же веб-сайта гораздо проще. Например, если у нас есть две страницы (к примеру стр1.htm и стр 2.htm ) расположенные в одной папке, то код ссылки с стр.1 на стр.2 будет выглядеть так:
<a href="стр2.htm"> Для перехода на page2 щелкни здесь! </a>
Т.е. надо просто написать название страницы, на которую мы хотим перейти.
Шаг 8.
Сделаем из предложения «Наша фирма предлагает вам большой ассортимент канцелярских товаров» ссылку на стр. 2, которую заполним позже.
Чтобы сделать ссылку, добавим следующие теги:
<div align="center"><h1><font color ="red"><a href="стр 2.html"><font face="Garamond"> Наша фирма предлагает вам <br> большой ассортимент канцелярских товаров: </a>
Шаг 9.
Добавим на нашу страницу еще одно изображение, выровняв его по правому краю. Скопируйте в данную папку файл «Динас.jpg» и самостоятельно добавьте его на страницу. Размеры укажите самостоятельно. В результате должно получиться:
(Проверьте правильность написания кода: <img src="Динас.jpg"width="300" height="300"hspace="40" vspace="40"align="right">).
Закончим оформление первой страницы. Не забудьте закрыть «тело» </body> и указать конец страницы. </html>
Дополнительные сведения
Другой формой использования тэга А является определение точек внутри текста, на которые можно сослаться: Такой метод используется в случае, когда документ нельзя поделить на части и необходимо быстро передвигаться из оглавления по тексту.
<А NАМЕ= "роint"> - метка, расположенная в тексте документа.
Для ссылки на такую метку используют следующую форму URL:
<А НREF=" http://роlyn.net.kiae.su/index.html #роint">Ссылка на точку "роint" в документе "index.html"</А>
Если необходимо документ по ссылке отобразить в окне фрейма, то используется атрибут target:
<А НREF="http://роlyn.net.kiae.su/index.html" target=name>
Здесь документ index.html будет отображен в окне фрейма с именем name.
Так как гиперссылка выделяется цветом, то для четкого ее изображения на цветном фоне документа необходимо дополнительными атрибутами тэга <BODY> указать удобный для ее просмотра цвет.
<body bgcolor=blue text=yellow link=white alink=green vlink=red>
Здесь link=white обозначает, что цвет гиперссылки, к которой еще не обращались - белый, alink=green - зеленый цвет активизированной гиперссылки, vlink=red - красный цвет ссылки, к которой уже обращались.
Приступаем к оформлению второй страницы, на которую указывает ссылка. Для этого создадим новый текстовый документ. На этой странице мы создадим таблицу с наименованиями и ценами товаров.
Создание таблиц
Давайте разбираться, как построить простейшую таблицу. Для этого нам понадобятся как минимум три элемента.
TABLE - Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Сразу скажу, что здесь есть атрибут BORDER, который задает толщину рамки таблицы в пикселах.
TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен.
TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.
Вот еще полезные атрибуты:
CELLPADDING - определяет расстояние (в пикселах) между рамкой каждой ячейки html таблицы и содержащимся в ней материалом.
CELLSPACING - определяет расстояние (в пикселах) между границами соседних ячеек таблицы html.
WIDTH - определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.
HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.
ALIGN - определяет способ горизонтального выравнивания html таблицы или содержимого ячеек. Возможные значения: left, center, right. Значение по умолчанию - left.
VALIGN - должен определять способ вертикального выравнивания таблицы или содержимого ячеек таблицы.Возможные значения: top, bottom, middle.(прижать к верху, прижать к низу, и установить посередине).
BGCOLOR - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
Примечание: можно хоть каждой ячейке таблицы задать свой цвет фона или фоновый рисунок. Но: если вы задаете фоновый цвет (или рисунок) в базовом элементе TABLE то во всех ячейках будет этот фон(рисунок), и если вы захотите в какой-то ячейке поменять, пропишите соответсвующий атрибут именно для этой ячейки.
Таблица начинается с <table>, затем идёт <tr>, указывающий на начало нового ряда, в ряду вставлены ячейки. Ряд закрывается </tr>, и сразу начинается новый ряд <tr>. В новом ряду также ячейки. Таблица закрывается </table>. Все довольно логично. Попробуем?
Шаг 10.
Составим таблицу, состоящую из 1 ряда, и в нем 3 ячейки. Укажем цвет нашей таблицы, цвет и параметры рамки, а также параметры текста в таблице.
(не забудьте, что новая страница также начинается с кода <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>).
<table border="6" cellpadding="20"align="center"bgcolor="yellow"bordercolor="#FF8000">
<thead style="color:green">
<tr bgcolor="#FF8000">
<td align="center" valign="center">
<h2><em><span style="color:black" > Наименование товара</em> </h2>
</td>
<td>
<h2><em> <span style="color:black;" >Оптовая цена</em> </h2>
</td>
<td>
<h2><em><span style="color:black;" > Розничная цена</em> </h2>
</td>
</tr>
Вот что должно получиться:
Далее по такому же принципу добавим еще ряды, в каждом по 3 ячейки, сразу же заполним содержанием.
<tr>
<td>
<font size="+1"><span style="color:black;" > Бумага "BALLET Classik" 98% белизна А4</font>
</td>
<td>
<font size="+1"><center><span style="color:black;" >115 руб
</td>
<td>
<font size="+1"><center><span style="color:black;" >120 руб
</td>
</tr>
<td>
<font size="+1"><span style="color:black;" > Бумага "SVETO COPY" 95% белизна А4</font>
</td>
<td>
<font size="+1"><center><span style="color:black;" >100 руб
</td>
<td>
<font size="+1"><center><span style="color:black;" >115 руб</td>
</tr>
<tr>
<td>
<font size="+1"><span style="color:black;" > Бумага "Снегурочка" 98% белизна А4</font>
</td>
<td>
<font size="+1"><center><span style="color:black;" >120 руб
</td>
<td> <font size="+1"><center><span style="color:black;" >125 руб
</td>
</tr>
<tr>
<td>
<font size="+1"><span style="color:black;" >Ручка Corvina 51 шариковая синяя Арт. А-100
</td>
<td>
<font size="+1"><center><span style="color:black;" >2 руб
</td>
<td>
<font size="+1"><center><span style="color:black;" >3 руб. 80 коп
</td>
</tr>
<tr>
<td>
<font size="+1"><span style="color:black;" >Линер Crown красный Арт. СМР-5000 (12\144)
</td>
<td>
<font size="+1"><center><span style="color:black;" >8 руб 20 коп
</td>
<td>
<font size="+1"><center><span style="color:black;" >9 руб
</td>
</tr>
<tr>
<td>
<font size="+1"><span style="color:black;" >Папка с 20 файлами Silwerhof "Double effect Classic", бордовая
</td>
<td>
<font size="+1"><center><span style="color:black;" >30 руб
</td>
<td>
<font size="+1"><center><span style="color:black;" >35 руб
</td>
</tr>
<tr>
<td>
<font size="+1"><span style="color:black;" >Скрепки 50 мм гофрир. Арт. Г.4520 50 шт
</td>
<td>
<font size="+1"><center><span style="color:black;" >12 руб
</td>
<td>
<font size="+1"><center><span style="color:black;" >13 руб 50 коп
</td>
</tr>
<tr>
<td>
<font size="+1"><span style="color:black;" >Штрих Retype на спиртовой основе</font>
</td>
<td>
<font size="+1"><center><span style="color:black;" >8 руб
</td>
<td>
<font size="+1"><center><span style="color:black;" >10 руб
</td>
</tr>
</table>
</html>
В результате должна получиться такая таблица:
В дальнейшем вы сами можете поэкспериментировать с цветом, размером, рамкой таблицы…
Сохраните этот файл с именем стр 2.html в ту же папку, где сохранен первый файл. Теперь ссылка с первой страницы должна открыть вторую. Попробуйте.
Фреймы
Использование техники фреймов позволяет разбить окно браузера на произвольное число независимых подокон, каждое из которых отображает отдельную HTML - страницу, например, навигационную панель, область данных, область рекламной информации и т.п. HTML-документы, отображаемые в отдельных фреймах, не зависят один от другого
Структура фреймовой области задаётся в рамочном фрагменте документа, ограниченном дескрипторами <frameset>, </frameset>. Этот фрагмент содержит также ссылки на отображаемые внутри фреймов HTML - документы. Допускается вложение фреймовых областей, т.е. элементом данной фреймовой области может быть отдельный фрейм, а может быть вложенная фреймовая область, описываемая собственным дескриптором.
Для описания самого фрейма используется дескриптор <frame>, концевого дескриптора не требуется. Атрибуты фрейма определяют его формат и другие особенности.
Не все браузеры могут воспринимать фреймы. Но если браузер лишен такой возможности, он просто игнорирует рамочный раздел документа.
Атрибуты тэга <frameset>
|
Атрибут |
Функция |
|
|
cols |
Количество и ширина столбцов |
|
|
rows |
Количество и высота строк |
|
|
border |
Ширина рамки (в пикселях) |
Значения атрибутов: n (ширина столбцов или высота строк в пикселях), n% (ширина столбцов или высота строк в процентах от ширины или высоты окна), * (оставшаяся часть окна).
Атрибуты тэга <frame>
|
Атрибут |
Функция |
|
|
name |
Имя фрейма |
|
|
src |
HTML-документ (содержимое) данного фрейма |
Пример
<html>
<head>
<title>
Структура фреймов
</title>
</head>
<frameset rows="50,*" border=4 >
<frame src="Заголовок.htm" name="top" >
<frameset cols="36%,*">
<frame src="index.htm" name="left">
<frame src="main.htm" name = "right">
</frameset>
</html>
Разберем из приведенного примера строки:
<frameset rows="50,*" border=4 >
Данный тег задает количество горизонтальных фреймов и их размер при отображении в браузере (50 - высота 1- го фрейма по вертикали в пикселах. * - значит, второй фрейм занимает остальную область окна).
<frame src="Заголовок.htm" name="top" >
Данный тег ссылается на html-файл, содержимое которого отражается в верхнем фрейме. Атрибут name="top" указывает на то, что фрейм будет отображаться верхним в окне браузера.
<frameset cols="36%,*">
Данный тег задает количество вертикальных фреймов и их размер при отображении в браузере (36% - ширина левого фрейма по горизонтали в процентах от окна браузера. * - значит, правый фрейм будет отображаться на всю остальную ширину окна браузера).
<frame src="index.htm" name="left">
<frame src="main.htm" name = "right">
Два данных тега ссылаются на соответствующие html-файлы, содержимое которых отображается в соответствующих фреймах (атрибут name="left" указывает на то, что содержимое файла будет отображаться в левом фрейме, а name = "right" - в правом соответственно).
Упражнение: Построить фреймовую структуру согласно данному коду (все документы сохраняйте в: //Server/Личные папки/Фамилия Имя)
Рамочная часть документа:
<html>
<head>
<title>Структура
</title>
</head>
<frameset rows="50,*" border=4>
<frame src="Заголовок.htm" name="top">
<frameset cols="36%,,*">
<frame src="index.htm" name="left">
<frame src="main.htm" name = "right">
</frameset>
</html>
HTML-документ для верхнего фрейма:
<html>
<head>
<title>Верхний фрейм
</title>
</head>
<body>
<h2 align=center>
Заголовок
</h2>
</body>
</html>
HTML-документ для левого фрейма:
<html>
<head>
<title>Левый фрейм
</title>
</head>
<body>
<h2 align=center>
Содержание
</h2>
</body>
</html>
HTML-документ для правого фрейма:
<html>
<html>
<head>
<title>Правый фрейм
</title>
</head>
<body>
<h2 align=center>
Основная информация
</h2>
</body>
</html>
Так мы создали простейший сайт с помощью кодировки.
Знакомство с программой FrontPage
Прикладная программа FrontPage 2003 - это визуальный html-редактор для быстрого создания сайта. Язык HTML является основным языком программирования Web - среды. С помощью FrontPage, можно создавать структуру сайта, формировать страницы, добавлять интерактивные средства и загружать файлы на сервер в сети Интернет.
Web-страницы основаны на языке описания гипертекстовых документов HTML. Теперь Вы уже знаете, что в HTML для определения содержания и формата гипертекстовых документов используются команды, которые называются тегами (tags). HTML - страницы представляет собой документы в обычном текстовом формате, содержащие специальные команды форматирования (теги HTML).
Для того чтобы создать сайт при помощи FrontPage, нет необходимости учить HTML. FrontPage позволяет довольно просто набрать текст, который можно поместить на Web - страницу, расположить в нужных местах рисунки.
Сайт или Web-узел - это набор связанных между собой близких по смыслу Web-страниц и файлов. В программе FrontPage существуют мастера, которые позволяют создавать сайт, и шаблоны или набор предварительно разработанных текстовых и графических форматов, на основе которых могут создаваться новые веб - страницы. Мастера и шаблоны FrontPage позволяют создавать сайты различных типов.
На каждом сайте существует одна Web-страница, которая называется главной или домашней. Домашняя страница - первая Web-страница, на которую попадает посетитель сайта. Используя навигацию или гиперссылки, пользователи смогут попасть и на другие страницы сайта.
Обычно сайт размещается на Web-сервере - компьютере, который предоставляет доступ к Web-страницам посетителям сайта. FrontPage позволяет создавать сайт непосредственно в файловой системе компьютера пользователя, а затем, когда он будет готов, опубликовать его на Web-сервере.
Окно прикладной программы FrontPage
После запуска программы FrontPage (Пуск - программы - Microsoft Office - FrontPage) на экране появится окно программы, в котором отображается новая страница (нов_стр_1.htm). В области задач отображается панель Приступая к работе.
Окно прикладной программы FrontPage состоит: из строки заголовка, строки меню, панелей инструментов редактирования и форматирования, кнопок быстрого выбора тега (для редактирования и ввода тегов), ярлычков вкладок выбора страниц (для перехода между страницами), рабочего окна, в котором отображается новая страница, панели рисования, кнопок режимов просмотра, индикатора ожидаемого времени загрузки страниц при скорости 56 кбит/с, индикатора размера страниц, области задач.
В программе FrontPage можно пользоваться одним из четырех режимов просмотра: "Конструктор", "Код", "С разделением" и "Просмотр".
· В режиме "Конструктора" как в любом текстовом редакторе можно в визуальном режиме создавать, редактировать и форматировать страницу, т.е. вводить текст, добавлять рисунки, таблицы. При этом теги языка HTML автоматически добавляются в фоновом режиме, но кодировка HTML на экране не отображается.
· В режиме "Код" на экране будет отображаться вся кодировка и можно напрямую редактировать код HTML, а также вводить новые коды. На рисунке представлен HTML - код новой пустой страницы в редакторе FrontPage.
Подобные документы
Особенности разработки сайта "Туристическое агентство" с помощью редактора для визуального проектирования web-сайтов MS Office FrontPage System Professional 2003. Создание нового сайта в программе с использованием шаблона с готовыми примерами или мастера.
отчет по практике [3,2 M], добавлен 05.01.2014Способы представления на интернет-страницах различных видов информации. Инструкция разработки сайта: создание страниц при помощи шаблона, установление связей между ними при помощи гиперссылок, наполнение текстом и графическими объектами web-документа.
курсовая работа [1,9 M], добавлен 09.05.2011Обоснование выбора средств разработки сайта. Программа Microsoft Office FrontPage 2003, характеристика и принцип работы. Разработка структуры сайта, его реализация и создание элементов дизайна. Наиболее употребляемые теги языка HTML. Листинг HTML-кода.
курсовая работа [1,7 M], добавлен 08.03.2011Создание обучающей презентации о создании сайта в программе для конструирования сайтов "Joomla". Установка локального сервера "Denwer" и программы "Joomla". Создание меню, загрузка изображений. Смена шаблона, работа с текстом в программе MS PowerPoint.
дипломная работа [3,8 M], добавлен 04.03.2013Порядок проектирования сайта и разработки Web дизайна. Приемы работы и решения программных продуктов Microsoft FrontPage 2003, Adobe Photoshop CS2, Allaire HomeSite 4.5, AWicon Pro v. 9.0. Реализация дизайнерского решения с помощью графических объектов.
творческая работа [3,7 M], добавлен 26.05.2009Создание с помощью графического редактора логотипа и баннера для образовательного сайта "Областные математические олимпиады". Типы логотипов, баннер как графический элемент страницы сайта. Обзор инструментов графического редактора Adobe Illustrator.
курсовая работа [2,9 M], добавлен 08.02.2014Выбор инструментальных и программных средств для создания сайта. Структура программного продукта. Создание сайта при помощи программы WordPress. Тестирование разработанной программы. Разработка структуры и дизайна сайта. Наполнение сайта контентом.
курсовая работа [1,0 M], добавлен 09.01.2014Разработка структуры сайта: создание карты, макета страницы, обеспечение навигации, определение дополнительных сервисов, выбор технологии. Создание базы данных, написание скриптов и сценариев для реализации имеющихся на сайте функциональных возможностей.
дипломная работа [3,2 M], добавлен 19.02.2013Разработка сайта в приложении FrontPage. Программные средства и технологии, используемые при разработке сайта. Основная структура сайта и размещение исходных файлов. Создание графических страниц, элементов и рисунков. Размещение сайта в сети Internet.
курсовая работа [1,6 M], добавлен 13.06.2013Подходы к созданию сайтов. Обоснование необходимости наличия персонального сайта компании ИП Тимонина Е.Н.. Структура, интерфейс, этапы создания сайта. Описание кода страниц. Создание web-страниц и наполнение их информацией. Верстка сайтов с чистым кодом.
дипломная работа [1,5 M], добавлен 03.06.2015
