This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
ru:ten_minute_web_site [2013/11/03 12:41] Arkady [Подготовка к работе] |
ru:ten_minute_web_site [2013/11/03 13:20] 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// и нажмите кнопку **Активировать тему**. Обновите главную страницу вашего сайта. |
Тема //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 43: | Line 42: | ||
Зачастую при редактировании сайта на GetSimple FTP-клиент может и не требоваться, некоторые задачи бывает проще выполнить через административную панель. Давайте-ка разместим фотографию кафе на главной странице нашего сайта, и сделаем это с помощью доступного в системе функционала. | Зачастую при редактировании сайта на GetSimple FTP-клиент может и не требоваться, некоторые задачи бывает проще выполнить через административную панель. Давайте-ка разместим фотографию кафе на главной странице нашего сайта, и сделаем это с помощью доступного в системе функционала. | ||
- | Активируйте вкладку **Файлы**, выберите пункт бокового меню **Загрузка файлов**, выберите файл //cafe.jpg//, который вы скачали с этой страницы и загрузите его напрямую в папку //uploads//. Для просмотра файла кликните на его наименовании. Вот так просто мы загрузили файл на сайт. | + | Активируйте вкладку **Файлы**, выберите пункт бокового меню **Загрузка файлов**, в открывшемся диалоговом окне выберите файл //cafe.jpg//, который вы скачали с этой страницы и загрузите его напрямую в папку //uploads//. Для просмотра файла кликните на его наименовании. Вот так просто мы загрузили файл на сайт. |
{{ :wiki:pavfile.jpg?nolink |}} | {{ :wiki:pavfile.jpg?nolink |}} | ||
Line 51: | Line 50: | ||
Активируйте вкладку **Страницы** в административной панели. {{ :wiki:imgprop.jpg?nolink&300|}}Пока что наш сайт состоит только из одной главной страницы по умолчанию, озаглавленной //Welcome to GetSimple//. Кликните на наименовании страницы, откроется окно редактора страниц. Это и есть полу-WYSIWIG-редактор, применяемый в системе. По умолчанию нам доступно довольно ограниченное количество основных кнопок, но редактор можно сконфигурировать так, чтобы на экран выводились дополнительные кнопки и панели инструментов. | Активируйте вкладку **Страницы** в административной панели. {{ :wiki:imgprop.jpg?nolink&300|}}Пока что наш сайт состоит только из одной главной страницы по умолчанию, озаглавленной //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-тэгах, но редактирование меню даже для него будет простой задачей. Практически любой пользователь может изменять меню блюд дня в секции редактирования компонентов, как в самом обыкновенном текстовом редакторе. |
=====Контактная форма===== | =====Контактная форма===== |