Generate HTML Div table grids for websites in just a few easy steps. Set the options then select the desired size.
Adjust the options in the interactive editors and don’t forget to add the supplied style snippets to your CSS file!

Settings

First you need to select whether you want to generate a standard HTML Table or you’d rather use styled Div blocks to layout the grid.
When the desired option has been set in the dropdown you can optionally specify up the remaining settings in the allocated boxes. You can choose the border in pixels, specify the width of the whole table in pixels or in percentage. The cell padding is another available option. Don’t worry if you’re looking for other settings, you can set these in the next step.

Create

To select the dimmensions of the table click or tap the desired cell on the grid next to the settings box. This will populate the editors below with the generated HTML code.

Adjust

You can make adjustments to your new table with the two interactive instant source editors where you can edit the code easily. The syntax higlighting and the text indenter of the code editor let you preview the markup.

CSS for Div Tables

Classic HTML tables don’t require an additional stylesheet in order to display the grid layout but Div tags do. The generator will provide you with the required CSS styles that you need to include in order to position the block elements correctly.

Главная»Интернет»Уроки макет сайта»Генератор HTML+CSS шаблонов

Генератор HTML+CSS шаблонов

На этом уроке мы познакомимся с генератором HTML+CSS шаблонов, расположенным по адресу:http://csstemplater.com/.

О сайте

Генератор HTML+CSS шаблонов (макетов) — это онлайн web 2.0 сервис, который генерирует архив, содержащий 2 файла: HTML и CSS, представляющие из себя базовую разметку (каркас) для вашего будущего сайта.

Сервис может быть полезен вам, если вы владеет некоторыми навыками работы с технологиями HTML и CSS, но создание базовой структуры страницы (состоящей из таких элементов, как «шапка», колонка с контентом, боковые колонки (сайдбары) и «подвал») вызывает у вас определенные трудности.

Во всех макетах используется только блочная (DIV’овая) верстка.

Макеты, предлагаемые Генератором HTML+CSS шаблонов, протестированы и корректно отображаются в следующих современных и популярных браузерах:

• Chrome
• Firefox
• IE 6+
• Opera
• Safari

• — Выбираем Doctype для формирования блока сайта

• — Здесь автоматически устанавливаются значения, отменяющие отступы по сайту.

• — Выбираем ширину макета и сразу появятся значения ширины макета.

• — А если резиновый, необходимо указать минимальную и максимальную ширину макета.

• — Выбираем сайдбар и его размер.

• — После выбора сайдбара.

  сразу в окошке предварительного осмотра вы увидите макет.

• — Выбираем дополнительные функции для нашего макета.

  13 лучших конструкторов форм онлайн

  После чего нажимаем на кнопку «Получить ссылку»

• — Откроется вторая страница с макетом вашего сайта и вверху слева будет кнопка «Скачать zip архив»

• — Скачиваете архив

• — В архиве находятся индексная страница макета и основные стили.

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

При построении сайта мне пришлось столкнуться с тем, что сайт у меня постоянно разваливался. Ошибкой оказалось наличие в комментариях значка # индексного файла.

Пример записи кода:

Далее рассмотрим: Иконка на ваш сайт.

Этот простой on-line генератор страниц сайта позволяет Вам создавать страницы Вашего сайта как в обычном текстовом редакторе. Он умеет генерировать все самые необходимые html-тэги в теле web-страницы. Этот генератор html-кода тела страниц сайта многократно ускорит создание страниц сайта.

Некоторые замечания по использованию генератора страниц сайта

Этот генератор страниц сайта является визуальным в том смысле, что он генерирует такой html-код страницы, чтобы в в том браузере, в котором Вы находитесь при работе с этим генератором, страница отображалась точно также, как Вы её видите в окне редактора. Данный редактор-генератор генерирует только коды разметки, то есть только HTML. Он не предназначен для создания скриптов на таких языках программирования, как JavaScript или PHP.

Данный редактор предназначен для начинающих вэб-мастеров, которые только приступают к изучению языка разметки HTML. Но он будет полезен и опытным сайтостроителям для быстрого создания маленьких страниц или шаблонов страниц. Начинающих вэб-мастеров тут привлечет возможность быстрого сравнения внесённых в дизайн страницы изменений с тем, как это отображается на изменении html-разметки страницы. Такое оперативное сравнение позволяет изучить HTML максимально быстро и эффективно.

Данный редактор не предназначен для работы с очень большим текстом и большим количеством «тяжелых» картинок. Если Вы хотите в этом редакторе создать web-страницу с очень большим текстом и/или с картинками большого объема, то лучше создайте сначала полный шаблон web-страницы, скопируйте полученный html-код в файл web-страницы и только потом вставляйте туда длинный текст и ссылки на картинки. Помните, что данный редактор не является профессиональным редактором и предназначен, в первую очередь, для любителей и начинающих вэб-мастеров. Его основное предназначение это помочь начинающим в обучении сайтостроения.

Перейти в редактор web-страниц

Инструкция по использованию

Если Вы когда-нибудь пользовались редакторами текстов типа MS Word, то у Вас не будет никаких трудностей с освоением этого генератора web-страниц.

CSS генераторы кнопок, шаблонов, рамок и других элементов сайта

Этот редактор можно использовать или для создания тела web-страницы с нуля или для исправления уже существующей web-страницы, чтобы внести в неё свои изменения.

Если Вы начинаете создавать свою страницу с нуля, то Вам надо стереть мой начальный текст в окне редактора и начать вводить туда свой текст, картинки и делать своё форматирование. Когда работа будет закончена, надо в нижней части экрана редактора нажать на кнопку «Code» и скопировать полученный код в файл Вашей web-страницы. И сохранить этот файл. Обратите внимание, что копировать полученные коды надо только в тело web-страницы, то есть только между тэгами <body> и </body>. Сами теги body редактором не создаются.

Если Вы хотите редактировать какую-то уже готовую web-страницу, например, созданную не Вами или которую Вы создали давно, то Вам надо в нижней части экрана редактора нажать на кнопку «Code», удалить из окна редактора все мои начальные коды и скопировать туда коды из файла web-страницы. Обратите внимание, что копировать коды нужно только из тела существующей web-страницы, то есть только то, что находится между тэгами <body> и </body>. Сами теги body копировать в редактор не надо. Затем вам надо опять переключиться в режим визуального редактирования. Для этого надо нажать на кнопку «Design» в нижней части окна редактора и начать вносить изменения во внешний вид страницы.

Понятно, что редактировать тело web-страницы можно в этом редакторе двояко. Или в режиме «Design» редактировать визуально или в режиме «Code» редактировать сразу в кодах. Поэтому для начинающих web-мастеров это редактор очень полезен для обучения. Вы можете внести какие-то небольшие изменения в web-страницу в визуальном режиме и тут же посмотреть, как изменился при этом код, переключившись в режим редактирования кода. Или, наоборот, Вы можете внести какие-нибудь небольшие изменения в код web-страницы в режиме редактирования кода и тут же посмотреть, как измениться Ваша web-страница, переключившись в режим визуального редактирования (или в режим просмотра с помощью кнопки «Preview»).

Обычное редактирование текста

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

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

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

Краткое описание всех кнопочек верхней части меню в порядке их расположения:

• Paragraph. Выбирает уровень заголовка. Применяется для абзаца в целом.
• Шрифты.
• Размер шрифта.
• Цвет шрифта.
• Жирный шрифт.
• Наклонный шрифт.
• Подчеркнутый шрифт.
• Зачеркнутый шрифт.
• Выравнивание влево.

  Применяется для абзаца в целом.

• Центрирование. Применяется для абзаца в целом.
• Выравнивание вправо. Применяется для абзаца в целом.
• Двустороннее выравнивание. Применяется для абзаца в целом.
• Горизонтальная линия. Это и не абзацная вещь и не для части абзаца. Это просто вставка горизонтальной линии на всю ширину.
• Верхний индекс.
• Нижний индекс.

Основное html-редактирование

В средней строке меню находятся как кнопки для типичного редактирования web-страницы, так и сервисные кнопки обычных редакторов.

Описание всех кнопочек верхней части меню в порядке их расположения:

• Создание гиперссылки. Обязательно нужно выделить мышкой тот текст или картинку, при нажатие на которых Вы хотите, чтобы произошел переход на другую web-страницу. После выделения жмете на кнопку меню и открываете окошко, в котором Вы должны задать адрес, куда будет идти переход (URL) и условия перехода (target). Вы можете задать следующие условия:
  • Пусто. По умолчанию новая страница откроется в том же самом окне.
  • _blank. Новая страница будет выводиться в новом окне браузера (или в новой вкладке браузера, в зависимости от конкретных настроек браузера).
  • _parent. Новая страница будет выводиться в родительском окне (или вкладке) браузера. Если родительского окна (или вклпдки) нет, то это аналог условия _self.
  • _self. Новая страница будет выводиться в то же самое окно, в котором находится ссылка. Это аналог режима «Пусто».
  • _top. Если страница сайта с фреймами (то есть разбита на несколько окон), то новая страница будет выводиться во всё окно браузера. В обычном случае это тоже аналог режима _self.

  Обратите внимание, что задавать адрес новой страницы, куда ведет гиперссылка, надо в полном виде, типа «http://site.ru» или «http://site.ru/page.html». Иначе при попытке повторного редактирования этой гиперссылки, этот редактор не найдет адреса сайта и по умолчанию подставит адрес моего сайта «http://king.nanoquant.ru» прямо перед именем Вашей страницы.

• Отмена гиперссылки. Выделяете текст гиперссылки ПОЛНОСТЬЮ. Если выделите только часть текста гиперссылки, то невыделенная часть останется гиперссылкой. Например, если выделили только центральную часть текста гиперссылки, то образуется две гиперссылки с одинаковым адресом на невыделенных текстах.
• Вставка картинки. Ставите курсор в то место, где должна быть картинка и жмёте на кнопку. В открывшимся окошке задаете путь к картинке (Image URL), описание картинки (Image Description), выравнивание картинки на странице (Alignment), ширину границы (Border) и отступы картинки от текста (или других элементов на странице по горизонтали и по вертикали (HSpace, VSpace). Выравнивание картинки Вы можете задать следующим:
  • Пусто. По умолчанию это выравнивание по левому краю.
  • BaseLine. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет располагаться так, как решили создатели Вашего браузера.
  • Top. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет выровнен по верхней части картинки.
  • Middle. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет выровнен по центру картинки.
  • Dottom. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет выровнен по нижней части картинки.
  • TextTop. Текст (и другие элементы страницы) находящийся с картинкой в одном абзаце будет размещен над картинкой. (Поддерживается не всеми браузерами.)
  • Absolute Middle. (Поддерживается не всеми браузерами.)
  • Absolute Bottom. (Поддерживается не всеми браузерами.)
  • Left. Картинка будет размещена слева от текста (и других элементов страницы) находящегося с картинкой в одном абзаце.
  • Right. Картинка будет размещена справа от текста (и других элементов страницы) находящегося с картинкой в одном абзаце.

  Вставленную картинку далее уже невозможно будет редактировать в визуальном редакторе. Поэтому для дальнейшего редактирования картинки переключитесь в режим редактирования кода. Для удаления картинки надо кликнуть по ней мышкой и нажать кнопку Delete (Del) на клавиатуре.

• Отмена Форматирования. Отменяет форматирование, которое было сделано при помощи кнопок верхней строки меню, которые относятся к форматированию части абзаца. Работает точно также, как и кнопки верхнего меню, когда надо отменить форматирование, то есть выделяем нужный кусок текста и нажимаем на эту кнопку. Удобство этой кнопки состоит в том, что она одним нажатием сразу убирает всё форматирование, всех видов, которые были в выделенном фрагменте.
• Создание и редактирование таблицы. Кнопка применяется, чтобы создать таблицу в месте расположения курсора или отредактировать выделенную таблицу. При создании таблицы надо задать следующие параметры:
  • Rows — число строк.
  • Columns — число столбцов.
  • Width — ширина таблицы. Задается или в процентах от ширины экрана или в пикселях.
  • Border — ширина границ ячеек. Если оставить значение 0, то границы ячеек не будут видны.
  • CellSpacing — расстояние в пикселях между ячейками таблицы.
  • CellPadding — расстояние в пикселях от границы ячейки до текста внутри ячейки.
  • Alignment — выравнивание таблицы на страницы:
    • Default. По умолчанию, как задали разработчики Вашего браузера.
    • Left. Таблица прижата к левому краю страницы.
    • Center. Таблица расположена в центре web-страницы.
    • Right. Таблица прижата к правому краю страницы.

  Для удаления таблицы надо выделить её границу, кликнув мышкой по границе, и надать на клавиатуре кнопку Delete (Del). Для редактирования таблицы надо поставить курсор в любое место таблицы (или выделить часть таблицы или всю таблицу) и снова нажать на кнопку меню. При этом для редактирования Вам доступны все параметры, кроме числа строк и числа столбцов. Следующие 6 кнопок средней строки меню предназначены для редактирования числа строк и столбцов в уже созданной таблице. Когда курсор стоит на таблице, то эти шесть кнопок доступны для нажатия.

• Создать один столбец слева от курсора. Если выделено несколько столбцов, то считается, что курсор стоит на последнем столбце, который был выделен.
• Создать один столбец справа от курсора. Если выделено несколько столбцов, то считается, что курсор стоит на последнем столбце, который был выделен.
• Создать одну строку выше от курсора. Если выделено несколько строк, то считается, что курсор стоит на последней строке, которая была выделена.
• Создать одну строку ниже от курсора. Если выделено несколько строк, то считается, что курсор стоит на последней строке, которая была выделена.
• Удалить один столбец от курсора. Если выделено несколько столбцов, то считается, что курсор стоит на последнем столбце, который был выделен.
• Удалить одну строку от курсора. Если выделено несколько строк, то считается, что курсор стоит на последней строке, которая была выделена.
• Создать нумерованный список. Либо выделяете какие-нибудь абзацы и нажимаете на кнопку меню. При этом все эти абзацы становятся элементами нумерованного списка. Либо ставите в нужное место курсор, нажимаете на эту кнопку меню и далее все абзацы, которые Вы вводите, автоматически становятся элементами нумерованного списка.
• Создать простой список. Выделяете какие-нибудь абзацы и нажимаете на кнопку меню. При этом все эти абзацы становятся элементами простого списка без нумерации.
• Удаление отступа. Курсор должен стоять на том абзаце, отступы которого хотим удалить. Можно выделить весь абзац или только его часть.
• Создание отступа. Курсор должен стоять на том абзаце, у которого хотим создать отступ слева. Можно выделить весь абзац или только его часть. Отступ создается для всего абзаца в целом (а не только для первой строки).
• Откат всех изменений назад. Пока Вы не нажали на кнопку «Code» или «Preview», Вы можете удалить все сделанные изменения и вернуться к тому состоянию, которое было последний раз при просмотре кода или просмотра страницы.
• Восстановление всех убранных изменений вперед. Если Вы сделали обратный откат изменений больше, чем нужно, то можете восстановить убранные изменения. Точно также, если после отката изменений Вы переходили в режим «code» или «Preview», то восстановить изменения уже не сможете.
• Уничтожить выделенное с одновременным копированием выделенного в «карман» Windows.

  (Ctrl+X)

• Копировать выделенное в «карман» Windows. (Ctrl+C)
• Вставить содержимое «кармана» Windows в то место, где стоит курсор. (Ctrl+V)

Дополнительное html-редактирование

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

Список кнопок третьей строки меню в порядке их расположения:

• Создать форму. Надо в открытом окошке ввести имя формы, адрес скрипта, который будет обрабатывать данные этой формы и метод передачи данных (post или get).
• Создать Check Box. В открытом окошке вводите название этой формы выбора, значение, принимаемое при выборе и указываете, стоит или нет галочка выбора изначально в этой форме.
• Создать Radio-кнопку. В открытом окошке вводите название этой формы выбора, значение, принимаемое при выборе и указываете, выбрана эта кнопка изначально или нет. При создании меню из radio-кнопок, не забывайте, что все radio-кнопки одного и того же меню должны иметь одно и тоже название.
• Создать площадку для ввода текста. В открытом окошке вводите название площадки для ввода текста, ширину площадки числом символов, число строк площадки, расположение абзацев и полос прокрутки и начальный текст в этом поле.
• Создать кнопку «Выполнить». В открывшемся окошке пишем имя кнопки и тот, текст, который будет написан на этой кнопке.
• Создать кнопку «Выполнить» в виде картинки. В открывшемся окошке пишем имя кнопки и адрес той картинки, которая будет играть роль кнопки.
• Создать кнопку очистки заполненной формы и возврата всех значений по умолчанию. В открывшемся окошке пишем имя кнопки и тот, текст, который будет написан на этой кнопке.
• Создать скрытое поле. В открывшемся окошке пишем имя скрытого поля и его значение.
• Создать поле для ввода пароля звездочками. В открывшемся окошке пишем имя поля пароля, длину поля и максимальное число символов пароля, которое сможет ввести пользователь при вводе своего пароля.
• Создать текстовое поле. В открывшемся окошке пишем имя текстового поля, его размер в символах, сколько максимум символов может ввести пользователь и начальный текст в этом поле.
• Отправить на печать.
• Выделить всё.

…

[0] Создание страниц простого сайта
[1] Инструкция по применению визуального редактора страниц сайта
[2] Инструкция по применению генератора мета-тэгов
[3] Учебный пример создания сайта
[4] Учебный пример создания интернет-магазина
[R] Бесплатные HTML-редакторы

Blended Menu — Free On-Line HTML CSS Horizontal and Vertical Menu Layout Generator

Any web site must have a friendly and easy to use navigation bars. But why stop there if you can give your users a more good looking navigation experience. In «Blended Menu» you can start experiment absolutely free with any horizontal or vertical HTML menu layout without installing any program on your computer. This menu editor can be accessed any time from almost any modern browser.

Free Online HTML Code Generator CSS Code Generator JavaScript Code Generator

The Menu Generator build on principle of «WYSIWYG Editor», every change you applying to your menu will result in generated HTML CSS code. Although we gave a few layout examples you can re-customize them all as much as needed to any stylish menu you imagine absolutely free.
Consider: This site is constantly updated so its recommended to Refresh (F5) the page before you start a new menu project.

Overview examples how to build HTML and CSS menus.

Watch videos to see how menu is created using this on line builder.
Both videos demonstrating how to start from default menu layout and get finished template.
For better explanation turn on subtitles.

Watch

Cascading Drop-down Navigation Menu

The generator uses CSS to convert a nested unordered list into a drop-down, multi-level, cascading navigation menu.
All of generated CSS drop down menus are 100% CSS|CSS3 and HTML|HTML5 and designed to be more that 95% cross-browser compatible.
You can download the source code for all of our CSS drop down menus.