Добавлен: 28.03.2023
Просмотров: 208
Скачиваний: 2
СОДЕРЖАНИЕ
1.1 Понятие сети Internet. Классификация сервисов Internet
1.2 Понятие, цели и задачи WEB-сайтов. Классификация WEB-сайтов
1.3 Этапы проектирования WEB-сайтов
2.2 Разработка контента и оформление WEB-сайта
2.3 Теги для структурирования и форматирования текста
2.4 Теги для работы с графикой в HTML - документе
2.5 Разработка и настройка системы гиперссылок
Уменьшение глубины цвета html изображения. Как же еще можно уменьшить размер графического файла? Если воспроизводится рисунок, содержащий не очень много различных оттенков цветов, то можно уменьшить глубину цвета. Что это значит. Формат GIF поддерживает палитру 256 цветов. Если будете преобразовывать в этот формат картинку, содержащую более 256 цветов, то похожие цвета будут подменяться "средним" цветом. А вот если преобразовывать в этот формат рисунок, с небольшой палитрой цветов, то может оказаться, что в изображении используется менее 256 цветов т.е. вместо 256 можно использовать 2 цвета, что существенно сократит объем файла). Таким образом, можно просто "выбросить" ненужные цвета. Следует заметить, что не стоит уменьшать глубину цвета изображения в формате JPEG, т.к. в этом случае мы добьемся обратного эффекта - сокращение палитры приведет к росту файла изображения. Чтобы уменьшить глубину цвета изображения можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.
Прозрачность фона html изображения. Формат GIF позволяет установить прозрачный фон изображения. Иногда это бывает очень полезно, т.к. стираются границы между изображением и текстом страницы. Чтобы установить прозрачный фон изображения можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. Надо отметить, тот факт, что для создания прозрачного фона, картинка должна обладать однородным фоном. Если это не так, то, с помощью графического редактора надо добиться однородности фона.
Чередующиеся html изображения GIF. Формат GIF обладает еще одним полезным свойством - он поддерживает режим чередования изображения при его загрузке. Что это такое? Изображения, не поддерживающие режим чередования, передаются строка за строкой, от верха к низу, и пользователь, прежде чем увидеть полное изображение на экране, должны ждать окончания процесса пересылки. При передаче чередующегося изображения его строки поступают через одну. Таким образом, пользователь видит сначала размытое изображение, которое постепенно обретает резкость. Свойство чередования очень полезно для загрузки больших изображений и страниц с перенасыщенной графикой. Чтобы снабдить изображение свойством чередования надо воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.
2.5 Разработка и настройка системы гиперссылок
Гиперссылка на другую html страницу. Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы. Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы. Для создания гиперссылки служит дескриптор <A>.
Гиперссылка в пределах html страницы. Иногда необходимо сделать гиперссылку в пределах одной страницы. Например, на этой странице это гиперссылки в начале занятия, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы. Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга <A>. Имя должно содержать только буквы и цифры. Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта.
Почтовая гиперссылка. Создавая ссылку на адрес электронной почты, вы должны указать адрес e-mail. Следует позаботиться о том, чтобы пользователю было ясно, кому он собирается отослать сообщение. При создании почтовой гиперссылки можно указывать дополнительный адрес, по которому будет отправлена копия сообщения. Также в такой гиперссылке можно указывать тему отправляемого сообщения.
Открытие html страниц в новом окне. При помощи атрибута TARGET можно загрузить страницу в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Чтобы открыть страницу в новом окне надо использовать константу _blank.
Цвет текста гиперссылок. Атрибуты LINK, ALINK, VLINK задают цвет шрифта гиперссылок. Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем. Атрибут VLINK - уже посещенные ссылки. Атрибут ALINK - выделяет активную гиперссылку.
Порядок перехода по гиперссылкам. Некоторые браузеры могут поддерживать функцию перехода по гиперссылкам с помощью клавиши Tab. При этом браузер по умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. Изменить порядок перехода можно с помощью атрибута TABINDEX тэга <A>. Чтобы включить гиперссылку в перечень, описывающий новый порядок перехода, надо присвоить атрибуту TABINDEX некоторое целое положительное число в диапазоне от 1 до 32767. Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. Когда пользователь нажимает клавишу TAB, курсор перемещается к гиперссылке с наименьшим положительным значением индекса. Если нескольким гиперссылкам присвоено одинаковое значение индекса, первой выбранной окажется та, которая в тексте страницы стоит выше. Следует сказать, что атрибутом TABINDEX можно пользоваться для выбора других объектов, например, графических изображений.
2.6 Тестирование и продвижение WEB-сайта.
Продвижение собственной страницы является обязательным условием для успешной компании, поскольку этот аспект давно уже стал привычным маркетинговым ходом в борьбе за потребителя. На сегодняшний день множество фирм и web-студий предлагает качественные услуги продвижения. Большинство предпринимателей, которым ничего не говорят слова «seo-оптимизация» или «контекстная реклама», предпочитают доверить свой сайт профессионалам, поскольку этот вариант кажется наиболее простым и безопасным.
Однако, это не совсем так. Чтобы не натолкнуться на мошенников и обманщиков, предъявляемую вам работу лучше оценить весьма взыскательно. Куда смотреть и на что обращать внимание? Об этом мы и попробуем вкратце рассказать. Итак, что входит в тестирование и продвижение web-сайта?
Первое, что бросается в глаза, и чему стоит уделить самое пристальное внимание, это главная страница. Именно она призвана не только привлечь посетителя, но и с первого взгляда заинтересовать его, заставить углубиться дальше. Вместе с тем она не должна быть перегружена информацией, ибо это чревато медленной загрузкой, а значит и потерянными посетителями.
Как бы ни была важна первая страница, наполнение сайта также не стоит сбрасывать со счетов. Контент, которым будет наполнен новый ресурс, должен быть непременно свежим, актуальным и увлекательным. Большим плюсом станет также его регулярная обновляемость. Чем больше интересной и оригинальной информации удастся найти, тем лучше. По оценкам экспертов по-настоящему качественное наполнение должно занимать примерно 1000 страниц.
Третьим ключевым параметром является выбор поисковой системы, в которой будет происходить продвижение. Этот пункт имеет большое значение, так как от него зависит вся последующая маркетинговая стратегия. На сегодня самыми востребованными поисковиками продолжают оставаться Google и Yandex, каждый из которых использует собственные механизмы индексации. При желании активная компания по завоеванию высоких позиций может вестись в обеих системах одновременно.
И наконец, рекламные баннеры. Вряд ли какой-либо коммерческий сайт может отказаться от них полностью. Однако, перед введением в эксплуатацию стоит убедиться, что все ссылки находятся в рабочем состоянии, а сами баннеры не выходят за рамки приличий. Стоит обратить внимание, что не всем нравится реклама на сайтах, ведь иногда ее так много, что, человек обращает внимание на рекламу, а не на сам сайт, этого можно избежать. Размещать рекламу соответствующую контенту и тематике сайта.
Также стоит иногда проводить разного рода «голосование» на сайте. «Устраивает ли Вас наш дизайн сайта», «что бы Вы хотели увидеть», «как Вы нас нашли»… задавая такие вопросы на собственном сайте, можно понять, что хочет видеть конечный пользователь сайта, от чего стоит отказаться или же наоборот добавить. Это очень полезная функция, от которой не стоит отказываться, возможно именно наш сайт, а не конкурента окажется в top100.
Так же есть множество «счетчиков», так называемый счетчик, простоя скрипт-программа, которая есть в бесплатном варианте на современных поисковиках Yandex, Google. Эти счетчики показывают количество посещений сайта, время, проведенное на Вашем сайте.
ЗАКЛЮЧЕНИЕ
Данная курсовая работа содержит теоретические и практические основы разработки, проектировки, написания web-сайта. Описаны цели, задачи сайта.
В данной работе я использовал язык программирования Web-страниц HTML, каскадные таблицы стилей CSS, Java script.
Мой сайт содержит:
1) 10 страниц, 7 разделов, имеется вложенность равная трём;
2) быстро просматривается в современных браузерах;
3) создана карта сайта;
4) все страницы сайта наполнены осмысленной информацией.
Эти условия удовлетворяют требованиям к данной курсовой работе.
WEB сайт, нужен не только для отображения конкретной информации, также он служит для рекламы компании или фирмы, своего рода PR инструмент, позволяющий показать имидж компании или фирмы.
Соблюдая все эти правила и рекомендации - получаем уникальный продукт, удовлетворяющий потребности «широкого круга пользователей».
В данном приложении, приведен код HTML страниц WEB сайта кинотеатр, здесь представлены основные страницы сайта, страниц более шести, остальные выполнены в схожем стиле.
Index.html (Главная страница)
<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="1/style.css" type="text/css" media="screen, projection, tv" />
<link rel="stylesheet" href="1/style-print.css" type="text/css" media="print" />
</head>
<body>
<div id="main">
<!-- Header -->
<div id="header">
<div id="header-in">
<ul id="navigation">
</ul>
<h1><center><br>Кинотеатр "Дружба"</left></a></h1>
<!-- Your website name end -->
<!-- Your slogan -->
<h2><center></center></h2>
<!-- Your slogan end -->
</div>
</div>
<!-- Header end -->
<!-- Menu -->
<div id="menu-box" >
<a href="#skip-menu" >Меню</a>
<ul id="menu">
<li ><a href="index.html" >Главная</a></li>
<li><ahref="2.html"title="Сейчас в кинотеатре">Репертуар</a></li>
<li><ahref="3.html"title="Расписание сеансов">Расписание сеансов</a></li>
<li><ahref="4.html"title="Цена на билеты">Цены</a></li>
<li><ahref="5.html"title="ПрокатDVD">ПрокатDVD</a></li>
<li><ahref="6.html"title="Карта сайта">Карта сайта</a></li>
</ul>
</div>
<!-- Menu end -->
<hr />
<div id="skip-menu"></div>
<div id="content">
<!-- Content box with white background and gray border -->
<div id="content-box">
<!-- Left column -->
<div id="content-box-in-left">
<div id="content-box-in-left-in">
<h3>ГЛАВНАЯ</h3>
<br>
<center> <h3> Добро Пожаловать!</h3>
<img src="img/100.jpg" with=200 height=200>
</div>
</div>
<!-- Left column end -->
<hr />
<!-- Right column -->
<div id="content-box-in-right">
<div id="content-box-in-right-in">
<h3>Действующие скидки</h3>
<dl>
<dd>
Цена билета:<br>
обычный формат: до 17.00 — 50 руб., после 17.00 — 80 руб.<br>
формат 3D: до 17.00 — 110 руб., после 17.00 — 140 руб.<br><br>
действует в: <br>
1. День пенсионера — понедельник — (по пенсионному удостоверению)<br>
2. День студента — вторник (по студенческому билету) <br>
3. День «Дружбы» — среда (владельцам дисконтных карт, 1 карта = 1 билет) <br>
4. В свой день рождения — 2 билета по цене одного (по ксерокопии паспорта) <br>
5. Детям (фильмы для любой аудитории) цена билета до 17.00: <br>
обычный формат: пн-пт — 50 руб., сб-вс — 80 руб. <br>
формат 3D: пн-пт — 110 руб., сб-вс — 140 руб. <br>
Стоимость дисконтной карты — 100 рублей.<br>
</dd>
</div>
<div > </div>
<!-- Right column end -->
</div>
<!-- Content box with white background and gray border end -->
</div>
<hr />
!-- Footer -->
<div id="footer">
<div id="footer-in">
</div>
</div>
<!-- Footer end -->
</div>
</body>
</html>
Page1.html (Показываем сегодня)
<html
<head>
<!-- CSS -->
<link rel="stylesheet" href="1/style.css" type="text/css" media="screen, projection, tv" />
<link rel="stylesheet" href="1/style-print.css" type="text/css" media="print" />
</head>
<body>
<div id="main">
<!-- Header -->
<div id="header">
<div id="header-in">
<ul id="navigation">
</ul>
<h1><center><br>Кинотеатр "Дружба"</left></a></h1>
<!-- Your website name end -->
<!-- Your slogan -->
<h2><center></center></h2>
<!-- Your slogan end -->
</div>
</div>
<!-- Header end -->
<!-- Menu -->
<div id="menu-box" >
<a href="#skip-menu" >Меню</a>
<ul id="menu">
<li ><a href="index.html" >Главная</a></li>
<li><a href="2.html"title="Сейчас в кинотеатре">Репертуар</a></li>