Highlighted

Automated Tasks

New Here ,
Jan 17, 2019

Copy link to clipboard

Copied

Is there a way to automate a particular task/action like there is in Photoshop? That would be great!

One of the things I do quite frequently is to  (in my CSS file) put a temporary border round a div or section etc. so I can see exactly where it is. It might sound silly, but I works for me. I would like to hit a hotkey or a Ctrl-something and it adds a "border: solid thin color:" to where I put my cursor. Is there anything like that?

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

You could save the border style as a Snippet, then (in newer versions of DW) use a Snippet Keyword to drop the code in place. It's essentially creating a custom Emmet shortcut...

1. In an open html file, create your style, something like: style="border:1px solid red;"
2. Highlight the code and click the New Snippet button in the Snippets panel (Shift + F9 if it's not open)
3. In the dialogue that comes up, give the Snippet a name and a Keyword, something like: redb
4. In your code of any future page, place the cursor where you want your style to appear
5. Type your keyword, followed by the Tab key

TOPICS
Create menus in Dreamweaver, Learn Dreamweaver

Views

540

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Automated Tasks

New Here ,
Jan 17, 2019

Copy link to clipboard

Copied

Is there a way to automate a particular task/action like there is in Photoshop? That would be great!

One of the things I do quite frequently is to  (in my CSS file) put a temporary border round a div or section etc. so I can see exactly where it is. It might sound silly, but I works for me. I would like to hit a hotkey or a Ctrl-something and it adds a "border: solid thin color:" to where I put my cursor. Is there anything like that?

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

You could save the border style as a Snippet, then (in newer versions of DW) use a Snippet Keyword to drop the code in place. It's essentially creating a custom Emmet shortcut...

1. In an open html file, create your style, something like: style="border:1px solid red;"
2. Highlight the code and click the New Snippet button in the Snippets panel (Shift + F9 if it's not open)
3. In the dialogue that comes up, give the Snippet a name and a Keyword, something like: redb
4. In your code of any future page, place the cursor where you want your style to appear
5. Type your keyword, followed by the Tab key

TOPICS
Create menus in Dreamweaver, Learn Dreamweaver

Views

541

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 17, 2019 0
Adobe Community Professional ,
Jan 17, 2019

Copy link to clipboard

Copied

I think that the easiest way to do this in Dreamweaver is to create style rules for a class named border. You can the apply that class to any element in your document.

Example CSS:

.border {

     border: 5px solid red;

}

Example HTML:

<div class="col">

  <h5 class="border">Tipo documento</h5>

  <p>Ricevuta di acqui</p>

</div>


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2019 1
Adobe Community Professional ,
Jan 17, 2019

Copy link to clipboard

Copied

I would probably use Ben's suggestion, create the .border class in my external stylesheet.

Once the class is in your css file, you can add it to elements pretty quickly...

From Live View (newer versions of DW)
1. Click the element to highlighted in blue

2. Click the small + icon in the Element Tab that appears with the border
3. Add your border class name and hit Enter
3a. You can also remove it in a very similar way, click the element and then click the X next to the class you want to remove

From Design View
1. Click the element to highlight it

2. Select your border class from the Class dropdown menu in the Properties window

2a. To remove it, select the element and then select "none" from the Class Dropdown in the Properties window

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2019 0
New Here ,
Jan 17, 2019

Copy link to clipboard

Copied

Thank you for the replies! I was looking for more of a "Shift-Ctrl-B" or something. I don't use that CSS property thing. I just type the code. It is faster.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2019 0
Adobe Community Professional ,
Jan 17, 2019

Copy link to clipboard

Copied

You could save the border style as a Snippet, then (in newer versions of DW) use a Snippet Keyword to drop the code in place. It's essentially creating a custom Emmet shortcut...

1. In an open html file, create your style, something like: style="border:1px solid red;"
2. Highlight the code and click the New Snippet button in the Snippets panel (Shift + F9 if it's not open)
3. In the dialogue that comes up, give the Snippet a name and a Keyword, something like: redb
4. In your code of any future page, place the cursor where you want your style to appear
5. Type your keyword, followed by the Tab key

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2019 0
New Here ,
Jan 17, 2019

Copy link to clipboard

Copied

YES! That's it! I've never used snippets before. None of the ones that come with DW have been that helpful to me so just left them alone. But this and making my own is going to be great!

Thanks a million!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2019 0