Design for Digital Media Environments – Post 3 – Basic Website Design (HTML and CSS)

The website will be created  using HTML, CSS, PHP and possibly Jquery. By combining theses different programming language I will be able to create an interactive website where the user can generate and post to the site allowing it to build and grow. I will be using HTML and CSS to create the look of the website, allowing me to create a template page which can be used throughout-out. We will also be using PHP to create the user input element as it also the users to connect and post to databases allowing the users to have the own log-in and post to feeds based around the concept we choose.

In the first 2 HTML and CSS seminars that I have had so far, I learnt how to create and apply the box model to my site. The box model is “the CSS Box Model. All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.” (www.w3schools.com/css/css_boxmodel.asp). This design technique really helped me as it allowed me to break down the code into boxes create a new way for me to think about how to design for a website and then code it. I can now think about how the elements will be placed in boxes with-in different boxes. Within the code the word box will be replaced with div and assigned class or id names allowing me to style them with-in my css styles sheet.

To practice applying this a website I decided to create an extremely simple and generic web page which can be edited in css to create a cool funky and functional look to the site. I did this by starting out by drawing the different elements I wanted on my site like a header, nav, etc. Once I created the boxes I then worked out what boxes in to be in what divs, so I went ahead and planned and labeled just boxes div so I can work out how it will work and be styled. This really help when it came to programming as I had a pre determined idea and now knew how to achieve it.

Screen Shot 2015-02-17 at 10.05.30

Now I have created the basic design I went on to creating this design in HTML, so I created all the necessary divs that I had planned. However whilst creating the css I found out that 1 style can be applied to multiple elements by change the divs from a ID to a Class and naming them all the same which can then be called up within the CSS. This not only saves me time but also make the file size smaller and it easier to change the look of them and effect all of the related div

s.Screen Shot 2015-02-19 at 20.03.03Screen Shot 2015-02-19 at 20.02.49

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s