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

Size: px
Start display at page:

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

Transcription

1 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: PHP Syntax Lab Manual Appendix E Output Reminders All images should be in the image folder of your personal website. All HTML pages and style sheets should be in the top level folder of your website (in the personalwebsite folder), not in a sub-folder. Each web page needs these sections: The HTML section opening and closing tags Inside the HTML section: The head section nested inside the HTML section contains metatags, title for browser bar, styles, calls to external files. does not contain HTML table code or div code etc. The body section nested inside the HTML section underneath the head section contains what will appear on the screen of a browser when the page is loaded. If a page is not working properly, check to make sure that table and div tags are all in the body section, NOT in the head section. Note: To validate, each web page needs a doctype and an attribute for the HTML tag. E-Business Systems 1 INTE2047 Lab Exercises Semester p 36

2 Check Your Template against this Guide Check that your template matches the following: This line continues. Make sure the <div> and </div> of each section are tabbed to the same column. Anything that should appear in the banner section should be here. Contents of Menu navigation will be included here. Anything that appears in main content section of page goes here. E.g. Headings, forms, graphics, information etc. Information for footer goes here such as disclaimer, author of page, perhaps link to home etc. CHECK: The <body> should contain 1 outer div for the whole page. Inside it you should have 4 divs for: banner leftmenu content (main body of the page) footer E-Business Systems 1 INTE2047 Lab Exercises Semester p 37

3 Adding Metatags Load your master template and enter the description and keywords metatags under the title tag,. The question marks will be replaced with words that suit each page when created. <meta name="description" content="?????????" /> <meta name ="keywords" content="?????,?????,?????, etc. " /> Validation Before creating other pages you need to check if the template validates correctly. That is, does your code comply with W3C standards? Your editor will usually provide highlighting of errors in the code. Again check the menu options in your editor. Once you think your code is okay, check it against this online validator: 1. Load the following URL: 2. Choose the Validate by File Upload option and then Browse to find and upload your template page from your folder. Click Check. 3. Did you get a Passed result with a green bar? CONGRATULATIONS. If not, check the errors and correct your code until you get the all-green. Home Page 1. Once you are happy with the look and feel of your mastertemplate.html, and it validates, make a copy of it and rename it index.html. This will be your home page. Alter the wording in the Banner section to reflect that this is the home page. 2. Alter the metatags to match the content of this page: Title Tag (Appropriate title to appear in the title bar of index.html) E-Business Systems 1 INTE2047 Lab Exercises Semester p 38

4 Description Tag (See below) Keywords Tag (See below) <meta name="description" content="?????????????" /> <meta name ="keywords" content="?????,?????,?????, etc. " /> Replace the??? with a general description of your home page. This would show up in search results. You can find some very good examples here: Replace the??? with keywords that search engines could use, separated by commas. Images Insert your photograph in the content section of your home page. (You can use the same one from your aboutme.html page or a different photo.) Use a float style (added to your style sheet) to align your photo to the right: img.floatright { float: right; margin: 4px; } Content Replace the words Content in the content div, with content that you think is relevant for your home page. A home page should be striking and attract immediate interest. It should be an indication of what the site is about and motivate the visitor to look inside the site. This should be REALLY interesting with unique content, content that is not on any other page. It could have graphics, it might have a calendar etc. etc. Look at other home pages for some ideas. Re-publishing 1. Check that your home page (index.html) validates. 2. Add a 3 rd link for the home page in menu.php. 3. Publish any files that have been modified since your last publishing session. Publish any new files such as index.html and your menu files. 4. When you type in your URL you should automatically see your home page loaded. For example, this would be: If your home page doesn t load, check that: E-Business Systems 1 INTE2047 Lab Exercises Semester p 39

5 you have named it index.html rather than index.htm. all files are in the.htmlinfo folder. Check that your menu works as expected. Tables using an HTML Editor Now that you understand tables and how the code works to create cells, you can use an HTML editor (suggested by your tutor) to create tables more quickly for you by following these guidelines: Assessment Table 1. Make a copy of mastertemplate.html and rename it assessment.html. Alter all of the metatags to suit (title, description, keywords). Alter the banner text to suit this page as well. 2. In the content section, insert a table to store results data. Click on the Design view in the Editor screen. Place the cursor in the content area (deleting the Content Here phrase) and using the menu options, insert a 6 x 4 table with a border and a width of 200 pixels: Table Insert Table, Make sure your cells have borders when you preview the page in a browser. If not, you can select the table in Design View and format borders from the menu. Check the code (via the Source window). Some editors simply store all the formatting of the table in a style in the head section. In Design View, populate the table with Assessment tasks in E-Business Systems, due dates and a heading for results. You can find a listing of these tasks on our website or in your course guide or in your Assessment Specifications handout. As soon as you have results for any assessment tasks, update this table. If the width needs changing, just edit the style in Source view. You can improve on the table in any way you like by editing the code itself. For example, you might : Insert column headings Insert a caption Specify a percentage width of the columns. 3. Download the assessment specifications from our course website and store the pdf document in personalwebsite\documents. Rename this document to specifications.pdf. Provide a hyperlink to specifications.pdf at the bottom of your assessment table. E-Business Systems 1 INTE2047 Lab Exercises Semester p 40

6 Quiz Table 1. Insert another table underneath the assessment table to store your quiz results (the quizzes listed at the beginning of many labs). Enter your scores so far. 2. Edit menu.php so that it will link to your assessment page and then republish the relevant files. Link to Lab Tasks 1. A digital version of your weekly exercises has been uploaded to the course website, under class notes. If you haven t already done so, download all of the lab worksheets for weeks 1 to 6 and store in your documents folder. Make sure all filenames are without spaces and use lowercase. e.g. worksheet1.pdf. 2. Open your website in your editor and make a copy of your master template, calling it labtasks.html. Remember, there shouldn t be any spaces in your HTML filenames and all letters should be in lowercase. 3. Using Design View, insert a table into the content area. It should have the following elements (let the HTML editor create it for you): 12 rows, 3 columns, 80% width, coloured border, centered. 4. Give the first row the headings shown in the screen dump below. In the 1st Lab Exercise cell enter text that can be clicked for week 1. You can use the editor (Design View) to very quickly set up hyperlinks. Select the text and then use a menu option to convert it to a hyperlink. Click on Browse to select the name of the file for that worksheet. 5. Set up the rest of your table as shown below and link to this page from your menu. Enter weeks 1 to 12 and link to all available worksheets Enter topic(s) covered in each worksheet. E-Business Systems 1 INTE2047 Lab Exercises Semester p 41

7 Look at the source code when finished. You will notice that all the styles have been created for you by the editor. (These can be renamed and moved to your style sheet.) 6. Re-publish your menu and this page. Assessment Reminders Remember you need to test your site on at least 2 different browsers. Make sure that your CSS layout works on both. There are some really good links on our website with examples of CSS styling and positioning. Homework You can see the disadvantage of creating pages before you have created a template because you now have 2 pages, aboutme.html and timetablecss.html that do not include the navigation. Therefore to get back to the home page; a visitor has to click on the back key. Fix this by copying the content from each of these pages into your template-based pages. Enter your weekly reflections in your e-journal. Optional Challenge #3 You can receive an extra mark on top of your lab assessment mark for optional challenges attempted. Challenge 3 PHP Feedback Using PHP, create a feedback form on a page in your personal website. The form should send entered feedback to your address.. E-Business Systems 1 INTE2047 Lab Exercises Semester p 42

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

Create a three column layout using CSS, divs and floating

Create a three column layout using CSS, divs and floating GRC 275 A6 Create a three column layout using CSS, divs and floating Tasks: 1. Create a 3 column style layout 2. Must be encoded using HTML5 and use the HTML5 semantic tags 3. Must se an internal CSS 4.

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

Tutor Handbook for WebCT

Tutor Handbook for WebCT Tutor Handbook for WebCT Contents Introduction...4 Getting started...5 Getting a course set up...5 Logging onto WebCT...5 The Homepage...6 Formatting and designing the Homepage...8 Changing text on the

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

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

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

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

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

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2)

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2) Web Development & Design Foundations with HTML5 Ninth Edition Chapter 7 More on Links, Layout, and Mobile Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links

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

HTML/CSS Lesson Plans

HTML/CSS Lesson Plans HTML/CSS Lesson Plans Course Outline 8 lessons x 1 hour Class size: 15-25 students Age: 10-12 years Requirements Computer for each student (or pair) and a classroom projector Pencil and paper Internet

More information

Independence Community College Independence, Kansas

Independence Community College Independence, Kansas Independence Community College Independence, Kansas C O N T E N T S Unit 1: Creating, Modifying, and Enhancing FrontPage Webs and Pages 1 Chapter 1 Investigating FrontPage 2002 3 Exploring World Wide Web

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

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

How to Edit Your Website

How 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 information

GRAPHIC WEB DESIGNER PROGRAM

GRAPHIC WEB DESIGNER PROGRAM NH128 HTML Level 1 24 Total Hours COURSE TITLE: HTML Level 1 COURSE OVERVIEW: This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used

More information

Table of Contents. Overview... 4 Advanced Content Items... 4 Accessibility... 4 iframe Textpoppers Math Characters and Equations...

Table of Contents. Overview... 4 Advanced Content Items... 4 Accessibility... 4 iframe Textpoppers Math Characters and Equations... Dallas County Community College District Table of Contents Overview... 4 Advanced Content Items... 4 Accessibility... 4 iframe... 4 Insert a Web Page... 4 Insert a PDF... 6 Textpoppers... 8 Insert a Text

More information

Wolf. Responsive Website Designer. Mac Edition User Guide

Wolf. Responsive Website Designer. Mac Edition User Guide Wolf Responsive Website Designer Mac Edition User Guide Version 2.10.3 Table of Contents What is Wolf Website Designer? Editor overview Save and open website Create responsive layout How to create responsive

More information

How to Edit Your Website

How 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 information

Lava New Media s CMS. Documentation Page 1

Lava New Media s CMS. Documentation Page 1 Lava New Media s CMS Documentation 5.12.2010 Page 1 Table of Contents Logging On to the Content Management System 3 Introduction to the CMS 3 What is the page tree? 4 Editing Web Pages 5 How to use the

More information

HTML and CSS COURSE SYLLABUS

HTML and CSS COURSE SYLLABUS HTML and CSS COURSE SYLLABUS Overview: HTML and CSS go hand in hand for developing flexible, attractively and user friendly websites. HTML (Hyper Text Markup Language) is used to show content on the page

More information

Dazzle the Web with Dynamic Dreamweaver, Part II

Dazzle the Web with Dynamic Dreamweaver, Part II Dazzle the Web with Dynamic Dreamweaver, Part II In the second Dreamweaver workshop we will learn the following skills: 1. Adding hyperlinks to our home page 2. Adding images to our home page 3. Creating

More information

UTAS CMS. Easy Edit Suite Workshop V3 UNIVERSITY OF TASMANIA. Web Services Service Delivery & Support

UTAS CMS. Easy Edit Suite Workshop V3 UNIVERSITY OF TASMANIA. Web Services Service Delivery & Support Web Services Service Delivery & Support UNIVERSITY OF TASMANIA UTAS CMS Easy Edit Suite Workshop V3 Web Service, Service Delivery & Support UWCMS Easy Edit Suite Workshop: v3 Contents What is Easy Edit

More information

Page Layout Using Tables

Page Layout Using Tables This section describes various options for page layout using tables. Page Layout Using Tables Introduction HTML was originally designed to layout basic office documents such as memos and business reports,

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

Getting Started with CSS Sculptor 3

Getting Started with CSS Sculptor 3 Getting Started with CSS Sculptor 3 With CSS Sculptor, you can quickly create a cross-browser compatible layout with custom widths, margins, padding, background images and more. Additionally, you can use

More information

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags Recap on HTML and creating our template file Introduction

More information

ITSE 1401 Web Design Tools Lab Project 4 (Expression Web 4 - Units M, N, O, P) Last revised: 1/9/14

ITSE 1401 Web Design Tools Lab Project 4 (Expression Web 4 - Units M, N, O, P) Last revised: 1/9/14 (Expression Web 4 - Units M, N, O, P) Last revised: 1/9/14 Directions: Perform the tasks below on your personal computer or a lab computer. Professor Smith shows the score points for each activity in parentheses.

More information

Websites. Version 1.7

Websites. Version 1.7 Websites Version 1.7 Last edited 15 Contents MyNetball Information...3 Websites...4 Web packages...4 Setting up the layout...5 Uploading files and images...6 Using Dropbox to Increase your Website Data...7

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 06: Introduction to KompoZer (Website Design - Part 3 of 3) Lab 6 Tutorial 1 In this lab we are going to learn

More information

Create a Contact Sheet of Your Images Design a Picture Package Customize Your Picture Package Layout Resample Your Image...

Create a Contact Sheet of Your Images Design a Picture Package Customize Your Picture Package Layout Resample Your Image... 72 71 Create a Contact Sheet of Your Images................... 158 Design a Picture Package............ 160 73 Customize Your Picture Package Layout.... 162 74 Resample Your Image.................... 164

More information

The Dreamweaver Interface

The Dreamweaver Interface The Dreamweaver Interface Let s take a moment to discuss the different areas of the Dreamweaver screen. The Document Window The Document Window shows you the current document. This is where you are going

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

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

ADOBE Dreamweaver CS3 Basics

ADOBE Dreamweaver CS3 Basics ADOBE Dreamweaver CS3 Basics IT Center Training Email: training@health.ufl.edu Web Page: http://training.health.ufl.edu This page intentionally left blank 2 8/16/2011 Contents Before you start with Dreamweaver....

More information

Microsoft FrontPage. Microsoft Frontpage was designed to allow novice users to create and edit web pages without knowing any HTML.

Microsoft FrontPage. Microsoft Frontpage was designed to allow novice users to create and edit web pages without knowing any HTML. Microsoft FrontPage Microsoft Frontpage was designed to allow novice users to create and edit web pages without knowing any HTML. Microsoft FrontPage IDE for web site development Provides both WYSIWYG

More information

Templates. Dreamweaver Templates may be used to assist in creating a consistent look.

Templates. Dreamweaver Templates may be used to assist in creating a consistent look. Templates One important feature of a good site is consistency. A well-designed site will have a consistent look and feel throughout. This includes placing certain elements in the same spot, using the same

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

RenWeb Handout Manual

RenWeb Handout Manual RenWeb Handout Manual Tiffany Gurgel October 2013 RenWeb Handout Manual Table of Contents Pre-Training Handout: Creating a Document as a PDF 2 Handout 1A: Adding Homework & Web Document 4 Handout 2A: Creating

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

Guidelines for doing the short exercises

Guidelines for doing the short exercises 1 Short exercises for Murach s HTML5 and CSS Guidelines for doing the short exercises Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important. Feel

More information

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 2

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 2 Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 2 Plan for the next 4 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style Introduction to JavaScript

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

BT Web Hosting. Features and functionality

BT Web Hosting. Features and functionality BT Web Hosting Features and functionality 1 Hopefully you will now have a website that is activated and potentially even published. This guide will take you through some of the additional features and

More information

Discuss web browsers. Define HTML terms

Discuss web browsers. Define HTML terms Week 1 & 2 *discuss safety of the internet and classroom Describe the internet and it s associated key terms Describe the world wide web and key terms associated Discuss web browsers Define HTML terms

More information

CROMWELLSTUDIOS. Content Management System Instruction Manual V1. Content Management System. V1

CROMWELLSTUDIOS. Content Management System Instruction Manual V1.   Content Management System. V1 Content Management System Instruction Manual V1 www.cromwellstudios.co.uk Cromwell Studios Web Services Content Management System Manual Part 1 Content Management is the system by which you can change

More information

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10

Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10 CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties

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

Ministry of Higher Education and Scientific Research

Ministry of Higher Education and Scientific Research Morning Study Department of information technology Institute of Technical - Duhok. University of Polytechnic Duhok. Subject: Web Technology Course book for 2nd year. Lecturer s name: MSc. Ayman Nashwan

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

TEACHER: CREATE PRACTICE QUIZ

TEACHER: CREATE PRACTICE QUIZ TEACHER: CREATE PRACTICE QUIZ Table of Contents Select Questions... 3 Create Practice Test: 1. Select questions... 4 Create Practice Test: 2. Add to an Existing Test... 6 Create versions & Editing Tabs...

More information

Setting up Your Teacher Website Using ischooldistrict

Setting up Your Teacher Website Using ischooldistrict Setting up Your Teacher Website Using ischooldistrict This year we are transferring our web hosting and layout to a central system controlled and maintained at the county level. The goals of centralizing

More information

Styles, Style Sheets, the Box Model and Liquid Layout

Styles, Style Sheets, the Box Model and Liquid Layout Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of

More information

Web Development IB PRECISION EXAMS

Web Development IB PRECISION EXAMS PRECISION EXAMS Web Development IB EXAM INFORMATION Items 53 Points 73 Prerequisites COMPUTER TECHNOLOGY Grade Level 10-12 Course Length ONE YEAR Career Cluster INFORMATION TECHNOLOGY Performance Standards

More information

Page 1 of 4. Course Outline by Topic: Web Design Fall 2009 Instructor: Mr. O Connell Room 117

Page 1 of 4. Course Outline by Topic: Web Design Fall 2009 Instructor: Mr. O Connell Room 117 Page 1 of 4 Web Design Fall 2009 Instructor: Mr. O Connell Room 117 Texts: Macromedia Dreamweaver MX Hands On Training (Green/Rudner) Adobe Photoshop Elements 5.0 Classroom in a Book (Adobe Systems) Macromedia

More information

Microsoft FrontPage Practical Session

Microsoft FrontPage Practical Session Ministry of manpower Higher college of technology Department of Information Technology QA Umbrella Workshop 30 th August- 3 rd September 2008 IT Skills Microsoft FrontPage Practical Session Copyright of

More information

VCE / VET INFORMATION AND COMMUNICATION TECHNOLOGY

VCE / VET INFORMATION AND COMMUNICATION TECHNOLOGY Innovative Vocational Education and Training VCE / VET INFORMATION AND COMMUNICATION TECHNOLOGY YEAR 2 (UNITS 3 & 4) TEACHER RESOURCE CERTIFICATE III (ICT30115) CORE COMPETENCIES and SELECTED ELECTIVES

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

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

RenWeb Training. Creating Your Classroom Website

RenWeb Training. Creating Your Classroom Website RenWeb Training Creating Your Classroom Website October 2013 RenWeb Training Manual Table of Contents Ren Web Survey 3 Pre-Training Handout: Saving a Document as a PDF 4 Lesson 1: Adding Homework & Web

More information

1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014

1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014 1/6/2019 12:28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014 CATALOG INFORMATION Dept and Nbr: CS 50A Title: WEB DEVELOPMENT 1 Full Title: Web Development 1 Last Reviewed:

More information

Dreamweaver Handout. University of Connecticut Prof. Kent Golden

Dreamweaver Handout. University of Connecticut Prof. Kent Golden Dreamweaver Handout University of Connecticut Prof. Kent Golden Kent@GoldenMultimedia.com www.goldenmultimedia.com Main goal of this handout: To give you the steps needed to create a basic personal website

More information

PBwiki Basics Website:

PBwiki Basics Website: Website: http://etc.usf.edu/te/ A wiki is a website that allows visitors to edit or add their own content to the pages on the site. The word wiki is Hawaiian for fast and this refers to how easy it is

More information

Introduction to Dreamweaver CS3

Introduction to Dreamweaver CS3 TUTORIAL 2 Introduction to Dreamweaver CS3 In Tutorial 2 you will create a sample site while you practice the following skills with Adobe Dreamweaver CS3: Creating pages based on a built-in CSS page layout

More information

Introduction. The topics included in this guide are:

Introduction. The topics included in this guide are: Introduction Caorda Content is a powerful content management tool that allows you to update your web site through a standard Internet web browser. The purpose of this guide is to introduce you to Caorda

More information

1 of 7 8/27/2014 2:26 PM Units: Teacher: WebPageDesignI, CORE Course: WebPageDesignI Year: 2012-13 Designing & Planning Web Pages This unit will give students a basic understanding of core design principles

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

OU Campus Training. Part 1

OU Campus Training. Part 1 OU Campus Training Part 1 OU Campus Training Before you Start Website Access forms are available from the Add-Ons Dropdown (page 3) or on the Web Support Website (www.unco.edu/web-support/resources/ou-campus/forms)

More information

[AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6

[AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6 [AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6 Length : 2 Days Audience(s) : New or existing users Level : 3 Technology : Adobe Dreamweaver CS6 program Delivery Method : Instructor-Led (Classroom) Course

More information

Dreamweaver MX Overview. Maintaining a Web Site

Dreamweaver MX Overview. Maintaining a Web Site Dreamweaver MX Overview Maintaining a Web Site... 1 The Process... 1 Filenames... 1 Starting Dreamweaver... 2 Uploading and Downloading Files... 6 Check In and Check Out Files... 6 Editing Pages in Dreamweaver...

More information

Swiiit User Guide 03/09/2015

Swiiit User Guide 03/09/2015 Swiiit User Guide 03/09/2015 Contents Getting Started... 4 Overview of Main Tools... 5 Webpages... 6 Main pages (Sections)... 6 Rearrange Sections... 6 Subpages... 7 Change the Title of a Webpage... 8

More information

National Training and Education Resource. Authoring Course. Participant Guide

National Training and Education Resource. Authoring Course. Participant Guide National Training and Education Resource Authoring Course Participant Guide Table of Contents: OBJECTIVES... 4 OVERVIEW OF NTER... 5 System Requirements... 5 NTER Capabilities... 6 What is the SCORM PlayerWhat

More information

Cascading Style Sheets Level 2

Cascading Style Sheets Level 2 Cascading Style Sheets Level 2 Course Objectives, Session 1 Level 1 Quick Review Chapter 6 Revisit: Web Fonts Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your Site s Navigation Begin

More information

EDITOR GUIDE. Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9

EDITOR GUIDE. Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9 EDITOR GUIDE Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9 1 Button Functions: Button Function Display the page content as HTML. Save Preview

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

Club Site Editing Guide

Club Site Editing Guide Swimming New Zealand Club Site Editing Guide Intelligent Software for Membership All information contained in this document is for the exclusive use of Swimming New Zealand. We are happy that any part

More information

Building a Community Page

Building a Community Page Building a Community Page What is a Community Page? A community page is a portion of your website where you discuss a specific community you serve. Many customers are capable of finding listings on the

More information

User Manual. Page-Turning ebook software for Mac and Windows platforms

User Manual. Page-Turning ebook software for Mac and Windows platforms User Manual Page-Turning ebook software for Mac and Windows platforms 3D Issue is a digital publishing software solution that converts your pdfs into online or offline digital, page-turning editions. Getting

More information

Webforum Content Publisher

Webforum Content Publisher Webforum Content Publisher Administrator Manual Last update: 2008-10-14 Contents Introduction... 4 What is Webforum Content Publisher?... 4 Public and Protected Website... 4 Webforum Content Publisher

More information

Website Creating Content

Website Creating Content CREATING WEBSITE CONTENT As an administrator, you will need to know how to create content pages within your website. This document will help you learn how to: Create Custom Pages Edit Content Areas Creating

More information

Navigation. Websites need a formalized system of links to allow users to navigate the site

Navigation. Websites need a formalized system of links to allow users to navigate the site Comm 244 Week 3 Navigation Navigation Websites need a formalized system of links to allow users to navigate the site Navigation Many larger websites have multiple forms of navigation For example, look

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

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

AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES

AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES CLASS :: 14 04.28 2017 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html

More information

Web Design Course Syllabus and Planner

Web Design Course Syllabus and Planner Web Design Course Syllabus and Planner Updated May, 2018 Course Overview The Web Design curriculum is a one-year (two-semester) course covering required topics in most introductory Web Design settings.

More information

Blackboard staff how to guide Accessible Course Design

Blackboard staff how to guide Accessible Course Design The purpose of this guide is to help online course authors in creating accessible content using the Blackboard page editor. The advice is based primarily on W3C s Web Content Accessibility Guidelines 1.0

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

Mobile MOUSe WEB SITE DESIGN ONLINE COURSE OUTLINE

Mobile MOUSe WEB SITE DESIGN ONLINE COURSE OUTLINE Mobile MOUSe WEB SITE DESIGN ONLINE COURSE OUTLINE COURSE TITLE WEB SITE DESIGN COURSE DURATION 19 Hours of Interactive Training COURSE OVERVIEW In this 7 session course Debbie will take you through the

More information

Comm 244 Week 3. Navigation. Navigation. Websites need a formalized system of links to allow users to navigate the site

Comm 244 Week 3. Navigation. Navigation. Websites need a formalized system of links to allow users to navigate the site Comm 244 Week 3 Navigation Navigation Websites need a formalized system of links to allow users to navigate the site Navigation Many larger websites have multiple forms of navigation For example, look

More information

Microsoft FrontPage. An Introduction to. Lecture No.1. Date: April Instructor: Mr. Mustafa Babagil. Prepared By: Nima Hashemian

Microsoft FrontPage. An Introduction to. Lecture No.1. Date: April Instructor: Mr. Mustafa Babagil. Prepared By: Nima Hashemian An Introduction to Microsoft FrontPage Lecture No.1 Date: April 20. 2007 Instructor: Mr. Mustafa Babagil Prepared By: Nima Hashemian 2006 An Introduction to FrontPage Mathematics Department Eastern Mediterranean

More information

Deccansoft Software Services

Deccansoft Software Services Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module

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

Mediasation Content Management System 4.0 Users Guide & Training Manual

Mediasation Content Management System 4.0 Users Guide & Training Manual Mediasation Content Management System 4.0 Users Guide & Training Manual 2008 Mediasation Web Solutions, Inc. All rights reserved. Mediasation, Inc. CMS 4.0 Users Guide Version: October 2008 Editor: Jaimee

More information

Creating a Website in Schoolwires Technology Integration Center

Creating a Website in Schoolwires Technology Integration Center Creating a Website in Schoolwires Technology Integration Center Overview and Terminology... 2 Logging into Schoolwires... 2 Changing a password... 2 Accessing Site Manager... 2 Section Workspace Overview...

More information

CREATING ANNOUNCEMENTS. A guide to submitting announcements in the UAFS Content Management System

CREATING ANNOUNCEMENTS. A guide to submitting announcements in the UAFS Content Management System CREATING ANNOUNCEMENTS A guide to submitting announcements in the UAFS Content Management System Fall 2017 GETTING STARTED 1 First, go to news.uafs.edu. 2 Next, click Admin at the bottom of the page. NOTE:

More information

AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?

More information

DREAMWEAVER QUICK START TABLE OF CONTENT

DREAMWEAVER QUICK START TABLE OF CONTENT DREAMWEAVER QUICK START TABLE OF CONTENT Web Design Review 2 Understanding the World Wide Web... 2 Web Browsers... 2 How Browsers Display Web pages... 3 The Web Process at Sacramento State... 4 Web Server

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

Assignment 2: Website Development

Assignment 2: Website Development Assignment 2: Website Development Overview In this second assignment, you are required to develop your personal website from scratch, based on the design document that you created in Assignment 1. You

More information