في عالم من بناة مواقع السحب والإفلات ، قام Adobe Dreamweaver بعمل جيد ليظل وثيق الصلة وسط المنافسة. مليء بالميزات الرائعة والكثير من الأدوات لتسهيل حياتك ، يعد هذا البرنامج خيارًا رائعًا لمصممي ومطوري الويب.

ولكن كيف يمكنك إنشاء موقع الويب الأول الخاص بك باستخدام Dreamweaver؟

الشروع في العمل مع Dreamweaver

تحتاج إلى الحصول على نسخة من Adobe Dreamweaver قبل أن تتمكن من بدء العمل بها ، ولكن يتوفر إصدار تجريبي مجاني.

توجه إلى أدوبي موقع الويب ، قم بتسجيل الدخول أو تسجيل حساب وتنزيل أداة Adobe Creative Cloud للبدء. من هنا ، يمكنك تنزيل Adobe Dreamweaver والبدء باستخدام الدليل الكامل.

سيوضح لك هذا الدليل كيفية إنشاء موقع ويب أساسي باستخدام ملفات قالب Dreamweaver كأساس له. يمكنك العثور على ملفات المشروع الكاملة على مستودع جيثب هذا.

الخطوة 1: قم بإنشاء موقع Dreamweaver

افتح Adobe Dreamweaver وانتقل إلى ملف موقع القائمة أعلى الصفحة. يختار موقع جديد، ثم اختر اسمًا لموقعك على الويب واختر موقع ملف له.

الخطوة 2: قم بإنشاء ملف قالب

بعد ذلك ، حان الوقت لإنشاء ملف نموذج لموقعك الإلكتروني الجديد. تعمل ملفات القوالب بشكل مشابه للقوالب التي تستخدمها أنظمة CMS مثل WordPress و Shopify ، أنت فقط من تصنعها بنفسك.

instagram viewer

انقر فوق خلق جديد إبداع جديد او اذهب الى ملف > جديد و اختار قالب HTML من نوع الوثيقة قائمة.

سيؤدي هذا إلى إنشاء نموذج أساسي مع وجود بعض HTML بالفعل. ستستخدم HTML هذا لمشروعك ، لذا من المفيد إبقائه في مكانه للخطوات التالية.

​​​​​​

الخطوة 3: إنشاء رأس في النموذج

حان الوقت الآن لإنشاء قسم القائمة / الرأس على موقع الويب في النموذج الذي أنشأته للتو. اذهب إلى إدراج في الجزء العلوي من الشاشة وحدد رأس من القائمة.

سيتم فتح مربع حوار في هذه المرحلة. أضف اسمًا لفئة العنوان الجديد وانقر نعم لإضافة الكود إلى HTML الخاص بك. يجب أن يضع الرمز الجديد تلقائيًا داخل ملف العلامات ، ولكن يمكنك نقلها إذا احتجت إلى ذلك.

بعد ذلك ، يجب أيضًا إضافة عنصر div لشعار الموقع وعنصر تنقل لقائمة الموقع. اذهب إلى إدراج القائمة وحدد Div، ثم ارجع إلى إدراج القائمة وحدد التنقل. يحتاج كل من هذين العنصرين إلى اسم فئة خاص به.

كمرحلة أخيرة في هذه العملية ، أضفنا بعض خيارات القائمة إلى عنصر التنقل الخاص بنا. للقيام بذلك ، انتقل إلى إدراج واختر ارتباط تشعبي. أضفنا خمسة ارتباطات تشعبية إلى عنوان موقعنا: Home و Lion و Tiger و Jaguar و House Cat.

الصفحات التي سيكون لها روابط في رأس الصفحة غير موجودة بعد ، لذا اترك href الخاصية فارغة حتى تقوم بإنشائها.

الخطوة 4: أضف ورقة أنماط لـ CSS

كما ترى ، موقع الويب هذا لا يبدو جيدًا كما هو. سيحل القليل من CSS هذه المشكلة ، ويمكنك إضافة ورقة أنماط بسهولة في Dreamweaver. اذهب إلى مصمم CSS على الجانب الأيمن من الشاشة وانقر فوق زائد بجوار المصادر. تحتاج فقط إلى اختيار اسم لورقة الأنماط الخاصة بك وترك باقي الإعدادات كما هي.

أول شيء يجب القيام به هو تحويل الرأس إلى Flexbox. Flexbox هو مجرد طريقة واحدة لتخطيط صفحة ويب باستخدام CSS. إلى جانب ذلك ، يتم تعيين خط الموقع ، ويتم تعيين خلفية سوداء ، ويتم إجراء العديد من التغييرات الأخرى لجعل الموقع يبدو أفضل. يمكنك رؤية كود CSS الكامل في نهاية المقالة.

الخطوة 5: أضف مناطق قابلة للتحرير إلى القالب

تنشئ المناطق القابلة للتحرير أقسامًا من HTML قابلة للتحرير عند استخدام القالب لإنشاء صفحات أخرى. يتناسب محتوى صفحتنا الرئيسية تمامًا مع منطقة مثل هذه. اذهب إلى إدراج > قالب > منطقة قابلة للتحرير لإضافة منطقة قابلة للتحرير إلى صفحتك.

الخطوة 6: إضافة صورة / محتوى نصي إلى القالب

المنطقة القابلة للتحرير التي أضفتها للتو قابلة للاستخدام بدون أي HTML إضافي ، ولكن لا يزال بإمكانك إضافة بعضها لتعديلها عند إنشاء صفحات فردية. للبدء ، انتقل إلى إدراج واختر Div لإضافة عنصر div جديد إلى موقع الويب الخاص بك.

سيعمل هذا كحاوية لمحتوى النص على الصفحة ، بالإضافة إلى مكان لإضافة صورة خلفية. يحتوي هذا العنصر على فئة ومعرف بحيث تحتوي الصفحات المختلفة على خصائص CSS مختلفة. هؤلاء أنماط خلفية فريدة من نوعها في CSS تعتبر رائعة إذا كنت تريد نقل موقع Dreamweaver الخاص بك إلى المستوى التالي.

بعد ذلك ، انتقل إلى إدراج > العناوين > H1 لإضافة عنوان داخل عنصر div الذي أضفته للتو. يحتاج كل من هذين العنصرين إلى بعض CSS للعمل بشكل صحيح. يحتوي div على قيم صورة الخلفية وحجم الخلفية والارتفاع. اذهب إلى ملف > احفظ الكل للتأكد من تحديث القالب الخاص بك.

​​​​​​

يمكنك إضافة صور من أي مكان على شبكتك المحلية أو الإنترنت ، ولكن من الأفضل حفظ الصور داخل ملفات موقع الويب للوصول إليها بسهولة.

الخطوة 7: أضف صفحات بالقالب

الآن بعد أن أصبح لديك قالب في مكانه ، يمكنك البدء في إضافة بعض الصفحات. اذهب إلى ملف > جديد واختر لغة البرمجة تحت نوع الوثيقة. أضف عنوان لكل صفحة تضيفها قبل الضرب خلق.

الصفحة الجديدة بيضاء ولا تحتوي على نموذجنا حتى الآن. بمجرد فتح صفحتك الجديدة في Dreamweaver ، انتقل إلى أدوات > القوالب وانقر فوق تطبيق القالب على الصفحة. اختر قالبك من القائمة وانقر يختار لتحميل القالب الخاص بك. أخيرًا ، انتقل إلى ملف > حفظ باسم واختر اسمًا لصفحتك الجديدة قبل حفظها.

كرر هذه العملية حتى يكون لديك صفحات كافية لتلبية احتياجاتك. لست مضطرًا إلى الالتزام بقالب واحد لهذا الغرض ؛ يمكنك إضافة أشكال جديدة لتخطيطات صفحات مختلفة.

الخطوة 8: أضف روابط الصفحة إلى النموذج

مع إضافة صفحاتك ، يمكنك تغيير روابط التنقل في النموذج الخاص بك بحيث ترتبط بالصفحات الصحيحة. ارجع إلى القالب الخاص بك وابحث عن علامات A التي أضفتها سابقًا. احذف رابط العنصر النائب وانقر على علامات الاقتباس لفتح ملف تصفح قائمة. من هنا ، يمكنك تحديد الصفحة الصحيحة لكل رابط من روابطك.

الخطوة 9: إصلاح CSS / HTML في الصفحات الجديدة

ستبدو كل صفحة بنفس الشكل في الوقت الحالي. هناك بعض الخطوات التي يجب اتخاذها للتأكد من أن لديهم المحتوى الخاص بهم ؛ اتبع الخطوات أدناه لإنهاء موقع الويب الجديد الخاص بك.

  • قم بتغيير معرّف عنصر div للمحتوى في كل صفحة لعكس عنوان الصفحة
  • أضف كود CSS لمعرف العنصر الجديد بصورة خلفية مختلفة
  • تغيير العنوان في كل صفحة

الخطوة 10: اختبر موقع الويب في متصفحك

يمكنك اختبار موقع الويب الجديد الخاص بك في متصفح الويب الذي تختاره مباشرةً من Adobe Dreamweaver. اذهب إلى ملف > معاينة في الوقت الفعلي وحدد المتصفح الذي تختاره لعرض موقع الويب الخاص بك. يعد هذا أمرًا رائعًا لاختبار CSS أو رمز آخر غير متوافق مع كل متصفح.

الآن أنت فقط بحاجة إلى مكان ما لاستضافة موقع الويب الخاص بك. استضافة موقع ثابت باستخدام AWS S3 مكان رائع للبدء.

كود HTML و CSS

<! DOCTYPE html>
<لغة البرمجة>
<رأس>
<meta charset ="UTF-8">
<! - اسم TemplateBeginEditable ="العنوان" -->
<لقب>وثيقة بدون عنوان</title>
<! - TemplateEndEditable ->
<رابط href ="../page-css.css" rel ="ورقة الأنماط" اكتب ="نص / المغلق">
</head>
<هيئة>
<فئة الرأس ="العنوان الرئيسي">
<فئة div ="شعار الموقع">MakeUseOf مثال الموقع</div>
<فئة الملاحة ="القائمة الرئيسية">
<أ href ="../Home.html">مسكن</أ><أ href ="../Lion.html">أسد</أ><أ href ="../Tiger.html">نمر</أ><أ href ="../Jaguar.html">جاكوار</أ><أ href ="../House Cat.html">قطة منزلية</أ>
</nav>
</header>
<! - اسم TemplateBeginEditable ="MainContentRegion" -->
<فئة div ="المحتوى الرئيسي" معرف ="أسد">
<h1>هذا أسد!</h1>
</div>
<! - TemplateEndEditable ->
</body>
</html>

هذا HTML يبني الموقع النهائي لمشروعنا. يمكنك تفكيكها لمعرفة كيفية عملها ، لكننا نشجعك على إنشاء HTML الخاص بك لموقع الويب الخاص بك.

تضمين التغريدة "UTF-8";
هيئة {
 الهامش: 0؛
 الخلفية: أسود ؛
 عائلة الخطوط: جوثام ، "هيلفيتيكا نيو"، Helvetica، Arial، "بلا الرقيق";
}
.main-header {
 عرض: فليكس ؛
 الخلفية: أسود ؛
 الحشو: 20 بكسل ؛
}
.site-logo {
 العرض: 30٪؛
 اللون الابيض؛
 وزن الخط: عريض ؛
 تحويل النص: الأحرف الكبيرة ؛
}
.القائمة الرئيسية {
 العرض: 70٪؛
 محاذاة النص: صحيح ؛
}
.القائمة الرئيسيةأ {
 الحشو: 10 بكسل ؛
 زخرفة النص: لا شيء ؛
 اللون الابيض؛
}
.المحتوى الرئيسي {
 الارتفاع: 100 فولت
 الحشو: 20 بكسل ؛
 حجم الخلفية: غطاء ؛
}
.المحتوى الرئيسيh1 {
 اللون الابيض؛
 حجم الخط: 10rem ؛
 تحويل النص: الأحرف الكبيرة ؛ 
}
#أسد {
 صورة الخلفية: url ("Images / largelion.png");
}
#نمر {
 صورة الخلفية: url ("Images / tiger.png");
}
# جاكوار {
 صورة الخلفية: url ("Images / jaguar.png");
}
#قطة منزلية {
 صورة الخلفية: url ("Images / housecat.png");
}
# كلكاتس {
 صورة الخلفية: url ("Images / loadsofcats.png");
}

هذا CSS هو أيضًا جزء من المشروع النهائي. مثل HTML الذي قمنا بتغطيته ، يمكنك اللعب بهذا الرمز لجعل هذا الموقع ملكًا لك.

بناء مواقع الويب باستخدام Adobe Dreamweaver

قد لا يبدو Dreamweaver سهل الاستخدام مثل أدوات مثل WordPress أو Squarespace ، ولكنه يمنحك المزيد من القوة. يعد هذا الدليل نقطة انطلاق رائعة ، ولكن هناك الكثير لتتعلمه وهو يستحق استكشاف Dreamweaver بنفسك.