تخفیف ویژه زمستانه پی استور
تا 60 درصد تخفیف
شامل پروژه‌ها و دوره‌های آموزشی
روز
ساعت
دقیقه
ثانیه
تخفیف ویژه زمستانه پی استور
اگر کمی در حوزه طراحی سایت فعالیت داشته اید حتماً نام دریم ویور برای طراحی سایت را شنیده اید. هم اکنون این نرم افزار قدرتمند محصول شرکت ادوبی است و به معنای، خیال‌پردازی یا رویابافی است. البته این نرم افزار تا نسخه ۸ بوسیله شرکت ماکرومدیا تولید می شد و از سال ۲۰۰۵ که شرکت Adobe آن را خریداری کرد با عنوان Adobe Dreamweaver روانه بازار شده است.
دریم ویور یک نرم افزار حرفه ای برای طراحی سایت بشمار می رود که می توان در آن کدهای و تگ های یک سایت را در محیط ویرایشگر آن نوشته و مدیریت کرد.
در دریم ویور امکان درج و ویرایش کدهای Htlm, CSS, JS, PHP, Aspx و خیلی موارد دیگر وجود دارد که طراحی و ویرایش صفحات سایت را با شناخت کلمات کلیدی هر یک از زبان های اشاره شده و پیشنهاد آن در یک ویرایشگر آسان می‌کند و همچنین امکان اجرای کدهای تولید شده بر روی یک لوکال هاست وجود دارد (البته باید یک سرور مجازی نظیر Xamp را نصب کنید) و در نهایت شما فقط با یک کلیک خواهید توانست سایت خود را در مرورگر های نصب شده در سیستم مشاهده نمایید.
محیط دریم ویور به شما این امکان را می دهد که بدون نیاز به کدنویسی با واسط بصری آن شروع به طراحی کنید ولی به یاد داشته باشید همیشه استفاده از کدنویسی در اولویت طراحی سایت قرار دارد چون در اینصورت است که محدودیت طراحی یا برنامه نویسی سایت برای دستیابی به هدف برداشته خواهد شد پس با این توضیحات مختصر به سراغ ۱۰ مرحله مهم برای طراحی سریع سایت با دریم ویور Dreamweaver می رویم.
بدیهی است برای طراحی سایت با دریم ویور باید نرم افزار Adobe Dreamweaver را نصب کنیم. برای نصب دریم ویور ابتدا باید این نرم افزار را دانلود کنید. تهیه و دانلود نسخه قانونی و اصلی این نرم افزار در کشور ما با محدودیت های شرکت Adobe مواجه است و در صورت برداشته شدن این محدودیت ها، باز این نرم افزار پولی است و برای تهیه لایسنس آن باید مبلغی به دلار را پرداخت کنید پس به ناچار برای استفاده از این نرم افزار به سراغ نسخه های کرک شده و غیر اورجینال سایت های داخلی می رویم.
بدلیل اینکه نسخه های کرک شده نرم افزار دریم ویور در سایت های داخلی با لینک های جدید بروز و ارائه می شوند لذا از گذاشتن منبع لینک دانلود اجتناب می کنیم و پیشنهاد می کنیم کلید واژه “دانلود نرم افزار Dreamweaver” در گوگل را جستجو کنید و چند لینک اول جستجوی گوگل بهترین منابع برای دانلود Dreamweaver خواهد بود. نسخه کرک شده این نرم افزار را دانلود کنید و شروع به نصب نرم افزار کنید. در این آموزش نسخه ۲۱.۱ نرم افزار از سایت soft98 دانلود و نصب می شود.
پس از دانلود نرم افزار پوشه مربوطه را Extract کنید و بر روی Set-up کلیک کنید تا پنجره زیر ظاهر شود.
مراحل نصب دریم ویور ساده و آسان هست و فقط با چند کلیک انجام می شود ولی مواردی که با کادر قرمز نمایش داده شده را مد نظر داشته باشید.
مدت زمانی را صبر کنید تا نصب این نرم افزار انجام شود. بسته به سخت افزار سیستم شما این مدت زمان ممکن است بین ۵ الی ۱۰ دقیقه طول بکشد پس از اتمام نصب باید پنجره زیر برای شما نمایش داده شود.
خوب، مراحل نصب به همین سادگی تمام شد و اکنون می توانید از طریق استارت منوی ویندوزتان نرم افزار را اجرا کنید.
مرحله راه اندازی نرم افزار دریم ویور Dreamweaver نیز مانند نصب آن راحت است برای آشنایی با این بخش نیز آموزش های مختصری ارائه می شود. پس از اینکه نرم افزار را نصب کردید آن را اجرا کنید و وارد محیط آن شوید. در ابتدای ورود به محیط نرم افزار از شما پرسیده می شود آیا قبلاً از این نرم افزار استفاده کرده اید که پاسخ درست را با انتخاب بله یا خیر جواب دهید.
پس از پاسخ به این سوال تنظیمات مربوط به ظاهر محیط دریم ویور Dreamweaver است که این مراحل را نیز با توجه به سلیقه خود مرحله به مرحله جلو بروید.
برای شروع کار بهتر است Standard Workspace را انتخاب کنید و به مرحله بعد بروید.
رنگ تم نرم افزار را به دلخواه خودتان انتخاب کنید و به مرحله بعدی بروید.
سه گزینه در این مرحله وجود دارد اگر یک فایل آماده از قبل در دریم ویور دارید می توانید اولین گزینه از سمت چپ را بزنید و آن فایل را انتخاب کنید و اگر نیاز به آموزش ویدئویی دارید می توانید گزینه سمت راست را بزنید. اما اگر می خواهید یک نمونه یا پروژه جدید ایجاد کنید گزینه وسط یا Start with new or existing folder را بزنید.
ما نیز در این آموزش، یعنی آموزش طراحی سایت با دریم ویور گزینه وسط را انتخاب می کنیم. پس از انتخاب این گزینه مسیری برای ذخیره فایل های شما پرسیده خواهد شد بنابراین یک محل را انتخاب کنید (مثلاً در درایو D یک پوشه با نام Dteam). پس از آن محیط نرم افزار باز خواهد شد.
در این محیط گزینه های مختلفی برای طراحی سایت با دریم ویور وجود دارد ولی راحت ترین راه انتخاب گزینه site از منو بالایی و کلیک روی گزینه New site می باشد. پس از انتخاب این گزینه پنجره زیر ظاهر خواهد شد.
نام سایت خود را مشخص کنید. سپس، محل ذخیره آن را انتخاب کنید. انتخاب محل ذخیره به شما بستگی دارد ولی معمولاً منطقی است که همه پروژه ها را به خاطر سادگی در یک مکان نگه دارید. نکته مهم دیگر اطلاعات محلی در زیر تنظیمات پیشرفته است. برای این منظور در منوی سمت چپ این پنجره گزینه Advanced Settings را باز کنید و بر روی Local Info کلیک کنید و روی نماد پوشه در سمت راست جایی که روی آن پوشه Default Images نوشته شده کلیک کنید.
سپس، به پوشه سایت تازه ایجاد شده خود بروید، آن را باز کنید، یک پوشه جدید به نام images ایجاد کنید و آن را به عنوان پوشه پیش فرض خود انتخاب کنید. به این ترتیب، Dreamweaver تصاویر مرتبط با سایت شما را به طور خودکار در این مکان ذخیره می کند. روی Save کلیک کنید تا به فضای کاری خود برگردید.
اکنون که یک پروژه جدید ایجاد کرده اید، زمان اولین فایل فرا رسیده است. ما با صفحه اصلی شروع می کنیم. اگر Dreamweaver گزینه ای را به شما پیشنهاد نمی دهد، به File> New بروید. شما می توانید یک فایل کاملاً جدید ایجاد کنید یا از یک الگوی موجود استفاده کنید. این برنامه دارای تعدادی از آن ها است (به الگوهای شروع کننده مراجعه کنید). اما در حال حاضر، ما می خواهیم یک سند HTML جدید و خالی ایجاد کنیم.
در این پنجره نوع سند به طور پیش فرض HTML تنظیم شده و همانطور که هست بگذارید باقی بماند نام فایل را index بگذارید و Create را انتخاب کنید. این کار شما را به صفحه زیر می برد.
همانطور که مشاهده می کنید نمای زنده از ظاهر سایت شما که در حال حاضر خالی (صفحه سفید) و برخی از نشانه گذاری های اولیه HTML ایجاد شده است. احتمالً می دانید یک صفحه یا سایت در مرورگر از طریق تگ نمایش داده می شود در واقع می توان گفت تمامی کارهای برنامه نویسی و طراحی سایت در هر زبانی بلاخره به تگ های HTML تبدیل می شود چون زبان قابل فهم به مرورگر همان تگ HTML است.
لازم به ذکر است مفهوم طراحی در این آموزش به کار کردن با HTML, CSS و Java Script دلالت دارد که HTML و CSS زبان نشانه گذاری هستند و Java Script زبان برنامه نویسی سمت کاربر است و برای اجرای آنها فقط به یک مرورگر نیاز است.
برای وارد کردن یک عنصر در صفحه، ابتدا باید مکان آن را انتخاب کنید؛ حالا روی صفحه سفید کلیک کنید (در صورت انتخاب Dreamweaver عنصر <body> را به طور خودکار انتخاب می کند) یا مکان نما را در قسمت کد بین تگ <body> صفحه قرار دهید. پس از آن، باید به زبانه Insert در گوشه بالا سمت راست بروید لیستی از عناصر متداول HTML و سایت را در اختیار شما قرار می دهد که می توانید به صفحه خود اضافه کنید. پایین بروید تا بتوانید Header را به عنوان یک گزینه مشاهده کنید.
روی آن کلیک کنید و منویی برای دادن کلاس HTML یا شناسه به آن ظاهر می شود.
بطور کلی کلاس ها و شناسه های CSS به نوعی مانند عناوینی هستند که می توانید به عناصر HTML خود اختصاص دهید تا ظاهر CSS را به آنها اختصاص دهید. در صورتی که با کلاس ها و شناسه های CSS آشنا نیستید می توانید آموزش طراحی وب با CSS، تهیه و مطالعه کنید. در این پروژه، ما از کلاس با نام site-header استفاده می کنیم. پس از تایپ آن در فیلد Class، روی OK کلیک کنید تا Header در صفحه وارد شود مشاهده خواهید کرد که در داخل سند HTML ظاهر می شود.
در ادامه آموزش طراحی سایت با دریم ویور می توانید داخل header را تغییر داده و آن را به عنوان تبدیل با تگ H1 تبدیل کنید. توجه داشته باشید تگ H1 یک نشانگر مهم برای موتورهای جستجو است. برای این کار به Insert بازگردید، روی پیکان کنار Heading کلیک کنید و H1 را انتخاب کنید. این عمل عنوان صفحه را با تگ H1 نشان خواهد داد. پس از آن، می توانید عنوان صفحه خود را نیز تایپ کنید. به عنوان مثال، متن Dreamweaver Test Site را برای هدر سایت در نظر می گیریم.
تا الان شما فقط یک header ایجاد کرده اید! این صفحه خیلی ساده است، بنابراین بگذارید آن را از طریق CSS تغییر دهیم.
در طراحی سایت، CSS بخشی است که ظاهر طراحی شده یک صفحه وب را ارائه می دهد. CSS به شما امکان می دهد رنگ ها، ابعاد عناصر، نوع و اندازه فونت و موارد دیگر را تعریف کنید. ما می خواهیم از نشانه گذاری برای ایجاد عنوان صفحه خود و همچنین نحوه تغییر CSS در Dreamweaver استفاده کنیم.
می توانید CSS را درون سند HTML نوشته و استفاده کنید ولی نوشتن یک فایل مجزا برای CSS و فراخوانی آن در سند HTML مرسوم است. برای اضافه کردن فایل CSS می توانید از طریق منوی Tools> CSS> Attach Style Sheet اقدام کنید.
روی Browse در کنار فیلد File/URL کلیک کنید و یک فایل با نام style.css را به عنوان نام فایل CSS انتخاب کنید (در همان مسیر ایجاد فایل قبلی). وقتی OK را زدید، یک فایل جدید در بالای نمای زنده شما ظاهر می شود که می توانید آن را مشاهده و ویرایش کنید. همچنین در قسمت کد ها نیز به قسمت <head> در HTML صفحه شما پیوند داده می شود.
عالی است حالا شما آماده تغییر ظاهر صفحه خود هستید.
اولین کاری که می خواهیم انجام دهیم این است که فونت عنوان صفحه را تغییر دهیم و آن را در وسط چین کنیم. برای این کار، ابتدا باید یک انتخاب کننده جدید CSS یا Selector ایجاد کنید. انتخابگر نام عنصری در صفحه شما است که می توانید ویژگی هایی را به آن اختصاص دهید، به عنوان مثال رنگ، اندازه و موارد دیگر. همچنین به همین دلیل است که در ابتدای آموزش طراحی سایت با دریم ویور، از شما یک کلاس CSS برای سربرگ خواسته شد. عنوان H1 خود را در نمای DOM در سمت راست پایین علامت گذاری کنید. سپس، بالاتر از آن، CSS Designer را انتخاب کنید.
برای ایجاد یک انتخابگر CSS، روی خطی که در آن Selectors آمده و سپس روی نماد + کلیک کنید. این کار بطور اتوماتیک انتخاب کننده ای با نام .site-header h1 پیشنهاد می دهد. Enter را فشار دهید تا ایجاد شود.
اکنون که یک انتخاب کننده داریم و می توانیم ویژگی هایی را به آن اختصاص دهیم. اگر در مورد CSS نویسی اطلاعات کافی دارید، می توانید به سادگی نشانه گذاری های خود را در style.css تایپ کنید. اما اگر در مورد کار با CSS کم تجربه هستید می توانید در منوی CSS Designer بمانید و تیک کادر Show Set را بردارید. وقتی این کار را انجام دهید، بسیاری از گزینه های اضافی باز می شود.
در Dreamweaver با استفاده از دکمه های جدید، می توانید بسیاری از ویژگی های CSS را از طرح بندی layout، متن، حاشیه و پس زمینه انتخاب کنید. دکمه More گزینه هایی را در اختیار شما قرار می دهد تا قوانین خود را وارد کنید. برای تغییر نوع فونت، روی گزینه Text در بالا کلیک کنید (به پایین بروید). در گزینه های بعدی، نشانگر را روی font-family ببرید و روی font default کلیک کنید.
این گزینه تعدادی گزینه برای فونت های رایج در اختیار شما قرار می دهد. ممکن است بخواهید روی Manage Fonts در پایین کلیک کنید تا به این منو برسید:
در این قسمت می توانید فونت های رایگان Adobe Fonts را انتخاب کنید یا آنها را با نام شان جستجو کنید یا از فیلترهای متعدد در سمت چپ برای محدود کردن انتخاب های خود استفاده کنید. با کلیک بر روی هر یک از حروف تایپ شده، می توانید آن فونت را برای گنجاندن در Dreamweaver انتخاب کنید. پس از انجام این کار، می توانید مستقیماً از آنها استفاده کنید.
در حال حاضر، به سادگی Done را فشار دهید و سپس دوباره روی فونت های پیش فرض کلیک کنید. این بار فونتی به دلخواه خود را انتخاب کنید.
اگر روی فایل style.css خود در بالا کلیک کنید، خواهید دید که همه تگ های مربوط به فونت به سند، اضافه شده است.
متن نمایش داده شده همچنان می تواند بهتر به نظر برسد. وظیفه بعدی در آموزش طراحی سایت با دریم ویور Dreamweaver تغییر موقعیت و اندازه متن است. می خواهیم متن نمایش داده شده در مرکز و بزرگ باشد. برای این منظور، Dreamweaver ویژگی دیگری به نام ویرایش سریع را نیز ارائه می دهد. برای استفاده از آن، به نمای کد بروید و روی قسمتی که می خواهید ویرایش کنید راست کلیک کنید. فعلاً مد نظر ما، کلاس “site-header” است.
اولین مورد یعنی Quick Edit را در بالا انتخاب کنید. با این کار CSS مربوط به این عنصر در زیر آن باز می شود. اگر هنوز چیزی وجود ندارد ، یک دکمه New Rule برای ایجاد پیدا خواهید کرد. می توانید خصوصیات اضافی را در اینجا بدون نیاز به جستجوی کل فایل شیت استایل (که می تواند بسیار طولانی باشد) وارد کنید. برای اینکه متن را در مرکز قرار دهید و همه آن را بزرگ بنویسید ، کد زیر را به آن اضافه کنید:
text-align: center; text-transform: uppercase;
هنگام تایپ، Dreamweaver پیشنهادهایی را برای آنچه شما در تلاش برای وارد کردن آن هستید ارائه می دهد که این ویژگی همان تکمیل کننده کد است. وقتی کار را تمام کردید، خروجی به این شکل خواهد بود:
توجه داشته باشید که متن قبلاً در نمای زنده تغییر کرده است. اکنون، Esc را فشار دهید تا ویرایش سریع انجام شود و به استایل شیت بروید. خواهید دید که CSS جدید در مکان مناسب اضافه شده است.
اکنون با آنچه تاکنون از آموزش طراحی سایت با دریم ویور Dreamweaver آموخته اید، می توانید یک سایت ابتدایی بسازید. کافی است از تابع Insert برای افزودن عناصر بیشتر استفاده کنید، سپس آنها را با CSS حالت دهید. برای ایجاد یک صفحه نمونه موارد زیر را انجام داده ایم:
خروجی به صورت زیر خواهد بود.
از آنجا که این کار کمی پیشرفته است و همه نمی دانند چگونه کاری را که در طراحی با دریم ویور Dreamweaver انجام داده ایم انجام دهند، می توانید کدهای HTML و CSS زیر را در سند های باز شده اضافه کنید. ابتدا HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/alegreya:n4:default.js" type="text/javascript"></script>
</head>
<body>
<div class="header-container">
<header class="site-header">
<h1>Dreamweaver Test Website</h1>
<nav class="main-navigation">
<ul>
<li><a href="#" target="#">Home</a></li>
<li><a href="#" target="#">Products</a></li>
<li><a href="#" target="#">Pricing</a></li>
<li><a href="#" target="#">Blog</a></li>
<li><a href="#" target="#">About</a></li>
</ul>
</nav>
</header>
<div class="page-title">
<h2 class="entry-title">Page Title Goes Here</h2>
<p class="page-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut quam id massa fermentum mattis. Phasellus ultricies eros id dictum placerat.</p>
</div>
</div>
<main class="main">
<div class="page-content">
<div class="entry-content">
<h2>Call to Action</h2>
<p>Donec luctus lorem eget tortor facilisis, id finibus velit lacinia. Aliquam sagittis odio at enim vulputate, sed varius dui auctor. Nulla dignissim gravida auctor. Proin a porttitor sem, vel vestibulum lectus. In sollicitudin, risus vel imperdiet consequat, lectus est venenatis nulla, sit amet viverra orci nibh sagittis lectus.</p>
<div class="cta-form">
<form>
<label for="name">Name</label>
<input type="text" id="name" name="fullname" placeholder="Your name..">
<label for="email">Email Address</label>
<input type="text" id="email" name="emailaddress" placeholder="Your email address..">
<input type="submit" value="Submit">
</form>
</div>
<p>Donec luctus lorem eget tortor facilisis, id finibus velit lacinia. Aliquam sagittis odio at enim vulputate, sed varius dui auctor. Nulla dignissim gravida auctor. Proin a porttitor sem, vel vestibulum lectus. In sollicitudin, risus vel imperdiet consequat, lectus est venenatis nulla, sit amet viverra orci nibh sagittis lectus.</p>
</div>
</div>
</main>
<footer class="site-footer">
<nav class="social menu">
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</nav>
<div class="footer-credits">
<p>Copyright © ۲۰۲۱ · My Imaginary Website</p>
</div>
</footer>
</body>
</html>
و سپس در فایل CSS:
@charset "utf-8";
body {
font-family: alegreya, sans-serif;
font-style: normal;
font-weight: 400;
margin: 0;
line-height: 1.625;
background-color: #f4f4f4;
}
.header-container {
background-size: cover;
background-position: center center;
color: #FFFFFF;
padding-bottom: 10vw;
background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%), url(images/background.jpg);
text-align: center;
}
.header-container .site-header {
padding: 20px 0;
margin: 0 auto;
max-width: 1200px;
text-transform: uppercase;
}
.main-navigation {
font-size: 16px;
font-weight: 400;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
font-family: sans-serif;
}
.main-navigation ul {
margin: 0;
}
.main-navigation ul li {
display: inline-block;
}
.main-navigation ul li a {
padding: 17px 37px;
text-decoration: none;
display: inline-block;
color: #fff;
}
.main-navigation ul li a:hover {
text-decoration: underline;
}
.header-container .page-title {
padding: 8vw 180px 0 180px;
}
.header-container .page-title h2 {
font-size: 4.5em;
margin-bottom: 0;
}
.page-description {
max-width: 600px;
margin-left: auto;
margin-right: auto;
font-size: 1.5em;
}
.page-content {
background-color: #fff;
margin: -50px auto 0;
max-width: 1000px;
padding-top: 2em;
column-gap: 2em;
-webkit-box-shadow: 0 25px 40px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 25px 40px 0 rgba(0, 0, 0, 0.05);
padding-bottom: 2em;
padding-right: 3em;
padding-left: 3em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
.entry-content h2 {
font-size: 3em;
}
.cta-form form {
max-width: 490px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.cta-form form input {
display: inline-block;
width: 100%;
padding: 18px 24px 14px;
min-height: 35px;
margin-bottom: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
}
.cta-form form input[type="submit"] {
border: none;
background-color: #A86500;
text-shadow: 0px 0px;
color: #FFFFFF;
text-transform: uppercase;
}
.cta-form form input[type="submit"]:hover {
background-color: #333333;
}
.site-footer {
padding-top: 60px;
padding-bottom: 60px;
text-align: center;
font-size: 16px;
line-height: 1;
font-family: sans-serif;
}
.social.menu ul {
text-transform: uppercase;
list-style-type: none;
padding: 0;
display: inline-block;
}
.social.menu ul li {
display: inline-block;
}
.social.menu ul li a {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
text-decoration: none;
color: rgba(168,101,0,1.00);
font-weight: 500;
}
.social.menu ul li a:hover {
color: #333333;
}
@media (max-width:375px){
.header-container .page-title {
padding-left: 0px;
padding-right: 0px;
}
.header-container .page-title h2 {
font-size: 2.5em;
}
}
در این آموزش به طراحی سایت با دریم ویور Dreamweaver پرداخته شد و مراحل ایجاد یک سایت در دریم ویور بطور کامل تشریح گردید. استفاده از نرم افزار دریم ویور کار طراحی را بسیار آسان و لذت بخش می کند به شرطی که پیش زمینه ای در مورد زبان های برنامه نویسی تحت وب داشته باشید.
بطور کلی شما برای طراحی یک سایت به زبان های نشانه گذاری HTML و CSS نیاز دارید پس آموزش HTML و CSS را در اولویت های یادگیری خود قرار دهید و دو زبان جاوا اسکریپت و php را به ترتیب برای برنامه نویسی سمت کاربر و سمت سرور نیز فراموش نکنید. در این آموزش آنچه برای طراحی یک سایت ساده لازم بود ارائه گردید و منابع مهم آموزشی برای یادگیری و درک بهتر از مهم ترین منابع آموزشی نظیر فرادرس قید شد. منتظر نظرات و پیشنهاد های شما عزیزان هستیم. موفق و پیروز باشید.
