Использование звука, рисунков, видео и форм на веб-странице. Дизайн web-сайта
Помещение музыкального объекта на страничку. Диалоговое окно загрузки файла. Включение видео в Web–страницу, варианты представления информации на ней. Основные недостатки сайта, построенного с применением фреймов. Основной принцип табличного дизайна.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | лабораторная работа |
| Язык | русский |
| Дата добавления | 15.04.2015 |
| Размер файла | 686,9 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru
Размещено на http://www.allbest.ru
Лабораторная работа № 3
Использование звука, рисунков, видео и форм на веб-странице. Дизайн web-сайта
1. Добавление звукового оформления
Существует множество форматов звуковых файлов, но далеко не все они используются на веб-страницах.
1.1 Фоновая музыка
Для воспроизведения фоновой музыки проще всего применить тег <BGSOUND> . Правда, он работает только в броузерах Internet Explorer и Mosaic, зато очень удобен. Если написать так:
<BGSOUND SRC="beethl.mid" LOOP="-1" BALANCE”"-5000" VOLUME="0"> то на веб-странице в качестве фоновой музыки будет исполняться файл beeth.mid, который указан в атрибуте SRC=.
Атрибут LOOP= нужен для того, чтобы определить, что делать, когда музыкальный фрагмент завершится. Значение LOOP="-1" или LOOP="infinite" означает, что музыкальный файл будет проигрываться от начала до конца бесконечное количество раз (пока пользователь не покинет веб-страницу). Значением атрибута LOOP= может быть положительное число, означающее количество повторов звукозаписи. Например, при LOOP="4" файл будет проигран четыре раза.
Для броузера Internet Explorer версии 6 (и более поздних) можно применять еще два атрибута: VOLUME= и BALANCE=. С помощью атрибута VOLUME= можно уменьшить громкость звучания. Именно уменьшить, поскольку | значение этого атрибута по умолчанию равно нулю, что соответствует максимальной громкости. Теоретически, предельное значение атрибута VOLUME= равно -10 000, однако обычно в использовании значений менее -1000 особого смысла нет.
Атрибут BALANCE= задает смещение звука по панораме. Его значение равное “-10 000” соответствует крайнему левому положению, а “10 ООО” -- крайнему правому. Значение по умолчанию равно нулю, что соответствует расположению звука по центру, в большинстве случаев является оптимальным решением.
Примечание. Информация о фоновой музыке вставляется между тегами <head></head>.
1.2 Звуковые объекты
Другой способ помещения музыкального объекта на страничку заключается в применении более универсального тега <OBJECT> . Вообще говоря, этот тег может использоваться не только для встраивания звуковых объектов. Он появился в свое время в Internet Explorer для встраивания объектов ActiveX/COM (что было альтернативой возможности запуска Java-апплетов в броузерах Netscape с помощью тега <APPLET> ). Если музыкальный объект размещен на веб-странице с помощью тега <OBJECT> , броузер в некоторых случаях может сообщить об отсутствии средств воспроизведения файлов такого типа. Иногда это вызывает удивление, так как те же файлы прекрасно воспроизводятся на том же компьютере, однако здесь требуется не любое средство воспроизведения, а только встроенное в данный броузер. В таких случаях необходимо доустановить модуль просмотра в броузер (может быть, предварительно загрузив его из Интернета).
Для помещения музыкального объекта на страничку используется такой синтаксис тега <OBJECT>:
<OBJECT DATA="SOUNDS/MyI')OLLY.mp3" TYPE="audio/wav">
</OBJECT>
Как видите, атрибут DATA= определяет файл -- источник музыки, а атрибут TYPE= определяет его тип (формат). О форматах мы поговорим ниже.
Если при использовании тега <BGSOUND> музыка исполняется в качестве фона, то при использовании тега <OBJECT> объект можно наблюдать на экране, как правило, в виде встроенного проигрывателя с кнопками Пуск, Стоп и другими элементами управления. Поэтому для тега <OBJECT> возможно использование таких атрибутов, как ALIGN= (со значениями top, middle, bottom, left, right), WIDTH=, HEIGHT=, HSPACE=, VSPACE= и даже USEMAP=. Все эти атрибуты нам уже знакомы по тегу <IMG>. Кстати, с помощью тега <OBJECT> действительно можно вставлять в тексты веб-страниц графические объекты и видеоклипы. При этом список форматов существенно расширяется (например, можно просматривать картинки в форматах TIFF и WMF), лишь бы только к браузеру был подключен соответствующий модуль просмотра. Кстати, можно вкладывать несколько элементов <OBJECT> друг в друга. Это приводит к следующему результату: если в браузере имеется средство просмотра внешнего объекта, будет отображен именно он, а если нет -- браузер попытается отобразить внутренний объект, и т. д. Например, можно написать так:
<OBJECT DATA="MyClip.mpg" TYPE="video/x-mpeg">
<OBJECT DATA="MySound.aiff" TYPE="audio/x-aiff">
<OBJECT DATA="MyPicturel.tiff" TYPE="image/tiff">
<OBJECT DATA="MyPicture2.gif" TYPE="image/gif"> Здесь должен быть видеоклип... </OBJECT> </OBJECT> </OBJECT> </OBJECT>
В этом примере браузер сначала попытается воспроизвести видеоклип (файл в формате MPEG). Если это ему удастся, то все, что находится внутри данного тега, игнорируется, а если нет -- браузер попытается воспроизвести музыкальный файл в формате АIFF. Если же он не найдет модуля воспроизведения и для этого файла, он попытается отобразить рисунок в формате TIFF, а уж если и это не получится, то в формате GIF. При таком невероятном стечении обстоятельств, что браузеру и это не удастся сделать, на месте объекта будет просто отображен текст Здесь должен быть видеоклип... И еще один момент. В теге <OBJECT> можно установить атрибут STANDBY=, значение которого (текстовая строка) будет отображаться на экране до тех пор, пока объект не загрузится целиком. Например, вполне целесообразно написать так:
<OBJECT DATA="sound.wav" TYPE="audio/wav" STANDBY="3arpyжаю звуковой объект, подождите немного...">
Если файл sound, wav имеет достаточно большой размер, пользователь увидит на экране надпись о происходящей загрузке.
Примечание. Тег <OBJECT> может находиться как в HEAD, так и BODY. Закрывающий тег требуется.
1.3 Звуковые гиперссылки
И наконец, еще один способ помещения музыки на веб-страницу заключается в простом создании гиперссылки на музыкальный файл (в атрибуте HREF=). Например, если написать
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Вставка музыкального сопровождения</title>
</head>
<body>
<a href="Музыка/lene marlin - faces.mp3" >послушайте музыкy </A>
</body>
</html>
... то при нажатии на гиперссылку пользователь услышит звукозапись из заданного файла (после того как тот загрузится). В некоторых случаях браузер может выдать запрос, открывать ли ему этот файл с текущего места (то есть, проигрывать ли его сразу), или же просто сохранить на жестком диске (рис. 1).
Рис. 1. Диалоговое окно загрузки файла
А иногда браузер может запросить указание на приложение, с помощью которого данный файл должен воспроизводиться. Если музыкальная информация действительно важна, следует пользоваться именно этим способом, поскольку в самом крайнем случае пользователь всегда сможет просто сохранить файл на диск, а потом уже прослушивать его с помощью других npогpaмм.
1.4 Форматы звуковых файлов
Итак, какие же форматы музыкальных файлов мы можем использовать? Прежде всего, это, конечно, звуковые форматы WAVE, AU та. AIFF. Эти форматы могут содержать собственно звук. Иногда они могут содержать также сжатые звуковые данные, однако оформленные в стандартном формате, причем для их воспроизведения в системе должны быть установлены соответствующие модули.
Один из самых распространенных форматов сжатия звуковых данных называется MPEG 1 Layer 3, а сокращенно -- просто МРЗ
2. Фоновая картинка
Теперь о фоновой картинке. Фоном может быть как большой графический файл, так и его фрагмент. При использовании последнего он будет автоматически размножен Вашим Обозревателем, поэтому подбирайте фрагмент хорошо стыкующимся. Вставить в страницу фоновую картинку можно так:
<BODY BACKGROUND="images.gif">
Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предполагается, что графический файл расположен в одной папке с Вашим документом, иначе нужно указать к нему путь.
Простейший способ избежать повторения фонового рисунка - сделать его достаточно большим, чтобы заполнить окно браузера. Откройте рисунок в графическом редакторе. Измените его размер как минимум до 1024 пикселей в ширину и 768 пикселей в высоту - максимального разрешения, используемого большинством компьютерных видеосистем.
Новые браузеры позволяют вам указывать, где повторять, а где не повторять фоновый рисунок. Используя стиль, вы можете не допустить повторения рисунка, даже если окно браузера больше изображения. Чтобы отобразить рисунок всего один раз, укажите в свойстве background-repeat тэга <BODY> значение no-repeat. Или если вы хотите, чтобы фон повторялся только в одном направлении, установите значение repeat-x (для повторения только поперек) или repeat-y (для повторения только вниз).
<body background="bkgd.gif" style="background-repeat:no-repeat ">
3. Включение видео в Web - страницу
Видеофайл включается в HTML - документ точно так же, как звуковой файл. Единственное различие, что теперь тип файла - mov или avi.
Пример 1:
Фрагмент документа формата HTML, обеспечивающий при активизации ссылки просмотр видеоизображения в блокноте выглядит следующим образом:
<A HREF="video.avi">Ползущая змея. (1,2 Mb)</A>
На экране появится соответствующая ссылка.
Ползущая змея. (1,2 Mb)
4. Простые формы
Формы предназначены для размещения ответов на адресованные Вами посетителям вопросы. Web-форма - это то же самое, что и любая другая бумажная форма, с которой Вы, наверное, встречались. Чаще всего они используются для:
проведения опросов;
получения отзывов.
Формы идеально подходят для включения в личные Web -страницы, поскольку для них требуется очень мало места. Мы начнем с создания очень простой формы. Для создания простых форм используется теги <FORM> и </FORM>. А между ними записываются следующие ниже элементы. Атрибут METHOD применяется для указания протокола, используемого для пересылки данных на сервер. Протокол GET выбран по умолчанию, но в большинстве случаев он не удовлетворяет разработчиков, поэтому чаще используют протокол POST.
4.1 <TEXTAREA> </TEXTAREA>
При помощи этого элемента создается область для ввода или просмотра текста. Ниже показан пример такой области, созданный при помощи следующей конструкции:
Запись в блокноте:
<FORM METHOD=POST>
<H2>Элемент Textarea
<TEXTAREA NAME="text001" ROWS=5 COLS=30>
Область для ввода текста
</TEXTAREA></H2> </FORM>
На экране:
Начало формы
Размеры области задаются при помощи атрибутов ROWS (количество строк) и COLS (количество столбцов).
4.2 <SELECT> <OPTION> </SELECT>
Элемент SELECT предназначен для создания списка или меню на гипертекстовой странице, а элемент OPTION - для создания пункта списка.
Ниже показан пример такой области, созданный при помощи следующей конструкции:
Запись в коде Front Page:
<FORM METHOD=POST>
<H2>Элемент select
<SELECT>
<OPTION VALUE=a>Первый
<OPTION VALUE=b>Второй
<OPTION VALUE=c>Третий
<OPTION VALUE=d>Четвертый
<OPTION VALUE=e>Пятый
</SELECT></H2> </FORM>
На экране:
Начало формы
Элемент select
Конец формы
Элементы SELECT и TEXTAREA применяются в тех случая, когда надо увеличить плотность размещения данных. При помощи элемента SELECT можно создавать списки, которые получаются более компактными, чем стандартные списки. Область ввода текста также поможет сэкономить место на странице за счет того, что сколь угодно большой текст будет прокручиваться в окне фиксированного размера.
4.3 <INPUT>
Этот элемент позволяет создавать различные элементы управления в форме, такие как: флажки, переключатели, поля ввода текста. Элемент не имеет конечного тега, так как все параметры задаются при помощи атрибутов.
Вид элемента определяет атрибут type.
|
type="text" |
создание поля ввода. В нем можно автоматически разместить произвольный текст, использовав атрибут value. |
|
|
type="password" |
создание строки для ввода пароля. Введенная информация отображается звездочками. |
|
|
type="checkbox" |
создание флажка. |
|
|
type="radio" |
определение одного переключателя. Для создания группы переключателей необходимо использовать несколько элементов input. |
4.3.1 Создание поле ввода для текста
Запись в блокноте:
<FORM METHOD=POST>
<H2>Элемент поля ввода
<FORM METHOD=POST>
<H3> Поле ввода </H3>
<INPUT type=text align=left>
Вид на экране
4.3.2 Рассмотрим пример создания группы из трех переключателей
<FORM METHOD=POST>
<H3> Переключатели </H3>
<INPUT TYPE="RADIO" NAME="s001" VALUE="первый" >
<INPUT TYPE="RADIO" NAME="s002" VALUE="второй" >
<INPUT TYPE="RADIO" NAME="s003" VALUE="третий" CHECKED>
</FORM>
На экране:
Начало формы
Переключатели
Атрибут CHECKED определяет, какой из переключателей должен быть выбран по умолчанию.
5. MAILTO
Посетитель Вашей Web - страницы может связаться с Вами еще одним способом по электронной почте. В Web - страницу можно включить значок или текст, после щелчка посетителя, на котором Вам будет автоматически отправлено сообщение.
Это тег <A HREF="mailto:">
Вы наверное уже большой специалист по части тега <A HREF=>. Для отправки себе почты впишите mailto:, а потом полный адрес в Internet. Затем добавьте текст или значок, чтобы было видно, что Вам отправляется почтовое сообщение. Поставьте закрывающий тег </A>.
Для посылки почтового сообщения автору необходим следующий текст в HTML - документе:
Рассмотренный случай применяется в броузере Internet Explorer.
Рассмотрим два примера.
1. <A HREF="mailto:luda_wnykowa@mail.ru"> Отправьте мне сообщение по почте</A>
2. <A HREF="mailto:luda_wnykowa@mail.ru"> <img src="pismo.gif"> Отправьте мне сообщение по почте</A>
Во втором примере есть вставка картинки
5. Сложные формы
Приведем пример сложной формы:
Фрагмент анкеты
Здравствуйте!
Рад Вас приветствовать на моей странице!
Я и мои коллеги проводим исследования в области использования интернет - технологий в повседневной жизни людей.
Если Вы хотите принять участие в дискуссии, то заполните предложенную Вам анкету. По указанному Вами адресу мы сообщим о времени проведения данной дискуссии.
Начало формы
Ваше имя:
Ваш адрес (E-mail):
1. Как часто Вы пользуетесь интернетом?
Менее 2 часов в неделю
От 5 до 10 часов в неделю
Более 10 часов в неделю
2. Используете ли Вы интернет на работе?
Да
Нет
3. Есть ли у Вас дома Интернет?
Да
Нет
4. Какого рода информацию Вы "ищите" по интернету?
Непосредственно по своей работе
Связанное с искусством
Развлечения
По хозяйству (например, рецепты)
Свой вариант ответа:
5. Какой поисковой системой Вы пользуетесь?
6. Ваши комментарии, вопросы, пожелания:
Конец формы
Теперь рассмотрим, как был создан приведенный пример. Рассмотрим, из каких новых тегов состоит данная форма.
1 - <FORM> ... </FORM>
Внутри данных тегов следует расположить указания о способе пересылки Вам этой формы. Рекомендуется использовать для пересылки электронную почту. Для этого надо вставить в теги два параметра: METHOD=POST и ACTION="mailto: Ваш адрес в системе электронной почты". Это будет выглядеть следующим образом:
<form method=post action="mailto:luda_wnykowa@mail.ru">
2- <INPUT NAME=" ">
В форму вводятся определенные данные, поэтому надо указать, что именно надо вводить. Для этого надо вставить в страницу какой - то текст. Затем для указания поля ввода используется тег <INPUT NAME=" " >, а для определения каждого блока информации задается его название и размер строки ввода. Так, например, для определения поля ввода для имени с длиной 40 букв Вы бы написали:
<input name="name1" size=40>
3- Передача формы <INPUT TYPE=" ">
Заключительное действие посетителя Вашей странички - пересылка Вам формы. С помощью тега <INPUT TYPE=" " > можно указать - надо ли переслать форму (TYPE="submit") или очистить и начать заполнение сначала (TYPE="reset"). Броузер предоставляет замечательную возможность: если использовать параметр VALUE=" " с текстом между кавычками, браузер создаст кнопку для пользователя с подписью таким образом, чтобы создать кнопку для передачи формы, тег должен иметь примерно такой вид:
<input type="submit" value="передать данную форму">
В блокноте данная анкета представлена следующим образом:
<center>
<font color="#800080" size=5>Здраствуйте!
<p align=justify>Рад Вас приветствовать на моей странице!</font>
<p align=justify>Я и мои коллеги проводим исследования в области использования интернет-технологий в повседневной жизни людей.
</center>
<p align=justify>Если Вы хотите принять участие в дискуссии, то заполните предложенную Вам анкету. По указанному Вами адресу мы сообщим о времени проведения данной дискуссии.
<form method=post action="mailto:luda_wnykowa@mail.ru">
<p align=justify>Ваше имя:<input name="naz" size=40>
<p align=justify>Ваш адрес (E-mail):<input name="email" size=25>
<p align=justify>1. Как часто Вы пользуетесь интернетом?
<p align=justify><input name="2z" type="checkbox">Менее 2 часов в неделю
<p align=justify><input name="3z" type="checkbox">От 5 до 10 часов в неделю
<p align=justify><input name="4z" type="checkbox">Более 10 часов в неделю
<br>
<p align=justify>2. Используете ли Вы интернет на работе?
<p align=justify><input name="1r" type="radio">Да
<p align=justify><input name="2r" type="radio">Нет
<br>
<p align=justify>3. Есть ли у Вас дома Интернет?
<p align=justify><input name="1i" type="radio">Да
<p align=justify><input name="2i" type="radio">Нет
<p align=justify>4. Кокого рода информацию Вы "ищите" по интернету?
<p align=justify><input name="2k" type="checkbox"> Непосредственно по своей работе
<p align=justify><input name="3k" type="checkbox"> Связанное с искусством
<p align=justify><input name="4k" type="checkbox"> Развлечения
<p align=justify><input name="5k" type="checkbox"> По хозяйству (например, рецепты)
<p align=justify>Свой вариант ответа:
<textarea name="text01" rows=1 cols=40></textarea>
<br>
<p align=justify>5. Какой поисковой системой Вы пользуетесь?
<textarea name="text02" rows=1 cols=40></textarea>
<br>
<p align=justify>6. Ваши комментарии, вопросы, пожелания:
<p align=justify><textarea name="text03" rows=6. cols=40></textarea>
<br><br><br><br><br><center>
<input type="submit" value="переслать форму">
<input type="reset" value="очистить форму">
</center>
</form>
Подчеркнуто начало и окончание формы.
Планирование разработки Web-сайта
Внешнее оформление Web-узла имеет немаловажное значение для его посещаемости. Если вы обладаете чувством вкуса, то вы вполне можете ему довериться и оформлять страницу самостоятельно. В том случае, если вы считаете, что дизайнер из вас не получится, то в оформлении Web-узла положитесь на программу, предлагающую такое средство, как Темы, и на профессиональных дизайнеров фирмы Microsoft, их разработавших
Чтобы сделать свой сайт эффективным, необходимо:
визуализировать поток информации и пути, выбираемые пользователем.
Четко сформулировать назначение вашего сайта. Информация какого типа должна быть размещена в создаваемом Web-узле. Это может быть информация о вашей компании и выпускаемой ею продукции и предлагаемых услугах, реклама того или иного вида товара или просто личная страница, из которой вы хотите переходить на ваши любимые страницы в Интернете.
Обязательно продумать аудиторию своего сайта. Кто будет основной (и вторичной) аудиторией вашего сайта? Какого они возраста? Чем они занимаются? Сколько времени они проводят на вашем сайте? В отношении каждой порции информации, каждой картинки и каждой детали спросите себя, как отреагирует на это ваша аудитория.
Постарайтесь заранее показать план и содержание вашего сайта как можно большему количеству людей, особенно потенциальным членам вашей аудитории.
Начните работу с главной страницы и идите вглубь. Это визуальное представление поможет вам "увидеть" содержимое вашего сайта, более ясно организовать его и избежать глобальных изменений при модификации сайта.
Наиболее важная информация, которую вы хотите донести до посетителя и ради которой Web-узел фактически создается, должна быть наиболее доступна и находиться на верхних уровнях вложенности Web-узла. Глубоко должна быть размещена информация, необходимость в которой может и не возникнуть.
Используйте быстро загружаемые элементы. Причина номер один, почему люди быстро уходят с сайта (или не посещают его вовсе) -- слишком долгая загрузка информации. Большой объем графических файлов вызывает желание как-то повлиять на ход событий, и самое простое -- это нажать на кнопку Stop, остановив загрузку.
Сделайте ваш сайт визуально привлекательным. Вы, несомненно, видели в Internet немало скучных сайтов. Что же делает их неинтересными? Возможно, недостаток цвета и разнообразия текста, заголовков. Создавая свой собственный сайт, помните, что продуманное форматирование страниц приблизит вас еще на один шаг к заветной цели.
Не пытайтесь разместить все на одной странице.
Будьте внимательны, не перегружайте свои страницы слишком большим количеством информации.
Постарайтесь установить равновесие между текстовой и изобразительной информацией. Думайте о тех, кто будет читать ваши страницы; думайте о том, как трудно воспринимается большое количество текста на экране компьютера, и наполняйте ваши страницы содержимым в соответствии с этим. Попробуйте добавить пустое пространство, увеличивая поля страницы, или использовать табличное размещение текста. Размещая на страницах графику, имейте в виду ее реальное значение: служит ли она основной цели, или работает только как украшение? Но при этом не забывайте, что иногда красивая графика сама по себе может быть целью. В идеале каждый Web-сайт должен хорошо выглядеть, содержать полезную информацию и быть удобным для просмотра.
Разумно организуйте содержимое. Если у вас есть информация, которую, как вы считаете, ваши посетители должны увидеть, не прячьте ее вглубь сайта. Сделайте важную информацию настолько легко доступной, насколько это возможно. Не забывайте, что ваш сайт будет иметь, по всей видимости, не один уровень вложенности. Вторичный материал упорядочивайте по группам взаимосвязанной информации. Предположим, например, что вы создаете интерактивный каталог музыкального магазина. Вы бы поместили в один список и джазовые компакт-диски, и записи рок-групп? Разумеется, нет. Это, конечно, очень простой пример, его смысл в том, что, рассматривая всю вашу информацию в терминах соответствующих категорий, вы намного лучше сможете организовать свой сайт.
Предусмотрите на сайге кнопки навигации. Большинство разработчиков используют кнопки, адресующие к различным разделам сайта. Эти кнопки, как правило, присутствуют на всех страницах сайта и обычно расположены плотной группой в одном и том же месте страницы. Единообразие и компактность их расположения существенно упрощают просмотр вашего сайта. Пользователю достаточно просто нажать кнопку, чтобы перейти в другой раздел сайта.
Ниже перечислены некоторые рекомендации, касающиеся планирования кнопок навигации:
Обязательно должна быть кнопка, с помощью которой пользователи могли бы вернуться обратно к начальной странице. Если ваш пользователь забрался на пять уровней вглубь, то надо предоставить ему возможность одним нажатием кнопки вернуться на первую страницу. А если он увязнет, нажимая кнопку Back в своем браузере, то, скорее всего, он очень быстро уйдет с вашего сайта и больше никогда не вернется. Другими словами, не полагайтесь на навигационные способности браузера пользователя, обязательно добавьте эти возможности на свой сайт.
Будьте готовы к тому, что у некоторых посетителей вашего сайта отключен просмотр графики в браузере. Очень полезно наряду с графическими кнопками навигации иметь и их текстовую версию. Тем самым для просмотра вашего сайта пользователь сможет выбрать удобный для него вариант. Не сомневайтесь: пройдет еще немало времени, пока на Web-страницах останутся только графические кнопки.
Итак, постарайтесь максимально упростить перемещение по вашему сайту. Разрабатывая сайт, спросите себя, между какими точками следует навести мосты. От ответа на этот вопрос во многом будет зависеть, насколько легким и увлекательным будет путешествие по вашему сайту.
Тщательно протестируйте свой сайт. Существует целый ряд различных браузеров, и в каждом из них ваш сайт может выглядеть по-разному. Проверьте работу вашего сайта, используя как можно больше различных браузеров, при этом на различных платформах. Нередко кнопка навигации, помещенная вами в угол страницы, в каком-нибудь браузере оказывается посреди окна; такие вещи случаются сплошь и рядом. Опытные Web-дизайнеры проверяют в своих сайтах каждую страницу и каждую ссылку в нескольких различных браузерах. Все связи внутри вашего сайта вы сможете легко проверить с помощью команды Verify Hyperlinks (Проверить гиперссылки) или протокола состояния гиперссылок (Hyperlink Status View) Проводника.
Другой хороший способ проверки вашего сайта -- это операция Preview In Browser (Предварительный просмотр в браузере) в Редакторе. Она позволит вам визуально исследовать вашу страницу в любом браузере, установленном на вашем компьютере и при различных размерах окна. Например, если вы обычно работаете в разрешении 1024х768, то вы сможете воочию посмотреть, как ваша страница будет выглядеть в разрешении 640х480. Если вы хорошо относитесь к своей аудитории, то предоставьте посетителям возможность легко находить информацию на вашем сайте.
Примечание. Разработав структуру создаваемого Web-узла, ознакомьтесь с мнением хотя бы нескольких предполагаемых посетителей или коллег по работе. На данном шаге вам будет значительно легче скорректировать свою работу и не потратить время впустую.
5.1 Разработка структуры страниц
Прежде чем переходить непосредственно к созданию Web-узла, необходимо разработать структуру основных входящих в него страниц, чтобы пользователю легко было перемешаться между страницами различных уровней, а также, чтобы он в любой момент мог вернуться на домашнюю страницу.
Первая страница, на которой оказывается посетитель, называется домашней страницей. Она, несомненно, должна содержать заголовок, краткое описание разделов Web-узла, ссылки на разделы второго уровня иерархии в структуре, а также информацию об авторских правах и информацию для контактов, которую можно разместить в колонтитуле.
После того как вы определились с домашней страницей и размещаемой на ней информацией, необходимо перейти к разработке страниц второго уровня. Их количество должно определяться количеством основных разделов Web-узла. На этих страницах размещается наиболее важная информация, относящаяся к разделам, а также, если в них есть необходимость, ссылки на страницы третьего уровня иерархии.
На страницах третьего уровня размещается уточняющая информация к основным разделам Web-узла
5.2 Варианты представления информации на Web-страницах
При создании собственных Web-страниц используются разные способы представления информации.
Можно выделить 3 основных способа:
*сайт, состоящий из одной странички,
* сайт, где для представления информации используются фреймы (кадры),
* сайт, где для представления информации используется табличный способ.
5.2.1 Сайт, состоящий из одной странички
Вся идея создания сайта, используя этот способ представления информации, сводится к тому, что в начале страницы располагается оглавление материала, который и представлен на самой странице.
Далее из каждого пункта меню делается ссылка на то место, где собственно и размещен материал (на рисунке это черная, синяя и зеленая стрелки), согласно выбранному пункту в меню.
Рис.1. Пример сайта из одной страницы
Само собой понятно, что, прочитав любой интересующий вас материал, вам просто необходимо будет опять вернуться к оглавлению.
Именно поэтому после каждого отрезка материала стоит кнопка Вверх, которая и возвращает вас к оглавлению (синяя пунктирная стрелка на рис. 1).
5.2.2 Сайт, созданный на основе фреймов (кадров)
Техника использования фреймов заключается в том, что все окно браузера делится на несколько областей, в каждую из которых можно загрузить независимую страничку. Кроме этого, был введен механизм, позволяющий управлять любой страничкой из любого окна. Например, можно в одном окне организовать меню сайта, а в другом показывать его содержимое. Причем, щелчок по ссылке в окне меню открывал страничку совсем в другом окне. Такое построение сайта встречается чаще всего, но ничто не мешает нам сделать не два фрейма, а, например, 3, 4, 5... окон и разместить там логотипы (верхний и нижний)...
Основные недостатки сайта, построенного с применением фреймов, следующие:
странички сайта не индексируются обычными поисковыми системами, исключая первую страницу
в случае попадания не на первую страничку сайта не существует явного способа перейти на уровень выше -- приходится вручную редактировать путь в адресной строке браузера
невозможно поставить закладку на внутреннюю страничку сайта. проблемы отображения странички в разных версиях браузеров.
многие браузеры не могут правильно распечатать страницу с фреймами. Но, как правило, страницы, созданные с применением табличного способа отображения информации, печатаются довольно-таки приемлемо.
дизайнерские -- так как экран браузера поделен на несколько независимых окон, то при уменьшении размеров окна, в котором просматривается сайт, приводит к появлению нежелательных полос прокруток в каждом из отдельных окон.
фреймы -- как нарушители авторских прав. Как это? Очень просто -- это когда содержимое чужих сайтов отображается в вашем фрейме. Посетители считают, что находятся на вашем сайте, а сами с удовольствием (или без него?) смотрят совершенно другой сайт.
В каких случаях уместно применять фреймы?
В целях экономии в объеме пересылаемых пользователю файлов (так как при переходе по какой-либо ссылке изменяется содержимое только одного фрейма);
если нужно, чтобы часть странички (чаще всего логотип или меню) всегда находились перед глазами;
в случае, если стоит задача быстро создать сайт и все странички уже написаны, а ни времени, ни желания их переделывать нет;
для дизайнерских изысков.
Но есть один удачный способ применения фреймов -- создание электронных библиотек -- когда в одном фрейме располагается все оглавление книги, а в другом -- содержание, согласно выбранному пункту в оглавлении. Само оглавление построено по принципу распахивания всех глав и внешне напоминает привычный принцип работы в Проводнике Microsoft Windows.
Фрагмент сайта, разработанного на основе фреймов, показан на Рис.2.
Рис. 2. Пример сайта на основе фреймов
5.2.3 Сайт, где для компоновки информации использованы таблицы
В html предусмотрено очень мало возможностей для точного описания Web-страницы: абзац, например, может быть выровнен по левому, правому краю окна браузера, или по центру (и ничего более); при выравнивании объектов (например, рисунков) по правому или левому краю текст (в соответствии с исходными правилами html) должен обтекать такие объекты. А если надо создать нечто типа: текст -- изображение -- текст? Вот тут-то и приходят на помощь таблицы.
Таблицы позволяют разбивать страницу на отдельные области, в которых будут находиться элементы. Рамки вокруг ячеек таблиц html могут быть как видимыми, так и невидимыми. Если таблица используется для компоновки страницы, конечно, предпочтительнее использовать невидимые границы, однако, иногда получаются интересные решения, если для различных ячеек вы используете разные заливки.
Рис.3. Структура Web-узла на основе таблиц
Как правило, постоянные элементы дизайна (логотип, меню...) размещаются в отдельные ячейки (а иногда и таблицы). При просмотре Web-страницы первый раз они кэшируются, при переходе на другую страницу с таким же дизайном, выводятся на экран пользователя в считанные доли секунды, создавая впечатление, будто бы меняется только область, отведенная под основное содержание.
Например, с помощью таблиц можно разместить несколько фрагментов текста так, как нам нужно. И это вполне могут быть основной текст и комментарии к нему
Как видите, используя таблицу, можно разделить текст на несколько фрагментов и поместить рядом соответствующие примечания. Мы можем сделать линии между фрагментами невидимыми, так что посетитель нашего сайта и не заметит, что для форматирования этого текста использовались таблицы.
Приведем еще один пример. Предположим, мы разрабатываем интернет-магазин. Нам нужно поместить на страницу название, описание, цену и фотографию товара.
Основной принцип табличного дизайна : весь текст и вся графика помещаются в ячейки таблицы, что позволяет делать с ними все, что угодно. Как правило, такие таблицы имеют невидимые границы, а линейки создаются с помощью очень тонких ячеек с фоновым заполнением. Таблицы разметки очень сложны, используют различное форматирование и многократное объединение ячеек и практически всегда -- вложенные таблицы.
Схемы табличного дизайна web сайт страница звук
Классическая схема табличного дизайна, выдержавшая проверку временем, показана на рис. 6. Ничего лишнего -- только то, что действительно нужно. Иногда, правда, полосу навигации помещают справа -- это выглядит необычно и довольно удобно.
Часто на первую страницу в отдельной колонке помещают еще и новости сайта . Но это стоит делать только тогда, когда сайт часто обновляется, и посетителям нужно знать об этих обновлениях. Впрочем, сейчас все более-менее значимые сайты имеют колонку или раздел новостей.
Как правило, на главной странице помещаются только "свежие" новости (за определенный период), а устаревшие располагают на специальной странице архива новостей. Ссылка на эту страницу размещается внизу или, реже, наверху колонки новостей. А сами новости и в колонке на главной странице, и на странице архива перечисляются в обратном порядке: от самых "свежих" до самых "старых".
Новостные сайты имеют самый сложный дизайн (рис. 10). Состоящие из множества пестрых колонок Web-страницы сразу привлекают внимание посетителей.
Не менее, а иной раз и более пестрый дизайн имеют музыкальные сайты. Порядок следования колонок может меняться, но, в целом, основные элементы главной страницы перечислены полностью.
Надо сказать, что описанные выше схемы применяются, как правило, к главной странице сайта. Остальные страницы, поскольку они всегда значительно проще начальной, строятся по простейшим, проверенным схемам
На многих главных страницах, построенных с применением табличного дизайна, помещаются составные изображения. Они играют роль либо красивого графического заголовка сайта, либо полосы навигации, либо и того и другого. Нередко организуется отдельная колонка или ячейка таблицы разметки, предназначенная для рекламных баннеров, аналогично специальным "рекламным" фреймам.
Задание
На своем сайте создать гостевую анкету с возможностью отправки ее по почте.
Вставить на главную страницу музыкальный фрагмент.
Вставить на главную страницу видеофрагмент.
Вставить на главную страницу бегущую строку (материал по этому разделу изучить самостоятельно).
Доработать сайт с учетом рекомендаций по дизайну.
Размещено на Allbest.ru
...Подобные документы
Рассмотрение основных этапов создания сайта. Использование вайрфреймов как документации по проекту. Использование мокапа и структура навигации сайта. Правильный выбор цветов для проекта. Использование модульной сетки и разработка дизайна сайта.
презентация [2,8 M], добавлен 01.09.2019Порядок разработки информационной системы "Архив online-видео" для скачивания и добавления файлов, его структура и основные компоненты. Методика регистрации на сайте, просмотра, добавления и скачивания видео. Программирование администрирования сайта.
курсовая работа [1,9 M], добавлен 04.06.2009Этапы развития веб-дизайна. Виды и типы веб-сайтов, теоретические аспекты их создания. Структура веб-сайта и его страниц. Процесс и результат разработки веб-дизайна. Создание сайта факультета архитектуры и дизайна Кубанского государственного университета.
дипломная работа [4,6 M], добавлен 10.11.2015История веб-дизайна и сайтов. Пример раннего сайта Angelfire. Популярные браузеры, цветовая модель RGB. Структура корпоративного сайта. Предпроектный анализ разрабатываемого веб-сайта. Основные блоки макета. Пример адаптивной верстки. Макет в Photoshop.
дипломная работа [8,0 M], добавлен 10.10.2015Выбор сред разработки для реализации сайта. Основная концепция и содержание веб-сайта. Роль дизайна сайта в его создании и определение основных требований к его содержанию и внешнему виду. Особенности разработки удобного и красивого интерфейса сайта.
курсовая работа [686,4 K], добавлен 13.06.2022Выбор инструментальных и программных средств для создания сайта. Структура программного продукта. Создание сайта при помощи программы WordPress. Тестирование разработанной программы. Разработка структуры и дизайна сайта. Наполнение сайта контентом.
курсовая работа [1,0 M], добавлен 09.01.2014Возможные варианты веб-сайты вегетарианских ресторанов. Изучение особенности дизайна корпоративных сайтов вегетарианских ресторанов на примере других сайтов. Создание дизайн-макета сайта в программе Adobe Photoshop. Готовый макет корпоративного сайта.
курсовая работа [1,7 M], добавлен 11.06.2015Анализ сайта по детской психологии "Детская психология, воспитание детей". Форма представления информации на сайте, осуществление навигации. Список часто обсуждаемых вопросов. Основные категории психологических тестов. Особенности дизайна сайта.
реферат [16,3 K], добавлен 10.06.2011Основные понятия цифрового фото и видео. Достоинства и недостатки графических редакторов. Анализ школьных учебников по информатике по изучению работы с цифровым фото и видео. Анализ методических разработок. Планирование кружка "Компьютерная графика".
курсовая работа [52,1 K], добавлен 16.07.2013Проектирование сайта учителя в системе Ucoz с учетом особенностей педагогической деятельности. Обновление и пополнение содержимого сайта. Регистрация пользователей. Настройка дизайна и выбор модулей для сайта. Создание меню и наполнение сайта контентом.
курсовая работа [2,1 M], добавлен 14.06.2014Наиболее распространенные программы. Внешний вид и программирование сайта. Система управления контентом и веб-контентом. Хранение и публикация большого количества документов, изображений, музыки или видео. Инструменты хранения и публикации информации.
презентация [481,3 K], добавлен 19.08.2013Сбор и обработка информации, касающейся военной техники войск противовоздушной и противоракетной обороны. Информационное содержание, дизайн и общий объем сайта. Цвет в системе графического имиджа. Тестирование сайта и основные возможности хостинга.
курсовая работа [32,9 K], добавлен 30.05.2013Цели, функции, аудитория web-сайта. Основные разделы web-сайта, его логическая и физическая структуры. Веб-дизайн - это вид графического дизайна, направленный на разработку и оформление интернет-сайтов, отличающийся оригинальностью технических решений.
реферат [503,5 K], добавлен 30.06.2014Понятие Internet как глобальной мировой системы передачи информации. Анализ системы World Wide Web, ее особенности. Рассмотрение главных целей сайта, создание сайта для магазина продуктов питания. Этапы разработки дизайна сайта и создание базы данных.
курсовая работа [2,1 M], добавлен 13.07.2012Изучение различных систем управления содержимым, обеспечивающих доступ к информации в сети Интернет и удобное редактирование сайта. Разработка информационной структуры, дизайна и информационное наполнение web-сайта по теме "Экстремальные виды спорта".
дипломная работа [2,6 M], добавлен 15.05.2012Ознакомление с современными Интернет-технологиями и использование их в своей разработке. Изучение основных программ, применяемых для разработки и создания Web-сайта. Инструментальные средства. Информационная структура, дизайн и шаблон web-сайта.
контрольная работа [1,0 M], добавлен 15.02.2017Разработка общей структуры проектируемого сайта. Выбор программных и аппаратных средств для реализации поставленной задачи. Описание дизайна будущего сайта. Рассмотрение основ регистрации, правил построения программной и эксплуатационной документации.
курсовая работа [5,3 M], добавлен 31.07.2014Исследование принципов работы, технологии и стандартов IP–телефонии, оценка качества телефонной связи и сжатия речи. Анализ планирования структуры сайта, разработки дизайна, верстки макета. Характеристика регистрации доменного имени и хостинга сайта.
курсовая работа [52,7 K], добавлен 23.12.2011Создание официального сайта КРОО ПСЗЗ "Красштаб Здоровья". Основные требования к дизайну, интерфейсу и функциональности сайта. Состав технических средств, защита информации. Описание входной и выходной информации. Расчет себестоимости разработки.
дипломная работа [1,4 M], добавлен 11.05.2017Общее описание разрабатываемого веб-сайта. Создание модуля учета средств для разработки программного продукта. Разработка дизайна. Редактирование веб-сайта в CMS Worspress. Разработка методических указаний для продукта. Система управления базами данных.
дипломная работа [1,8 M], добавлен 10.07.2017
