Проектирование и разработка сайта средствами Web Page Maker

Курсовая работа ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА САЙТА СРЕДСТВАМИ WEB PAGE MAKER

• ВВЕДЕНИЕ
• 1. СОВРЕМЕННЫЕ ИНТЕРНЕТ-ТЕХНОЛОГИИ
• 1.1 Web-дизайн и браузеры
• 1.2 Обеспечение доступности Web-страницы
• 1.3 Представление текста на web-страницах
• 1.4 Представление графики на web-страницах
• 1.5 Основные этапы создания Интернет-сайта
• 1.6 Стратегия разработки Интернет-сайта
• 2. ВОЗМОЖНОСТИ ПРОГРАММЫ WEB PAGE MAKER
• 2.1 Окна и панели инструментов
• 2.2 Основные операции
• 2.2.1 Расположение элементов страницы
• 2.2.2 Управление объектами страницы
• 2.2.3 Изменение размеров объектов
• 2.2.4 Управление слоями объектов
• 2.2.5 Блокирование элементов страницы
• 2.3 Создание web-страниц
• 2.3.1 Свойства страницы
• 2.3.2 Создание второй страницы
• 2.4 Гиперссылки
• 2.4.1 Редактор ссылок
• 2.5 Предпросмотр и публикации
• 3. Пример создания сайта средствами web page maker
• ЗАКЛЮЧЕНИЕ
• Список использованных источников
• ВВЕДЕНИЕ
• В данной курсовой работе рассмотрены возможности Web Page Maker для проектирования и разработки сайта. Кроме теоретических сведений в данной работе представлен пример создания экономического сайта средствами Web Page Maker. Интернет развивается довольно стремительно, это самая большая мировая компьютерная сеть. Пользователю приятно посещать те Web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера. Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в сети. Особую актуальность приобретает проблема разработки Web-сайтов учебных заведений и использование интернет-технологий в системе образования. Целями данной работы являются анализ использования Web Page Maker и разработка и проектирование сайта. Реализация поставленных целей возможна при решении следующих задач:
• · Обзор технических возможностей Web Page Maker;
• · Изучить теорию Web-дизайна;
• · Изучить Web-технологию;
• · Выявление достоинств и недостатков использования Web Page Maker для разработки сайта.
• Web Page Maker — это очень простой инструмент для создания Web-страниц. С его помощью можно создавать страничку даже не обладая никакими знаниями HTML. Web Page Maker содержит несколько высококачественных шаблонов, которые помогут начать работу. Также вместе с программой поставляются различные эскизы, Java — скрипты, таблицы, формы.
• 1. СОВРЕМЕННЫЕ ИНТЕРНЕТ-ТЕХНОЛОГИИ

1.1 Web-дизайн и браузеры

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

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

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

На рынке доминируют два основных браузера: Netscape Navigator и Microsoft Internet Explorer. Вместе они, включая все их версии, представляет примерно 90% используемых сегодня браузеров.

Эти два браузера конкурируют между собой за господство на рынке. Результатом их борьбы стала коллекция фирменных HTML-тегов, а также несовместимые реализации различных технологий. С другой стороны, конкуренция между Netscape и Microsoft в целом способствовала более быстрому развитию среды Web.

Большинство Web-авторов в своей работе ориентируются на Navigator и Internet Explorer, поскольку они занимают львиную долю рынка. Тем не менее, существует ряд других браузеров, которые можно принимать во внимание.

1.2 Обеспечение доступности Web-страницы

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

Большинство дизайнеров рекомендуют разрабатывать страницы в формате 640×480, чтобы при просмотре пользователям не пришлось применять горизонтальную прокрутку. Горизонтальная прокрутка всегда затрудняет восприятие, поэтому дизайнеры традиционно ее отвергают.

Все большее число разработчиков считает стандартным разрешение 800×600. И совсем единицы разрабатывают страницы для еще более высоких разрешений.

Достойный уважения Web-дизайн включает разработку страниц, доступных для пользователей с ограниченными возможностями, в частности по зрению и слуху. Консорциум World Wide Web объявил об инициативе Web Accessibility Initiative (WAI), которая ставит целью сделать Web более доступным для всех пользователей. Однако успех данной инициативы зависит от участия в ней рядовых разработчиков, которые могут (или не могут) создать Web-сайты в соответствии с поставленными задачами.

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

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

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

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

1.4 Представление графики на 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 существуют только на экране дисплея, будет технически правильно измерять их разрешение в пикселах на дюйм (ppi — pixels per inch). Другая единица измерения разрешения — количество точек на дюйм (dpi — dots per inch) относится к разрешению печатных изображений и зависит от разрешения печатающего устройства.

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

Практично создавать изображения с разрешением 72 ppi (это лучший вариант для представления на экране), обращая внимание только на общие размеры в пикселах. В процессе создания графики на Web можно вообще не использовать дюймы. Важен размер изображения по сравнению с другими изображениями на странице и общего размера окна браузера. Например, многие пользователи по-прежнему используют 14-дюймо-вые дисплеи с разрешением 640×480 пикселов. Чтобы гарантировать заполнение графической заставкой всего пространства экрана, лучше сделать его шириной не более 600 пикселов (учитывая, что часть пикселов справа и слева будет использована для окна и для полосы прокрутки). Размер остальных кнопок и изображений на странице следует измерять в пикселах относительно баннера, имеющего ширину 600 пикселов.

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

1.5 Основные этапы создания Интернет-сайта

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

· если разрабатывается сайт научного или академического содержания, особое внимание следует обратить на то, как сайт работает в Lynx (или в другом неграфическом браузере);

· если сайт предназначен для потребителей — например, сайт, который предлагает обучающие игрушки для детей, — внимание обращается на скорость загрузки и внешний вид сайта для AOL-браузеров;

· если это сайт для контролируемого окружения, например корпоративной, то точно зная, какой браузер и какую платформу используют ваши клиенты, вы можете показать все, на что способен этот браузер, включая звуковые эффекты — свистки, звонки и, даже, собственные разработки;

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

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

1.6 Стратегия разработки Интернет-сайта

Определив, какие браузеры использует большинство посетителей сайта, можно решить, какие Web-технологии целесообразно использовать в разработке. Точно так же можно определить, какую часть пользователей может быть проигнорирована при использовании таких средств, как Java или JavaScript. Оказавшись перед дилеммой различия функциональных возможностей браузеров, Web-дизайнеры разработали разнообразные подходы к решению проблем, отличающиеся по степени крайности. Разумеется, «правильный» способ поддержки того или иного сайта зависит от его назначения и аудитории.

Разработка простейшей страницы. Незначительная часть разработчиков придерживается идеализированного представления о том, что Web должен быть доступен всем. Также они могут считать, что способ внешнего представления должен находиться в руках конечного пользователя, а не автора. Они стремятся использовать только самый надежный, проверенный стандарт и убедиться, что страницы работают со всеми браузерами, включая Lynx и первые версии самых популярных браузеров. Разработка для последней версии. Еще одна группа разработчиков придерживается другой крайней точки зрения. Они создают страницы только для самой последней, новейшей версии популярных браузеров. Их не волнует, что страница не будет доступна для пользователей, использующих другие браузеры. Кроме того, существуют авторы, которые работают только с последней версией одного конкретного браузера. Заметим, что такой подход может быть вполне разумным в рамках сетей интернет.

Разделение различий. Большинство дизайнеров предпочитают идти на компромисс. В дизайнерских кругах распространена фраза о Web-страницах, которые «изящно деградируют» («degrade gracefully»), что означает использование новейших технологий, подобных DHTML или JavaScript, таким образом, чтобы обеспечивать функционирование страницы и на более ранних версиях браузерах.

Каждому — по потребностям. Другой удачный, но более трудоемкий подход — создать несколько версий сайта, рассчитанных на разные возможности пользователей. Некоторые сайты предоставляют пользователям самостоятельно решать, какую из версий они хотят посмотреть. Часто при входе на сайт пользователя просят сделать выбор между версией с полным набором эффектов и просто текстовой или между версиями — с фреймами и без них. Такой вариант передает управление в руки пользователя. Еще более один подход — автоматический запуск версии, соответствующей типу браузера, который делает запрос. JavaScript может задавать действия в зависимости от используемого браузера. Кроме того, страницы могут быть скомпонованы в процессе работы для конкретного браузера серверными включениями.

2. ВОЗМОЖНОСТИ ПРОГРАММЫ WEB PAGE MAKER

Web Page Maker — это очень простой инструмент для создания WEB — страниц. С его помощью можно создать страничку даже не обладая никакими знаниями HTML. Просто перетаскивать мышкой на рабочее пространство программы изображения, текст, музыку и видео. Во время работы можно с лёгкостью передвигать объекты по всей странице. Web Page Maker содержит несколько высококачественных шаблонов, которые помогут начать работу. Также вместе с программой поставляются различные эскизы, Java — скрипты, таблицы, формы и т. д. В программу встроен FTP-менеджер, с помощью которого можно опубликовать свой сайт в интернете. Программа настолько проста, что можно создать в ней сайт за очень короткое время.

Основные возможности:

· Не требуется знаний HTML и никакого опыта создания веб-страниц.

· Перетаскивание объектов — WYSIWYG дизайн.

· Возможность создавать сайты со многими страницами и, одновременно, элементарно ими управлять.

· Создание неограниченного количества сайтов.

· Наличие шаблонов веб-сайтов.

· Возможность использования каскадных таблиц стилей (CSS), чтобы контролировать отображение текста на вашем сайте.

· Сотни функций: эскизы, эффекты при наведении мыши, сценарии Java, таблицы, формы, фреймы и так далее.

· Возможность опубликовать все страницы вашего сайта одновременно, благодаря встроенной функции публикации.

· Совместимость со всеми видами браузеров, включая Netscape, Mozilla, Opera, а не только Internet Explorer.

2.1 Окна и панели инструментов Рисунок 1 — Главное окно Панель инструментов (Toolbar) содержит кнопки для вставки в документ различных типов объектов: изображений, текста, навигационных панелей и т. п. Например, можно вставить рисунок, нажав на соответствующую кнопку в панели инструментов. По желанию можно также вставлять объекты при помощи меню Вставить > Панели инструментов.

Рабочее окно отображает текущий документ, над которым можно работать. Это пространство, на которое можно перетаскивать (Drag and Drop) различные объекты.

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

На Вкладке страниц есть кнопки для добавления, клонирования (дублирования) и удаления страниц сайта. Здесь в виде списка показаны все страницы сайта.

Для переименования необходимо выбрать страницу, нажав правую кнопку мыши и щёлкнув Переименовать, затем ввести новое имя. При опубликовании проекта в сети странички будут носить то же имя, что и в панели сайта. По умолчанию имя первой страницы проекта — index. При опубликовании будет создан файл index.html. Домашняя страничка должна начинаться с index.

На Вкладке элементов отображаются все компоненты, входящие в текущую страницу списка.

2.2 Основные операции

2.2.1 Расположение элементов страницы

Web Page Maker позволяет перетаскивать объекты странички на любое место. После добавления объекта можно переместить его куда нужно и отпустить кнопку мыши. Можно использовать стрелки на клавиатуре для точного определения места объекта.

Для того, чтобы перетащить объект необходимо:

· Щёлкнуть на нём левой кнопкой мыши;

· Переместить, куда необходимо;

· Отпустить кнопку.

Для позиционирования объекта с помощью стрелок клавиатуры нужно:

· Кликнуть по соответствующему элементу;

· Воспользоваться клавишами Ctrl+стрелки для его перемещения.

Можно включить отображение линий сетки на веб-странице, это поможет более точно установить объект. Сетка отображается только в рабочем окне; на настоящей веб-странице она не видна.

Для отображения сетки необходимо выбрать пункт Показывать сетку в меню Правка .

Чтобы включить привязывание к сетке нужно выбрать в меню Правка > Привязать к сетке. При активации этой функции, объекты будут перемещаться строго в рамках размера клеточек указанной сетки. Это поможет более точно установить объект на веб-странице. Указатель границ показывает контрольный профиль (target outline), он может использоваться для позиционирования объектов в зависимости от разрешения экрана. Указатель границ отображается только в рабочем окне; на настоящей веб-странице он не виден.

Для отображения указателя страниц необходимо отметить соответствующий пункт в меню Справка .

2.2.2 Управление объектами страницы

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

Для выделения одного объекта нужно просто щёлкнуть на нём.

Для выделения нескольких элементов нужно удерживать нажатой клавишу Shift и нажать на те объекты, которые нужно выделить.

Для удаления любого объекта необходимо:

· Кликнуть на нём для выделения;

· Выбрать команду Удалить из меню Правка либо воспользоваться кнопкой Delete на клавиатуре.

Для копирования объектов страницы необходимо:

· Кликнуть на любом из них для выделения;

· Выбрать команду Копировать из меню Правка либо использовать комбинацию клавиш Ctrl+C;

· Кликнуть правой кнопкой на нужном месте рабочего окна;

· Выбрать команду Вставить из меню Правка либо использовать комбинацию клавиш Ctrl+V.

Для копирования объекта с одной страницы на другую нужно:

· Кликнуть на необходимом объекте на первой странице;

· Выбрать команду Копировать из меню Правка либо использовать комбинацию клавиш Ctrl+C;

· Переключится на другую страницу, выбрав её имя в Панели сайтов в правой части экрана;

· Кликнуть правой кнопкой на нужном месте второй страницы;

· Выбрать команду Вставить из меню Правка либо использовать комбинацию клавиш Ctrl+V.

2.2.3 Изменение размеров объектов

Для изменения размера объекта на странице необходимо:

· Выбрать необходимый объект;

· Переместить указатель мыши до границы или угла объекта, пока он не примет форму в виде двунаправленной стрелки;

· Кликнуть по специальному манипулятору, удерживая нажатой левую кнопку мыши изменить размер объекта до необходимых размеров;

Для изменения размера объекта на странице при помощи клавиатуры:

· Выбрать необходимый объект;

· Использовать комбинации клавиш Shift+стрелки и растянуть до необходимого размера. Для получения точного размера объекта на странице необходимо: Выбрать необходимый объект;

· Кликнуть правой кнопкой Свойства, появится диалог свойств;

· На вкладке Общие установить точный размер.

2.2.4 Управление слоями объектов

Web Page Maker позволяет перекрывать изображения и текст, чтобы получился более изысканный дизайн веб-страниц.

Можно использовать команду вынести на передний план для отображения объекта из группы многослойных объектов, чтобы вынести его на один слой вперёд. Чтобы вынести элемент на передний план необходимо:

· Кликнуть на объекте;

· Выбрать Вынести на передний план из меню Оформление.

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

Чтобы вынести элемент на задний план необходимо:

· Кликнуть на объекте;

· Выбрать переместить на задний план из меню Оформление.

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

Чтобы вынести на самый верхний слой нужно:

· Кликнуть на объекте;

· Выбрать вынести наверх в меню Оформление.

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

Чтобы вынести на самый задний слой нужно:

· Кликнуть на объекте;

· Выбрать Отправить назад в меню Оформление.

2.2.5 Блокирование элементов страницы

После того как расположен объект на нужную позицию, можно воспользоваться его блокировкой для предотвращения случайного сдвига объекта с предназначенного для него места. Для блокирования объекта нужно: Кликнуть на объекте;

· Выбрать команду Блокировать из меню Правка;

· Навести мышку на объект, он обозначен значком блокировки;

Для разблокирования объекта:

· Кликнуть на заблокированном объекте;

· Выбрать команду Разблокировать из меню Правка.

Можно воспользоваться командой Блокировать все/Разблокировать все, которая применяется ко всем объектам на странице.

2.3 Создание web-страниц С помощью Web Page Maker можно создать веб-сайт, содержащий любое количество web-страниц. Web Page Maker всегда называет первую страницу index. Это очень важно, т.к. первая страница web-сайта, домашняя страница, должна называться index.

2.3.1 Свойства страницы

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

Различные свойства страницы, такие как заголовок (название), автор, ключевые слова и описания могут быть заданы во вкладке Общие .

Заголовок. Определяет название документа, оно появляется в строке заголовка браузера.

Автор. Определяет имя автора документа, либо другую информацию, связанную с авторскими правами.

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

Описание. Здесь могут быть заданы краткое описание содержания документа или его назначение. Эта информация также используется поисковыми машинами интернета.

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

Чтобы добавить фоновый рисунок нужно:

· Выбрать изображение на локальном диске или добавить изображение из папки Фонов Web Page Maker;

· Нажать OK.

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

Чтобы добавить звук необходимо:

· Выбрать звуковой файл на локальном диске;

· Отметить флажок Зацикливать, чтобы музыка постоянно звучала при просмотре вашей страницы;

· Нажмите OK.

Если нажать на вкладку Внешний вид, вверху можно настроить, как страничка будет выровнена в окне браузера. Большинство веб-страниц выровнены по левому краю (слева) и по верху.

Для русскоязычных пользователей рекомендуется выставлять кодировку Windows-1251.

2.3.2 Создание второй страницы

Для создания пустой странички нужно:

· Нажать кнопку Добавить новую страницу в панели Содержание сайта с правой стороны экрана. (Чтобы скрыть или отобразить панель, нажать F8.);

· Появится новый пустой файл. По умолчанию Web Page Maker назовёт его «page2» .

Также можно создать вторую страницу, сделав копию первой.

Для создания копии первой страницы (index):

· Нажать кнопку Клонировать страницу в панели Содержание сайта с правой стороны экрана. (Чтобы скрыть или отобразить панель, нажать F8.);

· Появится копия этого файла. По умолчанию Web Page Maker назовёт его «page2». Удалить содержимое, которое не должно находиться на этой странице и добавьте новое.

Для переименования веб-страницы:

· Выбрать страницу, которую нужно переименовать в панели Содержание сайта;

· Кликнуть правой клавишей на имени файла и нажать Переименовать страницу;

· Ввести новое имя страницы.

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

2.4 Гиперссылки

Гиперссылка — это один из элементов веб-страницы (обычно это слово, кнопка, или изображение), который «указывает» на другую веб-страницу. Когда посетитель нажимает на ссылку в браузере, происходит переход на эту страницу, которая может располагаться как на том же сайте, так и на любом другом сайте в интернете.

Существуют два основных вида гиперссылок, которые используются в веб-документах: абсолютные и относительные.

Абсолютные пути представляют собой полные ссылки на указанный документ, включая используемый протокол. Например, http://www.webpage-maker.com/index.html — это абсолютный путь.

Относительная ссылка указывает на документ, как на некий ярлык, основанный на расположении целевого документа относительно к тому, который содержит ссылку. Пример относительной ссылки — «index.html» .

Стартовая (домашняя) страничка должна называться index

Домашняя страничка — это первая страница, которую видит посетитель при заходе на ваш сайт. Почти во всех сайтах она носит имя «index.html «. Некоторые сайты используют другие названия, однако большинство сайтов позволят использовать любое из названий по умолчанию.

2.4.1 Редактор ссылок

С помощью Web Page Maker очень легко добавлять ссылки на веб-странички. Редактор ссылок используется для всех операций со ссылками, напр. ссылка на др. страницу сайта, ссылка на страницу другого сайта, ссылка на файл или ссылка на email. В Редакторе ссылок существует 5 разделов: Тип (ссылки), URL, Закладка, Цель и Заголовок.

Рисунок 2 — Ссылка Необходимо выбрать тип ссылки из выпадающего списка.

Страница на моём сайте: ссылка на страницу на сайте.

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

При выборе этого типа ссылки, необходимо набрать в текстовом поле соответствующий URL. Адрес Email: ссылка на почтовый адрес. При выборе этого типа ссылки, наберите в текстовом поле после mailto: соответствуюший адрес. В этом случае будет запущена почтовая программа на компьютере посетителя вашего сайта. Адрес FTP: передача файлов может быть вызвана FTP-ссылкой. Это специально согласованный метод передачи файлов между компьютерами в интернете. Адрес FTP начинается с «ftp://», в отличие от веб-адресов, которые начинаются с «http:// «.

Закладка обычно используется для создания локальной ссылки на определённый участок веб-страницы. Типичный пример закладки — это использование ссылки «Наверх «, которая перенесёт посетителя с нижней части страницы к её началу, в случае нажатия на эту ссылку.

2.5 Предпросмотр и публикации

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

Для просмотра веб-страниц в браузере необходимо:

· Нажать кнопку Просмотр (F5) в панели инструментов;

· По окончанию тестирования просто закрыть страницу в браузере.

При просмотре страниц в виде HTML можно проверить работоспособность всех локальных ссылок на сайте.

3. Пример создания сайта средствами web page maker

Начинаем с создания пустой страницы. Добавим на страницу текст. Для этого нажмём кнопку Текст в панели инструментов. После двойного клика появится текстовое поле и затем окно Текстового редактора. Наберём нужный текст.

Для копирования текста из другой программы в Web Page Maker: скопируем текст в другой программе путём его выделения и нажатием Ctrl+C на клавиатуре, переключимся на Web Page Maker, вставим текстовое поле; дважды кликнем по появившемуся текстовому полю и вставим в него текст нажатием Ctrl+V на клавиатуре. Web Page Maker не сохраняет форматирование, которое использовалось в других приложениях.

Для выбора шрифта и его размера:

· Дважды кликнем по текстовому полю;

· В текстовом редакторе выделим текст, который хотим изменить;

· Выберем желаемый шрифт и его размер на панели инструментов текстового редактора.

Затем добавим на страницу изображение. Для этого нажмём кнопку Рисунок на панели инструментов или нажмём на стрелочку рядом с кнопкой Рисунок и выберем из библиотеки, выберем изображение на жёстком диске или в библиотеке программы, нажмём OK. Также можно перетаскивать изображения на веб-страницу при помощи мышки:

· Выберем папку с изображениями;

· Перетащим выбранный рисунок на рабочее окно Web Page Maker;

· Рисунок появится на странице.

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

Рисунок 3 — Свойства бегущей строки Для того, чтобы связать ссылками созданные страницы необходимо:

· Выделить текст или изображение на первой странице;

· Нажать кнопку «Задать гиперссылку» на панели инструментов. Появится диалог Гиперссылка;

· Выбрать «Страница на моём сайте «из выпадающего меню Тип.

Чтобы добавить таблицу стилей:

· В меню Формат нажмём Стили гиперссылок;

· Нажмём Добавить в диалоговом окне Стили гиперссылок. Появится диалог Добавить стиль;

Рисунок 4 — Стили гиперссылок

· Выберем стиль ссылки и нажмём «OK» ;

Рисунок 5 — Добавить стиль

· Дважды кликнем по текстовому полю на страничке. Выберем курсором нужный текст. Воспользуемся кнопкой Задать гиперссылку в панели инструментов Текстового редактора. Появится диалог Гиперссылка;

· Выберем созданный стиль из выпадающего меню в нижней части диалогового окна Гиперссылка Рисунок 6 — Гиперссылка Рисунок 7 — Первая страница сайта

ЗАКЛЮЧЕНИЕ

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

Интернет — это самая большая мировая компьютерная сеть. Пользователю приятно посещать те web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне web-браузера.

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

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

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

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

Кроме теоретических сведений в данной работе представлен пример проектирования и разработки сайта средствами Web Page Maker.

Таким образом, Web Page Maker — это очень простой инструмент для создания веб-страниц. С его помощью можно создавать страничку даже не обладая никакими знаниями HTML.

Список использованных источников

1. Крамер, Э. HTML: наглядный курс Web-дизайна / Э. Крамер. — Киев: Диалектика, 2001. — 304 с.: ил.

2. Леонтьев, Б. Web-дизайн. Руководство пользователя / Б. Леонтьев. — Киев: 2001. — 384 с ., ил.

3. Роббинс, Д. Web-дизайн. Справочник / Д. Роббинс. — «КУДИЦ-ПРЕСС», 2008. — 816 с.

4. Едомский, Ю. Е. Техника Web-дизайна для студента / Ю. Е. Едомский. — СПб.: БХВ-Петербург, 2005. — 491 с.

5. Дуванов, А. А. Web-конструирование. HTML / А. А. Дуванов. — СПб.: БХВ-Петербург, 2003. — 384 с.

6. Печников, В. Н. Создание Web-страниц и Web-сайтов / В. Н. Печников. — М.; изд. Триумф, 2006. — 370 с.

7. Смирнова, И. Е. Начала web-дизайна / И. Е. Смирнова — СПб.: БХВ-Петербург, 2003. — 491 с.