Размещено на http://www.allbest.ru/

КУРСОВАЯ РАБОТА

Создание сайта-визитки предприятия ООО "Фаст Студия"

Оглавление

• Введение
• 1. Теоретические сведения
• 2. Структура сайта
• 3. Краткое содержание страниц
• 3.1 Страница "ГЛАВНАЯ"
• 3.2 Страница "ПОРТФОЛИО"
• 3.3 Страница "КОНТАКТЫ"
• 4. Избранные страницы сайта
• 4.1 Страница "ГЛАВНАЯ"
• 4.2 Страница "О НАС"
• 4.3 Страница "КОНТАКТЫ"
• Заключение
• Библиографический список
• Приложение А
• Введение
• Темой данной курсовой работы является создание сайта-визитки предприятия ООО "Фаст Студия".
• Сайт должен нести сведения о компании, какие услуги предоставляет юридическим и физическим лицам, цены на услуги, информацию о сотрудниках и примеры работ.
• Для создания сайта была выбрана программа Adobe Dreamweaver CS6 --популярный WYSIWYG HTML-редактор от компании Adobe.
• Сайт -- в первую очередь набор технологических процессов (обычно именуемых веб-технологиями), накладывающий, с одной стороны, ограничения на формы информационного и эмоционального воздействия, с другой -- даю¬щий такое разнообразие подобных форм, какое принципиально недостижимо ни для устного, ни для печатного способа передачи информации.
• Другими словами, сайт -- это электронная публикация любого размера и содержания, доступная во Всемирной Сети Интернет, причем любой направленности, информационной или эмоциональной.
• Целью данной работы является изучение технологии построение Web-сайтов с помощью Adobe Dreamweaver CS6.
• Данная цель будет достигаться путем решения следующих задач:

1. Изучить теоретический материал по указанной теме;

2. Рассмотреть основные элементы Adobe Dreamweaver CS6;

3. Применить полученные знания при построении сайта;

4. Составить отчет по проделанной работе.

1. Теоретические сведения

Каждый человек решивший создать свой первый сайт встает перед выбором программных средств для достижения этой цели. Это может быть Microsoft Front Page, Web Builder, Incomedia WebSite или Adobe Dreamweaver.

Рассмотрим визуальный HTML-редактор Dreamweaver. Этот программный продукт рассчитан на тех, кто плохо, или почти не знает язык HTML, хотя в нем можно создавать сайты даже не обладая данными знаниями. Dreamweaver содержит все, что необходимо как для визуальной компоновки web-страниц, так и для работы с HTML-кодом. Интуитивный интерфейс Dreamweaver настолько прост, что даже начинающий дизайнер сможет быстро создать Web-сайт. Непосредственно в Dreamweaver можно создавать анимации в формате Macromedia Flash, использовать данные из Microsoft Office, легко импортировать rollover-графику, меню и кнопки из Fireworks.

Одна из последних версий HTML-редактора компании Adobe Dreamweaver CS6, который относится к категории WYSIWYG-редакторов (WYSIWYG или What You See Is What You Get - " что вижу, то и получаю ".), и этот пакет имеет очень много достоинств: удобный интерфейс, настройка множества функций, поддержка больших проектов, подсветку кода и многое другое. Для работы в этой программе не нужно досконально знать HTML.

Dreamweaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. Dreamweaver позволяет избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" вы можете записывать последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и Dreamweaver воспроизводит всё в той же последовательности.

Adobe Dreamweaver - профессиональный редактор HTML для визуального создания и управления сайтами различной сложности и страницами сети Internet. Dreamweaver включает в себя много инструментов и средств для редактирования и создания профессионального сайта: HTML, CSS, JavaScript, редакторы кода (просмотр кода и инспектор кода), что позволяет вам, редактировать различные текстовые документы, которые поддерживаются в DreamWeaver. Также вы можете настроить DreamWeaver, чтобы он наводил порядок и переформатировал HTML, как это необходимо.

Возможность визуального редактирования в DreamWeaver также позволяет быстро создавать или менять дизайн проекта без написания кода. DreamWeaver относится к так называемым "визуальным" редакторам, т.е. вы сразу можете видеть на экране (хотя бы приблизительно) результат своей работы. При этом он распространяет полный доступ к источнику кода и не вставляет в него ничего лишнего, как это делает, например, FrontPage. Таким образом, можно создавать свою страничку и параллельно изучать HTML, заглядывая в источник. Простота обращения с редактором DreamWeaver заключается в том, что возможно рассмотреть все централизованные элементы и перетащить их с удобной панели непосредственно в документ.

DreamWeaver полностью настраиваемый. Можно использовать DreamWeaver, чтобы создавать свои собственные объекты и команды, изменять "горячие" клавиши и расширять возможности DreamWeaver новыми свойствами, инспекторами свойств и новыми отчетами о сайте.

HTML (от англ. HyperText Markup Language -- "язык разметки гипертекста") -- стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989--1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов -- дескрипторов. Дескрипторы также часто называют "тегами". С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении. HTML -- теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками -- тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающемся теге.

HTML5 - язык для структурирования и представления содержимого для всемирной паутины. Это пятая версия HTML-стандарта и находится в стадии разработки. Основной её целью является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений.

JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript - это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScript обеспечило программирование на стороне клиента.

Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом перезагрузки страницы не происходит.

На практике это выражается в том, что можно, например, изменить цвет фона страницы или интегрированную в документ картинку, открыть новое окно или выдать предупреждение.

Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определенном месте и легко применяются к любому тегу. Еще одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML.

CSS представляет собой мощную систему, расширяющую возможности дизайна и верстки веб-страниц.

2. Структура сайта

С главной страницы сайта посредством ссылок можно перейти в любой раздел сайта. На главной странице для удобства указаны все ссылки на основные разделы.

Схема сайта изображена на рис. 2.1.

На схеме показано, что ГЛАВНАЯ страница является корнем этой иерархии. Однако, благодаря панели меню, можно попасть и на ГЛАВНУЮ страницу, и на страницы О НАС, УСЛУГИ, ПОРТФОЛИО, ЦЕНЫ и КОНТАКТЫ, находясь на любой другой странице.

Если зайти в раздел ПОРТФОЛИО, можно увидеть подразделы СВАДЬБЫ, ФИЛЬМЫ и КЛИПЫ. В них можно увидеть примеры работ выполненных компанией.

В разделе УСЛУГИ можно узнать об услугах, которые предоставляет компания, а так же просмотреть описание доступного для аренды и съемок оборудования со ссылками на страницы с более подробной информацией и характеристиками.

В разделе КОНТАКТЫ предоставлена информация о местоположении компании, режим работы и форма обратной связи.

Данные страницы являются подчиненными и каждая из них представляет собой отдельную веб-страницу.



Рисунок 2.1 - Структура сайта

3. Краткое содержание страниц

3.1 Страница "ГЛАВНАЯ"

Страница представляет собой HTML страницу, состоящую трех основных блоков, заключенных между дескрипторами <div></div>.

В верхнем блоке содержится два вложенных: логотип и строка меню. Меню содержит ссылки на основные разделы:

· Главная

· О нас

· Услуги

· Портфолио

· Цены

· Контакты

Средний блок несет наибольшую смысловую нагрузку, так как содержит область с основным содержимым и боковую панель с новостями, ссылками на полезные страницы и форму поиска по сайту.

Нижний блок повторяет содержимое строки меню и служит для быстрого доступа к соответствующим разделам сайта.

Изображение страницы показано на рис. 4.1.

3.2 Страница "ПОРТФОЛИО"

Страница "ПОРТФОЛИО" построена по аналогии со страницей "ГЛАВНАЯ" и имеет неизменные блоки с логотипом и меню, но другое содержимое центрального блока . На данной странице содержатся примеры видео работ созданных компанией ООО "Фаст Студия". Вместе с этим есть возможность пройти в соответствующий раздел и просмотреть интересующие видеозаписи выбранной тематики.

3.3 Страница "КОНТАКТЫ"

Страница содержит всю необходимую информацию для связи с компанией и определения ее местонахождения. Так же включен режим работы и форма обратной связи.

Для анимации увеличения изображения карты использовались средства JavaScript в частности подключаемая галерея LightGallery версии 1.3.

Изображение страницы показано на рис. 4.3.

4. Избранные страницы сайта

Были выбраны три страницы сайта: "ГЛАВНАЯ", "О НАС", "КОНТАКТЫ".

4.1 Страница "ГЛАВНАЯ"

<!DOCTYPE HTML>

<html>

<head>

<title>Fast Studio</title>

<meta name="description" content="website description" />

<meta name="keywords" content="website keywords, website keywords" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="style/style.css" />

<link href="style/film.ico" rel="shortcut icon" type="image/x-icon">

</head>

<body>

<div id="main">

<div id="header">

<div id="logo">

<div id="logo_text">

<h1><a href="index.html">Fast<span class="logo_colour"> Studio </span></a></h1>

<h2>Ready Steady Cine</h2>

</div>

</div>

<div id="menubar">

<ul id="menu">

<li class="selected"><a href="index.html">Главная</a></li>

<li><a href="about.html">О нас</a></li>

<li><a href="services.html">Услуги</a></li>

<li><a href="portfolio.html">Портфолио</a></li>

<li><a href="price.html">Цены</a></li>

<li><a href="contact.html">Контакты</a></li>

</ul>

</div>

</div>

<div id="site_content">

<div class="sidebar">

<h1>Новости</h1>

<h4>Новый адрес</h4>

<h5>10 Декабря 2012</h5>

<p>Новый офис. Более просторные помещения. Все это означает возросшие возможности!<br /><a href="contact.html">Узнать новый адрес</a></p>

<h1>Поиск</h1>

<form method="post" action="#" id="search_form">

<p><input class="search" type="text" name="search_field" value="Что ищем?" />

<input name="search" type="image" style="border: 0; margin: 0 0 -9px 5px;" src="style/search.png" alt="Search" title="Search" />

</p>

</form>

</div>

<div id="content">

<h1 id="red">Приветствуем всех посетителей нашего сайта!</h1><p>

Компания FastStudio была создана более 10 лет назад людьми, имеющими за плечами огромный опыт работы в сфере видеопроизводства.

За годы существования наша студия принимала участие в создании фото и видеопродукции для таких компаний, как "Samsung", "Olympus", "VICHY", "Sbarro", "Chanel", "Amway", "Danone", "Schneider Electric", "Door Han", "Газпром", "ТатНефть", "Российские Железные Дороги", "Алмаз Холдинг", компании "Сладко" и т.д. Мы проводили видеосъемки для аэропорта "Шереметьево", авиакомпании "Трансаэро", банка "ВТБ24", банка "Финансовый стандарт" и многих других компаний, спортивных федераций, известных артистов и политических деятелей.</p>

<table width="613" border="0" style="background: #F6F6F6">

<tr>

<td width="304" height="150" style="background: #F6F6F6; border: 0px; vertical-align:top; padding: 0px 0px; margin: 0px 0px;"> <div class="site_block_r">

<h1>Наше портфолио</h1>

<video class="video_border" src="video/w1.mp4" width="250" height="187" controls></video>

<h4>&nbsp;</h4>

<p><a id="button_a1" href="portfolio.html">Далее</a></p>

</div></td>

<td width="299" style="background: #F6F6F6; border: 0px; vertical-align:top; ; padding: 0px 0px; margin: 0px 0px; ">

<div class="site_block_r">

<h1>Услуги</h1>

<p>Перечень всех предлагаемых услуг</p>

<img src="image/crane2.jpg" alt="example graphic" height="143" /></span> <h4>&nbsp;</h4>

<p><a id="button_a1" href="services.html">Далее</a></p>

</div></td>

</tr>

<tr>

<td height="188" style="background: #F6F6F6; border: 0px; padding: 0px 0px; margin: 0px 0px;"> <div class="site_block_r">

<h1>О FastStudio</h1>

<img src="image/2.jpg" alt="example graphic" height="143"/> <h4>&nbsp;</h4>

<p><a id="button_a1" href="about.html">Далее</a></p></div></td>

<td style="background: #F6F6F6; border: 0px; padding: 0px 0px; margin: 0px 0px;">

<div class="site_block_r">

<h1>Цены на услуги и заказ</h1>

<p><a id="button_a1" href="price.html">Далее</a></p>

</div>

<div class="site_block_r">

<h1>Как нас найти? Узнайте здесь </h1>

<p><a id="button_a1" href="contact.html">Далее</a></p></p>

</div>

</td>

</tr>

</table>

<marquee direction="left"

bgcolor="#FC9C04" scrollamount="4"> Ready Steady Cine...

</marquee>

</div>

</div>

<div id="footer">

<p><a href="index.html">главная</a> | <a href="about.html">о нас</a> | <a href="services.html">услуги</a> | <a href="portfolio.html">портфолио</a> | <a href="price.html">цены</a> | <a href="contact.html">контакты</a></p>

<p>Copyright &copy; faststudio</p>

</div>

</div>

</body>

</html>

Страницу можно посмотреть на рисунке 4.1.

Рисунок 4.1 - Страница "ГЛАВНАЯ"

4.2 Страница "О НАС"

<!DOCTYPE HTML>

<html>

<head>

<title>Fast Studio</title>

<meta name="description" content="website description" />

<meta name="keywords" content="website keywords, website keywords" />

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="style/style.css" />

<link href="style/film.ico" rel="shortcut icon" type="image/x-icon">

</head>

<body>

<div id="main">

<div id="header">

<div id="logo">

<div id="logo_text">

<h1><a href="index.html">

Fast<span class="logo_colour">Studio</span></a></h1>

<h2>Ready Steady Cine</h2>

</div>

</div>

<div id="menubar">

<ul id="menu">

<li class="selected"><a href="index.html">Главная</a></li>

<li><a href="about.html">О нас</a></li>

<li><a href="services.html">Услуги</a></li>

<li><a href="portfolio.html">Портфолио</a></li>

<li><a href="price.html">Цены</a></li>

<li><a href="contact.html">Контакты</a></li>

</ul>

</div>

</div>

<div id="site_content">

<div class="sidebar">

<h1>Рекомендуем</h1>

<ul>

<li><a href="portfolio.html">Портфолио</a></li>

<li><a href="services.html">Услуги</a></li>

<li><a href="contact.html">Контакты</a></li>

</ul>

<h1>Поиск</h1>

<form method="post" action="#" id="search_form">

<p>

<input class="search" type="text" name="search_field" value="Что ищем?" />

<input name="search" type="image" style="border: 0; margin: 0 0 -9px 5px;" src="style/search.png" alt="Search" title="Search" />

</p>

</form>

</div>

<div id="content">

<h2 id="red">О нас</h2>

<p>Fast Studio - это команда друзей, единомышленников, профессионалов. Каждый из нас посвятил свою жизнь кино и видеопроизводству.</p>

<p>В нашей студии трудятся сценаристы, режиссеры, операторы, монтажеры, звукорежиссеры, которые участвовали в создании медиапроектов, получивших известность в России и за рубежом.</p>

<p>Основные направления нашей студии - производство фильмов, телепередач и рекламных роликов. Наша студия обладает собственной технической базой, которая позволяет выполнять работы наивысшего качества.</p>

<p>Мы любим то, что мы делаем и умеем творчески подойти к решению любой задачи. Наши специалисты могут найти наиболее красивый, простой и правильный способ реализации того, что хотят наши клиенты. </p>

<p>Мы можем совместить приятное с полезным - Решить коммерческие задачи наших клиентов с помощью творчества и креатива.

</p>

<h2 id="comanda">Наша дружная команда</h2>

<div class="site_block_img">

<h1>Режесер</h1>

<h4>Джеймс Кэмерон</h4>

<span class="center"><img src="image/2.jpg" width="170" alt="Джеймс" /></span> <br/> <br/>

<h5>Канадский кинорежиссёр, сценарист, продюсер. Один из самых успешных режиссёров в истории кино.</h5>

</div>

<div class="site_block_img">

<h1>Оператор</h1>

<h4>Гарретт Браун</h4>

<span class="center"><img src="image/1.jpg" width="170" alt="Гарретт" /></span> <br/> <br/>

<h5>Изобретатель сиситемы стабилизации Steadicam.</h5>

</div>

<div class="site_block_img">

<h1>Сценарист</h1>

<h4>Квентин Тарантино</h4>

<span class="center"><img src="image/3.jpg" width="170" alt="Квентин" /></span> <br/> <br/>

<h5>Один из лучших сценаристов современности. Лауреат премии оскар</h5>

</div>

</div>

</div>

<div id="footer">

<p><a href="index.html">главная</a> | <a href="about.html">о нас</a> | <a href="services.html">услуги</a> | <a href="portfolio.html">портфолио</a> | <a href="price.html">цены</a> | <a href="contact.html">контакты</a></p>

<p>Copyright &copy; faststudio</p>

</div>

</div>

</body>

</html>

Страницу можно посмотреть на рисунке 4.2.

Рисунок 4.2 - Страница "О НАС"

4.3 Страница "КОНТАКТЫ"

<!DOCTYPE HTML>

<html>

<head>

<title>Fast Studio</title>

<meta name="description" content="website description" />

<meta name="keywords" content="website keywords, website keywords" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="style/style.css" />

<link href="style/1reset-min.css" type="text/css" media="screen" rel="stylesheet" />

<link href="style/1layout.css" type="text/css" media="screen" rel="stylesheet" />

<link href="style/film.ico" rel="shortcut icon" type="image/x-icon">

<script src="js/lightgallery.min.js" type="text/javascript"></script>

<script type="text/javascript">

lightgallery.init();

var AJAX = (function(){

var req = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

return {

get : function(url, callback, context){

req.open('GET', url);

req.onreadystatechange = function() {

if(req.readyState == 4){

callback.call(context || window, req);

}

};

req.send(null);

}

}

})();

var someObj = {a : 'test'};

function loadImages() {

AJAX.get('load.html', function(req){

document.getElementById("moreImages").innerHTML += req.responseText;

document.getElementById("load_new").style.display = 'none';

lightgallery.init();

}, someObj);

}

</script>

</head>

<body>

<div id="main">

<div id="header">

<div id="logo">

<div id="logo_text">

<h1><a href="index.html">Fast<span class="logo_colour">Studio</span></a></h1>

<h2>Ready Steady Cine</h2>

</div>

</div>

<div id="menubar">

<ul id="menu">

<li class="selected"><a href="index.html">Главная</a></li>

<li><a href="about.html">О нас</a></li>

<li><a href="services.html">Услуги</a></li>

<li><a href="portfolio.html">Портфолио</a></li>

<li><a href="price.html">Цены</a></li>

<li><a href="contact.html">Контакты</a></li>

</ul>

</div>

</div>

<div id="site_content">

<div class="sidebar">

<h1>Рекомендуем</h1>

<ul>

<li><a href="price.html">Цены</a></li>

<li><a href="about.html">О нас</a></li>

</ul>

<h1>Поиск</h1>

<form method="post" action="#" id="search_form">

<p>

<input class="search" type="text" name="search_field" value="Что ищем?" />

<input name="search" type="image" style="border: 0; margin: 0 0 -9px 5px;" src="style/search.png" alt="Search" title="Search" />

</p>

</form>

</div>

<div id="content">

<h2 id="red">Как нас найти?</h2>

<h1>Очень просто!</h1>

<p>Индекс: 182167, Санкт-Петербург, набережная Обводного Канала - 153.<br> Телефон: 8 (812) 555-666, Факс: 8 (812) 565-665. </p>

<p>Режим работы: пн-пт с 10-00 до 17-00, сб-вс - выходной.</p>

<a id="a_img" href="image/map.jpg" rel="lightgallery" title="Мы на карте"><img src="image/map_s.jpg" alt="" title="" /></a>

<h1>Обратная связь</h1>

<form action="#" method="post">

<div class="form_settings">

<p><span>Ваше имя</span><input class="contact" type="text" name="your_name" value="" /></p>

<p><span>Email</span><input class="contact" type="text" name="your_email" value="" /></p>

<p><span>Текст сообщения</span><textarea style="resize:none" class="contact textarea" rows="12" cols="50" name="your_enquiry"></textarea></p>

<p style="padding-top: 15px"><span>&nbsp;</span><input class="submit" type="submit" name="contact_submitted" value="Отправить" /></p>

</div>

</form>

</div>

</div>

<div id="footer">

<p><a href="index.html">главная</a> | <a href="about.html">о нас</a> | <a href="services.html">услуги</a> | <a href="portfolio.html">портфолио</a> | <a href="price.html">цены</a> | <a href="contact.html">контакты</a></p>

<p>Copyright &copy; faststudio</p>

</div>

</div>

</body>

</html>

Страницу можно посмотреть на рисунке 4.3.



Рисунок 4.3 - Страница "КОНТАКТЫ"

Заключение

В ходе выполнения работы были изучены основные элементы конструкции Adobe Dreamweaver CS6, методы и приемы работы с графикой, были рассмотрены теги форматирования текста (Таблица 1) и способы его оформления с использованием подключаемых таблиц CSS.

Результатом работы над курсовым проектом стал сайт, написанный на Adobe Dreamweaver CS6, посвященный компании ООО "Фаст Студия".

Таким образом, поставленные перед выполнением работы задачи решены, цели достигнуты.

сайт dreamweaver таблица тег

Библиографический список

1. Мержевич, В. Самоучитель HTML [Электронный ресурс] : Как создать свой сайт? - Режим доступа: http://htmlbook.ru/samhtml 22.09.2010. - Загл. с экрана.

2. Соколов, С. А. HTML и CSS в примерах, типовых решениях и задачах. Профессиональная работа [Электронный ресурс] / С. А. Соколов. -- М.: Вильямс, 2007. -- 416 с. - Режим доступа: http://ru.wikipedia.org/wiki/HTML. - Загл с экрана.

3. Попов, Е. Самоучитель CSS [Электронный ресурс]: CSS Базовый курс - Режим доступа: http://evgeniypopov.com/ - Загл с экрана.

4. Дригалкин, В.В. HTML в примерах. Как создать свой Web-сайт: самоучитель / В.В. Дригалкин. - М.: Диалектика, 2003. - 192 с.

5. Пауэрс, Д. Adobe Dreamweaver, CSS, Ajax и PHP / Д. Пауэрс. - СПб: BHV-CПб, 2009. - 1056 с.

6. Бурсов, М.В. Основы работы с HTML-редактором Dreamweaver: учеб.-метод. Пособие / М.В. Бурсов, В.М. Домненко, Д.А. Гаврилин, Д.Г. Николаев. - СПб: ГИТМО (ТУ), 2002. - 104 с.

7. Хольцшлаг, М. Языки HTML и CSS для создания Web-сайтов: официальный учебный курс: [пер. с англ.] / М. Хольцшлаг. - М.: Триумф, 2007. - 304 с.

Приложение А

Таблица 1 - Спецификация тегов (дескрипторов)

Тег	Описание	Атрибут	Описание атрибута
<html></html>	Открывает документ
<head></head>	Служебная информация о документе
<body></body>	Тело документа	Bgcolor	Фоновый цвет документа
		Link	Цвет ссылки
		Vlink	Цвет посещенной ссылки
		Alink	Цвет активной (нажатой) ссылки
<title></title>	Заголовок окна веб-страницы
<meta>	Информация для браузеров и поисковых систем	charset	Задает кодировку документа
		content	Устанавливает значение атрибута, заданного с помощью name или http-equiv
		http-equiv	Конвертирование метатега в заголовок HTTP
		name	Имя метатега, также косвенно устанавливает его предназначение
<link>	Связь с внешним файлом (стиль, шрифт)	charset	Кодировка связываемого документа
		href	Путь к связываемому файлу
		media	Определяет устройство, для которого следует применять стилевое оформление
		rel	Определяет отношения между текущим документом и файлом, на который делается ссылка
		type	MIME-тип данных подключаемого файла
<script>	Описание сценариев (скриптов)	src	Адрес скрипта из внешнего файла
		type	Определяет тип содержимого
<div>	Блочный элемент. Выделяет фрагмента документа с целью изменения вида содержимого	align	Задает выравнивание содержимого тега <div>
		title	Добавляет всплывающую подсказку к содержимому
<hX>	Заголовки (h1, h2, h3, h4, h5, h6)
<p></p>	Параграф	Align	Выравнивание текста в параграфе
<br>	Принудительный перевод строки
<b></b>	Жирный шрифт
<u></u>	Подчеркивание текста
<a></a>	Ссылка	Href	Путь к документу
		Target	Открывает ссылку в новом окне
		Name	Имя ссылки
<table></table>	таблица	Cellspacing	расстояние между ячейками
		Cellpadding	расстояние внутри ячеек
		bgcolor	Цвет фона таблицы
		border	Толщина рамки в пикселах
		width	Ширина таблицы
		height	Высота таблицы
<ul></ul>	Маркированный список	type	Устанавливает вид маркера списка
<li></li>	Ячейка списка
<ol></ol>	Нумерованный список	type	Устанавливает вид маркера списка
<img>	Отображение на вэб-странице изображения	align	Определяет как рисунок будет выравниваться по краю и способ обтекания текстом
		alt	Альтернативный текст для изображения
		border	Толщина рамки вокруг изображения
		height	Высота изображения
		src	Путь к графическому файлу
		width	Ширина изображения
<video>	Добавляет, воспроизводит и управляет настройками видеоролика	controls	Добавляет панель управления к видеоролику
		height	Задает высоту области для воспроизведения видеоролика
		src	Указывает путь к воспроизводимому видеоролику
		width	Задает ширину области для воспроизведения видеоролика
<marquee>	Создает бегущую строку на странице	bgcolor	Цвет фона
		direction	Указывает направление движения содержимого контейнера
		scrollamount	Скорость движения контента
<span>	Определяет контейнер для внутреннего текста
</form>	Устанавливает форму	action	Адрес программы или документа, который обрабатывает данные формы
		method	Метод протокола HTTP
		name	Имя формы
<input>	Создание элементов интерфейса	alt	Альтернативный текст для кнопки с изображением
		src	Адрес графического файла для поля с изображением
		type	Сообщает браузеру, к какому типу относится элемент формы
		value	Значение элемента

Размещено на Allbest.ru