Разработка интернет-приложений.-2
.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/например, |
( |
mplates/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/templateидентификаторшаблона>/Файл. 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