Работа во FrontPage. Создание таблицы.
Попробуем создать таблицу во FrontPage и начнем мы с
главной страницы.
Главную страницу надо обязательно назвать index.htm или index.html.
И обязательно английскими буквами, русскими никак нельзя! Кстати, .htm и .html
- это совершенно разные документы, поэтому выберите сразу, .htm или .html и придерживайтесь
всегда одного окончания. Не забудьте завести отдельную папочку специально для
сайта. Можно назвать ее, например, site
или mysite или еще как-нибудь по
своему усмотрению и складывать туда все документы, касающиеся нашего сайта.
А теперь открываем FrontPage и приступаем к
работе.
Замечали ли вы, что практически все сайты в сети
(кроме нескольких исключений) состоят из таблиц? - Если нет, то тогда зайдите
на Яндекс <http://yandex.ru/> или Рамблер
<http://rambler.ru/> и
внимательно посмотрите на экран. На некоторых сайтах присутствие таблиц можно
сразу и не заметить. Но они есть! В этом можно убедиться, открыв какую-нибудь
страницу во FrontPage.
Когда вы откроете, например, страницу Яндекса во
FrontPage, то тогда можно увидеть, что там очень много таблиц, выделенных вот
такими значками "-------" или "......". Это видно, когда
смотришь в Нормальный. А когда
заходишь в Просмотр, то эти таблички
уже не видны. Такие таблички с невидимыми границами очень пригодятся нам в
дальнейшем создании сайта.
Научимся создавать самые простые таблички. Делаются они очень просто: В меню Табл. - Вставка - Таблица вы выбираете нужное количество строчек,
колонок и т.д. Ничего сложного в такой таблице нет. Кстати, если таблица вам не
очень понравилась, ее надо выделить, нажать на правую кнопку мыши и выбрать
"Свойства таблицы". А там уже моно менять все по своему усмотрению.
Лучше работать сначала на белом фоне, но если вам больше нравится какой-то
другой фон, то зайдите в меню Формат -
Фон и выберите любой понравившийся вам цвет фона.
Задание 8. Сделайте несколько таких
табличек и напишите в них примерное содержание своей главной страницы, совсем
немного. Потом сохраните все, что у вас получилось под именем index.htm или
index.html (в дальнейшем index.htm) в своей папке. После этого откройте
index.htm в браузере, например, в Internet Explorer. Вам понравилось? Дизайн
немного слабоват, правда?
Задание 9. Опять откройте index.htm (в
дальнейшем - index) во FrontPage (в дальнейшем - FP) и немного поменяйте
таблицы и фон, но (!) не добавляйте пока никаких картинок. Теперь стало
красивее?
Существует еще одна функция FP, касающаяся таблиц.
Выделяете таблицу и вызываете меню Формат
- Границы и Тени. В пункте Границы и Тени слева есть три небольших
таблички. Вам надо выбрать вторую, которая находится посередине (коробка).
Дальше можно настраивать ширину, цвет, размер и общий вид таблицы по своему
усмотрению.
Что же должно быть на главной странице сайта? Это,
конечно, зависит от темы нашего сайта. Оформим свою главную страницу.
Сначала открываем наш index.htm во FrontPage. У нас
уже есть несколько табличек и кое-что даже написано. Сделаем каждую большую
таблицу шириной 90%, чтобы страница была видна у пользователя с любым
расширением экрана. Теперь в таблице надо написать название сайта, меню и
небольшое описание сайта.
Необходимо хорошенько продумать свое меню. Пусть в нашей косметической
фирме «Ручеек» в меню будет 5 пунктов:
1. О
компании (здесь будет информация
о нашей фирме)
2. Новинки (здесь будут описания новых
товаров фирмы)
3. Каталог
товаров (тут будет приведен ассортимент
товаров)
4. Контакты (телефоны и адреса фирмы)
5. Гостевая (здесь - отзывы посетителей
сайта)
Меню получилось довольно большое, потому что на
сайте предполагается сделать много страниц. Меню обычно располагается в левой
части страницы, иногда – вверху. Мы выберем левое расположение и внесем в
таблицу все пункты меню.
Задание 10. Заполнить
таблицу меню нашей фирмы «Ручеек».
Теперь надо
заняться дизайном. А именно цветовым сочетанием. Выберем прием, который
называется "оттенки одного цвета". В последствии вы сами будете
выбирать свои цветовые решения. И, конечно же, дизайн будет постоянно совершенствоваться,
это только начальный вариант. А вот фон мы оставим белым, потому что там будет
находиться фоновый рисунок.
Adobe Photoshop на сегодняшний день лучший
графический редактор. Выберем фон для своего сайта с его помощью.
Фон не должен быть слишком ярким, ухудшающим чтение
текста. Лучше использовать светлые фоны, тогда текст читается и воспринимается
намного лучше. Если же специфика сайта не позволяет вам использовать светлый
фон, обязательно готовьте версию для печати. Что это такое? Версия для печати -
это весь ваш текст, только черный и на белом(!) фоне. Распечатывать (и читать)
такой текст конечно же лучше, так как ваш посетитель не будет тратить лишнюю
краску принтера на фон.
Фон должен быть совместим с текстом. Например, на
белом фоне желтый текст практически не виден, а на розовом фоне салатовый текст
слишком кричит и выглядит вульгарно. И, конечно, главное условие - это чтобы
фон очень хорошо вписывался в тему сайта и в цветовые сочетания сайта.
Это относится к простым фонам. А теперь рассмотрим
возможность применения фоновых рисунков. Предположим, вы решили сделать фоном
какую-нибудь красивую картину. Очень яркую, красочную, живую и еще с массой
достоинств. Получилось все очень
красиво... картина-то какая! Теперь попробуем
посмотреть на сайт с таким красивым фоном глазами посетителя. Зашли вы на сайт,
например, "Книжный магазин РОМАНТИКА". Зачем вы туда зашли? Чтобы найти и, может
быть, купить нужную книгу. Зашли вы и видите эту необычайной красоты картину...
Внимательно приглядевшись, вы видите, что на картине написаны какие-то слова,
но слова-то мешают... Тогда любой нормальный посетитель берет и сохраняет эту
замечательную картину, а потом любуется ею уже дома на своем компьютере, но
больше на ваш сайт он не зайдет!
Поэтому надо запомнить главное при выборе фона - фоновый рисунок не должен
слишком выделяться. Самое важное на сайте - текст! Вот его посетитель и должен увидеть. А для того, чтобы его приятней и
удобней было читать, и делается все остальное.
Вот теперь создадим качественный фоновый рисунок. И
поможет нам в этом именно Adobe Photoshop.
Для начала мы попробуем сделать кирпичики. Открываем
Photoshop. В меню открываем новый файл (File-New).
Затем выбираем инструмент Заливка и цвет, например, оранжевый. Потому
что делать мы будем кирпичики!
Заливаем. Теперь будем делать кирпичи. Для этого в
Photoshop существует специальная функция, которая называется фильтры. И
кирпичи - это только один из очень многих существующих фильтров.
Задание 11. Просмотреть предлагаемые в Photoshop фильтры. Фильтров действительно
много, поэтому сейчас нам стоит рассматривать только Texturizer, с помощью которого делаются текстуры. Открыв опции Texture, можно увидеть, что есть
возможность сделать Brick (кирпич), Burlap (мешковину), Canvas (полотно) и Sandstone (песчаник). Надо выбрать кирпичики. Пользуясь Scaling (шкала), Relief (рельеф), а также направлением освещения Light Direction, можно добиться
желаемого результата в окне предварительного просмотра. После чего нажать
кнопку OK. И вот, кирпичики готовы!
Если вас полученный результат не совсем устраивает и
хотелось бы поменять цвет, изменить оттенок или еще чего-нибудь, то надо зайти
в меню Image - Adjustments - Hue - Saturation и, изменяя движки Hue (цвет), Saturation (насыщенность) и Lightness
(освещенность), подправить изображение по своему желанию.
Кроме настроек Hue
- Saturation имеются и настройки баланса цветов: Image - Adjustments - Color Balance, и настройки Яркости/Контраста:
Image - Adjustments - Brightness -
Contrast.
Но... может быть вы сделали что-то не так и вам
хочется вернуться к предыдущим вариантам? Для этого существует функция Window - History.
Как вы видите, все наши ходы записаны. И щелкнув по
любому из них, мы окажемся в нужном нам месте!
Задание 12. Попробуйте создать фоны с помощью других фильтров. А
также посмотрите на сайте рассылки <http://websuper.by.ru/> , где в
разделе Картинки <http://websuper.by.ru/anim.htm> вы найдете более 320 (на любой вкус!) фонов для своего сайта.
Например,
Мы хотим сделать фоном ... облака!
Что бы сделать облака, снова обратимся к программе
Adobe Photoshop, а именно к фильтру Clouds. Фильтр Clouds дает очень большие
возможности. С помощью него можно создавать дым, облака, стеклянную и водяную
поверхность, структуру металла, камня и еще много разного. А если совместить
фильтр Clouds с каким-нибудь другим фильтром, то может получиться просто изумительный
фон.
Для этого открываем Photoshop и создаем новый файл (File – New).
Облака сделаем голубыми. Выбираем голубой цвет (кстати, чтобы открыть таблицу
цветов, нужно зайти в Window - Swatches
и поставить там галочку, если ее там нет). Теперь в меню выбираем Filter - Render - Clouds.
Если вам не очень понравилось полученное
изображение, то, нажимая повторно фильтр Clouds (а еще проще, ctrl+F) можно выбрать другое расположение облаков.
Если голубой цвет получился какой-то
невыразительный, то с помощью команд
Image - Adjustments - Color Balance и Image
- Adjustments - Hue/Saturation можно немного изменить цвет облаков.
Теперь следует сохранить созданный фоновый файл с
расширением .jpg, поместив его в свою
папочку под именем, например, fon.jpg.
Теперь поместим наш красивый новый фон на нашей
странице. Для этого опять открываем наш index.htm во FrontPage и заходим в меню
Формат - Фон, где около "фонового рисунка" ставим галочку.
Если вы сохранили свой фон в своей папочке site (там уже должна находиться
главная страница - index.htm), то можно просто написать fon.jpg (расширение
.jpg лучше подходит для фона, чем остальные).
Задание 13. Создать новый фон с другой текстурой и поменять
прежний фон на главной странице вашего будущего сайта на этот новый фон.
Главная
страница у нас уже есть, но на ней пока присутствует только текст (не считая
фона). Хотелось бы ее немного приукрасить. И делать мы будем это с помощью
картинок. Сначала выберем картинки по теме сайта, например, ваш логотип,
фотографии продукции фирмы или чего-нибудь еще по вашему желанию. Поместим
выбранные картинки в папочку, которую назовем images.
Посетителю очень часто совершенно безразлично какой
у сайта дизайн. Дизайн должен быть просто аккуратный, ничего лишнего. Запомните,
что посетитель пришел на ваш сайт за информацией. Получит он ее или
нет, зависит только от вас. Если получит, да еще и в удобном виде, он
обязательно вернется снова!
Поэтому не нужно вставлять много картинок. Лучше
выбрать одну или две, но красивые и по теме сайта.
1. Картинка не должна быть слишком большой и тяжелой
(здесь говорится о "весе" картинки в кб или мб). Если картинка будет
слишком много весить, то она будет очень долго грузиться, посетителю это может
быстро надоесть. В лучшем случае он не обратит никакого внимания на огромную,
долго загружающуюся картинку (но подсознательно его отношение к сайту все же
станет негативным), а в худшем - он просто уйдет с сайта и, возможно, уже
никогда туда не вернется!
Главная страница в идеале
должна весить приблизительно 30 кб, максимум 50 кб, но это уже многовато.
2. Картинок не должно быть много. Особенно анимации.
Представьте себе, вы спокойно читаете текст, а рядом крутятся, вертятся,
моргают, искрятся разные анимированные картинки. Лучше сделать несколько
картинок, но со вкусом. Картинки не должны (как и фон) слишком привлекать к себе
внимание и отвлекать от всего остального.
Теперь поставим выбранные картинки на страницу
нашего сайта.
Делается это очень просто: в меню выбираем команды Вставка (Insert) - Рисунок (Image) - Из
файла (From file).
Если вы вставляете рисунок, который еще не находится
в папке site, вам нужно будет
выделить рисунок, нажать на правую кнопку мыши и выбрать пункт контекстного
меню Свойства рисунка. После этого в
поле Файл рисунка (Image file) написать надо image.gif (.jpg), если рисунок находится в папке site. Если рисунок находится в папке images (которую мы недавно создали для картинок), то надо написать images/image.gif(.jpg). Необязательно называть картинку image.gif(.jpg), можно
назвать и по-другому. Расширение
.gif или .jpg зависит от самого
рисунка. Например, фотографию лучше сделать с расширением .jpg
Задание 14. Вставить выбранные картинки и фотографии на вашу
страницу.
Предположим, мы решили поместить на сайт фотографию
или какое-то другое изображение. В этом случае очень часто возникает важная
проблема – выбор нужного размера изображения. Если картинка будет слишком
большая и будет много весить, то необходимо ее уменьшить. Сделать это очень
просто, если у вас есть программа Adobe
Photoshop. Хотя, даже если и нет, уменьшить изображение можно и в других
редакторах.
Итак, открываем Adobe
Photoshop. Выбираем File (Файл) - Open (Открыть) и находим
в нужной папке изображение. Теперь, не открывая его, посмотрим на величину (она
написана внизу)
Под фотографией прописан "вес"
изображения, например, 149 килобайт. Вообще-то, это слишком много. Теперь
откроем Image (Рисунок) - Image Size (Размер
рисунка). Диалоговое окно Image Size
(Размер рисунка) разбито на две части. В верхних двух окошках Pixel Dimenssions находятся Width (Ширина) и Height (Высота) изображения в пикселах, а
пиксел – это основная единица измерения разрешения экрана. Его можно увидеть,
выделив мышкой изображение и нажав несколько раз одновременно две клавиши
"Ctrl" и "+".
При максимальном увеличении мы обнаружим, что наше
изображение, оказывается, состоит из множества квадратиков, раскрашенных в
разные цвета. Вот каждый такой квадратик и есть пиксел. И чем большее
количество пикселов в нашем изображении, тем оно качественней и,
соответственно, имеет больший размер. И мы будем стараться найти такое
соотношение качества и количества, которое нас устроит.
Разрешение - это количество точек на единицу
измерения. В нашем случае - число пикселов на дюйм, а может быть и на
сантиметр. Это зависит от того, какой системой вы решите пользоваться.
Нормальное разрешение экрана - 72 пиксела на дюйм. Это и есть экранное
разрешение.
Данная фотография занимает, например, 640 пикселов в
ширину и 480 - в длину. Теперь, изменив показатели, можно уменьшить или увеличить
наше изображение.
Можно, кроме того, обрезать лишнее. Для этого нам
потребуется основная палитра. Если она скрыта, ее можно открыть, нажав Window (Окно) - Tools (Инструментальные
средства) в верхнем меню. Теперь нам потребуется самый верхний инструмент
слева - выделение. Выделите им ту часть, которую вы хотите оставить. За
пределами этой пунктирной линии останется все ненужное. Нажав Image (Рисунок) - Crop (Обрезать), вы
обрежете изображение по контуру.
После того,
как мы обрезали изображение, переходим к самой главной части - оптимизации
изображения под Web.
В верхнем меню надо выбрать команду File
(Файл) - Save for Web (Сохранить для Web) и перед нами откроется панель,
где вверху можно увидеть четыре закладки:
Original (Оригинал) / Optimized (Оптимизированный) / 2-up / 4-up. Выбираем закладку 2-up, и у нас появляется два
изображения, одно - левое - оригинал, а вот правое мы будем изменять
настройками, подбирая наилучший вариант. А если хотите, то можете выбрать
закладку 4-up, и у вас будут четыре
изображения, одно из которых - оригинал, а три других можно изменять настройками.
Теперь посмотрим вправо. В поле Settings (Параметры настройки) выберем вариант "jpg", тогда под ним станут
доступны в нижнем окошке варианты: Low,
Medium, High и Maximum. Перебирая
эти варианты, будем следить за изменением значений под оптимизированным
изображением, где показывается "вес" изображения, а также время его
вероятной загрузки. Надо стремиться к максимальному уменьшению файла, но при
этом качество изображения все-таки должно оставаться приемлемым.
Например, получается около 13 кб, т.е. 136 кб мы
убрали, причем фотография хуже не стала. Только улучшилась.
Задание 15. Изменить размеры и вес картинок на главной странице
вашего сайта.
|