what makes a website?
DESCRIPTION
What makes a website?. Comprised of interlinked Web pages Typically begins with a home page Titled sitename / index.html Contained under a home directory Built using XHTML & CSS - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: What makes a website?](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814f67550346895dbd1d6c/html5/thumbnails/1.jpg)
What makes a website?
• Comprised of interlinked Web pages
• Typically begins with a home page– Titled sitename/index.html
• Contained under a home directory
• Built using XHTML & CSS– Extensive Hypertext Markup Language – tells the browser
(Firefox, etc.) what content to display and its hierarchy– Cascading Style Sheets – manages the appearance of the
site (colors, fonts, sizes, etc.)
![Page 2: What makes a website?](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814f67550346895dbd1d6c/html5/thumbnails/2.jpg)
Under the hood
Rule #1: ALL TAGS MUST HAVE AN OPENING AND A CLOSING!
Rule #1: ALL TAGS MUST HAVE AN OPENING AND A CLOSING!
![Page 3: What makes a website?](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814f67550346895dbd1d6c/html5/thumbnails/3.jpg)
Appears in the browser tab
Appears in the browser tab
Links to the CSS to control the page layout
Links to the CSS to control the page layout
Controls the tabsControls the tabs
Controls headlinesControls headlines
Paragraph textParagraph text
Controls linksControls links
![Page 4: What makes a website?](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814f67550346895dbd1d6c/html5/thumbnails/4.jpg)
Notes – not visible to userNotes – not
visible to user
Defines background color, font, size, and font color for body
Defines background color, font, size, and font color for body
Defines all attributes for all text in h1 tagsDefines all attributes for all text in h1 tags
![Page 5: What makes a website?](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814f67550346895dbd1d6c/html5/thumbnails/5.jpg)
Why dreamweaver?
• Ease & efficiency– Don’t have to know all the code– Can view your work as a Web page as you go– Lots of shortcuts
• Consistency– Create pages from templates you have already used– Create pages from suggested templates
• Easy management– Groups files– Easier to update/change
![Page 6: What makes a website?](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814f67550346895dbd1d6c/html5/thumbnails/6.jpg)
Cons to dreamweaver
• Cost
• Can be confusing
• Difficult to understand all tools without some knowledge of coding
![Page 7: What makes a website?](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814f67550346895dbd1d6c/html5/thumbnails/7.jpg)
Basic web page elements
• Text– Any words, sentences, paragraphs used on your site
• Images– Photos– Graphics– Multimedia– Widgets
• Hyperlinks– Links to other pages– Internal links– Navigation menu
![Page 8: What makes a website?](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814f67550346895dbd1d6c/html5/thumbnails/8.jpg)
Step one: defining your website
• You are setting up your ROOT DIRECTORY– The main directory that houses all files for your website
• Lets Dreamweaver know what pages, images, documents, and CSS files are attached to your website
• You must define a new website for every different project you work on
• In class, you will work on a practice website; outside of class, you will create your own
![Page 9: What makes a website?](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814f67550346895dbd1d6c/html5/thumbnails/9.jpg)
Step one: defining your website• Open Dreamweaver
• A prompt with options should pop up
• Select “new site” or “Dreamweaver site”
• Enter 335 Practice Site as the name of the site
• Click the folder icon & save to your personal server (P: drive)
![Page 10: What makes a website?](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814f67550346895dbd1d6c/html5/thumbnails/10.jpg)
Step two: creating the home page
• Go to File New
• Select Blank Page HTML <none>
• Save the file to your root folder
• Title it index (no capitalization or spaces)
![Page 11: What makes a website?](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814f67550346895dbd1d6c/html5/thumbnails/11.jpg)
Step 3: entering text• Three views for your site:– Code – Split (code & design)– Design
• Enter site title “CMAT 335” between <title> tags
• Type in between <body> tags
• Refresh & view in design tab
![Page 12: What makes a website?](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814f67550346895dbd1d6c/html5/thumbnails/12.jpg)
Adding text
• Always first type your text in Word document – Checks for spelling– Allows you another storage space
• Copy & paste from document into site
• Paste special allows you to keep some formatting– Text with structure plus full formatting
![Page 13: What makes a website?](https://reader035.vdocuments.net/reader035/viewer/2022062217/56814f67550346895dbd1d6c/html5/thumbnails/13.jpg)
Your website
• An online portfolio
• Should have: – Index page (homepage) with photo & brief
introduction– About me page (brief bio & photo)– Work experience page– Interests page