CS Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!

Size: px
Start display at page:

Download "CS Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!"

Transcription

1 CS 1033 Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Lab 06: Introduction to KompoZer (Website Design - Part 3 of 3)

2 Lab 6 Tutorial 1 In this lab we are going to learn how to make our pages a bit more attractive by changing the fonts, font sizes, colours, etc Once you have built your webpage, you apply style rules to change the look and feel of the page. Objectives: Upon completion of tutorial 1, you should be able to: Define a style rule in a css file Using Notepad, create a blank CSS style sheet file that has a.css extension Using KompoZer, attach the.css file to a webpage Create at least 3 style rules for a heading HTML tag on a webpage. Create style rules for a table. Create style rules to change how the links look. Remove style rules that have been created. Use a browser to check to see if the style rule was applied to the heading. SETTING UP YOUR FOLDERS 1. Browse to your memory stick (likely your F: drive), and create a new subfolder within the cs1033 folder called lab Download this file: to your lab06 folder and unzip it in the lab06 folder (right click on the.zip file and then choose extract all). You should now have a folder call lab06/canada/canada on your memory stick. 3. Open KompoZer and create a new website by clicking on the Edit Sites button. 4. You will then see the Publish Settings window.. In the Site Name: textbox type: Canada Part Two 5. Click on the Select directory button and navigate to your lab06/canada/canada folder that you just unzipped on your memory stick. Click OK and then OK again. 6. The Canada Part Two Website should now be listed in the Site Manager Page. Click on the + symbol next to the Canada Part Two Website name to expand the folder and make sure you can see the three.html files and the images. folder you created earlier. 7. Style rules are used to create the Look and Feel of your webpage (e.g. the font you pick or the font size you pick for your headers). You can just store the rules right inside each webpage (these are called internal rules) but if you do this, then if you create a rule that you want to use on several pages, you have to rebuild the rule over and over again in each page. AND if you want to slightly modify a rule, you will need to go back to each page to modify the rule, you can t just modify it once and apply it to all the pages. This is why it is preferable to use EXTERNAL style rules. External style rules are placed in an external file (a.css file, a cascading style sheet file) and then you just attach the.css file to each of your webpages. Then, when you want to change the font size for your heading 1 headers, it changes the font size on ALL the.html files heading 1 headers that have been attached to that.css file.

3 8. KompoZer allows you to attach a.css file but it does NOT allow you to create one, so to create our.css file, we need to open a very simple text editor like Notepad on a Window machine or TextEdit on a Mac. If you are using a Mac to do your assignments, make sure you have set TextEdit to Make Plain Text as shown in this picture We are going to use Notepad in the labs because we are on Windows machines. Open Notepad and just select File>Save As and from the Save as type: dropdown box select All Types and save the blank file as mystyles.css IN the lab06/canada folder (NOT into the images folder, directly in the canada folder): This creates an empty file that we will now use in KompoZer to hold our style rules. 9. Go back to the KompoZer window and hit the refresh button so that you can now see the mystyles.css file under your Canada Part Two area: 10.Double click on the index.html file to open it. We will give it some styles. We are going to use the CaScades tool button to build the style rules. Please note, the good thing about KompoZer is that it is FREE, the bad thing is that it is a bit buggy, if things don t seem to be working, try to close KompoZer and open it again, that often fixes thing! Click on the CaScades Button.

4 11.You will now see the CSS Stylesheets window. This is where you will build your rules. First we will attach our mystyles.css to the index.html page. Click on the dropdown box at the top left corner and pick Linked Stylesheet: 12.Then click on the Choose File button and find the mystyles.css file in your canada folder and click on Open: 13.At this screen click on the Create Stylesheet button BEFORE clicking on the OK button, so you see this (this is the one time when it is okay to see the full path to your stick, KompoZer doesn t include it here in the html): 14.Then click on the OK button, you will go back to your index.html file. You have now linked the mystyles.css file to index.html file. If you click on the source tab, you will see the HTML tag that was just created to do this:

5 CREATING SOME STYLE RULES 15.In KompoZer, click on the CaScadeS button again and click on the mystyles.css along the left. 16.Click on the little left most dropdown box and select Style rule 17.We will create a style for the heading 2 headers. Make sure the radio button style applies to all elements of type is selected and then click on the dropdown box and select h2: 18.Then click on the Create Style rule button: 19.You will see a blank box, you can type your rule in here if you know the syntax but it is easier to use the tabs. Click on the Text tab and then select the Color box and pick the dark red color and hit the OK button: 20.For Font family select predefined Arial, Helvetica, sansserif and for Case: select Upper case as shown here:

6 21.Click back on the General Tab and you will see that KompoZer is building the rules for h2 headings in the big white box: 22.Let s build another rule. In the CSS stylesheets window (click on the CaScades button again if you lost this window), click on the mystyles.css file. Select the little dropdown box in the top left corner and select Style rule. Then select style applied to all elments of type and select body from the dropdown box and then click on the Create Style rule button so you see the white box again that will hold the rules. 23. Click on the Background Tab and click on the Color picking box and select a light pink colour:

7 24.Then click on the Text tab and set the predefined font family to Arial, Helvetica, sansserif and the Color to white: 25.Hit the OK button so you go back to the index page. 26.Hit the Cascades button once more to bring on the CSS window and select the mystyles.css file and select the little dropdown on the top left and select Style rule. 27.Make sure the style applied to all elements of type radio button is selected and this time, rather than using the dropdown box, type the word table into the white box and hit the Create Style rule button.

8 28.We are going to build some rules for the table. Select the Background Tab and select the color picker and select a dark red. 29.Close KompoZer and open your index.html file to see what your page looks like in a browser (just find your canada folder using Windows Explorer and click on the index.html file). Make sure everything looks good (our Heading 2 might not be showing well now (the red on red), we will fix that in a minute). 30.Open KompoZer again, double click on the index.html file and then click on the CaScadeS button. In the CSS Stylesheets window, double click on the mystyles.css along the left. 31.Now the blue links are not very easy to read over the dark red background. We can change their colour as well. Then click on the tiny dropdown box along the top left and select Style rule again 32.Select the radio button called custom style rule and type a:link into the textbox and then hit the Create Style rule button.

9 33.Click on the Text tab and change the Color to a grey colour. 34.We can also modify the colour of links that the user has visited (already clicked on). Do all the same steps as above but this time, instead of typing a:link, type a:visited and pick a colour you think will work well for this page. You could even change the color when the user hovers over a link by doing everything as you did above but instead of a:link type a:hover.for the a:hover try setting the background color or font size and check out the results in a browser. Note: if you do create a rule for a:hover, it MUST be done after the a:visited and a:link rules. CHECKING YOUR STYLE RULES IN THE BROWSER AND DELETING EXISTING STYLE RULES 35.Close the CaScades window and preview your page in the browser. Notice that the heading 2 is now a bit dark. We can also modify rules that we have built. Go back to KompoZer and click on the CaScades button and then, in the CSS Stylesheets window double click on the mystyles.css file along the left. Then click on the h2 rule. 36.Then click on the Text tab and pick a lighter colour like grey or white. Change the Font Size to 200%.

10 37.Create one more new style rule on Heading 3, while in CaScades (CSS Stylesheets window) a. Double click on mystyles.css b. Click on the small top left dropdown and pick Style rule c. Make sure radio button style applied to all elements of a type is selected d. From the dropdown to the right of the text box, select h3 e. Click on Create Style rule f. Click on the Background Tab g. Click on the Color picker box and pick bright yellow. h. You should now see this: 38.Notice how this style does NOT look good. We can delete style rules also. Click on the h3 along the left and hit the red X at the top. This will delete a style rule: 39.Once you hit the X, the rule should disappear. Then click on the OK button to make the CSS Stylesheets window disappear. 40.Preview your index.html file in the browser. Notice how the index.html page looks good but the provinces.html page and the history.html page still have no styling. We will fix that in the next tutorial.

11 Lab 6 Tutorial 2 Objectives: Upon completion of tutorial 2, you should be able to: Attach a style sheet that you have built to a webpage that has no styling. Create a class and give that class some styling rules Select a section of text and apply the class to the text. Create a class for images and give that class some styling rules Apply that class to some images. ATTACHING THE STYLE SHEET FILE TO THE OTHER PAGES IN YOUR SITE. 1. Open KompoZer and double click on the file provinces.html 2. Click on the CaScadeS button to bring up the CSS Stylesheets window 3. Click on the small dropdown button in the top left corner and select Linked stylesheet 4. Click on the Choose File button and select the file mystyles.css and click on the Open button 5. Click on the Create Stylesheet button and the provinces.html page should now have styling. Then click on the OK button and hit the Save button for provinces.html 6. Do the same steps above for the history.html file to give it styling rules. 7. Preview your 3 pages in a browser. 8. In KompoZer, double click on the provinces.html page. 9. Click on the CaScadeS button to bring up the CSS Stylesheets window. 10.Double click on the mystyles.css file along the left. 11.Click on the small dropdown in the top left corner and select Style rule 12.This time we are going to create a CLASS. A class is a special HTML identifier that says when we put this identify on blocks of text, we want those text blocks to all have the same style rules. Then we will build the style rules for the class. We can give the class any name we want but it cannot have spaces in it (it should just be descriptive letters, like, for example: provfacts). We will build one now. From the General Tab, select the radio button: style applied to all element of class and then type in the name.provfacts NOTE: KompoZer puts the. in for you, you just need to type provfacts. Then hit the Create Style rule button.

12 13.After the blank Style rule box comes up under the General tab, click on the Text Tab and select Use custom font family and from the dropdown menu select Arial Black. Select a color of light grey, select Alignment of Left. Then hit the OK button to close the CSS Stylesheets window. 14.In KompoZer, in your provinces.html file, select all the text under the British Columbia heading, the facts about British Columbia (but don t highlight the heading). 15.From the second dropdown box in the menu area, select the.provfacts 16.You should now see that text modified so that it has all the rules you just put into the.provfact class. Now select the Alberta facts and do the same thing. 17.Assign the class to each of the province s facts. Save your province.html file and reload it in the browser. 18.Close KompoZer and reopen it and double click on the provinces.html file. 19.Click on the CaScadeS button and create a new style rule for images by: clicking on mystyles.css, selecting the Style rule from the little dropdown box, selecting style applied to all elements of type and typing img into the box that holds the type of HTML tag you want to modify. (<img> is the HTML tag to modify images) Then click on the Create Style rule button. 20.Click on the Borders Tab and select Top: groove, Width: medium and Color: #ffff66 Then click on the OK button. Notice that this puts a yellow border around ALL the images(like the banner) and we just wanted a border around the flag images. To fix this, we should use classes instead. In the CSS Stylesheets window, delete the rule for img. 21.In the CSS Stylesheets window, double click on the mystyles.css file, then the dropdown

13 box>style rule, then click on style applied to all elements of class and then type the name.flagimg for the class name and then hit the Create Style rule button. 22.Then click on the Borders tab and select Top: solid Width: thick: Color: #ffcccc (a pink color). 23.Then click on the OK button to close the CSS stylesheets window and back to the provinces.html file and hit the Save button and CLOSE KompoZer. 24.Open KompoZer again and double click on the provinces.html file 25.Right click on the BC flag image and select Image Properties to bring up the Image Properties window. Click on the Advance Edit button 26.Now we can set the class for this image. In the Attribute dropdown box, select class. In the Value: box type the new class name we just made up: flagimg (do NOT type the.). Then hit the OK button. 27.Hit the OK button again, now you should see the border around the image. 28.Do the steps above to put the border on all the flags. 29.Save your provinces.html file and reload it in the browser to see it.

14 Lab 6 Tutorial 3 Objectives: Upon completion of tutorial 3, you should be able to: Look at HTML code and see why things are displaying correctly Add rollover buttons to your site. Switch the external style sheet that is used and preview the differences. Debug a site that has some issues. DEBUGGING A WEBPAGE 1. In your browser, open up the file provinces.html. Notice how it has an extra line. Sometimes the only way to figure out why extra lines are showing up is by taking a look at the HTML codes. 2. From the image above, we can see that the extra line is INSIDE the table (because the line has the darkred background and we put that background on the table). So when we look at the codes, we should look AFTER the <table> tag. Also notice the line is before the banner. So we should look BEFORE the <img> tag. 3. Go back into KompoZer and open the province.html page and click on the Source tab at the bottom to see the HTML codes. You will likely see something like this: 4. Try to find the <table tag near the top and the <img tag near the top (the <img tag should be pointing to our banner).

15 5. Notice the <h1> tag. That is still there from lab 4. When we removed the text and inserted the banner image, we didn t get all of the tags, and the <h1> and </h1> tags are still there. Remove BOTH of those tags in the Source view. Make you sure you get the whole of tag <h1> and the whole of tag </h1> 6. Save your file and reload it again in the browser. Now that extra line should be gone. Sometimes you will need to look at the HTML tags to figure out why things aren t lining up. KompoZer tries to make it so that you shouldn t have to do this very often, but if you get really stuck, look at the tags and you might figure out the problem yourself! ADDING ROLLOVER BUTTONS 7. Our text links (Home, Provinces, History) are okay but lets add some buttons to make it look a bit neater. The length of your buttons should add up to the length of your table. We need 3 buttons and our table is 1000 pixels, so in our case, we made each button about 333 pixels wide and we stored them in the canada/images folder (remember to put all your images in your images folder) 8. In KompoZer, double click on your index.html file. Right under the Canada banner, highlight(select) everything in the second row (the HOME PROVINCES and HISTORY) 9. Hit the delete key to delete these 3 links.

16 10.Put your mouse in the first cell and click on the Image button and then on the Image Location folder icon to find the image and navigate to the lab06/canada/images folder and select the file called home.jpg, then fill in Home Page for both the Tooltip and Alternative Text. Then click on the OK button. 11.Do the same thing for the Provinces Link (click on the middle cell and insert the image prov.jpg) and the Historys link (click in the last cell and insert the image history.jpg). Put Provinces Page and History Page for the Tooltip and the Alternate Text. It should look like the image below. 12.Save the file and reload it in the browser. The problem now is that we have lost our links To fix this click on the home button image and then click on the Image button to bring up the Image Properties window. 13.Click on the Link tag and then click on the folder icon and find the file index.html in the lab06/canada folder and click on the Open button. Make sure the URL is relative to page location checkbox was checked: 14.Do the same think for the Province button (link it to provinces.html) and the History button (link it to history.html) and make sure the URL is relative to page location checkbox is checked. 15.Save your index.html file and reload it in the browser and make sure that your links work again.

17 16.Go back to KompoZer and double click on index.html. Now we are going to make rollover buttons to make the buttons look even cooler. In order to do this, you need two images that you want to swap in and out when the user moves his/her mouse over the first image. For example, the buttons on this page are rollover buttons: (move your mouse over the buttons). The buttons on this site are also rollover buttons but a bit more subtle than the previous example: We will be using this image: and this image: as our rollover images. Click on the image of the Home button (so it is select) and then hit the Image Button to bring up the Image Properties window. 17.Click on the Advanced Edit button 18.The Advanced Edit button allows us to do the following: a. Give the image a name (we are going to give it the name homebutton). The name can be anything you want but it should have NO spaces in it and be lower case. b. Create a command that changes the image s source (i.e. the location for the image) when the user moves their mouse OVER TOP of the image c. Create a command that changes the images source back to the original image when the user moves their mouse OUTSIDE of the image. THIS IS HOW YOU CREATE ROLLOVER BUTTONS. 19.First we need to give the image a name that we can use for referring to it. From the Attribute dropdown box, select Name. In the Value type the name: homebutton

18 20.Now we need to make the image change when the user puts his/her mouse over the image. In this same window, click on the JavaScript Events tab. From the Attribute dropdown box select onmouseover. 21.In the Value textbox type this exactly: document.homebutton.src = "images/homeroll.jpg" What this: document.homebutton.src="images/homeroll.jpg" means is for this document (i.e. this webpage) find the image with the name of homebutton (i.e. the home button image), make its picture (source or src) when the user moves their mouse over (onmouseover) this object (the homebutton image) be the homeroll.jpg file in the images folder, i.e. the file: images/homeroll.jpg. 22.Do not hit the OK button yet!

19 23.Now we need to make the image change BACK to the original image when the user moves his/her mouse OUT (away from) the image. From the Advanced Editor, still on the JavaScript Events tab, click on the dropdown menu for the Attribute: and select onmouseout 24.In the Value: area type the following text exactly: document.homebutton.src = "images/home.jpg" 25.Then click on the OK button in the Advanced Property Editor window and the OK button in the Image Properties window. 26.Now do the same think for the Province button the index.html page: a. Double click on the prov.jpg image to bring up the Image Properties window b. Click on the Advanced Edit button c. From the Attribute dropdown box, select name d. In the Value: box, type the name of provbutton e. Click on the JavaScript Events tab f. From the Attribute dropdown box, select onmouseover g. In the Value: box, type document.provbutton.src = "images/provroll.jpg" h. From the Attribute dropdown box, select onmouseout i. In the Value: box, type document.provbutton.src = "images/prov.jpg" j. Click OK and then click OK k. Save your file and reload it in the browser to check the second button. 27.Now do the same thing for the History button make it a rollover button. Remember: whatever name you give the history button is the same name that must be between the document. and the.src= images/historyroll.jpg 28.The problem now is that our index.html file has the linked and working buttons but not the other pages. We are going to copy the table that is holding the banner and the buttons to the other pages so that we don t have to rebuild all the links and rollover buttons again. In KompoZer, double click on the index.html file. Click once on the banner image and then right click. Select Table Select>Table. This should select the table containing the banner and the buttons. 29.From the Edit Menu, select Copy. 30.Double click on the provinces.html file to open it in a tab.

20 31.Click on the banner image and then right click and select Table Delete>Table to delete the table with the banner and links 32.Keep your cursor in the same position and paste back in the table and buttons that you just copied: Edit>Paste Now your rollover buttons and banner should be in the provinces.html file. Save your provinces.html file. 33.Follow the same steps as above to put the rollover buttons and links into the history.html file. Save your history.html file 34.Reload your page in the browser and double check all your links. 35.Everything should looks pretty good now. SEEING THE POWER OF EXTERNAL STYLE SHEETS We are now going to attach a different style sheet to index.html so that you can see how versatile CSS files can be. Just by switching the.css file for another.css file, you can totally change the appearance of your site! 36.Click on this link: and right click on the file canadastyle.css and select Copy Link Address 37. Go back to KompoZer and double click on the file index.html. Then click on the CaScases Button to bring up the CSS Stylesheet window. 38.Click on the mystyles.css and then click on the Red X to remove (unattach) this style sheet. 39.Click on the little dropdown in the top left corner and select Linked Stylesheet. 40. Paste the link you just copied into the URL textbox and then click on the Create Stylesheet Button. 41.Hit the OK button, save your file, and preview it in the browser. Click on the provinces link and this history link. Notice that they link to pages with the old style. 42.Add this new style sheet to the province.html and history.html. Save your files and preview them in the browser. Look at the province flags and see some of the cool things you can do with stylesheets!

21 Lab 6 Tutorial 4 Objectives: Upon completion of tutorial 4, you should be able to: Debug a site with errors using KompoZer. Upload your folder to a webserver and check your work DOWNLOAD AND SETTING UP THE SITE 1. Here is a silly little site with FIVE errors on the home page. Try to identify the 5 errors on the home page. 2. Right click on the index.html page in the browser to look at the HTML tags. You should be able to see some problems immediately. 3. Near the bottom, notice the link to the turnip image: Now look here at the list of images: and see if you can figure out why that yummy turnip doesn t appear propertly. 4. Download this zipped file containing the site: and unzip the file somewhere on your memory stick. You should now see a folder called laurfav that contains.html files and an images folder. 5. Open KompoZer, and use the Site Manager to create a new site that points to the laurfav folde DEBUGGING FIND AND FIX THE ERRORS IN THIS SITE 6. All the errors that need to be fixed are in the index.html file. Try to figure out each error and fix them and save your index.html file in KompoZer. Remember to check: a. The case of the files names b. The location of the file names 7. Once you have fixed all the five errors, save index.html again. Now we are going to upload your site to a webserver to make sure it actually worked!

22 UPLOADING YOUR SITE TO TEST IT 8. Search for the program WinSCP on your machine and open that program. (If you have a MAC, Filezilla is a program that does the same thing as WinSCP). Fill in the boxes as follows: a. File protocol: SFTP b. Host name: cs1033.gaul.csd.uwo.ca c. Port number: 1033 d. User name: Your Western User ID e. Password: Your Western Password 9. Hit the Login Button 10.If prompted, click on the Continue Button 11.Find your laurfav folder on the left side and drag it over to the right side pane and drop it in the white area below. 12.Open a browser and go to this address: cs1033.gaul.csd.uwo.ca/~youruserid 13.Click on the laurfav folder. Test out your links and make sure it all works

CS Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!

CS Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! CS 1033 Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Lab 04: Introduction to KompoZer (Website Design - Part 1 of 3) KompoZer is a complete web authoring system that

More information

ADOBE DREAMWEAVER CS4 BASICS

ADOBE DREAMWEAVER CS4 BASICS ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,

More information

CS Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!

CS Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! CS 1033 Multimedia and Communications REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Lab 04: Introduction to KompoZer (Website Design - Part 1 of 3) KompoZer is a complete web authoring system that

More information

Dreamweaver CS6. Table of Contents. Setting up a site in Dreamweaver! 2. Templates! 3. Using a Template! 3. Save the template! 4. Views!

Dreamweaver CS6. Table of Contents. Setting up a site in Dreamweaver! 2. Templates! 3. Using a Template! 3. Save the template! 4. Views! Dreamweaver CS6 Table of Contents Setting up a site in Dreamweaver! 2 Templates! 3 Using a Template! 3 Save the template! 4 Views! 5 Properties! 5 Editable Regions! 6 Creating an Editable Region! 6 Modifying

More information

Using Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles

Using Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles Using Dreamweaver CC 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format

More information

Adobe Dreamweaver CC 17 Tutorial

Adobe Dreamweaver CC 17 Tutorial Adobe Dreamweaver CC 17 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site

More information

Adobe Dreamweaver CS5 Tutorial

Adobe Dreamweaver CS5 Tutorial Adobe Dreamweaver CS5 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,

More information

Title and Modify Page Properties

Title and Modify Page Properties Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics

More information

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Just so you know: Things You Can t Do with Word... 1 Get Organized... 1 Create the

More information

CS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)

CS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property

More information

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Get Organized... 1 Create the Home Page... 1 Save the Home Page as a Word Document...

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format our web site. Just

More information

Before you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website.

Before you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website. 9 Now it s time to challenge the serious web developers among you. In this section we will create a website that will bring together skills learned in all of the previous exercises. In many sections, rather

More information

How to lay out a web page with CSS

How to lay out a web page with CSS Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style

More information

Using Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles

Using Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles Using Dreamweaver 6 So far these exercises have deliberately avoided using HTML s formatting options such as the FONT tag. This is because the basic formatting available in HTML has been made largely redundant

More information

**Method 3** By attaching a style sheet to your web page, and then placing all your styles in that new style sheet.

**Method 3** By attaching a style sheet to your web page, and then placing all your styles in that new style sheet. CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look

More information

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

More information

Taking Fireworks Template and Applying it to Dreamweaver

Taking Fireworks Template and Applying it to Dreamweaver Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate

More information

Step 1 Download and Install KompoZer Step by step instructions to build your first web page using KompoZer web editor.

Step 1 Download and Install KompoZer Step by step instructions to build your first web page using KompoZer web editor. All Creative Designs HTML Web Tutorial for PC Using KompoZer New version 2012 now available at: http://www.allcreativedesigns.com.au/pages/tutorials.html Step 1 Download and Install KompoZer Step by step

More information

Title and Modify Page Properties

Title and Modify Page Properties Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics

More information

Microsoft Expression Web Quickstart Guide

Microsoft Expression Web Quickstart Guide Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,

More information

ORB Education Quality Teaching Resources

ORB Education Quality Teaching Resources These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best

More information

Locate it inside of your Class/DreamWeaver folders and open it up.

Locate it inside of your Class/DreamWeaver folders and open it up. Simple Rollovers A simple rollover graphic is one that changes somehow when the mouse rolls over it. The language used to write rollovers is JavaScript. Luckily for us, when we use DreamWeaver we don t

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 Using Dreamweaver CS6 7 Dynamic HTML Dynamic HTML (DHTML) is a term that refers to website that use a combination of HTML, scripting such as JavaScript, CSS and the Document Object Model (DOM). HTML and

More information

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

Dreamweaver Tutorial #2

Dreamweaver Tutorial #2 Dreamweaver Tutorial #2 My web page II In this tutorial you will learn: how to use more advanced features for your web pages in Dreamweaver what Cascading Style Sheets (CSS) are and how to use these in

More information

CSS Tutorial Part 1: Introduction: A. Adding Style to a Web Page (3 options):

CSS Tutorial Part 1: Introduction: A. Adding Style to a Web Page (3 options): CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).

More information

CSS worksheet. JMC 105 Drake University

CSS worksheet. JMC 105 Drake University CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html

More information

Lesson 5 Introduction to Cascading Style Sheets

Lesson 5 Introduction to Cascading Style Sheets Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition 1 Objectives Create a Cascading Style Sheet. Control hyperlink behavior with CSS. Create style classes. Share style classes

More information

Beginners Guide to Snippet Master PRO

Beginners Guide to Snippet Master PRO Beginners Guide to Snippet Master PRO This document assumes that Snippet Master has been installed on your site. If not please contact the Bakas IT web team at webreg@bakasit.com.au. Initial Login Screen...

More information

NVU Web Authoring System

NVU Web Authoring System NVU Web Authoring System http://www.nvu.com/index.php Table of Contents Using Nvu as Your Web Page Authoring System: Getting Started Opening a page, saving, and previewing your work...3 Formatting the

More information

Title: Jan 29 11:03 AM (1 of 23) Note that I have now added color and some alignment to the middle and to the right on this example.

Title: Jan 29 11:03 AM (1 of 23) Note that I have now added color and some alignment to the middle and to the right on this example. Title: Jan 29 11:03 AM (1 of 23) Note that I have now added color and some alignment to the middle and to the right on this example. Sorry about these half rectangle shapes a Smartboard issue today. To

More information

REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!

REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! CS 1033 Multimedia and Communications Lab 07: Introduction to Animation using Photoshop REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! LAB #7 - Exercise 1 Objectives: Upon completion of Exercise 1 you

More information

Site Owners: Cascade Basics. May 2017

Site Owners: Cascade Basics. May 2017 Site Owners: Cascade Basics May 2017 Page 2 Logging In & Your Site Logging In Open a browser and enter the following URL (or click this link): http://mordac.itcs.northwestern.edu/ OR http://www.northwestern.edu/cms/

More information

Joomla! 2.5.x Training Manual

Joomla! 2.5.x Training Manual Joomla! 2.5.x Training Manual 1 Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several

More information

Tutorial 4. Activities. Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web

Tutorial 4. Activities. Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web Tutorial 4 Activities Code o Editor: Expression Web o Focus : Base Layout, navigation with folders, external stylesheets, Open up Expression Web Ensure that the editor is in code mode, down the bottom

More information

ICT IGCSE Practical Revision Presentation Web Authoring

ICT IGCSE Practical Revision Presentation Web Authoring 21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:

More information

Dreamweaver Basics Outline

Dreamweaver Basics Outline Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working

More information

AURUM Metro Navigation

AURUM Metro Navigation AURUM Metro Navigation End User Document Version 1.0 Oct 2016 Table of Contents 1. Introduction... 3 2. Initialization... 4 2.1 Create Metro Navigation List... 4 2.1.1 Adding the Metro Navigation Web part...

More information

Creating a Website Using Weebly.com (July 2012 Update)

Creating a Website Using Weebly.com (July 2012 Update) Creating a Website Using Weebly.com (July 2012 Update) Weebly.com is a website where anyone with basic word processing skills can create a website at no cost. No special software is required and there

More information

1.0 Overview For content management, Joomla divides into some basic components: the Article

1.0 Overview For content management, Joomla divides into some basic components: the Article Joomla! 3.4.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials

More information

Dreamweaver Website 1: Managing a Website with Dreamweaver

Dreamweaver Website 1: Managing a Website with Dreamweaver Page 1 of 20 Web Design: Dreamweaver Websites Managing Websites with Dreamweaver Course Description: In this course, you will learn how to create and manage a website using Dreamweaver Templates and Library

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

Dreamweaver CS 5.5. University Information Technology Services. Training, Outreach, Learning Technologies, and Video Production

Dreamweaver CS 5.5. University Information Technology Services. Training, Outreach, Learning Technologies, and Video Production Dreamweaver CS 5.5 Creating Web Pages with a Template University Information Technology Services Training, Outreach, Learning Technologies, and Video Production Copyright 2012 KSU Department of Information

More information

Web Publishing Basics II

Web Publishing Basics II Web Publishing Basics II Jeff Pankin Information Services and Technology Table of Contents Course Objectives... 2 Create a Site Definition... 3 The Dreamweaver CS4 Interface... 4 Panels are groups of icons

More information

Handout created by Cheryl Tice, Instructional Support for Technology, GST BOCES

Handout created by Cheryl Tice, Instructional Support for Technology, GST BOCES Handout created by Cheryl Tice, Instructional Support for Technology, GST BOCES Intro to FrontPage OVERVIEW: This handout provides a general overview of Microsoft FrontPage. AUDIENCE: All Instructional

More information

ENGL 323: Writing for New Media Repurposing Content for the Web Part Two

ENGL 323: Writing for New Media Repurposing Content for the Web Part Two ENGL 323: Writing for New Media Repurposing Content for the Web Part Two Dr. Michael Little michaellittle@kings.edu Hafey-Marian 418 x5917 Using Color to Establish Visual Hierarchies Color is useful in

More information

Website Management with the CMS

Website Management with the CMS Website Management with the CMS In Class Step-by-Step Guidebook Updated 12/22/2010 Quick Reference Links CMS Login http://staging.montgomerycollege.edu/cmslogin.aspx Sample Department Site URLs (staging

More information

CAL 9-2: Café Soylent Green Chapter 12

CAL 9-2: Café Soylent Green Chapter 12 CAL 9-2: Café Soylent Green Chapter 12 This version is for those students who are using Dreamweaver CC. You will be completing the Forms Tutorial from your textbook, Chapter 12 however, you will be skipping

More information

Goldfish 4. Quick Start Tutorial

Goldfish 4. Quick Start Tutorial Goldfish 4 Quick Start Tutorial A Big Thank You to Tobias Schilpp 2018 Fishbeam Software Text, Graphics: Yves Pellot Proofread, Photos: Tobias Schilpp Publish Code: #180926 www.fishbeam.com Get to know

More information

Creating and Publishing Faculty Webpages

Creating and Publishing Faculty Webpages Creating and Publishing Faculty Webpages The UNF Template The template we are using today provides a professional page that is easy to work with. Because the pages are already built, faculty members can

More information

Introduction to Cascade Server (web content management system) Logging in to Cascade Server Remember me Messages Dashboard Home

Introduction to Cascade Server (web content management system) Logging in to Cascade Server Remember me Messages Dashboard Home Introduction to Cascade Server (web content management system) Last Updated on Jul 14th, 2010 The College of Charleston's web site is being produced using a Content Management System (CMS) called Cascade

More information

Architectural Engineering Senior Thesis CPEP Webpage Guidelines and Instructions

Architectural Engineering Senior Thesis CPEP Webpage Guidelines and Instructions Architectural Engineering Senior Thesis CPEP Webpage Guidelines and Instructions Your Thesis Drive (T:\) Each student is allocated space on the Thesis drive. Any files on this drive are accessible from

More information

How to create and edit a CSS rule

How to create and edit a CSS rule Adobe Dreamweaver CS6 Project 3 guide How to create and edit a CSS rule You can create and edit a CSS rule in two locations: the Properties panel and the CSS Styles panel. When you apply CSS styles to

More information

Using Dreamweaver. 4 Creating a Template. Logo. Page Heading. Home About Us Gallery Ordering Contact Us Links. Page content in this area

Using Dreamweaver. 4 Creating a Template. Logo. Page Heading. Home About Us Gallery Ordering Contact Us Links. Page content in this area 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan that is shown below. Logo Page Heading

More information

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually

More information

Cascading style sheets

Cascading style sheets Cascading style sheets The best way to create websites is to keep the content separate from the presentation. The best way to create websites is to keep the content separate from the presentation. HTML

More information

Dreamweaver CS5 Lab 4: Sprys

Dreamweaver CS5 Lab 4: Sprys Dreamweaver CS5 Lab 4: Sprys 1. Create a new html web page. a. Select file->new, and then Blank Page: HTML: 2 column liquid, left sidebar, header and footer b. DocType: XHTML 1.0 Strict c. Layout CSS:

More information

FrontPage 2000 Tutorial -- Advanced

FrontPage 2000 Tutorial -- Advanced FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right

More information

E-Business Systems 1 INTE2047 Lab Exercises. Lab 5 Valid HTML, Home Page & Editor Tables

E-Business Systems 1 INTE2047 Lab Exercises. Lab 5 Valid HTML, Home Page & Editor Tables Lab 5 Valid HTML, Home Page & Editor Tables Navigation Topics Covered Server Side Includes (SSI) PHP Scripts menu.php.htaccess assessment.html labtasks.html Software Used: HTML Editor Background Reading:

More information

Creating Web Pages with SeaMonkey Composer

Creating Web Pages with SeaMonkey Composer 1 of 26 6/13/2011 11:26 PM Creating Web Pages with SeaMonkey Composer SeaMonkey Composer lets you create your own web pages and publish them on the web. You don't have to know HTML to use Composer; it

More information

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Items needed to complete the Navigation Bar: Unit 21 - House Style Unit 21 - Graphics Sketch Diagrams Document ------------------------------------------------------------------------------------------------

More information

Dear Candidate, Thank you, Adobe Education

Dear Candidate, Thank you, Adobe Education Dear Candidate, In preparation for the Web Communication certification exam, we ve put together a set of practice materials and example exam items for you to review. What you ll find in this packet are:

More information

Dreamweaver Basics Workshop

Dreamweaver Basics Workshop 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

More information

Using Dreamweaver To Edit the Campus Template Version MX

Using Dreamweaver To Edit the Campus Template Version MX Using Dreamweaver To Edit the Campus Template Version MX Tennessee Tech University Clement Hall 215 Dreamweaver is an HTML (Hypertext Markup Language) editor that allows you to create HTML pages. This

More information

SPARK. User Manual Ver ITLAQ Technologies

SPARK. User Manual Ver ITLAQ Technologies SPARK Forms Builder for Office 365 User Manual Ver. 3.5.50.102 0 ITLAQ Technologies www.itlaq.com Table of Contents 1 The Form Designer Workspace... 3 1.1 Form Toolbox... 3 1.1.1 Hiding/ Unhiding/ Minimizing

More information

Requirements Document

Requirements Document GROUP 9 Requirements Document Create-A-Page Matthew Currier, John Campbell, and Dan Martin 5/1/2009 This document is an outline of what was originally desired in the application in the Project Abstract,

More information

Creating Simple Links

Creating Simple Links Creating Simple Links Linking to another place is one of the most used features on web pages. Some links are internal within a page. Some links are to pages within the same web site, and yet other links

More information

PlayerLync Forms User Guide (MachForm)

PlayerLync Forms User Guide (MachForm) PlayerLync Forms User Guide (MachForm) Table of Contents FORM MANAGER... 1 FORM BUILDER... 3 ENTRY MANAGER... 4 THEME EDITOR... 6 NOTIFICATIONS... 8 FORM CODE... 9 FORM MANAGER The form manager is where

More information

Café Soylent Green Chapter 12

Café Soylent Green Chapter 12 Café Soylent Green Chapter 12 This version is for those students who are using Dreamweaver CS6. You will be completing the Forms Tutorial from your textbook, Chapter 12 however, you will be skipping quite

More information

IITS Workshop. Expression. Web 3

IITS Workshop. Expression. Web 3 IITS Workshop Expression Web 3 (for formerr users of FrontPage) Microsoft s basic web page software provides the same basic functionality ass its predecessor, while expanding on concepts like CSS and HTML

More information

Project 1: Creating a Web Site from Scratch. Skills and Tools: Use Expression Web tools to create a Web site

Project 1: Creating a Web Site from Scratch. Skills and Tools: Use Expression Web tools to create a Web site E00EW3.qxp 4/14/2007 3:17 PM Page 1 Workshops w Introduction The Workshop is all about being creative and thinking outside of the box. These workshops will help your right-brain soar, while making your

More information

Nauticom NetEditor: A How-to Guide

Nauticom NetEditor: A How-to Guide Nauticom NetEditor: A How-to Guide Table of Contents 1. Getting Started 2. The Editor Full Screen Preview Search Check Spelling Clipboard: Cut, Copy, and Paste Undo / Redo Foreground Color Background Color

More information

Eng 110, Spring Week 03 Lab02- Dreamwaver Session

Eng 110, Spring Week 03 Lab02- Dreamwaver Session Eng 110, Spring 2008 Week 03 Lab02- Dreamwaver Session Assignment Recreate the 3-page website you did last week by using Dreamweaver. You should use tables to control your layout. You should modify fonts,

More information

Designing the Home Page and Creating Additional Pages

Designing the Home Page and Creating Additional Pages Designing the Home Page and Creating Additional Pages Creating a Webpage Template In Notepad++, create a basic HTML webpage with html documentation, head, title, and body starting and ending tags. From

More information

Drupal 7 guide CONTENTS. p. 2 Logging In

Drupal 7 guide CONTENTS. p. 2 Logging In Drupal 7 guide Drupal is a widely used, open-source, free platform that has an easy-to-use content management system for updating websites. This guide was created by the Health Communication Core (www.healthcommcore.org)

More information

To illustrate how to set TAG styles the <body> and <h1> tags (for the BODY and the HEADING 1 styles) will be adjusted.

To illustrate how to set TAG styles the <body> and <h1> tags (for the BODY and the HEADING 1 styles) will be adjusted. Chapter The formatting of CSS pages is carried out by setting the required styles. There are four different types of styles: Class which are custom styles that you create. You did this in Chapter 12. Tag

More information

AGENT123. Full Q&A and Tutorials Table of Contents. Website IDX Agent Gallery Step-by-Step Tutorials

AGENT123. Full Q&A and Tutorials Table of Contents. Website IDX Agent Gallery Step-by-Step Tutorials AGENT123 Full Q&A and Tutorials Table of Contents Website IDX Agent Gallery Step-by-Step Tutorials WEBSITE General 1. How do I log into my website? 2. How do I change the Meta Tags on my website? 3. How

More information

CSS means Cascading Style Sheets. It is used to style HTML documents.

CSS means Cascading Style Sheets. It is used to style HTML documents. CSS CSS means Cascading Style Sheets. It is used to style HTML documents. Like we mentioned in the HTML tutorial, CSS can be embedded in the HTML document but it's better, easier and neater if you style

More information

A Quick-Reference Guide. To access reddot: https://cms.hampshire.edu/cms

A Quick-Reference Guide. To access reddot: https://cms.hampshire.edu/cms Using RedDot A Quick-Reference Guide To access reddot: https://cms.hampshire.edu/cms For help: email reddot@hampshire.edu or visit http://www.hampshire.edu/computing/6433.htm Where is... Page 6 Page 8

More information

Forms/Distribution Acrobat X Professional. Using the Forms Wizard

Forms/Distribution Acrobat X Professional. Using the Forms Wizard Forms/Distribution Acrobat X Professional Acrobat is becoming a standard tool for people and businesses to use in order to replicate forms and have them available electronically. If a form is converted

More information

Teach Yourself HTML5 & CSS 3: Week 5 Task 13 - Anchors Part 3

Teach Yourself HTML5 & CSS 3: Week 5 Task 13 - Anchors Part 3 http://www.gerrykruyer.com Teach Yourself HTML5 & CSS 3: Week 5 Task 13 - Anchors Part 3 In this task you will continue working on the website you have been working on for the last two weeks. This week

More information

Dreamweaver 101. Here s the desktop icon for Dreamweaver CS5: Click it open. From the top menu options, choose Site and New Site

Dreamweaver 101. Here s the desktop icon for Dreamweaver CS5: Click it open. From the top menu options, choose Site and New Site Dreamweaver 101 First step: For your first time out, create a folder on your desktop to contain all of your DW pages and assets (images, audio files, etc.). Name it. For demonstration, I ll name mine dw_magic.

More information

Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0. University of Sheffield

Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0. University of Sheffield Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0 University of Sheffield PART 1 1.1 Getting Started 1. Log on to the computer with your usual username

More information

The default style for an unordered (bulleted) list is the bullet, or dot. You can change the style to either a square or a circle as follows:

The default style for an unordered (bulleted) list is the bullet, or dot. You can change the style to either a square or a circle as follows: CSS Tutorial Part 2: Lists: The default style for an unordered (bulleted) list is the bullet, or dot. You can change the style to either a square or a circle as follows: ul { list-style-type: circle; or

More information

<body bgcolor=" " fgcolor=" " link=" " vlink=" " alink=" "> These body attributes have now been deprecated, and should not be used in XHTML.

<body bgcolor=  fgcolor=  link=  vlink=  alink= > These body attributes have now been deprecated, and should not be used in XHTML. CSS Formatting Background When HTML became popular among users who were not scientists, the limited formatting offered by the built-in tags was not enough for users who wanted a more artistic layout. Netscape,

More information

m ac romed ia D r e a mw e av e r Curriculum Guide

m ac romed ia D r e a mw e av e r Curriculum Guide m ac romed ia D r e a mw e av e r Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and

More information

Dreamweaver CS3 Lab 2

Dreamweaver CS3 Lab 2 Dreamweaver CS3 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.

More information

ICT IGCSE Practical Revision Presentation Web Authoring

ICT IGCSE Practical Revision Presentation Web Authoring 21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:

More information

Creating Forms. Starting the Page. another way of applying a template to a page.

Creating Forms. Starting the Page. another way of applying a template to a page. Creating Forms Chapter 9 Forms allow information to be obtained from users of a web site. The ability for someone to purchase items over the internet or receive information from internet users has become

More information

Dreamweaver: Web Forms

Dreamweaver: Web Forms Dreamweaver: Web Forms Introduction Web forms allow your users to type information into form fields on a web page and send it to you. Dreamweaver makes it easy to create them. This workshop is a follow-up

More information

A Frontpage Tutorial. Contents Page

A Frontpage Tutorial. Contents Page A Frontpage Tutorial Contents Page Page 1-2 Things to do and know before we start Page 3.How to save your web pages Page 4.Opening an existing web page Page 5..Creating more web pages Page 6-8.Adding tables

More information

Building TPS Web Pages with Dreamweaver

Building TPS Web Pages with Dreamweaver Building TPS Web Pages with Dreamweaver Title Pages 1. Folder Management 7 2. Defining Your Site 8-11 3. Overview of Design Features 12-22 4. Working with Templates 23-25 5. Publishing Your Site to the

More information

USING DRUPAL. Hampshire College Website Editors Guide https://drupal.hampshire.edu

USING DRUPAL. Hampshire College Website Editors Guide https://drupal.hampshire.edu USING DRUPAL Hampshire College Website Editors Guide 2014 https://drupal.hampshire.edu Asha Kinney Hampshire College Information Technology - 2014 HOW TO GET HELP Your best bet is ALWAYS going to be to

More information

Introduction to the MODx Manager

Introduction to the MODx Manager Introduction to the MODx Manager To login to your site's Manager: Go to your school s website, then add /manager/ ex. http://alamosa.k12.co.us/school/manager/ Enter your username and password, then click

More information

FRONTPAGE STEP BY STEP GUIDE

FRONTPAGE STEP BY STEP GUIDE IGCSE ICT SECTION 15 WEB AUTHORING FRONTPAGE STEP BY STEP GUIDE Mark Nicholls ICT lounge P a g e 1 Contents Introduction to this unit.... Page 4 How to open FrontPage..... Page 4 The FrontPage Menu Bar...Page

More information

Creating a Web Page Using SeaMonkey Composer

Creating a Web Page Using SeaMonkey Composer Name: Main: Because the World Wide Web has become such a central aspect of using computers, making web pages is a skill that is becoming both more important and easier. Only a few years ago, it was necessary

More information

OU EDUCATE TRAINING MANUAL

OU EDUCATE TRAINING MANUAL OU EDUCATE TRAINING MANUAL OmniUpdate Web Content Management System El Camino College Staff Development 310-660-3868 Course Topics: Section 1: OU Educate Overview and Login Section 2: The OmniUpdate Interface

More information

Start by launching Mozilla To start making a web page, go to File -> New -> Composer Page

Start by launching Mozilla To start making a web page, go to File -> New -> Composer Page Creating a Web Page using Mozilla Composer- A Free Open Source Application Emily Hebard IT Lab School of Information University of Texas at Austin Spring 2003 Objectives Orient to the Mozilla Composer

More information