Создание сайта в Пензе
Быстрое создание сайтов

 (8412) 73-80-80(Пенза)

Сайт с нуля Сайт с нуля

АРХИВ РАССЫЛКИ "Сайт с нуля" - выпуск 11 - Прилизываем сайт (Веб дизайн)

Приветствую Вас, уважаемые люди!

С вами снова я, ведущий рассылки Алексей.

Ещё раз напоминаю, для тех, кто пропустил наши выпуски, или только что присоединился к нашей компании, архив рассылки "Сайт с нуля" можно найти на сайте: http://2aplusa.org/ras.html.

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

Вы следовали за моими рекомендациями и создали свой сайт. У каждого, наверное, уже есть пара десятков страниц. Остальные – догоняйте. Сегодня мы будем «причесывать» свои страницы.

Первым делом, мы подпортим ваш красивый дизайн :).

Художника, как известно, обидеть может каждый, а вот денег дать… :) . Денег не дам, но помогу советами.

Ну что, начнём? ;)

Есть готовая страница и очень даже неплохо выглядит. А вы пробовали изменить размеры окна в браузере? Сжимаем окно, увеличиваем. Меняем разрешение монитора на максимальный и минимальный, повторяем операции. Ну что, всё осталось, как вы хотели? :) . Молодцы, поздравляю. У кого не получилось, не расстраивайтесь. Многие даже профессиональные дизайнеры допускают такие ошибки. Это можно быстро доработать. Возьмем, к примеру, всеми любимый Яндекс. В качестве примера, как это делается можете зайти на 2 моих вроде бы одинаковых с виду сайта: http://2aplusa.ru и http://2aplusa.org. На первом сайте система такая же, как на Яндексе. При сжатии окна текст плывёт, границы страницы динамические. На втором сайте при максимальном сжатии текст остаётся выровненным строго по границе. При сжатии окна до минимальных размеров, появляются горизонтальные полосы прокрутки.

Ну что, исправляем? Запускаем программу Adobe Photoshop CS 2. Меню «Файл», команда «Новый». Вводим размер рисунка 1Х1 пиксель, жмём «ОК». Далее выбираем из меню «Слой/Новый» команду «Слой…». Жмём «ОК». Теперь в окне «Слои», в одноимённой вкладке кликаем мышью на слой с именем «Фон» и тащим его мышью на иконку с корзинкой внизу этого же окна. Получился прозрачный рисунок. Сохраняем его в формате GIF . Для этого в меню «Файл» выбираем команду «Сохранить как…». Вводим имя рисунка, выбираем формат GIF , жмём «ОК». В появившемся окне смотрите, что бы стояла галочка «прозрачность», жмите «ОК». В следующем окне жмём «ОК». Вот мы и получили прозрачную картинку 1 на 1 пиксель. Если воспользоваться «Сохранить для Web », а не «Сохранить как», то можно оптимизировать немного размер файла с картинкой. В первом случае размер будет 49 байт, во втором 43.

Вроде сделали. А зачем нам нужна эта маленькая картинка, её же все равно не видно? :) . А нужна она нам для того, чтобы принудительно ограничить сжатие размеров окна. Заодно с Adobe Photoshop познакомились :) . Вот, к примеру, если внутри страницы снизу поставить код < img src =” blank . gif ” border =0 width =500 height =1>, где blank . gif эта наша прозрачная картинка, то при размере окна меньше 500 пикселей будет появляться горизонтальная полоса прокрутки. Но размещение такой картинки только внизу страницы вовсе не означает, что не будут сжиматься некоторые элементы таблицы. Так вот, что бы они не сжимались, советую посмотреть, где у вас это происходит и поставить данный код по месту.

Ну вот, вроде бы всё хорошо, что дальше? А вы знаете о том, что кроме Internet Explorer (это такая программа с синей буковкой «Е» в кружочке) существует ещё несколько браузеров. Все они достаточно распространены. Так вот, ваша страница может отображаться в них по-разному. Самые распространенные программы для просмотра страниц это: Internet Explorer , Mozilla Firefox , Opera . Остальные программы рассматривать не будем, так как они выполнены на основе библиотек данных программ или ими пользуется очень мало людей. Если вы серьёзно решили заниматься своим сайтом, то их требуется поставить все. Давайте посмотрим, как выглядят наши сайты глазами большинства пользователей. Запускаем каждую из программ и проводим визуальный анализ. Большинство отличий и искажений может касаться страниц с ошибками, и тех страниц, на которых используются теги языка HTML , не вошедшие в стандарт. Прорисовка основных тегов может тоже отличаться. Так же могут стоять разные шрифты по умолчанию. Как это исправить, и что такое стили, мы узнаем в следующей рассылке. А пока, если у вас на странице всё наперекосяк, то, скорее всего, вы намудрили с таблицами или где то есть незакрытые теги. Проверьте всё повнимательней.

Всё исправили? А я вот так не думаю :). Давайте мы с вами отключим отображение графики на странице в браузере. Делаем после этого перезагрузку страницы. И что мы теперь видим? Ничего? :) Это самая распространенная ошибка как новичков, так и профессионалов. Первые об этом просто не знают. Вторые часто забывают. Все кнопки нужно обязательно подписать. В картинке в параметре “ alt ” обязательно вводим описание кнопки. Желательно на все картинки установить размер, т.е. заполнить параметры “ width ” и “ height ”. Если вы задаёте фоновый рисунок, то позаботьтесь о том, чтобы установить фон без картинки примерно похожий по цветовой гамме к рисунку. Иначе текст на странице или в таблице будет вообще не виден. Страница без картинок должна смотреться практически так же, как и с картинками. Многие пользуются просмотром страниц без картинок. Это экономит деньги и время.

Насчёт экономии времени и денег. Страница должна очень быстро загружаться, поэтому не стоит её перегружать лишними картинками. Если у вас на странице все же очень много графики, то позаботьтесь об оптимизации её размеров. В Adobe Photoshop CS оптимизировать картинки проще простого. Открываем картинку через команду «Открыть» в меню «Файл». А теперь сохраняем её через команду «Сохранить для Web » того же меню. Выйдет диалоговое окно, в котором играясь с настройками качества или формата изображения, устанавливаем самые оптимальные для нас настройки. Я лично устанавливаю качество изображения на грани потери. Примерно 60% по шкале. Все нужно смотреть на месте. Думаю, вы сами сможете разобраться с этой функцией программы. Это будет очередным вашим домашним заданием. Постарайтесь избегать очень больших картинок. Постарайтесь разбивать такие изображения на несколько частей.

Те, кто купил шаблоны для сайта, не закрывайте Photoshop . Сейчас я расскажу, как быстро вырезать из него графические элементы. Открываем файл шаблона *. PSD . В меню «Вид» подменю «Показать» устанавливаем галочку на команде «Фрагменты». На вашем рисунке появилась сетка. Каждая клетка это отдельный графический элемент дизайна. Редактируем названия кнопок с помощью инструмента «Текст» на панели инструментов. Далее объединяем все слои (меню «Слой» команда «Выполнить сведение»), сохраняем файл под другим именем. Это так, на всякий случай. Выбираем инструмент «Кадрирование». Подводим курсор ближе к левому верхнему углу какого либо элемента, нажимаем левую клавишу мыши и, не отпуская её, тянем в правый нижний угол того же элемента. Целиться не обязательно, достаточно попасть рядом. Вы увидите, что полученная рамка будет прилипать к краям элемента автоматически. Если этого не произошло, то тянем мышью за соответствующие бока выделенного кадра, пока он не совместится с нужным фрагментом. Выделили фрагмент? Я знал, что вы у меня молодцы :) . Жмём « Enter ». На экране остался только лишь один выделенный элемент. Сохраняем его через знакомую команду «Сохранить для Web ». Для следующего элемента делаем операцию отмены кадрирования «Редактирование/назад». Повторяем операции. И так со всеми элементами. Ну что? Просто? Я бы сказал, что очень просто :).

Ну что, посмотреть сегодняшнюю работу можно на нашем сайте: Гарри Поттер. И обязательно укажите мне на ошибки :) , люблю критику. Для отчёта: размер картинок сократился с 184 кб до 67 кб. Это почти в 3 раза. Вот теперь наши страницы будут грузиться в 3 раза быстрее.

И ещё одна важная на сегодня информация:

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

Открытые вопросы:

1. периодичность выхода рассылки и её содержание.
2. анализ этапов самостоятельного создания сайтов.

Открыт новый форум на сайте http://2aplusa.ru/forum для обсуждения по созданию сайтов.

И, конечно же, не забывайте писать ;), с удовольствием отвечу на ваши письма.

И напоследок. Поздравляю с днем святого Валентина. Любите и будьте любимыми!

Назад

Кис [12/07/08 10:30]
Блин, как мноа букав, ну ничё, бум читать, а куда деватся.....хоть от Баша отдохнуть..:)



Оставить комментарий
Имя*: Код*:
Текст*: