Prepared By: Eman Amer
Download
Report
Transcript Prepared By: Eman Amer
أساسيات إنشاء وتعديل صفحات الويب باستخدام
الناشر المكتبي MS Publisher 2007
Prepared By: Eman Amer
مفاهيـــم هامـــة في صفحات الويب
صفحة الويب أو صفحة النت (اإلنترنت):
.1وثيقة أو مورد للمعلومات.
.2تكون موجودة على رابط تشعبي Hyperlinkفي شبكة الويب العالمية WWW
.3يمكن الوصول إليها من خالل متصفح الويب .Web Browser
من األمثلة على متصفحات اإلنترنت Web Browsers
Google Chrome, Safari, Internet Explorer, Firefox
Prepared By: Eman Amer
أنواع المعلومات في صفحات الويب
تقسم محتويات صفحة الويب أو صفحة النت (اإلنترنت) إلى:
.1معلومات نصية( :عبارة عن نصوص مكتوبة بإحدى اللغات).
.2معلومات غير نصية وتأتي على األشكال التالية:
.aصور ثابتة وتكون صيغتها عادة على:
JPEG
.i
(GIFالنوع الثابت منها)
.ii
PNG .iii
كما يظهر في صورة الزهرة.
.bصور متحركه وتظهر فيها الحركات البسيطة وتكون صيغتها عادة على:
( GIFالنوع المتحرك منها)
.i
SVG .ii
.iiiتطبيقات الجافا
كما يظهر في صورة األلعاب النارية.
Prepared By: Eman Amer
أنواع المعلومات في صفحات الويب
( .2يتبع )...معلومات غير نصية
.cالصوت وتكون صيغتها عادة على:
MID
.i
WAV .ii
.iiiتطبيقات الجافا
كما يظهر في المقطع التالي:
.dالفيديو مقاطع متنوعة وتحتاج إلى مشغل خاص بها كما هو الحال في مقاطع
اليوتيوب وتكون صيغتها عادة على:
FLV
.i
RM .ii
WMV .iii
MOV .iv
MPG .v
كما يظهر في المقطع التالي:
Prepared By: Eman Amer
أنواع المعلومات في صفحات الويب
( .2يتبع )...معلومات غير نصية
.eالمعلومات التفاعلية تعتمد على اختيارات المستخدمين لها ،وتظهر باألشكال
التالية:
النص التفاعلي :الوصول للمعلومات من خالل خيارات يحددها المستخدم.
.i
.ii
الرسوم التوضيحية التفاعلية:أشكال مختلفة تستخدم لجذب االنتباه لجزء ما
من الصفحة.
.iii
أزرار :تخصيص شكل الصفحة وتوفير واجهة بديلة للموقع.
Prepared By: Eman Amer
برامج تصميم المواقع
•
تنوعت األساليب المستخدمة إلنشاء صفحات الويب إما:
.aمن خالل برامج بسيطة النتاج موقع بسيط وذات هدف محدد.
.bأو من خالل لغات برمجية خاصة مثل لغة HTML
.1وهذه اللغة تحتاج الى محرر بسيط مثل برنامج المفكرة Notepad
.2أو من خالل محرر متخصص في ال HTMLمثل MS FrontPage
.cأو من خالل قوالب خاصة وبواجهات جميلة يقوم المستخدم بملىء بياناته على
إحدى هذه القوالب مما يمك ّنه من إنجاز صفحة ويب جاهزة.
من أشهر األمثلة على المواقع التي قامت بتجهيز هذه القوالب
•
Geocities, Angle fire
.d
أو من خالل استخدام برامج خاصة بتصميم صفحات الويب والتي تتميز بسهولة
استخدامها وبأدواتها الفعالة مثل
MS FrontPage
.i
Macromedia Dreamweaver .ii
MS Publisher .iii
Prepared By: Eman Amer
ما هو برنامج MS Publisher 2007
•
•
•
•
•
برنامج متخصص بالنشر بشكل عام.
هدفه إنشاء وتصميم الدعايات أو اإلعالنات.
تصميم مواقع انترنت بسيطة بشكل بسيط وجذاب.
يتميز بوفرة القوالب الجاهزة إلنشاء اإلعالنات أو المواقع اإللكترونية.
تم إنشاء هذه البرمجية بواسطة شركة مايكروسوفت ضمن مبادرة انتل للتعليم.
Prepared By: Eman Amer
تشغيل برمجية
MS Publisher 2007
Prepared By: Eman Amer
Getting Started with MS Publisher 2007
2. Click All Programs
1. Click Start Button
Prepared By: Eman Amer
Getting Started with MS Publisher 2007
3. Select
Microsoft Office
4. Click
Microsoft Office
Publisher 2007
Prepared By: Eman Amer
Getting Started with MS Publisher 2007
المنشورات التي تم إنشاؤها مؤخرا
أكثر المنشورات استخداما
قائمة بانواع المنشورات
• Choose
any
publication
Type
واجهة البرمجية وأجزاؤها الرئيسة
MS Publisher 2007
Prepared By: Eman Amer
واجهة البرنامج MS Publisher 2007
•
•
•
•
•
عند فتح البرنامج تظهر الصفحة الرئيسة والتي تطلب من المستخدم اختيار نوع محدد
من المنشورات.
تنقسم الشاشة إلى ثالث أجزاء رئيسة:
الجزء األول :اختيار نوع المنشور.
الجزء الثاني :القوالب الخاصة بنوع المنشور الذي تم تحديده.
الجزء الثالث :الخصائص العامة للقالب الذي تم اختياره مثل تنسيق القالب ،الخطوط
واأللوان.
Prepared By: Eman Amer
Getting Started with MS Publisher 2007
حاول النقر على أي نوع من هذه المنشورات في الجزء األيسر والحظ ظهور التصاميم الخاصة بكل نوع في
الجزء األيمن
5. Choose any
Publication Type
Prepared By: Eman Amer
Getting Started with MS Publisher 2007
. ستظهر لك مجموعة من التصاميم الخاصة بهذا النوعAward Certifications على سبيل المثال عند النقر على
Prepared By: Eman Amer
Getting Started with MS Publisher 2007
. ستظهر لك مجموعة من التصاميم الخاصة بهذا النوع أيضاWeb Sites وعند النقر على
Prepared By: Eman Amer
MS Publisher 2007 نافذة برنامج
Prepared By: Eman Amer
MS Publisher 2007 Window
Prepared By: Eman Amer
MS Publisher 2007 Toolbars
1. Title Bar
1
2
1
Publication Name
Default name is Publication1
2
Application Name
Microsoft Publisher
2. Menu Bar
Prepared By: Eman Amer
MS Publisher 2007 Toolbars
4
3. Standard Bar
3
6
5
12 13
7
1
2
14
1
New
9
Format Painter
2
Open
10
Undo
3
Save
11
Redo
4
Print Preview
12
Insert Hyperlink
5
Check Spelling
13
Web Page Preview
6
Cut
14
Zoom
7
Copy
15
Zoom Out
8
Paste
16
Zoom In
9
8
15
10
11
16
Prepared By: Eman Amer
MS Publisher 2007 Toolbars
4. Formatting Bar
10
11
2
1
14
12 13
3
4 5 6 7 8 9
15
1
Font
9
Justify
2
Font Size
10
Left to Right
3
Bold
11 Right to Left
4
Italic
12
Insert Numbered List
5
Underline
13
Insert Bullets List
6
Align Left
14
Fill Color
7
Align Center
15
Font Color
8
Align Right
Prepared By: Eman Amer
MS Publisher 2007 Toolbars
5. Objects Bar
1
2
3
4
5
6
7
8
1
Select Objects
7
Arrow
2
Textbox
8
Oval
3
Insert Table
9
Rectangle
4
Insert Word art
10
Auto shapes
5
Picture Frame
11
Bookmark
6
Line
12
Design Gallery
9
10
11
12
Prepared By: Eman Amer
MS Publisher 2007 Toolbars
6. Format Publication
A. Page Options
تستطيع من خاللها التحكم باالختيارات الخاصة بالصفحة
B. Color Schemes
تستطيع من خاللها التحكم باأللوان
C. Font Schemes
تستطيع من خاللها التحكم بأنواع الخطوط
D. Publication Options
تستطيع من خاللها تغيير التصميم وحجم الصفحة.
Prepared By: Eman Amer
MS Publisher 2007 Toolbars
7. Rulers
8. Scroll Bars
Prepared By: Eman Amer
MS Publisher 2007 Toolbars
9.Status Bar
A. Page Icons
B. Object Size
Prepared By: Eman Amer
MS Publisher 2007 Toolbars
Page Margin
10. Work Area
Page Boundary
Prepared By: Eman Amer
إنشاء موقع انترنت بسيط باستخدام الناشر
MS Publisher 2007
Prepared By: Eman Amer
إنشاء موقع انترنت بسيط باستخدام الناشر
•
•
•
•
•
•
يعتبر الناشر المكتبي من أسهل البرامج في التعامل النشاء صفحات الويب البسيطة.
يمكن استخدام الناشر في المواقع ذات البعد الشخصي أو البعد التجاري البسيط.
وعليه فإن استخدام الناشر غير مالئم في الحاالت التالية:
إذا كان يقتضي الموقع وجود تفاعل أو محتوى يستند الى قاعدة بيانات مثل شراء السلع.
إذا كان يقتضي الموقع التحقق من البيانات مثل ارقام بطاقة اإلئتمان.
إذا كان هنالك حاجة للتعديل على هذا الموقع وإضافة خدمات وإمكانات أكبر للموقع،
باستخدام لغات برمجية أخرى مثل ASP. Netاو PHP
والنشاء موقع بسيط اتبع الخطوات التالية:
Prepared By: Eman Amer
إنشاء موقع بسيط
2
حدد التصميم Step 2 :
وفي مثالنا Mobile
ثم اضغط على Step 4 : Create
1
حدد نوع المنشور Step1 :
وفي مثالنا Web Sites
3
حدد الحجم Step 3 :
وفي Web 760 * 4608
مثالنا
Prepared By: Eman Amer
إنشاء موقع انترنت بسيط باستخدام الناشر
•
الحظ أن MS Publisherسيقوم بإنشاء الصفحة الرئيسة Index or Home
•
يتم إنشاء الصفحة بشكل تلقائي.
•
يعرض الناشر نافذة لتحديد مهام الموقع ويقوم المستخدم باختيار الخدمات التي تحقق
أهداف الموقع.
.1
.2
.3
.4
.5
.6
.7
.8
معلومات عن الموقع :About Usالتعريف بمالك الموقع ،نشاطه وأهدافه.
معلومات االتصال :Contactتزويد الزائر بمعلومات لالتصال بمالك الموقع.
المنتجات :Productsتحتوي على المنتجات الخاصة بالشركة.
الخدمات :Servicesوصف الخدمات التي يقدمها هذا الموقع.
التقويم :Calendarتحديد الفعاليات التي ستقام خالل فترة زمنية محددة.
المشاريع :Projectsإضافة المشاريع أو األنشطة التي أنجزتها أو التي ستقوم
بإنجازها.
الموظفين :Employeesشرح الهيكل التنظيمي للموظفين وشرح مهامهم لتسهيل
مهمة الزائر في التواصل مع الشخص المعني.
روابط ذات عالقة :Related Linksإضافة روابط لمواقع أخرى ذات صلة
بمحتوى الموقع.
Prepared By: Eman Amer
إنشاء موقع انترنت بسيط باستخدام الناشر
•
الحظ الصورة التالية:
1
2
3
4
5
6
7
8
Prepared By: Eman Amer
إنشاء موقع انترنت بسيط باستخدام الناشر
لنفرض ان مصمم الموقع أراد تحديد الخيارات كما في الشكل التالي:
1
2
3
4
5
6
7
8
Prepared By: Eman Amer
إنشاء موقع انترنت بسيط باستخدام الناشر
وبعد النقر على موافق الحظ ظهور الشكل التالي:
إنشاء موقع انترنت بسيط باستخدام الناشر
ثم قم بتعديل الموقع بما يتناسب مع المعلومات التي ترغب بعرضها فيه
إنشاء موقع انترنت بسيط باستخدام الناشر
مالحظات هامة
.1
.2
.3
.4
للتنقل بين صفحات الموقع ،قم باختيار رقم الصفحة من أسفل منطقة العمل.
للتعديل أو الحذف اختر الكائن المطلوب ( نص أو صورة) ثم اضغط حذف من لوحة
المفاتيح.
لتنسيق شكل النص أو اللون أو إدراج صورة ،استخدم اشرطة األدوات الخاصة مثل شريط
التنسيق أو شريط الصورة
إن تنسيق الصفحة ودقة المعلومات من أهم العناصر التي تجذب الزائر لتصفح موقعك.
مراجعة صفحة الويب باستخدام المتصفح
قبل نشر الموقع ال بد من فحصه والتاكد من عمله على النحو المطلوب بحيث ال يحتوي على
أي أخطاء.
يتم البحث عن المشكالت المحتمل حدوثها من خالل مدقق التصميم ومعاينة الموقع.
1
لتشغيل مدقق التصميم قم بما يلي:
انقر على قائمة أدوات Step 1 :
Tools
2
اختر مدقق التصميم Step 2 :
Design Checker
قم بتحديد خانة تشغيل تدقيق التصميم العام Step 3 : Run general design checks
وخانة تشغيل تدقيق موقع ويب Run web site checksكما في الشكل التالي:
3
يتبع ...مراجعة صفحة الويب باستخدام المتصفح
5
الحظ ظهور اشارة صح بجانب العنصر الذي تم اصالحهStep 5 : .
4
حدد الجزء الذي ترغب بإصالحه Step 4 :
معاينة موقع الويب
بعد االنتهاء من تصميم موقعك ،ال بد من أن تقوم بمعاينته في متصفح اإلنترنت لديك مثل
الفيروكس أو االنترنت اكسبلورر.
لمعاينة الموقع في المتصفح قبل النشر قم بما يلي:
1
إذهب لقائمة ملف )Step 1 : )File
3
الحظ ظهور الموقع حسب Step 3 :
متصفحك اإلفتراضي
2
اختر معاينة الموقع Step 2 :
Web Page Preview
أهداف معاينة الموقع قبل النشر
.1
.2
.3
.4
.5
فتح الموقع والوصول إلى كافة الصفحات.
التأكد من عمل االرتباطات التشعبية كما هو متوقع.
عمل عناصر التحكم في التنقل كما هو متوقع.
عدم وجود عناصر مفقودة.
التأكد من أن جميع األصوات المرفقة في الموقع تعمل على النحو المطلوب.
البحث عن خدمة استضافة ويب
.1قبل أن تتمكن من نشر الموقع ،ال بد من اشتراكك في خدمة استضافة ويب.
.2وتتوفر هذه الخدمة من خالل مزودي خدمات االنترنت ISP
توفر لك هذه الخدمة ما يلي:
إمكانية الوصول إلى موقعك عن طريق االنترنت
.i
.iiمساحة تخزين على خادم الويب
.iiiمحدد موقع المعلومات URL
حفظ العمل
.1يقوم الناشر بحفظ الملف المصدري للمنشورات وصفحات الويب كمشروع يمكنك الحقا من
التعديل عليه ،وينتهي باالمتداد .pub
.2الملف المنشىء كصفحة ويب والذي يعتبر واجهة لموقعك ينتهي عادة باالمتداد .html
ولتصدير العمل كصفحة ويب خاصة ال بد من القيام بما يلي:
1
2
اختر)Step 2 : )Publish to the Web
إذهب لقائمة ملف )Step 1 : )File
انقر موافق )Step 3 : )Ok
3
يتبع ...حفظ العمل
4
حدد المكان الذي ترغب Step 4 :
لحفظ الملف ثم انقر Save
يتبع ...حفظ العمل
ستظهر رسالة تخبرك بأنه تم إنشاء صفحة ويب ،انقر Step 5 : OK
7
صفحة الويب والمجلد المرتبط بها Step 7 :
5
6
رسالة تخبرك بأن العمل جار للنشرStep 6 :
موقع استضافة Host
استضافة موقع تعني أن يستضيف خادم ويب Web Serverمواد ومحتويات موقع معين
ويربط النطاق الخاص بهذا الموقع بعنوان االيبي IPالخاص بالخادم.
تقسم أنواع االستضافة الى:
.1استضافة مجانية :ستضطر للتنازل عن بعض المزايا إذ تقوم الشركة بوضع إعالناتها
الخاصة على موقعك.
.2استضافة مدفوعة :ستتمتع بمزايا عديدة ،ويعتبر هذا الخيار األفضل بسبب انخفاض
التكاليف المدفوعة.
موقع استضافة Host
وهنالك طرق متعددة لإلعالن عن صفحتك الخاصة بك ،إما من خالل:
حجز موقع باسمك على سبيل المثال http://www.yourname.com/ استضافة موقعك على أحد المواقع المجانيةالخطوات الواجب اتباعها لحجز موقع:
اختيار اسم الموقع بعد التأكد من أنه غير محجوز لشخص أو ألي جهة اخرى.قم بزيارة الموقع التالي لتحديد اسم الموقع ونوعه.http://www.networksolutions.com
نوع الموقع يعود الى طبيعة ونوعية الخدمات التي سيقدمها لزوار الموقع ،ويمكنك اإلطالع
على الجدول التالي للتعرف على هذه األنواع:
نوع المنشأة
المعنى
االختصار
جهة تجارية
Commercial
.Com
خدمة شبكية
Network
.Net
منظمة أو جهة غير ربحية
Organization
.Org
مؤسسة تعليمية
Education
.Edu
جهة عسكرية
Miltary
.Mil
موقع استضافة Host
إذا رغبت ان يكون موقعك ضمن نطاق السعودية .saعندها فال بد أن تتم اإلجراءات عن طريقمدينة الملك عبد العزيز.
وفي حال تمت اجراءات الحجز ،ستقوم بدفع مبلغ 70دوالر لمدة سنتين لحجز االسم الذي قمتباختياره.
بعد تحديد اسم الموقع وحجزه ،ال بد من البحث عن مكان الستضافة الموقع.قم بزيارة الموقع التالي لتتمكن من اختيار ما يناسبك.http://www.hostindex.com
وأخيرا قم بإرسال الصفحات والملفات الخاصة بموقعك الى المكان الذي خصصته لك الشركة.وبعد اتمامك للخطوات السابقة سيتمكن العديد من األشخاص حول العالم بزيارة موقعك.
موقع استضافة Host
الستضافة موقعك مجانا ما عليك اال بزيارة موقع الجهة المسؤولة والقيام بحجز موقع لك. النقاط الواجب ان تأخذها بعين االعتبار عند حجز الموقع فيما إذا كانت الجهة المستضافةمجانية:
حجم المسافة وما مدى زيادتها عند إجراء التعديالت.نوع الالفتة اإلعالنية التي ستضاف تلقائيا لصفحاتك.-تقوم بعض المواقع بوضع الفتات أو نوافذ خاصه بها للدعاية.
اشهر المواقع التي تمكنك من استضافة موقعك:http://www.atspace.com
.1
.2موقع فرنسي http://www.free.fr/adsl/index.html
http://www.000webhost.com
.3
.4موقع عربي https://www.eb2a.com
أمثلة على مواقع استضافة