know yourselves. information, computer, 7 wonders, various.

Tuesday, March 10, 2020

Dreamweaver_ part13_Hyperlink,Absolute link,Image এর সাথে link ও Email link তৈরী করা




Hyperlink :
আমরা Word এ কোন কিছু লিখলে তা Automatidally পরের পেজে চলে যায় । কিন্তু web Page তৈরী করার ক্ষেত্রে Dreamweaver এ একটি Page থাকে । web Page এ একাধিক পেজের দরকার । সে ক্ষেত্রে একটি Page এর কোন টেক্সট বা Image এর সাথে অন্য Page এর link তৈরী করে দিতে হয় । যাতে করে ঐ link এ ক্লিক করার সাথে সাথে Page টি খুলে যায় ।

.html”
এর মাধ্যমে page কে           Hyperlink  করা হয়েছে।       করা হয়েছে।                    Page টি খুলবে।
Hyperlinkকরা হয়

Dreamweaver এ তিন প্রকারের Hyperlink  ব্যবহার করা হয়।
  1. Absolute link - কোন web Page কে link করতে
  2. Document Relative
  3. Site root Relative
Absolute link:
আমাদের Page এর কোন লেখা বা ছবি সাথে অন্য কোন Web Site এর link কে Absolute  বলে। অর্থাৎ ঐ লেখা বা ছবির উপর ক্লিক করলে ঐ Web Site টি খুলে যাবে।
1.            পেজের নিচের দিকে লিখুন For Search go to yahoo লিখুন। Yahoo লেখার সাথে link করার জন্য Yahoo লেখা সিলেক্ট করে Properties প্যানেলে link ঘরে নাম দিন http://www.yahoo.com
এখানে External Web Page এর সাথে link তৈরী করার জন্য অবশ্যই http://উল্লেখ করতে হবে । http র মানে হাইপার টেক্সট ট্রান্সফার প্রটোকল ।
2.           Properties প্যানেলের ডান দিকে Target অংশ থেকে blank সিলেক্ট করুন যাতে করে blank আর একটা page এসে তার উপর লেখা আসে।

3.          File>Save all কমান্ড দেই। Preview in browser করি । এখন আমি যদি Yahoo তে ক্লিক করি তাহলে Yahoo তে চলে যাবে।
4.           Yahoo তে ক্লিক করুন । লক্ষ্য করুন Yahoo তে চলে গেছে।

Yahoo তে নিচে দেখুন FaceboOK, Twitter লেখা আছে। FaceboOK এ ক্লিক করুন।
লক্ষ্য করুন FaceboOK খুলে গেছে । এটিই হল Absolute link
Name Anchor Hyperlink
একই পেজে একজায়গা থেকে আর পেজের link করা হয় এই পদ্ধতি মাধ্যমে । অর্থাৎ Topic টা রয়েছে সেখানে চলে যায় । আমাদের পেজে নিচে কোর্সের Detail এ চলে যাবে। এক্ষেত্রে যেখানে গিয়ে পেজ দাড়াবে সেখানে কার্সর রাখতে হবে।
1.            নিচে Graphics design লেখার শুরুতে কার্সর রেখে নিন। Common tab থেকে Name Anchor অপশনে ক্লিক করুন।

2.          Named Anchor ডায়ালগ বক্স আসবে । নাম দিন Graphics link লক্ষ্য করুন Graphics Design লেখার বায়ে একটি Anchor চিহ্ন অবস্থান করছে।

3.          এবার যে টেক্সট টুকুতে ক্লিক করতে হবে সেই টেক্সট টুকু সিলেক্ট করুন । আমরা উপরে Course অংশের Graphics সিলেক্ট করেছি।

4.           Properties প্যানেল এ link অংশে নাম্বার সাইন দিয়ে অর্থাৎ # Graphics Design লিখে দিন।
5.          লক্ষ্য করুন link তৈরী হয়ে গেছে । File >save করে Preview তে যান । Graphics design  এ ক্লিক করুন। Course Defail অংশ খুলে যাবে।

6.          অর্থাৎ Page এর নিচের অংশে লেখা Detail অংশ খুলবে।

7.          একই ভাবে Page এর নিচে Office programme এর Derail এর শুরুতে কার্সর রেখে Common ট্যাব থেকে Named Anchor সিলেক্ট করুন ডায়ালগ বক্সে নাম দিন Office

Office Programmer লেখার বামে Anchor  পয়েন্ট পরবে।

8.          পেজের উপরের অংশে Office Course লেখাটি সিলেক্ট করে Properties  প্যানেলে link অংশে # Office লিখে দিন। লক্ষ্য করুন আগে একটি link তৈরী হয়েছে । File >save করে Preview করে দেখুন ।

Office Course এ ক্লিক করলে নিচের অংশে Course Detail খুলে যাবে।

এভাবে একই পেজের মধ্যে Anchor পয়েন্টের মাধ্যমে link তৈরী করা যাব।
পেজে link :-আমরা আমাদের তৈরী করে রাখা একই ফোল্ডারে পেজ রেখেছি । এই পেজ গুলোর সাথে আমরা link তৈরী করব। আপনারা আপনাদের সংশ্লিষ্ট বিষয়াদির উপর পেজ তৈরী করে নিন।
1.            যে টেক্সটের সাথেlink তৈরী করব সেই টেক্সট টুকুন সিলেক্ট করুন ।আমরা about us লেখাটি সিলেক্ট করেছি । এবং link about  নামের আগে তৈরী করে রাখা পেজের সাথে link তৈরি করব।
2.          Properties প্যানেল থেকে link অপশনের ডানে ব্রাউজ বাটনে ক্লিক করুন।

3.          link about নামে তৈরী করা পেজ আছে। select File ডায়ালগ বক্স থেকে link about পেজ টি সিলেক্ট করে OK করুন।

4.           File >Save কমান্ড দিন। Preview করে দেখুন । About us ক্লিক করুন।
দেখুন link about পেজটি ব্রাউজারে খুলে গেছে।

5.          Close করে ফিরে আসুন । আবার Our BoOKs লেখাটি সিলেক্ট করুন

6.          Properties প্যানেলে Point to file বাটনটি মাউস দিয়ে চাপ দিয়ে টেনে File প্যানেলে link boOKs html ফাইলটির উপর নিয়ে যান।

এভাবে ও link তৈরী করা যায় ।
7.           File >Save করে Preview করুন। our boOKs লেখাটি link হয়েছে । our boOKs লেখাটি ক্লিক করুন।

link boOKs পেজেটি খুলে যাবে

এবার আমরা দেখব অন্য একটি লেখায় ক্লিক করলে ও ঐ একই পেজ খুলবে।
8.           আরও একটি টেক্সট Products লেখাটি Propertics প্যানেলে link অপশনের ড্রপ ডাউন মেনুতে ক্লিক করুন। আগের link গুলো দেখতে পাবেন। যে কোন একটি সিলেক্ট করুন। আমরা link boOK . html সিলেক্ট করেছি।

9.          File >Save করে Preview তে দেখুন। Products লেখাটি link হয়েছে । ক্লিক করুন আবার link books পেজটি open হবে।

Image এর সাথে link করা :
অনেক গুলো Image এনে রেখেছি । কিভাবে Image আনতে হয় তা  আপনারা আগেই দেখেছেন।
10.        যে কোন Image কে সিলেক্ট করুন। Properties প্যানেল থেকে link এর ডানে Browse বাটনে ক্লিক করুন।

11.       Select File ডায়ালগ বক্স থেকে তৈরী করে রাখা link about File টি সিলেক্ট করে দিন। OK করুন।

12.      File >Save করে Preview করুন । দেখুন ছবিটি link হয়েছে । ছবিটির উপর ক্লিক করুন।

দেখুন  link about পেজটি খুলে গেছে।

এভাবে কোন Image এর সাথে অন্য পেজের link তৈরি করা যায়।
Email link তৈরী করা
আমরা আমাদের পেজের কোন লেখার সাথে Email link তৈরি করব।
১. পেজের শেষে Contuct us লেখাটি সিলেক্ট করুন। Common Tab সিলেক্ট থাকা অবস্থায় ২ নং অপশন অর্থাৎ Email link বাটনে ক্লিক করুন।

২. Email link ডায়ালগ বক্স আসবে। Email ঘরে Email নাম দিন। আমরা দিলাম mebinjahan @yahoo.comOK করুন।

৩. File >Save করে Preview দেখুন Contuct us লেখাটি link হয়েছে। ক্লিক করুন। Email খুলে গেছে।

Dreamweaver_ part10Image Properties ও Animation সংযুক্ত



Image Properties
লক্ষ্য করুন Image টি সিলেক্ট করলে Properties এর অপশন গুলো পরিবর্তিত হয়ে যায়। এখান থেকে Image টিকে কাস্টমাইজ করা যায়।
১. Image এর Height Width বাড়ানোর জন্য একদম ডানে W এবং H ঘরে সংখ্যা বাড়িয়ে কমিয়ে দিন। আমরা W-400; H-200 করে দিলাম।
২. Properties প্যানেলের Edit অংশে বিভিন্ন ভাবে Image টিকে Edit করার অপশন রয়েছে। Edit অংশে Ps সাইন দেয়া অপশন রয়েছে। এই অপশনে ক্লিক করলে Image টি ফটোশপে খুলে যাবে। প্রয়োজনিয় পরিবর্তন করুন।
৩. File>Save করে File>Exit করে Dreamweaver এ ফিরে আসুন।
লক্ষ্য করুন Image টি Edit হয়ে গেছে। এছাড়াও আরো বিভিন্ন অপশন Crop/Brightness and Contrast/Sharpen প্রভৃতি এই Edit অপশন থেকে করা যাবে।
৪. Src অপশনে Image এর উৎস এবং Alt অপশনে Image এর Alternate নামে প্রর্দশিত হবে।
Animation সংযুক্ত
আমরা এখান একটি Animation যোগ করব। আমাদের তৈরীকৃত সাইটে এনিমেটের আছে।
১. Files প্যানেল থেকে মাউস দিয়ে ধরে টেনে এনে উপরে ব্যানারের উপর ফেলুন।
২. Alternative নাম চাইবে্ নাম দিয়ে দিন।
৩. দেখতে পাব একটি Animation File উপরে চলে আসবে।
এই Animation টি চলবে যদি আমরা এটিকে Preview করি। আমরা দেখতে পাচ্ছি উপরে অনেক জায়গা খালি হয়ে Animator টি বসেছে। আমরা এটিকে ব্যানারের উপর নিয়ে আসব।
৪. Animator টিকে সিলেক্ট করে Properties প্যানেলে ID ঘরে নাম দিন Animator.
৫. CSS Style প্যানেল হতে New CSS Rule বাটনে ক্লিক করুন। New CSS Rule ডায়ালগ বক্সে OK করুন। CSS Rule Definition ডায়ালগ বক্সে Positioning ঘরে Position এর ড্রপ ডাউনে ক্লিক করে Absolute করে দিন এবং Box ঘরে Margin অংশে Top=10 এবং Left=700 করে Apply দিয়ে OK করুন।
লক্ষ্য করুন Animator টি ব্যানারের উপর চলে এসেছে এবং ডানে অবস্থান করছে।
৬. File>Save করে Preview করুন। Animation টি মুভ হবে।
পেজের Background Image
Image সেট করব। অর্থাৎ আমাদের লেখার পেছনে আমরা কোন Image সেট করব।
১. CSS Style প্যানেল হতে New CSS Rule বাটনে ক্লিক করুন। New CSS Rule ডায়ালগ বক্স আসলে Tag Selector সিলেক্ট করে Selector Name ঘরে Body সিলেক্ট করুন।
২. OK করুন। CSS Rule Definition ডায়ালগ বক্সে Background অপশনে ক্লিক করে Background Image এর ডানে Browse বাটনে ক্লিক করুন।
1.                  Selector Image Source ডায়ালগ বক্স আসলে আপনার Location File থেকে ছবি সিলেক্ট করে OK করুন।
কোন ডায়ালগ বক্স আসলে OK করুন।
৪. Apply দিয়ে OK করুন। Image টি টেক্সটের পেছনে অবস্থান করছে।

Font Family পরিবর্তন
Properties প্যানেলের CSS বাটনে ক্লিক করুন। পরিবর্তন দেখতে পাবেন।
আমরা এখানে দেখতে পাচ্ছি Tergeted Rule অংশে #maincontent লেখা অর্থাৎ লেখাগুলো #maincontent Div ট্যাগের মধ্যে রয়েছে। CSS Rule বাটনে ক্লিক করুন।
CSS Rule Definition ডায়ালগ বক্স আসলে Type ঘরে ক্লিক করুন।  Font Family ড্রপ ডাউন ক্লিক করুন। Arial Black, Godget, sens-serif ফন্টটি সিলেক্ট করে Apply করে OK দিন।
পরিবর্তন লক্ষ্য করুন। Properties প্যানেলের Font ঘরে নাম প্রদশিত হচ্ছে।
ড্রপ ডাউন তীরে ক্লিক করে Edit Font list এ চলে যান। Edit Font list ডায়ালগ বক্স আসবে। এখানে নতুন Font Family তৈরী করতে পারবেন। 
ডানে Available Fonts গ্রুপ থেকে অনেকগুলো Font সিলেক্ট করে Font Family তৈরী করা যায়। Properties প্যানেলে Size অংশ হতে Font এর Size পরিবর্তন করা যায়।
Bold, Italic, Alignment করা যায়।
Previous Post                                                                                           Next Post

  বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft  Word
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
 The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book.  Book's CD Link below... 

 cd

RELATED POST LINKS BELOW ********************************************
part1_Dreamweaver, Properties Inspector ও Panel বন্ধ করা
part2-Panel আনা, Panel গ্রুপে Panel টিকে রাখা ও Panel গ্রুপকে Collapse করা

part3-নতুন Site তৈরী করা
part4_Import Siteও Logout তৈরী
part5_হেডার যুক্ত করা
part6_Style Sheet ও Tag Selector
part7_ Div Tag 
part8_Box Properties ও Floating করা
part9_ID selector ও Image type 
part10_Image Properties ও Animation সংযুক্ত 
part11_টেবিল সংযোজন, টেবিলে ডাটা ইমপোট করা, Table ফরমেটিং ও টেবিলে Image সেট করা 
part12_Form তৈরী করা, Form এর ভিতর ফিল্ড সেট করা,  Form এর মধ্যে Text ফিল্ড যোগ করা, From এ রেডিও বাটন যোগ করা, Form এ Text area যোগ করা, Form এ বাটন যোগ করা, ও Form Design