Join Paul Trani for an in-depth discussion in this video Creating a layout with CSS, part of Creating a First Website in Dreamweaver CC 2015.
- CSS not only styles content like changing the fonts…and changing the font color and just the color of these bars…but you can add structure using CSS…as well as using HTML.…That's what we wanna do, we wanna add structure to this.…In fact, if we take a look at the original design,…this is in Photoshop but it's just a JPEG,…you can open this up in any program you want.…The short of it is we have this content,…this h1 floating off to the left,…kind of off to the side,…we have this sort of section floating to the right.…
This is the structure I need to add…to my page.…Going back in here,…I need to add it using HTML…and then customizing that HTML with CSS.…Right here, I can see I have this h1 selected.…Now, I could jump over here and select h1…and start changing it so it floats off to the left…but that's gonna do it for every h1…so that doesn't give me enough flexibility.…What I wanna do is I wanna create a new container…off to this side,…some sort of Aside…and give it a class that makes it float off to the side.…
This is gonna make it more flexible…
Over the course of the training, you'll learn about building basic webpages; adding text, links, images, and navigation; and making your layout "flexible" on mobile devices. Each step provides another lesson on HTML and CSS, the building blocks of the web. Along the way, Paul shows how to add bonus features, such as animation from Edge Animate, a Twitter feed, and an interactive contact form.
- Planning a website
- Creating your first webpage
- Adding HTML5 content
- Styling content and the layout with CSS
- Adding images
- Creating navigation
- Building alternate layouts for tablets and mobile devices
- Adding animation and video
- Creating a contact form
- Uploading and testing the website
Skill Level Beginner
1. Understanding Website Design
2. Creating a Webpage
3. Stylizing Content
4. Adding Navigation and Pages
5. Creating a Flexible Layout
6. Adding Media
7. Creating a Contact Form
8. Testing and Uploading
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.