《模板网站基本建站步骤》由会员分享,可在线阅读,更多相关《模板网站基本建站步骤(82页珍藏版)》请在金锄头文库上搜索。
1、上机步骤,复习上节课教的网站基本步骤知识,1.创建文件夹用来存放网站各类资源pages/img/pic 2.把必须的资源分类存放在文件夹中.没用到的图片不要放进来。 3.在dreamweaver中创建站点。然后创建模板,通过表格设置页面结构,通过页面属性设置页面基本外观。并插入模板对象可编辑区域 4.由模板创建网页并保存。 5.返回模板设计超链接,更新整个网站。,在C盘根目录下建立一个文件夹,名字是“xxyyy”,xx是你的学号的后2位,yy是你的姓名。没有空格和标点符号。这个文件夹就是你的站点文件夹,网站建设所有用到的文件都将存放在这里。 命名举例:比如03张益达,14李秋水,22郭峰 学号
2、是一位数的,比如3号,前面一定要加零.比如是03.,在这个文件夹里再建两个文件夹,一个叫img的文件夹,img是image即图片的意思,将用来存放图片。另外一个叫pages,是用来存放网页的文件夹。 说明:img是英文单词“图像image”的简写。pages是英文页面的意思。,打开dreamweaver。它在桌面上是一个绿色的DW字样图标,如下图所示 单击最上面的“站点”菜单,选择“新建站点” 然后设置站点名称为你的学号加姓名。站点文件夹就是你刚才创建的那个文件夹。单击“本地站点文件夹”最右侧的文件夹图标即可设置。,下面8 , 9 , 10 , 11一共4页的内容是老版Dreamweaver的
3、站点设置步骤,提供给使用老版的同学。在机房用cs5版本的可以直接跳过。,会出现站点建设对话框。在“为站点起名字”的栏目中,输入你的站点文件夹名字,比如wangluo109,然后单击“下一步”,选“否,我不想使用服务器技术”。,再单击下一步,在“您将把文件存储在计算机上的什么位置”的下面。单击右侧的黄色文件夹按钮(上图中红框内),选择到你在d盘下所选定的文件夹内。 或者直接改它的文件路径也行,如下所示,注意:这个路径必须和你在C盘下设置的你的站点目录一样!具体名字取你的文件夹名!,单击“下一步”,如上图所示,“如何连接到服务器”,选择“无” 再单击“下一步”,选“完成”,在C盘根目录下建立一个文
4、件夹,名字是“wangluo1xx”,1xx是你的学号的后三位,没有空格和标点符号。这个文件夹就是你的站点文件夹,网站建设中所有用到的文件都将存放在这里。 强调:不符合要求的,将被扣分!不要把你的姓名,完整学号等等加入文件夹的名字。而且记住:一定要是拼音,不要用汉字做文件夹名!,在正式开始操作之前的最后一个提醒: 如果你在操作中发现有一点失误,比如做错了一两步,不必叫我过来问这个怎么改回去,你只要撤销这两步错误的操作即可。 撤销上一步操作的快捷键是ctrl+Z 就是单击ctrl键不松开的同时单击一下Z键,我们今天一开始要用到6张图片,分别是1-1.jpg,1-2.jpg,2-1.jpg,2-2
5、.jpg,2-3.jpg,banner.jpg,beijing.gif。如下图。 它们在世博会主题文件夹内的网站图片文件夹内,请把它们单独找出来复制到你的C盘的站点文件夹下的img文件夹里,我在此再次强调:在网页中没有用到的图片,不要放到站点文件夹里。 站点文件夹内放的文件,必须是确定用到的图片和网页等文件。 有些同学把下载的文件夹、文件都放到站点文件夹里,这种做法是错误的!必须先进行挑选,确实选中要用的文件才放到站点文件夹中,其他所有文件一律放到站点文件夹外!,一个文件也不要多放! 一定要按规则,按思路来管理你的站点文件夹,这样你以后的网站做大的时候才会有条理。 实际你自己设计网站的时候,也
6、会像今天这个网站一样,先搜集很多资源,然后从中挑选出符合主题,适应站点需要的图片和文字,然后整理修改后放到站点文件夹内,最后才是粘贴到网页中来使用。,然后这时候我们该开始创建第一个页面。 不过今天我们要复习上次课的技术:模板 首先来认识3个概念,logo,banner和导航栏。 注意看下面两页PPT中的红色指示字。,网页组成的介绍,从上面可以看到 Logo一般是网站的标示,标志 Banner一般是网页上侧或者左侧的标志性长条,显示网站主题内容。常常有但不是必须有。 导航栏是主页上用于到达各个子页面的超链接的一个合集。,接下来我们进入今天的操作部分。请大家务必放慢节奏,细心一点。因为一旦做错,往
7、往需要返工从头再来。 所以在看步骤的时候一定要慢一点,细心认真一点。,我们今天要学习一种新技术:模板 在这里提醒一下,我们用F12键可以预览网页,但是不能预览模板。模板表面上和网页一样,实际上是一个网站的总的底板。它只能在Dreamweaver中的设计模式下看到。 所以不要在编辑模板的时候点F12.但是在编辑由模板创建的网页的时候,可以点F12预览 我们今天要学习用模板建网站的技术。,单击Dreamweaver左上角的“文件”菜单下的“新建”命令,在弹出的新建对话框中,选择“空白页”,然后选择“模板”或者选择 “空模板”-“html模板”-“无”。如下图。也行。 然后单击创建。,单击Dream
8、weaver上的“插入”菜单下的“表格”命令,插入一个4行1列的表格,表格宽度为960像素。边框,边距,间距必须都是0.然后单击确定。,此时页面最下方显示的是该表格的属性面板,如上图所示 如果不是,就在表格里单击一下,然后单击上图中左上角的标签即可 单击属性中的“对齐”,选择“居中对齐” 属性面板对我们来说很重要。很多修饰、操作都是在这里完成的。,此时你的Dreamweaver的面板的右侧应该有站点文件管理面板,如右上图所示。 双击img,你会看到里面列出了你复制到这里的图片文件 双击后如右下图所示,在页面主表格的第四行,是我们将来的页面底部的信息栏,是你的网站信息栏 请在这里输入你的站点编制
9、者信息,如学校,班级,姓名,联系方式等。 建议: 1.分别写为两行。详细点。 2.这些信息应该居中对齐。,在表格的第一行里面单击一下。然后单击Dreamweaver上方的“插入”菜单中的“图像”命令,找到你刚放到img文件夹中的banner.jpg图片,插入到表格第一行中 这个图片就是咱们今天的网站的banner 在表格的第二行里面单击一下,在这里插入一个1行6列的表格,宽度960像素,边框,边距,间距都是0。 在表格里插表格的操作方法和在页面里插表格的操作是一样的,在表格的第三行里面单击一下,在这里插入一个1行1列的表格,宽度960像素,边框,边距,间距都是0。 因为你插入的是一个0边框表格
10、,所以插入后在视觉上是感觉不到有什么区别的,也就是说,你看不出来你确实插入了表格,这很正常。,请在第三行的里面单击一下,确切地说,我是希望你能单击到你刚插入的那个1行1列的表格里面,如果你单击正确的话,属性面板上侧将如上图所示,从左向右数第二个,也是最后一个标签为亮白色 现在请单击从左向右数第二个,也是最后一个标签,单击后如下图所示,接下来请直接单击“插入”菜单,然后选择“模板对象”,选择“可编辑区域”。 然后会问你是否确定。选确定即可。 完成后属性面板上侧的标签应如下图所示,然后在页面上表格外面的任意空白处单击一下,单击哪里都行。 你会在Dreamweaver最下面的属性面板的最下面看到“页
11、面属性”按钮。单击它。,会弹出如上图所示的界面。单击“背景图像”右侧的“浏览”按钮,会出现如上图所示的界面。请找到你的站点文件夹下的img文件夹,并双击打开,然后如右图所示,双击选中里面的beijing.gif文件。就设好了网页的背景图片,现在选中页面中的表格。你可以用鼠标左键选中表格,看到页面左下角的反白色,就是选中了。或者在表格内单击,然后单击属性面板上最左边的标签。 然后单击背景颜色,就像是上图中“大小”的右边的右边的灰色小方块,单击后会出现一个如上图所示的颜料盘 把你的鼠标左键按着不动,向上拖,鼠标会变成吸管的样子。拖到“城市”两个字上,然后松手,或者在“背景颜色”框右侧的白色空白栏里
12、输入这个橙色的颜色代码,如上图所示。 #F89B40 这次世博会的主题是橙色和草绿。所以我选择用这个橙色做网页的背景颜色 操作正确的话,表格背景会变成如下页图的橙色。操作错误请重做。做到正确为止,上面这个图没取好。不一定要变灰。有如图的橙色即可。,单击文件菜单,保存 将此文件保存为你的站点模板。保存的时候为它起名为temp。 如上图所示,点保存即可。,Temp是英文模板的单词template的缩写。以后你自己建站的时候,用什么名字都行。有人喜欢用模板的拼音,muban,也有人用自己的姓名。总之你能记住这是你的模板文件就行。因为以后网站越做越大,一个网站可能有多个模板,到时候模板的名字还是挺重要
13、的,得让你自己能看懂,知道这个是干嘛用的。,你的站点文件此时刷新一下,应该如右图 刷新就是点文件面板上那个蓝色的带箭头的圆圈。右图中中上部,从左向右数第二个 我画红框那里,模板到现在就算告一段落了。请关闭此模板。 不知道操作的,最简明的办法是单击“文件”菜单下的“关闭”命令。,再次提醒一下,我们用F12键可以预览网页,但是不能预览模板。模板表面上和网页一样,实际上是一个网站的总的底板。它只能在Dreamweaver中的设计模式下看到。 所以不要在编辑模板的时候点F12.但是在编辑由模板创建的网页的时候,可以点F12预览 接下来就是用模板创建网站中页面的步骤,现在尝试新建页面,如下图所示。单击文
14、件,-新建,选“模板中的页”,站点选你的站点名称,右边应该只有一个temp,就是你刚刚建立好的模板。然后单击创建。 再次提醒一下,今天创建的所有网页都是由这个模板创建的。也就是说,今天接下来建立六个页面的步骤都是如下图所示。而不是上周的步骤。,下面是我过去的一个截图,和上一页操作是一样的。给大家做个演示 单击文件,新建,先选择“新建文档”对话框左侧的“模板中的页”,然后选择你的站点名称和对应的你刚建好的站点模板即可,在表格第三行单击一下。 因为你是从模板里面创建的,其实第三行以外你应该是点不了的。 在表格第三行单击一下。 插入图像,把img文件夹中的1-1.jpg插入这里。然后单击一下键盘上的
15、方向键-,就是向右,然后按组合键shift+enter,具体操作为先点着shift键不松,然后再点enter,这样就切换到下一行了,然后插入图片1-2 这两个图片是按计划要做第一页的内容的。,记住,他们是有顺序的,1-1在1-2的上面。 插入后点F12,将此页面保存到pages文件夹里。将此页面保存为1.html 咱们一般都是html页面。所以你在输入名字的时候,只要输入一个1就行了,如下图,下面大家跟我一起来设计一个“河南馆”的页面,给大家一点建议思路。这个页面将作为2.html 首先,你必须清楚你的页面用的图片的基本属性。 你在一个图片上单击右键,选属性,再点“摘要”,就能找到你的图片的宽
16、,高属性了。,第二个页面做成“河南馆”的页面。我让你在一开始放在img文件夹里的2-1,2-2,2-3都是“河南馆”的图片。 我们要把这三张图片和“河南馆”的文字相配合,河南馆有三张图片。下面的单位都是像素。 2-1,宽500,高308 2-2,宽150,高112 2-3,宽500,高312 而我们页面的表格的宽度为960像素 三个图片明显第二个最小,第一和第三最大。我的思路是,编辑一个表格,把各个元素放进去。,正式步骤: 首先从模板temp创建一个页面,就像第42页的步骤那样。 然后在第三行里面单击一下鼠标左键,然后在这里插入一个表格,5行1列,边框,边距,间距都是0,在这个新插入的表格的第一行里单击右键,选择“表格“-”拆分单元格”,如上图,拆为三列。,我打算在第一行里把河南馆的logo居中,左右各出一段说明。 表格整体宽度为960,logo图片的宽度是150。另外要留出左右各10像素,共计20像素的空间。所以两段文字的总宽度为960-150-20=790 因为两段文字长短不一,经过试验,我决定左侧文字宽度220,右侧文字宽度570 整体:220+170+570=960像素,