104 дні назад Створюючи хороший СДЛ сайт ми багато часу проводимо над роботою з його дизайном. Хочеться щоб він виглядав просто ідеально, тому увагу приділяємо навіть дрібницям. Зазвичай все потрібно підправляти в Photoshop, але зараз я розкажу як створити дуже красиву кнопку за допомогою всього лиш CSS3.
Для початку задамо основу для нашої кнопки:
border: 1px solid #5d9046; color: #fff; text-transform: uppercase; font-family: Arial, Helvetica, Sans-Serif; text-decoration: none; width: 156px; font-size: 14px; font-weight: bold; padding: 8px 0; text-align: center; display: block;
Результат після першого кроку
Зріжемо гострі кути заокругливши їх:
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
Результат після другого кроку
Для краси додамо нашій кнопці тінь:
text-shadow: 1px 1px 1px #666; -moz-box-shadow: 0 1px 3px #111; -webkit-box-shadow: 0 1px 3px #111; box-shadow: 0 1px 3px #111;
Результат після третього кроку
Ну і наостанок зробимо колір кнопки градієнтним.
background: -moz-linear-gradient(top, #3F8EB5 0%, #1D76A0 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3F8EB5), color-stop(100%,#1D76A0)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F8EB5', endColorstr='#1D76A0',GradientType=0 ); /* ie */
Фінальна версія кнопки
Ось і готова наша кнопочка в ситі web 2.0. Якщо погратися ще із :hover, то можна придати їй ще більшої краси. далі…
Провіряйте свій HTML/CSS код на валідність! Дехто говорить, що валідність не впливає на позицію у видачі, але більшість говорить зовсім інше – впливає, і з врахуванням того що код не тяжко привести у валідний стан – для чого залишати шанс пошуковим системам недооцінювати наш сайт.
Отримати код, який відповідає усім стандартам по таких пунктах:
Кроссбраузерність – сторінка з валідним кодом буде виглядати одинаково у всіх браурезар.
SEO – вплив на позицію у видачі.
Чистий код – швидкість загрузки сторінки.
Веб-інструменти-валідатори:
W3C Markup Validation Service – стандартний валідатор HTML;
W3C CSS Validation Service – стандартний валідатор CSS;
Cynthia Says – перевір, чи відповідає Ваш сайт стандартам Section 508 і WCAG;
WDG HTML Validator – перевірка декількох сторінок і всього сайту.
Продовжую вивчати PHP.
Сьогодні другий урок.
Всякий PHP-скрипт повинен бути обмежений наступними символами:
<? скрипт ;?>
Або
<?php скрипт ;?>
Або
<script language=”php”> сам скрипт </script>
Між цими символами буде виконуватися кожний рядок коду. Крім рядків-коментарів, які позначаються:
// – не виконуються команди від цього символа до кінця радка;
/* комментарий */ – не виконуються команди між цими символами, незалежно від кількості рядків коментаря;
# – коментарем рахуються всі символи від цього символа до кінця рядка.
Тепер розберемося з однією із найбільш популярних функцій в PHP – функція виводу echo. Наприклад:
<? echo “Зараз пишу другий урок”;?>
Виведе на екран текст “Зараз пишу другий урок”, без лапок, без якого-небуть форматування. В середині лапок після echo може бути любий текст, в тому числі і HTML.
У першому уроці ми розглядали що таке змінна, і як вона записується. Операція присвоєння позначається =. Подивимося приклад:
<? $A=7.135;
$a=15; $mess4=”Четвер”;
echo “Сьогодні $mess4, $a -го” ;
$9sad=194 //Неправельне імя змінної
?>
Всі змінні у прикладі фіксовані, а для їх зміни нам потрібно самим міняти їх значення в скрипті.
Використовуємо стандартні форми HTML для вводу змінних:
<HTML>
<form action=”www.домен.org.ua/test.php” method=”post”>
Ваше Імя <input type=”text” name=”name”><br>
Ваша фамілія <input type=”text” name=”fam”><br>
<input type=”submit” value=”Правильно”>
</form></HTML>
Файл test.php буде складатися так:
<? echo “Поздоровляю, $name $fam,<br>Ви увійшли на сайт” ;?>
На цьому закінчу другий урок)
Давно хотів розпочати вивчення PHP, так як мені приходиться кожного дня з цим працювати, а я все роблю методом проб та помилок, нічого в тому не розуміючи. І ось нарещі і до цього дойшли мої руки та голова.
Вирішив провести цикл статей на тему – Уроки PHP.
Вивчення PHP почнемо з вивчення синтаксису та граматики. Синтаксис мови програмування PHP позичений із мови С. Мови Java та Perl також трохи повпливали на нього.
Перехід із HTML в PHP
Для початку подивимося як правильно засунути код HTML в PHP. Для цього існує декілька способів.
1. <? echo (“Найпростіший спосіб – це лапки із знаком питання”); ?>
2. <?php echo (“Цей спосіб для роботи із XML документами”); ?>
3. <script language=”php”>
echo (“деякі редактори (типу FrontPage) не люблють оброблювальні інструкції”);
</script>
4. <% echo(“У версіях PHP починаючи від 3.0.4 можно використовувати теги ASP”); %>
Розділення інструкцій
Дальше у нас роздвлення інструкцій. Інструкції в PHP розділяються так як у C та Perl – крапкою з комою. Закриваючий тег ?> також вказує на закінчення твердження, тому між записами:
<?
echo (“Текст”);
?>
і
<? echo (“Текст”) ?>
немає ніякої різниці.
Типи змінних
PHP підтримує змінні таких типів:
integer – ціле;
double – число з дробовою частиною;
string – рядкова змінна;
array – масив;
object – обєктна змінна;
pdfdoc – PDF документ (тільки з підтримкою PDF);
pdfinfo – PDF інфо (тільки з підтримкою PDF).
Зазіичай програміст не встановлює типи змінних, за нього це робить PHP під час виконання програми.
Ініціалізація змінної
Для того, щоб ініціалізувати змінну в PHP потрібно просто присвоїти їй яке небуть значення. Це для більшості змінних. Для обєктних змінних чи масивів може використовуватися інший механізм. Змінна в PHP завжди починається із значка долара $.
Заключення.
Якщо нам потрібно вставити PHP код між тегами <font></font>. Цей код у нас ініціалізується змінними $a і $b.
<FONT>
<?php
$a = “Hello “;
$b = “World!”;
?>
</FONT>
