كيفية إنشاء موقع ويب من الصفر باستخدام Dreamweaver
Adobe Dreamweaver هو أداة تصميم ويب راسخة يمكنك استخدامها لإنشاء موقع ويب كامل ، دون المساومة على المرونة.
في عالم من بناة مواقع السحب والإفلات ، قام Adobe Dreamweaver بعمل جيد ليظل وثيق الصلة وسط المنافسة. مليء بالميزات الرائعة والكثير من الأدوات لتسهيل حياتك ، يعد هذا البرنامج خيارًا رائعًا لمصممي ومطوري الويب.
ولكن كيف يمكنك إنشاء موقع الويب الأول الخاص بك باستخدام Dreamweaver؟
الشروع في العمل مع Dreamweaver
تحتاج إلى الحصول على نسخة من Adobe Dreamweaver قبل أن تتمكن من بدء العمل بها ، ولكن يتوفر إصدار تجريبي مجاني.
توجه إلى موقع Adobe على الويب ، وقم بتسجيل الدخول أو تسجيل حساب ، وقم بتنزيل أداة Adobe Creative Cloud للبدء. من هنا ، يمكنك تنزيل Adobe Dreamweaver والبدء باستخدام الدليل الكامل.
سيوضح لك هذا الدليل كيفية إنشاء موقع ويب أساسي باستخدام ملفات قالب Dreamweaver كأساس له. يمكنك العثور على ملفات المشروع الكاملة في مستودع GitHub هذا.
الخطوة 1: قم بإنشاء موقع Dreamweaver
افتح Adobe Dreamweaver وانتقل إلى قائمة Site في أعلى الصفحة. حدد موقع جديد ، ثم اختر اسمًا لموقعك على الويب واختر موقع ملف له.
الخطوة 2: قم بإنشاء ملف قالب
بعد ذلك ، حان الوقت لإنشاء ملف نموذج لموقعك الإلكتروني الجديد. تعمل ملفات القوالب بشكل مشابه للقوالب التي تستخدمها أنظمة CMS مثل WordPress و Shopify ، أنت فقط من تصنعها بنفسك.
انقر فوق إنشاء جديد أو انتقل إلى ملف> جديد واختر قالب HTML من قائمة نوع المستند.
سيؤدي هذا إلى إنشاء نموذج أساسي مع وجود بعض HTML بالفعل. ستستخدم HTML هذا لمشروعك ، لذا من المفيد إبقائه في مكانه للخطوات التالية.
الخطوة 3: إنشاء رأس في النموذج
حان الوقت الآن لإنشاء قسم القائمة / الرأس على موقع الويب في النموذج الذي أنشأته للتو. انتقل إلى “إدراج” في الجزء العلوي من الشاشة وحدد “رأس الصفحة” من القائمة.
سيتم فتح مربع حوار في هذه المرحلة. أضف اسمًا لفئة العنوان الجديد وانقر على “موافق” لإضافة الرمز إلى HTML. يجب أن يضع الرمز الجديد تلقائيًا داخل علامات <body> </body> ، ولكن يمكنك نقله إذا كنت بحاجة إلى ذلك.
بعد ذلك ، يجب أيضًا إضافة عنصر div لشعار الموقع وعنصر تنقل لقائمة الموقع. انتقل إلى قائمة “إدراج” وحدد Div ، ثم ارجع إلى قائمة “إدراج” وحدد “التنقل”. يحتاج كل من هذين العنصرين إلى اسم فئة خاص به.
كمرحلة أخيرة في هذه العملية ، أضفنا بعض خيارات القائمة إلى عنصر التنقل الخاص بنا. للقيام بذلك ، انتقل إلى إدراج وحدد ارتباط تشعبي. أضفنا خمسة ارتباطات تشعبية إلى عنوان موقعنا: Home و Lion و Tiger و Jaguar و House Cat.
الصفحات التي ستحتوي على ارتباطات غير موجودة بعد ، لذا اترك الخاصية href فارغة حتى تقوم بإنشائها.
الخطوة 4: أضف ورقة أنماط لـ CSS
كما ترى ، موقع الويب هذا لا يبدو جيدًا كما هو. سيحل القليل من CSS هذه المشكلة ، ويمكنك إضافة ورقة أنماط بسهولة في Dreamweaver. انتقل إلى CSS Designer على الجانب الأيمن من الشاشة وانقر فوق أيقونة Plus الموجودة بجوار Sources. تحتاج فقط إلى اختيار اسم لورقة الأنماط الخاصة بك وترك باقي الإعدادات كما هي.
أول شيء يجب فعله هو تحويل الرأس إلى Flexbox. Flexbox هو مجرد طريقة واحدة لتخطيط صفحة ويب باستخدام CSS. إلى جانب ذلك ، يتم تعيين خط الموقع ، ويتم تعيين خلفية سوداء ، ويتم إجراء العديد من التغييرات الأخرى لجعل الموقع يبدو أفضل. يمكنك رؤية كود CSS الكامل في نهاية المقالة.
الخطوة 5: أضف مناطق قابلة للتحرير إلى القالب
تنشئ المناطق القابلة للتحرير أقسامًا من HTML قابلة للتحرير عند استخدام القالب لإنشاء صفحات أخرى. يتناسب محتوى صفحتنا الرئيسية تمامًا مع منطقة مثل هذه. انتقل إلى إدراج> قالب> منطقة قابلة للتحرير لإضافة منطقة قابلة للتحرير إلى صفحتك.
الخطوة 6: إضافة صورة / محتوى نصي إلى القالب
المنطقة القابلة للتحرير التي أضفتها للتو قابلة للاستخدام بدون أي HTML إضافي ، ولكن لا يزال بإمكانك إضافة بعضها لتعديلها عند إنشاء صفحات فردية. للبدء ، انتقل إلى “إدراج” وحدد Div لإضافة عنصر div جديد إلى موقع الويب الخاص بك.
سيعمل هذا كحاوية لمحتوى النص على الصفحة ، بالإضافة إلى مكان لإضافة صورة خلفية. يحتوي هذا العنصر على فئة ومعرف بحيث تحتوي الصفحات المختلفة على خصائص CSS مختلفة. تعد أنماط الخلفية الفريدة هذه رائعة إذا كنت تريد نقل موقع Dreamweaver الخاص بك إلى المستوى التالي.
بعد ذلك ، انتقل إلى Insert> Headings> H1 لإضافة عنوان داخل عنصر div الذي أضفته للتو. يحتاج كل من هذين العنصرين إلى بعض CSS للعمل بشكل صحيح. يحتوي عنصر div على قيم صورة الخلفية وحجم الخلفية والارتفاع. انتقل إلى ملف> حفظ الكل للتأكد من تحديث القالب الخاص بك.
يمكنك إضافة صور من أي مكان على شبكتك المحلية أو الإنترنت ، ولكن من الأفضل حفظ الصور داخل ملفات موقع الويب للوصول إليها بسهولة.
الخطوة 7: أضف صفحات بالقالب
الآن بعد أن أصبح لديك قالب في مكانه ، يمكنك البدء في إضافة بعض الصفحات. انتقل إلى ملف> جديد وحدد HTML ضمن نوع المستند. أضف عنوانًا لكل صفحة تضيفها قبل الضغط على إنشاء.
الصفحة الجديدة بيضاء ولا تحتوي على نموذجنا حتى الآن. بمجرد فتح صفحتك الجديدة في Dreamweaver ، انتقل إلى Tools> Templates وانقر فوق Apply Template to Page. اختر قالبك من القائمة وانقر فوق “تحديد” لتحميل القالب الخاص بك. أخيرًا ، انتقل إلى ملف> حفظ باسم واختر اسمًا لصفحتك الجديدة قبل حفظها.
كرر هذه العملية حتى يكون لديك صفحات كافية لتلبية احتياجاتك. ليس عليك التمسك بقالب واحد لهذا ؛ يمكنك إضافة أخرى جديدة لتخطيطات صفحات مختلفة.
الخطوة 8: أضف روابط الصفحة إلى النموذج
مع إضافة صفحاتك ، يمكنك تغيير روابط التنقل في النموذج الخاص بك بحيث ترتبط بالصفحات الصحيحة. ارجع إلى القالب الخاص بك وابحث عن علامات A التي أضفتها سابقًا. احذف رابط العنصر النائب وانقر فوق علامات الاقتباس لفتح قائمة التصفح. من هنا ، يمكنك تحديد الصفحة الصحيحة لكل رابط من روابطك.
الخطوة 9: إصلاح CSS / HTML في الصفحات الجديدة
ستبدو كل صفحة بنفس الشكل في الوقت الحالي. هناك بعض الخطوات التي يجب اتخاذها للتأكد من أن لديهم المحتوى الخاص بهم ؛ اتبع الخطوات أدناه لإنهاء موقع الويب الجديد الخاص بك.
- قم بتغيير معرّف عنصر div للمحتوى في كل صفحة لعكس عنوان الصفحة
- أضف كود CSS لمعرف العنصر الجديد بصورة خلفية مختلفة
- تغيير العنوان في كل صفحة
الخطوة 10: اختبر موقع الويب في متصفحك
يمكنك اختبار موقع الويب الجديد الخاص بك في متصفح الويب الذي تختاره مباشرةً من Adobe Dreamweaver. انتقل إلى File> Real-Time Preview وحدد المتصفح الذي تختاره لعرض موقع الويب الخاص بك. يعد هذا أمرًا رائعًا لاختبار CSS أو رمز آخر غير متوافق مع كل متصفح.
الآن أنت فقط بحاجة إلى مكان ما لاستضافة موقع الويب الخاص بك. تعد استضافة موقع ثابت باستخدام AWS S3 مكانًا رائعًا للبدء.
كود HTML و CSS
<!doctype html>
<html>
<head>
<meta charset=“utf-8“>
<!– TemplateBeginEditable name=“doctitle“ —>
<title>Untitled Document</title>
<!– TemplateEndEditable —>
<link href=“../page-css.css“ rel=“stylesheet“ type=“text/css“>
</head>
<body>
<header class=“main-header“>
<div class=“site-logo“>MakeUseOf Example Site</div>
<nav class=“main-menu“>
<a href=“../Home.html“>Home</a><a href=“../Lion.html“>Lion</a><a href=“../Tiger.html“>Tiger</a><a href=“../Jaguar.html“>Jaguar</a><a href=“../House Cat.html“>House Cat</a>
</nav>
</header>
<!– TemplateBeginEditable name=“MainContentRegion“ —>
<div class=“main-content“ id=“lion“>
<h1>This is a lion!</h1>
</div>
<!– TemplateEndEditable —>
</body>
</html>
هذا HTML يبني الموقع النهائي لمشروعنا. يمكنك تفكيكها لمعرفة كيفية عملها ، لكننا نشجعك على إنشاء HTML الخاص بك لموقع الويب الخاص بك.
@charset “utf-8“;
body {
margin: 0;
background: black;
font-family: Gotham, “Helvetica Neue“, Helvetica, Arial, “sans-serif“;
}
.main-header {
display: flex;
background: black;
padding: 20px;
}
.site-logo {
width: 30%;
color: white;
font-weight: bold;
text-transform: uppercase;
}
.main-menu {
width: 70%;
text-align: right;
}
.main-menu a {
padding: 10px;
text-decoration: none;
color: white;
}
.main-content {
height: 100vh;
padding: 20px;
background-size: cover;
}
.main-content h1 {
color: white;
font-size: 10rem;
text-transform: uppercase;
}
#lion {
background-image: url(“Images/largelion.png“);
}
#tiger {
background-image: url(“Images/tiger.png“);
}
#jaguar {
background-image: url(“Images/jaguar.png“);
}
#housecat {
background-image: url(“Images/housecat.png“);
}
#allcats {
background-image: url(“Images/loadsofcats.png“);
}
هذا CSS هو أيضًا جزء من المشروع النهائي. مثل HTML الذي قمنا بتغطيته ، يمكنك اللعب بهذا الرمز لجعل هذا الموقع ملكًا لك.
بناء مواقع الويب باستخدام Adobe Dreamweaver
قد لا يبدو Dreamweaver سهل الاستخدام مثل أدوات مثل WordPress أو Squarespace ، ولكنه يمنحك المزيد من القوة. يعد هذا الدليل نقطة انطلاق رائعة ، ولكن هناك الكثير لتتعلمه وهو يستحق استكشاف Dreamweaver بنفسك.
