as we're trying to learn how to hand code our web sites from scratch using
HTML and CSS
again you can use it any software that will work so
you can you something as basic as Notepad on PC
our text edit on a Mac or free tools that you can download such as notepad
++ for PC
or Text Rangler for Mac but for me personally
I like to work with Dreamweaver now it is an
option that will cost you a monthly fee so if you don't like this option you can
definitely stick with the free
and basic editors but I prefer Dreamweaver because it has a lot of
different options
but before we actually get into learning HTML basics
there are a couple Dreamweaver settings that I change that i'm gonna let you know about
now you can choose whether you want to use these are not
but these are things that I feel helps me be a little bit more efficient
now when I'm in Dreamweaver
the first time I open it there's usually a welcome screen but I've already close that so
you can close that out just know that that welcome screen
is helpful for you to be able to click on pages that you've already started
or there's like a different tips and tutorials that'll help you
get the most outta Dreamweaver, right now I'm working in the extract workspace
this is great if you have
a web design already built in Photoshop and you want to be able to
extract it and piece it together and remember but that's not what were going to do because again
we are hand coding so let's go ahead and go to the Window menu
go to work space layout and again there are three different work space layouts
that come with Dreamweaver
as of this date here's a code layout that's very simple and it has two panels
files in snip it's, this allows you to come and get rid of all the clutter and
just code
so this would normally be a great layout for hand coding but I actually prefer
the design work space because it has a few more panels that we're gonna
eventually get to
such as this CSS panel when we start working with styles
or assets if we wanna find images quickly, links quickly etc
and then also this insert panel that helps us to work more efficiently
by quickly easily being
insert different elements into our page now for me personally I like to
move this
insert panel to the very top you can see the Blue Drop
are so go and drop it there you can open whenever panels you want from the Window
menu
and put them wherever you want in your workspace and once you do that
you can come in here and choose new workspace
and name that work space so you can easily access it later
now you don't always have to go to the window panel you can come to this
workspace drop down menu
and I can go through three main workspaces or I can always come back to
the custom work space
that I just created in addition you can always reset a workspace
if you need to, so that is my preference in terms of workspace
I like to have my columns on the right my insert panel on the top
and then I like to be able to see my document kind of
on the left side of the screen now let's go ahead and go to File New
create a new HTML file HTML5
we don't need to worry about that right now just because i want to use this
to change some settings, so once we have these open
again this is totally up to you but I don't like working with the code on the
bottom of the screen and live view on the top
I like having both views showing and in later versions of Dreamweaver like I'm in now
you either have the option to do straight code view or you can do a split
on or you can choose design and live view but you can't just have design by
itself
so anyway let's go ahead and change it back to live for right now
my preference is to actually have these two windows sitting side by side
vertically so we'll go to view
and choose split vertically and then you can choose whether you want to have the
code on the right or the left
I'm used to it being on the left so I'm gonna go ahead in uncheck live view on
the left
so now I have my code on the left and my live design view on the right
and then all my columns over here and this is the way that I prefer to work
another thing you might consider is going into the preferences for
Dreamweaver
and looking through all the different options of things you can do
so for instance in my fonts I can change the code view
from small font size to maybe a larger or large est
or huge sizes and this is gonna be easier for you to see in the tutorial
videos
and just easier for me to work with so go ahead and go through a couple those
options
see if you can get it the way you like it and
I actually might change that to 14
and that a lot better in my opinion so I'll close that
and this is ready for me to start hand coding my website