طراحی سایت شرکتی و سازمانی پرچم دار سازمان و شرکت شما برای آموزش مخاطبان خود در مورد اینکه شما چه کسی هستید ؟ چه کاری انجام می دهید ؟ و چرا این کار را انجام می دهید ؟ خدمت می کند.
سازمان ها و شرکت ها برای بالا بردن کیفیت خدمت رسانی نیاز به وب سایت ای منحصربه فرد برای سازمان و شرکت خود دارند با طراحی سایت سازمانی و شرکتی با افزایش خدمت رسانی سازمان و شرکت به افزایش متقاضیان شان منجر میشود .
همچنین به دلیل شیوع بیماری های واگیر دار در سراسر جهان وبه دلیل این که سازمان ها و شرکت ها مراجعه کنندگان زیادی دارند وجود فضای جدید کاری که به سازمان و شرکت به انجام امورکاری خود به صورت مجازی و ایجاد فضای ارتباطی جدید برای مراجعین وکاربران مجازی خود کمک میکند .
امروزه برای هر شرکت و برندی داشتن یک پایگاه اختصاصی آنلاین از از الزامات و ضروری ترین چیزها بشمار می رود، شما با طراحی سایت شرکتی و پیاده سازی آن به بهترین و حرفه ای ترین شکل در واقع یک دفتر کار حرفه ای را برای خود در دنیای بزرگ کسب و کار آنلاین ایجاد کرده اید.
در حال حاضر راه اندازی یک سایت شرکتی دیگر تنها برای کلاس کاری آن شرکت بکار نمی رود و نقش بسیار مهم و پررنگی در کسب و کارها را ایفا می کند. تجربه ثابت کرده که شرکت هایی که این مزیت بزرگ را برای کسب و کار خود نادیده می گیرند، فرصت های بسیار زیادی را در مقایسه با رقبای خو از دست می دهند.
امروزه اکثر افراد برای پیدا کردن کالا و خدمات مورد نیاز خود به صورت آنلاین و از طریق اینترنت اقدام به جستجو می کنند و مشتریان ازطریق وب سایت آن شرکت با محصولات و اطلاعات تماس آن شرکت آشنا می شوند. در نتیجه کاملا واضح است که شرکت هایی که از این مزیت برخوردار هستند نسبت به رقبای خود در فروش محصولات و خدمات ارائه شده پیشی می گیرند.
طراحی سایت شرکتی حرفه ای با گرافیک جذاب، مهم ترین نقش را در برندینگ برای شرکت ها می باشد و به عنوان یک ویترین زیبا برای معرفی آن شرکت در فضای آنلاین است. طراحی سایت شرکتی برای برندها همانند داشتن پایگاهی در اینترنت است که از طریق آن می توانند محصولات و خدماتشان را بدون واسطه به مشتریان خود معرفی کنند.
متاسفانه یا خوشبختانه شرکت های طراحی وب سایت هایی هستند که برای طراحی سایت شرکتی قیمت هایی به شما میدهند که کاملا دور از ذهن و تنها برای بدست آوردن مشتری و سود خود می باشند. معمولا این نوع وب سایت ها بعد از چند ماه بدلیل هیچ گونه کارایی و پشتیبانی بدون هیچ گونه نتیجه و سودی به حال خود رها می شوند و مدیر آن برند را از دنیای بزرگ کسب و کار آنلاین دلسرد می کند.
وقتی مدیر یک شرکت بابت طراحی سایت شرکت خود حاضر نیست هزینه کند و یک مبلغ متناسب با نرم بازار برای وب سایت شرکتش که هویت آن شرکت در فضای اینترنت که یک جایگاه بین المللی و جهانی محسوب میشود بپردازد، قطعا انتظار افزایش مشتریان یا حداقل سطح مشتریانش نیز در همان حد و اندازه خواهد بود.
طراحی سایت سازمانی و شرکتی چه امکاناتی را به سازمان ارائه میدهد ؟
انتقال اطلاعات به افراد امری ضروری است تا افراد مراجعه کننده به صورت دقیق و کامل درباره سوال هایی که برایشان ایجاد شده آگاهی پیدا کنند ، این اطلاع رسانی دارای دو مزیت برای سازمان است در وهله اول موجب افزایش سرعت کاری میشود و از سوالات بی رویه و تکراری افراد جلوگیری میکند در وهله دوم از مراجعه بی مورد و ازدحام آور افراد به سازمان اجتناب میکند .
اطلاع رسانی در وب سایت به صورت سازمان دهی شده و منظم قرار میگیرد یکی از این اطلاع رسانی ها درباره اخبار های سازمان و شرکت که سازمان میتواند اخبار خود را روزانه در سایت بار گذاری کند . رویداد های جدید و اتفاقات جدیدی که در سازمان به وجود آمده که معمولا سازمان و شرکت های دولتی اخبارشان به صورت چکیده در اخبار سراسری اطلاع رسانی میشود منتها بعد از این اطلاع رسانی سیل عظیمی از سوالات برای مخاطب به وجود میاورد که احساس نیاز به مراجعه حضوری میکند که اگر وب سایت سازمان اخبار خود را به صورت جامع بارگذاری کند پاسخگو تمام این سوالات خواهد بود .
وهمچنین سازمان غیرانتفاعی و شرکت های خصوصی که میتوانند از این امکان برای سازمان های خود برای پیشرویی در رقابت ها بهره ببرند .
شرکت ها و سازمان هایی که باارائه محصولات خود خدمت ارائه میکنند ، برای نمایش محصولات خود به وب سایتی نیاز دارند که علاوه بر نمایش محصول به معرفی و تبلیغ آن به صورت کاملا حرفه ای و با توجه به ترفند های بازاریابی برسد .
هر وب سایتی که ایجاد میشه برای بالا برند کیفیت سایت خود نیاز به تیمی فعال و پویا برای پشتیانی آن با علم و آگاهی کامل دارد .
طراحی سایت به شرکت و سازمان این امکان را میدهد که به صورت انلاین به خرید و فروش محصولات خود بپردازند که این امر قدرت خرید و فروش شرکت را بالا برده و در نتیجه باعث افزایش درآمد شرکت میشود .
معرفی اهداف شرکت هدفمند بودن و آگاه کردن افراد از این اهداف باعث افزایش اعتماد اشخاص و ارباب رجوع به شرکت میشود .
پیشینه و رزومه و تاریخچه شرکت هرکاربری برای انتخاب ازبین شرکت های مشابه موجود همواره به دنبال شرکتی میرود که شناخته شده باشد و بتواند اطلاعاتی راجب آن دریافت کند که عملا برای کسب اطلاعات به گوگل مراجعه میکند چه چیزی از این بهتر که شرکت شما از اولین شرکت هایی باشد که کاربر بعد از جست و جو به آن برسد و نیاز خود را با خدمات موجود در وب سایت شرکت شما رفع کند .
از دیگر خدماتی که طراحی سایت شرکتی میدهد میتوان به مواردی از جمله : سایت میتواند به صورت دوزبان طراحی شود که این امر به شرکت های بازرگانی و صنعتی که در کار واردات و صادرات هستند مورد نیاز است ، نظرات کاربران ، صفحه تماس باما و …. با توجه به سلیقه شخصی و متمایزشرکت حتی امکاناتی منحصربه فرد میتوان ایجاد کرد .
ما معتقدیم که سایت های طراحی شده توسط تیم ما باید نسبت به سایرین متمایز بوده و برگ برنده داشته باشد. به همین منظور اقدام به ارائه خدمات و امکانات ویژه ای کرده ایم. این امکانات می تواند کمک شایانی به پیشی گرفتن شما نسبت به دیگر رقبایتان کند.
خرید اینترنتی (به انگلیسی: Online Shopping) نوعی خرید است که از طریق طراحی سایت فروشگاهی انجام میشود. از مهمترین و بزرگ‌ترین سایت‌های خرید اینترنتی میتوان به سایت‌های ebay و amazon اشاره کرد.
به دلیل موقع کرونا و شرایط حیاتی که با آن مقابله میکنیم فروشگاه های مواد غذایی که سیستم فروش به صورت انلاین را دارا بودن با وجود شرایط قرنطینگی رونق خود را از دست نداده بلکه رونق فروش پیدا کردند وروند افزایشی در کسب سود دهی پیدا کردند .
این قضییه نمایان گر کمبود یه سایت با طراحی درست وکامل به سرعت هرچه تمام تراست در واقع هرچه در روند اقدام آن سرعت بخشیم به نفع تیم فروشگاهی خود اقدام کرده ودربازار رقابتی خود را به بهترین ها تبدیل می کنیم.
اولین بار در سال ۱۹۹۱ تیم برنرز لی تجارت الکترونیک را پایه‌گذاری کرد و در سال ۱۹۹۴ که بانکداری آنلاین ایجاد شد، شرکت پیتزا هات اولین فروش اینترنتی خود را آغاز کرد. در همان سال شرکت نت اسکیپ ارتباط امنیت لایه انتقال (SSL) را ابداع و ایجاد کرد و خرید اینترنتی به وسیله این پروتوکل ایجاد شد. همچنین در همان سال کمپانی آلمانی اینترشاپ(Intershop) اولین سیستم فروش اینترنتی خود را ایجاد کرد. ۱۹۹۵ شرکت آمازون. کام و سال ۱۹۹۶ شرکت ئی بی نیز فعالیت‌های خود را شروع کردند.
طراحی سایت فروشگاهی در واقع راحت ترین و کم هزینه ترین راه برای خرید بی واسطه برای مشتریان است. در این وب سایت ها به دلیل نداشتن محدودیت جا مدیران آن کسب و کار می توانند به راحتی تعداد بی شماری از محصولات خود را با عکس های با کیفیت و حرفه ای و گرافیک زیبا به بهترین نحو محصولات خود را به نمایش بگذارند.
همیشه هنگام خرید وقتی که شما وارد یک فروشگاه می شوید مهم ترین مسئله نحوه استقبال فروشنده از شما می باشد که این نکته درباره خرید شما از یک سایت فروشگاهی هم صدق می کند و مهم ترین نقش را در تصمیم گیری شما در خرید از آن وب سایت ایفا می کند.
سایتی که بر مبنای روانشناسی رنگ و چیدمان حرفه ای عناصر بصری آن وب سایت و محصولات آن و بر اساس استراتژی های دقیق خرید و امنیت کاربران در پرداخت آنلاین ایجاد شده باشد قطعا اعتماد و نظر مشتری را به خود جلب می کند.
مهم ترین صفحه یک وب سایت فروشگاهی صفحه اصلی آن سایت است که در واقع حکم ویترین آن فروشگاه را دارد. در این صفحه بایستی جشنواره های فروش، پیشنهادات ویژه، تخفیف ها و… به صورت کاملا استاندارد و زیبا از نظر دیداری ارائه شوند.
افراد به دلیل مشغله های روزمره خود و کمبود وقت و خستگی که به سبب دوندگی های شبانه روزی خود برای تامین معاش زندگی و خانواده دارند همواره از امکاناتی که به صورت انلاین ومجازی وجود دارد مثل؛ فروشگاه های مجازی و امکاناتی که از راه دور امکان پذیر است ونیاز به مراجعه حضوری ندارد استقبال میکنند و طرفدار آن هستند.
سایت های فروشگاه با متنوع بودن اجناس وکالا های خود به مراجعه کننده این امکان رامیدهند که بتواند از متنوع ترین اجناس کالاهای مورد نیاز خود را انتخاب کند .
پشتیبانی از سایت : پشتیبانی از سایت به صورت تمام وقت و بیست وچهارساعته و ارائه خدمت به مراجعین در هر تایمی که آنها بخواهند.
هر یک ازکاربران میتوانند در سایت فروشگاهی شما عضو شوند و از خدماتی که سایت به آنها ارائه میکند بهره مند شوند این خدمات شامل :
مقایسه محصولات مشابه از نظر کیفیت : به دلیل وجود تنوع محصولات مشابه و ایجاد برند های متفاوت از یک نوع محصول مقایسه محصولات به انتخاب کاربر کمک میکند .
نمودارقیمت محصولات : دراین نموداربه سیر افزایشی و کاهشی محصول میپردازیم .
اطلاع رسانی به ایمیل کاربر : درصورت اتمام موجودی از محصول مورد نیاز کاربر ، کاربر میتواند درخواست اطلاع رسانی کرده و فروشگاه در صورت شارژ موجودی به کاربر از طریق ایمیل و یا پیامک اطلاع رسانی کند .
نظرات کاربران : کاربران میتوانند از نظرات قبلی کسانی که از محصول استفاده کرده و از آن رضایت و یا نارضایتی داشتند استفاده کنند و از خریداری محصول اطمینان خاطر پیدا کرده وبا خیالی آسوده آن را تهیه کنند .
سازمان دهی محصولات : سازمان دهی محصولات از نظرمحصولاتی که فروش بیشتری داشتند ، محصولاتی که بازدید کننده بیشتری دارند ، محصولاتی که محبوبیت بالایی بین کاربران دارا هستند و….
گالری تصاویر از محصولات : عکاس هایی از محصولات که درسایت بارگذاری میشود برای شناخت محصول برای افرادی که برای اولین بار از آن میخواند استفاده کنند و برای سهولت درجست وجو و…
مشخصات محصول : مشخصات محصول شامل ؛ قیمت محصول ، فواید محصولاتی که غذایی هستند ، مارک وبرند محصول ، سایز محصول
کاربر با انتخاب موارد مورد نیاز خود در این سبد که به صورت خودکار جمع اقلام را برای کاربر محاسبه میکند و در اختیار وی میگذارد میتواند اقلام مورد نیاز خود را گزینش کند .
کاربر برای پرداخت اقلام خریداری شده خود میتواند به صورت الکترونیکی بااستفاده از رمز پویا خود مبلغ مربوطه را برای فروشگاه پرداخت کند .
کدهای تخفیف برای مشتریانی که به صورت ثابت از فروشگاه های انلاین استفاده میکنند و برای محصولاتی که موجودی آن ها به حداقل رسیده .
کاربران درصورت نیاز میتوانند از این امکان استفاده کرده وبا فروشگاه ارتباط نزدیک تری برقرار کنند .
کنترل موجودی محصولات و درصورت اتمام موجودی برای شارژ دوباره محصول اقدام میکنند .
ما تمامی امکاناتی که برای ایجاد یک طراحی سایت در کرج و طراحی سایت فروشگاهی حرفه ای مانند digikala به آن نیاز دارید به بهترین نحو برای طراحی سایت فروشگاهی شما پیاده سازی می کنیم. امکاناتی مانند :
با پیدایش شبکه های اجتماعی این باور به وجود آمده که نیاز به طراحی سایت شخصی کاهش پیدا کرده است. گرچه شبکه های اجتماعی می توانند یک رسانه آنلاین مناسبی برای معرفی افراد باشند، اما هیچ گاه کارایی یک وب سایت شخصی برای اطلاع رسانی متمرکز با دامنه اختصاصی افراد را ندارد.
در شبکه های اجتماعی چیزهایی که از لحاظ دیداری بسیار مهم هستند مانند قالب و گرافیگ آن به صورت غیر فابل تغییر و ثابت هستند و گرافیک و قالب مهم ترین گزینه در طراحی سایت شخصی بشمار می رود. گرافیک و نوع ساختار مهم ترین نکته برای معرفی برای معرفی افراد و زمینه کاری آن ها بشمار می رود.
در حال حاضر افراد بیشتر دیداری هستند، بنابراین بیشتر ترجیح می دهند هر چیزی را ببینند به جای اینکه بشنوند. برای معرفی تخصص و سوابق کاری رزومه شما ممکن است بگوید که شما چه تخصص و چه توانایی هایی را دارید، اما با سایت شخصی خود، شما می توانید کسی را به صورت مستقیم به وبلاگ ببرید و نشان دهد که چه چیزهایی کار شما را از از دیگران متمایز می کند. با نمونه ها، تصاویر پروژه هایی که در آن ها کار کرده اید، مقالاتی که نوشته اید، عکس های سمینار هایی که در آن ها شرکت کرده ایدو… در سایت شخصی شما می تواند بهترین و تکمیل ترین معرف شما و هویت آنلاین شما عمل کند.
طراحی سایت شخصی برای هنرمندان، عکاس ها، نویسندگان، مدیران، افراد جویای کار، استادان دانشگاه، وکلا، محققان،… برای معرفی فعالیت ها و آثار شخصی، رزومه و موارد دیگری که افراد سعی در نشان دادن آن ها به افراد دیگر دارند لازم است.
اگر شما در جستجوی شغل هستید و احساس نا امیدی می کنید؟ برای هر فرصت شغلی افراد بسیاری همچون شما برای آن فرصت شغلی با شما رقابت می کنند پس شما باید با یک روش خود را از دیگران متمایز کنید. بهترین راه این است که تصویر آنلاین خود را بسازید تا بتوانید راه موفقیت خود را در عصر اینترنت فراهم کنید. سلاح مخفی جدید شما ایجاد یک وب سایت شخصی است.
برای هر هنرمندی مهم ترین هدفی که دنبال می کند ارائه هنر او به بهترین شکل به دیگران است. بهترین و کم هزینه ترین راه برای ارائه آثار هنری قرار دادن آن ها به صورت صوت، تصویر و نوشتار درون وب سایت شخصی آن هنرمند می باشد، که نقش یک گالری بدون محدودیت فضا را برای ارائه آثار او ایفا می کند.
برای مدیران بهترین روشی که آنها را از دیگر مدیران متمایز می کند داشتن یک سایت شخصی و در دسترس قرار دادن نظرات آن ها درباره مسائل روز و سخنرانی ها و سمینارهایی که در رابطه با شغل آنها انجام داده است یا ایجاد راه های دسترسی متنوع و سریع توسط فرم های تماس درون سایت و یا موارد دیگر است.
تقریبا تمام افراد در هر شغلی که هستند برای پیشی گرفتن و ایجاد برندینگ شخصی به یک سایت شخصی احتیاج دارند. وب سایت شخصی بیل گیتس
با انواع مدل های طراحی سایت در کرج با تیم حرفه ای و مجرب دیزاینستان آماده ارائه خدمات به مشتریان عزیز هستیم.
طراحی سایت ریسپانسیو یک رویکرد است که طراح، یک وب سایت را ایجاد می کند که بسته به نوع دستگاه به خود را تغییر می دهد وعناصر سایت با توجه به اندازه صفحه نمایش به خوبی نمایش داده می شوند. این می تواند مانیتور رایانه ای بزرگ، لپ تاپ یا دستگاه هایی با صفحه نمایش های کوچک مانند تلفن های هوشمند و تبلت ها باشد.
این نوع طراحی وب سایت نمایش عناصر مانند طرح، اندازه متن، محتوا، ناوبری، و تصاویر به صورت خودکار تنظیم می شوند تا به وسیله ای که کاربر ترجیح می دهد با آن وب سایت را ببیند مناسب باشد.
چند بار یک صفحه وب را دیده اید که فقط روی دسکتات لپ تاپ خوب بوده، اما وقتی روی گوشی تلفن همراه خود آن را دیدید عناصر آن را بهم ریخته و نا معلوم مشاهده کردید؟ اگر وبسایت شما برای هر پلتفرم و دستگاه – تلفن همراه یا غیره – بهینه سازی نشده باشد، شما در معرض خطر، خطا قرار دادن یک تجربه متداول در اینترنت و از دست دادن یک مشتری و ناامید کردن آن هستید.
طراحی سایت ریسپانسیو به شما توانایی طراحی صفحات وب را می دهد که به راحتی در همه دستگاه ها سازگار است. این به این معنی است که وب سایت شما با موفقیت در تمامی سیستم عاملها، مشتری شما را درگیر می کند. طراحی سایت ریسپانسیو، طرح بندی، اندازه متن، محتوا و ابزارهای ناوبری را برای تطبیق با اندازه و قابلیت های مختلف صفحه نمایش، تنظیم می کند. قبل از اینکه شما حتی منتشر کنید، می توانید عملکرد پیش نمایش و بهینه سازی در انواع دستگاه ها را پیش بینی کنید.
هدف طراحی سایت ریسپانسیو، داشتن یک سایت، اما با عناصر مختلف است که در هنگام مشاهده بر روی دستگاه های اندازه های مختلف متفاوت است.
بیایید یک وب سایت سنتی “استاتیک” را در نظر بگیریم. برای مثال، هنگام مشاهده روی رایانه رومیزی، وبسایت ممکن است سه ستون را نشان دهد. اما زمانی که شما همان طرح را در یک تبلت کوچکتر مشاهده میکنید، ممکن است شما را مجبور کند به صورت افقی آن را تماشا کنید، چیزی که کاربران دوست ندارند. یا عناصر ممکن است از نظر پنهان یا خراب شده باشند.
روی یک صفحه نمایش کوچک گوشی هوشمند، وب سایت ها حتی برای دیدن چالش بیشتری دارند. تصاویر بزرگ ممکن است طرح را خراب کنند. اگر گرافیک سنگین باشد، ممکن است سایت ها برای تلفن های هوشمند دیر بارگزاریی شوند.
با این حال، اگر یک سایت از طراحی سایت در کرج ریسپانسیو استفاده کند، نسخه تبلت ممکن است به صورت خودکار تنظیم شود تا فقط دو ستون نمایش داده شود. به این ترتیب، محتوای قابل خواندن و حرکت آسان است. در یک گوشی هوشمند، ممکن است محتوا به عنوان یک ستون تنها ظاهر شود، شاید به صورت عمودی انباشته شود. تصاویر به جای تغییر ساختار یا قطع شدن عکس، تغییر اندازه می دهند.
نکته این است: با طراحی سایت ریسپانسیو، وب سایت به طور خودکار براساس دستگاهی که بیننده آن را می بیند تنظیم می شود.
سایت های ریسپانسیو از طرح بندی fluid استفاده می کنند. اگر سه ستون دارید و دقیقا نمی دانید که چقدر باید برای هر کدام از آنها فضا اختصاص دهید، باید با توجه به ستون های دیگر تصمیم بگیرید که چقدر گسترده باشد. مثلا ستون ۱ باید نیمی از صفحه را در نظر بگیرد، ستون ۲ باید ۳۰٪ و ستون ۳ باید ۲۰٪ باشد.
ماوس در مقابل لمس: طراحی برای دستگاه های تلفن همراه نیز مسئله ماوس و لمس را مطرح می کند. بر روی کامپیوترهای رومیزی، کاربر به طور معمول دارای یک موس برای حرکت و انتخاب موارد است. در تلفن هوشمند یا تبلت ها، کاربر عمدتا از انگشتان دست و لمس روی صفحه استفاده می کند. ممکن است با یک موس یک گزینه را با ماوس به راحتی انتخاب کنید ولی ممکن است با انگشت روی یک نقطه کوچک روی یک صفحه این مسئله به راحتی اتفاق نیفتد. برای همین طراح وب باید “لمس” را در نظر بگیرد.
گرافیک و سرعت دانلود: همچنین موضوع گرافیک، تبلیغات و سرعت دانلود وجود دارد. در دستگاه های تلفن همراه، ممکن است عاقلانه باشد که گرافیک کمتر از نمایشگرهای دسکتاپ را نمایش دهد به طوری که یک سایت برای بارگیری بر روی یک گوشی هوشمند، کند شود. ممکن است نیاز به تبلیغات بزرگتر بجای تبلیغات کوچکتر باشد.
برنامه ها و نسخه های تلفن همراه: در گذشته، ممکن است درباره ایجاد یک برنامه برای وب سایت خود فکر کرده باشید. مثلا یک برنامه IOS یا یک برنامه Android. یا شما یک نسخه تلفن همراه به طور خاص برای BlackBerry داشته باشید. امروزه با بسیاری از دستگاه های مختلف، ساخت برنامه ها و نسخه های مختلف برای هر دستگاه و پلتفرم سخت تر شده است.
مردم بیشتر از دستگاه های تلفن همراه استفاده می کنند. مطالعات اخیر نشان داده که بیش از ۶۰ درصد افراد برای مشاهده وب سایت از گوشی و یا تبلت استفاده می کنند.
ترافیک خود را بررسی کنید و ممکن است فقط از تعداد بازدیدکنندگان از طریق دستگاههای تلفن همراه نسبت به کامپیوترها در وبسایت خود شوکه شوید(در Google Analytics شما “مخاطبان” را در سمت چپ، سپس “موبایل” را انتخاب کنید تا میزان ترافیک را از دستگاه های تلفن همراه مشاهده کنید.)
خصوصیات border در CSS به شما اجازه می دهد که style، اندازه و رنگ مرز یک عنصر را مشخص کنید.
نکته : دقت کنید که هیچ کدام از خاصیت های Border تا زمانی که خاصیت Border-style را مقداردهی نکرده باشید، تاثیری نخواهند داشت.
مقدار این خصوصیت border مشخص می کند چه نوع مرزی برای نمایش شکل آن بکار برده شود، که شامل مقادیر زیر می باشند:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
A inset border.
A outset border.
A none border.
با استفاده از این خاصیت می توانید ضخامت خط مرزی را تعیین کنید. عرض خط مرزی را می توان به عنوان یک اندازه مشخص (توسط px، pt، cm، em، و غیره) یا با استفاده از یکی از سه مقدار از پیش تعیین شده: thin ، medium و thick تنظیم کرد. خاصیت border-width می تواند از یک تا چهار مقدار (برای مرز بالا(top)، مرز راست(right)، مرز پایین(bottom) و مرز چپ(left)) داشته باشد.
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
p.five {
border-style: double;
border-width: 15px;
}
p.six {
border-style: double;
border-width: thick;
}
p.seven {
border-style: solid;
border-width: 2px 10px 4px 20px;
}Some text.
Some text.
Some text.
Some text.
Some text.
Some text.
Some text.
خاصیت border-color برای تنظیم و مقداردهی رنگ خط مرزی مورد استفاده قرار می گیرد، که می توان توسط استفاده از نام رنگ (مثلا red)، تعیین مقدار RGB (مانند rgb(255,0,0) ) و یا توسط مقدار دهی HEX (مانند #ff0000) آن را تنظیم کرد.
خاصیت border-color می تواند از یک تا چهار ارزش (برای مرز بالا(top)، مرز راست(right)، مرز پایین(bottom) و مرز چپ(left)) داشته باشد.
p.one {
border-style: solid;
border-width:3px;
border-color: red;
}
p.two {
border-style: solid;
border-width:3px;
border-color: green;
}
p.three {
border-style: solid;
border-width:3px;
border-color: red green blue yellow;
} A solid red border
A solid green border
A solid multicolor border
از مثال های بالا دیده شده است که ممکن است مرز دیگری برای هر طرف مشخص شود(برای هر طرف یک مرزی متفاوت داشت). در CSS، برای مشخص کردن هر یک از مرزها (بالا، راست، پایین و سمت چپ) نیز ویژگی هایی وجود دارد:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}۲ different border styles.
خاصیت border-style می تواند از یک تا چهار مقدار را داشته باشد:
border-style: dotted solid double dashed;border-style: dotted solid double;border-style: dotted solid;border-style: dotted;هر چهار حاشیه با خطی معمولی تعریف می شوند.
همانطور که می توانید از مثال های بالا مشاهده کنید، در هنگام برخورد با مرزها، ویژگی های زیادی وجود دارد. به منظور کاهش اندازه ی کد (مختصر نویسی یا بهینه نوشتن کد)، می توان تمامی خاصیت های جداگانه را در یک خاصیت واحد تعریف کرد. این خاصیت را مختصر نویسی کد یا همان short-hand property می نامند.
p {
border: 5px solid red;
}شما همچنین می توانید تمام خصوصیات مرزی فرد را فقط برای یک طرف مشخص کنید:
p {
border-left: 6px solid red;
}ویژگی border-radius برای اضافه کردن مرزهای گرد به یک عنصر استفاده می شود:
p {
border: 2px solid red;
}
p {
border: 2px solid red;
border-radius: 5px;
}
p {
border: 2px solid red;
border-radius: 8px;
}
p {
border: 2px solid red;
border-radius: 12px;
}Normal border
Round border
Rounder border
Roundest border
خصوصیت Color برای تنظیم رنگ متن استفاده می شود. رنگ توسط:
برای مشاهده لیست کامل مقادیر رنگ ممکن است به مقادیر CSS Color مراجعه کنید.
<h1 style="color: blue;">This is heading 1</h1>
<p style="color: green;">This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.
خصوصیت text-align برای تنظیم تراز افقی یک متن استفاده می شود.
برای خصوصیت text-align می توان چهار مقدار را تعریف کرد: left , right , center , justify.
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>خروجی :
هنگامی که مشخصه text-align بر روی “justify” تنظیم شده است، هر خط کشیده می شود به طوری که هر خط برابر با عرض و حاشیه چپ و راست شود (مانند مجلات و روزنامه ها) .
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>خروجی :
text-decoration برای تنظیم یا حذف دکوراسیون از متن استفاده می شود.
مقدار ;text-decoration: none اغلب برای حذف خط از زیر لینک استفاده می شود.
مقادیر دیگر text-decoration برای تزئین متن مورد استفاده قرار می گیرند.
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>خروجی :
نکته: توصیه نمی شود که از مقدار underline برای متنی که یک لینک نیست استفاده کنید، زیرا اغلب خواننده را گمراه می کند.
خصوصیت text-transform برای مشخص کردن حروف بزرگ و کوچک در یک متن استفاده می شود، که می تواند سه مقدار uppercase (تمام حروف به صورت بزرگ)، lowercase (تمام حروف به صورت کوچک)، capitalize (حرف اول کلمات به صورت بزرگ و مابقی کلمات به صورت کوچک)
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>خروجی :
This is some text.
This is some text.
This is some text.
خصوصیت text-indent برای مشخص کردن مقدار تورفتگی خط اول متن استفاده می شود:
p {
text-indent: 50px;
}<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>خروجی :
In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since. ‘Whenever you feel like criticizing anyone,’ he told me, ‘just remember that all the people in this world haven’t had the advantages that you’ve had.’
خصوصیت letter-spacing برای تعیین فضای بین کاراکترهای یک متن استفاده می شود.
مثال زیر نشان می دهد که چگونه فضای بین کاراکترها را می توان افزایش یا کاهش داد:
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}<h1>This is heading 1</h1>
<h2>This is heading 2</h2>خروجی :
خصوصیت line-height برای تعیین فاصله ی بین خطوط استفاده می شود.
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>خروجی :
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
خصوصیت direction برای تغییر مسیر متن یک عنصر مورد استفاده قرار می گیرد.
p.ex1 {
direction: rtl;
}<p>This is the default text direction.</p>
<p class="ex1"><bdo dir="rtl">This is right-to-left text direction.</bdo></p>خروجی :
This is the default text direction.
This is right-to-left text direction.
خصوصیت word-spacing برای تعیین فضای بین کلمات در یک متن استفاده می شود.
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}<h1>This is heading 1</h1>
<h2>This is heading 2</h2>خروجی :
خصوصیت text-shadow سایه را به متن اضافه می کند.
مثال زیر موقعیت سایه افقی (۳ پیکسل)، موقعیت سایه عمودی (۲ پیکسل) و رنگ سایه (قرمز) را مشخص می کند:
h1 {
text-shadow: 3px 2px red;
}<h1>Text-shadow effect</h1>خروجی :
طراحی سایت پزشکی یکی از امکانات جدید دنیا امروزی است،که مجموعه دیزاینستان با روندی کاملاحرفه ای وباالگو های برتر جهانی آن را به بهترین وجه ممکن ارائه میدهد طراحان وب این مجموعه باتمام وجود بر ارائه بهترین وب سایت تلاش میکنند طراحی سایت پزشکی یکی از نیاز های درحال حاظر است.
بخاطر گسترش مریضی در جهان ونیاز به خدمات روزافزون پزشکی با این سایت درهرتایمی میتوانیم راجب سلامت خود اطمینان پیدا کرده یا متوجه مشکلی که هست بشیم و به رفع آن بپردازیم طراحی سایت پزشکی فقط مختص به بیماران وپزشک نیست بیشتر ادم ها همواره نگران سلامتی خودهستند که اگر یک پزشک برروند عمل بدنی آنها آگاه باشد این نگرانی ازشخص گرفته میشه و از بروز خیلی از بیماری ها که اگر ما آگاهی کافی از آن میداشتیم ممکن بود هیچ وقت دچارآن نشیم جلوگیری کنیم مثل قند و…
امروزه افراد برای پیدا کردن اطلاعات درباره بیماری خود و روش های درمان و بهترین پزشکان متخصص در زمینه آن بیماری بدون شک قبل از هر چیز به اینترنت رجوع میکنند. در حال حاضر افراد برای پیدا کردن یک پزشک متخصص خوب به وب سایت های آن ها مراجعه می کند و با دیدن رزومه آن پزشک و نظرات بیماران دیگره درباره آن پزشک و عکس هایی که از بیماران و مطب او در وب سایت موجود است پزشک و متخصص مورد نظر خود را انتخاب می کنند.
در گذشته شیوه جذب بیماران با امروز متفاوت بود، در سال های پیش پزشکان از طریق تبلیغات محیطی و چاپی ومعرفی افراد و استخدام بازاریاب و هزینه های بسیار بالا برای راه های غیر اصولی به جذب بیماران می پرداختند.
بهترین و کم هزینه ترین راه برای برند سازی شخصی یک پزشک قطعا طراحی سایت پزشکی برای او می باشد و این کار به راحتی ازطریق کلمات کلیدی قرار داده شده در وب سایت مانند: بهترین متخصص زیبایی، بهترین جراح قلب،… امکان پذیر می باشد.
بنابراین فعالان حوزه درمانی اعم از پزشکان و مراکز و شرکت‌های خدمات درمانی برای بهتر دیده شدن و معرفی خدمات و تخصص و حوزه فعالیتشان بدون شک باید حضوری فعال در دنیای اینترنت داشته باشند. طراحی سایت پزشکی بهترین راه برای ارتباط سریع و مستقیم بین بیمار و پزشک می باشد و در آگاهی آنها از خدمات پزشکی آن مرکز درمانی بهترین نقش را ایفا می کند.
ازاولین و مهمترین آن کمک به پزشک مورد نظر هستش به اصطلاح میتواند به عنوان دستیارپزشک باشد و راندمان کاری پزشک را بالا ببرد یک پزشک شاید در روز بتواندحداکثر ۱۰۰ الی ۲۰۰ بیمار را ویزیت کند که حداقل نصف آنها نیاز به ویزیت حضوری نداشته و اینجا است که سایت پزشکی به کمک شما می آید.
یکی دیگر از مزایای طراحی سایت در کرج پزشکی ، بذارید برایتان مثالی در این باب بزنم خیلی وقتها پیش میاید که وقتی از مطب پزشک برمیگردیم راجب نحوه چگونگی مصرف دارو دچار تردید میشید اینکه بخوایم یه رابطه نزدیکی بین پزشک و بیمار ایجادکنیم این سایت را برای رفاه حال پزشکان و بیماران تعبیه کردیم.
ازمزایای این طرح برای پزشکان تغذییه و روانپزشکان است که به نسبت از مراجعه کنندگان بیشتری دارند و بیشترشان با ویزیت به صورت آنلاین به قول معروف کارشان راه میوفتد.
پزشکان میتوانند علاوه بر بالا بردن راندمان کاری خود سرانه درآمد خود را بالا ببرند و افزایشش بدهند چون ممکن است در یک تایم مشترک پزشک یک ویزیت حضوری و چندین ویزیت انلاین داشته باشد شخص ازاطلاعات مربوط در سایت استفاده کرد و احیانا اگر نیاز به ویزیت حضوری بود میتواند به صورت انلاین نوبت گرفته و به صورت حضوری اقدام کند.
بارویکرد این امکان جدیددیگر مشکلاتی از قبیل طولانی بودن راه و زمانی که صرف رفت وآمد میکنیم را به حداقل برسانیم وهمواراش کنیم چه بسیارند اشخاصی که در مناطقی دور از مرکز کشور هستند و به علت سختی راه نمیتوانند از پزشکان ماهری که در کلان شهرها هستند استفاده کنند و حتی بالعکس چه بسیارند پزشکان ماهری که در شهرهای کوچک زندگی میکنند این سایت شمارا به تمام بیمارانی که به ترفند ماهرانه شما برای تیمار مریضی خود دارند درتمام کشور مرتبط میکند این ارتباط جهشی است نو در جامعه کنونی در جهت سهولت هرچه بیشتر وراحتی بیمار و پزشک است.
تگ فرم برای ایجاد قابلیت های تعاملی (دکمه، فیلدهای متنی، امکان آپلود فایل و…) و برای دریافت ورودی از سمت کاربر در صفحات html استفاده می شود. تگ form به تنهایی کاربردی ندارد و با خصوصیاتی مانند action و تگ های input داخل آن بکار برده می شود.
از آنجایی که اطلاعات یک فرم html پس از تکمیل شدن باید به یک فایل در سرور ارسال شود، خاصیت action برای تعیین آدرس فایل مقصد مورد استفاده قرار می گیرد.
خاصیت method شیوه ارسال اطلاعات را مشخص می کند. که به یکی از دو شکل post یا get (حالت پیش فرض) می باشد، در متد post، اطلاعات به صورت پنهانی در پس زمینه به سرور ارسال می شوند اما در متد get، اطلاعات در نوار آدرس مرورگر قابل مشاهده هستند و به صورت پارامترهایی به همراه مقادیر به سرور ارسال می شوند. متد post برای ارسال مقادیر طولانی، اطلاعات حساس کاربری، آپلود فایل و… کاربرد دارد و متد get بیشتر برای ارسال اطلاعات کوتاه ، جستجو و اطلاعاتی با حساسیت کمتر به کار می رود.
همان طور که گفته شد، تگ form به تنهایی قابلیت خاصی در اختیار کاربران قرار نمی دهد و با تگ های input ، select ،text area و .. که زیر مجموعه های این تگ می باشند کارایی پیدا می کند.
این تگ با تنظیم type های مختلف برای آن می توان انواع مختلفی از امکانات از قبیل فیلد متنی (text)، فیلد رمز عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و … را ایجاد کرد.
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">بیشترین و رایج ترین نوع مورد استفاده نوع trxt می باشد که یک فیلد تک خطی است که کاربر می تواند داخل آن اطلاعات وارد کند.
<form action="users/get.php" method="get">
<input type="text" name="firstname">
</form>از این نوع برای ایجاد فیلدهای رمزعبوراستفاده می شود. مقادیری که در این فیلد نمایش داده میشوند به صورت ستاره یا دایره نشان داده می شوند.
<form action="users/get.php" method="get">
<input type="password" name="password" />
</form>برای ایجاد دکمه های ساده به کار می رود، یک دکمه معمولی باید به همراه دستورات جاوا اسکریپت تکمیل شود در غیر این صورت به خودی خود کاربردی ندارد.
<form action="users/get.php" method="get">
<input type="button" value="دکمه" onclick="alert('دکمه در تگ فرم باید با دستورات جاوا اسکریپت تکمیل شود')" />
</form>از این نوع برای ایجاد دکمه ارسال اطلاعات فرم استفاده می شود.
<form action="users/get.php" method="get">
<input type="submit" value="ارسال" />
</form>این نوع برای ایجاد یک دکمه که با کلیک بر روی آن اطلاعات فیلدها به حالت پیش فرض خود برمی گردد بکار برده می شود.
<form action="users/get.php" method="get">
<input type="reset" value="نوشتن از نو" />
</form>از این نوع به همراه تگ input برای ایجاد چک باکس بکار برده می شود.
<form action="users/get.php" method="get">
<input type="checkbox" checked="checked" name="choose" value="1"/>
</form>برای آپلود یک فایل به سرور استفاده می شود.
<form action="users/get.php" method="get" enctype="multipart/form-data">
<input type="file" name="file-name" accept="image/gif,image/jpg,application/pdf" />
</form>برای اینکه این نوع به درستی عمل کند، باید خاصیت enctype را با مقادیر multipart/form-data به تگ form اضافه کنیم.
نکته: پارامتر اختیاری accept مشخص کننده فرمت های مجازی است که از طریق فیلد، قابل آپلود هستند، این فرمت ها بر اساس استاندارد MIME یا (Multipurpose Internet Mail Extensions) مشخص می شوند. لیست کامل از فرمت ها و معادل آنها در استاندارد MIME
برای ارسال فیلدهای مخفی به سمت سرور بکار برده می شود.
<form action="users/get.php" method="get">
<input type="hidden" name="hidden-name" value="13" />
</form>از این نوع برای ساخت دکمه های رادیویی در فرم های وب استفاده می شود.
<form action="users/get.php" method="get">
<input type="radio" name="radio-box" value="1" />
</form>از این تگ برای ایجاد یک منوی کشویی که دارای چند گزینه باشد در صفحات html استفاده می شود. برای ساختن گزینه های انتخابی از تگ زیرمجموعه آن یعنی option استفاده می شود.
<form action="users/get.php" method="get">
<select name="select-option">
<option value="0" selected="selected">انتخاب کنید</option>
<option value="1">html</option>
<option value="2">css</option>
<option value="3">java script</option>
</select>
</form>در حالت عادی در هر تگ select کاربران مجاز به ارسال تنها یک مقدار می باشند، برای اجازه ارسال چندین مقداردر این تگ، باید خاصیت multiple را به آن اضافه کنیم.
<form action="users/get.php" method="get">
<select name="select-option[]" multiple="multiple">
<option value="0" selected="selected">انتخاب کنید</option>
<option value="1">html</option>
<option value="2">css</option>
<option value="3">java script</option>
</select>
</form>از این تگ جهت ایجاد فیلدهای متنی طولانی بکار برده می شود، به عنوان مثال برای وارد کردن یادداشت، ارسال مطلب، نمایش یک متن کپی رایت و… کاربرد دارد.
<form action="users/get.php" method="get">
<textarea name="your-text" cols="50" rows="8">
</textarea>
</form>از خاصیت cols برای تعیین عرض(اندازه ستون ها) و از خاصیت rows برای تعیین ارتفاع(تعداد سطرها) استفاده می شود.
برای ایجاد برچسب های استاندارد در فرم ها از تگی با نام label استفاده می شود، label در واقع نقش معرف و برچسب را برای تگ های فرم ایفا می کند.
<form action="users/get.php" method="get">
<label for="your-text">یادداشت:</label>
<textarea name="your-text" cols="50" rows="8" id="your-text"
</textarea>
</form>برای هر فیلدی که قصد تعریف برچسب داریم، یک id تعریف کرده و با خاصیت for برچسب را به آن نسبت می دهیم.
خصوصیات background در css: توسط CSS میتوانید برای عناصر در صفحات وب پس زمینه قرار دهید. این پس زمینه ها می توانند یک تصویر و یا یک رنگ مورد نظر شما باشند. خواص پس زمینه CSS مورد استفاده برای تعریف جلوه های پس زمینه:
با استفاده از این دستور می توانید رنگ پس زمینه عناصر مورد نظر خود را تغییر دهید. به طور مثال پس زمینه جعبه متن، یک پاراگراف، div و یا هر عنصر دیگری را با می توانید با رنگ دلخواه پر کنید. به طور مثال با استفاده از دستور زیر می توانید رنگ پس زمینه کل صفحه را تغییر دهید:
body {
background-color: blue;
}به طور مثال شما می توانید رنگ مثلا آبی را به سه روش با کدهای مختلف مورد استفاده قرار دهید:
body {
background-color: blue;
}
body {
background-color: #0000ff;
}
body {
background-color: rgb(0, 0, 255);
}در مثال زیر عناصر h1، p و div دارای پس زمینه هایی با رنگ های متفاوت هستند:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}This paragraph has its own background color.
We are still in the div element.با استفاده از دستور می توانید یک تصویر دلخواه را به عنوان پس زمینه عنصر مورد نظر خود در صفحه وب قرار دهید. به طور پیش فرض، تصویر تکرار می شود و کل عنصر را پوشش می دهد.
body {
background-image: url("body-bg.jpg");
}نکته: هنگام استفاده از یک تصویر پس زمینه، باید از یک تصویری استفاده کنید که متن را مختل نکند(رنگ متن در پس زمینه محو نشود).
به طور پیش فرض، تصویر پس زمینه یک تصویر را به صورت افقی و عمودی تکرار می کند. بعضی از تصاویر باید فقط به صورت افقی یا عمودی تکرار شوند.
برای داشتن صفحه ای با سرعت بارگزاری بالا، همواره باید حجم صفحه پائین نگه داشته شود. افزودن پس زمینه هایی با کیفیت بالا، سایز بزرگ و حجیم باعث کاهش شدید سرعت بارگزاری خواهد شد. برای رفع این مشکل، طراحان وب سایت از یک تصویر کوچک با حجم بسیار کم استفاده می کنند. تصویری که بشود هر تعداد از آن را در کنار یکدیگر قرار داد و باعث بوجود آمدن تصویری واحد و یکپارچه شود.
اگربخواهیم تصویر بالا فقط در محور افقی تکرار شود دستور(;background-repeat: repeat-x) و اگربخواهیم تصویر بالا فقط در محور عمودی تکرار شود دستور(;background-repeat: repeat-x) را استفاده می کنیم و اگر بخواهیم تصویر فقط یکبار نشان داده شود و تکرار نشود، باید از دستور (;background-repeat: no-repeat) استفاده کنیم.
برای تعیین موقعیت مکانی تصویر در پس زمینه از دستور background-position استفاده می کنیم. وقتی که بخواهیم تصویر در پس زمینه یکبار و بدون تکرار نشان داده شود، باید محل قرارگیری تصویر در یک زمینه بزرگ را تعیین کنید. به عنوان مثال توسط مجموعه دستورات زیر، پس زمینه صفحه وب سایت، در سمت چپ و بالای صفحه نشان داده می شود:
body {
background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: left top;
}شاید وب سایتهایی را دیده باشید که هنگامی که صفحه را برای مطلعه اسکرول میکنیم، پس زمینه آنها در جای خود ثابت مانده و محتوای آن صفحه حرکت میکند. این کار توسط دستور background-attachment انجام می شود.
برای تعیین اینکه تصویر پس زمینه ثابت باشد (با بقیه صفحه حرکت نکند)، از ویژگی background-attachment با مقدار fixed استفاده کنید:
body {
background-image: url("body-bg.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}برای کوتاه کردن کد، می توانید تمام خواص پس زمینه را در یک خط بنویسید. این یک ویژگی shorthand نامیده می شود.
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}با استفاده از CSS، لینک ها می توانند از طرق مختلف طراحی شوند.
پیوند ها را می توان با هر ویژگی CSS (به عنوان مثال color, font-family, background و غیره) استایل دهید. علاوه بر این، لینک ها را می توان به صورت متفاوت با توجه به وضعیت موجود در آن، استایل دهید.
چهار حالت لینک عبارتند از:
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}هنگام تنظیم استایل برای چند حالت لینک، برخی از قوانین وجود دارد:
a:hover باید بعد از a:link و a:visited بیاید و a:active باید بعد از a:hover بیاید.
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}در HTML، دو نوع اصلی از لیست ها وجود دارد:
خواص لیست CSS به شما این امکان را می دهد:
خصوصیت list-style-type علامت های مورد نظر در لیست های مختلف را مشخص می کند.
مثال زیر برخی از نشانگرهای لیست موجود را نشان می دهد:
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>خروجی :
توجه: بعضی از مقادیر برای لیست های غیر ترتیبی و برخی برای لیست های مرتب شده است.
خصوصیت list-style-image یک تصویر را به عنوان نشانگر گزینه های لیست مشخص می کند:
ul {
list-style-image: url('sqpurple.gif');
}خصوصیت list-style-position موقعیت نشانگرهای لیست مورد نظر را مشخص می کند.
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}حذف تنظیمات پیش فرض : برای حذف تنظیمات پیش فرض لیست ها مانند شکل نشانه آیتم های لیست و مقادیر پیش فرض padding ، margin به صورت زیر عمل می کنیم.
ul.demo {
list-style-type: none;
margin: 0;
padding: 0;
}<ul class="demo">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>خروجی :
می توان تمام خصوصیات لیست را در یک خط با دستور list-style نوشت (Shorthand).
ul {
list-style: square inside url("sqpurple.gif");
}