张家界_div+css_布局网页制作步骤指导.docx

步骤1：新建一个文件夹“张家界-div+css布局”，把图片素材（image文件夹）拷贝到该文件夹“张家界-div+css布局”中。打开dreamweaver，创建一个站点，点击“站点”菜单，选择“新建站点”命令，打开对话框，设置如下图，注意本地站点文件夹选择“张家界-div+css布局”。在 文件 面板中新建一个首页文件index双击打开首页index.html开始网页制作。新建body样式，样式保存到mycss文件中。打开css样式面板，创建css样式。 “选择器类型”为“标签”，选择body样式，设置参数如图所示。接下来具体设置body样式的参数。（字体、大小、颜色、边界）设置完参数，单击确定，保存样式。创建box标签及设置其css样式执行“插入记录”—“布局对象”—“Div标签”命令，弹出对话框，创建box标签。页面效果如下。接下来设置box标签的样式，打开css样式面板，创建一个新的样式。单击确定，保存样式，页面效果如下将box标签中的内容删除。创建top标签及设置其css样式选择“插入”—“布局对象”—“Div标签”命令，弹出对话框，在box标签中创建一个新的Div标签top。选中top标签，在css样式面板中为top标签创建新的样式。将top标签中的内容删除，插入图片head.jpg，效果如下图。创建menu标签及设置其css样式选择“插入”—“布局对象”—“Div标签”命令，弹出对话框，在top标签后面创建一个新的Div标签menu。选中menu标签，在css样式面板中为top标签创建新的样式。将menu标签中的内容删除，插入图片daohangtiao.jpg，效果如下图。9、创建content 标签及设置其css样式选择“插入”—“布局对象”—“Div标签”命令，弹出对话框，在menu标签后面创建一个新的content标签。选中content标签，在css样式面板中为content标签创建新的样式。将content标签中的内容删除。创建left标签及设置其css样式在content标签中创建一个新div标签left。选择“插入”—“布局对象”—“Div标签”命令，弹出对话框，在content标签中创建一个新的left标签。选择left标签，创建一个新的css样式。选择方框选项卡，设置left标签的css样式。页面效果如图所示将left标签内容删去，插入images文件夹中的kaimushi.jpg图片。页面效果如下。创建right标签及设置其css样式在left标签的右侧插入一个新的div标签right。选择right标签，创建一个新的css样式。切换到“方框”选项卡，设置宽度、高度和浮动方式。页面效果如下：创建pic标签及设置其css样式将right标签内容删去，在right标签中插入新div标签right1。2、选中right1标签，设定其css样式。设置参数。删除标签中的文字，输入“新闻动态　更多 ”页面效果如下创建right2标签及设置其css样式在right1标签后面插入新div标签right2。2、选中right2标签，设定其css样式。设置参数。删除标签中的文字，输入5条新闻列表内容，每条新闻内容回车换行，给每条新闻设置成空超级链接，页面效果如下。创建yyz标签及设置其css样式在content标签后面插入新div标签yyz。2、选中yyz标签，设定其css样式。设置参数。删除标签中的文字，输入页面效果如下。创建yyztu标签及设置其css样式在yyz标签后面插入新div标签yyztu。选中yyztu标签，设定其css样式。删除标签中的文字，插入图片yyz1.jpg、yyz2.jpg、yyz3.jpg、yyz4.jpg，输入页面效果如下。创建yytt标签和yytttu标签及设置其css样式步骤同15创建bottom标签设置其css样式步骤同前。提示：创建标签，标签宽925，高98像素。删除标签内文字，插入图片。