个人网站的建设—模板和特效网页的制作

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,项目,1,个人网站的建设,模板和特效网页的制作,任务,1.,个人网站的设计规划,任务,2.,创建本地站点任务,任务,3.,制作网页模板,任务,4.,利用模板制作“我的简历”页面,任务,5.,网页添加特效,任务,1.,个人网站的设计规划,任务,1.1,确定网站主题,任务,1.2,确定网站的目录结构,任务,1.3,确定网站的整体风格,任务,1.4,确定网站主要栏目和布局,任务,1.1,确定网站主题,对于主题的选择主要按下列,3,个条件去考虑，本例所讲的是一个个人介绍性质的网站，主题就是介绍个人的相关信息。,如果主题已经确定，就可以围绕主题给该网站起一个名字，网站名称也是网站设计的一部分，而且是很关键的要素。,任务,1.2,确定网站的目录结构,网站的目录是指建立网站时创建的目录，目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对站点本身的上传维护以及以后内容的扩充和移植有着重要的影响。,建立目录结构的建议：,a.,不要将所有文件都存放在根目录下。,b.,按栏目内容建立子目录。,c.,个主目录下都建立独立的,images,目录。,d.,目录的层次不要太深,任务,1.3,确定网站的整体风格,在动手建立网站之前，对网页进行完整、详尽的整体设计是至关重要的。风格是指站点的整体形象想给浏览者的综合感受，包括站点的标志、色彩、字体、标语、版面布局、内容价值、存在意义、站点荣誉等诸多因素。本例的页面采用绿色为主的色调，绿色具有清爽、理想、希望、生长的含义，采用这种大面积明亮的绿色块，营造了一个清晰明快、充满无限希望与活力的氛围。,任务,1.4,确定网站主要栏目和布局,通常版面布局是按照如下步骤进行的。,步骤,1.,设计草案。,新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西，设计者可以尽可能发挥想象力，用一张白纸和一支铅笔勾画出页面的大致布局，当然永续哦图软件,photoshopFirewoeks,等也可以。,步骤,2.,进行粗略布局,在草案的基础上，将确定需要放置的功能模块安排到页面上。必须遵循,6,突出重点、平衡协调的原则，将网站标志、主要栏目等最重要的模块放在最显眼，最突出的位置，然后再考虑次要模块的排放。,任务,2.,创建本地站点,步骤,1.,选择,【,站点,】|【,管理站点,】,命令，弹出,【,管理站点,】,对话框，在,【,管理站点,】,对话框中，单击,【,新建,】,按钮，然后从弹出的菜单中选择,【,站点,】,选项。,任务,2.,创建本地站点,步骤,2.,弹出,【,站点定义,】,对话框，如果对话框显示的是,【,高级,】,选项卡，则切换到,【,基本,】,选项卡，弹出,【,站点定义向导,】,的第一个界面，要求为站点输入名称。,任务,2.,创建本地站点,步骤,3.,单击,【,下一步,】,按钮，出现向导的下一个界面，询问是否要使用服务器技术。选择,【,否我不想使用服务器技术,】,选项，指示目前该站点是一个静态站点没有动态页面。,步骤,4.,单击,【,下一步,】,按钮，打开 如图,4.5,所示的对话框，在文本框中输入站点路经。,任务,2.,创建本地站点,步骤,5.,单击,【,下一步,】,按钮，询问如何连接到远程服务器，这里选择,【,无,】,，因为将整个站点制作完成以后再上传。,步骤,6.,单击,【,下一步,】,按钮，,将显示设置概要。,任务,2.,创建本地站点,步骤,7.,单击,【,完成,】,按钮，即出现,【,管理站点,】,对话框，其中显示了新建的站点。,步骤,8.,单击,【,完成,】,按钮，关闭,【,管理站点,】,对话框，现在，已经为站点定义了一个本地根文件夹，就可以在站点中制作网页了，当制作完成以后，就可以上传到服务器上供大家浏览了。,任务,3.,制作网页模板,使用模板创建文档可使站点具有统一的结构和外观。具体操作步骤如下：,步骤,1.,选择,【,文件,】|【,新建,】,命令，弹出,【,新建文档,】,对话框，选择,【,空白页,】,选项，在,【,页面类型,】,选项卡中选择,【,模板,】,选择。,步骤,.,单击,【,创建,】,按钮，创建一空白模板网页。选择,【,修改,】,【,页面元素,】,命令，打开,【,页面属性,】,对话框，在,【,页面属性,】,对话框中将,【,背景颜色,】,设置，,【,左边距,】,、,【,右边距,】,、,【,上边距,】,和,【,下边距,】,分别设置为。,步骤,.,单击,【,确定,】,按钮。,步骤,.,将光标放置在页面中，选择,【,窗口,】,【,资源,】,命令，打开,【,资源,】,面板。,任务,3.,制作网页模板,步骤,.,在面板中单击新建建按钮，显示以创建的库文件，单击并选择要插入的库文件，单击,【,资源,】,面板底部的,【,插入,】,按钮，即可插入库文件。,步骤,.,将光标放置在库文件的右边，选择,【,插入记录,】,【,表格,】,命令，插入行列的表格，此表格记为表格。,步骤,.,将光标放置在表格的第列，选择,【,插入记录,】,【,表格,】,命令，插入行列的表格，此表格记为表格。,步骤,.,将光标放置在表格的第行单元格中，选择,【,插入记录,】,【,图像,】,命令，插入图像,images/,left_top.jpg,。,任务,3.,制作网页模板,步骤,9.,将光标放置在表格,2,的第,2,行单元格中，单击属性面板中,【,背景,】,文本框右边的,【,浏览,】,按钮，插入背景图像,images/,left_di.gif,。,任务,3.,制作网页模板,步骤,10.,将光标放置在背景图像上，选择,【,插入记录,】|【,表格,】,命令，插入,10,行,1,列的表格，此表格记为表格,3,，在属性面板中，将,【,对齐,】,设置为,【,居中对齐,】,。,任务,3.,制作网页模板,步骤,11.,将光标放置在表格,3,的第,2,行单元格中，选择,【,插入记录,】|【,图像,】,命令，插入图像,images/,geren.gif,。,步骤,12.,在表格,3,的其他单元格中再插入相应的图像。,步骤,13.,将光标放置在表格,2,的第,3,行中，选择,【,插入记录,】|【,图像,】,命令，插入,images/left-,botton.jpg,。,任务,3.,制作网页模板,步骤,14.,将表格,1,的第,2,列,【,宽,】,设置我,10,。,步骤,15.,将光标放置在表格,1,的第,3,列中，选择,【,插入记录,】|【,表格,】,命令，插入,4,行,1,列的表格，此表格记为表格,4,。,任务,3.,制作网页模板,步骤,16.,将光标放置在表格,4,的第,1,行中，选择,【,插入记录,】|【,图像,】,命令，插入图片,hua-1.jpg,。,步骤,17.,将光标放置在表格,4,的第,2,行中，选择,【,插入记录,】|【,图像,】,命令，插入图像,hua-2.jpg,。,任务,3.,制作网页模板,任务,3.,制作网页模板,步骤,18.,将光标放置在表格,4,的第,3,行中，选择,【,插入记录,】|【,表格,】,命令，插入,1,行,1,列的表格，此表格记为表格,5,。,任务,3.,制作网页模板,步骤,19.,将光标放置在表格,5,中，单击属性检查器,【,背景,】,文本框右边的,【,浏览,】,按钮，插入背景图像,images/,di.gif,，将,【,高,】,设置为,【,顶端,】,。,步骤,20.,将光标放置在表格,4,的第,4,行中，选择,【,插入记录,】|【,图像,】,命令，插入图像,images hua-3.jif,。,任务,3.,制作网页模板,步骤,21.,将光标放置在表格,1,的右边，选择,【,插入记录,】|【,表格,】,命令，插入,1,行,1,列的表格，此表格记为表格,6,，在属性检查器中将,【,对齐,】,设置为,【,居中对,】,。,步骤,22.,将光标放置在表格,6,中，单击属性面板中,【,背景,】,文本框右边的,【,浏览,】,按钮，插入背景图像,images/,footer.jpg,将,【,高,】,设置为,113,。,任务,3.,制作网页模板,步骤,23.,将光标放置在背景图像上，输入文字“版权所有盈盈”。,步骤,24.,将光标放置在文字间，选择,【,插入记录,】|【HTML】|【,特殊字符,】|【,版权,】,命令，弹出,Dreamweaver,提示框。,步骤,25.,单击,【,确定,】,按钮，插入版权符号。,任务,3.,制作网页模板,任务,4.,利用模板制作“我的简历”页面,步骤,1.,选择,【,文件,】|【,新建,】,命令，弹出,【,新建文档,】,对话框，选择,【,模板中的页,】,选项，选择,【,站点,】,下的,【,个人网站,】,选项，选择,【,站点“个人网站”的模板,】,中的,index,选项，勾选,【,当模板改变时更新页面,】,复选框。,步骤,2.,单击,【,创建,】,按钮，创建一模板。,任务,4.,利用模板制作“我的简历”页面,步骤,3.,将光标置于可编辑区,zhengwen,中，选择,【,插入记录,】|【,表格,】,命令，插入,5,行,1,列的表格，此表格记为表格,7,。,任务,4.,利用模板制作“我的简历”页面,步骤,4.,将光标放置在表格,7,的第,1,行中，将,【,高,】,设置为,50.,将光标放置表格,7,的第,2,行中，选择,【,插入记录,】|【,图像,】,命令，插入图像,images/,jiben.jif,。,任务,4.,利用模板制作“我的简历”页面,步骤,5.,将光标放置在表格,7,的第,2,行中，选择,【,插入记录,】|【,表格,】,命令，插入,4,行,4,列的表格，此表格记为表格,8,，在属性面板中将,【,间距,】,设置为,2,。,任务,4.,利用模板制作“我的简历”页面,步骤,6.,在表格,8,中输入相应的文字，并把第,4,行单元格合并。,步骤,7.,将光标放置在表格,7,的第,4,行中，选择,【,插入记录,】|【,表格,】,命令，插入,3,行,1,列的表格，此表格记为表格,9,。,任务,4.,利用模板制作“我的简历”页面,步骤,8.,将光标放置在表格,9,的第,1,行中，选择,【,插入记录,】|【,图像,】,命令，插入图像,images/,jiaoyu.gif,。,任务,4.,利用模板制作“我的简历”页面,步骤,9.,在表格,9,的第,2,和第,3,行输入相应的文字。,步骤,10.,将光标放置在表格,7,的第,5,行中，选择,【,插入记录,】|【,表格,】,命令，插入,4,行,1,列的表格，此表格记为表格,10,。,任务,4.,利用模板制作“我的简历”页面,步骤,11.,将光标放置在表格,10,的第,1,行中，选择,【,插入记录,】|【,图像,】,命令，插入图像,images/,gzjl.gif,。,步骤,12.,在表格,10,的其他单元格中输入相应的文字。,任务,5.,网页添加特效,2.5.1,制作弹出窗口页面,4.5.2,给网页添加背景音乐,步骤,1.,从站点打开文件。,步骤,2.,将光标置于文档中相应的位置，选择,【,窗口,】|【,行为,】,命令，打开行为面板，在行为面板中单击添加按钮，在弹出的下拉列表中选择,【,打开浏览器窗口,】,命令,步骤,3.,弹出,【,打开浏览器窗口,】,对话框,步骤,4.,在对话框中，单击,【,要显示的,URL】,文本框右边的,【,浏览,】,按钮，弹出,【,选择文件,】,对话框。,任务,5.1,制作弹出窗口页面,任务,5.1,制作弹出窗口页面,步骤,5.,在对话框中选择相应的文件，单击,【,确定,】,按钮，返回到,【,打开浏览窗口,】,对话框，将,【,窗口宽度,】,设置,450,，,【,窗口宽度,】,设置为,450,，,【,窗口高度,】,设置为,280,。,步骤,6.,单击,【,确定,】,按钮，在行为面板中就会出现添加,【,打开浏览器窗口,】,行为，,【,事件,】,为,onClick,。在浏览器中预览。,任务,5.2,给网页添加背景音乐,步骤,1.,打开网