第04章设计左侧固定区域.docVIP

设计左侧固定区域 本章将介绍如何在网页左侧固定区域，创建纵向菜单、设置友情链接、显示网页访问量。相对上一章而言，这三种功能的设计稍显复杂。 本章网页设计最终结果如图4.1所示。 本章所设计网页运行效果 准备设计 即打开已有网站，步骤如下： 从桌面上单击“开始”菜单，启动VS2008。 单击VS2008屏幕上方的打开网站按钮“”。 在弹出的界面内，找到并单击选中网站文件夹NewLong。 注意：一定不要选择App_Data文件夹，因为它是网站的一个子文件夹。 单击“打开”按钮。 单击屏幕左上侧的Main.master标签，切换到母版页设计状态。 如果屏幕左上侧没有Main.master标签，可从解决方案资源管理器中双击此文件名打开此文件。 添加超链接 一般网站上都有“注册”和“登录”两个链接（见图4.1），方法是： 切换到设计状态 向divLeft内添加一个div。 设置其id属性为“left1”。 设其定位absolute、width:150。 在层内键入两个词：“注册 登录”。 将其拖成水平居中。拖动层时，有两条十字交叉线随层移动而移动，交叉点总在层的中心。这是为层与其它网页内内容上下左右居中对齐而设置的两条线。将层放在某处后，松开属标，两条交叉线即会消失。 单击屏幕上方文字居中按钮“”，使层内文字居中。 单击屏幕上方文字背景按钮“”，设为层内文字底色为浅绿色。 选定“注册”， 单击超链接图标“”。输入“用户注册页.aspx”。 选定“登录”， 单击超链接图标“”。输入“用户登录页.aspx”（注意，千万不能将“登录”写成“登陆”，否则会被老师打回海里）。 设计菜单 菜单是网页必不可少的功能，菜单可以设计为横向，一般放置在网页顶部图片下方，也可以是纵向，一般位于网页左侧。本书介绍的是在屏幕左侧添加纵向菜单。 本书菜单添加完成后，最终效果如图4.1所示。 添加菜单层 在添加菜单之前，先要添加一个用于放置菜单的层。添加步骤如下： 向divLeft内空白处，添加一个div。 设置其id属性为“left2”。 设其定位absolute、width:120。 设其“块”的line-height属性为25。 将其拖至left1下方（也可以使用键盘上的上下左右键移动它）。 添加菜单控件 从工具箱的“导航”组内，拖出一个menu控件到left2内。结果见图4.2。 新添加的菜单 严重敬告： 如果不小心双击了控件，VS2008会认为设计者要针对此控件的双击事件编程。于是VS2008会做两件事：①在属性窗口中，添加一个事件名；②打开编程界面（见图4.3）。 错误双击菜单控件后的两个结果 这时有两种处理方法： 最专业的做法：删除图4.3中第18～21行程序(关闭编程窗口，系统重新回到设计窗口(单击选定刚才要单击的控件(单击属性窗口上部的事件按钮“”(删除其中的“xxx_Click”文字。 快速做法：在每个界面撤销一次。即在双击后，立即单击撤销按钮，VS2008会自动删除图4.3中第18～21行程序(关闭编程窗口，系统重新回到设计窗口(在此窗口内，再单击一次，VS2008会自动删除属性窗口的“xxx_Click”文字。 如果不按上述做法做，会导致网页因有错而无法启动。屏幕弹出一个错误提示对话框，并在屏幕底部，输出图4.4所示的提示。这时，应选“否”以停止运行，并按上面的处理方法之一，解决问题后，再重新运行网页。 错误提示 由于这是一般初学者最容易遇到的问题之一，因此，请牢记上述敬告。 添加一级菜单 如图4.2所示，单击“编辑菜单项”。弹出图4.5所示的“菜单编辑器”。 在图4.5所示界面，根据表4.1所列项，重复单击添加根按钮“”，在右侧输入表内相应值。添加5个根层菜单。 表4.1 根菜单属性表 顺序 Text NavigateURL 1 首页 Default.aspx 2 公司简介 新闻详情页.aspx?ID=1 3 新闻与焦点 新闻条目页.aspx?类别=新闻 4 产品商城 # 5 售后服务 新闻条目页.aspx?类别=售后服务 （#号表示本网页，意思是点击此条目，不跳转到任何其它网页。） 菜单编辑器 添加二级菜单 在图4.6所示的界面，添加二级菜单，具体步骤为： 重复单击界面左侧的“产品商城”(单击添加子项按钮“”参照表4.2所示，添加5个二级菜单。 添加子菜单项 表4.1 根菜单属性表 顺序 Text NavigateURL 1 菱形网机 产品商城.aspx?类别=菱形网机 2 轧花网机 产品商城.aspx?类别=轧花网机 3 电焊网机 产品商城.aspx?类别=电焊网机 4 窗纱网机 产品商城.aspx?类别=窗纱网机 5 无梭网机 产品商城.aspx?类别=无梭网机 说明： 表4.1中的“产品商城