شما مجاز به استفاده از WYSIWYG نیستید
Dreamweaver یک ویرایشگر بزرگ WYSIWYG است ، اما اگر شما علاقه مند به نوشتن صفحات وب نیستید، می توانید از Dreamweaver استفاده کنید زیرا این یک ویرایشگر متن عالی است. اما ویژگی های زیادی وجود دارد که از طریق راه ویرایشگر کد Dreamweaver لغزش می شود، زیرا تمرکز اصلی بر روی نمایش طراحی یا ویرایشگر بخش WYSIWYG محصول است.
نحوه ورود به Codeview Dreamweaver
اگر از Dreamweaver به عنوان یک ویرایشگر HTML استفاده نکرده اید، قبل از اینکه هرگز متوجه نشدید سه دکمه در بالای صفحه: "Code"، "Split" و "Design." Dreamweaver به طور پیش فرض در "نمایش طراحی" یا حالت WYSIWYG شروع می شود. اما برای مشاهده و ویرایش کد HTML بسیار آسان است. فقط بر روی دکمه "کد" کلیک کنید. یا به منوی View بروید و "Code" را انتخاب کنید.
اگر فقط یاد بگیرید که چگونه HTML را بنویسید یا میخواهید بدانید چگونه تغییرات شما روی سند شما تاثیر می گذارد، می توانید نمایش کد و نمایش طراحی را در همان زمان باز کنید. زیبایی این روش این است که شما می توانید در هر دو پنجره نیز ویرایش کنید. بنابراین شما می توانید کد تگ تصویر خود را در HTML بنویسید و سپس از نمایش طراحی استفاده کنید تا آن را با کشیدن و رها کردن به مکان دیگری در صفحه منتقل کنید.
برای مشاهده هر دو در یک بار، یا:
- روی دکمه "تقسیم" (بین "کد" و "طراحی") کلیک کنید
- در منوی View، "Code and Design" را انتخاب کنید
هنگامی که شما راحت با استفاده از Dreamweaver برای ویرایش کد HTML خود، می توانید تنظیمات خود را تغییر دهید تا Dreamweaver را به صورت پیش فرض در نمای کد باز کنید. ساده ترین راه این است که نمایش کد را به عنوان یک فضای کاری ذخیره کنید. Dreamweaver در آخرین فضای کاری که شما از آن استفاده کرد باز خواهد شد. اگر اینطور نیست، به سادگی به منوی پنجره بروید و فضای کاری را که میخواهید انتخاب کنید.
تنظیمات نمایش کد
Dreamweaver بسیار انعطاف پذیر است زیرا راه های زیادی برای سفارشی کردن آن دارد و آن را به همان شیوه ای که می خواهید انجام دهید. در پنجره گزینه ها رنگ کد، قالب بندی کد، نکات کد و گزینه های بازنویسی کد وجود دارد که می توانید تنظیم کنید. اما شما همچنین می توانید برخی از گزینه های خاص را در خود کد ببینید.
هنگامی که شما در نمای کد هستید، یک دکمه «گزینه های مشاهده» در نوار ابزار وجود دارد. شما همچنین می توانید گزینه ها را با رفتن به منوی View و انتخاب گزینه "Code View Options" مشاهده کنید. گزینه ها عبارتند از:
- قرار دادن ورد - کد HTML را مات می کند تا بتوانید آن را بدون پیمایش به صورت افقی مشاهده کنید. توجه داشته باشید که این گزینه هیچ کدپستی را در کد خود وارد نمی کند، فقط کد را نمایش می دهد به طوری که خواندن آن آسان تر است.
- شماره خط - شماره خط را در کنار کد نمایش می دهد. این نماد خط پوشش را برای خطوطی که پیچیده تر از پنجره نمایش است نشان می دهد.
- Characters مخفی - نمایش کاراکترهای خاص به جای فضای خالی که در یک صفحه وب نمایش داده می شود. مانند یک نقطه جایگزین یک فضای، یک chevron دو جایگزین هر برگه می شود، و یک نشانگر pilcrow یا پاراگراف جایگزین هر شکست خط می شود.
- کد نادرست را برجسته کنید - HTML را برجسته می کند که در زرد نادرست است. اگر برچسب زرد را انتخاب کنید، بازرس املاک به شما نکاتی را درباره چگونگی رفع آن می دهد.
- نحو رنگ آمیزی - کدنویسی رنگ کد خود را روشن یا خاموش می کند. رنگ کدگذاری رنگ خود را در بخش رنگ آمیزی تنظیمات کد تغییر دهید.
- Auto Indent - کد خود را به صورت خودکار پس از بازنگری حامل انجام می دهد، در صورتی که کد بالای آن از نظر قرینه باشد. شما می توانید اندازه ضخامت را با تغییر اندازه برگه در قسمت قالب بندی کد تنظیمات تغییر دهید.
ویرایش کد HTML در Dreamweaver Code View
ویرایش کد HTML در کد مشاهده Dreamweaver آسان است. به سادگی شروع به تایپ کردن HTML خود کنید. اما Dreamweaver به شما برخی از افزونه ها را ارائه می دهد که فراتر از یک ویرایشگر HTML ساده است. وقتی شروع به نوشتن یک تگ HTML می کنید، <را تایپ می کنید. اگر پس از این کاراکتر به طور خودکار مکث کنید، Dreamweaver یک لیست از تگ های HTML را نشان می دهد. اینها نکات کد هستند. برای محدود کردن انتخاب، شروع به تایپ کردن حروف کنید - Dreamweaver فهرست لیست کشویی را به تگ که متناسب با آنچه شما تایپ می کنید محدود می کند.
اگر شما به HTML جدید هستید، می توانید از طریق لیست تگ های HTML حرکت کنید و موارد مختلفی را انتخاب کنید تا ببینید چه کاری انجام می دهند. Dreamweaver همچنان به شما در مورد ویژگی هایی که شما یک برچسب را تایپ کرده اید را به شما پیشنهاد می کند. به عنوان مثال، اگر شما " محدود خواهد کرد.
اما نکات کد در برچسب ها پایان نمی یابند. شما می توانید نکات کد را برای وارد کردن استفاده کنید:
اگر نکات کد نمایش داده نشود، می توانید Ctrl-spacebar (ویندوز) یا Cmd-spacebar (مکینتاش) را ضربه بزنید تا بتوانید آنها را نمایش دهید. شایعترین دلیل اینکه چرا یک اشاره گر کد ممکن است ظاهر نشود، اگر پیش از پایان دادن به برچسب خود به یک پنجره دیگر تغییر دهید. از آنجا که Dreamweaver تایپ کردن کاراکتر را تایپ می کند، اگر پنجره را ترک کرده و برگشت دهید، باید نکات کد را دوباره راه اندازی کنید.
با ضربه زدن به کلید فرار میتوانید منوی نکات کد را خاموش کنید.
هنگامی که تگ باز کردن HTML خود را تایپ کرده اید، باید آن را ببندید. Dreamweaver این را به شیوه ای طبیعی انجام می دهد. اگر گزینه "بستن برچسب ها" را که برای نیازهای شما مناسب است تایپ کنید.
اگر شما کاملا آماده تغییر در ویرایش صفحات خود در HTML نیستید، اما میخواهید کد را همانطور که نوشته شده است تماشا کنید، باید بازرس کد را امتحان کنید. این کد HTML را در یک پنجره جداگانه باز می کند. این کار درست مانند نمایش کد است، و در واقع، اساسا یک پنجره نمایش کد قابل جدا شدن برای سند فعلی است. برای باز کردن بازرس کد، به منوی پنجره بروید و «Code Inspector» را انتخاب کنید یا کلید F10 را روی صفحه کلید خود فشار دهید.
Dreamweaver کد HTML را فرمت می کند هرچند که دوست دارید آن را نمایش داده شود. به عنوان مثال، اگر از 3 فضایی استفاده می کنید تا عقب نشینی کنید، اما هرگز تگ های IMG را نمی گیرید، می توانید اطلاعات قالب بندی را در گزینه های بازنویسی کد مشخص کنید. سپس به منوی Commands بروید و گزینه «Apply Format Format» را انتخاب کنید. این یک روش عالی برای گرفتن کد توسط شخص دیگری است که در قالب فرمت شناخته شده شما قرار دارد.
یک ویژگی که بسیاری از برنامه نویسان HTML نمی دانند و یا استفاده نمی کنند توانایی سقوط کد HTML است. این تگ ها را از سند حذف نمی کند، بلکه فقط آنها را از نظر حذف می کند تا به آنچه که شما در حال کار بر روی آن هستید منحرف نشوید. برای سقوط کد شما:
- قسمت کد را که می خواهید پنهان کنید را انتخاب کنید
- در منوی ویرایش، گزینه "Collapse Selection" را از زیر منو "Collapse Code" انتخاب کنید
یک راه ساده تر این است که کد را انتخاب کنید و سپس بر روی آیکون سقوط کد کلیک کنید که در زاویه ظاهر می شود. شما همچنین می توانید بر روی کد انتخاب شده راست کلیک کرده و گزینه Collapse Selection را انتخاب کنید.
اگر میخواهید همه چیز را به غیر از آنچه برجسته است پنهان کنید، در هر یک از روشهای فوق، «Collapse Outside Selection» را انتخاب کنید.
برای گسترش کد خراب شده، به سادگی روی آن دوبار کلیک کنید. این کد را باز می کند و آن را انتخاب می کند. سپس میتوانید این انتخاب را حرکت دهید یا آن را حذف کنید یا برچسبهای اضافی در اطراف آن اضافه کنید.
شما می توانید از فروپاشی استفاده کنید و تمام زمان ها را در صفحاتی که مایل نیستید قالب خارجی را ویرایش کنید، گسترش دهید. شما فقط قسمت محتویاتی را که می خواهید ویرایش کنید و سقوط خارج را انتخاب کنید. سپس HTML خود را بنویسید شما هنوز هم می توانید صفحه را در نمای طراحی ببینید یا آن را در مرورگر پیش نمایش کنید. کد خراب شده از سند حذف نشده است، به سادگی از نظر پنهان شده است. شما همچنین می توانید از آن در هنگام کار بر روی یک سری از موارد استفاده کنید. هنگامی که یکی را تکمیل کردید، آن را سقوط کنید. شما می دانید زمانی که کد نمایش داده نمی شود انجام می شود.