• Dreamweaver و Accessibility. قابلیت بررسی دسترسی در Dreamweaver

    دسترسی به ایجاد وب سایت ها و محصولات تحت وب است که می تواند توسط افراد دارای ناتوانی های بینایی، شنوایی، اسکلتی عضلانی و سایر ناتوانی های جسمی استفاده شود.

    پشتیبانی از قابلیت دسترسی در سیستم عامل

    Dreamweaver از ویژگی های دسترسی در سیستم عامل های ویندوز و مکینتاش پشتیبانی می کند. به عنوان مثال، در سیستم عامل مکینتاش، می توانید تنظیمات بصری را در کادر گفتگوی تنظیمات دسترسی جهانی (Apple > System Preferences) تنظیم کنید. تنظیماتی که مشخص می کنید در فضای کاری Dreamweaver منعکس می شوند.

    تنظیم کنتراست بالا موجود در ویندوز نیز پشتیبانی می شود. این گزینه را می توان در کنترل پنل ویندوز فعال کرد. برای اجزای Dreamweaver، این تنظیم دارای اثر زیر است.

      جعبه های گفتگو و پانل ها از تنظیمات رنگ سیستم استفاده می کنند. به عنوان مثال، اگر رنگ را روی رنگ سیاه روی سفید تنظیم کنید، تمام دیالوگ ها و پنل های Dreamweaver دارای متن سفید و پس زمینه سیاه خواهند بود.

      نمای کد از رنگ متن سیستم و رنگ متن پنجره استفاده می کند. به عنوان مثال، اگر رنگ سیستم را روی آبی روی سفید قرار دهید و سپس رنگ های متن را از طریق Edit > Preferences > Code Colors تغییر دهید، Dreamweaver این تنظیمات را نادیده می گیرد و متن کد را به صورت کاراکترهای سفید در پس زمینه سیاه نمایش می دهد.

      ناحیه Design از رنگ های متن و پس زمینه با استفاده از دستورات Modify > Page Properties استفاده می کند. به این ترتیب رنگ ها در صفحات ایجاد شده همانند مرورگر نمایش داده می شوند.

    بهینه سازی فضای کاری برای طراحی صفحات در دسترس

    هنگام ایجاد صفحات قابل دسترسی، باید اطلاعاتی مانند برچسب ها و توضیحات را با اشیاء موجود در صفحه مرتبط کنید تا محتوا برای همه کاربران قابل دسترسی باشد.

    برای انجام این کار، گفتگوی Accessibility را برای هر شیء فعال کنید و Dreamweaver از شما می خواهد که هنگام درج اشیا، اطلاعات دسترسی را وارد کنید. کادر محاوره ای را می توان برای هر شیئی در دسته Accessibility در پنجره تنظیمات فعال کرد.

    1. Edit > Preferences (Windows) یا Dreamweaver > Preferences (Macintosh) را انتخاب کنید.
    2. از لیست Category در سمت چپ، Accessibility را انتخاب کنید، یک شی را انتخاب کنید، یکی از گزینه های زیر را تنظیم کنید و سپس روی OK کلیک کنید. نمایش ویژگی ها روی چسباشیایی را که می خواهید کادرهای گفتگوی دسترسی را برای آنها فعال کنید انتخاب کنید. به عنوان مثال، اشیاء، فریم ها، رسانه ها و تصاویر را تشکیل دهید. پانل را هنگام باز کردن فعال نگه داریدبه شما امکان می دهد موقعیت فوکوس را روی پانل ذخیره کنید تا صفحه خوان شما بتواند کار کند. (اگر این گزینه انتخاب نشده باشد، هنگامی که پانل باز می شود، فوکوس در نمای طراحی یا نمای کد باقی می ماند.) ساخت تصاویر خارج از صفحه نمایشهنگام استفاده از صفحه خوان این گزینه را انتخاب کنید.

      توجه داشته باشید.هنگامی که جدول جدیدی را وارد می‌کنید، ویژگی‌های دسترس‌پذیری در کادر محاوره‌ای Insert Table ظاهر می‌شوند.

    قابلیت بررسی دسترسی در Dreamweaver

    با شروع Dreamweaver CS5، ویژگی بررسی دسترسی Dreamweaver منسوخ شده است.

    پیمایش Dreamweaver با استفاده از صفحه کلید

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

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

    ناوبری پنل

    1. در حالی که در پنجره سند هستید، کلیدهای "Ctrl" و "F6" را فشار دهید تا فوکوس به پانل منتقل شود.

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

    2. همزمان کلیدهای "Ctrl" و "F6" را فشار دهید تا فوکوس به پانل مورد نیاز منتقل شود. (برای معکوس کردن بین پانل ها، کلیدهای Ctrl، Shift و F6 را به طور همزمان فشار دهید.)
    3. اگر پنل مورد نظر شما بسته است، از میانبر صفحه کلید در منوی ویندوز برای نمایش این پنل استفاده کنید و سپس همزمان "Control" و "F6" را فشار دهید.

      اگر پانل مورد نظر باز است اما حداکثر نشده است، فوکوس را به عنوان پانل منتقل کرده و Spacebar را فشار دهید. برای جمع کردن آن، دوباره کلید Space را فشار دهید.

    4. از کلید Tab برای پیمایش در میان کنترل های پانل استفاده کنید.
    5. از کلیدهای جهت نما در موارد زیر استفاده می شود.
      • اگر کنترل دارای گزینه‌هایی است، از کلیدهای جهت‌نما برای حرکت بین گزینه‌ها و نوار فاصله برای انتخاب مقدار استفاده کنید.
      • اگر پانل دارای برگه هایی است که پانل های دیگر را باز می کند، روی برگه باز تمرکز کنید و از کلید فلش چپ یا راست جهت باز کردن تب مورد نظر استفاده کنید. پس از باز کردن یک برگه، می توانید با استفاده از کلید Tab در میان کنترل های آن حرکت کنید.

    پیمایش بازرس املاک

    1. برای نمایش Property Inspector، Ctrl + F3 را فشار دهید.
    2. Ctrl + F6 (فقط ویندوز) را فشار دهید تا فوکوس به بازرس Property منتقل شود.
    3. از کلید Tab برای پیمایش در میان کنترل‌های بازرس خواص استفاده کنید.
    4. برای جابجایی بین گزینه های انتخابی از کلیدهای جهت دار استفاده می شود.
    5. کلیدهای Ctrl + فلش پایین/بالا (ویندوز) یا Command + فلش پایین/بالا (Macintosh) را فشار دهید تا بخش باز شده Property inspector در صورت نیاز باز یا بسته شود، یا فلش گسترش را به گوشه سمت راست پایین ببرید و Spacebar را فشار دهید. .

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

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

    اسناد مشابه

      زبان نشانه گذاری HTML برای صفحات فرامتن. اطمینان از در دسترس بودن صفحه وب، ارائه متن و گرافیک. قوانین اساسی و مراحل ایجاد سایت، انتخاب ساختار صفحه. ارزیابی امکان سنجی اقتصادی استفاده از ویرایشگرهای HTML.

      پایان نامه، اضافه شده در 2013/03/25

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

      مقاله ترم، اضافه شده 06/12/2009

      بررسی نظری مشکل ایجاد وب سایت "تعارضات در سازمان". تجزیه و تحلیل منابع اطلاعاتی و خدمات. ویژگی های روش های مطالعه تعارضات در سازمان ها. بسته نرم افزاری Macromedia Dreamweaver برای ایجاد وب سایت.

      پایان نامه، اضافه شده در 2015/06/22

      کار با ویرایشگر HTML Adobe Dreamweaver. مراحل و قوانین ساخت صفحه اصلی سایت، قالب بندی صفحات HTML، ایجاد لینک های فرامتن، ایجاد و قالب بندی جداول. استفاده از مواد گرافیکی در توسعه سایت.

      راهنمای آموزشی، اضافه شده در 2011/07/06

      ویژگی های عمومی زبان نشانه گذاری فرامتن. ساختار سند HTML مروری بر ویژگی های اصلی HTML. عناصر طراحی مدرن صفحات وب تجزیه و تحلیل کاربرد عملی HTML (به عنوان مثال از برنامه های آموزشی).

      مقاله ترم، اضافه شده در 2012/11/24

      مروری بر برنامه های ایجاد صفحات وب. تحلیل مقایسه ای Macromedia Dreamweaver و صفحه اول. فرآیند ایجاد یک سایت مدرن؛ ارزیابی امکان سنجی اقتصادی استفاده از کامپیوتر ایمنی شغلی اپراتور تایپ و چیدمان رایانه.

      پایان نامه، اضافه شده 07/07/2010

      در نظر گرفتن ویرایشگر HTML بصری Dreamweaver. تعیین ساختار سایت LLC "Fast Studio". محتویات صفحات "اصلی"، "پورتفولیو"، "مخاطبین". برچسب های قالب بندی متن و نحوه استایل دادن به آن با استفاده از افزونه های CSS.

      مقاله ترم، اضافه شده در 2013/08/18

      ویژگی های ویرایشگر DreamWeaver و صفحه اول. ویژگی های زبان های برنامه نویسی PHP و جاوا اسکریپت. الزامات اساسی برای یک صفحه وب مشخصات نرم افزار برای ایجاد و کارایی استفاده از آن.

      مقاله ترم، اضافه شده 02/03/2011

    محیط حرفه ای قدرتمند Dreamweaver دارای تمام ابزارهای لازم برای تولید صفحات HTML با هر پیچیدگی و مقیاسی است. این یک حالت طراحی بصری را ارائه می دهد (WYSIWYG یا What You See Is What You Get - "آنچه می بینید همان چیزی است که دریافت می کنید")، دارای یک کار بسیار تمیز با متن منبع اسناد وب است و دارای پشتیبانی داخلی برای شبکه های بزرگ است. پروژه ها. هیچ یک از ویرایشگرهایی که امروزه وجود دارند مفهوم WYSIWYG را به طور کامل پیاده سازی نکرده اند. Dreamweaver بیش از رقبای خود به ایده آل اعلام شده نزدیک شد. کار مستقیم با کدها کاملاً مستثنی نیست، اما به حداقل معقول کاهش می یابد. این برنامه نه تنها دارای زرادخانه قدرتمندی از ابزارهای طراحی بصری است، بلکه قادر است صفحات وب را تقریباً مانند بینندگان تخصصی نمایش دهد: Microsoft Internet Explorer یا Netscape Navigator.

    Macromedia Dreamweaver MX یکی از قدرتمندترین برنامه هایی است که از تمام استانداردهای مدرن اینترنت پشتیبانی می کند و حتی پیچیده ترین کارها را نیز فوق العاده آسان می کند. علاوه بر این، شامل یک سیستم توسعه یافته از نکات و درس های تعاملی است که به کاربر تازه کار اجازه می دهد تا به سرعت شروع به کار کند.

    رابط کاربری برنامه نسبت به نسخه های قبلی تغییر کرده است. سبک جدید کار با برنامه را بسیار آسان می کند. اگر در نسخه های قبلی برنامه مجبور بودید به طور مداوم بین ویندوز سوئیچ کنید، اکنون می توانید همزمان با کد و با نمای نهایی سایت کار کنید که کار را بسیار ساده می کند.

    هنگام بارگیری Dreamweaver، یک پنجره شروع ظاهر می شود (شکل 1) که به شما امکان می دهد نوع سند جدید در حال ایجاد (HTML، ColdFusion، PHP و غیره) را انتخاب کنید، یا یک سند با استفاده از نمونه های آماده ایجاد کنید (CSS Style Sheets) ، مجموعه فریم ها و غیره)، و همچنین اسنادی که اخیراً استفاده شده اند را باز کنید. علاوه بر این، پیوندهایی به منابع آنلاین مانند سایت Dreamweaver MX Exchange، مروری بر نرم افزار Dreamweaver MX و اطلاعات کمکی برای Dreamweaver MX وجود دارد.

    برنج. 1.

    فضای کاری Dreamweaver شامل پنجره ها و پانل های زیر است:

    پنجره سند (شکل 2) که به شما امکان مشاهده و ویرایش کد سند (Code)، مشاهده ظاهر سند آینده (Design) یا هر دو کد و ظاهر (Split) را می دهد. همچنین امکان مشاهده سند در مرورگر اینترنت، بررسی خطاها و غیره وجود دارد.


    برنج. 2.

    منوی کشویی استاندارد (فایل، ویرایش، مشاهده، درج، اصلاح، متن، دستورات، سایت، پنجره، راهنما) (شکل 3).

    برنج. 3. منوی کشویی استاندارد

    · پانل Properties (Properties) (شکل 4) که امکان تغییر و افزودن خصوصیات قطعه کد انتخاب شده را می دهد.


    برنج. 4.

    · درج پنل (درج) (شکل 5)، شامل برگه های زیر: مشترک (پایه) - درج لینک ها، جداول، تصاویر، نظرات، و غیره، و همچنین انتخاب کننده برچسب (انتخاب یک برچسب). Layout (Markup) - استفاده از سلول ها و جداول برای طرح بندی سند قبل از افزودن محتوا. فرم ها (فرم ها) - اضافه کردن انواع مختلف فرم ها. متن (متن) - قالب بندی متن و ویرایشگر برچسب فونت (ویرایشگر برچسب متن). HTML - اضافه کردن یک خط افقی، عناصر جدول، فریم ها، ویژگی های سر، اسکریپت ها. برنامه (برنامه ها) - کار با ساختارهای اطلاعاتی؛ عناصر فلش (عناصر فلش) - اضافه کردن فیلم های فلش، موارد دلخواه (موارد دلخواه) - امکان اضافه کردن اشیاء پرکاربرد به یک برگه جداگانه.

    برنج. 5.

    گروه پنل: طراحی (شامل سبک‌های CSS)، کد (شامل کمک در برچسب‌ها، اشیاء و توابع فن‌آوری‌های مختلف)، برنامه (شامل اطلاعاتی در مورد پایگاه‌های داده، اجزا و غیره)، فایل‌ها (مدیر فایل) (شکل 6).

    برنج. 6. طراحی گروه پنل، کد، برنامه، فایل ها

    بسته نرم افزاری DreamWeaver مانند فرانت پیج برای طراحی سایت های مختلف از جمله سایت های انتشاراتی طراحی شده است که یکی از وظایف آن توزیع نشریات الکترونیکی است. برای وب سایت های کوچک و بسیار بزرگ مناسب است. در مورد اول، توسعه توسط یک متخصص وب مستر انجام می شود. در مورد دوم، یک تیم کامل روی پروژه کار می کند، از جمله مدیر پروژه، طراح وب، طراح طرح بندی HTML، برنامه نویس وب، تصحیح کننده، مدیر پست. بسیاری از کارشناسان می گویند که طراحان وب حرفه ای در کار خود اغلب از Adobe PhotoShop برای تهیه گرافیک و Macromedia DreamWeaver برای طراحی صفحات وب جداگانه استفاده می کنند.

    آشنایی با این بسته نشان می دهد که این بیانیه پایه و اساس محکمی دارد. همانطور که چندین بار انجام شده است، بیایید شروع به کاوش بسته با رابط آن کنیم.

    6.2.1. رابط بسته DreamWeaver

    رابط بسته DreamWeaver 4.0 در شکل نشان داده شده است. 6.9. علاوه بر نوار عنوان، نوار منو، نوار ابزار و پنجره کاری استاندارد برنامه، به وجود چندین پالت اشاره می کنیم که مانند ویرایشگرهای گرافیکی در پنجره کاری برنامه قرار می گیرند. به هر حال، نام سه پالت باز "Objects" (Object)، "Properties" (Properties) و "Load" (Launcher) با سه دستور اول بخش منو "Window" (پنجره) مطابقت دارد.

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

    ابتدا روی پالت Objects تمرکز می کنیم که ظاهر آن در شکل نشان داده شده است. 6.10. ظاهر پالت بسته به نوع شی انتخاب شده در کادر لیست در قسمت بالای آن تغییر می کند، یعنی پالت را می توان تطبیقی ​​نامید. به طور پیش فرض، موقعیت در لیست روی Common تنظیم شده است. روی انجیر 6.10 این گزینه در لیست باز انتخاب شده است. این پالت با استفاده از 18 ابزار مختلف، به شما امکان می دهد عناصر مختلفی را در صفحه قرار دهید، به ویژه (به ترتیب دکمه های موجود در پالت): گرافیک (تصویر)، یک دکمه متحرک (تصویر چرخشی) که ظاهر آن تغییر می کند. وقتی نشانگر ماوس را روی آن حرکت می‌دهید، یک جدول (جدول)، یک جدول با داده‌های وارد شده در آن، از قبل در بسته نرم‌افزاری دیگر (داده‌های جدولی)، یک خط‌کش (قاعده افقی)، یک نوار ناوبری (نوار ناوبری) با دکمه های حرکت در سایت، لایه تصویر جدید (لایه ترسیم)، انتقال نرم (برق خط) به متن، پیوند به آدرس ایمیل (لینک ایمیل)، تاریخ فعلی (Oat.e)، فلش (فلش) ) و انیمیشن Shockwave (Shockwave)، یک ژنراتور خالی و یک شی FireWorks، اپلت های جاوا و کنترل های ActiveX، اشیاء پلاگین (Plag-ins) و یک فایل HTML خارجی (SSI).

    پالت کاراکترها به شما امکان می دهد یکی از 12 کاراکتر خاص مختلف را به صفحات وب اضافه کنید: خط جدید، حق چاپ (حق نشر)، علامت تجاری ثبت شده، اسکناس، از جمله پوند استرلینگ، ین، یورو، و همچنین علامت نقل قول، خط تیره و سایر علائم (شکل را ببینید. 6.11).

    پالت "فرم ها" (فرم ها)، نشان داده شده در شکل. 6.12، برای ایجاد فرم ها ( § 2.8 را ببینید) و شامل دکمه های زیر است: خود فرم (فرم ها)، فیلد نوشتاری (فیلد متن)، دکمه (دکمه)، کلیدهای چک باکس و دکمه رادیو، فهرست / منو (فهرست / منو)، فیلد برای انتقال فایل ها (Filefield) و تصاویر (Imagefield)، یک فیلد مخفی (Hidden field) و یک نشانگر هایپرلینک برای رفتن به سایت دیگر (منوی پرش).

    توجه داشته باشید که در پایین تمام پالت‌های گروه Object، فیلدهایی به نام‌های Alignment (Layout) و View (View) وجود دارد که به شما امکان مشاهده و کنترل قرارگیری اشیاء در یک صفحه وب را می‌دهد.

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

    پالت Header به شما امکان می دهد تگ ها و مقادیر پارامترهای مناسب را به هدر یک سند HTML اضافه کنید، از جمله: تگ ها و کلمات کلیدی اطلاعات متا، توضیحات سایت، گزینه های به روز رسانی سایت، ارزش لینک پایه (پیوندهای پیش فرض)، پیوندهایی برای اتصالات.

    پالت "اشیاء نامرئی" (Invisibles)، نشان داده شده در شکل. 6.14، به شما امکان می دهد بوک مارک ها را در صفحه قرار دهید (همچنین ببینید § 4.2و § 4.3، پاورقی ها و نظرات ( § 2.5 را ببینید) و اسکریپت های جاوا ( § 2.9 را ببینید).

    آخرین پالت که بخشی از پالت تطبیقی ​​پیچیده "اشیاء" است، "ویژه" (ویژه) نامیده می شود. در آن، همانطور که در شکل نشان داده شده است. 6.16، سه آیکون یا دکمه وجود دارد، یعنی اپلت ها، پلاگین ها و کنترل های ActiveX.

    بر کسی پوشیده نیست که در رقابت بین کدنویسی با دست و استفاده از خدمات Adobe Dreamweaver، دومی مدتهاست برنده شده است. این ویرایشگر که به تمام معنا راحت است، زندگی هر وب مستر را ساده می کند و در وقت و تلاش او صرفه جویی می کند. آنچه در یک دفترچه یادداشت معمولی در نیم ساعت نوشته می شود، در این ویرایشگر فقط در پنج دقیقه قابل انجام است. و مهمتر از همه، در این مورد، چنین خطاهای توهین آمیزی در کد که باید جستجو و تصحیح شوند، کاملاً حذف می شوند. چه طرح ساده صفحه باشد و چه برنامه نویسی PHP، Dreamweaver همیشه به کمک خواهد آمد. و البته شکی نیست که روند کار با آن نه تنها راحت تر، بلکه آسان تر نیز خواهد بود. در واقع Dreamweaver برخی از کارها را برای کاربر انجام می دهد و او را از نیاز به دانش در زمینه خاصی از فناوری های وب رها می کند. چه چیزی می تواند ساده تر باشد؟ این برنامه برای همه قابل درک است و می توان در عرض چند هفته به آن مسلط شد. این مقاله به کاربران مبتدی کمک می‌کند تا با استفاده از آخرین نسخه 9.0 که در حال حاضر به عنوان نمونه در دسترس است، به اصول اولیه Adobe Dreamweaver سرعت ببخشند. بلافاصله باید توجه داشت که ویرایشگر دارای راهنمای دقیق داخلی به زبان انگلیسی است که در مورد تمام جنبه های استفاده از آن می گوید. البته این مقاله نمی تواند همه آنها را پوشش دهد. اما کمک یک اشکال بزرگ دارد - فراوانی بیش از حد اطلاعات. برای درک اصول اولیه، باید زمان زیادی را صرف کنید. ما سعی خواهیم کرد این نقص را اصلاح کنیم.

    رابط

    ظاهر برنامه بسیار ساده است. در همین حال، فضای کار بسیار متفکرانه سازماندهی شده است که استفاده کارآمد از آن را تضمین می کند. رابط Adobe Dreamweaver از چندین عنصر تشکیل شده است که می توان آنها را به طور مشروط به پنج گروه تقسیم کرد. اولین مورد منوی اصلی است که در مکانی ثابت در بالای پنجره برنامه قرار دارد. این شامل چندین برگه است: فایل، ویرایش، مشاهده، درج، ویرایش، متن، دستورات، وب سایت، پنجره و راهنما. مهمترین آنها برای کاربر زبانه های "فایل" و "ویرایش" هستند، زیرا توسط هیچ منوی دیگری کپی نمی شوند و اغلب استفاده می شوند. این نشانک ها برای همه برنامه ها معمولی هستند و بنابراین ما در مورد آنها صحبت نمی کنیم. برگه های باقیمانده در منوی اصلی خیلی مهم نیستند، زیرا به طور جزئی یا کامل توسط عناصر رابط دیگر تکرار می شوند یا به ندرت استفاده می شوند. گروه بعدی منوی Insert است که در اصل نوار ابزار Dreamweaver است. می توان آن را به هر بخشی از پنجره برنامه منتقل کرد، اما بهتر است آن را در موقعیت اصلی خود در زیر منوی اصلی بگذارید. این عنصر رابط را می توان جمع کرد تا ناحیه فضای کاری بزرگ شود. پانل Insert دارای چندین برگه است که بر اساس نوع داده تقسیم می شوند. برگه "عمومی" حاوی عناصری است که اغلب استفاده می شود: لینک ها، تصاویر، جداول و غیره. این برگه بیشتر استفاده می شود. سایر برگه ها در پانل Layout (کار با Spry، جداول و فریم ها)، Forms، Data، Spry، Text و Favorites. برگه "متن" تا حدی توسط سایر عناصر رابط کپی شده است و برگه "مورد علاقه" به کاربر اجازه می دهد تا منوی خود را ایجاد کند.

    یک گروه بسیار مفید از نشانک ها "سبک های CSS"، که در آن می توانید سبک های جدید ایجاد کنید و سبک های قدیمی را ویرایش کنید.

    در سمت راست منطقه کاری برنامه یک پنجره با گروه های مختلف پانل وجود دارد (در مجموع می تواند چهار گروه وجود داشته باشد). نمی توان آن را به مکان دیگری منتقل کرد، اما می تواند پنهان یا قفل شود. هر گروه از برگه ها در این پانل را می توان جمع کرد یا بسته کرد. در صورت گسترش، پانل کاملاً حجیم است و به طور قابل توجهی اندازه فضای کار را کاهش می دهد. این بخش از اینترفیس ماهیت کمکی دارد و به شما امکان می دهد تا بدون باز کردن پنجره های اضافی برخی از اقدامات را انجام دهید. به عنوان مثال، گروه زبانه CSS Styles بسیار مفید است که در آن می توانید سبک های جدید ایجاد کنید و سبک های قدیمی را ویرایش کنید و همچنین ویژگی های سبک های مختلف را مدیریت کنید. گروه دیگری از برگه ها "بازرس برچسب" به شما امکان می دهد برچسب فعلی انتخاب شده را مدیریت کنید: ویژگی های آن را مشاهده کنید و پارامترهای جدید را اضافه کنید یا پارامترهای قدیمی را تغییر دهید. دو گروه دیگر "Files" و "Journal" بسیار کمتر مورد استفاده قرار می گیرند. اولی برای کنترل منابع محلی و شبکه و سایر عملیات طراحی شده است و دومی نقش گزارش عملیات انجام شده را ایفا می کند. در صورت تمایل، کاربر می تواند با بازگشت به یک نقطه خاص، اقدامات را لغو کند. افسوس، شما نمی توانید اقدامات را به طور انتخابی لغو کنید.

    در زیر فضای کاری گروه دیگری وجود دارد - "Properties". تمام تنظیمات موجود برای عناصر طراحی را نمایش می دهد. همچنین می توان این پنل را کوچک یا بسته کرد، علاوه بر این، با دوبار کلیک بر روی منطقه آزاد پنل، می توان آن را کاهش داد (گزینه های اضافی پنهان خواهند شد). "Properties" عملکردهای عناصر رابط دیگر را کپی می کند و بسیار مهم است، زیرا به شما امکان می دهد عناصر مختلف سایت را قالب بندی کنید. محتوای این پنل بسته به محتوای انتخابی تغییر می کند. تقریباً در همه موارد، تراز را می توان تنظیم کرد (سه موقعیت برای انواع داده های غیر متنی و چهار موقعیت برای انواع داده های متنی). در مورد انتخاب متن در پانل "Properties"، می توانید سبک CSS را تنظیم کنید (و یک سبک جدید به معنای واقعی کلمه ایجاد کنید)، قالب متن را انتخاب کنید، متن را به لیست تبدیل کنید، و یک پیوند را در انتخاب قرار دهید. . برای گرافیک، تنظیمات مربوط به اندازه، تورفتگی، لینک‌ها، حاشیه‌ها و غیره در دسترس است. هنگام کار با جداول، امکان تنظیم تنظیمات مختلف برای تعداد ستون‌ها و سلول‌ها، حاشیه‌ها، تورفتگی‌ها و رنگ‌ها وجود دارد. از این پنل هنگام کار با بسیاری از عناصر دیگر سایت نیز استفاده می شود.

    آخرین گروه از اجزای رابط Dreamweaver فضای کاری است. همچنین دارای ساختار نشانک است. در این برنامه می توانید چندین سند را به طور همزمان باز کنید که می توانید آزادانه بین آنها حرکت کنید. فضای کار نیز شامل چندین ابزار است. پانل بالایی "Document" به شما امکان می دهد بین چندین حالت سوئیچ کنید: کدنویسی و طراحی. علاوه بر این، به شما امکان می دهد در صورت امکان نحوه مشاهده سند در مرورگر را کنترل کنید. در صورت تمایل می توان این پنل را به هر مکانی از پنجره کاری برنامه منتقل کرد. پانل پایین به شما امکان می دهد حالت های مکان نما را تغییر دهید، مقیاس بندی را کنترل کنید. علاوه بر این، حاوی اطلاعاتی در مورد سند (اندازه، وضوح، و غیره) و درخت سلسله مراتب برچسب است. آخرین مورد فهرستی از تمام تگ های والدین برای این یکی است. در این لیست می توانید از سطح بالا به تگ بدنه حرکت کنید.

    کار با سند

    در حالت "کد"، ویرایش مستقیم سند مانند کار در Notepad در دسترس است.

    اول از همه، برای ایجاد یک صفحه، باید تنظیمات اولیه آن را تنظیم کنید. این کار از طریق منوی "Edit -> Page Properties" (کلید "hot" Ctrl + J) یا از طریق منوی زمینه انجام می شود. در پنجره ای که ظاهر می شود، می توانید فونت پیش فرض را برای متن و لینک ها تنظیم کنید، صفحه را عنوان کنید، رمزگذاری آن را تعریف کنید و همچنین یک تصویر نمونه پس زمینه (ردیابی) تنظیم کنید. به هر حال، نام سایت را می توان در پانل "سند" نیز تنظیم کرد. با انتخاب تگ بدنه می توانید بقیه پارامترهای صفحه را به صورت دستی یا از طریق Tag Inspector تنظیم کنید. اغلب، یک وب مستر تازه کار فقط به پارامترهای پس زمینه و bgcolor (به ترتیب تصویر پس زمینه و رنگ پس زمینه) نیاز دارد. برای ایجاد متا تگ ها باید با کلیک بر روی تب مربوطه در پنل Document به حالت Code بروید. در این حالت، ویرایش مستقیم سند مانند کار در Notepad در دسترس است. با این حال، Dreamweaver در اینجا نیز مزایای خود را دارد. تمام خطوط در کد برای راحتی شماره گذاری شده اند و خود برچسب ها مانند حالت "پروژه" (معروف به طراحی) با تمام پانل های برنامه مرتبط هستند. بسته به نوع برچسب ها، آنها در رنگ های مختلف برجسته می شوند، در نتیجه کدهای یکنواخت را شکسته و شناسایی را آسان تر می کند. علاوه بر این، هنگام ویرایش کد، یک منوی کوچک در کنار مکان نما با لیستی از گزینه های ممکن ظاهر می شود. موارد از لیست را می توان با صفحه کلید یا ماوس انتخاب کرد، پس از آن به طور خودکار در کد جایگزین می شوند، که به طور قابل توجهی طرح بندی سند را سرعت می بخشد. به عنوان مثال، برای درج یک تصویر در یک سند، فقط براکت "زاویه" باز را تایپ کنید، تگ img را از لیست ظاهر شده انتخاب کنید (برای ساده کردن جستجو، می توانید حرف "i" را تایپ کنید - برنامه به طور خودکار فیلتر می شود. تمام تگ های دیگر که با این حرف شروع می شوند)، سپس یک فاصله قرار دهید، پارامتر src را از منوی ظاهر شده دوباره انتخاب کنید و سپس بر روی دکمه مرور ظاهر شده کلیک کنید که پنجره ای برای جستجوی تصویر مورد نظر باز می شود. با این حال، درج تصاویر از طریق منوی "Insert" بسیار ساده تر و سریعتر است. این در مورد جداول نیز صدق می کند. وقتی جدولی را از طریق منو به سند اضافه می‌کنید، پنجره‌ای با تنظیمات تعداد ستون‌ها و سلول‌ها، فاصله، حاشیه، عرض و غیره ظاهر می‌شود. همه این تنظیمات و همچنین برخی تنظیمات دیگر را می‌توان پس از ایجاد جدول تغییر داد. از طریق پنل Properties علاوه بر این، شما همچنین می توانید پارامترهای سلول ها را با انتخاب آنها در فضای کاری تغییر دهید (در حالت "Code" فقط مکان نما را روی برچسب مورد نظر قرار دهید). عملکرد تغییر اندازه جدول، ستون ها و سلول ها با ماوس کمتر مفید نیست. برای این کار، مکان نما را روی حاشیه نگه دارید و سپس آن را در جهت دلخواه بکشید. به هر حال، برای حذف هر عنصر از سند، کافی است آن را انتخاب کرده و کلید حذف را از صفحه کلید فشار دهید. و برای جابجایی هر عنصری (مثلاً درج متن در جدول)، باید با پایین نگه داشتن مکان نما نیز انتخاب شده و کشیده شود.

    ابزار کمتر موثر در Adobe Dreamweaver منوی زمینه است. این دستورات اصلی و عناصر رابط را کپی می کند که به گفته توسعه دهندگان، به دسترسی سریع نیاز دارند. در اینجا می‌توانید ویژگی‌های عنصر انتخاب شده، از جمله تنظیمات CSS، تراز و قالب‌بندی را تنظیم کنید. علاوه بر این، از طریق منوی زمینه، می توانید برچسب ها را مدیریت کنید، نظرات را اضافه کنید (آنها همچنین یادداشت های توسعه دهنده هستند) و حتی به تنظیمات صفحه بروید. به هر حال، برای تغییر سریع کد عنصر انتخاب شده، فقط منوی زمینه را باز کرده و مورد Quick Tag Editor را انتخاب کنید. اما برای درج عناصر مختلف، پنل "Insert" و زبانه ای به همین نام در منوی اصلی ضروری هستند. تمام عناصر موجود برای درج طبقه بندی و به گروه ها تقسیم می شوند. اگر عنصر مورد نظر هنوز در لیست نیست، می توانید از تابع "Tag ..." (کلید "hot" Ctrl + E) استفاده کنید. لیست کاملی از برچسب های موجود که به گروه ها تقسیم شده اند، در پنجره ای که ظاهر می شود ظاهر می شود. علاوه بر این، نه تنها تگ های HTML امکان پذیر است، بلکه ASP، PHP و غیره نیز امکان پذیر است.

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

    چیز جزیی

    البته تمام عملکردهای فوق ویرایشگر بسیار مفید هستند، اما در درجه اول مربوط به صفحه آرایی HTML، یعنی ایجاد سایت های ساده هستند. اما Adobe Dreamweaver به شما اجازه می دهد تا با انواع دیگر اسناد کار کنید. این برنامه از Action script، Java script، XML، ASP.NET، JSP، PHP، اسکریپت ها و حتی یک سند متنی پشتیبانی می کند. درست است، هدف دومی کاملاً مشخص نیست (در این زمینه، Dreamweaver به وضوح از نظر منابع مصرف شده و سرعت دانلود به Notepad بازنده می شود). طبیعتاً انتخاب خودکار برچسب‌ها و حالت بصری فقط برای اسنادی با پشتیبانی HTML در دسترس خواهد بود. اما برجسته کردن کد در هر نوع سندی حفظ خواهد شد.

    مزیت مهم این برنامه، چیدمان های از پیش آماده شده است. هنگام ایجاد یک سند جدید، مجموعه ای از الگوها نیز در دسترس است. این شامل صفحات مختلفی از فریم های استاندارد گرفته تا شیت های مختلف و حتی طرح بندی طراحی است. نویسندگان برنامه چندین ده قالب مختلف ایجاد کرده اند که می تواند در موقعیت های مختلف مفید باشد، به عنوان مثال برای ایجاد سایت های ارائه با منابع و زمان محدود. هنگام استفاده از منابع آماده، پنجره "مدیریت سایت" ظاهر می شود که در آن می توانید یک سایت جدید اضافه کنید، ویرایش کنید، بیدار شوید و همچنین یک سایت موجود را وارد و صادر کنید. هنگام ایجاد یک سایت، یک فرم با تنظیمات ظاهر می شود، که در چند مرحله لازم است چندین پارامتر تنظیم شود: نام و آدرس، تنظیمات اتصال به یک سرور راه دور و غیره. این روش بخشی از یک روش مفید دیگر است (اما کم- استفاده شده توسط کاربران عادی) عملکرد مدیریت سایت محلی و از راه دور. برای چنین عملیاتی، یک تب جداگانه در منوی اصلی وجود دارد - "وب سایت". در آن می توانید پنجره مدیریت سایت را فراخوانی کنید، لینک ها را بررسی کنید و تعدادی عملیات دیگر را انجام دهید. جالب ترین مورد برای کاربر معمولی در این منو، عملکرد "گزارش ها" است. این به شما امکان می دهد تا سایت را برای کاستی های مختلف اسکن کنید. نتایج بررسی در یک پانل جداگانه با چندین تب نمایش داده می شود. در یکی از آنها، می توانید پیوندهای شکسته را بررسی کنید، در دیگری - خطاهای کد. بنابراین، برای مثال، در یکی از صفحاتی که من گرفتم، بسیاری از ویژگی‌های alt گم شده بودند و برخی از عناصر کاملاً صحیح نبودند. علاوه بر این، با کمک "گزارش ها" می توانید کد را برای سازگاری با مرورگرها بررسی کنید. با این حال، اگر تمام کدها به طور کامل با Dreamweaver نوشته شده باشد، مناطق مشکلی پیدا نمی شوند، اگرچه در واقع، در موارد نادر، کد نوشته شده توسط ویرایشگر کاملاً آنطور که ما می خواهیم در مرورگرها به نظر نمی رسد. تمام نتایج آزمون را می توان در یک فایل جداگانه ذخیره کرد.

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

    بیشتر بخوانید: