Планирование Web-сайта

Автор работы: Пользователь скрыл имя, 23 Мая 2013 в 09:27, курсовая работа

Краткое описание

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

Содержание

Введение…………………………………………………………………………….3
1. Планирование Web-сайта………………………………………………...........5
2. Схема сайта………………………………………………………………………8
3. Технологии реализации……………………………………………………….10
4. Анализ существующих сайтов………………………………………………..12
5. HTML-код……………………………………………………………………….13
6. Каскадная таблица стилей…………………………………………………….17
Выводы……………………………………………………………………………..19
Литература…………………………………………………………………………21

Прикрепленные файлы: 1 файл

курсач.doc

— 90.00 Кб (Скачать документ)

<title>Untitled Document</title>

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

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

</head>

 

<body>

<table width="100%" height="100%"  border="1" cellpadding="20">

  <tr class="zag">

    <td height="65" colspan="2"><div align="center"><strong>Проектирование  и создание современного WEB - сайта  </strong></div></td>

  </tr>

  <tr>

    <td width="24%" valign="top" class="menu"><p><a href="index1.htm">1. Современные интернет - технологии </a></p>

      <p><a href="brauz.htm">1.1. Web - дизайн и браузеры </a></p>

      <p><a href="yazik.htm">1.2. Язык разметки гипертекстовых страниц HTML </a></p>

      <p><a href="dostupn.htm">1.3. Обеспечение доступности Web - страницы </a></p>

      <p><a href="text.htm">1.4. Представление текста на Web - страницах </a></p>

      <p><a href="graphik.htm">1.5. Представление графики на Web - страницах </a></p>

      <p><a href="server.htm">1.6. Web - серверы</a></p>

      <p><a href="index2.htm">2. Основные правила и этапы создания сайта</a></p>

      <p><a href="vliyan.htm">2.1. Влияние дисплеев на Web - дизайн</a></p>

      <p><a href="razm.htm">2.2. Стандартные размеры и разрешения дисплеев</a></a></p>

      <p><a href="alternativ.htm">2.3. Альтернативные дисплеи</a></p>

      <p><a href="index3.htm">3. Выбор структуры Web - страницы</a></p>

      <p><a href="fiksir.htm">3.1. Создание фиксированных и гибких Web - страниц</a></p>

      <p><a href="kombin.htm">3.2. Разработка комбинированных Web - страниц</a></p>

      <p><a href="macromedia.htm">3.3. Macromedia Flash</a></p>

      <p><a href="strateg.htm">3.4. Стратегия разработки Web - сайта</a></p>

      <p>&nbsp;</p>

      <p>&nbsp;</p>

      <p>&nbsp;</p>

      <p>&nbsp;</p></td>

    <td width="76%" class="content">&nbsp;</td>

  </tr>

</table>

</body>

</html>

Документ HTML разделяется  на две основные части: заголовок  – head и тело – body. Заголовок содержит такие сведения о документе, как  его название и методическая информация, описывающая содержимое. В теле находится само содержим документа (то, что выводится в окне браузера).

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

Однако значения определенных атрибутов могут быть чувствительны  к регистру. Это относится, в частности, к именам файлов и URL.

Большинство тегов являются контейнерами. Это означает, что  у них имеется начальный (открывающий  или стартовый) и конечный (закрывающий) теги. Текст, находящийся между тегами, будет выполнять содержащиеся в них инструкции.

Конечный тег имеет  то же имя, что и начальный, но перед  ним стоит слэш (/). Его можно  рассматривать как "выключатель" тега. Конечный тег никогда не содержит атрибутов.

В некоторых случаях  конечный тег не обязателен, и браузер  определяет конец тега из контекста. Чаще всего опускают конечный тег <р> (абзац). Некоторые теги не имеет завершающих тегов, потому что они используются для размещения отдельных (автономных) элементов на странице. Одним из них является тег изображения <img>, он просто помещает графику в поток страницы. Другой автономный тег – это разрыв строки (<br>)

Атрибуты добавляются  в тег для расширения или модификации  его действий. К одному тегу можно добавить несколько атрибутов. Если атрибуты тега следуют после имени тега, они разделяются одним или несколькими пробелами. Порядок следования не важен. Большинство атрибутов имеют значения, которые следуют за знаком равенства (=), находящимся после имени атрибута. Длина значений ограничена 1024 символами. Значения могут быть чувствительны к регистру. Иногда значения должны находиться в кавычках (двойных или одинарных).

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

Ссылку на другую страницу мы осуществляем с помощью тега

<a href="URL"></a> , например: <a href="brauz.htm"></a>  ;

Реализация таблицы  осуществляется с помощью тега <table></table>;

Строки и ячейки таблицы  формируются с помощью тегов 

  <tr>

<td></td>

 </tr> .

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Каскадная таблица стилей

 

body

{font-family:helvetica}

.zag

{

text-align:center;

font-size: large;

background-color:#ba7cc9;

 

border-style:dashed;}

 

.menu

{text-align:left;

background-color:#f4b9f1;

border-style:groove;}

a:hover{text-decoration:none;

font-weight:bold}

 

.content

{text-align:center;

font-size: medium;

border-style:groove;}

 

В данной курсовой работе были использовали 3 класса: .zag, .menu, .content, которые введены для объединения групп элементов с одними и теми же стилевыми свойствами.

Каскадная таблица стилей имеет стилевые свойства, рассмотрим некоторые из них:

Text-align:left(right, center, justify) – определяет выключку (выравнивание) данного элемента;

Background-color:#номер, или название цвета, или transparent – цвет фона;

Font-size: xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, или значение в процентах или любых единицах – устанавливает размер шрифта. Если он указан в процентах или с помощью larger/smaller, то размер относительный, иначе абсолютный.

Border-style:none, dotted, dashed, solid, double, groove, ridge, inset, outset – тип рамки: нет, точечная, пунктирная, сплошная, двойная, объемная(освещение снизу), объемная(освещение сверху), вогнутая, выпуклая;

Text-decoration: none, underline, overline, line-through, blink – определяет оформление текста: без оформления, подчеркнутый, надчеркнутый, зачеркнутый, мигающий;

Font-weight: normal, bold, или значения от 100 до 900 (кратные 100); также bolder и lighter – устанавливает «жирность» шрифта. Значения bolder и lighter относительные, остальные – абсолютные. 400 соответствует normal, а 700 – bold.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Выводы

 

В данной курсовой работе рассмотрены актуальные вопросы  разработки и создания современного Web-сайта.

При этом нами были решены следующие частные задачи:

– ознакомление с современными Интернет-технологиями и их использование  в настоящей разработке;

– изучение программного инструментария, применяемого для разработки и создания Web-сайтов;

– выявление и учет методов и способов представления на Web-страницах различных видов информации, не препятствующих их доступности;

– ознакомление с основными  правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительное  следование им на практике;

– определение структуры Web-страниц;

– выбор стратегии  разработки и создания Web-сайта.

Тема курсовой  работы практически важна, поскольку ориентирована  на освоение и внедрение в профессиональную практику новых сетевых Интернет-технологий, а именно – современных инструментальных средств разработки и создания перспективных Web-сайтов, обладающих рядом существенных преимуществ по сравнению с теми, которые разрабатываются с помощью традиционных технологий, базирующихся на использовании HTML-редакторов (уровня NotePad и ему подобных).

Результаты, достигнутые нами в  курсовой работе, выражаются в том, что мы реализовали с помощью  Macromedia Dreamweaver прототип Web-сайта, который наряду со многими традиционными функциональными возможностями обладает привлекательным интерфейсом.

Была проведена изыскательская работа, связанная с изучением и анализом существующих Интернет-технологий в сфере проектирования и создания Web-сайтов.

Литература

1. Айзекс С. Dynamic HTML.- Санкт- Петербург, 2001.

2.  Дронов В.А. JavaScript в Web-дизайне. - Санкт- Петербург, 2001.

3. Матросов А.В., Сергеев А.О., Чаунин М.П. HTML 4.0. – Санкт- Петербург, 1999.

 

 

 

 




Информация о работе Планирование Web-сайта