《静态网页设计与制作 教学课件 ppt 作者 胡汉辉 模块五》由会员分享，可在线阅读，更多相关《静态网页设计与制作 教学课件 ppt 作者 胡汉辉 模块五（107页珍藏版）》请在金锄头文库上搜索。
1、正文,主编,1.1任务一 创建“我的第一个页面” 1.2任务二 创建与管理站点 1.3拓展训练 创建“我的班级”站点 2.1任务一 文本的输入 创建“养生保健”页面 2.2任务二 图像的添加 创建“ASA餐厅”页面 2.3拓展训练 创建“我的个人网站”的首页 3.1任务一 Flash元素的添加 创建“江河双水湾”页面 3.2任务二 音乐和视频的添加 创建“音乐中心”页面 3.3拓展训练 创建“我的个人活动展示”页面和“个人相册”页面,4.1任务一 创建“绿之韵”页面间链接 4.2任务二 导航栏的制作 创建“绿之韵”页面导航栏 4.3拓展训练 创建“瑶瑶之旅”的导航栏与网页间链接 5.1任务一
2、使用层布局网页 创建“拼图游戏”页面 5.2任务二 使用框架布局网页 创建“我的音乐小站”页面 5.3任务三 CSS的应用 重新布局“在线求诊”页面 5.4拓展训练 创建“雷锋精神宣传”网页 6.1任务一 制作搜索和用户登录表单 创建“探索旅行网”首页,6.2任务二 创建列表/菜单表单 创建“机票查询”页面 6.3任务三 使用单选按钮和复选框 创建“网站活动”页面 6.4任务四 校验表单内容 创建“驴友留言”页面 6.5拓展训练 为“我的个人网站”增加会员登录、会员注册和会员留言页面 7.1任务一 网站的配色方案与版式设计 创建“羽翱科技”页面 7.2任务二 使用模板和库 创建“羽翱科技”页面
3、的模板,7.3任务三 使用网页特效 为“羽翱科技”各网页增加特效 7.4拓展训练 为“我的个人网站”各网页增加特效并进行整体风格调整,5.1任务一 使用层布局网页 创建“拼图游戏”页面,任务分析 相关知识 任务实施 5.1.1 描绘层和插入层、选择层和激活层 5.1.2 设置层属性、调整层的大小和位置 5.1.3 在层中输入文本和插入图像 5.1.4 嵌套层的创建 5.1.5 层与表格之间的相互转换 5.1.6 使用层布局网页案例,任务分析,图5-1 最终效果图,相关知识,1.层的概念 层是制作网页时经常用到的对象，在控制页面布局方面，层要比表格更加的灵活，例如需要在文字上插入一幅图像时，可以
4、用层来实现。层体现了网页技术从二维空间向三维空间的一种延伸，也是一种新的发展方向。Dreamweaver CS3中的层是一种页面元素，用于控制页面中对象的精确位置，可以将它放置于页面上的任意位置。层可以包含文本、图像、表单、插件或者其他任何可在HTML文档正文放入的内容。层和表格可以互相转换。 2.表格,相关知识,表格是网页制作中最为重要的一个对象，因为通常网页都是依靠表格来进行版面布局和各元素组织的，它直接决定了网页是否美观，内容组织是否清晰，合理地利用表格可以方便地美化页面。 3.网页的布局,相关知识,设计首页的第一步是设计版面布局。就像传统的报纸杂志编辑一样，将网页看做一张报纸或一本杂志
5、来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，读者可以领会要点，举一反三。版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现640480像素，800600像素，1024768像素等不同尺寸。布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。目前网络上常见的版面布局形式有以下几种： 1)“T”形布局。,相关知识,2)“口”形布局。 3)“三”形布局。 4)对称对比布局。 5)POP布局。,任务实施,5.1.1 描绘层和插入
6、层、选择层和激活层,(1)描绘层和插入层 1)打开一个页面，选择菜单栏中的【修改】【页面属性】命令，在“页面属性”对话框中，选择“跟踪图像”，如图5-2所示。 2)这个跟踪图像将作为“层”布局网页的参照对象，如图5-3所示。,正文_Linked_194.gif,5.1.1 描绘层和插入层、选择层和激活层,正文_Linked_195.gif,图5-2 “页面属性”对话框 图5-3 跟踪图像,5.1.1 描绘层和插入层、选择层和激活层,3)选择【查看】【标尺】【显示】命令，打开标尺，如图5-4所示。 4)选择【查看】【网格】【网格设置】命令，如图5-5所示。,正文_Linked_196.gif,5
7、.1.1 描绘层和插入层、选择层和激活层,正文_Linked_197.gif,图5-4 显示标尺 图5-5 网格设置 5)在“网格设置”对话框中，勾选“显示网格”和“靠齐到网格”复选框，如图5-6所示。 6)为了防止“层”重叠，需要打开“层”面板。,5.1.1 描绘层和插入层、选择层和激活层,正文_Linked_198.gif,5.1.1 描绘层和插入层、选择层和激活层,正文_Embed_199.png,图5-6 “网格设置”对话框 图5-7 打开“层”面板 7)在“层”面板中，选中【防止重叠】复选框，如图5-8所示。 8)现在开始描绘层。,5.1.1 描绘层和插入层、选择层和激活层,正文_L
8、inked_200.gif,5.1.1 描绘层和插入层、选择层和激活层,正文_Linked_201.gif,图5-8 防止重叠 图5-9 【描绘层】图标按钮,5.1.1 描绘层和插入层、选择层和激活层,9)在文档中，参照“跟踪图像”、“标尺”、“网格”，按住【Ctrl】键描绘层，描绘的层对齐到网格，就能够精确控制层的大小。 (2)选择层和激活层 1)单击层边框，选择一个层，如果要选择多个层，按住【Shift】键的同时单击层的边框即可。 2)单击【确定】按钮，在设计窗口中显示两个“层锚记”，这些“层锚记”就是层标识符。 3)在“层”面板中单击层的名称，如果要选多个层，按住【Shift】键的同时，
9、单击每个层的名称。,5.1.2 设置层属性、调整层的大小和位置,(1)设置层属性 1)在设计窗口中选中一个层。 2)在“属性”面板中，单击右下角的展开箭头，以查看层的所有属性。 3)根据需要设置层的属性，按【Tab】键或【Enter】键确定。 (2)调整层的大小和位置 1)通过拖动该层的调整柄调整大小。 2)若要一次调整一个像素的大小，在按住【Ctrl】键的同时，按下方向键移动层的右边框和下边框。 3)按网格靠齐增量来调整大小，在按住【ShiftCtrl】键的同时，按下方向键移动层的右边框和下边框调整大小。 4)在属性面板中，输入“宽度(W)”和“高度(H)”的值。,5.1.2 设置层属性、调
10、整层的大小和位置,1)在设计窗口中，选择多个层。 2)在“属性”面板中的“多个层”中输入“宽度(W)”和“高度(H)”值，这些值将应用于所有选定层。,5.1.3 在层中输入文本和插入图像,1)如果要移动层，必须选择层；如果需要在层中插入图像或输入文字，则必须激活该层，层选择状态和激活状态外观上有一定的区别。 2)层既可设置背景图像，也可以在层中插入图像。,5.1.4 嵌套层的创建,1)选择层“Layer1”。 2)在Dreamweaver CS3主窗口中，选择菜单栏中的【插入】【布局对象】【层】命令。 3)在层“Layer1”中会自动插入一个的层，该层命名为“Layer3”。 4)选择层“La
11、yer3”，利用层的“属性”面板设置层Layer3的属性。 1)先创建父层，然后将光标置于父层中，在Dreamweaver CS3主窗口中，选择菜单栏中的【插入】【布局对象】【层】命令，即可创建嵌套层。,5.1.4 嵌套层的创建,2)利用“层”面板创建嵌套层，在“层”面板选中作为子层的层，按住【Ctrl】键，将选中的子层拖动到要作为父层的层上，释放鼠标即可创建嵌套层。,5.1.5 层与表格之间的相互转换,(1)将层转换为表格 1)在“渊博书屋”站点上新建一个文件Untitled-7.htm，在设计窗口中插入两个层。 2)选择菜单栏中的【修改】【转换】【层到表格】命令，弹出“转换层为表格”对话框
12、。 3)设置相应的选项后，单击【确定】按钮，层转换为表格就完成了。 (2)将表格转换为层 1)在“渊博书屋”站点上新建一个表格文件Untitled-8.htm。 2)选择菜单栏中的【修改】【转换】【表格到层】命令，弹出“转换表格为层”对话框。,5.1.5 层与表格之间的相互转换,3)选择“布局工具”中的复选框，单击【确定】按钮，即可将表格转换为层。,5.1.6 使用层布局网页案例,(1)在Photoshop里先制作出拼图的切图操作 1)选择“切片选取工具”，单击【划分切片】按钮，如图5-10所示。,图5-10 选择“切片选取工具”,5.1.6 使用层布局网页案例,2)随意设置划分数量，如图5-
13、11所示。,图5-11 设置划分数量,5.1.6 使用层布局网页案例,3)在【文件】菜单中选择【存储为Web所用格式】命令，如图5-12所示。,图5-12 存储为Web所用格式,5.1.6 使用层布局网页案例,4)选择“JPEG”格式，单击【存储】按钮后打开“将优化结果存储为”对话框。,图5-13 “将优化结果存储为”对话框,5.1.6 使用层布局网页案例,(2)在Dreamweaver中完成拼图的制作 1)在“页面属性”对话框的“观外”项中设定左边距和上边距的值(可自定)，如图5-14所示。,图5-14 设定左边距和上边距,5.1.6 使用层布局网页案例,2)在任意位置绘制一个图层并设定大小
14、为自制的拼图的尺寸，如图5-15所示。,图5-15 绘制图层,5.1.6 使用层布局网页案例,3)将下方表格和图复制进图层里并删除表格内的图，再将表格边框设定为1，如图5-16所示。,图5-16 设置表格边框,5.1.6 使用层布局网页案例,4)选择表格选择菜单栏中的【修改】【转换】【将表格转换为AP Div】命令，如图5-17所示。,图5-17 将表格转换为AP Div,5.1.6 使用层布局网页案例,5)在打开的对话框中勾选“显示AP元素面板”复选框，再单击【确定】按钮，如图5-18所示。,图5-18 显示AP元素面板,5.1.6 使用层布局网页案例,6)在右侧“AP元素”面板中删除最上面
15、的图层(本例中为“apDiv18”图层)，如图5-19所示。,图5-19 删除最上面的图层,5.1.6 使用层布局网页案例,7)将最下方的图层设定位置与原表格重合(本例中设定为左边距为200px，上边距为50px)，如图5-20所示。,图5-20 设置图层与表格重合,5.1.6 使用层布局网页案例,8)创建一个表单提交按钮“start”，属性设置如图5-21所示。,图5-21 创建按钮“start”,5.1.6 使用层布局网页案例,9)在“行为”面板中选择【拖动AP元素】命令，如图5-22所示。 10)在打开的“拖动AP元素”对话框中，设置参数如下(如图5-23所示)。,图5-22 拖动AP元
16、素,5.1.6 使用层布局网页案例,图5-23 “拖动AP元素”对话框,11)设定好所有的图层后，将图层随意拉出摆放在表格外，如图5-24所示。,5.1.6 使用层布局网页案例,图5-24 随意拉出图层,12)再设定一个按钮“again”，将其URL设定为此页面，,5.1.6 使用层布局网页案例,至此浏览页面拼图游戏就制作完成了。,5.2任务二 使用框架布局网页 创建“我的音乐小站”页面,任务分析 相关知识 任务实施 5.2.1 在网页中创建框架 5.2.2 为框架命名并导入框架源文件 5.2.3 保存框架集文件和各个框架操作文件 5.2.4 设置框架集属性和框架属性 5.2.5 编辑框架内容 5.2.6 设置超级链接 5.2.7 使用框架布局网页案例,任务分析,1)在网页中插入一个顶部和嵌套的左侧框架集结构。 2)设置框架集的边框属性，设置被嵌套的左侧和右侧框架的滚动条属性，使其中的页面内容超过框架的区域时，
