طراحی سایت موفق برای فروشگاه اینترنتی
در حال حاضر طراحی یک فروشگاه امکانات پرداخت آنلاین یا پرداخت در محل و یا از طریق درگاه بانکی بسیار آسان شده است اما هنوز هم مشکلاتی وجود دارد و مهمترین آنها جذب کاربران هدف و بازدید کننده است معمولا صاحبان مشاغل دوست دارند در کنار کسب و کار خودشان از طریق وب سایت نیز مشتریانی داشته باشند
اما صرفاً با راهاندازی فروشگاه شما قادر به فروش نخواهید بود پس راه اندازی وب سایت فروشگاهی زیاد است اما کارا بودن آنها زیر سوال است در طراحی سایت اسپیناس ما به شما کمک میکنیم بعد از راه اندازی وب سایت بازدید کنندگان خود را به کاربران هدف تبدیل کنید
این که مشتریان بتوانند در سایت برای محصولات نظر قرار دهند می توانند یک عامل موفقیت از جهت اعتماد دیگر کاربران باشد صرفاً با توضیح محصول هرچند که خیلی هم خوب باشند کاربر آن لحظه را خریداری میکنند اما با قسمت نقل محصولات کاربران طریقی به ترغیب به خرید محصولات بیشتر می شوند
یکی از رازهای موفقیت در طراحی سایت فروشگاهی استفاده از تصاویر با کیفیت محصولات می باشد کاربران تا امروز می توانند با گوشی های هوشمند خود تصاویر با کیفیت تهیه نمایند تصاویر در نور کافی از زوایای مختلف و دارای وضوح بالا باشند برنامه محبوب من Camera+
سیستم پرداخت سریع و راحت
مردم دوست دارند بعد از انتخاب محصول خیلی راحت آن را آنلاین سفارش می دهند در صورت کند بودن وب سایت و یا داشتن ثبت نام های پیچیده به راحتی تعداد مشتریان از دست میرود سعی کنید همیشه چندین روش برای پرداخت داشته باشید ثبت نام اجباری ممنون!
توصیف ساده و دقیق محصولات
سعی در توضیح محصولات خود در وب سایت برای عموم مردم به راحتی قابل فهم باشد چون باعث افزایش نرخ تبدیل مشتری می شود و تا آنجایی که ممکن است نیاز به تماس با کارشناسان فروش نباشد
دو نوع آدرس دهی در طراحی وب سایت برای بیان مسیر فایلها وجود دارد:
مطلق 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 گفته میشود. در وب برای صفحه، شش سطح تیتر در نظر گرفته شده است که به صورت زیر تعیین نمیشوند:
Search Engine Optimization است. که در اصل قواعدی است که تعیین میکند سایت خود را به چه » بهبود در موتور جستجو « به معنای صورت طراحی سایت کنید تا در نتایج جستجو، در رتبههای بالاتری قرار بگیرد.
از روی تگ title است که مشخص میشود یک صفحه درباره چیست، پس محتوای تگ تایتل را مرتبط با موضوع آن صفحه انتخاب کنید. همه سئو کارهای معروف و معتبر روی این نکته تأکید خاصی دارند.
وقتی رباتهای جستجو به تگ تایتل میرسند، این تگ را از جهات مختلف مورد بازبینی قرار میدهند و کلماتکلیدی صفحه را استخراج میکنند و در مرحله بعد تمامی تگها را از روی این تگ میسنجند. که چقدر بقیه تگهای بهکار رفته در صفحه، مانند > h1 < با تگ تایتل شما همخوانی دارد؟
معیار اول، آدرس URL )یعنی کلمات به کار رفته در نام پوشه و فایل منتهی به صفحه( است که کلمه جستجو شده در آنها موجود باشد. معیار دوم تگ > title < و معیار سوم متن صفحه است.
تگ body ، یا همان بدنه سایت، شامل تمام تگهایی میشود که برای ساختن قالب اصلی سایت نیاز داریم. متن بین تگ body باز و بسته تنها اطلاعاتی است که توسط مرورگر نمایش داده خواهد شد.
bgcolor : صفت bgcolor رنگ بک گراند را تعیین میکند. که داخل تگ body و با یک فاصله بعد از آنبه صورت زیر قرار میگیرد:
<body bgcolor=” نام یا کد رنگ “>
نکته: اگر از کد رنگ استفاده میکنید باید قبل از آن، از علامت # استفاده کنید.
۳dir : راست به چپ بودن یا چپ به راست بودن صفحه را تعیین میکند ۶ltr و ۷rtl مقادیری هستند که میتوان به این صفت نسبت داد.
<body dir=”rtl”>
background : این صفت هنگامی که میخواهید یک عکس را به عنوان بک گراند معرفی کنید استفاده میشود. قبل از انتخاب عکس و درج آن است .
در نامگذاری فایلها و پوشه های سایت خود به نکات زیر دقت کنید:
– نام فایل انگلیسی باشد.
– با حروف کوچک نوشته شود.
– بین حروف نباید فاصله درج شود. به جای آن می توان از )_( آندرلاین استفاده کرد.
– نام فایل را مرتبط با محتوا انتخاب کنید. )مثلاً اگر یک عکس برای بکگراند استفاده میشود آنرا
را bg بنامید و نه مثلاً pic1 )
– فراموش نکنید که پسوند فایل، جزئی از نام فایل است. پس هر کجا خواستید آدرس یک فایل را
درج کنید، پسوند را نیز باید بیان کنید.
منبع: طراحی سایت اسپیناس
این تگ در بر دارندهی کل محتویات صفحه است که همه ی تگ ها را احاطه میکند. تنها عبارتی که قبل از تگ html باز باید نوشته شود، قطعه کد ! DOCTYPE html است که استثنائاً با حروف بزرگ نوشته میشود.
تگ < !DOCTYPE html > به مرورگر میفهماند که شما قصد استفاده از HTML نسخه ۵ را برای طراحی سایت صفحه ی وب خود دارید. در صورتی که بخواهید از ۲XHTML جهت طراحی صفحه وب خود استفاده کنید،
باید کد فوق را کمی تغییر دهید.
شاید به این فکر کرده باشید، پس چرا حذف آن تأثیری در صفحه وب ما ندارد؟ این کد در ایجاد صفحه HTML اختیاری و در صفحات XHTML اجباری است. اگر این تگ را به همراه یک ۳URL در بالای صفحه وب خود اعلان کنید سبب میشود که مرورگر فعلی، هنگام باز کردن صفحه شما در مد standard کار کنند.
بدین صورت میتوانید کدهای خود را مطابق استاندارد نوشته و کنترل بیشتری بر چگونگی نمایش این صفحه در مرورگرهای مختلف داشته باشید. در صورت نگذاشتن این کد، مرورگر از روشهای قدیمیتر برای نمایش
صفحه شما استفاده میکند.
۲ EXtensible HyperText Markup Language
۳ Uniform Resource Locator
یک مثال عملی: در هنگام تعیین رنگ با شماره های هگزاد سیگمال، یک علامت # شارپدر ابتدای شماره رنگ قرار میگیرد. که حذف آن باعث نادیده گرفته شدن رنگ در زمان نمایش صفحه میشود، اما اگر کد
DOCTYPE را از ابتدای صفحه پاک کنید. مرورگرتان از این مورد ایراد نمیگیرد و آن رنگ را نشان میدهد.
نکته: برای تست این مثال از مرورگر فایر فاکس استفاده کنید. چون مرورگر Internet Explorer به طور معمولی هم از حذف علامت # ایراد نمیگیرد و ممکن است شما فکر کنید گذاشتن علامت # اختیاری است.
تگ head یا معادل فارسی آن تگِ سرانداز!، اولین تگ در بدنه تگ html میباشد که حاوی یک سری اطلاعات برای مرورگر و نیز جستجوگرهای وب میباشد. اطلاعات این بخش در قسمت بدنه سند html ما
نمایش داده نمیشود. ولی اطلاعاتی همچون عنوان صفحه، کلمات کلیدی، استایلهای خارجی و داخلی، جاوا اسکریپتهای خارجی و داخلی، آیکون صفحه، توضیحاتی راجع به سازنده و… را تعریف میکند. که برای مرورگر
و نیز ایندکس کردن توسط جستجوگرهای وب مانند گوگل و یاهو بسیار مهم است.
در کل تگ head حاوی کدهایی است که مستقیماً روی صفحه دیده نمیشوند ولی تأثیر آنها دیده میشود.
تگ head هیچ صفتی ندارد.
تگهایی که بین تگ head قرار میگیرند عبارتند از:
<title> <link> <script> <style> <meta>
که در آینده کاربرد و نحوهی استفاده از آنها را توضیح خواهیم داد.
– تگ title عنوان صفحه را تعیین میکند و هیچ صفتی ندارد.
– محتوای تگ تایتل نباید بیش از ده کلمه باشد.
دورره آموزش طراحی سایت با HTML
– HTML به معنای زبان نشانهگذاری ابرمتن است.
– یعنی هر چند ما در این زبان یک سری متن را تایپ میکنیم اما این متون، معنایی فراتر از ابرمتن متن دارند.
– در این دوره ، HTML5 تدریس میشود.
– هر چند html به حروف کوچک و بزرگ حساس نیست اما بهتر است نام تگها و نام صفات با حروف کوچک انگلیسی نوشته شوند.
سادهترین برنامه به زبان HTML :
<!DOCTYPE html><html><head><title>First Page</title></head><body><h1 align="center">Hello World!</h1></body></html>
اولین گام در طراحی سایت:
اولین گام در شروع به طراحی، ایجاد یک پوشه برای آن سایت است. این پوشه میتواند به هر نامی انتخابشود اما چه بهتر که همنام دامنهی سایت باشد؛ مثلاً aftab.cc .
اما نکته مهم این است که با خودتان قراردادکنید که هر چیزی که قرار است در سایت شما استفاده شود، باید به این پوشه منتقل شود. عکسها، ویدئوها،اصوات و … همه باید ابتدا به این پوشه منتقل شوند سپس در کدنویسی به آنها اشاره شود. یعنی میشودیکی در درایو C شما باشد، یکی در درایو D شما، یکی روی دسکتاپ شما!!در این پوشه، زیرپوشههای مرتبط با محتوای خود بسازید. مثلاً پوشهای به نام img برای عکسهای سایت.پوشهای به نام video برای ویدئوهای سایت…
برنامه بالا را در NotePad تایپ کرده و در پوشه سایت که قبلاً ساختهایم، با نام index.html و باEncoding ، UTF-8 ذخیره میکنیم. )توجه داشته باشید که Encoding پیشفرض یعنی ANSI زبانفارسی را پشتیبانی نمیکند.(۱ Hyper Text Markup Language
– تگ یعنی برچسب
– ما عناصری داریم؛ مانند عکس، متن، ویدئو و … قرار است آنها را با برچسبها به دیوار سایت خودبچسبانیم.
– در HTML محدودهی عناصر با تگها مشخص میشوند.مانند {}و () که برای مشخص کردن یکمحدوده در زبان هستند
– صفتها به تگ دستور میدهند که به چه روشی عمل کنند. در html درج صفتها به این صورت
است:
عنصر/ Element Attribute / صفت Content / محتوا Closing tag Opening tag name="value"
نام صفت =”مقدارصفت ”
– مقدار هر صفت باید در دابلکوتیشن “قرار بگیرد.
– قبل از نام هر صفت، یک فاصله بزنید.
در HTML هر تعداد فاصله Space که بیش از یک فاصله باشد، یک فاصله به حساب میآید. یعنی به طور مثال اگر در بخش کد نویسی بین دو کلمه، ۱۰۰ فاصله وارد کنیم در مرورگر یک فاصله بیشتر نمایش داده نمیشود. برای درج فاصله های بیشتر از یکی، از عبارت استفاده کنید.