Web-редактор Macromedia Dreamweaver
Язык HTML, несмотря на столь мудреное название, весьма прост. И написать с его помощью простенькую Web-страничку с парой абзацев текста можно буквально за пять минут, причем большая часть этого времени будет потрачена на набор самого текста этой страницы, а не тегов HTML. Так в чем же проблема?
Но многие его не знают язык HTML, более того — не хотят его изучать или не имеют на это времени. Но создавать Web-страницы хотят. Поэтому специально для них программисты написали множество программ, предназначенных для создания Web-страниц, — так называемые Web-редакторы. С помощью таких программ можно создавать документы, как в Microsoft Word, т.е. просто и удобно.
Одна из таких программ написана разработчиками из фирмы Macromedia и называется Macromedia Dreamweaver. Первая ее версия вышла еще в далеком 1998 году; в настоящее же время доступна версия 8. Именно с Dreamweaver мы и будем работать в процессе написания курсовой работы.
Dreamweaver — типичнейший представитель визуальных Web-редакторов, работающих по принципу WYSIWYG (What You See Is What You Get, «что ты видишь, то ты и получишь»). При этом пользователь форматирует текст и в окне редактора сразу же видит результаты своих трудов. Существуют также и невизуалъные Web-редакторы (они же — HTML-редакторы),основанные на другом принципе. Они работают непосредственно с самим HTML-кодом, предоставляя при этом пользователю различные дополнительные возможности: быстрая вставка тегов, удобное задание их параметров, набор предопределенных шаблонов для создания стандартных элементов Web-страницы и пр. В этом смысле они похожи на Блокнот, но значительно расширенный.
Здесь нужно сказать, что практически все серьезные Web-редакторы имеют режим правки непосредственно самого кода HTML (т. е. фактически являются гибридными Web-редакторами).Поэтому сейчас практически всегда, когда говорят «визуальный Web-редактор», подразумевают как раз гибридные программы. Разумеется, к их числу относится и Dreamweaver.
Как сделать сайт из шаблона
Создание сайта на основе уже готового сайта задача с которой может справиться каждый, но не все знают как быстро и эффективно это сделать. В этом уроке я постараюсь как можно проще и понятнее объяснить весь процесс…
Для работы нам понадобиться специальный html редактор в с помощью которого можно легко и быстро осуществить все задачи. Этим редактором будет Macromedia DreamWaver 8.0, он очень удобный поддерживает всё, что только нужно и достаточно прост в обращении. Многие профессионал в веб программировании пользуются именно этим редактором. Скачать вы его можете по этой ссылке: DreamWaver 8.0 , установка несложная и углубляться в подробности в этом уроке я не буду.
Перейдём от слова к делу. У вас есть какой-то шаблон сайта, если он в архиве то распакуйте его в ту папку, в которой в последствии, вы будете создавать ваш сайт. В этом уроке будет использоваться следующий шаблон:
Этот шаблон написан с применением стандартных языков программирования html и CSS. И так запускаем программу, и в появившемся диалоговом окне выбираем открыть файл
Находите папку с вашим шаблоном и выбираете index.html и перед вами откроется данный шаблон. Затем для удобства редактирования находим закладку Вид->Код и дизайн.
Теперь у нас перед глазами наглядно виден и дизайн данного шаблона и html код, который можно без проблем редактировать. Для тех кто хотя бы немного знает Html, этот вариант будет идеальным, ну а кто таковыми знаниями не обладает просто будет полезно и наглядно видно, как и где менять код. Итак для того чтобы изменить текст в каком либо из блоков нам достаточно кликнуть по нему мышью выделить и написать свой текст. Но здесь есть небольшая тонкость, если вы просто тыкните на текст и замените его на свой то в html коде редактор будет прописывать не те буквы которые вы вводите а спецсимволы:
Поэтому для корректного написания при выборе блока, текстового редактор сам переносит в нужный фрагмент кода, и вам остается только вписать текст не в режиме дизайна, а в режиме кода, тогда ваш текст будет нормально вписан в код и отображаться в дизайне.
Хотелось бы отметить ещё одну особенность работы с шаблонами связанную с корректным отображением текста, поскольку многие шаблоны которые присутствуют на данный момент в интернете написаны зарубежными авторами то и кодировка символов написана соответственно на англиский язык… Но это легко решаемая задача вам просто необходимо добавить две строчки в html код вашего шаблон между тегами … следующего содержания:
Первая строчка говорит браузерам, что сайт написан русским текстом, а вторая устанавливает стандартную кодировку.
Теперь давайте научимся править текст под свои нужды, а точнее менять цвет, размеры, наклон…и т.д. Здесь все просто выделяем необходимый вам текст и смотрим на панель снизу:
На этой панели есть практически все настройки шрифта, размер, цвет, стиль из таблицы CSS, выравнивание и т.д. Почти как в обычно редакторе Word поэтому я думаю проблем с формированием текста не возникнет.
Идём дальше нам необходимо разобраться с изображениями на сайте, здесь так же нет ни чего сложного… Находим изображение которое вам необходимо изменить или заменить и кликаем по нему. В низу экрана так же как и в предыдущем случае появляется панель с настройками только теперь изображения.
Хотелось бы отметить один важный момент, я не рекомендую пользоваться кнопками корректировки изображения, поскольку изображение вставляемое на сайт да и вообще вся графика на сайте должна создаваться и корректироваться в профессиональных графических редакторах типа Photoshop и т.д. поскольку она будет лучше оптимизирована, качественнее и занимать меньший вес что значительно может ускорить загрузку сайта.
Теперь я думаю можно перейти к вопросу гиперссылок на сайте это очень важный момент, поскольку как вы понимаете весь Интернет основан на гиперссылках.
Но здесь так же как и раньше особых сложностей тоже нет. Как при выделении текста так и при выделении изображения как вы могли заметить присутствует поле ссылка, здесь можно пойти двумя путями, можно в поле вписать конкретный адрес по домену, Например http://mysite.ru /about.htm, или нажать на изображение папки возле поля ссылки и найти нужный вам файл на который будет ссылаться эта ссылка. Первый способ используется в основном при ссылке на другие сайты ну, а второй соответственно при построении внутренней структуры сайта.
Теперь я думаю вам осталось сделать ещё несколько страниц и для вашего будущего сайта и правильно настроить ссылки. Чтобы быстро и просто это сделать уберите весь лишний текст и изображения которые вы не будете использовать на других страницах вашего сайта. А теперь просто сохраните несколько раз поучившуюся страницу под разными именами (Хотелось бы отметить что имена страниц сайта должны быть написаны только Английским текстом ни каких русских букв, иначе ни чего не получится…).
Дата публикации:2009-04-22
Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!
Автор: Алексей Мезенцев
Как сделать сайт из шаблона
Создание сайта на основе уже готового сайта задача с которой может справиться каждый, но не все знают как быстро и эффективно это сделать. В этом уроке я постараюсь как можно проще и понятнее объяснить весь процесс…
Для работы нам понадобиться специальный html редактор в с помощью которого можно легко и быстро осуществить все задачи. Этим редактором будет Macromedia DreamWaver 8.0, он очень удобный поддерживает всё, что только нужно и достаточно прост в обращении. Многие профессионал в веб программировании пользуются именно этим редактором. Скачать вы его можете по этой ссылке: DreamWaver 8.0 , установка несложная и углубляться в подробности в этом уроке я не буду.
Перейдём от слова к делу. У вас есть какой-то шаблон сайта, если он в архиве то распакуйте его в ту папку, в которой в последствии, вы будете создавать ваш сайт. В этом уроке будет использоваться следующий шаблон:
Этот шаблон написан с применением стандартных языков программирования html и CSS. И так запускаем программу, и в появившемся диалоговом окне выбираем открыть файл
Находите папку с вашим шаблоном и выбираете index.html и перед вами откроется данный шаблон. Затем для удобства редактирования находим закладку Вид->Код и дизайн.
Теперь у нас перед глазами наглядно виден и дизайн данного шаблона и html код, который можно без проблем редактировать. Для тех кто хотя бы немного знает Html, этот вариант будет идеальным, ну а кто таковыми знаниями не обладает просто будет полезно и наглядно видно, как и где менять код. Итак для того чтобы изменить текст в каком либо из блоков нам достаточно кликнуть по нему мышью выделить и написать свой текст. Но здесь есть небольшая тонкость, если вы просто тыкните на текст и замените его на свой то в html коде редактор будет прописывать не те буквы которые вы вводите а спецсимволы:
Поэтому для корректного написания при выборе блока, текстового редактор сам переносит в нужный фрагмент кода, и вам остается только вписать текст не в режиме дизайна, а в режиме кода, тогда ваш текст будет нормально вписан в код и отображаться в дизайне.
Хотелось бы отметить ещё одну особенность работы с шаблонами связанную с корректным отображением текста, поскольку многие шаблоны которые присутствуют на данный момент в интернете написаны зарубежными авторами то и кодировка символов написана соответственно на англиский язык… Но это легко решаемая задача вам просто необходимо добавить две строчки в html код вашего шаблон между тегами … следующего содержания:
Первая строчка говорит браузерам, что сайт написан русским текстом, а вторая устанавливает стандартную кодировку.
Теперь давайте научимся править текст под свои нужды, а точнее менять цвет, размеры, наклон…и т.д. Здесь все просто выделяем необходимый вам текст и смотрим на панель снизу:
На этой панели есть практически все настройки шрифта, размер, цвет, стиль из таблицы CSS, выравнивание и т.д. Почти как в обычно редакторе Word поэтому я думаю проблем с формированием текста не возникнет.
Идём дальше нам необходимо разобраться с изображениями на сайте, здесь так же нет ни чего сложного… Находим изображение которое вам необходимо изменить или заменить и кликаем по нему. В низу экрана так же как и в предыдущем случае появляется панель с настройками только теперь изображения.
Хотелось бы отметить один важный момент, я не рекомендую пользоваться кнопками корректировки изображения, поскольку изображение вставляемое на сайт да и вообще вся графика на сайте должна создаваться и корректироваться в профессиональных графических редакторах типа Photoshop и т.д. поскольку она будет лучше оптимизирована, качественнее и занимать меньший вес что значительно может ускорить загрузку сайта.
Теперь я думаю можно перейти к вопросу гиперссылок на сайте это очень важный момент, поскольку как вы понимаете весь Интернет основан на гиперссылках.
Но здесь так же как и раньше особых сложностей тоже нет. Как при выделении текста так и при выделении изображения как вы могли заметить присутствует поле ссылка, здесь можно пойти двумя путями, можно в поле вписать конкретный адрес по домену, Например http://mysite.ru /about.htm, или нажать на изображение папки возле поля ссылки и найти нужный вам файл на который будет ссылаться эта ссылка. Первый способ используется в основном при ссылке на другие сайты ну, а второй соответственно при построении внутренней структуры сайта.
Теперь я думаю вам осталось сделать ещё несколько страниц и для вашего будущего сайта и правильно настроить ссылки. Чтобы быстро и просто это сделать уберите весь лишний текст и изображения которые вы не будете использовать на других страницах вашего сайта. А теперь просто сохраните несколько раз поучившуюся страницу под разными именами (Хотелось бы отметить что имена страниц сайта должны быть написаны только Английским текстом ни каких русских букв, иначе ни чего не получится…).
Дата публикации:2009-04-22
Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!
Автор: Алексей Мезенцев