Workbook

Your Digital Art Workbook is a place to share your work with the class, and collect materials for your final portfolio. You will post each of your assignments in your Workbook. See each assignment for details.

Access the site editor for your work book from your Course Folder (that's the folder on Google Drive > Shared with Me, titled DigiArt-Your Name)

Getting Started with the Workbook

Find your Digital Art Course Folder. It is located in your Google Drive > Shared with me and it’s called DigiArt - Your Name.
Inside your Course Folder is a file called Digital Art Workbook-YourName. Open it, it should open google website editor in a new tab.
This is your Workbook, a Google Site I’ve set up for you. Most of your assignments will be turned in by adding image files to this website. Feel free to personalize the Workbook, but do not change the overall structure of any page, or the names or locations of the pages themselves.
Publish your site (see instructions below)
Send your instructor the URL of your published site
As you edit, remember to click the Publish button. Publish is like SAVE. Your edits will not show on the public site unless you publish.

Personalize your Workbook

Add your original artwork on all banner images in the Collage section (those are the images at the top of each page)
Add a profile image on the home page. This does not have to be a picture of you!
Add original Icon and Favicon images (instructions for setting these up)
Optional: You are welcome to make changes to the appearance of each page. For example, changing the theme, adding background colors or images to sections, etc. However, do not delete any pages, change any page names, or change the headings for each step. I need to be able to look through your Workbook and know which assignment each image is for.

Editing Google Sites

Note: this is general information is about editing a Google Site. It does not all apply specifically to the Workbook assignments.

Making a website is an ongoing process. You lay out your images and text, you publish, you look at the published site. Then you make edits to improve it, and publish again. Experiment, add different images, and try different image sizes and layouts. See how it looks on a phone (the layout changes), show it to friends, and edit your website further based on feedback.

Set up

From Google Drive, go to New > More > Google Sites > Create
The site will show up as an item in your Google drive. You can also save a bookmark to the edit interface, to get to it easier.
Add initial content and layout

Publish

Click the blue Publish button at top right
You will be prompted to to create a web address. This has to be unique, so your first choices may be already taken. Be aware: your web address is part of your URL, and is visible to visitors your site. The complete URL for your site will be https://sites.google.com/view/ YOUR WEB ADDRESS.
For now, I recommend checking the box under Search Settings where it says Request public search engines to not display my site. This will mean your site will only be visible to people who have the link. You can always change these settings.
To make your site visible to the public, go to Share with others, and set Published Site to Public. Screenshot below. If you prefer not having your site public, you can keep it restricted. However, your instructor will share it with the other students in this class, which is required.
Once you click Publish in the dialogue box, your site is live. As you edit your site, keep the editable site open in one tab, and the published site in another tab. This was you can see how your site looks to the public as you make changes to it.

Refine

Add additional content and layout.
Publish to make your changes "live".
View published version to see how it looks.

Add Content & Layout

Assets

All the image, video and GIF files that you include on your site should first be stored in a folder on google drive. You can call this folder Portfolio Assets. Right click on the folder > Share > at the bottom of the dialogue click change to anyone with the link. This will allow public viewers to your site to see images that you post on the site.

To add images to your site, go to the page you want to add them to, then on the right side menu go to Insert > Drive > navigate to the Portfolio Assets folder > select an image.

Pages

On the Pages menu on the right you can add pages, change their name, and make other edits to the overall layout of our website. Each page is automatically listed in the sites Main Menu. Depending on what Theme you use the Main Menu displays on the top or left side of your site.

Themes

Themes are different options for the overall look of your site. Type font and some other variables change in each theme. I recommend picking one to start with. Once you have added content (text and images) to your site, you can experiment with changing the theme.

Layouts

You can begin with some of the pre-made layouts, to experiment with how text and image will look on your site. The size and shape of text and images boxes are editable by dragging on the sides. You can copy and paste text and image boxes anywhere on a site.

Sections

Each page is organized into sections, which stack like layers on a cake. Sections can have white, light color, dark color, or image backgrounds. The light and dark color options are derived from you Brand colors.

Text

Text fields can be added anywhere. There is a hierarchy of five sizes of text (Title, Heading, Subheading, Normal, Small). Use the different sizes in the hierarchy to help users of your site understand the relative importance of text-based information.

Images

PNG and JPG files can be shown by themselves or in Image Carousels. Animated GIFs will loop endlessly in most browsers. PNG and GIF files can have a transparent background. This may be important if you are placing images on a color or pattern background. If you leave your site background as white, then a white background of your file may read as transparent.

Other image files types cannot be used in most website building platforms. This includes project files from Photoshop (PSD), Illustrator (Ai), Gimp (XCF), or Inkscape (SVG). You will have to export PNG, JPG, or GIF files from these project files to show them on your site.

Header Images are the large images at the top of each page. Under Header Type there are a few size options, including Title Only, which means there is no image at the top of the page.
Background images: each section can have a background image which can be any file you
Alt Text: When you add an image, there is a field for Alt Text. It's important to write a short description of what the image is here. People who has trouble seeing images on a website use screen-reading software which reads the Alt Text out loud. This makes your site accessible to visually impaired people.

Video Files

The most convenient way to include video files on your site is:

export an MOV, MP4, or AVI file
upload it to Google Drive
from your Google Site, use the Drive icon in the Insert menu to add your video file to your page. You may get a loading icon which stalls for a while, but eventually the video will load and play. The larger the video file, the longer it will take to load.

If you have a Youtube channel, you can embed videos from their to your Google site. Just use the Embed option in the Insert menu. This is ideal for longer videos which will load slowly otherwise.

Brand

Under Settings (the Gear icon) > Brand images, you can set a Logo, which will appear at the top of all your pages, and a Favicon, which will show on tabs at the top of the browser window. You can have an animated Logo if you use an animated GIF.

Google Site Tutorials

Good set of FAQs and tutorials
Tutorials from Google
Long Intro Tutorial Video Be warned, this video is very slow paced, however the narrator goes over many of the important tools. You may want to skip around the video.
Short Intro Tutorial Video This one has less detail about working with images, but is shorter and to the point.
Making a Sub Page
Make an Image a Link

Page updated

Google Sites

Report abuse