Цель: создать интернет-сайт с использованием программ Nvu и Gimp.
Перед началом работы необходимо загрузить из интернета и установить:
- визуальный (WYSIWYG) HTML-редактор страниц сайта Nvu
(URL: http://nvu.mozilla-russia.org/).
- графический редактор Gimp
(URL: http://www.gimp.org/).
Все программы, необходимые для выполнения данного урока, бесплатны.
Необходимый начальный вид главного окна программы Gimp изображен на рисунке 1.
Рис. 1. Начальный вид главного окна программы Gimp
(1 – главное меню программы, 2 – панель инструментов, 3 – цвета переднего плана и фона, 4 – настройки текущего инструмента, 5 – слои, каналы, отмена действий, 6 – кисти, текстуры, градиенты, 7 – окно изображения)
Порядок выполнения работы
1. Выбрать тему вашей работы (сфера деятельности компании, информационный сайт о которой нужно создать). Примеры тем приведены на странице http://freesofturoki.blogspot.ru/.2. Запустить программу Gimp.
3. Если программа Gimp запущена первый раз, то в некоторых случаях она состоит из 3 окон, что не совсем удобно. Чтобы переключить программу в однооконный режим, нужно выбрать пункт меню Окна → Однооконный режим.
4. Создать новое изображение (пункт меню Файл → Создать... → ввести размер изображения 1000 на 100 точек → нажать кнопку OK).
5. Найти в интернете, например, через сервис для поиска изображений в интернете на сайте Яндекс-картинки (URL: http://images.yandex.ru/) изображение товара по теме вашей работы размером не менее чем 1000 точек в ширину (задав при поиске размер картинок "большой") и сохранить его в какую-нибудь папку на диске.
6. Открыть это изображение в программе Gimp (пункт меню Файл → Открыть... → выбрать файл изображения → нажать кнопку Открыть).
7. Изменить размер изображения на 970xX. (пункт меню Изображение → Размер изображения... → ввести ширину 970 точек → нажать кнопку Изменить.
8. Вырезать из изображения полосу высотой 70 точек (пункт меню Изображение → Размер холста... → ввести высоту 70 точек → изменить параметр "Изменить размер слоев" на "Все слои" → курсором мыши переместить полоску на миниатюре изображения в наилучшую позицию → нажать кнопку Изменить размер. Если останется вырезанным не очень красивый фрагмент, то отменить эту операцию и повторить снова, выбрав другой фрагмент.
9. Сделать изображение более светлым (пункт меню Цвет → Яркость/Контраст... → увеличить яркость → нажать кнопку OK).
10. Запомнить примерный цвет всего изображения.
11. Перейти к созданному ранее белому изображению размером 1000 на 100 точек, выбрав его вверху на вкладке открытых изображений.
12. Выбрать запомненный ранее цвет как цвет переднего плана, нажав двойным кликом на прямоугольнике выбора цвета, расположенном ниже панели инструментов. Цвет фона "белый".
13. Залить градиентной заливкой всё изображение слева направо, выбрав инструмент Градиент, режим "Основной в фоновый (RGB)", форма "Очертания (сфера)" и нажав курсором мыши в левой части изображения, и, не отпуская левой кнопки мыши, переместить курсор в правую часть изображения, и отпустить кнопку мыши.
14. Нарисовать границу изображения цветом переднего плана (пункт меню Выделение → Выделить всё; выбрать инструмент Прямоугольное выделение на панели инструментов; кликнуть на изображении; задать параметры инструмента внизу слева: позиция 1 1, размер 999 99; нажать на клавиатуре клавишу Enter; выбрать пункт меню Правка → Обвести выделенное... → задать режим "Одним цветом"; сбросить галочку "Сглаживание"; ввести толщину линии "1,0" → нажать кнопку Обвести).
15. Выделить всё изображение (пункт меню Выделение → Выделить всё).
16. Скопировать изображение (пункт меню Правка → Копировать).
17. Увеличить высоту холста в 2 раза (пункт меню Изображение → Размер холста... → ввести высоту 200 точек → изменить параметр "Изменить размер слоев" на "Все слои" → нажать кнопку Изменить размер).
18. Вставить скопированное изображение (пункт меню "Правка" → Вставить).
19. Переместить вставленное изображение инструментом "Перемещение" в нижнюю белую часть изображения. Для точного перемещения можно временно увеличить масштаб отображения на 400 % внизу под изображением или через пункт меню Вид → Масштаб.
20. Объединить все слои изображения (пункт меню "Изображение" → Свести изображение).
21. Перейти к созданному ранее изображению товара размером 970 на 70 точек, выбрав его вверху на вкладке открытых изображений.
22. Скопировать изображение (пункт меню Правка → Копировать).
23. Перейти к изображению с градиентной заливкой, выбрав его вверху на вкладке открытых изображений.
24. Вставить скопированное изображение (пункт меню Правка → Вставить).
25. Переместить вставленное изображение инструментом "Перемещение" в центр верхней части изображения, так чтобы вокруг изображения осталась градиентная полоска одинаковой ширины (15 точек). Для точного перемещения можно временно увеличить масштаб отображения на 400% внизу под изображением или через пункт меню Вид → Масштаб.
26. Объединить все слои изображения (пункт меню Изображение → Свести изображение).
27. Выделить нижний левый угол изображения размером
15 на 100 точек инструментом Прямоугольное выделение.
28. Скопировать выделенный фрагмент изображения (пункт меню Правка → Копировать).
29. Вставить скопированный фрагмент как новый слой (пункт меню Правка → Вставить как... → Новый слой).
30. Переместить вставленный в верхний левый угол фрагмент изображения инструментом Перемещение в нижнюю часть изображения в позицию по горизонтали на 1/4 ширины изображения, так чтобы нижняя часть разделилась на 2 колонки (левая для будущего меню, а правая – для текста).
31. Объединить все слои изображения (пункт меню Изображение → Свести изображение).
32. Выделить нижний правый угол изображения размером 15 на 100 точек инструментом Прямоугольное выделение.
33. Скопировать выделенный фрагмент изображения (пункт меню Правка → Копировать).
34. Вставить скопированный фрагмент как новый слой (пункт меню Правка → Вставить как... → Новый слой).
35. Переместить вставленный в верхний левый угол фрагмент изображения инструментом Перемещение в нижнюю часть изображения в позицию по горизонтали на 1/4 ширины изображения левее вставленного ранее фрагмента.
36. Объединить все слои изображения (пункт меню Изображение → Свести изображение).
37. В верхней части изображения инструментом Текст поверх вставленной фотографии товара написать название сайта "Всё о ...", например: "Всё о картофеле". Шрифт выбрать на панели параметров инструмента любой, кроме Times new roman, цвет – любой, кроме чёрного.
38. Объединить все слои изображения (пункт меню Изображение → Свести изображение).
39. Создать направляющие линии для нарезки изображения для сайта (пункт меню Изображение → Направляющие → Создать направляющую → в появившемся внизу окне выбрать ориентацию направляющей (горизонталь или вертикаль), ввести положение и нажать кнопку OK). Необходимо создать следующие направляющие: вертикальные (15, 235, 250, 265, 985), горизонтальные (15, 85, 100, 115, 185).
40. Переместить три вертикальные направляющие с помощью инструмента Перемещение (режим "Выбрать слой/направляющую) так, чтобы эти направляющие разделяли изображение ровно по вставленным ранее двум фрагментам размером 15 на 100 точек. Для точного перемещения можно временно увеличить масштаб отображения на 400 % внизу под изображением или через пункт меню Вид → Масштаб.
41. Должно получиться изображение примерно как на рисунке 2.
Рис. 2. Изображение страницы в Gimp
43. Теперь нужно перейти к созданию шаблона страницы сайта.
Для этого выбрать пункт меню Фильтры → Веб → Нарезка для веба... В появившемся окне выбрать каталог экспорта HTML "Другой..." → нажать на папку с именем только на английском языке → ввести имя экспортируемого файла "istoriya.html" → ввести префикс имени файла "image" → указать формат изображения "jpg" → нажать кнопку справа от надписи "Изображения в отдельном каталоге" → нажать кнопку OK. Если папка выбрана правильно и файл имеет имя на английском языке, то в выбранной папке будет создана html-страница istoriya.html.
44. Открыть html-страницу istoriya.html с помощью браузера (Internet Explorer, Google Chrome или любого другого), нажав на ней. Убедиться, что страница сохранена правильно.
45. Открыть эту html-страницу в программе Nvu.
46. Удалить изображение в левом нижнем прямоугольнике, который обозначен номером 1 на рисунке 3 (здесь будет главное меню), и изображение в правом нижнем прямоугольнике, который обозначен номером 2 (здесь будет содержимое страницы), выделив их по одному курсором мыши и нажав клавишу Delete.
Рис. 3. Изображение страницы с номерами фрагментов в Nvu
48. В прямоугольнике 1 написать текст (этот текст может отличаться в зависимости от темы вашей работы):
Главное меню:
История
Производство (выращивание)
Рынок продаж
Известные марки (сорта)
Ссылки
49. В прямоугольнике 2 написать текст:
История
<Текст страницы>
50. В обоих прямоугольниках слово "История" сделать полужирным.
51. Весь текст в прямоугольниках сделать шрифтом "Verdana", уменьшить размер шрифта на 1. Должно получиться примерно как на рисунке 3.
52. Дважды нажать курсором мыши на изображении в прямоугольнике 3. В появившемся окне запомнить ширину изображения и нажать кнопку "Отмена".
53. Дважды нажать курсором мыши на левом нижнем прямоугольнике 1. В появившемся окне задать: высота "100" "% от размера таблицы", ширина: "<запомненная ранее ширина изображения>", единицы измерения "пикселов", вертикальное выравнивание содержимого "Вверху", цвет фона как примерный цвет картинки. Нажать кнопку OK.
54. Повторить предыдущие 2 пункта для изображения в прямоугольнике 4 и правого нижнего прямоугольника 2.
55. Задать выравнивание всей таблицы по центру (пункт меню Таблица → Свойства таблицы ... → выравнивание таблицы "По центру" → нажать кнопку OK).
56. Дважды нажать курсором мыши на белом прямоугольнике 5 над изображением 6 (этот прямоугольник появился после написания текста "Главное меню ..."). В появившемся окне задать: высота "100" "% от размера таблицы"; ширина: "15" "пикселов" и нажать кнопку OK.
57. Дважды нажать курсором мыши на изображении 6. В появившемся окне задать на вкладке Адрес: "Не использовать альтернативный текст", на вкладке Размеры задать размер: высота "100" "% от размера таблицы"; ширина: "15" "пикселов" и нажать кнопку OK.
58. Повторить предыдущие 2 пункта для прямоугольников и изображений 7 и 8, 9 и 10, 11 и 12.
59. Сохранить страницу (пункт меню Файл → Сохранить) и открыть эту html-страницу istoriya.html с помощью браузера, дважды нажав на ней курсором мыши в проводнике. Убедиться, что страница сохранена правильно. Если на странице появились белые вертикальные полосы, то нужно повторить последние 3 пункта для белого прямоугольника и изображения слева от вертикальной полосы, указывая ширину не 15, а на 1-2 больше или меньше.
60. Создать гиперссылки в главном меню. Для этого выделить слово "История" в главном меню в левом нижнем прямоугольнике, выбрать пункт меню Вставка → Ссылка, ввести адрес "istoriya.html" и нажать кнопку OK. Повторить эти действия для остальных 4 пунктов меню, вводя адреса "proizvodstvo.html", "rinok.html", "marki.html", "ssilki.html".
61. Сохранить страницу (пункт меню Файл → Сохранить) и закрыть программу Nvu.
62. Создать 4 копии файла istoriya.html в этой же папке. Для этого нажать в проводнике правой кнопкой мыши на файле istoriya.html и выбрать пункт Копировать. Затем нажать в проводнике правой кнопкой мыши на пустом месте и выбрать пункт Вставить 4 раза.
63. Переименовать созданные копии файла на "proizvodstvo.html", "rinok.html", "marki.html", "ssilki.html". Если в проводнике файл istoriya.html отображается как "istoriya" без расширения ".html", то при переименовании имена файлов нужно также писать без расширения ".html".
64. Открыть html-страницу istoriya.html с помощью браузера. Нажать последовательно на все пункты меню. Если имена файлов введены правильно, то при переходе по пунктам меню ошибок при открытии страниц не будет.
65. Открыть html-страницу istoriya.html в программе Nvu.
66. Выполнить поиск в интернете по вашей теме о продажах вашего товара другими компаниями в мире. Не желательно использовать материалы из других работ, рефератов и т.д.
Материал должен содержать следующее:
– историю создания, открытия или изобретения вашего товара;
– изготовление вашего товара с фотографиями аппарата или процесса производства;
– рынок продаж вашего товара в мире (или стране) с объёмами продаж (с цифрами);
– товары известных марок с фотографиями;
– список использованных статей (адреса статей с названиями статей).
67. Открыть найденный материал.
68. Запустить блокнот (Пуск → Все программы → Стандартные → Блокнот).
69. Выделить свой материал для страницы сайта "История", скопировать его, вставить в блокнот, выделить его в блокноте, скопировать, вставить в программу Nvu в правый нижний прямоугольник 2 вместо слов <Текст страницы>.
70. Сохранить все изображения, которые нужно будет вставить на страницу сайта в папку с файлом istoriya.html в подпапку "images". Чтобы сохранить изображение из интернета или из текстового редактора, нужно нажать на нём правой кнопкой мыши, выбрать пункт меню Копировать, запустить программу Gimp, выбрать пункт меню Файл → Создать → Из буфера обмена, затем выбрать пункт меню Файл → Экспортировать..., выбрать папку для сохранения, ввести имя файла и выбрать формат "Изображение JPEG", нажать кнопку Экспортировать, а затем кнопку Экспорт.
71. Вставить изображения в текст на страницу сайта в программе Nvu. Для этого установить курсор мыши в место, где должно быть изображение, выбрать пункт меню Вставка → Изображение, нажать кнопку Выбрать файл, выбрать изображение, нажать кнопку Открыть, указать пункт "Не использовать альтернативный текст" и нажать кнопку OK. Аналогично вставить остальные изображения.
72. Сохранить страницу (пункт меню Файл → Сохранить) и закрыть программу Nvu.
73. Открыть html-страницу proizvodstvo.html в программе Nvu.
74. Аналогично заполнить страницу материалом по теме "Производство вашего товара".
75. В левом нижнем прямоугольнике 1 слово "Производство" сделать полужирным, а слово "История" сделать не полужирным.
76. Сохранить страницу и закрыть программу Nvu.
77. Аналогично заполнить страницы материалом по темам "Рынок продаж вашего товара", "Известные марки (сорта) вашего товара", "Ссылки на сайты, с которых был взят материал".
78. Открыть html-страницу istoriya.html с помощью браузера. Нажать последовательно на все пункты меню. Проверить, чтобы все страницы открывались правильно.
79. Сайт готов. При желании можно разместить его в интернете, например, на бесплатном хостинге, скопировав на сервер все файлы сайта с изображениями, следуя инструкциям на сайте.
Комментариев нет:
Отправить комментарий