第04章“北京奥运吉祥物-福娃”网站的静态设计.ppt
《第04章“北京奥运吉祥物-福娃”网站的静态设计.ppt》由会员分享,可在线阅读,更多相关《第04章“北京奥运吉祥物-福娃”网站的静态设计.ppt(65页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、第二篇 静态设计篇 第四章“北京奥运吉祥物-福娃”网站的静态设计 本章简介:本章将结合前面所学的知识,承接“北京奥运吉祥物-福娃”网站策划书和“北京奥运吉祥物-福娃”站点的建立与配置,主要讲述了使用Adobe Dreamweaver CS3对“北京奥运吉祥物-福娃”网站静态设计的步骤、方法和技巧。目 录4.1 使用表格布局网站主页 4.2 设计主页4.3 设计其他相关网页4.4 创建超链接4.5 本章小结4.6 习题4.1 使用表格布局网站主页 在编辑网页前应该首先对网页进行整体布局设置,合理的布局使网页看起来美观大方,并且便于网页元素的插入与编辑。表格是进行网页布局的强有力的工具,但是使用表
2、格的标准模式进行布局不太方便,因为传统意义上的表格是用来显示表格数据的,而不是用于对Web页面进行布局的。为了简化使用表格进行页面布局的过程,Dreamweaver为用户提供了布局模式,在布局模式中,用户可以使用表格作为基础结构来设计网页,避免了使用传统的方法创建时经常出现的一些问题。网站主页草图 网站头部网站头部网站主体网站主体网站底部网站底部网站主页效果图 4.1.1 布局主页头部(1)新建空白网页,并命名为index.html。(2)将“插入工具栏”切换到“布局”插入栏,选择“查看”“表格模式”“布局模式”命令进入布局视图。此时“布局”插入栏中的“布局表格”按钮和“绘制布局单元格”按钮被
3、激活,如图所示。这两个按钮被激活这两个按钮被激活(3)单击“布局表格”按钮,鼠标光标变为“+”形状,将光标定位到编辑窗口左上角,然后按住鼠标左键不放拖动,到合适的位置后释放鼠标。(4)单击边框线选中布局表格,在“属性”面板中设置其宽度和高度分别为1260像素和181像素,如图所示,此表格用来布局网站头部信息。(5)单击“布局单元格”按钮,将鼠标光标定位于布局表格左上角,然后按住鼠标左键不放拖动,至布局表格合适的位置后释放鼠标。(6)单击新绘制布局单元格的边框线将布局单元格选中,在属性面板中设置其宽度和高度分别为154像素和130像素。使用相同的方法在第一个单元格的右侧分别绘制952130像素和
4、154130像素的两个单元格,这三个单元格用来做网站的Logo区。(7)使用相同的方法,在第一行的下方绘制一个126037像素的布局单元格,用来做网站的导航区。(8)使用相同的方法,在第二行的下方再绘制一个126014像素的布局单元格,用来做网站头部和网站主体的分割区。网站头部的布局过程系列图如图所示。到此,网站的头部布局绘制完成。导航区Logo区4.1.2 布局主页主体(1)在网站头部表格的下方,绘制一个1260809像素的布局表格用来放置网站的主体内容,如图所示。(2)在主体布局表格中从左到右并列绘制三个大小分别为154809像素、952809像素和154809像素的布局表格,将主体布局表
5、格分为三部分,其中左右表格用来布局页面,而中间的表格用来放置网站的相关信息,如图所示。(3)在中间的布局表格中,从上到下依次绘制952280像素、9529像素、952225像素、9529像素和952286像素的五个布局表格,如图所示。(4)在952280像素的布局表格中,从左到右依次绘制340280像素、15280像素、325280像素、15280像素的四个布局表格。然后在最右侧从上到下依次绘制25765像素、2579像素和257206像素的三个布局表格。(5)单击“布局单元格”按钮,在福娃动态布局表格内从上到下依次绘制32538像素和325242像素的两个布局单元格。使用相同的方法在公告栏布
6、局表格内从上到下依次绘制25749像素和257157像素的两个布局单元格,如图所示。(6)使用相同的方法,在952225像素的布局表格内从左到右依次绘制680225像素、15225像素和257225像素的三个布局表格。其中15225像素的表格用来分隔信息区,其它表格用来放置福娃简介和福娃揭秘,如图所示。(7)单击“布局单元格”按钮,在福娃简介布局表格内从上到下依次绘制68031像素和680194像素的两个布局单元格;使用相同的方法在福娃揭秘布局表格内从上到下依次绘制25742像素和257183像素的两个布局单元格,如图所示。(8)使用相同的方法,在952286像素的布局表格内,从左到右依次绘制
7、341286像素、15286像素、324286像素、15286像素和257286像素的五个布局表格。其中15280像素的表格用来分割网站的各个信息区,其余表格分别用来放置精彩图片、名人说福娃、投票调查,如图所示。(9)单击“布局单元格”按钮,在精彩图片布局表格内从上到下依次绘制34133像素和341253像素的两个布局单元格。使用相同的方法在名人说福娃布局表格内从上到下依次绘制32433像素和324253像素的两个布局单元格;在投票调查布局表格内从上到下依次绘制25740像素和257246像素的两个布局单元格,完成网页主体的布局,如图所示。4.1.3 布局主页底部 在网站主体的下方绘制一个12
8、60148像素的布局表格,接着单击“布局单元格”按钮,在此布局表格中,从左到右分别绘制154148像素、952148像素和154148像素的三个布局单元格,最终完成网页的整体布局,如图所示。4.2.1 设置网页属性1.设置网页标题(1)方法一:打开FuWa目录下的index.html文档,在文档工具栏的“标题”文本框中输入“北京奥运吉祥物-福娃”作为网页标题,如图所示。4.2 设计主页(2)方法二:在菜单栏中选择“修改”“页面属性”命令,弹出“页面属性”对话框,在“分类”列表框中选择“标题/编码”选项,然后在右侧的“标题”文本框输入网页的标题,如图所示。2.设置网页的其他属性(1)外观:在“分
9、类”列表中选择“外观”选项,则右侧信息主要用于设置网页基本页面布局,包括页面字体、大小、文本颜色、背景颜色、背景图像、左边距、右边距、上边距和下边距等。本实例中设置页面字体为“宋体”、大小为“14像素”、左边距为“0”像素、上边距为“0”像素,其它属性保持默认值不变,如图所示。(2)链接:网页中的链接就是以文字或图像作为链接对象,然后指定一个要跳转到的目标网页地址,当浏览者单击文字或其他对象时,浏览器就会自动跳转到指定的目标网页。在“分类”列表中选择“链接”选项,则右侧选项主要用于设置网页中超链接的字体、字体大小、各种链接颜色、链接下划线的样式等。本实例中设置链接颜色、已访问链接和活动链接颜色
10、均为“#000000”,链接下划线的样式为“始终无下划线”,其它属性保持默认值不变,如图所示。4.2.2 设置表格属性(1)单击如图所示的编辑窗口正上方“布局模式退出”中的“退出”超链接切换到“标准”视图。(2)在表格边框线上单击选中“网站头部”表格,此表格内包含网站头部的所用表格和单元格,打开“属性”面板,在“属性”面板的“对齐”下拉列表中选择“居中对齐”选项,如图所示。(3)使用相同的方法将“网站主体”表格和“网站底部”表格也设置为居中对齐方式。4.2.3 插入文本和图像(1)通过单击鼠标将光标定位到第一行第一个单元格中,在“属性”面板中单击“背景”文本框后面的浏览按钮,在打开的“选择图像
11、源文件”对话框中选择背景图像logo_left.gif(所有的网页素材都需要在前期收集、整理加工、整理好),如图所示。(2)使用同样的方法,分别在第一行第二个单元格和第一行第三个单元格中插入背景图像logo_center.jpg和logo_right.gif,完成Logo区的设置,如图所示。(3)选择第二行,在“属性”面板中设置背景颜色为“#333333”、字体为“宋体”、大小为“14px”、字体颜色为“#FFFFFF”、单元格水平对齐方式为“水平对齐”,垂直对齐方式为“居中”。(4)在第二行中依次输入导航名称“网站主页”、“福娃简介”、“福娃揭密”、“福娃动态”、“福娃运动造型”、“历届奥运
12、会吉祥物”、“福娃感言”、“奥运官网”,各个导航名称之间使用“|”分隔开,其属性面板设置和效果如图所示。(5)使用同样的方法,在表格第三行中插入背景图像daohangbg2.gif,此时完成网站头部信息编辑。(6)将光标定位到福娃动态区的第一行单元格中,选择“插入”“图像”命令,将图像fwdt.gif插入到相应的单元格中。(7)将光标定位到网站banner区单元格中,选择“插入”“图像”命令,将图像banner.gif插入到相应的单元格中。(8)将光标定位到网站公告栏区的第一行单元格中,选择“插入”“图像”命令,将图像gonggaolan.gif插入到相应的单元格中。将光标定位到网站公告栏区的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 04 北京奥运吉祥物 福娃 网站 静态 设计
限制150内