ПензенскийГосударственный Университет
Кафедра:Коммуникационный менеджмент
Курсоваяработа
Тема:Создание структуры Web-сайта
Выполнила: студентка гр.05ЗИЖ61
Тюрина Е.Г.
Проверила: Карпова М.К
Пенза
2011
Содержание
Введение
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-страница ему нужна?Очень просто — он пересылает в составе клиентского запроса имя и полный путьфайла, в котором она сохранена. Скажем, вот так: comp45.buh.department.ru/somepage.html
Этотзапрос заставит Web-сервер извлечь и отправить Web-обозревателю файлsomepage.html.
А чтотакое Web-сайт? Это набор Web-страниц, подчиненных общей тематике иобъединенных в единое целое. Web-сайт также сохраняется на жестких дискахсерверного компьютера. Технических отличий у Web-страницы и Web-сайта неслишком много.
Атеперь самое время прояснить несколько, опять же, чисто технических моментов,связанных с работой Web-обозревателя и Web-сервера. Прежде всего, для хранениявсех файлов, составляющих сайт (или Web-страницу, если рассматривать ее как«вырожденный» случай сайта), на диске серверного компьютера создаетсяособая папка, называемая корневой. Все файлы сайта должны находитьсятолько в этой папке, без малейших исключений. Все, что не находится в ней,автоматически исключается Web-сервером из состава сайта.
Корневуюпапку сайта на серверном компьютере создает человек, занимающийся настройкой иобслуживанием программы Web-сервера (или же всего серверного компьютера),— администратор.При этом он заносит полный путь этой папки в настройки Web-сервера, чтобыпоследний смог найти ее на диске. После этого корневая папка может бытьзаполнена файлами нового сайта.
КогдаWeb-обозреватель присылает Web-серверу запрос вида: wvw.somesite.ru/somepage.html
Web-серверищет файл somepage.html в корневой папке сайта и, если находит, отправляет егоWeb-обозревателю. Если же такого файла нет или Web-сервер почему-то не можетего загрузить, он отправляет Web-обозревателю сообщение об ошибке.
1.2 Язык разметкигипертекстовых страниц HTML
интернет сайт страница гиперссылка
Языкразметки гипертекстовых страниц (HTML – HypertextMarkup Language) представляет собой язык, разработанный специально для созданияWeb-документов. Он определяет синтаксис и размещение специальных инструкций(тегов), которые не выводятся на экран, но указывают браузеру, как отображатьсодержимое документа. Он также используется для создания ссылок на другиедокументы, локальные или сетевые, например, находящиеся в сети Интернет.
Стандарт HTML и другие стандарты для Web разработаны под руководствомконсорциума W3C (World Wide Web Consortium). Стандарты, спецификации и проектыновых предложений можно найти на сайте www.3w.org/. В настоящее времядействует спецификация HTML 4.0, поддержка которой со стороны основныхбраузеров постоянно растет.
На практике на стандарт HTML большое влияние оказывает наличиетегов, предложенных и поддерживаемых наиболее известными браузерами, такими какMicrosoft Internet Explorer и Netscape Navigator. Эти теги в данный моментмогут как входить, так и не входить в состав действующей спецификации HTML.
Информации о тегах HTML Compendium (краткое руководство по HTML)созданно Ron Woodall. Компендиум содержит список тегов и их атрибутов валфавитном порядке, а также обновленную информацию о поддержке каждого из нихсо стороны браузеров. Компендиум HTML находится на сайтеhttp://www.htmlcompendium.org.
1.3Web-редактор 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-тегов: , ,, ,, .
Поскольку многие люди не меняют настройку шрифтов, установленнуюпо умолчанию, текст, находящийся в указанных тегах, будет выведен одним изшрифтов типа Courier.
Размер шрифта.Обычно размер шрифта определяется в пунктах (72 пункта (пт) = 1 дюйм высоты шрифта) но, к сожалению, эти размеры не достаточно точно переводятся между платформами.Отчасти это происходит потому, что их операционные системы управляют дисплеямис различными разрешениями.
2.2 Представлениеграфики на Web-страницахНа данный момент почти все изображения вWeb, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающийупоминания, формат PNG, борется за поддержку и внимание браузеров. Далее –краткий обзор «большой тройки» онлайновых графических форматов. Болееподробная информация представлена в главах, посвященных каждому из форматов.
GIF. GIF – Grafic Interchange Format можно назвать традиционнымформатом файлов Web. Он был первым форматом файлов, который поддерживалсяWeb-браузерами, и по сей день продолжает оставаться основным графическимформатом Web.
Его свойства состоят вследующем:
– поддерживает не более256 цветов (меньше можно и часто нужно);
– использует палитру цветов;
– использует сжатие безпотери информации по методу LZW (который подобен применяемому в архиватореPKZIP, и, следовательно, GIF-файлы в дальнейшем практически не сжимаются);
– поддерживаетчересстрочную развертку;
– является поточнымформатом, т.е. показ картинки начинается во время перекачки;
– позволяет назначитьодному из цветов в палитре атрибут прозрачный, что применяется при создании такназываемых прозрачных GIFов;
– имеет возможностьсохранения в одном файле нескольких изображений, что находит свое применениепри изготовлении анимированных GIFов;
– поддерживаетвозможность вставки в файл управляющих блоков, которые позволяют вставлятькомментарии в файл (например, об авторских правах), осуществлять задержку междупоказами изображений и т.д.
А теперь немножкоразъяснений – к чему эти свойства могут привести. Как мы написали, GIFподдерживает не больше 256 цветов, а это значит, что все изображения, которыемы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобыуложиться в этот лимит (разные программы с разным успехом). А отсюда вывод –если у взять красивую фотографию с плавными переходами и едва уловимымиоттенками цвета, то после преобразования все будет гораздо хуже – оттенкиперестанут быть неуловимыми, и вся фотография приобретет неестественный,нереалистичный вид. Поэтому, если надо все-таки сохранить фотографию в форматеGIF и передать все оттенки, то приходится идти на хитрости. Например, кфотографии можно применить какой-нибудь художественный фильтр и превратить ее врисунок или применить тонирование. Зато нет никаких проблем с сохранениемрисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и несодержат много цветов.
JPEG. Вторым наиболее популярным графическим форматом в Web являетсяJPEG – Joint Photographic Experts Group. Он содержит 24-разрядную информацию оцвете. Это 16,77 млн цветов в отличие от 256 цветов формата GIF. В JPEGиспользуется так называемое сжатие с потерями. Это означает, что некотораяинформация об изображениях в процессе сжатия отбрасывается, но в большинствеслучаев ухудшение качества изображения не наносит вреда и часто даже незаметно.
Фотографии или любые изображения с плавными градациями цветовлучше всего сохранять в JPEG-формате, потому что он предлагает более высокое качествоизображений, умещающихся в файл меньшего объема. Тем не менее, JPEG не являетсялучшим решением для графических изображений с одноцветными областями, посколькуэтот формат имеет тенденцию испещрять цвета крапинками и конечный файл, какправило, будет несколько больше, чем GIF-файл для того же изображения.
PNG. Есть еще третий графический формат, конкурирующий за постоянноеиспользование в Web. Это формат PNG – Portable Network Graphic, который,несмотря на некоторые достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNGимеет все шансы стать очень популярным форматом в Web. Именно поэтому онвключен здесь в «большую тройку». PNG может поддерживать 8-разрядныеиндексированные цвета, 16-разрядные полутона или 24-разрядные полноцветныеизображения, используя схему сжатия без потерь. Это обеспечивает более высокоекачество изображений, а иногда и меньший объем файлов по сравнению с форматомGIF. Кроме того, файлы PNG имеют некоторые замечательные функции, например,встроенное управление коэффициентом гамма, и изменяемые уровни прозрачности(это позволяет показывать рисунок фона сквозь отбрасываемые мягкие тени).Размер файла. Без сомнения, именно графика сделала Webтаким, каким мы его видим сегодня, но как дизайнер вы должны знать, что многиепользователи испытывают к графике в Web чувство на грани любви и ненависти. Нестоит забывать, что графика увеличивает время, необходимое Web-странице для передачипо сети; большой объем графики означает существенное время загрузки, котороеиспытывает терпение читателя, особенно если он дозванивается с использованиемстандартного модемного соединения.
В этом отношении для Web-дизайнера существует единственное наиболееважное правило: размер файла графического изображения должен быть минимальновозможным! Создание изображений, предназначенных для передачи по сети,возлагает ответственность на разработчиков серьезно относиться к проблемевремени загрузки.
2.3Планирование информационного потока
МногиеWeb-мастера не тратят время на то, чтобы продумать информационный поток, аограничиваются только размещением текста и изображений на странице. Хотя намногих сайтах вы можете встретить хвастливые уверения, что у них гораздо большепосетителей, чем у конкурентов, однако это не самый лучший индикатор качестваисполнения. Лучшим показателем является время: если пользователи остаются навашем сайте достаточно долго для того, чтобы пройти по разным его уровням иразделам, то вы вправе быть уверенными в хорошо выполненной работе. Этоозначает, что они могут найти то, что им нужно, осмотреть остальное и безособого труда вернуться обратно.
Чтобы сделатьсвой сайт эффективным, я должна визуализировать поток информации и выбираемыепути. Другими словами, я должна видеть свой сайт с точки зрения пользователя.Процесс планирования может потребовать больших затрат труда, однако если ондоставляет мне удовольствие, то вполне вероятно, что мой сайт будетпревосходен.
2.4 Условия для создания успешного сайта
Самые лучшиеWeb-сайты — это те, которые привлекательно выглядят, емко выражают основнуюидею и не заставляют пользователей ждать получения информации на их экранахслишком долго. Некоторые условия для создания успешного сайта:
Четкосформулировать назначение сайта.Необходимо определить цели сайта, стараться формулировать цели настолько четко,насколько это возможно. Я хочу, чтобы сайт представлял продукцию компании Марс.После этого нужно задуматься о том, как продукция будет представлена, как позиционироватьпродукты на сетевом рынке. Без четко определенной цели сайт будет обречен назабвение где-то на задворках Всемирной Паутины.
Обязательнопродумать аудиторию. Кто будетосновной (и вторичной) аудиторией сайта? Какого они возраста? Чем онизанимаются? Сколько времени они проводят на сайте?
Использоватьбыстро загружаемые элементы.Причина номер один, почему люди быстро уходят с сайта (или не посещают егововсе) — слишком долгая загрузка информации. Большой объем графических файловвызывает желание как-то повлиять на ход событий, и самое простое — это нажатьна кнопкуStop, остановив загрузку.
Сделатьсайт визуально привлекательным.Несомненно, в Internet немало скучных сайтов. Возможно, делает их неинтересныминедостаток цвета и разнообразия текста, заголовков. Создавая свой собственныйсайт, необходимо помнить, что продуманное форматирование страниц приблизит сайтеще на один шаг к заветной цели.
Не пытатьсяразместить все на одной странице.Не нужно перегружать страницы слишком большим количеством информации. Все мызнаем, что писатели любят писать, а дизайнеры-графики — рисовать эффектныекартинки. Моя задача как разработчика сайта — создать тонкую гармонию междуэтими двумя очень различными группами людей, установить равновесие междутекстовой и изобразительной информацией.
Разумноорганизовать содержимое. Знакомоеутверждение, что содержание первично, а форма вторична. И это правда, но формаподачи содержания тоже важна. Сколько раз при посещении очередного сайта выговорили себе: «Здесь нет ничего интересного»? Возможно, где-тоглубоко внутри и захоронено что-то ценное, но откопать это что-то можно, лишьслучайно на него натолкнувшись. Информация, которую посетители должныувидеть, не нужно прятать вглубь сайта. Важную информацию необходимо сделатьнастолько легко доступной, насколько это возможно.
Воспользоватьсякартой сайта. Карта сайта может оказаться особеннополезной, когда возникнут трудности с представлением информации. Начните работус главной страницы и идите вглубь. Это визуальное представление поможет«увидеть» содержимое вашего сайта, более ясно организовать его иизбежать глобальных изменений при модификации сайта. Чем более четко я смогупредставить себе структуру сайта, тем больше у меня появятся новых идеи по егоулучшению.
3.Разработка Web-сайтапосвященного компании «Марс»
3.1Создание новой web-страницы (шаблона)
Длясоздания новой страницы в Dreamweaver я выбрала в меню Файл пункт Новый…или. На экране появится диалоговое окно Новый документ
/>
Выбираемкатегорию Стартовые страницы и загружаем один из шаблонов.
Шаблон— это особым образомподготовленная и сохраненная Web-страница, где уже имеются некоторые элементы,которые могут понадобиться (заголовок, сведения об авторских правах, элементыоформления и т. п.).
Послетого, как в главном окне программы появится наш шаблон, необходимо сохранитьнаш файл. На жестком диске необходимо создать отдельную папку (далее корневаяпапка), в которой будут находиться все файлы, необходимые для создания файла.Назовем эту папку Мой сайт. Для сохранения файла выбираем в меню Файлпункт Сохранить и в появившемся окне указываем путь сохранения Корневаяпапка.
/>
Задаемимя первой страницы glavnaya.html. Теперь мы можем найти созданнуюстраничку в правом окне экрана. По тому же принципу необходимо создать исохранить еще 6 страничек. Имена новых страниц задаются в соответствии ссодержанием страниц сайта (это необходимо для создания гиперссылок). Именазадаются английскими буквами.
3.2Ввод и форматирование текста
Начнеммы с того, что введем в нашу только что созданную Web-страницу текст иотформатируем его — расставим заголовки, выделим части текста полужирнымшрифтом и пр. В этом смысле Dreamweaver мало чем отличается от текстовыхредакторов.
/>
Текстнабирается с помощью клавиатуры при этом Dreamweaver самостоятельно разобьеттекст на строки. Чтобы создать новый абзац, нужно нажать клавишу .Если же надо просто перенести текст на другую строку (вставить так называемый разрывстрок), то достаточно нажать комбинацию клавиш +.
Текстовыйкурсор, т. е.мигающая вертикальная черточка, показывающая место, где будет появлятьсянабираемый нами текст, может перемещаться во всех направлениях с помощьюклавиш-стрелок. Также мы можем «листать» текст нажимая клавиши и мгновенно перемещаться к началу и концу строкиклавишами и . Чтобы быстро переместиться в начало иликонец документа, нужно нажать, соответственно, комбинацию клавиш+ или +. Мы также можемустанавливать текстовый курсор в произвольное место, просто щелкнув там мышью.
Вслучае ошибки мы всегда можем удалить неправильно введенный текст,воспользовавшись клавишами и . Первая при нажатииудаляет символ, находящийся слева от текстового курсора, и идеально подходитдля удаления только что введенного неправильного символа. Вторая удаляетсимвол, находящийся справа от текстового курсора.
Крометого, в окне документа Dreamweaver доступны такие операции, как перемещение(«вырезание»), копирование текста в буфер обмена Windows ипоследующая его вставка в место, где находится текстовый курсор. Это может бытьочень полезно, если нам нужно переместить фрагмент текста с места на место илипоместить похожие фрагменты текста в разные места документа.
Быстровыполнить все необходимые операции с текстом поможет специальная панель,расположенная снизу главного окна в программе Dreamweaver:
/>
Послетого, как необходимый текст набран и отформатирован, необходимо поработать сцветом. Цветовые параметры страницы тоже можно отредактировать при помощи этойпанели.
Длязадания цвета используется так называемый селектор цвета. Вот он
/>
Селекторцвета состоит из двух частей. Справа находится поле ввода, где вводится коднужного цвета в формате RGB. Выглядит это так — #RRGGBB, где RR — этошестнадцатеричное число от 0 до FF, задающее долю в окончательном цвете краснойсоставляющей, GG — зеленой, а BB —синей. Пример задания цвета в формате RGB — #336699 (это тускло-голубой цвет). Но вряд кто запомнит наизусть шестнадцатеричные коды цветов.Поэтому в левой части селектора цвета находится кнопка вызова окна выборацвета, которое в раскрытом виде показано на след рисунке:
Большуючасть этого окна занимает палитра, где, собственно, мы и ищем нужныйцвет. Найдя его, просто щелкаем по нему мышью, и окно выбора цвета закроется.
/>
Еслиже ни один цвет из палитры нам не подходит, мы можем с помощью того же курсорамыши (имеющего вид пипетки) «взять» нужный цвет откуда угодно: срабочего стола, из любого окна, из любого элемента управления, для этогодостаточно просто щелкнуть мышью по нужному месту экрана.
Зададимфон всей страничке. Я выбрала цвет #14285F. Соответственно теперь нужноизменить цвет шрифта, чтобы текст был удобнее читать. Я сделаю шрифт черным, азаголовки фиолетовым.
То жесамое необходимо проделать с остальными страницами будущего web-сайта, чтобы была выдержана единаястилистика текста. После всей проделанной работы в главном окне программы мыувидим следующее:
/>
3.3Работа с графикой
Графическиеизображения, предназначенные для размещения на страницах и хранятся в отдельныхфайлах. А в коде HTML этих страниц с помощью особых тегов ставятся своего родассылки на эти файлы. Встретив такую ссылку, Web-обозреватель загружает нужныйфайл и выводит содержащееся в нем изображение в соответствующем местеWeb-страницы.
Графическиеизображения и некоторые другие элементы страниц, также хранящиеся в отдельныхфайлах, называются внедренными элементами Web-страниц.
Форматовграфических изображений на свете существует очень много. Но в Web-графикепопулярны только три из них: GIF, JPEG и PNG. При разработке своего сайта яиспользуя только формат JPEG.
ФорматJPEG (Joint Pictures Encoding Group, группа кодирования неподвижныхизображений), напротив, замечательно подходит для хранения полутоновых изображений.Поэтому картины и сканированные фотографии хранят только в этом формате. Дляначала, все графические изображения, которые я буду использовать при разработкеweb-сайта, необходимо скопировать вкорневую папку. Если этого не сделать, при просмотре сайта в Web обозревателе вы не увидите желаемыхизображений. Чтобы вставить изображение на страницу сайта, нужно в меню Вставитьвыбрать пункт Изображение, и в сплывающем окне найти тот файл, который яхочу разместить.
/>
Послеэтой операции Dreamweaver поместит графическое изображение в то место, где наданный момент находится текстовый курсор.
Теперьдавайте щелкнем мышью по только что вставленному изображению, чтобы еговыделить. (Собственно, Dreamweaver автоматически выделит изображение сразупосле его вставки.) После этого вокруг изображения появится тонкая чернаярамка, на правой и нижней границе которой появятся небольшие черные квадратики.Это так называемые маркеры изменения размера. Можено«захватить» мышью любой маркер и перетащить его на новое место,изменив тем самым горизонтальный или вертикальный размер изображениясоответственно. А для того, чтобы оба размера изменялись пропорционально,перетащим мышью маркер, находящийся в правом нижнем углу изображения, принажатой клавише . Теперь сохраним получившуюся страницу, выделимизображение, если оно не выделено, и посмотрим на редактор свойств. Вот, что мытам увидим
/>
Поляввода Ш и В позволяют нам задать размеры изображения, введя его,соответственно, ширину и высоту вручную. Это может быть полезно, если выделенноеизображение — часть оформления сайта; в остальных случаях удобнее задаватьразмеры изображения, перетаскивая мышью маркеры изменения размера.
Такимобразом оформляем всю станицу. И наша страница примет вид, представленный нарисунке:
/>
3.4Создание гиперссылок
Обсуждаяотличие Web-страницы от Web-сайта, я выяснила, что Web-сайт — это наборWeb-страниц, связанных друг с другом. Но вот как эти самые страницы связываются,сказано не было. Пора прояснить данный вопрос.
Дляэтого используются гиперссылки— особые связи, ведущие от однойWeb-страницы к другой. Они имеют вид фрагментов текста, выделенных особымобразом (у меня они голубого цвета с подчеркиванием). Если по такой гиперссылкещелкнуть мышью, Web-обозреватель загрузит страницу, интернет-адрес которойуказан в параметрах гиперссылки.
Справой стороны, в каждом окне программы Dreamweaver я заранее создала такназываемую карту сайта. С помощью нее на сайте можно спокойноперемещаться при помощи гиперссылок по страницам и не бояться «заблудиться».
Давайтесоздадим на нашей первой Web-странице первую гиперссылку, указывающую на вторуюстраницу сайта istoriya.html
Выделимслова История и посмотрим на редактор свойств. Большое поле ввода Ссылкадля задания интернет-адреса для гиперссылки заметно сразу.
/>
/>После этого необходимо выбратьинструмент Указатель на файл и, удерживая клавишу мыши, перетащитьуказатель на необходимую страницу сайта, которые мы можем увидеть в соседнемокне программы Dreamweaver:
/>
Вграфе Ссылка появится имя указанного мною файла. Тем же самым способомнужно оформить все гиперссылки, которые я хочу сделать в своем web-сайте. Каждую страницу я оформляюидентичным образом, в результате чего я получила готовый Web-сайт.
Заключение
В данной курсовой работерассмотрены актуальные вопросы разработки и создания современного Web-сайта.
При этом мною были решеныследующие частные задачи:
– ознакомление ссовременными Интернет-технологиями и использовать их в своей разработке;
– изучение основныхпонятия и программы Dreamweaver, применяемой для разработки и созданияWeb-сайтов;
– ознакомление с методамии способами представления на Web-страницах различных видов информации (текстови изображений);
– ознакомление сосновными правилами и рекомендациями по разработке и созданию Web-сайтов инеукоснительное следование им в своей практике;
– определение структурыWeb-страниц;
– предоставлениепошаговой стратегии разработки web-сайта.
В результате проведенныхработ на базе выбранных технологий был создан прототип современного Web-сайта.
Список используемойлитературы
1. Дронов В. А. Самоучитель Macromedia Dreamweaver8. — СПб.: БХВ-Петербург, 2006
2. Алексеев А.П.Введение в Web-дизайн: учебное пособие. – М.:СОЛОН-ПРЕСС, 2008
3. Барысов Р.Постройте профессиональный сайт сами. – СПб., 2009
4. Печников В.Н.Сомоучитель Web-страниц и Wrb-сайтов. – М.: Триумф, 2006
5. Печников В.Н.Создание Web-сайтов без посторонней помощи. – М.: Триумф, 2006
6. Панфилов К. По тусторону веб-страницы. – СПб.: ДМК Пресс, 2008
7. Кроудер Д.Создание web-сайта для чайников: 3-е издание. – М.: Диалектика, 2009
8. Вильямсон Х. Универсальный Dynamic HTML / Библиотека программиста – СПб.:ПИТЕР, 2001