《工作室网站制作操作步骤.docVIP

工作室网站制作操作步骤 一、页面布局 利用DIV标签进行网页总体布局。页面中DIV布局的代码如下： body div id=”box” div id=”top”此处显示id”top”的内容/div div id=”menu”此处显示id”menu”的内容/div div id=”banner”此处显示id”banner”的内容/div div id=”main” div id=”left”此处显示id”left”的内容/div div id=”right”此处显示id”right”的内容/div /div div id=”bottom”此处显示id”bottom”的内容/div /div /body 二、页面制作 创建CSS样式，保存样式表文件为css.css(或style.css).创建的CSS样式主要有： 1． *（方框选项：padding和margin均为0；边框选项：width为0）（选择器类型为标签） 2．body（类型选项：字体为宋体，大小为12px，颜色为#575757；背景选项：背景颜色为#FFFFFF；区块选项：text-align为居中）（选择器类型为标签） 3．选择器类型为ID #box(方框选项：width为1000px;margin:top和bottom为0，left和right为auto;边框选项：左右均为实线（solid），宽度为1px，颜色为#D2D2D2) 4．#top(区块选项：文本对齐为左对齐；方框选项：高为87px) 在top层中定位光标，插入图像301.jpg。 5．#menu(背景选项：背景图像为302.gif，重复为repeat-x(横向重复)；区块选项：文本对齐为左对齐；方框选项：宽为auto，高为50px) 在menu层中定位光标，插入图像303.gif。将光标移到刚插入的图像后，插入导航条，图像分别为304.gif—320.gif，共8个导航项目。完成后，转换到代码视图，修改刚刚插入的导航条代码，将表格标签删除。 6．#banner(方框选项：宽为auto，高为200px，边界（margin）中设置上为14px；边框选项：上为实线，1px，#e5e5e5) 将光标移到banner层中，插入图像322.gif。 7．#main(方框：宽为998px，高为680px) 8．#left(方框：宽为281px，高为680px，浮动（float）为左对齐（left）；边框：设置样式的右为实线，宽度右为1px，颜色的右为#d6d6d6) 9．#right(区块：文本对齐为左对齐；方框：宽度为694px，高度为655px，浮动为右对齐，padding-top为19px，padding-left为20px;边框：设置样式的上为实线，宽度上为1px，颜色上为#d6d6d6) 10．将光标置于页面中，“插入DIV标签”，在left层中插入leftpic层（在插入下拉列表中选择“在开始标签之后”，右侧列表选择“div id=”left””，id为leftpic），单击“新建CSS样式”按钮，定义leftpic的样式。 #leftpic(背景：背景颜色为#7bbece，背景图像为323.gif，重复为纵向重复（repeat-y）；方框：宽为45px，高为680px，浮动为左对齐) 将光标移到leftpic层中，插入图像324.gif。 11．插入DIV标签，在leftpic层后插入leftmenu层（在插入下拉列表中选择“在标签之后”，右侧列表选择“div id=”leftpic””，id为leftmenu），单击“新建CSS样式”按钮，定义leftmenu的样式。 #leftmenu(区块：文本对齐为左对齐；方框：宽为234px，高为680px，浮动为右对齐；边框：设置样式的上为实线，宽度上为1px，颜色上为#d6d6d6) 将光标移到leftmenu层中，插入鼠标经过图像，图像分别为325.git—338.gif。 12．插入DIV标签，在right层中插入rightcont层，定义rightcont的样式。 #rightcont(方框：宽为676px，高为376px；边框：下为虚线（dotted），1px，#c7c7c7) 13．插入DIV标签，在rightcont层中插入r_leftcont层，定义r_leftcont的样式 #r_leftcont(方框：宽为510px，高为375px，浮动为左对齐) 14．插入DIV标签，在r_leftcont层中插入r_lefttilte层，定义r_lefttilte的样式。 #r_lefttilte（背景：背景图像为339.gif，重复为横向重复；方框：宽为510px，高为68px） 将光标移到r_lefttilt