项目三创建简单电子商务网页

《项目三创建简单电子商务网页》由会员分享，可在线阅读，更多相关《项目三创建简单电子商务网页（127页珍藏版）》请在金锄头文库上搜索。

1、项目三 站点创建新体验,主要内容,任务二 网页的建立与预览,任务三 文本编辑,2,任务四 图像应用,4,任务五 表格的制作,任务一 站点管理操作,项目导航,网页制作是一个系统的工作，前期的准备工作必不可以，如网站规划，网站文字和图像等各种素材的准备，站点的建立，等等，只有做好了充人的前期准备工作，在制作页面时才能更加轻松。同学们，准备好了吗？,项目导航,学习目标： 1、说出什么是站点。 2、创建、编辑和管理站点。 3、进行文本的添加和编辑。 4、插入和简单编辑图像。 5、插入和编辑表格。,项目导航,任务一 站点管理操作,制作网页第一步：创建站点。站点是一个网站的基础，所有的网站内容都放在站点内

2、进行统一的管理和操作。,学习目标： 描述Dreamweaver CS5有关站点的概念。 使用Dreamweaver CS5创建站点的方法。 会进行Dreamweaver CS5站点管理。,任务1 创建站点,思考：Dreamweaver站点看上去就是一个文件夹，它和网页制作有什么关系呢？,站点可以简单地理解成为存放站内信息的文件夹，是一组网页文档的集合。设计者通过各种链接把这些网页联系在一起，浏览者通过不同的链接，可以从一个网页浏览到另一个网页，从而实现对整个网站的访问。网页制作的第一步不是制作一个网页，而是创建一个新的站点。,任务1 创建站点,创建站点就是创建一个特殊的文件夹，有关网站的所有内

3、容，如子文件夹、网页文档、组件、图片和其他网站相关的文档等，都存放在该文件夹中。 “站点”跟“网站”是相同的，只是说法不同而已。,任务1 创建站点,Dreamweaver 站点由三种类型的文件夹组成，即本地文件夹、远端文件夹和测试服务器文件夹，这三种类型的文件夹有可能是同一个文件夹，也可能不是，这取决于开发环境和所开发的网站类型。,一、本地文件夹 本地文件夹是网站设计者的工作文件夹，设计过程中使用和处理的所有文档都存储在这个文件夹中。它一般位于本地计算机上，也可以位于网络服务器上。如果直接在服务器上工作，则每次保存时都会将该文件上传到服务器。Dreamweaver将该文件夹称为“本地站点”。,

4、任务1 创建站点,Dreamweaver 站点由三种类型的文件夹组成，即本地文件夹、远端文件夹和测试服务器文件夹，这三种类型的文件夹有可能是同一个文件夹，也可能不是，这取决于开发环境和所开发的网站类型。,二、远端文件夹 如果要向Web服务器传输文件或开发Web应用程序，还需要添加远程文件夹和测试服务器文件夹。远程文件夹通常位于Web服务器的计算机上，Dreamweaver在“文件”面板中将该文件夹称为“远程站点”。,任务1 创建站点,Dreamweaver 站点由三种类型的文件夹组成，即本地文件夹、远端文件夹和测试服务器文件夹，这三种类型的文件夹有可能是同一个文件夹，也可能不是，这取决于开发环

5、境和所开发的网站类型。,三、测试服务器文件夹 测试服务器文件夹是Dreamweaver处理动态网页的文件夹。 在创建站点前，我们应该新建一个本地文件夹用于存放网站的各种文件，在本地文件夹内部再创建若干个子文件夹对网站文件进行分类管理。比如网站图像存放在“imapges”文件夹中。,第1步：对网站进行周密的规划，确定建站目的和面向的对象，明确几级页面，页面之间的关系，服务器配置的各项情况等。 第2步：建立完整的站点目录结构。 第3步：使用网页制作工具完成网站的创建。,要设计一个好的网站并不简单，这需要做好充分的事先准备，如果准备做得好，那么在后续工作中往往会达到事半功倍的效果，反之，则会做很多无

6、用功。下面介绍站点设计的基本流程和步骤。,关于站点的基本常识站点的设计流程,示例：创建站点前新建的本地文件夹,“images”文件夹用于存放网站图像； “flash”文件夹用于存放网站动画； “crop_web”文件夹用于存放CS样式表； “product_img”文件夹用于存放产品图片。,提示：子文件夹的名称一般使用便于记忆的英文单词或缩写来命名。,关于站点的基本常识常见站点结构,示例中的站点目录结构适合比较小规模的网站，如个人空间等。但电子商务网站通常规模较大，其站点目录结构就会复杂些，各部分有专门的子文件夹，每个部分的文件夹下均包括image文件夹用于存放图像资料。 注意：文件目录不宜建

7、得过深，一般不超过三层，因为目录过深，管理起来会很麻烦的。,关于站点的基本常识常见站点结构,1、一般主页文件名“index.html”，放在站点的根目录下。 2、文件名通常使用小写英文字线性，不使用空格、特殊符号，不使用中文。 3、文件命名尽量以4种方式命名，即汉语拼语音，汉语拼音缩写，英文，英文缩写。方便通过文件名直观地了解页面内容。切忌用默认的“untitled-1、untitled-2”等方式命名，即便是初学者，也需要养成很好的文件命名习惯。 4、图像一般存放于单独的文件夹中，如“images”、“img”。 5、各分支页面的文件存放在各自的文件夹中。,关于站点的基本常识站点目录结构基本

8、常识,创建站点前，应该有所计划，将站点下的各文件及文件夹进行有效的分类，以便将来管理站点时节省更多的时间。通常在本地磁盘上新建一个文件夹，该文件夹称为“根目录”，存放所有的站点资料。 以下是站点目录结构的几个常识。,任务1 创建站点,创建新站点的步骤：,第1步，单击菜单“站点”中的“管理站点”命令，弹出“管理站点”对话框。如果以前定义过站点，则其名称会在列表框中列出。,任务1 创建站点,创建新站点的步骤：,第2步，单击“新建”按钮，弹出“站点设置对象”对话框，在“站点名称”文本框中输入您要起的站点名称，如myfirstweb, 在“本地站点文件夹”文本框中输入您已建好的本地站点文件夹的正确路径

9、名称。,任务1 创建站点,创建新站点的步骤：,第3步，站点的名称和存储的文件夹设置好之后，可以对站点的“服务器”类别进行设置，用户指定远程服务器和测试服务器。如果仅在Dreamweaver站点中工作，可以跳过这一项的设置，如果需要连接到远程服务器，可以单击页面左下角的加号，添加新服务器 。,任务1 创建站点,创建新站点的步骤：,第4步，单击“高级设置”选项卡，包含“本地信息”、“遮盖”、“设计备注”、“文件视图列”、“Contribute”、模板和“Spry”选项。“本地信息”选项包括选择默认图像文件夹、设置链接相对的对象、设置Web站点的URL、区分大小写的链接检查和缓存的启用与否。其余的几

10、个选项可以根据用户的需求进行设置选定。,任务1 创建站点,对于制作本地站点而方，我们只需进行上述的设置就可以了，其余的选基采用默认设置即可。设置完成后，单击“保存”。,任务2 打开站点,当我们同时在制作几个网站时，不同的站点都会在Dreamweaver中保留，我们需要打开某个站点时，可以通过“管理站点”对话框来完成。,打开“站点”- “管理站点”，弹出如下的对话框，选择要修改的站点的名称，单击“完成”的按钮,任务3 编辑站点,当需要重新进行站点设置时，可以单击“管理站点”对话框中的“编辑”按钮，选择后将重新弹出“站点设置对象”对话框，可以对站点重新进行设置。,任务4 复制站点,单击“管理站点”

11、对框中的“复制”按钮，将生成选定的站点的复制站点。,任务5 删除站点,单击“管理站点”对框中的“删除”按钮，将弹出警告框，提示是否确定删除，单击“是”按钮后将删除选定的站点。,任务6 导出和导入站点,单击“管理站点”对框中的“导出”按钮，将导出当前的站点，用于网站备份。单击“导入”按钮，可以导入之前导出过的备份站点。,任务一 站点管理操作,任务总结：,在制作网页之前我们需要先创建站点。在本任务中我们了解了站点的概念，着重学习了创建站点的方法和步骤，同时还学习了站占相关的一系列操作，包括站点的打开、编辑、复制、删除、导入和导出，这些操作对我们以后管理站点是非常有用的。,课上活动为“贸贸女装商城”

12、网站建立本地站点,1、在D盘根目录创建“mysite”的文件夹，并以此文件夹为根创建“贸贸女装商城”站点。 2、在站点创建各种类型文件的文件夹。 3、对“贸贸女装商城”站点在E盘进行备份，并命名为“贸贸女装商城备份”。 4、在“贸贸女装商城”和“贸贸女装商城备份”两个站点间进行切换。 5、删除“贸贸女装商城备份”站点信息。,任务二 网页的建立与预览,网站新建好后，不要急着添加内容，先要学会保存网页、预览网页、设置网页属性等操作才行。本任务同学们将创建若干空的网页文档。,任务二 网页的建立与预览,学习目标： 1、会创建HTML网页文档。 2、会正确保存网页。 3、在Dreamweaver CS5

13、中预览网页。 4、会设置网页的页面属性。,任务1 网页文件操作,一、Dreamweaver提供了多种创建网页的方法，分别是：,1如果Dreamweaver CS5运行后显示起始页，则在起始页中直接选择“新建HTML文档”，即可新建一个名为“Unititled.html”的文件。,任务1 网页文件操作,2如果Dreamweaver CS5已运行后不显示起始页，则在“文件”菜单选择“新建”命令，打开“新建文档”对话框。,一、 Dreamweaver提供了多种创建网页的方法，分别是：,任务1 网页文件操作,一、Dreamweaver提供了多种创建网页的方法，分别是：,3在文件面板中的站点目录上单击右

14、键，在弹出的快捷菜单中选“新建文档”对话框，选对“空白页”中的“HTML”，在“布局”中选择“无”，单击“创建”按钮即可。,任务1 网页文件操作,二、保存网页,1新建一个文件后，选择菜单“文件”中的“保存”命令，将打开“另存为”对话框。选中保存路径，给文件命名，选择保存类型，然后单击“保存”按钮即可完成文件保存。 2在文档窗口中，也可以直接按Ctrl+S组合键，打开“另存为”对话框进行网页文件的保存。 3.需要将文件以不同路径或名称保存时，选择“文件”菜单中的“另保存”命令。,任务1 网页文件操作,三、关闭网页,单击菜单栏下网页标题旁的关闭按钮即可关闭该网页。,任务1 网页文件操作,四、删除网

15、页,在文件面板选择要删除的网页，按键，将弹出提示框，确认是否删除，单击“是”后即可删除网页。,任务1 网页文件操作,五、打开网页,选择“文件”菜单中“打开”命令，出现“打开”对话框。在“查找范围”下拉列表框中选定要打开文档所在的位置，在“文件名”文本框中输入要打开的文件名或直接在上方的列表框中选中要打开的文件，单击“打开”按钮即可完成文档的打开。,任务2 修改网页属性,在正式开始制作网页前，需要对新建的页面进行一些必要的页面属性设置。在编辑窗口下选择“修改”菜单中的“页面属性”，或在在工作区单击鼠标右键，在快捷菜单中选择“页面属性”，打开“页面属性”对话框。,外观(CSS)：在该选项中可以设置

16、页面的一些基本属性，并且将设置的页面相关属性自动生成为CSS样式表写在页面头部,任务2 修改网页属性,在正式开始制作网页前，需要对新建的页面进行一些必要的页面属性设置。在编辑窗口下选择“修改”菜单中的“页面属性”，或在在工作区单击鼠标右键，在快捷菜单中选择“页面属性”，打开“页面属性”对话框。,在“页面字体”下拉列表中选择一种字体设置为页面字体，后面按钮分别设置字体加粗和倾斜。,任务2 修改网页属性,在正式开始制作网页前，需要对新建的页面进行一些必要的页面属性设置。在编辑窗口下选择“修改”菜单中的“页面属性”，或在在工作区单击鼠标右键，在快捷菜单中选择“页面属性”，打开“页面属性”对话框。,在“大小”下拉列表中选择页面的默认字号，还可以设置页面字体大小的单位，默认为“像素（px）”。,任务2 修改网页属性,在正式开始制作网页前，需要对新建的页面进行一些必要的页面属性设置。在编辑窗口下选择“修改”菜