ТаблицейБлоками.Советы начинающим Веб-дизайнерам |
Последняя модификация: 10.08.2014 г
Страница загружена с адреса: http://webdesign.site3k.ru/sovet/forjunior.html
Советы начинающим Веб-дизайнерам
- Справка по терминам и программам применяемым в веб-дизайне
- Рекомендуемый курс обучения
- Как создаю WEB-страницы я?
Справка по терминам и программам применяемым в веб-дизайне
| denver2 | Эмуляция веб-сервера на локальном компьютере, поддерживающая практически все языки и базы данных, используемые в интернет. Описание: forum.dklab.ru/denwer. Последняя версия программы www.denwer.ru/dis/Base/latest. |
|---|
| ACEHTML PRO | Типа крутой редактор, что рисую, то и получаю. Руссификацию ищите на msilab.narod.ru/links.html |
|---|---|
| DreamWeaver | Наиболее расхваляемый профессионалами редактор, что вижу, то и получаю и доки к нему. Руссификацию ищите на msilab.narod.ru/links.html. Кряк на lomalka.ru. Документацию спросить у arcad@aha.ru |
| Notepad | Усовершенствованный блокнот, бесплатный и рускоязычный, выделяющий теги цветами, позволяющий перекодировать тексты и некоторые другие возможности. Последние версии ищите на dimonius.da.ru |
| WebCoder | Другой бесплатный и рускоязычный вариант блокнота, оринтированный на интернет. Наиболее привлекательной детелью программы является прилагаемая к ней крошечная утилитка Color tool, выдающая кодировку цветов – удобно, когда пишеш страницы в блокноте. Последние версии на www.webcoder.kiev.ua |
| UltraEdit | Любимая игрушка. Не только выделяет теги цветами и перекодирует туда-сюда, но и перетаскивает текст мышью, работает в режиме таблиц, и может производить замену текста сразу по всем заданным каталогам – очень удобно, когда хочеш изменить элемент во всех готовых файлах. Другого такого нет и где взять – не знаю. Мой давно, как-то приблудился, неизвестно откуда. Знаю только, что в оригинале он на английском и требует денег. |
| Перестройка | Совсем прикольная штука. Встраивается в ворд и шлепает чистый HTML прямо от туда. Последние версии ищите на unecalends.50free.net |
| XML | Производный от SGML язык разметки, специальные программы из написанных в нем документов делают почти любые другие типы документов. Используется вордом и екселем при создании веб-страниц. Результат чрезвычайно громоздок. |
|---|---|
| HTML | Производный от SGML язык разметки – основа веб-страниц. Лучше знать наизусть и писать ручками, тогда не придется удивлятся "А почему это вылезло аж туда? В ФронтПейдже выглядело иначе". |
| XHTML | Версия HTML с более строгим синтаксисом. Фактически, единственным отличием от HTML является необходимость закрывать непарные теги (например, <br />) и регистрозависимость. Написание тегов HTML заглавными буквами позволяет выделить их на фоне остального текста. В XHTML теги заглавными буквами недопустимы. |
| WML | Типа HTML, тоже рожден от SGML, предназначен для страниц, отображаемых на мобилках (необходимый минимум свойств) |
| JavaScript | Разработанный НетШкейпом язык для оживления веб-страниц |
| DHTML | Добавления от микросовта, упрощающие JavaScript сценарии, после того как стало ясно, что их VB script никому не нужен |
| FTP | Протокол доступа к каталогам сайта, как к собственным |
| CSS | Каскадные таблицы стилей (могут влаживаться), в отличии от языков разметки, управляют внешним видом элементов веб-страниц. Дополняют HTML, позволяя сделать страницу, по настоящему красивой |
| SSI | Хрень, позволяющая монтировать страницу, на сервере. Кидаешь отдельно оформление и, кучу небольших страниц без оформления, где на языке SSI (всего пару десятков команд) указано, что и как монтировать. В результате, страницы получаются чудесными. Полезно для оглавлений: меняеш оглавление не по всем страницам, а только в специальном файле, который сервер сам добавляет к страницам. Для того чтобы увидеть и понять результат на дому, требуется эмуляция веб-сервера (см. више) |
| Perl | Язык, работающий только на серваке (или эмуляторе). Посетитель видет только готовый результат. Вот тебе защита данных, секретность и разная всячина. |
| PHP | Аналог Perl-а, но для тех, у кого все в порядке с головой, так как Perl не вполне логичен с точки зрения синтаксиса. Точно не помню почему, но мне Perl показался путанным, как буд-то его писали разные люди, стараясь приблизить его то к одному языку, то к другому. Кроме большей логичности, PHP отличайеся большей легкостью настройки скриптов |
Рекомендуемый курс обучения
Перелопатив всю имеющуюся в интернете литературу по ВЕБ-дизайну, как человек, самостоятельно освоивший это искусство и превратившийся в проффесионального Веб-дизайнера, создающего сайты под заказ и обучающего этому других, рискну предложить следующие рекомендации по самостоятельному изучению Веб дизайна:
- Начинать, наверное, стоит с web.vrn.ru/urcov/enc.htm или html.manual.ru или math.tsu.ru/books/html.html или www.akdi.ru/INTERNet/html32/all_rush.htm. Там объясняются азы разметки и немного другого. Если это грузит, читай postroika.ru/html/index.html, но это совсем детская литература.
- Затем можно взяться за за более тяжелое официальное руководство www.webix.ru/doc/html401, по непонятным вопросам, можно сверяться с предыдущим руководством www.citforum.ru/internet/html40/cover.html
- Освоив HTML, следует взяться за CSS. Для начала вольный перевод
CSS 1. Если слишком легко – за официальную документацию более продвинутой CSS2 www.webix.ru/doc/css2.
- После CSS следует освоить JavaScript www.webix.ru/doc/js_clientguide. Однако, это документ НетСкейпа от 99 года и он несколько устарел. На странице www.citforum.ru/internet/javascript/index.shtml много другого по JavaScript.
- Если ты это освоил, считай себя веб-программистом. Для того, чтобы стать веб-дизайнером, требуется еще уметь работать с фотошопом и корелом (почему про корел никто не говорит? Лично я в фотошопе только цвета прибиваю, для уменьшения размера рисунка, а сам рисунок, если это не фото, готовлю в кореле). Полезным может быть владение GIF-аниматорами и флеш-технологиями, но флеш тяжел и в нашем интернете я его считаю кощунством. Да и аниматор не обязателен – любой мультфильм можно сделать с помощью JavaScript.
- Все это здорово, но хороший веб-программист должен знать не только то, что работает без сервера, но и то, для чего требуется веб-сервер. Так что, если ты начал действительно что-то строить в интернете, освой SSI, коды ошибок http сервера, спецификацию файла robots.txt, диррективы файла .htaccess.
- После SSI почитай мои статейки, и просмотри справочники кодировок (ссылки на странице Веб дизайн) – может пригодится, а потом, приходи осваивать Анализ WEB-конъюнктуры. Создание лучшего сайта и его раскрутка. Именно после того, как ты будеш обладать проффесиональными знаниями, ты по настоящему сможеш оценить все, что там сказано. Можно начать и с неё, но смысл может остаться непонятым.
- Затем осваивай либо Перл (www.webix.ru/doc/perl_learn или www.webix.ru/doc/perl_language, хотя начать, может быть, стоит с www.citforum.ru/internet/perl_tut/index.shtml и www.citforum.ru/database/cnit/p2.shtml), либо ПХП (www.webix.ru/doc/php42.rus). После чтения приложений к книге Анализ WEB-конъюнктуры. Создание лучшего сайта и его раскрутка, освоить PHP будет проще.
- Если хочеш делать страницы еще и для мобилок, осваивай www.citforum.ru/internet/articles/wmldoc.shtml.
- Ни XHTML, ни XML тебе не нужны, но если заняться не чем изучай и их. FTP может пригодится для написания Pearl или PHP скриптов перекачивающих информацию с сервера на сервер.
- HTMLREF.chm входит в состав MicroSoft Office – справка от микрософта, объединяющая CSS, HTML, VBscript и JavaScript от микрософт (DHTML). Английская, но когда требуется только подсмотреть, как правильно пишется оператор, это значения не имеет, а то, что все объединено в одном флаконе, очень удобно. Не хватает только SSI, PHP и пива ;-)
Как создаю WEB-страницы я?
На основе шаблона с минимальным количеством стилей создаю документ ворда. Иногда сначала набираю текст без разбора, а иногда сразу форматирую имеющимися в шаблоне стилями, в зависимости от того, насколько сложной представляется формат будующей страницы. Задаю фон, размещаю рисунки, таскаю все из угла в угол, пока не удовлетворюсь внешним видом. Затем запускаю проверку правописания, сохраняю как документ ворда и запускаю "Перестройку" для конвертации в HTML. После конвертации открываю в УльтраЭдите, и запускаю замену </P> на пустую строку (удаляю необязательные знаки конца обзаца, для сокращения объема), затем возвращаю их назад перед таблицами, чтобы те не начинались внутри абзаца, запускаю замену названий стилей, перекочевавших из ворда на аналоги, используемые мною на веб-страницах, и т. д. – несколькими автозаменами довожу почти все до ума. Потом корректирую параметры таблиц или даже вписываю их вручную, если перестройка не справилась с особо-сложной таблицей, добавляю, где считаю нужным DIV и SPAN; где требуется, если забыл сделать это в ворде, вставляю неразрывные пробелы « » (например, чтобы инициалы не отрывались от фамилии) и неразрывные дефисы «−». Завершаю все удалением частей, вставляемых по SSI и добавлением, если требуется, скриптов. Страница готова.
В FrontPage или DreamWeaver это может и удалось бы сделать быстрей, но в вервом случае либо размер был бы в несколько раз больше, либо времени потребовалось значительно больше на очистку от мусора, а во втором, проверка на правописение никуда не годится, а мусора все равно хватает. Конечно иногда я сразу делаю страницу в УльтраЭдите и не беспокоюсь о правильности букв, но это только небольшие странички, типа этой, родившиеся спонтанно, или когда решаю дополнить существующую страницу новыми деталями.
Несмотря на то, что страницы зачастую создаются чисто в УльтраЭдите и каждый тег прописывается руками, основная масса времени уходит именно на содержание: текст и рисунки. Можете поверить, прописывать что-нибудь типа <IMG SRC="b2.gif" alt=""> вовсе не сложно и занимает не так много времени, как может показаться тем, кто привык доверять ФронтПейджу. Иногда мне кажется, что написать атрибуты руками гораздо быстрей, чем редактировать их в окнах свойств, переходя с вкладки на вкладку. А сколько нелепостей иногда происходит в визуальных редакторах! Не знаю, как их терпять профессионалы? А ведь терпят. Каждый день правят нелепости в ручную, но никак не могут с ними расстаться. Этим страдают, конечно не все, да и не зазорно это, но результат, обычно хуже, недостаточно профессиональный. И я пользуюсь Word-ом только из-за того что, мне часто приходится готовить документы на печать и я привык это делать в Word. До появления "Перестройки", я использовал Word только как систему проверки правописания и сохранял страницы как простой текст без форматирования чтобы потом оформлять их в блокноте.
