前面学习了网站首页框架的搭建，下面就要仔细地讲解一下首页框架里面具体内容的规划设计，它包括店标的摆放、页面内容的设计、网站版权的编辑及具体内容设计等操作。通过这些内容的细化定位，可以让首页的框架内容更加丰富、直观。通常情况下，一个网站必须拥有自己的网站标志（简称logo），实例中的logo已经在光盘中为大家准备好。

往网页中放置logo的操作如下：

1）接图3-31完成的框架搭建设计操作，单击工具箱中的“移动工具”按钮，在“图层”面板中单击选择“版权”文件夹，然后再单击“创建新组”按钮，新建一个文件夹“组1”，用鼠标左键双击“组1”文件夹，在“名称”文本框中输入新命名的名称“网站导航”，如图3-32所示。

2）单击“确定”按钮，“组1”文件夹名变为了“网站导航”，在“图层”面板中单击“创建新图层”按钮，在“网站导航”文件夹里自动创建一个新的“图层1”，此时“图层”面板如图3-33所示。

图3-32 设置“组属性”对话框

图3-33 创建图层后的“图层”面板

3）执行菜单栏上的“文件”→“打开”命令，调出“打开”对话框，单击“查找范围”后面的下拉三角按钮，选择光盘中的源文件shop/psd/logo.jpg，如图3-34所示。单击“打开”按钮，在Photoshop软件中打开准备的店标效果，如图3-35所示。(www.daowen.com)

图3-34 设置“打开”对话框

图3-35 打开的店标效果

4）按下全选〈Ctrl+A〉组合键，打开店标图片。再同时按下〈Ctrl+C〉组合键，复制店标图片的效果。再单击前面设计的index.psd文档，切换回它的编辑窗口，用鼠标单击选择“图层1”图层，再执行〈Ctrl+V〉组合键，即可以将图片复制到建立的图层上。同时将图层名更改为“logo”，单击工具箱中的“移动工具”按钮，将店标拖放到左上角，此时的效果如图3-36所示。

图3-36 放置logo后的效果