1611095683-f0e95d7001a513b94262b62a8c96d2db (824959), страница 11
Текст из файла (страница 11)
При этом содержимое всего параграфа станет подсвеченным.Вставьте информацию о работе из файла с Вашей лабораторной работойНа этом будем считать редактирование заголовка завершенным. Проконтролируйтекак ваша страница будет выглядеть в обозревателе. В панели Folder List выберете страницуindex.html и щелчком правой кнопки по файлу выберете функцию Preview in Browser,или нажмите клавишу F12. Желательно контролировать сразу в нескольких браузерах. Дляэтого через меню File Preview in Browser попробуйте несколько вариантов просмотра.Рекомендуется проверять все изменения в дизайне страницы, в которых вы не уверены. Этопозволит значительно сократить время редактирования сайта.Примечание.
Размеры окна браузера следует выбирать 800х600 пикселей. В принципе,сейчас трудно найти монитор меньшего размера, но кроме мониторов существует массамобильных устройств с размером экрана 640х480, поэтому рекомендуется проверять и притаких параметрах окна.59Теперь приступим к редактированию панели навигации. Сначала определим разделысайта, которые нам необходимы, и их названия.
Для простоты, будем использоватьодноуровневую структуру. Домашняя страница нашего сайта находится в файлеdefault.htm. Ввиду особенностей сервера, на котором мы будем публиковать наш сайт, намнеобходимо переименовать этот файл в index.html. Во избежание потери связей междустраницами меняйте название файлов и папок только в программе Expression Web, котораяавтоматически поменяет связи во всем документе. Для названий файлов и папок используйтетолько латинский алфавит. Первым символом в названии файла должна быть буква.Изменим также название ссылки Home на Домой. Для этого щелкнем по нему правойкнопкой мыши и в меню Hyperlink properties в поле Text to display введите «Домой».Остальные файлы со страницами сайта содержатся в соответствующих папках.
Например,страница about.htm находится в папке about. Если мы планируем расположить здесьаннотацию к нашей работе, то сначала изменим название папки, затем название файла наannotation/annotation.htm, и название гиперссылки в панели навигации через Hyperlinkproperties. Не забудьте также поменять и название самой страницы (щелкнув правойкнопкой по файлу annotation.htm в меню Properties, вкладке General.В принципе, можно поступить иначе. Просмотрите страницы сайта с помощью панелиFolder List, выберите наиболее подходящую вам по структуре (или просто любуюстраницу). Щелкните по нему правой кнопкой и выберите меню New From Existing Page.У вас откроется новый файл с точно таким же содержанием и названием типаUntitled_1.htm.
Сохраните его с помощью сочетания клавиш Ctrl+S (или другим60способом), создав новую папку с одноименным названием, например introduction.htm.Проделайте одну из вышеприведенных операций, создав все необходимые вам страницы, иудалите лишние страницы из содержимого папки сайта. Отредактируйте также панельнавигации. Вы можете добавить новые элементы списка. Для этого щелкните по элементу,который вы хотите размножить и в селекторе тэгов выберете <li>, далее выполните действияCopy и Paste.
Проверьте все гиперссылки из панели навигации и не забудьтепереименовать все страницы через меню Properties.Под панелью навигации расположим логотип физического факультета и ссылку насайт. Для этого в последнем элементе списка расположим курсор в конце строки и нажмемEnter. У нас появится новый элемент списка (судя по заголовку тэга <li> - list item) очистимформатирование, отключив маркированный список, щелкнув по кнопкепанелиинструментов. Через меню Insert Picture From file найдем файл с эмблемойФизического факультета НГУ. Подберем его размер так, чтобы он не выходил за пределыпанели навигации, например 100×100 px. Теперь попробуем изменить ширину панелинавигации.
Для этого поместим курсор в любой элемент панели навигации, в селекторе тэговвыберем <div#sidebar>. Обратимся к редактированию свойств CSS. На вкладке CSSProperties выберем режим отображения свойств Summary и в разделе Position найдемсвойство width. Щелкнув на него мышью мы увидим стрелку, которая вызоветвсплывающее меню. Выберем Pick Length и в поле Length Value укажем 100.Проконтролируйте, чтобы единицы измерения стояли px.61Остановимся подробнее на этом действии.
Каждый тэг на нашей странице содержитформатирование, которое отображается в свойствах CSS Properties. Это удобное средстворедактирования свойств тэгов позволяет быстро отыскать необходимую позицию и придатьему соответствующий атрибут. Далее, набор свойств, присущих какому-либо тэгу, можнообъединить в один стиль и строго привязать его к этому тэгу. Таким образом, изменивширину панели навигации, которой соответствует тэг <div#sidebar>, мы изменили иотносящийся к нему стиль.
Это изменение отображается * напротив открывшегося файлаstyle3.css. Таким образом, панель навигации должна принятьвид.Примечание. Существует три вида стилей. Стили на основе тэгов, применяютсятолько к определенным HTML-элементам, например, к заголовкам первого уровня h1 или кгиперссылкам. Если отредактировать такой стиль, то все элементы с заданным стилемпоменяют вид. Второй вид – стили на основе классов, они могут применятся к чему угодно,например, к абзацу или элементам таблицы.
Третий вид – встроенные стили на основеидентификаторов. Эти стили применяются только к одному тэгу, чтобы, например,выделить абзац из всего текста курсивом. Данные правила позволяют разделитьсодержимое и форматирование. Во-первых, это позволяет значительно сократить HTMLкод. Во-вторых, упрощается форматирование содержимого сайта. Если Вы захотите62поменять внешний вид заголовков, вам достаточно изменить стиль, соответствующийданному тэгу. Подробнее об управлении таблицами стилейОсталось отформатировать нижнюю часть страницы – «подвал».
С помощьюизвестных Вам приемов поменяйте названия гиперссылок, удалите лишние ссылки,упорядочите ссылки согласно их расположению на панели навигации.Чтобы закрепить умение пользоваться свойствами тэгов выполните следующееупражнение. Определите какой цвет фона в панели навигации и задайте такой же фон в окнесодержимого страницы.После всех ваших трудов шаблон (файл master.dwt) должен выглядеть примерно также как на рисунке справа.
Прежде чем начать наполнение сайта, проконтролируйте как вашастраница будет выглядеть в обозревателе. Если содержимое Вас устраивает, отправляемсядальше. Теперь с помощью простых операций Copy/Paste Вы можете заполнить созданныевами страницы своей лабораторной работой. Для этого Вы открываете соответствующуюстраницу и в редактируемую область вставляете свой текст. После того, как заполните всестраницы, проконтролируйте, как они отображаются в браузере. Проследите, не появилосьли ненужных полос прокрутки. Если требуется, измените либо размеры содержимого,которое выходит за рамки вашей страницы (таблицы или графики), либо в файле master.dwtизменитеширинуредактируемойобласти(предпочтительнеепользоватьсянеманипуляторами, а свойствами CSS Properties).
Для таблиц используйте автоматическиестили форматирования. Для этого выделите тэг <table> и правой кнопкой мыши вызовитеменю Modify Table Autoformat. Если Вам не хочется терять качество приформатировании рисунков, Вы можете создать мини-картинку, которая будет расположенана месте вашего рисунка, а при нажатии на нее в новом окне откроется ваш рисунокполностью.
Чтобы создать мини-картинку, щелкните по рисунку правой кнопкой и выберитеменю Auto Thumbnail. Такой прием позволит сократить время загрузки вашего сайта, ажелающие разглядеть детали вашего графика или установки всегда смогут сделать это,щелкнув по мини-картинке.63Примечение. Любителям поэкспериментировать с различными элементами, которыеможно добавлять на страницу (например, из панели Toolbox, или InsertInteractiveButtons) следует учитывать, что содержимое, которое требует определенной поддержкина сервере, asp.net controls в частности, может весьма украсить сайт, придатьнекоторой функциональности.
Но Вамследует помнить, что чембольше Вы«наворачиваете» свой сайт, тем дольше он будет загружаться на компьютерпользователя с ограниченной скоростью соединения. Можете проверить это даже насвоем сервере (как опубликовать сайт – см. далее). Поэтому, без особой надобностистарайтесь избегать элементов, требующих поддержки.4.3. Публикация сайтаПосле того как Вы добьетесь того, чтобы все страницы вас удовлетворяют и добавитьвроде бы нечего, проверьте ваш сайт на наличие битых ссылок в меню Site Reports Site summary найдите параметр Broken hyperlinks (битые ссылки). Исправьте ошибки приналичии.Если у Вас все готово, можно опубликовать свой сайт. Для этого создайте на своемдиске папку public_html и скопируйте в нее содержимое Вашего сайта.
Обратите внимание,чтобы в папке public_html лежал файл index.html. Как уже упоминалось, именно с негоначинается загрузка сайта. Теперь Ваш сайт находится в сети Интернет по адресуhttp://ccphys.nsu.ru/~[ваш логин]. Например, http://ccphys.nsu.ru/~83-ivanov. В ExpressionWeb также существует встроенное средство публикации сайтов. Вы найдете его в меню Site64 Remote Web Site и далее нажмите кнопку Remote Web Site Properties. Здесь выберитеFile System и укажите папку public_html на вашем сетевом диске. Затем в колонке LocalWeb Site выделите все файлы и нажмите кнопку переноса файлов.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
