المغلق في الأساسيات Adobe Dreamweaver

html والمغلق في تعليمي أساسيات Adobe Dreamweaver

ويهدف هذا البرنامج التعليمي لإدخال مفاهيم تستخدم في المغلق Adobe Dreamweaver و html الشبكة العالمية للمصممين الذين ليسوا على دراية المغلق في تصميم المواقع الإلكترونية. تقف الشلشلة المغلق ورقة نمط ونظام التصميم مشيرا إلى صفحات موقعك ومحتويات صفحة الويب.

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

ابراهام chaffin creativecow.net, Cambria, كاليفورنيا في الولايات المتحدة الأمريكية. © 2007 creativecow.net. جميع الحقوق محفوظة.

html وثائق:
إنشاء وثيقة جديدة فارغة ثم احفظه لبدء عملك. إنني أميل دائما إلى توفير الوثائق قبل أن أفعل أي شيء حتى أتمكن من انقاذ سريع من وقت لآخر باستخدام الاختصار (cntrl +). عند إنشاء فارغة في وثيقة من وثائق Dreamweaver صفحة الويب الخاصة بك بالفعل محتوى فيه, انك لا يمكن ان نراها في تصميم واسطة. للإطلاع على محتوى يمكنك استخدام الاختصار (cntrl + ~) للتبديل بين طريقة تصميم رمز واسطة أو اذهب إلى القائمة عرض رمز أو قائمة العرض تصميم.

ما الذي يتعين عليك أن نرى شيئا من هذا القبيل يجب ان تنظر في هذا:

هذه هي البداية في إطار الخاص بك html وثيقة ، بل هي تراكم لكثير من العلامات. بداية كل الوسم هذا ويبدو ان نهاية كل الوسم يبدو / هذه. كله الوثيقة المؤلفة من html الوسم أعلاه يبدو html xmlns = " http://www.W3.org / 1999/xhtml " لأن لها في ذلك تعديل xmlns. نهاية الوسم هو في قاع الوثيقة / html. في ما بين بداية وانهاء html الوسم ولدان الأولية فإن head العلامات والعلامات جسم. فإن head الوسم لا ينظر إليه ، ولكن العديد من اللوازم الأساسية والصفات التعريفية لما جسم الوسم العناصر سيبدو. مضمون في جسم الوسم هو مضمون هذا هو الواقع وضوحا من خلال المتصفح.

عناصر المغلق:
قبل إدراج أي عناصر دعونا خلق النمط المغلق. الضغط (التحول + F11) المسامير وتجدر الاشارة أساليب الإطار أو اذهب إلى تعديل القائمة أساليب المغلق. في الأسفل هناك حق قليلا ما يشبه الأيقونة . وبذلك يرتفع حتى â € € œnew المغلق ruleâ مربع حوار. لبدء ولتعيين حكم المغلق ل جسم الوسم وجعل لون الخلفية خارج بيضاء بدلا من صارخ البيضاء. حدد "علامة" من أجل "اختيار نوع" الإذاعية. من "الوسم" القائمة المنسدلة اختيار "الهيئة" منتق. حدد "هذه الوثيقة فقط" من أجل "تحديد" في الإذاعة وانقر فوق "موافق".

ذات مرة كنت قد نقرت "موافق" Dreamweaver وتضيف المدونة الخاصة بك في html إعداد ملف لتعديل جسم الوسم باستخدام المغلق.

هذا وسوف طرح "المغلق سيادة لتعريف هيئة" نافذة للحوار يسمح لك لتحديد الخاصة بك أن تختار من "خلفية" من فئة العمود واختيار جدا ضوء أصفر مع لون الخلفية أو منقار # ffffcc في نوع والصحافة "موافق".

الضغط على "موافق" نفذ Dreamweaver تعديل هيئة المغلق منتق بإضافة فقرة خلفية الالوان الملكية و القيمة من # ffffcc.

هناك العديد من الخصائص يمكن أن يسند إلى هيئة منتق أو يمكنك تعديله باستخدام أساليب الإطار المغلق:

شعبة العلامات:
ونظرا لعودة لتصميم (cntrl ~ +) ، ودعونا تضاف شعبة الوسم عن طريق الانتقال إلى القائمة تضاف تصميم الأجسام شعبة الوسم, هذا وسوف طرح â € € œinsert شعبة تاجا مربع حوار. (شعبة العلامات هي الأكثر شيوعا لاجراء الوسم عناصر مختلفة في صفحة ويب مصممة المغلق مثل الصور, النص, أو أشرطة فيديو.)

الأول في مجال "تضاف شعبة الوسم" مربع الحوار هو تضاف: حقل. هذا هو الحقل الذي يعين فيه شعبة الوسم ستدرج في html صفحة. افتراضي يحدد لها "على ادراج هذه النقطة" ، ما يعني ان شعبة الوسم حيث سيتم ادخال المؤشر آخر مرة وضعت في صفحة ويب. يمكنك أيضا اختيار "بعد بداية الوسم" أو "قبل نهاية الوسم" لشعبة ضع علامة في موقع مختلف.

تجد المقبل "الطبقة:"المجال الذي هو مجال تتعلق مباشرة إلى حسابك في النظام المغلق. أ الطبقة المغلق له مع منتق فترة أمام ذلك من قبيل ".الطبقة". الطبقات تستخدم لتخصيص الممتلكات أو ممتلكات لكثير من البنود الواردة في صفحة ويب. ليس لدينا فئات المحددة في هذه الوثيقة بعد ذلك ليس هناك ما نستطيع حتى الآن أن تعين. "معرف:"الميدان أيضا فارغة بسبب عدم وجود هويات محددة في المغلق. معرفات تستخدم لتخصيص الممتلكات أو الممتلكات إلى بند واحد في صفحة ويب والمغلق في مدونة له الجنيه قبل أن توقع على مثل "# معرف". إذ لا يوجد لدينا من هذه النقر على "نمط جديد المغلق" وسوف تحدد قاعدة جديدة.

هذه المرة اختيار "طبقة" حيث اختيار نوع, اكتب "Coolالطبقة" ، كما, حدد "هذه الوثيقة فقط" والضغط على "موافق". دعونا مجموعة لون الخلفية لهذه الطبقة بارد مع اللون الأزرق من خلال اختيار "الخلفية" وفقا لفئات ووضع "لون الخلفية" إلى ما يشبه # 00ccff. الآن ترسيم الحدود للون الأسود خط رفيع من خلال النقر على "الحدود" على فئة والصلب ثم اختر النمط من المنسدلة و1 بكسل كما عرض والاسود (# 000000) حيث اللون. أو يمكنك أن تكون أكثر إبداعا إذا اخترت. الآن دعونا مجموعة قليلا حشوة في حكمنا من خلال النقر على "المربع" في فئة العمود ونوع "5" من أجل "أعلى: حشوة "سوف يعهد لهذا التضخيم ليس فقط بالنسبة للكبار ، ولكن لجميع الاطراف اذا ترك" نفسها للجميع "التحقق من مربع. اضغط على "موافق" Dreamweaver سوف يخلق طبقة جديدة سيادة النمط المغلق الخاص بك في ثلاث خصائص الوسم.

الخاص بك "تضاف شعبة الوسم" مربع الحوار الآن أيضا فئتها الميدانية بالسكان "cooltag" -- اضغط على "موافق" Dreamweaver وسوف يكتب الشفرة في صفحة الويب الخاصة بك مع صاحب المكان داخل النص الجديد div الوسم.

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

صور:
الآن دعونا تضاف صورة وتحديد الفئات لأنه لدينا.
وضع المؤشر خارج شعبة بالنقر في أي مكان خارج داخل صفحة الويب. من القائمة تضاف الذهاب إلى صورة (cntrl + + بديل الأول). اختيار أي صورة لديك المتاحة على جهاز الكمبيوتر الخاص بك واضغط على "موافق". يمكنك تجنب المقبل من قبل لتصل إلى مربع الحوار "موافق" ؛ Dreamweaver وسوف تضع صورة في صفحة الويب الخاصة بك. حق انقر على الصورة واختر من القائمة المغلق أساليب Coolالطبقة. هذا وسوف يكلف ما قبل فئة محددة لصورة يعطيها لون الخلفية, حشوة, ونحن على الحدود المكلفين ".Coolالطبقة". Adobe Dreamweaver كان ينبغي أن تضاف إلى هذه الشفرة مشابهة:

قوة المغلق:
ما الذي يجعل قوى المغلق هو القدرة على العودة وإدخال تعديلات على طريقتك مرة واحدة وتأثير ذلك على جميع العناصر كنت أسند إلى النمط. في الإطار المغلق أساليب سترى "جميع قواعد" وطريقتك ".Coolالطبقة". اضغط على .منتق Coolالطبقة ثم على القيمة الأساسية للالالوان (# 00ccff). باستخدام لون منقار اختيار لون مختلف, مثل (# 66ffff). أنت الآن تستخدم بنجاح في المغلق Dreamweaver. الرمز الوحيد الذي تغير هو في المغلق وكانت تطبق على كل من و div img.

خلق سريعة قائمة الوحدة عند التقويم
الآن مع مضمون في div الوسم علينا كسرها ، وإلى جانب جعله قائمة الملاحة.

وضع كل كلمة على سطر يدخل عن طريق الضغط على المؤشر في المنتصف مع كل كلمة. تسليط الضوء على كل كلمة حق وانقر ثم حدد قائمة قائمة غير منظم. لك الآن قائمة تعداد نقطي ، لكننا بحاجة إلى تطبيق بعض التصميم لذلك نحن بحاجة إلى إنشاء قاعدة.

انقر على زر إضافة المغلق من أساليب الإطار المغلق. هناك طرق عديدة لإسناد النمط إلى قائمة, فإننا يمكن أن يخلق طبقة جديدة ووصفه بأنه شيء من هذا القبيل ".Listالطبقة "وتطبيقه على كل لى صنع لىالطبقة="لىstالطبقة" الوسم ، ولكن هذا المثال سننشئ قاعدة لجميع العلامات لى. حدد "تقدما" في الإذاعة ونوع "لي" في ميدان منتق. "لي" لتقف على قائمة. حدد "هذه الوثيقة فقط" والضغط على "موافق".

ولازالة الرصاصة, جعل لون الخط الأبيض والخط الوزن جريئة. مع اختيار نوع فئة مختارة جريئة من "الوزن" المنسدلة واختيار البيضاء (# ffffff) للون. من قائمة اختيار أي فئة من "النوع" المنسدلة ثم اضغط على "موافق". Adobe Dreamweaver أنشئ مدونة في المغلق الذي يؤثرلىالوسم.

لدينا قائمة الوحدة عند التقويم السليم لبنود تغيير وأنتم الفأرة عليها. لذلك نحن بحاجة إلى إضافة السلوك. اذهب إلى قائمة نافذة السلوكيات (التحول + F4). عرض كل الأحداث من خلال النقر على "عرض كل الأحداث" زر . تأكد من المؤشر هو في واحد من بنود قائمة حتى سلوك تطبق على القائمة ، وليس شيئا آخر. Onmouseover في مجال النوع هذا.Classname = 'Coolالطبقة'. "هذا" يشير إلى علامة "لى" الطبقةname يحكي متصفح تريد تغيير لالطبقةname Coolالطبقة. Onmouseout في مجال النوع هذا.Classname = '' (وهما 'ليست علامات الاقتباس). هذا يجعل المتصفح العودة الصف اسم من الوسم لى الى شيء يتحرك فيه الماوس من عنصر. لديك الآن طبق واحد على سلوك هذا البند في القائمة.

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

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

وختاما
اضغط على F12 وفحص ما قمت به. انها على الارجح لن تبدو جميلة جدا ، ولكن يجب أن أعطيك يشعر حول كيفية المغلق في Dreamweaver يعمل مع html وما تفعله في متصفحك.

ويلعب في جميع أنحاء لنتذكر المتعة!