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
Last revision Both sides next revision
ru:ten_minute_web_site [2013/11/03 12:43]
Arkady [Смена темы]
ru:ten_minute_web_site [2013/11/03 13:25]
Arkady [Контактная форма]
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 28: Line 27:
 {{ :​ru:​cafe_ru.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//​ и нажмите кнопку **Активировать тему**. Обновите главную страницу вашего сайта.
  
Line 43: 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 90: 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.txt · Last modified: 2013/11/03 13:30 by Arkady