Разработка интернет-приложений
..pdfНапример:
<? $APPLICATION->ShowHead();
$APPLICATION- >SetAdditionalCSS(SITE_TEMPLATE_PATH.'/css/styles.css');
$APPLICATION->SetAdditionalCSS('http://fonts.googleapis.com');
?> |
|
ТакженеобходимодобпаинструментоввитьнелС1 |
-Битрикссразу |
послеткрытиятега<body> |
- <?$APPLICATION->ShowPanel();?> |
Созданиеменюспомк мпонентащьюС1 |
-Битрикс |
Длятог о,чтобыподключитькоменюпонент,необходимовпанели инструментов,установитьрежимправки.Дляэтоговерхнемправом углупереключитьрежим.
2.3. Лабораторнаяработа« |
Созданиевеб |
-прилспомощьюжений |
||
«1С -Битрикс:Упрайтомвление |
|
» |
|
|
Цельзанятия |
|
|
|
|
Получить практический навыксозданиявеб |
-приложения. |
|||
Порядвыполненияк |
лабораторнойработы |
|
||
Дляначала,нужносоздатьинф,к бтоудутлокихранитьые |
|
|
|
|
новикостимментариикним. |
|
|
|
|
Перейдитевадминистрчастьсайт,нажавтивную |
|
|
|
|
«Адми»нпанелииступрирование |
|
авления.Выберитепунктылевого |
||
менюКонтент« » |
– «Инфоблоки» |
– «Типынфоблоков»,затемнажмите. |
||
НажмитенакнопкуДоба« типв»ый.ить |
|
|
|
|
ВполеИдентификатор« (ID)»введун идентификаторкальныйте |
|
|
||
типанфоблока,например, «news»ВполеНазваниестр. |
|
|
окерусского |
|
|
|
|
11 |
|
языкаукажитеНо«»,встрокеостианглийского«News»Нажмите. «Сохранить».
СоздайтеинфобНовости«»лхраненияокновостей.Вдереве «Контент»выберитетолькочтос здаипнфоблоковныйинажмите кнопкуДобавить« инфоблок».
ВполеСи« |
мвольныйкод»введитекодинфоблока«news»,вполе |
|
«Наз»вванедНовости« »Выберите. вашсайтспискеСайты«». |
|
|
НажмитеСохранить« ». |
|
|
АналогичносоздайтеинфоблокКомментархранения« »для |
|
|
комментариевновостям.ПрисозданииинфоблокаКомментарии« » |
|
|
перейдитенавкладкуСвойства« »добавьтеинф своблокуейство |
|
|
«IDновости»,типЧисло«»,код«PARENTВэтомсвойствебудетID». |
|
|
хранитьсяиденовтификатор, привязанстимментарий. |
|
|
Теперьвыможетесоздатьновик стимментариикнимпе |
рейдяк |
|
инфоблоквдеревеКо« »натентДобавить«жавмэлемент». |
|
|
Уновостиукажтекстназвание, анонса,детальноеописание, |
|
|
можетевыбратькартинкудляанонсадетальнуюкартинку.У |
|
|
комментукажитолько,тезваниерияанокстновостиIDса,к |
|
|
которойхотитеегопривязать. |
|
|
Следующийшаг |
– этовыводновикомментариевстей. |
|
Создараздляновостейелим.Дляэтогоперейдитепубличную частьсайта,выбрСайт«»нпанелиуправл.Пернаглавнуюенияйдите
стра,заницуйтаемнажмитекнопкуС« оздатьраздел»напанели управления.УкзаголовжитеразделаНовости« »,кгалочкувьте пунктаДобави« пункменю»Перей. тьвсозразделите,анныйвыбрав пунктменюНовости« ».
ВыведемновонаглавнуюстираницузделаНовости« »Для.этого нажмите накнопкуИзме« страницу»панелиитьуправления, появившемсяокне,спискекомпонент,найдитекомпонентСписок« в
12
нов»падростКонтент«»суй |
– «Новости» |
– «Списновостей». к |
|
Перенеситекомпвлевуюобластьокна.Впоявившемсянтокне |
|
||
настройкип |
араметркомпонентаукажитевнформационногоблока |
|
|
«[news]Нов»икинфомацистидблокаНов« »Найдите.ополестинного |
|
||
«URLстраницыдетальпросмотра»,внвведитеегоого |
|
||
«/novosti/detailэтоукажадресбу т.етальнойущейphp?ID=#ID#», |
|
||
страницыто, |
|
чтонанеётребуетсяпередатьтекущейIDновости. |
|
Сохранитеизменения. |
|
|
|
Страницадолжнаперезагрузиться,теперьнанейвиденсписок добавленныхваминовостей.
Создайтестраницудлядетальногопросмнов.Дляэтогостира нажмитеСоздать« страницу»напане лиуправления.Укажитезаголовок странДетальная« »,ицыфайламя«detailуберитегалочку.php»,пункта
«Добавипункменю». ть
Откройтеокноизмд нениятальстраницыразмойнаеститей компН«одетвостьнент»поальнодресуКонтент«» – «Новости» – «Н овостьдетально»Вокне. настройкикомпонентаукажитетип
информациблока«[news]Нов»,коиндстиногофоблокаНовости« » IDновости«={$_ТакимREQUEST["ID"]}»образом,компонентбудет . выводитьинформациютойновости, которойIDбылпереданвзапросе. Сохранитеизменения.
Страницадетальногопросмотрасоздан.Выпроверитьжтеё работу,пев ейазНо«д»еляивостиыбравлюбуюиздобавленных ваминовостей.
2.4.Лабораторнаяработа« Настройкиинформационных блоков»
Цельзанятия |
|
Оптимизироватьпр |
оцесссозданиябольшогоколичестваэлементов |
информационногоблока |
. |
|
13 |
Порядвыполненияк лабораторнойработы
Созданиебольшогоколичестваэлементовинформационногоблока можноблегчитьзасчетпредвнастррительнойформыд йкибавления элементов.
Настройкавнешнеговидаформы
Формаредактировадобавления/ элемеинфмбытьтаблокажет измененанастроенаподпотребностиконтент Измененнаяформатображакакпридобавлендактировании/ тся элементавадминистративнойчасти,такпри добавленредактирован/ элементапубличнойчаст.
Принеобходимопереместитьможнолюбыеполялюбой закладкиформыналюбыедругиезакладки,сформудобныйвировав формыдлякаждогоконкретногоинфоблока.
Например,можнозар датьнеесновныеп добатовклениеаможнотрабыллогпр быстроизвестиудобно.
Рассмформуд бавлениятримэлеинфоблокаента.Еевнешнийвид поумолчаниюпредставленнарисунке3.
Рисунок3 – Внешнийвидформыдобавленияэлементаинфп блока умолчанию
14
-менеджерасайта.
араметрытак,чтоб
Настроеннаяформа |
длядоб авленияновогодивкаталогможетна |
выглядетькакпокнрисункеазано4. |
|
Рисунок4 – Формадлядобавленияновогодивана
Каквидите,сокращеноколичествозакладок,удаленыненужные поля,перемещенывудобныеместану жныеполяформы.Работатьстало прощеиудобнее.
2.5. Лабораторнаяработа« |
Версткапод«1С |
-Битрикс:Управление |
|
сайтом»исоздшаблонание |
– особенности,проблемы |
» |
|
Цельзанятия |
|
|
|
Ознакомитьсяосновнымиособенностямиразршаблоновнаотк |
|
|
|
примереконкретнойси |
стемыуправлениясайтом |
. |
|
15
Порядвыполненияк лабораторнойработы
Шаблондизайна - этовнешнийвидсайта,котоопромеделяется расположеразличныхэлементхудожественныйнасайте, ие стиль
способотображениястраниц.Включаетвсебпрограммныйhtml - иphp - код,графичеэлементы,таблск,дополнительныелейцыфайлыдля отображенияконтента.Мотаквключатьетсебяшаблоны компонентов,шаблготстраницнысниппеты.х
Использошаблонпозпрваниеоляодитьовгибкуюнастройку дизсайна тов,разделовистр.Наприйтаниц,возможноер использованиеспеципр зддизайтеогочукениеазанного периодавремени,автоматическоеуправлевнешвидомсайтани зависимосотгруппыпосет.д.тителей
Усайтаможетбытьмногошабло |
|
новдизайна,, ,оборотдин |
шаблонможетбытьиспользованнанесколькихсайтах. |
|
|
Шаблонсайтаопределяет: |
|
|
оформлсайтадизайн(,версткуниестр, аницбор |
|
|
основныхкаскадныхстилей); |
|
|
типыменюихрасположение; |
|
|
наличиерекламныхобластей( |
йдляразмещения |
|
наличиевключаемыхобластейшаблонеистраницах |
|
|
налвдисачиезформыйавторизациитане, |
|
|
баннеров); |
|
|
сайта; |
|
|
оформленияподпискит.. |
|
|
Всеиспользуемыевсистемешаблхранятсяв тдельныхпапках |
|
|
каталога/bitrix/templates/напри |
( |
мер, /bitrix/templates/demo/или |
/bitrix/templates/template1/),либоначинаясверсии14.0.0, |
|
|
/local/templates/Такжесуществуетспециальотораяпап.default,к. не |
|
|
являетсяполноценшаблосайта,содержитншаблоныым |
|
|
компонентовифайлы,общиед |
ляостальныхшаблоновсайта. |
|
Шаблдизсайобычнотасостнаизтрехосновныхитчастей: Верхнейчастидизайна(header); Рабочейобластистраницы(Work area);
16
|
Нижнейчастидизайна(footer). |
|
Прсоздцесайташаблонаниявключаетдваосновныхэтапа |
: |
|
1 |
созданиепрототипашаблонадизайна; |
|
2 |
созданиеполнофункциональногошаблона. |
|
Прототиппредсобойтаверстляетhtmlшаблондизанныйн |
|
сайта.Приверсткешаблоневыделяютсяфункциональныеобласти |
. |
Примертакоговыделенияпредставленнарисунке5 |
. |
|
Рисунок5 |
– Прототип дизсайтана |
• |
заголовокстраницы; |
|
• |
меню; |
|
• |
цепочканавигации; |
|
• |
формаавторизации; |
|
• |
формапоиска; |
|
• |
включобластифайлы;емые |
|
• |
рекламныеобласти; |
|
• |
ит.д. |
|
|
|
17 |
Наэтапесозданияполнофункциональногошаблонадиз |
айна |
выполняетсязаменаHTMLэлементовдизсоответствующиеайна |
|
функциональныеэлементы:программнкодвызовкомпонентов.Вый |
|
результатечегоужеполучаетсяPHP |
-шаблондизсай. тана |
Рисунок6 |
– PHP-шаблондизсайтана |
Оснмо,которыевныементы |
ужноучитыватьприсоздании |
шаблона: |
|
Приподготовкеграфиследуетзайначзаранееского разметитьлиниюразделадизпрологйна(headerиэпилог.php) (footer.php).
Следувыдосновныеэлементылитьдизайна,для последующеймодификациитаблст цы й:шриф,цвезаливкиты т.п.
Разрабдизменюразличныхтываяйнуровней, желательновыделятьповторяющиесяэлементы - дляупрощения создшаблонаменюниядальнейшуправленияэтимименю. го
18
Дляоблегчениясопразличныховожденияязыковых версийсай таповозможнследуетиспвместостильзоватьграфических элементекс. товые
ПринарезкеграфдиизайнаподгческHTMLоготвке шаблона,необходимозаранеепредусмместрасположениятреть
оснковныхмпонсиступравлениясайтнтовмы.Выделиомбласть и меню,рекламныеобласти, размещениястидополнительныхформ.
Рекомендуетсяпроизводитьподготовкушаблона учетомпоследующейтабличносборки.Одновременнодопускается испол. оевьзование
Принарезкеграфдивыделяютсязайначеского однотонные области.Присборкешаблонаэтиобластимогутбыть предсячейкамитасовбсплошнойеныицзаливкойцвета.
Размещатьграфическиеизображ,относящиесяния шаблону,следуетвпапке/bitrix/templимяшаблона>/imagests/<.
|
Редактиршаблдизайнаование |
сайтаввизуальном |
режимебудетпроисходкорректно,еслватрибутахтьHTML |
-теговне |
|
содержитсяphp |
-код,атакже,если,напримерстрокиячейкитаблицыне |
|
прерываютсяphp |
-кодомприформированиитаблицы.Есликоде |
|
шаблонадизсайесттнаособеькие |
|
нности,торедактироватьего |
следутольврежимекодат. |
|
|
Каскадныет,используемыелившаблоне, рекомендуетсяразнатаблелявети,хранящиесяьлейцывдвух разныхфайлнаходятся.Обфайлавдиректории
/bitrix/templates/<идентификаторшаблона> /Файл. stylesсодержит.css
стилидляпредставленияинформациосодержастраницына ногоия сайте.Файлtemplateсодержстилидляотображенияstylesтекстов.css самомшаблонедизайна.Принеобходимостиможноподключв ть
<head>любоеколичествостилевых файлов,дополнительнокstyles.css templateподключачерезstylesshowhead()Делается.css,этомым .
обычлипереднымикзакрытиемтэга</head>,адополнительные стилевыефайлыположителюбуюпапку.Эффекттотдежесамый, какеслибывысобрали всевашидополнительныестилидописаливх двафшаблонайлас сойтандартныминаименованиями.
2.6. Лабораторнаяработа« |
Работасвключаемымирекламными |
областями.Применениешаблонад зайна |
» |
|
19 |
Цель работа |
|
|
|
Научитьсяработатьвариантамиразмещенияспр |
авочной |
|
|
информациинавеб |
-странице. |
|
|
Порядвыполненияк |
лабораторнойработы |
|
|
Включобластьемая |
|
– этоспециальновыделеннаяобл сть |
|
стра,которуюницейтаможноредактироватьтдельноотосновного |
|
|
|
содержаниястраницы. |
|
|
|
Включоблслужатдлястиемыера |
|
змещениясправо |
чной |
информации,различныхподписки(,гол, сованияпросов), |
|
|
|
новостейилюбодругойстатическойдинамическойинформации. |
|
|
|
Такжеввидевключобластимогутбытьемойвыпообслненыасти |
|
|
|
укавторскихзаниемправ,графическиессылки,контактнаяинформа |
|
ция, |
|
логкомтип.. ании |
|
|
|
СодержимоевключаемыхобластейхранитсяотдельныхPHPили |
|
|
|
HTMLфайлах.Областидлястраницилиразделовсохраняются |
|
|
|
некоторымсуффиксом.На,поставляемыхримерфайлахпродукта |
|
|
|
качествеобозначениявключоблдлемойсти |
|
ястраницыиспользуется |
|
суффикснапримерinc, index(включоблincдляа.емаяphp),сть |
|
|
|
разделасайтасохранявфайлеимsectидобавлениемтсянемкнему суффиксанапример( , sect inc.php).
Файлсвк областьюючдолженембытьхраненвтойже директории,чтостраница,длякоторойонбылсоздан.Включаемая областьдляраздела - впапкеэтогораздела.
Подключениеобластейвшаблонедизайвыполняетсятана помкомпонентащьюВставкавключоблибоастипомощьюемой функцииIncludeFile().
Суффикс,исподобозначенияльзуемыйвключобластей, емых опреднеляетопциейименнвнаскомпонентахятройВставка включобласти.Коемпонентожразмещйтольковшаблонеть
20