User Tools

Site Tools


ru:ten_minute_web_site

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
ru:ten_minute_web_site [2013/10/28 06:29]
Arkady [Смена темы]
ru:ten_minute_web_site [2013/11/03 13:30] (current)
Arkady [Компоненты Sidebar и Tagline]
Line 1: Line 1:
 ======Сайт за 10 минут====== ======Сайт за 10 минут======
-[[http://​timbowgs.bplaced.net/​tutorial/​|{{ :wiki:pavcafehm.jpg?nolink |}}]] +{{ :ru:frontpage.png?nolink |}}
 Если вы справились [[ru:​quick_install|с установкой GetSimple]],​ настало самое время попробовать эту систему в действии. Данное пошаговое руководство поможет нам создать сайт-визитку с контактной формой. Изначальный вариант сайта для английской ВИКИ расположен [[http://​timbowgs.bplaced.net/​tutorial/​|здесь]].\\ Если вы справились [[ru:​quick_install|с установкой GetSimple]],​ настало самое время попробовать эту систему в действии. Данное пошаговое руководство поможет нам создать сайт-визитку с контактной формой. Изначальный вариант сайта для английской ВИКИ расположен [[http://​timbowgs.bplaced.net/​tutorial/​|здесь]].\\
 В этом уроке мы рассмотрим:​ В этом уроке мы рассмотрим:​
Line 25: Line 24:
  
 Подготовительные работы закончены.\\ Подготовительные работы закончены.\\
-{{ :wiki:cafe.jpg?nolink |}}+ 
 +{{ :ru:cafe_ru.jpg?nolink |}}
 =====Настройки сайта===== =====Настройки сайта=====
-Запустите ваш любимый браузер и перейдите к корневому каталогу установки GetSimple. Добавьте к URL в адресной строке ///admin// (допустим,​ ''​www.example.com/​admin''​ и нажмите ENTER. Введите имя пользователя и пароль – вы окажетесь в административной панели системы. Кликните кнопку **Настройки** в правом верхнем углу.+Запустите ваш любимый браузер и перейдите к корневому каталогу установки GetSimple. Добавьте к URL в адресной строке ///admin// (допустим,​ ''​www.example.com/​admin''​ и нажмите ENTER. Введите имя пользователя и пароль – вы окажетесь в административной панели системы. ​
  
-В секции **Настройки сайта** измените значение поля **Название сайта** на //КАФЕ Pavement//, поставьте галочку на флажке **Использовать Fancy URLs** и нажмите кнопку **Сохранить изменения**.+Кликните кнопку **Настройки** в правом верхнем углу. ​В секции **Настройки сайта** измените значение поля **Название сайта** на //КАФЕ Pavement//, поставьте галочку на флажке **Использовать Fancy URLs** и нажмите кнопку **Сохранить изменения**.
  
 В левом верхнем углу административной панели появится текст //КАФЕ Pavement//. Кликните на тексте,​ и в новой вкладке браузера появится главная страница вашего сайта, и вы сможете просматривать результаты изменений,​ которые мы будем вносить в наш учебный сайт. Только не забывайте обновлять страницу по мере внесения изменений. В левом верхнем углу административной панели появится текст //КАФЕ Pavement//. Кликните на тексте,​ и в новой вкладке браузера появится главная страница вашего сайта, и вы сможете просматривать результаты изменений,​ которые мы будем вносить в наш учебный сайт. Только не забывайте обновлять страницу по мере внесения изменений.
 =====Смена темы===== =====Смена темы=====
-{{ :​wiki:​pavtheme.jpg?​nolink&​300|}} + 
-Разархивируйте файл //​pavement.zip//​ на своем компьютере и загрузите распакованные файлы и папку //images// в папку ///theme// на ваш сайт, к папкам тем //​cardinal//​ и //​innovation//​. +Разархивируйте файл //​pavement.zip//​ на своем компьютере и загрузите ​папку //​pavement//​ c распакованными файлами и подпапку //images// в папку ///theme// на ваш сайт, к папкам тем //​cardinal//​ и //​innovation//​. 
-В административной панели активируйте вкладку **Тема**,​ в выпадающем списке выберите //​pavement//​ и нажмите кнопку **Активировать тему**. ​Перезагрузите главную страницу вашего сайта, теперь она должна выглядеть как на рисунке справа.+В административной панели активируйте вкладку **Тема**,​ в выпадающем списке выберите //​pavement//​ и нажмите кнопку **Активировать тему**. ​Обновите главную страницу вашего сайта.
  
 Тема //​Pavement//​ представляет собой урезанную и немного измененную версию бесплатной темы [[http://​get-simple.info/​extend/​theme/​trendybiz/​574/​|TrendyBiz]]. Вообще для GetSimple существует несколько сотен [[ru:​themes:​installation|бесплатных тем]]. Кроме того, ​ любой индивид,​ обладающий базовыми знаниями HTML и CSS, легко может [[ru:​themes:​tutorial|создать собственную тему]]. ​ Тема //​Pavement//​ представляет собой урезанную и немного измененную версию бесплатной темы [[http://​get-simple.info/​extend/​theme/​trendybiz/​574/​|TrendyBiz]]. Вообще для GetSimple существует несколько сотен [[ru:​themes:​installation|бесплатных тем]]. Кроме того, ​ любой индивид,​ обладающий базовыми знаниями HTML и CSS, легко может [[ru:​themes:​tutorial|создать собственную тему]]. ​
Line 42: Line 42:
 Зачастую при редактировании сайта на GetSimple FTP-клиент может и не требоваться,​ некоторые задачи бывает проще выполнить через административную панель. Давайте-ка разместим фотографию кафе на главной странице нашего сайта, и сделаем это с помощью доступного в системе функционала. ​ Зачастую при редактировании сайта на GetSimple FTP-клиент может и не требоваться,​ некоторые задачи бывает проще выполнить через административную панель. Давайте-ка разместим фотографию кафе на главной странице нашего сайта, и сделаем это с помощью доступного в системе функционала. ​
  
-Активируйте вкладку **Файлы**,​ выберите пункт бокового меню **Загрузка файлов**,​ выберите файл //​cafe.jpg//,​ который вы скачали с этой страницы и загрузите его напрямую в папку //​uploads//​. Для просмотра файла кликните на его наименовании. Вот так просто мы загрузили файл на сайт.+Активируйте вкладку **Файлы**,​ выберите пункт бокового меню **Загрузка файлов**, ​в открывшемся диалоговом окне ​выберите файл //​cafe.jpg//,​ который вы скачали с этой страницы и загрузите его напрямую в папку //​uploads//​. Для просмотра файла кликните на его наименовании. Вот так просто мы загрузили файл на сайт.
  
-{{ :wiki:pavfile.jpg?nolink |}}+{{ :ru:picmanager.png?nolink |}}
  
 =====Домашняя страница===== =====Домашняя страница=====
  
-Активируйте вкладку **Страницы** в административной панели. {{ :wiki:imgprop.jpg?nolink&300|}}Пока что наш сайт состоит только из одной главной страницы по умолчанию,​ озаглавленной //Welcome to GetSimple//​. Кликните на наименовании страницы,​ откроется окно редактора страниц. Это и есть полу-WYSIWIG-редактор,​ применяемый в системе. По умолчанию нам доступно довольно ограниченное количество основных кнопок,​ но редактор можно сконфигурировать так, чтобы на экран выводились дополнительные кнопки и панели инструментов.+Активируйте вкладку **Страницы** в административной панели. {{ :ru:picdialog.png?​nolink|}}Пока что наш сайт состоит только из одной главной страницы по умолчанию,​ озаглавленной //Welcome to GetSimple//​. Кликните на наименовании страницы,​ откроется окно редактора страниц. Это и есть полу-WYSIWIG-редактор,​ применяемый в системе. По умолчанию нам доступно довольно ограниченное количество основных кнопок,​ но редактор можно сконфигурировать так, чтобы на экран выводились дополнительные кнопки и панели инструментов.
  
-Измените заголовок страницы на //Добро пожаловать на сайт ​Pavement ​Cafe!// и удалите весь текст в поле для контента. Нажмите кнопку **Image/Рисунок** {{:​wiki:​button.jpg?​nolink|}} для открытия диалогового окна свойств рисунка,​ затем кнопку **Browse Server/Обзор сервера** и выберите файл //​cafe.jpg//​. В диалоговом окне заполните поле для аттрибута //alt// и нажмите ОК. Фотография уже дана в нужном размере,​ поэтому у нас нет необходимости изменять ее размеры или выравнивать.+Измените заголовок страницы на //Сайт Кафе Pavement// и удалите весь текст в поле для контента. Нажмите кнопку **Image/Изображение** {{:​wiki:​button.jpg?​nolink|}} для открытия диалогового окна свойств рисунка,​ затем кнопку **Browse Server/Выбор ​на сервере** и выберите файл //​cafe.jpg//​. В диалоговом окне заполните поле для аттрибута //alt (Альтернативный текст)// и нажмите ОК. Фотография уже дана в нужном размере,​ поэтому у нас нет необходимости изменять ее размеры или выравнивать.
  
 Нажмите клавишу ENTER и добавьте какой-нибудь текст под рисунком. Если вы хотите просмотреть или отредактировать HTML-код,​ нажмите кнопку **Source/​Источник**. Нажмите кнопку **Сохранить изменения** и посмотрите,​ как теперь выглядит наш сайт. Нажмите клавишу ENTER и добавьте какой-нибудь текст под рисунком. Если вы хотите просмотреть или отредактировать HTML-код,​ нажмите кнопку **Source/​Источник**. Нажмите кнопку **Сохранить изменения** и посмотрите,​ как теперь выглядит наш сайт.
  
 =====Добавление новой страницы===== =====Добавление новой страницы=====
-На вкладке **Страницы** справа мы видим кнопку **Создать новую страницу**. ​ Пусть заголовок новой страницы будет, скажем, ​ //​Найти нас//. Давайте добавим на страницу карту местоположения нашего кафе. Для этого необходимо посетить карты Google, скопировать необходимый HTML-код и вставить его в страницу в режиме **Source (Источник)**. Кликните кнопку **Сохранить изменения**,​ затем кнопку **Свойства**.+На вкладке **Страницы** справа мы видим кнопку **Создать новую страницу**. ​ Пусть заголовок новой страницы будет, скажем, ​ //​Найти нас//. В поле Постоянная ссылка введите короткую ссылку (slug), допустим,​ findus. Давайте добавим на страницу карту местоположения нашего кафе. Для этого необходимо посетить карты Google, скопировать необходимый HTML-код и вставить его в страницу в режиме **Source (Источник)**. Кликните кнопку **Сохранить изменения**,​ затем кнопку **Свойства**.
  
 В форме свойств страницы отметьте флажок **Добавить в меню** и введите текст для отображения ссылки на страницу в главном меню сайта, например,​ **Найти нас**. Сохраните изменения и обновите сайт. Для изменения порядка следованию пунктов в меню откройте **Меню менеджер** и перетащите пункты меню мышью на необходимые позиции. Еще раз нажмите кнопку **Сохранить изменения**. В форме свойств страницы отметьте флажок **Добавить в меню** и введите текст для отображения ссылки на страницу в главном меню сайта, например,​ **Найти нас**. Сохраните изменения и обновите сайт. Для изменения порядка следованию пунктов в меню откройте **Меню менеджер** и перетащите пункты меню мышью на необходимые позиции. Еще раз нажмите кнопку **Сохранить изменения**.
  
 =====Компоненты Sidebar и Tagline===== =====Компоненты Sidebar и Tagline=====
-В GetSimple существуют несколько способов управления блоками контента и редактируемыми элементами. По умолчанию система устанавливается с двумя //​компонентами//​ '​Tagline'​ и '​Sidebar'​. Компонентом называется фрагмент текста,​ HTML-кода или другого кода, который можно добавлять в шаблон страницы. Управление компонентами осуществляется на вкладке **Тема** в правом боковом меню **Редактировать**.+В GetSimple существуют несколько способов управления блоками контента и редактируемыми элементами. По умолчанию система устанавливается с двумя //​компонентами//​ '​Tagline'​ и '​Sidebar'​. Компонентом называется фрагмент текста,​ HTML-кода или другого кода, который можно добавлять в шаблон страницы. Управление компонентами осуществляется на вкладке **Тема** в правом боковом меню **Редактировать ​компоненты**.
 ==Компонент Tagline== ==Компонент Tagline==
 Этот компонент представляет собой простой текст, слоган или лозунг. Форматирование и стиль для компонента включаются в шаблон страницы и css-файл. Давайте изменим стандартный текст на что-нибудь приличествующее нашему случаю,​ например:​ //​Загляните к нам весной и останьтесь на все лето!// Этот компонент представляет собой простой текст, слоган или лозунг. Форматирование и стиль для компонента включаются в шаблон страницы и css-файл. Давайте изменим стандартный текст на что-нибудь приличествующее нашему случаю,​ например:​ //​Загляните к нам весной и останьтесь на все лето!//
Line 66: Line 66:
 Этот компонент используется для хранения и редактирования контента сайдбара страницы,​ включая HTML-разметку. Этот компонент используется для хранения и редактирования контента сайдбара страницы,​ включая HTML-разметку.
  
-{{ :​wiki:​comp02.jpg?​nolink&​300|}} ​ 
  
 +{{ :​ru:​menu.png?​nolink&​300|}} ​
 Удалите содержимое компонента по умолчанию и внесите первую строку <​h2>​Блюда дня</​h2>​. Удалите содержимое компонента по умолчанию и внесите первую строку <​h2>​Блюда дня</​h2>​.
  
Line 89: Line 89:
 Кликните кнопку **Сохранить**. Кликните кнопку **Сохранить**.
  
-Возможно,​ хозяин нашего кафе и понятия не имеет о HTML-тэгах,​ но редактирование меню даже для него будет простой задачей. Практически любой пользователь может изменять меню блюд дня в CKEdtitor, как в самом обыкновенном текстовом редакторе.+Возможно,​ хозяин нашего кафе и понятия не имеет о HTML-тэгах,​ но редактирование меню даже для него будет простой задачей. Практически любой пользователь может изменять меню блюд дня в секции редактирования компонентов, как в самом обыкновенном текстовом редакторе.
  
 =====Контактная форма===== =====Контактная форма=====
-{{ :wiki:cont01.jpg?nolink&300|}}\\+ 
 +{{ :ru:contactable.png?​nolink|}}\\
  
 Разархивируйте файл getsimple-contactable.zip. У вас получится один файл и одна папка, ​ и загрузите их по FTP на сервер в папку ///​plugins//​ вашего сайта. Выберите вкладку **Плагины** и кликните **Включить** напротив плагина //GetSimple Contactable//​. Теперь посмотрите на страницу вашего сайта. Просто,​ правда?​ Разархивируйте файл getsimple-contactable.zip. У вас получится один файл и одна папка, ​ и загрузите их по FTP на сервер в папку ///​plugins//​ вашего сайта. Выберите вкладку **Плагины** и кликните **Включить** напротив плагина //GetSimple Contactable//​. Теперь посмотрите на страницу вашего сайта. Просто,​ правда?​
ru/ten_minute_web_site.1382941797.txt.gz · Last modified: 2013/10/28 06:29 by Arkady