dreamweawer案例单：资讯网.doc

案例单学习领域了解网页设计学习情境4PS在网页制作中的重要性-资讯网学时3案例内容完成该内容的技术要求完成该任务的工作流程1.前期准备1、新建文件（夹）；2、重命名文件（夹）；3、复制文件（夹）；1、 从教师机下载素材；2、 新建站点根目录文件夹，命名为btb；3、 将素材文件夹中的“index.html”和“images”复制至文件夹“btb”中；2.建立站点1、 新建站点；2、 打开网页文件；3、 打开Dreamweaver CS3软件，新建站点btb；4、 打开index .html，对比图片btb.jpg，观察该网页缺少哪些元素；3.制作Logo1、文件的新建（3种方法）； 1）菜单法：文件-新建 2）快捷键法：Ctrl+N 3）Ctrl+鼠标单击灰色区域2、设置前景色；3、图层的新建；4、图层的重命名；5、自定义形状工具的应用；6、图像的调整（水平翻转）；7、椭圆工具的应用；8、文字工具的应用；9、文件的保存。1、 启动Photoshop软件；2、 选择菜单“文件”-“新建”（Ctrl+N），命名为logo，文档宽度、高度为220像素59像素，分辨率300像素/英寸，颜色模式为RGB，背景为白色；3、 设置前景色为#1730A4；4、 在图层面板上单击“创建新的图层”，双击图层命名为logo；5、 在工具箱中选择“自定义形状工具”，选择工具属性栏上的“填充像素”，单击的“形状”下拉列表，追加“装饰”，并选择“饰件7”；6、 拖动鼠标，绘制合适大小的图形；7、 选择菜单编辑-变换-水平翻转，利用移动工具调整位置；8、 新建图层，重命名为“圆”；9、 在工具箱中选择“椭圆工具”，按住Shift键拖动，绘制正圆，并调整位置；10、选择“横排文字工具”输入BTB，调整字号;11、选择“横排文字工具”输入资讯网，调整字号，选中文本设置颜色为#3656E5；12、选择菜单文件-储存，格式为jpg；4.制作导航栏1、 选择菜单“文件”-“新建”（Ctrl+N），命名为“导航”，文档宽度、高度为950像素64像素，分辨率300像素/英寸，颜色模式为RGB，背景为白色；2、 设置前景色为#1730A4；3、 在图层面板上单击“创建新的图层”，双击图层命名为“圆角矩形”；4、 在工具箱中选择“圆角矩形工具”，拖动绘制；5、 选择“横排文字工具”，分别输入“产业资讯”、“数码世界”、“房产频道”、 “时尚购物”、“求职招聘”；6、 新建图层,重命名为“直线”，选择“直线工具”，按住Shift键，在“产业资讯”与“数码世界”之间绘制直线；7、 在图层面板中右击“直线图层”，选择“复制图层”，复制3条直线，并调整到合适位置；8、 选择菜单文件-储存，格式为jpg；5. 制作banner1、打开图片“banner.jpg”；2、新建图层，重命名为“白底”；3、设置前景色为白色#FFFFFF；4、选择“圆角矩形工具”，在右下角绘制合适大小的圆角矩形；5、新建图层，重命名为“绿底”；6、设置前景色为#A3B82F；7、选择“圆角矩形工具”，在右下角绘制合适大小的绿色圆角矩形；8、打开“横幅图标.psd”，将图标拖入绿色区域，并根据实际情况调整矩形于图标的位置、大小；9、使用“横排文字工具”输入文字“资讯社区”、“教育” 、“交易” 、“环保” 、“交通” 、“住房” 、“购物”；10、新建图层，重命名为“直线”，选择“直线工具”，按住Shift键，在对应的位置绘制直线；11、Ctrl+S保存，格式为jpg。6. 在网页中插入图片1、使用Dreamweaver打开“index.html”；2、将第35步制作的图片logo.jpg、导航.jpg、banner.jpg移动到taobao根目录的images文件夹中；3、选中logo，按Delete键删除，图像占位符；4、单击“插入栏”上的“图像”按钮，插入logo