Module 01 Introduction to adobe spark PDF

Preview

Summary

Module 01 Introduction to adobe spark...

Description

Module 01 Adobe Spark Pages Understanding Drag and Drop Web Design

Interactive Web Design An Introduction Drag & Drop Web Design

It is certainly possible to create a website without ever touching HTML or CSS. Sites like Wix, Weebly, and GoDaddy offer drag and drop tools that are (almost) free. You can use supplied templates, enjoy custom fonts, include video and even build an ecommerce site There are advantages and disadvantages to choosing a website builder, of course. A principle advantage is not needing much more than an image editor and a browser. Some trade-offs to consider, however, include having ads displayed on your site, the inability to import or export content, or the additional costs for hosting the site and providing analytics.

Adobe Spark

Websites built with these drag and drop tools can be just the ticket for a small business site, a special event, a fund-raiser... or your portfolio. And now there's a new, easy-to-use free web builder tool from Adobe: Spark. The Spark Page app is one of three compatible tools, which include Spark Post for creating social media graphics and Spark Video for creating and editing videos. Adobe Spark is free for everyone, and a Premium account is a part of your Creative Cloud account. There's also a version of all Spark tools for iOS, and Android is expected soon. Check Google Play if you're curious. Interactive design tools

Interactive design tools In this course you'll have an opportunity to explore drag and drop website creation using Adobe Spark Page.

You'll then be able learn some simple HTML and CSS. You won't be creating anything very complex, but you'll learn Web development isn't as scary as it might seem, and you'll develop a vocabulary and knowledge for working with Web developers. Along the way, you might even find it sparks your own career in Web design. The first step is to download Adobe Spark from your Creative Cloud desktop app.

Getting Started with Spark

When you launch Spark, your browser will open, and you'll choose Page to create Web stories. You may need to sign in with your Adobe ID so that Spark recognizes you Afterwards, if your browser doesn't automatically log you in, you should be able to access Spark by visiting https://spark.adobe.com/ Once you've created a site with Page, you'll find it saved on the Spark home page. You don't need to create your site all at once. To continue editing after a break, simply click on the site's graphic icon. If you have Spark Page on a mobile device, you'll also be able to view and work on your site on-the-go. Learning Spark is Easy

Learning spark is easy Once you've played with the interactive tools, you'll find that building single-page sites is easy and intuitive. Like any web page builder, there are lots of creative things you can do with images and text. We'll experiment with several of them in the first half of this course. When you're ready, there are a few short tutorial videos that follow, which will help you learn the interface and some of the main features. Finally: play with Spark Page, just to see how the tools work and get comfortable with the software. You'll learn Page faster when you're playing around to see what it can do, rather than trying to follow directions.

Then go tackle the second assignment. Spark Page Video Tutorials Explore the instructional videos in the sections below.

Introduction to Adobe Spark Understanding Adobe Spark This introductory video will explain a little bit about the Spark software and show you exactly how to log into your Project page where you will start building a website.

Understanding Adobe Spark (2.5 minutes)

Create a Base Adobe Page Project This second video will walk you through the initial setup of the page and the interface elements for adding photos and text to your webpage.

Create a base Adobe Page project (3.5 minutes)

Working with Text and Photos Importing and Formatting Text

If you have more than a line or two of text, it's easier to write and proof everything in Microsoft Word and paste it in. You'll also want to format the text. Spark Page has pop-ups to let you align, bold-face, italicize, create bulleted text, and more. This next video will show you all of that.

Importing and Formatting Text (3.5 minutes)

Working with Photos Normally, you'll resize and crop your images in Photoshop beforehand, but Spark Page will let you animate some of the images and you may want to adjust them directly in Page. You can scale up or down, fit to the screen, and change which part of the image will be the center of the screen.

Working with Photos (4.5 minutes)

Glideshow Finally, you'll want to learn about one of the special motion graphic capabilities of Spark Page called glideshow. You can let Page animate images and text over other images. While all that you will be doing at this point is creating a scrolling page of text and images, there are plenty more fun secrets to unlock.

The best thing you can do before working on your Spark Page project is go play with Page to see how it all works.

Glideshow (3.5 minutes)

Important Vocabulary We'll be using these terms throughout the course, so make sure you understand the concepts.

Important Web Terminology What You Need to Know Terms & Concepts

Before you start on your Spark Page project this week, there are some basic Web design concepts and definitions that you'll want to be familiar with: Domain names Servers Clients Hosting Addresses & Protocols You'll also need to know the difference between saving and publishing-uploading your site to the server that will be hosting it. These concepts are necessary as you advance through the course, so you might want to come back to this part of the course as you need a refresher.

Clients & Servers

As discussed at the beginning of this course, the Internet is interactive—allowing a site visitor to jump from page to page or site to site—through the use of hyperlinks.

All of the content for any one site—all of the different pages, images, and other media elements— resides in one folder on a computer hard drive, somewhere out on the Internet. That computer—which is on a network connected to the Internet—is called a server. That server delivers content when it receives a request from another computer somewhere else on the Internet. The requesting computer is known as a client.

Hosting Your Site

The server on which the site content resides is said to be hosting the site. You could host your site yourself if you had your own server, but it's much more convenient to let some other business do that for you, to make sure your site is secure and its connection to the Internet is up to date. It isn't necessary to know where either the server or the client are physically, but it's important to know how to find them on the Internet.

Domains & Addresses

Each site has a location known as its IP (Internet Protocol) Address. It's a string of numbers separated by dots. (E.g., the IP Address of Rasmussen's home page is 192.184.113.221). Think of the client as your house and the server as a business you wish to visit. To get there, you need to know the business's address. And for the business (server) to send information to you, it needs to know your address. Numbers aren't easy to remember, but names are, which is why you can visit our website by typing www.rasmussen.edu instead having to remember its IP Address. The name (Rasmussen.edu) is our domain name.

Choosing a Domain Suffix

Each domain name has a suffix. The most common is .com, which stands for "commercial," .org is for "organization," and .edu is "educational." Normally, you have to buy an available domain name for your site, then upload your site to the server hosting your site.

However, sites like WIX, Weebly, and WordPress—and Adobe Spark—will host your site for free, but your site will exist on a subdomain of their domain. For example, your portfolio on WIX might have a domain name like Jstudentportfolio.wix.com. A major problem with all web builder sites is that you don't own the website and may not be able to migrate it to another host if you decide to move your site content. Summary and SOTD Hosting Setup Web builder sites can be useful not only as an introduction to web design, but also as an inexpensive solution to creating simple scrolling websites. With some web builders, you can add data analytics, multiple pages, video backgrounds, and simple ecommerce pages for a small monthly fee.

For this course, we won't worry about those details, but we will explore some of the differences between a web builder-hosted site and one hosted separately on your provided SOTD.us domain.

Make Certain You Can Access Your Hosting Space This is a good time to double-check that you know your ftp.SOTD.us site name and password. If you have not already set it up, you will want to do so before the Module 02 assignments.

School of Design students receive free web hosting space for the online publishing of websites, multimedia projects, and portfolios.

You should have received a message explaining how to access and set up your account in your student smail account (accessible via the Student Portal) during your first quarter in the program.

If you did not set up your ftp.sotd.us account earlier in your program, and you don't recall receiving the email instructions, call the Personal Support Center to get your account and password.

Your site will look something like this: http://sotd.us/jaystudent. You won't be uploading your Adobe Spark pages to your SOTD.us account, but you will be using Dreamweaver to upload your HTML and CSS projects created later in this course.

Again, don't delay getting your SOTD account set up. It only takes a few minutes....