- Первая веб страница
- Форматирование текста в HTML
- Создание списков
- Гиперссылки
- Создание таблиц в блокноте
- Цвета в HTML
- Как создать форму в HTML?
- Табличная верстка сайта
- Теги в HEAD
- Изображения в html
- CSS
- Работа с текстом и изображениями в CSS
- Блочная структура сайта
- Блочная верстка
В этой главе мы познакомимся с замечательной программой, с помощью которой создают сайты — Adobe Dreamweaver. Это интуитивно понятный визуально ориентированный HTML-редактор. Мы уже знаем начальные элементы, из которых состоит веб-ресурс. С помощью Dreamweaver мы сможем делать сайты сложнее, лучше и быстрее, чем, если бы мы писали руками в блокноте. Для начала давайте познакомимся с основными управляющими элементами редактора.
Полезная реклама: многие российские банки уже ввели комиссию на валютные счета, чтобы сохранить накопления и оплачивать зарубежные сервисы, рекомендуем открыть банковскую карту в Белоруссии, Казахстане или Киргизии. Это можно сделать без посещения страны через надежного посредника.
В открывшемся окне нам редактор предлагает несколько вариантов создания сайта. Начнем с самого простого:
- Нажмите на ссылку Site (обозначена цифрой 1). В открывшемся окне выберите New Site.
- Мы увидим такое окно:
Перейдите на вкладку Advanced, в категорию Local Info. В поле Site name введите название сайта, в поле Local root folder введите путь к папке, где будут хранится файлы вашего ресурса. Дальше, нажмите кнопку ОК.
- После этого вы снова попадете в окно как на рис. 1. Справа во вкладке Files будут отображаться файлы вашего сайта (обозначено цифрой 3).
- Сейчас нажмите на ссылку HTML (цифра 2) для создания первого файла веб-проекта.
- После этого вам откроется следующее окно:
Цифрой 1 обозначено место, где будет название нашего файла, цифрой 2 место, куда мы можем вписать название нашей страницы, которая будет отображаться в браузере, цифрой 3 обозначено место, где мы сможем выбрать, как будет отображаться наш сайт в редакторе.
Пощелкайте по области 3, вы увидите что редактор отображает нашу страницу по-разному. Если мы нажмем на кнопку Code, редактор отобразит только код нашей страницы, если мы нажмем на Design, то редактор покажет нам, как бы выглядел сайт в браузере. На рисунке 3 нажата кнопка Split, в этом режиме редактор показывает нам сверху страницу в режиме код, а снизу страницу в режиме дизайна.
В самом низу находится панель форматирования, в ней мы можем форматировать текст как в Word.
По умолчанию редактор добавляет вместо тега <html> следующие строки кода:
Оставим эти строки как есть.
В поле Title (цифра 2) введите название нашей страницы- First Site.
Щелкните правой кнопкой мышки по названию файла (цифра 1), выберите Save As, введите имя файла — index.html и нажмите Сохранить.
С правой стороны, во вкладке Files вы увидите свой файл index.html.
По умолчанию главной страницей веб-ресурса должен быть файл с названием index.html.
В этой главе мы познакомились с редактором Dreamweaver, познакомились с некоторыми элементами управления редактора, научились создавать файлы и страницы нашего проекта.
В следующей главе мы научимся вставлять и форматировать текст нашего сайта с помощью Dreamweaver.
In the first part of this series, learn how to define a Dreamweaver site to set a local file and folder location.
Introduction
Dreamweaver is a great program for building and designing websites visually. But it can be daunting when you first open it. It has so many features—what are they all for?
This eight-part tutorial series is designed to help you guide you through building a simple, yet elegant website in Dreamweaver 2015. It will guide you through the process of defining the site, building the structure with HTML (Hypertext Markup Language), adding text and images, and styling the pages with CSS (Cascading Style Sheets).
To keep the tutorial series to a reasonable length, you’ll build only two web pages; but once you have done so, you should have sufficient knowledge to create more pages on your own.
Note: You don’t need any previous experience with Dreamweaver. However, a general knowledge of Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS), will help to provide context to many of the topics in this series. HTML and CSS are both open web standards and there are a lot of resources available to learn these technologies. Define page structure with HTML, Lay out and style web pages with CSS, and HTML & CSS provide a great foundation.
What you’re going to build
Let’s get started by downloading the sample files, and taking a look at the finished project.
- Download the sample files from the link at the top of this page.
- The files are compressed as a single ZIP file. Extract the files to a convenient location, such as your Desktop.
- On Mac OS X, click the downloaded ZIP file in the Mac Finder to automatically extract the files.
- On Windows, right-click the downloaded ZIP file, and select Extract All from the context menu. Browse to the desired location to save the files, and then click Extract.
- Inside the extracted files is a folder called bayside. It should contain nine subfolders, as shown in Figure 1.
- Open the part7 folder, and drag index.html into a browser to view it. The home page of the finished project looks like Figure 2.
The content folder contains the text content for the web pages, and the js folder contains a JavaScript file that will be used to control the navigation menu on small screen resolutions. The other folders contain a complete version of the project as it looks at the end of each part of this series. You can use these to check against your own code. There’s no folder for part 8 because the final part is dedicated to showing you how to upload the finished project to a web server.
- Resize the browser by dragging one of the sides inwards. When the viewport is narrower than 700px, the layout changes from two columns to a single column. The navigation bar is replaced by MENU against a black background. The white text in the box over the image of the Golden Gate Bridge, has turned deep pink, and is now positioned below the image, as shown in Figure 3.
- Click MENU. The navigation menu slides down smoothly on a semi-transparent black background (see Figure 4).
- Click MENU again. The navigation menu slides up and out of view.
- Open the navigation menu again, and click SIGHTS to view the second page (the other menu items are dummy links).
So that’s what you’ll be building with Dreamweaver 2015 throughout this series. In the process, you’ll learn how to do the following:
- Define a site in Dreamweaver
- Build the structure of a web page with HTML5 elements
- Use the DOM panel to find your way around the page and add new elements
- Add text and images to the page
- Download and resample images from a Creative Cloud Library
- Style the page using Dreamweaver’s CSS Designer
- Create a second web page that’s styled the same way
- Control different layouts using the Visual Media Queries bar
- Upload the finished pages to an online web server
Along the way, you’ll also get to know the most important parts of the Dreamweaver user interface.
This is an in-depth tutorial, so give yourself plenty of time. Each part has been divided into short sections that explain not only what to do, but also why. Take a break between sections to make sure you understand the various techniques introduced.
Note: This tutorial series has been written for Dreamweaver 2015.2, and it uses features that are not available in older versions of the program. Although older versions of Dreamweaver are capable of building the same website, it’s recommended that you use Dreamweaver 2015.2 for this tutorial. If you don’t have a subscription to the Creative Cloud, you can use the free trial.
Set the Dreamweaver workspace
Before you start work, switch to the Design workspace. This will give you access to all the main panels you need for this tutorial. On Windows, the quick way to do this is to use the Workspace Switcher at the top right of the screen (see Figure 5).
On Mac OS X, by default the Workspace Switcher is in the same location, but if you have turned off the Application Frame, it’s on the left. If you’ve also turned off the Application Bar, it’s hidden. The alternative way to select a workspace is Window > Workspace Layout > Design.
Set up a site in Dreamweaver
A common beginner mistake is to start working on web pages in Dreamweaver without defining a site. This results in links to assets, such as images and style sheets, pointing to a location on your local computer. Everything works fine until you come to upload the site to your remote server. Then you discover all your links are broken and need to be fixed. Avoid this heartache by always defining a site. It’s a quick and easy task.
In Dreamweaver, a site organizes all the documents on your local computer associated with your website and lets you track and maintain links, manage files, and transfer your site files to a web server. A typical Dreamweaver site has at least two parts:
- Local Folder: This is your working directory—usually a folder on your hard drive. Dreamweaver refers to this folder as your local site root.
- Remote Folder: This is where you store your files on the computer that’s running your web server. The web server is often (but not always) the computer that makes your site publicly available on the web.
Tip: If you plan to work on several sites, it’s a good idea to create a folder on your local hard drive to store them. On Mac OS X, your home folder already includes a folder called Sites. On Windows, set up a folder called Sites at the top level of your C drive. Although the screenshots for this series were taken on Windows, the instructions are identical for Mac OS X, apart from keyboard shortcuts and the labels on some buttons (both are given).
Define the local site folder for the Bayside Beat site
All you need to start working is to give your site a name, and tell Dreamweaver where you want to store the files on your local computer. You don’t need to define the remote folder until you’re ready to upload your site to a live web server on the internet.
- Start Dreamweaver and select Site > New Site. The Site Setup dialog box appears.
- In the Site Name field, enter Bayside Responsive as the name of the site. The name is used internally by Dreamweaver to identify the site. It doesn’t matter if it contains spaces.
- Click the folder icon next to the Local Site Folder field to browse to and select the bayside folder from the sample files you downloaded. The Site Setup dialog box should now look like Figure 6, although the file path for Local Site Folder will depend on where you copied the bayside folder on your hard drive.
- Expand Advanced Settings in the column on the left of the Site Setup dialog box, and select Local Info.
- Click the folder icon to the right of the Default Images folder field to open the Choose Image Folder dialog box.
- Click New Folder (in Windows, it’s at the top of the dialog box; on a Mac, it’s at the bottom). Name the new folder images, select it, and click Select Folder (Windows) or Choose (Mac). The Site Setup dialog box should look similar to Figure 7.
- Leave the other options at their default values. There’s no need to insert a value for Web URL because we’re using links relative to Document.
- Click Save.
The Files panel in Dreamweaver now shows the new local root folder for your current site (see Figure 8). The file list in the Files panel acts as a file manager, allowing you to copy paste, delete, move, and open files just as you would on a desktop.
You’ve now defined a local site folder for the Bayside Beat site. This is where you keep the working copies of web pages on your local computer. You’ve also specified the default folder to store images. This tells Dreamweaver to automatically copy images to that folder when you import images from outside the site root folder.
Best practice for naming files and folders in a website
A typical website contains a large number of files and folders. For ease of maintenance, it’s important to organize them logically. Create separate, appropriately named folders for images, videos, style sheets, and external JavaScript files. Also bear the following points in mind:
- File and folder names in websites should never contain spaces or any of the following characters:
/?%*:|”<>. - Although other special characters are permitted, it’s generally a good idea to confine yourself to alphanumeric characters, hyphens, and underscores.
- Most file and folder names end up as part of a web page’s URL, so keep them short, but meaningful. Long URLs are difficult for users to remember and type into browsers on a mobile device.
- The vast majority of websites are hosted on Linux servers, which are case-sensitive. Using all lowercase letters for file and folder names avoids problems with files not being found.
Save the project assets to a Creative Cloud Library
The images and color scheme for this project are stored online in a shared Creative Cloud Library. CC Libraries make your visual assets available to you everywhere, and are particularly useful when collaborating with other people. For example, one person might be responsible for creating visual assets, while you’re responsible for building the actual site. Check out the online documentation to learn more about using CC Libraries in Dreamweaver.
You need to save the assets in the shared library to a library of your own.
- Use the assets in the Bayside Beat Libary.
- Click Save to Creative Cloud at the top-right of the browser screen, and save the shared assets to your Bayside library, if you have not already done so.
- Select the Bayside library in the Dreamweaver Libraries panel. You should see four images and six color swatches as shown in Figure 9.
Create your working web pages
You’re going to create the Bayside Beat website from scratch. The sample files that you downloaded contain the text content in Microsoft Word and rich text format files, a JavaScript file, and copies of the project at each stage for you to compare against your own working files.
Let’s begin by creating two HTML pages for the site.
- If the Dreamweaver Welcome Screen is visible, click HTML in the Create New section. Alternatively, select File > New from the main menu. In either case, this opens the New Document dialog box, as shown in Figure 10.
- Make sure that New Document is selected in the column on the left, that Document Type is set to HTML, and Framework to None.
- Type Bayside Beat: Cable Cars in the Title field.
- Make sure that Doc Type is at the default HTML5, and that there is nothing listed in the Attach CSS field. If anything is listed in Attach CSS, select it, and click the trash can icon to the right of the field.
- Click Create. Dreamweaver creates a blank HTML page in the Document window.
- If necessary, select the Split button (see Figure 11) at the top left of Document window to reveal the underlying HTML markup.
- The Document window (or Live View) is completely blank, but the basic HTML structure is revealed in Code View, as Figure 12 shows.
- Save the file by selecting File > Save or using the keyboard shortcut Ctrl+S (Windows) or Cmd+S (Mac).
- In the Save As dialog box, make sure you are in the bayside local site folder, name the file index.html, and click Save.
- Create a new HTML file. The Welcome Screen is no longer visible, so you need to use the menu option File > New to open the New Document dialog box. Alternatively, press Ctrl+N (Windows) or Cmd+N (Mac).
- Select the same options as in step 2 previously, but this time leave the Title field blank, and then click Create.
- Save the file in the site root folder as sights.html.
- In Split View, the value between the
<title>tags on line 5 is «Untitled Document».This is what will be displayed in the browser tab or title bar. It will also be picked up by search engines. Leaving this value unchanged is a common beginner mistake.
There are two ways to change it:
- Go into the code, and change it manually, making sure you leave the opening and closing HTML tags intact.
- Use Dreamweaver’s Property inspector. Let’s use that technique.
- The Property inspector is the large horizontal panel at the bottom of the Document window in the Design workspace. If necessary, click the Properties tab to bring it to the front (initially, it’s hidden behind the Output panel).
- To confirm the change, press the Tab key or Enter/Return. The value in the Document Title field replaces Untitled Document in the HTML code on line 5 (see Figure 13).
Line 1 is the document type (doctype) declaration that tells the browser this is an HTML file.
HTML is a tag-based language. Tags are surrounded by angle brackets. Most tags come in pairs, with the closing tag indicated by a forward slash after the opening angle bracket.
The whole page is nested inside a pair of <html> tags (on lines 2 and 10). The <head> section on lines 2–6 contains information for the browser. All the content for the page goes between the opening and closing <body> tags.
Most of the time, Dreamweaver creates all the necessary code for you as you work with its visual interface and dialog boxes. But you need to be careful if you copy and paste code from elsewhere. Like human beings, an HTML page can have only one head and only one body. If content doesn’t show up in Live View or a browser, the most likely reason is that you’ve pasted it outside the body.
The file is now listed in the Files panel, and the tab at the top left of the Document window displays the filename.
Tip: You can always get to the current website’s local site folder by clicking the Site Root button at the bottom of the Save As dialog box.
Replace Untitled Document in the Document Title field with Bayside Beat: Sightseeing. Notice that nothing changes in the underlying HTML while you’re typing.
- Save sights.html.
Although Dreamweaver creates the HTML markup for you, it’s a good idea to keep Split View open much of the time when working with a web page. It lets you verify that the changes you made have been implemented correctly. That doesn’t mean that Dreamweaver is unreliable. Except in unusual circumstances, it will do exactly what you ask. But it’s important to know where you are in the document. If the insertion point is in the wrong place, your new code will be added there. If you’re not careful, you can end up with a tangled mess that can be difficult to unravel. The DOM panel, which we’ll be using in the next part of the tutorial series, is also invaluable in keeping track of the page structure.
Tip: If you prefer to see the underlying code alongside the visual representation of the page, select View > Split Vertically. To revert to splitting the Document window horizontally, select the same option again. The View menu also lets you choose which side Live View should be on. Drag the bar separating Code and Live Views to adjust their relative sizes. Dreamweaver remembers your settings automatically.
Now that you have finished defining your site, and created two blank web pages, you can start adding content to them.
Сделать сайт в Dreamweaver? Пошаговое создание сайта в Adobe Dreamweaver.. Не забывайте! Что программа, в данном случае Dreamweaver — всего лишь инструмент!
Подробно о сайте в Dreamweaver
- Что такое «adobe Dreamweaver»!?
- Пошаговое создание сайта в «Dreamweaver.
- Укажите этапы создания web-сайта в «adobe Dreamweaver»?
Еще вопросы о которых спрашивают…
Что такое adobe Dreamweaver!?
Определение : «Что такое adobe Dreamweaver»
Программа Adobe Dreamweaver — предназначена для редактирования кода, с возможностью визуализации — если это возможно.
Официальный сайт adobe Dreamweaver
https://www.adobe.com/ru/products/dreamweaver.html
Нажмите, чтобы открыть в новом окне.
Пошаговое создание сайта в «Dreamweaver».
Пошаговое создание сайта в «Dreamweaver» — ничем особенно не отличается от создания сайта в любой другой программе!
Главное не программа, а знания о том, как сделать сайт, которые вы можете использовать вне зависимости от программы!
Страницы были реанимированы из архива
Укажите этапы создания web-сайта в dreamweaver?
Если честно, то довольно странный поисковый запрос — «Укажите этапы создания web-сайта в dreamweaver?»
Чем может отличаться создание сайта в одной программе от другой!? Для создания сайта нужны знания, алгоритм создания сайта.
А не программа!
Тем не менее мы задались возродить старую тему в новой программе «Dreamweaver».
Еще вопросы о которых спрашивают…
Много интересных вопросов задают о программе Dreamweaver и не только…
что можно сделать в дримвивере
Ну… наверное… надо было спросить не так — «что можно сделать в дримвивере«, а для чего нужна программа «Dreamweaver».
Программа Dreamweaver — это одна из разновидностей программ для редактирования кода со своими специфическими надстройками. О некоторых таких специфических настроках я рассказывал, например шаблонирование(моё название).
Не благодарите, но ссылкой можете поделиться!
COMMENTS+
BBcode
Окт 09, 2021
Olha L.
10хв. читання
Если вы всерьёз задумывались о разработке сайта, то наверняка слышали о редакторах типа WYSIWYG (What You See Is What You Get, в переводе с англ. «Что видите, то и получается»). Заманчивая перспектива создать сайт самостоятельно и без знаний программирования, скорее всего, и привела вас в это руководство по Dreamweaver.
Впервые открыв Dreamweaver, вы можете слегка испугаться. Но не волнуйтесь, всё не так страшно. Эта статья поможет вам разобраться с особенностями Dreamweaver и покажет, как создать сайт с помощью этого редактора.
Что такое Adobe Dreamweaver CC?
Adobe Dreamweaver CC — это известный инструмент для создания и развёртывания сайтов, который считается лучшим решением среди WYSIWYG и других, более традиционных редакторов HTML. Dreamweaver был разработан компанией Macromedia, а затем приобретён Adobe Inc в 2005 году.
Изначально Dreamweaver предлагал бессрочную лицензию, то есть, чтобы использовать программное обеспечение, нужно было внести одноразовую плату. Но позже эту модель заменила подписка в рамках структуры Adobe Creative Cloud.
Adobe Dreamweaver CC — интегрированная среда разработки (IDE). Это значит, что ПО предоставляет комплексные инструменты и поддержку для разработки. Благодаря структуре Creative Cloud вы можете интегрировать и использовать вместе с Dreamweaver любое другое программное обеспечение Adobe для творчества.
Dreamweaver позволяет создавать и проектировать сайт визуально с помощью метода перетаскивания элементов на панели инструментов. Вы также можете использовать его как любой традиционный редактор кода — используя только текст и мгновенно загружая веб-сайт на сервер.
Вы также получите множество учебных материалов и ресурсов, а также доступ к специальному форуму сообщества Adobe. Редактор поддерживает 15 различных языковых стандартов. Более того, огромное количество руководств по Dreamweaver находятся в свободном доступе в интернете.
Эти функции характеризуют Dreamweaver как гибрид системы управления контентом (CMS) и редактора кода.
Отличительные черты
Будучи частью креативной экосистемы Adobe, Dreamweaver уже отличился от других визуальных редакторов кода. Продукт даёт доступ к ресурсам и привилегиям, которые может предложить только Adobe. Тем не менее вот ещё две наиболее выдающиеся характеристики:
Удобный визуальный интерфейс, который подойдёт для начинающих
Adobe Dreamweaver CC прост в использовании, но в то же время его сложно освоить. Ваш сайт будет хорош ровно настолько, насколько хороши ваши навыки. Это означает, что хотя программное обеспечение предлагает множество функций веб-разработки, которые можно освоить с базовыми или ограниченными знаниями, вы не сможете использовать их в полной мере.
Несмотря на это, новички таки могут начать создавать сайт самостоятельно благодаря визуальному редактору. Инструмент имеет простые функции перетаскивания для вставки HTML-элементов в проект, а все изминения можно сразу же посмотреть. Начать работу поможет простое руководство по Dreamweaver, доступное в редакторе.
Понять, над какой частью элемента вы работаете в данный момент тоже очень просто. Для этого нужно просто нажать на элемент и он сразу же выделиться в коде.
Мощный встроенный редактор кода
Ещё один важный аспект Dreamweaver — мощный встроенный текстовый редактор кода для профессиональных разработчиков. Некоторые из его функций включают:
- Подсветка синтаксиса. Чтобы облегчить чтение кода, различные элементы, такие как переменные, идентификаторы, классы и другое выделяются.
- Завершение кода. Работайте более продуктивно с помощью автоматического завершения кода. Например, просто введите img и нажмите Tab на клавиатуре, чтобы вставить <img src=”” alt=””>
- Документация CSS. Всякий раз, когда вам нужна справка по CSS, используйте функцию быстрых документов. Поп-апы с необходимой информацией будут появляться прямо в редакторе кода.
Помимо этого, есть и другие важные функции:
-
- Bootstrap 4. Последняя версия HTML, CSS и JavaScript фреймворка для разработки адаптивного сайта.
- Поддержка Git. Выполняйте все стандартные операции Git, включая Push, Pull, Commit и Fetch, прямо с панели инструментов Dreamweaver.
- Предварительный просмотр в браузере в режиме реального времени. Следите за изменениями на своем сайте, редактируя его.
- Creative Cloud Libraries. Доступ к цветам, графике и другим творческим ресурсам в базе данных.
- Chromium Embedded Framework (CEF). Чтобы помочь разработчикам встраивать браузеры для использования в сторонних приложениях.
Ничто не идеально
Тем не менее у Adobe Dreamweaver CC есть свои недостатки. Как мы уже упоминали выше, эффективность этого программного обеспечения зависит от ваших навыков. Несмотря на то, что интерфейс позволяет начать разработку сайта даже новичку, чтобы создавать действительно сложные ресурси, понадобится немало времени и желания учиться.
Несмотря на всю доступную информацию, Dreamweaver требует более глубокого изучения. Поэтому, если вы рассчитываете прочитать одно руководство и стать профессионалом, вас ждёт разочарование.
Кроме того, это платный сервис, который стоит недёшево. Так что для разработчика-любителя Dreamweaver, вероятно, не лучший вариант.
Совет: Если вам кажется, что Adobe Dreamweaver CC — не совсем ваша вещь, вы не одни. Фактически, около 33% всех владельцев сайтов в интернете выбрали WordPress. И вы тоже можете попробовать создать свой сайт с помощью этой платформы. И даже лучше, если вы используете Hostinger. Наш автоустановщик значительно ускорит этот процесс.
Обзор цен на Dreamweaver
Как программное обеспечение, которое оплачивается на основе подписки Adobe предлагает ряд планов для частных лиц. План с предоплатой на год, который включает только одно приложение — Dreamweaver, а также 100 ГБ облачного хранилища, Adobe Portfolio, Fonts и Spark стоит 239,88$.
А вариант, который включает всю коллекцию приложений, состоящую из 20+ программ для творчества, включая Photoshop CC, Illustrator CC и Adobe XD CC, обойдётся вам 599,88$ в год.
Однако, вы также можете подписаться на бесплатную семидневную пробную версию Dreamweaver, прежде чем принять решение о покупке. Просто скачайте приложение и зарегистрируйтесь, используя свой адрес электронной почты, Facebook или Google.
Теперь предлагаем перейти непосредственно к базовому руководству, в рамках которого мы узнаем, как создать домашнюю страницу с помощью Dreamweaver.
Учебное пособие по Dreamweaver: разработка сайта
1. Создание нового сайта
На панели управления Adobe Dreamweaver CC перейдите в раздел Веб-сайт -> Создать веб-сайт, после чего появится всплывающее окно.
Первый шаг — назвать свой сайт и сохранить его в одной папке. Это поможет упорядочить все файлы и упростит процесс загрузки.
Если вы хотите добавить на свой сайт изображения, перейдите в Дополнительные настройки -> Локальная информация. На вашем компьютере предварительно должна быть создана папка с этими изображениями.
По завершении нажмите Сохранить.
2. Создайте файл домашней страницы
Сейчас у вас будет просто пустая рабочая область. Но посмотрите на верхнюю правую панель, там должны быть файлы вашего сайта. Теперь мы создадим файл домашней страницы с нуля.
Перейдите в Файл -> Создать, а затем в категорию Создать документ. Выберите HTML в качестве типа документа и нажмите Создать. Называть документ необязательно.
Затем вы будете перенаправлены обратно в рабочую область, где увидите белую страницу с несколькими строками HTML-кода. На самом деле это вид вашего сайта в реальном времени. Сохраните этот HTML-файл как index.html и поместите его в папку сайта.
Теперь мы создадим хедер сайта. Обычно это верхнее меню сайта с логотипом и названием.
Щёлкните мышей по белой странице или выберите конкретное место в элементе <body> в редакторе. Затем перейдите в верхнюю правую панель и нажмите Вставить. Должен был появиться список общих HTML-элементов, которые вы можете добавить на свою страницу.
Найдите элемент Header.
Щёлкните по нему или перетащите в свою рабочую область. Он автоматически добавится на ваш сайт вместе с соответственным кодом.
Затем мы превратим наш хедер в заголовок с тегом <H1>…</H1>. Делаем мы это в первую очередь для SEO, чтобы сообщить поисковой системы о чём наш сайт. Выделите соответствующий текст в этом разделе, затем перейдите на панель Вставка. Найдите и щёлкните по Heading: H1.
После этого замените текст заголовком своего сайта. Это должно быть что-то описательное и репрезентативное. В качестве примера мы будем использовать фразу «Добро Пожаловать на Сайт о Разработке».
4. Добавьте навигацию
Чтобы добавить кнопку навигации, добавьте строку после header, нажав клавишу return или enter. Теперь перейдите на панель Вставка и найдите элемент Navigation. Когда вы щёлкнете по нему, появится всплывающее окно. В строке ID впишите слово «navigation» и нажмите OK.
Это добавит в редактор элемент navigation. Пока вы находитесь в содержимом элемента, найдите Hyperlink на панели Вставка. Щёлкните по нему и заполните данные следующим образом:
Важно: в поле ссылка нужно указать действительный URL главной страницы. В настоящее время мы используем только хэштег, чтобы заполнить пробел.
Когда закончите, нажмите ОК. Теперь это интерактивная кнопка На главную, а в редакторе появится дополнительная строка кода.
5. Добавьте описание веб-сайта
Теперь мы вставим дополнительный заголовок, абзац и несколько пунктов маркированного списка, чтобы добавить более подробное описание нашего ресурса.
После части кода, который появился после добавления навигационной кнопки, добавьте новую строку и щёлкните Header: H2 и Paragraph на уже известной нам панели Вставка. В редакторе кода появятся теги <h2> и <p>. Наполните их своим текстом.
Совет: если вы допустили ошибку, например, добавили ещё один заголовок H1 вместо H2, чтобы отменить действие, используйте комбинацию клавиш Ctrl + z.
Теперь, чтобы создать маркированный список, добавьте ещё одну строку под кодом абзаца. Для этого мы, как и раньше используем return или enter. Перейдите на панель Вставка и кликните на Неупорядоченный список. Это действие должно добавить тег <ul> в редактор. Пока вы находитесь на этой строке, щёлкните по ещё одному элементу — элементу списка, что в свою очередь добавит тег <li> внутрь тега <ul>.
Что касается списка в HTML, вам придётся вручную добавлять теги <li> в соответствии с количеством пунктов списка. Наш будет выглядеть так:
По сути, вы создали базовую структуру главной страницы. Вы можете добавить и больше контента, такого как формы, видео, изображения. Но для начала хватит и этого.
Пока она выглядит довольно скучно. Чтобы сделать нашу страницу более привлекательной, мы добавим таблицу стилей.
6. Создайте файл CSS
Каскадная таблица стилей (CSS) используется для стилизации элементов в HTML и вместе с HTML всякий раз, когда разработчики создают сайт. Думайте о HTML как о структуре тела, а о CSS как об эстетической части, которая делает тело визуально привлекательным.
Теперь первое, что нужно сделать, это дать вашему хедеру ID. Перейдите в нижний правый угол панели Dreamweaver и выберите панель DOM. Здесь вы увидите обзор структуры вашего сайта.
Нажмите на Header, и вы заметите, что заголовок автоматически выделится синим цветом, появится метка и знак плюс.
Щёлкните знак плюса и введите #header. Не волнуйтесь, если допустите ошибку и не сможете отменить действие с помощью клавиши Backspace или Delete. Здесь тоже поможет комбинация Ctrl + z. Хэштег означает, что мы назначаем этому элементу ID. Нажмите return или enter. В появившемся меню выберите Выбрать источник > Создать новый файл CSS.
Появится новое окно. Нажмите Обзор, на вашем компьютере выберите папку со своим сайтом. Введите имя файла style.css и нажмите Сохранить. Затем нажмите ОК.
Вы заметите, что в верхней части вашего интерактивного просмотра страницы появится метка style.css, а в редакторе кода — новый элемент link.
Повторите действие для всех элементов на странице, нуждающихся в стилизации. Только теперь вместо того, чтобы создавать новые файлы CSS, сохраняйте изменения в уже существующем style.css, который вы создали ранее.
Теперь мы готовы приступить к стилизации наших элементов с помощью селектора CSS.
7. Создайте CSS-селектор для заголовка сайта
На этом этапе мы изменим шрифт и выровняем заголовок нашего сайта по центру.
Нажмите на H1 под вашим хедером на панели DOM. Затем выберите Конструктор CSS на панели выше.
Убедитесь, что в меню Источники выбран ваш файл CSS. Теперь щёлкните по иконке плюса прямо перед словом Селекторы. Вам автоматически будет предложено имя вроде #header h1, нажмите enter или return.
8. Измените шрифт заголовка
Убедитесь, что селекторы указывают на #header h1.
Щёлкните Свойства и снимите флажок Набор, чтобы разблокировать параметры «Макет», «Текст», «Граница», «Фон» и «Еще».
Кликните на параметр «Текст», наведите указатель мыши на font-family и нажмите на default font. В результате чего вы увидите список возможных вариантов шрифтов.
В дополнение к этому, если вы нажмёте на меню «Управление шрифтами», вы найдёте ещё больше опций из базы данных Adobe Edge Web Fonts.
Выберите нужный вам шрифт, щёлкнув по нему. Поскольку большинство дефолтных шрифтов не поддерживают кириллический текст, мы пошли немного другим путём. Нажмите Управление шрифтами > вкладка Особые стеки шрифтов. Затем выберите шрифты из списка, добавляя или удаляя их с помощью стрелок. По окончанию не забудьте нажать Готово. Мы, например, выбрали проверенные варианты Arial black и просто Arial. Этот шрифт точно поддерживает кириллицу. Также вы можете заморочиться и загрузить предварительно скачанные шрифты из вашего компьютера через соседнюю вкладу Локальные веб-шрифты.
Когда вы закончите, добавленные вами шрифты будут появляться при нажатии на default font вместе с остальными. Выбрав необходимую вам опцию, вы увидите, что шрифт заголовка вашего сайта автоматически изменится, а необходимый код будет добавлен в исходный код и style.css.
9. Выровняйте заголовок по центру
В параметре Текст наведите указатель мыши на text-align и щёлкните на иконку выравнивания по центру. Вы сразу заметите изменения в области, которая отображает внешний вид вашей страницы. Также изменения появятся в style.css.
Дальше — полный карт-бланш. Экспериментируйте, читайте руководства по CSS и редактируйте страницу, как вам угодно и как позволяют ваши знания и навыки.
Вот, что получилось у нас:
Посмотреть наш код для этой страницы-примера можно здесь: HTML и CSS. Успехов!
Как создать сайт в Dreamweaver с помощью шаблона
Также Dreamweaver позволяет создать сайт с помощью готового шаблона. Этот вариант имеет свои преимущества, так как вы наперёд знаете, как будет выглядеть ваш сайт и его код.
Давайте рассмотрим ещё одно руководство по Dreamweaver и узнаем, как использовать шаблон:
1.Выберите шаблон
Для этого перейдите в Файл -> Создать. Выберите Начальные шаблоны -> Базовый — одна страница. В этом руководстве мы будем работать над одной страницей. Щёлкните Создать.
Dreamweaver создал практически всю необходимую структуру и стиль вашего cайта. Всё, что вам осталось сделать — это добавить/изменить контент и настроить стили по вашему вкусу.
В этом руководстве мы внесём только базовые изменения в наш шаблон: изменим заголовок и описание сайта, а также частично поменяем цвет фона.
2. Измените логотип и текст хедера
Чтобы изменить текстовый логотип, щёлкните на h4 .logo на панели DOM. Нужная строка автоматически выделиться в редакторе. Измените текст.
Как вариант, вы также можете дважды щёлкнуть по строке логотипа в окне просмотра шаблона и изменить текст оттуда. Сделайте то же самое с заголовком, слоганом и пунктами меню в хедере. Вот, как выглядят наши изменения:
Чтобы изменить цвет фона, перейдите в файл .css и найдите соответствуюший элемент. В данном случае это элемент .hero. Найдите строку с цветом фона, где вместо названия цвета вы обнаружите загадочное число.
Это число является цветовым кодом HTML. Каждый цвет имеет своё числовое значение. Вот на этом сайте вы можете найти код любого цвета и оттенка.
Одно из преимуществ Dreamweaver в том, что вам не нужно никуда идти, чтобы узнать цветовой код. Просто дважды щёлкните по цветовому коду, который у вас есть, чтобы выделить его, а затем, нажав по нему ещё раз правой клавишей мыши, выберите опцию «Быстрое редактирование». Появится всплывающее окно настройки цвета.
Мы изменили наш фон и цвет хедера следующим образом:
Конечно, нам ещё предстоит хорошенько поработать. Добавить контент, настроить стиль всех элементов. В этом руководстве представлены только базовые изменения, которые можно внести в шаблон.
Когда вы закончите настройку сайта, загрузите его на свой сервер. Дальше мы расскажем, как это сделать.
Предварительный просмотр сайта на мобильном
В эпоху смартфонов и планшетов адаптивный сайт — это необходимость. Одна из замечательных функций разработки сайта в Dreamweaver заключается в том, что вы можете мгновенно просмотреть, как он будет выглядеть на мобильных устройствах. Вот, как это сделать:
Найдите иконку предварительного просмотра в режиме реального времени в правом нижнем углу вашего рабочего пространства. Откройте браузер на телефоне и сканируйте этот штрих-код или введите URL-адрес вручную.
Важно: для этого вы должны использовать один и тот же Adobe ID в Dreamweaver и на мобильном устройстве. Также используйте ту же сеть Wi-Fi, включите Javascript и файлы cookie.
Кроме того, вы можете использовать встроенную функцию мобильного просмотра в Dreamweaver. Перейдите в меню изменения размера окна и выберите необходимое вам устройство.
Обратите внимание, что в основном все шаблоны адаптированы под мобильные устройства. Но это не распространяется на случаи, когда вы создаёте сайт в Dreamweaver с нуля.
Если вы разрабатываете сайт с нуля, вам нужно будет добавить в ваш CSS-код так называемые медиа-запросы и соответственно настроить размеры в пикселях.
Размещение вашего сайта в интернете
Закончив разработку сайта, вы можете опубликовать его в интернете прямо из Dreamweaver. Всё, что вам для этого нужно это активный тариф хостинга и FTP-аккаунт.
Если вам нужен хостинг для более ресурсоёмких проектов, например, для нагруженных интернет-магазинов, рекомендуем ознакомится с тарифами облачного хостинга.
Вот инструкция Dreamweaver о том, как это сделать:
Чтобы установить FTP-соединение с Dreamweaver, выберите Веб-сайт -> Управление веб-сайтами. В следующем окне выберите сайт, который вы разработали, и нажмите иконку карандаша внизу. Появится новое окно. Зайдите в Серверы.
1. Создайте новое FTP-соединение
Щёлкните иконку плюса в окне Серверы, и откроется форма настройки FTP-подключения. Вам нужно её заполнить.
Если вы пользователь Hostinger, найти данные для настройки FTP-подключения можно в панели управления. Перейдите в панель управления -> Управлять -> введите запрос «FTP-аккаунты» в строке поиска.
2. Введите данные для подключения
Когда вы закончите заполнение формы, нажмите Тест. Dreamweaver сообщит вам об успешном подключении или ошибке. Не забудьте нажать Сохранить.
Вернитесь в панель Файлы, теперь вы можете инициировать настоящее соединение с сервером, а также воспользоваться такими параметрами, как получить и разместить файлы на удалённый сервер и синхронизация. С этого момента вы можете загрузить сайт на сервер.
Итоги
Несмотря на то, что наша инструкция получилась довольно объёмной, вы осилили её и теперь знаете, как создать сайт с помощью Dreamweaver.
В этом руководстве по Dreamweaver вы узнали, как создать сайт с нуля, а также с использованием готовых шаблонов; посмотреть, как будет выглядеть сайт на мобильных устройствах, и научились размещать сайт на сервере.
Ольга вже близько восьми років працює менеджером у сфері IT, три з яких вона займається SEO. Написання технічних завдань та інструкцій — один з її основних обов’язків. Її хобі — дізнаватися щось нове і створювати цікаві та корисні статті про сучасні технології, веброзробку, мови програмування, пошукову оптимізацію сайтів та багато іншого.
Introduction: Build Your Own Website With Dreamweaver
So I’ve previously written about this before, the old one is worth reading first, it contains instructions on photoshop and dreamweaver that this doesn’t, however it misses a lot of points out compared to this one.
These days there are tonnes of services for building websites with and there are also a lot of sites and communities well suited to those not wanting to go through the effort of building an entire site from scratch.
If you just need a site to showcase your stuff then chances are you could put one together over an afternoon, for a more complex site it’ll take more time.
I have since revamped my website — it’s now at http://killerjackalope.com/
My actual site is here — killerjackalope.co.nr
Which is a redirect of — killerjackalope.zxq.net
gh
Step 1: Tools, Materials, Skills
Tools
— A computer running
— Photoshop or your image editor of choice (you may need to download plugins to output HTML)
— Dreamweaver or your editor and FTP client of choice
— A decent internet connection
— An email address, if you don’t have one I doubt you’ll make it through this
— You’ll likely need a camera
— Pens and paper
Materials
— Content — I’ll talk on this more later but you’ll certainly need to fill your site with something
— Spare space on your HDD
— Time and patience.
Basic skills
— A basic knowledge of how to use your computer, the internet
— The majority of this requires very little coding knowledge, so don’t be intimidated
— A sense of design
— Knowing how to use photoshop would be nice, paint.NET or GIMP
Step 2: Planning Your Site
Before you start hitting the computer, looking for design cues and knocking together ideas and templates, sit down with a piece of paper, work out everything you want in your site and how you’ll get to it.
My index page is the same as my home page, a personal choice, intro animations aren’t me. The top level pages — Home, Projects, Photography, About, Contact are all linked in the header — You can get to these from anywhere in the site.
Coming off these are sets of pages, from projects each project has a page which can be gotten to from the projects page. (they’re also linked in the sidebar of each project page but that’s not relevant now)
Below the contact page I’ve got pages for links — simply to represent that the visitor can go somewhere from there.
This is a pretty standard and simple model, but it helps you work out what you want to put where in your site — it’s also a useful way to make sure your site is easily navigable.
Don’t try and draw every link in, the problem is that creates a recursive and inifinite loop that makes dreamweaver’s map view wet itself, never mind your piece of paper.
Step 3: Design Decisions
Before getting in to colours, fonts and whatnot you’ll need to consider a layout.
How many columns will your site have? I went with three on the home, project and photography pages with images as links, my navigation bar is horizontal, along the bottom of the header.
You could also have a navigation menu that sits vertically along the left or right hand side like a column.
My project, blog and photography pages have two columns — a main one with content and a smaller one on the right with an advert and appropriate links, in the blog page it has recent posts down the left hand side.
The more columns and rows you have over the layout the more you risk a cluttered look, though I’ve went with quite a sparse and minimal design overall.
Columns and rows can be brilliant formatting tools, you can add and subtract whitespace to make your pages look better, separate blocks of text and images, certainly take the time to experiment with them, sometimes adding a little cell that creates a holding space is the perfect thing to set two piece of content apart.
Step 4: Colours, Fonts and Imagery
This all depends on the kind of vibe you want your site to give off.
Fonts
I’ve chosen two fonts over the site, one I really like called eight-one and for the content text a simple, readable Franklin Gothic Book. Your header and nav links can have a signature font, something you like that’s eyecatching and a bit different, it should still be plenty readable though.
Your content font should be clean, very readable and attractive.
At no point will you use comic sans or papyrus, just don’t.
Colours
You should stick to a few main colours, they should be complementary to each other and not too garish, my choices where white, black, red and a touch of grey.
Imagery
In your header and background you can have images — well you can put them anywhere really, if you’re going to have an image in your header I would suggest something abstract and interesting or something simple and representative of your site, like my ickle jackalope…
Take care with your use of images, when done right they can be really effective, multiple images in a header doesn’t work often but a big image indicative of the site can work really well, background images can be used really effectively too, however image choice is important, something natty or too busy can make for a visually confusing site.
Step 5: Building Your Designs.
Fire up photoshop…
Start knocking together some ideas.
To do this make a new file, I use 1024 X 786 for this site, because it’s 1024 pixels wide. Having the room below lets you get more of a notion of how your page might pan out.
So make a new document as wide as the site.
Fill the background with your background colour, now make a new layer and name the layer header.
Pull out the selection tool and make a box the size you reckon your header will be, as a note it shouldn’t be too big, my nav bar and header come in just shy of 150px together, I’d say 200-250 would be the upper limit on these…
If your header’s the same colour as your background still fill it in with the colour. That way it exists…
Title your header, choose your font from the last step, you can make this quite large — it should be readable and recognizable over someone’s shoulder at the least. I’d try a few colours with the text layer before sticking to one. Place it where it looks good and link it to the header layer — we do this so that if you move one you move both, by linking layers together you can keep them in order easily. Alternatively you could use layer groups.
Step 6: Building Your Designs Contd.
Add any images you plan to have in your header, try moving them about and test different positions — originally my jackalope was at the end of the header text, I think it ended up looking much better at the right hand side.
Now set up your nav bar, new layer, select the area you want for it — fill it in with the colour you want, now make a text layer, choose your font and write in each of your links, try different orders to see what works best, your home link should always be first on the left, unless it’s in a language where writing is read right to left.
Do a little moving around, try and work out the best layout. For now save it as .PSD.
Now start over — new colour combinations, slightly different layouts and fonts, make a few different templates.
After making a few different ones, leave the computer and do something else for a while, even sleep on it — come back and choose your favourite, look for any ways it could be improved before committing…
Step 7: Taking It From Photoshop to Dreamweaver
Or whichever programs you’re making the jump with…
Open up your favourite template and get to work with the slice tool, make a slice that encompasses the entire header.
Now slice up your navigation bar, cut out each link as a slice, cut the ends either side too, to create a nice clean cutout — leave the big empty piece at the bottom there for now.
To export the page you’ll need to go to save for web, use gif settings (size is best smaller) and when you hit save make sure to hit the dropdown to save images and HTML.
At this point you should have or make a document in my documents — name this folder «killerjackalope site» as an example, save the page in here, PS will automatically make an image folder, which is handy.
Step 8: Making Your Site
Start your chosen editing and site management program.
Now, go to site > New site, click it.
Set your local root folder to the one you made and your default images folder to the one made for your base design.
From now on, everything, every image and other file associated with pages in your site goes inside these folders, I make a folder for templates, one for pages and another called scripts for any scripts DW needs to make or any I need to add to pages.
For my individual project, blog posts and photography pages there are subfolders in the page folder.
My image folder has subfolders for project images, photography folders and a folder called inpage, which is where I keep one off images.
Step 9: Your First Templates
Open that base page in your editor, delete the big blank square below the header for a start.
Now for your main template I would suggest adding an editable region called content, saving it as a template and calling it at that, this is the template you can do whatever you want with.
Making some more focused templates makes sense — for example my blog template has a table in it, with a main column for content, there’s an editable region there, an ad box on the right and below that links to all my recent posts, so each time I add a new one I only update my template.
I have a similar setup for projects.
For each type of template you’ll need set it up before making your content pages, this will save you a lot of grief later on, you’ll be able to say I need to update all my blog pages and do it with one template.
Step 10: Main Pages
You should make a new file from the appropriate template for each of your main pages — don’t worry about adding content yet, we just need the files to be there.
Now open the templates and link the files to the appropriate nav bar images.
Save the templates and say yes to updating pages.
On opening your pages you’ll see the links have been added…
Step 11: Building Up Your Pages
You’ll need time for this, don’t just throw any old rubbish in to your home page, it should be a page full of the best of your site — the most popular or interesting subjects on your site.
Here are some general content rules:
— Check your spelling
— Use paragraphs
— Break text up with appropriate images
— Link content together, if you have a page on biscuits and another on tea then link them with a line like «check out this page about tea if you want something to dunk these awesome biscuits in»
— You have use of italics, bold, subscript, superscript, everything, don’t automatically resort to caps lock.
— Make your content interesting, but make it your own
Step 12: Index Page
You should make an index page in your root folder, it can simply be a carbon copy of the home page or you could have an intro animation or some such.
To make a carbon copy of the home page simply open the home page, hit save as and browse to the site root, call it index and save, make sure to hit yes when it asks to update links — this saves you from having to change all the links relatively.
Step 13: Adding Images and Image Management.
Images are a big part of a website, you should keep a handle on them.
I’d suggest downloading an image resizing tool like PIXresizer to help with this.
For my website the images are no wider than 720px, this is because my widest content columns are that wide, resizing them to this size is logical.
When you resize an image in a WYSIWYG editor almost all of them display the image at the new size but your visitors still have to download a larger file to view it, which is hard on loading times and a waste of your bandwidth.
Remember what I said before about the site folders? That’s really important, anything outside it won’t get zapped up to your site and you’ll be left with a broken image link.
Step 14: Embedding Video and Other Content
Embedding video, instructables and all content is pretty simple.
Set your cursor to where you need the video in the design view, now flip to the code view and paste in the embed code for your content.
When you go back to the design view you’ll see a box where the video should be, should you wish to check it simply click on it and at the bottom in properties you’ll see a box with a green arrow marked play — click that and the video should load up, it’ll be rather slow inside the editor because it’s not a web browser.
If you need to move the video a bit you can just drag the box in design view now that it’s there.
Step 15: Setting Up Hosting and FTP
Setting up a host is pretty easy, I’m using Zymic at the moment, 110mb.com have died, which I used to use, ala my older website instructable.
Once you get your details from them, they’ll be displayed somewhere in your account you can get to business.
Open the site pane and hit edit, now go to remote info and add your info in to the setup.
You’ll see below the box I mean, I’ve blanked certain fields out but it’s a pretty simple login box.
Step 16: Uploading the Site
Uploading your site is relatively simple, right click the site pane or click the put button with nothing selected.
You’ll get a prompt «do you wish to put the entire site?» hit yes and go for a walk or something.
When it’s done about ten minutes later you’ll be able to see your site on the servers, it may take longer depending on how quickly they refresh, if it’s not changed after half an hour empty your web cache and try then.
Step 17: Additions and Little Touches
There are a lot of little things that can make a site a little bit more, you. You can also add social media plugins to your site to help advertise it, or add advertising.
— Add a custom 404 error page
— Add a facebook profile badge
— Add a facebook like button
— Add google adsense ads
These three are essentially just setting up on their site and pasting code in.
1. Для того, чтобы создать сайт, предназначена программа Adobe Dreamweaver, вы можете скачать ее на нашем сайте . После того, как установка завершится, запускайте программу.
2. Выбирайте html в стартовой менюшке
3. Вот так выглядит исходный код, который должен перед вами появиться:
Внимание! Строка meta – это определение кодировки сайта, вписывайте в нее windows-1251, сайты, написанные в других кодировках, сервис Народ.ру не поддерживает.
4. Название страницы вписывается в ячейку Title.
Этот тег отображает название страницы в браузере (верхняя полоса).
5. На рабочей панели ищем вкладку Common и ставим в коде курсор между тегами <body> и <⁄body> (открывающий и закрывающий, соответственно).
6. Нажав на значок таблицы, создаем ее.
Поясняю: таблица, напоминающая аналогичные творения Excel, будет основой сайта.
7. Настраивать будущую таблицу будет можно в открывающемся окошке программиста. Поле «строки» (Rows) содержит цифру, обозначающую количество вертикальных ячеек, ставим там 2.
Поле «столбцы» (Columns), содержит количество горизонтальных ячеек, ставим там тоже 2.
Поле «ширина таблицы» (Table width) так же будет содержать число. Соседняя вкладка измеряет величину таблицы либо в процентах (percent), либо в пикселях (pixels). В нашем примере это будет 90 %.
Далее идет поле «толщина рамки» (Border thickness), ему можно придать либо значение 0 (рамки будет не видно), либо любое число, задающее желательную толщину рамки (в пикселях). В нашем случае это – 1.
В поле «отступа от границы ячейки» (Cell padding) нужно проставить 20 (тоже пикселей). Таким образом, ячейки получаются как бы «приклеенными» друг к другу. Другие настройки пока оставляем без внимания. Жмем «ОК».
8. Во вкладке Design (на рабочей панели) можно посмотреть, что же вышло. Если все правильно, должна получиться таблица в 90% от размера экрана ширины, содержащая две ячейки по горизонтали и по вертикали и рамку шириной в 1 пиксель.
9. Теперь нужно полученный документ сохранить. В «Файле» (File) выбираем «сохранить как» (Save as…). В открывшемся окошке указываем путь сохранения файла. Желательно создать папку с понятным называнием, к примеру, «Мой сайт» или «Site», которая будет содержать все материалы по этой теме. Далее следует задать имя файлу. Так как данная страница будет главной, логично ее назвать index.html. Сохраняем. Все дальнейшие сохранения можно будет производить комбинацией клавиш Ctrl-S.
Этот урок посвящен созданию основы будущего сайта, его главную страницу, index.html (так всегда называется главная страница). Так же создан каркас сайта – таблица. Следующая часть будет посвящена заполнению этой самой таблицы, как текстовым материалом, так и элементами дизайна.
На чтение 4 мин. Просмотров 242 Опубликовано 13.09.2019
Создать новый сайт в Dreamweaver довольно просто – просто следуйте пошаговым инструкциям ниже. Если вы используете Dreamweaver CS3 или Dreamweaver 8, вы можете запустить мастер создания нового сайта прямо из меню «Сайт».
Содержание
- Создать новый сайт в Dreamweaver
- Как вы будете проверять свои файлы?
- Каков URL вашего сервера тестирования?
- Dreamweaver также разместит ваши файлы вживую
- Вы официально определили динамический сайт в Dreamweaver
Создать новый сайт в Dreamweaver
Прежде всего, вам нужно будет назвать свой сайт и указать его URL. Когда вы перейдете к шагу 3, выберите Да, я хочу использовать серверную технологию . Затем выберите PHP MySQL в качестве вашей серверной технологии.
Как вы будете проверять свои файлы?
Самая сложная часть работы с динамическими сайтами на основе баз данных – это тестирование. Для того, чтобы убедиться, что ваш сайт работает правильно, вам необходимо иметь возможность как проектировать сайт, так и управлять динамическим контентом, который поступает из базы данных. Это не принесет вам большой пользы, если вы создадите красивую страницу продукта, которая не будет подключаться к базе данных для получения информации о продукте.
Dreamweaver предлагает три способа настройки среды тестирования:
- Редактируйте и тестируйте локально. Для этого на рабочем столе должен быть установлен функциональный веб-сервер с PHP и MySQL. Если у вас Windows, вы можете использовать пакет для установки WAMP (Windows Apache, MySQL и PHP), а также есть пакеты для установки на компьютеры Macintosh. Это лучший выбор, чтобы получить немедленную обратную связь о том, что вы редактируете.
- Отредактируйте локально, затем загрузите на удаленный сервер тестирования. Если вы работаете с другими дизайнерами, скорее всего, вам нужно будет выбрать этот вариант. Когда вам нужно проверить что-то динамическое на вашем сайте, вы загружаете страницы на тестовый сервер. Вы также можете использовать функции регистрации и возврата в Dreamweaver, чтобы избежать перезаписи работы ваших коллег.
- Редактируйте прямо на удаленном сервере тестирования с использованием локальной сети. Если ваш рабочий стол подключен к веб-серверу, вы можете использовать эту опцию для подключения к серверу.
Локальное редактирование и тестирование предпочтительнее, так как это быстрее и позволяет выполнять больше работы, прежде чем отправлять файлы в живую.
Каков URL вашего сервера тестирования?
Поскольку вы будете тестировать свой сайт на локальном компьютере, вам нужно сообщить Dreamweaver, какой URL-адрес этого сайта. Это отличается от конечного местоположения ваших файлов – это URL вашего рабочего стола. http: // localhost/ должен работать правильно, но обязательно проверьте URL-адрес, прежде чем нажать Далее .
Если вы размещаете свой сайт в папке на вашем веб-сервере (а не прямо в корне), вы должны использовать то же имя папки на локальном сервере, что и на живом сервере. Например, если вы разместите свой сайт в каталоге «myDynamicSite» на своем веб-сервере, вы будете использовать то же имя каталога на локальном компьютере:
Dreamweaver также разместит ваши файлы вживую
После того как вы определили местоположение своего сайта, Dreamweaver спросит вас, будете ли вы публиковать содержимое на другом компьютере. Если ваш рабочий стол также не является веб-сервером, вам нужно будет выбрать Да, я хочу использовать удаленный сервер . Затем вам будет предложено установить соединение с этим удаленным сервером. Dreamweaver может подключаться к удаленным серверам по FTP, локальной сети, WebDAV, RDS и Microsoft Visual SourceSafe. Чтобы подключиться по FTP, вам необходимо знать следующее:
- Имя хоста или адрес FTP
- Папка на сервере для хранения файлов
- FTP логин
- Пароль для входа на FTP
- Должны ли вы использовать безопасный FTP или нет
Свяжитесь с вашим хостинг-провайдером, если вы не знаете, что эта информация для вашего хоста.
Обязательно проверьте подключение, чтобы убедиться, что Dreamweaver может подключиться к удаленному хосту. В противном случае вы не сможете разместить свои страницы в прямом эфире. Кроме того, если вы помещаете сайт в новую папку, убедитесь, что эта папка существует на вашем веб-хосте.
Dreamweaver предлагает функции регистрации и возврата, но нет необходимости использовать это, если вы не работаете над проектом с веб-командой.
Вы официально определили динамический сайт в Dreamweaver
Просмотрите параметры в Сводке определения сайта и, если они все верны, нажмите Готово . Dreamweaver создаст ваш новый сайт.