文档介绍：第24章企业网站制作
这类网站通常具有统一的风格,一般包括Logo部分、导航条、主要内容、版权声明几部分。这类网站主要用于展示公司形象,介绍企业的业务范围、产品特色及联系方法等,功能比较简单,大多采用静态的HTML页面。
设计图分析
本实例是一个手机制造企业的网站,。网页包括“About us”、“Solution”、“Portfolio”、“Contacts”等栏目。首页中左侧内容区域为新闻公告,右侧内容区域为公司介绍。这里采用传统的表格布局的方法,制作出页面公共的部分,然后应用模板,将内容区域设为可编辑区域,制作出各个栏目的页面。
布局分析
在拿到设计图时,要首先分析网页的布局结构以及如何通过表格实现,了解各组成部分的尺寸大小。
网页采用的是常见的分栏式结构,。页面整体大小为780×700像素。其中页面顶部的辅助菜单栏区域宽为780像素,高为48像素;Banner与主菜单栏区域宽为780像素,高为300像素;左侧内容区域宽为325像素,右侧内容区域宽为455像素;页面底部版权信息区域宽为780像素,高为80像素。
配色分析
需要从设计图稿中提取右侧内容区域、底部版权区域以及主要字体的颜色取值。
在Fireworks中切图
利用Fireworks CS4的“切片”功能,可以将页面中所需要的图像从设计图稿中提取出来,并导出为适合在网页上使用的图形格式。
切割图像
将图像切片导出
在导出切片时,要遵循的原则是:颜色较少且变化不大的切片最好导出为gif格式的图像,这样可以图像尺寸很小;颜色较丰富的切片最好导出为jpeg格式的图像,能较好地保留色彩信息。在本实例中,将包含手机图案的切片,如banner等,导出为jpeg格式;其他颜色变化不大的切片,如导航条等导出为gif格式。
在Dreamweaver中制作网页
现在就到了在Dreamweaver CS4中制作网页环节。主要包括定义站点、制作表格、在表格中插入图像和文字、设置超链接、添加CSS样式表、制作应用模板等几个步骤。下面就来逐步介绍。
定义站点
(1)打开Dreamweaver CS4,单击“站点”|“新建站点”命令菜单,在“站点定义”对话框“高级”选项卡中,“站点名称”文本框中输入“27”;“本地根文件夹”文本框中输入“F:\27”;“默认图像文件夹”文本框中输入“F:\27\images\”,单击“确定”按钮,。
(2)在“文件”面板中,文件夹及所包含的文件都已导入到本地站点中,。
(3)在欢迎页面中,“新建”栏目下单击“HTML”,新建一个HTML文档,。
制作表格
(1)单击“文件”|“保存”命令菜单,将新建的文档保存为“”。在文档“”中,单击“查看”|“表格模式”|“扩展表格模式”命令菜单,进入扩展表格模式。
(2)单击“插入”工具栏“布局”类别的“表格”按钮;在弹出的“表格”窗口中,设置表格的宽度为“743”一行一列,单击“确实”按钮,选中表格,切换至代码视图,设置表格高为“353”,单位是像素。