First: Code vs. Design Views
Remember that in Dreamweaver, you can opt to edit from a code view (plain HTML) or a graphical view (what you see is what you get --- WYSIWYG)
If you ever need to get into the HTML side of things, here is a very stripped down view of a basic empty page (it's what Dreamweaver gives you when you open a new page) and where things go in the page:
Click on that image to see it full size. The upper portion (pink) contains some information about the web page itself. Most of this information is not actually visible when you look at the page - instead, you might think of it as 'under-the-hood', 'dogtags', or background identity information that is used in various, non-graphical ways. The 'Head' tag can contain things like the page's title (displayed above the site in the browser's menu area), information about the author of the page, and keywords that can help search engines index the site.
The green section, or everything in between the Body tags, contains everything you see when you view the page in a browser. This is where the great majority of your editing will take place. When you are working in the Design (WYSIWIG) editor, you do not need to worry about the distinction between these two areas in your page - you will automatically be working in the body.
Today we will go over setting up a basic home page, putting some simple things in it, and understanding the layout of Dreamweaver in general.
File Structure:
Your web site or page is just like any other file or directory system on a computer. You can create directories to contain and organize certain filetypes or categories of pages. The first thing you should do is make a directory on your hard drive that you can put your site in - call it whatever you want. You should create a separate directory for your images and include it in your main site directory; people commonly name this directory 'images', but you could name it whatever you want. Other than that, you don't need to set anything special up at this point.
in short: Create a directory with any name for your site, put another directory in it called 'images'.
Creating a Home Page:
'Index.html' - most of the time when you enter a URL into your web browser, you don't have to specify a specific file (you just type in whatever.com), but you do land on a specific file each time you do so. This is usually the site's 'index' file, which must be titled 'index.html'. Your main page should also be titled index.html, but other pages you create and link to must have other names. If you don't have an index.html, the browser will not know what file to load when someone comes to the site!
In short: open up a new HTML page in Dreamweaver, and 'Save As' 'index.html'. This is your main page. You should see it listed on the right in your site directory window/palette.
Adding Content:
Dreamweaver makes adding content very easy. You don't have to know how to write plain HTML to use it (but it helps if you do - and if you want to make serious and useful sites, it is a necessity to understand the coding side of things).
Text:
Type into the Design Editor as if you were working in a word processing document. You can type, add new paragraphs, etc. When you hit enter, you will see your text jumps two lines. If you want to jump only one line, hold the 'Shift' key as you press 'Enter'.
Below the Editor window, you'll see another window that allows you to change style attributes. Highlight any text you want to stylize and try out some of the options.
A word about fonts: web browsers only know how to display a small number of fonts - you can see them listed in this style window (in a drop-down window). If you try to use another font, you might see it working on your computer, but when someone else loads your page somewhere else, there is no guarantee they'll have the same font!! Their browser will display the text in its 'default font' - usually not as glamorous as the font you probably wanted to use.
Pictures:
Put all image files you want to use into your 'Image' directory before using them. This way you'll know they're in the right place. Not doing this will usually result in your images not showing up on other viewer's computers.
Click on the tree icon at the top of your screen - this is Dreamweaver's 'add image' button. Find your image file in your directory and select it. It should now appear in your page. You can make some changes to it in the style window below. Remember that making it larger than it really is will result in a pretty poor image.
Big tip: whenever you make an image for the web in Photoshop, save it using the 'Save for Web and Devices' option. This will allow you to make it more compact in terms of its file size.
Links:
Highlight a selection of text or click on an image to add a link. You can click the link button (looks like chain links) at the top or enter a link in the style window at the bottom. We'll talk more about links tomorrow - for now, know that you can make a dummy link by simply inputing '#' into this field. This is a nice way to make a link without having it actually go anywhere when you click it.
Tables:
Click on the table button above your editing window and create a table. You can change some attributes in the style window below. Tables do not commonly have borders anymore - they can be more useful as precise, invisible containers of images and text. Some sites are built with invisible tables to structure their contents, and this is likely how most of you will create your pages. This method of design was more popular before CSS became useful, and since then tables have become more and more scarce. We're using them in this class because they are basic and simple. Tomorrow or Wednesday we'll talk about more flexible and powerful ways to arrange things on your site (CSS div tag).
Save and Preview:
Save your work often, of course. After saving, click the world icon above your page to preview the site in one of the browsers on your computer.
No comments:
Post a Comment