第03章 设计上下固定区域.docx

第03章 设计上下固定区域.docx

《第03章 设计上下固定区域.docx》由会员分享，可在线阅读，更多相关《第03章 设计上下固定区域.docx（14页珍藏版）》请在冰豆网上搜索。

第03章设计上下固定区域

第3章设计上下固定区域

网页布局完毕，接下来的工作就是设计固定区域，本章将介绍网页上部固定区域和下部固定区域的设计。

本章最终设计效果如图3.1所示。

通过设计固定区域，读者将会掌握很多常用的网页设计技能。

图3.1本章设计运行效果

4.1打开网站

由于网站是由多个文件和文件夹组成，因此，不能试图通过双击网站文件夹内某个文件来打开网站。

要打开已有网站，需要如下步骤：

（1）从桌面上单击“开始”菜单，启动VS2008。

（2）单击VS2008屏幕上方的打开网站按钮“”。

（3）在弹出的图3.2所示的界面内，找到并单击选中网站文件夹NewLong。

注意：

一定不要选择App_Data文件夹，因为它是网站的一个子文件夹。

图3.2选择打开旧有网站

（4）单击“打开”按钮。

稍候，VS2008即会显示网站最后关闭前的样式。

（5）单击屏幕左上侧的Main.master标签，切换到母版页设计状态。

如果屏幕左上侧没有Main.master标签，可从解决方案资源管理器中双击此文件名打开此文件。

如果屏幕上没有“解决方案资源管理器”窗口，可从VS2008菜单“视图”中调出，其它窗口同样如此。

经过上述步骤，准备设计完毕。

4.2添加文字/图片/音乐

本节工作中最难的是添加音乐。

4.2.1编辑文字

即向Word一样在网页上输入文字，在本书案例中，操作步骤如下：

（1）单击divBottom区域。

输入文字（见图3.3）。

图3.3文字格式设置结果

（2）光标在“厂址”之前，按住Shift键不放，再按回车键，产生一空行（直接按回车键会产生一个空段，空距会大很多）。

（3）鼠标圈定要设置的文字，然后通过VS2008屏幕上方的格式栏（见图3.4），设置输入文字的颜色、字号、加粗等格式。

图3.4格式栏内常用的功能

注意：

不要设置字体，这是通行规则。

如果互联网访问用户电脑上没有此种字体，就会以宋体替代。

要想在网页上以某种特殊字体显示文字，需要先将这种特殊文字制作成图片，再放到网页内。

新浪、163等大型网站的网页内文字字号均为“small”。

或者说12pt，12pt=16px（3pt相当于4px）。

通过文字编排可知：

本节所设计的文字、图片、音乐在添加到网页后，都会是永远不变的，除非设计者再手工修改。

因此，它还属于静态网页设计技术。

4.2.2添加图片

一般而言，需要先使用如PhotoShop、FireWorks等绘图软件将图片制作好。

然后再将其添加到网站内。

本书为已为读者准备好了相关图片。

向网站内添加图片步骤如下：

（1）在配套光盘中找到“开发所需文件”“App_Media”文件夹。

（2）右击此文件夹，在弹出的菜单中单击“复制”。

（3）切换到VS2008，在解决方案资源管理器窗口

（4）右击网站名“NewLong”，在弹出的菜单中单击“粘贴”。

结果如图3.5所示。

图3.5添加文件夹后的网站构成

由图可知，本文件夹中共有6个图片，分别是：

网页背景图片文件“back.gif”、网页顶部图片文件“Top.jpg”、公司位置小地图图片文件“map.jpg”、网页背景音乐文件“船歌.mp3”、以及一个模拟钟表的Flash文件“Clock.swf”。

“Clock.fla”是一个flash源文件，是用来供有兴趣的读者借以参考和修改的，没有必要放入网站，因此，可以右击此文件，在弹出的菜单中选择“删除”。

向网页内添加图片步骤如下：

（1）将图3.5中的“Top.jpg”拖入divTop内。

（2）在弹出的插入对话框中单击“确定”按钮。

结果如图3.6所示。

图3.6新插入的图片

（3）单击选中此图片。

（4）按住图片下边中间方框，将图高度拖为100px（拖动时图像大小会显示在屏幕上）。

（5）按住图片右边中间方框，将图宽度拖为700px。

4.2.3设置网页背景图

网页现在的背景为绿色，实际上，网页背景一般不使用颜色，而是使用小图片象铺地板一样铺成美观的背景。

具体设置方法如下：

（1）在属性窗口的上方，选择Document。

（2）单击Background属性，点其右侧的按钮，找到网页背景图片“back.gif”。

（3）单击“确定”按钮。

操作结果如图3.7所示。

此图仅显示了背景的一角。

图3.7网页的网状背景

由此可见，如果同时设置了背景色和背景图片，背景色将不起作用。

4.2.4插入Flash

VS2008不支持Flash拖放入网页内的功能，必须通过编写网页代码实现。

具体操作步骤为：

（1）单击屏幕下方的“源”标签，将网页的源代码打开。

（2）找到图3.8所示的代码片段（此段是divTop区域对应的代码，它以“”开始，以“