Первый дизайн и код веб-страницы, Dreamweaver HTML и CSS

Question

Первый дизайн и код веб-страницы, Dreamweaver HTML и CSS

0

Я только что разработал очень быструю домашнюю страницу сайта, и в качестве первого кодера времени мне было интересно, посмотрит ли кто-нибудь на дизайн и мой код и скажет, где они будут делать улучшения или изменения или полностью изменить его, если это необходимо!

Дизайн предназначен только для личного использования и содержит черные секции, где мой личный адрес находится в дизайне сайта.

Я открыт для любых предложений и комментариев, так как это мой первый раз при кодировании, и я хотел бы знать, что более опытный человек будет делать лучше. Я использую Dreamweaver и просматриваю его в Google Chrome, есть код HTML и код CSS, в идеале я бы хотел, чтобы он отображался в разных браузерах.

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Rosy Jewellery</title>
<link rel="stylesheet" type="text/css" href="CSS/Stylesheet.css">

</head>

<body>

<div class="wrapper">

    <div class="top">
        <!--Background set in CSS-->
    </div><!--  end of top-->

    <div class="menu">
        <h1>Rosy Jewellery</h1>                   
        <ul id="nav">       
        <li><a href=""> Home            </a></li>
        <li><a href=""> Jewellery       </a></li>
        <li><a href=""> Locations       </a></li>
        <li><a href=""> Contact Us      </a></li>
        <li><a href=""> Reviews         </a></li>
        </ul>       
    </div>
    <!-- end of menu -->


  <div class="main">
        <p> Welcome to Rosy Jewellery </p>
              <img src="Images/1.png">

              <img src="Images/2.png">

              <img src="Images/3.png">

              <img src="Images/4.png">

              <img src="Images/5.png">

              <img src="Images/6.png">  </div>
<!--close main-->



<div class="footer">
    <ul id="footer">
        <li> <img src="Images/facebook.png" /> 
        <img src="Images/twitter.png" />  </li>
        <li> Twitter Address</li>
        <li> Addres, Address, Address, Address </li>        
        <li> Telephone Number</li>
    </ul>
</div> 
<!--end of footer--> 
</div>
</body>
</html>

CSS

.wrapper        {
            margin:0 auto;
            background-color:#D1CED4;
            }   

.top            {
            background-color:#000000;
            padding-bottom:2.5em;
            }

.menu           {
            background-color:#FFFFFF;
            border-bottom-width:2px;
            border-bottom-color:#000000;
            border-bottom-style: solid;
            position: relative;
            top:-15px;
            text-align:center;
            font-family:Andalus;
            font-size:18px;
            padding-left:1em;
            padding-right:1em;
            overflow:hidden;
            }

.menu h1        {
            float:left;
            color:#999966;
            font-family:andalus;
            font-size:24;
            }


.main           {
            width:65%;
            margin:0 auto;
            background-color:#FFFFFF;
            text-align:center;
            font-family:andalus;
            font-size:24px;
            padding-top:1px;
            }

.footer         {
            text-align:centre;
            background-color:#C8C8C8;
            color:#000000;
            font-family:andalus;
            margin-bottom:-1em;
            }

#footer li      {
            display:inline-block;
            padding-right:8em;
            vertical-align:middle;
            margin-top: -30px;
            }


#nav            {
            padding-top:15px;
            }

#nav a          {
            text-decoration:none;
            }   

#nav a:link     {
            color:black;
            }

#nav a:visited  {
            color:black;
            }

#nav a:hover    {
            color:black;
            }

img             {
            margin:42px;
            }

#nav ul         {
            display:inline-block;
            }


#nav li         {
            display:inline-block;
            margin-right:4.5em;
            padding-right:2.5em;
            }

user3046451 09 янв. 2014, в 13:02

Источник

0

Я не могу видеть, загрузила ли фотография моего дизайна? Кто-нибудь может это увидеть?
user3046451 09 янв. 2014, в 11:32
0

Это здесь. мы видим, что
richa_pandey 09 янв. 2014, в 11:32
0

вы объявили html5 doctype, но не использовали какой-либо тег html5 .. какая-то конкретная причина?
richa_pandey 09 янв. 2014, в 11:33

Показать ещё 1 комментарий

Теги:

html

css

website

dreamweaver

2 ответа

0

Это действительно зависит от ваших требований. Для личного сайта я не думаю, что вам не нужно больше. Коды довольно простые и аккуратные. Если вам не нужна аутентификация и что-то вроде того, чтобы попасть на ваш сайт. Простое красиво.

Mahib 09 янв. 2014, в 09:14

Ещё вопросы

Я не могу видеть, загрузила ли фотография моего дизайна? Кто-нибудь может это увидеть?
вы объявили html5 doctype, но не использовали какой-либо тег html5 .. какая-то конкретная причина?

Era · Accepted Answer · 2014-01-09T09-32-00.000Z

Только 3 предложения:

Используйте теги HTML5 поскольку вы объявили это как DTD.
Никогда не создавайте прямой тег, как вы указали маржу на <img>. Попробуйте дать класс каждому элементу.
Используйте максимальные классы вместо id в CSS.