• به وب استیودنت خوش آمدیدد
  • آموزش های ما را از وب سایت به نشانی www.WebStudent.ir پیگیری کنید
  • لطفا قوانین را مطالعه فرمایید
  • آموزش های گام به گام و تصویری
  • لطفا قوانین را مطالعه فرمایید
درود مهمان گرامی! ورود ثبت نام

آخرین اخبار انجمن وب استیودنت

طراحی سایت ایجاد صفحات چندگانه در HTML

طراحی سایت ایجاد صفحات چندگانه در HTML

این صفحه را به اشتراک بگذارید:



طراحی سایت ایجاد صفحات چندگانه در HTML
زمان کنونی: 1398-9-18، 12:28:28
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: eh3an2010
آخرین ارسال: eh3an2010
پاسخ 1
بازدید 450



امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
طراحی سایت ایجاد صفحات چندگانه در HTML
#1
در این جلسه در را باهم خواهیم آموخت:


یکی از امکاناتی که HTMLبرای طراحان فراھم آورده است این است که می توانیم به وسیله یکسری عناصر خاص به نمایش چندین صفحه وب در یک پنجره مرورگر بپردازیم. در اصل با این عناصر می توانیم پنجره مرورگر را به چندین قسمت (که ھر کدام frameگفته می شود) تقسیم کرده و در ھر قسمت یک صفحه را نمایش دھیم.


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


ساختار صفحات چندگانه


ساختار صفحاتی که میخواھیم در آن ھا چندین صفحه را قرار دھیم کمی با صفحه ھای معمولی فرق می کند.
ھمانطور که می دانید یک صفحه معمولی از قسمت سر که به وسیله تگ headو قسمت پیکره (بدنه) که به وسیله تگ bodyمشخص می شود، تشکیل می شود. در زیر ساختار کلی یک صفحه معمولی را مشاھده می کنید:

<html>
<head>
.......
</head>
<body>
.......
</body>
</html>

اما در ساختار صفحات (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.) و (دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.)چندگانه به جای عنصر <body> از عنصری به نام <fremeset> استفاده می شود. قبل و بعد از این عنصر نباید ھیچ عنصر دیگری قرار بگیرد در غیر اینصورت framesetتوسط مرورگرھا چشم پوشی می شود. ساختار کلی اینگونه صفحات به صورت زیر است:

<html>
<head>
<title> Frameset </title>
</head>
<frameset cols="50%,50%">
<frame src="http://www.google.com" name="google_frame" />
<frame src="http://www.yahoo.com" name="yahoo_frame" />
<frameset>
</html>

می بینید که در اینگونھ صفحات از تگ ھای <frameset> برای ایجاد یک صفحه چندگانه و تگ <frame/> برای مشخص کردن صفحاتی که در ھر بخش نمایش داده خواھد شد استفاده می کنیم.
در ادامه به بررسی ھر یک از تگ ھای مرتبط با ایجاد صفحات چندگانه آشنا خواھیم شد:


تگ <frameset>:

از این تگ تگ برای ایجاد یک صفحه چندگانه استفاده می کنیم.
در واقع بااستفاده از این تگ برای اینکه به مرورگر می گوییم با یک صفحه چندگانه روبروست، استفاده می شود.


این تگ صفت ھای زیر را پشتیبانی می کند.


rows: برای ایجاد فریم ھای افقی به کار می رود.
از این صفت برای تعیین تعداد و اندازه ھر یک از فریم ھا استفاده می شود.
در واقع لیستی از اندازه ھا بر اساس واحدھای ، pxدرصد و نسبی خواھد بود.

cols: برای ایجاد فریم ھای عمودی به کار می رود.
از این صفت برای تعیین تعداد و اندازه ھر یک از فریم استفاده می شود.
در واقع لیستی از اندازه ھا بر اساس واحدھای ، pxدرصد و نسبی خواھد بود.


نکته : ھمانطور که اشاره شد یکی از انواع مقادیری که صفت ھای colsو rowsمی پذیرند مقادیر نسبی ھستند که با * مشخص می شوند. این مقادیر پس از محاسبه اندازه ھای مشخص شده با pxو درصد بر رویداد فضای باقیمانده عمل می کنند. به مثال زیر دقت کنید:

<frameset cols="300px,50%,3*,2*,1*">

این تکه کد به آن معناست که ابتدا ۳۰۰pxبرای frameاول، سپس % ۵۰درصد از فضای باقیمانده برای feameدوم اختصاص داده می شود. پس از آن فضای باقیمانده به ۶قسمت کاملا مساوی تقسیم شده که ۳قسمت آن برای فریم سوم، دو قسمت برای فریم چھارم و یک قسمت برای فریم پنجم اختصاص داده می شود.


border: ضخامت borderبین ھر یک از فریم ھا را کنترل می کند. عددی صحیح را بر حسب pxمی پذیرد.
bordercolor:رنگ borderاطراف فریم ھا را مشخص می کند.
frameborder:نمایش یا عدم نمایش borderھای اطراف فریم ھا را مشخص می کند. مقادیر زیر را میپذیرد

yes یا۱:نمایش border

۰یا no:عدم نمایش border

رفتار می کندborder مثل صفت: framespacing

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در طراحی سایت دارد در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP در شرکت اسپیناس مشتری مداری حرف اول را می زند
 
پاسخ
  



پرش به انجمن:


کاربران در حال بازدید: 1 مهمان



:fixed;left : 2px;top :130px;float : left;width : 35px;height:320px;text-align:left;padding:0px;;border:0px #fff solid; background: #005ea7; background: -moz-linear-gradient(top, #005ea7 0%, #003965 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005ea7), color-stop(100%,#003965)); background: -webkit-linear-gradient(top, #005ea7 0%,#003965 100%); background: -o-linear-gradient(top, #005ea7 0%,#003965 100%); background: -ms-linear-gradient(top, #005ea7 0%,#003965 100%); background: linear-gradient(to bottom, #005ea7 0%,#003965 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005ea7', endColorstr='#003965',GradientType=0 ); } .tdicons a{-webkit-transition : all 0.5s ease-in-out;-moz-transition : all 0.5s ease-in-out;-o-transition : all 0.5s ease-in-out;display : block;float : left;margin : 8px;padding : 5px;font-weight : bold;color : #fff;border-radius : 8px 0 8px 0;} .tdicons img{-webkit-transition : all 0.2s ease-in-out;-moz-transition : all 0.2s ease-in-out;-o-transition : all 0.2s ease-in-out;padding:0px;} .tdicons img:hover{padding : 0px 0px 0px 8px;}