Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Стартапы, проекты, идеи > Создание сайта от А до Я


Автор: Gold Dragon 29.3.2005, 09:54
Вот мы и начинаем Урок по созданию сата.

Может для кого то это не интересно, но многие не знают с чего начать и что надо делать. И чтобы не наступать на грабли, мы постараемся поэтапно обсудить и рассказать весь процесс создание шедевра

Что будет в Уроке (кратко)?
- Как из рисованного макета сделать HTML-макет?
- Какая будет структура страниц сайта: HTML, HTML+JavaScript, HTML+SSI, PHP, PHP+MySQL?
- Какие дополнительные полезные скрипты нужны?
- Как оптимизацировать страницы?
- Где разместить?
- и многое другое

А теперь начнём smile


Содержание:

- http://forum.vingrad.ru/index.php?showtopic=46961&view=findpost&p=364385

- http://forum.vingrad.ru/index.php?showtopic=46961&view=findpost&p=365489

- http://forum.vingrad.ru/index.php?showtopic=46961&view=findpost&p=365561

- http://forum.vingrad.ru/index.php?showtopic=46961&view=findpost&p=365838

- http://forum.vingrad.ru/index.php?showtopic=46961&view=findpost&p=366520

- http://forum.vingrad.ru/index.php?showtopic=46961&view=findpost&p=367984
* http://forum.vingrad.ru/index.php?showtopic=46961&view=findpost&p=367984
* http://forum.vingrad.ru/index.php?showtopic=46961&view=findpost&p=374427
* http://forum.vingrad.ru/index.php?showtopic=46961&view=findpost&p=374498
* http://forum.vingrad.ru/index.php?showtopic=46961&view=findpost&p=374536

http://forum.vingrad.ru/index.php?showtopic=46961&view=findpost&p=384776

- Урок № 7. Создание HTML-сайта



* по мере появления уроком содержание будет добавляться

Автор: Gold Dragon 29.3.2005, 10:32
Урок № 1. Содание макета сайта.

С чего же оно начиналось?
Начиналось со встречи с заказчиком и получения ТЗ.

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

Наверно у каждого дизайнер свой подход для приманивания муз smile Мой способ таков:

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

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

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

Плашками заливается общий фон, вписываются будущие пункты меню и начинается их таскание по всему листу.

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

Маленькие рисунки вроде иконок рисую в векторе, потом уменьшаю и перевожу в растр. Здесь по пикселю довожу до ума.

Программы которые использую:

Растр: Photoshop
Вектор: Flash, Illustrator.

Автор: Caramel

И вот результат творчетсва

Автор: Gold Dragon 30.3.2005, 09:02
Урок № 2. Режим макет

Во-первых нам неодходимо определиться с будущей структурой сайта

Область № 1 - Здесь размещается декоративная линейка с лозунгом сайта

Область № 2 - В этой области у нас будет отображаться название раздела и подменю раздела

Область № 3 - Это основное меню нашего сайта

Области № 4 и 6 - Так как дизайн сайта планируется быть "резиновым" и чтобы текст не расползался по всеё страницы я ввожу дополнительные поля-ограничители, которые будут пустыми и будут отделять текст от краёв. Скажем так, это такая авторская задумка

Область 5 - Это основная область в которой и будет располагаться весь контекст нашего сайта

Область № 7 - Здесь размещаются копирайты, можно и счётчики-рейтинки

Автор: Gold Dragon 30.3.2005, 10:18
Во-вторых, определяем какие картинки и фоновые изображения нам понадобятся и в соответствии с уже имеющейся разметкой вырезаем их

1-5 - Это наш логотип
Называем (справа-налево, сверху-вниз)
- logo1.gif
....
- logo5.gif

6-14 - Это пункты меню. В дальнейшем мы добавим ещё и картинки которые будут появляться при наведении на них указателя мыши.
Называем:
- menu01_off.gif
...
- menu09_off.gif

15 и 16 - Здесь у нас будет только фоновое изображение.
Называем
- fon01.gif
- fon02.gif

И конечно, мы вырезаем иконки "На главную", "E-Mail", "Карта сайта" и "Вверх"

Автор: Gold Dragon 30.3.2005, 10:41
Урок № 3. Создание HTML-скелета

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

Как видно, у нас должна получиться таблица 4х4 ячейки.

Вот результат
Код

<table width="100%" border=1>
<tr>
    <td colspan=4>
    <!-- Начало "Верхняя декоративная панель -->
    1
    <!-- Конец "Верхняя декоративная панель -->
    </td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
    <!-- Начало "Название раздела" -->
        2
    <!-- Конец "Название раздела" -->
    </td>
    <td>
    &nbsp;
    </td>
</tr>
<tr>
    <td>
    <!-- Начало "Основное меню" -->
        3
    <!-- Конец "Основное меню" -->
    </td>
    <td>
    <!-- Начало "Левое постое поле" -->
        4
    <!-- Конец "Левое пустое поле" -->
    </td>
    <td>
    <!-- Начало "Основное поле" -->
        5
    <!-- Конец "Основное поле" -->
    </td>
    <td>
    <!-- Начало "Правое постое поле" -->
        6
    <!-- Конец "Правое пустое поле" -->
    </td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td colspan=2>
    <!-- Начало "Копирайты" -->
        7
    <!-- Конец "Копирайты -->
    </td>
</tr>
</table>


Комментарий к коду:

- в ячейка проставлены цифры в соответствии с описанием структуры макета. В дальнейшем, мы их заменим на картинки и контекст

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

- Не нужные ячейки не обязательно комментировать

- В таблице установлен border=1 и в пустых ячейках пробелы для наглядного восприятия. В последующем мы их уберём

Автор: Gold Dragon 30.3.2005, 14:57
Урок № 4. Создание HTML-шаблона

Теперь мы размещаем все полученные картинки в нашу таблицу.

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

В результате получился этот код
Код

<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr>
    <td background="images/fon01.gif" colspan=4>
    <!-- Начало "Верхняя декоративная панель -->
        <img src="images/1x1.gif" width=1 height=30 border=0>&nbsp;исконно русский алкогольный напиток
    <!-- Конец "Верхняя декоративная панель -->
    </td>
</tr>
<tr>
    <td><img src="images/logo1.gif" width=147 height=92 border=0></td>
    <td><img src="images/logo2.gif" width=91 height=92 border=0></td>
    <td width="100%" background="images/fon02.gif">
    <!-- Начало "Название раздела" -->
        &nbsp;
    <!-- Конец "Название раздела" -->
    </td>
    <td background="images/fon02.gif"><img src="images/1x1.gif" width=60 height=1 border="0"></td>
</tr>
<tr valign="top">
    <td class="fon1">
    <!-- Начало "Основное меню" -->
        <img src="images/logo3.gif" width="147" height="52" alt="" border="0"><br>
        <img src="images/memu01_off.gif" width="147" height="32" border="0"><br>
        <img src="images/memu02_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu03_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu04_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu05_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu06_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu07_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu08_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu09_off.gif" width="147" height="31" border="0">
        <p align="center">
        <img src="images/but01.gif" width="21" height="18" alt="Перейти на главную страницу" border="0">&nbsp;<img src="images/but02.gif" width="21" height="18" alt="Е-Mail" border="0">&nbsp;<img src="images/but03.gif" width="21" height="18" alt="Карта сайта" border="0">
    <!-- Конец "Основное меню" -->

    </td>
    <td>
    <!-- Начало "Левое постое поле" -->
        <img src="images/logo4.gif" width="91" height="52" border="0"><br>
        <img src="images/logo5.gif" width="91" height="32" border="0"><br>
    <!-- Конец "Левое пустое поле" -->
    </td>
    <td>
    <!-- Начало "Основное поле" -->
        &nbsp;
    <!-- Конец "Основное поле" -->
    </td>
    <td>
    <!-- Начало "Правое постое поле" -->
        &nbsp;
    <!-- Конец "Правое пустое поле" -->
    </td>
</tr>
<tr valign="middle">
    <td class="fon2"><img src="images/but04.gif" width="21" height="18" alt="Перейти на верх страницы" vspace="10" border="0"></td>
    <td class="fon3">&nbsp;</td>
    <td class="fon3" colspan=2>
    <!-- Начало "Копирайты" -->
        &nbsp;
    <!-- Конец "Копирайты -->
    </td>
</tr>
</table>

Автор: Gold Dragon 30.3.2005, 15:21
Теперь разберём каждую из 4-х строк нашей таблицы

Маленькое отступление. Мы создали ещё один дополнительные прозрачный GIF-файл размером 1х1рх, который будем использовать как некий инструмент для форматирования.

Строка № 1

Здесь всё просто

- устанавливаем фоновое изображение линейки

- объединяем все 4 ячейки в одну

<td background="images/fon01.gif" colspan=4>

- в саму ячейку вставляем наш прозрачный файл 1х1.gif и устанавливаем его высоту в 30рх. Это нам необходимо чтобы декоративная линейка была вся видна и не затералась вторым слоем

<img src="images/1x1.gif" width=1 height=30 border=0>

- после этой картинки идет текст лозунга сайта

Строка № 2

1. В первой ячейки размещаем файл logo1.gif

2. Во второй ячейки - logo2.gif

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

3. В третью ячейку вставляем фоновое изображение и дулаем её ширину 100%. Это нам даёт гарантию того, что наш разрезанный логотип не будет разъезжаться, т.е. эта ячейка будет использовать всё свободное пространство. А также нам не нужно будет в дальнейшем устанавливать ширину для основной части страницы

<td width="100%" background="images/fon02.gif">

4. В четвёртую ячейку также вставляем фоновую картинку

<td background="images/fon02.gif">

А в саму ячейку файл 1х1.gif и устанавливаем его ширину в 60рх. Это и будет ширина нашего правого поля. Высоту мы не выставляем, т.к. в первой и второй ячейках уже заложена минимальная высота

<img src="images/1x1.gif" width=60 height=1 border="0">

Строка № 3

1. В первой ячейки у на подряд идут картинки меню, в конце которых мы ставим принудительный обрыв строки (так, на всякий случай)

После меню добавляем наши три кнопки-картинки, делаем их через неразрывный пробел и с абзаца в котором ставил выравнивание по центру

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

3. Третья - оставляем. Там будет у нас сам контекст

4. Ну и четвёртая нам уже не нужна

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

<tr valign="top">

Строка № 4

1. Первая - вставляем туда нашу последнюю картинка и делаем у неё отступ по вертикали чтобы принудительно указать минимальное расстояние от края до картинки

2. Вторая ячейка нам уже не нужна, вставляем туда пробел.

3. Третью и червёртую ячеки мы объединяем и там у нас будут копирайты.

<td class="fon3" colspan=2>

Автор: Gold Dragon 31.3.2005, 09:32
Урок № 5. Что такое CSS?

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

Вот для этих целе я и использую CSS (Каскадные таблицы стилей). Все стили мы будем хранить в отдельном файле, который вставляем в заголовок страницы (между тегами <head></head>)

<link rel="STYLESHEET" type="text/css" href="style.css">

Почему я использую отдельный файл, а не вставляю стили в страницу?

1. При изменении какого-либо элемента нам не нужно будет менять все страницы.

2. Мы достаточно сократим наш код, страницы будут занимать меньше места

3. Облегчим работу поисковым роботам. Подробнее по оптимизации можно почитать http://forum.vingrad.ru/index.php?showtopic=39527

Вот файл стиля
Код

body{
    margin : 0px;
    background-color : White;
}
.fon1{
    background-color : #EAE1BA;
}
.fon2{
    background-color : #EAE1BA;
    border-top : 1px solid #DACA86;
    text-align : center;
}
.fon3{
    background-color : White;
    border-top : 1px solid #DACA86;
}


Теперь разберём каждый стиль:

body
Начинам всегда с главного элемента. Так как дизайн у нас "резиновый", нам необходимо установить отступы от краёв браузера в 0рх. И также задаём цвет основного фона.

Почему я задаю принудительно белый фон если он и так по умолчанию белый?

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

.fon1
Здесь мы задаём цвет на котором располагаются наши кнопки и меню

.fon2
Тоже самое, только мы здесь добавляем вверху линию и центрируем элементы

.fon3
Это цвет и верхняя линия для поля "копирайты"


Почему мы не прописали форматирование внутри шаблона?

1. Если нам что-то понадобиться поправить, например, цвет фона или линии, то нам дастаточно исправить один файл

2. Чтобы не загромаждать наш шаблон лишнем кодом

3. Опять же сокращаем размер страниц


Итог:

У нас полностью готов HTML-шаблон

Автор: Gold Dragon 1.4.2005, 13:37
Урок № 6. Маленькие хитрости и тонкости выше сказанного.

Какие файлы получились и где их хранить

Не знаю как кто делает, но мне удобнее распределять файлы так

1. Папки

- images - здесь храняться картинки общего назначения, в том числе которые используются для формирования нашего шаблона

- menu_xx - эти папки соответствуют пунктам меню. Например, menu_01 - "Понятие", menu_02 - "История" и т.д. В них и будут располагаться наши разделы сайта

- scripts - здесь будут JavaScript`ы

- _tmp - это так, служебная папка для черновиков и временных файлов

2. Файлы

- style.css - это файл стилей, будет лежать в корневой папке

- maket.html - файл макета

- index.html - основной файл сайта

- menu_01.html ... menu_09.html - основные файлы разделов, будут лежать в своих папках

- Ну и вот какие получились картинки

Автор: Gold Dragon 8.4.2005, 13:02
Тонкости нарезки картинки

Очень много способов нарезки макета на куски. Как только народ не извращается smile. Я не буду здесь описывать все способы, а только остановлюсь на том, которым пользуюсь и который меня полностью удовлетворяет.

Покажу на примере одной картинки

Буду использовать Photoshop

Открываем наш макет.

Самый верхний слой - это линии нарезки и контрольные точки. По ним мы будем ориентироваться.

Для начала необходимо поставить контрольные точки (на рисунке красным цветом). Их я ставля в пересечение линий нарезки.

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

Затем выключаю слои где у меня лини нарезки и контрольные точки.

Копирую слитое (Shift+Ctrl+C)

Создаю новый (Ctrl+N)

Вставляю туда из буфера скопированную картинку и сохраняю её.


Можно конечно включить Линейку и Сетку, но я считаю, что по линиям удобнее ориентироваться

Автор: Gold Dragon 8.4.2005, 14:17
Подготовка нарезанных картинок

Мы нарезали картинки, всё вроде здорово. Но есть маленькая деталь. При рисовании
макета у нас наверняка появилось много мусора. То есть очень схожие цвета, которые не видны глазу, но занимают определённую память и соответственно увеличивают размер картинки

Расскажу это на маленьком примере

Вот одна из наших картинок - "Домик". В реальном размере он выглядит вроде хорошо. А вот как он выглядит при увеличении (верхний рисунок). Как видно используется уже не три цвета, а больше (если быть точным - 17)

Наша задача сделать три.

Что мы делаем? Опять же, как это делаю я... ;)

- Выбираем инструмент "Волшебная полочка" (W). Не забудьте убрать "Смежность"
- Жмём на фоне. У нас выделились все одинаковые цвета.
- удерживая Shift нажимаем на невыделенные места фона.
- Таким образом у нас будет выделен весь фон. Почему именно так выделяем? Просто эта картинка у нас маленькая и простая, а если будет больше, то просто не очень будет удобно лазить по всей картинке.
- далее мы "Пипеткой" (I) выбираем цвет закрашивания. Так как цвета очень похожи можно выбрать любой цвет фона, но лучше который визуально чаще встречается
- и наконец заливаем этим цветом выделенную область

Аналогично делаем с другими элементами. Правда если не так много, то можно воспользоваться "Карандашом"

Вот что в итоге у нас получилось
- Первая - 17 цветов, 285 байт
- Вторая - 3 цвета 94 байта
Как видно - в три раза меньше.

Это и есть оптимизация графики для нашего сайта. Хоть это и маленькие величины, но в конечном итоге мы очень много экономим на памяти, а это прямо влияет на скорость разрузки сайта.

Автор: Gold Dragon 8.4.2005, 14:44
Мета-теги для шаблона

< META HTTP-EQUIV="Content-Type"Content="text/html; Charset=Windows-1251">
- Указивается кодировка на которой была написана наша страница. Это чтобы помочь браузеру

<META Name="author" Content="Ваши Ф.И.О., E-Mail">
- Здесь можно указать информацию об авторе страницы

<META Name="copyright" Content="Информация о вашей фирме">
- Указываются авторские права, информация о фирме и тд.

<META Name="keywords" Content="Ваши ключевые слова">
- Сюда пишим ключевые слова, встречающиеся на странице. Помогаем Поисковикам.

<META Name="description" Content="Описание Вашей страницы">
- Краткое описание содержимого данной страницы. Также для поисковых роботов

<META HTTP-EQUIV="Expires" Content="Mon, 11 Jun 1998 00:00:01 GMT">
- Это для браузера, говорит чтобы страница бралась не и кэша

<META Name="Publisher-Email" Content="Ваш_e-mail@сервер.домен">
- адрес издателя страницы или ваш адрес

<META Name="Publisher-URL" Content="Адрес Вашего сайта">
- адрес Вашего сайта в сети Интернет

<META Name="Generator" Content="Microsoft Notepad">
- описывается средство, с помощью которого была создана данная страница.

<META Name="revisit-after" Content="10 days">
- как часто обновляется информация на странице.

<meta http-equiv="Content-Language" content="ru">
- Говорит в какой языковой зоне сайт. Для поисковиков.


Остальные нам не понадобятся

Автор: Gold Dragon 19.4.2005, 11:33
Вопрос-Ответ

Здесь будет раздел "Вопрос-Ответ", т.е. ответы на вопросы, возникающие по ходу обсуждения. Именно этот раздел будет пополняться при появлении вопросов.

Вопрос 1
Цитата(Aliance @ 18.4.2005, 20:55)
В каком регистре лучше писать теги? Ведь стандарт (X)HTML гласит писать все теги в нижнем регистре.

я стараюсь всё писать в нижнем регистре, а там как получится, но всё равно перед размещением привожу всё в нижний регистр (в редакторе HomeSite есть такая функция). Насчёт спецификации не уверен, так как даже валидатор в строгом режиме ничего не сообщает. Если кто найдёт что-то подобное, дайте ссылку

Вопрос 2
Цитата(Fedor @ 18.4.2005, 22:05)
Не очень понятно, зачем нужен файл 1x1

Этот файл используется для форматирования внешнего вида. Например, у нас есть таблица левый край у которой сделан декором. От сюда у нас получается два столбца: в левый поместим наш декоративный край, то есть фоновую картинку, во второй сам контекст. Вот что получается
Код

<table>
    <tr>
        <td background="fon/gif"></td>
        <td>Сам контекст</td>
    </tr>
</table>

Но при таком форматировании мы не увидем левый край, т.к. самя ячейка пуста. По этому нам необходимо поместить в эту ячейку что-то определённого размера. Вот и приходит нам на помощь прозрачный файт 1х1.gif. Мы просто вставляем его в ячейку и устанавливаем необходимые размеры.
Код

<table>
    <tr>
        <td background="fon/gif" width=8><img src="1x1.gif" width=8 height=1></td>
        <td>Сам контекст</td>
    </tr>
</table>

Заодно мы указываем размер и самой ячейки. Почему не задать просто размер ячейки без файла? Да просто, мы таким способом обеспечиваем себе гарантию, что ячейка с рисунком не будет меньше 8 рх при любом дальнейшем раскладе.



PS
Проверял на валидаторе HTML 4.01 Strict!
<TABLE> <Table> <table> <tablE>- ничего мне не сказал

Автор: Aliance 19.4.2005, 15:04
Цитата(Red @ 19.4.2005, 12:33)
Насчёт спецификации не уверен, так как даже валидатор в строгом режиме ничего не сообщает. Если кто найдёт что-то подобное, дайте ссылку


http://validator.w3.org/

поставил свой сайт на проверку - выдал исправить те, которые были в верхнем регистре на нижний.

Автор: Gold Dragon 22.5.2005, 10:10
тут dm9 нашёл информацию, которую можно отнести к нашему обсуждению. Вот выдержка из спецификации

Цитата
XHTML™ 1.0:
The Extensible HyperText Markup Language
....
4. Отличия от HTML 4
....
4.2 Имена элементов и атрибутов должны быть в нижнем регистре

Документы XHTML должны использовать нижний регистр для всех имён элементов и атрибутов HTML. Это необходимо, поскольку XML чувствителен к регистру, например, <li> и <LI> это различные теги.

Та что спецификация HTML4 не оговаривает в каком регистре писать тэги, но по моему мнению стремиться необхотимо к стандартам будущих и развивающихся технологий

Автор: p0zt3r 18.1.2009, 00:57
Статья морально устаревшая

Автор: Gold Dragon 27.1.2009, 10:02
посмотри дату первого сообщения  smile Но основы никто не отменял  smile 

Автор: Alx 10.2.2009, 13:17
Gold Dragon, привет smile 

Автор: andreyAn 28.2.2009, 02:39
Помоготе создать сайт человеку без всякой подготовки(чайнику), какую литературу посоветуюте7

Автор: bars80080 28.2.2009, 10:36
быстро и понятно хватит и этого http://stepbystep.htmlbook.ru/?id=1
не забудь пройтись по всем ссылкам справа в меню

Автор: evseevpl 12.9.2017, 17:34
Мета теги страницы - title, description, keywords. Как добавить и заполнить мета теги? более подробно http://kopikam.ru/post/13

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)