Альтернативные методы 4 страница

Да, да, именно так. И хоть я где-то уже говорил, что можно обойтись и без макета, но потом решил, что все-таки это будет непедагогично — сразу приучать к некоторой вольности. Все же веб-дизайн основывается на предварительном макетировании. Можно, конечно же, держать все и в голове, особенно если макет несложный. Вот как наш, например. Но с другой стороны, когда складываешь рисунки и шрифты на рабочем столике в Фотошопе, то более отчетливо видишь картину. И вполне возможно даже, что первоначальная задумка изменится кардинально. Так что не станем лениться, а засучим рукавчеги и вперед, осваивать азы создания макета сайта в Фотошопе. Вот такой симпатичный макетик мы нарисуем:

Но прежде чем рисовать хоть что-то, необходимо хотя бы в общих чертах набросать карандашиком на обычном листе А4 будущий макет. Можно сильно не стараться, схематично так. Самое главное — определиться с расположением основных блоков: шапки, навигации и текста. В навигации нужно сразу же прикинуть сколько и каких будет разделов. Подобный рисунок, даже если вы второй Киса Воробьянинов, поможет вам “тронуться” с места, ибо пустой белый экран рабочего стола Фотошопа многих вводит в некий ступор, и непонятно — с чего начАть. Где брать картинки, если вы не Художник? Я не стану агитировать за честность и лояльность, дабы вы не передирали чужое. Скажу так: если кто-то выкладывает в сеть некие изображения (не авторское портфолио!), то уже в силу этого поступка дает понять, что не жмот и хочет показать Это всему миру. Так почему бы не взять Это и не воспользоваться? Повторяю: это не рисунки из портфолио автора, которые продаются за денги. Короче, чтобы не парить моск, заходите в Картинки-от-Гугля, называете в поисковой строке прэдмет и выбираете что душа пожелает. Ну а чтобы все-таки совесть не сильно кусала, то ссылка дадена на буржунет, а не на русский раздел гугля. Итак. Картинок насобирали, набросок на бумаге сделали, приступим к работе в Фотошопе. Для нашего сайта я заранее выбрал ширину в 800 пикселей. Страница будет выровнена по центру экрана вне зависимости от разрешения самого экрана. Поэтому и в Фотошопе сразу задаем размер по ширине в 800 px. Высота не так критична. Большинство сайтов имеют в высоту довольно приличные размеры. Я сделал 900 пикселей. Общий фон будет темно-серого, почти черного цвета. Фон контейнера, в котором и лежит страница, это вертикальная полоска размером 10х900 пикселей с плавным градиентом от красного к темно-серому. Каждый элемент макета мы рисуем на отдельном слое, чтобы можно было ими оперировать независимо. Если с “шапкой” и основным текстом ничего сложного нет, то вот навигация у нас будет устроена хитро. Для начала общим фоном сделаем красивейшую картинку “голоса Ветра” с нахлобученным на нем шлемом настоящего самурая. Сами разделы меню буду набраны обычным шрифтом. Но! Под неактивными разделами мы еще дополнительно положим полупрозрачную картинку прямоугольника. Когда наводим мышку на неактивный раздел, то эта картинка исчезает, и открывается нижний фон. Как это сделать я расскажу потом во время верстки сайта. На самом деле ничего сложного в этом нет. Обычный набор правил в листе стилей CSS поможет нам! Ну хорошо. Провозившись 10 часов подряд, перезагрузив зависший от натуги комп в пятый раз, мы наконец-то чего-то наваяли. Теперь надо это дело как-то сохранить. Для начала сохраняем макет в виде фотошопного же файла с расширением PSD. Он нам возможно еще пригодится. Затем делаем невидимыми слои с текстом, разделами меню и полупрозрачными картинками над последним. Чтобы остались только “шапка”, центральная часть с драконом и картинка “голоса Ветра”. Объединим эти слои в один. А затем выбираем из сумки инструмент под названием Slice Tool (Ножичег):

И, начиная с левого верхнего угла, разрезаем картину на отдельные кусочки. Все кромсать нам не понадобится. Вырежем лишь шапку, боковую и центральную часть. Фотошоп сам попилит все остальное, на это просто не обращаем внимания. Далее сохраняем как обычную картинку в “Сохранить для веб”. При этом Фотошоп сам сложит все кусочки в отдельную папку с именем image.

Вуаля! Это есть все. В результате у нас для оформления Главной страницы сайта вышло 5 картинок: полоска градиента, шапка, центральная и боковая части и плюс мы отдельно еще нарисуем полупрозрачный прямоугольник, по ширине и высоте немногим больше, чем раздел меню. Больше нам тут ничего не понадобится. Боковую и центральную картинки мы используем для соответствующих частей страницы в качестве фона, а картинка шапки будет играть роль эдакой большой ссылки на Главную страницу сайта. Автор: Игорь Квентор По материалам сайта: http://www.websovet.com/

Графика - советы для начинающих

Существует ряд стандартных ошибок, совершаемых начинающими веб-мастерами при работе с графикой. Чтобы не повторять их, следуйте приведенным ниже рекомендациям. Вводите alt комментарии к рисункам, потому что если у пользователя отключен показ графики, он не сможет понять что находится на данной веб-странице и уйдет. Никогда не используйте чужие графические элементы на своем сайте! Можно брать картинки из «клипарта», продаваемого на CD-дисках, но ни в коем случае не стоит «воровать» авторские кнопки, баннеры и прочие элементы. Опустим морально-этическую сторону и перейдем к практической. Все объекты, находящие на вашем сайте должны гармонировать с основным дизайном, в этом и состоит индивидуальный стиль. Но если вы будете использовать сторонние элементы, «заточенные» под конкретный сайт, вместо продуманного дизайна получится смешение стилей, и как результат, полное отсутствие какой-либо индивидуальности. В «клипарте» все рисунки, как правило, имеют стандартный вид, поэтому проблем с ними не возникает. Фоновый рисунок должен быть нейтральным! Прежде чем выбрать фоновый рисунок для сайта, подумайте о потенциальных посетителях ресурса: будет ли им удобно читать текст на таком фоне. Фоны «природной» тематики не используются профессиональными дизайнерами. Делите картинки большого размера на части! С помощью графического редактора, например Adobe Photoshop, изображение разрезается на части, которые затем «склеиваются» во время вставки в таблицу, размещенную на веб-странице. Таким нехитрым способом можно значительно увеличить скорость загрузки веб-сайта. Графические изображения могут быть использованы в качестве ссылок! Добавив в html-код строку <a href="адрес"><img src="адрес"></a>, вы получите обыкновенную ссылку. Только вместо текста будет использоваться изображение и при этом существует возможность работы с тегами, применяемые для формирования текстовой гиперссылки. Поддерживаются атрибуты BORDER (создает рамку), LINK (цвет обычной ссылки) и ALINK (цвет активной ссылки). Не забывайте о чувстве меры, польстившись на привлекательные анимационные картинки в формате gif. Пользователей в первую очередь интересует информация, на анимацию же они обращают внимание только в том случае, если она что-либо выделяет или из-за ее переизбытка невозможно быстро загрузить страницу. Графическое изображение, содержащее текстовые надписи, должно быть сохранено в gif-формате. Сохраняя изображения в этом формате, позаботьтесь о наличии прозрачного фона. Перед публикацией изображения в Интернете, оптимизируйте его (уменьшите объем файла) в графическом редакторе. Это способствует повышению скорости загрузки веб-страницы. По материалам сайта: http://web-silver.ru/

Оформление текста

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

Гарнитура шрифта
Размер шрифта
Начертание шрифта
Метод выравнивания

А теперь, каждый элемент рассмотрим подробнее и выявим основные требования к оформлению текста.

Гарнитура шрифта. Выбирается исходя из соображений комфортного чтения. Так как заголовки должны выделяться, допустимо применение отдельного вида шрифта большего размера, чем в основном тексте. Кроме того, характер шрифта «подстраивается» под тематику текста. К заголовкам серьезных материалов (экономика, политика, различные исследования) применяют строгий, аскетический шрифт без насечек, например Arial или Helvetica.

Размер шрифта.Размер шрифта согласуется с общим видом веб-страницы. Если для меню использовался шрифт размером 8 пунктов, для основного текста веб-страницы используется размер 10-12 пунктов, не более того. Для дополнительного текста (примечания, подрисуночные надписи) размер шрифта может колебаться в диапазоне от 8 до 9 пунктов, а вот оформление заголовков потребует увеличения размера шрифта.

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

Метод выравнивания.Существует четыре метода выравнивания: по левому краю, по правому краю, по центру и по ширине. Выравнивание по центру актуально для заголовков, по правому краю – для примечаний и дополнений, а по ширине выравнивается основной текст.

Форматирование текста в html-редакторе занимает слишком много времени, поэтому чтобы разместить на странице текст в том виде, в котором он был создан в текстовом процессоре, воспользуйтесь тегом <PRE>. Нужный текст заключается в контейнер <PRE>, в результате html-код страницы приобретает следующий вид: <pre> 1. В адресной строке введите https://addons.mozilla.org. 2. Нажмите «Дополнения» и в предложенном списке выберите понравившуюся программу. Начнется процесс установки. 3. Перезагрузите браузер. В зависимости от выбранного дополнения, должны появиться или новый пункт в меню «Инструменты», или значок в строке статуса. </pre> Работать с текстом удобнее всего в "визуальных" html-редакторах, так как в них предусмотрены наборы инструментов для форматирования, благодаря чему веб-мастер избавлен от необходимости ввода тегов вручную. Достаточно выбрать вид и цвет шрифта, или указать отступ, как программа самостоятельно внесет нужные изменения в код страницы. По материалам сайта: http://web-silver.ru/

Советы по WEB-дизайну

1. Правильно выбирайте шрифты. Удачный выбор шрифтов - залог успеха. 2. Под крупным шрифтом располагается мелкий шрифт. 3. Под толстой линией рисуется тонкая линия. 4. Если вы хотите создать логотип только из шрифтов, то комбинируйте буквы логотипа со специальными символами. 5. Текст всегда смотрится только на цветном фоне. 6. Оставляйте в документе белые места. Они помогают отдыхать читателю от обилия графики и текстовой информации. 7. Если вы что-то рекламируете, то используйте в тексте повторения. 8. Шрифт без засечек применяется только в заголовках. 9. Шрифт с засечками применяется при оформлении основного текста. 10. Чтобы создать иллюзию безразмерности, выносите ваши рисунки на самую малость за край полосы. 11. Служебные объявления всегда черно-белые. 12. Жирный шрифт и фотография - элементы одного дизайна. 13. Выравнивайте текстовые и графические объекты только одним способом, например, по центру. 14. Соблюдайте симметричность оформления графики и текста. 15. Изменяйте дизайн, не трогая основного стиля оформления вашего документа. 16.Текст над заголовками - всегда оформляется уплотненным шрифтом. 17. Вы должны так спроектировать свой документ, чтобы у читателя сложилось впечатление, что над документом была проделана огромная оформительская работа. 18. Применяйте принцип контрастности: на фоне текста, набранного светлым шрифтом располагаются жирные заголовки. 19. Заголовки оформляются одним шрифтом, а основной текст другим. 20. Чтобы текст хорошо читался, используйте широкие шрифты. 21. Если вы часто изменяете информацию, то используйте в оформлении шрифты, которые легко читаются. 22. Используйте подложки. 23. Дизайн заголовока, текста над заголовком и строки автора - всегда единый и гармоничный. 24. Строка автора набирается маленькими прописными буквами. Шрифт строки автора идентичен шрифту заголовка. 25. Шрифты должны сочетаться со всеми другими шрифтами вашего документа. 26. В одном документе используйте не более двух шрифтов. 27. Вставляйте в конец документа спецсимвол. 28. Цитата - внедренный текст. Шрифт цитаты идентичен шрифту строки автора. 29. Чтобы заголовок был заметным, оттените его или сделайте цветным. 30. Шрифт основного текcта должен гармонировать с шрифтом, которым оформлен заголовок. 31. Прочно привязывайте смысловую графику к соответствующему ей основному тексту. 32. Комбинируйте различные элементы дизайна. 33. Дизайн первой страницы вашего документа должен отличаться от дизайна всех остальных страниц. 34. Шрифт - это предмет искусства, а не набор символов. Все эти буквы рисовал художник! 35. Прежде чем начать создание вашего докуумента, проведите предпроектное исследование, то есть выясните для кого будет предназначена публикуемая информация: профессионалов, художников, технарей и т.д. 36. Помните, что внешний вид вашего документа зависит от количества начертаний и формы шрифта. 37. Помните, что в Web-страницах используются только файлы графических форматов JPEG и GIF. 38. Графика в документе HTML должна быть небольшой, иначе, ваш сайт останется незамеченным. 39. Обеспечьте доступ через свою страницу к другим классным документам WWW. Это означает, что вам нужно объединится с какой-нибудь крупной базой данных. Такой подход позволяет обратить внимание на ваш сервер даже в том случае, если он вообще никому не интересен. 40. Избегайте вложенных тэгов, то есть избегайте вставки в тэг других элементов HTML. 41. Выбирайте редактор таким образом, чтобы в нем была возможность присвоить унифицированный указатель ресурсов люблму объекту. 42. Создавайте зеркала вашего сервера. Помните о конечных пользователях. Гипертекстовые зеркала ощутимо не бьют по их карманам. По материалам сайта: http://karman.com.ua/

Работа с фоном

Пожалуй, редко возникают ситуации, когда можно сверстать страницу без использования атрибутов и свойств для работы с фоном. Фон присутствует везде: цвет фона надо прописывать для элемента BODY, фоновые изображения часто применяются в навигационных панелях (руки бы таким дизайнерам пооборвать), фоном делаются цветовые выделения заголовков и т.д. Короче, если с фоном не умеете обращаться, то тяжело вам придется… Древние реликты (HTML) Для начала взглянем на фон с точки зрения HTML. Точка зрения, надо сказать, не самая лучшая, но будем соблюдать хронологию. Итак, для работы с фоном у нас имеется два атрибута:

BGCOLOR - задает фоновый цвет элемента. Присутствует у элементов BODY, TABLE, TR, TH и TD. В спецификации HTML 4.01 помечен как нежелательный для использования;
BACKGROUND - задает фоновое изображение для элемента. Согласно спецификации HTML 4.01 присутствует только у элемента BODY и помечен как нежелательный для использования, однако браузеры поддерживают данный атрибут для элементов TABLE и TD.

Естественно, набор крайне ограничен и морально устарел года два назад. Но страшно сказать, какой процент кодеров пользуется только этими двумя атрибутами! Я догадываюсь, чем это вызвано. Хороший кодер достаточно ленив по своей природе, так что из этой лени должна логичным образом вытекать оптимизация труда и сокращение времени на кодирование. То есть надо быть в курсе всех нововведений, которые это самое кодирование облегчают. Плохой кодер ленью не наделен, по этой причине он упорно использует устаревшие (но проверенные) методы, трудолюбиво прописывая теги и FONT по 6 часов в сутки (два часа остается на таблицы:). Очевидно, плохих кодеров гораздо больше, чем хороших, поэтому использование морально устаревших методов в вебе дело привычное. Надеюсь, лень входит в число ваших достоинств, так что освоение нижеизложенного материала сократит время, которое вы проводите за кодированием, а времени на самообразование и Quake (Counter Strike, StarCraft, HMM 4 - нужное подчеркнуть) останется больше. Альтернатива новой эры (CSS) Я бы вообще не писал эту статью, если бы альтернативы не было. Альтернатива, как вы догадались, содержится в каскадных таблиц стилей (CSS). Вам будет приятно услышать, что в спецификации CSS-1 (второй уровень отложим до лучших времен) есть пять свойств для работы с фоном. Займемся ими, если не возражаете. background-color Задает цвет фона элемента. Главное отличие этого свойства от атрибута BGCOLOR в том, что с его помощью можно задать фоновый цвет для любого элемента. На первый взгляд, преимущество незначительное, однако после конкретного примера все становится на свои места. Допустим, нам надо сделать блок, в котором будет серый фон. С помощью HTML в таком случае без таблицы не обойтись, а вот с помощью CSS можно повесить стиль на элемент P, к примеру. Экономия кода налицо!

HTML (101 знак)

CSS (79 знаков)

Белый текст на сером фоне

P { background-color: #666; color: #FFF}... Белый текст на сером фоне

⇐ Предыдущая 1 2 345 6 7 8 9 Следующая ⇒

Поделиться с друзьями:

Дата добавления: 2015-06-27; Просмотров: 415; Нарушение авторских прав?; Мы поможем в написании вашей работы!

Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет

studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление

Генерация страницы за: 0.016 сек.