На главную
КАК Я СОЗДАВАЛ СВОЙ ЛОКАЛЬНЫЙ САЙТ
Дорогой посетитель сайта! На этой странице я сообщу сведения,которые помогут избежать трудностей,которые мне пришлось преодолеть при создании локального сайта.Делаю я это для того,чтобы облегчить труды таких же "чайников" как и я в этом деле.Книги,которые написаны на эту тему,понимать могут только сами авторы.Я же здесь стараюсь,чтобы меня поняли и читатели.Создание сайта состоит из двух больших этапов.Первый этап - создание сайта на домашнем компьютере,это локальный сайт.Он не требует подключения к Интернету.И второй этап - это отправка и хранение локального сайта на сервер,это хостинг.Во втором этапе без Интернета не обойтись.В этом разделе будет рассматриваться только первый этап - создание локального сайта.
Создание локального сайта состоит из следующих шагов:
1.Определение сайта.
2.Создание главной страницы.
3.Создание страниц,вложенных в главную страницу.
4.Заполнение текстом.
5.Заполнение графикой
6.Создание связей между страницами.
Итак,для создания локального сайта у меня были использованы следующие программы:
1.Windows XP (У меня занимает на диске 4,5 ГГб вместе со всеми дополнительно открытыми папками).
2.Adobe Dreamweaver CS3 ( 223 мб)
3.Adobe Photoshop CS3.
Такие программы как ASDSee 5.0 или Adobe PhotoShop CS3 нужны здесь только для хранения фотографий и рисунков.Вполне можно обойтись одной из этих программ,тем более что оптимизацию графики умеет делать Adobe DreamWeaver CS3.Кроме того,необходимо иметь мышь не менее чем с двумя клавишами,а также память не менее 504 мб ОЗУ и процессор не хуже 2,8 ГГц,а также жёсткий диск 20 ГГб.Если ОЗУ будет меньше 504 мб,то программу Adobe Dreamweaver CS3 на жёсткий диск установить не удастся.
Программа Adobe DreamWeaver CS3 выбрана потому,что при её использовании можно не знать кодов,которые необходимы для преобразования текстовых форматов в формат документов Интернета - html,а также в связи с тем,что в простейших случаях статических сайтов можно обойтись без графических редакторов,таких как Adobe PhotoShop CS3,из-за того,что необходимые действия по оптимизации графики программа Adobe DreamWeaver CS3 способна выполнить самостоятельно.
Итак,начнём.Первый шаг:"Определение сайта".
Определение сайта необходимо для того,чтобы открыть папку,в которой будет находиться сайт,дать название сайту,чтобы его можно было найти в Интернете,указать где будет находиться папка с изображениями.
1.Включить компьютер и открыть Microsoft Windows XP.
2.Открыть папку "Мой компьютер".
3.Открыть диск С.Появится перечень папок.
4.Открыть "Файл"(в левом верхнем углу окна).
5.Открыть "Создать","Папку".
6.В появившемся прямоугольнике в конце списка папок с надписью "Новая папка" ввести своё название сайта кириллицей.Например:"Сайт Владимира Романова".
7.Закрыть диск С ("Файл","Закрыть").
8.Открыть программу Adobe Dreamweaver CS3.
9.Открыть вкладку (вверху третья справа) "Web-сайт".
10.В этой вкладке открыть:"Создать Web-сайт"(первая строка сверху).
11.В открывшемся окне"Определение сайта для "Сайт без имени" в левом верхнем углу из двух разделов:"Основные" и "Дополнительно" выбрать "Дополнительно".
12.Из появившегося списка выбрать первую сверху строчку:"Локальная информация".
13.Справа вверху,в графе"Имя сайта" заполнить эту строку при помощи клавиатуры следующим образом: стереть название "Сайт без имени" и вписать "Сайт Владимира Романова"(точку в конце названия ставить нельзя).
14.Далее,остальные строчки этого окна заполняются только при помощи курсора,управляемого левой клавишей мышки.
15.Во второй строке "Локальная корневая папка" не стирая содержания строчки,нажать курсором левой клавиши мышки на жёлтый маленький прямоугольничек,находящийся справа под низом этой строки.
16.В появившемся окне,которое называется:"Выбрать локальную корневую папку для сайта Сайт без имени",в самом верху,в узенькой заглавной строчке "Выбрать" справа курсором левой клавиши мышки щёлкнуть на стрелке.Откроется список,в нём надо выделить диск С.
17.Щёлкнув левой клавишей мыши на позиции "Диск С",получим список папок диска С.
18.Из списка выделить "Сайт Владимира Романова",внизу окна появится надпись "Открыть",нажать на эту надпись курсором левой клавиши мыши,появится новое окно,в нём в самом низу надо также щёлкнуть "Выбрать".Должно появиться первоначальное окно"Определение сайта" с уже заполненной второй строчкой,в которой должно быть написано:"С:\Сайт Владимира Романова\".
19.С третьей строкой"Папка изображений по умолчанию" окна "Определение сайта" нужно поступить также,как и со второй.В результате должны получить такую же надпись.
20.Следующая строка "Ссылки относительно:" В неё ставим точку при помощи курсора в графе "Документ".
21.Пятая строка "HTTP-адрес:" сейчас не заполняется,она - для сервера.
22.Шестая строка "Ссылки с учётом регистра:" Ставим птичку при помощи курсора левой клавиши мыши.
23.Седьмая строка (последняя) "Кэш:".Ставим птичку при помощи курсора.Нажимаем "ОК" внизу окна.
24.Проверяем.Справа от большого основного окна,в котором Вы работаете,должна быть открыта правая дополнительная панель.Если её нет,то Вы должны курсором мыши найти маленькую стрелочку в середине правой вертикальной границы окна.Щёлкните по ней курсором левой клавиши мыши,должна появиться панель У этой панели есть левая вертикальная линия-граница,которую можно двигать при помощи курсора.Если навести курсор на эту линию,то курсор преобразуется в двухстороннюю стрелку.Раздвинуть панель надо так,чтобы строчка вверху читалась полностью.Эту панель можно убрать,когда потребуется,нажатием курсора на маленькую белую стрелочку в середине левой вертикальной границы.
25.Название сайта "Сайт Владимира Романова" должно появиться в третьей сверху строчке дополнительной панели.Если его там нет,то надо щёлкнуть курсором мышки на самой верхней строчке дополнительной панели:"CSS".
26.На второй строчке дополнительной панели выбрать:"Файлы".
27.На третьей строчке дополнительной панели должно быть два мвленьких узеньких окна.В левом окне должно быть:"Сайт Владимира Романова",а в правом:"Локальное представление". Если это не так,то справа от каждого окошечка имеется маленькая стрелочка,при помощи нажатия курсором на которую можно вызвать эти надписи.
28.Четвёртая строка с символами сейчас пока не нужна.
29.В пятой строке дополнительной панели должно быть:"Локальные файлы".
30.На шестой строке дополнительной панели должно быть:"+ Web-сайт..." Это строка является одновременно первой строкой большого рабочего поля дополнительной панели.
31Сохраняем полученные данные теперь уже не в дополнительной панели,а в общем большом окне Adobe Dreamweaver CS3.В левом верхнем углу находим "Файл" и "Сохранить".Или по другому: на клавиатуре нажимаем и держим "Ctrl",а потом жмём S(Ы),независимо от регистра RU/EN.
Определение сайта выполнено.
Переходим к следующему шагу"Создание главной страницы".
32.В левом верхнем углу большого окна программы Adobe Dreamweaver SC3 открываем "Файл","Создать".Появится внутри большого окна поменьше окно:"Создать документ" с четырьмя колонками.В первой левой колонке курсором выбираем самую верхнюю строку:"Пустая страница".Во второй колонке также выбираем самую верхнюю строку:"HTML". В третьей колонке также самую верхнюю строку:"Нет".В четвёртой колонке выбираем внизу в строке "DocType:",в маленьком узком окошечке при помощи стрелочки справа следующую надпись:"Переходный XHTML 4.01".И в самом низу правого угла окна нажимаем "Создать".
33.Появляется чистая страница сайта,ей надо дать имя,иначе она потеряется.В четвёртой заглавной строке большого окна есть"Код","Разделение","название".Выбрать узенькое окошечко "Название".Сейчас там написано:"Untitled Document".Надо стереть эти слова и ввести туда при помощи клавиатуры следующее название латинскими буквами:"Glavnaya.index.html" " Это будет название главной страницы,которое кириллицей писать нельзя.Далее надо выбрать белый фон страницы и чёрный фон текста,если они другого цвета.Для этого надо установить курсор в центр чистой страницы и нажать правую клавишу мыши.Должно всплыть окно с перечнем позиций,самая нижняя позиция "Свойства страницы".Надо щёлкнуть по ней курсором, - всплывёт новое окно под таким же названием.Слева вверху этого окна написано:"Категория",там в первой строке столбца должна быть выбрана надпись:"Внешний вид".Справа вверху этого же окна в первой строке "Шрифт страницы"надо выбрать шрифт,например:"Verdana,Arial,sans-serif".Во второй строке,здесь же "Размер:"- надо установить 100%.Далее надо установить цвет текста.Для этого в третьей строке "Цвет текста" щёлкаем левой клавишей мыши в маленький квадратик,- появляется разноцветная панель,в которой в левом столбце надо указкой курсора выбрать цвет текста чёрный или синий и щёлкнуть курсором левой клавиши мыши.Установится тот цвет,который Вы выбрали в маленьком квадратике третьей строки. То же самое надо сделать и в четвёртой строке "Цвет фона:"Его надо выбрать белым или таким,каким Вы пожелаете.В остальных полях внизу везде надо поставить нули.Далее нажать:"ОК".Далее надо сохранить то,что Вы сделали.
34. Для сохранения открываем в левом верхнем углу большого окна "Файл" и нажимаем курсором строку "Сохранить".Появляется окно поменьше, в заглавии которого написано:"Сохранить как".Во второй строке сверху "Папка" есть узенькое окошечко,в нём должно быть написано:"Сайт Владимира Романова".Если этого названия нет там,то надо при помощи стрелочки справа найти:"Диск С",нажать на нём курсором левой мышки,появится перечень всех папок этого диска.Выбрать из списка:"Сайт Владимира Романова".Щёлкнуть на нём курсором и он появится в нашем небольшом окне.А внизу этого же небольшого окна надо в самой последней строчке "Тип файлов" выбрать"Все документы"при помощи стрелочки справа.А в предпоследней нижней строке " Имя файла" следует стереть что там написано и набрать при помощи клавиатуры латинскими буквами:"Glavnaya.index.html" и нажать справа "Сохранить". На этом создание главной страницы сайта завершено.
Далее переходим к шагу"Создание страниц,вложенных в главную страницу".
35.В левом верхнем углу рабочего большого окна Adobe Dreamweaver SC3,в котором Вы работаете нажать"Файл","Создать".Откроется окно поменьше.Так же как и при создании главной страницы надо выбрать верхние строчки первых трёх колонок:"Пустая страница","HTML","Нет" и внизу четвёртой колонки выбрать"Переходный HTML 4.01",и тамже рядом внизу нажать курсором "Создать".Начало такое же как и при создании главной страницы.
36.Появится пустая страница, которой надо дать следующее заглавие в узеньком окошке "Название" в четвёртой заглавной строке большого окна:"Page1.Kniga.html".Далее надо установить цвет текста и фона так же,как это было сделано для главной страницы.
37.Затем в левом верхнем углу снова открываем "Файл" и выбираем "Сохранить".Появится окно поменьше,в нём,внизу,повторяем надпись"Page1.Kniga.html" и нажимаем на "Сохранить",которая находится рядом справа.
Страница,которая будет связана с главной страницей создана.Таким же образом создаются и другие страницы:"Page2.html","Page3.html" ... и т.д.,но обязательно в конце названия страницы должно присутствовать html.
38.Следующий шаг"Заполнение текстом".Набирается текст также как в текстовых редакторах Word,Page Maker,Microsoft Word.Но есть особенности.Объём одной страницы в Adobe DreamWeaver CS3 практически неограничен,она как резиновая,я туда поместил целую книгу в 416 страниц,размер букв здесь - словами:"хх-мелкий,х-мелкий,средний, х-крупный,хх-крупный".Размер можно установить на нижней горизонтальной дополнительной панели,которая всплывёт,если в самом низу большого окна на середине нижней горизонтальной пограничной линии найти чёрную малюсенькую стрелочку и нажать её курсором.На всплывшей панели найти:"Размер 100"и стрелочкой справа этого узенького окна вызвать список размеров.Там же,рядом,справа от этого узенького окошка можно выбрать: "жирный"(В),"курсив"(I) и выравнивание "по левому краю","по центру","по правому краю","по ширине",обозначенное символами.На этой же дополнительной панели,слева в узком окошечке "Формат" для обычного текста выбираем "Абзац" при помощи маленькой стрелочки в этом узеньком окошечке,а для заголовков выбираем "Заголовок 1" - это самый крупный,а дальше более мелкие;"Заголовок 2"..."Заголовок 6".
39.Чтобы текст перенести из других программ в Adobe Dreamweaver SC3 надо использовать Буфер обмена.Например,в любом текстовом редакторе выделить текст,который надо перенести,нажать клавишу Ctrl на клавиатуре и держать её,затем нажать С/c и отпустить обе клавиши.Будет выполнена команда "Копировать в Буфер обмена". Потом открыть Adobe DreamWeaver CS3,установить курсор в то место,куда надо поместить этот текст,и дальше надо нажать и держать клавишу Ctrl,а потом нажать клавишу V/М,не обращая внимания какой включён регистр RU или EN.Таким образом текст переместится при помощи Буфера обмена в то место,где был курсор.
Таблица,если требуется,создаётся при помощи "Вставка"(на панели инструментов она четвёртая слева в самой верхней строке окна).Затем выделяем "Таблица",появляется всплывающее окно"Таблица".В самой верхнй строке"Размер таблицы устанавливаем количество строк и количество столбцов.На второй строке устанавливаем ширину таблицы 100 процентов и на третьей строке толщину границы 1 пиксель.Жмём "OK".
Чтобы сохранить достигнутое,надо нажать клавишу Ctrl и держать её,затем нажать S/Ы.
Следующий шаг:"Заполнение графикой".
Здесь рассмотрена работа программы Adobe DreamWeaver CS3 только с той графикой,у которой формат .jpg или .jpeg.Другие форматы применяются реже и здесь не рассмотрены.
Вид,удобный для работы,это оптимизированный рисунок.Оптимизация заключается в преднамеренном уменьшении качества от 100 до 30 пунктов и уменьшении размеров картинки,например, от 2500 х 2000 пикселей до 600 х 500.Это даёт возможность при незначительной потере качества быстро открывать страницу с графикой,за несколько секунд.В противном случае страница может открываться очень долго.Всё это умеет делать Adobe DreamWeaver CS3.
40.Рассмотрим пример вставки фотографии в страницу Adobe DreamWeaver CS3.Предположим,что фотография была сохранена в программе ACDSee 5.0.Свёртываем окно (но не закрываем) программы Adobe DreamWeaver CS3 и открываем программу ACDSee 5.0.Выделяем в ней фотографию,например,"Изображение 067 620 кВ 2500х2000 формат JPEG".В верхней линейке рабочего окна выбираем "Edit",открывается список,в нём выбираем:"Move to".Появляется окно:"Move Files".В рабочем пространстве этого окна находим и выделяем мышкой:"+Мой компьютер".Нажимаем на плюс и разворачиваем все папки,находим "+Диск С:", и также нажатием на плюс разворачиваем все папки.Далее находим папку "Сайт Владимира Романова",выделяем его и жмём на "ОК".
Далее,закрываем программу ACDSee 5.0 и разворачиваем окно программы "Сайт Владимира Романова".В рабочем окне устанавливаем курсор туда,куда поместить изображение.На самой верхней строке инструментов рабочего окна сайта левой клавишей мыши выделяем "Вставка" и затем "Изображение".Появляется окно:"Выбрать исходный файл изображения".В списке находим наше"Изображение 067" и жмём "ОК".Появляется окно:"Атрибуты специальных возможностей тега Image".Заполняем при помощи клавиатуры первую строку этого окна,которая называется:"Замещающий текст:",например словом "Фото_книги".Жмём "ОК".Изображение появится в том месте, где находился курсор.Размеры изображения будут сначала большими:2500 х 2000.Это можно увидеть на нижней дополнительной горизонтальной панели.Если эта панель у Вас не открыта,то надо в самом низу рабочего окна найти в середине пограничной нижней линии маленькую стрелочку и щёлкнуть по ней курсором левой клавиши мыши,а когда панель откроется надо снова щёлкнуть курсором левой клавиши мыши по центру изображения.Внизу на этой дополнительной панели в третьем столбике слева появится:"Ш 2500" и "В 2000".Далее надо навести курсор на центр изображения и щёлкнуть его при помощи правой клавиши мыши. Всплывёт окно,в котором надо найти строку"Оптимизировать..."Щёлкнув курсором левой клавиши мыши по этой строке,получим новое всплывшее окно"Просмотр изображений".В нём на первой строке из двух опций "Параметры" и "Файл" левой клавишей мыши щёлкаем "Файл".Далее под словом "Масштабирование","%:"в узеньком окошечке щёлкаем по стрелочке справа курсором левой клавиши мыши ,должна появиться вертикальная линейка с планочкой-движком.Двигаем эту планочку-движок курсором вверх или вниз,устанавливаем масштаб,например,50 %.При этом ширина и высота изображения установятся автоматически.Если размер изображения не установился 50%,то отводим курсор чуть в сторону от планки-движка и щёлкаем левой клавишей мыши - справа изображение должно уменьшится до 50% по размерам.Тут же на четвёртой строчке есть маленькое окошечко"Сохранить пропорции",в нём надо поставить птичку курсором левой клавиши мыши.Остальные параметры - не заполняем,а возвращаемся в этом же окне к верхним опциям "Параметры","Файл" и выбираем в этот раз "Параметры".На первой строке,в узком окошечке "Формат" устанавливаем "JPEG" при помощи стрелочки справа.Во второй,следующей,строке "Качество" устанавливаем процент качества от нуля до ста при помощи стрелочки справа и рейки с движком.Обычно устанавливают 30 процентов.
Далее в этом же окне справа над фото надо поставить птичку курсором в узеньком окошечке "Просмотр",появится тут же информация,например,такая: JPEG,Качество 11,60 К 1с @56 кбит/сек.Это обозначает,что время появления изображения после его вставки будет равно одной секунде.Дальше рядом в узеньком окошечке "Сохранённые параметры" при помощи курсора левой клавиши мыши нажимаем на стрелочку справа и выбираем "JPEG - меньший размер файла".В самом низу окна жмём на "ОК" и вставка фото закончена.Не забудьте сохранить результат:"Ctrl,S/Ы".
Следующий шаг:"Создание связей между страницами".
Открываем главную страницу,например,Glavnaya.index.html и открываем страницу,которая с ней будет связана,например,Page7.Soft.html На главной странице выделяем слово или группу слов нажатием левой клавиши мыши и протаскиванием курсора по словам,например:"Как я создавал свой локальный сайт".Затем внизу окна,в середине пограничной линии,нажимаем на маленькую стрелочку и открываем дополнительную панель,если она у Вас не открыта. .Слева появятся две опции:"Свойства" и "Результаты".Нажимаем на "Свойства".В открывшейся панели справа находим узенькое окошечко под названием:"Ссылка".Справа от него должен быть маленький жёлтенький прямоугольничек,его надо нажать курсором левой клавиши мыши.В центре Вашего большого рабочего окна всплывёт окно поменьше под названием:"Выбрать файл".Выбираете страницу,с которой должны быть связаны выбранные слова:"Как я создавал свой сайт".У нас, здесь, это страница:"Page7.Soft.html".Выделяете её и жмёте "ОК" внизу этого всплывшего окна.Ссылка создана.
Проверяете связь между страницами.Для этого на странице Glavnaya.index.html устанавливаете курсор в любой точке на словах "Как я создавал свой сайт" и нажимаете правую клавишу мыши.Всплывёт окно с перечнем опций. Выбираете "Открыть связанную страницу",жмёте левую клавишу мыши.Должна появиться страница "Page7.Soft.html".
Необходимо организовать и обратную связь,чтобы можно было вернуться на страницу Glavnaya.index.html.Для этого можно,например,сначала на самом верху этой страницы слева написать слова "На главную".Выделяем эти слова протаскиванием курсора и находим внизу дополнительную горизонтальную панель,а на ней маленький жёлтенький прямоугольничек справа от узенького окошечка"Ссылка".Нажимаем его левой клавишей мыши и во всплывшем окне находим и выделяем "Glavnaya.index.html".Жмём "ОК".Всплывает окно с перечнем опций.Выделяем "Открыть связанную страницу".Должна появиться Главная страница. Двухсторонняя связь создана.При этом слова,которые на странице служат для связи,видны сразу, - они подчёркнуты.
Для того,чтобы отменить связь в любую сторону,надо стереть подчёркнутые слова и напечатать их снова,они уже не будут подчёркнутыми и не будут связаны с другой страницей.
Pages: Glavnaya 1 2 3 4 5 6 7 8