Разработка Web-сайта посвященного компании "Марс"

  Содержание

  Введение

  1. Базовые знания необходимые для  создания Web-сайта

  1.1 Web-страницы и Web-сайты

  1.2 Язык разметки гипертекстовых  страниц HTML

  1.3 Web-редактор Macromedia Dreamweaver

  2. Как построить хороший сайт

  2.1 Представление текста на Web-страницах

  2.2 Представление графики на Web-страницах

  2.3 Планирование информационного потока

  2.4 Условия для создания успешного  сайта

  3. Разработка Web-сайта посвященного  компании "Марс"

  3.1 Создание новой web-страницы (шаблона)

  3.2 Ввод и форматирование текста

  3.3 Работа с графикой

  3.4 Создание гиперссылок

  Заключение

  Список  использованной литературы

 

  Введение

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

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

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

  Каждый  из нас уже сейчас может сделать  свой вклад в развитие Internet. Для этого достаточно создать свой веб-сайт и разместить его в Сети.

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

  Если  вы задерживаетесь на каком-либо сайте  на длительное время и даже не осознаете этого, то, по всей видимости, такой сайт очень хорошо продуман. Вернитесь обратно и попробуйте осмыслить полную картину. Можете ли вы увидеть структуру, организацию? Легко ли воспринимается информация? Понимание движения информационных потоков — это первый шаг в создании функционального, удобного в работе сайта. Если вы поймете, как работает эта концепция, и примените ее при создании собственного сайта, то вы уже тем самым опередите большинство других разработчиков.

  Тема  моей курсовой работы: Разработка Web-сайта посвященного компании "Марс".

  Объект  исследования: Web-сайт салона ООО Марс.

  Предмет – создание структуры Web-сайта.

  Цель - создание Web-сайта компании "Марс".

  Для этого необходимо решить следующие  частные задачи:

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

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

  – выявить и учесть методы и способы  представления на Web-страницах различных видов информации (текстов и изображений);

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

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

  – представить пошаговую стратегию разработки web-сайта.

 

  1. Базовые знания  необходимые для  создания Web-сайта  

  1.1 Web-страницы и Web-сайты  

  Что такое Web-страница'? Ответить на этот вопрос могут многие. Это интернет-документ, предназначенный для распространения через Интернет по средством сервиса WWW. А если уж говорить по-простонародному, это то, что показывает в своем окне программа-клиент для просмотра Web-страниц — Web-обозреватель.

  С технической точки зрения Web-страница — это обычный текстовый файл, который можно создать в любом текстовом редакторе, том же Блокноте, стандартно поставляемом в составе Windows. Этот файл содержит собственно текст Web-страницы и различные команды форматирования этого самого текста. Команды форматирования называются тегами, а описывает их особый язык HTML (HyperText Markup Language, язык гипертекстовой разметки).

  Файлы, содержащие Web-страницы, должны иметь  расширение htm[l]. Они сохраняются  на жестких дисках серверного компьютера. Получив от Web-обозревателя запрос по протоколу HTTP, Web-сервер (серверная программа, обеспечивающая работу сервиса WWW) загружает эти файлы и отправляет Web-обозревателю.

  Но  как Web-обозреватель дает понять Web-серверу, какая Web-страница ему нужна? Очень  просто — он пересылает в составе  клиентского запроса имя и  полный путь файла, в котором она сохранена. Скажем, вот так: http://comp45.buh.department.ru/somepage.html

  Этот  запрос заставит Web-сервер извлечь и  отправить Web-обозревателю файл somepage.html.

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

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

  Корневую  папку сайта на серверном компьютере создает человек, занимающийся настройкой и обслуживанием программы Web-сервера (или же всего серверного компьютера),— администратор.При этом он заносит полный путь этой папки в настройки Web-сервера, чтобы последний смог найти ее на диске. После этого корневая папка может быть заполнена файлами нового сайта.

  Когда Web-обозреватель присылает Web-серверу  запрос вида: http://wvw.somesite.ru/somepage.html

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

  1.2 Язык разметки  гипертекстовых страниц  HTML

  интернет  сайт страница гиперссылка

  Язык  разметки гипертекстовых страниц (HTML – Hypertext Markup Language) представляет собой  язык, разработанный специально для создания Web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.

  Стандарт HTML и другие стандарты для Web разработаны  под руководством консорциума W3C (World Wide Web Consortium). Стандарты, спецификации и  проекты новых предложений можно  найти на сайте http://www.3w.org/. В настоящее время действует спецификация HTML 4.0, поддержка которой со стороны основных браузеров постоянно растет.

  На  практике на стандарт HTML большое влияние  оказывает наличие тегов, предложенных и поддерживаемых наиболее известными браузерами, такими как Microsoft Internet Explorer и Netscape Navigator. Эти теги в данный момент могут как входить, так и не входить в состав действующей спецификации HTML.

  Информации  о тегах HTML Compendium (краткое руководство  по HTML) созданно Ron Woodall. Компендиум содержит список тегов и их атрибутов в алфавитном порядке, а также обновленную информацию о поддержке каждого из них со стороны браузеров. Компендиум HTML находится на сайте http://www.htmlcompendium.org.  

  1.3 Web-редактор Macromedia Dreamweaver

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

  Но  многие его не знают язык HTML, более  того — не хотят его изучать  или не имеют на это времени. Но создавать Web-страницы хотят. Поэтому  специально для них программисты написали множество программ, предназначенных для создания Web-страниц, — так называемые Web-редакторы. С помощью таких программ можно создавать документы, как в Microsoft Word, т.е. просто и удобно.

  Одна  из таких программ написана разработчиками из фирмы Macromedia и называется Macromedia Dreamweaver. Первая ее версия вышла еще в далеком 1998 году; в настоящее же время доступна версия 8. Именно с Dreamweaver мы и будем работать в процессе написания курсовой работы.

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

  Здесь нужно сказать, что практически  все серьезные Web-редакторы имеют  режим правки непосредственно самого кода HTML (т. е. фактически являются гибридными Web-редакторами).Поэтому сейчас практически всегда, когда говорят "визуальный Web-редактор", подразумевают как раз гибридные программы. Разумеется, к их числу относится и Dreamweaver.

 

  2. Как построить  хороший сайт  

  2.1 Представление текста на Web-страницах

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

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

  Пропорциональный шрифт – иначе "шрифт переменной ширины" для каждого символа выделяет разное количество места в зависимости от его начертания. Например, в пропорциональном шрифте заглавная "W" занимает больше места в строке по горизонтали, чем прописная "I". Такие гаринитуры, как: Times, Helvetica и Arial являются примерами пропорциональных шрифтов.

  Web-браузеры  для большинства текстов на Web-странице, включая основной текст, заголовки,  списки, цитаты и т. д., используют  пропорциональные шрифты. Как правило,  большие отрывки основного текста удобнее читать, когда они напечатаны пропорциональными шрифтами. Поскольку большинство пользователей не имеют времени заменить шрифты, установленные по умолчанию, с большой вероятностью можно предположить, что текст на вашей странице будет отображен шрифтом Times размером 10 или 12 пунктов (по умолчанию в Netscape) или Helvetica (по умолчанию в Microsoft Internet Explorer). Но это всего лишь общее правило.

  Шрифт с фиксированной шириной предоставляет  одинаковое место для всех символов шрифта. Заглавная "W" занимает не больше места, чем прописная "I". Примерами шрифтов фиксированной ширины являются гарнитуры Courier и Monaco. В Web-браузерах шрифты фиксированной ширины используются для отображения любого текста внутри следующих HTML-тегов: <рге>, <tt>, <code>, <kbd>,<samp>, <хтр>.