1 Module 6. More on File Management. 2 Update banner.jpg file from File Management. The banner must be 940px wide. Step 1. Click on the File Management.

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

Drupal Basics Part 2 Everyday Tasks Editing a page Toolbar basics Add a hyperlink Using the theme Agricultural Communications Services Integrated Media.
Nvu - How to Create Your Own Website From Start to Finish!Dr. Dawn Sherry & Dr. Barry J. Monk Dr. Dawn Sherry Dr. Barry J. Monk Assistant Professor of.
HTML Basics and CSS style. Before we start Dreamweaver (DW) may take several minutes to start. Click on Start => Program Files => Development Apps =>
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style.
Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.
Cascading Style Sheets
Cascading Style Sheets
CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
/k/k 1212 Cascading Style Sheets Part one Marko Boon
Cascading Style Sheets: Basics I450 Technology Seminar Copyright 2003, Matt Hottell.
Today CSS HTML A project.
Introducing CSS CIS 133 mashup Javascript, jQuery and XML 1.
CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.
Start menu -> all program -> Microsoft Visual SourceSafe-> Microsoft Visual Studio 2010 Click.
Introduction to CSS.
Very quick intro HTML and CSS. Sample html A Web Title.
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Links.  Styling Links  Links can be styled with any CSS property (e.g. color, font-family, background-color).  Special for links are that they can.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.
CSS Link Styling. The Anchor Element: Link text between the opening and closing can be styled using CSS. Some of the properties that can be set are: font-family,
Session 4: CSS Positioning Fall 2006 LIS Web Team.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 6.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
Cascading Style Sheets Based on Castro, HTML for the WWW, 6 th edition Ron Gerton, Fall 2007.
Cascading Style Sheet CSS CS1520 Ali Alanjawi. 2 TA Information Ali Alanjawi Homepage: Office:
Part 3 Introduction to CSS. CSS Text Text Styles h1 {color: green} // rgb(0,255,0), #00ff00 h2{letter-spacing: 0.5cm} // 2px h3 {text-align: right} //
Robby Seitz 121 Powers Hall ADVANCED WEB DESIGN USING DREAMWEAVER
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Unit 20 - Client Side Customisation of Web Pages
Chapter 8 Creating Style Sheets.
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
FINAL EXAM REVIEW WEB TECH. JUST CLICK… THE CORRECT ANSWER WILL APPEAR WHEN YOU CLICK. GOOD LUCK!
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
CO1552 – Web Application Development Cascading Style Sheets.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.
ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS  Quiz  Announcements/questions/etc  Some functional HTML elements.
Microsoft Word 2000 Basics Presentation 1 Microsoft Word 2000 A full-featured word processing program that allows you to create and revise professional.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
Microsoft Expression Web-Illustrated Unit F: Enhancing a Design with CSS.
CSS Cascading Style Sheets *referenced from
Creating Web Pages with Links, Images, and Embedded Style Sheets
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
CSS.
Creating Your Own Webpage
Presentation Title, Verdana Bold 40pt
Presentation Title, Verdana Bold 40pt
Unit Objectives Create a new page Import text Set text properties
5.6 Adding more modules to a page
Cascading Style Sheet (CSS)
Presentation Title, Verdana Bold 40pt
Cascading Style Sheets
Introduction to CSS.
What are Cascading Stylesheets (CSS)?
Cascading Style Sheets
Presentation Title, Verdana Bold 40pt
5.5 Adding Photo Gallery Module
CSS Styles Fonts and Colors.
Introduction to Cascading Style Sheets (CSS)
Presentation transcript:

1 Module 6. More on File Management

2 Update banner.jpg file from File Management. The banner must be 940px wide. Step 1. Click on the File Management Icon, as shown. 6.1 How to costumize the banner

3 Step 2. The File Management now appears. Click Edit button to the right of the File named banner.jpg. 6.1 How to costumize the banner

4 Step 3. The File page associated with the banner.jpg file will appear. To replace the existing banner, click Browse button to select the banner file to be uploaded. 6.1 How to costumize the banner

5 Step 4. The choose file window will appear. Here select the photo file of the new banner. Then click Open after choosing the file. 6.1 How to costumize the banner CLICK HERE NEW BANNER FILE

6 Step 5. Now, the file page will show the selected file appearing on the Select file to upload box…. (beside the Browse button) as shown. Then click Save Changes. 6.1 How to costumize the banner

7 Step 6. Now the File Management will reappear on screen. Click Cancel button to exit this page. The cancel button will be renamed "Quit file management" in the next release of Hermes. 6.1 How to costumize the banner CLICK HERE

8 6.1 How to costumize the banner The index page of NBCH will now appear with a new banner as shown. NEW BANNER

9 The default.css is a stylesheet that contains the default set of rules that describe the appearance of all the pages within the NBCH website. Within this stylesheet, rules are set for the following: layout of headings, paragraphs, navigation menus and other elements in the page. 6.2 The NBCH default stylesheet

10 These set of rules include the following: –FONT family, –FONT color, –FONT size, –FONT weight, –Text alignment, –Text decoration, etc. 6.2 The NBCH default stylesheet

The NBCH default stylesheet Shown are the first few lines (lines 1 to 44) of default.css that is used by the NBCH website. 1/****************************************** 2Main Tags 3******************************************/ 4 5body 6{ 7font-size:11px; 8font-family:Verdana, Arial; 9margin:0px; 10} 11 12a 13{ 14color:#00309c; 15text-decoration:none; 16} 17 18a:visited {} 19a:active {} 20a:hover 21{ 22color:darkolivegreen; 23text-decoration:underline 24} 25 26/* Default content text */ 27.hlite 28{ 29font-weight:normal; 30font-size:11px; 31color:#505050; 32line-height:13pt;

The NBCH default stylesheet 33font-family:Verdana, Arial 34} 35 36/* Default content text bold */ 37.hliteb 38{ 39font-weight:bold; 40font-size:11px; 41color:#404040; 42line-height:13pt; 43font-family:Verdana, Arial; 44} 45etc….

The NBCH default stylesheet To change the font type, color and size of the content text, edit the lines 26 to 34. OLDNEW 26/* Default content text */ Retain 27.hlite Retain 28{{Retain 29font-weight:normal; Retain 30font-size:11px;font-size:12px;Font size from 11px to 12px 31color:#505050;color:# 0718f5;Color from black to blue 32line-height:13pt; Retain 33font-family:Verdana, Arialfont-family:” Lucida Console”Font type from Verdana, Arial to Lucida Console 34}}Retain

The NBCH default stylesheet In addition, anchor (also known as hyperlinks) effects can be modified by editing lines 12 to 24. OLDNEW 12aa 13{{ font-family:” Lucida Console”Adding new line for font type Lucida Console 14color:#00309c;color:# c20909;Color from blue to red 15text-decoration:none; Retain 16}}Retain 17 18a:visited {} Retain 19a:active {} Retain 20a:hover Retain 21{}Retain 22color:darkolivegreen;Color:#f2ef17;Color from darkolivegreen to yellow 23text-decoration:underline Retain 24}}

The NBCH default stylesheet Given are sample settings for the stylesheet. You can modify parts of the stylesheet on your desired settings. To learn more about stylesheets, visit the site: