网站设计与开发课件.ppt

1、北京教育学院 秦昆网站建站流程设定目标网站结构版面草图搜集资料版面设计登录宣传外部测试网页上传内部测试网页设计内容更新维护网站类型InternetInternet提出需求响应需求静态网页制作流程PhotoImpactPhotoshopImageReadyFireworksDreamweaverExtensionFlashJava ScriptPhotoImpactWeb Site版面设计版面配置网页设计多媒体内容动态网站动态网页制作流程ASPPHPASP.NETColdFusionWindows+IISLinux+ApacheJSPIISApache.NET FrameworkColdFusi

2、onServerJSP ServerDataBaseODBC或DNSless网站服务器动态网页语法应用程序服务器数据库AccessSQL ServerMySQL网站设计原则网站的基本架构认识Dreamweaver开发案例“人工智能-机器人技术”案例概述案例开发要点案例分析脚本设计脚本设计屏幕界面设计案例分析框架结构设计回章目录开发案例“人工智能-机器人技术”网站结构设计回节目录机器人技术机器人技术 首页首页人工智能人工智能artificial机器人介绍机器人介绍robot机器人动态机器人动态active在线教程在线教程Online经验交流经验交流communicate人工智能相关理论知识人工智

3、能相关理论知识机器人相关知识、我校的机器人机器人相关知识、我校的机器人机器人发展动态介绍机器人发展动态介绍机器人软、硬件，编程及组装机器人软、硬件，编程及组装在线交流讨论、作业提交在线交流讨论、作业提交脚本设计 脚本设计包括：首页脚本设计、脚本设计包括：首页脚本设计、“人工智能人工智能”页面脚页面脚本设计、本设计、“机器人介绍机器人介绍”页脚本设计、页脚本设计、“机器人动态机器人动态”页脚本设计、页脚本设计、“在线教程在线教程”页脚本设计、在线交流页脚页脚本设计、在线交流页脚本设计和文章内容页脚本设计。本设计和文章内容页脚本设计。机器人技术脚本设计回节目录屏幕界面设计回节目录案例开发要点 创建

4、和管理本地站点。创建和管理本地站点。文档的基本操作。文档的基本操作。文本内容开发。文本内容开发。图像的设计与处理。图像的设计与处理。使用表格进行网页排版。使用表格进行网页排版。创建超链接。创建超链接。回节目录 创建和管理本地站点l 任务一：认识任务一：认识Macromedia Dreamweaver CS3Macromedia Dreamweaver CS31.启动Macromedia Dreamweaver CS32.进入Dreamweaver CS3的标准工作界面l 任务二：新建站点任务二：新建站点1.确定网络自主学习型课件主题2.规划网络自主学习型课件的结构3.设计网站界面4.定义本地站

5、点回节目录案例开发要点 创建和管理本地站点l 任务三：在站点中添加网页文件及文件夹任务三：在站点中添加网页文件及文件夹1.方法一：在Dreamweaver编辑窗口中的“创建新项目”中单击，新建html文档，选择“文件”|“保存”命令，在弹出的“另存为”对话框中输入文件名2.方法二：在右侧的“文件”面板中，在站点名称上单击鼠标右键，在弹出的下拉菜单中，选择“新建文件”，修改文件名3.本案例站点的文件夹结构回节目录案例开发要点 文档的基本操作l任务一：打开文档任务一：打开文档1.方法一：选择“文件”|“打开”命令，在弹出的“打开”对话框中，选择文档，单击“打开”按钮。2.方法二：在“文件”面板站点

6、文件列表中直接双击文件。l任务二：设置页面属性任务二：设置页面属性1.选择“修改”|“页面属性”命令，在弹出的“页面属性”对话框中，选择“外观”选项卡，设置字体大小为12px、背景图像、页边距。2.在“页面属性”对话框中，选择“标题/编码”选项卡，设置网页标题。回节目录案例开发要点 文本内容开发l 任务一：添加与编辑文本内容任务一：添加与编辑文本内容1.打开index.html，在文档窗口光标闪烁处直接输入文本即可。2.输入的文本默认为宋体、12像素。选中文本，在“属性面板”中修改字体、大小、颜色、对齐方式等选项。回节目录案例开发要点 文本内容开发l 任务二：使用任务二：使用CSSCSS样式设

7、置文本格式样式设置文本格式1.打开CSS样式面板，单击“新建CSS样式”按钮，在弹出的“新建CSS样式”对话框中，选择“类”，名称为.content，定义在“新建样式表文件”，单击“确定”按钮。2.在弹出的“保存样式表文件为”对话框中，选择保存位置为images文件夹中，名称为style.css。单击“保存”按钮。3.设置字体大小、行高、修饰、颜色等内容，单击“确定”按钮。4.应用CSS样式5.对文本建立其他样式时可以直接定义在style.css中。回节目录案例开发要点 文本内容开发l 任务三：对超链接文字设置样式任务三：对超链接文字设置样式1.单击“新建CSS样式”按钮，在弹出的“新建CSS

8、样式”对话框中，选择“高级”，单击“选择器”后面的下拉菜单，选择a:hover，定义在style.css，单击“确定”按钮。2.在弹出的a:hover的CSS定义对话框中，设置颜色和下划线，单击“确定”按钮。3.a:hover的CSS样式定义好后会自动应用到网页中的带有超链接的文字上。回节目录案例开发要点 图像的设计与处理l 任务一：设计网站中标题性图像任务一：设计网站中标题性图像1.启动Adobe Photoshop CS软件。2.选择“文件”菜单，选择“打开”命令，在弹出的对话框中找到所需要图像。3.选择“图像”“图像大小”命令，将图像宽度修改为780px，高度按比例即可。4.单击Phot

9、oshop CS工具箱中的“横排文字工具”，在菜单栏下面的“选项”中选择字体、设置字号、颜色等，然后输入“人工智能”四个字。5.在“图层面板”中的文字层单击鼠标右键，选择“混合选项”。6.在弹出的“图层样式”对话框中选择“投影”和“渐变叠加”。7.单击“渐变叠加”右侧，在出现的选项中单击颜色区域，弹出“渐变编辑器”，色标设置。回节目录案例开发要点 图像的设计与处理l 任务二：制作网站导航栏图片任务二：制作网站导航栏图片1启动Adobe Photoshop CS软件。2单击“文件”菜单，选择“打开”命令，在弹出的对话框中找到蓝色背景图像。3单击“图像”菜单，选择“调整”|“色相/饱和度”命令，在

10、弹出的对话框中修改相应的值，使颜色变成橙色。4将橙色的背景图像另存为jpg格式文件。5分别打开蓝色和橙色的背景，输入各个栏目的名称。再分别用“文件”菜单的“存储为”命令，格式选择CompuServe gif，保存即可。回节目录案例开发要点 使用表格进行网页排版l 任务一：插入及编辑表格任务一：插入及编辑表格回节目录案例开发要点 使用表格进行网页排版l 任务二：向表格中插入元素任务二：向表格中插入元素回节目录案例开发要点 创建超链接l 任务一：对文本创建超链接任务一：对文本创建超链接1.创建外部链接：选中文本，在“属性面板”的“链接”栏中，直接输入链接地址，如http:/，如果在新的窗口打开，则在“目标”中选择_blank。2.创建内部链接：选中文本，在“属性面板”的“链接”栏中，直接输入链接地址。回节目录案例开发要点 创建超链接l 任务二：制作导航栏超链接任务二：制作导航栏超链接 本案例中导航栏的超链接是利用“鼠标经过图像”来实现图像翻转效果的。回节目录案例开发要点