Section 1: How The Internet Works
|
|
- Alannah Hannah Page
- 5 years ago
- Views:
Transcription
1 Dreamweaver for Dummies Jared Covili (801) Section 1: How The Internet Works The Basic Process Let's say that you are sitting at your computer, surfing the Web, and you get a call from a friend who says, "I just read a great article! Type in this URL and check it out! It's at So you type that URL in to your browser and press return. Magically, no matter where in the world that URL lives, the page pops up on your screen! At the most basic level possible, the following diagram shows the steps that brought that page to your screen: Your browser formed a connection to a Web server, requested a page and received it. If you want to get into a bit more detail, here are the basic steps that occurred behind the scenes: The browser broke the URL into 3 parts: 1. The protocol ("http") 2. The server name (" 3. The file name ("index.html") The browser communicated with a name server to translate the server name " into an IP Address, which it uses to connect to the server machine. The browser then formed a connection to the server at that IP address. Following the HTTP protocol, the browser sent a GET request to the server, asking for the file " ". The server then sent the HTML text for the Web page to the browser. The browser read the HTML tags and formatted the page onto your screen.
2 If you've never explored this process before, that's a lot of new vocabulary. The Internet So what is "The Internet"? The Internet is a gigantic collection of millions of computers, all linked together on a computer network. The network allows all of the computers to communicate with one another. A home computer is usually linked to the Internet using a normal phone line and a modem that talks to an Internet Service Provider (ISP). A computer in a business or university has a Network Interface Card (NIC) that directly connects it to a Local Area Network (LAN) inside the business. The business then connects its LAN to an ISP using a high-speed phone line like a T1 line. A T1 line can handle approximately 1.5 million bits per second, while a normal phone line using a modem can usually handle 30,000 to 50,000 bits per second. ISPs then connect to larger ISPs, and the largest ISPs maintain fiber-optic "backbones" for an entire nation or region. Backbones around the world are connected through fiber-optic lines, undersea cables or satellite links. In this way, every computer on the Internet is connected to every other computer on the Internet. How the Web Page Works Have you ever wondered how a Web page works? Have you ever wanted to create your own Web page? Have you ever heard the word "HTML" and wondered what it means? Let's set the stage. At this moment, it is nearly guaranteed that: You have access to a computer. You have access to a Web browser, and that browser is either Netscape Navigator or Microsoft Internet Explorer. You want to learn how Web pages work, and perhaps learn the art of creating your own pages. Because you have access to a computer and a Web browser, and possess the desire to learn, you have everything you need to get started. You can create any kind of Web page you can imagine. In order to talk about Web pages and how they work, you need to understand four simple terms: Web page - A Web page is a simple text file that contains not only text, but also a set of HTML tags that describe how the text should be formatted when a browser displays it on the screen. The tags are simple instructions that tell the Web browser how the page should look when it is displayed. The tags tell the browser to do things like change the font size or color, or arrange things in columns. The Web browser interprets these tags to decide how to format the text onto the screen. HTML - HTML stands for Hyper Text Markup Language. A "markup language" is a computer language that describes how a page should be formatted. If all you want to do is display a long string of black and white text with no formatting, then you don't need HTML. But if you want to change fonts, add colors, create headlines and embed graphics into your page, HTML is the language you use to do it. Web browser - A Web browser, like Netscape Navigator or Microsoft Internet Explorer, is a computer program (also known as a software application, or simply an application) that does two things: o A Web browser knows how to go to a Web server on the Internet and request a page, so that the browser can pull the page through the network and into your machine. o A Web browser knows how to interpret the set of HTML tags within the page in order to display the page on your screen as the page's creator intended it to be viewed. Web server - A Web server is a piece of computer software that can respond to a browser's request for a page, and deliver the page to the Web browser through the Internet. You can think of a Web server as an apartment complex, with each apartment housing someone's Web page. In order to store your page in the complex, you need to pay rent on the space. Pages that live in this complex can be displayed to and viewed by anyone all over the world. Your landlord is called your host, and your rent is usually called your hosting charge. Every day, there are millions of Web servers delivering pages to the browsers of tens of millions of people through the network we call the Internet. It is extremely easy to experiment with Web pages without using a server. Your browser can view the Web pages you create from your personal machine. Once you understand how to create your own pages, it is likely that you will want to put them "out on a server," so that people around the world can load your pages and read them. Viewing the Source Let's take a look at the "guts" of a Web page. These are the original text and HTML tags typed by the author and interpreted by the browser to produce the Web page you actually SEE on the Internet. With your mouse, right-click on any blank portion of a web page and choose "View Source." A new window appears, displaying words and characters, some of which may look pretty technical and foreign. These words and characters are, collectively, the HTML programming code you are about to learn. Each element within that code is an HTML tag. Don't be intimidated by how complex it looks -- you'll be surprised at how easy it really is. When you are done looking at the page's source code, simply close out the source page.
3 You can look "behind the scenes" of almost any page on the Internet this way. When you become more involved in Web designing, you'll probably find yourself viewing the sources of complicated Web pages in order to learn the codes that the authors, or page designers, used to create such interesting arrangements. Section 2: Workflow and Planning When starting a new online project there is a basic structure to the process or at least you might want to think about using one so that this project doesn t overwhelm you. Believe me, becoming overwhelmed by a project will happen before you know it unless you are following a process. The following work-flow strategies are just suggestions, so modify to meet your own needs. There are five stages of creating and sustaining a project. 1. Planning What is your objective? Who is your audience? Where is the content coming from? Why are you doing it? What are the technical specifications? What is it going to look like? How are visitors going to navigate? These questions need to be answered before you do any other work. Your answers guide you through the rest of the process. The worksheets following this page can help with this process. 2. Gathering This is the stage when you collect and organize all the content, including text, images, logos, contact info, assignments, calendars, student work etc. Taking the time to get as much of your content in a binder on your desk or folder on your desktop will speed up the building process. Doing a good job here will help prevent a stalled project while you wait for someone else to get you files. 3. Building Here is where we get down to work to build the web site, and Dreamweaver makes our work much easier. Most likely the greatest portion of the time spent on the project will be during this phase. 4. Transferring The easiest part. Make all your work available for the world to see. The most common method of transferring your project to a Web server (host) is FTP. Dreamweaver can also handle this for us. 5. Updating Keep your site current. There are some projects that may not ever need new information, but most sites benefit from current and regular updates. Section 3: Getting Started Managing your site is a big challenge. It becomes difficult to keep track of all of your files, graphics and their locations especially as you put your site on a web server. Dreamweaver has a site-management feature that requires you to create and keep all of your files in one main root folder on your hard-drive so you can easily duplicate the folder structure on a web server. This helps keep all of your links working and avoids broken graphics. The first step in allowing Dreamweaver to help manage your site is to Define a New Site. This means telling Dreamweaver you are starting a new site, giving it a name, identifying a local root folder, and Identifying a Remote root folder. Once this is done Dreamweaver helps manage all your files on the local machine and on the server. Defining a New Site 1. Create a new folder on your desktop. Name it something like joe_teacher_root". This is where you store all the files for your website. 2. Start Dreamweaver. 3. Select the Expand button in the Site panel on the right. This expands the Site panel and makes it easier to work with. 4. Click on the Site drop down menu and select New Site
4 . 5. Select the Advanced tab. Enter a Site Name. This name is for your eyes only. 6. Select Local Info. This is where you tell DW where to store all your files locally--local Root Folder. This is where all the files for this site are stored on the local computer. You already created a folder on the desktop. To tell DW where it is click the yellow folder icon on the right. Leave the rest of the boxes empty at this time. Building the Root Structure Adding Folders and Files The site root is the folder (directory) that contains all the files that make up a site. All of these files could be in the root level (upper most level) of the site root, but organizing some of the files into subfolders makes it easier for you to locate and manage the files as the site grows By creating a structure and dividing the files into corresponding subfolders, you can access the files quickly when you need to make revisions or changes. You, the developer, determine the actual structure and names of the folders. The design of the structure is flexible and you can arrange it in any method that you desire, as long as you adhere to the following conventions: The index page must be in the root (upper most level) of your root folder. All files used in the site and subfolders that may contain those files must be located within the root folder. All folder names must follow standard naming conventions, containing no special characters (special characters include spaces, slashes, apostrophes, etc.). As with files, no two folders in the same place can have identical names. Library and Template folders must remain in the root level of the local root folder. They should not be renamed or moved as that would cause them to not function properly. Organization and preplanning allows you to save the files into the correct folder as you create them. Saving files into a predetermined location reduces the chance of having to move the file after it has been linked to other files. Dreamweaver can update links if you move them in the site window, but saving files in the right place first is best. Defining a site structure at the beginning of a project can increase productivity and simplify the entire process.
5 Creating a directory structure to organize the files has many benefits, including quick retrieval, the ability to repurpose files, improved efficiency and clarification that makes the site easier for other developers to understand. Steps 1. Locate the Site Panel. It is usually on the left side with in the Files Panel. You should see the root folder that you defined at the top. Before building in Dreamweaver draw a diagram or organizational chart of the pages within the site as well as how you will link them. 2. After defining the site and using the teacher sample files, the site panel should show the files and folders that are already in the root folder. The next step is to add the eight HTML files from the above diagram to the site. Start by selecting the folder the files will go inside. Then right click the mouse. 3. Select New File from this menu. Each page within a site is a single HTML file.
6 4. Name this first one Index.html. The file must have the extension.html or.htm for it to be a valid webpage. 5. Now add the other seven html files the same way and in the same place. Check to make sure they all have the.html or.htm extension. If they don't, add it to them now. Also add the Index.html page. This is the homepage or the page you want people to see first when they come to your site. 6. As the site grows and the number and types of files increase, it is a good idea to organize the root folder. Creating subfolders to hold similar types of files is recommended. To do this Select the top folder, then right click. From the pop out menu Select New Folder. 7. The name of this folder should describe what it contains. This folder holds all the html files or pages except the index. So name the folder "pages". Folders do not need file extensions, just the name. 8. Now move all the html files, except the index, into the pages folder. Do this by clicking and dragging each file onto the pages folder. When the file is inside of a subfolder it will be indented. The index.html is a special case. It is designated as the home page or the first page visitors should see. To make sure visitors see this page first it needs to be "at the root level" which means inside the root folder but not inside any other folders. The main pages are now within the root folder and it is time to start laying out the pages. You may want to add one more html file and name it something like mock up or scratch and then use this file to design on. Section 4: Introduction to Dreamweaver MX What is DreamWeaver? Dreamweaver is a professional web page editor or sometimes called a WYSIWYG (What You See Is What You Get) HTML editor. As you create a web page, Dreamweaver shows the results instantly. In comparison, if you hand code HTML you need to work in a text editor, save your work, and open a browser to see the results of the change. Dreamweaver is a word processor of web pages. This new version "MX" is the latest offering from Macromedia of their web page editor which has become the standard for professionals and beginners alike. Probably the biggest change comes in the Panels. In version 4 all the action panels floated, which meant they could get behind each other and turned off accidentally. Also it seemed like you had to continually move them out of the way. In MX all the Panels come "docked", meaning they are locked in place along the
7 left side of the program and are accessed and managed through expanding and compressing individual panels. As you will see this greatly improves the usability of all the complex menus that are on these panels. There are a few other changes and improvements but for the general user the panel system is the biggest difference. Dreamweaver's User Interface The User Interface is a fancy name for how a program is laid out for the user to use. Below is the standard "User Interface". Let's take a look at the individual parts. The Insert Panel This is the default look for this panel. Each tab has a different set of buttons to perform the most used actions. The "Common" is at the front because it is the most heavily used. All actions performed by these buttons can be done at least one other way. For example; inserting a table can be done using the table button on this panel, using the Insert drop down menu, or using a keyboard short cut, so choose the best method for you. The buttons on this panel appear without labels by default. Dreamweaver gives a lot of options when it comes to customizing, one of which is the ability to have labels show for each button. The Properties Panel The Properties panel is the most important panel of all. This panel changes depending on what is selected in the document window. Once you select an object, this panel reflects all its editable properties. Note: For some objects this panel includes a lower half that shows additional properties. Always keep this panel fully open. There is a small white triangle in the lower right corner, click on it to expand the panel.
8 Modifying Page Properties To change the background color as well as other attributes of your page use the Page Properties window. Some of the attributes you can change are background color, text and link colors. 1. Select Modify > Page Properties 2. Move the Page Properties window around so you can see part of your Document Window behind. 3. Click on the small box to the right of the word Background. A color palette will open up. 4. Click on a color pixel. This will change your background color to be the selected color. Click Apply to preview the change. Click OK if you are finished making changes in the Page Properties window. You can do the same process for Text Color, Links, Visited Links, and Active Links. 5. Another way to pick a color is to match a color using the eyedropper. Instead of picking a color from the palette you can match the color of anything on your document window or pallets. Most likely you will be trying to match a color within a graphic. When the color palette comes up move your mouse over the item that has the color you would like to match. Make sure that your cursor is an Eye Dropper. Click on the object with the matching color. The property color box should turn the same color as the matching item. Click Apply to see the results. 6. You can use the hexadecimal value for a color instead of using the color palette. Type in the number (#3333FF for bright blue) in the box next to the property color you would like to change.
9 7. Save your work. NOTE: All the colors shown in the Initial Color Palette are web safe colors. When you pick a color that is outside the palette you run a risk of having the color look different between different browsers. Creating and Modifying Tables There are times when you want to use a table instead of a layer, like when you are doing a calendar or a table showing teacher s names and addresses. Let s learn how to create a table: 1. Click on the Insert Table button in the Object Palette or choose Insert > Table from the top pull down menu. 2. The Insert Table dialog box appears. Fill in the appropriate information to create your table. 3. A table should appear on your page with the amount of rows and columns you specified in the dialog box. 4. You can merge cells to create one larger cell. To do this, select cells you would like to merge by clicking inside the cell and dragging it through all of the cells you would like to merge. 5. Choose Modify > Table > Merge Cells or click on the Merge Cell button in the Property Inspector. This will result in all of the selected cells becoming one cell. 6. Add another row by clicking in a cell and going to Modify > Table > Insert Row a new row will be inserted above the cell where you put your cursor. 7. You can delete a column or row just as easily. Select the row you want to delete. Go to Modify > Table > Delete Row. 8. To add text in your table. Click in the cell you want to add text to and begin typing. You can format the text the same way you would outside of a table. 9. To add an image to your table click in the cell where you want to insert the image and go to Insert > Image. 10. You can adjust the column and row widths by moving your cursor to the boarder of the column or row you want to adjust. Wait for your cursor to change to a double arrow and then click and drag the line to the width or height that you want. 11. You have just created a table. There are several other table options, but these are the basics. The best thing to do is get in and experiment with them to see what you can do. TIP: There are two types of tables, Percentage-based tables and Pixel-based tables. A Percentagebased table will stretch with the width of the browser. This means that the size of the table depends on the size of the browser. The table changes size to fill up the specified % of the screen. A Pixelbased table is a fixed size no matter how small or large the browser becomes. What type of table to use is solely dependent on look you want for your page layout. Creating Links The ability to link pages with hyper links is what makes the web such a powerful tool. You can make text or images a link. 1. Select the image or text you wish to make a link. 2. If you want to link to an html file that is within your site, click on the small yellow folder next to the Link text box in the Properties Inspector window.
10 3. The Select HTML File window pops up. Browse to the html file location on your computer. Click on the file name and click the Select button. You have just created a relative link or internal link. It is relative because it linked to the document within the site and not to an external web site 4. If you want to create a link to an external web site, select the image or text you wish to make a link. 5. Type the web address ( into the link option in the Properties Inspector window. Notice that if you are creating a text link, the text color changes. You have just created an Absolute link or external link. It is absolute because it starts with and includes the full address. 6. To preview and test your page in a web browser. Go to File > Preview in Browser > select a browser or Press F12. Depending on what your default browser is set for you may see your page in Netscape or Internet Explorer. 7. Make an address link selecting the text and in the Properties Inspector type mailto:address@somewhere in the Link field or click the link button common Object Palette. Type in the text you want to be a link and the address. from the
11
12
13
Dreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
More informationADOBE 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 informationAdobe Dreamweaver CS5 Tutorial
Adobe Dreamweaver CS5 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationSign in and join ADC Newsletters Feedback. Creating your first website Part 2: Creating the page layout
1 of 14 2/14/2008 2:31 PM Adobe Dreamweaver Article Adobe Developer Connection Sign in and join ADC Newsletters Feedback RSS Creating your first website Part 2: Creating the page layout Jon Varese Adobe
More informationDreamweaver 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 informationAdobe Dreamweaver CC 17 Tutorial
Adobe Dreamweaver CC 17 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
More informationElectronic Portfolios in the Classroom
Electronic Portfolios in the Classroom What are portfolios? Electronic Portfolios are a creative means of organizing, summarizing, and sharing artifacts, information, and ideas about teaching and/or learning,
More informationMicrosoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,
More informationDreamweaver 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 informationm ac romed ia D r e a mw e av e r Curriculum Guide
m ac romed ia D r e a mw e av e r Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and
More informationLocate it inside of your Class/DreamWeaver folders and open it up.
Simple Rollovers A simple rollover graphic is one that changes somehow when the mouse rolls over it. The language used to write rollovers is JavaScript. Luckily for us, when we use DreamWeaver we don t
More informationTitle and Modify Page Properties
Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics
More informationFrontPage 98 Quick Guide. Copyright 2000 Peter Pappas. edteck press All rights reserved.
Master web design skills with Microsoft FrontPage 98. This step-by-step guide uses over 40 full color close-up screen shots to clearly explain the fast and easy way to design a web site. Use edteck s QuickGuide
More informationSection 6: Dreamweaver
Section 6: Dreamweaver 1 Building TPS Web Pages with Dreamweaver Title Pages 1. Dreamweaver Storyboard Pages 3 2. Folder Management 4 3. Defining Your Site 5-8 4. Overview of Design Features 9-19 5. Working
More informationFA269 - DIGITAL MEDIA AND CULTURE
FA269 - DIGITAL MEDIA AND CULTURE ST. LAWRENCE UNIVERSITY a. hauber http://blogs.stlawu.edu/digitalmedia DIGITAL TECHNICAL PRIMER INCLUDED HERE ARE THE FOLLOWING TOPICS A. WHAT IS A COMPUTER? B. THE DIFFERENCE
More informationADOBE 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< building websites with dreamweaver mx >
< building websites with dreamweaver mx > < plano isd instructional technology department > < copyright = 2002 > < building websites with dreamweaver mx > Dreamweaver MX is a powerful Web authoring tool.
More informationORB 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 informationBeginners 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 informationBuilding TPS Web Pages with Dreamweaver
Building TPS Web Pages with Dreamweaver Title Pages 1. Folder Management 7 2. Defining Your Site 8-11 3. Overview of Design Features 12-22 4. Working with Templates 23-25 5. Publishing Your Site to the
More informationTable 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 informationCreating and Publishing Faculty Webpages
Creating and Publishing Faculty Webpages The UNF Template The template we are using today provides a professional page that is easy to work with. Because the pages are already built, faculty members can
More informationFTP Frequently Asked Questions
Guide to FTP Introduction This manual will guide you through understanding the basics of FTP and file management. Within this manual are step-by-step instructions detailing how to connect to your server,
More informationManaging Your Sites. If you ve built one or two Web sites in the past, you ll likely agree that file. What Is a Local Root Folder?
3 Managing Your Sites What Is a Local Root Folder? 31 Defining a Site 32 Understanding Relative and Absolute URLs 37 Observing Links to Relative and Absolute URLs 38 Managing Files and Folders 40 Understanding
More informationDreamweaver 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 informationHow 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 informationOn the Web sun.com/aboutsun/comm_invest STAROFFICE 8 DRAW
STAROFFICE 8 DRAW Graphics They say a picture is worth a thousand words. Pictures are often used along with our words for good reason. They help communicate our thoughts. They give extra information that
More informationAbout Freeway. Freeway s Tools and Palettes
About Freeway The most important thing to appreciate before you start a site in Freeway is how the process works, especially if you have tried other Web publishing software before. Freeway is not an HTML
More informationGoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next.
Getting Started From the Start menu, located the Adobe folder which should contain the Adobe GoLive 6.0 folder. Inside this folder, click Adobe GoLive 6.0. GoLive will open to its initial project selection
More informationThe 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 informationTitle and Modify Page Properties
Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics
More informationClient Interview. Interview Topics. Goals and Target Audience. Activity 3.1 Worksheet. Client Name:
Activity 3.1 Worksheet Client Interview Team Name: Date: Client Name: Interview Topics Goals and target audience Content Design requirements Delivery requirements Goals and Target Audience Identify three
More informationENGL 323: Writing for New Media Repurposing Content for the Web Part Two
ENGL 323: Writing for New Media Repurposing Content for the Web Part Two Dr. Michael Little michaellittle@kings.edu Hafey-Marian 418 x5917 Using Color to Establish Visual Hierarchies Color is useful in
More informationExcel 2010: Getting Started with Excel
Excel 2010: Getting Started with Excel Excel 2010 Getting Started with Excel Introduction Page 1 Excel is a spreadsheet program that allows you to store, organize, and analyze information. In this lesson,
More informationFrontPage Help Center. Topic: FrontPage Basics
FrontPage Help Center Topic: FrontPage Basics by Karey Cummins http://www.rtbwizards.com http://www.myartsdesire.com 2004 Getting Started... FrontPage is a "What You See Is What You Get" editor or WYSIWYG
More informationFRONTPAGE STEP BY STEP GUIDE
IGCSE ICT SECTION 15 WEB AUTHORING FRONTPAGE STEP BY STEP GUIDE Mark Nicholls ICT lounge P a g e 1 Contents Introduction to this unit.... Page 4 How to open FrontPage..... Page 4 The FrontPage Menu Bar...Page
More informationCreating Classroom Websites Using Contribute By Macromedia
Creating Classroom Websites Using Contribute By Macromedia Revised: 10/7/05 Creating Classroom Websites Page 1 of 22 Table of Contents Getting Started Creating a Connection to your Server Space.. Page
More informationPreview from Notesale.co.uk Page 2 of 61
Modify a table Applying styles to tables; banding rows and columns; inserting total rows; removing styles from tables Filter and sort a table Filtering records; sorting data on multiple columns; changing
More informationCreating Simple Links
Creating Simple Links Linking to another place is one of the most used features on web pages. Some links are internal within a page. Some links are to pages within the same web site, and yet other links
More informationFrontPage. Directions & Reference
FrontPage Directions & Reference August 2006 Table of Contents Page No. Open, Create, Save WebPages Open Webpage... 1 Create and Save a New Page... 1-2 Change the Background Color of Your Web Page...
More informationA new clients guide to: Activating a new Studio 3.0 Account Creating a Photo Album Starting a Project Submitting a Project Publishing Tips
Getting Started With Heritage Makers A Guide to the Heritage Studio 3.0 Drag and Drop Publishing System presented by Heritage Makers A new clients guide to: Activating a new Studio 3.0 Account Creating
More informationObjective % Select and utilize tools to design and develop websites.
Objective 207.02 8% Select and utilize tools to design and develop websites. Hypertext Markup Language (HTML) Basic framework for all web design. Written using tags that a web browser uses to interpret
More informationCreating Web Pages with SeaMonkey Composer
1 of 26 6/13/2011 11:26 PM Creating Web Pages with SeaMonkey Composer SeaMonkey Composer lets you create your own web pages and publish them on the web. You don't have to know HTML to use Composer; it
More informationHow to set up a local root folder and site structure
Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where
More informationUsing Dreamweaver CC. 3 Basic Page Editing. Planning. Viewing Different Design Styles
3 Now that you should know some basic HTML, it s time to get in to using the general editing features of Dreamweaver. In this section we ll create a basic website for a small business. We ll start by looking
More informationTransitioning Teacher Websites
Transitioning Teacher Websites Google sites is an online web building tool that can be accessed and updated from anywhere there is an internet connection. Here is a brief video introduction of Google sites.
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More informationDreamweaver 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 informationAGENT123. Full Q&A and Tutorials Table of Contents. Website IDX Agent Gallery Step-by-Step Tutorials
AGENT123 Full Q&A and Tutorials Table of Contents Website IDX Agent Gallery Step-by-Step Tutorials WEBSITE General 1. How do I log into my website? 2. How do I change the Meta Tags on my website? 3. How
More informationGoldfish 4. Quick Start Tutorial
Goldfish 4 Quick Start Tutorial A Big Thank You to Tobias Schilpp 2018 Fishbeam Software Text, Graphics: Yves Pellot Proofread, Photos: Tobias Schilpp Publish Code: #180926 www.fishbeam.com Get to know
More informationHow To Upload Your Newsletter
How To Upload Your Newsletter Using The WS_FTP Client Copyright 2005, DPW Enterprises All Rights Reserved Welcome, Hi, my name is Donna Warren. I m a certified Webmaster and have been teaching web design
More informationIT153 Midterm Study Guide
IT153 Midterm Study Guide These are facts about the Adobe Dreamweaver CS4 Application. If you know these facts, you should be able to do well on your midterm. Dreamweaver users work in the Document window
More informationExcel Basics Rice Digital Media Commons Guide Written for Microsoft Excel 2010 Windows Edition by Eric Miller
Excel Basics Rice Digital Media Commons Guide Written for Microsoft Excel 2010 Windows Edition by Eric Miller Table of Contents Introduction!... 1 Part 1: Entering Data!... 2 1.a: Typing!... 2 1.b: Editing
More informationRoxen Content Provider
Roxen Content Provider Generation 3 Templates Purpose This workbook is designed to provide a training and reference tool for placing University of Alaska information on the World Wide Web (WWW) using the
More informationPBwiki 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 informationCreating 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 informationEKTRON 101: THE BASICS
EKTRON 101: THE BASICS Table of Contents INTRODUCTION... 2 TERMINOLOGY... 2 WHY DO SOME PAGES LOOK DIFFERENT THAN OTHERS?... 5 LOGGING IN... 8 Choosing an edit mode... 10 Edit in context mode (easy editing)...
More informationDreamweaver is a full-featured Web application
Create a Dreamweaver Site Dreamweaver is a full-featured Web application development tool. Dreamweaver s features not only assist you with creating and editing Web pages, but also with managing and maintaining
More informationProject 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 informationPublisher 2007 Creating Flyers and Brochures
MS Publisher 2007 User Guide Publisher 2007 Creating Flyers and Brochures THE NATURE OF DESKTOP PUBLISHING - INTRODUCTION Publisher is a desktop publishing program. You can create publications that
More informationPublisher 2007 Creating Flyers and Brochures
MS Publisher 2007 User Guide Publisher 2007 Creating Flyers and Brochures THE NATURE OF DESKTOP PUBLISHING - INTRODUCTION Publisher is a desktop publishing program. You can create publications that use
More informationArchitectural 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 informationNVU Web Authoring System
NVU Web Authoring System http://www.nvu.com/index.php Table of Contents Using Nvu as Your Web Page Authoring System: Getting Started Opening a page, saving, and previewing your work...3 Formatting the
More informationDreamweaver Tutorials Working with Tables
Dreamweaver Tutorials This tutorial will explain how to use tables to organize your Web page content. By default, text and other content in a Web page flow continuously from top to bottom in one large
More informationDREAMWEAVER 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 informationThe purpose of this tutorial is to introduce you to the Construct 2 program. First, you will be told where the software is located on the computer
Learning Targets: Students will be introduced to industry recognized game development software Students will learn how to navigate within the software Students will learn the basics on how to use Construct
More informationPage Gentics Software GmbH Enterprise Portals and Content Management Systems
1. 2012 Gentics Software GmbH Page 2 Table of Contents 1. Table of Contents... 3 2. Foreword Infoportal and Support... 6 3. First steps... 6 3.1 Login and logout... 6 3.2 Password change... 7 3.3 User
More informationEng 110, Spring Week 03 Lab02- Dreamwaver Session
Eng 110, Spring 2008 Week 03 Lab02- Dreamwaver Session Assignment Recreate the 3-page website you did last week by using Dreamweaver. You should use tables to control your layout. You should modify fonts,
More informationCLASS 6: March 5, 2014 MULTIMEDIA TOOLS: DGIM 601-W01 (127469)
CLASS 6: March 5, 2014 MULTIMEDIA TOOLS: DGIM 601-W01 (127469) AGENDA: Homework Review: Website Logo (Save As: YourInitials_logo.psd ) Photoshop Lesson 6: Start Midterm Set-Up OBJECTIVE: Set-Up Photoshop
More informationUsing 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 informationUsing 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 informationUnit 8. Lesson 8.1. Microsoft FrontPage. Introduction. Microsoft FrontPage-1. Microsoft FrontPage
Microsoft FrontPage Unit 8 Microsoft FrontPage Introduction Lesson 8.1 Microsoft FrontPage-1 A number of Software Packages are available in market for creating a website. Among popular software s are Dreamweaver,
More informationAdobe Dreamweaver CS3 English 510 Fall 2007
Adobe Dreamweaver CS3 English 510 Fall 2007 Important: Before going through this handout, you should create a WWW directory on your ISU e-mail account. Otherwise, you will not be able to upload and view
More informationAdobe Dreamweaver CS5/6: Learning the Tools
Adobe Dreamweaver CS5/6: Learning the Tools Dreamweaver is an HTML (Hypertext Markup Language) editor, authoring tool, and Web site management tool. Dreamweaver is a WYSIWYG (what you see is what you get)
More informationThe Domino Designer QuickStart Tutorial
The Domino Designer QuickStart Tutorial 1. Welcome The Domino Designer QuickStart Tutorial You've installed Domino Designer, you've taken the Designer Guided Tour, and maybe you've even read some of the
More informationGetting Help...71 Getting help with ScreenSteps...72
GETTING STARTED Table of Contents Onboarding Guides... 3 Evaluating ScreenSteps--Welcome... 4 Evaluating ScreenSteps--Part 1: Create 3 Manuals... 6 Evaluating ScreenSteps--Part 2: Customize Your Knowledge
More informationUsing 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 informationAuthoring World Wide Web Pages with Dreamweaver
Authoring World Wide Web Pages with Dreamweaver Overview: Now that you have read a little bit about HTML in the textbook, we turn our attention to creating basic web pages using HTML and a WYSIWYG Web
More informationCreating an with Constant Contact. A step-by-step guide
Creating an Email with Constant Contact A step-by-step guide About this Manual Once your Constant Contact account is established, use this manual as a guide to help you create your email campaign Here
More informationIntroduction 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 informationICT IGCSE Practical Revision Presentation Web Authoring
21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:
More informationLab #3: Web Design with Graphics
English 413: Electronic Documents and Publications Dr. Jablonski Spring 2004 What You Need to Complete this Lab Lab #3: Web Design with Graphics 1. HTML editing software, preferably Dreamweaver MX 2. UNLV
More informationMicrosoft Excel 2007
Learning computers is Show ezy Microsoft Excel 2007 301 Excel screen, toolbars, views, sheets, and uses for Excel 2005-8 Steve Slisar 2005-8 COPYRIGHT: The copyright for this publication is owned by Steve
More informationGlossary. advance: to move forward
Computer Computer Skills Glossary Skills Glossary advance: to move forward alignment tab: the tab in the Format Cells dialog box that allows you to choose how the data in the cells will be aligned (left,
More information2013 edition (version 1.1)
2013 edition (version 1.1) Contents 1 Introduction... 3 2 Signing in to your Office 365 account... 3 2.1 Acceptable Use Policy and Terms of Use... 4 3 Setting your profile and options... 4 3.1 Settings:
More informationDreamweaver 8 Basics and Beyond
Dreamweaver 8 Basics and Beyond The instructions in this document assume the reader has already created web pages using some other web page creation software (e.g., Netscape Composer or Microsoft FrontPage).
More informationCreating a Website Using Weebly.com (July 2012 Update)
Creating a Website Using Weebly.com (July 2012 Update) Weebly.com is a website where anyone with basic word processing skills can create a website at no cost. No special software is required and there
More informationPUBLISHING ON THE SD MINES WEBSITE EKTRON ALOHA EDITOR EDITING A PAGE
1 2/14/17 PUBLISHING ON THE SD MINES WEBSITE EKTRON ALOHA EDITOR EDITING A PAGE Logging In Note: If you are off-campus, you will first need to vpn in, before following the instructions below. Ektron works
More informationWorking with Images and Multimedia
CHAPTER Working with Images and Multimedia You can make your web page more interesting by adding multimedia elements. You can download the files featured in this chapter from www.digitalfamily.com/tyv.
More informationWeb-Friendly Sites. Planning & Design 1
Planning & Design 1 This tutorial presents useful tips and tricks to help you achieve a more Web-friendly design and make your sites more efficient. The following topics are discussed: How Z-order and
More informationDreamweaver Basics Workshop
Dreamweaver Basics Workshop Robert Rector idesign Lab - Fall 2013 What is Dreamweaver? o Dreamweaver is a web development tool o Dreamweaver is an HTML and CSS editor o Dreamweaver features a WYSIWIG (What
More informationNetObjects Fusion 10 Build Great Sites.
NetObjects Fusion 10 Build Great Sites. Why is Fusion the website builder of choice for novices and professionals alike? The answer is simple: Fusion 10 makes it easy for anyone to create and publish a
More informationBasic Intro to ETO Results
Basic Intro to ETO Results Who is the intended audience? Registrants of the 8 hour ETO Results Orientation (this training is a prerequisite) Anyone who wants to learn more but is not ready to attend the
More informationCampaign Walkthrough
Email Campaign Walkthrough This guide is distributed with software that includes an end-user agreement, this guide, as well as the software described in it, is furnished under license and may be used or
More informationThere are six main steps in creating web pages in FrontPage98:
This guide will show you how to create a basic web page using FrontPage98 software. These instructions are written for IBM (Windows) computers only. However, FrontPage is available for Macintosh users
More informationLesson 1 using Dreamweaver CS3. To get started on your web page select the link below and copy (Save Picture As) the images to your image folder.
Lesson 1 using Dreamweaver CS3 To get started on your web page select the link below and copy (Save Picture As) the images to your image folder. Click here to get images for your web page project. (Note:
More informationPROFESSIONAL TUTORIAL. Trinity Innovations 2010 All Rights Reserved.
PROFESSIONAL TUTORIAL Trinity Innovations 2010 All Rights Reserved www.3dissue.com PART ONE Converting PDFs into the correct JPEG format To create a new digital edition from a PDF we are going to use the
More informationDIRECTV Message Board
DIRECTV Message Board DIRECTV Message Board is an exciting new product for commercial customers. It is being shown at DIRECTV Revolution 2012 for the first time, but the Solid Signal team were lucky enough
More informationCreating a Website in Schoolwires
Creating a Website in Schoolwires Overview and Terminology... 2 Logging into Schoolwires... 2 Changing a password... 2 Navigating to an assigned section... 2 Accessing Site Manager... 2 Section Workspace
More informationDreamweaver 101. Here s the desktop icon for Dreamweaver CS5: Click it open. From the top menu options, choose Site and New Site
Dreamweaver 101 First step: For your first time out, create a folder on your desktop to contain all of your DW pages and assets (images, audio files, etc.). Name it. For demonstration, I ll name mine dw_magic.
More information