Dreamweaver Basics Workshop

Size: px

Start display at page:

Download "Dreamweaver Basics Workshop"

Alison Burke
6 years ago
Views:

1 Dreamweaver Basics Workshop Robert Rector idesign Lab - Fall 2013 What is Dreamweaver? o Dreamweaver is a web development tool o Dreamweaver is an HTML and CSS editor o Dreamweaver features a WYSIWIG (What You See is What You Get) editor The user can visually design a page, and code is automatically created

2 What is HTML and CSS? Do I need to know code to use Dreamweaver? You do not need to know how to code with HTML and CSS, but it definitely helps! We will explore very basic uses for Dreamweaver, but if you want to become proficient with the program you will eventually need to learn basic HTML and CSS. o Even Dreamweaver expert users need to go into the code and edit it directly sometimes I: Explore the User Interface Welcome Screen o The first thing you will notice is the Dreamweaver Welcome Screen This gives you access to many of the most common choices that you will be making in Dreamweaver, such as: Opening a recent item creating a new document watching an instructional video Let s go ahead and create a New HTML Document.

3 Standard Apple Menu Bar - at top of screen o This is at the top of the desktop on a Mac, but at the top of the window on a PC o There are the usual menu options (e.g. File, Edit, etc.) o Then there are menu items that are specific to Dreamweaver View Allows you to switch between code and design views (we will explore this later) Modify Lets you modify properties such as fonts, images, tables, etc. Format Has options for formatting text, including with both HTML and CSS Commands Offers advanced options for automating repetitive tasks, cleaning up HTML, etc. Site For creating new sites and managing existing ones Help Links you to Adobe s online support and tutorials

4 Application Toolbar - at top of Dreamweaver window o Three Dropdown Menus Layout Allows you to switch views quickly Extensions Let s you go and get widgets and extensions outside of Dreamweaver and add them to your project (e.g. a calendar widget) Site o Search feature Lets you create and manage sites Actually a help function o Workspace Menu Allows you to set a predefined workspace, as well as create your own We will experiment now with moving around panels in Dreamweaver 1. Choose Classic View. 2. Move around some panels. Close them. Don t worry. Mix everything up.

5 3. Now, when you want to get back to the default, Classic view, simply go to the Workspace dropdown menu and select Reset Classic. Voila! Document Toolbar o Located right above an open document o View options Code Screen shows only code Split Screen shows both code and design mode Design Screen only shows design mode (which is an editable visual representation of what the page will look like) Live View This displays what the document will look like in a web browser (but it is non- editable) Multiscreen Preview Lets you look at your webpage in a variety of screen sizes (e.g. desktop, tablet, smartphone) Preview in Browser Take a look at what your page will look like in Safari Chrome, etc.

6 Other advanced options File Management o Upload/download files to server Code Validator o Check to make sure your code is up to industry standards Browser Compatibility o To make sure that code will work across all major browsers Visual Aids o Turn on/off visual design aids Title Function Here you can give a title to your page! 1. Type the title that you d like in the box, then press enter 2. Now, go to the Preview in Browser icon and preview the page in a browser of your choice. a. Dreamweaver will prompt you to save your document. Save it to the desktop. b. The page will now open in the browser. Your title will be at the top of the window!

7 c. Now go over to the left of the document toolbar and change the view to Code view. In between the <head> tags, you will see <title> tags have been added by Dreamweaver, with your title in between. Property Inspector o Very important and often used tool in Dreamweaver o Allows you to change the properties of items in your document by altering the HTML or CSS Insert Panel o Another very useful tool. o This lets you insert objects into the document, while Dreamweaver generates the code for you. II: Create a New Project 1. Let s close the previous document that we were working with. Don t save it (unless you really want to ;D) 2. Note that now we have a blank screen. Where is the Welcome Screen? It only comes on when we start Dreamweaver. 3. So, to start a new document, select File > New.

8 4. In the window that opens, let s go ahead and keep our Page Type as HTML and our Layout as <none>. In the DocType dropdown, choose HTML5, as this is the latest HTML standard. 5. Now, click Create. That s it! III: Changing HTML structure 1. Explore headings a) Find some text online and copy and past it into the document in Design View. b) Select a line with your mouse. c) Go the Property Inspector d) In the Format dropdown, select Heading 1. e) You will see the text become larger and bolder. f) Look over to the code. You will see the Header 1 tags, <h1> and </h1>, surrounding your text. g) Play around with changing the Format option for other lines of text to make different headings. 2. Play with bold and italics a) Select some text, and make it bold or italic using the HTML section of the Property Inspector.

9 b) Look at the code after doing so. You will see how text that you have made bold is surrounded by <strong> tags, and text that is italic is surrounded by <em> tags. 3. Let s create some lists. a) Select some separate lines of text in Dreamweaver. b) Using the Property Inspector, make an Unordered List (a list that just has bullet points) by hitting the icon with the bullets. Note in the code view that your text is now surrounded by <ul> tags (<ul> for unordered list ). c) Now select your list and make it into an Ordered List. Now check out the code. The <ul> tags have now become <ol> tags (you guessed it, <ol> stands for ordered list ). d) These procedures have been similar to working in Microsoft Word. But it is not the same. We are providing HTML structure to our content. We are simply selecting text and hitting icons, but Dreamweaver is generating HTML code for us. IV: Adding Links o Of course the Internet is based upon hyperlinks. So let s make some. 1. Select a word that you d like to make a link. 2. Now go to the Insert Panel (up at the top in Classic View), and select the little icon that looks like a chain.

10 3. This brings up a dialog box. We can see that the text in the Text field is the text that we have selected. Now, copy a URL and paste it into the Link field. Press ok. 4. Preview your page in a browser. You now have a link. 5. If you want to make your link open up in a new tab, select the text again, and take a look at your Property Inspector. You will see a field for Target. Select _blank. Now the link will open in a new tab. 6. As always, check out how the code has changed. A pair of <a> tags are now surrounding the text that you made a link. Note the URL is inside of the opening <a> tag. Looking at the code after making a change in Dreamweaver is a good way to learn HTML code for beginners. V: Put an Image into Your Document 1. We are learning some good basics. But so far we just have a bunch of text. Let s add some pictures to make our webpages look interesting. 2. Find an image on Google Images and save it to your desktop. 3. In Design View, put your cursor where you would like to insert a picture. 4. Now, go to the Insert Panel, and insert the image by browsing to it and selecting it from your desktop. 5. Now you have added a picture. Look at the code, and see that an <img> tag has been added. Note the width and height attributes within the

11 <img> tag. Go back to Design view, and try resizing the picture by dragging on its corner. Watch the code in Code View change. 6. Let s make the image into a link! a. Click on your image in design view. b. The Property Inspector will change to show a thumbnail of your image with some options. c. You will see a field in which to enter a Link. d. Paste your URL in there and you re good to go! VI: Working with a Starter Document 1. So we have done some very basic stuff. But web layout gets more complicated and time consuming. If you want a head start in creating a webpage or website, start with one of the template documents that Dreamweaver features. 2. Let s close our HTML documents (save yours if you like). 3. Let s choose File > New 4. In the window that opens, make sure that your Page Type is still HTML, and that your DocType is HTML5. 5. Now look through the available Layouts. Choose the one that says 2 column fixed, left sidebar, header and footer. 6. First take a look at the Design View and get a sense of the page layout. Next, look at the Split screen, and check out the code. You will see that

12 there is a lot of code here. You will see some code at the top of the document that has some pink text at it s beginning. This is the CSS, which is used to style the page. The HTML is below the CSS. There is also some grayed out text. These are comments, which are intended to help the user understand more about the code. They are ignored by the browser and do not affect anything on the webpage when it is displayed. VII: Let s change some CSS here. o Change the background color 1. Find the CSS text that looks like this:.header { background- color: #00FF00; } Select it. Look at the CSS Styles panel on the right side of the interface. Note that it is showing our background color. 2. Click and hold on the color square and change the color. Note the change in the CSS code. o Change the size of an object 1. Select the content area of the page by left clicking on the corner of the main content area. You will see that the element is selected with a blue outline. 2. Go over to your CSS Panel, and look at the properties listed there. We see that the width is 780px. Let s imagine that we want to make the area where our text content displayed narrower.

13 3. Double click on 780px. 4. The CSS Rule Definition dialog box will open up. 5. Find the Width field, and change it to 300px. 6. Note the change in both the Design and code views! VIII: Congrats! You ve just made your first step towards learning web design. Of course, there s a lot more to be learned, so check out the Resources below. IX: Other Resources Check out these other resources to learn more about Dreamweaver: i. tutorial/ ii. lynda.com (TC students have a FREE membership!!) And check out these sites to learn more about HTML and CSS: iii. iv.

Table Basics. The structure of an table

Table Basics. The structure of an table TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that