Как подвинуть таблицу в html

Как сдвинуть начало таблицы Html ниже

Нужно сдвинуть начало таблицы немного ниже, поскольку я использую бекграунд с нарисованным вверху лого. Как это сделать, помогите кто может..

Вложения

206,5 КБ · Просмотры: 588

AugustDioz

Да, и еще. Как растянуть фоновое изображение на весь экран браузера для всех разрешений экрана?

Kauperwood

про смещения:
взять бумажку и написать на ней:

«верхинй, правый, нижний, левый»

можно заламинировать и повесить ee на видном месте :lool:

это правило часто используется в:

width: 0px 0px 0px 0px; -ширина height: 0px 0px 0px 0px; -высота margin: 0px 0px 0px 0px; -внешний отступ блока (читать про блочную модель) padding: 0px 0px 0px 0px; -внутренний отступ блока (читать про блочную модель)

вместо px можно ставить %, pt, em, in, ex, pc
в связке с этим помогут свойства position, display,float, background, clear, min-width, min-height, border
есть

Как подвинуть таблицу в html

ну так и в примере не вся таблица

центр все центрует. начните с нуля. отключите все классы

и всё отцентрует, крики не помогает, не помогут, делайте всё с нуля, никто кроме вас не может знать, что вы там передаёте в классах в css, в теме вы не привели информацию.

Регистрация: 11.04.2017
Сообщений: 3

 
 
 
AzTec-140
 
5
 
116
 
116…120
 
21,33
 
4 3/8
 
  
AzTec-146
 
5 3/4
 
118
 
124…128
 
21,33
 
4 7/8
 
 
AzTec-168
 
6 5/8
 
137
 
143…148
 
22,97
 
5 5/8
 
 
AzTec-178
 
7
 
154
 
156
 
26,90
 
6 1/8
 
Тип устройства
 
Диаметр обсадной колонны, дюйм
 
Максимальный диаметр устройства, мм
 
Диаметр фреза, мм
 
Общая длина устройства, м
 
Диаметр долота для последующего бурения, дюйм
 
 
AzTec-194
 
7 5/8
 
160
 
168
 
27,56
 
6 3/4
 
 
AzTec-219
 
8 5/8
 
180
 
194
 
27,62
 
7 1/2
 
 
AzTec-245
 
9 5/8
 
200
 
216…223
 
27,62
 
8 3/4
 
 
 

Вот друг вся таблица. выручай

______________________
Используйте тег [CODE] (кнопка с решеткой # в форме сообщения) при вставке кода на форум.

Последний раз редактировалось Alex11223; 11.04.2017 в 15:25 .

Постановка задачи

Одна из самых распространенных форм представления информации на Web-страницах — всевозможные таблицы. Особенно часто такие конструкции используются, когда требуется регулярно обновлять информацию. Поскольку таблица — элемент категории block-level, ее достаточно просто заменять, не нарушая общий дизайн страницы.

Но таблицы удобны не только для отображения информации, но и для ее хранения и обработки. Часто источником данных для Web-страниц служат классические приложения Microsoft Office — Word и Excel, обладающие мощными средствами обработки данных. В таких случаях приходится экспортировать таблицы Microsoft Office в таблицы HTML, и, естественно, возникает желание такой экспорт автоматизировать.

Стандартные средства формирования кодов HTML, имеющиеся в Microsoft Office, для профессионального применения не годятся — прежде всего из-за своей избыточности. Эти средства с определенной натяжкой еще можно использовать для первичного формирования страниц, но уж никак не для обновления существующих, хорошо отформатированных документов. В таких документах никакие элементы оформления не требуются, необходимо только воспроизводить структуру и содержание таблиц; а сохранение таких документов заново как Web-страниц средствами Microsoft Office только испортит их, опять добавив избыточные элементы форматирования, от которых с таким трудом избавляются Web-мастеры.

Уточним требования к программе, которой мы будем пользоваться для создания HTML-документов с таблицами. Пусть исходные данные — это таблицы, созданные в одном из приложений Microsoft Office. Структура таблиц может быть произвольной; допускается любое разумное объединение ячеек. Слово «разумное» в данном контексте означает, что таблица изначально была регулярной (свойство Uniform) и к ней применялись операции объединения ячеек. В этом случае таблица будет иметь эквивалентное представление в виде совокупности элементов

В Excel любая таблица удовлетворяет этим требованиям, а вот в Word — нет. Таблицы Word допускают перемещение границ ячеек в отдельных строках, что в HTML реализуется только в виде отдельной таблицы. Это следует четко осознавать и по возможности в Word не использовать. Как поступать со случайно деструктурированными таблицами Word, будет показано ниже.

В ячейках исходной таблицы могут быть любые элементы, предусмотренные HTML: текст и inline-элементы, с соответствующими тэгами, включая вызовы функций JavaScript.

Результат преобразования — код HTML — необходимо поместить в произвольно заданные места существующего HTML-документа (прототипа). Если исходная таблица велика, что имеет место при работе со списками, целесообразно предусмотреть разбиение таких таблиц на разделы. Чтобы уж совсем усложнить задачу, потребуем пакетной обработки множества различных таблиц.

Экспорт отдельной таблицы Excel

Первый шаг в решении поставленной задачи — разработка процедуры, выполняющей экспорт отдельной таблицы. В качестве источника данных выберем таблицу, помещенную на листе Excel. Таблицы Excel гораздо предпочтительнее таблиц Word и не только потому, что имеют множество встроенных функций. Таблицы Word очень легко незаметно для пользователя деструктурировать: для этого достаточно сдвинуть боковые границы отдельных ячеек по отношению к границам столбцов. В этом случае возникает проблема, как интерпретировать смещенные ячейки. Стандартные процедуры Word при экспорте всегда разбивают такие конструкции на отдельные таблицы, даже если визуально это смещение в документе Word незаметно. Альтернативное решение, «исправляющее» таблицы Word, мы приведем ниже. В таблицах же Excel подобное невозможно. Ячейки можно объединять, но при этом границы столбцов и строк всегда остаются неизменными для всей таблицы.

Помня, что экспорт отдельной таблицы не самоцель, а лишь часть общей задачи, выберем в качестве исходных данных для процедуры объект Range, передаваемый в качестве параметра, или объект Selection. Результат преобразования — строки кода HTML — будем выводить в некий текстовый файл с помощью инструкции Print #.

Нам понадобятся строковые константы, задающие тэги HTML. В зависимости от потребностей пользователя эти константы должны содержать параметры необходимых стилей, выбранных для оформления страницы:

Const TABLE_INNER = "" Const TR_INNER_ODD = " " Const TR_INNER_EVEN = " " Const TD_INNER = "  " Const END_TR = " " Const END_TABLE = ""

Как видно из приведенного описания, для тэга

предусмотрено два стиля, что позволит по-разному оформлять четные и нечетные строки таблицы.

Сама процедура экспорта таблицы приведена ниже. Единственную сложность в ней представляет анализ объединения ячеек. Выходной файл имеет номер 2 (номер 1 зарезервирован для входного файла — прототипа страницы).

Private Sub MakeTable(objTable As Range) '-- Make HTML for Table 
Dim objTr As Range '-- row range Dim objTd As Range '-- cell range Dim strTag As String '-- tag string Dim intRow As Integer '-- row number intRow = 0 Print #2, TABLE_INNER For Each objTr In objTable.Rows intRow = intRow + 1 If intRow Mod 2 = 0 Then Print #2, TR_INNER_EVEN '-- even row Else Print #2, TR_INNER_ODD '-- odd row End If For Each objTd In objTr.Cells strTag = TD_INNER If objTd.MergeCells Then If objTd.MergeArea.Range("A1").Address = objTd.Address Then If objTd.MergeArea.Rows.Count > 1 Then strTag = strTag & " rowspan=""" & _ objTd.MergeArea.Rows.Count & """" End If If objTd.MergeArea.Columns.Count > 1 Then strTag = strTag & " colspan=""" & _ objTd.MergeArea.Columns.Count & """" End If strTag = strTag & ">" Print #2, strTag & objTd.Value & LTrim(END_TD) End If Else strTag = strTag & ">" Print #2, strTag & objTd.Value & LTrim(END_TD) End If Next objTd Print #2, END_TR Next objTr Print #2, END_TABLE 
End Sub

Экспорт совокупности таблиц

Важный частный случай экспорта таблиц — экспорт списков; такие списки необходимо разделять на группы. Современный способ группировки информации — динамические окна (nuggets), допускающие свертывание и развертывание. Конструктивно nugget состоит из двух частей: заголовка с кнопкой maximize/ minimize и тела, помещенного в контейнер

Тело — это отдельная таблица, преобразовывать которую мы уже научились. Теперь, если на исходном листе Excel создать список и разделить его на группы, добавив строки заголовков, отличающиеся форматом или специальным признаком, можно сгенерировать совокупность nuggets. Прежде всего нам понадобятся дополнительные константы, задающие необходимые тэги.

Const TABLE_HEADER = "" Const TR_HEADER = " " Const TD_HEADER_NAME = " _ &+VALUE+& " Const TD_HEADER_BUTTON = " _ " Const DIV_BODY = "
" Const TABLE_BODY_ODD = "" Const TABLE_BODY_EVEN = "" Const TR_BODY = " " Const TD_BODY_MAIN = " " Const END_DIV = "
"

Здесь необходимы некоторые пояснения. В некоторых выражениях можно заметить служебные слова VALUE и COUNT, написанные прописными буквами. Эти слова указывают место вставки переменных значений, вычисляемых по ходу обработки списка. Вставка выполняется с помощью функции замены вхождений подстроки в строковое выражение. В Visual Basic for Applications версии Office 2000 такая функция существует и называется Replace. Для совместимости с Microsoft Office 97 применяется пользовательская функция ReplaceString, выполняющая те же действия.

Так же, как и в процедуре преобразования отдельной таблицы, в данном случае предусмотрены два стиля оформления тела: для четных и нечетных nuggets. Полный текст макроса, осуществляющего экспорт списка в виде совокупности таблиц, заключенных в тела nuggets, приведен ниже. Предполагается, что заголовки разделов выполнены полужирным шрифтом, а первый столбец списка используется для нумерации групп.

Private Sub ListLoop() '-- Loop Across The Single Sheet Dim objCurrent As Range '-- current selection Dim objArea As Range '-- hole list Dim objHeader As Range '-- header line Dim objBody As Range '-- body table Dim objTemp As Range '-- work range object Dim strTemp As String '-- work string Dim blnSkip As Boolean '-- header not found Set objCurrent = Selection Range("A2").Activate '-- left upper corner Set objArea = ActiveCell.CurrentRegion Set objArea = objArea.Offset(1, 0). Resize(objArea.Rows.Count - 1, _ objArea.Columns.Count) objArea.Select '-- list without title row Set objBody = objArea.Offset(0, 1).Resize(1, _ objArea.Columns.Count - 1) blnSkip = True '-- Begin For Each objTemp In objArea.Rows If objTemp.Range("A1").Font.Bold Then If objTemp.Range("B1").Address <> _ objBody.Range("A1").Address Then objBody.Select '-- Nugget Body MakeNuggetBody gintCount, Selection, blnSkip End If Set objHeader = objTemp.Resize(1, objArea.Columns.Count) objHeader.Select Set objBody = objTemp.Offset(1, 1).Resize(1, _ objArea.Columns.Count - 1) '-- Nugget Header gintCount = gintCount + 1 MakeNuggetHdr objHeader.Range("B1").Value, gintCount blnSkip = False Else If objTemp.Range("B1").Address <> _ objBody.Range("A1").Address Then Set objBody = objBody.Resize(objBody.Rows.Count + 1, _ objBody.Columns.Count) End If objBody.Select End If Next objTemp '-- Nugget Body Last MakeNuggetBody gintCount, Selection, blnSkip '-- End objCurrent.Select End Sub

В приведенном макросе используются две вспомогательные процедуры — для формирования заголовка и тела nuggets соответственно. Эти процедуры достаточно просты и в специальных комментариях не нуждаются.

Private Sub MakeNuggetHdr(strItem As String, intItem As Integer) '-- Make HTML for Nugget Header Dim strTemp As String '-- work string Print #2, TABLE_HEADER Print #2, TR_HEADER '-- Insert Nugget Title Print #2, ReplaceString(TD_HEADER_NAME, "&+VALUE+&", strItem) '-- Insert Nugget Number strTemp = intItem Print #2, ReplaceString(TD_HEADER_BUTTON, "&+COUNT+&", strTemp) Print #2, END_TR Print #2, END_TABLE End Sub Private Sub MakeNuggetBody(intItem As Integer, _ objTable As Range, blnSkipDiv As Boolean) '-- Make HTML for Nugget Body Dim strTemp As String '-- work string '-- Insert Nugget Number If Not blnSkipDiv Then strTemp = intItem Print #2, ReplaceString(DIV_BODY, "&+COUNT+&", strTemp) End If If intItem Mod 2 = 0 Then Print #2, TABLE_BODY_EVEN '-- even style Else Print #2, TABLE_BODY_ODD '-- odd style End If Print #2, TR_BODY Print #2, TD_BODY_MAIN '-- Insert Simple Table Code MakeTable objTable Print #2, END_TD Print #2, END_TR Print #2, END_TABLE If Not blnSkipDiv Then Print #2, END_DIV End If End Sub

Отображение кодов HTML в исходном документе

В предыдущих разделах приведены способы формирования HTML-кодов для отдельной таблицы и для списка, порождающего множество таблиц, разделенных на группы. В качестве заполнителя пространства между тэгами

используется свойство VALUE (тип данных VARIANT) соответствующих ячеек исходного листа Excel. Никакого анализа содержимого ячеек не проводится. Это позволяет удовлетворять требованиям универсальности. В ячейки исходных таблиц, наряду с текстом, числами и формулами, можно поместить произвольные фрагменты HTML-кода, обеспечивая тем самым любые желаемые последствия. Например, можно вставить гиперссылки с параметром target, графические элементы, указать стили или функции JavaScript.

К сожалению, за такую универсальность приходится расплачиваться совершенно неприглядным внешним видом исходного документа. Представьте себе, что в фирменном прайс-листе, в колонке со ссылкой «Buy Now!» окажется длиннющий HTML-код. Такую таблицу не то что напечатать — показать кому-либо страшно.

Естественное решение этой проблемы — заимствовать у гипертекстовых документов две формы представления информации: внешнюю, отображаемую браузером, и внутреннюю — в виде кода HTML. Конечно, вряд ли разумно строить интерпретатор для всех тэгов языка, достаточно ограничиться некоторым замещающим текстом. Строго говоря, для ячеек таблицы, наряду со свойствами VALUE, FORMULA, TEXT, следовало бы доопределить свойство HTML. Однако необходимость обеспечить ввод информации вручную диктует совсем не объектно-ориентированное решение. Это решение сводится к созданию обычной пользовательской функции, одним из параметров которой будет переменная, задающая форму вывода результата — замещающий текст, нужный для отображения ячеек при работе в Excel, или HTML-код, использующийся при экспорте. Другой параметр проектируемой функции также очевиден. Это строка — прототип кода HTML. Здесь мы воспользуемся тем же приемом с замещением, который был применен в процедурах со вставкой идентификаторов при формировании nuggets. В прототипе следует указать позиции подстановки переменных значений с помощью специальных уникальных кодов.

Чтобы сделать функцию универсальной, предусмотрим переменное число параметров, каждый из которых будет размещаться в заданных позициях строки-прототипа. В качестве специальных кодов прототипа можно использовать порядковый номер элемента в массиве параметров. Перед этим номером в прототипе необходимо поместить специальную строку — тэг, отличающий идентификатор подстановки от прочих комбинаций символов в коде HTML. Что касается строки замещения, то пусть ее роль выполняет первый элемент массива. С учетом сказанного текст новой пользовательской функции выглядит следующим образом.

Public Function InlineHTML(blnHTML As Boolean, _ strReplaceTag As String, _ strHtmlSample As String, _ ParamArray varItem() As Variant) As String '-- Make Inline HTML Element Dim intI As Integer '-- item counter Dim strOut As String '-- result string Dim strFrom As String '-- search string Dim strTo As String '-- replace string strOut = "" '-- Check Show Mode If Not blnHTML Then '-- Show First Item As Result String If UBound(varItem()) > 0 Then strOut = varItem(0) End If Else '-- Show HTML Code strOut = strHtmlSample For intI = 0 To UBound(varItem()) '-- Replace All "ReplaceTag & I" With Item(I) strFrom = strReplaceTag & intI + 1 strTo = varItem(intI) strOut = ReplaceString(strOut, strFrom, strTo) Next intI End If InlineHTML = strOut End Function

Результаты работы приведенной функции показаны на рисунке. В первой строке списка выводу подлежала строка замещения. Это состояние соответствует параметру blnHTML = 0. Во второй строке выведен весь HTML-код с произведенной подстановкой шести параметров. В этом случае blnHTML = 1. В третьей строке показана сама формула в режиме редактирования. В качестве тэга перед номером параметра в прототипе использован символ «#».

Два варианта отображения исходных данных в таблице Excel.

К сожалению, одной этой функции недостаточно. В процессе экспорта таблиц необходимо проверять, имеется ли в текущей ячейке такая формула, а если имеется, то необходимо переключиться в режим отображения HTML, извлечь код, а затем переключиться в «нормальный» режим отображения.

Эти действия выполняет вспомогательная функция, приведенная ниже:

Private Function ReplaceValue(objCell As Range) As String '-- Extract HTML Code For Current Cell Dim strOut As String Dim strOld As String strOut = objCell.Value If InStr(1, objCell.Formula, _ "InlineHTML(0,", vbBinaryCompare) > 0 Then '-- Save Formula strOld = objCell.Formula '-- Update Value With HTML Code objCell.Formula = ReplaceString(objCell.Formula, _ "InlineHTML(0,", "InlineHTML(1,") '-- Extract New Value strOut = objCell.Value '-- Return Formula objCell.Formula = strOld End If ReplaceValue = strOut End Function

Теперь, чтобы все функции работали вместе, необходимо в процедурах предыдущих примеров заменить в инструкциях Print # операнды получения свойств вида:

на функцию вида:

Использование прототипа Web-страницы

Приведенных выше процедур достаточно, чтобы сформировать законченные фрагменты HTML-кода. Осталось вставить их в нужное место Web-страницы. Для этого потребуется исходный HTML документ — прототип и операции ввода-вывода текстовых файлов.

Что касается прототипа, то его следует подготовить традиционными средствами, например, с помощью FrontPage, отметив специальным образом места для вставки необходимых таблиц. Как сделать такие отметки? Воспользуемся способом, применяемым в профессиональной серверной технологии PHP. В позициях, где должна будет появиться таблица, поместим тэги вида

(конечно, ради приличия, следует заменить префикс php, например, на vba). Присутствие таких тэгов в обычном HTML-документе никак не сказывается на отображении страниц любым браузером. Страницы можно спокойно проектировать и отлаживать, сообщений об ошибках не последует. Тэги php всегда остаются невидимыми. Внутри такого тэга можно поместить любое указание препроцессору, роль которого в нашем случае будет выполнять Visual Basic for Applications. Если, например, тэг

обозначает необходимость вставки всех таблиц, расположенных на листе с именем List1 рабочей книги Excel, то, включая его в создаваемый HTML-код прототипа, можно разместить в прототипе указания по формированию кодов для таблиц или списков из различных листов и даже различных документов, созданных средствами Microsoft Office.

На этом подготовку прототипа можно считать законченной и переходить непосредственно к вводу-выводу.

Необходимо заметить, что хотя практически во всех приложениях Microsoft Office имеются стандартные диалоги открытия и сохранения файлов, для работы с файлами формата HTML удобнее пользоваться элементом управления ActiveX — Microsoft Common Dialog Control (COMDLG32.OCX). Программирование в этом случае проще, а окно диалога не содержит «лишних» возможностей.

Окончательный алгоритм работы макроса формирования HTML-документа выглядит следующим образом. Сначала выводится диалог открытия файла-прототипа для чтения. Затем выводится диалог для сохранения файла результата. Файл-прототип читается построчно и копируется в выходной файл. Процесс продолжается до тех пор, пока во входном потоке не встретится тэг вида

В этом случае активизируется указанный лист и выполняется приведенная выше процедура ListLoop. Эта процедура генерирует необходимые строки в выходном потоке. Сам тэг

в выходной файл не переписывается. По окончании работы ListLoop выбирается следующая строка из входного потока, которая либо просто копируется в выходной файл, либо снова инициирует экспорт информации уже из другого листа книги. Процесс повторяется до конца входного файла. Затем файлы закрываются.

Эта простенькая заключительная процедура, большую часть которой составляют операторы фиксации ошибок при открытии текстовых файлов, приведена ниже:

Public Sub DoIt() '-- Read Sourse, Replace Include Tags, Make Target '-- Include Tag Format: '-- '-- NOTES: Space Before ( ?>) is Binding! Dim strTextLine As String '-- input line Dim strListName As String '-- sheet's name Dim strName As String '-- file name Dim strPath As String '-- file full path Dim blnDone As Boolean '-- RC Common Dialog Control '-- Show Common Dialog For Open Source strName = "" strPath = "" blnDone = ComDlgFile(strName, strPath, _ "Select Source File", True) If blnDone Then On Error Resume Next Open strPath For Input As #1 If Err <> 0 Then MsgBox Error$, vbCritical Exit Sub End If Else MsgBox "Cancel By User", vbCritical Exit Sub End If '-- Show Common Dialog For SaveAs Target strName = "" strPath = "" blnDone = ComDlgFile(strName, strPath, _ "Target File Save As", False) If blnDone Then On Error Resume Next Open strPath For Output As #2 If Err <> 0 Then MsgBox Error$, vbCritical Exit Sub End If Else MsgBox "Cancel By User", vbCritical Exit Sub End If '-- Clear Global Nuggets Counter gintCount = 0 Do While Not EOF(1) '-- Цикл до конца файла. Line Input #1, strTextLine If UCase(Left(strTextLine, 15)) <> " 0 Then MsgBox Error$, vbCritical Close #1, #2 Exit Sub Else ListLoop End If End If Loop Close #1, #2 MsgBox strPath & " Brewed", vbInformation End Sub

Таблицы в документах Word

Безусловно, при необходимости профессионально работать с таблицами лучше выбирать Excel. Однако на практике встречаются случаи использования таблиц в документах Word. Некоторое время назад к автору обратилась одна солидная фирма, специализирующаяся на организации обучения иностранным языкам за границей. При создании сайта у них возникла проблема с переносом накопленной информации на Web страницы. Исходная информация — а это были обширные таблицы с расписаниями курсов — содержалась в документах Word. Таблицы имели объединенные ячейки, как по столбцам, так и по строкам. Было очевидно, что с таблицами продолжительное время активно работали, в результате чего их внутренняя структура была полностью разрушена, хотя визуально и при печати таблицы выглядели вполне нормально. Неприятности начинались только при попытках копирования таблиц в другие приложения — FrontPage или Excel — и при попытках сохранять документы в формате HTML. Так, для одной-единственной таблицы Word’97 формировал HTML-документ размером 25 Кбайт; при этом страница в браузере мало напоминала оригинал в Word. Word 2000 справлялся с задачей лучше: результат преобразования больше походил на источник, зато размер HTML-файла становился просто фантастическим — более 100 Кбайт(!) Положение казалось безвыходным, так как таблиц было много, а сроки создания сайта поджимали.

Проблемы были разрешены с помощью небольшого макроса, который формировал HTML-документ размером всего 5 Кбайт, и этот документ полностью удовлетворял требованиям заказчика.

Для решения задачи был применен эвристический подход, который может оказаться весьма полезным при работе с любыми таблицами Word. Суть алгоритма такова — прежде всего определяется максимальная размерность объекта Table. Далее в оперативной памяти создается двумерный массив той же размерности, что и таблица. Этот массив инициализируется специальными значениями, обозначающими свободные ячейки:

intColMax = objTbl.Range.Information (wdMaximumNumberOfColumns) intRowMax = objTbl.Range.Information (wdMaximumNumberOfRows) ReDim strTblArray(intRowMax, intColMax) For intRow = 1 To intRowMax For intCol = 1 To intColMax strTblArray(intRow, intCol) = FILLER Next intCol Next intRow

После подготовки массива проводится «зондирование» исходной таблицы с попыткой извлечь содержимое каждой ячейки. Если ячейки с определенными координатами не существует, возникает ошибка, а соответствующий элемент массива остается неизменным:

For intRow = 1 To intRowMax For intCol = 1 To intColMax On Error Resume Next Set objCell = objTbl.Cell(intRow, intCol) If Err.Number = 0 Then objCell.Select strTmp = Selection.Range.Text strTblArray(objCell.RowIndex, _ objCell.ColumnIndex) = strTmp End If Err.Clear Next intCol Next intRow

В результате проделанной операции исходная таблица попросту переписывается в массив. При этом таблица приводится к регулярному виду, известному как свойство Uniform = True. На первый взгляд, в приведенном фрагменте нет ничего примечательного. Но если присмотреться, то можно отметить очень любопытную деталь. Несмотря на то, что зондируется ячейка с координатами intRow и intCol, извлекаемый текст записывается в элемент массива с другими координатами! Эти координаты цели извлекаются из свойств RowIndex и ColumnIndex. Такая особенность объектной модели Word проявляется только при объединении ячеек; для таблицы Uniform координаты совпадают.

Непосредственно HTML-код генерируется уже на основе заполненного регулярного массива, построчно. Параметры ROWSPAN и COLSPAN формируются путем подсчета «пустых» ячеек справа и вниз от текущей позиции:

Print #1, tagTBLBEG For intRow = 1 To intRowMax Print #1, tagTRBEG For intCol = 1 To intColMax If strTblArray(intRow, intCol) <> FILLER Then If intRow = 1 Then strTagBeg = tagTHBEG strTagEnd = tagTHEND Else strTagBeg = tagTDBEG strTagEnd = tagTDEND End If intRowSpan = 0 blnDone = True Do While blnDone intNext = intRow + intRowSpan + 1 If intNext 0 Then intRowSpan = intRowSpan + 1 strTagBeg = Left(strTagBeg, Len(strTagBeg) - 1) _ & " ROWSPAN=""" & intRowSpan & """>" End If intColSpan = 0 blnDone = True Do While blnDone intNext = intCol + intColSpan + 1 If intNext 0 Then intColSpan = intColSpan + 1 strTagBeg = Left(strTagBeg, Len(strTagBeg) - 1) _ & " COLSPAN=""" & intColSpan & """>" End If Print #1, strTagBeg & _ strTblArray(intRow, intCol) & strTagEnd End If Next intCol Print #1, tagTREND Next intRow Print #1, tagTBLEND

Обучение CSS
Начинаем работу с HTML + CSS

Это краткое руководство предназначено для людей, начинающих свое изучение CSS в первый раз.

Оно не дает глубоких знаний о CSS. Руководство просто объясняет как создать HTML файл, CSS файл и как заставить их работать вместе. После прочтения данной статьи, Вы можете продолжить дальнейшее изучение других обучающих руководств для получения информации о более значительных особенностях HTML и CSS. Или же перейти к изучению материала в интерактивных HTML или CSS редакторах, которые помогут Вам при создании сайтов.

В конце данной статьи Вы создадите HTML файл который будет выглядеть как этот:

Полученная HTML страница с цветами и разметкой сделанной при помощи CSS.

Заметьте, что я не претендую на то, что это очень красиво ☺

Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца обозначает более расширенную информацию чем остальной текст.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты, например Блокнот от Windows, TextEdit на Mac или KEdit под KDE вполне подойдут под задачу. Как только Вы поймете основные принципы, вы можете переключиться на использование более продвинутых инструментов разработки, например на такие коммерческие программы как Style Master или DreamWeaver. Но для создания первого CSS файла не стоит отвлекаться на множество расширенных возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или OpenOffice. Эти программы обычно создают файлы, которые не могут быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и наборе в нем следующего текста:

Вам не обязательно это перенабирать — вы можете просто скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать TextEdit’у, что это действительно простой текстовый файл, открыв меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем случае — это HTML версии 4.01.

Слова между < и >называются тэгами и как вы можете видеть, документ содержится между и тэгами. Между and находится различная информация, которая не отображается в самом документе. Например там содержится заголовок документа. Позже мы добавим туда и связь с CSS файлом.

Тэг это место содержимого документа. В принципе, все что находится внутри этого тэга за исключением текста между , являющегося комментариями, будлет выведено на экран. Комментарий браузером игнорируется.

в нашем примере задает отображение “неупорядоченного списка” (Unordered List), т.е. списка, элементы которого непронумерованы. Тэги
начинают “элементы списка” (List Item). Тэг

является “параграфом”. А тэг — “якорь” (Anchor), с помощью которого создаются гиперссылки.

Код HTML в редактор KEdit.

Если вы хотите узнать какие бывают тэги в скобках , то вы можете изучить Начало работы с HTML. Но сначала пару слов о структуре нашей HTML страницы.

• Тэг “ul” — список состоящий из одной ссылки на каждый элемент списка. Эта структура послужит нам “навигацией” по нашему сайту связывая с нами другие страницы нашего гипотетического сайта . Предполагается, что все страницы нашего сайта будут иметь схожее или идентичное меню.
• Элементы “h1” и “p” задают содержимое уникальное каждой страницы, в то время как подпись (“address”) снизу снова будет повторяться на всех страницах.

Давайте предположим, что данная страница будет одной из страниц Веб сайта, состоящего из нескольких похожих страниц. Как мы и договорились, эта страница будет содержать ссылки на другие страницы нашего гипотетического сайта, уникальное содержимое и подпись.

Выберите “Сохранить как…” или “Save As…” из выпадающего меню Файл или File, укажите каталог для сохранения файла (например Рабочий Стол) и сохраните данный файл как “mypage.html”. Не закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем 10.4, вы увидите опцию «Don’t append the .txt extension» в диалоговом окне «Save as». Выберите эту опцию, потому что имя файла “mypage.html” уже включает в себя расширение. Более новые версии TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл вашим файловым менеджером (Проводник, Windows Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на нем. Если вы делали все как описано то имя файла будет “mypage.html”. У вас должен открыться файл в браузере, установленном по умолчанию. (Если нет, то откройте браузер и перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 2: изменяем цвета

Возможно, вы видите некоторый черный текст на белом фоне, но это зависит от конфигурации браузера. Для того чтобы страница выглядела более стильно, мы можем сделать очень легко одну простую вещь — добавить цвета. (Оставьте окно браузера открытым — мы к нему еще вернемся)

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим CSS стили и HTML разметку в разные файлы. Раздельное хранение хорошо тем, что легче использовать те же самые стили для множества HTML файлов: Вам нужно написать CSS стили только один раз. Но на этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент к HTML файлу. Определения стилей будут внутри этого тэга. Возвращаемся к редактору и добавляем следующие пять строчек в заголовок HTML кода между тэгами и . Строки, которые надо добавить выделены красным (с 5-й по 9-ю) .

     body  [и т.д.]

Первая строка говорит браузеру о том, что это таблица стилей и что она написана на CSS (“text/css”). Вторая строка говорит, что мы применяем стиль к элементу “body”. Третья устанавливает цвет текста в пурпурный, а следующая устанавливает цвет фона в желто-зеленый оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое правило состоит из трех частей:

1. селектор (в нашем примере: “body”), которые говорит о том, к какой части документа применить правило;
2. свойство (в нашем примере свойствами являются ‘color’ и ‘background-color’), которое указывает что именно мы устанавливаем у данного элемента, выбранного селектором;
3. и значение (‘purple’ и ‘#d8da3d’), которое устанавливает значение атрибута.

Наш пример показывает что правила могут быть скомбинированы. Мы установили два свойства, так же мы могли задать их раздельно:

body < color: purple >body

но поскольку оба правила относятся к body мы записали “body” один раз и поместили свойства и значения вместе. Для получения большей информации о селекторах смотрите главу 2 из Lie & Bos .

Фон элемента body так же является фоном целого документа. Мы явно не назначили другим элементам (p, li, address…) фона, так что по умолчанию у них его нет (или он прозрачный). Свойство ‘color’ устанавливает цвет текста элемента body, но все остальные элементы внутри body наследуют этот цвет, пока для них не задан другой в виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или “Save” из файлового меню) и переключитесь обратно в браузер. Если вы нажмете кнопку “обновить” , то изображение сменится со “скучной” страницы на разукрашенную (но все еще однообразную) страницу. Кроме ссылок сверху, весь текст должен быть пурпурный на желто-зеленом фоне.

Теперь браузер показывает страницу к которой мы добавили цвет.

В CSS можно задавать цвета несколькими способами. Наш пример показывает два из них: по имени (“purple”) и по шестнадцатиричному коду (“#d8da3d”). Существует порядка 140 имен цветов и 16 шестнадцатиричных значений. Добавляя прикосновение стиля объясняет детали относительно этих кодов.

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать — шрифтовое разнообразие разных элементов на странице. Давайте напишем шрифтом “Georgia” весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том, какие шрифты установлены на компьютерах посетителей, мы добавим альтернативные способы отображения: если Georgia не найдена, то мы будем использовать Times New Roman или Times, а если и он не найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы можем попробовать использовать Geneva, Arial или SunSans-Regular поскольку они очень похожи по начертанию, ну а если у пользователя нет таких шрифтов, то браузер может выбрать любой другой шрифт без засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13) :

      [и т.д.]

Если вы сохраните файл снова и нажмете “обновить” в браузере, то у вас должны быть разные шрифты в заголовках и в тексте.

Сейчас шрифт заголовков и основного текста различается.

ШАГ 4: добавляем навигацию

Список наверху HTML страницы представляет из себя навигацию по сайту. Множество сайтов имеют навигационное меню вверху страницы или по сторонам от содержимого. Наша страница тоже не будет исключением. Мы поместим меню слева, потому что это несколько привлекательнее, чем наверху.

вверху. Ссылки в нем не работают, потому что наш “сайт” пока что состоит только из одной страницы, но это неважно в данный момент. Конечно же, на настоящем сайте не должно быть неработающих ссылок.

Нам нужно переместить список налево и сдвинуть остальное содержимое немного вправо, чтобы создать пространство для него. Свойства CSS которые мы будем использовать для этого — ‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’ (для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или “верстка” на странице изучая CSS , вы найдете несколько готовых к использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16) :

    body < padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d > ul.navbar h1 [и т.д.]

      [etc.]

      [и т.д.]

    [etc.]