إنشاء موقع دون معرفة HTML؟ يكتسب المحررون عبر الإنترنت لبناء مواقع الويب تقدمًا ، غالبًا بسبب القوالب الجميلة. إذا كنت تفضل عدم البدء بمثل هذا التصميم الجاهز ، والذي ينتهي به الأمر غالبًا في خيار مدفوع ، فإن RocketCake هو برنامج سطح مكتب يمكنك من خلاله إنشاء موقع جميل من لا شيء.
يحتوي برنامج اللغة الإنجليزية على خمسة عشر نموذجًا فقط (قوالب) للإلهام. الفكرة هي أنه باستخدام RocketCake ، يمكنك إنشاء موقعك الخاص بحيث يمكنك تحديثه بسهولة لاحقًا. RocketCake هو محرر WYSIWYG. لذلك ليس عليك كتابة أي أكواد HTML. تقوم بتجميع موقعك الخاص عن طريق وضع عناصر على سطح العمل ثم تحميل الحالة. تتضمن العناصر مربعات النص والأزرار والصور والقوائم وعروض الشرائح والأفلام ومقاطع الصوت والمزيد. ما يجعل RocketCake مميزًا هو أنه محرر لبناء ما يسمى بالمواقع المستجيبة. يعتبر موقع الويب سريع الاستجابة هذا مناسبًا للجوّال ، لأن التصميم يتكيف مع شاشة الجهاز الذي يزور به شخص ما الموقع.
ستظل صفحة الويب سريعة الاستجابة تبدو أنيقة ، سواء كنت تشاهدها على شاشة كبيرة أو شاشة هاتف ذكي صغيرة. لهذا الغرض ، سيقوم موقع الويب بضبط عدد من الأجزاء ، مثل حجم الخط وترتيب عناصر معينة وطريقة عرض القائمة على الشاشة.
قم بتنزيل RocketCake هنا. يوجد إصدار لنظام التشغيل Windows وآخر لنظام التشغيل macOS. في هذه الورشة نستخدم النسخة المجانية. هذا يجعل من السهل إنشاء موقع ويب سريع الاستجابة يعمل بسلاسة. هناك أيضًا إصدار احترافي من RocketCake ، والذي يكلف 39 يورو. يتيح لك الإصدار الاحترافي إنشاء عدد غير محدود من مواقع الويب. يوجد أيضًا دعم CSS ، والذي يمكنك من خلاله ضبط أنماط التخطيط بسرعة عبر موقع بأكمله. تم تحسين الإصدار 3.1 من RocketCake بحيث يحتل موقع الويب الخاص بك مرتبة أفضل مع Google ومحركات البحث الأخرى. علاوة على ذلك ، يتضمن الإصدار المجاني بعض الميزات التي كانت موجودة في السابق فقط في الإصدار المدفوع.
بيئة العمل والعرض
في الجزء العلوي من مساحة العمل ، يوجد شريط به أزرار لإضافة صفحة جديدة ، وللمعاينة باستخدام Internet Explorer ونشر موقع الويب على الإنترنت. على اليمين ستجد ملف مجموعة أدوات بكل العناصر التي يمكنك وضعها على صفحة الويب. في الجزء العلوي الأيسر ، ترى بنية جميع صفحات موقع الويب الخاص بك.
أدناه هي الخصائص. هنا تقوم بتغيير خصائص كل عنصر تحدده. لنفترض أنك تريد إضافة صورة إلى صفحة ، ثم حددت ملف الصورة في الخصائص ووضحت ما إذا كان يجب أن تحتوي الصورة على زوايا مستديرة أو حادة وما إلى ذلك ...
في الجزء السفلي تحدد عرض الشاشة. بشكل افتراضي ، هذا هو ملف سطح المكتب-عرض. من خلال القائمة المنسدلة الصغيرة الموجودة في أسفل اليسار ، يمكنك أيضًا العمل في عرض عدد من الأجهزة المحمولة الشهيرة ، مثل iPhone و iPad و Samsung Galaxy و LG ... إذا لم تجد العرض المطلوب في هذا القائمة ، يمكنك أيضًا تحديد Custom واستخدام شريط تمرير لتحديد العرض لتظهر على الشاشة. يعد إعداد العرض هذا مهمًا لتحديد نقاط التوقف ، والتي سنناقشها لاحقًا.
الألوان والصفحة الرئيسية
لنبدأ بالصفحة الرئيسية. في هذا المثال ، نقوم بإنشاء موقع ويب لفرقة روك طموحة. بدلاً من البدء بقالب ، اختر صفحة فارغة. سيتكيف قسم الخصائص مع كل عنصر تحدده. على سبيل المثال ، انقر فوق خلفية الصفحة الأولى ، ثم يمكنك الوصول إليها لون الخلفية حدد لون الخلفية. بشكل افتراضي هناك 000000 ، كود html للأبيض. بالنقر فوق المربع الذي يحتوي على النقاط الثلاث ، ستظهر منتقي الألوان. في الخصائص تقوم بإعطاء عنوان لصفحة الويب هذه. سيظهر قريبًا في الجزء العلوي من نافذة المتصفح. اترك اسم الصفحة الرئيسية على index.html. يبحث المستعرض دائمًا عن صفحة الفهرس ليتم عرضها كصفحة رئيسية.
تحته يمكنك تحديد ألوان الأنواع الأربعة من الارتباطات التشعبية. LinkColor يحدد لون الروابط التي لم تتم زيارتها بعد ، LinkColorActive يشير إلى الروابط التي يزورها شخص ما حاليًا ، LinkColorHover هو لون الارتباط الذي يشير إليه مؤشر الماوس و LinkColorVisited يشير إلى الروابط التي قام شخص ما بزيارتها بالفعل.
شريط التنقل وصورة المقدمة
لوضع شريط تنقل ، حدد العنصر في Toolset قائمة الإبحار ثم انقر فوق مساحة العمل. في شريط التنقل هذا ، تكتب عناصر القائمة التي تريد إنشاء صفحات ويب لها. اجعل أسماء تلك العناصر قصيرة. في مثالنا هذه هي الفرقة ، ومن ، وأين ، ومتى ، ولماذا والوسائط. في الجزء العلوي توجد الأزرار لتنسيق نص عناصر التنقل هذه. إذا نقرت على شريط التنقل نفسه ، فإنك تضبط لون وشكل الشريط في الخصائص. هذا كيف يمكنك الموضة اختر ل اللون والصورة والتدرج و زر منمق. في Gradient ، يمكنك تحديد درجات اللون للانتقال وفي الزر Styled Button ، يحصل شريط القائمة على مظهر كروي.
نريد أيضًا إضافة صورة لافتة أو مقدمة. لذلك قمت بوضع العنصر أولاً وعاء. في خصائص في اسم الصورةانقر فوق النقاط الثلاث لتحديد الصورة التي قمت بإعدادها مسبقًا. إذا كانت كبيرة جدًا ، يسأل RocketCake عما إذا كان بإمكانها تغيير حجم الصورة. حسنا. العنوان "Mad Dog" الذي تراه على اللافتة في الجزء العلوي من هذا المقال ، قمنا بإضافة الصورة بأنفسنا مع برنامج آخر. في الأساس ، يمكنك أيضًا إرسال رسالة نصية مع العنصر نص عائم ضع فوق الصورة. لسوء الحظ ، هذا يعطي نتيجة غير متوقعة على الأجهزة المحمولة.
عندما تشعر بالرضا ، احفظ ملف العمل في مكان ما على القرص الثابت كملف .rcd.
الأعمدة
أسفل الشعار ، تريد تزويد الصفحة الرئيسية بمحتوى في عمود واحد أو عمودين أو ثلاثة أعمدة. للقيام بذلك ، اختر العنصر في Toolset حاوية مع أعمدة. يسأل RocketCake عن عدد الأعمدة التي تريدها. يريد التطبيق أيضًا معرفة الحد الأدنى لعرض العمود. هنا نختار عمودين والإعداد الافتراضي هو 150. وهذا يعني أنه يمكن رؤية الأعمدة بدقة بجانب بعضها البعض على شاشة عريضة. إذا أصبح أحد الأعمدة على شاشة صغيرة أصغر من 150 بكسل ، فلن يظهر بجوار العمود السابق ولكن أسفله.
في هذا المثال ، قمنا بتعيين العمود الأيسر على MinWidth 500. 500 هي نقطة توقف العمود الأيسر. إذا أصبح عرض الشاشة صغيرًا جدًا ، فسيقرأ الزائر محتويات العمود الأيمن أسفل العمود الأيسر. بالإضافة إلى ذلك ، قمنا بتعيين لافتة إلى ماكسويدث 1000.
لجعل العمود الأيمن أضيق من العمود الأيسر ، انقر أولاً على العمود الأيسر. ال بحجم هل هناك بشكل افتراضي 50٪ سيارة. على سبيل المثال ، قم بتغيير ذلك إلى 70٪ سيارة. يؤدي هذا إلى تعويم العمود الثاني مؤقتًا أسفل الأول. يمكنك حل هذا عند النقر فوق العمود الثاني وفي الحجم 30٪ سيارة يملأ. سيعطيك هذا نسبة 70/30. ثم تقوم بملء الأعمدة بالنص ، والتي تصممها أيضًا باستخدام معالج الكلمات. في مثل هذا العمود يمكنك أيضًا العناوين (أكواب). العنوان 1 ، 2 ، 3 يحافظ على الأكواب تبدو جيدة.
لإضافة صورة ، ضع المؤشر في النص وانقر في Toolset on صورة. ثم انتقل إلى الموقع حيث تنتظر الصورة. انقر فوق الزر بين الحين والآخر معاينة لعرض عملك في متصفح.
إذا قمت بالنقر فوق مثل هذا العمود النصي ، فسترى في الخصائص أن ملف حشوة الإعداد الافتراضي هو 10 ، 10 ، 10 ، 10. المساحة المتروكة هي المسافة من النص إلى حد العمود. يخزن الرقم الأول في الأعلى ، والثاني في الأسفل ، والثالث في اليمين ، والرابع في اليسار. إذا كنت تريد المزيد من المساحة المتروكة على الجانب الأيمن في مربع نص ، فيجب عليك تعيين القيمة الثالثة على 20 ، على سبيل المثال.
وبالتالي فإن الحشوة هي المسافة الموجودة داخل الصندوق ، هامش هي المسافة من الخارج. إذا كنت تريد مساحة أكبر بين الجزء السفلي من الصورة وأعلى النص الموجود أسفلها ، فقم بتغيير الهامش من 0 ، 0 ، 0 ، 0 إلى ، على سبيل المثال ، 0.10 ، 0 ، 0.
صفحات إضافية
الآن بعد أن أصبحت الصفحة الرئيسية جاهزة ، ستحتاج بالطبع إلى إنشاء المزيد من الصفحات لمشروعك. هذا يذهب مع الزر إضافة صفحة. يسألك البرنامج عما إذا كنت تريد إنشاء صفحة جديدة تمامًا أو نسخة من صفحة ويب موجودة بالفعل. في هذا المثال سوف نستخدم نمط صفحتنا الرئيسية: الخلفية السوداء ، الخط ، حجم الخط ، عرض الحاوية ... لذلك ننتقل إلى الخيار الثاني. ثم نقوم بإزالة الشعار وتغيير محتويات حاوية النص.
إذا كنت تريد تذييلًا أسفل كل صفحة ، فأضف تذييلًا هناك أيضًا وعاء أو حاوية مع أعمدة واكتب ، على سبيل المثال ، معلومات الاتصال أو معلومات حقوق النشر. لا يمكن إدخال الأحرف الخاصة مثل رمز حقوق النشر مباشرة من لوحة المفاتيح. في RocketCake ، تختار هذه الأحرف الخاصة عبر القائمة إدراج ، إدراج رمز النص.
الروابط
بالطبع تريد أن تشير الأزرار الموجودة في قائمة التنقل إلى الصفحات الصحيحة. للقيام بذلك ، حدد أولاً الزر في قائمة التنقل ثم انقر فوق الزر مع السلسلة. أو يمكنك النقر بزر الماوس الأيمن واختيار أدخل ارتباط تشعبي. يفتح هذا مربع اختيار حيث يتعين عليك الاختيار بين الارتباط بصفحة ويب خارجية أو عنوان بريد إلكتروني أو صفحة من هذا المشروع أو ملف معين. حدد الخيار صفحة في المشروع. سترى بعد ذلك قائمة بصفحات الويب التي تم إنشاؤها والتي تحدد فيها الصفحة الصحيحة.
نحلة استهداف اختر فتح صفحة الويب في نافذة متصفح جديدة أو في نافذة المتصفح المفتوحة. هذا الخيار الأخير شائع. إذا قمت بالضغط باستمرار على زر الماوس الأيسر أثناء الإشارة إلى زر من قائمة التنقل ، فإنك تضيف قوائم فرعية تشير بعد ذلك إلى صفحات الويب الموجودة بنفس الطريقة.
الصفحات الرئيسية
يعمل RocketCake أيضًا مع ما يسمى بالصفحات الرئيسية. إذا كنت تقوم بإنشاء موقع ويب به العديد من الصفحات ، فستعمل هذه التقنية على تسريع التنسيق بشكل كبير. الصفحة الرئيسية هي نموذج منسق يعمل كقالب لصفحات أخرى. لذلك فإن هذه الصفحة الرئيسية ليست صفحة ويب عادية. إليك كيفية إنشاء صفحة: إنشاء صفحة ويب جديدة ، ووضع القائمة المنسدلة ، والتأكد من أن القائمة تعمل كما ينبغي ، وتنسيق هذه الصفحة بدون محتوى نصي حقيقي. ثم تقوم بإضافة أ من Toolset عنصر نائب للمحتوى فوق. بدون هذا العنصر ، لن تعمل الصفحة الرئيسية. امنح هذه الصفحة الخاصة اسمًا ذا معنى ، على سبيل المثال masterpage.html. ثم تقوم بإنشاء صفحة ويب واحدة أو أكثر لا تزودها بتخطيط.
يمكنك كتابة نص وإضافة صورة إذا لزم الأمر وحفظ هذه الصفحة. في هذه الصفحات التي تحتوي على محتوى ، انظر إلى الخصائص الموجودة في الحقل في الأسفل صفحة رئيسية. هناك تقوم بتنشيط الخيار UseMasterPage. إذا قمت بتحديد المربع ، فسيظهر مربع جديد تحدد فيه اسم الصفحة الرئيسية المقصودة. يمكنك استخدام صفحات رئيسية متعددة. في الوقت الحالي ، لا ترى أي شيء حتى الآن ، ولكن إذا قمت بالنقر فوق الزر معاينة انقر ، ستلاحظ أن محتوى هذه الصفحة منشور بدقة في Content Placeholder للصفحة الرئيسية المحددة.
أدخل الوسائط
باستخدام RocketCake ، يمكنك إضافة مقاطع فيديو YouTube عن طريق تحديد العنصر في Toolset فيديو يوتيوب لتحديد. ثم أدخل عنوان الويب الخاص بالفيديو في Properties. بنفس السهولة هو إضافة معرض للصور. بعدك معرض الصور اختر من Toolset ، حدد الصور المختلفة في المربعات ImageFile1 ، ImageFile2 وهكذا دواليك. هناك عدة طرق لتكبير الصور في المعرض. على سبيل المثال ، يمكنك فتحها في نافذة جديدة ، في نافذة منبثقة ، لكننا نحب الأفضل كصورة كبيرة على طبقة منفصلة.
للنشر
انتهيت؟ ثم يمكنك نشر الموقع على الإنترنت أو على قرص محلي. تم تجهيز RocketCake بوظيفة ftp لوضع كل شيء بدقة على الخادم في المجلد الذي يتيحه مزودك. أدخل عنوان بروتوكول نقل الملفات واسم المستخدم وكلمة المرور. استخدم الخيار حفظ كلمة المرور لحفظ كلمة المرور. عندما تنشر موقع الويب على محرك الأقراص الثابتة ، يمكنك زيارة الصفحة الرئيسية عن طريق فتح ملف index.html باستخدام برنامج الإنترنت الخاص بك.
