(originally composed 11/15/14)
I'm using my shift at the weekend boot camp to start building my own webpage. I have Adobe Dreamweaver, which I've never used. I think rather than letting someone else's imagination determine what my page what should look like, I'd rather try to build something that matches the vision I have.
The Dream
Ideally, I'd like to start with some animation. What I'd like to do is have about three black and white images scrolling behind my full name in a bright color on an invisible banner, Carlyn Pinkins, written in large, lowercase letters. At some point, the "arlyn" of my first name will change a different color than the rest of the text and swing down like an arm under the "c" at a 90-degree angle. The "c" will then join "pinkins" and a ".net" will suddenly appear to make the name of the URL - "cpinkins.net" The letters of "arlyn" will rotate to upright positions and become the first letters of links that are written out in a different font. For example, the "a" (in a large fat arial font) will be my "About" link. I imagine the "bout" part will be written in a cursive script.
The Reality
Opening the program for the first time is intimidating. I thought I'd be opening something that would let me build my page as simply as a Microsoft Powerpoint slide, turning my creation into code with little to no effort on my part. It gives me options to build new pages, HTML, CSS, and JavaScript are among them. I should probably start with Java, but the two introduction videos I watched before have pretty much confirmed that I will need to have a good bit of knowledge of code to be able to do the things that I want to do. But I don't know how to do that. Any of it. So I thought I'd just try to work backwards and build the page that shows up after all the animation is done.
After stumbling around with what I barely remember about coding, I manage to figure how to change the background color to gray with their Page Properties menu and put some pink text on the page, but the positioning is all wrong, and despite the heading being H1, the size of the text is wrong too.
The Trouble with Margins...
...is that I don't understand how they work. Even in Codecademy, the positioning of lines is nebulous. I feel like even when I created my own CV from raw code, I was randomly plugging values into a line until I got what I wanted. If there was a way to understand webpage margins beyond random numbers of pixels, I could probably get this moving a lot faster.
The bones of Dr. Gibbs' webpage is sort of the way I'd like mine to be. I've looked at his CSS code before and I still can't make sense of it, but maybe I can play with moving my elements around using his margins.
Decided to try to find fonts that might work with my vision. Time sure flies when you're frustrated.
Now what?
Having secured the code for the fonts I will want to use, I went back to Dr. Gibbs' CSS code to figure out which part sets up the margins for his home page. I also created a CSS sheet in Dreamweaver. I really don't know where to go next. I don't remember what a container is or why one would even be necessary as its own separate thing.
Downloaded Notepad++ onto this laptop and started a new index html sheet called "new_index." Checking out tutorials again to get some idea of how to start this thing.
The W3 website has convinced me that I'm thinking of "margins" in the wrong way. I'm confused about how I should think about them.
Text vs Images - How to Make the Links?
Now it's Sunday, and while I should shift my focus to the other projects that I need to do for the class, I'm still stuck on how I should go about trying to set up the page. One of the issues I'm thinking about is how to make the links that I want to make. Should I make buttons that combine the two fonts I want, or should I just use spans to make the first letter of the text different from the rest? If I do that, could I move the cursive text close enough to the block to make a single link or would have to make two. The writing I'm doing now, I realize, is just based on ideas and not actually trying things to see. I'm scared. Might as well just suck it up and try.
I didn't bring my big laptop back to camp. What I'm realizing is that Dreamweaver was never meant for beginners with only a design idea. Being able to use it requires that the user has a good understanding of coding. It may create a lot of shortcuts, but not sure that would be worth it for me.
By the end of the day, I've managed to figure out how to make a static vision of what I want (minus the background). I think I'll leave the flashier stuff for later. I had to reteach myself some things, but just using Notepad ++ and Xampp, I was able to create the vision I wanted without some fancy program doing it for me.
No comments:
Post a Comment