misslilbit02;1330537 wrote:I have a site that I have designed and now I'm trying to convert it into HTML so that I can create a word press template.
If you're trying to convert it to HTML, my question would be what have you designed? Do you mean you drew some pretty picture in Photoshop or some other paint program before you had semantic markup of your content or a reasonable facsimile of future content? If so, I hate to break it to you, but IMHO you've designed only two things.
As to your 'page', it really does reek of the PSD first approach to "not actually making a useful website". The massive space wasting backgrounds, lack of anything resembling actual content, inaccessible fixed width layout, illegible fancy fonts, absurdly undersized fixed metric (px) fonts in what little content is present... it's an accessibility mess and the antithesis of good design.
No matter how pretty it is... and it IS pretty and shows off some good paint program skills; unfortunately that has absolutely nothing to do with building a useful website... PARTICULARLY if you care about mobile.
Under the hood, it gets worse. Presentational markup, presentational images in the markup, images split apart for no fathomable reason, no media targets, static scripting in the markup, scripting for nothing, static style in the markup, DIV for nothing, little if anything resembling semantic markup or logical document structure, tables for layout, attributes like BORDER and TARGET that have no business on any website written after 1997, etc, etc...
Basically whatever you've been learning from has led you down the garden path to failure by skipping over a lot of the fundamentals of actually building a website.
The proper process for making a useful site is to take your content or a reasonable facsimile of future content and put it into a logical order in a text editor as if HTML and CSS never even existed. You then add semantic HTML (tags saying what things are as opposed to what it looks like) to the markup to make it useful for non-CSS users (screen readers, braille readers, search engines)... From there you use CSS with media targets (via the MEDIA attribute on LINK) and media queries (to change the layout based on available screen space and/or device capabilities) adding any semantically neutral styling hooks (DIV and SPAN) as needed. Then and only then should you be thinking about opening up the paint program to make the graphics hung on the layout or enhance the page with scripting.
... and the reason for this is simple, people don't visit websites for the graphics hung on the content, they visit FOR the content, hence why the sane and rational approach to development is a "content FIRST" approach. I've NEVER seen a website where the "designer" sat around drawing pretty pictures in Photoshop EVER led to an accessible website that worked well across different screen sizes, much less provided basic accessibility features like dynamic fonts, elastic and semi-fluid layout, etc, etc... By definition Photoshop is a tool for pushing pixels around, and pixel sizes have nothing to do with accessible web design.
Sorry if that seems harsh, but you've been led astray. Yes, what you did is very pretty, but unfortunately it has nothing to do with actually building a website, particularly if you care about mobile users, desktop users... well... users. There's a reason the big success stories of the Internet -- Amazon, eBay, Google, Facebook -- are not exactly a visual 'tour de force'. They have content of value delivered in a reasonably accessible manner (kind-of) to users. If you think they had a PSD jockey sitting around making pretty pictures to build their sites, you'd be pretty far off the mark.
So again, sorry if this seems harsh, but I'd highly recommend tossing EVERYTHING you've done so far, and start over with your content or a reasonable facsimile, mark it up semantically, then bend it to your will with CSS for all the different appearances and device sizes you need, BEFORE even THINKING about going to a paint program.
Well, maybe not everything... but just as an example, if I was creating markup for that same page, it would go something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<meta
name="viewport"
content="width=device-width; height=device-height; initial-scale=1.0"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Shaping Lives and Changing Destinies - Eternal Change Ministries
</title>
</head><body>
<div id="top" class="widthWrapper">
<h1>
Eternal Change Ministries
<span>-</span>
<small>Changing Lives, Shaping Destinies</small>
</h1>
<ul id="socialLinks">
<li>
<a href="https://www.youtube.com/channel/UCZ-SCP4Jm-M-_K-rZ6YaeHQ">
<img src="images/youtube.jpg" alt="Youtube" />
</a>
</li><li>
<a href="https://www.facebook.com/cynthia.r.thompson.92">
<img src="images/fb.jpg" alt="FaceBook" />
</a>
</li>
</ul>
<!-- #top.widthWrapper -->
<div id="homeBanner"><div class="flipper flipControls_forwardBack">
<img src="slides/slide1.jpg" alt="ECM's School of the Gifts Boot Camp" />
<img src="slides/slide2.jpg" alt="Preorder your copy today of The Power of a Prophetic Mindset" />
<!-- .widthWrapper, #homeBanner --></div></div>
<div id="content" class="widthWrapper">
<h2>Thanks for visiting</h2>
<p>
You were created to manifest God's goodness and his glory in the earth. Whether you have experienced rejection, abandonment, low self-esteem, or abuse God's desires for you to be "Eternally Changed" by His power.
</p><p>
Eternal Change is a day to day journey and I want to help you to become whole and move from one level to the next. You don't have to settle! Pain is only intended to push you and not lead you. Its purpose is to make you discover the great possibilities and promises of living a life of "Eternal Change".
</p><p>
Prophet Cynthia has prepared a special video for you. Please click on the video on your left to play.
</p>
<!-- #content.widthWrapper --></div>
<div id="footer"><div class="widthWrapper">
<ul>
<li>HOME</li>
<li>ABOUT PROPHETESS </li>
<li>PROPHETIC WORD </li>
<li>CLT ENTERPRISES</li>
</ul><ul>
<li>ECM TRAINING CENTERS</li>
<li>UPCOMING EVENTS</li>
<li>PROPHETIC INTENSIVE</li>
<li>STORE</li>
</ul><ul>
<li>BECOME A PARTNER</li>
<li>MEDIA KIT</li>
<li>SCHOLARSHIPS</li>
<li>CONTACT US</li>
</ul>
<div>
<a href="https://www.youtube.com/channel/UCZ-SCP4Jm-M-_K-rZ6YaeHQ">
<img src="images/youtube.jpg" alt="Youtube" />
</a>
<a href="https://www.facebook.com/cynthia.r.thompson.92">
<img src="images/fb.jpg" alt="FaceBook" />
</a>
<br />
Copyright 2014 Eternal Change Ministries. All Rights Reserved.<br />
Designed By: Personality Web Designs.
</div>
<!-- .widthWrapper, #footer --></div>
<script type="text/javascript" src="scripts/elementals.js" />
<script type="text/javascript" src="scritps/eFlipper.js" />
</body></html>
Basically a full third the markup... EVERYTHING else being done there
If I have time later this morning (insomnia mixed with non-24 sleep-wake syndrome sucks) I'll toss together some CSS to see if I can try and at least address some of the problems without a complete "pitch it in the bin"... though really that massive image pushing the banner and content clear past the fold at anything smaller than 1200px tall needs to go.
