Leaderboard

Это в корне ошибочное мнение!Зачем изобретать велосипед?! Существует наиболее эффективный процесс обучения проверенный всей историей человечества. Изучается какая-то часть теории, потом именно эта часть закрепляется на практике отработкой на специально упрощенных и узконаправленных примерах. Понятное дело, вы - гений Но в данной дисциплине html и css - это даже не теория, это просто инструмент. А как вы будете резать, не зная как работает нож? По дизайну. Начало хорошее, поскольку нет попыток городить кучу ненужных "красивостей". Но это скорее от неумения, а не от знания. Теперь замечания. 1. Выбор цвета фона не совсем оправдан. Если на сайте ожидается преобладание большого количества текстовой информации, то удобнее для посетителя будет темный текст на светлом фоне, причем при высокой контрастности. Т.е. отталкиваемся от черного текста на белом фоне. Это самый комфортный вариант для чтения, так уж устроена наша психика. Конечно, если нужна какая-то стилизация (под DOS, например), то можно и белый на черном. Но это скорее исключение. 2. По цвету абсолютно не сочетается логотип и текст. В таком цвете весь текст делать - плохо. Он слишком агрессивный. Достаточно только какие-то элементы выделить этим цветом. Учитесь не давить на психику и зрение посетителя. 3. Необходимо разнообразить текст по цветам. Избавиться от однородности. Подзаголовки сделать немного выделяющимися, списки и текст спокойным цветом. Учитесь цветом делать акценты на нужные блоки. Но не забывайте, что во всем нужна мера. 4. Для списка, где раскрывается контактная информация администратора, необходимо сделать отступ больше чем для ника администратора. Это сразу дает понять, что идет блок, где разворачивается содержание предыдущего блока. 5. После картинок в списке контактов админа должен быть отступ не меньше отступа между словами, проскольку эти значки воспринимаются как слова. 6. Зачем нумеровать список запрещений? Ну и точки то в конце строк все-таки нужны... 7. Последний абзац не имеет смысла без кнопки "ОК". Он должен как-то распологаться относительно неё. По верстке. 1. Для удобства чтения кода нужно подчеркнуть иерархию (вложенность) html левыми отступами. Чем глубже вложенность, тем больше отступ. 2. <p> - абзац (новая строка). Он по смыслу должен заканчиваться перед списком, а не содержать его. 3. Используйте <br> только там, где нужен принудительный перевод строки, а не для создания нового абзаца. 4. Для <li> хоть и не обязателен закрывающий тэг, но для самодисциплины лучше закрывать. 5. Список контактов тоже должен быть списком. 6. В css отделите отступом хотябы свойства от их объектов. Ну и между объектами можно хотяб одну пустую строку вставлять. 7. "margin-top: -100px;" - это вообще зачем? 8. Для отступов существует укороченная запись. Все это сразу бросилось в глаза. Друзья, возможно, углубятся... Вот видите, вы в "одном слове" допустили ошибок больше чем "символов" в этом "слове". Так что начинайте с теории, чтобы мы могли говорить на одном языке.

Сразу оговорюсь, что всё, что будет здесь описано, будет описано максимально упрощённо и многие вещи лично у меня настроены иначе (разбивка диска, nginx на фронте...), но главное донести суть, а там уже тонкости. Для начала нам понадобится домашний интернет с выделенным «белым» IP. Да, есть аозможность сделать и без этого, но я считаю этот вариант плохим и недостойным рассмотрения. Теперь нам нужен сервер. Понятно, что всё зависит от предполагаемой нагрузки, но я не вижу смысла держать дома нагруженные (а, значит, важные) проекты — для этого лучше подойдёт хороший ЦОД. Я выбрал себе девайс под названием DNS Porto — это такой типа неттоп российской сборки http://ekaterinburg.dns-shop.ru/catalog/176/128891/ Скоро, вероятно, такие продавать перестанут, так как пошла новая линейка, но советую тоже брать что-то типа того. Тот который у меня отличается от того, который по ссылке, тем, что у моего 1 гиг памяти, а не два, процессор вроде бы на 1,66 ГГц, а не 1,8 и диск на 160 гигов, а не 250 — моей модели, видимо, уже нет в продаже. Выбрал я этот девайс потому что он маленький, тихий и электричества потребляет мало. Далее надо сделать так, чтобы кроме сервера, вашим домашним интернетом могли пользоваться и другие компьютеры в вашем доме. Самый простой путь — купить маршрутизатор. Хватит самого простого D-Link DIR-300, например. Если вай-фай не нужен, то можно такой же только без вай-фая — не помню как модель называется, но найдёте. Как настраивать маршрутизатор я рассказывать не буду — у д-линков там всё проще простого и вообще есть мануалы. Единственное, что нам надо будет — перебросить на наш сервер порты 21 (FTP), 22 (SSH) и 80 (HTTP). Можно добавить 3306 (MySQL), 443 (HTTPS) и вообще какие угодно, но это уже исходя из потребностей, мне не нужно, например. Теперь система. Мне по нраву Ubuntu Linux, так как устанавливается легко, ПО достаточно свежее и работать с ней приятно. Итак, идём на страницу загрузки http://www.ubuntu.com/download/server/download и грузим себе образ. Предпочесть стоит, думаю, последний LTS — сегодня это 10.04. У меня в сервере нет CD-привода и потому я делал себе загрузочную USB-флэшку — в десктопной убунте для этого есть специальная приблуда, как это делать в других системах я не знаю, но, думаю, на сайте это описано. В конце концов, можно постпрашивать на форумах, если что-то не будет получаться. Итак, подключаем к компьютеру монитор, клавиатуру и загружаемся с диска/флэшки. Для начала мы увидим экран выбора языка. Я считаю, что нужно всё ставить на английском, чтобы не было непоняток в случае косяков локализации. Выбираем «Install Ubuntu Server». То есть начнём устанавливать. Выберем язык для системы. Опять же я советую английский. Выберем наше местоположение. Other -> Europe -> Russian Federation. Понятно, что надо выбирать своё местоположение. Я в России, потому и выбрал её. Определить раскладку клавиатуры? Я думаю, что не стоит. Вручную укажем. Russia -> Russia -> Alt+Shift. Можно и другой комбинацией, но, по сути, это нам даже и не нужно. Далее пойдут какие-то загрузки, операции, будут какие-то прогрессбары — система будет готовиться к установке. Тут система спросит как её назвать. Я назвал, как видно на картинке, testserver. Можете сами выдумать что захотите — это непринципиально. Почему-то система решила, что я в Красноярске. А я не там. Выбираю «No» и далее «Yekaterinburg», поскольку я в Екатеринбурге. Если система правильно всё определила, то жмите «Yes», если нет, то выберите ваш часовой пояс. Формируем файловую систему. По-хорошему, надо в отдельные разделы выносить /home, /tmp, можно отказаться от свопа, но у нас не «настройка и кстановка линукса», а «как хоститься дома», так что доверимся всемогущему усановщику и выберем «Guided — use entire disk». Выберем на какой хард ставить систему. Как видно из картинки, у меня диск всего один и это виртуальный диск виртуальной машины. Вы выберите свой, если будет из чего выбирать. Если диск один, то, понятное дело, жмём Enter без лишних раздумий Предупреждение, что ВСЕ ДАННЫЕ БУДУТ УДАЛЕНЫ. Оно верное — действительно всё, что было на диске будет удалено. Соглашаемся. Начинается форматирование диска и установка системы. Это самый долгий процесс. Создаём пользователя. Он получит доступ к sudo и именно «под ним» мы будем всё делать. Введём и повторим пароль. Зашифровать домашнюю директорию? Я выбрал «нет». Далее снова идут некоторые настройки. Вы подключены через прокси? Нет. Оставляем поле пустым. Нужны автоматические обновления? Нет, не нужны. Какое ПО будем ставить? Выбираем только OpenSSH для удалённого управления сервером. Остальное поставим вручную. Поставить загрузчик GRUB? Да, поставить. Всё готово. Компьютер будет перезагружен. Надо будет после перезагрузки достать диск или флэшку, с которой всё ставилось Итак, система установлена. Можно отцепить от сервера монитор и клаву и поставить его подальше, чтобы не мешал. Подключаемся к серверу через SSH. Через консоль, если она у вас есть в системе, или через Putty, если у вас винда. Теперь обновим систему. Для начала получим список доступных для загрузки пакетов. sudo apt-get update обновим ПО sudo apt-get upgrade обновим систему sudo apt-get dist-upgrade Перезагрузим сервер. Теперь можно поставить полезные какие-нибудь утилиты. Мне полезен файломенеджер midnight commander, чтобы рулить файлами и системный монитор htop, который показывает как у нас в данный момент с нагрузкой дела обстоят. sudo apt-get install mc htop Теперь создадим папку, в которой будут храниться наши сайты. sudo mkdir /webs Создадим специального пользователя из-под которого всё будет испольняться при работе с сайтами sudo groupadd webs sudo useradd -g webs -s /bin/bash -d /webs webs поставим пользователю пароль passwd webs И поставим владельцем папки созданного нами пользователя sudo chown webs /webs sudo chgrp webs /webs Установим apache sudo apt-get install apache2 apache2-doc apache2-mpm-prefork apache2-utils libexpat1 ssl-cert Установим PHP sudo apt-get install php5-common php5 libapache2-mod-php5 php5-cli php5-cgi php5-mysql php5-curl php5-dev php5-gd php5-idn php-pear php5-imagick php5-imap php5-mcrypt php5-memcache php5-mhash php5-ming php5-ps php5-pspell php5-recode php5-snmp php5-sqlite php5-tidy php5-xmlrpc php5-xsl libapache2-mod-fcgid libapache2-mod-fastcgi Установим MySQL sudo apt-get install mysql-client mysql-server libmysqlclient15-dev в процессе установки у нас будет спрошен пароль для рутового пользователя mysql, который надо будет придумать и ввести. Установим Phpmyadmin sudo apt-get install phpmyadmin Выберем в качестве веб-сервера установленный у нас apache. Далее нажмём «Да» на вопрос системы «сконфигурировать ли phpmyadmin», введём недавно придуманный нами рутовый пароль mysql, а так же придумаем и введём два раза пароль юзера phpmyadmin. Включим модуль rewrite в апаче sudo a2enmod rewrite Перезапустим апач sudo /etc/init.d/apache2 restart Теперь, если зайти на ваш сервер через http по IP-адресу, то увидим сообщение «It works!», которая нам скажет, что всё установилось удачно. http://ваш_ip/phpmyadmin — тут мы увидим phpmyadmin. Теперь привяжем к нашему серверу доменное имя. Зарегистрируем имя для начала. Допустим зарегистрировали example.com Я делаю это на сайте 2domains.ru — там дёшево и нормально. Ещё там можно использовать DNS-серверы reg.ru — они-то нам и нужны. Итак, зарегистрировали имя, нажали галочку «использовать DNS-серверы регистратора», потом в редакторе зон DNS добавляем A-запись: «пустое поле» IN A ваш_ip Через какое-то время ваш сервер будет доступен по доменному имени. Теперь создадим сайт на этом домене. для начала в файле /etc/apache2/envvars заменим строки export APACHE_RUN_USER=www-data export APACHE_RUN_GROUP=www-data следующими export APACHE_RUN_USER=webs export APACHE_RUN_GROUP=webs и сделаем sudo chown -R webs /var/lib/apache2 перезапустим апач. Создадим папки, в которых будут жить файлы, связанные с этим сайтом mkdir /webs/example.com mkdir /webs/example.com/www mkdir /webs/example.com/logs echo "Hello world!" > /webs/example.com/www/index.html Создадим файл /etc/apache2/sites-available/example.com следующего содержания <VirtualHost *> ServerName example.com ServerAdmin admin@example.com DocumentRoot /webs/example.com/www <Directory /> Options FollowSymLinks AllowOverride All </Directory> <Directory /webs/example.com/www/> Options FollowSymLinks MultiViews AllowOverride All Order allow,deny allow from all </Directory> ErrorLog /webs/example.com/logs/error.log. LogLevel warn CustomLog /webs/example.com/logs/access.log combined </VirtualHost> Добавим его sudo a2ensite example.com перезагрузим конфиг апача sudo /etc/init.d/apache2 reload Готово! Теперь (если DNS уже успели распостраниться) по адресу example.com будет доступен ваш сайт, который приветствует мир. Можно как на обычном хостинге создавать php-скрипты, которые будут нормально работать. Чтобы работала функция mail() в PHP, нам нужен почтовый сервер. sudo apt-get install postfix Добавим к этому FTP. sudo apt-get install proftpd Теперь отредактируем файл конфига /etc/proftpd/proftpd.conf — отредактируем там некоторые строки ListOptions "-la" DefaultRoot ~ перезапустим FTP-сервер /etc/init.d/proftpd restart Всё, теперь можно логиниться под юзером webs на ваш сервер через FTP. Вот и всё. Ещё раз повторюсь, что это только некоторые основы — сервер будет работать, но надо будет ещё озаботиться его безопасностью. Ещё можно будет оптимизировать серверное ПО, чтобы ресурсы нормально распределялись... Если ещё выберу время, то напишу что для этого надо и как это делается. Если кто-то заметил какие-то ошибки или есть какие-то вопросы — задавайте.

Долго у меня напрашивался этот цикл статей и вот наконец изливаюсь. А цикл этот вот о чём. Вёрстка и верстальщик. Основы профессии если хотите и логика действий при вёрстке. Решил разделить пока на две статьи. И предлагаю ознакомится с первой. Верстальщик кто-он? И так поехали. Не хотелось бы скатиться до популизма и повторения много раз описанных истин, поэтому постараюсь писать как можно понятнее и всё-таки передать мысль закладываемую в текст. В сети множество примеров статей и вообще материала о принципах вёрстки, инструментах, методиках написания кода, семантике и т.?д. Но я ещё ни-разу не встречал статьи рассказывающей о том с какого бока подойти к этому процессу, с чего лучше начать и по какому пути двигаться. Наблюдая год от года молодых верстальщиков и вебпрограммистов, совершающих одни и те же ошибки, такая статья просто проситься к написанию. Поэтому в следующем наборе букв постараюсь описать принципы и так сказать мыслительные процессы которые надо вырабатывать в себе для того чтобы начать двигаться с мёртвой точки новичка до специалиста в своём деле. Я не претендую на то, что описанные мною алгоритмы мышления и действий являются истиной в первой инстанции и только так и надо делать. Нет ни в коем случае! Для каждого верстальщика или же веб программиста существует своя истина и свои принципы. Всё-таки все мы люди и все ходим по своим дорогам. Но основные алгоритмы у нас всех одинаковые и отличаются только методом изложения и внедрения. Хотелось бы донести одну не тривиальную мысль к пониманию которой приходишь только с опытом и количеством реальной работы в каждом из этапов проекта. Верстальщика нельзя назвать чем-то самостоятельным в команде, единицей мнением которой можно пренебречь или как говориться сработать в слепую, отдал макет, получил страницу (К сожалению-это самый частый случай на ниве фриланса). Как правило из такой работы ничего хорошего не получается. Потому-что верстальщик работает не зная под что и не понимая идеи проекта, а это ведёт к тому что программист получает сложности с внедрением вёрстки в код, копирайтер обнаруживает нехватку или избыток стилей и элементов усложняющих ему жизнь. Сеошник сталкивается с грязью в коде или же не возможностью выстроить необходимое семантичное ядро на странице. В результате всем участникам проекта приходится либо чем-то жертвовать, либо переделывать кучу не профильной работы. Что в свою очередь ведёт к удорожанию проекта или к увеличению сроков проекта. На верстальщика возлагается очень большая ответственность которой нет ни у дизайнера, ни у программиста. Верстальщик своего рода «серый кардинал» проекта, перехватывающий «эстафетную палочку» у менеджера проекта, на стадии от-рисованного макета и параллельно его работе координирует техническую составляющую. По неволе верстальщику приходиться касаться почти каждого этапа проекта и учитывать получаемые рекомендации в своей работе. Как однажды сказал один мой друг. Верстальщик это руки которые складывают бутерброд, от них зависит в каком порядке будут размещены ингредиенты!© Поэтому не бойтесь брать на себя эту ответственность и в теневом режиме координировать исполнение проекта. Не бойтесь думать и отстаивать своё мнение, не бойтесь вносить хотя-бы мелкие поправки в проекты которые вам приходиться делать. В этом ваше предназначение как верстальщика и если вы решаете сделать это увлечение делом вашей жизни, то несите эту ответственность с честью. Поэтому думайте, думайте и ещё раз думайте, в этом залог роста. Прежде чем начать что-то делать потратьте хотя-бы пару минут на то чтобы продумать, как это сделать, затем ещё пару минут на то чтобы продумать, как это сделать лучше, чем сделали бы другие и даже после того когда вроде бы вы уже всё придумали и нарисовали себе в голове идеальную разметку, потратьте ещё с десяток минут на то чтобы ясно себе представить процесс и его реализацию. Прогоните через мозг каждый не очевидный и очевидный элемент макета, каждую строчку кон-тента и каждый блок на странице. Выведите общую формулу проекта распределив по своим группам повторяющиеся элементы и части которые эксклюзивные для страницы. Не надо этого делать на бумаге, приучите себя делать это в голове. Оценивать макет и проект в целом с одного лишь взгляда. Приучите себя понимать то, что вам предстоит сделать, подмечая какие подводные камни встретятся на пути, какими техниками вам придётся воспользоваться и что займёт больше всего времени. Вот с этого пожалуй и должна начинаться любая вёрстка, любого макета. С продумывания и оценки своей будущей работы. Простой ли он, или много-колоночный, резиновый, статичный, под какой тип устройств, на какой платформе и какие браузеры будут его рендерить. Прикиньте вес каждой страницы в отдельности и подведите его под критический порог. Соотнесите на сколько удастся соблюсти стандарты и придётся-ли использовать сторонние технологии для реализации интерфейса. Возьмите на заметку под какую CMS необходима вёрстка и какие её особенности надо учесть. Определите основное семантическое видение страницы. Если есть ТЗ, то вооружившись им, составьте карту страницы с описанием главных и второстепенных блоков, основных заголовков и их подзаголовков. Определите, где, какой тип кон-тента расположен и выстроен ли он в логичном с точки зрения семантики порядке. Какие варианты изменения в содержимом должны выдержать контентные блоки, на сколько макет восприимчив к эволюции содержимого, которое может появиться со-временем на страницах, существование каких элементов надо предусмотреть на будущее. Не бойтесь если в процессе оценки макета вы поймёте что многих вещей дизайнер банально не продумал или не предусмотрел. Как правило, при коллективной работе, дизайнер при от-рисовке макета плотно советуется с верстальщиком, также как верстальщик консультируется у программиста, создавая тем самым естественную цепочку производства. Поэтому обоснованные поправки к макету должны быть учтены дизайнером. На своём веку я много повидал дизайнеров и мало кто отказался от внесения поправок в макет, естественно что они были аргументированы и внесены до предоставления макета заказчику. Хотя случается и такое что работа ведётся разрозненно, тогда аргументы необходимо высказать заказчику напрямую, пояснив с какими трудностями, в будущем, он столкнётся при сборке проекта программистом и продвижении или поддержке проекта. Старайтесь упрощать жизнь себе и тем, кто будет работать над проектом в дальнейшем. Думаю я немного отклонился от темы и ушёл-таки в популизм. Но об этом нельзя было не сказать. Наблюдая как многие молодые верстальщики словно во тьме роются в тегах, забывая про идею и саму суть своей профессии. В следующей части постараюсь более подробно описать логику действий и принцип принятия решений на конкретном примере, будем верстать проект публично)))

Спасибо, договорился с Golgi, он справился оперативно, работать приятно. А на weblancere до сих пор тупят.

Это убожество, а не приветственное окно! В лучшем случае, это техническое описание для внутреннего пользования.Посмотрите как сделаны приветствия на западных сайтах. Нет. Вам логику надо понять. Заголовок - это заголовок, а абзац - это абзац. Вы, когда книгу читаете, заголовок считаете частью следующего за ним абзаца?Делайте сайт как книгу. В этой рамке совершенно не обязательно делать темный фон. Но все зависит от других страниц с аналогичным оформлением, все должно быть в едином стиле.

$HTTP["host"] == "site.com" { url.access-deny = ("config.php") }Как-то примерно так. Вопрос ведь про ligthttpd, да? http://redmine.lighttpd.net/wiki/lighttpd/Docs:Configuration http://redmine.lighttpd.net/wiki/lighttpd/Docs:ModAccess

вариант на mootols вариант на jQuery

Даже вот так: http://flowplayer.org/tools/demos/tabs/mouseover.html

Вот тут есть урок по организации портфолио на сайте. Посмотрите, может это подойдет.

jQuery для начинающих. Там есть также много примеров, которые вам потом не раз пригодятся.

<area shape="rect" coords="0,0,150,125" href="page1.html" alt="" title="подсказка">

Вместо <img src="menu.png" /> используй <img src="menu.png" usemap="#Nav" /> <map name="Nav"> <area shape="rect" coords="0,0,150,125" href="page1.html" alt=""> <area shape="rect" coords="90,0,350,125" href="page2.html" alt=""> <area shape="rect" coords="375,0,525,125" href="page3.html" alt=""> <area shape="rect" coords="0,150,150,280" href="page4.html" alt=""> </map>

kohozabr Бан на неделю, за оскорбление участника форума.

Samenfaden, А ты сделай промежуточные строки, где их ячейкам задай нужную высоту и цвет(если нужен)