Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling them in Dreamweaver. What is HTML? HTML stands for Hypertext Markup Language and is the programming language that is used to create web pages and websites. What is CSS? CSS stands for Cascading Style Sheets. Think back to your page layout class when you learned InDesign. Remember how you used character and paragraph styles? We do similarly in web. In web the HTML is your artboard and your CSS file is what contains all of your styling for your entire website. The styles you set up in your style sheet are universal to your entire website. In your CSS this is where you will style all of your text, positioning, colors, background colors, alignment, etc. How does my HTML know to use my CSS? We have to link our CSS to our HTML which will we will do as we set up our document below. How do I get started in Dreamweaver? 1) Create a new HTML file. Go to File > New > HTML. Name your first HTML file index.html. Save your HTML file to a new folder your create within your project folder named Site. NOTE: Every website you create
needs to have a index.html file or else the browser will not know where to look for the home page of your website and your website will go nowhere. 2) Create a new CSS file. Go to File > New > CSS. Name your first CSS file something like style.css, the name of your file is completely up to you. Just keep your file name all lower case and remember to use underscores in place of spaces in your file names. Save your CSS to the same folder you just saved your HTML file to. 3) Site Manage. It is very important to always site manage your website so that you know you are always working off the latest files. You need to do this anytime you start working on a different computer regardless if it is in the lab or at home. To Site Manage: Go to Site > Manage Sites. Click New Site. Then name your site something like: BEH375_Project1 and browse for the file path to the site folder where you just saved your HTML and CSS files. When done click Save then Done on the next window.
Now over on the right in Dreamweaver you should see a tabbed folder named Files that shows all of your HTML & CSS files you have created so far. If you don t see this can you find it in the Dreamweaver menu by going to Window > Files. See example below:
Linking HTML & CSS Together Open up your index.html file and go to the CSS Designer tab window on the right. If you can t find it go to Windows > CSS Designer. Click on the + symbol to attach your CSS file. Then click on Attach Existing File. NOTE: You only have to do this one time during your project unless you break the CSS attaching. To be safe do not move any files around and you will avoid breaking it. Browse your site folder for the CSS file your created earlier, once you find it make sure the radio button for link is checked then click OK. NOW WE ARE READY TO CODE! HTML Selectors 1) Div s They are unique styles you are adding (used majority of the time). Div s begin with a # sign. Example: <div id= header >Header Content Goes Here</div>
2) Classes They are reusable styles you are adding. Classes begin with a period. Example: <div class=.gray_color >Text Goes Here</div>) How to Add a Div ID/Class 1. Go to your HTML file. 2. Make sure that your cursor is between the two body tags <body></body>. 3. Go to Insert > Div. In the space next to ID put in the name of the ID you want to create. 4. Repeat this process for your header, navigation, content area, footer, etc. How to Add a Div ID/Class to your CSS
1) In your CSS Designer panel go to Sources and click on your CSS file there. 2) Go to Selectors and click the + to add your ID for your header, underneath the search tool type in name for your DIV with a # sign before it (Example: #header). 3) Go to Properties, (this is the character and paragraph styles reference from InDesign). This is where you will set the width, height, colors, background colors, fonts, positioning, text-alignment, etc.
Use the CSS Designer > Properties panel to add all styling to your website. If you cannot find something go through the icons and scroll through. If you are stuck with adding the CSS styles you want, you can also reference the PDF on the class website called CSS Cheat Sheet to see what the code should look like in the CSS style sheet and type it in that way if you prefer. Here is a breakdown of what each Properties area contains: Layout Text Border Background Others Min-width Font-style Border-color Backgroundimage gradient Min-height Font-variant Border-width Backgroundposition Max-width Font-weight Border-style Backgroundsize Max-height Font-size Border-radius Backgroundclip Line-height Backgroundrepeat Margin Backgroundorigin Padding Text-align Backgroundattachment Positioning Textdecoration Text-indent Box-shadow Float Text-shadow Clear Texttransform Width color Bordercollapse Height Font-family Borderspacing Backgroundcolor Backgroundimage url List-styleposition List-styleimage List-style-type Overflow-x Overflow-y Letter-spacing Word-spacing White-space
Display Visibility Z-index Opracity Vertical-align