Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Join author Paul Trani as he shows how to create a web site step by step with Adobe Dreamweaver CS6, one of the industry's leading web authoring tools. But not just any web site. A responsive HTML5 web site that works across multiple browsers and devices, complete with rich imagery and text, a robust portfolio, video content, and even a contact form. This course covers how to use web standards such as HTML5 for structure and Cascading Style Sheets (CSS) to control colors, fonts, navigation, and more. The course also demonstrates how to test across multiple browsers and devices and upload your new site to the web.
It's great that Dreamweaver gives me all of this control with my web content, but I still don't want to create all my content from scratch. I can use widgets in Dreamweaver. I can use Spry widgets, everything from the Widget Browser to Spry Widgets, and there are even other content available. And quite frankly, I need to make sure that my site is going to be optimized for social media. That's why right here on this homepage, it says Twitter Feed here. Now I can write that if I want to, but what I want to do is embed a Twitter feed.
I'm thinking, okay, you know what, there has to be something out there that somebody has already made. In fact, that's what I can do; I can search for embed a twitter feed into website, okay. That what I'm searching for. That will take you to this link twitter.com/about/resources/widgets because Twitter has made a widget, making this easy for me. So, if you think that maybe somebody has already made something, feel free to search of course online, just like we have this Twitter widget available as I select that.
I want to make a widget for my website, selecting that. And I want to display a profile widget which will display all the tweets and all the Twitter updates. So going in there, I can add a name. This happens to be mine, Paul Trani, so you can follow me on Twitter. But this is for evajonesdesign, so adding that in. You can see, it pulls in her Twitter feed just like that, and I can go to Preferences. It displays the number of Tweets, so I can have that. I can include a scrollbar, which is what I'm going to do.
Change the Appearance, so in here I can change the widget colors. Most importantly, I want to change the link color to make sure it matches Eva Jones's design for her website. And I even like that dark gray. I'd say that looks pretty good as well. Lastly are the Dimensions. So here, I can use the dimensions that they give me here, or make sure the width is automatically sized. And in this case I can even change the size here of the height to about 250.
I'd say that looks good. I'll scroll down. I can test the settings here. You can see, it's kind of tall, but let's go ahead and finish and grab this code. So, clicking in there, I can copy and paste that code, so that's what I'm doing, Edit > Copy. Now I can hide Safari, go into Dreamweaver, and turn off Live view. And as I take a look, Twitter feed here, well, I want to get rid of that now.
In fact, I need to get rid of all of this content down here, just deleting that. And that's where I want to insert the code, but I don't want to insert the code in Design view; what I need to do is go to my Code view, and right in here, this is where I can paste that in, okay. So in this case, on line 35, Edit > Paste, and this is all the code that it's pasted in this entire script. It has my custom colors that I've already defined. If I scroll up, you can see even reference to this widget.js, so you just have to be aware that it's pointing to that file.
All right, I'll save this page. And I want to go ahead and preview this in a browser. There you have it, EvaJonesDesign. Scrolling down, you can see those. Currently, she only has tweeted four times, that as I scale this, you can see how that moves. So really, this works out well, being able to embed not only a Twitter feed, but have this social media aspect for this website. So think, hey you know what, somebody else might have created this. Just do a quick search, especially in the case of Twitter, highly functional, highly usable widget that you can go ahead and implement on your site.
Find answers to the most frequently asked questions about Creating a First Web Site with Dreamweaver CS6.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.