bernadet
Member
این آموزش بیشتر مورد استفاده طراحان وب هست راه حلیست برای ایجاد یک کادر با لبه های گرد و حالت سه بعدی برای نوشتم متن که قابل دراز شدن هست . یعنی بسته به متنی که داخلش گذاشته می شود به طور خود کار گسترش پیدا می کند . در این آموزش ابتدا توسط فتوشاپ یک کادر می سازیم . و بعد وارد دریم ویر می شویم و قسمت گسترش پذیری کادر را در آنجا انجام می دهیم و نتیجه ای که در دریم ویر به دست می آوریم یک فایل اچ تی ام ال است و برای استفاده از این کادر باید با زبان اچ تی ام ال آشنایی کافی داشته باشید . اما به منظور ایجاد یک کادر با اندازه ثابت می توانید فقط از آموزش فتوشاپ استفاده کنید و نیازی به دریم ویر ندارید .
رنگ بک گراند را
#E9DAB3
در نظر بگیرید و یک داکیومنت جدید با ابعاد 500 * 500 پیکسل ایجاد کنید و در قسمت
Content
گزینه
Background color
را انتخاب کنید که یک صفخه جدید با رنگ داده شده ایجاد شود .
حالا کادر لبه گرد را ایجاد می کنیم .. از نوار ابزرا
'Rounded Rectangle Tool'
را بردارید .
در بالا نوار آپشنز را می بینید مقدار
Radus
شعاع را 15 در نظر بگیرید و رنگ را سفید و
Nostyle
گزینه شعاع در بالا میزان گردی لبه ها را تعیین می کند . هر چقدر شعاع بزرگتر باشد لبه ها گردترند و شکل بیشتر به دایره نزدیک می شود . شکل زیر مقدار شعاع را 60 در نظر گرفته
و در زیر هم مقدار شعاع 5 است .
خوب حالا کادر کمی کوچکتر از صفحه کارتان رسم کنید .
و در پلت لایه اسم لایه جدیدی که خود به خود درست شده را
Resizeable table
بگذارید برای این کار روی پلت لایه ها بر روی این لایه رایت کلیک کرده و از منوی حاصل گزینه
Layer properties
را انتخاب کرده و لایه را نام گذاری کنید .
یک راه دیگر برای تغییر نام لایه این است که در پلت لایه ها بر روی فلش رو به راست کوچکی که در بالای پلت لایه هاست کلیک کنید
و از منوی حاصل گزینه
Layer property
را انتخاب کنید
. در پلت لایه ها در لایه
Resizeable table
دو تا مربع می بینید که بینشان یک علامت لینک هست . بر روی مربع سمت چپی باید رایت کلیک کنید . البته این مربع ممکن است در فتوشاپ شما در سمت راست باشد . و از منوی حاصل گزینه
Blending options
را انتخاب کنید .
Outer glow
را انتخاب کنید و تنظیمات زیر را در موردش اعمال کنید .
Blend Mode to 'Normal',
Opacity to '30',
Noise to '0',
Technique to 'Softer',
Spread to '44',
Size to '16',
and Range to '100'.
برای نامریی کردن
Path
هم مسیر زیر را بروید ...
View > show > target path
و تیک بغل این گزینه را بردارید که مسیر پنهان شود .
تا به اینجا شکل زیر را به دست آورده ایم .
حالا می خواهیم عکسمان را تکه تکه کنیم و به دریم ویر بفرستیم . از نوار ابزار
'Rectangle Marquee' tool
را بردارید .
روی نوار آپشنز مطمئن باشید که گزینه
Feather
مقدارش صفر است .
و قسمت بالایی شکل را انتخاب کنید . دقت کنید که کل گوشه های گرد در انتخاب واقع شوند . از نظر پهنای انتخاب ، دقت کنید که
Outer glow
ای که ایجاد کرده بودید به طور کامل انتخاب شود .
حالا این ناحیه انتخابی را در یک داکیومنت جدید و تحت نام جدید ذخیره می کنیم به این صورت :
'Edit' > 'Copy Merged'
'File' > 'New'
'Edit' > 'Paste'
و حالا فایل جدید را ذخیره می کنیم .
'File' > 'Save for the Web'
فایل را با پسوند
Gif
و
Colors : 16
و نام
Tabletop
ذخیره کنید .
حالا می خواهیم همین کار را برای لبه پایینی جدولمان هم انجام دهیم . می توانیم همین کا را در مورد لبه پایینی تکرار کنید . و یا اینکه به آسانی همین لبه بالایی را بچرخانید و به عنوان لبه پایینی ذخیره کنید . یعنی به این صورت :
'Image' > 'Rotate Canvas' > 'Flip Canvas Vertical'
و فایل را تحت نام
'bottomtable.gif'
ذخیره کنید .
حالا قسمت میانی جدول را می سازیم . این همان قسمتی است که متن در آن قرار می گیرید و همزمان با بزرگ شدن متن ، گسترش پیدا می کند جوری که آسیبی به لبه ها نمی رسد و متن در جعبه فیت می شود .
ابزار انتخاب مستطیلی
'rectangle marquee tool'
را از نوار ابزار بردارید و در نوار آپشنز در بالای محیط فتوشاپ در قسمت
Style
گزینه
Fixed size
را انتخاب کیند و برای طول و عرض هم مقادیر زیر را در نظر بگیرید .
Width : 450
Height : 1
ناحیه انتخابی شما مطابق شکل یک نوار باریک است .
همین نوار باریک را در یک فایل جدید ذخیره می کنیم . به این صورت :
Edit > copy merged
File > new
Edit > paste
File > save for web
و تحت نام
'middle.gif'
ذخیره کنید .
حالا وارد
Dream weaver
می شویم و از مسیر زیر
File > new
یک فایل جدید ایجاد می کنیم در کادری که باز می شود . در زیر
Category
گزینه
Basic page
را انتخاب کنید و در ستون سمت راست هم در زیر
Basic page
گزینه
Html
را انتخاب کنید . یعنی مطابق شکل زیر ...
و از نوار منو در بالای محیط دریم ویر
'Modify' >'Page Properties'
را انتخاب کنید .
یک پنجره جدید ایجاد می شود در پنجره جدید در قسمت
Backgroun color
همان رنگی که در محسط فتوشاپ به بک گراندمان داده بودیم می نویسیم . یعنی در درس ما
..."#E9DAB3".
حالا می خواهیم در دریم ویر جدولمان را قرار دهیم برای این کار
'Insert' > 'Table'
و در کادر حاصله مقادیر زیر را می نویسیم .
Rows : 3
Columns : 1
Table width : 455 px
Cell padding : 0
Cell spacing : 0
Border : 0
حاال فایل دریم ویر را ذخیره می کنیم .
'File' > 'Save as'
در کادری که ظاهر می شود به فایلمان نام
expandabletables.html.
می دهیم و آن را تحت پسوند
Html
ذخیره می کنیم .
حالا همانطور که در شکل نشان داده شده در ردیف اول جدول یک کلیک کنید و بعد مسیر
Insert > image
خوب می خواهیم در این سلول جدول همان فایلی که در فتوشاپ ساخته بودیم و قسمت بالای کادر را در بر داشت قرا دهید . از کادر حاصله به دنبال
'toptable.gif'
که در فتوشاپ ساخته بودید بگردید . انتخابش کنید و اکی کنید .
حالا می خواهیم قسمت پایین جدول را بسازیم برای این کادر در جدول بر روی پایین ترین ردیف جدول کلیک کنید و مثل مرحله قبل از منوی
Insert > image
و از کادر حاصل همان عکسی که در محیط فتوشاپ تحت نام
'bottomtable.gif'
ذخیره کرده بودید انتخاب کنید . تا به اینجا کار جدول شما به این صورت است .
خوب . حالا به قسمت اصلی کارمان می رسیم . می خواهیم قسمت گسترش پذیر میانی جدول را ایجاد کنیم . کاری که اکثر کاربران نمی دانند چگونه باید عمل کنند . برای خانه وسطی جدولمان همان عکسی که درفتوشاپ با نام
'middle.gif'
ذخیره کرده بودیم را استفاده خواهیم کرد . که ابعادش 1 * 455 پیکسل بود و آن عکس را به صورت موزاییکی داخل خانه وسطی جدولمان می چینیم . و همینطور که جدول گسترش پیدا می کند این عکس هم خودش را از بالا به پایین تکرار می کند و به موازات گسترش متن ، جدول هم بزرگ می شود .
ایا نوار
'Properties'
در پایین محیط دریم ویر شما اشکار است ؟ اگر نیست آن را ظاهر سازید .
'Windows' > 'Properties'
اگر در منتهی الیه سمت راست نوار
Priperties
یک فلش کوچک رو به پایین هست روی ان کلیک کنید که کل نوار را ببینید . اگر این کار را درست انجام داده باشید حالا باید جهت فلش رو به بالا باشد .
حالا برای خانه وسطی جدول ترفندی را به کار می گیریم که این خانه گسترش پذیر باشد . یعنی همزمان با افزایش متن دورن آن ، به طور خودکار بسط یابد . برای این کار در خانه وسطی جدول کلیک کنید و در نوار
Priperties
روی آیکن فولدر که بعد از
Bg
هست مطابق شکل کلیک کنید .
و از کادر حاصله به دنبال فایل
'middle.gif'
که در فتوشاپ ساخته بودیم می گردیم . این همان فایلی است که به صورت
Tile
موزاییکی در خانه وسط چیده می شود .
جدول شما به این صورت شد
خوب حالا کاری که باید بکنیم این است که در خانه وسط جدولمان یک جدول جدید ایجاد کینم . یعنی این جدول جدید در دل خانه وسطی جدول اولمان قرار می گید . این جدول سه ستون و یک ردیف دارد و حکمت ایجاد آن این است که متنی که در کادر می نویسیم درست قالب بندی شود و از لبه های جدول بیرون نزد و طرف چپ و راست متنمان تراز باشد . برای این کار در خانه وسط جدول کلیک کنید و از مسیر زیر
'Insert' > 'Table'
بروید و در کادری که ظاهر مشود :
Columns : 3
Rows : 1
width : 100 %
خوب حالا باید در همین جدول اخیری که درست کردیم ، خانه وسط جدول را بزگتر کنیم . در واقع متن ما در همین خانه وسطی جدول دوم نوشته می شود . خانه وسطی جدول جدیدمان را ببینید . دو ضلع سمت راست و سمت چپ این جدول قابل درگ شدن هستند . ضلع عمودی سمت چپ آن را بگیرید و به سمت چپ درگ کنید و همینطور ضلع سمت راستی را به سمت راست درگ کنید . میزان فاصله ای هم که می دهید بستگی دارد به میل و سلیقه خودتان که می خواهید متن چقدر از لبه ها فاصله داشته باشد .
خوب کار ما در اینجا تمام شد . اگر شما دریم ویر را ندارید می توانید کد اج تی ام ال را که به شما می دهم کپی کنید و در ادیتور اچ تی ام ال تان در جای مناسب پیست کنید . در آدرس زیر کد اچ تی ام ال این کادر گسترش پذیر داده شده . کدهای اچ تی ام ال در پایین صفحه و در داخل یک کادر مشخص است .
http://www.allwebdesignresources.co...tricks/stretchableroundcornerscontentbox.html
و تصویر را هم به صورت فایل زیپ می توانید از اینجا بگیرید .
http://www.allwebdesignresources.com/webdesigntutorials/webdesigntricks/expandabletables.zip
رنگ بک گراند را
#E9DAB3
در نظر بگیرید و یک داکیومنت جدید با ابعاد 500 * 500 پیکسل ایجاد کنید و در قسمت
Content
گزینه
Background color
را انتخاب کنید که یک صفخه جدید با رنگ داده شده ایجاد شود .
حالا کادر لبه گرد را ایجاد می کنیم .. از نوار ابزرا
'Rounded Rectangle Tool'
را بردارید .
در بالا نوار آپشنز را می بینید مقدار
Radus
شعاع را 15 در نظر بگیرید و رنگ را سفید و
Nostyle
گزینه شعاع در بالا میزان گردی لبه ها را تعیین می کند . هر چقدر شعاع بزرگتر باشد لبه ها گردترند و شکل بیشتر به دایره نزدیک می شود . شکل زیر مقدار شعاع را 60 در نظر گرفته
و در زیر هم مقدار شعاع 5 است .
خوب حالا کادر کمی کوچکتر از صفحه کارتان رسم کنید .
و در پلت لایه اسم لایه جدیدی که خود به خود درست شده را
Resizeable table
بگذارید برای این کار روی پلت لایه ها بر روی این لایه رایت کلیک کرده و از منوی حاصل گزینه
Layer properties
را انتخاب کرده و لایه را نام گذاری کنید .
یک راه دیگر برای تغییر نام لایه این است که در پلت لایه ها بر روی فلش رو به راست کوچکی که در بالای پلت لایه هاست کلیک کنید
و از منوی حاصل گزینه
Layer property
را انتخاب کنید
. در پلت لایه ها در لایه
Resizeable table
دو تا مربع می بینید که بینشان یک علامت لینک هست . بر روی مربع سمت چپی باید رایت کلیک کنید . البته این مربع ممکن است در فتوشاپ شما در سمت راست باشد . و از منوی حاصل گزینه
Blending options
را انتخاب کنید .
Outer glow
را انتخاب کنید و تنظیمات زیر را در موردش اعمال کنید .
Blend Mode to 'Normal',
Opacity to '30',
Noise to '0',
Technique to 'Softer',
Spread to '44',
Size to '16',
and Range to '100'.
برای نامریی کردن
Path
هم مسیر زیر را بروید ...
View > show > target path
و تیک بغل این گزینه را بردارید که مسیر پنهان شود .
تا به اینجا شکل زیر را به دست آورده ایم .
حالا می خواهیم عکسمان را تکه تکه کنیم و به دریم ویر بفرستیم . از نوار ابزار
'Rectangle Marquee' tool
را بردارید .
روی نوار آپشنز مطمئن باشید که گزینه
Feather
مقدارش صفر است .
و قسمت بالایی شکل را انتخاب کنید . دقت کنید که کل گوشه های گرد در انتخاب واقع شوند . از نظر پهنای انتخاب ، دقت کنید که
Outer glow
ای که ایجاد کرده بودید به طور کامل انتخاب شود .
حالا این ناحیه انتخابی را در یک داکیومنت جدید و تحت نام جدید ذخیره می کنیم به این صورت :
'Edit' > 'Copy Merged'
'File' > 'New'
'Edit' > 'Paste'
و حالا فایل جدید را ذخیره می کنیم .
'File' > 'Save for the Web'
فایل را با پسوند
Gif
و
Colors : 16
و نام
Tabletop
ذخیره کنید .
حالا می خواهیم همین کار را برای لبه پایینی جدولمان هم انجام دهیم . می توانیم همین کا را در مورد لبه پایینی تکرار کنید . و یا اینکه به آسانی همین لبه بالایی را بچرخانید و به عنوان لبه پایینی ذخیره کنید . یعنی به این صورت :
'Image' > 'Rotate Canvas' > 'Flip Canvas Vertical'
و فایل را تحت نام
'bottomtable.gif'
ذخیره کنید .
حالا قسمت میانی جدول را می سازیم . این همان قسمتی است که متن در آن قرار می گیرید و همزمان با بزرگ شدن متن ، گسترش پیدا می کند جوری که آسیبی به لبه ها نمی رسد و متن در جعبه فیت می شود .
ابزار انتخاب مستطیلی
'rectangle marquee tool'
را از نوار ابزار بردارید و در نوار آپشنز در بالای محیط فتوشاپ در قسمت
Style
گزینه
Fixed size
را انتخاب کیند و برای طول و عرض هم مقادیر زیر را در نظر بگیرید .
Width : 450
Height : 1
ناحیه انتخابی شما مطابق شکل یک نوار باریک است .
همین نوار باریک را در یک فایل جدید ذخیره می کنیم . به این صورت :
Edit > copy merged
File > new
Edit > paste
File > save for web
و تحت نام
'middle.gif'
ذخیره کنید .
حالا وارد
Dream weaver
می شویم و از مسیر زیر
File > new
یک فایل جدید ایجاد می کنیم در کادری که باز می شود . در زیر
Category
گزینه
Basic page
را انتخاب کنید و در ستون سمت راست هم در زیر
Basic page
گزینه
Html
را انتخاب کنید . یعنی مطابق شکل زیر ...
و از نوار منو در بالای محیط دریم ویر
'Modify' >'Page Properties'
را انتخاب کنید .
یک پنجره جدید ایجاد می شود در پنجره جدید در قسمت
Backgroun color
همان رنگی که در محسط فتوشاپ به بک گراندمان داده بودیم می نویسیم . یعنی در درس ما
..."#E9DAB3".
حالا می خواهیم در دریم ویر جدولمان را قرار دهیم برای این کار
'Insert' > 'Table'
و در کادر حاصله مقادیر زیر را می نویسیم .
Rows : 3
Columns : 1
Table width : 455 px
Cell padding : 0
Cell spacing : 0
Border : 0
حاال فایل دریم ویر را ذخیره می کنیم .
'File' > 'Save as'
در کادری که ظاهر می شود به فایلمان نام
expandabletables.html.
می دهیم و آن را تحت پسوند
Html
ذخیره می کنیم .
حالا همانطور که در شکل نشان داده شده در ردیف اول جدول یک کلیک کنید و بعد مسیر
Insert > image
خوب می خواهیم در این سلول جدول همان فایلی که در فتوشاپ ساخته بودیم و قسمت بالای کادر را در بر داشت قرا دهید . از کادر حاصله به دنبال
'toptable.gif'
که در فتوشاپ ساخته بودید بگردید . انتخابش کنید و اکی کنید .
حالا می خواهیم قسمت پایین جدول را بسازیم برای این کادر در جدول بر روی پایین ترین ردیف جدول کلیک کنید و مثل مرحله قبل از منوی
Insert > image
و از کادر حاصل همان عکسی که در محیط فتوشاپ تحت نام
'bottomtable.gif'
ذخیره کرده بودید انتخاب کنید . تا به اینجا کار جدول شما به این صورت است .
خوب . حالا به قسمت اصلی کارمان می رسیم . می خواهیم قسمت گسترش پذیر میانی جدول را ایجاد کنیم . کاری که اکثر کاربران نمی دانند چگونه باید عمل کنند . برای خانه وسطی جدولمان همان عکسی که درفتوشاپ با نام
'middle.gif'
ذخیره کرده بودیم را استفاده خواهیم کرد . که ابعادش 1 * 455 پیکسل بود و آن عکس را به صورت موزاییکی داخل خانه وسطی جدولمان می چینیم . و همینطور که جدول گسترش پیدا می کند این عکس هم خودش را از بالا به پایین تکرار می کند و به موازات گسترش متن ، جدول هم بزرگ می شود .
ایا نوار
'Properties'
در پایین محیط دریم ویر شما اشکار است ؟ اگر نیست آن را ظاهر سازید .
'Windows' > 'Properties'
اگر در منتهی الیه سمت راست نوار
Priperties
یک فلش کوچک رو به پایین هست روی ان کلیک کنید که کل نوار را ببینید . اگر این کار را درست انجام داده باشید حالا باید جهت فلش رو به بالا باشد .
حالا برای خانه وسطی جدول ترفندی را به کار می گیریم که این خانه گسترش پذیر باشد . یعنی همزمان با افزایش متن دورن آن ، به طور خودکار بسط یابد . برای این کار در خانه وسطی جدول کلیک کنید و در نوار
Priperties
روی آیکن فولدر که بعد از
Bg
هست مطابق شکل کلیک کنید .
و از کادر حاصله به دنبال فایل
'middle.gif'
که در فتوشاپ ساخته بودیم می گردیم . این همان فایلی است که به صورت
Tile
موزاییکی در خانه وسط چیده می شود .
جدول شما به این صورت شد
خوب حالا کاری که باید بکنیم این است که در خانه وسط جدولمان یک جدول جدید ایجاد کینم . یعنی این جدول جدید در دل خانه وسطی جدول اولمان قرار می گید . این جدول سه ستون و یک ردیف دارد و حکمت ایجاد آن این است که متنی که در کادر می نویسیم درست قالب بندی شود و از لبه های جدول بیرون نزد و طرف چپ و راست متنمان تراز باشد . برای این کار در خانه وسط جدول کلیک کنید و از مسیر زیر
'Insert' > 'Table'
بروید و در کادری که ظاهر مشود :
Columns : 3
Rows : 1
width : 100 %
خوب حالا باید در همین جدول اخیری که درست کردیم ، خانه وسط جدول را بزگتر کنیم . در واقع متن ما در همین خانه وسطی جدول دوم نوشته می شود . خانه وسطی جدول جدیدمان را ببینید . دو ضلع سمت راست و سمت چپ این جدول قابل درگ شدن هستند . ضلع عمودی سمت چپ آن را بگیرید و به سمت چپ درگ کنید و همینطور ضلع سمت راستی را به سمت راست درگ کنید . میزان فاصله ای هم که می دهید بستگی دارد به میل و سلیقه خودتان که می خواهید متن چقدر از لبه ها فاصله داشته باشد .
خوب کار ما در اینجا تمام شد . اگر شما دریم ویر را ندارید می توانید کد اج تی ام ال را که به شما می دهم کپی کنید و در ادیتور اچ تی ام ال تان در جای مناسب پیست کنید . در آدرس زیر کد اچ تی ام ال این کادر گسترش پذیر داده شده . کدهای اچ تی ام ال در پایین صفحه و در داخل یک کادر مشخص است .
http://www.allwebdesignresources.co...tricks/stretchableroundcornerscontentbox.html
و تصویر را هم به صورت فایل زیپ می توانید از اینجا بگیرید .
http://www.allwebdesignresources.com/webdesigntutorials/webdesigntricks/expandabletables.zip
