WEB DESIGN

अधिक जानकारी के लिए मेरे से संपर्क करे नाम पुनाराम साहू मोबाइल नंबर ७५०९०१८१५१ ९६६९३४८३०९ वेबसाइटों और एक वेबसाइट में web pages को create करना

पाठ के उद्देश्य :
इस सत्र के अंत में, आप यह करने में सक्षम होंगे :
• एक नई साइट बनाएं। • web page बनाएं और सेव करें।
संगत ज्ञान
आप अपने डिजाइन के साथ वेबसाइट को create कर सकते हैं। जब आप web pages, images, style sheets आदि के साथ काम करते हैं, आपको एक ही लोकेशन (फोल्डर) में सभी संबंधित फाइलों को स्टोर करने की जरूरत होती है। यह आपकी सहायता के लिए है :
व्यवस्थित करना। सभी कंटेंट को दूर के सर्वर पर अपलोड करें, जब आप वेबसाइट को पब्लिश करना चाहते

टिप्पणी : आप इस मॉड्यूल में बाद में templates के बारे में जान सकेंगे।
एक वेबसाइट बनाना
एक नई वेबसाइट को create करने के लिए, 1. Site > New Site… को select करें (नीचे, बायां चित्र)। एक नया डायलॉग बॉक्स दिखाई
देता है (नीचे चित्र, दायां)।
Teral
EmInyr im -:-orate
nputste Vieet
Ccs.rptionImami rouamanthanchhirl:-7.
lempetes
Site
Data View
Panels Window
Help
Us: crs rihanctick T ECENSEDEOCToctontsst)
Ctrl+Shift+N
Sports the mer intentofthenate W.die C:\CL MISIU Sedi-La, DLL HIS
FILE.
Eent.
New Site… Sopen Site…
Recent Sites
Ctrl+Shift+o
Poin my-rity
TIRT-WEn:In
OK
Lerc:

टेम्प्लेट्स (Templates) और (webpages) इंपोर्ट करना ।
पाठ उद्देश्य :
इस सत्र के अंत में, आप यह करने में सक्षम होंगे :
• template उपयोग करते हुए वेबसाइट बनाना • Import sites करना
संगत ज्ञान
Templates से समय और प्रयास की बचत होती है। एक वेबसाइट के लिए template में आम तौर पर HTML, CSS और image files शामिल होते हैं, जिन्हें समान प्रकार की वेबसाइट बनाने के लिए तुरंत उपयोग किया जा सकता है। आप वेबसाइट डिजाइन करने के लिए Microsoft Expression Web में built-in templates का उपयोग कर सकते हैं।
Templates का उपयोग करते हुए एक नई वेबसाइट को create करना
MEW में अनेक (19) built-in templates शामिल होते हैं जिन्हें वेबसाइट बनाने में उपयोग किया जा सकता है। built-in template का उपयोग करते हुए वेबसाइट बनाने के लिए इस प्रकार करें :
Silt Organization 1
Description Shere! E Organization 2
Crocta a site for your orcanizacion or cub. S rinivaliinni Tenplus
marisation – Ergerizations E rgarication 6
Freview Brxsonal -Parsonal
Parsona Oil Sparsona 5 19xsona 3 Persona 7 nall Business!
Options nall Dusress 2
Add to currat sitc 5 nall Busi Ess 3 IB- . .
Farredonnecting
. specify tha nare and lbcacn if the na/sts – Location: C:\Documents and Sett nosilably colnen: M/ :Website2
Drowss.. dd to Manaced Let Jane Myhret/etex

  1. Site > New Site… को select
    करें।
  2. Templates को select करें और
    एक template चुनें, उदाहरण के लिए list से Organization 5
    |
    card |
  3. इस वेबसाइट के लिए एक नया टाइप करें,
    उदाहरण के लिए : Company01.
    . 0x
    LAL:\Documents and Settings, Lab My Documents\LompanyUl – Microsoft Expression Web Die Edit Rew Inss: Torrat Tools Teble Jte Raza View Parels Wirdom Lek
    Sir Viw
  4. लोकेशन को बदलें और C:\Documents and
    Settings\Lab \My Documents Company01. # वेबसाइट को स्टोर करें। फिर OK पर
    rolder ist Luccuments ard:
    all calenda con:a:
    ils rial TellinNIMDIHANIHI11
    THAI 5 Ty Mall DAH
    Calrils A MAIN
    about Tabula Ocon:a::
    fag Dmages Laitornatior Inls
    images
    Mcss..
    La photo galery
    203
    Adeat.ftml
    mester.drat
    Hena mastel.cw:
    KB Fornl ZED CW:
    4/11211312:35 PM +/1/2013 12:35PM
    Folsers
    Fubishrg
    Repor:
    s
    Hyperint’s

सत्र 4 : लिस्ट (Lists), फॉर्मेटिंग (Formatting), स्पैल चैक (spell Check) और फाइंड एण्ड रिप्लेस (Find and Replace) |
पाठ उद्देश्य :
इस सत्र के अंत में, MEW एमईडब्ल्यू का उपयोग करके, आप यह करने में सक्षम होंगे :
• लिस्टों के साथ काम करना। • Text को Format करना । • Spell Check का उपयोग करना। • Find and Replace का उपयोग करना।
संगत ज्ञान
पिछले सत्र में, अपने headings और paragraphs के साथ काम करना सीखा होगा। आप MEW में lists, images, tables आदि जैसे HTML elements के साथ भी काम कर सकते हैं।
Unordered lists के साथ काम करना
आप उसी प्रक्रिया का उपयोग करते हुए एक लिस्ट बना सकते हैं जिसे आपने word processing software में उपयोग किया है। Unordered lists को create करने के लिए, इस प्रकार करें

  1. एक नए पेज को create करें, unorderedlists.html के रूप में पेज सेव करें। 2. निम्नलिखित text टाइप करें (quotes के अंदर) :
    “एक electronic book और EBook की एक पुस्तक को digital form में प्रकाशित किया है। इसमें text, images 31T GT 46 & computers, netbooks and Smartphones. EBooks रीडेबल है। EBooks निम्नलिखित formats में उपलब्ध हैं :”
  2. अब अगले पैराग्राफ पर cursor को रखें। 4. Style ड्रॉपडाउन मीनू से Unordered List को select करें। 5. निम्नलिखित टाइप करें (प्रत्येक एंट्री के बाद enter दबाएं) :
    am-16 .
    mu…

    <uly
    क. DjVu ख. EPUB ग. HTML घ. iBook (Apple) ङ KF8
  3. Djuk/li>
  4. EPUB
  5. HTML
  6. iBook (Apple)
  7. KF8
  8. LIT (Microsoft )

सत्र 6 : इमेज (Images)
पाठ उद्देश्य :
इस सत्र के अंत में, आप यह करने में सक्षम होंगे :
• MEW का उपयोग करके web pages में images को इंसर्ट और मैनिपुलेट करें।
संगत ज्ञान
जैसा कि आप जानते हैं, यह एक आसान कार्य नहीं है जब एक web page के अंदर आपको कई images डालनी होती हैं। HTML editors में आप formats के साथ आसानी से images डाल सकते हैं जैसे GIF, JPEG, PNG और BMP |
Images इंसर्ट करना
एक clipart या image को insert करने के लिए, इस प्रकार करें :
Picture
From File…
Media
From Adobe Photoshop (.psd)…

  1. एक नया पेज create
    करें, images.html. के
    रूप में इस पेज को सेव करें। 2. Insert > Picture > Picture from file… को select करें (ऊपर चित्र)। 3. अपने कम्प्यूटर से एक picture को ब्राउज़ करें और select करें, Insert पर क्लिक करें।
    Accessibility Properties का डायलॉग बॉक्स आता है (बगल में चित्र)।
    Accessibility Properties
    ?
    x
    RAlternate text:
    Long description:
    Browse…
  2. Alternate Text में text (ALT
    attribute) को Specify करें : उदाहरण के लिए, Sample Image for Demo टाइप करें। और फिर OK पर क्लिक करें। image web page में इंसर्ट हो जाती है!
  • show this prompt when inserting images
    OK
    Cancel
    Save Embedded Files
    ?
    x
    Picture preview:
  1. Save पर क्लिक करें। एक Save
    Embedded Files का डायलॉग बॉक्स आता है।
    Embedded files to save: Name
    Sunset.jpg
    Folder
    Action Save
    Rename
    Change Folder…
    Set Action…
    Picture File Type…
    OK
    Cancel

सत्र 7 : हाइपर लिंक (Hyperlinks).
पाठ उद्देश्य :
इस सत्र के अंत में, आप यह करने में सक्षम होंगे :
• वेबसाइटों के लिए hyperlinks बनाना। • ई-मेल एड्रेस के लिए hyperlinks बनाना। • वेबसाइट में अन्य web pages के लिए hyperlinks बनाना।
संगत ज्ञान
Hyperlinks के साथ काम करना
जब आपके पास कुछ embedded links हों तो कोड लिखना आसान है। परंतु जब web page में शामिल करने के लिए अनेक Link हों (एक बड़े संगठन की कल्पना करें जिसमें 100 web page हों जिन्हें कनेक्ट करने की आवश्यकता हो) तो मैनुअली कोड करना कठिन होगा। यहां, कार्य को आसान बनाने के लिए आप HTML editors का प्रयोग कर सकते हैं।
वेबसाइटों के लिए हाइपरलिंक्स (Hyperlinks) HTML editor में hyperlinks के साथ काम करने के लिए, इस प्रकार करें : 1. एक नए पेज को create करने के लिए, links.html. के रूप में इस पेज को सेव करें।
Create a new page, save this page as links.html. 2. URL टाइप करें, उदाहरण के लिए www.google.com| Enter दबाएं। देखें कि text
अपने आप ही फॉर्मेट हो गया है और एक hyperlink के रूप में दिखाई देता है। 3. अपने browser (F12) में इसे सेव करें और preview देखें । इस गतिविधि के लिए source
code को देखें।
Edit Hyperlink
यदि आप URL से text को बदलना चाहते हैं, इस प्रकार करें : 4. MEW में स्विच करें और text पर कर्सर रखें जिसमें यह hyperlink है।
राइट क्लिक करें और Hyperlink Properties… को select करें। Edit Hyperlink का डायँलाग बॉक्स आता है।
Link to:
Text to display: www.google.com
ScreenTip…
Look in:
Existing File or
Web Page
Bookmark…
Current Folder
Target Frame…
Place in This Document
Browsed Pages
MyFirstWebsite links.html (open) Blue hills Blue hills_small default images links multipleimages
Sunset PSunset_small
Water lilies Battp://www.google.com
Parameters…
Create New Document
Recent Files
Address:
Remove Link
E-mail Address


cancel|
Cancel

सत्र 8 : हाइपर लिंक (Hyperlinks) ||
पाठ उद्देश्य :
इस सत्र के अंत में, आप यह करने में सक्षम होंगे :
• Images का उपयोग करके hyperlinks बनाना। • Interactive buttons का उपयोग करना। • Hotspots का उपयोग करना।
संगत ज्ञान
आपने पिछले सत्र में सीखा है कि text में hyperlinks कैसे बनाते हैं। आपने ऐसी वेबसाइटें भी देखी होंगी जिनमें images या buttons होते हैं जिनसे अन्य किसी web page के साथ जोड़ा जाता है ताकि hyperlinks को अधिक आकर्षक बनाया जा सके। आप के लिए hyperlinks की MEW का built-in facilities उपयोग कर सकते हैं।
Image का उपयोग करते हुए लिंक
आप images को सक्रिय रूप से उपयोग करते हुए इसे भी create कर सकते हैं ताकि hyperlinks के रूप में आप आकर्षक buttons या image इस्तेमाल कर सकें।

  1. एक नया पेज create करें, manuallinks.html के रूप में इस पेज को सेव करें। ____Create a new page, save this page as manuallinks.html. 2. एक image को इंसर्ट करें | image को select करें, Insert > Hyperlink…को select
    करें।
    Insert an image. Select the image, select Insert > Hyperlink…. 3. http://www.download.com टाइप करें |
    Type http://www.download.com. 4. आम तौर पर उसी विंडो के अंदर hyperlinks खुल जाते हैं जब visitor देख रहे हों। यदि
    आप चाहते हैं कि व्यक्ति आपकी वेबसाइट को नहीं छोड़ें तो आप एक नए टैब या विंडो में हाइपरलिंक खोलने के लिए target frame property को सैट कर सकते हैं। एक नई विंडो में hyperlink को खोलने के लिए, Target Frame…को select करें।
  2. New window को select करें और तब OK पर क्लिक करें।
    टिप्पणी : hyperlinks के साथ Images का टेक्स्ट आता है जैसे नीचे दिखाया गया है (Ctrl+Click का उपयोग करें यदि आप गंतव्य web page को HTML editor में खोलना चाहते हैं)। इससे आप उन हाइपरलिंक वाली image को पहचान सकते हैं जब आप HTML editors के साथ काम करते हैं।

सत्र 26 : विजुअल वेब डेवलपर एक्सप्रेस (VISUAL WEB DEVELOPER EXPRESS)
पाठ के उद्देश्य :
इस सत्र के अंत में, आप यह करने में सक्षम होंगे :
• Visual Web Developer Express का उपयोग करते हुए एक वेब पेज क्रिएट करना • Visual Web Developer Express का उपयोग करते हुए एक वेब एप्लीकेशन क्रिएट करना
संगत ज्ञान
आपने पहले HTML, CSS और Expression Web का उपयोग करना सीखा होगा; यह सलाह दी जाती है कि आप आगे बढ़ने से पहले इसके मॉड्यूलों को दोबारा पढ़ लें।
टिप्पणी : आगे बढ़ने से पहले Microsoft Visual Web Developer 2010 Express को डाउनलोड और इंस्टॉल करें।
महत्वपूर्ण : यह मॉड्यूल web development और web application के मूलभूत संकल्पपनाओं पर केन्द्रित है। केवल एक उच्च स्तरीय अवलोकन यहां प्रदान की गई है; अधिक जानने के लिए product help files और / या online resources का उपयोग करें।
Visual Web Developer 2010 Express Edition का शुभारंभ
एक बार इंस्टॉलेशन पूरा होने के बाद, निम्नलिखित प्रक्रिया द्वारा प्रोग्राम को शुरू करे :

  1. Start > Programs > Microsoft Web Developer 2010 Express t forsch
    करें। टिप्पणी : पहली बार लोड होने में कुछ समय लग सकता है।
    वेबसाइट्स (static) क्रिएट करना आप Visual web developer express का उपयोग करते हुए एक वेब पेज क्रिएट कर सकते हैं; की प्रक्रिया बहुत आसान है।
  2. File > New Website…को सिलेक्ट करें| New Web Site का डायलॉग बॉक्स आता है
    (नीचे चित्र)।

ADDITIONAL RESOURCES एडिशनल रिसोर्सिस / अतिरिक्त संसाधन
यदि आप developing Windows या Web applications के बारे में और अधिक सीखना चाहते हैं, तो आप “Starter Kits” का उपयोग कर सकते हैं। “Starter Kits” एक कम्प्लीट एप्लीकेशन है जो डाउनलोड के लिए फ्री उपलब्ध है। starter kits का उपयोग करने के लिए, निम्नलिखित करें :http://www.asp.net/web-forms/open-source पर जाएं 2. Browse करें, सिलेक्ट करें और starter kits को डाउनलोड करें। 3. वेबसाइट पर प्रत्येक starter kit के लिए निर्देशों का पालन करें।
एक starter kit (WINDOWS APPLICATION) का उपयोग करना

http://msdn.microsoft.com/en-us/beginner/aa700775.aspx से Teacher Starter
kit को डाउनलोड करें। downloaded location पर जाएं और TeacherStarterKit(Csharp).vsi. पर डबल क्लिक करें। स्क्रीन पर दिए गए निर्देशों का पालन करें और इंस्टॉलेशन को पूरा करें (ज्यादातर ये C:\Users\USERNAME\Documents\Visual
Studio 2010\Templates\ProjectTemplates\Visual C# folder में एक्सटेक्टिड होते हैं।)। 3. Microsoft Visual C# 2010 Express खोलें। 4. File > Open Project… को सिलेक्ट करें| Browse करें और project file को लोकेट करें। 5. project! को run करने के लिए CTRL+F5 प्रेस करें।
एक starter kit (WEB APPLICATION) का उपयोग करना

http://code.msdn.microsoft.com/Employee-Info-Starter-Kit-2d386ba7
Employee Info Starter Kit को डाउनलोड करें। 2. ज्यादातर कम्प्रेस्ड फाइलें होती हैं, एक फोल्डर में एक्स्ट्रेक्ट करें। 3. Microsoft Visual C# 2010 Express खोलें। 4. File > Open Project… को सिलेक्ट करें| Browse करें और project file को लोकेट करें। 5. project! को run करने के लिए CTRL+F5 प्रेस करें।
टिप्पणी :
क.
express editions के पिछले या नवीनतम versions का उपयोग करते हुए कुछ नमूनों का विकास किया जाए। उदाहरण के लिए, यदि आप 2008 express edition के लिए एक Starter kit designed डाउनलोड करते हैं तो जब आप project को खोलते हैं तो इसे 2010

APPENDIX अपेंडिक्स / परिशिष्ट
Visual Studio 2010 Express Edition को डाउनलोड और इंस्टॉल करें।
Yisual Studio 20 LO EHpress Setup
Morale

  1. download.microsoft.com से Visual Studio 2010 Express Edition को
    डाउनलोड करें। Download Visual Studio 2010 Express Edition from download.microsoft.co m.
    Welcome to Visual Sludiu 2010 Express Selup टिप्पणी : जब आप डाउनलोड करते हैं. Visual Studio 2016
    और तब मल्टीपल कम्प्यूटरों पर इंस्टॉल करते समय और आगे इंस्टॉलेशन करने हेतु bandwidth सेव करने के लिए Offline Installer version को सिलेक्ट
    Visual C++ 2010
    Visual C# 2010 Express करें।
    Lightweight easy-to-use and easy-to-learn tools for the hobbyist novice and student developen.
    Express
    Choose a product to begin stup. It prompted, click the Run or Open command to any clinlunl Wily warning dialul pa.
    Plcasc allow sctup to finish completely before beginning another product installation
    Micgaare
    Express
    Hereputer with a firmilergire of control than the other Express products,
    Miksauth
    Visual Basic 2015 Express
    MIKIgnorer
    Visual C++ 2010 Express
    Mut
    OVisualWebDeveloper 2010 Express
  2. डीवीडी को बर्न करें और
    उस कम्प्यूटर में डीवीडी डालें जहां आप इंस्टॉल करना चाहते हैं (यदि आप विंडो 8 का उपयोग कर रहे । हैं, तो केवल ISO file पर डबल क्लिक करें। यह ऑटोमेटिकली डीवीडी के रूप में mount होगा।)
    view Readme flle
    Visit the visual Studio Express web site to learn more →
    Microsoft Visual C# 2010 Express Setup
    Welcome to Setup
    Microsoft Visual C# 2010 Express
    Werome to the Mrrosof- Visual C# 2010 Fxpress intallation wizard. Microsoft Visual C# 2010 Express is a fun, simple and easy-to-learn development tool for C# progremmer’s interested in creating Windows Forms Windows Presentation Foundation (WPF) as well as class libraries and console-bæed applications. This wizarc will gude you through the installaton process. If this product requires any prerequisites that are nct currently Installed on this computer, you will be able to install those prerequisites as well.
  3. X:\Setup.exe f god foratch
    करें (Replace x: with drive letter assigned to DVD ) Visual Studio 2010 Express Setup का डायलॉग बॉक्स आता है
    (ऊपर चित्र देखें)। 4. Visual C# 2010 Express पर
    क्लिक करें। Welcome to Setup का डायलॉग बॉक्स आता है
    (चित्र के समान दिखाई देगा)। 5. Next पर क्लिक करें। License
    Terms section आता है (चित्र नीचे)।
    Help Improve Setup You can submit information about your setup cxpcricnccs to Microsoft. To participate, check the box below.
    Yos, send infomation about my sobup experiences to Microsoft Corporation. i) For more informatior, click Privacy Statement
    < Previous
    Next »
    Cancel
    339

Leave a Reply

Your email address will not be published.