Создаем свой первый сайт

на страницах сайта

www.electrosad.ru

Шаг второй

Вы прочитали первую часть статьи. Создали Веб проект, определились цветовым решением Вашего сайта, подготовили графические файлы и готовы написать первую статью для сайта. Что будем делать дальше?

 
 
Первое решение не должно быть последним

Возьмите HTML редактор имеющийся у Вас, какой-либо справочник по HTML (по минимуму - справку по тегам HTML) и Создайте первую страницу своего сайта. После этого посмотрите ее в браузере имеющемся у Вас.

Что Вы видите?

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

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

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

 

Несколько советов

  • Применяйте на сайте для настройки таблицы стилей.

  • Просматривать изображение в нескольких браузерах.

  • Применяйте таблицы для организации наполнения страниц.

  • Подберите HTML редактор который Вам больше всего удобен.

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

 

Таблицы в форматировании страницы

Простейший и наиболее широко применяемый способ форматирования страниц сайта это таблица. Это давно уже не открытие, а норма. Практически все сайты сети сделаны с использованием таблиц. Таблицы как известно состоят из колонок и строк. Ячейка находящаяся на пересечении столбца и колонки в свою очередь может содержать таблицу, рисунок, текст, ...  Границы таблиц и ячеек можно сделать различной толщины или невидимыми, окрасить в слабоконтрастные или яркие цвета. В ячейках можно размещать рисунки, окрашивать их в различные цвета.
В общем они дают широкие возможности по оформлению страницы.

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

Об этом много рассказано в Интернет [1] и литературе, поэтому здесь особо заострять внимание не стоит.

Если есть проблемы или вопросы, то подробнее конкретные вопросы можно обсудить в форуме.

 

Таблицы стилей

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

Но это и накладывает определенные требования на HTML редакторы - они не должны коверкать вашу страницу своими тегами.

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

Это потребует определенной работы.

Программы позволяющая создавать файлы тегов включаются в HTML редакторы. Я могу посоветовать программу которой я пользуюсь с ее первой версии - TopStle Lite 2.0 от www.Bradsoft.com. С ее помощью Вы выберете нужные настройки и увидите как это выглядит визуально. Если потребуется, Вы сможете поправить начальные настройки подогнав их под под задуманный дизайн сайта.

 

HTML Редакторы

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

Когда-то, да иногда и сейчас звучат слова дескать "для написания сайта редактор не требуется, достаточно блокнота". Может кто и пользуется для этого блокнотом, но Вам эти упражнения не советую. Если хотите получше изучить HTML или не верите и считаете себя знатоком HTML попробуйте, а потом посмотрите в браузере, как это выглядит.
Вам будет интересно!

Есть несколько требований к HTML редакторам.

  1. Страницы которые он создает не должны содержать избыточных тегов. Или другими словами д.б компактными.

  2. Редактор не должен вставлять не санкционированные строки.

  3. Должен иметь графический конструктор и средства работы непосредственно с кодами.

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

  5. Редактор должен давать возможность подключать для просмотра несколько разных браузеров с различным (заданным Вами) размером экрана.

  6. И главное редактор не должен отвлекать Вас от подготовки страниц сайта. Что за работа когда вместо написания материала, Вы правите, правите,....

Этим требованиям удовлетворяют редакторы выполненные на концепции WYSIWYG.

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

HTML редакторы которые можно попробовать:

  1. Adobe GoLive v.5 - нормальный редактор, хоть и специфический,

  2. HomeSite - Начать можно с него,

  3. Macromedia DreamWeaver 4.0 и MX 6.0 - говорят это круто, я смотрел - мне не понравилось,

  4. MS FrontPage - последняя версия в составе MS Office 2003 только в полной версии. Единственный инструмент, позволяет работать не задумываясь. Но контроль необходим.

Все остальные, чаще более или менее успешная модификация, так любимого программистами, БЛОКНОТА.

Пользоваться Word MS Office или Writer Open Office в качестве HTML редактора не советую.

Во первых они по свойски обходятся с тегами. Поэтому файл HTML формата полученный в Word MS Office может быть в 2-3 раза больше по объему нормального файла. Мой рекорд 165 Кб против 55 КБ.

Ощутимая разница?

С Writer от Open Office дела обстоят получше, но его тоже надо править. Оба они не поддерживают таблицы стилей. Во вторых они работают под формат A4.

И последнее графику все-таки надо готовить самому - качество выше и размер файла можно уменьшить.

Если Вы старый пользователь, то поделитесь своим выбором с остальными посетителями в форуме или в гостевой.

 

Возможный путь материалов

При подготовке материалов, я сейчас пришел к следующему решению.

Сам материал готовлю в обычном текстовом редакторе, например - Writer из Open Office. Это позволяет работать над материалом, не задумываясь о форматировании и оформлении. Готовый материал сохраняю в html формате, открываю во вьювере Тотал Командера или любом другом,  копирую фрагменты в заготовленный шаблон статьи открытый в HTML редакторе. Остается только вставить рисунки подготовленные в графическом редакторе, убрать ненужные определения настроек из тегов, подключить таблицу стилей и страница готова.

Но так можно работать только со статьями, для первой страницы этот метод непригоден. ЕЕ приходится всю делать в редакторе.

P.S.(ЗЫ)

Я начинал изучать HTML на примерах других сайтов.
Для этого сохранял страницу с понравившимся оформлением и изучал ее структуру, сначала в текстовом редакторе. По прошествии времени в HTML редакторе. Пробовал изменять параметры и смотрел что получается. Конечно я не использовал какие либо фрагменты в своем сайге, но понять работу тегов, таблиц это помогло. Больше того наглядность позволила быстрее усвоить HTML.

  Часть 1 - Часть 2 - Часть 3 - Часть 4- Часть 5 - Часть 6 - Часть 7

Ссылки:

Яндекс.Метрика

<<назад>> <<в начало>> <<на главную>>

Попасть прямо в разделы сайта можно здесь:

/Неизвестный процессор/Охлаждение ПК/Электроника для ПК/Linux/Проекты, идеи/Полезные советы/Разное/
/Карта сайта/Скачать/Ссылки/Обои/

При полном или частичном использовании материалов ссылка на "www.electrosad.ru" обязательна.
Ваши замечания, предложения, вопросы можно отправить автору почтой.

Copyright © Sorokin A.D.

2002 - 2020