Экспресс-курс: Как быстро создать сайт. Часть 1
Сегодня уже никто не будет оспаривать тот факт, что интернет стал второй реальностью, в которой мы существуем. Все чаще и чаще мы через интернет делаем покупки, знакомимся с другими людьми и находим друзей, рекламируем одни услуги и товары, оплачиваем другие, ищем нужную информацию, делимся той, что имеем, и так далее. Когда мы в интернете, начинает теряться ощущение реальности, и это неудивительно. На сегодняшний день интернет предлагает массу возможностей — это пространство, где все существует по своим особым правилам. Теперь практически каждый человек стремится любым возможным способом заявить о себе в интернете. За последние годы общее количество сайтов увеличилось во много раз. Мало того, что каждая мало-мальски уважающая себя компания располагает собственным сайтом — сегодня сайты есть у большинства обычных пользователей. Кто-то пишет стихи или рассказы и размещает их на собственном сайте, кто-то предлагает определенные услуги и с помощью сайта рекламирует себя в интернете и т.д.
Создание сайта — дело непростое и состоит из множества этапов, но если вам срочно понадобилось создать несложный сайт, который не будет претендовать на участие или даже победу в конкурсах в номинации "Сайт года", то вы можете потратить всего несколько часов на создание собственной интернет-странички. Итак, если вы готовы, приступим.
Этап 1. Первое, что надо сделать — определиться, зачем вам сайт и чему он будет посвящен, какова его предполагаемая аудитория, какая информация будет на нем размещена, из скольких страниц он будет состоять и т.д. Этот этап будет подготовительным, и он, пожалуй, самый важный, потому что именно в это время закладывается фундамент сайта. Все, что вам необходимо — это взять лист бумаги и четко написать для себя техническое задание (описание сайта). После этого нарисуем на листе бумаги структуру своего будущего сайта. Создать структуру — значит, определить, где будут находиться структурные части сайта: логотип, изображения, меню, основная информация, новости и т.д. Пример структуры простого сайта показан на рис. 1.
Рис. 1. Примерная структура обычного информационного сайта
Этап 2. Основательно подготовившись к разработке, можно начинать создание сайта. Существуют специальные программы, которые облегчают эту нелегкую работу. Одной из них является Dreamweaver (в данной статье рассматривается создание сайта в Dreamweaver 8). Именно с помощью этого приложения мы будем создавать собственный сайт. Установите программу Dreamweaver 8 на свой компьютер и запустите ее. В первом появившемся окне в области Create New выберите пункт HTML. На экране появится окно программы (рис. 2). Как вы видите, оно разделено на две части: верхняя предназначена для написания HTML-кода вручную, нижняя — для просмотра того, что получилось благодаря написанию кода. Если такого разделения вы не видите, щелкните на кнопочке Split, которая расположена в верхней части окна.
Рис. 2. Окно программы Dreamweaver 8 после первой загрузки
Если вы не знакомы с таким понятием, как HTML, объясню, что это язык программирования, предназначенный для описания веб-страницы. Например, чтобы сделать на сайте заголовок следующего вида: "Заголовок", нужно написать команду: <Н1>Заголовок</Н1>. Однако для создания веб-странички в программе Dreamweaver совсем не обязательно владеть языком HTML. Есть и другой режим работы, когда с помощью специально определенных инструментов вы создаете дизайн, а соответствующий программный код пишется сам. Вот это нам сейчас как раз и подойдет. Поэтому переключимся в другой режим работы, где мы не будем видеть код, а будем работать только с дизайном страницы. Для этого нажмем кнопку Design.
Разметка с помощью таблиц. Внимательно посмотрите на нарисованную вами структуру. Это не что иное как обычная таблица с ячейками. В верхнюю строку будет вставлена картинка с логотипом, в следующей строке разместится меню сайта и т.д. Поэтому первое, с чего надо начать — это создать разметку (нашу таблицу) в программе Dreamweaver 8. На панели инструментов нажмите кнопку Table (Таблица)
и в диалоговом окне введите количество строк и столбцов для таблицы (рис. 3). Но не все так просто, как кажется на первый взгляд. Посмотрите на рис. 1. Не совсем понятно, сколько столбцов и строк надо задавать для данной таблицы. Ведь в первой строке два столбца, во второй — пять, в третьей — снова два, а в четвертой — снова пять. Поэтому пока создадим таблицу из одного столбца и четырех строк, а позже в каждую строку вставим новую таблицу с нужным количество столбцов. Таблица, находящаяся в другой таблице, называется вложенной.
Рис. 3. Укажите параметры создаваемой таблицы
В поле Table Width (Ширина таблицы) укажите значение 100%. Это значит, что сайт будет растягиваться по ширине экрана. В поле Border thickness (Толщина границы) установите значение, равное 0. После этого нажмите кнопку ОК. На рабочем листе появится только что созданная таблица. Теперь установите курсор в первую строку и снова нажмите кнопку Table (Таблица). Вложенная таблица будет иметь одну строку и два столбца. Затем во вторую строку основной таблицы таким же образом вставьте вложенную таблицу, в которой будет одна строка и пять столбцов. В третьей строке общей таблицы будет вложенная таблица с одной строкой и двумя столбцами. Четвертая строка будет состоять из таблицы с одной строкой и пятью столбцами. На рис. 4 показана созданная табличная разметка страниц.
Рис. 4. Табличная разметка веб-страницы
Внимание: На рисунке представлена таблица со значением границы 1 (это сделано для наглядности). Границы таблицы с нулевым значением параметра Border thickness (Толщина границы) будут представлены в виде пунктирных линий.
Вставка рисунков и текста в таблицу. Итак, табличная разметка сайта готова. Начинаем заполнять его рисунками и информацией. Настоятельно советую: прежде, чем приступить к новому этапу, сохраните проделанную работу под именем index.html. В верхнюю правую ячейку надо вставить картинку с логотипом (предварительно такую картинку следует заготовить). Чтобы вставить рисунок в таблицу, установите курсор в нужную ячейку и нажмите кнопку Images (Изображения)
. В появившемся диалоговом окне укажите путь к рисунку на вашем компьютере и нажмите кнопку ОК — изображение вставится в указанное место. При этом ячейка таблицы автоматически примет размер рисунка. Если размер рисунка или таблицы вас не устраивает, измените его перетаскиванием границ с помощью мыши. Теперь еще один немаловажный момент. Если вы откроете любой более-менее профессиональный сайт в интернете и наведете указатель мыши на картинку, возле указателя появится всплывающая подсказка. Для чего это делается? Если вдруг в браузере у посетителя сайта не отображаются рисунки, при наличии всплывающей подсказки он сможет догадаться, о чем идет речь на сайте. Поэтому обязательно делайте такие подсказки — они называются Alt-текст. Просто щелкните на рисунке и в области Properties (Свойства) (рис. 5) в поле Alt наберите нужный текст.
Рис. 5. В области Properties (Свойства) настраиваются различные параметры
Теперь разберемся с левой ячейкой. Вставим туда текст-слоган и зададим ячейке какой-нибудь цвет. Сначала установите туда курсор. А теперь обратите внимание на нижнюю часть окна программы — Properties (Свойства). Найдите там кнопку Bg, нажмите ее и выберите фон для верхней правой ячейки. После этого наберите в этой ячейке текст. Для оформления текста воспользуйтесь инструментами форматирования в области Properties (Свойства). Верхняя часть таблицы уже готова. Теперь займемся меню.
Оформление меню. Строка меню оформляется по-разному. Можно нарисовать картинки для кнопок меню и просто вставить их в соответствующие ячейки с помощью кнопки Images (Изображения). Но на самом деле это не лучший вариант. Если картинки для кнопок меню будут большого размера, то велика вероятность, что и загружаться они будут медленно, особенно если вы используете не высокоскоростной интернет. Кроме того, многие для ускорения загрузки сайтов просто отключают показ рисунков, и ваше меню в таком случае просто не будет отображаться. Таким образом, лучше сделать проще, но надежнее. Каждой ячейке просто задайте фон и напишите текст нужного пункта меню. Пользуйтесь всеми инструментами, которые находятся в области Properties (Свойства).
Оформление ячейки с новостями. Теперь переходим к оформлению новостей. Как правило, новости на главной странице представляют собой обычные ссылки с заголовками или кратким описанием новостей. Лучше всего для каждой темы завести отдельную ячейку. Думаю, вы без проблем сделаете это: в ячейку, предназначенную для новостей, нужно добавить новую таблицу, состоящую из одного столбца и строк, количество которых соответствует количеству новостей на вашем сайте. После этого каждой ячейке задайте цвет фона вашего сайта (желательно, чтобы он не был слишком темным) и напишите текст с новостями (позже мы представим их в виде ссылок, которые будут вести на страницу с полным описанием новости).
Оформление основной, информационной, части сайта. Теперь осталось оформить основную, самую большую, часть сайта. Это очень просто. Сначала задаете фон (можно задать такой же, как и в ячейке с новостями). Затем вводите текст, который будет располагаться на главной странице сайта. Если вам понадобится добавить в текст рисунок, то это делается с помощью дополнительной таблицы. К примеру, вы можете вставить еще одну таблицу с двумя столбцами и одной строкой. В один столбец вставить рисунок, а во второй — текст. Как вы уже, наверное, поняли, все это можно сделать с помощью таблиц. Главное — понять, как сделать разметку, чтобы в нее можно было вставить и текст, и рисунки.
Оформление нижнего меню на сайте. В нижней части сайта чаще всего дублируется строка меню. Для чего это нужно? Если на вашем веб-сайте много информации, пользователь спустится в нижнюю часть одной страницы и захочет перейти на другую, и, чтобы ему не пришлось подниматься вверх, к меню, с помощью полосы прокрутки, меню дублируют в упрощенном виде (как правило, без особого оформления, обычными ссылками) в нижней части страницы. Кроме того, часто здесь размещают информацию о разработчике сайта — так называемый копирайт. В принципе, наша главная страница практически готова — осталось только сделать ссылки на другие страницы и создать их на основе имеющейся главной страницы. Этим мы займемся в следующий раз.
Елена Динман. Центр компьютерного образования FreeДom
Создание сайта — дело непростое и состоит из множества этапов, но если вам срочно понадобилось создать несложный сайт, который не будет претендовать на участие или даже победу в конкурсах в номинации "Сайт года", то вы можете потратить всего несколько часов на создание собственной интернет-странички. Итак, если вы готовы, приступим.
Этап 1. Первое, что надо сделать — определиться, зачем вам сайт и чему он будет посвящен, какова его предполагаемая аудитория, какая информация будет на нем размещена, из скольких страниц он будет состоять и т.д. Этот этап будет подготовительным, и он, пожалуй, самый важный, потому что именно в это время закладывается фундамент сайта. Все, что вам необходимо — это взять лист бумаги и четко написать для себя техническое задание (описание сайта). После этого нарисуем на листе бумаги структуру своего будущего сайта. Создать структуру — значит, определить, где будут находиться структурные части сайта: логотип, изображения, меню, основная информация, новости и т.д. Пример структуры простого сайта показан на рис. 1.
Этап 2. Основательно подготовившись к разработке, можно начинать создание сайта. Существуют специальные программы, которые облегчают эту нелегкую работу. Одной из них является Dreamweaver (в данной статье рассматривается создание сайта в Dreamweaver 8). Именно с помощью этого приложения мы будем создавать собственный сайт. Установите программу Dreamweaver 8 на свой компьютер и запустите ее. В первом появившемся окне в области Create New выберите пункт HTML. На экране появится окно программы (рис. 2). Как вы видите, оно разделено на две части: верхняя предназначена для написания HTML-кода вручную, нижняя — для просмотра того, что получилось благодаря написанию кода. Если такого разделения вы не видите, щелкните на кнопочке Split, которая расположена в верхней части окна.
Если вы не знакомы с таким понятием, как HTML, объясню, что это язык программирования, предназначенный для описания веб-страницы. Например, чтобы сделать на сайте заголовок следующего вида: "Заголовок", нужно написать команду: <Н1>Заголовок</Н1>. Однако для создания веб-странички в программе Dreamweaver совсем не обязательно владеть языком HTML. Есть и другой режим работы, когда с помощью специально определенных инструментов вы создаете дизайн, а соответствующий программный код пишется сам. Вот это нам сейчас как раз и подойдет. Поэтому переключимся в другой режим работы, где мы не будем видеть код, а будем работать только с дизайном страницы. Для этого нажмем кнопку Design.
Разметка с помощью таблиц. Внимательно посмотрите на нарисованную вами структуру. Это не что иное как обычная таблица с ячейками. В верхнюю строку будет вставлена картинка с логотипом, в следующей строке разместится меню сайта и т.д. Поэтому первое, с чего надо начать — это создать разметку (нашу таблицу) в программе Dreamweaver 8. На панели инструментов нажмите кнопку Table (Таблица)
В поле Table Width (Ширина таблицы) укажите значение 100%. Это значит, что сайт будет растягиваться по ширине экрана. В поле Border thickness (Толщина границы) установите значение, равное 0. После этого нажмите кнопку ОК. На рабочем листе появится только что созданная таблица. Теперь установите курсор в первую строку и снова нажмите кнопку Table (Таблица). Вложенная таблица будет иметь одну строку и два столбца. Затем во вторую строку основной таблицы таким же образом вставьте вложенную таблицу, в которой будет одна строка и пять столбцов. В третьей строке общей таблицы будет вложенная таблица с одной строкой и двумя столбцами. Четвертая строка будет состоять из таблицы с одной строкой и пятью столбцами. На рис. 4 показана созданная табличная разметка страниц.
Внимание: На рисунке представлена таблица со значением границы 1 (это сделано для наглядности). Границы таблицы с нулевым значением параметра Border thickness (Толщина границы) будут представлены в виде пунктирных линий.
Вставка рисунков и текста в таблицу. Итак, табличная разметка сайта готова. Начинаем заполнять его рисунками и информацией. Настоятельно советую: прежде, чем приступить к новому этапу, сохраните проделанную работу под именем index.html. В верхнюю правую ячейку надо вставить картинку с логотипом (предварительно такую картинку следует заготовить). Чтобы вставить рисунок в таблицу, установите курсор в нужную ячейку и нажмите кнопку Images (Изображения)
Теперь разберемся с левой ячейкой. Вставим туда текст-слоган и зададим ячейке какой-нибудь цвет. Сначала установите туда курсор. А теперь обратите внимание на нижнюю часть окна программы — Properties (Свойства). Найдите там кнопку Bg, нажмите ее и выберите фон для верхней правой ячейки. После этого наберите в этой ячейке текст. Для оформления текста воспользуйтесь инструментами форматирования в области Properties (Свойства). Верхняя часть таблицы уже готова. Теперь займемся меню.
Оформление меню. Строка меню оформляется по-разному. Можно нарисовать картинки для кнопок меню и просто вставить их в соответствующие ячейки с помощью кнопки Images (Изображения). Но на самом деле это не лучший вариант. Если картинки для кнопок меню будут большого размера, то велика вероятность, что и загружаться они будут медленно, особенно если вы используете не высокоскоростной интернет. Кроме того, многие для ускорения загрузки сайтов просто отключают показ рисунков, и ваше меню в таком случае просто не будет отображаться. Таким образом, лучше сделать проще, но надежнее. Каждой ячейке просто задайте фон и напишите текст нужного пункта меню. Пользуйтесь всеми инструментами, которые находятся в области Properties (Свойства).
Оформление ячейки с новостями. Теперь переходим к оформлению новостей. Как правило, новости на главной странице представляют собой обычные ссылки с заголовками или кратким описанием новостей. Лучше всего для каждой темы завести отдельную ячейку. Думаю, вы без проблем сделаете это: в ячейку, предназначенную для новостей, нужно добавить новую таблицу, состоящую из одного столбца и строк, количество которых соответствует количеству новостей на вашем сайте. После этого каждой ячейке задайте цвет фона вашего сайта (желательно, чтобы он не был слишком темным) и напишите текст с новостями (позже мы представим их в виде ссылок, которые будут вести на страницу с полным описанием новости).
Оформление основной, информационной, части сайта. Теперь осталось оформить основную, самую большую, часть сайта. Это очень просто. Сначала задаете фон (можно задать такой же, как и в ячейке с новостями). Затем вводите текст, который будет располагаться на главной странице сайта. Если вам понадобится добавить в текст рисунок, то это делается с помощью дополнительной таблицы. К примеру, вы можете вставить еще одну таблицу с двумя столбцами и одной строкой. В один столбец вставить рисунок, а во второй — текст. Как вы уже, наверное, поняли, все это можно сделать с помощью таблиц. Главное — понять, как сделать разметку, чтобы в нее можно было вставить и текст, и рисунки.
Оформление нижнего меню на сайте. В нижней части сайта чаще всего дублируется строка меню. Для чего это нужно? Если на вашем веб-сайте много информации, пользователь спустится в нижнюю часть одной страницы и захочет перейти на другую, и, чтобы ему не пришлось подниматься вверх, к меню, с помощью полосы прокрутки, меню дублируют в упрощенном виде (как правило, без особого оформления, обычными ссылками) в нижней части страницы. Кроме того, часто здесь размещают информацию о разработчике сайта — так называемый копирайт. В принципе, наша главная страница практически готова — осталось только сделать ссылки на другие страницы и создать их на основе имеющейся главной страницы. Этим мы займемся в следующий раз.
Елена Динман. Центр компьютерного образования FreeДom
Компьютерная газета. Статья была опубликована в номере 12 за 2008 год в рубрике soft
