آموزش طراحی وب سایت با نرم افزارexpression web CH2
شروع آموزش
برای کسانیکه با HTML کار کرده اند پیش آمده که بخواهند بین دو کلمه فاصله ای بیشتر وجود داشته باشد . یا از علامت کپی© برای حق مولف در پایین سایت استفاده کنند.یک سری کاراکترهای ویژه در HTML وجود دارد که با امپرسند& شروع و با سیمی کالن ; این تگ کامل می شود .در ادامه به طور مختصر به توضیح این کارکترها می پردازم .
مرورگر به طور معمول بین متن شما در سایت ، ایجاد یک فاصله را تشخیص می دهد ولی بیش از یک فاصله را تشخیص نداده و هیچ تغییری بین دو کلمه ایجاد نمی کند. افزودن کد ;nbsp& یک فاصله بین دو کلمه ایجاد می کند هر چه تعداد این تگ بین متن شما بیشتر باشد فاصله بیشتری بین کلمات شما ایجاد می شود و شما با تکرار این کد می توانید به هر تعداد که بخواهید فاصله خالی ایجاد کنید .
به مثال زیر توجه کنید :
ایجاد فاصله بین متن
| متن اول متن یا کلمه دوم |
نتیجه :متن اول متن یا کلمه دوم
ایجاد علامت کپی رایت
| This Page © 2011 |
نتیجه :This Page © 2011
بقیه کارکترها هم در صورتیکه در حین آموزش احتیاج شده براتون توضیح میدهم
برای ایجاد لینک بین صفحات از تگ استفاده می کنیم .تگ نشانه لینک و شناسه href مشخص کننده آدرس لینک می باشد .متنی که بین دو تگ متن لینک قرار می گیرد به صورت زیر خط دار در سایت شما نمایش داده می شود که وقتی ماوس بر روی آن می رود علامت یک دست ظاهر می شود . به مثال زیر توجه کنید :
ایجاد لینک بین صفحات یا سایت دیگر
| متن خود را اینجا وارد کنید |
نتیجه :متن خود را اینجا وارد کنید
ایجاد لینک همراه با تایتل متن
کد دیگری که می توانید در تگ لینک به کار ببرید title است. با استفاده از این شناسه می توانید عنوانی را برای لینک انتخاب کنید و این عنوان در هنگامی که بازدید کننده ماوس خود را روی لینک قرار می دهد به نمایش در می آید. به مثال زیر توجه کنید:
| متن خود را اینجا وارد کنید |
نتیجه :متن خود را اینجا وارد کنید
ایجاد لیست های نامرتب در صفحه
یکی دیگر از پرکاربردترین کدها در HTML تگهای
مقدمه
1. فروشگاه
2. بخش آموزش
3. پروفایل
- است که با تگ
- شروع شده و تگ پایانی
|
مقدمه |
- بخش آموزش
- فروشگاه
- پروفایل
اضافه شدن فاصله لیست های نامرتب از عنوان
اگر بخواهید متن زیر مجموعه کمی جلوتر از عنوان باشد باید تگ را با توجه به اندازه مشخص شده بیشتر کنید . فقط دقت داشته باشید که تگ پایانی هم در آخر کدها قرار دهید
|
مقدمه |
-
- بخش آموزش
- فروشگاه
- پروفایل
تغییر شکل ظاهری زیر مجموعه ها
برای تغییر شکل زیر مجموعه ها می توانید از شناسه Type همراه با سه دستور Circle.disk.Square استفاده کنیم. به مثال زیر توجه کنید .
|
مقدمه |
- بخش آموزش
- فروشگاه
- پروفایل نکته : بدلیل اینکه من از قبل تنظیمات لیست ها را مربع تو خالی انتخاب کردم شکل ها تغییر نمی کند .
تغییر شکل ظاهری زیر مجموعه ها به صورت مرتب
شما می توانید به جای استفاده از تگ
- از تگ
- استفاده کنیم فرق تگ دوم ایجاد لیست های مرتب در صفحه می باشد
|
مقدمه |
- بخش آموزش
- فروشگاه
- پروفایل
تغییر شکل ظاهری زیر مجموعه ها به صورت مرتب
در مورد لیستهای مرتب با استفاده از شناسه start در تگ
- می توانیم تعیین کنیم که شماره های لیست از چه عددی شروع شود. به مثال زیر توجه کنید
|
مقدمه |
|
|
|
فروشگاه |
|
بخش آموزش |
|
پروفایل |
|
|
- بخش آموزش
- فروشگاه
- پروفایل
شناسه های تگ Body
همانطور که در بخش اول توضیح دادم بیشتر تگها در بین تگ قرار می گیرد .اما خود تگ نیز دارای شناسه هایی برای تغییر رنگ متن،رنگ لینکها،لینکهای فعال و تغییر رنگ بک گراند و... می باشد که در ادامه برای شما توضیح میدهم .
|
bgcolor="white" text="black" link="red" alink="blue" vlink="orange" background="logoasa.jpg"> تگهایی که در ادامه یاد می گیرید در این قسمت قرار می گیرد |
با این شناسه می توانید رنگ لینکهای سایت خودتان را تغییر دهید فقط کافیست مقدار رنگ مورد نظر را در جای مشخص شده وارد کنید alink="رنگ مورد نظر خودتان را وارد کنید"
با این شناسه می توانید رنگ لینکهایی که کاربران بر روی آنها کلیک کرده اند با رنگ لینک اصلی متمایز کنید فقط کافیست مقدار رنگ مورد نظر را در جای مشخص شده وارد کنید
vlink="رنگ مورد نظر خودتان را وارد کنید"
این شناسه رنگ لینکهای باز شده در صفحه را مشخص می کند فقط کافیست مقدار رنگ مورد نظر را در جای مشخص شده وارد کنید
background="آدرس تصویر خودتان را وارد کنید"
این شناسه یک عکس را به عنوان پس زمینه در سایت شما قرار می دهد .
آموزش کامل تغییر رنک متن ، اندازه و رنگ پس زمینه را در قسمت Css به طور کامل برای شما آموزش می دهم
ارسال ایمیل از طریق لینک
یکی دیگر از مواردی که بسیار مهم می باشد ارسال ایمیل در سایت است . یعنی بازدید کننده بتواند به شما ایمیل بفرستد.برای انجام اینکار از تگ ولی به جای شناسه href:// از mailto استفاده می کنیم .
| info@asarayan.com این نشانی پست الکترونیک دربرابر spambot ها و هرزنامه ها محافظت می شود. برای مشاهده آن شما نیازمند فعال بودن جاواسکریپت هستید ">متن لینک خودتان را در این قسمت وارد کنید |
نتیجه : متن خود را اینجا وارد کنید این نشانی پست الکترونیک دربرابر spambot ها و هرزنامه ها محافظت می شود. برای مشاهده آن شما نیازمند فعال بودن جاواسکریپت هستید
اگر روی لینک بالا کلیک کنید مرورگر شما پنجره ای تازه برای ارسال ایمیل باز می کند که آدرس در یافت کننده در آن تایپ شده است.
شما میتوانید همچنین یک موضوع هم برای ایمیل در لینک قرار دهید تا بیننده مجبور نباشد چیزی غیر از متن اصلی بنویسد.
این کار ار می توانید با افزودن علامت سوال به انتهای آدرس ایمیل و نوشتن =subject بعد از آن انجام دهید. به مثال زیر توجه کنید :
مشخص کردن موضوع ایمیل
| info@asarayan.com این نشانی پست الکترونیک دربرابر spambot ها و هرزنامه ها محافظت می شود. برای مشاهده آن شما نیازمند فعال بودن جاواسکریپت هستید ؟subject=Suport AsaRayan">متن لینک خودتان را در این قسمت وارد کنید |
نتیجه : متن خود را اینجا وارد کنید این نشانی پست الکترونیک دربرابر spambot ها و هرزنامه ها محافظت می شود. برای مشاهده آن شما نیازمند فعال بودن جاواسکریپت هستید
معرفی فرم ها در HTML
یکی از پرکاربردترین تگ ها در HTML فرم ها هستند . فرم هایی که بازدیدکنندگان بوسیله این فرم ها می توانند نظرات و اطلاعات مورد نظر خودشان را برای شما ارسال کنند.هر فرم شامل اجزایی مانند کادرهای متنی ، جعبه ورود به متن ، دکمه رادیویی ، منوهای کشویی ، چک باکس ها و... می باشد .
شکل کلی یک فرم به صورت زیر می باشد :
|
شناسه ها در این قسمت قرار می گیرد |
البته استفاده از شناسه method هم اهمیت زیادی دارد ولی در صورتی که از این شناسه استفاده نشود از مقدار پیش فرض آن یعنی get استفاده می شود.
- action :
- method :
- get : در این روش اطلاعات از طریق آدرس صفحه (نوار آدرس) ارسال می شوند. به این صورت که اطلاعات وارد شده در فرم پس از یک علامت سؤال بعد از آدرس صفحه action قرار می گیرند و ارسال می شوند. از این روش نمی توان برای اطلاعات طولانی یا کاراکترهای غیر ASCII استفاده کرد. همچنین بهتر است برای اطلاعات مهم از قبیل نام کاربری و کلمه عبور هم از این روش استفاده نشود. چون در این صورت این اطلاعات در نوار آدرس مرورگر نمایش داده می شوند.
name :
از این شناسه برای تعریف کردن یک نام منحصر به فرد برای فرم استفاده می شود.
target :
این شناسه روش باز شدن صفحه پردازشگر اطلاعات را مشخص میکند. می توان برای مقدار این شناسه از نام یک فریم برای باز شدن صفحه action در آن فریم استفاده کرد یا از مقادیر از پیش تعریف شده زیر:
- blank_ : صفحه action در یک پنجره جدید باز خواهد شد.
- self_ : صفحه action در فریمی که فرم در آن قرار دارد باز خواهد شد.
- parent_ : صفحه action در frameset محتوی فرم باز خواهد شد.
- top_ : صفحه action در تما پنجره باز خواهد شد.
ساخت جعبه ورودی متن
با استفاده از تگ می توانید کادرهایی در صفحات سایت خودتان ایجاد کنید که اطلاعات کاربران را دریافت کند.
| type="text" name="testbox" maxlenght="36" size="60" value="متنی که در چک باکس نمایش داده می شود "> |
نتیجه :
بسیار خوب اجازه دهید کمی در مورد شناسه ها برای شما توضیح بدهم
type :
برای اینکه یک کادر متنی ایجاد کنیم باید مقدار این شناسه را text قرار دهیم.
name :
این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود.
maxlength :
این شناسه برای مشخص کردن حداکثر تعداد کاراکترهای ورودی استفاده می شود. این شناسه در مورد ورودی متنی یک سطری استفاده می شود و مقدار آن باید عددی مثبت باشد.
size :
این شناسه در مورد این نوع ورودی طول کادر را بر حسب تعداد کاراکتر مشخص می کند. البته مرورگرهای مختلف ممکن است بر حسب نوع فونت مورد استفاده اندازه این کادر را مانند هم نشان ندهند. مقدار این شناسه باید عددی مثبت باشد. مقدار پیش فرض این شناسه 20 است.
value :
این شناسه در مورد کادرهای متنی، متنی را که به صورت پیش فرض در کادر متنی نمایش داده می شود معین می کند.
"readonly="readonly :
این شناسه فقط برای کادرهای متنی مورد استفاده قرار می گیرد و باعث می شود تا کاربر نتواند تغییری در متن نوشته شده در این کادر ایجاد کند اما کاربر می تواند متن را مشاهده کند و آنرا انتخاب کند.
مقادیر مربوط به فیلدهایی که به صورت readonly هستند اگرچه توسط کاربر تغییر نمی کنند ولی با ارسال فرم به سرور ارسال می شوند.
"disabled="disabled :
از این شناسه برای غیر فعال کردن کادر متنی استفاده می شود. به صورتی که کاربر نمی تواند متنی در این کادر بنویسد و یا متن آنرا انتخاب کند. البته این رفتار ممکن است در مرورگرهای مختلف تفاوت داشته باشد.
مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند.
نحوه ساختن چک باکس
برای ساختن چک باکس هم باید از تگ استفاده کنیم. برای این کار باید از checkbox به عنوان مقدار شناسه type استفاده کنیم.به مثال زیر توجه کنید :
| type="checkbox" name="testbox" value="متنی که قبل از چک باکس نمایش داده می شود : "> |
نتیجه :
متنی که قبل از چک باکس نمایش داده می شود
دکمه های رادیویی
برای ساختن چک باکس هم باید از تگ استفاده کنیم. برای این کار باید از radio به عنوان مقدار شناسه type استفاده کنیم.به مثال زیر توجه کنید :
| type="radio" name="testbox" value="متنی که قبل از دکمه رادیویی نمایش داده می شود : "> |
نتیجه :
متنی که قبل از دکمه رادیویی نمایش داده می شود
دکمه ارسال فرم
برای ساختن دکمه ارسال فرم باید از تگ استفاده کنیم. برای این کار باید از submit به عنوان مقدار شناسه type استفاده کنیم. به مثال زیر توجه کنید :
| type="submit" name="submit" value="ثبت نام "> |
نتیجه :
دکمه پاک کردن فرم
برای ساختن این دکمه هم از تگ استفاده می شود به این صورت که برای شناسه type از مقدار reset استفاده می کنیم. به مثال زیر توجه کنید :
| type="reset" name="reset" value="پاک کردن متن فرم "> |
نتیجه :
دکمه
به جز دکمه های ارسال فرم و پاک کردن فرم دکمه هایی هم وجود دارد که بیشتر برای استفاده در جاوا اسکرپت استفاده می شوند. این دکمه ها به صورت پیش فرض وظیفه خاصی را انجام نمی دهند و وظیفه آنها بستگی به موقعیت و مورد استفاده آنها از نظر برنامه نویس دارد.
در اینجا به توضیح برخی از شناسه هایی که برای دکمه های رادیو به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ به کار روند. برای مثال دکمه هایی که در پایین همین صفحه قرار دارند و برای رفتن به بخش قبلی یا بعدی استفاده می شوند از همین نوع دکمه ها هستند.
| type="button" name="button" value="کلیک "> |
نتیجه :
کادرهای متنی با بیش از یک سطر
از یک Text Area کاربران می توانند برای وارد کردن تعداد نامحدودی کاراکتر در بیش از یک سطر وارد کنند. بهتر است تا برای متنهای طولانی به جای Text Box از Text Area استفاده کنید تا کاربران راحتتر بتوانند متن خود را مشاهده کنند و یا آنرا ویرایش کنند.
برای ایجاد Text Area باید از تگ استفاده کنید. این تگ بر خلاف تگ یک تگ پایانی دارد و باید به وسیله تگ بسته شود.در اینجا می توانید برخی از شناسه های قابل استفاده در تگ
این شناسه عرض کادر را بر حسب تعداد کاراکتر تعیین می کند. مقدار این شناسه باید عددی مثبت باشد. البته این عرض بستگی به اندازه فونت تعریف شده برای صفحه و مرورگر دارد. استفاده از این شناسه برای تگ
این شناسه مشخص کننده تعداد سطرهای قابل مشاهده در کادر است. این مقدار هم باید عددی مثبت باشد. استفاده از شناسه rows برای تگ
از این شناسه می توان برای اختصاص دادن یک نام مشخص به textarea استفاده کرد.
لیست های کشویی
برای ساختن لیستهای کشویی که به کاربران اجازه می دهد یک یا چند گزینه موجود در لیستی را در یک فرم انتخاب کند باید از تگ استفاده کنیم. گزینه های موجود در این تگ بین و قرار می گردند و پس از گزینه ها تگ پایانی لیست به صورت نوشته می شود. به مثال زیر توجه کنید :
فروشگاه ساخت پروفایل |
name :
از این شناسه برای تخصیص یک نام به لیست استفاده می شود.
size :
این شناسه مشخص می کند چه تعدادی از گزینه ها در یک زمان قابل مشاهده باشند. در واقع رتفاع لیست را بر حسب تعداد گزینه ها مشخص می کند. مقدار این شناسه باید عددی بزرگتر از صفر باشد.
"multiple="multiple :
در صورتی که این شناسه به تگ
به نام خدا