آموزش طراحی وب سایت - مقدماتی

فصل اول

توانایی درک مفهوم web و متدولوژی

* آشنایی با تاریخچه طراحی وب سایت

* آشنایی با اصول مهم در طراحی صفحه Web و متدولوژی

* شناسایی محدودیت ها و مزیتها در طراحی صفحه Web و بررسی چند نمونه

در این فصل تاریخچه طراحی وب سایت را بررسی خواهیم کرد و همچنین با اصول مهم طراحی وب سایت و متدلوژی آشنا خواهیم شد و در نهایت محدودیت ها و مزیتها در طراحی وب سایت و بررسی چند نمونه را بررسی می کنیم.

مقدمه :

جهت طراحی و ساخت یک سیستم در مهندسی کامپیوتر می بایستی شناخت مناسبی نسبت به سیستم از سوی طراحان وجود داشته باشد. لذا جهت طراحی وب سایت می بایستی شناخت کلی حداقل در خصوص تاریخچه طراحی ، متدلوژی ، محدودیت ها و مزایا مد نظر قرار گیرد. در این فصل مواردی در این خصوص را بررسی خواهیم کرد.

1-1 آشنایی با تاریخچه طراحی وب سایت
تاریخچه وب سایت به زمانی باز می گردد که شبکه جهانی گسترده یا WWW (World Wide Web ) توسط تیم برنزرلی (Tim Bernerst Lee ) مطرح شد. این محقق دانشگاه آکسفرد با مشکلی مواجه شد این مشکل آن بود که این دانشمند اطلاعات گوناگونی را بر روی کامپیوترهای گوناگون به صورت پراکنده داشت و دسترسی به همه ی آنها در هر مکان غیرممکن بود، لذا اوبه فکر این موضوع بود که اطلاعات پراکنده را چگونه در یک لحظه در اختیار داشته باشد. او در سال 1980 در آزمایشگاه CERN شروع به تجزیه و تحلیل و طراحی نمود . در سال 1984 اینترنت و TCP/IP در CERN به عموم معرفی شد. در سال 1989 سایت CERN بزرگترین سایت اینترنتی اروپا شد. در CERN فرهنگ کامپیوتر حول محورهای کامپیوتری توزیعی و برنامه نویسی شیی گرا می چرخید. این ایده باعث شد تا تیم برنرزلی در سال 1991 موضوع WWW را از دانشگاه CERN ارائه کند از این سال به بعد به صورت رسمی ساخت و طراحی وب سایت موضوع روز بود که هم اینکه نیز توسعه آنرا شاهد هستیم.

2-1 آشنایی با اصول هم در طراحی وب سایت و متدلوژی

در طراحی وب سایت موضوعاتی چون متدلوژی طراحی می بایستی مد نظر قرار گیرد. متدلوژی اصولا بر فاکتورها، عوامل ، اجزا و طراحی می پردازد. در پیاده سازی متدلوژی بکارگیری ابزارهایی چون DHTML,Multimedia ,Flash , Dream Weawer و استانداردهای CSS می توانند بسیار موثر باشند.

متدلوژی طراحی وب سایت بر عناصر و اجزای Web ، مرور صفحه ، مکان عناصر، فرمت اجزا و چگونگی بکارگیری آنها بسیار تاکید دارد.

3-1 شناسایی محدودیتها و مزیتها در طراحی وب سایت و بررسی چند نمونه

وب سایت نیز مانند دیگر موارد مهندسی کامپیوتر دارای محدودیتها و مزیتهایی هستند از مهمترین محدودیت های رایج در مکانیزم و تکنولوژی Web می توان به مواردی چون عدم دسترسی بدون امکانات پیشرفته مانند کامپیوتر و سرویس دهنده ، داشتن دانش کامپیوتر جهت دسترسی ، عدم اعتماد همه کاربران به Web ، عدم نمایش صفحات بسته به فرهنگ ، عدم وجود اعتبار برای همه سایت ها، عدم درک محصولات به دلیل عدم لمس فیزیکی و واقعی ، احتمال سرقت اطلاعات در هنگام رد و بدل اطلاعات، امکان نفوذ اشخاص غیرمجاز به سایتها، در اطلاعات زیاد عدم رسیدن کاربران به هدف به دلیل احتمال مرور صفحات زیاد، به لحاظ موجود نبودن بستر ارتباطات و عدم قوانین بانکی و مالی عدم بکارگیری بهینه از Web جهت زندگی روزمره و مواردی مشابه در برخی شهرها و کشورها از محدودیت های طراحی و بکارگیری Web می باشند. اما در خصوص مزایای وب سایت میتوان به برخی از این موارد اشاره داشت. اخذ اطلاعات گوناگون از یک محل مانند منزل ، مشاهده اخبار و اطلاعات بروز مثلا مانند روزنامه ، اتصال کاربران زیاد و ارائه خدمات شهری مانند ثبت نام و عدم انتقال فیزیکی فرد از یک نقطه شهر به نقطه دیگر، ارائه خدمات و اطلاعات با سرعت بالا و ارزان از یک نقطه جهان به نقطه دیگر ، مشاهده و شنیدن اطلاعات صوتی و فیلم و تصویر به عنوان یک رسانه بدون امکانات سطح بالایی مانند سیستم های تلویزیونی ، دسترسی ساده و آسان به بانکداری ، آموزش و تجارت الکترونیکی و مشابه آن برخی از مهمترین مزایای وب سایت می باشند. جهت بررسی چند نمونه به سایت بسیار مناسب دانشگاه علم و صنعت مراجعه می کنیم.

در صورت ورود به سایت دانشگاه علم و صنعت امکاناتی مانند نام استاد نام مقالات ارائه شده و کتابهای استاد ، اخبار دانشگاه، وضعیت دانشکده ها و موارد دیگر را می توانیم مشاهده کنیم . اما مزایای این Web آن خواهد بود که هر کاربر در هر نقطه از جهان می تواند به آن متصل شود و کلیه ی اطلاعات مناسب را از این سایت اخذ نماید. حال سایت بانک ملی را می توانیم بررسی کنیم .

این سایت نیز دارای مزایای مناسبی است، اما در صورتیکه بخواهید یک حساب الکترونیکی داشته باشید که از هر مکان در دنیا قرار دارید مقداری پول برداشت کنید این عمل غیرممکن است. همچنین در صورتیکه بخواهید از یک حساب به حساب دیگر پولی واریز نمایید امکانپذیر نیست و عیوب دیگر این است که به هیچ وجه شما نمی توانید یک حساب الکترونیکی داشته باشید و با دیگر بانکها در ارتباط باشید.

فصل دوم

توانایی کار با محیط تولید ابتدایی Web و فرمتهای شناخته شده در Web

* آشنایی با تاریخچه طراحی وب سایت
* آشنایی با اصول مهم در طراحی وب سایت و متدلوژی

* شناسایی محدودیت ها و مزیتها در طراحی وب سایت و بررسی چند نمونه

در این فصل با فرمتهای قابل پذیرش در Web آشنا خواهیم شد سپس فرمتهای صوتی و تصویری رایج در Web را بررسی خواهیم کرد و کار با ابزارهای سودمند طراحی صفحه Web مانند Notepad و MS FrontPage مطرح خواهد شد. همچنین در نهایت با محیط نمایش صفحه Web مانند IE و opera آشنا خواهیم شد.

مقدمه

درطراحی صفحات Web اشیائی که می توانیم در یک صفحه درج کنیم بسیار مهم می باشند. اما در کامپیوتر هر شیئی یک فرمت خاصی دارد که طراح با توجه به کیفیت فرمت شیی ، سرعت نمایش و حجم فرمت میتواند راجع به درج شیی تصمیمات بگیرد، در این گفتار فرمت اشیا و محیط های تولید ابتدایی Web را بررسی خواهیم کرد.

1-2 آشنایی با فرمتهای قابل پذیرش در Web

در صفحات Web برخی از فرمتهای اشیائ قابل پذیرش و برخی دیگر غیرقابل پذیرش هستند البته مهندسین کامپیوتر سعی دارند و همواره به این نکته توجه دارند که کلیه فرمتهای اشیائ در وب سایت قابل پذیرش باشند، از مهمترین فرمتهای قابل پذیرش در وب سایت که رایج ترین هستند می توان به فرمتهای صوتی و تصویری اشاره کرد.

2-2 آشنایی با فرمتهای صوتی و تصویری رایج در Web

از رایج ترین فرمتهای قابل پذیرش در Web می توان به فرمتهای صوتی و تصویری اشاره کرد. در حقیقت این نکته را یادآوری می کنیم که در ابتدای ظاهر شدن یک صفحه Web تصاویر و صوت موجود در آن برای بازدیده کننده جذاب تر است لذا طراح Web می بایستی در طراحی به ظاهر Web اهمیت بسیاری دهد.

فرمت فایلهای صوتی

از مهمترین فایلهای صوتی رایج جهت درج بر روی صفحات وب می توان موارد زیر را نام برد.

فرمت فایل تصویری

در وب سایت فایلهای تصویری با فرمت گوناگون می توان به کار برد اما از مهمترین فرمتهای فایل می توان موارد زیر را نام برد.

فرمت فایلهای تصویری

در طراحی جدید Web بکارگیری فایلهای ویدیویی در حال حاضر بسیار رو به توسعه است پیش بینی می شود با بالا رفتن سرعت کامپیوترها و سرعت خطوط ارتباطی طراحان در آینده بکارگیری فایلهای ویدئویی را بسیارزیاد مد نظر قرار خواهند داد.

فرمت فایلهای ویدئویی

از مهمترینی فرمت فایلهای ویدئویی قابل قبول در صفحات وب می توان به موارد زیر اشاره کرد.

3-2 شناسایی اصول کار با ابزارهای سودمند در طراحی وب سایت

برای طراحی وب سایت ابزارهای بسیاری در دنیای کامپیوتر توسط مهندسین کامپیوتر ساخته شده است. هر یک از این ابزارها توانایی ها و مزیتهای خود را دارند، اما در این درس ابتدایی ترین و ساده ترین ابزارها که دو عنوان هستند را بررسی اجمالی می کنیم .

1-3-2 Notepad

برنامه Notepad یک برنامه رایگان در ویندوز است در این برنامه می توانیم کدهای ساده HTML را تایپ کنیم و فایل خود را با پسوند HTML ذخیره کنیم و در یک مرورگر اینترنت وب سایت طراحی شده را مشاهده کنیم.

2-3-2 MS FrontPage

یکی دیگر از ابزارهای طراحی وب سایت نرم افزار Front page است. این ابزار عموما با نصب Office بر روی کامپیوتر نصب می شود. در این نرم افزار امکانات مناسبی وجود دارد و کار با این ابزار بسیار زیاد است.

در این ابزار منوهای متعددی وجود دارد که برای قرار دادن انواع دکمه ها کادرهای ورود داده ها و قرار دادن انواع متن با حالت های گوناگون درج صوت و تصویر و فایل ویدئویی در وب سایت و موارد دیگر از جمبه توانایی های این ابزار می باشد. این ابزار حتی الگوهای آماده از قبل طراحی شده را در اختیار طراحان قرار می دهد تا با دستکاری دلخواه به صفحات مورد نظر برسند. در فصلهای بعدی با استفاده از Frontpage طراحی های مناسبی را انجام خواهیم داد.

4-2 آشنایی با محیط نمایش وب سایت

پس از اینکه طراحان وب سایت را طراحی کردند و بر روی اینترنت قابل دسترس کاربران قرار گرفت نرم افزارهایی باید موجود باشند که توانایی نمایش وب سایت را داشته باشند تا کاربران Web را مشاهده کنند.

امروزه محیط های نمایشی بسیاری برای وب سایت جهت مرور صفحات وجوددارد که کاربران بسته به سلیقه خود وکامل بودن مرورگر از آن استفاده می کنند. .

5-2 آشنایی با IE و Opera

امروزه دو مرورگر Internet Explore معروف به IE و Opera از پرطرفدارترین مرورگرهای دنیا در بین کاربران اینترنت هستند مرورگر IE ساخت شرکت مایکروسافت است.

این مرورگرها دارای منوها و امکانات مناسبی مانند ذخیره صفحات Web بر روی دیسک سخت نمایش صفحات Web با فونتهای کوچک و متوسط و بزرگ ، ذخیره سایتهای مورد علاقه بر روی منوهای Favorites و مواردی دیگر است اما مرورگر اینترنت دیگری که در حقیقت زغیب IE می باشد مرورگر opera است.

مرورگر Opera نیز دارای امکانات متعدد مانند دسترسی به سایتهای معروف برای موسیقی ، فیلم ، ورزشی و اخبار و موارد دیگر است. این مرورگر توانایی ذخیره صفحات Web بر روی دیسک سخت،ذخیره آدرسهای مورد نظر در favorites ، مشاهده که HTML یک صفحه Web و مواردی دیگر است. از جمله مواردی که Opera را از IE متمایز می کند و در بین کاربران اینترنت مطرح می شود امنیت بالای Opera نسبت به IE است.

              

* شناسایی اصول کار با محیط Notepad برای صفحات Web

* ذخیره سازی صفحه وب

* بازیابی صفحه وب

* شناسایی اصول کار با منوهای Notepad

ü آشنایی با اصول اولیه وب

* مرور صفحه طراحی شده به کمک IE

در این فصل کار با محیط Notepad برای صفحات Web را بررسی خواهیم کرد. همچنین با ذخیره سازی صفحه وب و بازیابی صفحه وب آشنا خواهیم شد. کار با منوهای Notepad و آشنایی با اصول اولیه وب بررسی خواهند شد و در نهایت مرور صفحه طراحی شده به کمک IE را بررسی می کنیم.

مقدمه

برنامه Notepad یک ویرایشگر متن ساده است که در این گفتار با استفاده از این برنامه می خواهیم صفحات Web ساده بسازیم . از مزایای طراحی صفحات Web است که کدهای Html را می توانیم با هر ویرایشگر ساده بنویسیم و بلافاصله در یک مرورگر نتیجه کار خود را مشاهده کنیم. در این گفتار کار با دستورات body و head و title را بررسی می کنیم و سپس در محیط Notepad آنها را تایپ کرده و در مرورگر نتیجه کار خود را مشاهده می کنیم.

1-3 شناسایی اصول کار با محیط Notepad برای وب سایت

برای دسترسی و کار با نرم افزار Notepad ، چه در سیستم عامل ویندوز 98 باشید و چه در سیستم عامل ویندوز xp و یا ویندوز 2000 (که رایجترین سیستم عامل ها می باشند) کافی است طبق آدرس زیر به نرم افزار Notepad دسترسی پیدا کنید: لازم به ذکر است که این نرم افزار به طور خودکار در هنگام نصب سیستم عامل بر روی کامپیوتر شما قرار خواهد گرفت.

با توجه به شکل زیر ابتدا به منوی Start در desktop بروید و سپس روی آن کلیک کرده و گزینه Program را کلیک کنید سپس در منوی ظاهر شده روی گزینه Accessories و سرانجام از منوی ظاهر شده گزینه Notepad را انتخاب کنید.

با انتخاب گزینه Notepad پنجره مربوط به این نرم افزار ظاهر خواهد شد

1-1-3 ذخیره سازی صفحه وب

صفحات وب به وسیله برنامه های واژه پرداز یا ویرایشگر ساخته می شوند ولی باید به گونه ای باشند که توسط برنامه های مرورگر مختلف و در محیط های گوناگون قابل مشاهده باشند. به این منظور ، صفحات وب با یک فرمت جهانی و به صورت فایلهای متن ذخیره می گردند. برای آنکه برنامه های مرورگر مختلف بتوانند صفحات وب را به آسانی شناسایی نمایند و علائم موجود در آنهارا شناسایی کنند و آنها را با فایلهای متن معمولی اشتباه نگیرند باید از پسوند فایلی .html یا .htm استفاده نماییم.

توجه :

در ویندوز 3,1 (windows 3,1 ) از پسوندهای سه حرفی استفاده می شود بنابراین اگر فایلهای خود را با پسوند html ذخیره کنید آنگاه کاربران در ویندوز 1 و 3 توانایی مشاهده آنها را نخواهند داشت. البته ویندوز 1 و 3 مدتهاست که مورد استفاده قرار نمی گیرند اما این موضوع مطرح شد تا در موارد مشابه آگاهی لازم را داشته باشید.

پس از آنکه پنجره Notepad را باز کردید و بعد از اعمال دستورات مربوط به طراحی وب که بعداً خواهید آموخت، صفحه خود را به این صورت ذخیره کنید که البته بهتر است از ابتدای کار صفحه را ذخیره کنید تا مشکلی به وجود نیاید.

همچنین بهتر است محل مشخصی را برای ذخیره فایلهای مربوط به طراحی سایتتان در نظر بگیرید مثلاً یک پوشه مجزا را تحت عنوان Website برای ذخیره فایلهای متنی و تصاویر و بقیه امکانات سایت خود در نظر بگیرید جهت اولین ذخیره فایل خود به این صورت عمل کنید :

1- ابتدا روی گزینه File از پنجره Notepad کلیک کنید، سپس گزینه Save As را انتخاب نمایید.

2- با انتخاب گزینه SaveAs پنجره محاوره ای Save As ظاهر می شود. در این قسمت باید نامی را برای صفحه مورد نظر خود در نظر بگیرید، توجه داشته باشید که باید نام اولین صفحه از سایت یکی از دو کلمه index و home و پسوند فایل مورد نظرتان باید یا .htm یا .html باشد. مثلاً index.html

3- در کادر محاوره ای Save As رفته و گزینه Text Document و یا Text only را به عنوان فرمت فایل انتخاب نمایید.

4- حال پوشه ای را که برای ذخیره فایلهای در نظر گرفته اید در قسمت Save As قرار دهید. مثلاً website

5- در اخرین مرحله دکمه Save را بزنید.

2-1-3 برای بازیابی صفحات وب

کافی است به آدرس محلی که فایلهای مربوط به سایت خود را در آن قرار داده اید بروید. طبق مثال صفحات سایت شما در پوشه ای به نام website قرار داده شده است. پس به پوشه Website بروید صفحه یا صفحاتی را که ذخیره کرده اید در این پوشه موجود می باشد. کافی است برای بازیابی صفحه مورد نظر خود روی صفحه مورد نظر رفته و دابل کلیک کنید. بدین ترتیب صفحه مرورگر شما (معمولاً internet explorer ) به طور خودکار باز می شود و صفحه وبی که ساخته اید را مشاهده خواهید نمود

2-3 شناسایی و اصول کار با منوهای Notepad

ابتدا برنامه Notepad را اجرا کنید، پنجره برنامه Notepad گشوده می شود سپس با کلیک بررسی های بر روی هر منو گزینه های آنرا می توانید بکار ببرید. در این قسمت معرفی و کاربرد تک تک منوهای موجود د رنوار برنامه ی منو خواهیم پرداخت.

معرفی منوی File واجزای آن :

(1) گزینه New : برای ایجاد صفحه ای جدید در این نرم افزار کافی است این گزینه را از منوی File انتخاب نمایید. یا از دکمه های ترکیبی Ctrl+N استفاده کنید. بدین ترتیب صفحه ای جدید برای تایپ کردن آماده خواهد شد. (شکل 2-3).

(2) گزینه open : برای بازکردن پرونده ها کافی است دستور open را از منوی file اجرا کنید.بدین ترتیب به طور پیش فرض می توانید پرونده های دارای انشعاب (پسوند) .txt را باز کنید. اگر بخواهید پرونده های دارای انشعاب دیگر را باز کنید کافی است گزینه File of Type را به گزینه All File تغییر دهید. به جای استفاده از گزینه Open می توانید از دکمه ترکیبی Ctlr+O استفاده کنید.

(3) گزینه Save As و Save برای ذخیره کردن پرونده های متنی ویرایش شده دستور Save از منوی File اجرا کنید و برای ذخیره کردن اطلاعات در پرونده ای با اسم یا انشعاب دیگر دستور Save as را از منوی File اجرا نمایید. دکمه ترکیبی دستور Save برابر با Ctrl+S می باشد.

(4) گزینه page setup : برای تنظیم مشخصات کاغذ چاپ از دستور page setup استفاده می شود . با انتخاب این گزینه پنجره محاوره ای page setup ظاهر می شود و پیش نمایشی از همان پرونده یا صفحه مورد نظرتان برای چاپ مشاهده خواهید کرد.

1-4 حاشیه های کاغذ را توسط گزینه های قسمت Margins تنظیم کنید.

2-4 – برای اندازه کاغذ چاپ از قسمت Paper استفاده کنید.

3-4- جهت چاپ متن بر روی کاغذ از دو حالت معمولی یا ایستاده (portrait و افقی landscape ) که در قسمت Orientation استفاده کنید.

4-4- در قسمت کادر متنی Header می توانید عنوانی (سر صفحه ) را برای پرونده مورد نظرتان در نظر بگیرید.

5-4 – در قسمت کادر متنی Footer شما میتوانید پاورقی (زیر صفحه ) برای از پرونده وارد کنید.

6-4 – بعد از اعمال تغییرات لازم، کافی است در صورت موافق بودن دکمه ok را کلیک نمایید.در صورت مخالف بودن دکمه cancel را انتخاب کنید.

(5) گزینه print برای چاپ یک پرونده و از دستور print استفاده نمایید. دکمه ترکیبی آن ctrl+p می باشد.

(6) گزینه Exit : با انتخاب این گزینه از برنامه Note pad خارج می شوید.

تذکر :

در صورتیکه در فایل خود تغییراتی را داده باشید پس از انتخاب Exit سوالی راجع به ذخیره فایل با تغییرات انجام شده یا ذخیره بدون تغییرات را مشاهده خواهید کرد.

معرفی منوی Edit و اجزای آن:

همانطور که در شکل مشاهده میکنید منوی Edit از اجزایی تشکیل شده است که وظیفه آنها ویرایش اطلاعات تایپ شده در صفحه Notepad می باشد. با توجه به شکل دکمه های ترکیبی یا میانبر این گزینه ها نمایان می باشند.

حال به معرفی و کاربرد تک تک این گزینه ها می پردازیم :

(1) گزینه Undo : با استفاده از این گزینه شما می توانید یک مرحله به عقب برگردید. به عنوان مثال : اگر در صفحه Notepad متنی یا دستوری را تایپ کردیدو تصادفاً آن دستور پاک شد با استفاده از این گزینه میتوانید یک مرحله به عقب برگشته و به حالت قبلی برگردید.این گزینه فقط میتواند یک مرحله به عقب برگردد و استفاده مجدد از آن باعث می شود به مرحله جلو برگردید.

(2) گزینه cut : برای برداشتن قسمتی از متن موجود در صفحه از این گزینه استفاده می شود. بدین صورت که اشاره گر ماوس را در مکان دلخواه از متن موجود در صفحه قرار می دهیم. سپس کلمه یا جمله و یا پاراگراف مورد نظر را با درگ کردن ماوس بر روی متن تا نقطه مورد نظر و سپس رها کردن ماوس، انتخاب می کنیم و یا می توانید روی قسمتی که انتخاب کرده اید راست کلیک کرده و گزینه cut را انتخاب کنید.

با عمل cut متن برش داده شده از جای خود حذف می شود و شما می توانید متن مورد نظر خود را که میتواند کلمه یا جمله یا پاراگرافی باشد را در مکان دیگری از صفحه Notepad و یا در صفحات دیگری که ایجاد کرده اید قرار دهید. عمل درج متن cut شده را می توانید چندین مرتبه در مکانهای گوناگون انجام دهید.

اگر از cut دوباره استفاده کنید برای قسمتی جدید از متن ، دیگر در متن قبلی در حافظه سیستم نمیماند و جایش را به متن جدید می دهد.

(3) گزینه copy همانطور که از نامش مشخص است این گزینه برای عمل کپی برداری از متن مورد نظر در صفحه به کار می رود. همانند cut می باشد با این تفاوت که در عمل Copy دیگر متن از جایش بریده نمی شود بلکه فقط یک کپی از روی آن برداشته می شود. از این کپی می توان چندین بار استفاده کرد تا زمانی که کپی جدیدی از متن دیگری نگرفته باشید. برای کپی کردن قسمتی از متن یا کلمه و یا حرف مورد نظر با استفاده از ماوس آنرا انتخاب کرده و گزینه Copy را از منوی Edit انتخاب می کنیم و یا روی قسمت انتخاب شده کلیک راست کرده و گزینه copy را انتخاب می کنیم.

(4) گزینه pause در صورتیکه از متن موجود در Notepad را انتخاب کردید و آن را برش و یا کپی کردید، برای چسباندن متن مورد نظر خود در مکان دلخواه باید گزینه pause را از منوی edit انتخاب کنید و یا در مکان مورد نظر کلیک راست کرده و گزینه paste را کلیک کنید، بدین ترتیب متن کپی شده یا برش داده شده در مکان جدید ظاهر می شود.

(5) گزینه Delete برای پاک کردن قسمت مورد نظرتان که انتخاب کرده اید از این گزینه استفاده کنید یا بعد از انتخاب قسمت مورد نظر کافی است کلید Delete روی صفحه کلید را فشار دهید.

(6) گزینه Find : در صورتیکه بخواهید کلمه ای را در فایل جست وجو کنید و بیابید، می توانید با استفاده از گزینه Find این کار را به آسانی انجام دهید. برای این منظور به منوی Edit رفته و گزینه Find را انتخاب کنید به این ترتیب کادر محاوره ای با عنوان Find ظاهر می شود با توجه به شکل در قسمت Find view شماباید حرف ،کلمه یا جمله مورد نظر خود را برای جست و جو وارد کنید، اگر در ابتدای صفحه قرار دارید باید در قسمت Direction گزینه down را انتخاب کنید و اگر در انتهای صفحه بودید گزینه up را انتخاب کنید برای جست و جو حال کافی است روی دکمه Find Next کلیک نمایید تا جستجو اغاز شود.

توجه 1 :

با هر بار کلیک کردن بر روی دکمه Find Next جستجو صورت می گیرد تا اینکه به پایان رسد.

توجه 2:

اگر درکادر محاوره ای Find گزینه Match case را انتخاب کنید، باعث می شود که دقیقاً دنبال همان قسمتی که در نظر دارید بگردد و موارد شبیه به آن جستجو نمی شود.

(7) گزینه Find Next : این گزینه دقیقاً همان عمل دوباره جستجو کردن را پله پله انجام میدهد برای پیدا کردن قسمتی از متن که مد نظرتان بود با هر بار انتخاب این گزینه پافشار کلید میانبرش عمل جستجو صورت می گیرد تا به انتهای سند برسند.

(8) گزینه replace : زمانی که بخواهید در متن یک حرف یا کلمه یا جمله ای را با حرف یا کلمه یا جمله ای جدید عوض کنید از این دستور استفاده کنید. ابتدا باید محل قسمتی را که می خواهید عوض شود را پیدا کنید و سپس با دستور Replace قسمت جدید را جایگزین کنید، این جایگزین می تواند به جای تمام قسمت های مورد نظر در کل صفحه نیز صورت بگیرد.

برای این منظور ابتدا به منوی Edit رفته و گزینه Replace را انتخاب کنید بدین ترتیب کادر محاوره ای با عنوان Replace ظاهر می شود. در قسمت Find Next بخش مورد نظر خود را برای پیدا شدن و تعویض صورت گیرد کافی است دکمه Replace All را انتخاب کنید. در شکل 13-3 به جای کلمه hello !! در سند کلمه welcome قرار می گیرد.

(9) گزینه Goto : برای آنکه به خط مشخصی از متن دستورات بروید کافی است این گزینه را از منوی Edit انتخاب کنید در کادر محاوره ای Go to line شماره خط مورد نظرتان را قرار دهید و سپس دکمه ok را بزنید به این ترتیب اشاره گر ماوس به سر خط موردنظر می رود.

(10) گزینه select All : برای انتخاب کل متن سند کافی است از این گزینه استفاده کنید.

(11) گزینه Time/Date : با کلیک بر روی این گزینه تاریخ وساعت زمان جاری کامپیوتر شما در مکان مورد نظر در صفحه متن قرار می گیرد.

معرفی منوی Format و اجزای آن :

برای قالب بندی سند ایجاد شده در صفحه Notepad با گزینه های موجود در منوی Format قالب بندی صفحه متن خود را می توانید انجام دهید. منوی Format از دو گزینهwarp Word و Font تشکیل شده است.

(1) گزینه word warp : در حالت معمولی پنجره Notepad به صورت می باشد. در پایین پنجره نوار وضعیت پنجره یا status bar وجود دارد که از وضعیت پنجره خبر می دهد. مثلاً تعداد سطرها و ستونهای به کار رفته و ...همچنین در صورتیکه پنجره را به هر اندازه دلخواه درآورید نوار scrollbar بسته به تعداد ستونهای افقی و عمودی در پنجره ظاهر می شود. حال اگر بخواهید نوار وضعیت و نوار پیمایش افقی پنجره را همزمان حذف کنید کافی است تا گزینه Word warp را انتخاب کنید با انتخاب این گزینه طبق دستورات طولانی شما به طور خودکار در پنجره شکسته می شود و در یک خط مستقیم قرار نمی گیرد.

(2) گزینه Font برای تعیین نوع خط، اندازه و سبک متون به منوی Format رفته و گزینه Font را انتخاب کنید. با انتخاب این گزینه کادر محاوره ای با عنوان font ظاهر می شود.

توضیحات در مورد کادر محاوره ای Font

Font : در این قسمت نوع فونت مورد نظر انتخاب می شود مثلاً در این مثال Arial

Font style : در این قسمت سبک فونت را مشخص می کنید که Regular (معمولی ) باشد یا Italic (کج یا اریب ) باشد یا Bold (کلفت) و یا Bold italic (هم کلفت هم کج) باشد.

Size : در این قسمت اندازه وسایز فونت خود را مشخص کنید.

Sample : در این قسمت نمونه یا شمایی از تغییراتی که برای نوع تایپ متون در نظر گرفته اید نمایان می شود.

Script : در این قسمت می توانید به دلخواه یکی از حالت های موجود را برای فونت خود در نظر بگیرید.

معرفی منوی View و اجرای آن

همان طور که در قبل توضیح داده شد هر پنجره مربوط به نرم افزارهای مختلف در حالت معمولی دارای یک نوار وضعیت (status bar ) می باشد که در حالت و وضعیت و اطلاعات مربوط به پنجره را نمایان می کند. حال برای آنکه این نوار را به طور دلخواه از پنجره حذف کنید و یا آن را مخفی کنیدکافی است به منوی View رفته و گزینه Status Barرا از حالت انتخاب خارج کنید برای آنکه دوباره نوار وضعیت آشکار باشد کافی است دوباره گزینه Status Bar را انتخاب کنید.

معرفی منوی Help و اجزای آن

همانطور که از نامش پیداست . برای هر گونه اشکال یا ابهامی در کاربرد این نرم افزار کافی است به منوی Help مراجعه نمایید. این منودارای دو گزینه Help Topic و گزینه About Notepad می باشد. برای رفع اشکالات و گرفتن جواب سوالات خود گزینه Help Topic را کلیک کنید. درنتیجه پنجره Help مربوط به Notepad ظاهر می شود طبق برای شناسایی ورژن نرم افزار Notepad خود گزینه About Notepadرا کلیک کنید.

3-2 آشنایی با اصول اولیه وب

برای ساختن صفحات وب از زبانهای متداولی استفاده می شود که HTML یکی از آنها می باشد به طور کلی تمام صفحات وب با Html ساخته می شوند و زبان html نسبت به حرف بزرگ و کوچک حساس نمی باشد .اطلاعات اساسی HtML درون دو علامت "<" و ">" قرار می گیرند که به این علامت ها */* اسلش هم دارد بهتر است که ترتیب تایپ برناه به صورت مرتب و پله ای باشد تا خوانایی برنامه را زیاد کند.

مثال : <P > WELCOME ….<P >

در این مثال تگ ابتدا برابراست با <P > و تگ انتها برابراست با </P >

تذکر مهم در مورد تگ (Tag ) :

* باید دقت کنید که بین علامت کوچکتر ">" و حرف یا حروفی که نمایانگر تک مربوطه هستند فضای خالی یا space وجود نداشته باشد.

* در درون تگ ابتدا ، می توان از چندین دستور مربوط به آن استفاده کرد، توجه کنید که در بین دو دستور حداقل یک space یا فضای خالی در نظر گرفته باشید.

* تگ هایی را که در درون خود تگ دیگری را جا داده اند، به عنوان تگ مادر نامیده می شوند و تگ های دورن آنها به عنوان تگ فرزند نامیده می شوند. بدنه یک برنامه Html از ساختار اساسی زیرتشکیل شده است که به توضیح بخش به بخش آن در این قسمت و کاربرد آنها خواهیم پرداخت.

<html >

<head >

<title > عنوان برای وب سایت
</title >

</head >

<body >

….

دستورات و تگ های دیگر و

.... </body >

</html >

1-3-3 تگ html

تگ html تگ ای است که از ابتدای برنامه html تا انتهای آن را پوشش می دهد تمام تگ های برنامه در بین تگ ابتدا و تگ انتهای html قرار می گیرند . شروع کار با <html > و پایان کار با </html >

2-3-3 body

قسمت اصلی یا بدنه ی اصلی برنامه html را تگ body تحت پوشش قرار می دهد قسمت body همان قسمتی است که محتویات آن در معرض دید کاربران قرار می گیرد. تگ body تگ انتهایی دارد و جایگاه آن در ساختار برنامه بعد از تگ انتهایی head می باشد. دستورات و تگ های دیگر در درون این تگ قرار می گیرند. ساخت قسمت body :

1- بعد از تگ انتهایی head تایپ کنید <body >

2- چند خط فاصله برای قرار دهی تگ ها و دستورات دیگر بگذارید .

3- تایپ کنید </body > .

بعد از تگ انتهایی body تگ انتهایی html وجود دارد.

3-3-3 head

برای تعریف کردن عنوان صفحه وب و گنجاندن اطلاعات مورد نیاز موتورهای جستجو، تعیین محل قرار گیری صفحه ، افزودن style sheet ها و نوشتن اسکریپت ها (scripts ) از قسمت head استفاده می گردد به غیر از عنوان صفحه بقیه محتویات قسمت head به طور مستقیم در معرض دید کاربران قرار نمی گیرند.

ساخت قسمت head

1- بعد از تگ ابتدایی html تایپ کنید : <head >

2- چند خط فاصله برای نوشتن محتویات دیگر قرار دهید.

3- حال تایپ کنید : </head >

بعد از تگ انتهایی head تگ ابتدایی body قرار دارد.

4-3-3 Title

در هر صفحه html باید یک المان title وجود داشته باشد تگ title حاوی عنوان صفحه وب می باشد. عنوان صفحه وب باید مختصر بوده و موضوع محتویات صفحه را به خوبی منعکس نماید. با دادن عنوان صفحه با استفاده از تگ title شما می توانید در نوار عنوان (Title bar ) پنجره مرورگر خود آن عنوان را مشاهده نمایید. تگ title دارای تگ های انتهایی هم می باشد و محل قرار گیری آن در قسمت head برنامه می باشد.

توجه :

نکته بسیار مهمی که باید به آن توجه کرد این است که عنوان صفحه توسط موتورهای جستجو مثل yahoo و google مورد استفاده قرار می گیرد.

ساخت عنوان صفحه :

1- ابتدا بین تگ باز و بسته head قرار بگیرید.

2- حال تایپ کنید : <title >

3- عنوان مناسبی را برای معرفی وب سایت خود تایپ کنید .

4- تایپ کنید : </title >

نکات مهم در مورد تگ Title

* وجود المان title در تمام صفحات لازم و ضروری می باشد.

* برای عنوان دادن به صفحه نمی توان از فرمت خاصی استفاده کرد و همچنین نباید از تصویر و یا لینک به صفحات دیگر استفاده نمود.

* عنوان وب سایت به طور مستقیم روی ردیف و رتبه آن در لیست نتایج جست و جو که توسط موتورهای جست و جو تعیین می شود تاثیر می گذارد. هر چه کلمات استفاده شده در عنوان وب سایت گویاتر باشد و به کلماتی که کاربر در هنگام تایپ در موتورهای جستجو به کار می برد نزدیکتر باشد (البته بدون کلمات اضافی ) آنگاه در لیست نتایج جست و جو مرتبه بهتری را به دست خواهد آورد.

* برای آنکه وب سایت مورد نظر در لیست های Bookmark, Favorites , History در پنجره مرورگر مشخص شوند از عنوانی که برای صفحه وبتان در نظر گرفته اید استفاده می کنند.

* اگر عنوان صفحه شامل کاراکترها و سمبلهای خاصی باشد این کاراکترها باید به نوعی Encode شوند(طبق توضیحاتی که در آخر بخش 3 آمده است – قسمت اعلام روش Encoding )

5-3-3- تایپ متن ساده

برای تایپ متن ساده بدون نیاز به هیچ تگ دیگری کافی است به قسمت بدنه اصلی برنامه یعنی قسمت body بروید. حال اشاره گر ماوس را در محل مناسب یعنی بعد از تگ ابتدایی body قرار دهید و شروع به تایپ متن دلخواه خود نمایید. برای تایپ متن فارسی کافی است از دکمه های ترکیبی Alt+Shift موجود در صفحه کلید استفاده کنید و برای برگشت به حالت انگلیسی دوباره از همان دکمه های ترکیبی استفاده کنید.با توجه به شکل 27-3 طرز تایپ کردن یک متن ساده را مشاهده می کنید و در نمایش متن تایپ شده را در پنجره مرورگر مشاهده خواهید کرد:

در مورد تایپ متون با فرمت های گوناگون در بخش های بعدی آشنا خواهید شد.

4-3 مرور وب سایت طراحی شده به کمک IE

شما می توانید برای آنکه تغییرات صفحه وبتان را در هر لحظه مشاهده کنید پنجره مرورگر و پنجره کد نویسی را هم زمان داشته باشید با هر بار اضافه کردن کد در برنامه html و یا ... بعد از save برنامه به پنجره مرورگر رفته و با یک عمل Refresh تغییرات را در صفحه وبتان ملاحظه نمایید. برای مشاهده صفحه وبی که ساخته اید در مرورگر Internet Explorer یا به طور مختصر IE به این صورت عمل کنید :

1- ابتدا به برنامه مرورگر IE باز کنید و منوی File رفته و گزینه Open را کلیک کنید.

2- در پنجره محاوره ای ظاهر شده با عنوان Opean روی دکمه Browers کلیک کنید.

3- در کادر محاوره ای ظاهر شده در برگیرنده قابل مورد نظر بروید و پس از انتخاب فایل مورد نظر ، دکمه open را کلیک کنید.

4- در آخر درکادر محاوره ای Open کلیک نمایید تا صفحه وب مورد نظرتان در پنجره مرورگر به نمایش درآید.

توجه :

در صورتیکه صفحه وب درمرورگر در حال نمایش است، می توانید کد html آن صفحه وب را نیز مشاهده کنید، برای مشاهده کد html صفحه وب روی صفحه در مکان مناسبی راست کلیک کنید و از منوی ظاهر شده گزینه view source را کلیک کنید.همچنین می توانید به منوی view از برنامه مرورگر رفته و گزینه view source را انتخاب کنید.

اعلان روش Encoding

تمام اسناد متنی از جمله فایلهای html در هنگام ذخیره شدن با روش خاصی Encode می شوند. با توجه به اینکه روش های متعددی برای encode کردن موجود می باشد. بهتر است روش مورد نظر خودتان را در برنامه html بگنجانید. این روش باعث می شود که اگر روش Encoding پیش فرض یک سیستم با روش بکار رفته در یک سند متفاوت باشد برنامه مرورگر (IE ) بتواند کاراکترهای را به درستی نمایش دهد.

اعلان روش Encode کردن کاراکترها :

1- ابتدا به قسمت head برنامه بروید و در داخل تگ ابتدا و انتهای head اشاره گر ماوس قرار دهید.

2 - حال دستور زیر را تایپ کنید این تگ ، تگ Meta (متا) نامیده می شود.

<Meta http-equive= “ context – type “ text/html ; charset – encoding >

توجه :

* تگ متا تگ انتهایی ندارد.

* روش Encoding کردن کاراکترهای یک صفحه روشی که برای ذخیره کردن آن بکار می برید، بستگی دارد. اگر آن را به صورت Text only (فقط متن ) ذخیره کنید( یعنی از هیچ روشی برای Encode کردن استفاده نکنید) می توانید مطمئن باشید که سندتان با روش Encoding پیش فرض زبان مورد استفاده تان ذخیره می شود.

* روش Encoding پیش فرض برای زبان انگلیسی در محیط windows برابر window-1252 می باشد.

* از روش های دیگر می توان windows-1256 و utf-8 را نام برد.

* اگر قصد دارید در هنگام ذخیره کردن فایل از روش خاصی برای Encode کردن کاراکترها استفاده کنید، روش موردنظرتان باید با روشی که توسط تگ meta مشخص شده است یکسان باشد.

(پایان قسمت اول )