Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Практические советы по вёрстке

Обсуждение темы Практические советы по вёрстке в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Итак, как стать дизайнером, вроде более менее расписали здесь . Но веб дизайнер дизайнером не станет, если он не понимает, что и как ...


Ответ
 
Опции темы
Старый 21.05.2008, 22:25   #1
Итак, как стать дизайнером, вроде более менее расписали здесь. Но веб дизайнер дизайнером не станет, если он не понимает, что и как из его работ реализуется.
А может быть вы и не собираетесь становиться никаким дизайнером, и хотите лишь "делать сказку былью", переводя макеты сайтов в html.
Также вполне возможно, что вам и это не интересно, а хочется создавать интернет - программы.

Так или иначе, но без знаний вёрстки вам все эти три пути заказанны!
Вёрстка нужна, вёрстка важна.
В меньшей степени для дизайнера, в большей для верстальщика, но нужна всем людям веб-профессий.

Данная тема - это практические советы всем верстальщикам, а может и просто для верстальщиков, которые заметили что-то новое или интересное и хотят поделиться с другими. Основа темы - полезное для вёрстки.


Ну начнём. Для начала (ну на первую страничку) хотелось бы расписать советы зелёным: тем, кто мучается вопросом: как эта фигня делается.

Ну для них и ответ: если вы вааще не знаете, как это делается, то сначала вам сюда. Как ознакомитесь хотябы с первой страничкой, можете возвращаться в эту тему.

Значит данная тема начинается с того, что у вас есть готовый макет сайта!

Если макета у вас нет, то откройте любой понравившийся вам сайт и нажмите PrintScreen. Считай макет готов

Итак, начнём с инструметария:
Создать html - страничку можно на куче редакторов.
Достаточно Блокнота. Да да, старого доброго блокнота Windows. Но я сильно покревлю душой сказав, что этого достаточно для новичка Вы попросту запутаетесь.
Можно созать html-страничку на Microsoft (MS) Word, но лезть в эту сторону - попусту терять время.
Вообще, перепробовав кучу редакторов, с уверенностью могу заявить, что верстать сайты можно только на двух программах от Microsoft
- Блокнот
- Visual Studio .NET (с уставновленным модулем веб-разработок)
Причём удобство на обеих примерно одинаковое, визуальный режим у Visual Studio устроен так хреново, что пользоваться им практически невозможно.
Программы же: MS FrontPage, MS Publisher скорее отдалят вас от понимания вёрски, а не приблизят. Их результат это каша, а не html


Наилучшей программой для вёрстки, которую я когда-либо видел, является Adobe Dreamwaver (далее дрим) (к сведению: есть Adobe Dreamwaver CS3, а есть Macromedia Dreamwaver MX и пр, это разные версии одного продукта, если у вас Macromedia - то всё ОК, лишь пара сомнительных фичей исчезает)

Если у вас генетическая отторжение дрима (проблемма может быть только на уровне вашего ДНК, причин в дриме не найти), то можно выбрать и другой, руководствуясь правилом:
- Если программа - редактор позволяет видеть непонятный код страницы, состоящий из куче надписей вида <body> (это и есть язык html), но не позволяет видеть готовую страницу, без отображения её в браузере (Internet Explorer, Mozilla Firefox, Opera или чтото подобное) то перед вами полноценный инструмент верстальщика, но жутко неудобный для новичка.

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

- Если же ваш редактор позволяет менять только внешний вид сайта, не давая (или затрудняя) доступ к чистом html коду, то самое лучшее ваше действие: зайти в панель уравления, в раздел установка/удаления программ (add/remove programms) и небедленно удалить это ГОВНО.
PS. Данное правило не относиться к MS Word, в нём просто забудтье про опцию "сохраняить в html", он для другого полезен будет.
Программы, только генерящее код лишь автоматом сделают вас скорее посмешищем, нежели верстальщиком.

Ну так вот: с главным инструментом разобрались: если хотите простоты и удобста, проверенного многими - выбирайте дрим, не хотите - ищите аналоги.
Если хотите, чтоб над вами ржали и не восприимали всерьёз - используйте Word, Publisher, Yaahoo SiteBuilder и прочую хрень (да и прекратите читать эту статью - не поможет).

Ну, с первым инструментом разобрались, но вёрска для вас всё-равно останется пыткой без ещё одного единственного инструмента: Adobe Photoshop. Создавать диз сайтов можно вообщето в любом проф. графическом редакторе, но вот для вёрстки Photoshop - безусловный лидер!

На самом деле не совсем так: я имею ввиду Adobe Photoshop CS3. Если же вы соберётесь использовать Photoshop более ранних версий, то в вёрстке он ничем не поможет, ранее использовалась программа Adobe ImageReady (идёт в комплекте с Photoshop). В версии CS3 все возможности ImageReady ушли в сам шоп.

Итак, установив себе пару этих пргограмм, вы можете начинать упражняться в вёрстке. Для начала хватит.

Добавлено через 41 минуту

С чего начнём.
Не уверен, что способен правильно определить путь быстрейшего освоения вёрстки. Для человека, абсолютно незнакомого с языками программирования и разметки, понять html сходу сложно, поэтому наверное стоит идти по тому-же пути, которым шёл я.
Этап 1.
Понимание самой структуры сайта:
Для начала закройте вид кода страницы, перейдя в визуальный режим, и попытайтесь набросать страницу (пока без графики, или вставляя какие-нибудь иконки). Первым для вас инструментом будет таблица. Начните с неё. в ячейки вставляйте рисунки и текст. изменять св-ва/размеры текста пока можно из propertyes
Попробуйте что-нибудеь сделать с её помощью, изменяя свойства вставляемых элементов с помощю панели Propertyes.
Такой подход для реальной вёрстки недопустим, но более - менее освоиться в построении страничек вы сможете.

Этап 2.
Понимание html. Если у вас хоть что-нибудь начало получаться, то снова откройте код сайта (не закрывая дизайна) и посмотрите - что получилось. Пользуясь визуальным позиционированием, пощёлкайте по элементом дизайна, взглянув во что они превращаются в коде.
Попробуйте дописать что-нибудь в коде так, чтобы это дало ожидаемый вами результат.

Сразу поясню что такое html.
Язык html - это язык разметки, программу на нём не напишешь, он лишь описывает внешний вид. Состоит "правильный" html (буду рассаматривать его разновидность xhtml) из текста, заключённого в управляющие структуры - тэги.
Каждый тэг имеет вид:
<имяТэга всякиеПараметрыТэга="ихЗначения">содержимое тэга</имяТэга>
тэг может не иметь содержимого, тогда он имеет вид:
<имяТэга всякиеПараметрыТэга="ихЗначения"/>

если вы пользовались только таблицами и рисунками, то у вашей станички будут следующие тэги:
<html> - корневой тэг, все остальные тэги находяться в теле тэга html
<head> - тэг заголовка страницы, внутри него находиться всякая информация, которая на самой странице не отображается
<tittle> расположен в теле тэга head и его содержимое - это название - заголовок страницы, отображаемое в заголоке браузера при открытии этой страницы
<meta> - служебные поля, расположенные в теле тэга head
<body> всё содержимое этого тэга - отображаемое содержимое страницы
<table> - таблица. - вся таблица описанна внутри тэга table
<tr> - ряд таблицы. - может находиться ТОЛЬКО в теле тэга table
<td> - ячейка таблицы. - может находиться ТОЛЬКО в теле тэга tr
А вот тело td - это её содержимое.
Все вышепредставленные тэги обязанны иметь тело, пусть ни из чего не состоящее, но завершить их мы обязанны.
А вот тэг img - картинка - не имеет тела по определению, и выглядит следующим образом:
<img src="путь к картинке" ... />
Если пути к картинкам начинаются с c:\ или d:\ или чтото в этом роде, то всё неправильно, и перенеси вы эту страницу (с картинками) в другое место, картинки пропадут.

Добавлено через 31 минуту

Этап 3
Немного патологоанатом... Расчленяй и собирай заново.
А точнее это резка матета и перевод его в html.
Данный этап нужно проводить одновременно со 2-м, возможну чуть позже.
значит вернёмся к существующему макету.
Какая главная разница между макетом и html -страницей?
Макет приспособлен к определённым размерам своего содержимого, html страничка же лолжна корректно отображаться вне зависимости от этих размеров.
Кроме того, текст на странице должен быть текстом а не рисунком. Ну и не стоит забыва