Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Beginner - HTML (CSS?) Layouts & Templates

Community Beginner ,
Oct 28, 2017 Oct 28, 2017

Hi everyone,

I am enrolled into an Adobe Dreamweaver CC 2017 online college course.

For my project, I have to create a basic 5-page website. However, I need to create a template and I am stuck!

How do I make a HTML template with CSS?

Thanks! Any help is appreciated!

1.8K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Oct 29, 2017 Oct 29, 2017
Translate
Community Expert ,
Oct 29, 2017 Oct 29, 2017

Have a look at How to create Dreamweaver template

The best way is to go to the Insert panel (CTRL+F2) and choose Templates

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 29, 2017 Oct 29, 2017

Hi Ben,

I understand how to do make a blank template. I'm having trouble creating the layout on HTML page and incorporating CSS.

Thx,

Kyle

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 29, 2017 Oct 29, 2017

Please explain, have you already created a .dwt file? Could you show us the code?

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 29, 2017 Oct 29, 2017

I made the code below with the help of this tutorial: Understanding the Internet and websites https://www.lynda.com/Dreamweaver-tutorials/Customizing-Bootstrap/558001/588107-4.html

I followed it step by step and for the most part figured out how to create the HTML layout and template. I did not understand how to create a template out of a blank .dwt.

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Index2</title>

<link href="CSS/bootstrap-3.3.7.css" rel="stylesheet" type="text/css">

<link href="CSS2/styles.css" rel="stylesheet" type="text/css">

<!-- <link href="CSS/bootstrap.css" rel="stylesheet" type="text/css"> -->

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/alfa-slab-one:n4:default;actor:n4:default;buenard:n4:default.js" type="text/javascript"></script>

</head>

<body style="padding-top: 70px">

<nav class="navbar navbar-default navbar-fixed-top">

<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

  <a class="navbar-brand" href="#">The Newport Agency | Ad Agency Services</a></div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="topFixedNavbar1">

<ul class="nav navbar-nav navlist">

<li class="navlistitem active"><a href="#">Home</a> </li>

<li class="navlistitem"><a href="portfolio.html">Portfolio</a> </li>

<li class="navlistitem"><a href="products-services.html">Products/Services</a> </li>

<li class="navlistitem"><a href="about.html"> About</a> </li>

<li class="navlistitem"><a href="contact.html">Contact</a> </li>

</div>

<!-- /.navbar-collapse -->

</div>

<!-- /.container-fluid -->

</nav>

<nav class="navbar navbar-default navbar-fixed-top"> <!-- /.container-fluid -->

</nav>

<header><img src="Images/TNA Logo no background.png" width="120" height="79" alt="The Newport Agency | Emblem"/><a href="https://thenewportagency.godaddysites.com/shop?olsFocus=false&olsPage=products" target="_blank">Shop Now!</a></header>

<aside class="asideleft">

  <h1>What can we create for you?</h1>

</aside>

<section class="sectionRight">

  <h2>Orange County Based Ad Agency</h2>

  <p>For the past 15 years I've brought ideas to life for individuals, small businesses and fortune 500 companies. Visually telling their stories. Building brands that fit. Solving problems. Doing my part to make the world a more beautiful place. I would like to do the same for you. Whether it's through logo creation, graphic design, website design or app design. I've worked in many areas as my portfolio will attest to. Check out my experience. See my portfolio. Let's talk about what I can do for you. Let me create something great for you and your business. Let's build a brand and content that fits your needs. I'm also active on social media so if you're curious about what I'm up to you can <a href="https://www.instagram.com/newportadagency/" target="_blank">follow me</a> on Instagram. Thanks!</p>

</section>

<footer>Copyright 2017 by The Newport Agency | Ad Agency Services - made with 100% recycled pixels.</footer>

<script src="js/jquery-1.11.3.min.js"></script>

<!-- <script src="file:///Macintosh HD/Users/kylekiser/Library/Application Support/Adobe/Dreamweaver CC 2017/en_US/Configuration/Temp/Assets/eam71947f48.TMP/js/bootstrap.js"></script> -->

<script src="js/bootstrap-3.3.7.js"></script>

</body>

</html>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 29, 2017 Oct 29, 2017

The code that you have shown is not for a template but for an HTML document.

To make a template from that document, go to File > Save as Template

and you will see a new document that has been created under a new folder called Templates.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 29, 2017 Oct 29, 2017

Please also see How to design web pages based on Dreamweaver templates

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 29, 2017 Oct 29, 2017

Screen Shot 2017-10-29 at 5.22.08 AM.png

I saved the HTML document as a template. Do you know why #36 is red? I'm going to check out the link you posted. Thx!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 29, 2017 Oct 29, 2017

Screen Shot 2017-10-29 at 5.25.16 AM.png

I went to open this in "real-time preview" and the nav bar doesn't show up??

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 29, 2017 Oct 29, 2017
LATEST

There is an error shown on line 36 because you neglected to close your lists with </ul> tag.

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines