How Do I Make a Basic Site in Microsoft Expression Web 4?

[Naphier]

Hello, so I want to make a basic site in Microsoft Expression Web 4, but I'm not sure how. Something like this but so I can edit and play around with it.
​

 

[Shibi]

I can make one from scratch :L and work with notepad++ contact me on skype or msn Luke and i will help you

 

[Caustik]

You need to learn client-side languages first... (HTML5, CSS3 & JS)
Then you can start integrating server-side capabilities into your site (for this I'd recommend Node (an event driven framework for server-side js, Ruby, or Python)).

But as I said, you'll need to learn your way round html5, css3, and js before you can start writing websites.

 

[Mapplexploits]

I can make one from scratch :L and work with notepad++ contact me on skype or msn Luke and i will help you

He just asked for help with Microsoft Expression Web 4 (wich is a software I hate), not for you to show off..............................

...............................

 

[WizCoder]

Try learning HTML etc then move on into php

 

[foxx]

Simple answer: you don't. WYSIWYG editors such as Microsoft Expression Web 4 are poop. Learning how to make such an easy layout wouldn't take you more than a few hours.

It's basically just a couple of divs.

<div id="head">
navigation
</div>

<div id="content">
    <div class="left">
          image
    </div>

    <div class="right">
           main text
    </div>
</div>

<div id="footer">
footer
</div>

 

[Naphier]

Simple answer: you don't. WYSIWYG editors such as Microsoft Expression Web 4 are poop. Learning how to make such an easy layout wouldn't take you more than a few hours.

It's basically just a couple of divs.

<div id="head">
navigation
</div>

<div id="content">
    <div class="left">
          image
    </div>

    <div class="right">
           main text
    </div>
</div>

<div id="footer">
footer
</div>

I pick up stuff really quickly, that looks pretty simple, is that all there is to it?;o

 

[foxx]

then there is css

#head {
  background: red;
  height: 30px;
}

#content {
  background: blue;
}

#content .left {
  float: left;
  width: 200px;
  background: orange;
}

#content .right {
  margin-left: 210px;
  background: black;
}

#footer {
  background: yellow;
}

and that's pretty much it, make few changes here and there and your site's done

You must be registered to see links

 

[WizCoder]

That;s not all there is to it but that is the main structure in which you will then will in with some other html code and css for the colors.

 

[Naphier]

then there is css

#head {
  background: red;
  height: 30px;
}

#content {
  background: blue;
}

#content .left {
  float: left;
  width: 200px;
  background: orange;
}

#content .right {
  margin-left: 210px;
  background: black;
}

#footer {
  background: yellow;
}

and that's pretty much it, make few changes here and there and your site's done

You must be registered to see links

Very helpful, thank you, foxx.

 

[s-p-n]

then there is css

#head {
  background: red;
  height: 30px;
}

#content {
  background: blue;
}

#content .left {
  float: left;
  width: 200px;
  background: orange;
}

#content .right {
  margin-left: 210px;
  background: black;
}

#footer {
  background: yellow;
}

and that's pretty much it, make few changes here and there and your site's done

You must be registered to see links

Lol, that is truly art.

Adding onto Foxx' response, and since you are picking things up quickly, notice the difference from some things- like class and id.

<div id="content">
    <div class="left">
          image
    </div>

    <div class="right">
           main text
    </div>
</div>

There should only be one tag in the entire HTML document with a given id. So you should never make another div with the ID of "content." The class attribute is like the mirror image of the id attribute. You can use a class-name any number of times- for example, you can use left and right on other DIVs. You can also use multiple classes separated by a space, like so:

...
<div id="content">
    <div class="left image"></div>

    <div class="right image"></div>
</div>
...

You must be registered to see links

Please also note the "background-position-x" line in CSS for #content .right. You can play with all sorts of toys using CSS.