《04控制网站页面的外观》由会员分享，可在线阅读，更多相关《04控制网站页面的外观（6页珍藏版）》请在金锄头文库上搜索。
1、第4章控制网站页面的外观第4章控制网站页面的外观母版页可以在同一网站的多个页面中共享使用同一内容，可以使用母版页建立一个通用的版面布局，这样提供了整个页面级别的风格控件和代码重用，提高了代码的重用率。主题是属性设置的集合，使用这些设置可以定义页面和控件的外观，然后在网站的所有页面或部分页面应用这些外观，以保证网站中各个页面外观的一致性。【教学导航】教学目标（1）学会创建母版页（2）学会创建基于母版页的内容页（3）学会创建嵌套母版页和基于子母版的内容页（4）学会创建主题，且应用主题设置Web页面和控件的外观（5）了解母版页的优点以及与普通页面的区别课时建议6课时【4.1操作准备】1使用Dream
2、weaver CS4创建网页masterpage0401.html使用Dreamweaver CS4创建网页masterpage0401.html，该网页主要包括Logo、导航栏、搜索、用户登录、购物指南、版权信息等内容。其浏览效果如图4-1所示。2创建ASP.NET网站（1）启动Visual Studio 2008之后，在主窗口单击选择【文件】【新建网站】命令，打开【新建网站】对话框。（2）在【新建网站】对话框“模板”列表中选择“ASP.NET网站”，在“语言”列表框中选择“Visual C#”，在网站存放位置列表框输入创建网站的存储位置，即“D:ASP.NET网站开发实用教程WebSite
3、eShop04”。 （3）在【新建网站】对话框中单击【确定】按钮，Visual Studio系统会自动创建并配置新建的网站eShop04，同时会自动创建一个Web页面Default.aspx。3准备样式文件和图像文件在文件夹“eShop04”（其路径为“D:ASP.NET网站开发实用教程WebSiteeShop04”）新建两个子文件夹，将新建的文件夹重命名为“css”和“images”。将已有的样式文件“style0401.css”拷贝到子文件夹“css”中，将所需的图像文件拷贝到子文件夹“images”中。【4.2操作演练】【任务4-1】创建用户登录的母版页【任务描述】（1）使用Dreamw
4、eaver CS4创建作为母版页的网页masterpage0401.html，该网页主要包括Logo、导航栏、搜索、用户登录、购物指南、版权信息等内容。（2）借助网页masterpage0401.html快速创建母版页eShopMasterPage0401.master，并且在母版页中添加两个容器控件ContentPlaceHolder作为占位符。母版页eShopMasterPage0401.master的设计外观效果如图4-2所示。图4-2母版页eShopMasterPage0401.master的设计外观效果【任务实施】1打开【添加新项】对话框2创建母版页eShopMasterPage04
5、01.master3设计母版页4保存母版页【任务4-2】创建用户登录的内容页【任务描述】（1）创建基于母版页eShopMasterPage0401.master的内容页eShop0402.aspx。（2）设计内容页eShop0402.aspx，在容器控件ContentPlaceHolder1和ContentPlaceHolder2区域添加必要的内容。Web页面eShop0402.aspx的浏览效果如图4-7所示。图4-7内容页eShop0402.aspx的浏览效果【任务实施】1创建内容页2准备内容页eShop0402.aspx所需要的图像文件，定义所需要的样式3设计内容页eShop0402.a
6、spx4保存内容页在Visual Studio 2008的主窗口单击【保存】按钮或【全部保存】按钮，保存所创建内容页eShop0402.aspx。5预览内容页直接按F5键或者在主窗口中单击选择【调试】【启动调试】命令浏览网页，Web页面eShop0402.aspx的浏览效果如图4-7所示。【4.3技术提升】【任务4-3】创建嵌套母版页与基于子母版的内容页【任务描述】（1）创建母版页eShopMasterPage0402.master，该母版页与任务4-1中所创建的母版页有所区别，不包含区块与的内容，在此位置添加一个容器控件ContentPlaceHolder。（2）将母版页eShopMaste
7、rPage0401.master中如表4-5所示的区块内容创建为子母版subMasterPage0403.master的可编辑内容，即包含在子母版页的容器控件ContentPlaceHolder中。子母版页的其他内容与内容页eShop0402.aspx相同。表4-5包含在子母版页的容器控件ContentPlaceHolder中的XHTML代码行号XHTML代码1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17. 所有分类 手机 数码产品 笔记本电脑 台式电脑 外设产品 小家电 请输入商品名称 高级搜索 （3）创建基于母版页subMasterPage0403.ma
8、ster的内容页eShop0403.aspx，该页面的浏览效果如图4-12所示。图4-12基于子母版页的内容页eShop0403.aspx的浏览效果【任务实施】1创建母版页eShopMasterPage0402.master2创建子母版页subMasterPage0403.master3设计子母版页subMasterPage0403.master4创建基于子母版页的内容页eShop0403.aspx5设计内容页eShop0403.aspx6预览内容页eShop0403.aspx直接按F5键或者在主窗口中单击选择【调试】【启动调试】命令浏览网页，Web页面eShop0403.aspx的浏览效果如
9、图4-12所示。【任务4-4】应用主题设置用户登录页面和控件的外观【任务描述】（1）利用控件的【属性】窗口设置文本框的高度、宽度、背景颜色和边框等属性。（2）利用【修改样式】对话框设置div区块的外观属性。（3）创建名称为“主题1”的主题，在“主题1”中创建外观文件“SkinFile0401.skin”，该外观文件创建三个TextBox控件外观，其中包括两个命名外观和一个默认外观。另外创建一个BulletedList控件的命名外观，BulletedList控件的每个列表项设置一个小图片。（4）在“主题1”中添加一个样式文件“style0402.css”，该样式文件中设置了超链接的外观和悬停效果
10、，同时还设置的TextBox控件背景颜色和边框效果。参考任务4-1和任务4-2的实施过程设计Web页面eShop0404.aspx，其设计外观效果如图4-19所示。图4-19Web页面eShop0404.aspx的初始浏览效果【任务实施】1添加与设计Web页面eShop0404.aspx2利用控件的【属性】窗口设置控件的外观属性3利用【修改样式】对话框设置页面的外观属性4创建主题和外观文件设置控件的外观属性（1）添加主题文件夹（2）准备图像文件等其他资源在“主题1”文件夹中新建一个子文件夹“images”，然后将一个图像文件icon04.gif拷贝到子文件夹“images”中即可。（3）创建外
11、观文件在【解决方案资源管理器】中右键单击主题子文件夹“主题1”，在弹出的快捷菜单中选择【添加新项】命令，如图4-31所示，打开【添加新项】对话框。在【添加新项】对话框中单击选择模板“外观文件”选项，在“名称”文本框中输入“skinFile0401.skin”，如图4-32所示。然后单击【添加】按钮关闭该对话框，即创建了一个外观文件，返回【解决方案资源管理器】，同时打开外观文件“skinFile0401.skin”的代码编辑窗口，在该代码编辑窗口中输入设置控件外观的源代码，代码如表4-7所示。（4）设置单个Web页面的Theme属性或者StylesheetTheme属性（5）通过设置Web页面中控件的SkinID属性应用主题5在主题中创建样式文件设置页面和控件的外观样式主题中的样式表主要用于设置页面和XHTML控件的外观样式。（1）创建样式表文件（2）应用主题中的CSS样式6预览Web页面eShop0404.aspxWeb页面eShop0404.aspx应用了主题中的外观设置和CSS样式，其预览效果如图4-37所示。5
