IDIV+CSS网站制作.docVIP

DIV+CSS网站制作 从2004年开始做网站，算起来有几年了，之前一直用老的table方式在dreamwear? ?中布局，自认效率不错，能混个饭吃。后来大家都说CSS好呀，心里便有了比较，初步了解后发现用css方式做，建站速度会快很多，而且样式也比较容易控制，维护成本降低。css看似简单，但我学css也经历了两个比较长的过程，从开始的“table和css混用” 阶段到用“css布局全页和定制页面细节” 阶段。第一个阶段我徘徊了很久，原因主要是网页设计项目周期短，且没掌握css，不敢尝试用css方式做站。进入第二阶段，还是最近一个月的事情。公司最近不忙，所以有时间到书店卖了本《css实战手册》(俞黎敏译)，仔细的看了一遍，理清了css做站的思路。终于在2007年一个漆黑的夜里，用css+div方式制作了一个完整网站，完成后顿有种蜕茧成蝶的愉悦。下面从实践角度，简要说明下此站制作过程。旨在表达：每个人都可以用css做出自己想要的站。1、网站规划和版式确定待建网站是一个工作室性质的网站，建站目的是通过网站能接到更过网站建设的项目。所以这次设计是美观和seo并重。布局上采用了左右2列样，并把重要的内容放置在页面左侧。构建草图（如图1所示），网站版块分为网站头部区、网站主要内容区，网站侧栏区，网站底部区4个大区域。确定了每个区域要表达内容。? ?? ?? ?? ?? ?? ?? ???[IMG]/upload/区域设计草图.jpg[/IMG]? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? 图??1 区域设计草图颜色方面选择红色和黑色为主色调，红色给人热烈、视觉冲击，黑色给人沉稳科技的感觉，所以定义了如下颜色表。? ?? ?? ?? ?? ?? ?? ???[IMG]/upload/35blue颜色表.jpg[/IMG]? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?图??2? ?颜色表将布局方式和网站主色调结合，可以模拟设计出首页效果图（图3）。网页设计中，设计效果图很重要，这样可以保证在布局时思路清晰，节省时间。（如果没彩图，至少有个草图以供布局）? ?? ?? ?? ?? ?? ???[IMG]/upload/全区划分图.png[/IMG]? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?图 3??首页效果图并将首页效果图中logo 及背景分割成小图保存? ?? ?? ?? ?? ?? ? [IMG]/upload/35blue_logo_big.png[/IMG]? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???图4??Logo图 ? ?? ?? ?? ?? ?? ?[IMG]/upload/idea-show.jpg[/IMG]? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???图5? ? 主题宣传背景图? ?? ?? ?? ?? ?? ???[IMG]/upload/bg.jpg[/IMG]? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???图6? ?网站主要背景图? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?2、布局网站框架根据首页效果图（图3）设定css布局 id如下：1、顶部区， id=banner；2、主要内容区 id=main；3、侧栏区 id=sidebar；4、底部区 id=footer；按照id顺序，在body与/body之间插入如下代码： div id=wrapper? ? //（整个外部大框架）!—顶部区开始 --div id=bannerbanner内容/div!—侧栏区开始 --div id=sidebarsidebar内容/div!—主要内容区 开始--div id=mainmain内容/div!—网站底部区 开始--div id=footerfooter内容/div/div接着通过在style type=text/css/style中定义css类来控制每个区域具体位置，如下：? ?//外部大框架定义#wrapp{? ?text-align:left;}//头部定义#banner {background: url(../images/bg/banner_bg.jpg) repeat-x left top;??//头部大区域背景height:105px;position: relative;border: 1px solid black;margin-bottom:0.7em;}//主要内容区#main{