Автор: Пользователь скрыл имя, 02 Апреля 2012 в 16:44, курсовая работа
Потому что для меня Веб-сайт - это не только "визитная карточка", своеобразное и легкозапоминающееся "лицо" фирмы, но и мощный маркетинговый инструмент, способный создать имидж Вашей компании. Понимая это, я подхожу к планированию и разработке с большой тщательностью, особо уделяя внимание специфике фирмы-заказчика.
Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.
Введение_____________________________________________________2
1 Глава. Определение дизайна и его функции
1.1) История дизайна _________________________________________ 3
1.2) Дизайн: основные понятия и определения ___________________5
1.3) Виды дизайна __________________________________________9
1.4) Цвет и его значение в дизайне _____________________________12
2 Глава. Создание Web-страницы с помощью HTML и CSS
2.1) Язык HTML ____________________________________________15
2.2) CSS ___________________________________________________16
2.3) Структура HTML документа ______________________________18
2.4) Вёрстка с помощью слоёв _________________________________21
2.5) Преимущества и недостатки слоёв__________________________22
2.6) Особенности верстки слоями ______________________________25
2.7) Блочная верстка _________________________________________29
2.8) Форматирование текста___________________________________30
2.9) О шрифте_______________________________________________33
А) Живые и статичные шрифты _________________________________44
Б) Шрифт как элемент фирменного стиля __________________________47
3 Глава. Инструментарий для создания Web-страниц
3.1) HTML-редакторы________________________________________55
3.2) Графические редакторы___________________________________58
А) Редакторы растровой графики ________________________________60
Б) Редакторы векторной графики ________________________________62
4 Глава. Проектирование
4.1) Вступление_____________________________________________ 65
4.2) Идея ___________________________________________________66
4.3) Разработка структуры сайта _______________________________67
4.4) Оформление сайта _______________________________________68
4.5) Кодинг и программирование_______________________________71
4.6) Тестирование и доработка_________________________________72
Заключение______________________________________________________________________74
Список используемой литературы______________________________75
Все теги начинаются символом '<' и заканчиваются символом '>'. Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация:
<p>Информация</p>
Здесь стартовым тегом является тег <P>, а завершающим - </P>. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках <> стоит символ '/' (слэш).
Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML-тегов. В каждом HTML-документе должны присутствовать три главных части:
A) Объявление HTML;
B) Заголовачная часть;
C) Тело документа.
A) Объявление HTML
<HTML> и </HTML>. Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег <HTML> (в самом начале документа), а последним - </HTML> (в самом конце документа).
<HTML>
.
.
.
</HTML>
B) Заголовочная часть.
<HEAD> и </HEAD>. Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами <TITLE> и </TITLE>.
<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
</HTML>
C) Тело документа.
Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами <BODY> и </BODY>. Первый из них должен стоять сразу после тега </HEAD>, а второй - перед тегом </HTML>. Тело HTML-документа - это место, куда автор помещает информацию, отформатированную средствами HTML.
<HTML>
<HEAD>
<TITLE> Моя первая страница</TITLE>
</HEAD>
<BODY>
..............................
</BODY>
</HTML>
Теперь мы можем написать HTML-код нашей странички:
<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
<BODY>
Здесь будут мои страницы!
</BODY>
</HTML>
2.4 Вёрстка с помощью слоёв
Слои представляют собой структурные элементы, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Скрипты позволяют изменять параметры слоя динамически. Это дает возможность создавать на веб-странице разные эффекты, такие как выпадающие меню, игры, разворачивающиеся баннеры, плавающие окна и др.
До недавнего времени в качестве основных инструментов верстки выступали фреймы и таблицы. Фреймы, ввиду их некоторого несоответствия принципам веб-дизайна и навигации, были объявлены злом[источник?] и подвергнуты остракизму[источник?]. Любое использование фреймов, за редким исключением (например, в чатах), вызывало возгласы о том, что веб-мастер недостаточно профессионален и не понимает всех тонкостей создания сайтов. Что оставалось делать в этой ситуации верстальщикам? Только переходить к таблицам.
Поэтому вёрстка с использованием таблиц на долгое время стала определенным стандартом.
И как только таблицы не применяются — и рамки с помощью них делают, и модульные сетки задают, и цветной фон создают, и элементы выравнивают по разным краям. Конечно, это противоречит идеологии разделения оформления и содержания, но о такой «мелочи» никто и не вспоминает.
Ситуация поменялась с выходом новых версий браузеров, которые стали придерживаться современных стандартов и содержать средства по работе со слоями. Вот тогда и заговорили о новой системе верстки сайтов, которая позволяет забыть о таблицах или использовать их только по прямому назначению.
2.5 Преимущества и недостатки слоёв.
Свойства слоя удобно задавать и настраивать через стили. Возможности стилей гораздо шире, чем традиционного html и расширяют спектр оформительских изысков. Использование стилевых таблиц позволяет несложными методами получить компактный и эффективный код. Справедливости ради, отметим, что данное утверждение можно отнести и к любым другим элементам веб-страницы, а не только к стилям. Слой можно перемещать, прятать и показывать без перезагрузки всей страницы. С помощью всего нескольких инструкций можно создавать разные эффекты, вроде выпадающих меню, всплывающих подсказок, движущихся элементов и другое. Добавление подобных трюков хотя и увеличивает объем кода, но не требует повторной загрузки и обновления документа и происходит без лишних задержек со стороны браузера. Кроме того, выразительность и привлекательность сайта во многом повышается благодаря использованию подобных приемов со слоями.
Слои можно накладывать друг на друга, что упрощает размещение элементов на веб-странице и предоставляет больше возможностей при верстке.
Слои можно размещать в окне браузера с точностью до пиксела. Положение слоя задается двумя координатами, которые задают положение левого верхнего или правого угла относительно окна браузера. Смещать слой можно и относительно родительского элемента.
Слои по сравнению с таблицами отображаются быстрее. Более высокая скорость достигается за счет компактного кода и того, что отображение содержимого слоя происходит по мере его загрузки. Если сравнивать между собой скорость загрузки веб-страниц, созданных с применением таблиц и слоев, то у табличной вёрстки имеются определённые недостатки. Содержимое таблицы загружается медленнее, чем информация в слоях
Браузеры преднамеренно расценивают таблицу как один объект, из-за чего содержимое таблицы не отображается до тех пор, пока оно целиком не будет загружено на локальный компьютер. Это имеет смысл, если принять во внимание предназначение таблиц. Первоначально они были задуманы для хранения табличных данных, а их лучше всего показывать сразу целиком, а не беспорядочно по мере загрузки. При использовании таблицы в качестве каркаса для размещения элементов веб-страницы, её исходное преимущество обращается в недостаток, поскольку приводит к задержке вывода содержимого.
Следует учитывать, также, и растущий объем веб-страниц при активном использовании таблиц, особенно в случае их вложенности друг в друга. Всё это приводит к тому, что табличная верстка вызывает ненужные задержки вывода информации в браузере.Работа с таблицами менее гибкая, чем со стилями
При использовании таблиц широко известным приемом стало применение распорок — прозрачных изображений высотой в один пиксель. Само изображение не отображается на веб-странице, но его можно масштабировать в любых пределах. Получается невидимая палочка определённой ширины или высоты, которая не дает ячейкам таблицы сблизиться меньше, чем на заданное расстояние. Распорки особенно были актуальны для браузера Netscape, который не показывал фон ячейки, если в ней ничего не размещалось. Чтобы избавиться от указанной особенности и помещали в ячейку маленький прозрачный рисунок в формате GIF.
Подобные техники не только усложняют разработку универсальных веб-страниц, но и ведут к снижению скорости загрузки документа. Браузеру в этом случае приходится загружать элементы, которые не видны пользователю и, по сути, ему не нужны, но они входят в общий трафик сайта.
Стили, на которых основана работа слоев, освобождают голову разработчика от подобных забот. Управлять любыми объектами веб-страницы с помощью стилей проще, легче и эффективней.Усложненная верстка при большом количестве таблиц.
Данная проблема возникает при множественной вложенности таблиц, что характерно для достижения определённых эффектов на веб-странице. Рост количества таблиц повышает шанс возникновения ошибок при вёрстке, увеличивает размер документов и снижает скорость загрузки файлов. Применение визуальных редакторов, вроде Macromedia Dreamweaver или Microsoft FrontPage, для создания и правки документов облегчает работу с таблицами, но из-за обилия их параметров и в этом случае разработчики не застрахованы от появления ошибок и лишней работы, связанной с индивидуальным редактированием каждой таблицы.
Не следует считать, что использование слоев это панацея от всех бед. К сожалению, стандарты работы со слоями ещё не до конца устоялись и браузеры по-разному реализуют определённые возможности. Из-за этого основная сложность верстки слоями — создать универсальный код, который бы одинаково и без ошибок работал в разных браузерах. Приходится вникать в тонкости поведения браузеров при использовании различных элементов стилей, что возможно только при большом опыте работы или массе свободного времени.
2.6 Особенности верстки слоями.
К сожалению, табличная верстка наложила довольно сильный отпечаток на манеру верстки веб-страниц. И теперь, когда верстка с помощью слоев прочно входит в моду и завоевывает множество поклонников, предыдущие стереотипы пытаются проявиться с новой силой. Так что рассказ об особенностях верстки слоями придется начинать не со слоев, а с таблиц и том багаже, что они с собой принесли.
Не секрет, что большинство сайтов в мире создано с помощью табличной технологии, когда таблица с невидимой границей выступает в качестве опорной модульной сетки документа. Вместе с тем разработчики постепенно переходят на верстку слоями — это интересно, доступно и пользуется популярностью. Но в качестве образца для подражания выбираются именно табличные сайты, поскольку они известны и на виду, и уже их пытаются приспособить под верстку слоями.
Что же в итоге получается? А то, что из конструктора, предназначенного для создания танка, пытаются сделать самолет. Думаете, это невозможно? Нет ничего невозможного, когда под рукой есть напильник и прорва времени. Но с другой стороны, может проще взять нужный конструктор...
Давайте для примера рассмотрим типичную и простую схему компоновки страницы (рис. 1).
В самом верху располагается «шапка» документа, где пишется заголовок сайта. Далее идут две колонки одинаковой высоты, колонки при этом для наглядности выделяются разным цветом. В самом низу располагается «подвал» страницы, куда помещают контактную информацию и другие служебные данные. При этом высота всего макета занимает всю доступную высоту окна браузера, т.е. «подвал» располагается у нижнего края веб-страницы. Правда это происходит только в том случае, если текста в колонках не так много. Когда объем текста превышает высоту веб-страницы, она отображается с вертикальной полосой прокрутки.
Несмотря на указанные условия, код, сформированный с помощью таблиц, отличается своей компактностью (пример 1). Для сокращения кода стили не применялись.
Пример 1. Использование таблиц
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Сайт</title>
</head>
<body>
<table width="100%" cellpadding="5" cellspacing="0">
<tr>
<td height="60" colspan="2" bgcolor="#666699"><h1>Заголово
</tr>
<tr>
<td width="25%" bgcolor="#990033" valign="top">Левая колонка</td>
<td bgcolor="#999966" valign="top">Правая колонка</td>
</tr>
<tr>
<td height="30" colspan="2" bgcolor="#cccccc">Подвал страницы</td>
</tr>
</table>
</body>
</html>
Высота таблицы определяется параметром height тега <TABLE>. Хотя этот параметр отсутствует в спецификации HTML, но браузеры его понимают, что и приводит к желаемому результату. Значение 100% говорит, что таблица занимает всю доступную высоту веб-страницы.
Приведенный двухколонный макет достаточно популярен среди разработчиков, поэтому у них возникает мысль реализовать его, но используя исключительно слои, без всяких таблиц. При этом сформировалось два стиля работы или, можно даже сказать, мышления.
За основу берется табличная верстка и с помощью слоев она воплощается максимально близко к оригиналу.
Используются особенности слоев, сайт верстается с их учетом.
Сторонники первого метода работы забывают, что имеют дело с совершенно противоположными инструментами, в итоге рождаются оригинальные схемы обхода тех или иных ограничений. Код в подобных случаях разбухает в разы, усложняется работа с ним, а браузеры, как правило, по-разному отображают документ. Приходится обращаться к хакам либо обманывать браузеры другими способами так, чтобы сайт в итоге работал корректно.
Теперь переходим к особенностям слоев, чтобы понять, в чем же суть этого типа верстки.Слои не таблицы.
Несмотря на банальность подобного утверждения, многие разработчики своим трудом опровергают его вновь и вновь. Но стоит только осознать, что это разные инструменты и элементы конструктора, как сразу станет легче и проще. Действительно, таблицы и методы верстки с их помощью лучше применять в одном случае, а слои — в другом. И четко разделять подходы и принципы верстки. Тогда нам не понадобится загонять творческую мысль в прокрустово ложе антагонистичной технологии. Надо просто пойти другим путем.