Web Design - Css Layout (Page 1)
|
|
- Bartholomew Joseph
- 7 years ago
- Views:
Transcription
1 Web Design - Css Layout (Page 1) A CSS layout is made up of a set of nested div tags (rectangular containers), as seen below. We will give each div tag an ID so that we can target it with a CSS style of the same name and control how the div tag looks on screen. For example, the HTML code for the global div tag will look like this: <div id="global"></div> We will then make a corresponding CSS style ( #global ) that will control the look of that div tag. title bar body global banner menu content leftcolumn rightcolumn hr footer The colour of this area is controlled by the Background property of the Body tag. The global div tag is the overall container for the site. It defines the width and height of each page. global banner menu content leftcolumn footer rightcolumn
2 Web Design - Css Layout (Page 2) To get started, first create a New Site called Cafe Townsend. Choose Site > New Site. In the Site Set-up dialogue box type in a name for your Site. This is one of the few places in web design where you can use spaces and capitals. Name it Cafe Townsend for this exercise. Before we start putting any content on the page we will create a CSS Style Sheet that will control all the formatting for our website. Right-click on the site folder and choose New Folder from the menu. Click on the Local Site Folder button and navigate to the folder that contains your websites. Create a new folder and name it cafetownsend. Now select Advanced Settings and click on the folder icon and create a new folder in your site folder and name it images (Note: all lower case). Any images you import from outside your site will be automatically placed into this folder for you. Name the folder css (lower-case). Now we will create our first css file. Right-click on the css folder and choose New File from the menu. Click the box next to case-sensitive links checking. Name the file screen.css (lower-case). All of the CSS Style Rules we create for the site will be stored in this page. (see 04_Css Basics.pdf for more info on CSS Styles) Now double-click on the screen.css file to open it. We will now create our first style rule. On line 3 type (or copy and paste) the following code: Click Save and your files will now show in the Files Window. Now we will create a folder to store our development files. Right-click on the site folder and choose New Folder from the menu. * { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; } } Use the Tab key to move these 5 lines one tab to the right. Make sure you don t miss out the closing curly bracket. Name the folder dev (lower-case). Now we will create our first HTML file. Right-click on the site folder again and choose New File from the menu. All browsers have built-in values for many items and unfortunately many of those values are different in each browser. This, more than anything else causes most of the problems we experience when trying to get our HTML pages to display consistantly on all browsers. The code above resets all the default values back to zero for all items on the page. The asterisk * is a wild card character used in many programming languages to include all items. Save the page and click on the index.html tab to select the index page. Name the file index.html (lower-case). Now double-click on the index file to open it. Select Modify > Page Properties. Now we need to link the CSS page to our HTML page. At the bottom of the CSS Styles Panel click on the Attach Style Sheet button. Click on the Title/Encoding and give the page an appropriate Title and change the Document Type (DTD) to HTML 5. Use the Browse button to navigate to the screen.css page we just made and select it. Choose Screen as the Media from the dropdown list.
3 Web Design - Css Layout (Page 3) Now we will set up some styles for browser window. At the bottom of the CSS Styles Panel click on the New Style Rule button. Choose Tag as the Selector Type, and If Dreamweaver hasn t already done it for you, enter body in the Selector Name field. Make sure the Rule Definition field says screen.css, and click OK. A new dialogue box will open where you can now specify the characteristics of the body Tag. (i.e. everything in the browser window) In the Type Category specify the styles for text on the page. These values will apply automatically to all text unless overridden by another style closer to the item being styled. Select Arial, Helvetica, sans-serif for the Font-family from the dropdown list, 12px for the Font-size and type #4C0A02 for the font colour. In the Background Category choose the background colour for the body/browser window. (i.e. #720000) In the Block Category set the Text align to center. This will automatically centre your page in the browser widow for older browsers, like Internet Explorer 7 and 8, that don t comply with standard CSS rules. In the Background Category enter the background colour you want for your page. For this exercise we ll choose #FFF (white). To counteract the center align we had to put on the body for older browsers, we will now have to set the Text Align to left in the Block Category. Global Div Now we are going to create the global div (see page 1). This container will hold all our other div Tags on our page. In the Box Category enter the width and height as shown below. Uncheck the Same for all under Margin and enter the values as below. At the top of the screen, in the Insert Panel on the Common Tab click on the Insert Div Tag button. In the dialogue box that opens enter global into the ID field and click the New CSS Style button. This sets the width of the site to 980px and the height to 720px. The auto setting for Left and Right Margin allows the page to stay centred in the browser window for modern standards compliant browsers.
4 Web Design - Css Layout (Page 4) Banner Div Menu Div Now we will create the container (div) for the banner (see page 1). Now we will create the container (div) for the menu (see page 1). Before we do this, copy all the files from the _assets folder in the Dreamwevaer Tutorials folder into the images folder of your site. Then move the two txt files that you just copied over into the dev folder of your site. In Code View, delete the holding text Content for id banner Goes Here that Dreamweaver put in the div tag we just made. In the Insert Panel the Common Tab click on the Insert Div Tag button. In Code View, delete the holding text Content for id global Goes Here that Dreamweaver put in the div tag we just made. In the Insert Panel on the Common Tab click the Insert Div Tag button. Change Insert to After tag and change <div id= global > to <div id= banner > in the next dropdown menu on the right. Change Insert to After Start of tag and change <body> to <div id= global >. Enter menu into the ID field and click the New CSS Style button. Enter banner in the ID field and click the New CSS Style button. Confirm that the dialogue box looks the same as the one above. In the Background catergory choose #000 (black ) for the Background Color. Confirm that the dialogue box looks the same as the one above. In the Background catergory choose black for the Background Color. Then click the Browse button next to the Background image field and select the banner_graphic.jpg that is now in the images folder. In the Box catergory enter the width as 940px and height as 30px. Uncheck the Same for all box and set the Top padding to 15px and the Left padding to 40px. Set the Repeat field to no-repeat. In the Box catergory enter the width as 980px and height as 115px. Click OK, and then OK again in the Insert Div Tag box. Click OK, and then OK again in the Insert Div Tag box.
5 Web Design - Css Layout (Page 5) Content Div Left Column Div Now we will create the container (div) for the content (see page 1). Now we will create the container (div) for the leftcolumn (see page 1). This container will hold two other Div Tags, the leftcolumn and the rightcolumn. In Code View, delete the holding text Content for id content Goes Here that Dreamweaver put in the div tag we just made. In the Insert Panel on the Common Tab click the Insert Div Tag button. In the dialogue box change Insert to After tag and change <div id= global > to <div id= menu >. In the Insert Panel on the Common Tab click the Insert Div Tag button. In the dialogue box change Insert to After start of tag and change <div id= global > to <div id= content >. Enter leftcolumn in the ID field and click the New CSS Style button. Enter content in the ID field and click the New CSS Style button. In the Background category choose #CC9 for the Background Color. We will remove this color later, but for now it will help us to see where the columns sit so we can check that the layout is working correctly. In the Box category enter the width as 940px and height as 440px. In the Box category enter the width as 420px and height as 410px. and set the Float to left. In the Padding section uncheck the Same for all box and set the Top padding to 40px and the Left padding to 40px. Also in the Box Category, set the Right Margin to 30px. Click OK and then OK again in the Insert Div Tag dialogue box. Then click OK, and then OK again in the Insert Div Tag box.
6 Web Design - Css Layout (Page 6) Right Column Div Clear Both <hr> Tag Now we will create the container (div) for the rightcolumn (see page 1). Because we have floated our columns to get them to sit beside each other, this can cause problems in some browsers for any content that sits below the columns. In the Insert Panel on the Common Tab click on the Insert Div Tag button. In the dialogue box change Insert to After tag and change <div id= global > to <div id= leftcolumn >. We will put in an hr (horizontal rule) tag that sits below both columns with clear both applied to it to help negate those problems. This clears the line of HTML from the effects of any floats above it. While it is possible to use Dreamweaver tools to put in an hr tag, it is faster to code it by hand. In the Code View panel put your cursor after the closing tag for the rightcolumn and press enter to create a new line. Then put in the hr tag by typing <hr>. Your code should now look like this: Enter content in the ID field and click the New CSS Style button. Dreamweaver will enter the correct info into the fields of the New CSS Rule dialogue box that next opens. Highlight the hr tag in the code and in the CSS Styles Panel, click on the New CSS Rule button. In the Background Category choose #CC3 for the Background-color. We will remove this colour later. When the New CSS Rule dialogue box that opens, change the Selector Type to Tag. Dreamweaver should automatically enter hr in the name field. If it doesn t, just type it in yourself. In the Box category enter the width as 420px and height as 410px. Set the Float to left and uncheck the same for all box for Padding and enter 30px for the Left padding. In the Box Category enter 100% for the width and choose both from the dropdown beside the Clear field. In the Border category uncheck the same for all boxes and set the Left Style to solid, the Left Width to 1px and the Left Color to #4C0A02. In the Positioning Category set the Visibility to hidden. Then click OK, and then OK again in the Insert Div Tag box.
7 Web Design - Css Layout (Page 7) Footer Div Left Column Content Now we will create the container (div) for the footer (see page 1). Now we will put some content in the left column. In the Insert Panel on the Common Tab click the Insert Div Tag button. Delete the holding text Content for id "leftcolumn" Goes Here that Dreamweaver put in the leftcolumn Div we made earlier and type About Our Restaurant. Highlight that text and in the Properties Panel (at the bottom of the screen) change the Format from None to Heading 1. In the dialogue box that opens change Insert to After tag and change <div id= global > to <div id= content >. In the CSS Styles Panel click on the New Style Rule button. Enter footer in the ID field and click the New CSS Style button. In the New CSS Rule dialogue box that opens, delete all the text from the Selector Name field except h1, and change the Selector Type to Tag. Make sure the Rule Definition field says screen.css, and click OK. In the Type catergory enter 16px for the Font-size and #000 for Color. In the Type catergory enter 11px for the Font-size and #FFF for Color. In the Background catergory choose #000 for the Background Color. Though it doesn t show here the Font-weight is already Bold. (a preset value built into all Heading Tags (h1-h6) ). In the Box catergory enter the Margin as shown here and click OK. In the Box catergory enter the Width, Height and Padding as shown below. In Design view put your cursor is at the end of the text we just formatted and press Enter on the Keyboard. Copy the text from the text_leftcolumn.txt file that is in the dev folder and paste it into the page. At the bottom of the CSS Styles Panel click on the New Style Rule button. Then click OK, and then OK again in the Insert Div Tag box. In the New CSS Rule dialogue box that opens, change the Selector Type to Class, and type.boldred in the Selector Name field. In Code View, delete the holding text Content for id footer Goes Here. In the Insert Panel on the Text Tab click on the dropdown menu button at the very end and select Copyright from the list. Back on the page, put a space after the Copyright symbol and type Copyright 2012, Cafe Townsend. Make sure the style is being defined in screen.css
8 Web Design - Css Layout (Page 8) In the Type Category enter bold for the Font-weight, #900 for the Color and click OK. On the page highlight the words The name Cafe Townsend, then in the Properties Panel click on the Class dropdown menu and change the Class from None to boldred. Insert an Image In Design View make sure your cursor is at the end of the paragraph and press Enter on the Keyboard. In the Insert Panel on the Common Tab click on the Insert Image button. Naviagte to the images folder and choose the cafe_townsend_tables.jpg. Enter Cafe Townsend inside view into the Alterante Text field. Repeat the above process for the rightcolumn using the words World Famous Chef as the h1 heading, text_rightcolumn.txt for the paragraph text, and pan_seared_sesame_crusted_tuna.jpg for the image. Highlight the words Café Townsend s visionary chef and apply the boldred style to them. At this point we can see that our layout of the columns is working OK so we can get rid of the background colour we applied to the leftcolumn and rightcolumn earlier. In the CSS Styles Panel click on the #leftcolumn style, then click the background-color and click on the trash can at the bottom of the Panel. Now do the same for the #rightcolumn background-color style. You do not need to make new h1 and.boldred styles, just apply the existing ones. (see Page 1 above for an idea of how the page should be looking ) Create the Main Menu With your cursor in Design View NOT the Code View delete the holding text Content for id "menu" Goes Here that Dreamweaver put in the menu Div we made earlier and type the words below. Press Enter after each word (except Contact Us): Make sure you have the background-color style selected NOT just the column style or you will delete the entire column. If you didn t follow the instructions above correctly and have deleted your leftcolumn or right column style you will need to select the screen.css tab before you press Cmd+Z (undo) to restore it. Create a p (paragraph) style Because we set everything on the page back to zero with the first style we made (*), it means that there is no spacing between our paragraphs, so we need to create a style to give all p tags top and bottom padding. Home Cuisine Location Reservations Contact Us If you have done the above correctly your code will now look like this: At the bottom of the CSS Styles Panel click the New Style Rule button. In the New CSS Rule dialogue box that opens, change the Selector Type to Tag and type p in the Selector Name field. Make sure the style is being defined in screen.css Things will look a little strange in Design View, but don t worry we will fix that soon. The enter we put after each item will make it easier to turn this into an unordered list later. In Design View Highlight all of the links, by clicking at the end of Contact Us and dragging up to the start of Home, and in the Propeties panel click on the Unordered List button. Your code should now look like this: In the Box catergory uncheck the Same for all box and enter 5px for the Top and Bottom padding. On the page your paragraphs will now have proper spacing between them. And, yes, the menu will still be looking strange on the page. We will fix that next.
9 Web Design - Css Layout (Page 9) Create Links Highlight each Menu item and in the Properties panel at the bottom of the screen type the file name of the page you want it to link to in to the Link field. For example the word Home we will link to this page (index.html). Give each link an appropriate name and remember to keep them lowercase (i.e. the link to the Cuisine page will be cuisine.html ). When you have done that your code should look like this:. Things should be looking better on the page now. The Float we applied to the list allows the menu items to sit up beside each other and the 110px margin spaces the menu items out. Highlight one of the links again and in the CSS Styles panel click on the New Style Rule button. In the New CSS Rule dialogue box that opens, change the Selector Type to Compound and delete all the text from the Selector Name field except #menu a. Make sure the style is being defined in screen.css Styling the Menu Highlight one of the links and at the bottom of the CSS Styles panel click on the New Style Rule button. In the New CSS Rule dialogue box that opens, if Dreamweaver hasn t already done it for you, change the Selector Type to Compound and delete all the text from the Selector Name field except #menu li. In the Type catergory enter 16px for the Font-size, choose bold for the Font-weight, #FFF for the Color, and none for the Text-decoration. I T Make sure the style is being defined in screen.css On the page the menu items should now be styled correctly and look like the image below: In the Box catergory enter Left for the Float and for the Margin uncheck Same for all and enter 110px for the Right Margin. Create the Menu Hover effect To give the user better feedback we will now make the menu items change colour when the mouse hovers over them. In the CSS Styles panel click on the New Style Rule button. In the List catergory enter none for the List-stye-type. This will get rid of the bullet point on the left of the menu items. In the New CSS Rule dialogue box that opens, if Dreamweaver hasn t already done it for you, change the Selector Type to Compound and type #menu a:hover in the Selector Name field.
10 Web Design - Css Layout (Page 10) In the Type catergory enter #C30 for the Color and click OK. Use Lorem Ipsum (holding text) for the content on the other pages. You will need to install the Lorem Ipsum generator from the Dreamweaver Extensions folder in the Resources on the server, or use the generator at Change each image by double-clicking on it and choosing a new one from the images folder. Preview the page in the browser (F12 PC or opt F12 Mac) to see the rollover working. Creating the Other Pages Now that we have created the layout for the index page making the other pages is simply a matter of duplicating the index page and changing the text and images in the content are of the new pages. To do this make sure the index page is saved then choose File > Save As to create your other pages and name the new files the same as the links you created in the menu earlier. Remember that the file names need to be exactly the same as the links (NO Capitals and NO Spaces ). For example, the second link in the menu is to cuisine.html, so that is what we would name the new file. Choose File > Save As and name the next page location.html and so on for the other pages. When you are done you will now have five pages showing in the tabs area at the top of the screen. After you change each image make sure you change the ALT text for the image. ALT text needs to be more than one or two words and must be descriptive of the image without using the words image or picture. ALT text is just like text on the page so it can have spaces and capitals. For this exercise we will use the image file names for the ALT text. When you put the new text and images in make sure they don t go outside the bounds of the column div tags. If images or text extend beyond the div tags it can break your layout in some browsers. Now it is just a matter of changing the content on each page. Before changing the content on each page make sure you change the title on each page to make it appropriate for that page. If any of your pages look like the one above you will need to either delete some of the Lorem Ipsum text or choose a smaller image so that all the content fits within the column. Then change the text and images in each page to make content relevant for the page. First change the headings on each page to make them relevant for the page. For example, on the Cuisine page the heading in the left column would be changed to Our Cuisine and so on for the other pages. Don t worry about making any changes to the right column of the location page, we will insert a Google Map in there next.
11 Web Design - Css Layout (Page 11) Inserting a Google Map Now we will insert a Google Map into the Location page. In the Location page delete all the text and images from the right column. In the code view it should look like this. When you delete the content while in Design View you need to hit delete a couple of times on the keyboard after it appears that everything is gone. Look in the Code View to make sure that you have deleted all of the content. Highlight any code between the rightcolumn opening and closing tags and delete it. Delete any code between the rightcolumn opening and closing tags. Open FireFox and go to Google Maps (maps.google.com.au). Cafe Towsend doesn t actually exist so we will use the map reference for another restaurant. Type customs house restaurant, queen street, brisbane into the search field and press the search button. Once the page has loaded, click on the link button at the top left of the screen. Then Click inside the Paste HTML to embed in website field at the bottom of the dialogue box. Copy the code and return to Dreamweaver. In Code View and that your cursor is between the opening and closing tags of the right column. Then paste the code you copied from Google. Preview the page to make sure it is rendering OK and you are finished.
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
More informationDreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
More informationCREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5
CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - . Any navigational bar can be
More informationMicrosoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
More informationBasic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
More informationUsing an external style sheet with Dreamweaver (CS6)
Using an external style sheet with Dreamweaver (CS6) nigelbuckner.com 2012 This handout explains how to create an external style sheet, the purpose of selector types and how to create styles. It does not
More informationCreating Web Pages with Dreamweaver CS 6 and CSS
Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding
More informationAdobe Dreamweaver CC 14 Tutorial
Adobe Dreamweaver CC 14 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 informationUsing Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
More informationITP 101 Project 3 - Dreamweaver
ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with
More informationIntroduction to Adobe Dreamweaver CC
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
More informationWeb Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
More informationUsing Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
More informationDreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
More informationCreate a Web Page with Dreamweaver
Create a Web Page with Dreamweaver Dreamweaver is an HTML editing program that allows the beginner and the advanced coder to create Web pages. 1. Launch Dreamweaver. Several windows appear that will assist
More informationResponsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature
Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you
More informationAdobe Dreamweaver - Basic Web Page Tutorial
Adobe Dreamweaver - Basic Web Page Tutorial Window Elements While Dreamweaver can look very intimidating when it is first launched it is an easy program. Dreamweaver knows that your files must be organized
More informationDreamweaver and Fireworks MX Integration Brian Hogan
Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The
More informationCSS for Page Layout. Key Concepts
CSS for Page Layout Key Concepts CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
More informationCST 150 Web Design I CSS Review - In-Class Lab
CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and
More informationSample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.
Working with Tables in Microsoft Word The purpose of this document is to lead you through the steps of creating, editing and deleting tables and parts of tables. This document follows a tutorial format
More informationBuilding a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver
More informationHow to Edit Your Website
How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing
More informationMS Word 2007 practical notes
MS Word 2007 practical notes Contents Opening Microsoft Word 2007 in the practical room... 4 Screen Layout... 4 The Microsoft Office Button... 4 The Ribbon... 5 Quick Access Toolbar... 5 Moving in the
More informationADOBE DREAMWEAVER CS3 TUTORIAL
ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO
More informationWeb layout guidelines for daughter sites of Scotland s Environment
Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment
More informationWEB 140 WEB DEVELOPMENT TOOLS
WEEK 2 Objectives: Website basics Planning a Website Setting up a site in KompoZer Resources: WEBSITE BASICS Websites and pages can have many forms but there are some basics that are generally on all sites
More informationCreating Accessible Documents in Word 2011 for Mac
Creating Accessible Documents in Word 2011 for Mac NOTE: Word 2011 for Mac does not offer an Accessibility Checker. After creating your document, you can double-check your work on a PC, to make sure your
More informationRecreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts
Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)
More informationIntroduction to Macromedia Dreamweaver MX
Introduction to Macromedia Dreamweaver MX Macromedia Dreamweaver MX is a comprehensive tool for developing and maintaining web pages. This document will take you through the basics of starting Dreamweaver
More informationWeb Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05
Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Layout Page banner, sidebar, main content, footer Old method: Use , , New method: and "float" CSS property Think
More informationDOING MORE WITH WORD: MICROSOFT OFFICE 2010
University of North Carolina at Chapel Hill Libraries Carrboro Cybrary Chapel Hill Public Library Durham County Public Library DOING MORE WITH WORD: MICROSOFT OFFICE 2010 GETTING STARTED PAGE 02 Prerequisites
More informationIntroduction to Word 2007
Introduction to Word 2007 You will notice some obvious changes immediately after starting Word 2007. For starters, the top bar has a completely new look, consisting of new features, buttons and naming
More informationChapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation
More informationWorking with the Ektron Content Management System
Working with the Ektron Content Management System Table of Contents Creating Folders Creating Content 3 Entering Text 3 Adding Headings 4 Creating Bullets and numbered lists 4 External Hyperlinks and e
More informationContents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
More informationState of Nevada. Ektron Content Management System (CMS) Basic Training Guide
State of Nevada Ektron Content Management System (CMS) Basic Training Guide December 8, 2015 Table of Contents Logging In and Navigating to Your Website Folders... 1 Metadata What it is, How it Works...
More informationDesigning HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
More informationMicrosoft Word 2013 Tutorial
Microsoft Word 2013 Tutorial GETTING STARTED Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents, brochures,
More informationMicrosoft Word 2010. Quick Reference Guide. Union Institute & University
Microsoft Word 2010 Quick Reference Guide Union Institute & University Contents Using Word Help (F1)... 4 Window Contents:... 4 File tab... 4 Quick Access Toolbar... 5 Backstage View... 5 The Ribbon...
More informationMicrosoft Word 2010 Tutorial
Microsoft Word 2010 Tutorial GETTING STARTED Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents, brochures,
More informationWorking with the new enudge responsive email styles
Working with the new enudge responsive email styles This tutorial assumes that you have added one of the mobile responsive colour styles to your email campaign contents. To add an enudge email style to
More informationGetting Started with KompoZer
Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files
More informationMura CMS. (Content Management System) Content Manager Guide
Mura CMS (Content Management System) Content Manager Guide Table of Contents Table of Contents 1. LOGGING IN...1 2. SITE MANAGER...2 3. ADDING CONTENT (Pages, Folders, etc.)...6 4. WORKING WITH IMAGES...15
More informationJoomla! 2.5.x Training Manual
Joomla! 2.5.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 informationOutline of CSS: Cascading Style Sheets
Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles
More informationHIT THE GROUND RUNNING MS WORD INTRODUCTION
HIT THE GROUND RUNNING MS WORD INTRODUCTION MS Word is a word processing program. MS Word has many features and with it, a person can create reports, letters, faxes, memos, web pages, newsletters, and
More informationMICROSOFT WORD TUTORIAL
MICROSOFT WORD TUTORIAL G E T T I N G S T A R T E D Microsoft Word is one of the most popular word processing programs supported by both Mac and PC platforms. Microsoft Word can be used to create documents,
More informationCreating Web Pages With Dreamweaver MX 2004
Creating Web Pages With Dreamweaver MX 2004 1 Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic
More informationCreating Personal Web Sites Using SharePoint Designer 2007
Creating Personal Web Sites Using SharePoint Designer 2007 Faculty Workshop May 12 th & 13 th, 2009 Overview Create Pictures Home Page: INDEX.htm Other Pages Links from Home Page to Other Pages Prepare
More informationIn this session, we will explain some of the basics of word processing. 1. Start Microsoft Word 11. Edit the Document cut & move
WORD PROCESSING In this session, we will explain some of the basics of word processing. The following are the outlines: 1. Start Microsoft Word 11. Edit the Document cut & move 2. Describe the Word Screen
More informationDesigning portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development
Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development By Kenji Uchida Software Engineer IBM Corporation Level: Intermediate
More informationGoogle Docs Basics Website: http://etc.usf.edu/te/
Website: http://etc.usf.edu/te/ Google Docs is a free web-based office suite that allows you to store documents online so you can access them from any computer with an internet connection. With Google
More informationDreamweaver CS5. Module 2: Website Modification
Dreamweaver CS5 Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Last revised: October 31, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland,
More informationSage Accountants Business Cloud EasyEditor Quick Start Guide
Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing
More informationCourse 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 informationTUTORIAL 4 Building a Navigation Bar with Fireworks
TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar
More informationSlicing and Coding the Navigation Background in CSS
CSS Template Tutorial Please take your time to visit http://www.freecss.info Table of Contents Step 1 Setting up. page 3 Step 2 Coding the basics.page 5 Step 3 Coding and slicing the header. page 9 Step
More informationBuilding a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.)
Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) In this project, you will learn the web publishing skills you need to: Plan a website Define a
More informationDevelopment Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
More informationDigital Marketing EasyEditor Guide Dynamic
Surveys ipad Segmentation Reporting Email Sign up Email marketing that works for you Landing Pages Results Digital Marketing EasyEditor Guide Dynamic Questionnaires QR Codes SMS 43 North View, Westbury
More informationWebsite Builder Documentation
Website Builder Documentation Main Dashboard page In the main dashboard page you can see and manager all of your projects. Filter Bar In the filter bar at the top you can filter and search your projects
More informationSiteBuilder 2.1 Manual
SiteBuilder 2.1 Manual Copyright 2004 Yahoo! Inc. All rights reserved. Yahoo! SiteBuilder About This Guide With Yahoo! SiteBuilder, you can build a great web site without even knowing HTML. If you can
More informationMicrosoft Access 2010 handout
Microsoft Access 2010 handout Access 2010 is a relational database program you can use to create and manage large quantities of data. You can use Access to manage anything from a home inventory to a giant
More information6. If you want to enter specific formats, click the Format Tab to auto format the information that is entered into the field.
Adobe Acrobat Professional X Part 3 - Creating Fillable Forms Preparing the Form Create the form in Word, including underlines, images and any other text you would like showing on the form. Convert the
More informationJJY s Joomla 1.5 Template Design Tutorial:
JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding
More information-SoftChalk LessonBuilder-
-SoftChalk LessonBuilder- SoftChalk is a powerful web lesson editor that lets you easily create engaging, interactive web lessons for your e-learning classroom. It allows you to create and edit content
More informationHOW TO: INSERT A JPEG IN AN EMAIL.
HOW TO: INSERT A JPEG IN AN EMAIL. Have you been wanting to use marketing materials from Legal & General America but don t know how? Here s the answer. WHAT? Email is one of the fastest ways to send promotional
More informationCreating a Newsletter with Microsoft Word
Creating a Newsletter with Microsoft Word Frank Schneemann In this assignment we are going to use Microsoft Word to create a newsletter that can be used in your classroom instruction. If you already know
More informationNDSU Technology Learning & Media Center. Introduction to Google Sites
NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants
More informationUsing Microsoft Word. Working With Objects
Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects
More informationWeb Editing Basics 1 TOPICS
Web Editing Basics 1 TOPICS 1. Opening your site.1 2. What you see.1 3. Navigate to your Web page 2 4. Make text edits...2 5. Prepare documents and images for the Web 3 6. Move documents and images from
More informationWHAT S NEW IN WORD 2010 & HOW TO CUSTOMIZE IT
WHAT S NEW IN WORD 2010 & HOW TO CUSTOMIZE IT The Ribbon... 2 Default Tabs... 2 Contextual Tabs... 2 Minimizing and Restoring the Ribbon... 3 Customizing the Ribbon... 3 A New Graphic Interface... 5 Live
More informationDreamweaver CS5. Module 1: Website Development
Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA
More informationDreamweaver CS6 Basics
Dreamweaver CS6 Basics Learn the basics of building an HTML document using Adobe Dreamweaver by creating a new page and inserting common HTML elements using the WYSIWYG interface. EdShare EdShare is a
More informationMicrosoft Word 2010 Training
Microsoft Word 2010 Training Microsoft Word 102 Instructor: Debbie Minnerly Course goals Learn how to work with paragraphs. Set tabs and work with tables. Learn about styles Use the spelling and grammar
More informationGo Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits
More informationWebsite Development Komodo Editor and HTML Intro
Website Development Komodo Editor and HTML Intro Introduction In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of
More informationCreate a Poster Using Publisher
Contents 1. Introduction 1. Starting Publisher 2. Create a Poster Template 5. Aligning your images and text 7. Apply a background 12. Add text to your poster 14. Add pictures to your poster 17. Add graphs
More informationCreating trouble-free numbering in Microsoft Word
Creating trouble-free numbering in Microsoft Word This note shows you how to create trouble-free chapter, section and paragraph numbering, as well as bulleted and numbered lists that look the way you want
More informationMastering the JangoMail EditLive HTML Editor
JangoMail Tutorial Mastering the JangoMail EditLive HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop
More informationHandout: Word 2010 Tips and Shortcuts
Word 2010: Tips and Shortcuts Table of Contents EXPORT A CUSTOMIZED QUICK ACCESS TOOLBAR... 2 IMPORT A CUSTOMIZED QUICK ACCESS TOOLBAR... 2 USE THE FORMAT PAINTER... 3 REPEAT THE LAST ACTION... 3 SHOW
More informationparagraph(s). The bottom mark is for all following lines in that paragraph. The rectangle below the marks moves both marks at the same time.
MS Word, Part 3 & 4 Office 2007 Line Numbering Sometimes it can be helpful to have every line numbered. That way, if someone else is reviewing your document they can tell you exactly which lines they have
More informationWebsite Editor User Guide
CONTENTS Minimum System Requirements... 3 Design Your Website... 3 Choosing your Theme... 4 Choosing your Header Style... 4-5 Website Content Editor... 6 Text Editor Toolbar features... 6 Main Menu Items...
More informationMaking a Web Page with Microsoft Publisher 2003
Making a Web Page with Microsoft Publisher 2003 The first thing to consider when making a Web page or a Web site is the architecture of the site. How many pages will you have and how will they link to
More informationADOBE MUSE. Building your first website
ADOBE MUSE Building your first website Contents Chapter 1... 1 Chapter 2... 11 Chapter 3... 20 Chapter 4... 30 Chapter 5... 38 Chapter 6... 48 Chapter 1 Installing the software and setting up the sample
More informationAdobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College *
Adobe Dreamweaver Student Organizations Publishing Details Getting Started Basic Web Page Tutorial For Student Organizations at Dickinson College * Some Student Organizations are on our web server called
More informationMicrosoft Migrating to Word 2010 from Word 2003
In This Guide Microsoft Word 2010 looks very different, so we created this guide to help you minimize the learning curve. Read on to learn key parts of the new interface, discover free Word 2010 training,
More informationIngeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)
Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux
More informationStructuring your essays, theses and reports using Word 2011 for Mac
Structuring your essays, theses and reports using Word 2011 for Mac A guide to tools in Word that will assist in the structuring of an essay, thesis or report This workbook is aimed at those who use Word
More informationSaving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4
CMS Editor How-To Saving work in the CMS... 2 Edit an existing page... 2 Create a new page... 4 Create a side bar section... 4 Upload an image and add to your page... 5 Add an existing image to a Page...
More informationUSER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor
USER GUIDE Unit 4: Schoolwires Chapter 1: Schoolwires Centricity Version 4.2 TABLE OF CONTENTS Introduction... 1 Audience and Objectives... 1 Getting Started... 1 How the Works... 2 Technical Requirements...
More informationEMAIL QUICK START GUIDE
IT Services Microsoft Outlook 2010 EMAIL QUICK START GUIDE Contents What is Outlook?...2 Quick Guide to Email...2 Create a new e-mail message...2 Forward or reply to an e-mail message...2 Creating new
More informationComputer Training Centre University College Cork. Excel 2013 Level 1
Computer Training Centre University College Cork Excel 2013 Level 1 Table of Contents Introduction... 1 Opening Excel... 1 Using Windows 7... 1 Using Windows 8... 1 Getting Started with Excel 2013... 2
More informationExcel 2007: Basics Learning Guide
Excel 2007: Basics Learning Guide Exploring Excel At first glance, the new Excel 2007 interface may seem a bit unsettling, with fat bands called Ribbons replacing cascading text menus and task bars. This
More informationDecision Support AITS University Administration. Web Intelligence Rich Client 4.1 User Guide
Decision Support AITS University Administration Web Intelligence Rich Client 4.1 User Guide 2 P age Web Intelligence 4.1 User Guide Web Intelligence 4.1 User Guide Contents Getting Started in Web Intelligence
More informationMobile Web Site Style Guide
YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University
More informationCreating Your Personal Website
Creating Your Personal Website These instructions will show you how to create a personal webpage for CSULB students using Dreamweaver MX 2004. The page will consist of a title, background image, text,
More informationKOMPOZER Web Design Software
KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web
More informationMicrosoft PowerPoint 2010 Handout
Microsoft PowerPoint 2010 Handout PowerPoint is a presentation software program that is part of the Microsoft Office package. This program helps you to enhance your oral presentation and keep the audience
More information