Визуальный HTML редактор Microsoft Expression Web как инструмент начинающему Web дизайнеру

Автор работы: Пользователь скрыл имя, 23 Июня 2014 в 02:20, курсовая работа

Краткое описание

Цель курсовой работы:
Описание элементов программы.
Пути создания сайта и предотвращение возможных ошибок.
Описание процесса создания сайта.
Проверка и публикация.

Содержание

Введение. 3
1. Знакомство с Expression Web. 5
1.1 Главное окно. 5
1.2 Задание размера страницы. 7
1.3 Панель задач и панель инструментов. 8
1.4 Дополнительная визуализация. 12
2. Создание сайта. 13
2.1 Сайт на основе шаблонов. 13
2.2 Работа со страницами, текстом и графикой. 19
2.3 Создание ссылок. 28
2.4 Публикация сайта. 33
Заключение. 36
Список литературы. 37

Вложенные файлы: 1 файл

Курсовая Работа (Full).doc

— 211.50 Кб (Скачать файл)

Для изменения ссылки щелкнуть правой кнопкой мыши по ссылке и выбрать из контекстного меню пункт Hyperlink Properties (Свойства ссылки). В окне Edit Hyperlink (Изменить ссылку) перейти на другую страницу, или ввести новый адрес прямо в поле Address, или выбрать какой-нибудь адрес из раскрывающегося списка, связанного с этим полем. Закрыть окно закроется, и выделенный текст станет ссылкой на другую страницу.

Удаление ссылки. Щелчёк правой кнопкой мыши по ссылке и выбрать из контекстного меню пункт Hyperlink Properties (Свойства ссылки). В окне Edit Hyperlink нажать кнопку Remove Link (Удалить ссылку). Окно закроется, и текст перестанет быть ссылкой.

Создание почтовой ссылки. Выделить текст, который должен стать ссылкой, щелкнуть правой кнопкой мыши и выбрать из контекстного меню команду Hyperlink. В окне Insert Hyperlink нажать кнопку E-mail Address (Почтовый адрес). Ввести тему письма и адрес, Expression Web автоматически добавит в начало адреса схему mailto. Окно закроется, и выделенный текст станет ссылкой на почтовый адрес.

 

Задание места открытия ссылки.

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

Для задания места открытия ссылки нужно щелкнуть правой кнопкой мыши по существующей ссылке и выбрать из контекстного меню команду Hyperlink. В окне Edit Hyperlink нажать кнопку Target Frame (Конечный фрейм). В окне Target Frame выбрать вариант New Window (Новое окно). Окно закроется, и откроется в окне Edit Hyperlink. Закрыть окно, и место открытия ссылки будет изменено.

 

Добавление всплывающих подсказок.

В Expression Web всплывающие подсказки называются ScreenTips, в языке JavaScript - tooltips, но, как ни называй, они очень часто встречаются в Web. Если провести курсором над ссылкой на какой-нибудь странице, появляется короткий текст, описывающий, куда ведет ссылка. Конечно, задавать этот параметр не обязательно, но, поскольку он помогает пользователям ориентироваться, то становится, весьма полезен.

Чтобы добавить всплывающую подсказку. Необходимо щелкнуть правой кнопкой мыши по существующей ссылке и выбрать из контекстного меню команду Hyperlink. В окне Edit Hyperlink нажать кнопку ScreenTip (Подсказка). В окне Set Hyperlink ScreenTip (Задать подсказку для ссылки) ввести текст подсказки. Закрыть окно, и откроется окно Edit Hyperlink. Окно закроется, и для ссылки будет задана всплывающая подсказка. Для проверки, нажать клавишу F12 для запуска браузера и провести курсором над текстом ссылки, чтобы увидеть всплывающую подсказку в действии.

Добавление закладок (якорей).

Закладки, или, как их еще называют, якоря, позволяют переходить в конкретное место длинной Web-страницы.

Закладка создается в два этапа. Сначала сама закладка (якорь), а потом - ссылка, ведущая на эту закладку. Чтобы создать закладку нужно выделить текст, на который будет осуществляться переход, то есть конечную цель закладки. Выполнить команду Insert => Bookmark (Вставка => Закладка) (Ctrl+G). В диалоговом окне Bookmark выделенный текст автоматически предлагается в качестве имени закладки.Так же можно изменить имя закладки. Так же можно сделать ссылку на закладку, для этого необходимо выделить текст закладки, щелкнуть по нему правой кнопкой мыши и выберите из контекстного меню команду. Hyperlink. В окне Insert Hyperlink перейти на страницу, содержащую закладку. Указать на нее в списке, который расположен в центральной части окна, и нажать кнопку Bookmark (Закладка). В диалоговом окне Select Place in Document (Выбор места в документе) выбрать закладку, на которую необходимо поставить ссылку. В данном примере есть всего одна закладка, но вообще-то на странице их может быть много. Закрыть его и снова откроется окно Insert Hyperlink. Для того чтобы убрать закладку нужно выделить текст, который раньше был помечен закладкой. правой кнопкой мыши щелкнуть и выбрать из контекстного меню пункт Bookmark Properties (Свойства закладки). Выбрать имя закладки и нажать кнопку Clear (Убрать). Нажать ОК, чтобы закрыть диалоговое окно. Выделенный текст больше не является закладкой.

Создание ссылок внутри картинки.

Можно поставить ссылку на всю картинку или создать внутри картинки так называемую ≪активную область≫ (hotspot). Организовав внутри картинки несколько активных областей, можно создать ссылки на различные страницы.

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

В окне Insert Hyperlink выбрать страницу, на которую должна вести ссылка, и нажмите ОК. Окно закроется, при этом для картинки будет создана ссылка, ведущая на указанную страницу.

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

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

Закончив рисовать, дважды щелкнуть мышью. Откроется окно Insert Hyperlink, в котором необходимо выбрать нужную страницу или закладку. В данном примере активная область ссылается на закладку. Нажать ОК. Окно закроется, а активная область станет ссылкой на указанную страницу. Повторив описанные шаги, чтобы создать другие активные области.

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

Чтобы увидеть границы активной области. Если не видно границы активной области, нужно щелкнуть по картинке и нажать кнопку Highlight Hotspots (Выделить активные области) на панели инструментов Pictures. Картинка исчезнет, а останутся только границы активных областей. Если снова нажать кнопку Highlight Hotspots, картинка восстановится, и можно подправить границы. Так же можно изменить или удалить ссылку для активной области. Для этого необходимо дважды щелкнуть по активной области. Откроется диалоговое окно Edit Hyperlink. Выбрав другую конечную страницу или ссылку для изменения или нажать кнопку Remove Link (Удалить ссылку). Окно закроется, а ссылка будет изменена или удалена.

2.4 Публикация сайта.

 

Перед тем как копировать файлы со своего компьютера на сервер, осталось сделать еще два важных шага. Во-первых, необходимо, что бы Expression Web проверил, не и осталось ли каких-нибудь ошибок, например ≪битых≫ ссылок или долго загружающихся файлов. Во-вторых, нужно просмотреть каждую страницу в браузере на предмет оценки ее внешнего вида. Когда все будет готово к публикации, понадобится Интернет-соединение с сайтом, если, конечно, речь не идет о копировании файлов в пределах локальной сети Интранет.

 

Проверка сайта.

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

Для того чтобы проверить сайт и исправить ошибки. Нужно выбрать из меню пункт Site => Reports => Site Summary (Сайт => Отчеты => Сводка сайта) или перейти на вкладку Web Site (Web-сайт) и из выпадающего меню выбрать пункт Site Summary (Сводка сайта). В главном окне появится отчет ≪Сводка сайта≫, в котором будет представлена сводная информация о сайте и перечислены найденные ошибки. Если обнаружены ошибки, например ≪битые≫ ссылки, двойным щелчком по соответствующей строке отчета, чтобы получить список страниц, в которых имеются ошибки указанного типа. Чтобы исправить отдельную страницу, представленную в списке, нужно дважды щелкнуть по ней. Появится диалоговое окно, в котором можно будет внести исправление. Повторить это нужно, пока не будут исправлены все ошибки.

 

Пометка страниц, подлежащих публикации.

Быстрый просмотр статуса публикации страниц сайта позволит пометить страницы, которые еще не готовы для всеобщего обозрения. Заодно можно опубликовать страницы, для которых раньше стояла пометка Don’t publish (Не публиковать), если работа над ними уже завершена. При выполнении просмотра не делается ничего такого, что фактически помогло бы подготовить страницы для публикации. Единственная его цель - предотвратить случайную публикацию неготовых страниц, показав, какие страницы будут опубликованы.

Публикация в Web.

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

Для публикации своего сайта нужно нажать кнопку Remote Web Site в нижней части окна Web site. В правом нижнем углу, главного окна отметить переключатель Local to remote (Локальный на удаленный). Нажать кнопку Publish Web site. Expression Web составит список файлов, которые нужно скопировать на сервер, что требует некоторого времени. Когда появится диалоговое окно Connect to (Соединение с), нужно ввести имя и пароль пользователя, который дал вам Интернет-провайдер или администратор Web-сервера.

После небольшой паузы (время зависит от количества загружаемых страниц и от скорости соединения) Expression Web приступает к копированию. В зависимости от настройки сайта могут появиться несколько диалоговых окон. Нажав либо кнопку Ignore and Continue (Игнорировать и продолжить), чтобы продолжить процесс публикации, либо кнопку Cancel (Отмена), чтобы еще раз проверить настройки. Когда загрузка закончится и вновь появится окно Web site, файлы из левого списка окажутся также и в правом. С помощью ссылок в левом нижнем углу окна можно просмотреть протокол, открыть только что опубликованный сайт в браузере или посмотреть его из Expression Web. Необходимо взглянуть на сайт и убедиться, что все в порядке. Если обнаружатся какие-то проблемы, нужно исправить локальную версию страницы и снова загрузить ее. Если же никаких ошибок не найдено, то все хорошо, сайт готов и опубликован в сети Интернет.

 

Заключение.

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

Так же в данной курсовой работе были рассмотрены и решены проблемы:

  1. Среда Expression Web и её структура.
  2. Создание сайта
  3. Редактирование текста и графики.
  4. Публикация и проверка сайта.

Каждая проблема была тщательно рассмотрена и проанализирована.

Цели, поставленные в этой курсовой, на основе проблем:

  1. Описание элементов программы.
  2. Пути создания сайта и предотвращение возможных ошибок.
  3. Описание процесса создания сайта.
  4. Проверка и публикация.

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

Объект этой курсовой работы Expression Web был полностью освящён в этой работе.

 

Список литературы.

  1. Немцова Т.И., Назарова Ю.В. Компьютерная графика и Web-дизайн. ИД "Форум", "Инфра-М" 2010. 288с.

  1. Бердышев С.Н. Искусство оформления сайта М. 2010.- 182 с.
  2. Едомский Ю.Е Техника Web-дизайна для студента БХВ-Петербург. 2005 Страниц: 392 с.
  3. Сырых Ю.  Современный веб-дизайн. М.,  2005. 368 с.
  4. Памфилов К. По ту сторону веб-страницы. СПб., 2008 438 с.
  5. Алексеев А. П. Введение в веб-дизайн. М., 2008 192 с
  6. Мержевич В. Приемы верстки веб-страниц 2008 30 с.
  7. Гаррет Дж.  Веб-дизайн. Элементы опыта взаимодействия. 2008 192 с.
  8. Кирсанов Д. Веб-дизайн  СПб: Символ-Плюс, 2004. - 376 с
  9. Дунаев В. «HTML, скрипты и стили». БХВ-Петербург 2007 816 c.
  10. Круг С. Веб-Дизайн, или не заставляйте меня думать. СПб.: Символ-Плюс, 2008.2008. 224 с.
  11. Гончаров А. Веб-Дизайн. самоучитель HTML ЗАО Издательский дом "Питер". 2002. 240 с.
  12. Печников В. Н. создание веб-страниц и веб-сайтов. М.: Триумф, 2006. 464 с
  13. Тарасова И. А. Создание сайтов, или сайтостроительство. 2002 М. 208 с.
  14. Кузнецов С. Хостинг Для Вашего Сайта.. СПб. 2007 . 310 с.
  15. Маркотт И., Отзывчивый веб-дизайн. М..2012 277 с.
  16. Макнейл П. Веб-дизайн. Идеи. Секреты. Советы. М.,2012. 272 с.
  17. Уайт Я. В. Редактируем дизайном. Университетская книга, 2009 251с.
  18. Райтман М. Визуальный дизайн: основы графики и предпечатной подготовки с помощью инструментов Adobe. Рид Групп 2011. 685 с.
  19. Уэйншенк С. - 100 главных принципов дизайна. СПб. 2012 272 с.
  20. Леонтьев Б. Веб-дизайн. Тонкости, хитрости и секреты. Солон-Пресс. 2003. 639 с.

Информация о работе Визуальный HTML редактор Microsoft Expression Web как инструмент начинающему Web дизайнеру