دانلود مقاله بررسی ناحیه کاری Dream weaver

هنگامی که برای اولین بار Dream weaver رادر ویندوز باز می‌کنید، فرصت کافی برای انتخاب فضای کاری Designer یا Coder را دارید.

فضای کاری Coder تمام پانل‌های Dream weaver رادر سمت چپ صفحه نمایش قرار می‌دهد در حالی که فضای کاری Designer آنها را در سمت راست صفحه نمایش قرار می‌دهد.

نگارش مکینتاش Dream weaver به طور خودکار فضای کاری Designer را دراختیار شما می‌گذارد.

پیشنهاد می‌کنم فضای کاری Designer را انتخاب کنید.

اگر در ابتدای فضای کاری Coder را انتخاب کرده و سپس بخواهید آن را به فضای کاری Designer تغییر دهید، می‌توانید این کار را با اجرای فرمان ، Window workspace Layout, Designer انجام دهید.

صفحهstart
قبل از باز شدن هر گونه فایلی Dream weaver کادری به نام صفحه start را که نوار سبز رنگی در بالای آن قرار دارد.

نمایش می‌دهد.

شکل 1-1 صفحه start وظایف معمولی Dream weaver را لیست می‌کند نظیر Create New , Open a Recent Item و Create From Samples درپایین صفحه Start لینک‌های Dream weaver Tutorial , Dream weaver Quick Tour وجوددارند.

با کلیک کردن روی تصویر کادر Dream weaver به وب سایت ماکرومدیا می‌روید که حاوی اطلاعات بهنگام در مورد این برنامه وهمچنین نکات و پیشنهادات خاصی است.

زمانی که هنوز صفحات وب در Dream weaver باز نشده اند، صفحه start را خواهید دید.
می‌توانید با اجرای فرمان Preferences , General , Show start Page برنامه Dream weaver طوری پیکربندی کنید تا این صفحه start نمایش داده نشود.

(شکل 2-1) هنگام تغییر دادن تنظیم ارجحیت باید Dream weaver را restart کنید تا تغییرات را ببینید.

صفحه start در بخش مهمی از Dream weaver به نام پنجره Document ظاهر می‌شود.

پنجره Document صفحه وب را تقریبا همان‌طور که در مرورگر وب ظاهرخواهد شد،‌نمایش می‌دهد.

پنجره Document در حاشیه سمت راست کنار گروه‌های Panel ( درفضای کاری Designer) قرار دارد (شکل 2-1 ).

این گروه‌های Panel حاوی فرمان‌هایی هستند که برای اصلاح و سازمان‌دهی صفحات وب و عناصر صفحه وب استفاده می‌کنید.

پنجره Document گروه‌های Panel و سایر عناصری که بعدا بررسی خواهید کرد.

در یک رابط یکپارچه باهم گروه‌بندی می‌شوند البته اگر در سیستم عامل ویندور مشغول کار باشید.

شکل 3-1 فضای کاری Dream weaver حاوی پنجره Document به همراه پانل‌های یکپارچه است.

پس از باز کردن 8 Dream weaver در مکینتاش پنجره Document در حال نمایش صفحه start می‌بینید ( شکل 4-1 ) نگارش مکینتاش از 8 Dream weaver دارای پانل هایی است که در بالای پنجره Document شناورند.

پانل های شناور که از منوی Window اجرا می‌شوند، به هر مکانی روی دسک تاپ انتقال می‌یابند.

نگارش‌های ویندوز و مکینتاش از Dream weaver تا حدودی با یکدیگر متفاوتند ولی دارای ویژگی‌ها وعملکرد یکسانی هستند.

شکل 4-1 فضای کاری مکینتاش حاوی پنجره Document با پانل هایی است که در بالای آن شناورند.

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

به خاطر زیاد بودن تعداد منوها، این بخش سازمان‌دهی منوهای Dream weaver راتوضیح می‌دهد.

منوهای File و Edit ( شکل 5-1) در اکثر برنامه‌ها استاندارد هستند.

منوی File حاوی فرمان‌هایی برای باز کردن، بستن، ذخیره، وارد وصادر کردن فایل‌ها است.

منوی Edit حاوی فرمان های paste , Copy.

Cut به همراه فرمان Find and Replace و فرمان Preferences ( در ویندوز) است.

اکثر عناصر رابط کاربر Dream weaver و عمل آن با فرمان preferences پیکر بندی می‌شوند.

شکل 5-1 منوهای Edit , file حاوی فرمان‌هایی هستند که در اکثر برنامه‌ها رایج هستند به علاوه چند فرمان مختص Dream weaver هستند.

منوی view (شکل 6-1) نمای محتوای عنوان،‌عناصر قابل رویت ، حاشیه‌های فریم، جدول و لایه نوار وضعیت و نگاشت‌های تصویری را فعال و غیر فعال می‌کند.

می‌توانید با قرار داده چک مارکی در کنار یکی ازاین عناصر بگویید که در حال حـاضر کدام یک از آنها را مشاهـده می‌کـنید.

منوی view نـیز دارای فرمان‌هایی برای فعال کردن خط کش، مشبک و راهنماها، نمایش plug – in و تصویر ردیابی است بسیار خوب ، چنان چه نمی‌دانید این فرمان‌ها امکان چه کارهایی را برای شما فراهم می‌کنند.

منوی Insert ( شکل 7-1) تقریبا شبیه نوار Insert است زیرا می‌توانید تمام آتیم‌های موجود در نوار Insert را با استفاده از این منو اضافه کنید.

در صورت تمایل به کلیک کردن روی آیکن‌‌ها به جای منوی Insert از نوار Insert استفاده کنید.

منوی Modify ( شکل 7-1) به شما امکان می‌دهد تا خصوصیات شیئی را که اخیرا انتخاب شده اصلاح کنید.

پس از افزودن شی‌ء به صفحه وب، از فرمان های منوی Modify استفاده کنید و آن را به صورت دلخواه خود در آورید.

شکل 6-1 منوی view میزبان فرامینی برای نشان دادن و پنهان کردن رابط کاربر است.

شکل 7-1 منوهای Modify , Insert به شما امکان می‌دهند تا روی وارد کردن و تغییر دادن صفات اشیا کنترل بیشتری داشته باشید.

منوی Text (شکل 8-1) روش‌های مختلف تنظیم دقیق ظاهر متن در یک صفحه وب را در اختیار شما قرار می‌دهد.

منوی Text فرمان Check Spelling است.

پس از انتخاب متن، منوی Text بسیاری از خصوصیات قابل دسترسی در Property inspector را منعکس می‌کند.

می‌توانید از این منو برای ایجاد تورفتگی در متن ایجاد لیست و اصلاح خصوصیات فونت استفاده کنید.

منوی Commands (شکل 8-1) فرمان های مفیدی نظیر Clean , Clean Up HTML Up Word HTML ا ارائه می‌دهد.

شکل 8-1 تمام فرمان‌های لازم برای تغییر عناصر متن در منوی Text قرار دارند .منوی Command دارای فرمان‌هایی برای ثبت فرمان، پاک سازی HTML وفرمت‌بندی و مرتب سازی جداول است.

می‌توانید از این منو برای ضبط و نمایش انیمیشن یا فرمت‌بندی ومرتب سازی جدول نیز استفاده کنید.

می‌توانید یک الگوی رنگ تنظیم کرده و برای بهیه‌سازی تصویر، به طور خودکار به Fireworks Macromedia جهش کنید.

منوی site (شکل 9-1) فرمان‌هایی را نشان می‌دهد که به کل وب سایت مربوط می‌شوند.

شکل 9-1 فرمان‌های منوی site در مدیریت کل وب سایت به شما کمک می‌کنند.

فرمان‌های منوی Window در مدیریت inspector ها و پانل‌های Dream weaver به شما کمک می‌کنند.

هم چنین درباره سیستم راهنما مطالبی می‌آموزید.

علاوه بر این ،‌لینک‌های مربوط به فایل‌های راهنمای مبتنی بر HTML منوی Help نیز ارائه می‌شوند (شکل 10-1) که حاوی فرمانی برای اجرای Macromedia Extension Manager ( فرمان Manage Extensions ) است.

لینک‌های بسیاری برای منابع ماکرومد یا از جمله Dream weaver Support Center در وب سایت ماکرومدیا وجود دارند برای یافتن نگارشی از Dream weaver که در حال اجرا است یا شماره سریال، انتخاب فرمان About Dream weaver مفید واقع می‌شود.

شکل 10-1منوی Help امکان دستیابی به سیستم راهنمای گسترده Dream weaver را فراهم می‌کند.

نگارش مکینتاش Dream weaver دارای منوی Dream weaver است (شکل 11-1) به علاوه منوهای که قبلا شرح داده شد.

این منو حاوی فرمان About است که از منوی Help در نگارش Windows قابل دسترسی است.

شکل 11-1 در مکینتاش منوی Dream weaver امکان دستیابی به فرمان preferences را فراهم می‌کند.

هم چنین امکان دستیابی به فرمان preferences را فراهم می‌کند.

فرمان Keyboard Shortcuts نیز به جای منوی Edit در این منو یافت می‌شود البته در نگارش ویندوز Dream weaver.

نوار Insert نوار Insert در ویندوز درست زیر نوار منو قرار دارد و در مکینتاش یک پانل شناور است.

این نوار حاوی دکمه‌هایی برای وارد کردن عناصر صفحه وب تصاویر، جداول ، فرم‌ها وفوق پیوندها است.

می‌توانید روی آیکن دکمه‌ای کلیک کنید یا آن را بکشید تا آن شیء در صفحه وب درج شود.

تمام اشیا در نوار Insert از طریق منوی Insert قابل دسترسی هستند.

در سمت چپ نوار Insert منوی بازشویی قرار دارد که امکان انتخاب از بین هشت دسته شیء موجود را فراهم می‌کند که عبارتند از :‌Flash , Application , HTML , Test , Forms , Layout , Common .

Favorites , Elements برای نمایش دادن شیئی در یک دسته خاص، منو را باز کرده وسپس دسته مزبور را انتخاب کنید.

به طورپیش‌فرض ،‌دسته Common نمایش داده می‌شود ولی اگر روی فرم‌ها کار می‌کنید، شاید بخواهید دسه Forms به نمایش در آید چنان چه در حال طرح بندی ساختار صفحه هستید، ممکن است بخواهید دسته Layout نمایش داده شود.

برخی از اشیا در نوار Insert منوهای بازشویی هستند که گروهی از اشیای مربوطه را سازمان‌دهی می‌کنند.

مثلا دردسته Common شیء Images منویی را باز می‌کند که حاوی Placeholder Image Draw , Draw Rectangle Hotspot Navigation Bar , Fireworks HTML , Rollover Image , Image polygon Hotspot , Oral Hotspot است.

تمام این اشیا با تصاویر کار کنند بنابراین در یک منوی بازشو در نوار Insert باهم گروه‌بندی می‌شوند.

نوار Insert به طور پیش فرض در حالت Menu نمایش داده می‌شود ولی می‌توانید با انتخاب آخرین فرمان در منوی بازشو یعنی فرمان Show as Tabs نوار Insert را در حال Tabs نمایش دهید ( شکل 12-1) با انتخاب فرمان Show as Tabs دسته‌های نوار Insert همانند برگه‌هایی در بالای این نوار نمایش داده می‌شوند.

( شکل 13-1) برای برگرداندن نوار Insert به حالت Menu فرمان Show as Menu را درمنوی بازشوی نوار Insert انتخاب کنید.

شکل 12-1 منوی باز شوی نوار Insertلیست دسته‌ها و فرمان Show as Tabs را نمایش می‌دهد که امکان نمایش دادن نوار Insert برگه را فراهم می‌کند.

شکل 13-1 در حالتabs دسته‌های نوار Insert به صورت برگه‌هایی دربالای نوار مزبور ظاهر می‌شوند.

پنجره Document به طور پیش‌فرض اندازه پنجری Document به حداکثر رسیده و نام فایل و عنوان ان در بالاترین نقطه صفحه نمایش ظاهر می‌شوند.

پنجره Document بخشی از رابط Dream weaver.

است که غالبا در کار خود از آن استفاده می‌کنید.

نوار ابزار Document در بالای پنجره Document ظاهر می‌شود.

نوار ابزار Document نوار ابزار Document (شکل 14-1) امکان دستیابی سریع به فرمان های مهم را فراهم می‌کند سه دکمه سمت چپ نوار ابزار Document تغییر وضعیت بین نمای Code و نمای Design را امکان پذیر Design و 20% باقیمانده را از نمای Code ونمای تقسیم استفاده می‌کنیم.

نمای تقسیم نشان می‌دهد هر دو نمای Design , Code مفید هستند وخصوصا وقتی HTML را یاد می‌گیرید.

زیرا به شما امکان می‌دهد تا تگهایی را که Dream weaver.

در حین ایجاد صفحه وب اضافه می کند ببینید.

شکل 14-1 نوار ابزار Document حاوی فرمان هایی است که معمولا در حین ویرایش در شکل 14-1 Dream weaver به صفحات وب اعمال می‌شوند.

کادر متنی در نوار ابزار Dream weaver جایی است که عنوانی را برای صفحه وب در نظر بگیرید (عنوان پیش فرض UntiHed Document چندان جالب نیست!

) این عنوان صفحه وب را در نوار عنوان مرورگر کاربرظاهر می‌شود البته وقتی کاربر صفحه را مشاهده می‌کند.

هم چنین در لیست Bookmarks یا Favorites مرورگر به عنوان نام صفحه وب ذخیره می‌شود بنابراین بایدمعنی دار باشد.

در نوار ابزار، شش منوی بازشو وجود دارند که عبارتنداز: منوی No Browser /Check Errors به شما امکان می‌دهد تا صفحه وبی را که در حال حاضر در مرورگرهای مختلف کار می‌کند بررسی کنید.

منوی Validate Markup امکان مشاهده کدی را که به طور کامل نوشته شده فراهم می‌کند.

منوی File Management فرمان‌هایی نظیر آن هایی را که به دریافت فایل‌ها از سرور وب و ارسال به آن مربوط می‌شوند، لیست می‌کند.

منوی Preview / Debug in Browser امکان دستیابی سریع به لیست مرورگرهایی را فراهم می‌کند که برای انجام عمل پیش نمایش صفحات وب استفاده خواهید کرد.

منوی View Options برحسب این نمای Design باز است یا Code تغییر می‌یابد.

هنگامی که درنمای Design هستید این منو فرمان‌هایی را که در منوی View Dream weaver.

هستند نمایش می‌دهد نظیر‌‌آنهایی که به نمایش محتوای عنوان یا خط ‌کش‌ها مربوط می‌شوند.

هنگامی که درنمای Code هستید، منوی View Options حاوی فرمانی‌هایی است که نحوه نمایش کد را تحت تأثیر قرار می‌دهند نظیر Line Numbers , Word Wrap .

منوی Visual Aids فقط درحالت Design فعال است .

این منو فعال و غیر فعال کردن تمام وسایل بصری را امکان‌پذیر می‌سازد که از طریق اجرای فرمان View , Visual Aids قابل دسترسی است.

نوار ابزار Document در کجا قرار دارد؟

اگر نوار ابزار Document قابل رؤیت نیست ، فرمان View , Toolbars , Document را اجرا کنید نوار ابزار Document حاوی دکمه Refresh Design View است.

هنگام ویرایش کد ( درنمای ‍Code یا نمای صفحه نمایش تقسیم شده) .

این دکمه نمای Design رانوسازی می‌کند به طوری که می‌توانید تغییرات ایجاد شده در کد را بلافاصله ببینید.

این دکمه فقط هنگام مشاهده پنجره Document درنمای Code یا Split فعال است.

نوار وضعیت پنجره Document Dream weaver دارای یک نوار وضعیت است که در پایین صفحه قرار دارد .

این نوار حاوی انتخاب گرتگ.

منوی باز شوی Window Size ابزارهای انتخاب و بزرگ‌نمای آمار download است (شکل 15-1) 8 Dream weaver این ابزارهای سودمند را برای کمک به شما ارایه می‌ دهد تا در طراحی وب موفق شده وتجربه خوبی به دست آورید.

شکل 15-1 نوار وضعیت حاوی ابزارهایی است که در کسب اطلاعات درباره صفحه وب به شما کمک می‌کنند.

انتخاب گرتگ در گوشته چپ پایین پنجره Document امکان دستیابی آسان به تگ های HTML راکه درهر شیء روی صفحه نمایش وجود دارند فراهم می کند.

مثلا اگر مکان‌نما در یک سلول جدول قرار گیرد انتخاب گرتگ، انتخاب هر یک از تگ های HTML راکه شیء را کنترل می‌کند،‌امکان پذیر می‌سازد تگی که اخیراً‌انتخاب شده به صورت bold نشان داده می‌شود.

تگ‌های سمت چپ تگ انتخاب شده تگ‌هایی هستند که اطراف تگ انتخاب شده را می‌پوشانند.

ایجاد صفحه جدید و افزودن متن برای ایجاد یک صفحه وب جدید فرمان File , New را اجرا کنید کادر محاوره‌ای New Document ظاهر می‌شود که امکان انتخاب نوع سند موردنظر را فراهم می کند.

اطمینان یابید که برگه General در کادر محاوره‌ای New Document انتخاب شده است.

ستون Category و ستونی که صفحات موجود دردسته انتخاب شده را لیست می‌کند، سازمان دهی می‌شود.

دسته Basic Page را انتخاب کرده و سپس HTML را به عنوان نوع Basic Page انتخاب کنید.(شکل 16-1) روی دکمه Create کلیک کنید.

سند جدیدی ایجاد می‌شود ومی‌توانید متن تصاویر و اشیای دیگری را به آن اضافه کنید.

شکل 16-1 کادر محاوره‌ای New Document به شما امکان می‌دهد تا نوع سند موردنظر خود را انتخاب کنید.

بنابراین میانبر صفه کلید برای باز کردن کادر محاوره‌ای New Document +Ctrl است (در مکینتاش Command +N) هم چنین می‌توانید صفحه جدیدی از Dream weavers Start Page ایجاد کنید (صفحه نمایشی را که پس از باز شدن Dream weavers برای اولین بار در پنجره Document قابل رؤیت است.

به خاطر دارید؟) ستون وسط در Star Page دارای عنوان Create New است و می‌توانید HTML را در ستون وسط انتخاب کنید تا صفحه وبی به سرعت ایجاد شود.

برای وارد کردن متن به صفحه وب جدیدی که ایجاد کرده‌اید، می‌توانید در پنجره Document تایپ کیند .

مقداری متن برای عنوان در بالای صفحه تایپ کرده، کلید Enter را فشار دهید و چند جمله تایپ کنید.

این بهترین راه برای افزودن متن به صفحه وبی است که درهمان لحظه آن را ایجاد می‌کنید.

اگر متن در جای دیگری وجود دارد نظیر سند Microsoft Word پست الکترونیکی یا نوع دیگری از فایل متنی، به بخش بعدی که در موردکپی کردن و چسباندن متن در Dream weavers است، نگاهی بیندازید.

کپی کردن و چسباندن متن از فایل غالبا باید متنی را که به صورت سند واژه‌پرداز وجود دارد به صفحه وب انتقال دهید می‌توانید متنی را از برنامه دیگری نظیر Microsoft Word یا حتی برنامه صفحه گسترده Microsoft Excel به راحتی کپی کرده و آن را در Dream weavers بچسابند.

Dream weavers می‌تواند متن را به دو روش بچسباند :‌با فرمت‌بندی متن و بدون فرمت‌بندی متن.

فرمت‌بندی (مثلا فونت، رنگ فونت، و اندازه فونت) درصفحه وب با فرمت‌بندی در سند اصلی متفاوتاست بنابراین معمولا بدون فرمت‌ندی این کار را انجام می‌دهم.

برای کپی کردن و چسباندن متن از یک برنامه واژه‌پرداز یا برنامه دیگری، مراحل زیر را انجام دهید: سند (doc) Word یا سند واژه‌پرداز دیگری را باز کنید.

حداقل دوپاراگراف را انتخاب کنید.

با اجرای فرمان Edit , Copy با استفاده از فرمان صفحه کلید Ctrl +C متن را کپی کنید.

به Dream weavers بروید و نقطه درج را در جای مورد نظر قرار دهید تا متن در آن جا بچسبد.

فرمان Edit , Paste را اجرا کرده یا از میانبر صفحه کلید Crrl +V استفاده کنید.

متن در Dream weavers چسبانده می‌شود و فرمت‌بندی آن از جمله فونت‌ها ،‌ پاراگراف ها، رنگ و سایر صفات به همان صورت باقی می‌مانند.

اگر از این فرمت‌بندی خوشتان نمی‌آید ،‌فرمان Edit , Undo را اجرا کنید .

Ctrl +Z تا متن چسبانده شده حذف شود.

برای چسباندن متن بدون فرمت‌بندی ، فرمان Edit , Page Special را اجرا کرده و یکی از گزینه‌های Paste Special را انتخاب کنید.

(شکل 2-3) دراین صورت برآنچه در صفحه وب چسبانده شده کنترل بهتری خواهید داشت.

شکل 17-1 کادر محاوره‌ای Paste Special به شما امکان می دهد تا خصوصیات فرمت‌بندی را که به همراه متن در Dream weavers چسبانده شده انتخاب کنید.

اعمال کردن فرمت بندی متن Property inspector پانلی است که در زیر پنجره Document قرار دارد.

از این پانل برای تنظیم خصوصیات اشیای روی صفحه وب استفاده خواهید کرد.

می‌توانید property inspector را با اجرای فرمان Window , Properties نمایش دهید.

با استفاده از منوی باز شوی Format در property inspector فرمت بندی HTML استانداری را به متن اعمال کنید.

چهار گزینه اصلی فرمت‌بندی عبارتند از: None ـ این گزینه تمام شیوه‌های فرمت‌بندی را که اخیراً به انتخاب اعمال شده اند، حذف می‌کند.

Paragraph ـ‌این گزینه تگ‌های پاراگراف () را به انتخاب اعمال کرده و دو برگشت به سر خط را بعد از انتخاب اضافه می‌کند.

Heading 1 تا Heading 6 این گزینه‌ها تگ‌های عنوان را به انتخاب اعمال می‌کنند.

Heading 1 بزرگترین عنوان و Heading 6 کوچک‌ترین عنوان، هر چیزی درآن خط به اندازه عنوان در می‌آید.

Preformatted این گزینه متن را با عرض مناسب یا فونت تگ فاصله‌ای ( در اکثر سیستم‌ها، Courier 10 پوینتی) نمایش می‌دهد متن مزبور شبیه متن typewriter است.

احتمالا از این گزینه استفاده نخواهید کرد.

عنوان خط بالای صفحه وب را انتخاب کرده و فرمت‌بندی Heading 1 را اعمال کنید.

( شکل 17-1) در حین ایجاد صفحات وب از فرمت های Heading مختلف و فرمت paragraph استفاده خواهید کرد.

این گزینه های فرمت‌بندی متن انتخاب شده را با تگ های HTML سطربندی می‌کنند.

مثلا فرمت Heading 1 تگ را قبل از انتخاب وتگ بسته را بعد از انتخاب اضافه می‌کند.

شکل 18-1 منوی بازشوی format در property inspector عنوان پاراگراف و فرمت بندی از پیش فرمت بندی شده را به متن اعمال می‌کند.

آشنایی با تگ‌های پاراگراف تگ‌های break بهتر است تفاوت بین تگ‌های پاراگراف ( break , () را بدانید تگ‌های پارگراف بلوک متن را احاطه می‌کند.

در نتیجه دو برگشت به سر خط بعد از بلوک قرار می‌گیرد.

با فشار دادن کلید Enterد یا Return پارگراف جدیدی ایجاد کنید.

هنگام ایجاد کانتینری برای بلوک متن، از تگ‌های پاراگراف استفاده کنید.

این کانتینر بلوک مربعی شکلی است که حاوی متن است.

تگ break یک برگشت به سرخط را در متن درج می کند.

می‌توانید با استفاده ازمیانبر صفحه کلیدی Shift + Enter یا انتخاب شی‌ء Line Break از منوی بازشوی Characters در دسته Text نوار Insert break رادر صفحه وب درج کنید.تگ break همانند فرمت پاراگراف است نظیر فرمت‌بندی آدرسی در خطوط مختلف.

باید تفاوت بین تگ‌های پاراگراف و break را بدانید.

دوبار فشار دادن کلیدهای Shift + Enter با درج دو شکست خط به جای فشار دادن کلید Enter برای ایجاد پارگراف درصفحه وب یکسان به نظر می‌رسد.

به هر حال از آنجایی که کانتیتر پاراگراف را ایجد نکرده‌اید.

هر فرمت‌بندی به پارگراف اعمال شده به کل کانتینر نیز اعمال می‌شود.

در حین فرمت‌بندی بخش های صفحات وب به روش های مختلف این موضوع از اهمیت بیشتری برخوردار است.

تنظیم خصوصیات صفحه می‌توانید خصوصیات صفحه سراسری نظیر فونت پیش فرض و اندازه فونت را برای تمام متن روی صفحه تنظیم کنید.

علاوه بر این ، می‌توانید عنوان صفحه را در خصوصیات صفحه تنظیم کنید برای شروع فرمان Modify , page properties را اجرا کنید تا کادر محاوره‌ای page properties باز شود.

کادر محاوره‌ای page properties (شکل 19-1) دارای پنج دسته خصوصیت است که در ستون سمت چپ لیست شده‌اند: Tracing, Image , Title / Encoding, Headings, Links, Appearance بعدا درباره تنظیمات خصوصیت دردسته‌های Title / Encoding, Headings, Links, Appearance مطالب بیشتری می‌آموزید.

فقط کافیست روی یکی از دسته‌ها کلیک کنید تا تنظیمات خصوصیت آن اصلاح شوند.

شکل 19-1 کادر محاوره‌ای page properties امکان تنظیم خصوصیات کل صفحه وب را فراهم می‌کند.

تنظیم اندازه و فونت صفحه سراسری دسته Appearance را در کادر محاوره‌ای Page properties با کلیک کردن روی نام دسته در سمت چپ کادر محاوره ای مزبور انتخاب کنید.

می‌توانید page Font پیش فرض را برای کل صفحه به همراه رنگ واندازه متن پیش‌فرض انتخاب کنید.

ممکن است این تنظیمات توسط هرگونه تنظیم متن محلی لغو شوند.

نظیر تنظیماتی که بعداً در همین فصل اعمال خواهید کرد.

برای تنظیم خصوصیات فونت پیش‌فرض مراحل زیر را انجام دهید: 1- در کادر محاوره‌ای Page properties خانواده فونت مورد نظر را از منوی بازشوی page Font را انتخاب کنید.

2- می‌توانید متن پیش فرض را طوری تنظیم کنید تا به صورت bold کج یا هرد دو باشد.

3- اندازه فونت را در منوی بازشوی Size انتخاب کنید.

در صورت انتخاب یک اندازه فونت عددی، باید یک نوع واحد نظیر پونیت یا پیکس را انتخاب کنید.

4- روی دکمه Apply در پایین کادر محاوره ای Page properties کلیک کنید تا تغییراتی را که تا کنون در فونت ایجاد شده ببینید، شاید مجبور شوید مکان کادر محاوره‌ای Page properties را طوری تنظیم کنید تا نمای شما بلوکه نشود.

دکمه Apply به شما امکان می‌دهد تا تغییرات را بدون بستن کادر محاوره ای Page properties ببینید.

آیا می‌دانید ؟

از پیکسل‌ها به جای پوینت ها استفاده کنید.

اکثر طراحان وب ترجیح میدهند تا با استفاده از پیکسل‌ها به عنوان واحد اندازه گیری برای اندازه‌های فونت (و سایر اشیا) استانـدارد سازی کنند.

پویـنت‌ها برای طـراحی متن و چـاپ آن استفاده می‌شوند ولی غالبا برای نمایش کامپیوتر غیر قابل پیش‌بینی هستند.

پیکسل‌ها در مرورگر ها و سیستم عامل های مختلف قابل پیش‌بینی تر به نظر می‌رسند.

در صورت برنامه‌نویسی در ویندوز با مکینتاش ، بهتر است فونت ها شبیه سایر سیستم‌ عامل ها باشند.

پس از پیکسل‌ها به عنون واحد اندازه‌گیری فونت ها استفاده کنید.

تنظیم رنگ متن سراسری در تعدادی از نواحی Dream weavers می‌توانید رنگ شیء یا متن را تغییر دهید.

در HTML رنگ‌ها با استفاده از سیستم شماره‌گذاری هگزاد سیمال ( شانزده شانزدهی) تعیین می‌شوند ولی اگرترجمه هگزادسیمال رنگ مورد نظر خود را نمی‌دانید،‌ می‌توانید از انتخابگر رنگ Dream weavers استفاده کنید با کلیک کردن روی کادر انتخابگر رنگ (شکل 20-1) به انتخابگر رنگ Dream weavers دسترسی می‌یابید.

در این صورت پالت رنگ Dream weavers ظاهر می‌شود.

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

شکل20-1 برای باز شدن پالت رنگ Dream weavers انتخابگر رنگ را انتخاب کنید.

به طور پیش‌فرض پالت Color Cubes نمایش داده می‌شود می‌توانید یکی از پنج پانل دیگر یعنی Grayscale , Mac OS , Windows Os , Continuous tone , Color cubes راانتخاب کنید.

از قطره چکان برای انتخاب هر رنگی از روی صفحه نمایش استفاده کنید.

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

دکمه System Color Picker را انتخاب کنید تا یک رنگ اختصاصای همانند شکل 21-1 ایجاد شود.

بدین ترتیب انتخابگر رنگ سیستم باز می‌شود جایی که می‌توان یکی از رنگ‌های اصلی راانتخاب کرد یا روی جایی در طیف رنگ کلیک کرد تا رنگ مورد نظر ترکیب شود.

نخست روی دکمه Add to Custom Colors و سپس روی دکمه Ok کلیک کرده و از رنگ مزبور استفاده کنید.

شکل 21-1 system Color Picker امکان ترکیب رنگ‌های اختصاصی را در ویندوز (سمت چپ) یا Macintosh OSX ( سمت راست) فراهم می‌کند.

همچنین می‌توانید اطلاعات رنگ را مستقیما در کادر متنی رنگ در property inspector تایپ کنید: رنگ‌ها در HTML با سه عد هگزاد سیمال که بعداز علامت پوند (#) قرار دارند، نشان داده می شوند مثلا مقدار RGB ( قرمز ، سبز، آبی).

هگزادسیمال برای رنگ آبی روشن به صورت 0099ff # نشان داده می‌شود.

جایی که مقدار R 00 و مقدار 99 , G و مقدار ff , B است.

اگر مقدار هگزادسیمال رنگ را می‌دانید ، می‌توانید آن را تایپ کنید.

اکثر مرورگرها اسامی رنگ استاندارد را به همراه مقادیر هگزادسیمال نمایش می‌دهد.

مثلا،‌می‌توانید red را به جای ff0000 # تایپ کنید برای پاک کردن رنگ جاری بدون انتخاب رنگ دیگری روی دکمه Default Color در انتخابگر رنگ کلیک کنید.

تنظیم رنگ پس زمینه و تصویر پس زمینه صفحه وب می توانید رنگ پس زمینه کل صفحه را در دسته Appearance کادر محاوره‌ای page properties تنظیم کنید، مثلا در صورت تمایل به تنظیم رنگ پس‌زمینه صفحه وب با سفید، می‌توانید کد رنگ هگزادسیمال (FFFFF#) رادر کادر متنی Background وارد کنید واژه white را در کادر تایپ کرده و از انتخابگر رنگ استفاده کنید.

البته می‌توانید هر رنگی را به عنوان رنگ پس زمینه انتخاب کنید.

ولی اطمینان یابید که ترتیب رنگ پس زمینه و رنگ متن،‌ خواندن صفحه وب را دشوار نمی‌کند.

در صورت اعمال یک رنگ پس زمینه تیره،‌باید از یک رنگ متن روشن برای کنترل است استفاده کنید تا ببیننده بتواند متن را به راحتی بخواند.

می توانید تصویر پس زمینه را برای صفحه وب تنظیم کنید.

این تصویر به طور افقی و عمودی در صفحه قطعه‌بندی می‌شود.

برای این که پس زمینه صفحه وب خوب به نظر برسد، باید تصویری را که مخصوص پس زمینه صفحه وب طراحی شده پیدا کرده یا ایجاد کنید.

می‌توانید این تصاویر پس زمینه طراحی شده را در وب یا گالری‌های عکسی که خریداری کرده‌اید، بیابید.

تصویر پس زمینه هرگز نباید با قابلیت خوانایی صفحه تداخل پیدا کند.

برای افزودن تصویر پس زمینه دکمه Browse را انتخاب کرده و به فایل تصویری که در هارد درایو ذخیره شده بروید.

تصویر باید به فرمت های JPEG , GIF یا PNG ذخیره شود.

روی دکمه OK کلیک کنید .

ممکن است پیامی از Dream weavers دریافت کنید که مسیر file=11 مورداستفاده قرار خواد گرفت تا زمانی که سند ذخیره شود.

فقط کافیست روی دکمه OK کلیک کنید در این صورت Dream weavers پس از ذخیره صفحه وب به طور خودکار آن مسیر را درست می‌کند.

تنظیم حاشیه‌های صفحه حاشیه ها میزان فاصله بین محتویات صفحه وب و لبه‌های پنجره مرورگر را تنظیم می‌کنند.

حاشیه‌های صفحه را در کادر محاوره‌ای page properties تنظیم کنید.

تنظیم پیش فرض حاشیه‌های صفحه از یک مرورگر به مرورگر دیگر تغییر می یابد.

بنابراین ، پیش بینی میزان فضای سفید قابل رؤیت اطراف حاشیه طرح صفحه وب غیر ممکن است.

می توانید حاشیه‌های صفحه ر ابا وارد کردن مقادیری در کادرهای حاشیه تغییر دهید (شکل 22-1) چهار تنظیم برای حاشیه صفحه وجود دارد که عبارتنداز : Left , Bottom Margin , Right Margin , Top Margin , Margin اکثر طراحان وب تنظیمات Left Margin و Top Margin را با صفر پیکسل تنظیم می‌کنند بنابراین طرح گوشه چپ بالا در پنجره مرورگر می چسبد.

تنظیم خصوصیات عنوان سراسری باانتخاب یکی از فرمت‌های عنوان Heading 1) تا Heading ) درمنوی بازشوی Format در Dream weaver's property inspector یک Heading ایجاد کنید در دسته Heading کاد رمحاوره ای page properties می‌توانید خصوصیات سراسری این عناوین را تنظیم کنید (شکل 23-1) می‌توانید یک Heading Font برای شش اندازه عنوان انتخاب کنید.

هم چنین می توانید رنگ و اندازه فونت منحصر به فردی برای هر یک از اندازه‌های عنوان تنظیم کنید.

شکل 22-1 حاشیه‌های صفحه ، فضای بین طرح صفحه وب و لبه پنجره مرورگر را در دسته Appearance ددر Page Properties تنظیم کنید.

برای تنظیم ظاهر Heading 1 مراحل زیر را انجام دهید: اگر page properties باز نیست،‌فرمان Modify , Page Properties را اجرا کنید درحال حاضر باید مقداری از متن روی صفحه با Heading 1 تنظیم شده باشد.

باانتخاب یکی از فونت‌ها کنار تنظیم فونت Heading فونت پیش فرضی را برای تمام عناوین انتخاب کنید در صورت تمایل ، می‌توانید دکمه Bold یا Italic رانیز انتخاب کنید.

اندازه فونت بزرگ کنار Heading 1 را انتخاب کنید .

اندازه مناسب 36 پیکسل است.

می‌توانید با کلیک کردن روی انتخابگر رنگ در تنظیمات Heading 1 رنگ را تغییر دهید.

روی دکمه Apply کلیک کنید (شکل 19-1) تا بدون بستن کادر محاوره‌ای page properties تغییرات اعمال شوند.

شکل 23-1 خصوصیات عنوان سراسری را در دسته Heading کادر محاره‌ای page properties تنظیم کنید.

می‌توانید فونت تمام اندازه‌های عنوان را تنظیم کرده وسپس اندازه‌های فونت را برای هر یک به طور جداگانه مشخص کنید.

افزودن عنوان صفحه دسته Title/Encoding کادر محاوره‌ای page properties به شما امکان می‌دهد تا عنوان سند صفحه وب را به همراه Document and Encoding Types تنظیم کنید.

عنوان صفحه وب حایز اهمیت است زیرا در نوار عنوان مرورگر ظاهر می‌شود.

این همان عنوانی است که وقتی کاربر آدرس سایت خود را ذخیره می‌کند، درلیست Bookmarks , Favorites مرورگر وب ذخیره می‌شود.

از این روی باید معنی‌دار و چشمگیر باشد.

برای افزودن عنوان به سند مراحل زیر را انجام دهید: 1- اگر کادر محاوره‌ای page properties باز نیست فرمان Modify , page properties را اجرا کنید.

2- دسته Title/Encoding را انتخاب کنید.

3- یک عنوان توصیفی در کادر عنوان بالای کارد محاوره‌ای page properties تایپ کنید.

4- روی دکمه OK کلیک کنید تا تنظیم ذخیره شوند.

عنوان صفحه کادر متنیDocument در نوار ابزار Document ظاهر می‌شود ( شکل 24-1) به جای باز کردن کادر محاوره‌ای page properties می‌توانید عنوان را در این کادر متنی اضافه کنید.

Dream weavers به طور خودکار یک تگ (<>) به بالای هرصفحه وبی که نوع سند را برای مرورگر توصیف می‌کند، اضافه خواهد کرد.

این تگ HTML را که صفحه وب در آن نوشته شده به مرورگر اعلام کرده و در تفسیر کردن صفحه مزبور به آن کمک می کند.

به طور پیش‌فرض Dream weavers نوع سند CHFML 1.0 Transitional را اعمال می‌کند که انتخاب خوبی است زیرا XHTML استانداردی رو به ترقی ونگارش جدید XHTML است که امکان مشاهده صفحه وب را در مرورگرهای قدیمی تر فراهم می‌کند.

XHTML در XML (زبان نشانه‌گذاری توسعه پذیر) نوشته شده وایجاد صفحات وبی را برای نسل بعد وب سایت ها اماده‌اند امکان پذیر می سازد که در مرورگرها ودستگاههای دیگر نظیر TV ها یا تلفن‌های سلولی قابل مشاهده هستند.

شکل 24-1 عنوان سند در کادرمتنی Document Tutle ظاهر می‌شود.

البته پس از وارد کردن آن در کادر محاوره‌ای page properties.

الفبای مختلفی وجوددارند.

با استفاده از فرمان Encoding الفبای مورد استفاده در صفحه وب خود را به مرورگر وب اعلام کنید.

به‌طور پیش فرض Dream weavers نوع رمز گذاری Western European را که در ایالت متحده و اروپا استفاده شده لیست می‌کند.

در صورت ایجاد صفحه‌ای با استفاده از یک نوع الفبای دیگر، باید تنظیم Encoding را تغییر دهید.

می‌توانید نوع رمزگذاری پیش فرض Dream weavers را در دسته New Document درکادر محاوره‌ای preferences تغییر دهید (با اجرای فرمان Edit , preferences ).