第10章 网站首页设计与制作实例
第10章 网站建设与开发实例
案例导入：
利用PHPnow+ECShop开发独立B2C商城，本网站实例主要 涉及知识点: （1）利用PHPnow软件在本地搭建php+mysql运行环境； （2）安装ECShop源码； （3）安装ECShop模板，对模板进行二次开发。
10.1 PHPnow的安装与配置
网络流行的源码大都采用 php+mysql 的形式，对程序语言和 数据库都有一定的要求。要在本地计算机运行相关源码程 序，就需要配置相对应的程序环境。一般ECShop的程序环 境需要安装软件有： mysql数据库、apache 服务器等。这 里我们推荐采用PHPnow （又名：ServKit ）这款免费集成 软件，在本地搭建相关环境，它集成了mysql和apache 服 务器的功能，安装便捷，使用比较方便。 ♥ 注意： PHPnow 是一款绿色免费的 Apache + PHP + MySQL 环境套件包。附带 PnCp.cmd 控制面板，帮助你快速配置 你的PHP运行环境。
• 4、运行ecshop • 附：ecshop2.7.2安装教程
二、ecshop后台介绍
• 进入后台：http://127.0.0.1/admin/ • 全部模块： • 商品管理、促销管理、订单管理、广告管理、报表统计、 • 文章管理、会员管理、权限管理、系统设置、模板管理、 • 数据库管理、短信管理、推荐管理、邮件群发、云服务
10.1.1 PHPnow的下载与安装
1．下载PHPnow PHPnow的下载有两种常用的方法：一是直接访问PHPnow的官网网址： /，二是在搜索引擎中搜索PHPnow（又名： ServKit）。进入软件下载网站后，点击网站下载链接，可自行下载 ，最新版本是PHPnow 1.5.6。 2．安装PHPnow 通过官网下载的PHPnow是一个压缩包的形式，将其存放在任意盘符的根 目录下，进行解压。 ♥注意：PHPnow切忌右击压缩包，选择“解压到当前文件夹”，这样会 将所有的文件解压到硬盘根目录，造成文件混乱。正确的解压方法是 右击压缩包，选择“解压到PHPnow-1.5.6（与压缩包名称相同）”。 解压后执行Setup.cmd，进行安装，安装过程中使用键盘操作，输入提 示的数字或字符即可，点击回车键继续，最后安装好apache服务器和 mysql数据库。 看到PHPnow的默认页面，PHP运行环境已调试好，如图所示。
第十章 网站制作应用实例
（12）单击“指针工具”按钮
，选中该椭圆和步骤（8）
中克隆出的另一个路径，选择“修改”→“组合路径”→“交 集”命令。 （13）单击“椭圆工具”按钮，绘制一个椭圆，在属性面 板中设置其参数，如图10.1.9所示。
图10.1.9 “路径”属性面板（4）
（14）单击“指针工具”按钮
，选择该椭圆和步骤
图10.2.9 “文本”属性面板（1）
（12）选择“编辑”→“克隆”命令，将克隆出的字体设 置为“白色”，并在属性面板中设置其参数，如图10.2.10所示。
图10.2.10 “文本”属性面板（2）
（13）保存文件名为“ex02_2.png” （14）选择“文件”→“新建”命令，弹出“新建文档” 对话框，设置画布颜色为“黑色”，其他设置如图10.2.11所示。
（32）将“图层1”更名为“背景”。 （33）打开“库”面板，将“ex02_1.png”拖入舞台中，并 在属性面板中设置其参数，如图10.2.22所示。
图10.2.22 “位图”属性面板（1）
（34）将“ex01.png”拖入舞台中，并在属性面板中设置 其参数，如图10.2.23所示。
图10.2.23 “位图”属性面板（2）
图10.2.28 “位图”属性面板（6）
（40）将时间轴定位在“点击”帧内，单击鼠标右键，在 弹出的快捷菜单中选择“插入关键帧”命令，并设置 “ex02_3.png”的参数，如图10.2.29所示。
图10.2.29 “位图”属性面板（7）
（41）单击“编辑场景”按钮
，在弹出的下拉菜单中选择
“场景1”命令，返回场景中。将“首页按钮”按钮拖入舞台，并 在属性面板中设置其参数，如图10.2.30所示。
图10.1.3 “路径”属性面板（1）
网页设计与制作案例教程电子教案
网页设计与制作案例教程-电子教案第一章：网页设计与制作基础知识1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的基本原则和最佳实践1.2 网页制作基础介绍HTML、CSS和JavaScript的基本概念和作用讲解如何使用文本编辑器和网页设计软件进行网页制作第二章：网页布局与排版2.1 网页布局概述介绍常见的网页布局类型和特点讲解布局的基本原则和技巧2.2 排版与字体设计介绍排版的基本概念和原则讲解如何选择合适的字体、字号、行距等属性进行排版第三章：网页配色与图标设计3.1 网页配色基础介绍色彩的基本概念和配色原则讲解如何根据网页内容和主题选择合适的配色方案3.2 图标设计介绍图标设计的基本原则和技巧讲解如何制作和选择合适的图标来提升网页视觉效果第四章：网页动画与交互设计4.1 网页动画基础介绍动画的概念和作用讲解如何使用HTML5和CSS3制作简单的网页动画4.2 交互设计介绍交互设计的基本概念和原则讲解如何使用JavaScript和CSS3实现基本的交互效果和功能第五章：网页设计与制作实践案例5.1 案例一：企业官网首页设计分析企业官网首页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作企业官网首页5.2 案例二：电子商务网页设计分析电子商务网页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作电子商务网页5.3 案例三：个人博客网页设计分析个人博客网页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作个人博客网页第六章：响应式网页设计与制作6.1 响应式网页设计概述介绍响应式网页设计的概念和重要性讲解如何使用媒体查询和弹性布局实现响应式设计6.2 移动端网页设计与制作分析移动端网页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作移动端网页第七章：前端框架与库的应用7.1 前端框架概述介绍前端框架的概念和作用讲解如何使用Bootstrap、Foundation等前端框架加速网页开发7.2 前端库的应用介绍jQuery、React、Vue等前端库的概念和作用讲解如何使用这些前端库来增强网页的功能和交互性第八章：网页设计与制作高级技巧8.1 CSS预处理器介绍Sass、Less等CSS预处理器的概念和作用讲解如何使用CSS预处理器来优化和简化CSS代码8.2 网页性能优化介绍网页性能优化的概念和重要性讲解如何通过代码压缩、缓存策略等手段提高网页加载速度第九章：网页设计与制作项目管理与团队协作9.1 项目管理基础介绍项目管理的基本概念和工具讲解如何在网页设计与制作项目中进行有效的时间管理和资源分配9.2 团队协作与沟通介绍团队协作的基本原则和技巧讲解如何在团队中进行有效的沟通和协作，确保项目的顺利进行第十章：网页设计与制作案例分析与评价10.1 案例分析分析具体网页设计案例的成功因素和不足之处讲解如何评价和吸取网页设计案例的经验教训10.2 作品展示与评价介绍如何展示和评价网页设计作品讲解如何通过用户反馈和数据分析来评估网页设计的成效和改进空间重点和难点解析重点环节1：网页设计原则和最佳实践网页设计原则包括清晰性、简洁性、一致性、可读性、可用性等。
10.网页设计(实训)
将广告图置入图层
广告图设计
第二节 网页设计Photoshop部分
第四步进行翻页图标设计，使用“自定义形状工具” 绘制箭头，使用“矩形工具” 绘制正方形， 对图形进行旋转设置。
绘制箭头图形旋转源自效果图第二节 网页设计Photoshop部分
第五步进行内容，利用“横排文字工具”输入文字信息，利用“直线工具”绘制一条短横线。
内容效果图
第二节 网页设计Photoshop部分
第六步进行成员介绍设计，“矩形工具”绘制边框和“查看” 框，“椭圆工具”绘制头像区域， 置入头像，将头像图层挪动到圆形框图层上方，按下“Ctrl+Alt+G”，将头像置入到圆形框中，利 用“横排文字工具”输入文字信息。最后，利用“矩形工具”和“自定形状工具”绘制浏览按钮。
绘制圆形框
删除多余路径
形状宽度配置
第一节 网页设计设计Illustrator部分
logo效果图
海峡钓鱼logo
第二节 网页设计Photoshop部分
打开Photoshop CC软件，新建一个页面，设置宽度为1366px，设置高度为1473px，名称命 名为网页设计。
第一步进行顶部设计，使用“矩形工具”绘制搜索框，利用“横排文字工具”输入文字信息， 置入所需要的logo和图标。
第一节 网页设计展示图
第一节 网页设计Illustrator部分
在Adobe Illustrator CC软件中制作企业logo，通过对“椭圆工具”、 “剪刀工具”的使用， 绘制logo轮廓，接着选择“变量宽度配置文件 < 宽度配置文件1”，对轮廓进行变形处理，利用 “文字工具”，输入文字，最后进行排版。
绘制搜索框
填充顶部信息
第二节 网页设计Photoshop部分
网页制作及应用第10章
名为“嵩之路”，然后对其进行设置.
显示“可以被注册”的信息。这说明所选域名可 以
进行注册。
查询域名是否被注册
22
返回目录
10.2 综合实例二—域名注册
（2）域名注册 通过在线方式填写域名注册申请表。在查询窗口中点击 “立 即购买”，在接受条款窗口中选“我已经阅读、理解并接受” 后 进入填写信息窗口（注意，要先进行会员登录，如果不是会员， 则需先注册成为会员）。填写完毕后点击“下一步”，在购物 车 中出现域名名称及所需支付的金额，点击“生成定单稍后支 付”。 如下页图所示。
6
返回目录
10.1 综合实例一 —制作主页步骤
4．在topFream区域插入1行2列的表格→在左单元 格中插入网站标志图片logo.png →在右单元格中插 入网站标语图片banner.png→调整图片位置和大小→ 在放置图片的表格下面再插入1行5列的表格→选字 体和居中显示→在5个单元格中分别写入：产品介绍、 公司简介、联系方式、客户反馈、返回首页。
文件为：jianjie.htm，联系方式子页面文件为： connect.htm，9种产品介绍子页面文件分别为：1.htm～9.htm。另外还有 两个用Fireworks制作的图片，一个是网站标志，文件名为：logo.png， 另一个是网站宣传标语，文件名为：banner.png。因为网站文件不多， 所以没定义子文件夹，把所有文件都放在D盘根目录下的rfwz文件夹中 （rfwz意为润丰网站，文件夹名和文件名最好不用汉字）。是本地网站 。 如下图所示。
本地网站
3
返回目录
10.1 综合实例一 —网站的基本结构
小型企业网站的风格要简洁大方、突出主题、直截了当。设计主页
（index.htm）时把企业简介、网站标志、网站标语、公共导航和9种产
网页设计与制作案例教程电子教案课件
网页设计与制作案例教程-电子教案课件第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讲解网页设计的基本原则和设计流程1.2 网页布局与排版介绍网页布局的概念和重要性讲解常用的网页布局方法和技术演示实例：制作一个简单的网页布局第二章：HTML与CSS基础2.1 HTML基础介绍HTML的概念和作用讲解HTML的基本结构和常用标签演示实例：制作一个简单的网页2.2 CSS基础介绍CSS的概念和作用讲解CSS的基本语法和常用选择器演示实例：为网页添加样式和布局第三章：图像与多媒体处理3.1 图像处理介绍图像在网页设计中的作用和重要性讲解图像的基本格式和处理方法演示实例：制作一个简单的图像轮播效果3.2 多媒体处理介绍多媒体在网页设计中的应用讲解音频和视频的嵌入方法演示实例：在网页中添加音频和视频第四章：网页交互与动画4.1 交互设计基础介绍交互设计在网页设计中的作用和重要性讲解常用的交互设计技术和方法演示实例：制作一个简单的交互式导航菜单4.2 动画与过渡效果介绍动画在网页设计中的应用和重要性讲解CSS动画和过渡效果的语法和用法演示实例：制作一个简单的CSS动画效果第五章：响应式网页设计5.1 响应式网页设计概述介绍响应式网页设计的概念和重要性讲解响应式网页设计的基本原则和方法5.2 媒体查询与网格系统讲解媒体查询的语法和用法讲解网格系统的概念和应用演示实例：制作一个响应式网页布局第六章：网页前端编程技术6.1 JavaScript基础介绍JavaScript的概念和作用讲解JavaScript的基本语法和常用语法演示实例：制作一个简单的网页交互效果6.2 jQuery库的使用介绍jQuery的概念和作用讲解jQuery的基本语法和常用方法演示实例：使用jQuery实现网页元素的动态效果第七章：网页后端技术7.1 PHP基础介绍PHP的概念和作用讲解PHP的基本语法和常用语法演示实例：制作一个简单的PHP网页7.2 MySQL数据库的使用介绍MySQL的概念和作用讲解MySQL的基本操作和常用SQL语句演示实例：使用MySQL存储和管理网页数据第八章：网页优化与性能提升8.1 网页优化概述介绍网页优化的重要性讲解网页优化的基本原则和方法8.2 提高网页性能讲解提高网页加载速度的方法讲解代码压缩和合并的技术演示实例：优化网页性能第九章：搜索引擎优化（SEO）9.1 SEO基础介绍SEO的概念和作用讲解SEO的基本原则和方法9.2 关键词研究和内容优化讲解关键词研究的方法和技巧讲解内容优化的重要性和方法演示实例：为一个网页进行SEO优化第十章：网页设计与制作的实战项目10.1 项目概述和需求分析介绍项目背景和目标分析项目需求和功能10.2 网页设计与制作流程讲解网页设计与制作的详细流程演示实例：完成一个实战项目的网页设计与制作第十一章：网页设计与制作工具11.1 网页编辑器与IDE介绍常用的网页编辑器和集成开发环境（IDE）讲解如何使用这些工具进行网页设计与制作11.2 图形设计软件介绍常用的图形设计软件及其在网页设计中的应用讲解如何使用这些工具进行网页图形设计第十二章：网页设计与制作实战技巧12.1 网页动画与特效讲解如何制作网页动画和特效演示实例：制作一个动态轮播图12.2 网页响应式设计讲解如何实现网页的响应式设计演示实例：制作一个响应式网页布局第十三章：网页安全性与维护13.1 网页安全性基础介绍网页安全性的重要性和常见安全问题讲解如何提高网页安全性13.2 网页维护与更新讲解如何进行网页的维护和更新演示实例：对一个网页进行维护和更新第十四章：网页设计与制作的案例分析14.1 案例一：企业官方网站设计分析企业官方网站的设计要求和特点讲解如何设计和制作企业官方网站14.2 案例二：电子商务网站设计分析电子商务网站的设计要求和特点讲解如何设计和制作电子商务网站第十五章：网页设计与制作的未来发展15.1 网页设计趋势与创新分析当前网页设计的趋势和创新方向讲解如何跟上网页设计的未来发展15.2 网页设计与制作的未来技术介绍未来可能影响网页设计与制作的技术讲解如何应对这些技术挑战和机遇重点和难点解析重点：1. 网页设计基础：理解网页设计原则、设计流程以及布局与排版的方法。
网站设计与制作综合实例PPT课件
2020/2/29
留言板数据库的创建与结构
9
设计过程
制作留言板 5．留言板设计实现过程
本系统的设计过程主要包括以下3个部分：签写与保存留言模 块设计、读取与显示留言模块设计和管理留言模块设计。
代码请参见实例。
2020/2/29
10
3. 网站测试与性能分析
网站采取的测试方法是先进行各模块测试，经过修改和调
本设计采用ASP作为开发工具，后台数据库采用Access数据 库设计，利用ADO数据库访问技术实现对数据库的各种管理操 作，实现留言板的留言及管理功能。
2020/2/29
5
设计过程
制作留言板
2. 选择设计方案
实现网上留言的原理很简单，无非是为用户提供表单界面书
写留言内容，并把这些留言信息加以保存，然后读取和显示留
2020/2/29
2
2. 网站的制作过程
动态网站的制作过程，页面包括静态页面和动态页面，将前面 所学的知识有机地结合起来，并且能够在此基础上设计站点的 其他功能，达到触类旁通的效果。静态页面部分主要包括内容 显示页面和一些简单的链接页面，动态页面主要包括注册登录、 计数器和留言板的制作。整个站点页面的设计要合理，与网站 主题相符。
效果有时更好，这些人会提出许多专业人员没有顾及到的问题
或一些好的建议。
2020/2/29
11
网站的测试与发布
1. 测试网站动态功能的实现 2. 测试页面中是否有空链接或错误链接 3. 网站的发布：将制作好的网站上传到服务
ห้องสมุดไป่ตู้
管理员登录
编辑留言
删除留言
留言板系统模块结构图
8
制作留言板 4．数据库结构设计
网页制作课件_10 模板和扩展Dreamweaver
10.1.4 使用可编辑的可选区域
前面分别介绍了可选区域和可编辑区域，在大多数情
况下，可选区域和可编辑区域是配套出现的，因此 Dreamweaver 8提供了一种可编辑的可选区域，可以 提高此类区域的制作效率。 1．创建可编辑可选区域 2．设置模板参数 3．保存并应用模板 4．利用参数控制模板的作用
10.3.3 课堂实例――模拟打字
Typewriter扩展插件可以在页面上显示打字效果，这
个扩展插件的类型是行为，可以从行为面板中调用， 并且使用这个扩展插件时页面中必须至少有一个层。
1．安装Typewriter扩展插件 2．使用Typewriter扩展插件
本章习题
上机练习
练习1 课件吧网站教程网页模板
10.2.1 用Fireworks制作网页切片
在Internet上冲浪时，会发现有些网页的整个背景是
一幅完整的画，非常有个性，也很漂亮。其实这样的 网页效果是利用Fireworks制作出网页图像，然后通过 切片导出为HTML代码，最后再在Dreamweaver中编 辑完成的。 1．用Fireworks制作网页图像 2．制作网页切片
练习2 Dreamweaver与Fireworks 结合制作网站首页
10.2 Dreamweaver与Fireworks结合
Fireworks最独特的功能，在于既可以编辑网页图像，又可以制作一些
网页上的动画，具有强大的矢量图和位图综合处理的功能。它可以与 Dreamweaver软件的紧密结合，无须离开Dreamweaver软件环境就可 以对Fireworks图像修剪、调整大小及进行二次编辑。 本节以一个网站主页的制作过程讲解Dreamweaver与Fireworks结合制 作网页的方法。实例效果如图所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
10.1 项目概述 2、网站栏目规划
3、绘制版式布局草图
10.2 网站首页效果图设计与制作 1、获取或制作栅格
2、设计制作网页模板
10.3 网页效果图切图
切图时应遵循以下原则：
1．必须依靠参Байду номын сангаас线。设计时用到参考线，切图时更要用好参考线。参考线能保 证我们切出图在同一表格中的尺寸统一协调，有效避免“留白”和“爆边”。
4．渐变必切。这也是Dreamweaver实现不了的。 5．大图必切。大的图像必须切分成均匀图，这样可以提高网页下载速度。 6．特殊文字效果必切。除黑体和宋体外，其他字体必须切片。Dreamweaver下 最有效的字体只有宋体和黑体，其它字体浏览器也要能不兼容。 7．导航条必切。一般情况下导航条都是特别设计的，其效果在Dreamweaver下
2．Logo和Banner必切。如果效果图中存在Logo和Banner,我们必须切片这部分， 主要是为预先设计的Logo和Banner留下空间，在Dreamweaver整合时最好不用Logo和 Banner的切片，而是直接用Logo和Banner原文档，这是提高Logo和Banner效果的需 要。
3．虚线和转角形状必切。虚线和转角形状在Dreamweaver 不能实现，只能使用 Photoshop切片。
Web设计基础教程 第10章 网站首页设计与制作实例
目录
1
项目概述
2
网站首页效果图设计与制作
3
网页效果图切图
10.1 项目概述
1、网站建设需求分析: 本案例中的东方冰眼科技有限公司是一家专业设计制造高端无人机的高
新科技公司，其核心产品为企业和军用级别的高端无人机，公司建设官方网 站的目的，一方面要达到企业形象宣传的作用，另一方面，未来网站将成为 公司开展B2B电子商务活动的平台。
谢谢
感谢
谢谢，精品课件 资料搜集
感谢
谢谢，精品课件
资料搜集