动态网站设计第01讲课件

总学时：96（课内84）6授课教师：刘坤电子信箱：联系电话：答疑时间：周2课程简介：1、课程面向的职业岗位网页设计与制作员网站管理员网站编辑员2、课程介绍本课程侧重于学习静、动态网页的设计与制作、HTML语言、CSS样式、ASP网页设计和ACCESS数据库等知识。本课程的先修课程为《平面设计》、《C语言程序设计》、《计算机应用基础》。课程简介：3、参考书目《Dreamweaver8完美网页设计—白金案例篇》

中国电力出版社何海霞编著《Dreamweaver网页设计与制作100例》人民邮电出版社

4U2V工作室编著《ASP动态网页设计与应用》电子工业出版社沈大林编著4、参考网站

（网站建设专业公司）

（网页设计师联盟）

（各类网站欣赏）本次课程教学内容：项目一规划网站子项目1-1优秀网站欣赏子项目1-2规划网站（难点）项目二搭建与调试环境子项目2-1：创建本地站点（重点）子项目2-2：管理本地静、动态站点本次课程教学目标：能力目标：会分析优秀站点页面的布局结构、颜色搭配、视觉效果

能规划网站，会书写网站建设方案

会创建本地静态站点

会创建本地动态站点会复制、编辑、删除本地静、动态站点知识目标：知道网页的基本构成元素

知道网站建设基本流程素质目标：能学习他人之长，激发学习兴趣子项目1-1优秀网站欣赏任务--欣赏优秀站点页面，清楚网页的基本构成元素不同类的（公司类、旅游类、体育类、新闻类等）网站站点，其页面布局结构、颜色搭配以及字体的运用会各不相同，通过欣赏，能学习他人之长，进而清楚网页的基本构成元素。【任务分析】

该首页给人以清新、爽朗的感受，首页的整体布局为“上、中、下”三个版块。颜色上主要采用红色为主，红给人温馨、浪漫的感受，并与网站的logo标志颜色达到和谐统一的效果。首页题头的动化效果为Haier公司的产品广告,既达到了产品宣传的目的，又达到了美化的效果。导航栏的颜色鲜明，文字仍采用红色，文字与背景色对比强烈，引人注目。二级导航采用横式排列，占据了中间主体部分。海尔网站首页特色子项目1-1优秀网站欣赏二、旅游类网站欣赏欣赏“虎丘旅游网”的网站：启动IE浏览器，输入网址：http://

网站带有引导页：子项目1-1优秀网站欣赏将虎丘的名景点以动画的形式显示在页面的右方苏轼的题词以动画的形式缓慢展示出来各种语言（简体中文、繁体中文、日本语、英语等）的引导显示在页面中间当欣赏完引导页的优美意境后，进入简体中文主页面。虎丘引导页特色子项目1-1优秀网站欣赏虎丘主页特色各类边框体现了古典的特色

题头的图片和文字的动画效果展示了虎丘景点的级别及多角度的美景展示主页的整体布局为“上、中、下”三个版块，主体内容又分为“左、中、右”三个版块，布局清晰子项目1-1优秀网站欣赏三、体育类网站欣赏欣赏“中国大众体育网”的网站：启动IE浏览器，输入网址：子项目1-1优秀网站欣赏

背景、字体为红色，给人以阳光、活力向上的感觉。在字体的运用上有大有小，有长有短，显得有对比，庄重。图片的动态效果突出主题，产生运动的视觉感受。该网站的首页整体视觉感受清晰、和谐。整体颜色采用红色，既统一又有变化，主体突出。中国大众体育网主页特色子项目1-1优秀网站欣赏

各类新闻用标题栏加以划分，简洁明了、排列整齐，使得较大的信息量显示有条有理。颜色的搭配上主要采用蓝色，左右两侧版块的字体大小相同，字体颜色为蓝色，给人以清新、和谐的视觉美感。该网页给人的视觉感受是和谐美观，在模块的划分上比较明显，采用“左、中、右”三个版块，内容充实。新浪网站新闻页特色子项目1-1优秀网站欣赏五、班级网站欣赏子项目1-1优秀网站欣赏1．浏览以下站点，对所浏览网站首页的特色和不足进行赏析说明，主要包括页面布局结构、颜色搭配、导航栏、文字效果、图片效果、动画效果、音频效果等。（1）狮子林网站：（2）清华大学网站：（3）太平洋电脑网：http://2．通过上述站点中页面的欣赏，请说出网页的基本构成元素有哪些？

子项目1-1课堂实践【操作步骤】1.需求分析（见P11）2.书写网站建设方案（见P12）3.确定网站的目录结构4.规划和收集资料5.选择网页制作工具子项目1-2规划网站设计与制作网站的八个步骤：步骤1：规划站点

策划站点主题－确定站点风格－规划站点目录－构思站点结构步骤2：定义站点步骤3：制作网站首页步骤4：制作栏目页和内容页步骤5：设置链接步骤6：检查、测试站点步骤7：发布、推广宣传站点步骤8：维护更新子项目1-2规划网站

网站建设遵循的规范（1）尺寸规范

页面标准在800*600像素分辨率下，网页宽度保持在760-780像素以内，就不会出现水平滚动条，高度则视版面和内容决定。页面标准在1024*768像素分辨率下，网页宽度保持在980-1003像素以内，一般按1003像素制作，就不会出现水平滚动条，高度则视版面和内容决定。页面高度原则上不超过3屏，宽度不超过1屏。每个标准页面为A4幅面大小，即8.5*11英寸。子项目1-2规划网站（3）主页文件命名规范

主页文件的命名，一般用index.htm（index.htmlindex.aspindex.jspindex.php等），或default.htm(html、asp、jsp、php)，放在站点的根目录下。用index作为主文件名，index表示“索引”（指首页放满了去网站其他地方的链接），一般网站发布时服务器默认识别index，所以采用index作为主页文件主名。子项目1-2规划网站工作任务：1.创建本地静态站点，站点名为class2.创建本地动态站点，站点名为MyClass子项目2-1创建本地站点任务2.1安装IIS（InternetInformationServer）【任务分析】要完成动态站点的创建需要使用Web服务器。目前网站的服务器一般安装在WindowsNT、Windows2003Server或WindowsXP操作系统中。这三种系统中必须安装有IIS才能运行动态网站。下面以WindowsXP操作系统为例讲述IIS的安装与使用过程。子项目2-1：创建本地站点任务2.2设置Web服务器【任务分析】安装完IIS后，就可以利用IIS在本机上创建Web站点了，但必须进行设置。如将IIS默认启用文档设为index.html，就必须进行Internet信息服务的设置。默认情况下，IIS的站点根目录为系统盘下的“\Interpub\”目录。为学习创建网站的全过程，没有使用默认目录，而将C:\ClassWeb文件夹作为Web网站的发布目录。本任务设置站点发布目录为C:\ClassWeb,设置默认启用文档为index.html。子项目2-1：创建本地站点任务2.3创建名为MyClass的动态站点。【任务分析】与创建静态站点相类似，有两种方法可以完成该任务。方法一：使用【站点定义】对话框的基本选项卡创建本地动态站点。方法二：使用【站点定义】对话框的高级选项卡创建本地动态站点。子项目2-1：创建本地站点任务2.4测试动态站点【任务分析】

动态站点MyClass创建完成后，需测试创建是否成功。在C:\ClassWeb文件夹下新建文本文档，在文本文档内输入如下代码内容：今天的日期是：<%=date()%>在记事本中执行【文件】|【另存为】命令，在弹出的“另存为”对话框中，在“保存类型”对应的下拉列表框中选取“所有文件（*.*）”，在“文件名”对应的下拉列表框中输入文件名为test.asp，单击【保存】按钮。打开浏览器，在地址栏中输入，检查网页内容是否将当前日期显示出来，若能正常显示表明动态站点创建成功。子项目2-1：创建本地站点子项目2-2：管理本地站点任务管理本地静、动态站点【任务分析】站点的管理，主要包括站点的编辑、复制、删除等操作，