طراحی وب

طراحی وب

اگر می خواهید بهترین نتیجه را در طراحی وب داشته باشید! تمام تمرکز خود را به رابط کاربری و رابط تجربی قرار دهید.

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

 

در ادامه به برخی از اصول کاربرپسند اشاره می کنیم:

فهرست بندی و محتوا در طراحی وب

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

هارمونی رنگ ها

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

واکنشگر

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

محتوا و گالری تصاویر

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

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

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

برای اطلاعات بیشتر به مقاله های زیر مراجعه کنید:

۱۰ really useful responsive web design tutorials

Web Design

 

طراحی سایت در مشهد

طراحی سایت در مشهد

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

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

مزیت طراحی سایت

مزیت این طراحی سایت ها با تیم اسپیناس بدین صورت است که سرعت لود شدن بالایی را برای سایت ها دارد و همچنین به صورت واکنشگرا است و سازگاری با هر نوع دستگاهی را دارد .
در کنار اینها اصول اولیه سئو و بهینه سازی در سایت ها رعایت می گردد.

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

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

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

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

طراحی سایت تبلیغاتی

طراحی سایت تبلیغاتی

طراحی سایت تبلیغاتی برای کمک به بیزینس های بزرگ و کوچک جهت مشاوره انواع تبلیغات و درج تبلیغات است.

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

طراحی سایت تبلیغاتی می توانند شامل زیر مجموعه هایی مانند املاک – خودرو – خرید و فروش کالا – و یا ارائه خدمات باشد.

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

برخی امکانات در طراحی سایت تبلیغاتی :

• ایجاد گروه نیازمندی ها و تبلیغات و آگهی ها
• مشاهده اعضای سایت با قابلیت ارسال خبرنامه به اعضا
• تعریف بی نهایت مدیر با دسترسی های مختلف
• امکان تعریف دسته های نیازمندی و آگهی فرعی
• افزودن کلمات کلیدی
• افزودن کلمات کلیدی
• ایجاد امکان اطلاع رسانی از طریق اخبار سایت به مشتریان

آموزش HTML (جلسه ششم )- تگ های قالب بندی متن (قسمت سوم)

ادامه اموزش طراحی سایت با HTML :

تگ <blink>: متن داخل این عنصر در مرورگر به صورت چشمک زن در خواھد آمد. این تگ تنھا در مرورگرھایفایرفاکس، گوگل کروم و اوپرا پشتیبانی می شود، و مرورگر اینترنت اکسپلورر از آن پشتیبانی نمیکند.

تگ<center>: از این تگ برای وسط چین کردن ھر نوع عنصری استفاده میشود. برای این کار کافی است تگ باز

<center> را قبل و تگ بسته <center/> را بعد از عنصر مورد نظرتان قرار دھید.

 

<center> <p>7Learn.com : Web Design and Javascript Tutorials</p> </center>

 

تگ <font>: از این تگ برای تغییر رنگ، تغییر اندازه و تغییر فونت متون و سایر عناصر متنی موجود در HTML استفادهمی شود. این تگ که جزء تگ ھای درون خطی محسوب می شود از صفت ھای زیر پشتیبانی میکند.

face : از این صفت برای مشخص کردن فونت خاصی استفاده می شود. یعنی اگر بخواھیم متنی را فونت خاصینمایش دھیم از تگ <font> ھمراه با این صفت استفاده می کنیم. این صفت لیستی از فونت ھا که با “,” (کاما) از

ھم جدا شده اند را به عنوان مقدار می پذیرد. اگر اولین فونت بر روی سیستم کاربر نصب نبود، فونت دوم، فونت دومنصب نبود فونت سوم و … بر روی متن اعمال می شود:

کد بالا به این معناست که اول فونت Tahoma را بر روی متن اعمال کند. اگر فونت Tahoma روی سیستم کاربر نصبنبود، فونت Arial را اعمال کند، اگر این فونت نیز موجود نبود فونت Serif را اعمال کن. اگر….. و به ھمین منوال!

size: از این صفت برای تایین اندازه(سایز) متون استفاده می شود. و به دوشکل می توان به این صفت مقدار داد:

مقادیر مطلق: مقادیری بین ۱ تا ۷٫

مقادیر نسبی: مقادیری بین ۷- تا ۷+ که در این صورت اندازه فونت نسبت به اندازه فونت مشخص شدهدر تگ </ basefont> سنجیده خوھد شد. (این تگ را ادامه معرفی خواھیم کرد.) اگر عدد مشخص شدهمثبت باشد، به این معناس که به ھمان تعداد به اندازه مشخص شده در >/ basefont< اضافه و اگر عددمشخص شده منفی باشد، به این معنی است که به ھمان تعداد از اندازه مشخص شده در </ basefont>کم شود و سپس بر روی متن اعمال گردد.

color : از این صفت برای تعیین رنگ یک متن استفاده میشود. این صفت مقداری از انواع رنگ ھا می پذیرد و رنگ متنرا مشخص می کند که در جلسه قبل طریقه مقدار دھی به این صفت را آموزش دادیم.

<p> <font face='Tahoma, Arial,"Times New Roman"' size='+2' color='#ff0000'> 7Learn.com : W

eb Design and Javascript Tutorials</font> </p>

 

تگ </ basefont>: از این تگ تھی که حتما باید در قسمت head استفاده شود برای تعیین اندازه و نوع و رنگ

فونت پایه صفحه استفاده میشود. بیشترین استفاده از این تگ برای تعیین اندازه Font پایه صفحه است تا تمام اندازهھای نسبی صفحه تگ ھای <font> داخل صفحه نسبت به آن سنجیده شود.

در صورتی که اندازه خاصی در تگ <basefont> تعیین نشود اندازه به صورت پیش فرض ۳ در نظر گرفته میشود.

نکته : این تگ از تمام صفت ھای تگ >font< (یعنی size, color, face) با ھمان نوع مقادیر پشتیبانی میکند. ز اینکهبه صفت size آن فقط می توان مقادیر مطلق داد و مقادیر نسبی مجاز نیستند.

تگ <marquee> : از این تگ برای به حرکت در آوردن متون، عکس ھا و سایر عناصر استفاده میشود. صفت ھای اینتگ به شرح زیر است:

Width : عرض محدوده marquee را بر حسب درصد یا پیکسل مشخص می کند. و در صورت مقدار ندادن مقدار آن بهاندازه عرض صفحه خواھد بود.

Height : ارتفاع محدوده marquee را بر حسب درصد یا پیکسل مشخص می کند. و در صورت مقدار ندادن ارتفاع آن بهندازه متنی که در داخل آن است خواھد بودBgcolor : رنگ پس زمینه محدوده marquee را مشخص میکند. به سه روشی (نام رنگ، تابع rgb، مبنایھگزادسیمال) که قبلا به آن ھا اشاره شده است. میتوان به این صفت مقدار داد.

Behavior: نحوه رفتار یا حرکت محتویات marquee را مشخص میکند که میتوناد یکی از مقادیر زیر باشد:

Scroll : متن از یک طرف وارد و از طرف دیگر خارج می شود.

Slide: متن از یک طرف وارد و در طرف دیگر می ایستد.

Alternate: متن یک حرکت رفت و برگشتی در محدوده marquee خواھد داشت.

و در صورت مقدار ندادن مقدار آن مساوی با scroll خواھد بود.

Scrollamount : اگر حرکت متن بوسیله تگ marquee را مانند قدم زدن در نظر بگیریم، این صفت فاصله بین ھر قدمرا کنترل میکند. این صفت مقداری عددی بر حسب px را میپذیرد.

Scrolldelay : این صفت تاخیر زمانی بین ھر قدم را بر حسب میلی ثانیه مشخص میکند. مثلا مقدار ۱۰۰۰ برای اینصفت به معنی تاخیر یک پانیه برای برداشتن ھر قدم خواھد بود.

Loop: تعداد تکرار حرکت متن را کنترل میکند. و می تواند یک عدد صحیح باشد. در صورتی که بخواھید حرکت بینھایت بار تکرار شود مقدار این صفت را برابر یک عدد منفی (مثلا ۱-) یا عبارت infinite قرار بدھید.

Direction : جھت حرکت محتویات marquee را مشخص میکند. و می تواند یکی از مقادیر زیر باشد:

Up : حرکت به سمت بالا

Down : حرکت به سمت پایین

Right : حرکت به سمت راست

Left : حرکت به سمت چپ

hspace : میزان فاصله طرف ھای راست و چپ محدوده marquee نسبت به عناصر اطراف را بر حسب px یا درصدکنترل میکند.

vspace : میزان فاصله طرف ھای بالا و پایین محدوده marquee نسبت به عناصر اطراف را بر حسب px یا درصد کنترلمیکند.

truespeed : معمولا مرورگرھا مقادیر کمتر از ۶۰ برای صفت scrolldelay را در نظر نمیگیرند، یعنی در صفت

scrolldelay اگر مقداری کمتر از ۶۰ را وارد کنیم، مرورگر آن را ۶۰ در نظر خواھد گرفت. ولی ما میتوانیم با به بکارگیریصفت truespeed که جزء صفت ھای Boolean نیز ھست (یعنی مقدار آن برابر با نام صفت است) مرورگرھا را مجبورخواھیم کرد تا دقیقا ھمان عددی را که در صفت scrolldelay مشخص کرده ایم در حرکت متن تاثیر بدھد.

مثال :

<p> <marquee width='200px' height='50px' bgcolor='#acacac' behavior='Alternate' scrollamou

nt='1px' scrolldelay='40'> 7Learn.com</marquee> </p>

 

بسیار خب، تا اینجا با ۲۰ تگ قالب بندی متن آشنا شدیم. در مطلب بعدی به کار با لینک ھا (پیوندھا) میپردازیم و تگ>a< را مورد بررسی قرار میدیم. و یه نکته اینکه، حتما مطالب مربوط به تگ ھای قالب بندی که در این جلسه آموزشدادیم رو تمرین کنید.

 

 

ادامه اموزش طراحی سایت با HTML ، در جلسه بعدی!!با ما همراه باشید…

آموزش HTML (جلسه پنجم )- تگ های قالب بندی متن (قسمت دوم)

ادامه اموزش طراحی سایت با HTML :

 

تگ <hn>: زبان HTML از شش سطح تیتر (Heading) ھا پشتیبانی میکند. این ۶ سطح با تگ ھای <h1> و <h2> و

>h3< و <h4> و <h5> و<h6> ایجاد می شوند. مرورگرھا عنصر <h1> را در بزرگترین و عنصر <h6>  را درکوچکترین اندازه از بین این ۶ سطح نمایش می دھند.

 

ھر شش عنصر فوق دارای صفت ھای زیر ھستند که در ادمه بررسی خواھیم کرد:

align: این صفت نحوه چینش متن داخل heading را کنترل میکند، و چھار مقدار زیر را می پذیرد:

left: تیتر در سمت چپ صفحه قرار میگیرد.center: تیتر در وسط صفحه قرار میگیرد.right: تیتر در سمت راست صفحه قرار میگیرد.justify: متن داخل heading را از ھر دو طرف تراز میکند.

 

<h1 align="left">Left-Aligned Heading</h1>

<p>This heading uses the align attribute with a value of left.</p>

<h1 align="center">Centered Heading</h1>

<p>This heading uses the align attribute with a value of center.</p>

<h1 align="right">Right-Aligned Heading</h1>

<p>This heading uses the align attribute with a value of right.</p>

 

 

بقیه صفت ھا نیز جزء صفات عمومی ھستند که قبلا آنھا را معرفی کرده ایم.

تگ <p> : از تگ <p> برای ایجاد پاراگراف ھا در صفحه استفاده می شود. معمولا ھمیشه پاراگراف ھا از خط جدیدشروع می شوند و یک فضای خالی قبل و بعد از خود ایجاد می کنند:

نتیجه در مرورگر:

تگ </br>: برای ایجاد شکست در خط و رفتن به خط جدید از این تگ استفاده میکنیم. این عنصر جزء عناصر تھیبوده و به تگ پایانی احتیاج ندارد. شما از این عنصر می توانید به شکل</br>نیز استفاده کنید که مخصوص نسخهھای قدیمی HTML بوده. اما در نسخه XHTML می بایست بعد از br< یک فاصله خالی، و سپس / و در انتھا یکعلامت > قرار گیرد.

 

تگ<nobr>: این تگ نوعی در مقابل</br> قرار دارد. به دلیل که متن داخل این تگ به ھیچ عنوان شکسته نخواھد

شد مگر اینکه تگ </br> داخل آن قرار گیرد. استفاده از این تگ باید با احتیاط انجام شود زیرا ممکن است موجب ایجاداسکرول افقی در پنجره مرورگر شود که معمولا حالتی عذاب آور برای کاربر خواھد بود!

<p><nobr>7Learn.com : Web Design and Javascript Tutorials</nobr></p>

 

 

تگھای<pre>و<code>: گاھی اوقات می خواھیم متنمان دقیقا به ھمان شکلی که نوشته می شود در نمایشداده شود و از فاصله ھای خالی، فاصله ھای Tab و شکست ھای خط چشم پوشی نشود. ھر آنچه که بین تگ

<pre> و <pre/> قرار می گیرد دقیقا به ھمان شکلی که در source صفحه نوشته شده است در صفحه نشان دادهخواھد شد. این تگ معمولا به ھمراه تگی با نام <code> که متن داخل آن به یکی از فونت ھای از نوع monospaceھمانند courier new نشان داده می شود به کار می رود. (فونت ھای نوع monospace فونت ھایی ھستند که ھرکاراکتر آن ھا به یک اندازه فضا اشغال می کنند.)

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

 

تگ </ hr>: از این تگ برای ایجاد خطوط افقی در صفحات استفاده میشود. این تگ جزء تگ ھای تھی بوده و باید بهھمین شکل استفاده شود و به تگ پایانی احتیاج ندارد البته می توان از این عنصر به صورت <hr> نیز استفاده کرد کهمربوط به نسخه ھای قدیمی HTML می باشد:

 

این عنصر دارای صفات زیر است:

Width: با این صفت می توان عرض عنصر >/ hr< را کنترل کرد. به دو طریق می توان به این صفت مقدار دھی کرد.

یکی برحسب px و دیگری بر حسب درصد که نسبت به پھنای کل صفحه (یا عنصری که hr درآن قرار دارد) سنجیدهم یشود:

Color : این صفت رنگ خط را مشخص میکند. صفاتی از این دست در HTML که یک رنگ را به عنوان مقدار می پذیرندرا می توان به سه روش مقدار دھی نمود.:

استفاده از نام رنگ ھا : ما از نام ۱۶ رنگ استاندارد میتوانیم برای مقداردھی به صفت ھا استفاده کنیم.

این رنگ ھا به شرح زیر ھستند:

Black, Silver, Gray, White, Maroon, Red, Purple, Fushia

Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aque

استفاده از تابع rgb: در HTML تابعی با نام rgb وجود دارد که به ترتیب سه رنگ قرمز، سبز و آبی را بهعنوان مقدار میپذیرد. این مقادیر یا اعداد صحیح ھستند یا به صورت درصد بیان می شوند. به طور مثال:

در اولین عبارت عدد ۲۵۵ معادل %۱۰۰ است. در مد رنگ RGB محدوده اعداد صحیح بین ۰ تا ۲۵۵ است.

استفاده از مبنای ھگزا دسیمال (مبنای ۱۶) رنگ ھا:رنگ ھا را می توان بر مبنای عبارت متناظر آن ھادر مبنای ۱۶ به کار برد. در این عبارت میتوان سه عدد در مبنای را نوشت. عدد اول معرف رنگ قرمز، عدددوم معرف رنگ سبز و عدد سوم معرف رنگ آبی است. دقت کنید که این اعداد می توانند. از دو حرف

تشکیل شده باشند. زیرا اعداد در مبنای ۱۶ از حروف A تا F نیز میتوانند تشکیل شوند. فرم کلی این نوع

عبارت ھا. به شکل rrggbb# است مثال عبارت ۰۰۰۰۰۰# lمعرف رنگ سیاه  و ff0000# معرف رنگ آبیاست

Size :این صفت ارتفاع یک خط را کنترل می کند و می تواند یک عدد بر حسب px را به عنوان مقدار می پذیرد.

noshadow :خط ھایی که در صفحه ایجاد می کنیم به صورت پیش فرض دارای خطی در زیر خود به عنوان سایهھستند ا میتونیم از این صفت بولین برای حذف این سایه استفاده کنیم.

align: محل قرار گیری خط در صفحه را کنترل می کند و میتواند یکی از مواد right, center و left را به عنوان مقداربپذیرد.

تا اینجا با پنج تگ دیگر از تگ ھای قالب بندی متن آشنا شدید. در قسمت سوم و آخر تگ ھای قالب بندی متن شما رابا پنج تگ دیگر آشنا خواھیم کرد.

 

ادامه اموزش طراحی سایت با HTML ، در جلسه بعدی!!با ما همراه باشید…

طراحی سایت موفق برای فروشگاه اینترنتی

طراحی سایت موفق برای فروشگاه اینترنتی

 

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

اما صرفاً با راه‌اندازی فروشگاه شما قادر به فروش نخواهید بود پس راه اندازی وب سایت فروشگاهی زیاد است اما کارا بودن آنها زیر سوال است در طراحی سایت اسپیناس ما به شما کمک میکنیم بعد از راه  اندازی وب سایت بازدید کنندگان خود را به کاربران هدف تبدیل کنید

این که مشتریان بتوانند در سایت برای محصولات نظر قرار دهند می توانند یک عامل موفقیت از جهت اعتماد دیگر کاربران باشد صرفاً با توضیح محصول هرچند که خیلی هم خوب باشند کاربر آن لحظه را خریداری می‌کنند اما با قسمت نقل محصولات کاربران طریقی به ترغیب به خرید محصولات بیشتر می شوند

 

یکی از رازهای موفقیت در طراحی سایت فروشگاهی استفاده از تصاویر با کیفیت محصولات می باشد کاربران تا امروز می توانند با گوشی های هوشمند خود تصاویر با کیفیت تهیه نمایند تصاویر در نور کافی از زوایای مختلف و دارای وضوح بالا باشند برنامه محبوب من Camera+

 

سیستم پرداخت سریع و راحت

مردم دوست دارند بعد از انتخاب محصول خیلی راحت آن را آنلاین سفارش می دهند در صورت کند بودن وب سایت و یا داشتن ثبت نام های پیچیده به راحتی تعداد مشتریان از دست میرود سعی کنید همیشه چندین روش برای پرداخت داشته باشید ثبت نام اجباری ممنون!

 

توصیف ساده و دقیق محصولات

سعی در توضیح محصولات خود در وب سایت برای عموم مردم به راحتی قابل فهم باشد چون باعث افزایش نرخ تبدیل مشتری می شود و تا آنجایی که ممکن است نیاز به تماس با کارشناسان فروش نباشد

آموزش طراحی سایت(جلسه ۴): تگ های مهم html

 تگ های مهم html

آدرس دهی:

دو نوع آدرس دهی در طراحی وب سایت  برای بیان مسیر فایلها وجود دارد:

مطلق  Absolute : یعنی آدرس یک فایل را نسبت به ریشه سایت یا درایو بیان کنیم.

· مثال اول

 <body background="file://:\x.com\img\y.jpg">

· مثال دوم

 <body background="http://persiangig.com/img/x.jpg">

نسبی  Relative: یعنی آدرس یک فایل را نسبت به فایلی که در حال نوشتن کدهای آن هستیم بیان کنیم.

مثال:

 <body background="img/sky.jpg">

آدرس بالا میگوید فایلی به نام sky.jpg در پوشه img در کنار فایل فعلی که index.html باشد قرار دارد.

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

تگهای مربوط به شکل دهی متن:

این تگ ها جز موارد پر کاربرد در طراحی وب سایت اسپیناس هستند .

متن را Bold میکند.

 <b>Hello</b>

متن را Bold میکند، نماد تأکید است.

<strong>Hello</strong>

حروف را خمیده میکند.

<i>Hello</i>

حروف را خمیده میکند، نماد تأکید است.

 <em>Hello</em>

به متن زیرخط میدهد.

 <u>Hello</u>

متن را خط میزند.

<s>Hello</s>

 طراحی سایت اسپیناس

اسپیناس

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

پاراگرافبندی در متون طراحی وب:

در word برای ایجاد یک پاراگراف جدید از کلید Enter استفاده میکنیم که cursor به خط بعدی انتقال مییابد. یعنی به ابتدای پاراگراف جدید میرود. اما برای رفتن به خط بعدی بدون ایجاد پارگراف از کلیدهای Shift+Enter استفاده میکنیم. در کد نویسی وب نیز دو تگ برای پاراگرافبندی و رفتن به خط بعدی وجود دارد:

<p> برای ایجاد پاراگراف <br> برای رفتن به خط بعدی بدون ایجاد پاراگراف

نکته : تگ p میتواند صفت dir یا align بگیرد.

align محل متن را مشخص میکند و مقادیر right و left و center به خود میگیرد.

تیترهای صفحه:

به تیتر در انگلیسی Heading گفته میشود. در وب برای صفحه، شش سطح تیتر در نظر گرفته شده است که به صورت زیر تعیین نمیشوند:

آموزش طراحی سایت(جلسه ۳): تأثیر title در سئو SEO

 تأثیر title در سئو SEO

تعریف SEO :

Search Engine Optimization است. که در اصل قواعدی است که تعیین میکند سایت خود را به چه » بهبود در موتور جستجو « به معنای صورت طراحی سایت کنید تا در نتایج جستجو، در رتبههای بالاتری قرار بگیرد.

از روی تگ title است که مشخص میشود یک صفحه درباره چیست، پس محتوای تگ تایتل را مرتبط با موضوع آن صفحه انتخاب کنید. همه سئو کارهای معروف و معتبر روی این نکته تأکید خاصی دارند.

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

اولویتها در موتور جستجو در طراحی سایت:

معیار اول، آدرس URL )یعنی کلمات به کار رفته در نام پوشه و فایل منتهی به صفحه( است که کلمه جستجو شده در آنها موجود باشد. معیار دوم تگ > title < و معیار سوم متن صفحه است.

تگ body در طراحی سایت :

تگ body ، یا همان بدنه سایت، شامل تمام تگهایی میشود که برای ساختن قالب اصلی سایت نیاز داریم. متن بین تگ body باز و بسته تنها اطلاعاتی است که توسط مرورگر نمایش داده خواهد شد.

صفات تگ body :

طراحی سایت اسپیناس

اسپیناس

bgcolor : صفت bgcolor رنگ بک گراند را تعیین میکند. که داخل تگ body و با یک فاصله بعد از آنبه صورت زیر قرار میگیرد:

<body bgcolor=” نام یا کد رنگ “>

نکته: اگر از کد رنگ استفاده میکنید باید قبل از آن، از علامت # استفاده کنید.

۳dir : راست به چپ بودن یا چپ به راست بودن صفحه را تعیین میکند ۶ltr و ۷rtl مقادیری هستند که میتوان به این صفت نسبت داد.

<body dir=”rtl”>

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

در نامگذاری فایلها و پوشه های سایت خود به نکات زیر دقت کنید:

– نام فایل انگلیسی باشد.

– با حروف کوچک نوشته شود.

– بین حروف نباید فاصله درج شود. به جای آن می توان از )_( آندرلاین استفاده کرد.

– نام فایل را مرتبط با محتوا انتخاب کنید. )مثلاً اگر یک عکس برای بکگراند استفاده میشود آنرا

را bg بنامید و نه مثلاً pic1 )

– فراموش نکنید که پسوند فایل، جزئی از نام فایل است. پس هر کجا خواستید آدرس یک فایل را

درج کنید، پسوند را نیز باید بیان کنید.

منبع: طراحی سایت اسپیناس

آموزش طراحی سایت(جلسه ۲): توضیح تگهای مهم در HTML

توضیح تگهای مهم در HTML :

تگ DOCTYPE در طراحی سایت :

این تگ در بر دارندهی کل محتویات صفحه است که همه ی تگ ها را احاطه میکند. تنها عبارتی که قبل از تگ  html  باز باید نوشته شود، قطعه کد ! DOCTYPE html  است که استثنائاً با حروف بزرگ نوشته میشود.

اما این تگ چیست؟

تگ < !DOCTYPE html > به مرورگر میفهماند که شما قصد استفاده از HTML نسخه ۵ را برای طراحی سایت صفحه ی وب خود دارید. در صورتی که بخواهید از ۲XHTML جهت طراحی صفحه وب خود استفاده کنید،

باید کد فوق را کمی تغییر دهید.

شاید به این فکر کرده باشید، پس چرا حذف آن تأثیری در صفحه وب ما ندارد؟ این کد در ایجاد صفحه HTML اختیاری و در صفحات XHTML اجباری است. اگر این تگ را به همراه یک ۳URL در بالای صفحه وب خود اعلان کنید سبب میشود که مرورگر فعلی، هنگام باز کردن صفحه شما در مد standard کار کنند.

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

صفحه شما استفاده میکند.

۲ EXtensible HyperText Markup Language

۳ Uniform Resource Locator

یک مثال عملی: در هنگام تعیین رنگ با شماره های هگزاد سیگمال، یک علامت # شارپدر ابتدای شماره رنگ قرار میگیرد. که حذف آن باعث نادیده گرفته شدن رنگ در زمان نمایش صفحه میشود، اما اگر کد

DOCTYPE را از ابتدای صفحه پاک کنید. مرورگرتان از این مورد ایراد نمیگیرد و آن رنگ را نشان میدهد.

نکته: برای تست این مثال از مرورگر فایر فاکس استفاده کنید. چون مرورگر Internet Explorer به طور معمولی هم از حذف علامت # ایراد نمیگیرد و ممکن است شما فکر کنید گذاشتن علامت # اختیاری است.

تگ head  در طراحی سایت :

تگ head یا معادل فارسی آن تگِ سرانداز!، اولین تگ در بدنه تگ html میباشد که حاوی یک سری اطلاعات برای مرورگر و نیز جستجوگرهای وب میباشد. اطلاعات این بخش در قسمت بدنه سند html ما

نمایش داده نمیشود. ولی اطلاعاتی همچون عنوان صفحه، کلمات کلیدی، استایلهای خارجی و داخلی، جاوا اسکریپتهای خارجی و داخلی، آیکون صفحه، توضیحاتی راجع به سازنده و… را تعریف میکند. که برای مرورگر

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

در کل تگ head حاوی کدهایی است که مستقیماً روی صفحه دیده نمیشوند ولی تأثیر آنها دیده میشود.

تگ head هیچ صفتی ندارد.

تگهایی که بین تگ head قرار میگیرند عبارتند از:

طراحی سایت اسپیناس

اسپیناس

<title> <link> <script> <style> <meta>

که در آینده کاربرد و نحوهی استفاده از آنها را توضیح خواهیم داد.

تگ title در طراحی سایت:

– تگ title عنوان صفحه را تعیین میکند و هیچ صفتی ندارد.

– محتوای تگ تایتل نباید بیش از ده کلمه باشد.

آموزش طراحی سایت(جلسه ۱) : html چیست؟

HTML چیست ؟

دورره آموزش طراحی سایت با HTML

– HTML به معنای زبان نشانهگذاری ابرمتن است.

– یعنی هر چند ما در این زبان یک سری متن را تایپ میکنیم اما این متون، معنایی فراتر از  ابرمتن متن دارند.

– در این دوره ، HTML5 تدریس میشود.

– هر چند html به حروف کوچک و بزرگ حساس نیست اما بهتر است نام تگها و نام صفات با حروف کوچک انگلیسی نوشته شوند.

سادهترین برنامه به زبان HTML :




<!DOCTYPE html>

 <html>

 <head> 

<title>First Page</title>

 </head>

 <body> 

<h1 align="center">Hello World!</h1>

 </body> 

</html>

Hello World!

اولین گام در طراحی سایت:

اولین گام در شروع به طراحی، ایجاد یک پوشه برای آن سایت است. این پوشه میتواند به هر نامی انتخابشود اما چه بهتر که همنام دامنهی سایت باشد؛ مثلاً aftab.cc .

اما نکته مهم این است که با خودتان قراردادکنید که هر چیزی که قرار است در سایت شما استفاده شود، باید به این پوشه منتقل شود. عکسها، ویدئوها،اصوات و … همه باید ابتدا به این پوشه منتقل شوند سپس در کدنویسی به آنها اشاره شود. یعنی میشودیکی در درایو C شما باشد، یکی در درایو D شما، یکی روی دسکتاپ شما!!در این پوشه، زیرپوشههای مرتبط با محتوای خود بسازید. مثلاً پوشهای به نام img برای عکسهای سایت.پوشهای به نام video برای ویدئوهای سایت…

نحوهی اجرای کدهای HTML :

برنامه بالا را در NotePad تایپ کرده و در پوشه سایت که قبلاً ساختهایم، با نام index.html و باEncoding ، UTF-8 ذخیره میکنیم. )توجه داشته باشید که Encoding پیشفرض یعنی ANSI زبانفارسی را پشتیبانی نمیکند.(۱ Hyper Text Markup Language

مفهوم tag  در طراحی سایت :

– تگ یعنی برچسب

– ما عناصری داریم؛ مانند عکس، متن، ویدئو و … قرار است آنها را با برچسبها به دیوار سایت خودبچسبانیم.

– در HTML محدودهی عناصر با تگها مشخص میشوند.مانند {}و () که برای مشخص کردن یکمحدوده در زبان هستند

تگها و اجزای تشکیل دهنده آن:

Hello world!

– صفتها به تگ دستور میدهند که به چه روشی عمل کنند. در html درج صفتها به این صورت

است:

 عنصر/ Element
 Attribute / صفت
 Content / محتوا
 Closing tag
 Opening tag
name="value"

نام صفت =”مقدارصفت ”

– مقدار هر صفت باید در دابلکوتیشن “قرار بگیرد.

– قبل از نام هر صفت، یک فاصله بزنید.

فضای سفید در طراحی سایت :

در HTML هر تعداد فاصله Space که بیش از یک فاصله باشد، یک فاصله به حساب میآید. یعنی به طور مثال اگر در بخش کد نویسی بین دو کلمه، ۱۰۰ فاصله وارد کنیم در مرورگر یک فاصله بیشتر نمایش داده نمیشود. برای درج فاصله های بیشتر از یکی، از عبارت   استفاده کنید.