مراحل ، منابع و نرم افزارهای یادگیری طراحی وب سایت

[مصطفی شفیعی]

با درود
همونطور که از عنوان تاپیک معلومه در ابتدا مراحل و نیازمندی های یادگیری طراحی وب رو بصورت تیتروار بیان می کنیم (از ابتدای کار تا انتهای فنآوری روز وب)
در مرحله بعد منابع الکترونیکی و فیزیکی! مورد نیاز رو معرفی می کنیم
و در آخر برنامه های کاربردی رو قرار می دیم (با لینک دانلود)
آموزش جامع مراحل و برنامه ها در تاپیک های مختص هر بخش عنوان خوهد شد...

[مصطفی شفیعی]

در گام نخست توضیح مختصری در ارتباط با انواع طراحی های تحت وب که به ساخت یک سایت منجر میشه رو بیان می کنم :

طراحی یک وب سایت بصورت ثابت (Static) و یا پویا (Dynamic) ارائه میشه ، منظور از طراحی صفحات ثابت استفاده یا بکارگیری کدها و زبان های تحت وبیه که در سیستم کاربر و معمولا توسط مرورگر وب خونده شده و به نمایش در میاد ، یعنی در صورتیکه این کدها رو به همراه عکس و سایر اجزاء تشکیل دهنده در صفحه طراحی شده ، روی یک سیستم ذخیره کنید براحتی امکان نمایش صفحه در مرورگر فراهم خواهد بود. ولی این قضیه برای صفحات پویا صادق نیست چراکه در صفحات پویا ما نیاز به پردازش روی کدها یا برنامه های تحت وبمون داریم و این پردازش و تفسیر برنامه نه در سیستم کاربر بلکه در سرور میزبان رخ میده که اصطلاحا به زبان های مورد استفاده در طراحی های پویا زبان های سمت سرور هم گفته میشه ، مسلما چیزی که در سرور رخ میده همون تفسیر برنامه نوشته شده ، توسط موتورها یا مفسر های مربوطست.
 بدون حاشیه بگم آقا (یا خانوم) این سایت هایی که آخر آدرسشون نوشته .html یا .htm از طراحی های ثابت بهره میگین (البته نه صد در صدشون!) و اونایی که .php یا .asp دارن اصطلاحا دچار طراحی پویا هستن ، یعنی یک سطح بالاتری از برنامه نویسی ، ولی بازم ممکنه که هیچ استفاده ای از خود کدهای زبان های سمت سرور درشون صورت نگرفته باشه و فقط بابت کلاس گذاشتن یا گول زدن از همچین پسوندی استفاده بشه!
زبان های سمت سرور معمولا بصورت ترکیبی از زبان سمت سرور و زبان اچ تی ام ال بکار گرفته میشن چون در نهایت بعد از تفسیر برنامه در سرور ، ما باید کدهایی رو بگیریم که مرورگرمون توان خوندن ، فهمیدن و نمایششون رو داشته باشه...

[مصطفی شفیعی]

و اما معرفی زبان ها و اسکریپت ها و ابزارهای مورد نیاز یک طراح وب در دو سطح طراحی ثابت و پویا :

1.  (HyperText Markup Language) - اچ تی ام ال - HTML
 آشنایی با ساختار کلی زبان فرامتنی و نحوه عملکرد و بکارگیری تگ ها جهت شکل دهی و ایجاد چیدمان ساختاری اجزاء صفحات...

2.  (Cascade Style Sheets) - سی اس ای - CSS
سبک تعاریف آبشاری در بسیاری از صفحات ثابت نیز از استاندارد های کنسرسیوم جهانی وب تبعیت می کند ، امروزه استفاده از CSS در یک طراحی اصولی و معتبر اجتناب ناپذیر است.

3. Java or VB Script - جاوا اسکریپت و ویبی اسکریپت
الزامی به استفاده از این دو اسکریپت در طراحی ها نیست ولی یک طراح وب صفحات ثابت حداقل می بایست نحوه وارد کردن کدهای جاوا اسکریپت در صفحات خود را دانسته و بتواند آنها را خوانده و ویرایش کند ، علاوه بر آن دانستن نحوه کار با اسکریپت ها در آینده دینامیکیه وی نیز موثر است!

4. Site Skin - رابط گرافیکی سایت
جهت برآورده ساختن این نیاز نسبتا ضروری سایت ، طراح وب می بایست به کار با برنامه هایی چون Photoshop و یا FireWorks آشنایی کامل داشته باشد.

5. Flash - فلش
اسناد فلش نیز جدای از اسکریپت نویسی خاص خود در بسیاری از سایت ها تنها به جلوه های گرافیکی یک صفحه کمک میکند.

>>> پیش به سوی دینامیکی شدن (البته بعد از کسب تجربه!!!)

6. ? PHP or ASP  - ای اس پی یا پی اچ پی ؟
اینکه شما کدام یک از زبان های سمت سرور را برای شروع ، ادامه و حرفه ای شدن برگزینید بسیار حائز اهمیت است و به نیازها و زمان شما ، همچنین پیشینه و زمینه کاریتان مربوط است ، در ادامه به این دو زبان و تفاوت های اساسی شان خواهیم پرداخت...

7. (Asynchronous JavaScript and XML Technology) - فنآوری آژاکس - AJAX Technology
این گزینه یعنی تکنولوژی روز طراحی وب ، سایت های بزرگ زیادی آجاکس شدن و یا دارن میشن.


* توضیح مختصر ولی قابل توجهی در مورد اینکه آجاکس یا آژاکس چیه و چطور کار می کنه :

سوال) تا زمانی که سرور در حال انجام کارهای خودش است کاربر باید چکاری انجام دهد؟
 درست است ، او باید صبر کند و در هر گام یک عمل ، باید بیشتر زمان را صبر نماید.
واضح است اگر ما یک طراح وب بودیم نبایستی در این مدت کاربر را منتظر نگه داریم. یکبار واسط (Interface) در سمت مشتری بارگذاری می شود ، چرا باید فعل و انفعال کاربر دچار مکث شود در هر باری که برنامه کابردی نیاز به چیزی از سرور دارد ؟ در حقیقت چرا کاربر باید همیشه برنامه را در حال رفتن به سرور مشاهده کند؟
به چه سبب آژاکس متمایز است ؟
یک برنامه کاربردی آژاکس طبیعت Start-Stop-Start-Stop فعل و انفعال در وب را بااستفاده از مطرح کردن واسطی میان کاربر و سرور به نام موتور آژاکس بر طرف نموده است. بنظر میرسد که مانند اضافه کردن یک لایه به برنامه کاربردی است تا برنامه را کمتر به سمت سرور فرستاده و از آن پاسخ دریافت نمایید. اما برعکس این حالت درست می باشد.
درابتدای یک جلسه با یک سرور بجای بارشدن صفحه ابتدا مـرورگر موتور آژاکس را بار می نماید که معمولا با جاوا اسکریپت نوشته شده است و در یک فریم مخفی چیده شده است. این موتور مسئول بین رندر کردن واسطی که کاربر می بیند و ارتباط بر قرار کردن با سرور از طرف کاربر می باشد. این موتور به کاربر اجازه می دهد که مستقل از ارتباط برقرار کردن با سرور ، با برنامه تعامل داشته باشد. همچنین کاربر هرگز در یک صفحه جدید سفید مرورگر با یک آیکون ساعت شنی شروع نمی کند و در حال صبر نخواهد بود تا سرور کارهایش را انجام دهد...

همانطور که گفته شد آجاکس یک فناوری است، آجاکس متشکل از چندین فناوری دیگر است که هر کدام در مسیری جدید و قوی می آیند. آجاکس از بهم پیوستن پنچ گزینه زیر بوجود آمده است:
ارائه استاندارد پایه با استفاده از XHTML و CSS
نمایش پویا و تعامل با کاربر با استفاده از DOM - Document Object Model
دستکاری و تبادل اطلاعات با استفاده از XML و XSLT
بازیابی غیر همزمان داده ها با استفاده از XMLHttpRequest
تقید همه چیز با هم (JavaScript)

[مصطفی شفیعی]

پیش از این می خواستم پیوند بارگیری (لینک دانلود) نرم افزار ها رو براتون بزارم ، از هنگامی که ادوبی بسته های مختلفش رو با ماکرومدیا در هم آمیخته (ماکرومدیا رو خریده) و پس از گذشت دو نسخه از این در هم آمیزی ، بسته ویژه طراحی وب خودش رو ارایه داده + بسته همه نرم افزار های این شرکت ، دیگه به گمانم بارگیری این بسته سنگین نرم افزاری کاری نباشه که کاربر های ایرانی به انجامش گرایشی داشته باشن.

با این حال پیوند تُرنتش (Torrent) رو براتون می زارم :

کد:

http://www.mininova.org/get/1972500

شما می تونید این بسته و بسته های آموزشی طراحی وب در همه زمینه های مبتدی یا پیشرفته رو از فروشگاه سایت سفارش بدین :
http://www.shop.ariadb.com

نرم افزار های برتر در زمینه طراحی وب :

1. فتوشاپ (Photoshop) و فایروُرکس (FireWorks) برای کار های گرافیکی : گستردگی و کاربرد این دو نرم افزار و بویژه فتوشاپ بسیار بیشتر از زمینه طراحی وب آن است ولی بی شک همه نیاز های گرافیکی شما رو می تونه برآورده کنه ، نرم افزار گرافیکی Illustrator شرکت ادوبی هم بهترین نرم افزار وکتور که کاربرد کمتری در گرافیک وبی نسبت به فتوشاپ داره...

2. دریم ویور (DreamWeaver) برای طراحی صفحات و کد نویسی : این نرم افزار پیشرفت های شگرفی در دو نسخه واپسینش داشته و به گمان من هوشمند ترین و کاربردی ترین برنامه در دسترس هست که از پس هر جور کاربری بر میاد (جز کسایی که بهتره طراحی وب یاد نگیرن!).

شما با دریم ویور می تونید زبان های گوناگون وب رو کد نویسی کنید و از دستورات در دسترس HTML و CSS استفاده کنید و بسیاری از کدهای جاوا اسکریپت و سمت سرور رو با این برنامه تجربه کنید. پیشنهاد می کنم هنگامی که با این برنامه برای کد نویسی و طراحی کار می کنید کمترین بهره رو از پنجره Design نرم افزار ببرین اگر می خواین به چیزی که طراحی می کنید آگاه باشید...

3. ادُبی فلش Adobe Flash -

4. ویژوال استادیو 2008 (Visual Studio 2008) این برنامه که مختص زبان های گوناگون برنامه نویسیه در زمینه وب برای برنامه نویسی asp و aspx و کار با بانک داده SQL بهترین گزینه پیش روی شماست.

5. زند استادیو (Zend Studio) این برنامه که شرکت سازنده آن در طراحی موتور پی اچ پی دست داشته از بهترین برنامه های ویژه برنامه نویسی PHP می باشد

پاینده باشید...

[مصطفی شفیعی]

از آنجایی که اینترنت دیگر تنها مکانی برای حضور برنامه نویسان و هکرها بشمار نمی رود بلکه عرصه ای است که فرد می تواند در آن به تجارت پرداخته یا فقط کمی  کسب و کار خود را ارتقا دهد، هر شخص کم و بیش مترقی نیاز به داشتن ابزاری برای بازاریابی مثل سایت های اینترنتی را تایید می کند. قطع نظر از جزئیات، انبوه سایت های اینترنتی موجود را می توان به دو گروه عمده تقسیم کرد: یعنی ایستا و پویا. نمی توان انکار کرد که ابزار بازاریابی کارآمد برای هر تجارت سایت اینترنتی پویا با تمام ویژگی های اختصاصی آن است که می تواند نیازها و عادات مشتری را کشف کند.

در ابتدا تنها یک راه برای ایجاد سایت  های اینترنتی وجود داشت که برنامه نویسی بود. بنابراین، هم ایجاد و هم نگهداری (مدیریت) از سایت اینترنتی از امتیازات ویژه گروه طراح بشمار می رفت که فرآیندهایی کاملاً طولانی و پرهزینه بودند. امروزه، سیستم های مدیریت محتوا (CMS) مثل مامبو، ویگنت، تایپو3، دوکامنتوم، زیتکس برای محتوای شبکه M1 و غیره، می توانند فرآیند نگهداری تقریباً هرگونه سایت اینترنتی با هر مقدار پیچیدگی را تسهیل کند. به هر حال، بخشی از آنها حتی می توانند فرآیند توسعه را بطور کامل تغییر دهند، نیاز به برنامه نویسی را مرتفع سازند، و تقریباً برای هر شخصی که تجربه کار با برنامه Adobe Dreamweaver داشته این امکان فراهم می شود تا به تنهایی سایت اینترنتی ارایه دهد.

هدف این مقاله نشان دادن فرآیند معمول ارایه یک سایت اینترنتی پویای ساده با یک سیستم مدیریت محتوای متوسط است که گونه ای سایت اینترنتی برای شرکتی متوسط خواهد بود و چند بخش، چندین صفحه، فهرست انتخاب خودکار، برگه تماس، خط خبری خودکار، و راهنمای آدرس پیمایش را شامل می شود. اینها خصوصیاتی هستند که لازمه هر سایت اینترنتی هستند. بعنوان یک محیط ارائه ساده ما از سیستم مدیریت محتوای زیتکس M1 استفاده می کنیم.

حال آغاز میکنیم. در ادامه شاهد 7 مرحله ای خواهید بود که فرد باید برای ایجاد یک سایت اینترنتی پویا با سیستم مدیریت محتوا آنها را دنبال کند.

مرحله 1. ساختار سایت را مشخص کنید

شما پیش از آغاز هر گونه فعالیتی باید طرح آن را در نظر داشته باشید. ارائه سایتهای اینترنتی هم از این قاعده مستثنی نیست. شما باید مشخص کنید که دقیقاً میخواهید چه چیزی را به بازدیدکنندگان خود ارائه دهید. این امر می تواند کمیت و هدف عمده صفحاتی را که باید ارائه کنید به شما نشان دهد.

شما بسته به ترکیب محتوای سایت و کمیت آن، می توانید ساختار و در نتیجه آن پیمایش عمیق یا سطحی ارائه دهید. بعنوان نمونه، سایت 80 صفحه ای شرکتی متوسط بهتر است با ساختاری دو مرحله ای و سطحی با بخشهایی مثل شرکت، محصولات، خدمات، شرکاء، و تماس با ما و غیره ارائه شود.

پس از مشخص شدن ساختار سایت می توانید اولین گام برای ایجاد سایت اینترنتی خود را بردارید، یعنی باید بخشهای سایت (پوشه ها، دایرکتوری ها، و غیره) را با استفاده از واسط CMS خود در محل قرارگیری صفحات ایجاد کنید. همچنین باید علاوه بر صفحات بخشهایی برای تمام منابع گرافیکی و سایر منابع (فایل های CSS، اسناد، و غیره) ایجاد کنید.

ایجاد بخش


قالب سایت

مرحله 2. منابع گرافیکی را آماده کنید

گام بعدی انجام طراحی است. بهترین شیوه توصیه شده طراحی در برنامه Adobe Photoshop (ادوبی فتوشاپ) یا در بعضی از برنامه های کاربردی جایگزین است. شما حداقل باید دو طرح بندی را طراحی کنید، یکی برای صفحه اصلی و دیگری برای صفحات داخلی. وقتی هر دو طرح آماده شد، فقط منابعی را مشخص کنید که بعنوان تصاویر مورد استفاده قرار می دهید و آنها را با سبکهای HTML برنامه ریزی می کنید. تنها آن تصاویر را کات کرده و با فرمتJPEG یاGIF با کیفیت مناسب ذخیره کنید.

آماده سازی منابع گرافیکی

مرحله 3. قالبهای طراحی برای صفحات اصلی و داخلی

گام بعدی شما به اتمام رساندن HTML هایی است که در برنامهAdobe Photoshop طراحی کرده اید. یعنی میخواهیم ایجاد قالبها را آغاز کنیم. مطمئناً می توانید همه چیز را به روش خودتان رمزگذاری کنید. اما من به شما توصیه میکنم که از یک ویرایشگرHTML مناسب استفاده کنید. برنامه Macromedia Dreamweaver بهترین گزینه خواهد بود.

بخشهای مرتبط با منابع گرافیکی را که بتازگی در CMS خود ایجادکرده اید تکثیر کنید و تصاویر را در آنجا بارگذاری کنید. سپس باید طرح بندی هر قالب را ایجاد کنید. تنها چیزی که باید بخاطر داشته باشید این است که تمام اجزای پویا مثل منوها، راهنمای آدرس پیمایش و غیره بعداً افزوده خواهند شد. به هر حال می توانید سبکهای مناسب برای آنها را در برنامه Macromedia Dreamweaverمشخص کنید.

وقتی هر قالب وضعیت مشابهی دارد، باید آن را بهمراه فایلهای CSSدر پوشه مأخذ مناسب ذخیره کنید. حالا شما برای ارائه سایت اینترنتی پویای خودکار تقریباً همه چیز را در اختیار دارید.

آماده سازی قالبهای Macromedia Dreamweaver

مرحله 4. قالبها و منابع (تصاویر، CSS) را بارگذاری کنید

حال به سایت خود بازگردید. پیش از این شما قالبها را ایجاد کرده اید و تمام تصاویر برای طراحی آنها را در اختیار دارید. چیزی که حالا نیاز دارید وارد کردن آنها به سرور خودتان در CMS است. بمنظور انجام این کار شما باید یک محاسبه عددی ساده انجام دهید.

1.   آرشیوی از محتوای هر پوشه بصورت فایلZIP تهیه کنید.
2.   بروید به سایت » قالبها در بخش مجاور سیستم مدیریت محتوای زیتکس M1
3.   با ابزار بارگذاری در گوشه سمت چپ و پایین هرکدام ازآرشیوهای ZIP را در هر بخش با نام متعلق بخودش بارگذاری کنید.

حال قالبهای شما تقریباً آماده هستند. اما ما میخواهیم سایت اینترنتی پویا ارائه دهیم. به همین دلیل است که شما باید اجزایی را ایجاد و بیافزایید که سایت ما را خودکار می سازند.

بارگذاری قالبها و منابع

مرحله 5. تمام اجزا را ایجاد کنید

پویا قلمداد کردن سایتهای اینترنتی عمدتاً بخاطر خودکار بودن آنها است. با بکارگیری قواعد و محاسبات عددی مختلف می توان به سرعت صفحات را ایجاد کرد. ارائه کننده باید محتوا را در مکانی مناسب قراردهد. بطورکلی، تمام آن قواعد و محاسبات عددی برنامه هایی هستند که به زبانهای مختلف نوشته شده اند، از پرل گرفته تا PHP و جاوا. تقریباً هر سیستم مدیریت محتوا چنین برنامه هایی (که بطور سنتی ماژول نامیده می شوند) را شامل می شود که با راهنماهای جادویی ساده عرضه شده اند بگونه ای که هر فرد آشنا به کامپیوتر شخصی می تواند در هرزمان و هرکجا که نیاز دارد ماژول ها را ایجاد و تنظیم کند و آنها را مورد استفاده قرار دهد.

همانطور که در بالا ذکر کردیم، این مقاله نشان خواهد داد که چگونه فرد می تواند چنین اجزای خودکار عمده ای ایجاد کند که هر سایت باید دارای آن باشد مثل منو، راهنمای آدرس پیمایش، عنوان خبری، و برگه تماس با زیتکس محتوای شبکه M1.


منو

شما می توانید منوهای خودکاری ایجاد کنید که هرگاه ساختار سایت را تغییر دهید (ایجاد یا برداشتن صفحات، تغییر نام آنها، افزودن بخشها، و غیره) خودشان را تغییر می دهند.

1.   در این مسیر پیش بروید  سایت » ماژول ها و منوی هوشمند ماژول M1 ایجاد کنید
2.   در پنجره تنظیمات منوی هوشمند ماژول M1 موارد زیر را مشخص کنید:
آ.   بخشهایی که با این ماژول ارتباط پیدا می کنند
ب.   تعداد سطوح (2 برای این مثال)
ج.   سبک هر یک انتخاب در فهرست انتخاب سطح دوم (رمزی بصورت HTML که شما در زمان ایجاد قالبها در Macromedia Dreamweaver بدست آورده اید)
د.   شما می توانید انتخاب کنید که آیا ماژول باید صفحه شاخص هر بخش را نشان دهد یا نه.

ایجاد منو

راهنماهای آدرس پیمایش

این راهنماها مسیر طی شده از صفحه اصلی تا صفحه فعلی متشکل از لینکهای هر صفحه مابین آنها را نشان می دهد. شما می توانید از این ماژول برای قراردادن خودکار چنین زنجیره هایی استفاده کنید. تمام کاری که شما باید انجام دهید این است که:

1.   در این مسیر پیش بروید  سایت » ماژول ها و راهنمای آدرس پیمایش ماژول M1 ایجاد کنید
2.   نوع پیوندها را مشخص کنید
3.   نماد جداکننده را مشخص کنید

ایجاد راهنماهای آدرس پیمایش

عنوان خبری

سایت اینترنتی شرکتی نمی تواند بدون اخبار موفق باشد. از این رو، ابزاری مورد نیاز است که کل فرآیند ایجاد صفحات خبری، انتشار خلاصه آنها، تاریخها، و غیره را در مکانهای مناسب در تمام سایت اینترنتی، زمانبندی انتشارات و غیره بصورت خودکار در می آورد. هر CMS کم و بیش معتبری ماژول عنوان خبری دارد. زیتکس محتوای شبکه M1 عنوان خبری هوشمند M1 خودش را دارد.

1.   در این مسیر پیش بروید  سایت » ماژول ها و عنوان خبری هوشمند ماژول M1 ایجاد کنید
2.   کمیت اخباری را که باید نشان دهد مشخص کنید
3.   برای هر خلاصه اخبار شیوه ای را مشخص کنید (رمزی بصورتHTML که شما در زمان ایجاد قالبها در Macromedia Dreamweaver بدست آورده اید)

ایجاد عنوان خبری

برگه تماس

شما با داشتن سایت اینترنتی تجاری و بطور شخصی ایجادشده دیر یا زود درمی یابید که باید ابزاری وجود داشته باشد که مشتریهای بالقوه شما بتوانند با شما تماس بگیرند حتی اگر زمانی به پست الکترونیکی دسترسی نداشته باشند. بنابراین تصمیم میگیرید که یک فرم تماس در سایت خود بگنجانید.  ایجاد طرح بندی این برگه با استفاده از HTML اصلاً دشوار نیست. اما اگر نیاز دارید محتوای برگه به بعضی از آدرسها ایمیل شود باید آن را برنامه ریزی کنید. هر CMS مناسبی برای خلاص کردن شما از شر این برنامه ریزی راهنماهای جادویی ساده ای فراهم می کنند.

1.   در این مسیر پیش بروید  سایت » ماژول ها و بازخورد ماژول M1 ایجاد کنید
2.   برای هر جزء ازجمله متن، زمینه متن، حوزه متن، دکمه انتخاب، مربع کوچک برای انتخاب، آگاه کننده های وضعیت پیغامها و غیره سبکی را مشخص کنید (رمزی بصورتHTML که شما در زمان ایجاد قالبها در Macromedia Dreamweaver بدست آورده اید)
3.   ایجادکننده دگمه انتخاب را فشار دهید شکل اجزا را با راهنمای جادویی ساده ایجاد کنید

مشخص کردن سبک ها


ایجاد کننده برگه تماس

مرحله 6. افزودن ماژول برای رمز قالب

همینکه ماژول ها ایجاد و تنظیم شدند، شما باید آنها را وارد کد قالبها کنید. در زیتکس محتوای شبکه M1 شما تنها باید:

1.   بروید به سایت » قالبها و قالب موردنیاز را انتخاب کنید
2.   با فشردن Edit ویرایشگر را باز کنید
3.   مکان مناسب برای هر ماژول موردنیاز بیابید و بروید به Insert(درج) » ماژول
4.   ماژولی را که باید درج شود را انتخاب کنید

بعلاوه، شما حداقل باید یک ناحیه قابل ویرایش را درج کنید. این ناحیه در جایی قرار دارد که محتوای موردنظر شما در هنگام ایجاد صفحات درج می شود. شما فقط باید مکان مناسبش را بیابید و Cntrl-Alt-V را فشار دهی. حالا قالبها آماده هستند.

درج کردن ماژول در قالب

مرحله 7. ایجاد صفحات

درحقیقت، قالبهایی که بطورمعقول با ماژول ها تنظیم شده اند چیزی هستند که سایت اینترنتی شما را پویا می سازد. آنها قواعد مذکور در بالا هستند. حالا تنها چیزی که شما باید انجام دهید این است که سایت خود با محتوا پرکنید. یعنی اینکه باید صفحات را ایجاد کنید.

در سیستمهای مدیریت محتوای مختلف طرحها و ویرایش کننده های متفاوتی وجود دارند. اگرچه، آنچه که همه شما باید بدانید این است که هر نمونه از محتوا که ایجاد می کنید صفحات جدیدی تشکیل می دهد که با نام و تمام پارامترهای دیگری که مشخص کرده اید در بخشی که مشخص کرده اید قرارمی گیرد. معمول ترین شیوه زمانی است که شما:

1.   خصوصیات صفحه را مشخص می کنید
2.   قالب مناسب را انتخاب می کنید
3.   محتوا را در ناحیه قابل ویرایش درج می کنید
4.   این صفحه را در سایت منتشر می کنید

مشخص کردن خصوصیات صفحه


انتخا قالب


ایجاد محتوا

سایت اینترنتی پویا آماده است

سایت اینترنتی آماده است

همانگونه که شاهد هستید برای کسی که حداقل با HTML آشنایی دارد و اصول اینترنت را درک می کند غیرممکن نیست که سایت اینترنتی پویای خودش را ایجادکند. سیستمهای مدیریت محتوا همانند زمانی که شما یک سایت ایستای ساده درباره 10 سال پیش ایجاد می کنید به شما این امکان را می دهند که از قواعد مشابه پیروی کنید. تفاوتها این است که حالا شما می توانید سایت اینترنتی پویای خودکار ایجاد کنید و مقدار زمانی مشابه را صرف کنید. سیستمهای مدیریت محتوا شما را قادر می سازند تا سایت اینترنتی خود را با آجرهای آماده بسازید یعنی برنامه هایی که هرزمان نیاز داشتید آنها را راه بیاندازید. و از همه مهمتر، تجارت از نیاز به برنامه نویسان مستقل می شود، بنابراین، به اصل خود گرایش بیشتری پیدا می کند ـ یعنی هدف قراردادن مشتریان بالقوه.