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

1.Адрес сайта в шапке не кликабелен.
Типичная ошибка многих начинающих сайтостроителей. Не знаю как вам, но когда мне нужно перейти на главную страницу сайта, я сначала пытаюсь кликнуть на логотип, а уж потом (если не получилось) ищу ссылку, которая ведет туда же. Так как картинка в шапке добавлена в виде бекграунда я исправлю свою ошибку следующим образом - наложу поверх нужной мне части изображения (адреса сайта) прозрачную картинку со ссылкой. Делается это так:
- создаем прозрачную картинку размерностью 1х1 пиксель. Назовем ее 1px.gif и закачаем на сервер
- добавим ее в шапку используя такой код:

Code
<div class="logos">
  <a href="http://autoclub.ck.ua">
  <img src="/img/1px.gif" width="327" height="45" border="0" title="Черкассы, Клуб любителей автомобилей" alt="Черкассы, Клуб любителей автомобилей" />
  </a>
  </div>

- добавим в таблицу стилей класс logos
Code
.logos {
  position: relative;  
  top:45px;
  left: 10px;
  z-index: 100;
}

Благодаря этому классу, я разместил слой logos (с моей прозрачной картинкой) с отступом 45 пикселей сверху и 10 пикселей слева относительно ячейки таблицы, в которую вложен этот слой. Фоном этой ячейки таблицы является картинка шапки сайта. Таким образом - мой слой наложился поверх этой картинки. Заодно добавляем alt и title. Проверяю работоспособность в разных браузерах - IE, Firefox, Google Chrome - работает.

2. Цвет фона страницы белого цвета.
При отключении картинок плохо видно текст на сайте. Так как пока точно не известно, как будет публиковаться контент и как будут выглядеть блоки в правой и левой колонках - сделал фон светлосерого цвета. Для этого прописал в стиль элемента body следующее:

Code
background-color:#EFEFEF;

Работа над ошибками по результатам предыдущего этапа закончена - можно переходить к следующему этапу.

Сегодня я хотел бы сделать регистрацию и авторизацию на сайте. Для этого мне понадобится: настроить форму регистрации и сменить ей дизайн, разместить на сайте форму авторизации и все что нужно для доступа к функциям сайта для авторизированных пользователей.
Смена дизайна формы регистрации делается очень просто - я просто копирую код страницы что уже есть и вставляю в шаблон "Страница регистрации пользователей". Чтобы форма показывалась в центральной колонке - добавляю туда код вызова основной части страницы:

Code
$BODY$

Теперь займемся настройкой формы регистрации. Поначалу, пока проект еще только начинается, думаю стоит по максимуму упростить процедуру регистрации пользователей. Для этого я уберу с формы некоторые поля - например "Домашняя страница", "Номер ICQ" и "Подпись". Последнее поле я решил убрать потому, что пока в этом проекте не планируется использовать модули, в которых подпись бывает важна - например модуль "Форум". Также включим опцию "Блокировать повторные e-mail адреса" - чтобы избежать множественных регистраций с одним е-мейлом. Все это делается в настройках модуля "Пользователи", в панели управления.
Пробую сделать тестовую регистрацию - все проходит нормально. Осталось сделать возможность авторизации на сайте. Для этого создадим глобальный блок LOGINFORM и разместим в нем саму форму, а также все нужные для управления аккаунтом ссылки. Это несложно сделать, используя предоставляемые системой условные операторы.
Code
<?if($USER_LOGGED_IN$)?>
Тут показываем блок управления аккаунтом
<?else?>
Тут показываем форму авторизации
<?endif?>

После успешной авторизации пользователю будет показан блок, в котором кроме приветствия будет также отображаться загруженная аватара (или картинка-заглушка) и необходимые ссылки. В частности, отсюда пользователь сможет добавлять объявления (будет разрешено группе "Пользователи"), а также добавлять новости и материалы в каталог (будет разрешено только некоторым группам). В качестве заглушки решил использовать картинку, имеющую непосредственное отношение к тематике сайта - а именно, дорожный знак smile

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

Эта статья входит в цикл статей блога "Делаем проект с нуля".
Ознакомиться с полным циклом можно по ссылке.

53 комментариев
1 2 »
1 Написал MaxL 26 Мая 2009, 08:26
Потихоньку продвигаемся. А почему пост в час ночи публиковался? cool
4 Написал Хиcп 26 Мая 2009, 09:45
Так все посты публикуются ночью или вечером. Так удобнее и незаметнее smile
25 Написал MaxL 28 Мая 2009, 18:38
Администратор удалил силку после текста "А вот так все будет smile "....зачем?!?!?! dry
26 Написал Styler 28 Мая 2009, 18:41
Потому что не нужно лазить там где не нужно wink
Тем более что так как было по ссылке - не будет.
То простая проба пера.
27 Написал MaxL 28 Мая 2009, 18:52
Ну тут Вы не правы! Вы доступ закрыли к странице? НЕТ! Такая возможность была? Была.. ваше "там где не нужно" не катит cool
"То простая проба пера" - ну тогда зачем переживать, посмотрели бы как могло бы быть..написали бы ниже, что проба. Вам легче тихонько удалить текст. Из за большого уважения к Вам, я не хочу спорить с Вами, просто если удаляете, то удаляйте тогда всю реплику, а то получилось совсем не красиво. Удалили бы и реплику, то у меня и вопросов даже не было, я бы понял. Сами почитайте что получилось и поймете.
avatar
23 Написал zvirus 28 Мая 2009, 11:37
Зато Styler не тратит рабочее время biggrin
Кроме того, я бы хотел посмотреть на того пользователя, который разрабатывает свои сайты днем = когда вокруг шумят сотрудники, родственники, животные, телевизор, радио, просят куда-нибудь сходить и т.д., а беззаботной ночью когда уже все спят, ты слушаешь свою любимую музыку и двигаешься в направлении своих планов по реализации сайтов. Может быть такое только у меня?
24 Написал MaxL 28 Мая 2009, 18:35
biggrin нет, ты не один такой!! У меня точно так-же smile Днем просто не успеваешь, всем надо помочь. Иногда сижу так до 2 часов ночи smile
avatar
34 Написал SelenaM 05 Июня 2009, 00:43
Конечно же, не только у Вас! совершенно согласна - все делается ночью под любимую музыку! и так незаметненько подкрадывается утро... wacko
2 Написал MaxL 26 Мая 2009, 08:34
Почему uNet не поддерживает?
Quote
Для того чтобы авторизироваться на сайте, воспользуйтесь формой, расположенной справа.
Нету формы, нужно обновлять страницу!!
Добавить ничего не могу, ну b хорошо, я не админ. Уже есть записи в RRS cool Можно почитать smile А вот так все будет smile
3 Написал MaxL 26 Мая 2009, 08:37
Оу....еще один баг. Я хотел оставить комментарий, но выпрыгнул XML файл по адресу /index/.
avatar
5 Написал LordOfPariahs 26 Мая 2009, 12:08
Quote
роверяю работоспособность в разных браузерах - IE, Firefox, Google Chrome - работает.

Злости не хватает. В идиоте-осле проверяем, а в Опере - нет?
8 Написал Styler 26 Мая 2009, 17:17
Ну что же - будем проверять и в Опере - хотя ИМХО Опера довольно неадекватный браузер.
avatar
9 Написал LordOfPariahs 26 Мая 2009, 18:00
Я бы сказал, кто неадекватный, учитывая, что последняя стабильная версия Оперы проходит лучше стабильных версий остальных браузеров тест ACID3, а Opera 10 Alfa проходит его вообще на 100% - так же его ещё проходит только Safari 4 Beta.
10 Написал Styler 26 Мая 2009, 18:07
Не стоит хамить.
Я свое мнение выразил - вы свое.
avatar
12 Написал LordOfPariahs 26 Мая 2009, 18:28
Я никому не хамлю. Честно.
В данном случае я удивляюсь не тому, что Вы не проверяете в Опере, а тому, что Вы проверяете в осле, но не проверяете в Опере.
avatar
14 Написал LordOfPariahs 26 Мая 2009, 18:33
И ещё: война минусами к комментариями - неинтересно. Скучно как-то.
avatar
11 Написал _krt_ 26 Мая 2009, 18:24
То, что какой-то браузер специально заточили под какой-то синтетический тест еще не говорит об адекватности этого самого браузера smile
avatar
13 Написал LordOfPariahs 26 Мая 2009, 18:29
Ну-ну. Вот ИЕ не настраивали под этот тест, так он зато очень хорошо работает. Просто прекрасно. Знает все стандарты.
avatar
15 Написал _krt_ 26 Мая 2009, 18:55
А я про ИЕ ничего и не говорил. Я о том, что имхо не стоит считать какой-либо браузер истинно "православным" полагаясь на какой-то синтетический тест.
avatar
16 Написал LordOfPariahs 26 Мая 2009, 19:37
Quote
не стоит считать

Согласен. Это просто довод в его пользу и адекватность.
avatar
6 Написал kuzlar3 26 Мая 2009, 16:31
uID не поддерживается на сайте cry плохо, зачем тогда эта вся бадяга с uID и доменом за 100к?
7 Написал Styler 26 Мая 2009, 17:15
Очень рад что вы все таки внимательно читаете мои статьи happy
Конечно же, этот сайт будет поддерживать uID.
17 Написал DefKiNG 26 Мая 2009, 19:58
Ух ты уже третий этап biggrin
Code
title="Черкассы, Клуб любителей автомобилей"

хм... а чего тогда простаивают глобальные коды????
Code
title="$SITE_NAME$"

в общем вижу, что теперь сосредоточились на конкретных примерах - кому нибудь точно пригодится
18 Написал [Steelz] 27 Мая 2009, 11:52
Мам title для изображения был, хотя тоже вариант tongue
avatar
19 Написал Glebero4ek 27 Мая 2009, 23:40
Очень интересный курс... надеюсь дальше будет больше интересных решений по системе uCoz biggrin
avatar
20 Написал LordOfPariahs 28 Мая 2009, 00:06
С первым - согласен, но есть и другой способ: $HOME_PAGE_LINK$
Со вторым не совсем согласен. У ссылок есть title(всплывающая подсказка). У картинок есть title (всплывающая подсказка) и alt (альтернативный текст)
21 Написал mob_dp2 28 Мая 2009, 00:09
фтопку ненужные переменные, я за красивый слеш "/" а не за 12 страшных букв в верхнем регистре...

У картинки вроде как тоже есть title, но обычно используют <a title><img alt></a>, т.к. титл понадобится для доп информации поисковику, а альт для индексации картинки.

22 Написал Arhistratig0720 28 Мая 2009, 00:14
Как по мне то прозрачная картинка 1*1 px маловата, у меня переход осуществляется только в одном месте логотипа. Но я то знаю о её существовании, а кто не знает ?
32 Написал Styler 01 Июня 2009, 23:19
Если вы не заметили - картинка растянута на необходимую ширину и покрывает весь логотип. Размер 1 на 1 пиксель был выбран из соображений меньшего веса картинки. Так как она все равно не видима - зачем заставлять пользователя загружать лишние байты?
35 Написал No_comments 05 Июня 2009, 13:44
Вот и у меня такая же проблема.
avatar
28 Написал uWeb 28 Мая 2009, 23:07
когда следующий этап?
avatar
29 Написал klimenkо 29 Мая 2009, 18:27
Не все сразу
avatar
30 Написал uWeb 01 Июня 2009, 00:07
я не думаю что настраивать форму входа нужно неделями
31 Написал Styler 01 Июня 2009, 23:18
Если вы думаете, что я занимаюсь только написанием статей - то вы глубоко заблуждаетесь wink
avatar
33 Написал romzes5000 03 Июня 2009, 13:26
Полезная вещь!!!!!!!!!!!! cool
36 Написал точка 05 Июня 2009, 15:00
код где можно посмотреть "блок управления аккаунтом "
avatar
37 Написал Alex_35Cher 30 Июня 2009, 04:17
Уже утро, а я все еще здесь :-)
avatar
38 Написал dim007 15 Июля 2009, 09:23
а как картинку заглушку ставить?
39 Написал Cahes 19 Июля 2009, 14:29
ничего не понятно начиная с этой статьи: какие коды куда вставлять в каком меню, еще эта работа над обшибками - сделали б уже как отдельную статью, как по мне то это статьи для людей хорошо разбирающихся в HTML, но никак не начинающих.
avatar
40 Написал WebAdemon 24 Июля 2009, 14:32
Уважаемая администрация! Объясните, пожалуйста, как вы сделали вывод аватара на страницах сайта, и как выводится картинка, если аватар не установлен пользователем. Ведь на страницах нельзя использовать код "_AVATAR". И глобальные блоки нельзя использовать тоже там, где он стоит. А он используется. Заранее спасибо за ответ!!!
avatar
41 Написал WebAdemon 25 Июля 2009, 09:21
Всё, разобрался.
avatar
42 Написал Kirill3740 12 Августа 2009, 19:33
Ржунимагу. Истерически! Так и хочется закричать: "Ури, где кнопка?!!!"
Осталось ещё про бином Ньютона статейку забацать и все "чайники" тут же создадут сайты.
Ну в самом деле, это сайт для крутых вэбмастеров или обычных людей? angry

Блин, как вообще страничку сделать ГЛАВНУЮ хотя бы?! Куда жать, что за кнопки и где?
Ну хоть в двух словах познакомили бы где-нибудь с интерфейсом этой системы. А то создал сайт называется - какие кнопки к чему относятся - шишь победишь.

Нафиг тут эти хитрости заумные? Напишите пошагово, как создать простенький сайт, реально - шаг за шагом, а не вот это:
"- создаем прозрачную картинку размерностью 1х1 пиксель. Назовем ее 1px.gif и закачаем на сервер
- добавим ее в шапку используя такой код:
..."
Где создаём картинку, куда закачиваем, через что? Куда всю эту муть добавлять? В какое окно, на какую кнопку жать?

В таком стиле можно ещё проще написать: чтобы сделать сайт - нужно взять и сделать его! Добавить что надо куда надо и всё будет работать.

Фигли расписывать ещё что-то?! angry

avatar
48 Написал happysmile 26 Декабря 2009, 07:31
Согласен!
Я тоже хочу начать по порядку, постепенно обучаясь...
В какую шапку добавляете, используя код? где эта таблица стилей? И наконец как отредактировать эту дурацкую надпись на главной странице "Моя страница" И интуитивно я догадываюсь, что говорим то об одной и той же проблеме, но логики с такой подачей не найти!
avatar
43 Написал Shavrovski 26 Августа 2009, 09:22
Простите совсем новичка, но не могу найти информацию такого рода: могу ли я создать свой сайт "на стороне", на основе css шаблона и разместить его здесь, н еполлььзуясь вот этим чудесным конструктором? Заранее благодарен.
avatar
44 Написал Shawty 30 Сентября 2009, 03:27
Извините, нет сил читать (всё равно не пойму) biggrin Скажите, мне надо чтобы в верхней части сайта Главная | Мой профиль | Выход | RSS Был ещё и Форум Где добавить - нашла, что вписать - незнаю. Вписала ( на обум) <a href="$FORUM_LINK$"><!--<s5176>-->Форум<!--</s>--></a> Надпись есть. а на форум не переходит. Может сталкивался кто, или просто умные люди есть???... (только скажите по человечески, я не программист, занимаюсь этим впервые) wacko
1-20 21-28
Ваш комментарий