100 মিলিয়নেরও বেশি ভোক্তা তাদের স্মার্টফোন ব্যবহার করে ইন্টারনেট ব্রাউজ করার জন্য com.score Inc. অনুসারে জানুন কিভাবে মোবাইল দর্শকদের জন্য একটি মোবাইল ওয়েবসাইট তৈরি করতে হয়। এই টিউটোরিয়ালের জন্য, আপনার প্রয়োজন হবে ড্রিমওয়েভার CS5 এবং এর উপরে। এই নিবন্ধে বিস্তারিত একটি jquery মোবাইল ওয়েবসাইট কিভাবে তৈরি করা যায়।
ধাপ
ধাপ 1. ড্রিমওয়েভার খুলুন এবং ফাইল> নতুন এ যান।
তারপর আপনি একটি "নতুন ডকুমেন্ট" উইন্ডো দেখতে পাবেন। বাম দিকে, আপনি "নমুনা থেকে পৃষ্ঠা" বিকল্পটি বেছে নিতে চান তারপর পরবর্তী কলামে "মোবাইল স্টার্টার্স", তারপর "jQuery মোবাইল (CDN)" নির্বাচন করুন
পদক্ষেপ 2. পৃষ্ঠাগুলি তৈরি করুন।
একবার আপনি jQuery মোবাইল (CDN) ফাইলটি খুললে, আপনি একটি পৃষ্ঠা দেখতে পাবেন যা দেখতে অনুরূপ:
যদিও এটি টেকনিক্যালি এক পৃষ্ঠার নথি, প্রতিটি শিরোনাম একটি ভিন্ন "পৃষ্ঠা" উপস্থাপন করে। উদাহরণস্বরূপ, "পেজ ওয়ান" হল মোবাইল ওয়েবসাইটের হোম পেজ, "পেজ টু" হতে পারে আমাদের সম্পর্কে পৃষ্ঠা, "পেজ থ্রি" হতে পারে আপনার সার্ভিস পেজ ইত্যাদি।
ধাপ 3. কোড দেখুন।
আপনি প্রাথমিক HTML এর সাথে অপরিচিত হলে এই পদক্ষেপগুলি বেশ জটিল হতে পারে। বিষয়বস্তু তৈরি করতে, ড্রিমওয়েভারে "বিভক্ত ভিউ" তে কাজ করার চেষ্টা করুন। সেই মোডে কিভাবে পৌঁছানো যায় তা হল যদি আপনি ড্রিমওয়েভারের বাম দিকের কোণার দিকে তাকান, ফাইল মেনুর নীচে, আপনি চারটি বিকল্প "কোড, স্প্লিট, ডিজাইন এবং লাইভ" দেখতে পাবেন:
"বিভক্ত" হাইলাইট করা বিকল্পটি চয়ন করুন, এবং আপনি কোড এবং প্রকৃত সাইটটি পাশাপাশি দেখবেন। কোড দেখে নিন।
ধাপ 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"' যোগ করার সময়, নিশ্চিত করুন যে আপনি সঠিক পাঠ্যগুলিকে সঠিক পৃষ্ঠাগুলির সাথে লিঙ্ক করেছেন । উদাহরণস্বরূপ যদি পৃষ্ঠা দুইটি "আমাদের সম্পর্কে" হয়, পৃষ্ঠা তিনটি হল "আমাদের পরিষেবা", এবং পৃষ্ঠা চারটি হল "আমাদের সাথে যোগাযোগ করুন" তাহলে আপনি রাখতে চান:
ড্রিমওয়েভার ধাপ 5 বুলেট 1 দিয়ে একটি মোবাইল ওয়েবসাইট তৈরি করুন -
এখন বিষয়বস্তু সম্পাদনা করতে, আপনার পাঠ্যকে 'div data-role = "content"' এবং '/div' ট্যাগের মধ্যে রাখুন। উদাহরণ স্বরূপ:
ড্রিমওয়েভার স্টেপ 5 বুলেট 2 দিয়ে একটি মোবাইল ওয়েবসাইট তৈরি করুন
পদক্ষেপ 6. পাদলেখ সম্পাদনা করুন।
পাদলেখ সম্পাদনা করতে, কেবল "পৃষ্ঠা ফুটার" পাঠ্যের জায়গায় আপনার পাঠ্য রাখুন।
ধাপ 7. "লাইভ মোডে" আপনার ওয়েবসাইটটি দেখুন।
মনে রাখবেন আপনি কোথায় "স্প্লিট মোডে" গেছেন? ঠিক সেই এলাকায়, একটি বোতাম রয়েছে যা "লাইভ" বলে। এটিতে ক্লিক করুন, এবং আপনি দেখতে পাবেন যে আপনার ওয়েবসাইটটি ফোনে কেমন হবে!
