دانلود مقاله طراحی صفحات وب

بخشی از مقاله

فصل اول
آشنایی با مکان کارآموزی

شركت گروه صنعتي ويدا فناوران آسيا داراي مديران مجرب و توانمند در زمينه‌هاي طراحي ،‌ نمونه سازي ماشين آلات صنايع غذايي ، جذب و بومي سازي دانش فني ، ارتقاء بر سطح توليدات دستگاههاي ساخت داخلي ، ايجاد رقابت و مبادرت به صادرات مي باشد .
سابقه فعاليت مديران شركت در رشته طراحي و ساخت به بيش از 15 سال مهارت در ساخت انواع ماشين آلات صنايع غذايي و بسته بندي مي‌باشند .
زمينه‌‌ي طراحي و ساخت ماشين آلات در شركت عبارتند از :
1- ماشين آلات صنايع غذائي

2- ماشين آلات صنايع آرايشي و بهداشتي
3- ماشين آلات صنايع شوينده
4- ماشين آلات صنايع بسته بندي
5- ماشين آلات صنايع شيميايي

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

مفاهيم مشترك دستگاهها عبارتند از :
1. پركن - دستگاههاي پركن بستگي به نوع محصول توليد مي‌شوند مثلاً دستگاههاي پركن عطريات با دستگاههاي پركن مواد شيميائي يا غذائي از نظر سليقه كارائي به حجم دستگاه و ميزان پركني ظروف محصولات .

2. در بند ، ليبل چسبان ، بسته بندي و ديگر دستگاههاي همانند شرح فوق داراي قابليت‌هاي فراواني در زمينه‌هاي مختلفي مي‌باشند .
طر احي دستگاهها از طريق كامپيوتر و نرم افزارهاي طراحي انجام مي‌پذيرد . بدينوسيله آشنائي ، كاركرد و تجربه بالائي در استفاده از نرم افزارهايي مانند Auto CAD و... موجب تسريع ،‌دقت و مهارت در تهيه نقشه‌هاي هر يك ازدستگاهها و يا نيازمنديهاي متقاضيان ميگردد . و بايد دانست كه هميشه بايستي طراحي دستگاه‌ها در راستاي پيشرفت ، كاهش هزينه‌ ، ارائه ويژگيهاي جديد و كاملاً بهتر از گذشته باشد .

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

فصل دوم
ارزیابی بخش¬های مرتبط با رشته علمی

شركت ويدا فناوران آسيا كه طراح و سازنده ايستگاه‌هاي ليبل چسبان و پركن در صنعت كشور مي‌باشند ، به منظور معرفي و عرضه بهتر دستگاه‌هاي صنعتي خود نياز به تبليغات گسترده مي‌باشد ، كه طراحي سايت وب ، طراحي كتابهاي تبليغاتي و همچنين ساخت CDهاي تبليغاتي و ... از جمله راههاي تبليغات مي‌باشد . نرم افزارهاي طراحي صفحات وب Dreamweaver , Front page مي‌باشد كه مكمل اين نرم افزارهاي طراحي ،‌ نرم‌افزارهاي گرافيكي‌ ديگر از جمله photoshop و Corel و... نيز نياز مي‌باشد .

اينجانب نيز با علاقه به اين گرايش كامپيوتر و نياز به آموزش در اين زمينه در اين شركت به عنوان كارآموز شروع به فعاليت كرده‌ام .
اين شركت علاوه بر نياز به اين تبليغات از كامپيوتر و نرم ‌افزارهاي ديگري از جمله Word , Exel و... براي انجام امر حسابداري و نامه‌هاي اداري نيز استفاه مي‌نمايد و همچنين مي‌توان از نرم افزار كامپيوتر در جهت هدايت و كاركرد دستگاههاي صنعتي ساخته شده نيز استفاده نمود كه نياز به علم بالاي كامپيوتر و برنامه‌نويسي دارد .

فصل سوم
آزمون آموخته¬ها، نتایج و پیشنهادات

طراحی سایت استاتیک توسط نرم¬افزار Dreamweaver
با Dreamweaver چه می¬توان کرد؟

Dreamweaver مشهورترین ابزار حرفه¬ای توسعه کار وب می¬باشد که بسیاری از شرکت¬های بزرگ Dreamweaver را به عنوان ابزار استاندارد خود برای توسعه وب معرفی می¬کنند. Dreamweaver همچنین برای تولیدکنندگان مستقل که برای مشتریان خود سایت وب می¬سازند، یک ابزار عمومی به شمار می¬رود. Hypertext Mark up یا HTML اساس کار Dreamweaver می¬باشد. HTML language زبانی است برای قالب¬بندی محتویات که در شبکه گسترده جهانی و با استفاده از نرم¬افزاری به نام مررورگر وب، مشاهده می¬شود.

عناصر پایه¬ای صفحات وب: متون، تصاویر، پیوندها
اکثر صفحات وب دارای حداقل سه عنصر می¬باشند: متن، تصویر، پیوند.
این سه عنصر زیربنای اکثر سایت¬ها هستند چرا که اطلاعات متن را در کنار پشتیبانی قطعات گرافیک (Image) علاوه بر شیء برای هدایت به صفحات دیگر، برای سایت وب فراهم می¬کنند.

CSS جدیدترین روش طراحی وب است که هم¬چنان در حال رشد می¬باشد. با استفاده از CSS می¬توان قالب¬های پیچیده¬ای برای صفحات وب طراحی کرد.

CSS این امکان را می¬دهد که متن¬ها، روش¬های مختلف ظاهر شدن برچسب¬های HTML و تعداد عناصر مختلفی را که روی صفحه قرار داده می¬شود قالب¬بندی کنید.

چندرسانه¬ای (Multi media)
بسیاری از طراحان، از فیلم، صدا، انیمیشن، تصاویر متحرک حقیقت مجاز و دیگر عناصر چندرسانه¬ای در سایرتای وب خود استفاده می¬کنند. کاربر باید برای دیدن و شیندن این فایل¬های چندرسانه¬ای به نامه¬های کاربردی چندرسانه¬ای مانند Flash، Quick Time را بارگذاری و نصب نماید. صفحات وب ساخته شده در Dreamweaver می¬توانند شامل آدرس صفحه وبی باشند که کاربر باید از آنجا برنامه اجراکننده¬ای را بارگذاری کند. همچنین مرورگر ممکن است به طور اتوماتیک بارگذاری را راه¬اندازی نماید.

صفحات تعامل
در Dreamweaver می¬توان اسکریپت¬های جاوا را، که عملکرد یا Behaviour نامیده می¬شود، به صفحات وب اضافه نمود. عملکردها امکان درک وضبط رویدادهای بسیاری را می¬دهد که توسط مرورگر دریافت می¬شود مانند کلیلک بر روی صفحه یا لغزاندن مکان¬نما روی عنصر خاصی از آن.
تعریف یک وب سایت جدید
کل سایت¬های وب شامل یک دایرکتوری (فهرست) به نام ریشه (Root) هستند. ریشه یک سایت وب دایرکتوری اصلی محتوی فایل¬ها و دایرکتور¬ی¬های دیگر می¬باشد.

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

برای تعریف یک سایت وب، لیستی از فایلهای موجود در سایت وب در پنل Files نمایش داده می¬شود.
برای شروع تعریف یک سایت وب از منوی پائین افتادنی Site، گزینه Manage Sites را انتخاب کرده و کادر محاوره¬ای Manage Sites باز شود. همچنین توسط انتخاب گزینه Site>Manage Sites این کادر محاوره¬ای باز می¬شود. در این کادر محاوره¬ای تعاریف سایت¬های Dreamweaver را ایجاد، ویرایش، کپی، حذف، صادر و وارد می¬نماید. با انتخاب گزینه New و ادامه مراحل می¬توان یک سایت وب جدید را تعریف کرد.
ایجاد فایل¬های جدید در پنل Files

در پنل Files مربوط به Dreamweaver پوشه¬ها و فایل¬های جدیدی را می¬توان ایجاد نمود. برای باز کردن منوی پنل Files، در این پنل کلیک راست کرد. در بالای این منو مضمونی دوفرمان New File و New Folder وجود دارد که این فرمان¬ها برای ایجاد فایل¬ها و پوشه¬های جدید در پنل Files وجود دارد.

سایت¬های وبی که ساخته می-شود برای سازماندهی به دایرکتوری¬ها نیاز دارند. احتمالاً هر سایتی حداقل دارای یک دایرکتوری تصاویر برای تمام تصاویر موجود در سایت است. با استفاده از فرمان New Folder یک دایرکتوری تصاویر می¬توان ایجاد کرد. برای اضافه نمودن یک فایل جدید به سایت باید روی پوشه ریشه کلیک راست نمود و فرمان New File را انتخاب کرد . یک صفحه وب بدون عنوان این سایت وب ایجاد می¬شود. این صفحه وب index.html نام دارد.

استفاده از نام پیش¬فرض برای صفحه این امکان را برای کاربر فراهم می¬سازد که تنها با وارد کردن آدرس یک صفحه وب پایه بدون صفحه ضمیمه، به راحتی صفحه وب پیدا شود.

صفحه اصلی برنامه از یک نوار منو، نوار Insert، نوار ابزار Document، بازرس Property گروه پنل و پنجره Document تشکیل شده است.
برخی از افراد استفاده از فرمان¬های منو را ترجیح می¬دهند و ممکن است گروه دیگری کلیک کردن بر روی آیکون¬ها را بپسندند.
نوار Menu

منوی File شامل فرمان¬های برای باز کردن و بستن، ذخیره کردن، وارد کردن و صادر کردن فایل است.
منوی Edit حاوی دستورات cut، copy، paste، Find و Replace است.
در ویندوز فرمان preferences هم در این منو قرار دارد. بسیاری از عناصر واسط کاربر Dreamweaver و عملیات آن می¬توانند به وسیله فرمان Preferences پیکربندی شوند.

منوی View چشم¬انداز را بر روی محتوای سرصفحه، عناصر قابل مشاهده، کناره¬های قالب، جداول و چارچوب نوار وضعیت، نقشه تصاویر، تغییر می¬دهد. علامت بررسی (Checkmark) در کنار هر عنصر مشخص می¬کند که در حا حاضر مرور می¬شود. همچنین منوی Veiw فرمانهایی برای فعال¬سازی خط¬کش، شبکه و راهنماها، اجرای برنامه¬های کوچک کاربردی و نمایش تصویر ردیاب دارد.

منوی درج تقریباً مشابه نوار درج می¬باشد و تمام موردهای موجود در نوار درج را از طریق این منو به آن اضافه می¬شود. منوی تغییر یا Modify این امکان را می¬دهد که خواص شی انتخاب شده تغییر کند. پس از افزودن یک شی به صفحه وب از فرمانهای زیرمنوی Modify استفاده می¬شود.

منوی متن راه¬های مختلفی را برای بهتر کردن ظاهر متن در صفحه وب، ارائه می¬کند. منوی متن فرمان Check Spelling را در اختیار افرادی می¬گذارد که معمولاً در هجی کردن مشکل دارند. با انتخاب یک متن، منوی متن اکثر خواص آن را که از طریق بازرس property در دسترس هستند، منعکس می¬کند. از این منو برای ایجاد فرورفتگی در متن تا ساخت یک لیست و تغییر خواص فونت استفاده می-گردد. منوی Site فرمانهایی را که با کل سایت در ارتباط هستند،

دربرگیرد.
نوار Insert
در ویندوز، نوار Insert دقیقاً در پایین نوار منو قرار دارد و در مکینتاش یک پانل شناور است. این نوار شامل دکمه¬هایی برای درج کردن عناصر صفحات وب (نظیر تصاویر، جداول، فرم¬ها، پیوندها) است. برای درج شی مورد نظر در صفحه وب می¬توان روی آیکن دکمه مربوطه کلیک کرد یا آن را کشید. همه اشیاء نوار Insert از طریق منوی Insert نیز در دسترس هستند.

در سمت چپ نوار Insert یک منوی پایین افتادنی وجود دارد که این امکان را می¬دهد تا از بین هفت مقوله از اشیاء، پنل را انتخاب کرد.
Common, layout, Form, Text, HTML, Application, Flash Elements , Favourites
برای نمایش یک شیء از یک مقوله خاص منوی پائین-افتادنی را باز و مقوله مورد نظر را انتخاب نمائید.

مقوله Common
• Hyperlink: یک پیوند را که شامل محل لینک و متن مورد نظر می¬باشد را درج می¬کند.
• E.mail link: پیوندی را اضافه می¬کند که با کلیلک کردن روی آن، یک پیام پست الکترونیکی خالی به یک نشانی پست الکترونیکی خاص ارسال می¬شود.
• Named Anchor: یک برچسب نامگذاری شده را در نقطه¬ی درج قرار می¬دهد.
• Table: جدولی را در نقطه درج ایجاد می¬کند.

• Insert Div Tag: یک برچسب <div> را اضافه می¬کند. Dreamweaver از این برچسب برای ساخت لایه¬ها استفاده می¬نماید.
• Image: یک تصویر را در نقطه درج قرار می¬دهد (در منوی پائین افتادنی Image)
• Rollover Image: وجود دو تصویر را به شما اعلام می¬کند که عبارتند از: یک تصویر معمولی و تصویری که وقتی کاربر مکان نمای خود را روی آن قرار می¬دهد، ظاهر می¬گردد.

• (FireWorks HTML): HTMLی را که از Fireworks ماکرومدیا صادر شده است، در نقطه درج قرار می-دهد.
• Navigation bar: مجموعه¬ای از تصاویر دکمه¬ای را که برای هدایت در سایت وب مورد نظر به کار می-رود، وارد می¬کند.
• Draw Rectangle Hotspot: این امکان را می¬¬دهد که یک مستطیل را روی ناحیه خاصی از تصویر رسم کنید و آن را به یک URL خاص پیوند دهید.
• Draw Oval Hotspot: این امکان را می¬دهد که دایره¬ای را روی ناحیه خاصی از تصویر رسم کنید و آن را به یک URL خاص پیوند بدهید.
• Draw polygon Hotspot: این امکان را می¬دهد که یک چندضلعی را روی ناحیه خاصی از تصویر رسم کنید.
• Flash: یک فیلم Flash ماکرومدیا را در نقطه درج مستقر می¬کند.

• Flash Button: یکی از دکمه¬های Flash ماکرومدیا را در نقطه درج مستقر می¬سازد.
• Flash text: یک شی متن Flash ویرایش¬پذیر را در نقطه درج قرار داده و فایل Flashی را می¬سازد.
• Flash paper: یک مستند Flash paper را در صفحه وب درج می¬کند.

• Flash Video: یک ویدیوی Flash را در نقطه درج مستقر کرده و پیکربندی می¬کند. (در منوی پایین-افتادنی Media)
• Shock Wave :یک فیلم Shockware را در نقطه¬ی درج قرار می¬دهد. (این فیلم، یک فایل از Macromedia Director است که به صفحات وب اختصاص دارد) (در منوی پایین¬افتادنی Media)

• Applet: یک اپلت جاوا را در نقطه¬ی قرار می¬دهد. (در منوی پایین¬افتادنی Media)
• Param: برچسبی را درج می¬کند که می¬توانید به وسیله¬ی آن پارامترها و مقادیر آنها را به یک اپلت یا یک کنترل ActiveX پاس کنید. (در منوی پایین¬افتادنی Media)

• ActiveX: یک کنترل ActiveX را در نقطه¬ی درج قرار می¬دهد. (در منوی پایین¬افتادنی Media)
• Plugin:هر فایلی را که نیاز به یک Plug-in مرورگر داشته باشید، در نقطه¬ی درج مستقر می-کند. (در منوی پایین¬افتادنی Media)
• Data:تاریخ فعلی را در نقطه¬ی درج وارد می¬کند.

• Server-Side Include: فایلی را در نقطه¬ی درج قرار می¬دهد که یک include سمت سرویس دهنده را شبیه-سازی می¬کند.
• Comment: توضیحی را در نقطه¬ی درج وارد می¬کند.

• Make Template: یک الگوی Dreamweaver از صفحه¬ی فعلی ایجاد می¬کند.(در منوی پایین¬افتادنی Templates)
• Make Nested Template: یک الگوی Dreamweaver تودرتو از صفحه¬ی فعلی ایجاد می¬کند. (در منوی پایین¬افتادنی Templates)
• Editable Region: یک ناحیه ویرایش¬پذیر را به یک الگو اضافه می¬کند. (در منوی پایین¬افتادنی Templates)
• Optional Region: یک ناحیه¬ی اختیاری را به یک الگو اضافه می¬کند. (در منوی پایین¬افتادنی Templates)

• Repeating Region: یک ناحیه تکرار شونده را به یک الگو اضافه می¬کند. (در منوی پایین¬افتادنی Templates)
• Editable Optional Region:یک ناحیه ویرایش¬پذیر اختیاری را به یک الگو اضافه می¬کند. (در منوی پایین¬افتادنی Templates)
• Repeating Table: یک جدول تکرار شونده را به الگو اضافه نموده و مشخص می¬کند که کدام خانه¬ها ویرایش¬پذیر هستند.
• Tag Chooser:به شما امکان می¬دهد که یک برچسب را انتخاب کنید و از منوی سلسله مراتبی مربوط به تمام برچسب¬های موجود، آن را درج کنید.

مقوله Layout
• Table: یک جدول را در نقطه درج ایجاد می¬کند. (این آیکن در زبانه¬ی Common نیز وجود دارد)
• Insert Div Tag: یک برچسب (tag) <div> را اضافه می¬کند. Dreamweaver از این برچسب برای ساخت لایه¬ها استفاده می¬نماید. (این آیکن در زبانه¬ی Common نیز وجود دارد)
• Draw Layer: یک محفظه لایه را در یک صفحه وب رسم می¬کند.
• Standard Mode: نمای استاندارد Dreamweaver را فعال می¬کند در حالی که همزمان جداول گسترش یافته یا نمای Layuot را غیرفعال می¬سازد.
• Expanded Mode: نمای قالب Dreamweaver را فعال می¬کند در حالیکه به طور موقت بسترگذاری خانه (Cell Padding) و کناره¬ها را به جدول اضافه می-نماید.

• Layout Mode: نمای طرح Dreamweaver را فعال نموده و به شما این امکان را می¬دهد که جداول یا خانه-های آنها را رسم کنید.
• Layout Table: زمانی که در نمای Layout هستید، یک جدول را رسم می¬کند.
• Draw Layout Cell: وقتی که در نمای Layuot هستید، یک خانه جدول را رسم می¬کند.
• Insert Row Above: در بالای ردیف انتخاب شده از جدول، یک ردیف جدید اضافه می¬کند.
• Insert Row Below: در پایین ردیف انتخاب شده از جدول، یک ردیف جدید اضافه می¬کند.

• Insert Column to the Left: ستونی را در سمت چپ ستون انتخاب شده از جدول اضافه می¬کند.
• Insert Column to the Roght: ستونی را در سمت راست ستون انتخاب شده از جدول اضافه می¬کند.

• Left Frame: یک فریم در سمت چپ فریم فعلی ایجاد می¬کند. (در منوی پایین¬افتادنی Frame)
• Right Frame: یک فریم در سمت راست فریم فعلی ایجاد می¬کند. ( در منوی پایین¬افتادنی Frame)
• Top Frame: یک فریم در بالای فریم فعلی ایجاد می¬کند. ( در منوی پایین¬افتادنی Frame)
• Botton Frame: یک فریم در پایین فریم فعلی ایجاد می¬کند. ( در منوی پایین¬افتادنی Frame)
• Bottom and Nested Left Frame: ابتدا فریمی را در سمت چپ فریم فعلی ایجاد نموده و سپس یک فریم را به قسمت پایین اضافه می¬کند. (در منوی پایین-افتادنی Frames)
• Bottom and Nested Right Frame: ابتدا فریمی را در سمت راست فریم فعلی ایجاد نموده و سپس یک فریم را به قسمت پایین اضافه می¬کند. (در منوی پایین¬افتادنی Frames)
• Left and Nested Bottom Frame: ابتدا فریمی را در پایین فریم فعلی ایجاد نموده و سپس یک فریم را به سمت چپ اضافه می¬کند. (در منوی پایین¬افتادنی Frames)