So
your client has approved the designs and now you’re onto developing the
site! Some designers prefer to send off their work to outside web
developers, but it is more and more common nowadays for designers to
also develop their own work. Front-end development involves the simple
web languages like HTML and CSS, which will enable you to get your site
up and running.
Slicing
First
off, you have to get your images ready to be implemented into the HTML.
In Photoshop, this involves using the slicing tool. This is a nifty
little feature that allows you to not only chop each part of the layout
into separate images, but also gives you the ability to export the
slices into a tabled HTML layout!
If you have never used the slice tool before, HERE is an informative video on slicing webpages courtesy of 1stoptutorials
Coding
After
getting the design slices, open the file in Dreamweaver. It should
already be looking pretty familiar. As your skills improve you will be
making big changes that will increase the functionality of the website.
Some of your first sites may not look at all different from the .psd
document of your site. Once your HTML and CSS skills improve,
you will be transforming your site into one that can adjust sizes, add
text wherever you want without hurting the layout, and implementing
special scripts that only improve upon your intial .psd designs.
After coding the initial design, if you have made multiple pages you will code each of those. If you made wireframes originally
From
there, start adding the content! Images, articles and text will be all
over the pages. This is usually provided by the client but if it’s not
you have the option to put filler text into areas until they are able to
change it to their liking.
These
are just the basics of coding. If HTML were the Earth than the Web
would be the rest of the universe. There are countless other languages
that you can learn that improve functionality and add special features. I
won’t get into that now but in the future I will have a basic write-up
on languages and then more in-depth articles.
No comments:
Post a Comment