Поскольку многие люди не меняют настройку шрифтов, установленную по умолчанию, текст, находящийся в указанных тегах, будет выведен одним из шрифтов типа 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 автоматически выделит изображение сразу после его вставки.) После этого вокруг изображения появится тонкая черная рамка, на правой и нижней границе которой появятся небольшие черные квадратики. Это так называемые маркеры изменения размера. Можено "захватить" мышью любой маркер и перетащить его на новое место, изменив тем самым горизонтальный или вертикальный размер изображения соответственно. А для того, чтобы оба размера изменялись пропорционально, перетащим мышью маркер, находящийся в правом нижнем углу изображения, при нажатой клавише . Теперь сохраним получившуюся страницу, выделим изображение, если оно не выделено, и посмотрим на редактор свойств. Вот, что мы там увидим

Пензенский Государственный Университет

Кафедра: Коммуникационный менеджмент

Курсовая работа

Тема: Создание структуры Web-сайта

Выполнила: студентка гр.05ЗИЖ61

Тюрина Е.Г.

Проверила: Карпова М.К

Введение

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-сайта.

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

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

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

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

Но как 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-страницы и пр. В этом смысле они похожи на Блокнот, но значительно расширенный.

Изучив предметную область и собрав исходные данные можно представить предполагаемую схему сайта. Взаимодействие пользователя с сайтом можно представить как технологию «клиент-сервер». Клиент в данном случае это пользователь сети Internet, который осуществляет доступ к серверу посредством браузера. Сервером в данном случае является сайт. WEB-сервер обрабатывает запросы браузера на получение WEB-страниц и отсылает ему требуемые данные (рисунок 4). Обмен данными в сети Internet осуществляется на основе коммуникационного протокола TCP/IP и протокола более высокого уровня (приложений) HTTP.

Рисунок 3.1. Схема функционирования WEB-приложения

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

Корпоративный web-сайт просто обязан отвечать многим критериям: Общепринятые элементы управления должны восприниматься с первого взгляда.

Текстовая информация должна быть пригодной для комфортного чтения.

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

Для тех же, кому часто приходится пользоваться нашим web-сайтом, важно удобство выполнения их повседневных задач. Для них важно сократить количество необходимых шагов для решения задачи. Одного действия клиенту должно быть достаточно для получения подробной инструкции по приобретенному товару. Одного действия должно быть достаточно, чтобы получить актуальный прайс-лист, одного, чтобы узнать расписание работы и схему проезда. Контактные данные - телефоны, электронные адреса - вообще должны быть доступны сразу и всегда.

WEB-сайт компании «Ооо-Мегакомп»» организован из 6 основных, 8 тематических, 3-х подключаемых и множества информационных страниц, 6 страниц для вывода информации из баз данных, 3 подключаемые страницы.

Основные страницы

Index.html - главная страница содержит общую информацию о WEB-сайте и компании «Ооо-Мегакомп»».

company.html. - фотографии руководителей и информация о компании.

price.html - страница на доступ к прайс-листу. Копировальные аппараты, принтеры, «Ооо-Мегакомп», стоимость ремонта, скачать весь прайс-лист. На этой странице пользователь по ссылкам сможет загрузить интересующий его прайс-лист либо прейскурант для просмотра в браузере, или скачать прайс-лист к себе на компьютер для дальнейшего просмотра. Информация по прайс-листу выводится из базы данных.

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

Adres.html - страница позволяющая узнать посетителю сайта адреса филиалов фирмы guestbook index.php - страница со ссылками на форму для отправки сообщений (отзывов и предложений) в гостевую книгу и для просмотра гостевой книги.

Тематические страницы

Cat_copy. - тематическая страница с кратким описанием и фотографиями копировальных аппаратов имеющая ссылки на информационные страницы с подробным описанием.

Cat_monitor. - тематическая страница с кратким описанием и фотографиями мониторов имеющая ссылки на информационные страницы с подробным описанием.

Cat_sysbl. - тематическая страница с кратким описанием и фотографиями системных блоков, серверов имеющая ссылки на информационные страницы с подробным описанием.

Cat_print. - тематическая страница с кратким описанием и фотографиями принтеров имеющая ссылки на информационные страницы с подробным описанием.

Cat_material. - тематическая страница с кратким описанием и фотографиями расходных материалов имеющая ссылки на информационные страницы с подробным описанием.

Nov_copy. - тематическая страница с кратким описанием и фотографиями новинок копировальных аппаратов.

Nov_monitor. - тематическая страница с кратким описанием и фотографиями новинок мониторов.

Nov_print. - тематическая страница с кратким описанием и фотографиями новинок копировальных аппаратов.

Рис. 3.2. Структурная схема сайта

Подключаемые страницы.

Cap.htm - страница формирующая «шапку» со ссылками по сайту на всех основных и тематических страницах.

Bot.htm - страница, формирующая нижнюю часть экрана со ссылками по сайту на всех основных и тематических страницах.

Bot_2.htm - страница, формирующая нижнюю часть экрана со ссылками по сайту на всех остальных страницах кроме основных и тематических страниц.

Страницы для ввода - вывода информации из баз данных.

Price/Copir.asp - страница осуществляет доступ к прайс листу копировальные аппараты находящемуся в базе данных.

Gbook/showmes.asp - просмотр гостевой книги.

Формы

Gbook/book.asp - форма для добавления записей в гостевую книгу.

Источники данных

Guestbook.mdb - база данных гостевой книги, Price.xls - прайс лист в формате Excel табл. 2.2.

Скрытые страницы

Price/Monitor.asp - страница осуществляет доступ и изменяет содержимое прайс - листа.

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

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

• § 1. Виды структур сайтов
• § 2. Правильная структура сайта
• § 3. Число страниц сайта
• § 4. Навигационное меню

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

Идеальная структура сайта имеет один вход и один выход. Как это сделать, если сайт имеет множество страниц? В данном случае сайт будет иметь много входов и всего один выход. Посетитель заходя, на главную страницу, находит интересующую его информацию, под которой находится ссылка на страницу сайта, где ее можно найти. Таким образом посетитель продвигается от главной страницы в внутренним, что позволяет ему не пропустить ту информацию, которая будет ему интересна и полезна.

§ 1. Виды структур сайтов

1. Линейная - это структура, построенная по типу слайд - шоу. Пользователи просматривают web-ресурс страница за страницей.

Линейная структура сайта

2. Древовидная структура - самая популярная структура, которая подходит для всех видов сайта. Главное, что нужно помнить при построении «сайта-дерева» с многочисленными ветвями в виде страниц и «под - страниц», чтобы ресурс «рос» и развивался не только вширь, но и в глубь.

Древовидная структура сайта

3.Гибридная структура сайта - наиболее используемый вариант построение веб ресурсов. Представляет собой смешанный вариант линейной и древовидной.

Гибридная структура сайта

4. Решетчатая структура - довольно сложна и используется в основном в каталогах. Плотно связана с навигационным меню. Горизонтальные и вертикальные страницы логически связаны, что позволяет быстро переходить от одного элемента к другому.

Решетчатая структура сайта

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

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

Внешняя структура

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

Наиболее популярные mind map или Visio.

Создание сайта и его разделов - кропотливая и ответственная работа.

§ 2. Правильная структура сайта

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

Cделайте HTML карту сайта , на которой будут ссылки на все страницы сайта.

Cтруктура сайта должна быть упорядочена и понятна.

Пример чистой структуры URL:

• mysite.ru/Category1/Product1
• mysite.ru/Category1/Product2
• mysite.ru/Category2/Product3

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

На сайте не должно быть «битых ссылок» которые ведут на несуществующие страницы отдающие код 404. Такие ссылки могут привести к тому что поисковой робот уйдет с вашего сайта, а посетитель не найдет то чего хотел.

В URL используйте ЧПУ, например:

• правильно — site.ru/razdel/chto-takoe-chpu/
• неправильно — site.ru/category_id=2/?page_id=12/

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

На всех страницах сайта используйте навигационные цепочки (хлебные крошки) это поможет пользователям и поисковым системам легко ориентироваться на сайте.

§ 3. Число страниц сайта

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

Тексты на страницах сайта должны быть доступными и удобными для беглого просмотра. При необходимости текст можно оптимально разместить на нескольких страницах, связав их необходимыми ссылками.

СКОЛЬКО ДОЛЖНО БЫТЬ ВНУТРЕННИХ ССЫЛОК СО СТРАНИЦЫ САЙТА?

Определение количества ссылок на странице должно подчиняться следующим закономерностям:

• Если вы хотите продвинуть страницу в ТОП выдачи, то облегчить это попадание позволит перераспределение ссылок в пользу нужных страниц.
• Если вам нужно увеличить число ссылок на конкретную страницу можно, к примеру, проставив ссылку в сайдбаре или футере или еще какой-то подобной части - мы тем самым создадим «сквозную ссылку» и передадим на ту страницу, на которую ведет эта ссылка, часть веса со всех страниц ресурса (сайдбар ведь будет отображаться на всех страницах).
• Если же нужно увеличить вес каждой внутренней ссылки , то необходимо уменьшить их количество, например, убрать лишние виджеты (блок «Лучшие статьи», облако тэгов, самые популярные статьи и т.д.) и т.д.

Какой размер статьи на сайте должен быть для эффективного продвижения?

• Примерный размер статьи для эффективного продвижения должен быть 2500-3000 символов без пробелов. При этом текст статьи сайта должен быть разбавлен картинками, причём картинки нужно вставлять в текст статьи, а не за её пределами.
• Чем больше страниц на вашем сайте проиндексировано поисковыми системами, тем больше трафика ваш сайт может получать с поиска.

Почему полезно и нужно ежемесячно увеличивать количество страниц на сайте?

Публикуя на своём сайте уникальную, актуальную и интересную для целевой аудитории информацию о своей деятельности Вы:

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

§ 4. Навигационное меню

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

Навигационные компоненты включают в себя:

1. Глобальная навигация;

2. Локальная навигация;

3. Вспомогательная навигация;

4. Фильтры категорий, ценовых границ и т. п.;

6. Футер, дублирующий элементы глобальной, локальной и вспомогательной навигации страницы.

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

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

Главная страница→ Раздел→ Подраздел→ Текущая страница.

Все злементы в цепочке, кроме конечной, должны быть ссылками.

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

виды навигации

Виды навигации можно выделять исходя из двух критериев: функционального и визуального.

По функциям система навигации делится на следующие виды:

• Языковая - навигация, отвечающая за языковой интерфейс и отображение контента на выбранном пользователем языке.
• Основная - это наиболее важные разделы сайта, как правило меню.
• Глобальная - это те ссылки, которые должны быть видны с любой страницы сайта, например ссылка на главную.
• Рекламная - ссылки для привлечения посетителей на рекламные страницы сайта с расположением товаров и услуг.
• Тематическая - навигация по страницам сайта одной определенной тематики (рубрики).
• Текстовая - гиперссылки из текста на странице. С точки зрения юзабилити, они нужны для направления пользователя к упомянутому в тексте материалу. С точки зрения оптимизации - это грамотная перелинковка сайта.
• Указательная - по-другому, справочная. Гиперссылка указывает, в какой области сайта сейчас находится посетитель.
• Географическая - используется на сайтах, где имеются разделы, посвященные разным странам.

По визуальному оформлениювыделяют следующие виды навигации:

• Текстовая - совпадает с определением текстовой в функциональном плане. Это, пожалуй, самый древний вид навигации.
• Графическая - сейчас наиболее популярный вид навигации с графическим отображением, применяется для всех видов функциональной навигации.
• HTML-формы - помогают в экономии места с помощью выпадающих или открывающихся элементов.
• Java и Flash технологии - с помощью них можно организовать определенную реакцию на действия при наведении курсора, нажатии кнопок мыши или клавиатуры.

Развитие компьютеров позволило существенно расширить границы уже существующих областей жизни и бизнеса, и создать абсолютно новые. Именно благодаря компьютерным технологиям стали возможны программы для разработки трехмерного дизайна новых моделей Ford Mustang, Subaru Impreza, Renault logan и других автомобилей, проектирование домов и ландшафтов, появились электронные деньги и системы их мгновенных переводов по всему миру и так далее.
Но помимо этого, широчайшее распространение получил абсолютно новый вид сферы услуг – это разработка и поддержание веб-сайтов. Их использование практически безгранично – на собственной интернет-странице вы можете вести блог для друзей или писать стихи и прозу, проводить рекламные акции нового опель инсигния или бытовой техники, можете создавать фотоальбомы или хранилище видеофайлов, можете общаться с людьми по всему миру с помощью микрофона и веб-камеры…
Однако разработка сайта – достаточно сложный и многоступенчатый процесс, включающий в себя девять основных этапов.
Этап первый – работа с клиентом: важно правильно понять, что именно хочет ваш заказчик, как именно он представляет себе будущий сайт. Можно и даже нужно ознакомить клиента с вариантами уже готовых работ и вашими возможностями, лучше всего на конкретных примерах.
На втором этапе формируется техническое задание, в которое входит структура и перечень основных средств разработки сайта, калькуляция стоимости выполнения работы и её сроки, размещение сайта в Интернете, создание доменного имени и дальнейшая техническая поддержка ресурса.
Третий этап – утверждение технического задания заказчиком и подписание договора о выполнении работ, внесение аванса (обычно это 50% от общей стоимости заказа).
На четвертом этапе дизайнер создает эскизы главной страницы ресурса, которые формируются в фирменном стиле заказчика (если это юридическое лицо), а затем утверждаются с перспективой дальнейшей работы с сохранением этого же стиля оформления.
Пятый этап – разработка программных модулей и навигационной системы, html-кода и структуры в совместной работе программиста и дизайнера. Этот этап нуждается в информационных материалах, которые предоставляются клиентом.
Шестой этап подразумевает регистрацию доменного имени для сайта или размещение ресурса на уже существующем домене, который указывается заказчиком.
Седьмой этап – непосредственно прием сайта клиентом, подписание необходимой документации и внесение второй половины суммы гонорара.
На предпоследнем, восьмом этапе, производится финальное тестирование веб-сайта как заказчиком, так и разработчиком в течение недели или 10 дней – срок может быть оговорен в техническом задании. Выявляются и исправляются мелкие ошибки, могут вноситься изменения в информационную начинку ресурса.
Последний девятый этап – регистрация нового сайта в основных поисковых системах, а также в виде дополнительного сервиса – в системах рейтингов. Также на этом этапе может заключаться договор о технической поддержке ресурса разработчиком, если это не было оговорено заранее в контракте.

59.WEB-страница является контейнером для текста и изображений, размещаемых в интернете. Для того, чтобы создать WEB-страницу, надо использовать программу, которая может преобразовывать текстовый документ в гипертекстовый. Гипертекстовая разметка нужна не только для создания страниц в интернете. Она используется для подготовки писем электронной почты, электронных изданий. А также для создания обычных документов.Для создания WEB-страницы удобнее всего использовать мастер. Он запускается на вкладке WEB-страницы, вызываемой командой «Файл» «Создать». Разработаем для примера деловое письмо. Создание документа с помощью мастера можно поделить на несколько этапов:

На первом шаге надо выбрать тип страницы. Типы отличаются наборами готовых элементов. Это шаблоны документов, и их можно произвольно изменять. Выберем тип «Простая» (страница) и самостоятельно добавим все необходимые детали.

Следующий шаг – выбор стиля страницы, то есть художественного оформления. Редактор использует для создания стиля рисунки, которые находятся в папках пакета MS Offiсe. Выберем стиль «Загородный» - орнамент из листьев. На этом создание заготовки WEB-страницы заканчивается. Можно нажать кнопку «Готово», и мастер завершит работу.Теперь работа с WEB-страницей будет идти как с обычным документом. Здесь некоторые инструменты изменили свой вид. Например, исчез список для выбора размера шрифта, а его место заняли кнопки «Увеличить размер шрифта» и «Уменьшить размер шрифта». Создадим в самом начале документа новый абзац, выберем самый мелкий шрифт и введем адрес фирмы.

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

Осталось ввести текст письма, и документ готов.

Особенность WEB-страницы заключается в том, что для их оформления

можно применять стандартные элементы: линии, гиперпосылки, рисунки форматов GIF и т.д. Для их создания используется меню «Вставка». Документ можно редактировать и в режиме источника, если выбрать страницу «Вид» - «Источник HTML». Тогда будет понятно, как создана та или иная деталь страницы. Но этот режим полезен только для пользователей, знающих HTML. Если на WEB-странице неправильно отображаются русские буквы, надо открыть ее в режиме источника и исправить соответствующий атрибут элемента МЕТА. Сохранять WEB-страницы необходимо в оригинальном формате (документ HTML). В этом случае файлу присваивается тип НТМ или HTML. При конвертации таких документов в формат DOS или обратно некоторые параметры форматирования не будут сохранены.

Основные этапы создания веб-сайта:

1. Определение целей веб-сайта и его позиционирование

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

После определения целей сайта надо совершенно четко и как можно подробнее представить и описать целевую аудиторию сайта, т.к. это влияет на то, в каком виде будет представлена информация.

2. Создание Технического Задания (ТЗ) на разработку веб-сайта.

В ТЗ необходимо как можно более подробно описать:

Цели создания сайта и его целевую аудиторию;

Структуру веб-сайта и количество страниц в каждом разделе;

Работу динамических модулей;

Пожелания по дизайну (цвета, использоание фирменного стиля, соотношение графика/текст и т.д.

Используемые технологии (HTML, Flash, PHP и проч.);

Порядок предоставления, обработки или создания графической и текстовой информации;

Технические требования к сайту.

ТЗ является основным документом, на основе которого осуществляются все последующие этапы разработки веб-сайта.

Создание дизайн-макета веб-сайта.

На этом этапе дизайнер в специальной графической программе создает дизайн страниц будущего веб-сайта с прорисовкой всех графических (банеров, кнопок, фотографий) и текстовых элементов. Дизайнер создает дизайн веб-страниц с учетом пожеланий заказчика и задания, прописанного в ТЗ.

4. Верстка сайта.

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

5. Программирование сайта.

Очень часто этап программирования и верстки объединяют в один. На мелких и средний проектах оба действия в состоянии выполнить один человек. На крупных проектах в силу специфики работ эти этапы разделяют.

На этапе программирования (как правило, с использовавнием DHTML, PHP, Perl, ASP и баз данных) происходит создание всех страниц сайта, определяется порядок работы меню, расставляются гипер-ссылки, создается динамика на сайте, программируются такие составляющие, как гостевая книга, форум, новостная лента и проч.

6. Наполнение сайта информацией.

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

7. Расположение сайта в сети Интернет.

Данный этап необязательно выполняется после проведения всех вышеперечисленных работ. Он может проводиться параллельно с любым из этапов. Он заключается в том, что файлы сайта располагаются на хостинге.

8. Тестирование сайта.

Этот этап можно осуществить как до, так и после размещения сайта по его «родному» адресу. На этом этапе выявляются все ошибки и недочеты в программировании и написании текстов. Срок тестирования зависит от сложности проекта, но, как правило, не превышает 1 месяца.

60. Структура HTML - документа. Итак, HTML (Hyper Text Markup Language) - язык гипертекстовой разметки. Собственно, его появление и зарождение браузеров, которые способны распознавать и интерпретировать код html в понятное пользователям содержание вебстраниц положило начало развитию всемирной паутины (интернета), в том числе появлению информационных ресурсов (сайтов, блогов, крупных порталов и т.д.). Таким образом, используя язык гипертекстовой разметки, мы имеем возможность создавать свои проекты в сети. Для обеспечения единых стандартов был создан Международный Консорциум W3C, задачей которого стало не допустить анархии в использовании элементов HTML среди разработчиков.

Была определена спецификация языка разметки, которая изредка обновлялась. На данный момент последней версией является HTML 4.01, однако идут активные работы по внедрению 5 версии, отдельные нововведения уже поддерживаются популярными браузерами, поэтому проверка страниц сайта на ошибки, проводимого W3C validator, производится применительно именно к HTML 5, с отличиями которого от 4 версии можно ознакомиться на этой странице(правда, на английском языке).

Структура документа HTML - основные теги (html, head, body)

Если вы на какой-либо вебстранице кликните по ней правой кнопкой мышки и выберете из контекстного меню «Просмотр кода страницы» (в случае браузера Google Chrome), то в отдельной вкладке откроется текст, который и является html кодом, состоящим из совокупности тегов. Тегами называются команды языка HTML. Эти теги определяют то, что пользователи видят при просмотре.

Текст документа html, который определяет содержание того или иного элемента на странице, заключается между открывающим и закрывающим тегами (например, и ). Как вы могли заметить, названия тегов заключаются между угловыми скобками, а закрывающий тег отличается от открывающего только наличием в нем слэша. Здесь надо отметить, что на приведенном выше скриншоте отмечены три главных тега (html, head, body) вместе со специальным тегом DOCTYPE:

- специальный тег, который называют еще декларацией. Он начинается с угловой скобки и восклицательного знака и показывает, на какую версию html ориентироваться браузеру. Приведенный мной вариант написания декларации уже является детищем 5 версии языка разметки и поддерживается последними модификациями всех популярных браузеров, хотя в html 4.01 существуют несколько вариантов, например, такой:

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

head - внутри этого тега размещается служебная информация, которая необходима браузеру для корректной интерпретации html документа. Она не видна на открытой вебстранице.

body - между закрывающим и открывающим тегами будет помещена информация, отображаемая на web странице.

html - все содержание документа определяется эти тегом

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

Кроме этого, существуют теги, называемые пустыми, которые не требуют закрытия (например, тег br, определяющий перенос строки). В языке разметки существует строго ограниченный набор тегов для всех разработчиков, определенный консорциумом W3C, список валидных по версии HTML 4.01 тегов можно посмотреть на официальной странице

Структура документа HTML

HTML -документ заключается в теги и . Между этими тегами располагаются два раздела: раздел заголовка (элемент head ) и раздел тела документа (элемент body для простого документа либо элемент frameset, задающий набор кадров). Все указанные элементы имеют начальный и конечный тег.Секция заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера. Секция тела документа содержит текст, предназначенный для отображения браузером и элементы, указывающие на способ форматирования текста, определяющие графическое оформление документа, задающие параметры гиперссылок и так далее.Формально, согласно спецификации HTML 4+, первым в документе должен указываться элемент doctype, сообщающий браузеру об использованной версии HTML (а версии, как уже говорилось, различаются наборами допустимых элементов и правилами их объявления). В элементеdoctype указывается также адрес, с которого браузер может загрузить определение типа документа - Dtd (DocumentTypeDefinition). На практике же этот элемент зачастую опускают без ущерба для отображения документа.Браузер отобразит этот документ, выведя в строке заголовка своего окна текст "Самый простой HTML-документ", а в самом окне текст "Проще не бывает", причем параметры шрифта и цвет фона будут зависеть от умолчаний конкретного браузера. На практике, конечно, в разделе заголовка следует задавать определенную информацию. Для элементаbody могут быть указаны атрибуты, определяющие цвета текста и фон документа.Строгости ради надо сказать, что согласно спецификации HTML 4+ лишь два элемента документа являются обязательными:doctype и title.

61.Основные средства для автоматизации разработки Веб-страниц.Публикация Веб-сайтов .

В современной литературе наряду с термином Web-сервер часто используется термин Web-cайт или Web-узел .Для подготовки этих электронных изданий создано множество программных продуктов - от простейших HTML-редакторов до средств проектирования Web-страниц и Web-серверов.Наиболее заметные различия между Web-страницами и печатными публикациями касаются скорости их появления. Несомненно, время загрузки Web-страницы имеет существенное значение, но работа Web-дизайнеров в первую очередь зависит от требований, предъявляемых клиентами к темпам реализации проекта на всех его стадиях, начиная с рождения идеи и заканчивая ее практическим воплощением. Не менее важно и то, как часто клиент планирует обновлять содержание узла, а также добавлять в него новую информацию.В традиционной печати сроки выпуска изданий определяются графиками работ типографий и структур распространения. Как правило, новая интересная информация появляется в Internet гораздо раньше. Это объясняется наличием средств автоматизации проектирования Web-страниц и более сложных информационных структур - Web-серверов. Именно в этом особая роль и значение программных пакетов MacromediaDreamweaver и MicrosoftFrontPage.В данной главе рассмотрен один из наиболее распространенных программных пакетов автоматизированного проектирования Web-публикаций MacromediaDreamweaver.После того как сайт создан, его нужно опубликовать на Web-сервере. И сделать это можно тремя различными способами.Первый способ самый простой, но далеко не всегда самый легкоосуществимый. Заключается он в том, что все файлы сайта переписываются на дискету или более емкий носитель информации (дискета IomegaZip, магнитооптический диск, перезаписываемый диск CD-RW, лента стримера, обычный жесткий диск, в конце концов) и относится администратору Web-сервера. Администратор просто переписывает содержимое вашего носителя в соответствующую папку сервера и настраивает программное обеспечение.

Похожая информация.