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/10/22 11:46] Arkady [Загрузка файлов] |
ru:ten_minute_web_site [2013/11/03 13:22] 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 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// и нажмите кнопку **Активировать тему**. Перезагрузите главную страницу вашего сайта, теперь она должна выглядеть как на рисунке справа. | ||
- | Тема //Pavement// представляет собой урезанную и немного измененную версию бесплатной темы [[http://get-simple.info/extend/theme/trendybiz/574/|TrendyBiz]]. Вообще для GetSimple существует несколько сотен [[ru:themes:installation|бесплатных тем]]. Кроме того, любой индивид, обладающий базовыми знаниями HTML и CSS, легко может [[themes:tutorial|создать собственную тему]]. | + | Разархивируйте файл //pavement.zip// на своем компьютере и загрузите папку //pavement// c распакованными файлами и подпапку //images// в папку ///theme// на ваш сайт, к папкам тем //cardinal// и //innovation//. |
+ | В административной панели активируйте вкладку **Тема**, в выпадающем списке выберите //pavement// и нажмите кнопку **Активировать тему**. Обновите главную страницу вашего сайта. | ||
+ | |||
+ | Тема //Pavement// представляет собой урезанную и немного измененную версию бесплатной темы [[http://get-simple.info/extend/theme/trendybiz/574/|TrendyBiz]]. Вообще для GetSimple существует несколько сотен [[ru:themes:installation|бесплатных тем]]. Кроме того, любой индивид, обладающий базовыми знаниями HTML и CSS, легко может [[ru:themes:tutorial|создать собственную тему]]. | ||
=====Загрузка файлов===== | =====Загрузка файлов===== | ||
Зачастую при редактировании сайта на GetSimple FTP-клиент может и не требоваться, некоторые задачи бывает проще выполнить через административную панель. Давайте-ка разместим фотографию кафе на главной странице нашего сайта, и сделаем это с помощью доступного в системе функционала. | Зачастую при редактировании сайта на GetSimple FTP-клиент может и не требоваться, некоторые задачи бывает проще выполнить через административную панель. Давайте-ка разместим фотографию кафе на главной странице нашего сайта, и сделаем это с помощью доступного в системе функционала. | ||
- | Активируйте вкладку **Файлы**, выберите пункт бокового меню **Загрузка файлов**, выберите файл //cafe.jpg//, который вы скачали с этой страницы и загрузите его напрямую в папку //uploads//. Для просмотра файла кликните на его наименовании. Вот так просто мы загрузили файл на сайт. | + | Активируйте вкладку **Файлы**, выберите пункт бокового меню **Загрузка файлов**, в открывшемся диалоговом окне выберите файл //cafe.jpg//, который вы скачали с этой страницы и загрузите его напрямую в папку //uploads//. Для просмотра файла кликните на его наименовании. Вот так просто мы загрузили файл на сайт. |
- | {{ :wiki:pavfile.jpg?nolink |}} | + | {{ :ru:picmanager.png?nolink |}} |
=====Домашняя страница===== | =====Домашняя страница===== | ||
- | In the Back End (Admin) click on the **Pages** Tab.{{ :wiki:imgprop.jpg?nolink&300|}} The only page we have so far is the default index page titled //Welcome to GetSimple//. Click on the Page Title to open the Page Editor. This is GetSimple's semi-[[how_to:wysiwyg_editor|WYSIWYG Editor]]. In its default state there are only a few basic controls but the editor can be configured and customised for advanced use. | ||
- | Change the Page Title to //Welcome to the Pavement Cafe Website// and delete all the text in the main content area. Click on the **Image** button {{:wiki:button.jpg?nolink|}}to open **Image Properties** then **Browse Server**, and choose cafe.jpg. Write in some //alt// text and click **OK**. The image is already the right size so we don't need to resize or align it. | + | Активируйте вкладку **Страницы** в административной панели. {{ :ru:picdialog.png?nolink|}}Пока что наш сайт состоит только из одной главной страницы по умолчанию, озаглавленной //Welcome to GetSimple//. Кликните на наименовании страницы, откроется окно редактора страниц. Это и есть полу-WYSIWIG-редактор, применяемый в системе. По умолчанию нам доступно довольно ограниченное количество основных кнопок, но редактор можно сконфигурировать так, чтобы на экран выводились дополнительные кнопки и панели инструментов. |
+ | |||
+ | Измените заголовок страницы на //Сайт Кафе Pavement// и удалите весь текст в поле для контента. Нажмите кнопку **Image/Изображение** {{:wiki:button.jpg?nolink|}} для открытия диалогового окна свойств рисунка, затем кнопку **Browse Server/Выбор на сервере** и выберите файл //cafe.jpg//. В диалоговом окне заполните поле для аттрибута //alt (Альтернативный текст)// и нажмите ОК. Фотография уже дана в нужном размере, поэтому у нас нет необходимости изменять ее размеры или выравнивать. | ||
- | Press your Return key to bring down the text insertion point and add any text you like underneath the image. Click on **Source** if you want to view and edit the html. Click **Save Updates**. Take a look at your site. | + | Нажмите клавишу ENTER и добавьте какой-нибудь текст под рисунком. Если вы хотите просмотреть или отредактировать HTML-код, нажмите кнопку **Source/Источник**. Нажмите кнопку **Сохранить изменения** и посмотрите, как теперь выглядит наш сайт. |
=====Добавление новой страницы===== | =====Добавление новой страницы===== | ||
- | Still under the **Pages** tab, on the right hand side click **Create New Page**. The new Page Title is //Our Location//. You can add a map by going to google maps, copying the embed code and pasting it into the page in **Source** view. **Save Updates** then click on **Page Options**. | + | На вкладке **Страницы** справа мы видим кнопку **Создать новую страницу**. Пусть заголовок новой страницы будет, скажем, //Найти нас//. В поле Постоянная ссылка введите короткую ссылку (slug), допустим, findus. Давайте добавим на страницу карту местоположения нашего кафе. Для этого необходимо посетить карты Google, скопировать необходимый HTML-код и вставить его в страницу в режиме **Source (Источник)**. Кликните кнопку **Сохранить изменения**, затем кнопку **Свойства**. |
- | In **Page Options** tick **Add this page to the menu** and give it a short text to display in the nav menu like //Find Us//. Save Updates and reload your site. To change the order of pages in the Nav Menu open the **Menu Manager** and drag and drop the pages where you want them. Save again. | + | В форме свойств страницы отметьте флажок **Добавить в меню** и введите текст для отображения ссылки на страницу в главном меню сайта, например, **Найти нас**. Сохраните изменения и обновите сайт. Для изменения порядка следованию пунктов в меню откройте **Меню менеджер** и перетащите пункты меню мышью на необходимые позиции. Еще раз нажмите кнопку **Сохранить изменения**. |
=====Компоненты Sidebar и Tagline===== | =====Компоненты Sidebar и Tagline===== | ||
- | В GetSimple существуют несколько способов управления блоками контента и редактируемыми элементами. По умолчанию система устанавливается с двумя //компонентами// 'Tagline' и 'Sidebar'. Компонентом называется фрагмент текста, HTML-кода или другого кода, который можно добавлять в шаблон страницы. Управление компонентами осуществляется на вкладке **Тема** в правом боковом меню **Редактировать**. | + | В GetSimple существуют несколько способов управления блоками контента и редактируемыми элементами. По умолчанию система устанавливается с двумя //компонентами// 'Tagline' и 'Sidebar'. Компонентом называется фрагмент текста, HTML-кода или другого кода, который можно добавлять в шаблон страницы. Управление компонентами осуществляется на вкладке **Тема** в правом боковом меню **Редактировать компоненты**. |
==Компонент Tagline== | ==Компонент Tagline== | ||
Этот компонент представляет собой простой текст, слоган или лозунг. Форматирование и стиль для компонента включаются в шаблон страницы и css-файл. Давайте изменим стандартный текст на что-нибудь приличествующее нашему случаю, например: //Загляните к нам весной и останьтесь на все лето!// | Этот компонент представляет собой простой текст, слоган или лозунг. Форматирование и стиль для компонента включаются в шаблон страницы и css-файл. Давайте изменим стандартный текст на что-нибудь приличествующее нашему случаю, например: //Загляните к нам весной и останьтесь на все лето!// | ||
Line 88: | Line 89: | ||
Кликните кнопку **Сохранить**. | Кликните кнопку **Сохранить**. | ||
- | Возможно, хозяин нашего кафе и понятия не имеет о HTML-тэгах, но редактирование меню даже для него будет простой задачей. Практически любой пользователь может изменять меню блюд дня в CKEdtitor, как в самом обыкновенном текстовом редакторе. | + | Возможно, хозяин нашего кафе и понятия не имеет о HTML-тэгах, но редактирование меню даже для него будет простой задачей. Практически любой пользователь может изменять меню блюд дня в секции редактирования компонентов, как в самом обыкновенном текстовом редакторе. |
=====Контактная форма===== | =====Контактная форма===== |