Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » 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 страничка же лолжна корректно отображаться вне зависимости от этих размеров.
Кроме того, текст на странице должен быть текстом а не рисунком. Ну и не стоит забывать о том, что вы должны стремиться к минимизации размеров страницы. То есть если вы выставите на странице чисто красный квадрат размером 300x300 пикселей как рисунок - то вы извращенец!
Вместо его у вас должен быть блок div или ячейка таблицы с красной заливкой.

Но главное: страница должна тянуться под контент.

Разумется, сразу появляется куча вопросов, вроде:
- какой текст сделать текстом, а какой придётся оставить рисунком.
- какие объекты должны тянуться, а какие можно оставить неменяемыми. Возможно они могут меняться только по вертикали, и только не более тогото и не менее чегото.
- как правильно выделять элементы, чтобы уменьшить размер страницы.
Ответы на эти вопросы непросты, и приходят с опытом. Вам придётся осваивать их самостоятельно, хотя в данной теме возможно вы найдёте ответы на часть из них.

Итак, вот эта работа начинается не в Dreamwaver, а в Photoshop.
Открываем макет, берём инструмент Slice Tool (кнопка K (английская) на клавиатуре) и начинаем вырезать "ножом" квадратики нужных размеров. Как правильно их разрезать и какие квадратики нужны? сохраните любую интернет - страничку на дриме и посмотрите, как порезанна она...
после чего жмём в меню File->Save For Web and Devices
в открывшемся диалоге двойной щёлчёк на каждом элементе позволит изменить его имя - это будет имя файла для данного кусочка. НИ В КОЕМ СЛУЧАЕ не оставляйте всё как есть, понапридумайте нормальное название каждому кусочку.
В свойствах кусочка (справа панель справа) укажите тип сохраняемого файла (gif или jpeg). Выбрать просто. Если изображение маленькое, то gif, большое - jpeg. Или ещё проще. если в gif изображение теряет внешний вид и яркость, то jpeg, если нет, то оставляем gif.

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

Последний раз редактировалось Асмодиан; 21.05.2008 в 22:25.. Причина: Добавлено сообщение
 
14 пользователя(ей) сказали cпасибо:
allcinemax (08.09.2009), BumbleBee (18.06.2010), Cronus (12.08.2008), Denis (07.12.2011), guitarharp (17.12.2009), kuzmadom (30.10.2008), Meerkat (13.01.2010), Nielson (10.04.2009), Oly (29.06.2008), Purple_rain (30.08.2009), static.design (03.12.2008), Zvezdochka (01.11.2008), Брат (19.09.2008), Лабрадор (09.01.2009)
Старый 21.05.2008, 22:25
Ссылки
Старый 22.05.2008, 00:54   #2
Блин, у нас с тобой мысли одинаковые! Я вчера только для сайта написал своего статью об этом же. Думал будет эксклюзив. Черт.
 
Старый 19.09.2008, 17:02   #3
Для начинающих верстальщиков полезная статья. Спасибо.
Где же продолжение?
 
Старый 29.11.2008, 22:02   #4
Сегодня наткнулся ещё раз на одну неприятную трабблу и сразу на способ решения её.
Итак, трабля: при указании какому-то элементу одновременно:
float:left;
margin-left:npx;
в IE6 отступ слева будет равен 2*n пикселов!!!
Удвоеннуй отступ, который попросту всё портит.

Решается, как оказывается данная проблемма весьма просто:
Код:
.xxx
{
    float:left;
    margin-left:npx;
    display:inline;
}
Причём валидация проходит на ура, остальные браузеры попросту игнорируют новую строчку (всё равно block), а IE6 отображает элемент как блок, но с нормальным отступом - то есть сие есть панацея нашей трабблы!!!
 
Этот пользователь сказал спасибо Асмодиан за это полезное сообщение:
Purple_rain (30.08.2009)
Старый 30.11.2008, 13:26   #5
Makarenya, Статья супер! Хочу только вот добавить, при создании макета в фотошопе ещё конечно желательно было бы со слоями работать. Я например новые элементы создаю на новом слое (конечно 99% тех кто на сайте наверно делают так же), так вероятность все испортить намного ниже

Последний раз редактировалось kost; 30.11.2008 в 14:16..
 
Старый 30.11.2008, 14:16   #6
Цитата:
Сообщение от sokol666 Посмотреть сообщение
Хочу только вот добавить, при создании макета в фотошопе ещё конечно желательно было бы со слоями работать.
А фотошоп желательно запускать на компьютере?
 
Старый 30.11.2008, 19:05   #7
kost, ну давай без стеба?
 
Старый 30.11.2008, 21:37   #8
Сам-то очевидное написал.

Правильно так: слои в фотошопе должны быть понятно названы и собраны в логичные группы.
 
Старый 30.11.2008, 22:24   #9
kost, согласен, признаю что неправильно выразился в том сообщении
 
Старый 21.02.2009, 01:33   #10
Цитата:
В меньшей степени для дизайнера, в большей для верстальщика, но нужна всем людям веб-профессий.
До сих пор не понимаю почему многие делят веб-дизайнра, на кодера и дизайнера (кто рисует макет). Я считаю что любой уважающий себя веб-дизайнер обязан знать языка вёрстки (на западе так оно и есть). Первая причина зачем это нужно, это понимание возможностей языков вёрстки. Само собой в веб возможно всё, НО как создать графику что-бы лучше было для вёрстки очень важно, даже если вы и не будите верстать.

Что касается стандартного блокнота windows, то я крайне не советую им пользоваться. Да он не засоряет код, но он орудие труда каменного века, в наше время есть сотни бесплатных, хороших замен блокнота, к примеру Notepad++, подсветка синтаксиса, удобство, бесплатность, и не скажу что он медленнее стандартного блокнота (нуда уж быстрее клика по мышке)...

А в целом статья очень не плохая.

Последний раз редактировалось Yoon; 21.02.2009 в 01:42..
 
Старый 21.02.2009, 01:33
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Урок по вёрстке Асмодиан Библиотека 21 30.11.2015 20:16
Adobe Flash в веб-дизайне. Практические советы. ghjafy Технологии Flash 2 06.12.2010 23:49
Советы по дизайну keeper10 Скамейка запасных 15 12.03.2010 13:06
Посоветуйте учебник по вёрстке Nielson HTML, CSS, JavaScript 25 18.06.2009 23:42
Книги по вёрстке... AceLightning Библиотека 17 08.07.2008 18:08


Текущее время: 10:23. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум