第9章完整案例：信息学院网站制作

※进一步掌握CSS的各种样式设置方法；※掌握DIV+CSS网页布局的方法；※掌握模板的创建与使用；※掌握JavaScript脚本的使用方法。第9章完整案例：信息学院网站制作学习目标：9.1信息学院网站描述图9-1网站主页第9章完整案例：信息学院网站制作9.2网站规划1．网站需求分析山东信息职业技术学院网站功能学院概况新闻中心机构设置教学科研团学在线招生就业公共服务图9-2山东信息职业技术学院网站的功能示意图第9章完整案例：信息学院网站制作9.2网站规划2．网站的风格定位网站定位是调查研究基础上进行策划的第一步。在调查分析的基础上确定自己网站的服务对象和内容是网站建设和发展的前提。对于网站来说，任何想吸引全部网民的做法是错误的，在信息爆炸而个体差异极大的社会，网站能做的只是吸引特定的人群。网站的成功与否与市场调查及网站定位是密不可分的。学院网站是学校门户网站，他的主要用户为学生、教师及学生家长等，同时也是教育类的网站，所以采用蓝色为主色调，因为蓝色代表智慧，代表高科技，代表清爽，有一种宁静致远的感觉。蓝色是海洋、天空、大海的颜色，让人充满遐想和向往。另外为了突出网站的热情、充满活力，在网站上又加以运用了红色，让用户第一眼就被网站亮丽的色彩所吸引。第9章完整案例：信息学院网站制作9.2网站规划3.规划草图网站顶部图片网站导航滚动文字通知公告院长信箱教学系部学院要闻航空招生宣传图片系部动态图片幻灯招生信息网图片学院荣誉视频宣传图片常用链接版权信息图9-3山东信息职业技术学院网站草图第9章完整案例：信息学院网站制作9.2网站规划4.项目计划需求分析风格定位内容组织效果图设计网站主页设计模板页设计子页设计网站发布图9-4山东信息职业技术学院网站的制作流程第9章完整案例：信息学院网站制作9.3效果图设计9.3.1效果图设计原则效果图制作的原则：先背景，后前景，先上后下，先左后右。制作软件：PhotoshopCS6中文版。本效果图设计中用到的主要知识：选择工具的应用文字工具的应用钢笔工具的应用渐变工具的应用矢量工具的应用图层样式的应用蒙版的应用第9章完整案例：信息学院网站制作9.3效果图设计图9-5添加参考线第9章完整案例：信息学院网站制作9.3效果图设计图9-8

Banner条图9-9导航条第9章完整案例：信息学院网站制作9.3效果图设计图9-11绘制正文背景第9章完整案例：信息学院网站制作9.3效果图设计图9-14描边图层样式面板图9-15

招生信息网完成图第9章完整案例：信息学院网站制作9.3效果图设计图9-16学院荣誉完成效果图9-18学院视频图片第9章完整案例：信息学院网站制作9.3效果图设计图9-19学院要闻

图9-20系部动态图9-23

“航空招生”效果第9章完整案例：信息学院网站制作9.3效果图设计第9章完整案例：信息学院网站制作9.3效果图设计图9-31“书记信箱”完成后效果图9-32常用链接栏图9-33版权信息第9章完整案例：信息学院网站制作9.3效果图设计9.3.3.效果图切片导出网页第9章完整案例：信息学院网站制作9.4网站主页设计9.4.1主页布局设计top第9章完整案例：信息学院网站制作9.4.2主页设计步骤9.4网站主页设计（1）在磁盘E盘根目录下创建网站文件夹schoolSite，将素材中提供的文件夹images、media、pictures、swf拷贝到该文件夹下。（2）启动DreamWeaverCS6，通过“站点”｜“新建站点”命令，创建网站站点，站点名称为：schoolSite，本地站点文件夹为：E:\schoolSite\。（3）在站点中新建一个网页文件，命名为：index.html。（4）在站点中创建“style”子文件夹，用Dreamweaver创建CSS样式表文件，并保存CSS文件到该文件夹中，命名为“style.css”，然后书写通用样式.第9章完整案例：信息学院网站制作9.4网站主页设计（5）在“CSS样式表”面板中，点击附加样式表按钮，再点击“浏览”按钮，选择已创建的样式表文件“style.css”，点击“确定”按钮，将style.css样式表附加到index.html页面中。（6）搭建index.html页面结构。（7）在style.css文件中添加CSS样式。第9章完整案例：信息学院网站制作9.5网站模板页设计模板页中的内容与主页中上部和底部的内容相同，所以模板页的制作可以将主页保存为模板页，再进行修改制作成模板页即可。具体步骤如下：（1）将主页另存为模板页打开首页文件index.html，执行“文件”｜“另存为模板”命令，在另存为文本框后面，输入文件名“moban”，点击“保存”，如图9-44所示。此时模板文件moban.dwt会自动保存到网站文件夹templates文件夹中。第9章完整案例：信息学院网站制作9.5网站模板页设计（2）添加模板页中的块，并继续在style.css中添加样式第9章完整案例：信息学院网站制作（3）设计模板页的左侧部分9.5网站模板页设计第9章完整案例：信息学院网站制作（4）设计模板页的右侧部分9.5网站模板页设计第9章完整案例：信息学院网站制作9.5网站模板页设计（5）给模板页添加可编辑区域选中模板页右侧的块mRight，执行“插入”｜“模板对象”｜“可编辑区域”，插入可编辑区域，如图9-48所示。至此，模板页制作完成。第9章完整案例：信息学院网站制作9.6网站其他页面设计图9-49学院简介页面效果图第9章完整案例：信息学院网站制作9.6网站其他页面设计图9-52学院荣誉列表页面第9章完整案例：信息学院网站制作9.6网站其他页面设计图9-54学院荣誉详细情况页面第9章完整案例：信息学院网站制作9.6网站其他页面设计图9-56高技能人才培训基地页面第9章完整案例：信息学院网站制作9.6网站其他页面设计图9-58办公电话页面第9章完整案例：信息学院网站制作9.6网站其他页面设计图9-59视频宣传页面第9章完整案例：信息学院网站制作9.7添加首页中的JavaScript脚本图9-61添加脚本后的主页第9章完整案例：信息学院网站制作本章完整地制作了一个学校网站。通