利用表格制作网页
利用表格制作网页
数学系09级(3)班杜强海20091022129
利用表格制作网页
实验目标
该网页将利用设计页面的布局,制楚雄师院的页面简介。通过该种制作,我们可以体会到表格在布局设计中的实际运用,体会如何使用表格来控制页面中的元素对象,已达到自然,生动的配置构成元素的目的。
实验过程
《1》在dreamweaver
中执行《文件》中的
《新建》命令,创建一个HTML文档。然
后在《文件》中保存该文档。
然后在《文档》工具栏的《标题》中输入
“师院首页”。然后单击《常用》工具栏
的表格按钮,插入一个3行3列的表格,图1 如图1所示。
<2>选中第2行表格
的第2单元格。单击属性
面板中的合并所选单元格
按钮,将其合并。然后将指针置于第1行第1列单元格内在属性面板中将《宽》设为200,<高》
设为30,如右图2所示。
《3》单击《常用》工具
栏中的常用图像按钮,再
打开的《选择图像源文件》
对话框中选中一幅图片,
单击《确定》按钮,为单
元的插入一幅图片,如右图3所示
《4》将鼠标指针移到第1行1列单元格内,
在属性面板中将《宽》设为50,《高》设为30,单击《常用》工具栏中的图像按钮,打开《插
入鼠标经过图像》对话框,如图4所示。
图3 《5》在打开的< 插
入鼠标经过图像>对话框
中,单击《原始图像》后
面的《浏览》按钮.。在打
开的对话框中选中一幅
图片,单击确定按钮,在
单击《鼠标经过图像》后面的《浏览》按钮,用同样的方法选定一幅图片,如图5所示
《6
》设置完成后,单击《确定》按钮,然后同图2
同第4,5步一样为第1行的第1,2列也分别设置鼠标经过图像。然后将鼠标指针置于第一行第三列的单元格内,在《属性》面板中,为《宽》设为100,《高》。设为50。为《背景颜色》设为#333cc,如图6所示
《7》将鼠标指针置于表格
的第3行,按前面的方法,
为第3行单元格也插入一幅
图片。然后将鼠标指针置于
表格的下一行,单击《常用》
工具栏表格图标按钮,为文
档在插入一个3行3列的表格,如图7所示。《8》将鼠标指针置于插入表格的第1行第1列
图5 中,
在属性面板中将《宽》。设为120,然后将鼠标指针
置于第1行第1列单元格
内,按下Ctrl+Alt+t组合
键,
打开《表格》对话框,其
中的设置如图8所示。设
置
好后,单击《确定》按钮,给单元格插入嵌套表格。
《9》选中插入的嵌套表格在属性面板中将《对齐》
设置为剧中右对齐。然后将鼠标指针置于嵌套表格第一行中,按照前面的方法,为其插入一幅图片。同样的,为其第2,3,4,5列也分别插入图片。图6
图6
图8
7
《10》在属性面板中,将
第6列单元格的《高》
设为50,再将鼠标指针置
手把手教你如何制作一个完整的网站
手把手教你如何制作一个完整的网站 制作网站是一件耗时间的事情,不过我们也要带着责任心去做,想要制作好一个网站,必须要先了解它的具体操作流程,详细的了解各个步骤后,才能找到有效的制作方法。 第一、了解需求 制作网站的第一步就是要了解好客户对网站的制作需求,首先让客户把他们想要的效果、风格、开设的栏目等说明清楚,然后再根据他们提供县官的资料,比如单位的简介,联系方式,网站框架的设计要求,对产品和项目的描述等。 第二、制定网站的制作方案 工作人员与客户双方要协商好关于网站的制作的内容、细节和风格等问题,最终达
成共识后才能开始制作,如果制作之前没有商量好,那么制作的结果会使得客户不满意,矛盾就会产成了,所以工作人员要负责,在制作之前客户也不能抱着随便的心理。协商好了之后就可以直接支付相应的费用,并签合同了,合约是关系到双方的利益问题,也要引起重视,谨慎签订。客户在签完一系列的合同之后,要注册好域名和空间,因为网站开展运营的前提条件就是选择适合的域名和空间。 第三、网站的定位很关键 网站的制作应该明显的体现出相关单位的一个核心理念,因为我们要做的就是在最短的时间内、最有限的空间里将自己的核心思想通过相应的介质传播给用户,我们可以选择通过图片、文字、音频等途经进行传播,网站的建立就应该明确的宣传自己能为客户提供哪些帮助,而不是仅仅是为了“门面”的设计而忽略了网站的实用性。 第四、验收 就是网站制作完成后应该多次进行审核、修改和通过客户的验收,这样一个网站才能算是建好了。如果网站涉及到图片和文字等数据的安全问题,应该立即采取更新、修改或者找回密码等措施,我们有权利制作网站,那就要旅行好维护网站安全的义务。 通过以上的详细介绍,相信大家对网站的制作流程都已经很熟悉了,想要制作网站的朋友赶紧尝试一下吧。
Photoshop制作一款漂亮的网页模板
在这篇网页设计教程里,你将学习制作可以用于整站的一个既优雅又专业的网页,我们将用到Photoshop软件里的一些基本的工具,比如:笔刷和图层等。而且在教程下方包括了此网页的HTML/CSS/JAVASCRIPT模板和素材,你可以下载用作学习或使用都可以。 下面先预览一下本教程的最终效果: 教程开始: 第一步:新建文件打开PS软件,点击文件-新建命令或Ctrl+N键新建文件,设置宽度1020px,高度1180px,背景默认为白色,点击确定即可; 第二步:创建导航背景我们将从header开始我们的设计,所以我们先用矩形选框工具,在画布上新建一个矩形选框,如图所示,填充颜色#393939;
然后设置图层的混合模式为叠加,不透明度设为23%; 第四步:创建网页logo和name对于教程中的logo,我使用了Georgia字体并设计为粗体并倾斜,设置‘SIX’的颜色为#FFFFFF,‘STUDIOS’的颜色为#F7E5C4,logo旁边的图片用的是素材中的boxupload32图片。样式如图所示: 第五步:加入导航链接活动链接的颜色我用的是#DBD1BE,普通链接用的颜色为:#ABAAAA。 为了使活动链接显示的更突出,在其后便添加一个矩形框。选择圆角矩形工具,设置半径为5px,前景色为#464646,然后在活动链接处添加矩形背景,样式如图: 给矩形背景图层添加内阴影和描边效果,具体设置参数如图:
第六步:给特色区域添加背景在我们网页布局的顶部,需要有一块特色区域,这块区域通过播放幻灯片将网站的特色内容展示给来访者。这块区域也可以同时包括对网站的介绍等,第一步我们需要做的就是利用矩形选框工具选中这块区域,然后在此矩形选区中填充颜色#D3CAB8。 然后你需要下载
网页设计库和模板的应用
52门户网站实训指导(一) 实训目标: 1 掌握门户网站的设计技巧。 2 掌握库项目和模板的制作及使用方法。 实训步骤: 一创建站点。 在Dreamweaver CS3中定义一个本地站点,命名为“52menhu”,存储位置为:D:\sample\52menhu\,并将本项目素材文件夹下的图像文件夹image复制到网站的根文件夹下。然后,选择“窗口”→“资源”命令或者按F11键,打开“资源”面板。如图1。 图1 资源面板图2 新建库项目 二创建库文件。 单击“资源”面板右下角的按钮,新建一个库,然后在列表框中输入库的名称banner并加以确认。使用同样的方法创建名称为foot
的库文件。 二、制作主页的Banner 基本步骤: 1.在“资源”面板中双击打开,找到库文件banner.lbi。 2.插入一个3行1列,宽为760像素的表格。 3.设置表格属性(具体步骤参照书讲解)。 4.插入图片,输入文本。 最终效果如图3所示: 图3 banner效果图 制作页脚 基本步骤: (1)在资源面板中打开库文件foot.lbi; (2)插入一个3行1列,宽为760像素的表格; (3)设置表格属性,参数如图4; 图4 表格属性 (4)输入文本,并保存文件。效果如图5所示。
图5 页脚效果图 ●四、库项目的应用 ●1.插入库文件 新建页面myindex.html,依据前面做的banner.lib和foot.lib 文件充实首页面myindex.html。打开“资源”面板,点击左下角的“插入”按钮,分别将两个库项目分别插入到页面对应位置。 2.编辑库项目 在资源面板中单击“编辑”按钮,可打开库项目进行编辑。编辑的方法同编辑普通页面一样。 任务2 制作女性频道子页 1、使用模板建立子页 操作步骤: (1)将素材中的首页复制到站点中。选择“文件”→“另存为模板”命令,将已有页面另存为模板,命名为moban1。 2、定义可编辑区域 操作步骤: (1)选择“插入”→“常用”命令,单击“可编辑区域”按钮或者选择“插入”→“模板对象”→“可编辑区域”命令,打开“新建可编辑区域”对话框。
用表格为网页布局
第15课用表格为网页布局 绍兴市树人中学黄学锋1.设计思想 本节课的主题是对网页内容的排版。为了提高学生的建网兴趣,接受网页中表格的排版定位作用,设计了提供宠物——领养宠物——建立宠物园的教学过程,以“给宠物网上安家”、“不同的宠物需要不同大小的生活空间”等为引导,设计使用表格中不同大小的单元格来让宠物“和睦相处”。同时,请学生建立自已的开心宠物园,掌握网页的表格排版功能。 2.教材分析: 布局是网页制作的第一步,在本节教材中,先提出了规划布局,再进行表格定位,最后进行定位调整。这要求教学过程中需要对学生明确:对于网页中对象多而杂的情况,必需先规划、再定位,而用表格是一种很实用而有效的途径。 3.学性分析 在前几节课中,学生已学会了建立站点、新建主页、插入素材等操作。为了区别WORD和PPT等曾经排版方法,在学习网页排版时,创设一种情境能让学生对于多个网页对象能自然的用表格进行页面布局。通过这种教学方式,能让学生觉得网页表格排版理所当然,利用情境也大大提高了操作兴趣,在操作中掌握了技能。 4、教学目标 知识目标:用表格排版主页使其达到页面整洁有序; 技能目标:在网页中插入表格并更改表格的属性; 情感目标:用表格排版网页解决了网页版面杂乱的问题,提示同学们凡事要有计划,做事要遵守规则,促进其做事的信心。 5.重点难点 重点:插入表格和更改表格属性。 难点:让学生灵活掌握排列表格和设置表格属性的方法。 6.教学策略与手段 以网络流行的开心菜园、开心农场为引入,整堂课围绕建立自已的开心宠物园为主题对学生进行教学,最后通过若干学生作品展示来提高表格操作技巧。 7.环境与素材 1.教学环境:多媒体网络教室,配备投影仪;学生计算机中安装IE5.0以上版本及Frontpage2000以上中文版,要求能上因特网; 课本准备。 2.教学素材:为学生准备好一批宠物GIF图片。
教学设计《Word制作网页》
教学设计《Word制作网页》 本文从网络收集而来,上传到平台为了帮到更多的人,如果您需要使用本文档,请点击下载按钮下载本文档(有偿下载),另外祝您生活愉快,工作顺利,万事如意! 第12课用word制作网页(一) 执教者曹煜 【教学目标】 学会用word制作简单的网页。 掌握word制作网页的基本过程。 学会预览网页并保存网页。 【情感目标】 引导学生体验制作网页的乐趣。 【教学重点与难点】 重点:(1)了解网页制作的基本过程。 (2)用word制作简单的网页。 (3)将word保存为“web页”格式。 【课时安排】 1课时。 【教学方法】 任务驱动教学法。 【教学流程】 一、引入
同学们当你们上网浏览网页时,不知道有没有注意网上有很多个人网页。其实现在有许多人都在制作自己的网页并把它发布到因特网上,供人们浏览、欣赏,这样同时也展示了他们自己。 我这里有几张,是和你们差不多大的同学制作的网页,大家欣赏一下,看一看他们都制作了些什么网页? [广播展示网页:世界地理、星座、机械公敌……] 学生欣赏,观察网页各个元素。 网页就欣赏到这里,我想你们看了网页后肯定有自己的想法,你想制作一张关于什么的网页,能不能告诉大家?…… 学生说,自己想制作的网页。 二、新授 好,今天我们就来制作一张属于你的自己网页! 任务一:新建空白网页,设置网页背景,输入网页名称,保存网页。 其实制作网页并不是很困难,用我们学过的word 就可以做到。 [广播:打开wordxxxx,出示任务一] 和使用“画图”软件画画时需要一块空白画布一样,制作网页首先需要的是一张空白的网页。
在给你们的教材里,开始就介绍了如何新建空白网页,下面请你自己读一读,再试一试,同座位来比一比,看谁能先建成空白网页。 学生操作:新建空白网页。 [广播:出示老师网页] 在你们新建网页时,我也新建了一张,好像我的比较漂亮,这是怎么回事? 学生回答:背景。 怎么设置背景呢? 学生在书上查找,上来演示。 输入标题文字。 俗话说得好万事开头难,制作网页这个头开的还不错,先保存起来。 [再出示任务一] 学生操作完成任务一。 任务二:插入表格,输入小标题文字,插入图片。 [广播:出示老师网页] 在同学们完成任务一时,我已经完成了我的网页,大家对照一下,我的网页比你的多了些什么呢? 大家对照一下做好与没做好的网页,想想下面我们应该做什么啦? 学生对照自己和老师的网页,说说还有什么没
网页制作教案
课堂任务快速建站技术—模板的应用 课程名称:利用模板快速建站 课时数:4 教学目标: 知识与技能:了解模板的定义,模板的可编辑区域的定义。 过程与方法:掌握在网页中创建模板的三种方法; 掌握模板的可编辑区域的定义、建立和取消; 掌握模板的应用和取消; 掌握如何将模板从网页中分离出来; 掌握使用模板快速建站; 情感与价值观:培养学生主动思考问题的习惯和自主学习的能力。 教学重点: 在DreamWeaver8中创建模板和应用模板。 教学难点: 学会模板的可编辑区域的定义、建立和取消。 教法: 任务驱动法 学法: 记录关键步骤,积极动手练习。 课前准备: 第三章第三节素材和实例,视频教程:快速建站技术-模板的应用.WMV,快速建站技术-模板的应用(快速更新).WMV。 教学过程设计: (一)导入设计: 我们制作一个网站时,会发现许多网页的版面和元素都是相同的,在设计一个新页面时,我们还可以用复制原来做过页面来减轻工作量。但是如果一个网站有几十、上百张页面都基本相同,这时修改或更新网页的共同元素如网站标志时,会发现工作量实在太大!而使用Dreamweaver 软件中的模板功能来创建新网页,可以大大提高更新和修改的工作效率,网站的维护工作会轻松很多。本节主要内容如下。(二)新课讲解设计: (1)请学生带着以下问题阅读P110~115知识预读,问题如下: A、模板的定义? B、模板创建的三种方式?了解资源面板的使用方式。 C、学会模板的可编辑区域的定义、建立和取消; D、学会模板的应用和取消; E、学会如何将模板从网页中分离出来; (2)教师提问,请学生一一回答以上问题。期间对回答问题的同学要多多表扬,如“你真棒”。增强学生对教师的亲和力。 (3)教师在学生回答问题的同时,总结评价并补充相关要点。 (4)教师展示完成后的模板网站作品,与学生共同讨论分析该网站制作过程。 (5)教师演示建立模板,创建可编辑区域,应用模板等部分操作(详见教材任务一)。
怎样制作自己的网页
和怎样制作自己的网页 时间:2009-09-22 19:35来源:未知作者:大宝库点击:9865次 阅读工具:字体:大中小 一 首先,可以告诉想学网页制作的朋友。学习制作网页和学习其它知识一样,是要有基础的。在基础之上学习起来会比较轻松和快捷的。其次,要清楚学习它是用来做什么。 建议你要具备的条件:对电脑熟练操作,使用电脑最好在一年以上,对网页设计感兴趣,有较充足的学习时间,熟悉office办公软件。当然,这些不是一定必须的。 第一阶段:开始时最好是学些网页编辑软件,如:FrontPage、Dreamweaver.这样可以使您更了解网页制作与运营的原理。最好使拿本教程来学学,结合教程边学习边制作。 第二阶段:会用网页制作软件后,已会制作一个较完整的网站了。但为了能使自己设计制作的网页尽善尽美,还是学习网页的核心技术吧!网页编辑语言(包括:html、css、javascript、asp、xml等)。你可以选择地学习。 第三阶段:结合你自己已掌握地知识来开发网站,可以开发出别人给你定义的目标网站。到了这个时候,你就成为真正的网站开发者了。 怎样制作网页,不是说一两篇文章能够说清楚的。以上介绍的是制作网页的主要纲要,希望能够给想要学习制作网页的朋友一个参考。 二 一、工具 1、空间 网页做好了肯定是要发表上网的,所以必须先申请一个空间;免费的空间不是很稳定,容量又小,也不好申请,建议到大的网站如新浪、网易去先买一个个人空间,大概有个20M以上的就可以了。 2、软件 推荐使用Dreamweaver6.0中文版,这个软件最大的特点就是“所见即所得”,也即是制作过程中看到的,便是到时发布到网络上的。 二、教程
《网页制作》复习题(含“答案”)
《网页制作》复习题(含某人的“答案”) 写在前面:资料来源于互联网和本人对这本书的理解,不一定准确,仅供参考。需配合教材使用。各题所对应的页码数待确认。如内容有误,请指出。 预祝大家网页设计与制作考试取得佳绩。 第1章网页制作概况 网页的概念 网页是用HTML(超文本编辑语言)语言编写,通过WWW传播,并被WEB浏览器翻译成为可以显示出来的集文本、超链接、图片、声音和动画、视频等信息元素为一体的页面文件。 网页HTML文件与web浏览器间的关系理参照P5 首页和主页的异同点 首页与主页的区别:浏览网站时最先访问的页为首页,一般为欢迎信息,通过链接再进入主页(例如:榕树下网站)。主页是整个网站的导航中心(例如:163网站)。有些网站首页即主页。 网页制作的常用工具软件有哪些 FrontPage、网页制作三剑客(Dreamweaver与Flash、Fireworks并称为Macromedia的网页制作三剑客)、Photoshop …… 网页正文区
和文件头的位置关系,文件头内的唯一一个必须出现的标记是哪一个标记?Title标记 HTML文件的基本框架: 文件开始 表头区开始文件结束 单标记和双标记的概念,HTML标记中哪些是单标记,哪些是双标记?P5起 单标记指令(由<标记指令>构成),如:、 是HTML格式中特有的段落元素。在原始文件中的 ,指出在这儿告一段落,下面的文字另起一段。 另外一个类似的标记元素是 文本 文本 高层超高层电梯的配置 在超高层建筑中,快速、高效、平稳的垂直服务是不可缺少的。电梯作为垂直交通工具,对其数量的配置、控制方式及有关参数的选定将不仅直接影响建筑物的一次投资一般电梯投资约占建筑物总投资的10%左右),而且还将影响建筑物的使用安全和经营服务质量。在建筑物内,恰当地选用电梯的台数、容量、运行速度、控制方式非常重要,而建筑物内的电梯一经选定和安装使用就几乎成了永久的事实,以后若想增加或改型非常困难,甚至是不可能的了,因此,在设计中应该在设计开始时对电梯的配置应予以充分重视。 现代超高层建筑大都在100 层左右,建筑内人口流动大,纵向交通主要依赖电梯,有效设计超高层建筑的电梯的关键是运用各种局部电梯进行服务,并把局部区域电梯系统组织起来。通往这些局部区域,通过由地面始发站至局部区域的空中候梯厅之间的快速穿梭电梯进行服务,乘客到达空中候梯厅后再换乘区间电梯。为了能够将乘客以最快的速度运送到达目的地,一般以建筑每30~35层为一局部区域。常规超高层大厦(100层)电梯配置如图1所示。 图1 常规超高层大厦(100层)电梯配置 在配置超高层电梯应注意以下几点: 1.单组电梯的可行的电梯限制数是8台。 2.位于每一电梯楼层区域(办公楼)的上面楼层数不应超过15~16层(双层的是18~20层)。 3.典型办公楼电梯载重单层为:1350、1600和1800kg。双层为:1350/1350;1600/1600; 1800/1800kg。 4.典型空中走廊/观光层电梯载重量为2040; 2250; 2500kg。 5.电梯的垂直加速度在0.9~1.5m/s2。 6.电梯速度偏重于克服长行程;典型的无减速箱电梯速度是:2.5、3.5、4.0、5.0、6.0、 7.0、 8.0、 9.0、10.0m/s等。 7.牵引式电梯最长行程为600m。 二、高层超高层电梯的控制系统 教您制作静态网页的方法 一、网页设计基础 1、熟悉Dreamweaver 8的工作环境 2、创建新站点 创建本地站点:站点----管理站点----新建----站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)----跟随向导设置直至完成 3、网页文件的基本操作 a、创建、打开与保存网页文件 创建:文件----新建----创建 打开:文件---打开----选择欲打开的文件 或者在右边的文件浮动面版中选择打开 保存:文件---保存或另存为 b、设置网页的页面属性 修改---页面属性---然后设置(标题、背景、背景图像、文本等) c、设置网页对象的颜色 网页对象,如页面背景、文字、链接都经常需要设置颜色。 可在各自对应的属性面版中设置。 d、网页文本的输入与属性设置 文本可键入、导入、粘帖 文字可设置字体、大小、颜色、格式等。 键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的 换行:ENTER、SHIFT+ENTER 实例练习: 1、输入以下文字 书签夹在诗集里, 落叶夹在深秋里。 喜悦夹在生活里, 追求夹在人生里。 2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。 3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项目符号,对齐方式为“居中”。然后保存、预览。 比较两次设置的效果。 e、网页图片的插入与属性设置 插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中) 插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。 用WORD自已做一个干净的网页 看见有人顶,我就把自已详细的步骤写出来。 1.首先打开WORD文档,建好一个页面,在第一页上写上自已的网页分类,我写的是“我的网页”当然你可以写别的,开始时你可能想不那么全,这没关系。这是可以更改的。如附录2。 2.把按Ctrl的同时单击超链接来跟踪或打开超链接改成只通过单击就跟踪超链接。方法是:在“工具”菜单上,单击“选项”,再单击“编辑”选项卡。清除“用Ctrl + 单击跟踪超链接”复选框。 3.然后多建几张页面。就是多弄几张纸,并可插入页码。 4.接下来就是细分:把建好的页面中各分项起个详细的名字。比如我在“职业生活”下起的名字是“职业生活的详细网页”,在这一行的最后写上“回首页”。当然你可以在这一张的开头写为“回首页”。然后把它设为一张。下面依次排好。 5.然后把你建好的页面连同详细页面全选上,设置好字体及字号。然后单击“格式”找到“样式和格式”单击它。这时你的页面所用字体及字号等情况就会在“样式和格式”中显示出来。当然你如果不满意也可以单独调整。 6.接下来就是选中“我的网页”中各分项如“职业生活”然后击右键就可以看见“超链接”。然后单击它。会出现下面的页面: 选中“本文档中的位置“。选中“职业生活的详细网页”。点击“确定”。第一个超链接是不是做好了。接下来一个一个做好就可以了。主要是重复动作。我只能做到这样,不知哪个高手可以指点一下,直接就“OK”的。 7.接下来回首页就不用说了吧。道理是一样的。 8.如果你你觉得麻烦的话,直接把我做好的网页下载下来改一改,改成自已的习惯就行了。 9.到此基本上就可以了。如果你觉着还不详细的话可以参看下面的附录1或者看WORD中的帮助。慢慢就会“OK”的。 用表格做网页,表格在网页制作中有着举足轻重的地位,很多网站的页面都是以表格为框架制作的,这是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能,灵活、熟练地使用表格,会使你在网页制作中如虎添翼。 插入第一个表格 我们看一下这个网页,虽然看起来很复杂,但主要是利用表格制作的。去掉文字和图形,可以看到其表格框架为下面这个样子。 下面我们就利用表格制作这个网页。启动Dreamweaver后,自动产生一个空文档。我们先来定义网页尺寸,不同的分辨率所查看的网页最终结果是不一样的,为了照顾更多的上网者,我们设置640×480分辨率(图3),单击状态栏上的窗口尺寸箭头,在弹出的列表中选择“600×300 (640×480),Maximized”,窗口就小了,做出的网页在640×480分辨率下会显示正常,编辑区大小为600×300,我们编辑的网页宽度就定为600,高度可以大些,在浏览器中显示时会有竖直滚动条。设置页面尺寸我们看一下网页的布局,共有三个主要表格,最上面的表格放置logo图标和banner广告条,中间的表格为主要栏目切换条,最下面的表格为网页正文。根据网页布局,我们先来制作最上面的表格。单击“对象面板”中的插入表格图标,弹出“Insert Table”对话框。设置行数(Rows)为1,列数(Columns)为2,表格宽度(Width)为590Pixels,表格线宽度(Border)为0,另两个选项“Cell Padding”表示表格内文本与表格线的距离,“Cell Spacing”表示表格单元格之间的距离,这里我们不做设置,单击“OK”,表格就插进来了。 “插入表格”对话框 将光标定位在表格的第一个单元格内,可以看到状态栏左侧的标签选择器处显示为 “{body}{table}{tr}{td}”,其中table表示表格,tr表示表格中的行,td表示单元格,现在td被加粗显示,说明光标处在单元格内。单击一下{table},标签选择器处显示为“{body}{table}{tr}{td}”(图5),再看编辑区内的表格,表格周围为一圈黑线,表示表格被选中了,四周还有几个黑色的小方块,是表格拖放手柄,可以用来改变表格的大小。用标签选择器选择表格选中表格后,我们查看一下属性面板,可以看到刚刚设置的一些表格属性,行数(Rows)为1,列数(Cols)为2,表格宽度(W)为590Pixels。以后要改变表格的属性,就可以在属性面板中进行了。 表格的属性面板 按Ctrl+S,将此文件保存在D盘myweb文件夹下。 接下来我们在表格中插入图形。在第一个单元格内单击,然后按下Ctrl+Alt+I键,弹出插入图片对话框,选择事先做好的logo图片,单击“Select”,图片就插到第一个单元格中了。 如何用Word制作个人简历 Office软件 2010-11-09 21:30:49 阅读208 评论0 字号:大中小订阅 具体步骤如下:★初始化页面 新建一个Word文档,按“Ctrl+S”快捷键将其保存为“个人简历”。 执行菜单栏上的【文件】【页面设置】命令,打开【页面设置】对话框。 单击【页边距】标签,打开【页边距】选项卡,在【页边距】选项区域中将上、下、右边距设为 2.4厘米,左边距设为边3厘米。单击【确定】按钮完成页面设置。 ★为表格添加标题 输入标题内容“个人简历”。 在标题下一行29字符处双击鼠标,输入内容“填表日期:”。这是Word的即点即输功能,它能从我们指定的位置按我们指定的对齐方式输入文本。这里是在29字符处插入一左对齐制表位,如 下图所示。 选中标题,设置标题的字体为宋体、小二、加粗、加下划线,且居中对齐。 选中标题,执行菜单栏上的【格式】【调整宽度】命令,打开【调整宽度】对话框。在【调整宽度】对话框中设置新文字宽度为:8字符。如下图所示。 ★插入表格 单击菜单栏上的【表格】【插入】【表格】命令,打开【插入表格】对话框,在【列数】和【行数】文本框中分别输入2列和14行,如下图所示,然后单击【自动套用格式…】 按钮。 打开【表格自动套用格式】对话框。在【表格样式】下拉列表框中选择典雅型样式,如下图所示。单击【确定】按钮返回【插入表格】对话框。 单击【确定】按钮,此时表格以所选择的样式插入到页面中。 也可以在插入表格后,单击菜单栏上的【表格】【表格自动套用格式】来选择表格的样式。 ★修改表格结构 将指针停留在两列间的边框上,指针变为,向左拖动边框到合适的宽度。我们可以事先在第一列中输入文本“应聘职务”,拖动边框时以能容纳完此文本的宽度为准。如 下图所示。 Photoshop详解制作漂亮的绿色首页模板,第一,对于一些做网站的爱好者,下面真的是个好例子;第二,设计出来的效果也很不错;第三,内容齐全,很值的学习。 在这篇教程中,你将学会如何在photoshop中制作一个漂亮的绿色的干净的网页效果图。你将学会一些很时髦的设计技巧,像是如何制作3D丝带,或者是如何设置看上去很专业的渐变色。这是教程的第一部分。 最终效果图 看一看我们最终的效果图吧,看上去还不错:> 在photoshop中新建文档 1在photoshop中新建一个文档,尺寸为980px × 830px. 2 如果你在photoshop软件界面中,没有看到在画布的周围看到标尺,点击试图>标尺(Ctrl + R)可以显示标尺。 3 在画布的四个边,分别拖拽四条标尺线。在这四条线中间,我们将绘制我们的页面。 创建页面背景 4 选择圆角矩形工具(U), 设置圆角半径为10px,设置颜色为#E0E0AC, 在你的整个画布中拖拽一个圆角矩形。设置这个图层名字为“bg“. 5 好了,现在,我们将扩大我们的画布。首先,缩小我们的画布视图(ctrl+-),然后点击图像>画布尺寸(Alt + Ctrl + C),然后根据下面的截图设置参数。 6 再一次选择图像>画布尺寸(Alt + Ctrl + C),然后根据下面的截图设置参数。 7 在图层面板中点击背景图层,设置前景色为#6C821C,用油漆桶(G)填充背景。 8 在背景图层上面创建一个新图层,命名为”gradient“. 9 在工具栏中选择渐变工具(G),从画布头部开始向下拖拽出一个从白色到黑色的渐变。 10 设置该图层渲染模式为颜色加深,然后设置图层图层透明度为10%. 教你制作静态网页的方法 一、网页设计基础 1、熟悉Dreamweaver 8的工作环境 2、创建新站点 创建本地站点:站点----管理站点----新建----站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)----跟随向导设置直至完成 3、网页文件的基本操作 a、创建、打开和保存网页文件 创建:文件----新建----创建 打开:文件---打开----选择欲打开的文件 或者在右边的文件浮动面版中选择打开 保存:文件---保存或另存为 b. 设置网页的页面属性 修改---页面属性---然后设置(标题、背景、背景图像、文本等) c. 设置网页对象的颜色 网页对象,如页面背景、文字、链接都经常需要设置颜色。 可在各自对应的属性面版中设置。 d. 网页文本的输入和属性设置 文本可键入、导入、粘帖 文字可设置字体、大小、颜色、格式等。 键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的 换行:ENTER、SHIFT+ENTER 实例练习: 1、输入以下文字 书签夹在诗集里, 落叶夹在深秋里。 喜悦夹在生活里, 追求夹在人生里。 2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。 3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项 目符号,对齐方式为“居中”。然后保存、预览。 比较两次设置的效果。 e. 网页图片的插入和属性设置 插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中) 插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。 在图像属性面版中设置 f. 插入层 方法: 1、点击插入面版中的“描绘层”;2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层; 3、可以随意移动层的位置; 4、可在层中插入图像、文字等。 g. *插入表格,用表格定位 方法: 1、先用鼠标点至欲插入表格的位置; 2、点插入面版中的“表格”—“插入表格”; 3、确定行数、列数后确定即将表格插入到选定位置了; 4、可在表格中任何单元格里插入图像、文字等。 h. 建立超链接 方法: 1、选中要建立超链接的文字或图像; 2、点右键“创建链接”打开的窗口或在属性的链接栏里,填入链接的目标。(如:本网站另一个网页,或外部网页如https://www.360docs.net/doc/d62284759.html,,或电子邮件如:mailto:zdhwangji@https://www.360docs.net/doc/d62284759.html,) 3、在页面属性里修改链接的属性:修改--页面属性(链接、活动链接、访问过链接) 二、制作实例1 实训项目二 Photoshop制作网站首页第1讲制作首页的主体部分 课程总览 在本课程中,朋友们将学习到以下内容: ?? 如何通过Photoshop CS3 进行网站首页的版面设计?? 各种网页版面元素的设计技巧和方法 ?? 如何进行网页的切图以及切片的属性设置 ?? 如何创建与Flash 整合的FLV 视频 ?? 在Dreamweaver CS3 中使用“Spry 选项卡”构件 ?? Photoshop、Flash、Dreamweaver 的协同工作 第1 讲制作首页的主体部分 本文以“石桥花园”的网站首页为例,来演示页面创作的整个过程。其实“石桥花园”是不存在的,笔者虚构出来也并非只为完成本例,我一直向往生活在幽静、闲雅之所,虽然“石桥花园”离我的初衷有很多差异,但也多少能表达我的一些想法吧。 书归正传,早先的网页页面设计一般是以Dreamweaver 为中心,由Photoshop 或Flash 等软件来提供各种素材,如图片、动画、文字等。自从Photoshop 出现了“切图”等专为网页设计所定制的功能后,设计的中心已慢慢转向了Photoshop。因为Photoshop 本身以图像为基础的特性,决定了他能对版面施以更精确的控制,使网页的页面能够更加灵活和生动的布局,这几乎完全解放了网页设计师的创作灵感,不再受方方正正的网页表格所约束。现在我们要制作的是“石桥花园”首页的主体部分,主体部分包括标题、主展示图片和导航条。网页教学网 1. 打开Photoshop CS3, 执行菜单“文件> 新建”。在新建对话框中设置名称为“石桥花园”,宽度为“777”、高度为“800”,这个数字并不“官方”,只是我在平时工作当中测试出来的而已。对于网页来说,一般只用于屏幕显示,所以分辨率为“72”、颜色模式为“RGB 颜色”,其它参数保持默认。 2. 按下Ctrl+A 全选页面,执行菜单“编辑> 填充”将页面填为纯黑色。在工具箱中选择矢量的“矩形工具”,绘制一个如图1-1-1 所示长方形A。然后使用白色的“直接选择工具”将该矢量形状扭曲成如图1-1-1 中B 所示外观,该形状的十六进制颜色值为“#246b34”,一种厚重的深绿色。 怎么样做网页一、制作网站前的准备可以使用一种汉字输入方法,快慢不拘。会用IE点击上网并浏览网页知道一些最最基本的术语,例如说超级链接你知道点一下就能到别的网页去,这个相信你也会吧。你会使用office 软件——没听说过?WORD知道吧?就是你打字的东东。你肯定打过什么文稿之类的东东吧,那就得用到WORD,要不WPS也行,反正一定得会使用这样的软件,不然你就没办法实现制作网页的那些功能。 OK,假设你上面这些东东你全都会的话,那就可以制作网页啦。二、制作网页前必须了解的东东为了使我们这个教材真正实现谁都学得会,谁都看得懂,我决定不在这个教材里说任何专业的东东,我们是想做网页而不是想当网络管理员,更不需要为考什么等级而努力。所以我将这教材定位在最最简单明了的基础上,有些地方写得恐怕你看了也会说一声“弱智”,不过请相信,网上一定还有比你还弱智的朋友等着这些提示呢。呵呵,那么,开始制作啦!首先,我们需要有必要的软件来制作网页。我推荐你使用 Frontpage2003(没听说过吗?那我给你解释一下,你去街角的卖盗版盘的老板那问问,有FRONTPAGE2000全版的没有?老扳就会热心的给你一套OFFCE2003,说这就是了,然后要你买下),这个软件同 WORD,EXCEL之类软件一样,是OFFICE系列的一员,安装OFFICE的时候将它也装上,你就能做网页啦,别担心你不会用,我会手把手教你做的。如果你不会装OFFICE,那就请你哪位哥哥帮你个小忙,请他为你装上,其实一点也不难装。好,假设你安装好了FRONTPAGE2003(FRONTPAGE2000也可,不过使用起来没有FRONTPAGE2003顺手),我就是用的FRONTPAGE2003,所以教材上也以此为准。喂,你先别得意,有了这个FRONTPAGE2003是可以做网页,不过还得有其它一大堆软件你才能做得和我的馨香小憩站一样呢,你要学的东东多着呢,千万别得意哦。三、正式开始啦好,打开FRONTPAGE2003,第一次进入左边会有个烦人的什么视图窗,这东东用不着,关掉它!怎么关?记好了,方法如下:点击上面那菜单条——选查看——在菜单上那个标有“视图栏”的小勾上点一下,呵呵!会了吧,为了简明起见,这个操作我将写为菜单——查看——视图栏记住了吗?这样你看着省心我打着省事,皆大欢喜 :- 现在出现在我们面前的是一个空白的页面。 1、给这个网面起个名字,怎么起?请看方法:菜单——文件——另存为……——(选择你想保存的文件名、 教你怎么制作个人网页 从这儿开始 如果你对于个人网页很陌生,不知道该从哪里开始着手去做,那么就请按照下面所说的去做,你不需要具备网站建设知识,甚至不需要了解或使用任何编码,就能够创建属于你自己的个人网页。 把你的站点发布到网上 简易的站点主机——网上有一些免费的网络主机服务,它们能为你提供一种简单的方式,使你利用在线的简单的设计编辑器或使用模板来制作一个个人网站。你所要做的全部内容就是撰写你的网页内容,而不需要编码。 博客主机——如果你想要创建一个博客,那么有一些站点是你应该考虑的。它们很容易学会,也不需要任何技术性的知识。除了网页和博客以外 档案站点——像 MySpace 这样的网站, 可以让你创建一个在线的个人空间, 你可以在这个空间内和互联网上的其它人进行交流。你可以添加几张照片,告诉别人关于你自己的事情。 在线相簿——把你的数码相片放到网上,创建你自己的个人在线相簿。 Wiki ——另一种形式的网站。 Wiki 是一个既允许你,也允许你的访客更新你的站点的网站。你来选择主题,他们帮你写内容。 制作在线网页 网站制作程序——当你想要制作你的网站的时候,你可以使用一个与你的网络主机服务一起供给的在线编辑器,或者你可以买一个你自己的程序来在你的电脑上设计网页。如果你想要创建属于自己的网页,那么互联网上有许多这样的程序可供选择。 上传网页——如果你决定在你的电脑上制作而不是在线制作你的网页的话,那么,在完成制作后你需要使用某种方法把你的网页上传到你的网络主机服务器上去。许多主机服务提供给你了这样的程序,来帮你实现这一点,但是有的却没有。如果你的主机服务提供商没有给你提供这种程序的话,你会需要一个这样的程序。 图形 所有关于添加图形的事情——这里有你所需要知道的如何开始向网页中添加图形的全部内容。了解如何链接到你的图形,如何把它们从网络上下载下来,如何从你的网站上把它们上传上去以及其它。 免费在线剪辑艺术——你可以在你的个人网站上免费使用的图形。下载这些图形,把它们添加到你的网页上,来营造一个更加个性化的网站外观。 模板和娱乐 复制 /粘贴模板——如果你想让你的网页看上去是某一样子的你可以利用模板来设计它。拷贝下代码,把它粘贴到你的 HTML 编辑器中。然后在空白处填上你自己的个人网页上想要的内容。 添加在线挂件 /附件——如果你想要在你的网站上添加些有趣的东西,试试这些。天气预报,游戏,占星,地图等许多东西你都可以尝试下。 存档资料成绩: 课程设计报告书 课程名称网页设计与制作 题目设计个人网站主页 分院电信分院 专业班级电子商务 学号 学生姓名 指导教师 2011 年 6月 20日 课程设计评阅意见 评阅人__________职称________ 年月日 目录 第1章课程设计任务书 .................................. 错误!未定义书签。 一、课程设计题目设计个人网站主页............... 错误!未定义书签。 二、课程设计工作:................................... 错误!未定义书签。 三、课程设计的内容要求:............................. 错误!未定义书签。 1、课程设计要求.................................. 错误!未定义书签。 2、课程设计内容.................................. 错误!未定义书签。 第2章课程设计目的 .................................... 错误!未定义书签。 第3章课程设计内容................................... 错误!未定义书签。 设计一选题的基本原则................................. 错误!未定义书签。 (1)选题应反映本专业的培养目标,符合专业综合训练的要求。错误!未定义书签。 (2)选题要有利于深化所学的专业知识和拓展所学的知识面。错误!未定义书签。 (3)选题的难易程度和工作量要适当,保证在规定的时间内,在教师的指导下,经过努力能够完成。 设计二选题范围..................................... 错误!未定义书签。 设计三选材......................................... 错误!未定义书签。 设计四正确运用DW和Ps ............................. 错误!未定义书签。 设计五课程设计心得................................. 错误!未定义书签。 第4章课程设计步骤 .................................... 错误!未定义书签。 设计一查找相关资料................................. 错误!未定义书签。 设计二利用Ps进行切片.............................. 错误!未定义书签。 设计三利用DW编辑.................................. 错误!未定义书签。 第二节制作表格——网页中动态效果的制作(第5课时) 教学目标: 1.知识目标 (1)理解动态网页与网页动态效果的区别。 (2)掌握网页动态效果的制作。 2.技能目标 掌握“插入”菜单中“组件”命令的使用,使得网页增添动态效果。 3.情感目标 通过学生自主学习网页动态效果的制作,形成积极、主动的学习气氛,激发学生的学习兴趣,培养学生的探究意识和创新能力。 教学重、难点: 1.重点:滚动字幕、交互式按钮等动态效果的制作与Flash的插入。 2.难点:各种效果对象的属性设置。 3.关键:动态效果制作中应图文并茂、色彩和谐、动静适宜。 教学方法:自主探究式学习、任务驱动式教学。 教学准备: 具有动态效果的网页,包括滚动字幕、交互式按钮和FLASH的插入 教学过程: 1.引入 老师打开静态网页和加有动态效果的网页,请学生感受它们的不同。学生观察、比较两张网页,指出它们的不同点。师生共同分析网页,引入新课的学习。 2.新授 任务1 滚动字幕的制作 教师巡视,个别给予指导。 学生完成任务后,展示作品,并演示操作。小结设置滚动字幕的关键点: 文本的大小、字体、颜色等。 表现方式。 运动方向。 背景色的设置。 任务2 交互式按钮的制作 教师巡视,个别给予指导。 学生展示作品,演示操作,小结制作交互式按钮的关键点: 按钮文本的设置。 按钮的颜色、背景色以及效果等。 图片按钮。 任务3 网页中插入一个Flash动画 教师巡视,个别给予指导。 学生展示作品,演示操作,小结插入Flash动画的关键点: Flash显示窗口的大小调整。 预览模式下才能看到Flash效果。 插入Flash后的网页保存。 学生参照教材内容完成网页动态效果制作,并比较分析其他同学的作品,对照自己的作品加以完善。
、
、、…… 双标记指令(由<起始标记>结束标记>构成),如:< HEAD > HEAD >…… 注释语句的含义,其正确书写格式 HTML标记的常用属性的含义,例如大小尺寸、对齐方式、颜色值属性的书写方式 在HTML文件中实现换段和强制换行的不同,及分别使用哪个标记 段落标记()与换行标记(
)
。
这个标记用来标识一个换行动作,相当于字处理文件中的按回车键的功能。在HTML文件中可以用它来调整行间距。在处理类似诗歌式的语句时常常用到。 语法格式:
HTML中的常用标记的对应名称 插入多媒体对象的HTML语句的正确格式P13-15 参考1.2.5图像与多媒体标记(个人认为)无序列表的相关知识P9 参考1.2.3列表显示1.无序列表(UI) 有序列表的相关知识P9-P10 参考1.2.3列表显示2.有序列表(OI) 表格标记的相关知识P11-P13 参考1.2.4表格标记 超链接语句的相关知识P15 参考1.2.6超链接标记 第2章DW网页制作基础 如果想更改工作区,可以使用“编辑”菜单中的什么命令切换到一种不同的工作区? 首选参数(P22) Dreamweaver站点的概念和特点(P29起) 一种组织所有与Web站点关联的文档的方法 通过在站点中组织文件,可以与FTP一起利用Dreamweaver将站点上传到Web服务器、自动跟踪和维护链接、管理文件以及共享文件。 除非定义站点,否则不能充分利用Dreamweaver的功能。 设置Dreamweaver站点的方法不止一种高层超高层电梯的配置
教你制作静态网页的方法
用WORD自已做一个干净的网页
用表格做网页
如何用Word制作个人简历
ps制作网页效果图—多种模版
教你制作静态网页的方法
Photoshop做一个网页
初学者如何做一个最简单的网页.
教你怎么制作个人网页.
网页设计与制作模板
制作表格网页中动态效果的制作