网也设计课程.pptVIP

网页设计与制作 主编：王克富 主要内容 项目任务实施——任务一结构草图绘制 项目任务实施——任务一结构草图绘制 项目任务实施——任务一结构草图绘制 （4）右键单击空白区域，选择“描边”，弹出“描边”对话框，按如图所示设置参数，点击“好”按钮退出。 项目任务实施——任务一结构草图绘制 项目任务实施——任务一结构草图绘制 项目任务分析——任务一结构草图绘制 项目任务分析——任务一结构草图绘制 项目任务分析——任务一结构草图绘制 项目任务分析——任务一结构草图绘制 项目任务分析——任务一结构草图绘制 项目任务分析——任务一结构草图绘制 项目任务分析——任务一结构草图绘制 项目任务分析——任务一结构草图绘制 自学与拓展——任务一结构草图绘制 自学与拓展——任务一结构草图绘制 自学与拓展——任务一结构草图绘制 自学与拓展——任务一 结构草图绘制 自学与拓展——任务一 结构草图绘制 　　方法二：如果是文章太长，这时就可以使用分页的显示方法，如图。 自学与拓展——任务一 结构草图绘制 项目任务书——任务二Dreamweaver表格布局 本任务目标： 　 根据任务一的结构草图，在Dreamweaver使用表格来细化布局。 项目任务实施——任务二Dreamweaver表格布局 项目任务实施——任务二Dreamweaver表格布局 项目任务实施——任务二Dreamweaver表格布局 项目任务实施——任务二Dreamweaver表格布局 （3）插入表格，定位“导航栏”布局。方法如步骤（2），参数设置也如步骤（2）。这时的布局效果如图所示。 项目任务实施——任务二Dreamweaver表格布局 　　　（5）插入嵌套表格，定位“左侧导航栏“里面的布局。将光标置于步骤（4）创建的表格左边的单元格中，插入一个6行1列的嵌套表格，其“宽度”为100%，该表格存放左侧导航栏。再插入一个4行4列的嵌套表格，其“宽度”为100%，该表格存放登陆系统组件。选择这个4行4列的表格的第一行四个单元格，点击“属性”面板上的按钮，合并成一个单元格；同理合并第四行四个单元格；选择第二和第三行第一个单元格，设置它们的“宽度”为18%；选择第二和第三行第二个单元格，设置它们的“宽度”为40%；选择第二和第三行第三个单元格，设置它们的“宽度”为40%。 项目任务实施——任务二 Dreamweaver表格布局 　　　（6）插入嵌套表格，定位“正文”布局。将光标置于上图右侧的单元格，插入一个表格，其参数设置如图3-36所示。合并第一列的三个单元格，用来存放图片。第一行其余两列分别存放栏目名称和“更多”这个超链接；第二行其余两列的单元格合并后存放蓝色的分割线；第三行的其余两个单元格合并后放正文。这时局部的效果如图所示。由于有五个上述相似的栏目，所以先选择本步骤的表格，按CRTL＋C复制，再按CRTL＋V粘贴四次，就生成了五个一模一样的表格。 　　　“图片新闻”栏目还有一个显示新闻图片的区域没有设计，操作如下：将光标置于第三列，再插入一个“1行2列，宽度为90%，居中对齐”的表格。 项目任务实施——任务二Dreamweaver表格布局 　（6）按照步骤2，完成“版权信息”模块的布局。 　　　在本任务中，我们将所有表格的边框设置为1，其目的只是让读者方便地看清楚布局的轮廓，实际操作中，应该将边框设置为0。所以，最后我们将所有表格的边框设置为0。 项目任务分析——任务二Dreamweaver表格布局 项目任务分析——任务二 Dreamweaver表格布局 项目任务分析——任务二Dreamweaver表格布局 项目任务分析——任务二Dreamweaver表格布局 项目任务分析——任务二Dreamweaver表格布局 自学与拓展——任务二Dreamweaver表格布局 项目任务实施——任务三Photoshop切片布局 项目任务实施——任务三Photoshop切片布局 　（1）启动Photoshop，点击“文件｜新建”菜单命令，弹出“新建”对话框，进行如图的参数设置。点击“好”按钮后，将文件保存为“校园网.jpg”。 项目任务实施——任务三Photoshop切片布局 　（3）使用“圆角矩形工具”将导航条描边。点击“工具”栏上的“圆角矩形工具”，选择当前工具栏上的“路径”按钮，然后在图片中拖曳出一个圆角矩形区域，右键单击圆角矩形附近区域，在弹出的菜单中选择“建立选区”，在“建立选区”对话框中保留默认值，点击“好”按钮。右键单击空白区域选择“描边”，在“描边”对话框中选择“宽度”为2像素，颜色为灰色，其它参数保持默认值。 项目任务实施——任务三Photoshop切片布局 　（4）使用“油漆桶工具”，填充导航条的底色。选择“工具｜油漆桶工具”将选区填充为浅蓝色。用这样的