آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100
آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100آموزش Iframes در html
آموزش طراحی سایت - آموزش Iframes در html
آموزش Iframes
شما می توانید یک frame درون خطی را با استفاده از برچسب < iframe>مربوط به HTML تعریف کنید. این برچسب به برچسب < frameset>ارتباطی ندارد، در عوض می تواند در هرجایی در داکیومنت شما ظاهر شود. برچسب< iframe>یک محدوده ی مستطیلی را در داخل داکیومنت تعریف می کند که در آن مرورگر می تواند یک داکیومنت مجزا را ارائه دهد، مانند نوارهای اسکرول و حاشیه ها.
ویژگی src برای مشخص کردن URL مربوط به داکیومنتی استفاده می شود که حاوی frame درون خطی می باشد.
در زیر مثالی را می بینید که چگونگی استفاده از < iframe> را توضیح می دهد.
نمونه یک
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src="/html/menu.htm" width="555" height="200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>
ویژگی های برچسب < iframe>
بسیاری از ویژگی های برچسب < iframe> شامل نام، گروه، حاشیه، id، longdesk، طول حاشیه، عرض حاشیه، نام، اسکرول کردن، روش و تیتر، درست مانند ویژگی های متناظر با برچسب < frame> رفتار می کنند.
آموزش قابها در html
آموزش طراحی سایت - آموزش قابها در html
قاب های HTML
قاب های HTML برای تقسیم پنجره ی مرورگر شما به چند بخش استفاده می شوند که هر بخش می تواند یک داکیومنت مجزای HTML رابارگذاری کند. مجموعه ای از چارچوب ها در پنجره ی مروگر به عناون frameset شناخته می شوند. به روش مشابهی که جدول ها سازماندهی می شوند، پنجره نیز به چارچوب های مختلف تقسیم می شود: در ستون ها و ردیف ها.
نقطه ضعف های چارچوب ها:
در استفاده از چارچوب ها نقاط ضعفی وجود دارد، بنابراین هرگز توصیه نمی شود در صفحات وب خود از این چارچوب ها استفاده کنید.
برخی دستگاه های کوچکتر نمی توانند این چارچوب ها را در خود داشته باشند، زیرا صفحه آنها آنقدر بزرگ نیست که تقسیم شود.
گاهی اوقات صفحه ی شما در یک کامپیوتر متفاوت به خاطر وضوح تصویر متفاوت، طور دیگری نمایش داده می شود.
ممکن است دکمه ی بازگشت مرورگر آنطوری که کاربر انتظار دارد کار نکند.
هنوز مرورگرهایی هستند که فن آوری چارچوب را پشتیبانی نمی کنند.
ایجاد چارچوب ها:
برای استفاده از چارچوب ها در یک صفحه از برچسب < frameset> به جای < body>استفاده می کنیم. برچسب< frameset> چگونگی تقسیم پنجره به چارچوب را تعریف می کند. ویژگی rows از برچسب < frameset> چارچوب های افقی و ویژگی cols نیز چارچوب های عمودی را تعریف می کنند. هر چارچوب توسط برچسب < frame> نشان داده شده است و تعریف می کند که کدام داکیومنت HTML باید در داخل چارچوب باز شود.
مثال:
در زیر مثالی را برای ایجاد سه چارچوب افقی می بینید.
نمونه یک
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Frames</title>
</head>
<frameset rows="25%,50%,25%">
<frame name="left" src="http://tahlildadeh.com/Temp/Html/top_frame.htm" />
<frame name="center" src="http://tahlildadeh.com/Temp/Html/main_frame.htm" />
<frame name="right" src="http://tahlildadeh.com/Temp/Html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
ویژگی های برچسب < frameset>:
مقادیر مطلق به پیکسل، برای مثال برای ایجاد سه چارچوب عمودی از cols="100, 500,100" استفاده کنید. درصدی از پنجره ی مرورگر، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, 80%,10%" استفاده کنید.
استفاده از سمبل wildcard ، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, *,10%" استفاده کنید. در این مورد wildcard باقیمانده ی پنجره را فرا می گیرد.
به عنوان عرض های پنجره ی مرورگر، به عنوان مثال برای ایجاد سه چارچوب عمودی از cols="3*,2*,1*" استفاده کنید. این یک جایگزین بری درصدها می باشد. شما می توانید از عرض های مربوط پنجره ی مرورگر استفاده کنید. در اینجا پنجره به شش بخش تقسیم می شود: اولین ستون نصف پنجره را فرا می گیرد، دومین ستون یک سوم و سومین ستون یک ششم آن را.
ویژگی های برچسب < frame>
مرورگرهایی که frame ها را پشتیبانی می کنند
اگر کاربر از مرورگرهای قدیمی یا مرورگرهایی استفاده کند که frame را پشتیبانی نمی کنند، عنصر < noframes>باید به یوزر نمایش داده شود. بنابراین شما باید یک عنصر < body>را داخل عنصر < noframes>قرار دهید، زیرا تصور می شود که عنصر< frameset>جایگزین عنصر< body>می شود. اما اگر یک مرورگر < frameset>را درک نکند، بنابراین باید آنچه را که داخل عنصر< body>می باشد درک کند که حاوی عنصر < noframes>می باشد.
شما می توانید به یوزرهای خود که از مرورگرهای قدیمی استفاده می کنند، پیام هایی بدهید. برای مثال پیام Sorry!! your browser does not support frames. ، همانطور که در مثال بالا نشان داده شده است.
نام frame و ویژگی های target
یکی از محبوب ترین موارد استفاده از frame قرار دادن نوارهای مسیریابی در یک frame و سپس بارگذاری صفحات اصلی در یک frame مجزا می باشد.
مثال:
اجازه بدهید مثال زیر را بررسی کنیم که داری کد زیر می باشد:
نمونه دو
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
<frame name="left" src="http://tahlildadeh.com/Temp/Html/top_frame.htm" />
<frame name="center" src="http://tahlildadeh.com/Temp/Html/main_frame.htm" />
<frame name="right" src="http://tahlildadeh.com/Temp/Html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
در اینجا دو ستون ایجاد کرده ایم که قرار است با دو ستون پر شوند. اولین frame دارای عرض 200 پیکسل می باشد و حاوی نوار منوی مسیر یابی می باشد که توسط فایل menu.htm اجرا می شود. دومین ستون فضای باقیمانده را پر کرده و حاوی بخش اصلی صفحه خواهد بود و توسط فایل main.htm اجرا می شود. برای هرسه لینک موجود در نوار منو یک frame هدف به عنوان main_page ذکر کرده ایم، بنابراین هر زمان روی لینک های موجود در نوار منو کلیک کنید، لینک موجود در main_page باز خواهد شد.
در زیر محتوای فایل menu.htm را مشاهده می کنید.
نمونه سه
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#4a7d49">
<a href="http://www.google.com" target="main_page">Google</a>
<br /><br />
<a href="http://www.microsoft.com" target="main_page">Microsoft</a>
<br /><br />
</body>
</html>
در زیر محتوای فایل main.htm را مشاهده می کنید.
نمونه چهار
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>
اکنون می توانید لینک های موجود در پنل چپ را کلیک کرده و نتیجه را مشاهده کنید. ویژگی target نیز یکی از مقادیر زیر را می گیرد:
آموزش لینک ایمیل در HTML
آموزش طراحی سایت - آموزش لینک ایمیل در HTML
لینک ایمیل HTML
قرار دادن یک لینک ایمیل HTML روی صفحه ی وب خود کار سختی نیست، اما این کار ممکن است باعث بروز مشکل اسپم های غیرضروری در اکانت ایمیل شما شود. افرادی هستند که می توانند برنامه هایی را برای جمع آوری چنین ایمیل هایی اجرا کنند و سپس آنها را با راه های مختلف برای اسپم کردن استفاده کنند.
می توانید از گزینه دیگری استفاده کنید تا افراد به راحتی بتوانند به شما ایمیل ارسال کنند. یک گزینه می تواند استفاده از فرم های HTML باشد برای جمع آوری داده های یوزر و سپس استفاده ازاسکریپت PHP یا CGI برای ارسال ایمیل.
برای یک مثال ساده، فرم Contact Us را چک کنید. با استفاده از این فرم یک فیدبک از یوزر گرفته و سپس از یک برنامه ی CGI استفاده می کنیم که در حال جمع آوری این اطلاعات و ارسال ایمیل به یک email ID ارائه شده می باشد.
برچسب HTML Email
برچسب < a> در HTML برای مشخص کردن یک آدرس ایمیل و ارسال ایمیل، گزینه هایی را به شما ارائه می دهد. در حالیکه از برچسب < a> به عنوان یک email tag استفاده می کنید، از mailto:email address همراه با ویژگی href نیز استفاده خواهید کرد. در زیر ترکیب استفاده از mailto را به جای استفاده از http می بینید.
نمونه یک
<!DOCTYPE html>
<html>
<head>
<title>SendMail</title>
</head>
<body>
<a href="mailto:abc@example.com">Send Email</a>
</body>
</html>
اکنون اگر یوزر روی این لینک کلیک کند، email client آغاز به کار خواهد کرد ( مانند lotus notes و outlook express و غیره.) که روی کامپیوتر شما نصب شده است. ریسک دیگری در استفاده از این گزینه برای ارسال ایمیل وجود دارد، زیرا اگر یوزر email client نصب شده روی کامپیوتر خود نداشته باشد، ارسال ایمیل ممکن نحواهد بود.
تنظیمات پیش فرض
شما می توانید یک موضوع ایمیل و یک بدنه ی ایمیل پیش فرض همراه با آدرس ایمیل خود ایجاد کنید. در زیر مثال استفاده از بدنه و موضوع پیش فرض را مشاهده می کنید.
نمونه دو
<!DOCTYPE html>
<html>
<head>
<title>SendMail</title>
</head>
<body>
<a href="mailto:abc@example.com?subject=Feedback&body=Message">
Send Feedback
</a>
</body>
</html>
آموزش طراحی سایت-BackGround در CSS3
سلام دوستان...
با آموزش CSS3 از دوره آموزش طراحی سایت همراه ما باشید
آموزش BackGround در CSS3
خاصیت های مربوط به پس زمینه در CSS 3:
با CSS 3 تعدادی خاصیت جدید مربوط به پس زمینه در اختیار طراح وب قرار می دهد که امکان کنترل و مدیریت پس زمینه را در سطح پیشرفته تری فراهم می کند. در این فصل شما را با نحوه ی افزودن چندین تصویر پس زمینه به تنها یک المان آشنا می سازیم. همچنین با خاصیت های جدید زیر که در CSS3 عرضه شده آشنایی پیدا می کنید:
background-size background-origin background-clip
مرورگرهایی که در این جدول ارائه شده از این خاصیت نوین پشتیبانی می کنند
آموزش طراحی سایت : افزودن چندین پس زمینه در CSS 3
سی اس اس CSS3 به شما این امکان را می دهد با استفاده از خاصیت background-image چندین تصویر پس زمینه به المان خود اضافه کنید. تصاویر پس زمینه متمایز با استفاده از کاراکتر ویرگول از هم جدا شده و بر روی هم انباشته می شوند (قرار می گیرند) به گونه ای که اولین تصویر به بیننده از دیگر تصاویر نزدیک تر است. مثال زیر دارای دو تصویر پس زمینه است که اولین آن ها تصویر یک گل (که در پایین سمت راست تراز بندی شده و قرار گرفته) و دیگری یک پس زمینه ی کاغذ است (که در بالا سمت چپ قرار داده شده).
مثال:
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
می توان چندین تصویر پس زمینه را یا با خاصیت مختصر نویسی (مقداردهی در تنها یک تعریف و به صورت خلاصه / به صورت خاصیت چند مقداری) به المان اضافه کرد و یا به صورت جداگانه (تعیین به صورت خاصیت تک مقداری( تصویر پس زمینه را به المان اضافه کرد مانند مثال فوق. مثال زیر از روش اول برای این منظور بهره می گیرد:
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
آموزش طراحی سایت : خاصیت background-size در CSS 3
پیش از CSS3, تصویر پس زمینه همان اندازه ی اولیه و اصلی خود تصویر باقی می ماند. CSS3 این قابلیت را فراهم می کند که تصاویر پس زمینه را مجدداً در کانتکست ها و زمینه های مختلف بکار ببرید. اندازه ی تصاویر را می توان بر حسب پیکسل (بر حسب واحد length) , درصد (percentage) یا یکی از دو کلیدواژه ی contain یا cover تعریف کرد. مثال زیر تصویر پس زمینه را بسیار کوچکتر از اندازه ی اصلی آن تنظیم می کند (بر حسب پیکسل): تصویر اصلی:
زیر همان تصویر را مشاهده می کنید که مجدداً اندازه بندی شده است:
کد لازم برای عملیات فوق:
#div1 {
background: url(css3.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
همان طور که پیش تر ذکر شد دو مقادیر ممکن دیگر برای تعیین اندازه ی تصویر پس زمینه وجود دارند, کلید واژه های "contain" و "cover". کلید واژه ی "contain" تصویر پس زمینه را تا حد ممکن بزرگ مقیاس دهی و اندازه بندی می کنند (البته طول و عرض هر دو باید داخل کادر و محدوده ی محتوا جای گیرد). به عبارتی دیگر, عکس پس زمینه به اندازه محتویات درون عنصر بزرگ خواهد شد، تا ارتفاع وعرض آن اندازه المان شود. از این رو, بسته به نسبت و اندازه ی تصویر پس زمینه و همچنین مکان قرار گیری تصویر پس زمینه, ممکن است بخش هایی از پس زمینه توسط تصویر مربوطه پوشش داده نشود. کلید واژه ی "cover" تصویر پس زمینه را گونه ای مقیاس دهی می کند که کلاً ناحیه یا محدوده ی محتوا را تحت پوشش قرار دهد (هر دو عرض و ارتفاع تصویر باید با ناحیه ی محتوا برابر بوده یا از آن بیشتر شود). در حقیقت, عکس پس زمینه به اندازه محتویات درون عنصر کوچک خواهد شد، تا ارتفاع وعرض آن اندازه عنصر شود. از این رو, بخش هایی از تصویر ممکن است در محل موقعیت دهی قابل رویت نباشند. مثال زیر استفاده از این دو کلید واژه را در تنظیم اندازه ی تصویر پس زمینه, نمایش می دهد:
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
اندازه ی چندین تصویر پس زمینه را به طور همزمان مقداردهی کنید
خاصیت background-size همچنین قادر است هنگام کار با چند پس زمینه, چندین مقدار برای تصویر پس زمینه بپذیرد (برای این منظور لازم است از لیستی که توسط ویرگول ایتم ها را از هم جدا می کند استفاده کنید). مثال زیر سه تصویر پس زمینه ی منحصر به فرد مشخص کرده, و برای هر تصویر یک مقدار background-size متمایز در نظر می گیرد:
مثال:
#example1 {
background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}
تصویر پس زمینه ی تمام صفحه
اکنون می خواهیم تصویر پس زمینه ی روی وب سایت خود پیاده کنیم که همواره (در همه شرایط) کل فضای موجود در پنجره ی مرورگر را پوشش دهد. شرایط لازم برای چنین تصویر به شرح زیر می باشد:
کل صفحه را با تصویر بپوشاند (هیچ گونه فضای سفیدی نباید وجود داشته باشد)
تصویر را متناسب با نیاز مقیاس دهی و اندازه بندی کند
تصویر در مرکز صفحه قرار گیرد
سبب ایجاد نوار پیمایش (scrollbar) برای مشاهده ی کل تصویر نشود
مثال زیر نحوه ی انجام عملیات مزبور را تشریح می کند. برای انجام این مثال کافی است از تگ html بهره بگیرید (زیرا که عنصر html همیشه حداقل از نظر ارتفاع با پنجره ی مرورگر مطابقت دارد). سپس یک پس زمینه ی وسط چین شده و ثابت روی آن مقدار دهی کنید. در مرحله ی نهایی عملیات اندازه ی تصویر را با استفاده از خاصیت background-size تنظیم کنید:
html {
background: url(img_flower.jpg) no-repeat center center fixed;
background-size: cover;
خاصیت background-origin در CSS3
خاصیت background-origin تعیین می کند تصویر پس زمینه در کدام موقعیت قرار بگیرد (نقطه ی شروع مکان قرار گیری پس زمینه ی المان مورد نظر را مشخص می کند). این خاصیت سه مقدار مقدار متفاوت می گیرد:
مثال زیر کاربرد خاصیت background-origin را نمایش می دهد:
#example1 {
border: 10px solid black;
padding:35px;
background:url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
خصوصیت background-clip در CSS3
این ویژگی به منظور تعیین مکان و نحوه قرار گیری پس زمینه در عنصر مورد نظر بکار گرفته می شود. خاصیت background-clip سه مقدار متفاوت می پذیرد که به شرح زیر است:
مثال زیر این خاصیت را کاربردی نمایش می دهد:
#example1 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;
}
کلیه ی خصوصیات مربوطه به پس زمینه در جدول زیر با ذکر شرح آن ارائه گردیده:
آموزش طراحی سایت ادامه دارد
آموزش طراحی سایت-آموزش CSS
سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل سر برگ در HTML را یاد گرفتیم , در حال با ادامه آموزش طراحی سایت همراه باشید:
آموزش Cascading style sheet
استایل
شیت Cascading style sheet (CSS) بیان می کند که داکیومنت ها روی صفحه و
در چاپ چگونه نشان داده می شوند، یا شاید چگونه بیان می شوند. از زمانی که
کنسرسیوم در سال 1994 تاسیس شد، W3C به طور فعالانه ای در استفاده از Style
sheet روی وب پیشرفت کرده است.
CSS جایگزین های ساده و موثری را برای
تعیین ویژگی های مختلف برچسب های HTML ارائه می دهد. با استفاده از CSS شما
می توانید تعدادی از ویژگی های طراحی را برای یک HTML ارائه شده تعیین
کنید. هر ویژگی دارای نام مقدار میباشد که به وسیله ی علامت (:) از هم جدا
شده اند. اطلاعیه ی مربوط به هر ویژگی نیز توسط علامت نقطه ویرگول (;) از
یکدیگر جدا شده اند.
مثال:
ابتدا اجازه بدهید که مثالی از داکیومنت HTML را مورد بررسی قرار دهیم که برای تعیین رنگ و اندازه ی فونت از برچسب < font> استفاده می کند.
<p><font color="green" size="5">Hello, World!</font></p>
می توانیم با استفاده از style sheet مثال بالا را مانند زیر بازنویسی کنیم.
<p style="color:green;font-size:24px;">Hello, World!</p>
شما می توانید به سه روش از CSS در داکیومنت HTML خود استفاده کنید.
استایل Style sheet خارجی – قوانین style sheet را در یک فایل css مجزا تعریف می کند، و سپس آن فایل را با استفاده از برچسب در HTML وارد داکیومنت HTML شما می کند.
استایل Style sheet داخلی – قوانین style sheet را در با استفاده از برچسب< style>در بخش سربرگ داکیومنت HTML تعریف می کند.
استایل Inline style sheet – قوانین style sheet را مستقیما و به همراه عناصر HTML با استفاده از ویژگی style تعریف می کند.
اجازه بدهید هر سه مورد را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم.
Style sheet خارجی
اگر می خواهید از style sheet خود در صفحات مختلف استفاده کنید، توصیه می شود که یک style sheet متداول در یک فایل مجزا تعریف کنید. یک فایل cascading style sheet دارای ضمیمه هایی مانند css می باشد و با استفاده از برچسب < link> وارد فایل های HTML خواهد شد.
توجه داشته باشید که ما یک فایل style sheet به نام style.css که دارای قوانین زیر می بشد، تعریف می کنیم.
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
در اینجا سه قانون CSS را تعریف کردیم که برای سه گروه متفاوت تعریف شده در برچسب های HTML مناسب می باشند. پیشنهاد می کنم در مورد چگونگی تعریف این قوانین خود را اذیت نکنید، زیرا هنگام مطالعه ی CSS آنها را فرا خواهید گرفت. اکنون اجازه بدهید از فایل CSS خارجی بالا در داکیومنت HTML زیر استفاده کنیم.
!DOCTYPE html>
< html>
< head>
< title>HTML External CSS< /title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
< /head>
< body>
< p class="red">This is red< /p>
< p class="thick">This is thick< /p>
< p class="green">This is green< /p>
< p class="thick green">This is thick and green< /p>
< /body>
< /html>
این مثال نتیجه ی زیر را تولید خواهد کرد.
This is red
This is thick
This is green
This is thick and green
Style sheet داخلی
اگر
می خواهید قوانین style sheet را برای یک داکیومنت مجزا به کار ببرید، فقط
آن موقع است که می توانید این قوانین را با استفاده از برچسب<
style>وارد بخش سربرگ داکیومنت HTML کنید.
قوانین تعریف شده در style sheet داخلی، قوانین تعریف شده در فایل CSS خارجی را نیز در بر می گیرد.
مثال:
اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما در اینجا قوانین style sheet را در همان داکیومنت HTML و با استفاده از برچسب< style>می نویسیم.
<style type="text/css">
.red {
color: red;
}
.thick {
font-size: 20px;
}
.green {
color: green;
}
</style>
شما
می توانید با استفاده از ویژگی style از برچسب مربوطه، قوانین style sheet
را مستقیما برای هر عنصر HTML به کار برید. این امر فقطزمانی می تواند
انجام شود که شما علاقمند به ایجاد تغییرات خاص در هرکدام از عناصر HTML می
باشید.
قوانین تعریف شده با عنصر درون خطی، قوانین تعریف شده در یک
فایل CSS خارجی و نیز قوانین تعریف شده در یک عنصر< style>را در برمی
گیرد. اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما این بار
قوانین style sheet را همراه با قوانین HTML و با استفاده از ویژگی style
در عناصر خواهیم نوشت.
<p style="color:red;">This is red</p>
<p style="font-size:20px;">This is thick</p>
<p style="color:green;">This is green</p>
<p style="color:green;font-size:20px;">This is </p>