دسته بندی سایت
پیوند ها
در دنیای امروز که رفته رفته تمامی اعمالی که بشر انجام می دهد به صورت مجازی و از طریق اینترنت به منظور سهولت کار انجام می شود ، سایت های اینترنتی خود را به عنوان یکی از نیاز های انسان روز به روز بیشتر پیدا می کنند و هر شرکت ، نهاد ، مجموعه و هر شخصی برای نمایاندن خود به دیگران و گام برداشتن در جهت پیشرفت خویش ، نیازمند در اختیار داشتن وب سایتی می باشد .
امروزه سایت های اینترنتی در حال جایگزین شدن به جای مغازه ها و بازار های فیزیکی و تبلیغات مختلف می باشند چرا که بشر امروزه به درستی معنی وقت طلاست را درک می کند و از تلف کردن وقت در رفت و آمد های مکرر و بی مورد به سطوح آمده است .
اما نکته ای که در این میان خود نمایی می کند و بیش از پیش به چشم میآید لزوم حفظ مفهوم حفاظت اطلاعات در چهار چوب الکترونیکی جدید است و اینکه استفاده از امکاناتی که نهادی که سایتی را در اینترنت جهت استفاده ی عده ای خاص قرار می دهد ؛ فقط محدود به همان عده باشد . به عبارتی دیگر اجازه ی استفاده از آن امکانات را خود آن سایت برای کاربران تعیین کند .
در چنین شرایطی است که نیاز به مجوز ها تحت وب ( ( Web Permissionsاحساس می شود. به همین منظور بر آن شدم تا این مفهوم نسبتا تازه را در قالب مجتمع عالی آموزشی و پژوهشی خراسان پیاده سازی نمایم .
در طراحی این سایت علاوه بر پیاده سازی مفهوم Permission ها ، موارد دیگری از جمله برنامه نویسی های جاوا ، صفحات داینامیکی که متون آن های از بانک اطلاعاتی فراخوانی می شود و پیکر بندی آنها با استفاده از زبان های Server Side صورت می پذیرد و ... نیز استفاده شده که هر یک در جای خود جای بحث دارد که به اختصار در مورد آنها در ادامه توضیح داده خواهد شد .
فصل اول : طراحی سایت ها
1-1) تاریخچه ی سایت های اینترنتی :
در اولين روزهاي تاسيس وب دستورات HTML بسيار ساده بود، ولي هنگامي که Web، شروع به پيشرفت نمود، طراحان خواستار کنترل بيشتري شده و در نتيجه مجموعه دستورات مورد نياز تهيه گرديد.سپس از آنجاييکه صفحات وب، بهتر است به صورت ديناميک و متحرک باشند، طراحان نيز خواستار ارتباط بين بينندگان سايت و صاحبان آن شدند، در نتيجه استفاده از دستورات HTML به تنهايي نياز آنها را برطرف نکرد و سپس شرکت Netscape براي ايجاد و کنترل ارتباط بين صاحبان سايت و بينندگان آن در صفحات Web از JavaScript کمک گرفت.
با به وجود آمدن جاوا سکریپت بسیاری از نیاز هایی که طراحان سایت به دنبا آن بودند بر طرف شد جاواسکریپت که امروزه به عنوان یکی از قدرتمند ترین زبان های Client side مورد استفاده قرار می گیرد در بسیاری از موارد کاربرد داشت و جوابگو بود اما نکته ای که در مورد این زبان و زبان های مشابه ای که به مرور زمان برای کاربرد های مختلفی به وجود آمدند ، همچون VBSCRIPT , DHTML , …این بود که به واسطه ی اینکه ای کامپایل این زبان ها در سمت کاربر انجام می شد از طرفی Source کامل برنامه در اختیار کاربر قرار می گرفت و از آن مهم تر اینکه برنامه هایی که در سمت کاربر کامپایل می شوند –Client Side - کاملا وابسته به سیستم کاربر می شوند و اکر خطایی در کامپیوتر کاربر وجود داشته باشد عملکرد سایت را تحت تاثیر قرار می دهد ( به عنوان مثال بسیاری از منو ها و پروگرام های جاوا در صورتی که Java Virtual Machine نصب نباشد قابل نمایش نمی باشند و ... ) این دلایل و مواردی از این دست طراحان را بر این امر واداشت که تا در پی آن باشند که برنامه هایی طراحی کنند که در سمت سرور اجرا شده و نتیجه ی آن به صورت کد های Generate شده Html برای کاربر ارسال گردد ( Server Side ) .
از سوی دیگر نیاز به پایداری اطلاعات و استفاده از بانک های اطلاعاتی برای حفظ داده های مورد نیاز این ضرورت را به وجود آورد که برنامه های تحت وب بتوانند با بانک اطلاعاتی ارتباط برقرار کنند .
زبان هایی که امروزه قدرتمندانه تحت عنوان زبان های سرور ساید خودنمایی می کنند محدود به PHP و ASP و ASP.Net می باشند که هر یک به نوبه ی خود طیف وسیعی از سایت های پویای طراحی شده را به خودش اختصاص می دهد کاربرد ها و توانایی های متفاوتی دارند .
از آنجایی که در طراحی وب سایت مربوطه از ASP استفاده شده در ادامه ی این فصل فقط به اختصار توضیحاتی در مورد ASP به همراه مابقی ابزار ها و زبان های استفاده شده ذکر خواهد شد .
1-2) HTML
1-2-1) مقدمه اي بر HTML
يک فايل HTML چيست؟
ساختن یک فایل Html
Notepad را باز کرده و متن زير را در آن تايپ میکنیم:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first html page. <b>This text is bold</b>
</body>
</html>
سپس فايل را با نام مثلا test.html در درايو C: ذخيره می کنیم .
براي ديدن فايل اچتمل بالا در مرورگر يا Brower ( معمولا اينترنت اکسپلورر و يا نتسکيپ نويگيتور ) کافي است که از روي منوي File/Open file فايل بالا را از روي محل ذخيره شده باز کنیم . يکي از مهمترين وظايف مرورگرها نمايش صفحات اچتمل ميباشد، چه اين صفحات روي کامپيوتر ذخيره شده باشند و يا اينکه از اينترنت خوانده شوند. با کليک روي اين لينک فايلي شبيه فايل ذخيره شده از روي وب سرور توسط مرورگرتان خوانده شده و سپس نمايش داده خواهد شد
اولين تگ مثال بالا تگ <html> ميباشد. از روي اين تگ، مرورگر نوع متن يعني اچتمل بودنش را يافته و از روي <html/> انتهاي متن اچتمل را ميبابد.
متن بين تگ <head> و تگ <head/> اطلاعات شناسنامه اي يا "Headerinformation" متن اچتمل بوده و نمايش داده نخواهند شد. در اين مثال با کمک تگهاي <title> و <title/> تيتر و يا Title صفحه که در اين مثال عبارت "Titleof page" ميباشد در بالاي مرورگر نمايش داده خواهد شد.
متن بين تگ <body> و انتهاي آن يعني تگ <body/> تنها اطلاعاتي است که توسط مرورگرنمايش داده خواهند شد.
متن بين تگ <b> و انتهاي آن يعني تگ <b/> بصورت Bold و يا توپر نمايش داده خواهند شد.
اغلب مرورگرها هر دو نوع انشعاب را به خوبي ميشناسند ولي ترجيحا به هنگام ذخيره فايلهاي اچتمل از html استفاده کنيد.( استفاده از انشعابهاي سه حرفي مانند htm مربوط به قديم و سيستم عاملهائي چون DOS بودند.)
1-2-2) عناصر ( Elements )
تگ هاي اچتمل (HTML Tags)
عناصر اچتمل (HTML Elements)
مثال بخش مقدمه را در نظر بگيريد:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first html page. <b>This text is bold</b>
</body>
</html>
*** نمونه اي از يک عنصر اچتمل:
<b>This text is bold</b> |
عنصر اچتمل بالا با تگ <b> شروع شده و با تگ <b/> پايان مي يابد. محتواي اين عنصر عبارت "This text is bold" است. لازم به ذکر است که کاربرد تگ <b> نمايش توپر يا bold متون است.
*** مثال دوم يک عنصر اچتمل
<body> This is my first homepage. <b>This text is bold</b> </body> |
عنصر اچتمل بالا با تگ <body> شروع شده و با تگ <body/> پايان مي يابد. همانطور که مشاهده می شود گاهي يک عنصر حاوي يک يا چند تگ ديگر ميباشد.وظيفه تگ <body> تعيين بدنه اصلي يا body يک متن اچتمل است.لازم به يادآوري است که تنها اطلاعات بخش <body> يک فايل اچتمل در صفحه مرورگر نمايش داده خواهد شد.
شناسه هاي يک تگ (Tag Attributes)
تگ ها ميتوانند حاوي اطلاعات اضافي ديگر باشند، به اين اطلاعات شناسه يا Attribute ميگويند و وظيفه آنها بيان ديگر اطلاعات يک عنصر يا Element ميباشد. مثلا در مورد تگ <body> شناسه اي به نام bgcolor وجود دارد که رنگ زمينه متن (background) را تعيين ميکند براي نمونه اگر بخواهیم که رنگ زمينه صفحه Html سياه باشد کافي است که به شکل زير عمل کرد :
<body bgcolor="black">
در مثال زير تگ <body> داراي چهار شناسه مختلف با نامهاي width، height ، align و border و مقادير center، 60، 100 و 0 ميباشد.
<table border="0" width="100" height="60" align="center" >
......
</table>
شناسه ها به صورت کلي "مقدار=نام" يا "name=value" نوشته ميشوند و هميشه به تگ شروع يک عنصر يا Element اضافه ميشوند و نهايتا اگر در يک عنصر يا Element شناسه ها قيد نشوند از مقادير قراردادي يا default آنها استفاده خواهد شد مثلا در تگ body اگر شناسه bgcolor نوشته نشود از رنگ سفيد براي زمينه صفحه استفاده خواهد شد.
مقدار يک شناسه را ميتوانيد داخل نويسه هاي " و يا بنويسيد و اختيار دست شما است فقط در مواردي که مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه استفاده شود.
1-2-3) تگ های اصلی ( Basic Tags )
سر تيترها (Headings)
سر تيترها با کمک تگ هاي <h1> تا <h6> تعيين ميشوند. <h1> معرف بزرگترين سر تيتر و <h6> معرف کوچکترين سر تيتر است. مرورگر به هنگام نمايش يک سر تيتر بصورت اتوماتيک يک سطر خالي قبل و بعد از هر سر تيتر اضافه خواهد کرد.
پاراگرافها (Paragraphs)
پاراگرافها با کمک تگ <p> معرفي ميشوند.مرورگر به هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر خالي قبل و بعد از آن اضافه خواهد کرد.
سطر جديد (Line Breaks)
براي رفتن سر سطر جديد از تگ <br> استفاده ميشود.در اين حالت يک پاراگراف جديد ايجاد نميشود. تگ <br> از نوع تگ هاي خالي بوده و داراي تگ انتهائي (مثلا <br/> ) نميباشد.
کامنت ها در اچتمل (Comments)
براي نوشتن شرح و توضيحات در مورد کدهاي اچتمل بايد از تگ خاصي استفاده کنيد. براي اينکار بايد متن و شرحتان را درون علائم <-- و --!> قرار دهيد. مرور تگ هاي comment را در نظر نگرفته و محتوي آنها را نمايش نخواهد داد و فقط شرح و توضيحات براي برنامه نويس و ديگر افرادي که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود. (به محل نويسه "!" توجه کنيد! فقط يکي و آنهم در ابتدا)
تگهاي اصلي
در جدول زير عناصر معرفي شده در اين فصل به همراه لينکهاي مربوطه جهت مطالعه بيشتر آورده شده است. توجه داشته باشيد که براي هر عنصر فهرستي از شناسه ها يا Attributes موجود است و همچنين به شناسه هاي کنارگذاشته شده (Deprecated) در نسخه هاي آينده اچتمل توجه داشته باشيد و سعي کنيد که از آنها استفاده نکنيد.
:
Start Tag |
Purpose |
کاربرد |
||
Defines a html document |
نشان شروع متن اچتمل |
|||
Defines the documents body |
تعيين بدنه و قسمت اصلي صفحه اچتمل |
|||
Defines heading 1 to heading 6 |
تعريف سر تيترهاي h1 تا h6 |
|||
Defines a paragraph |
تعريف پاراگراف |
|||
Inserts a single line break |
رفتن سر خط جديد |
|||
Defines a horizontal rule |
نمايش خط افقي |
|||
Defines a comment in the HTML source code |
نوشتن شرح و comment |
1-2-4) پيوندهای اچتمل ( HTML Links )
در محيط وب، صفحات اچتمل با کمک پيوندها به يکديگر متصل (Link) ميشوند. اصطلاح ابرمتن (Hyper Text) در مقابل متن خطي (Linear) قرار دارد. در يک متن معمولي خواندن به شکل خطي و از ابتدا به انتها ميباشد و در مقابل در يک متن مختلط (Hyper) با کمک پيوندها ميتوان از يک متن به هر صفحه ديگر در وب متصل شد.اين کار با کمک عنصري به نام A يا Anchor ميسر ميگردد.
تگ Anchor و شناسه href
براي ايجاد پيوند به صفحات ديگر از تگ <a> استفاده ميشود. پيوندها ميتوانند به بخش ديگري از همان صفحه، صفحات ديگر وب، تصاوير، فايلهاي صوتي يا حتي فيلم ها و ... اشاره کنند.
فرم کلي يک پيوند به قرار زير است:
<a href="url">Some Text</a> |
در مثال بالا تگ <a> براي ايجاد پيوندي به صفحه اي ديگر که آدرس اينترنتي آن url ميباشد بکار رفته است. براي تعيين مقصد و يا آدرس صفحه جديد از شناسه اي به نام href که همان hyerlinkreference ميباشد، استفاده ميشود و مقدار اين شناسه در واقع همان آدرس اينترنتي صفحه مقصد است. بخش قابل رويت پيوند و در واقع متــنــي (و يا تصويري ) که توسط مرورگر نمايش داده خواهد شد و بازديدکننده روي آن کليک خواهد کرد ميان تگهاي <a> و </a> قرار داده ميشود و هر چند که در مثال بالا اين بخش متن "Some Text" است ولي ميتواند حتي يک تصوير باشد.
شناسه target در پيوندها:
با کمک شناسه target امکان تعيين مقصد پيوند جديد فراهم ميشود. در مثال بالا پس از کليک روي پيوند، مرورگر سايت google.com را باز کرده و جايگزين سايت فعلي خواهد شد. اگر ميخواهيد که مرورگر پيوند را در صفحه اي جديد باز کند بايد از شناسه target و مقدار "_blank" براي آن استفاده کنيد
شناسه Name :
با کمک شناسه name ميتوانيد پيوندها را نام گذاري کنيد.پيوندهاي نامگذاري شده امکان حرکت ميان قسمتهاي مختلف يک صفحه يا page را فراهم ميکنند. در اينصورت مثلا براي رفتن به آخر يک متن ديگر نيازي به Scrool down کردن تمامي صفحه نيست و کافي است که بازديدکننده روي پيوندي که به آخر صفحه اشاره ميکند کليک کند.
استفاده از پيوندهاي نامگذاري شده شامل دو مرحله است:
1- ايجاد يک پيوند نامگذاري شده (اين قسمت به عنوان لنگر کار خواهد کرد.) :
فرم کلي يک پيوند نام گذاري شده به قرار زير است:
<a name="label">Text to be displayed</a> |
وظيفه شناسه name تعيين نام براي پيوند است و مقدارآن همان نام پيوند ميباشد. نام پيوند هم هر نام لاتيني ميتواند باشد. در فرم کلي بالا، نام پيوند label و متني که بعنوان پيوند نمايش داده ميشود عبارت "Text to be displayed" خواهد بود. مثال زير به ايجاد يک پيوند نامگذاري شده با نام top ميپردازد:
<a name="top">Here is top of my page!</a> |
2- ايجاد يک پيوند به پيوند نامگذاري شده ديگر:
براي دادن لينک به پيوندي نام گذاري شده، کافي است که پيوندي معمولي ايجاد کرده و در قسمت href آن ابتدا url مقصد و سپس نويسه # و در نهايت نام پيوند نامگذاري شده را درج کنيد. مثال زير ايجاد پيوندي است که به لينک نامگذاري شده اي به نام top اشاره ميکند:
<a href="http://www.MapSab.com/index.asp#top"> Goto Top! </a> |
در اثر کليک روي پيوند بالا مرورگر مستقيما به ابتداي بخش top صفحه http://www.MapSab.com/index.asps خواهد رفت.
اگر مقصد پيوند در همان صفحه قرار دارد نيازي به قيد url نيست و فقط نويسه # و سپس نام پيوند کافي است:
<a href="#top"> Goto Top! </a> |
Start Tag |
Purpose |
کاربرد عنصر Anchor |
Defines an anchor |
تعريف يک پيوند يا Anchor در يک صفحه اچتمل |
Target Attributes |
کاربرد حالتهاي مختلف شناسه target |
target="_blank" |
مرورگر پيوند را در يک پنجره جديد باز ميکند. |
target="_self" |
مرورگر پيوند را همان پنجره باز ميکند. (حالت پيش فرض يا default) |
target="_parent" |
مرورگر پيوند را فريم parent باز ميکند) |
target="_top" |
مرورگر پيوند را در فريم مادر و اصلي باز ميکند |
1-2-5 ) جداول ( Tables)
براي تعريف جداول از تگ <table> استفاده ميشود. يک جدول از يک يا چند سطر که با کمک تگ <tr> تعريف ميشوند، تشکيل ميشود. هر رديف يا row از يک يا چند سلول، خانه يا cell تشکيل گرديده که با کمک تگ <td> ايجاد ميشوند. نام هاي td و tr به ترتيب خلاصه شده rowtable و datatable ميباشند.
محتوي يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد.
مثال زير جدولي است با دو سطر و سه ستون :
کد اچتمل جدولي با دو سطر و سه ستون |
نمايش جدول روبرو توسط مرورگر |
|||||||
|
|
جدولها و شناسه border و dir :
خانه هاي خالي در جداول (Empty Cells)
اگر محتواي خانه اي از يک جدول خالي باشد چه چيزي بايد نمايش داده شود؟ بسته به مرورگري که استفاده ميکنيد نتيجه نمايش متفاوت است خانه خالي جدول بدون مرز نمايش داده خواهد شد در اينگونه موارد براي رفع مشکل کافي است که از non-breaking space ( ) يا همان نويسه و کاراکتر قاصله و بلانک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زير نمايش خواهد داد:
کد اچتمل جدولي با دو سطر و دو ستون |
نمايش جدول روبرو توسط مرورگر |
|||||
|
|
چند نکته اساسي در مورد جداول:
Start Tag |
Purpose |
کاربرد |
|
Defines a table |
تعريف جدول |
||
Defines a table header |
تعريف سرستون در جداول |
||
Defines a table row |
تعريف رديف ها در جداول |
||
Defines a table cell |
تعريف سلول يا خانه هاي يک جدول |
||
Defines a table caption |
تعريف عنوان جدول |
||
1-2-6 ) فرمها (Forms)
تمامي عناصر و تگهائي که تاکنون ذکر شد فقط به نمايش اطلاعات پرداخته اند و هيچکدام به گرفتن و اخذ اطلاعات از کاربر نپرداخته اند. فرمها که با تگ <form> معرفي ميشوند، طراح سايت را قادر به جمع آوري و اخذ اطلاعات از بازديدکننده سايت خواهند کرد. عنصر فرم و گروهي از عناصر و تگهاي درون آن به دريافت و ارسال اطلاعات به سمت وب سرور کمک خواهند کرد و لازم به ذکر است که تمامي تگهاي مربوط به فرمها بايد درون تگهاي <form> و <form/> قرار ميگيرند.
درون تگ فرم گروه زيادي از عناصر و تگهاي مختلف قابل استفاده هستند از قبيل عناصر ورود متن يک سطري(text fields)، عناصر ورود متنهاي چند سطري (Textarea)، منوهاي drop-down و radio buttons و ...
تگ Input
به عنوان پر مصرف ترين تگ مربوط به ورود اطلاعات بايد از تگ <input> نام برد. در اين تگ شناسه اي به نام type به تعيين نوع اطلاعات ورودي اختصاص دارد. مقادير ممکن براي اين شناسه به قرار زيرند:
text , checkbox , radio , password , hidden , submit , reset , button , file , image
در ادامه به شرح بعضي از type هاي کاربردي خواهيم پرداخت:
* وروديهاي متن (Text Fields)
اگر ميخواهيد که بازديدکننده اطلاعاتي از قبيل متن، اعداد و ... را وارد کند از شناسه اي با مقدار "text" استفاده ميشود.
کد اچتمل |
نمايش توسط مرورگر |
||
|
|
||
|
|
توجه شود که تگ <form> چيزي را به نمايش نخواهد گذاشت بلکه تگهاي درون آن توسط مرورگر نمايش داده خواهند شد. در مثال فارسي بالا به شناسه dir و مقدار rtl آن توجه شود .لازم به يادآوري است که اغلب مرورگرها در حالت پيش فرض براي وروديهاي متن اندازه 20 کاراکتر را در نظر ميگيرند و اگر ميخواهيد که اندازه پيش فرض وروديهاي متن را تغيير دهيد بايد از شناسه اي به نام size استفاده کنيد.
* وروديهاي Radio Buttons
مبلغ واقعی 16,000 تومان 50% تخفیف مبلغ قابل پرداخت 8,000 تومان
محبوب ترین ها
پرفروش ترین ها