What is Dreamweaver – semi WYSIWYG HTML editor.
Key thing to note: there are 3 elements which make up a webpage.
- Presentation, and
- Behavior (Interaction)
HTML vs. XHTML vs. HTML5
You may have heard about different types of HTML standards.
HTML has been around the longest, and was up to version 4.x.
XHTML has removed some deprecated tags, become standardized (closing tags required, all lower case tags & attributes).
HTML5, is the latest version, which many browsers are moving toward. It incorporated rich media, location services, and storage – for example – which are all helpful to today’s dynamic websites. To do this, they’ve added several tags, as well as some other organizational types of tags. For most of what we do, it will be the same regardless of what HTML type you will use.
HTML defines the structure of the web page
Do you need to know (X)HTML(5) to use Dreamweaver?
Well the answer is both Yes and No.
Yes because there are some tags & attributes that Dreamweaver doesn’t allow easy access to. If you are going to move into programming on the web, it will be more beneficial to know HTML, if you are strictly a designer, it is not as necessary.
No because you will rarely need them.
Sort Of if you are going to be a standards compliant CSS designer, web optimizer, or work with SEO then knowing the tags will simplify your life!
Here are some best practices when it comes to using file names on the web.
- NO SPACES (not a rule per say – other than mine but it makes it easier to work with files, and reduces errors) use an underscore (_ ) or the dash (-) instead! Preferably, use the dash.
- avoid reserved characters like /,\,:
- HTML should usually have a .htm or .html extension (unless using a server side language – but we won’t in this class). Other common extensions are .gif, .jpg, .swf, .mov, .mp3m and .mp4 – for media files.
- try to use all lower case – just for constancy, to reduce errors
You will find it easier, if you have a structure to your website. This will allow pages to naturally link to one another, and keep order out of many files. Here is a common structure which you might want to adapt on your local computer
- my documents
- site 1 (the site name)
- sources (places for your Photoshop files if any)
- sources (place for your flash .fla files, if any)
- logical group of pages
- site 2
- images (notice how we don’t include folders we don’t need)
- site 3
- site 1 (the site name)
What is CSS
- Cascading Style Sheet
- Defines the presentation of the web page
- allows you to redefine how a page looks based upon the rules that you write
- Dreamweaver allow you to “write” CSS with a built in tool
- Started by Netscape
- NO relation to Java (other than a similar name)
- defines the interaction (behaviors) of the web page
What is a Web Application
A web application generally is made up of many pages, that uses server driven behaviors. It may perform e-commerce, inventory, customer support, searching, etc.
Think of what a computer desktop application can do, but on the web! Odds, are, there is a web application that is already made to do that task from a web browser. This includes editing web pages – so yes, a web page can create another web page.
- Multiple sections (Common, Forms, Layout, etc.)
- Allows you to “Insert” common web elements into the active page
Document Tool Bar
- Allows you to access the different open documents (uses tabs at top of bar)
- FTP management
- How you want to view your page (Code, Split, Design)
- Work area for existing document.
- Includes sub-tools like the tag selector , hand, and more.
- Can be viewed in three ways (Code, Split, Design)
You can edit your preferences on how you want to Dreamweaver to be laid out – however, this is set by computer, not by user.
Short Cut Keys – While this would be helpful to know as it allows you work faster, you will not be tested on Dreamweaver specific short-cut keys unless specified.
Getting Started with Dreamweaver for the First Time was originally found on Access 2 Learn