CM143Web Week 8 Review of Assignment 1 Revision & Elaboration.

Slides:



Advertisements
Similar presentations
2.744 Dreamweaver Tutorial Sangmok Han Feb 24, 2010.
Advertisements

INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2013 UMSL Introduction to Web Page Design.
Advanced Web Design Using Dreamweaver Robby Seitz 121 Powers Hall
Robby Seitz 121 Powers Hall ADVANCED WEB DESIGN USING DREAMWEAVER
 To create page, Komodo Editor  To share web page, UNC SERVER, ISIS (  To transfer page to ISIS,
© 2010 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Dreamweaver MX ? Create professional web pages Visual editing functions –No need to write HTML Includes complete FTP client software Recognises.
Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.
Explore the Dreamweaver Workspace View a Web page and use Help Plan and Define a Web site Add a Folder and Pages, and set the Home page Create and View.
CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.
CIS101 Introduction to Computing
Internet Publishing / Dreamweaver Luke E. Reese ANR Educ. and Communication Systems
Art 128 Interface Programming 1 In-class Presentation Week 11B.
HTML Introduction HTML
Internet Publishing / Dreamweaver Luke E. Reese CARRS
13 February Building a Web Page. Links Links: One always links to an anchor point Every page has an implicit anchor point at the start In addition, can.
Introduction to: Web Site Development. Terminology HTML Hypertext Markup Language HTML File A web page built from HTML Index File The home or main page.
Introduction to Web Lingo
Agenda – Week 5, Day 2 Complete RoboHelp Tutorial Transition to HTML Tutorial –Warm-up – Explore HTML –Page Design – Create a page –Publishing – Make your.
INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2012 UMSL Introduction to Web Page Design.
Hypertext Markup Language (HTML) Created by Sarah Dooley & Amanda Foster Edited and presented by Caroline Hallam September 9, 2014.
1 HTML / Website Creation. 2 HTML – HyperText Markup Language  For formatting Web pages  Ordinary text can be created using any Text editor: e.g. NotePad,
Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®
Getting Started with Dreamweaver
Intro to MIS – MGS351 Building a Webpage. Chapter Overview m The World Wide Web – Web servers, Web browsers and Web pages m HTML Introduction m Using.
Adobe Dreamweaver CS3 Revealed CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER.
Macromedia Dreamweaver CS4 Tutorial. Example of the website1 folder & images folder inside Create a folder on your computer called website1 to hold all.
Robby Seitz 121 Powers Hall ADVANCED WEB DESIGN USING DREAMWEAVER.
Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.
XP Using Frames in a Web Site Ali Alfayly. XP Tutorial Objectives Create frames for a Web site Control the appearance and placement of frames Control.
Web Page Basics XHTML & CSS 1. Planning Decide on topic or research the topic given to you. Decide on your colour scheme. Use
Assignment 2 Due November 4, 1:30pm. Website You are creating a website for a fictional business which must sell some sort of product You can create any.
1 Session 1: Introduction to HTML Spring Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get.
Bare bones notes. Suggested organization for main folder. REQUIRED organization for the 115 folder.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Macromedia Dreamweaver 8 Revealed DREAMWEAVER GETTING STARTED WITH.
TC 310 The Computer in Technical Communication Dr. Jennifer Turns Week 4, Day 2 (4/23)
Adding Links Learning Web Design: Chapter 6. Lesson Overview Using the anchor tag Linking to other pages with relative or absolute pathnames Linking to.
Internet Publishing Luke E. Reese ANR Education and Communication Systems
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
Week Nine Week Nine focuses on Collecting Images and Web Page URLs to use for your final Web Page Project. Discussions on using Netscape Communicator Composer.
CIS133: Internet Development Week 2. Agenda  Homework Review  MYSCC  FTP  HTML Code  In-class  Lab / Homework.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
1 More About HTML Tables and Images. 22 Objectives You will be able to Create tables in HTML. Include images in your HTML page. Create links to other.
INTRODUCTION TO DREAMWEAVER CS SOFT. OVERVIEW  DreamWeaverCS5.5  Defining a site  Site files  Authoring views  Property Inspector  AP Divs.
Tutorial 3 Adding and Formatting Text with CSS Styles.
The Web and HTML Tutorial Building a Webpage. Chapter Overview m The World Wide Web – Web servers, Web browsers and Web pages m HTML Introduction m Using.
CS 330 Class 2: Programming Plan for Today Recap from last time More UNIX Begin HTML (material from Chapters 5-8) –Tags and attributes –Hyperlinks Features.
Week 2: Building a Simple Website IMC 320 Web Publishing Spring 2011.
Internet FTP to network. Preliminary Steps a FTP program is used and executed such as WS_FTP LE Information needed –host name –user id –password.
Internet Publishing / Dreamweaver Luke E. Reese Biosystems & Ag. Engr. / CARRS
Positioning Objects with CSS and Tables
Session 1: Introduction to HTML Fall Today’s Agenda Talk about the functions of the Internet Cover useful terminology for today’s session HTML,
2 Apr 04 1 Application Software Practical 13/14 HTML / Website Creation.
Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®
Basic Web Design UVICELL Week 4 Templates and site management Week 4 Templates and site management.
Luke E. Reese Biosystems & Ag. Engr
Finally getting to html and CSS… Tim Berners-Lee, the writer of the software program that makes him the inventor of the WWW, defines the Internet as a.
Getting Started with Dreamweaver
Site Organization.
Chapter A - Getting Started with Dreamweaver MX 2004
بسم الله الرحمن الرحيم.
Building a Webpage Extended Learning Module F
Arden University FTP Induction Resource
Site Organization.
Posting your webpage In order for other people to be able to see your webpage, you must copy the files to a web server – a computer set up to share web.
Starting to develop a website
Getting Started with Dreamweaver
Internet Publishing Luke E. Reese
TC 310 The Computer in Technical Communication
Presentation transcript:

CM143Web Week 8 Review of Assignment 1 Revision & Elaboration

Assignment 1 Review Quality of submissions excellent Some issues for review: – Problems uploading – Use of container divs – Linked external css file – Problems with directory structure

Uploading the site A site created on a local machine can be transferred to the web server by File Transfer Protocol (FTP), or an encrypted version (sFTP). The completed site can be uploaded by FTP in Dreamweaver. The process does not require other transfer software (WSFTP) Uploading a site requires login details for the destination web server – FTP Host, folder, username, password

Dreamweaver FTP Upload Details FTP Host – This is the url of the server you are uploading the site to – For DCU: student.dcu.ie Folder – Specification of the folder on the server space allocated to you that the site files will be copied to – For DCU: public_html Username & Password – For DCU: Your Novell login details

Use of Container Using a container div for the site allows you to set a maximum width for the site and to centre it at that width – This ensures that on large screen resolutions, the site does not expand horizontally to fill available space and reduce legibility Nesting the structural divs inside a container of fixed width allows for fewer width and position settings in CSS

Step-by-step Centred Container Redefine the body tag – Centre everything on the page so that the container will appear centred in large resolutions – Optionally, set margins to avoid differences in margin defaults between browsers Create a class for the container and apply – Set a width (~800px recommended) – Set margins to auto to allow for centring in Firefox – Optionally set borders, background, etc

External CSS Files Defining Styles in “This Document Only” in Dreamweaver causes the style settings to be added to the head of the html document – This is useful for single-page sites but problematic beyond this because changes in a style have to be made for every page if required For a site where the same definitions apply to numerous pages, the styles should be defined in a central CSS file The.css file can be specified when styles are first defined and linked to multiple pages

Directory Structure A site should be contained within a single folder (to be defined in Dreamweaver’s define site settings on the local machine) This entire folder will be copied to the server – It should not contain extraneous files (planning documents, photoshop PSDs, etc) The folder can be structured with subfolders for images, css, etc The homepage must be called index – Index.htm, index.html, index.php, etc etc