مقاله بررسی طراحي وب سايت يك شركت توليد تجهيزات آزمايشگاهي

دسته بندي : فنی و مهندسی » کامپیوتر و IT
مقاله بررسي طراحي وب سايت يك شركت توليد تجهيزات آزمايشگاهي در 95 صفحه ورد قابل ويرايش

فهرست مطالب

عنوان مطالب صفحه

پيشگفتار ......................................................................................................................................................

چكيده ..........................................................................................................................................................

مقدمه ...........................................................................................................................................................

فصل 1 .........................................................................................................................................................

1) مروري بر اينترنت وب .......................................................................................................................

2) اجزاي تشكيل دهنده اينترنت ........................................................................................................

3) Applicatio server....................................................................................................................

3-1- شبكه تار عنكبوتي جهاني- وب ..............................................................................................

3-2- شماي فيزيكي اينترنت ..............................................................................................................

3-3- زبان علامت‌گذاري ابرمتن HTML ......................................................................................

3-4- كاوشگرها ........................................................................................................................................

3-5- پروتكلهاي اينترنت .......................................................................................................................

3-6- آدرسهاي اينترنت .........................................................................................................................

3-7- وب ديناميك .................................................................................................................................

فصل 2 .........................................................................................................................................................

1- HTML چيست؟ ............................................................................................................................

2- محتواي فايل HTML.....................................................................................................................

3- ساختار يك فايل HTML ............................................................................................................

3-1- برچسب HTML .......................................................................................................................

3-2- پاراگرافها (Paragraphs).......................................................................................................

3-3- ليستها (Lists) .........................................................................................................................

3-4- توضيحات (Comments) .....................................................................................................

3-5- پيوندها (LINKS) ....................................................................................................................

4- اتصال به مستندات روي وب ..........................................................................................................

4-1- اتصال به مكانهاي خاص در داخل مستندات .......................................................................

5- تشريح بيشتر يك URL ................................................................................................................

5-1- انواع URL ...................................................................................................................................

6- فرمت بندي متن با HTML ........................................................................................................

6-1- استيل منطقي ...............................................................................................................................

6-2- استيل فيزيكي ..............................................................................................................................

6-3- تنظيم متن ....................................................................................................................................

6-4- فونت و اندازه فونت .....................................................................................................................

5-6- استفاده از تصاوير، رنگها و زمينه .............................................................................................

6-5-1- تصاوير در وب ..........................................................................................................................

6-5-2- تصاوير داخلي در HTML .................................................................................................

6-6- تنظيم متن و تصوير ....................................................................................................................

6-6-1- تنظيم فضاي اطراف تصوير ..................................................................................................

6-6-2- استفاده از تصاوير خارجي ....................................................................................................

6-6-3- ايجاد جايگزين براي تصاوير .................................................................................................

6-6-4- تغيير ابعاد و مقياس تصوير .................................................................................................

6-6-5- كادر تصوير Image Border ..........................................................................................

6-6-6- پيش نمايش تصوير ................................................................................................................

6-6-7- استفاده از رنگ .......................................................................................................................

6-6-8- زمينه‌هاي تصويري .................................................................................................................

6-7- نگاشت تصوير (Image Maps) ..........................................................................................

6-7-1- مشخصه USEMP .............................................................................................................

6-8- فرمها ................................................................................................................................................

6-8-1- اجزاي فرم در مرورگر و سرويس دهنده .........................................................................

7- مختصري در مورد نرم افزار فرانت پيج (Pront page) .....................................................

فصل سوم ....................................................................................................................................................

1- نكات تجربي براي ارتقاء كيفيت طراحي وب سايت .................................................................

2- كدهاي HTML صفحات سايت ..................................................................................................

ضميمه ........................................................................................................................................................

Source cod ..........................................................................................................................................

منابع مورد استفاده ...................................................................................................................................




امروزه اغلب شركتها و موسسات و حتي اشخاص حقيقي جهت معرفي خود در اينترنت اقدام به راه‌اندازي وب سايت اختصاصي مي‌كنند. در اين پروژه، وب سايت شركت توليدي، خدماتي نويدان طب طراحي گرديده است. اين وب سايت به دو زمان فارسي و انگليسي جهت استفادة‌ كاربران فارسي زبان و يا ساير علاقمندان آماده شده به معرفي اين شركت مي‌پردازد. طراحي صفحات به صورت استائيك بوده كه در صورت علاقمندي مديران شركت صفحات پويا به آن افزوده خواهد شد.





مقدمه

در گذشته‌اي نه چندان دور شركتها و مؤسسات تجاري، فرهنگي، … و يا اشخاص حقيقي جهت معرفي خود از كاتالوگها يا كتابچه‌هايي استفاده مي‌كردند كه با فواصل زماني نسبتاً طولاني، معمولاً يك ساله، با تغييرات جديد چاپ مي‌شدند. ساير اشخاص يا مؤسسات براي برقراري ارتباط با شخص يا مؤسسه مورد نظر از طريق آدرس پستي يا شماره تلفن يا فاكس ذكر شده در كتابچه اقدام مي‌نمودند.

با گسترش شبكه جهاني اينترنت اغلب موسسات با ايجاد وب سايت اختصاصي و با استفاده از امكانات اينترنت به معرفي خود و برقراري ارتباط پرداختند.

برخي از برتري‌هاي وب سايت اختصاصي در مقايسه با روش قديمي را مي‌توان به صورت زير خلاصه نمود:

1) دسترسي آسان و امكان جستجو:

در صورتي كه وب سايت مورد نظر در موتورهاي جستجو در اينترنت ثبت شده باشد، هر كاربر اينترنت مي‌تواند به آساني با استفاده از كلمات كليدي به آدرس اينترنتي مربوطه دسترسي پيدا كند. كلمات كليدي معمولاً به نام يا نوع فعاليت هر موسسه يا شخص و يا آدرس جغرافيايي آن مربوط است.


2) به روز بودن اطلاعات:

در حاليكه وارد كردن تغييرات در متن كتابچه ها يا كاتالوگها معمولاً در دوره‌هاي يكساله انجام گرفته است، انجام اين كار مي‌تواند در فواصل زماني بسيار كوتاه حتي در چند دقيقه از طريق مدير وب سايت صورت بگيرد.

3) ارتباط سريع و آسان و كم هزينه:

هر كاربر اينترنت مي‌تواند به آساني از طريق پست الكتريكي با موسسه مورد نظر ارتباط برقرار كند و حتي اين امكان وجود دارد كه ارتباط حدودي و تصويري بين دو طرف برقرار شود كه بويژه در فواصل دور از نظر هزينه در مقايسه با روشهاي قبلي مانند پست يا تلفن، بسيار سريعتر و ارزانتر بوده و ارتباط كاملتري برقرار مي‌گردد.

4) پردازش اطلاعات:

اين امكان وجود دارد كه اطلاعات مربوط به هر مشتري به طور آن لاين (Online) دريافت گرديده و به طور خودكار در سرور پردازش شده و نتيجة آن سريعاً در اختيار مشتري قرار داده شود.

اينكه يك وب سايت تا چه اندازه بتواند مفيد واقع شود به عوامل مختلفي بستگي دارد، از جمله:

- كيفيت طراحي وب سايت

- كارآيي سرويس دهنده (Server) اي كه صفحات وب و فايلهاي مربوطه روي آن قرار داده مي‌شود.

- پهناي باند سرويس دهنده

- سرعت و كيفيت ارتباط اينترنتي كاربر

در اين ميان ، كيفيت طراحي و مديريت سايت از اهميت خاصي برخوردار است. مديريت سايت معمولاً بر عهده يك نفر يا يك گروه با عنوان Web master قرار دارد. مدير سايت ممكن است جهت آماده‌سازي بخش‌هاي مختلف سايت، مانند طراحي‌هاي گرافيكي ، از متخصصان ديگر كمك بگيرد اما در مورد سايت‌هاي كوچك معمولاً يكنفر مسئوليت طراحي و مديريت سايت را بعهده مي‌گيرد. طراحي سايت تنها يك كار تكنيكي نيست بلكه در نظر گرفتن زيبايي و جذابيت سايت بسيار مهم است بطوريكه يك سايت كه از نظر تكنيكي بسيار قوي باشد،‌ شايد بدليل ضعف در برقراري ارتباط رواني مناسب با كاربر، در جذب او ناتوان باشد.

هدف اين پروژه طراحي وب سايت شركت نويدان طب بوده است. اين شركت توليد كنندة‌ لوازم و تجهيزات آزمايشگاهي است؛ بنابراين اغلب كساني كه به اين سايت مراجعه مي‌كنند مسئولين آزمايشگاه در دانشگاه‌ها يا مدارس، آزمايشگاههاي تشخيص طبي و يا متخصصين شيمي مي‌باشند. اين افراد مايل هستند كه به آساني از نوع توليدات و خدمات شركت و بويژه هزينة آن آگاه شوند. گروه ديگر از كساني كه ممكن است به اين سايت مراجعه كنند ممكن است توليدكنندگان يا مصرف‌كنندگان از كشورهاي خارجي باشند؛ بنابراين كلية اطلاعات سايت بايد علاوه بر زبان فارسي به زبان انگليسي نيز طراحي و قابل دسترس باشد. اين سايت بگونه‌اي طراحي شده كه كاربر بتواند از همان صفحه اول سايت انگليسي يا فارسي را انتخاب كند.

در فصل دوم اين پايان‌نامه،‌ تاريخچة اينترنت و سرويس‌هاي آن معرفي شده است و در فصل سوم كدهاي HTML بكار رفته در طراحي صفحات مخلتف سايت و نيز نسخة چاپي سايت ارائه مي‌گردد.


فصل اول


1- مروري بر اينترنت و وب:‌

ريشه‌هاي اينترنت به پروژه‌اي به نام آرپانت كه توسط آژانس پروژه‌هاي تحقيقاتي پيشرفته وزارت دفاع ايالات متحده حمايت مي‌شد، باز مي‌گردد.

وزارت دفاع مي‌خواست شبكه‌اي بسازد كه خودش را تحت شرايط سخت‌ و ناسازگار نگهداري كند. (شبكه دو يا چند كامپيوتر است كه به يكديگر متصل مي‌شوند و با يك زبان صحبت مي‌كنند، ايده اصلي، ساختن شبكه‌اي بود كه قادر باشد اطلاعات نظامي و دولتي را منتقل كند. پروژه در سال 1968 آ‎غاز شد و سالها ادامه داشت و بعد از اين كه به طور رسمي اعلام شد كه كامل شده‌ است، با موفقيت متوقف شد. از آن موقع تكنولوژي متصل ساختن مطمئن و اقتصادي كامپيوترها توسعه يافته است و امروز روح آرپانت ستون فقرات اينترنت را شكل مي‌دهد.

در ابتدا،‌ هدف محققين آرپانت ساخت يك شبكه بزرگ براي متصل ساختن كامپيوتر در مسافت‌هاي طولاني بود اما در اواسط دهه 1970 روشن شد كه هيچ شبكه منفردي قادر به تأمين نيازهاي همه افراد نيست. محققين ديدند كه توسعه تكنولوژي‌ كه بتوانند انواع مختلفي از شبكه‌ها را در سيستمي بزرگ و منفرد متصل سازد. بسيار مفيدتر مي‌باشد. اين ديد باعث مطرح شدن مفهوم ميان شبكه يا اينترنت شد.

بنابراين اينترنت امروزي واقعاً شبكه كامپيوتري بزرگ و منفردي نمي باشد. اينترنت عملاً مجموعه‌اي از دهها هزار شبكه گسترده در سطح جهان است.

پس مي‌توان گفت كه اينترنت مجموعه‌اي از شبكه‌هاست كه خود اين شبكه‌ها به هم متصل مي‌باشند. شبكه‌ها با يكديگر از طريق پروتكلي به نام TCP/IP ارتباط برقرار مي‌كنند. كه اين خود يكي از وجوه مشترك بين اينترنت مي‌باشد.

ويژگي‌ اصلي و رمز موفقيت اينترنت اين است كه هر نوع كامپيوتري صرفنظر از مختصات سخت‌افزاري و سيستم عامل، با رعايت يك مجموعه استاندارد مي‌تواند با كامپيوترهاي ديگري كه آن استانداردها را رعايت مي‌كنند ارتباط برقرار سازد.




End

برخلاف عنوان يك صفحه، تيترها مي‌توانند به هر اندازه و تعداد خط باشند.

اگر چه استفاده از برچسبهاي متن داخل آنها را بزرگتر و مشخص‌تر نشان مي‌دهد ولي براي درشت‌نمايي نوشته‌ها از استفاده نكنيد. چون از يك طرف نوع برخورد همه مرورگرها با تيترها يكسان نيست و از طرف ديگر ابزارهاي ايجاد جداول شاخص صفحات وب كه از تيترهاي صفحه بعنوان مرجعي براي پيدا كردن صفحه استفاده مي‌كنند، ممكن است دچار سردرگمي شوند.
3-2- پاراگرافها (Paragraphs)

در اولين نسخه HTML پاراگرافها فقط با برچسب و بدون استفاده از تعريف مي‌شدند و برچسب در انتهاي پاراگراف براي نشان دادن انتهاي آن استفاده مي‌شد. مرورگرهاي وب با ديدن برچسب يك خط جديد با چند فضاي خالي ايجاد مي‌كند و بقيه متن را ادامه مي‌دهند. ولي در نسخه‌هاي جديد HTML پاراگرافها با برچسبهاي و تعريف مي‌شود. آوردن در شروع پاراگراف الزامي است وي برچسب در آخر پاراگراف اختياري است.

از برچسب علاوه بر مشخص كردن پاراگراف مي‌توان براي تنظيم پاراگراف (چپ، وسط و راست)و رنگ آن استفاده كرد.
3-3- ليستها (Lists)

يكي ديگر از عناصر متداول HTML ليستها هستند، HTML پنج نوع ليست متفاوت ايجاد مي كند:

- ليستهاي عددي يا ترتيبي كه با اعداد شروع مي‌شوند.

- ليستهاي نمادي ياغيرترتيبي كه با نمادها شروع مي‌شوند.

- ليستهاي فهرستي كه هم آيتم داراي عبارتهاي جداگانه است.

- ليستهاي منويي براي عبارتهاي يك خطي

- ليستهاي دايركتوري براي عبارتهاي كوتاه كه مي‌توانند بصورت عمودي يا افقي ليست شوند.
برچسبهاي ليست

همه برچسب‌هاي ليست داراي عناصر مشترك زير هستند:

تمام ليستها در داخل برچسب شروع و پايان مربوطه قرار مي‌گيرد. براي مثال:

(,,,./UI. ….)

هر آيتم در ليست داراي برچسب جداگانه است. براي ساير ليستها بهترين فرمت تعريف شده يك فرم مي‌تواند مانند زير باشد:

Dantes Divine Comedy Con of Three books:



The informo

The pargatorio


ليستهاي عددي

ليستهاي عددي با برچسبهاي ،‌‌ ) مخفف Ordered List) تعريف مي‌شوند و هر آيتم اين ليست با برچسب شروع مي‌شود.

برچسب نيازي به برچسب پايان ندارد، برچسب بعدي يا برچسب انتهاي هر آيتم را مشخص مي‌كند. هنگامي كه مرورگر ليست عددي را نشان مي‌دهد، شماره ليستها به ترتيب است و شما نمي‌توانيد خودتان شماره‌گذاري كنيد و اگر يك آيتم را حذف يا اضافه كنيد، مرورگر خودش دوباره ليست جديد را شماره‌گذاري مي‌كند.

مثال:

for The best Mango chutnoy



Go to the store

Buy some mango chutnoy

Open The bottle

Server



ليستهاي عددي داراي چندين مشخصه هستند كه براي تنظيم ليست مي‌توانيد از آنها استفاده كنيد،‌ بدين ترتيب كه شما مي‌توانيد تعيين كنيد كه شماره‌گذاري ليست از چه عددي شروع شود و يا شماره آيتم‌ها به چه فرمتي ظاهر شوند.

براي اين امر از دستور TYPE استفاده مي‌شود كه مي‌تواند پنج مقدار زير را بپذيرد:

“1” تعيين مي‌كند كه شماره ليست از چه عددي شروع شود. (كه مي‌تواند 1,2,3 و يا هر عددي باشد).
5-1- انواع URL
1- HTTP

يك HTTP URL متداولترين URL در www است. (HyperText Transfer Protocol)HTTP پروتكلي است كه سرويس دهنده‌هاي www براي فرستادن فايلهاي HTML از آن استفاده مي‌كنند. فرمت HTTP URL بصورت زير است:

http://www.foo.com/home/foo/

اگر URL با “/” تمام شود آخرين قسمت بعنوان نام دايركتوري محسوب مي‌شود، شما مي‌توانيد نا مفايل را نيز در URL ذكر كنيد:

http://www.foo.com/home/foo/index.html
2- FTP بدون نام (Anony mouse FTP)

اين نوع FTP URL براي دريافت فايل از سرويس دهنده‌هاي FTP- معمولاً سرويس دهنده‌هاي FTP بدون نام – استفاده مي‌كنند، بدين ترتيب كه شما بدون اينكه رمز عبور و آدرس پست الكترونيكي را وارد كنيد به اين سرويس دهنده متصل مي‌شويد و از اطلاعات آنها استفاده مي‌كنيد.

FTP URL از فرم استفاندارد URL پيروي مي‌كند:

ftp://ftp.foo.com/home/foo/

ftp://ftp.foo.com/home/foo/homepage.html

URL اول تمام فايلهاي روي دايركتوري foo را بازيابي مي‌كند و URL دوم فقط فايل homepage.html را بازيابي مي‌كند.

نكته: پيمايش سرويس دهنده‌هاي FTP با استفاده از مرورگرهاي وب مي‌تواند كندتر از پيمايش آنها با استفاده از خود FTP باشد چون مرورگرها ارتباط را باز نگه نمي دارند، در عوض ارتباط را برقرار مي‌كنند، فايل يا دايركتوري را پيدا مي‌كنند،‌ ليستها را نمايش مي‌دهند و سپس ارتباط را قطع مي‌كنند. اگر شما يك اتصال به يك فايل يا دايركتوري ديگر در اين ليست را انتخاب كنيد، مرور گر يك URL FTP جديد از آيتم‌هايي كه شما انتخاب كرده‌ايد مي‌سازد و ارتباط FTP را با URL FTP جديد برقرار مي‌كند، فايل يا دايركتوري را پيدا مي‌كند و اين كار مرتباً تكرار مي‌شود.
3- FTP با نام (Non – Anonymous FTP)

فرمت اين نوع FTPها بصورت زير است:‌

fttp://username:password @ ftp. Foo. Com/ home/ foo/homopage.html

كه username شناسه ورود و Password رمز عبور كاربر به سرويس دهنده است. توجه داشته باشيد كه رمز عبور در اين URL بصورت كاراكتر نامشخص (*) ظاهر نمي‌شود بنابراين مراقب باشيد اين نوع‌ها را در جايي قرار ندهيد كه توسط ساير افراد قابل رويت باشد.
4- File

URL فايل براي رجوع به فايلهاي روي ديسك محلي (و نه در وب) بكار مي‌روند. براي فايلهاي محلي URL به دو صورت تعريف مي‌شود:

بدون نام ميزبان

با نام ميزبان

File://dir1/dir2 file

File://localhost/dir/dir2/file

URL فايل شباهت زيادي به FTP URL دارد، اگر قسمت نام ميزبان File URL خالي نباشد مرورگر براي پيدا كردن فايل داده شده از FTP استفاده مي‌كند. بهترين استفاده ار File URL براي تعيين صفحه شروع مرورگر (صفحه خانگي) است. مشكل File URL اين است كه چون به فايلهاي محلي روي كامپيوتر كه مرورگر روي آن نصب شده است رجوع مي‌كند، ‌اگر كسي در جاي ديگري از شبكه وب شما را باز كند، مرورگر آن شخص را،‌ براي برقراري پيوندها به فايلهاي محلي آن مراجعه مي‌كند و چون فايلها روي ديسك آن نيست، نمي تواند پيوندها را ايجاد كند.
5- Mailto

Mailto URL براي ارسال پست الكترونيكي (E-maik) استفاده مي‌‌شود. اگر مرورگر Mailto را پشتيباني كند هنگام انتخاب يك پيوند Malto ، مرورگر يك پنجره باز مي‌كند و موضع و محتواي پست الكترونيكي را مي‌خواهد و سپس يك نامه الكترونيكي به آدرس مشخص شده فرستاده مي‌شود.

Mailto URL با URL هاي استاندارد متفاوت است:

Mailto: inrernet-e-mail-address

مثال:‌

Mailto : lemay@lne,com





6-7- نگاشت تصوير (Image Maps)

نگاشت تصوير يك نوع تصوير قابل كليك است. با قرار دادن يك تصوير در برچسب و تعريف پيوند آن تصوير قابل كليك مي‌شد و كليك كردن روي هر نقطه از اين تصوير باعث فعال شدن صفحه تعريف شده در پيوند مي‌شد. با استفاده از نگاشت تصوير مي‌توان ناحيه‌هاي متفاوتي روي تصوير تعريف كرد كه هر يك صفحه خاصي را فعال كند، برخلاف تصوير داخل برچسب كه كليك كردن روي تصوير، زمينه، كادر و هر نقطه ديگر آن را فعال مي‌كند.

براي مثال با استفاده از نگاشتهاي تصوير مي‌توان يك نقشه تصويري ابرمتني ساخت كه با كليك كردن روي هر ناحيه از آن صفحه حاوي اطلاعات و جزئيات آن ناحيه را فعال كرد، نگاشت تصوير را مي‌توان بصورت مستطيل، دايره، چندضلعي و نقطعه تعريف كرد.
برچسب و برچسب

تعريف نگاشت تصوير در مستند HTML با برچسب امكانپذير است:

Corrdinates and links

مشخصه NAME نام نگاشت را تعريف مي‌كند كه براي تعريف پيوند در مرحله بعدي مورد نيازاست. بين مشخصه‌هاي ….. مختصات ناحيه نگاشت، نوع ناحيه نگاشت و مقصد پيوند تعريف مي‌شود. مختصات ناحيه نگاشت و نوع آن در برچسب مشخص مي‌شود:



مشخصه SHAPE نوع ناحيه نگاشت را تعريف مي‌كند و مي‌تواند مقادير RECT (مستطيل)، POLY (چند ضلعي) ، CIRCLE (دايره) را بپذيرد. مثالهاي زير كاربرد اين مقادير را بوضوح نشان مي‌دهد.

در مشخصه مختصات ناحيه نگاشت تعيين مي‌شود:

ناحيه نگاشت مستطيلي



كه در آن مختصات گوشه بالا و گوشه پايين مستطيل است.



كه در آن مختصات مركز دايره و شعاع آن است.
ناحيه نگاشت چند ضلعي



كه در آن x1,x2….xn,yn مختصات لبه‌هاي چند ضلعي را مشخص مي‌كنند. مشخصه HREF مقصد پيوند را با استفاده از URL يا نام فايل تعريف مي‌كند. در برچسب مي‌توان از مشخصه TARGET نيز استفاده كرد تا صفحه تعريف شده درنگاشت تصوير در پنجره اي كه در TARGET تعيين شده فعال شود.
6-7-1- مشخصه USEMP

بعد از تعريف مختصات نگاشت و مقصد آن، براي قرار دادن تصوير اصلي در مستند HTML از برچسب USEMP در برچسب استفاده مي‌شود:



در مشخصه USEMP نام نگاشت كه قبلا در برچسب توسط مشخصه NAME تعريف شده قرار مي‌گيرد.
تعريف نگاشت تصوير:




تعريف نگاشت تصوير براي تصوير اصلي:


6-8- فرمها

تا اينجا مطالبي كه شرح داده شد در حيطه ارائه اطلاعات توليد صفحه وب از جمله متن، تصوير ، مالتي مديا، فريمها به خواننده صفحه وب خلاصه مي‌شود. اما اين كافي نيست خوانندگان نيز بايد بتوانند با توليد كننده صفحه وب ارتباط برقرار كنند و نظرات ، درخواستها و اطلاعاتشان را ارسال كنند.

فرمها اين امكان را در اختيار خوانندگان مي‌گذارد و برخلاف ساير آيتمهاي HTML اين آيتم توسط همه مرورگرها اهم از متن و گرافيكي آن را پشتيباني مي‌كنند. عناوين فصل عبارتند از: