Над 100 милиона потребители използват своите смартфони за сърфиране в интернет според com.score Inc. Научете как да създадете мобилен уебсайт специално за мобилната аудитория. За този урок ще ви е необходим dreamweaver CS5 и нагоре. Тази статия описва как да създадете мобилен уебсайт на jquery.
Стъпки
Стъпка 1. Отворете Dreamweaver и отидете на file> New
След това ще видите прозорец "Нов документ". От лявата страна искате да изберете опцията „страница от извадка“, след което в следващата колона изберете „мобилни стартиращи устройства“, след това „jQuery Mobile (CDN)“
Стъпка 2. Създайте страниците
След като отворите файла jQuery Mobile (CDN), ще видите страница, която изглежда подобна на тази:
Въпреки че това технически е документ с една страница, всяко заглавие представлява различна "страница". Например „Първа страница“е началната страница за мобилния уебсайт, „Втора страница“може да бъде страницата за нас, „Трета страница“може да бъде вашата страница с услуги и т.н
Стъпка 3. Погледнете кода
Тези стъпки могат да бъдат доста трудни, ако не сте запознати с основния HTML. За да създадете съдържанието, опитайте да работите в „разделен изглед“на Dreamweaver. Как да стигнете до този режим е, ако погледнете в левия ъгъл на Dreamweaver, под менюто с файлове, ще видите четири опции „код, разделяне, дизайн и на живо“по следния начин:
Изберете маркираната опция „разделяне“и ще видите рамо до рамо изглед на кода и действителния сайт. Разгледайте кода
Стъпка 4. Редактирайте заглавките за всяка страница
Има (div data-role = "page"), което означава, че е началото на нова страница. Обърнете внимание, че всяка страница е свързана с номер 'div data-role = "page"' е втората страница, 'div data-role = "page"' е третата страница и т.н.
'div data-role = "header"' е областта на заглавката и поставяте информацията в заглавката между двата маркера "h1" и "/h1".
Стъпка 5. Редактирайте съдържанието и елементите от менюто
'div data-role = "Content"' е началото на раздела за съдържание. Тук поставяте действителното съдържание на всяка страница. Обърнете внимание, че на първата страница има:
-
и ако погледнете действителната уеб страница, ще видите, че първата страница има списък с връзки. 'ul data-role = "listview"' означава, че искате списък с връзки в областта на съдържанието. Когато добавяте елементи от менюто или 'data-role = "listview"', не забравяйте да свържете правилния текст с правилните страници. Например, ако втора страница е „За нас“, трета страница е „Нашата услуга“, а страница четвърта е „Свържете се с нас“, тогава искате да поставите:
Създайте мобилен уебсайт с Dreamweaver Стъпка 5 Bullet 1 -
Сега, за да редактирате съдържание, просто поставете текста си между маркерите 'div data-role = "content"' и '/div'. Например:
Създайте мобилен уебсайт с Dreamweaver Стъпка 5 Bullet 2
Стъпка 6. Редактирайте долния колонтитул
За да редактирате долния колонтитул, просто поставете текста си вместо текста „Долен колонтитул на страница“.
Стъпка 7. Разгледайте уебсайта си в „режим на живо“
Спомняте ли си къде сте превключили в „разделен режим“? точно в тази област има бутон, който казва „на живо“. Кликнете върху това и ще видите как ще изглежда вашият уебсайт на телефон!
