《css div网页布局技术教程》项目九设计旅游酒店网站.pptxVIP

CSS+DIV网页布局技术教程 / 项目九设计旅游酒店网站自助旅游也促成了旅游洒店网站的产生，这类网站的诞生解决了人们自助旅游时面临的所有问题，也成为当前比较流行的网站。在本项目中，通过这个工作任务，向读者生动有趣的地展示出旅游洒店的版块设计，以及各种风格样式。 任务目录制作旅游酒店网页准备知识制作旅游酒店网页制作旅游酒店网页旅游度假页面效果分析预订洒店页面效果分析首页策划设计任务实施任务：制作旅游酒店网页制作旅游酒店网页李响是某网络设计公司后台开发保人员，公司接到新任务，需要李响协同其他工作人员，共同开发制作旅游酒店网站，要求网站主题进行风格化的设计。理解牢记！任务分析：任务：制作旅游酒店网页由于旅游网站定位于旅行、旅游休闲。这类网站主要为浏览者提供酒店预订、酒店相关服务查询、机票预订等，实现的是一条龙的服务。除了版面规划合理之外，需还要使用CSS进行设定。因此，李响决定使用CSS来完成此任务。任务实施 制作旅游酒店网页1.画草图和设计图（1）启动Photoshop，新建文档，设置文档的大小为1002px*970px，分辨率为96px/inch，然后保存为“设计图.psd”，借助辅助线设计出网站的基本轮廓，如下图所示。（2）在Photoshop中新建“线框图”图层，使用绘图工具绘制页面的基本线框和背景样式，如右图所示。（3）在线框的基础上进一步细化栏目形态，明确栏目样式和内容，特别是重要内容的显示形式，最后效果如右图所示。实例上这一步才是最重要和最难实现的。拓展提高：这里虽然一笔带过了，但希望读者能自己一个步骤一个步骤切实地设计出来，如果真的落实了，相信读者会受益匪浅的。2.切图（1）首先纵观全图，看看哪些要切下来做图片或背景的，做背景要怎么切等，做到心中有数，然后就可以切图了。（2）切出网站的Logo，这个Logo看上去有点分散，元素设计得不够集中，而且旁边就是电话号码和广告词，所以我们可以将它当作一张图切下来，如下图所示。（3）下切出网站的导航背景，这里有圆角和渐变效果，还要考虑到要将一大部分图片都整合到一张背景透明的大图上，所以这时将整个导航背景作为一张图切下来。（4）因为导航需要变换背景图，所以当前状态下的背景图也要切下来，如下图所示。（5）“开始计划您的行程”标题背景是一整张大图片，所以要切下来，如下图所示。（6）为了方便图片的管理和加载，这里把所有不用设为重复的图片都整合到一张背景透明的大图上，效果如下图所示。（7）剩下的大部分边框都是简单的单色框，效果可以通过CSS实现，没有必要进行切割。（8）执行“文件|存储为Web和设备所用格式”命令，打开“存储为Web和设备所有格式”对话框，保持默认设置，单击“存储”按钮，打开“将优化结果存储为”对话框，设置“切片”为“所有用户切片”，格式为“仅限图像”。（9）可以在images文件夹中看到所需要的背景图像，如下图所示。根据需要将其重命名即可。3.主体重构根据设计版块划分图的区域，启动Dreaweaver，执行“文件|新建”命令，打开“新建文档”对话框，新建一个空白的HMTL文档页面，并保存文件为index.html，然后编写HTML基本结构。在编写结构时，应该注意结构的嵌套关系，以及每级结构的类名和ID编号，详细代码如下。!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/1999/REC-html401loose.dtdHTML xmlns=/1999/xhtmlHEADTITLE芒果网/TITLEMETA content=text/html; charset=utf-8 http-equiv=Content-Type/HEADBODY!--S top--DIV class=top/DIV!--E top--!--S header--DIV class=w980 mangohead/DIV!--E header--!--网站导航 开始--DIV class=w980 mainNav/DIV!--网站导航 结束--!--S mango focus--DIV class=w980 mangofocus!--开始计划您的行程 开始--DIV class=searchBox DIV class=boxtit H2开始计划您的行程/H2 /DIV DL id=selectSearch /DL/DIV!--开始计划您的行程 结束--!--焦点图片切换 开始--DIV id=picfocus class=picfocus/DIV!--焦点图片切换 结束--!--E mango focus--!--S main body--DIV class=w980 !--contwrap 开始--