?
@
   Сирийские таблицы  
Заметки web-дилетанта (старая версия)

Назад 21.08.2004 Вперёд
[ Архив заметок ]
Я, безусловно, самый грамотный, самый умный автор в Рунете. Кроме того — отличный стилист. Однако вы запросто сможете доказать, что это далеко не так: выделите орфографическую, грамматическую, стилистическую или другую ошибку (слово, знак) на этой странице мышью и нажмите Ctrl+Enter. Выделенный текст будет немедленно выслан на e-mail зазнавшемуся автору, как очередное подтверждение его несовершенства.

 Macromedia Dreamweaver. Дрёмаваявер или очертания сетевых грёз. Вступление


Итак, Macromedia Dreamweaver первая вступительная заметка из примерно десяти. Основная идея показать удобство использования и дать некоторые представления о возможностях этого замечательного инструмента web-разработки

 

 

 

Если подходить к оценке объективно, Macromedia Dreamweaver — просто хороший продукт, делающий именно то и именно так, что и как он должен делать. Но для тех, кто начинал практическое освоение веб-дизайна с Microsoft Frontpage, Adobe Pagemill или какого-то другого WYSIWYG-редактора веб-страниц, Dreamweaver может стать настоящим откровением.

Дмитрий Кирсанов (о Dreamweaver 1.2)

 

Предмет: Macromedia Dreamweaver — визуальный редактор вебсайтов и вебстраниц, позволяющий одновременно c графической вёрсткой работать с html-кодом и код этот не портящий внутренними тегами. Описание практики создания отдельных html-документов и организация их в структуру сайта. Основные этапы создания, публикации и развития малых проектов. Ссылки на учебники, руководства и статьи по Дримвейверу.

 

Что? Почему? И почему не word и не notepad

Итак, центральной фигурой нашего повествования выступает Macromedia Dreamweaver 3/4/MX/2004. Вы получаете заметки с определённой долей смысла, мне же всё это поможет немного систематизировать сведения об этом редакторе и возможно привлечь ещё некоторую степень внимания к этому сайту.

Я пишу эту статью, как и делаю страницу, в свободное время. Хуже того, моя основная работа никак не связана с web-дизайном и даже просто с дизайном или вёрсткой. Мой текущий жизненый интерес связан с умением написания текстов, которое я здесь и отрабатываю. Поэтому критика приветствуется, но конструктивная.

То, что я буду писать о Dreamweaver'е отнюдь не означает, что речь пойдёт только о нём. Что это вообще такое? Однозначно, материал посвящённый Dreamweaver'у. Однако, если есть вещи, которые удобнее делать другим редактором или вручную, на них будет указано. Какого объёма, качества будет материал — это уже как получиться. Тем более, наверняка, это всё будет переменными величинами. Пока даже я сам могу только наблюдать во что выльется этот проект. Самый главный принцип — всё нижи наклавитуренное не должно напоминать обыкновенный хелп, а должно в некоторой степени отражать заковыки мыслей.

Знаю ли я то, о чём пишу. В некоторой степени да, по крайней мере, в той степени и в тех частях, о которых пишу, точно так. Основное преимущество того, что я сам учусь во время написания различных частей, и в том, что стиль изложения будет простым и понятным.

О чём я буду рассказывать? Во-первых, это продолжение истории о том, как сделать сайт :), взгляд с моей колокольни. За всё время занятия этой компьютерной поделкой мой любимый инструмент — визуальный редактор Macromedia Dreamweaver — так и остался любимым инструментом. В данный момент это версия 4.01, сейчас я постепенно переползаю на MX/7.х (6.1) или MX 2004 (MX), как уж сложится. Однако, как Вы  уже поняли, речь пойдет не только и не столько о самом редакторе или о том, как сделать сайт, а обо всём этом вместе, о том, как удобнее использовать Dreamweaver в создании и редактировании сайта целиком и отдельно html страниц.

Dreamweaver — это мой компромисс между визуальной вёрсткой и работой с html кодом, мой переход от word и pagemaker'a к редакторам web.

В чём основная фишка DreamWeaver'а? Он автоматизирует все, что только можно автоматизировать, наиболее наглядно из визуальных редакторов отображает код, обращается с этим кодом в высшей степени корректно, при работе с Дримом можно видеть изменения, возвращаться на много ходов обратно, если изменения эти вас не устроили и многое другое, что делают все текстовые и графические программы.

Дримвейвер сглаживает «концептуальный переворот» перехода от ворда, где всё делается кнопочками и командами, где от самого документа видишь только вершину айсберга, отформатированный текст так, как он есть, к идеологии html с поторохами от текста перед глазами. Можно также сказать что дрим — симбиоз кода и ws.

И в итоге, заталдычу я в последний раз, Дримвейвер — набор инструментов для создания сайта, просто удобный помощник в этом создании, костыль для периода неуверенного знания html, или просто огранизатор документов.

И я про ту же глупость или код против дизайна

Пойду на поводу у традиции и приведу два полярных мнения о создании веб-страниц (или же просто обострим и сократим все мнения до двух). Первое: «Настоящий профи пользуется только блокнотом!»

Какой бы ни был профессионал — если он придерживается этого мнения, я могу только сказать «Физкульт-привет». Утренние пробежки — плохо использовать, как способ добраться на работу. Можно, конечно, например, инкриминировать Microsoft порчу чистого html ихним FrontPage'ем, однако, уверяю вас злых козней по заглюкавливанию компьютерого мира Macromedia не строит. Другое дело, что автоматизация может быть кодовой, то есть когда стандартные вставляемые объекты представляют собой куски кода, вставляемые в html документ.

Так называемый «чистый код» можно ваять, используя другие редакторы кода и сайта, например, HomeSite, EditPlus и другие продвинутые редакторы или графической html-вёрстки (или даже смешанной), как в Macromedia Dreamwaever'e. Поэтому давайте вначале разберёмся, что же такое чистота кода. Пример этого абзаца, из всем известного и любимого MS Word'a, вы увидите примерно следующее:

<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="[ >>> ]
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 9">
<meta name=Originator content="Microsoft Word 9">
<link rel=File-List href="./Так%20называемый.files/filelist.xml">
<title>Так называемый «чистый код» можно ваять, используя другие редакторы кода
и сайта, например, HomeSite, EditPlus и другие продви</title>
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>comp</o:Author>
<o:LastAuthor>comp</o:LastAuthor>
<o:Revision>1</o:Revision>
<o:TotalTime>1</o:TotalTime>
<o:Created>2004-08-20T20:02:00Z</o:Created>
<o:LastSaved>2004-08-20T20:03:00Z</o:LastSaved>
<o:Pages>1</o:Pages>
<o:Company>Mi)(a textlab</o:Company>
<o:Lines>1</o:Lines>
<o:Paragraphs>1</o:Paragraphs>
<o:Version>9.3821</o:Version>
</o:DocumentProperties>
</xml><![endif]-->
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
p.MsoBodyTextIndent, li.MsoBodyTextIndent, div.MsoBodyTextIndent
{margin:0cm;
margin-bottom:.0001pt;
text-align:justify;
text-indent:45.0pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
@page Section1
{size:595.3pt 841.9pt;
margin:2.0cm 42.5pt 2.0cm 3.0cm;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=RU style='tab-interval:35.4pt'>
<div class=Section1>
<p class=MsoBodyTextIndent>Так называемый «чистый код» можно ваять, используя
другие редакторы кода и сайта, например, HomeSite, EditPlus и другие
продвинутые редакторы или графической html-вёрстки (или даже смешанной), как в
Macromedia Dreamwaever'e. Поэтому давайте вначале разберёмся, что же такое
чистота кода. Пример этого абзаца, из всем известного и любимого MS Word'a,
вы увидите примерно следующее:</p>
<p class=MsoNormal><![if !supportEmptyParas]>&nbsp;<![endif]><o:p></o:p></p>
</div>
</body>

</html>

Это всёго лишь абзац, вставленный в пустой документ и сохранённый затем в формате html.

Позже я раскажу, как обойти и эти странности word'a при помощи, как макроса, так и того же Dreamweaver'a, а сейчас — дальше.

Второе, это: «Дримом можно сделать всё просто и быстро, даже не зная HTML!» Да нет, чтобы что-то сотворить, придётся уяснить, как минимум, следующие вещи: «каким элементом html надо воспользоваться, чтобы», и «куда кликнуть мышой чтобы создать этот самый элемент». Учиться пользоватся Дрёмаваявером придется, как и любому другому интересному занятию через азы, простейшие элементы... постепенно, можно сказать упорно или кропотливо, а уже после азбуки команд, меню, поведений можно творить замечательные вещи сочетанием владения этими элементами.

Подводя итог, выскажу своё личное мнение: работа с кодом при помощи специальных инструментов гораздо быстрее и эффективнее, чем визуальная вёрстка. Однако, если одно другому не мешает, то почему нужно ругать ws редактор. А Dreamweaver именно ничему не не мешает. Код не портит, говоря в очередной раз.

Теперь, я, пожалуй, должен дать историческую справку о последней версии, истории и развитии, что такое вообще WISWYG редакторы, но не хочу и не буду.

Что не нравится. Тяжесть последних версий. Наверное самый оптимум, это версии 3 и 4. Да, это недостаток Дрима — требовательность к ресурсам, которая обусловлена особенностями его программной архитектуры (при работе в решиме дизайн/код и машинописном наборе текста (включены все навороты: одновременный режим кода и дизайна, все плавающие панели), мой процессор |Athlon XP 1700+| грузится на 100 %. Что нравится в последний версиях, естественно, возможность работать с самыми последними стандартами. Версии MX 6.1 и MX 7/2004 ещё более прожорливы, чем четвёртая.

Демонстрация классического образования

Теперь вводная о дизайне. А начну я с идеи, направления и воплощения. Начинающий вебмастер (начинающий — это я прежде всего о себе) вначале должен пройти круг "идея — реализация — публикация в инете — обратная связь". Тогда и станет ясно, что он хочет сделать, и чего он хочет вообще достичь. Следующий круг — это та же самая цепь более профессиональными средствами, то есть: „уже известная страница с идеей и содержанием” — „профессиональная реализация” — „публикация на коммерческом либо продвинутом некоммерческом хостинге”— „самостоятельно сделанная обратная связь, которая перерастает в интерактивность страницы в целом (выполнение на php, asp, cold fussion и т.д.)”. При создании сайта вопрос структуры и цилка (ссылка) играет довольно важную роль.

Теперь, когда начальная информация дана, стоит определиться с ключевым вопросом: «А на фиг мне вообще этим заниматься». Если Вы это читаете, значит изначальное побуждение есть. Однако, дело ещё заключается в том, что этот вопрос будет возникать каждый раз, когда вы будете сознавать, что сайт отнимает время, нужное вам для чего-нибудь другого. Советую Вам изначально решить вопрос о том, чего вы хотите, чтобы знать далее «на какую глубину лезть», сколько времени и сил вы хотите и можете себе позволить затратить на прямо некоммерческую вещь, хотите ли выучится или просто кое-что сделать. Законы дизайна, юзабилити, кодинг, программирование и скриптование — слишком много на одного человека, который не собирается заниматься вебом профессионально, чтобы, во-первых, всё это знать, а во-вторых, использовать одновременно в одном и том же проекте (но об этом чуть позднее).

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

То есть, можно строить грандиозные планы, но лучше пока делать то, что получается. Если продолжите — есть вероятность, что придётся просиживать ночи на disigne.ru, xpoint, mebmascon, не помешает. А пока, чем проще, тем лучше. Итак убьёте на всё кучу времени. Первое и единственное правило. Не надо стараться сделать очень вычурно, просто ничего лишнего. Такое правило хорошего вкуса, как достаточность, давно известно.

Дримвейвер — в моём понимании, есть мостик между начинанием и профессионализмом, в этом редакторе есть всё для обучения и работы. Однако, как по обширным возможностям, так и по интерфейсу он не так уж прост в изучении, поэтому, если всё что вам надо — это сделать небольшую «представительскую» страничку в инете, воспользуйтесь MS Front Page (хотя лучше всё-таки Namo Web Editor), либо Word'ом 2000 совместно с надстройкой Export to HTML.

Впрочем, начинать учиться никогда не рано (авторские права на фразу оставляю за собой). Поэтому если у вас есть хотя бы пара недель свободного времени и его Величество Интерес, начинайте с Дрима, и посмотрите несколько ссылок для «внеклассного чтения» из второй заметки.

Предполагаю, что так называемые «базовые навыки работы с компьютером» у вас уже есть. Честно говоря, мне совершенно непонятно что же такое эти самые базовые навыки. Лично я считаю, что человек начинает разбираться в компьютерах с того момента как понимает, что он может сделать на компьютере и какими средствами, и что не сможет).

Самый распространённый недостаток абсолютно всех пособий в том, что книги строятся не по принципу, как проще начать учиться и постепенно набирая темп учиться дальше, а как стройнее и логичнее изложить объём материала. Не могу сказать, что хорошее структурное деление материала это плохо..., однако, я думаю, что, во-первых это две не большие, но раздницы, а, во-вторых, именно при таком подходе теряется один из базовых приёмов обучения... правильно — повторение. Другая крайность, делая книгу «для чайников» пытаются объяснить, разбавляя смысл идиотским, совершенно не связанным с основной темой, юмором. Откройте любой учебник логики и вы прочитаете о трёх этапах всякого знания: знание (информация о существовании предмета и его функциях), умение (это из разряда на какую кнопку нажать) и понимание (интеграция знания о разнообразных свойствах в систему и нажимания кнопок в разных комбинациях с различной постановкой задачи, что приводит к совершенно оригинальным результатам).

Итак. Возвращаемся к тому, зачем я это пишу и что буду вкладывать в обзор. Это эти заметки в отличие от остальных более-менее обновляемые. Всегда можно сделать что-нибудь в стиле «шаг за шагом», но мне не хочется. Думаю и Вас достанет ждать от меня следующих шагов. Поэтому сразу, обо всём и очень бегло. Это значит, что быстро сделав пробную версию с определённой структурой и наполнением, я буду с сохранением структуры обновлять, совершенствуя содержание. Это хорошо потому — потом Вы узнаете, — что это и есть наиболее удобный способ добиваться профессионального качества малыми средствами, а также потому что изначально будет полная картина предстоящей работы.

 

А кто ты такой, чтобы меня учить?

Примером при реализации конкретных задач будет служить моя страница, на которой я и учился с самого начала до сегодняшнего дня «Читалки — компьютерное чтение». Во избежании будущих наездов отмечаю: я называю себя веб-дизайнером. Я немного интересуюсь дизайном и вёрсткой. Немного по времени и объёму работы. Я НЕ зарабатываю на этом деньги. Единственное, в чём я к ним отношусь, это то, что я также пытаюсь делать сайты. Изначально, когда я завязывался с созданием страницы, была цель — научиться. Как я уже сказал, пишу я этот обзорчик в основном с целью тренировки, да и интесно, блин.

Так получилось что практически очень многое я изучал либо просто делая — то есть на собственном опыте, либо читая книги, а потом делая. Я бы не сказал, что читать книги, правильная вещь. Всего лишь, к большому моему сожалению, просто не было людей, у которых я бы мог поучиться. Особенно это проявилось в моем единоборстве с компьютером. Естественно, что с веб-дизайном получилось точно также. Первые опыты — стыдно в этом признаться, — были с MS Frontpage, с той урезанной версией, которая поставлялась с beta версией win98 (было это, естественно в 98). Тогда был просто интерес, так как интернет мне и не снился. Было сделано оглавление в личной текстовой библиотеки, а также получено представление о абсолютных ссылках и о ссылках относительно документа и каталога. Не очень впечатляет, согласен, но то были времена, когда я даже не знал, что такое стили в MS Word.

Следующий этап начался уже с инетом.

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

Итак, подведём итог, о чём я ХОЧУ/ПЛАНИРУЮ рассказать:

1. Разъяснённая цепочка от создания сайта до его публикации и поддержки. Подробно, не игнорирую нужные мелочи. Размещение в интернете, немного про хостинг, так называемую раскрутку и адаптацию к поисковым системам.

2. Создание сайта при помощи Dreamweaver, а также его публикация и поддержка как при помощи Dreamweaver'a, так и без него.

3. Приёмы и способы эффективной работы. Некоторые особенности и тонкости вебмастеринга, мои личные и распространённые наблюдения. Краткий обзор других веб-редакторов. Небольшие заделки про графический веб дизайн, флеш, пользовательские интерфейсы и юзабилити. Ещё подробнее в конце заметки.

 

Итог первый. Что же такого в Дримвейвере?

Итак, я буду исходить из того, что сразу во всё не врубиться, самый сложный период обучения — начальный. Поэтому незамедлительно — вперёд… через повторения.

1. В дримвейвере можно и нужно делать веб страницы.

2. Dreamweaver БЕРЕЖНО относится к HTML-коду (не пишет ничего своего (исключая, конечно строго свои документы на своих шаблонах) и лишнего, пользовательский код не трогает, исправляет его только с разрешения (правда по умолчанию это исправление разрешено) и полностью поддерживает основные Internet стандарты (каждая версия соответствующий по времени стандарт).

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

4. В дриме заложены мощные возможности JavaScript, но не ввиде списка скриптов с определёнными возможностями, а в виде набора приёмов (это я о поведениях) построения профессиональных вебстраниц.

5. Дримвейвер — самый лучший из широкоизвестных визуальных редакторов для веб-дизайна (также есть менее известный неплохой редактор Namo WebEditor, про который я ещё расскажу, а также монстроватый Adobe Go Live, который, однако, впечатляет).

6. Макромедиа (цитирую) поручает дримвейверу следующую работу: «Создание вебсайтов и вебприложений». Других продуктов для веб-дизайна у этой компании — завались.

7. На самом деле в Dreamwever'е заложено гораздо больше: совместная работа, веб-программирование, про что можно написать ни один том доков, но пока что об этом не здесь и не от меня.

8. Визуальная вёрстка может быть просто Вам не нужна, тогда для автоматизации работы вам хватить продвинутых редакторов html-кода, собственного воображения и терпеливого тестирования, а также языков web-программирования, в которых встороены функции работы с текстом. Но это почти на 100 процентов случай профессиональной, поэтому в моей любительской заметке в расчёт не берётся. К тому же иногда всё равно остаётся вопрос об огранизации документов.

 

Итак итог (смайл) или краткая характеристика: Dreamweaver — визуальный редактор веб-сайтов и веб-страниц, который из всех визуальных редакторов ближе всех, я бы даже сказал, роднее всех к КОДУ; работает с организацией сайта и проще всех себе подобных относится к уже готовым проектам. Это профессиональный инструмент, избавляющий веб-мастера от рутинной работы и позволяющий сосредоточиться на главном — дизайне и содержание сайта. Он не пытается заменить привычные действия вебмастера, а автоматизирует работу, что делает его великолепным инструментом для изучения.

 

Самый существенный недостаток, того, что я пишу в том, что, во избежание лишних вопросов, значительную часть придётся всё-таки выделить обезъяннему описанию меню и кнопок, на что нажать, чтобы сделать то-то. Поэтому уж постараюсь сделать это поэлегантнее и вместе с тем без «камней преткновений», а вы, если надоест читать, просто делайте, что-что своё. Тыкать мышкой в различные менюшки, для того, чтобы узнать, что при помощи них можно сделать, вы прекрасно сумеете. Моя задача — немного наследить в вебе и показать вам свои следы.

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


Возможно, что-то другое

Про то, что есть альтернативные визуальные редакторы, я уже немного сказал, про противоборство рисования и кодирования тоже.

Но это несколько концептуально, Теперь немного о реальном.

Куда можно свернуть уже после начала использование Дримом.

1. EditPlus или другие кодовые редакторы,

2. HomeSite (или другие продвинутые редакоторы кода вместе с сайтом, например, 1st Page)

3. Другие визуальные редакторы, типа Adobe GoLive.


Ссылки и ненаписанное

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

Ссылки

1. Учебник по Macromedia MX

2. Хиленький сайт с правильным доменом.

3. Сайт на народе.

4. Сайт на h10.

5. Переведённые справки.

6. Форум>>>> ] для чайников

7. Уроки по третьей версии.

Содержание цикла заметок

1. Список вещей в дорогу (подборка софта для совместного использование с дримом, где и как найти дистрибутивы)

2. Изначально… Dreamweaver: возможности, интерфейс, настройка

3. Текст на экране и в интернете (Гарнитура, шрифт, кегль, страница, экран. Текст и каскадные таблицы стилей. Блеск и пустота экранной типографики.)

4. Структура и развитие сайта (Сайт, как воплощение филосовского понятия «система». Шаблоны, библиотеки. Мета теги. Заключение или сразу к сайту. А не ограничиться ли использованием дрима просто как организатора для сайта?)

5. Осмотримся, что же у нас есть (За школьной скамьёй или не пора ли договорится о терминах. Различне веб-технологии. Расширения Dreamweaver'a)

6. Вёрстка. Модульные сетки, таблицы и CSS.

7. Другие редакторы и программы подробно. В чём, чем и когда лучше Дрима, совместное использование, совсем немного о NamoWebEditor, HomeSite, AdobeGoLive, и возвратимся к Word'y.

8. О чём ещё хотелось бы сказать или послесловие (Что будет дальше? Дополнительная информация и просто литература. Заключение)

Все заметки про Дримвейвер будут перемежаться с заметками на другие темы.

 




 Список всех заметок

Поиск

Google
Web textory.ru


Назад 21.08.2004 Вперёд

  У Вас браузер с javascripts (IE, Opera или Mozilla)? «Орфуса» видели? Помогайте!

Сирийские таблицы — заметки WEB-дилетанта. Сделано isaev.textory.ru, 2004-2005. Брянск.
[^]
 [ Страница собрана за - 0.009 ][ 231466/16/15/0/0 ]
Login:  Pass: