网页设计_网页设计作业 - CSDN
网页设计 订阅
网页设计(web design,又称为Web UI design,WUI design,WUI),是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化),进行网站功能策划,然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种,精美的网页设计,对于提升企业的互联网品牌形象至关重要。网页设计一般分为三种大类:功能型网页设计(服务网站&B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同,应选择不同的网页策划与设计方案。 展开全文
网页设计(web design,又称为Web UI design,WUI design,WUI),是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化),进行网站功能策划,然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种,精美的网页设计,对于提升企业的互联网品牌形象至关重要。网页设计一般分为三种大类:功能型网页设计(服务网站&B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同,应选择不同的网页策划与设计方案。
信息
外文名
Web Design,WUI design
相关项目
网站策划
设计目标
页面精美、逻辑清晰、体验良好
中文名
网页设计
域名选择
主要有.com、.cx、.cn、.net等
常用工具
PS、FL、DW、FW
网页设计概述
在进行网站制作前,首先要进行网站页面的整体设计。一个网站是由若干个网页构成的,网页是用户访问网站的界面。因此,通常意义上的网站设计,即指的是网站中各个页面的设计。而网页设计中,最先提到的就是网页的布局。布局是否合理、美观,将直接影响到用户的阅读体验及访问时间。在互联网高速发展的今天,网络已成为人们生活的一部分,成为人们获取信息资源的重要途径。信息的呈现离不开网页这个重要的界面,网页的主要作用是将用户需要的信息与资源采用一定的手段进行组织,通过网络呈现给用户。随着网络技术及其带宽的提高,网页的组成元素也发生了很大的变化。在90年代末,网页的构成元素主要就是大量的文本、表格、超链接和极少数量的静态图像和gif动图。现在的网页除了以上的组成元素外又增加了大量的图像、动画、视频、音乐、横幅广告以及多种动态效果。 [1] 
收起全文
精华内容
参与话题
  • 网页设计与制作(HTML+CSS)(一)

    万次阅读 多人点赞 2019-06-04 16:32:56
    初识html

    初识html

    1. 名词解释:
      ① Internet:即因特网
      ② www(World Wide Web):即万维网
      ③ URL(Uniform Reource Locator):统一资源定位符
      ④ DNS(Domain Name System):域名解析协议
      ⑤ HTTP(Hypertext Transfer Protoclo):超文本传输协议
      ⑥ WEB:即网页
      ⑦ W3C组织(World Wide Web Consortium):万维网联盟
    2. Web标准
      Web标准主要包括:结构标准、表现标准和行为标准。
      ① 结构标准:用于对网页元素进行整理和分类,主要包括XML和XHTML两部分。
      ② 表现标准:用于设置网页元素的版式、颜色、大小等外观样式,主要指的是css。Css(Cascading Style Sheet):层叠样式表。
      ③ 行为标准:指网页模型的定义及交互的编写,主要包括DOM和ECMAScript两部分。DOM(Document Object Model)是文档对象模型。ECMASpript是ECMA(European Computer Manufacturers Association)以javaScript为基础制定的标准脚本语言。
    3. 网页制作入门
      ① Html(Hyper Text Markup Language):主要是通过html标记对网页中的文本、图片、声音等内容进行描述。
      ② Css(Cascading Style Sheet):通常称为css样式或样式表。
      二、HTML入门
    4. Html文档的基本格式
      <!DOCTYPE>标记
      位于文档最前面。必须在开头出使用<!DOCTYPE>标记为所有的XHTML文档指定版本和类型。
      <html>标记
      <html>标记位于<!DOCTYPE>标记之后,也称为根标记,用于告知浏览器其自身是一个html文档。<html>标记标志着html文档的开始,</html>标记标志着html文档的结束,在它们之间是文档的头部和主体内容。
      <head>标记
      <head>标记用于定义html文档头部信息,也称为头部标记,紧跟在<html>标记之后,只要用来封装其他位于文档头部的标记。一个html文档只能含有一对<html>标记。
      <body>标记
      <body>标记用于定义html文档所要显示的内容,也称为主体标记。
      注:一个html文档只能含有一对<body>标记,且<body>标记必须在<html>标记内,位于<head>头部标记之后,与<head>标记是并列关系。
    5. Html标记简介
      ① 单标记和双标记
      单标记(空标记):单个出现的标签,例如:<hr/><br/>等。
      <标记名/>
      双标记:必须成对出现的标记,例如:<h1></h1><p></p>等。
      <标签名>内容</标签名>
      ② 注释标记:注释内容不会显示在浏览器窗口中,但是作为html文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。
    <!—注释语句-->
    

    注:注释标记中不能嵌套注释标记。
    3) Html文档头部相关标记
    ① 设置页面标题标记<title>
    <title>网页标题名称</title>
    这里写图片描述
    ② 定义页面元信息标记<meta/>

    <meta name=”名称” content=”值” />
    

    <meta>标记中使用name、content属性可以为搜索引擎提供信息,其中那么属性提供搜索内容名称,content属性提供对应的搜索内容值。

    <meta http-equiv=”名称” content=”值” />
    

    http-equiv/ content属性可以设置服务器发送给浏览器的http头部信息,为浏览器显示页面提供相关参数。

    <meta http-equiv=”refresh” content=”10”;url=http://www.itcast.cn />
    

    用于指定在特定时间后跳转至目标页面,改时间默认以秒为单位。
    ③ 引用外部文件标记<link>

    <link 属性=”属性值” />    
    

    例如:<link rel=”stylesheet” type=”text/css” href=”style.css” />

    属性名 常用属性值 描述
    href URL 指定引用外部文件的地址
    rel stylesheet 指定当前文档与引用外部文档的关系,该属性值通常为stylesheet,表示定义一个外部样式表
    type text/css或txt/javascript 引用外部文档的类型为css样式表或javaScript脚本
    ④ 内嵌样式标记`` (在html中使用style标记时常常定义其属性为type,相应的属性值为text/css,表示使用内嵌式的css样式)。 4) html文本控制标记 ① 标题和段落标记 a) 标题标记:html提供6个等级的标题:`

    ` align属性用于设置其对齐方式,取值有:left、center、right b) 段落标记:`

    ` align属性用于设置其对齐方式,取值有:left、center、right c) 水平线标记:`
    `
    <hr 属性=”属性值” />  
    

    常用属性如下表所示:
    属性名 含义 属性值
    align 设置水平线的对齐方式 可选left、right、center三种,默认center,居中对齐
    size 设置水平线的粗细 以像素为单位,默认为2像素
    color 设置水平线颜色 可用颜色名称,十六进制#RGB、rgb(r,g,b)
    width 设置水平线的宽度 可以是确定的像素,也可以是浏览器窗口的百分比,默认为100%
    d) 换行标记`
    ` ② 文本样式标记
    <font 属性=”属性值”>文本内容</font>
    

    font标签常用属性:

    属性名 含义
    face 设置文字的字体,例如微软雅黑。黑体、宋体等
    size 设置文字的大小、可以取1~7之间的整数值
    color 设置文字的颜色
    ③ 文本格式化标记 常用文本格式化标记:
    <b></b>和<strong></strong>文字以粗体方式显示(XHTML推荐使用strong)
    
    <i></i>和<em></em>	文字以斜体方式显示(XHTML推荐使用em)
    
    <s></s>和<del></del>	文字以加删除线方式显示(XHTML推荐使用del)
    
    <u></u>和<ins></ins>	文字以加下划线方式显示(XHTML不赞成使用u)
    

    ④ 特殊字符标
    常用特殊字符代码:
    这里写图片描述
    5) html图像标记
    网页上常用的图像格式主要有:GIF、JPG和PNG三种。
    图像标记 <img src=”图像” />
    这里写图片描述
    图像的title属性效果如下:
    这里写图片描述
    6) 相对路径和绝对路径
    绝对路径:一般是指带有盘符的路径。
    相对路径:不带盘符,通常是以html网页文件为起点,通过层级关系描述目标图像的位置。
    “/”用于指定下一集文件夹
    “…/”用于指定上一级文件夹

    展开全文
  • 100个精彩网页设计案例

    千次下载 热门讨论 2020-07-30 23:32:43
    源自国外优秀设计师的100个设计案例,打包放送
  • 网页设计作品展示

    2020-07-30 23:32:16
    网页设计代码展示,以html+css例子。
  • 五种经典网页布局设计

    万次阅读 多人点赞 2018-03-04 16:56:42
    不得不说,网页设计绝对是有套路的!网页布局虽然千变万化,但是如果你仔细观察,会发现有一些布局适用范畴相当广,经久不衰。今天的文章,我们就来聊一下5种经典的网页布局。在开始一个新的网页设计项目的时候,不...

    不得不说,网页设计绝对是有套路的!网页布局虽然千变万化,但是如果你仔细观察,会发现有一些布局适用范畴相当广,经久不衰。今天的文章,我们就来聊一下5种经典的网页布局。

    在开始一个新的网页设计项目的时候,不知道你会不会有那么一瞬间的犹豫:“这个项目要从哪里着手呢?”伴随着这种犹豫的,是“做点前所未有的作品”的冲动。不过,很多时候,这些冲动和犹豫都在需求的磨合、设计的细化中,逐步淡化。相比大家也都发现了,网页布局在很多时候都是相似的,甚至可以说,有些布局模式是长盛不衰的。

    这些布局模式,或者说框架,几乎是“约定俗成”的,它们为用户所熟知,它们本身也更贴合用户对内容的识别模式和使用习惯。今天的文章,我们一同来聊聊五种拥有持久生命力的优秀网页布局,也许你的下一个网页设计项目可以直接从这五种布局模式入手,无需过多犹豫和纠结。

    1、顶部大图Banner+简单的栅格

    armando

    无论屏幕多大,这种布局都能够为用户展示充足的内容,供用户浏览和探索。虽然这种布局随着屏幕、设备而有所差异,有的设计师会倾向于设计成固定宽或者横跨整个页面的布局,但是总体的模式都大同小异。

    ·导航栏
    ·顶部大图,图片上叠有文字标题
    ·2~4个分栏,承载不同类别的信息,有的会有图标
    ·主要的内容区域
    ·页脚

    这种布局设计干净清爽,有足够强的视觉表现力,并且常常采用的响应式设计,断点也很好控制。顶部大面积的轮播图或者Banner 也有许多插件或者应用来帮你实现。

    rodesk

    原理:这种布局中,每个元素都各司其职,并且整个流程是富有逻辑的,顶部大图足以营造氛围,给予用户特定的体验,下面的次一级元素能够做的很好的支撑。

    相关趋势:越来越多这类网页开始采用色彩丰富的插画式的图标,而扁平化的设计和这种布局页面有着天然的契合。

    2、单页设计,单栏布局

    pop-up

    单页式设计这几年非常火,它非常适宜于展现极简的内容,或者专注呈现一个主题。当网站的主题集中,内容也比较固定的时候,无需复杂的布局来呈现,单页单列式的布局足以应付一切。

    ·导航
    ·主要内容区域,文字+图片为主
    ·页脚

    采用这种布局模式的时候,空间的控制至关重要,相当考验设计师设计留白和布局平衡的功力。元素和元素之间的疏密关系是需要设计师反复推敲的,如果空间控制不合理会给用户一种混乱的感觉,如果过于紧密则会产生局促感。

    原理:单页式设计适合于小网站或者小型项目的展示,它可以用来制造一个简单的介绍页面,让简单的内容显得不那么单调,强化内容的形式感和重量感。对于内容简单的博客网站而言,单页式设计也是不错的选择。

    相关趋势:和单页设计结合最紧密的应该是动效设计和视差滚动,他们可以让单页式设计更加生动有趣,淡化单调的设计,赋予页面更强的生命力。

    3、自定义栅格

    seb

    那些被整齐分割出来的网页布局从来都没有过时过。无论是分割得细碎的网页区域还是大块的页面区块,大多都需要借助一套干净整齐的栅格来支撑。在此基础上,内容按部就班地被置于不同的区块中,被精心地组织展示出来。

    在设计师的作品集页面中,你可以发现各种各样自定义的栅格布局。自定义栅格展示内容的优势在于,它可以同时呈现大量的视觉化的内容,看起来足够丰富又不会落于下乘。下面这个图库的效果看起来就相当震撼。

    在栅格中填充色彩,还可以用来承载文字内容。不同的区块之间不一定非要用线条进行分割,可供选择的方案有很多,不过千万要控制好栅格尺寸和间距。控制不好的细节,整个设计的平衡感可能会被破坏。

    原理:栅格的优势在于它的组织性,对于用户而言,它具有规律性和可预期性。一个漂亮的栅格系统能够让用户更快找到需要的内容,在视觉上也更加协调自然。

    相关趋势:栅格很容易被人视为卡片这样的元素,可以为其加入翻转等各式各样的动效,呈现出更多的信息和视觉层次。

    4、经典的F式布局

    motive

    研究表明,用户在浏览网页的时候,习惯于沿着F式的阅读轨迹来浏览信息,也就是说,用户喜欢从左到右阅读,然后向下移动,再继续从左到右阅读。

    这种F式的阅读模式对应的网页布局就是F式布局,最关键的信息靠左显示,从上到下尽量保持在一条线上。

    ·页头和导航
    ·靠左的一栏相对较宽,展示主要的内容
    ·靠右常为侧边栏,展示相关链接等内容
    ·页脚

    原理:人的行为很容易受到习惯的影响,而研究也证实了人思考、行为确实是模式化的。从左到右,自上而下,人们大多习惯了这种行为模式。F式的布局模式拥有良好的适用性,便于用户理解和交互。

    相关趋势:F式布局中侧边玩法很多,有的设计师会将导航与之结合,或者在页面顶部加上大图Banner。

    5、极简分层

    berkeley

    极简化的设计一直都在流行,它的流行不是没有原因的。开放式的空间让用户感觉更加轻松,也使得其中展现的内容更容易被聚焦。如果极简化的页面中加入不多的几个并列的内容层,可以让信息更有层次,也使得极简的页面拥有了细节。

    这种设计并不复杂,但是让页面更加有趣了,它可以适配更多不同类型的项目了。这也解释了为什么用户如此的喜爱类似Apple 官网这样的设计。

    apple

    原理:极简化的页面中加入简单的几个分层,让页面有了视觉焦点,尤其是当设计者想要引导用户关注到某个关键的内容的时候,这种页面布局很很容易实现这一点。

    相关趋势:微妙的阴影和渐变常常被用在这样的页面当中,强化元素之间的层次感。虽然这些设计手法一度“过时”,但是现在大有卷土重来之势,而Material Design 这样的设计风格就是它们的冲锋号。

    结语

    许多设计手法、设计趋势都常常会被人质疑,但是如果撇开情感因素,从最基本的设计原理上来推导这些趋势的时候,能够从根本上判读这些设计手法是否真的是有价值的。

    今天所谈及的这些布局是经过时间洗炼的经典设计,挑选合适的设计趋势同这些布局结合起来,常常能够带来不错的效果。

    展开全文
  • 期末网页设计 作业 大学生 高中生 网页设计作业成品下载dreamweaver/frontpage网页设计制作大作业,期末考试网页作业下载。
  • html网页设计

    千次阅读 2018-02-13 19:11:13
    1 网页介绍 静态网页与动态网页: 静态网页:我们写好的html内容在浏览器中显示出来的效果始终都一样,不管进行多少次访问,如果想内容改变必须修改源代码。 动态网页:页面的内容是由服务器端程序控制输出,...

    1 网页介绍

    静态网页与动态网页:
    
        静态网页:我们写好的html内容在浏览器中显示出来的效果始终都一样,不管进行多少次访问,如果想内容改变必须修改源代码。
    
        动态网页:页面的内容是由服务器端程序控制输出,比如不同的人使用相同的网站,但是显示的当前用户是不一样的。
    
        两者区别:静态就是我们写什么就显示什么,而动态通过程序的控制输出内容。
    

    2 第一个html网页

    <html>
    <body>
    
    <h1>My First Heading</h1>
    
    <p>My first paragraph.</p>
    
    </body>
    </html>
    

    3 超链接标签

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <h3>超链接</h3>
        <!-- blank表示另起一页打开空白,_self表示在本页打开 不过默认在本页打开-->
        <a href="hello.html" target="_self">点我啊</a>
    </body>
    </html>

    4 图片标签

    必须属性:

        alt text 规定图像的替代文本。 STF 
    
        src URL 规定显示图像的 URL。 STF  
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <!--利用图片做超链接-->
        <a href="hello.html" target="_self"><img src="images/110.png" alt="孙悟空大战奥特曼" title="师姐第三" border="5"/></a>
        <img src="images/three.jpg" alt="孙悟空大战奥特曼" title="师姐第三" border="10"  width="500" height="400"/>
    </body>
    </html>

    5 列表标签

    有序列表:

        列表项目使用数字进行标记。
    
        有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
    

    无序列表:

        无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
    
        无序列表始于 <ul> 标签。每个列表项始于 <li>。
    

    定义列表:

        自定义列表不仅仅是一列项目,而是项目及其注释的组合。
    
        自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <!--有序链表-->
        四大美女
        <!-- 1数字A字母a字母,I数字V i是vi -->
        <ol type="I">
        <li>西施</li>
        <li>王昭君</li>
        <li>貂蝉</li>
        <li>杨玉环</li>
        </ol>
    
        <!--无序链表-->
        四大美女
        <!-- square方块,circle圆圈 默认是点 -->
        <ul type="circle">
        <li>西施</li>
        <li>王昭君</li>
        <li>貂蝉</li>
        <li>杨玉环</li>
        </ul>
    
        <!--定义链表-->
        <dl>
        <dt>四大妹妹</dt>
        <dd>西施</dd>
        <dd>王昭君</dd>
        <dd>貂蝉</dd>
        <dd>杨玉环</dd>
        </dl>
    
        <!--自定义的嵌套列表-->
        <dl>
            <dt>java</dt>
                <dd>javaSE</dd>
                <dd>
                        <dl>
                            <dt>javaEE</dt>
                            <dd>Strus2</dd>                 
                            <dd>Hibernate</dd>                  
                            <dd>Spring</dd>                 
                        </dl>
                </dd>
                <dd>javaME</dd>
            <dt>html汉语</dt>
        </dl>
    </body>
    </html>

    6 表格标签

    每个表格由 table 标签开始。

    每个表格行由 tr 标签开始。

    每个表格数据由 td 标签开始。

    <table> 定义表格 
    <caption> 定义表格标题。 
    <th> 定义表格的表头。 
    <tr> 定义表格的行。 
    <td> 定义表格单元。 
    <thead> 定义表格的页眉。 
    <tbody> 定义表格的主体。 
    <tfoot> 定义表格的页脚。 
    他们三的作用:就算被打乱了还是从thead,tbody,tfoot这个顺序,可以增加用户体验,及时缓冲出表头跟尾巴这些重要信息
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <!-- width占浏览器的80%  padding单元格边距   spacing单元格间距 -->
        <table border="1" width="80%" cellpadding="0" cellspacing="0">
    
            <!-- 表名 -->
            <caption>学生列表</caption>
    
            <thead>
                <tr style="background: gray">
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
    
            <tfoot>
                <!-- center居中显示 -->
                <tr align="center">
                    <td colspan="4"><a href="">首页</a><a href="">上一页</a><a href="">下一页</a><a
                        href="">尾页</a> 第4/6页 总共有46条数据</td>
                </tr>
            </tfoot>
    
            <tbody>
                <tr>
                    <td>10</td>
                    <td>乔峰</td>
                    <td>30</td>
                    <td></td>
                </tr>
                <tr style="background: yellow;">
                    <td>20</td>
                    <td>西门</td>
                    <td>28</td>
                    <td></td>
                </tr>
                <tr>
                    <td>30</td>
                    <td>莲莲</td>
                    <td>20</td>
                    <td></td>
                </tr>
            </tbody>
    
        </table>
    </body>
    </html>

    8 表单标签

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <h3>用户注册</h3>
        <!-- form:表单域,可以包含多个input元素(输入框/下拉列表/单选框/复选框...) 
            属性:
                action:把表中的数据提交给哪一个资源来做处理
                method:单元的提交方式:get(缺省),post
                enctype:表示表单的编码规范,文件上传时的时候使用二进制编码,其他情况不变
        -->
    
        <form action="#" method="get">
    
        </form>
    </body>
    </html>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <h3>用户注册</h3>
        <form action="#" method="get">
            <!-- hidden是隐藏值 -->
            <input type="hidden" name="id" value="123456"/>
                <!-- readonly只读  disabled="disabled"灰色不可用的 只要跟前面的相同可以只用一个单词就行-->
            账号:<input type="text" name="username" value="默认值"/><br/>
            密码:<input type="password" name="password"/><br/>
            <!-- checked默认选中的 -->
            性别:<input type="radio" name="gender" value="boy" checked/><input type="radio" name="gender" value="boy"/><input type="radio" name="gender" value="boy"/>保密<br/>
            爱好:<input type="checkbox" name="hoby" checked/>java
                 <input type="checkbox" name="music"/>听歌
                 <input type="checkbox" name="boll"/>打篮球
                 <input type="checkbox" name="games"/>LOL
                 <input type="checkbox" name="phonegames"/>海岛奇兵<br/>
            头像:
                <input type="file" name="headImg"/>  <br/><hr/>
            城市:<!-- value设置"gz"最上面的网址行显示的是gz-->
                 <!-- multiple可以同时选择多个选项  size同时显示几个值-->
                <select name="city" multiple size="1">
                    <option  value="gz">广州</option>
                    <option>佛山</option>
                    <option>深圳</option>
                    <option>湛江</option>
                </select><br/>
            简介:
                <!-- 有30个列,可以写5行 -->
                <textarea name="intro" row="30" cols="30">个人简介</textarea>
            <br/>
            <!--    <input type="image" src="images/110.png"/>    -->   
            <input type="button" value="普通按钮" onclick="alert(1)"/>
            <input type="submit" value="朕要注册" />
            <input type="reset" value="重置"/>
        </form>
    </body>
    </html>

    html5新特性

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <h3>用户注册</h3>
        <form action="#" method="get">
                <!-- required必填属性
                     date格式
                     数字模式
                     最大最小
                     占位符关键字
                     颜色
                 -->
            账号:<input type="text" name="username" required/><br/>
            邮箱:<input type="email" name="email" required/><br/>
            年龄:<input type="date" name="age"/><br/>
            手机:<input type="number" name="tel"/><br/>
                    <!--  max="10" min="1" 属性值最大最小值-->
                  <input type="search" name="keyword" placeholder="关键字"/>
                  <input type="color">
            <br/>
            <input type="submit" value="朕要注册"/>
        </form>
    </body>
    </html>

    9 框架标签

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <frameset rows="15%,*,5%">
            <frame src="top.html"/>
            <frameset cols="300,*">
                <frame src="menu.html" noresize/>       
                <frame src="welcome.html" name="main"/>
            </frameset>
            <frame src="foot.html"/>
    </frameset>
    <noframes>
    <body>
            浏览器版本过低,请升级
    </body>
    </noframes>
    </html>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <h3>菜单信息</h3>
            四大美女
            <ul type="square">
                <li><a href="xishi.html" target="main">西施</a></li>
                <li><a href="zhaojun.html" target="main">王昭君</a></li>
                <li><a href="">貂蝉</a></li>
                <li><a href="">杨玉环</a></li>
            </ul>
    </body>
    </html>

    10 CSS概述

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
        <style type="text/css">
            /* css代码*/
            div{
                background-color:green;
            }
        </style>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div style="background-color: yellow">DIV1</div>
        <div style="background-color: orange">DIV2</div>
        <div style="font-size: 30px; color: red;">DIV3</div>
    </body>
    </html>

    调用下面的index.css代码

    /*全局的样式信息*/
    div{
        background-color:green;
    }

    标签选择器,类别选择器,id选择器…

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
        <style type="text/css">
            <!--标签选择器-->
            div{
                background-color:red;
            }
            p{
                background-color:yellow;
                font-size:30px;
                color:white;
            }
            <!--类别选择器-->
            .haha{
                background-color:green;
            }
            <!--id选择器-->
            #div1{
                background-color:black;
            }
        </style>
    </head>
    <body>
        <div class="haha" id="div1">DIV1</div>
        <div id="div2">DIV2</div>
        <div>DIV3</div>
        <p class="haha">p1</p>
        <p>p2</p>
        <apan>span</apan>
    </body>

    11 JS 概述

    /*要求:
    * 1.定义变量
    * 2.定义函数/调用函数
    * 3.获取指定id的元素
    * 4.提交表单
    */

    index.html文件

    <body>
            你好
            <a href="javascript:alert(22)">点我</a>
            <div id="div1">DIV1的内容</div>
            <div>DIV2的内容</div>
            <div>DIV3的内容</div>
    
            <form action="#" id="xx">
                <input type="text" name="username"/>
                <input type="button" value="提交" onclick="submitForm()"/>
            </form>
    </body>

    index.js文件

        function show(){
            alert("哈哈,函数");
        }
        show();
    
    
        function show(name){
            alert("你好"+name);
        }
        show("乔峰");
        show("阿朱");
    
        function getSun(x,y){
            return x+y;
        }
        var ret = getSun(2,5);
        console.debug("结果="+ret);
        function submitForm(){
            //提交表单的代码
            //获取表单对象
            //var form = document.forms[0];
            var form = document.getElementById("xx");
            //提交表单
            form.submit();
        }
    展开全文
  • 网页设计

    千次阅读 2019-04-04 18:25:25
    网页设计 (制作工具Adobephotosh) (作者:罗天绪 撰写时间:4月2日) 首先打开Adobephotosh(简称)Ps,要2018版的Ps,然后打开进入主界面,在顶部的第一个文件哪里点击文件,然后在文件哪里点击新建就出了个页面也...

    网页设计
    (制作工具Adobephotosh)
    (作者:罗天绪 撰写时间:4月2日)
    首先打开Adobephotosh(简称)Ps,要2018版的Ps,然后打开进入主界面,在顶部的第一个文件哪里点击文件,然后在文件哪里点击新建就出了个页面也可以快捷键(ctrl+N)在哪里创立一个需要的一个图层。然后在做设计网页之前上网找一些需要的图片和一些素材来进行排版和设计。
    我设计的这个网页是食品的网页。
    在这里插入图片描述

    这是一个由多种食品组成的网站,其中这个网站包含了那些食品呢?比如蛋糕,牛排,咖啡,披萨,等等一系列的食品。在这个网站我们是采用了8种颜色搭成的一个版面,然后
    图片中间距离是2厘米,然后在打上一些文字就基本完成了。
    下面说一下这个网站的颜色配置,这个网站的主题色是草莓红,白色,,标题色是黑色,淡橙色,红色,辅助色是棕色,中灰色,提示色是红色。
    文字搭配,这个网站用的文字都是微软雅黑,主题用的是14.7号,12号,第二版面,
    用的是30号,和11号,后面这些用的是18.35号,23号,27.68号,18.99号,10号。

    展开全文
  • HTML5快速设计网页

    千次阅读 2019-06-24 12:32:05
    HTML5快速设计网页 目录 一、认识web开发和软件安装 二、使用HTML/HTML5搭建页面骨架 一、认识web开发和软件安装 1、认识网页:商城网页比较经典,比如京东,淘宝、小米商城还有锤子官网等有图片、文字还有...
  • HTML网页设计

    万次阅读 多人点赞 2018-06-21 16:39:40
    html网页设计里面平铺背景图片的代码如下:&lt;html&gt; &lt;body&gt; &lt;div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%&...
  • 什么是网页网页是一个文件,它存放在世界某个角落的某个计算机中,而这部计算机必须是与互联网相连的。网页经由网址 (URL)来识别与存取,是万维网中的一”页“,网页要通过网页浏览器来阅读。 什么是网站? ...
  • 10个您不想错过的最佳网页设计软件

    万次阅读 2019-04-22 08:13:48
    您在寻找最好的专业网页设计软件吗?网页设计软件使您能够在更短的时间内创建Web模板和设计。在过去,您必须编写数百条困难的代码行来创建最基本的模板; 但是,随着现在市场上的高级网络创建软件,任何人都可以快速...
  • 简单网页设计

    2020-07-26 23:32:19
    采用互联网技术开发的简单的网页设计
  • 网站架构设计参考(图文)

    千次阅读 2016-06-26 19:49:09
    1、概述  本人并未经历过一个网站从小到大的演化过程(这种机会本来就太小,而且越来越小),现在很多网站,从建立之初就搭建在大型网站提供的云计算服务之上,需要的一切资源都可以按需购买,并且极易伸缩。...
  • 高质量学生dreamweaver网页设计制作大作业成品下载

    千次下载 热门讨论 2020-07-30 23:32:43
    学生原创课程设计网页设计制作大作业成品免费下载。本网页作业为一个展示产品类型的网页设计作业作品成品。使用dreamweaver制作采用DIV+CSS进行布局,总页面数量9页。适合修改成为各种类型的产品展示网页,比如摄影...
  • 网页设计报价

    千次阅读 2009-05-31 09:12:00
    "家有家规,国有国法",网页设计的价格标准,似乎是有了"家规",尚无"国法"。每个公司、工作室开出的价格单都不同,没有统一的标准。这里面值得推敲,这种现象是不是正常的现象?拿青菜价格来说,虽然各地的物价指数...
  • 新手做网页设计?这9款经典网页布局设计了解下

    千次阅读 多人点赞 2018-08-29 10:18:23
    这无疑是一件好事,但是,很多设计师,尤其是新手设计师或者压根儿就不是设计师的小白,都在网页设计上走过不少弯路。 网页制作最重要的就是网页布局,先布局,后细节,只有在选择了合适的网站布局以后,才可以顺利...
  • 大学个人网页设计作业

    千次下载 热门讨论 2020-07-30 23:33:09
    都是自己做的。比较简单。。交个作业应该是没有问题的
  • HTML静态网页设计

    万次阅读 多人点赞 2018-05-14 08:48:35
    第一周:HTML写静态网页1.HTML理论介绍及常用格式(1).HTML主体格式&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title...
  • 学生原创课程设计网页设计制作大作业成品免费下载。本网页作业为一个展示产品类型的网页设计作业作品成品。使用dreamweaver制作采用DIV+CSS进行布局,总页面数量9页。适合修改成为各种类型的产品展示网页,比如摄影...
  • 在开始之前,我有一个问题,在设计一个网站时,你最关注的是什么?是美轮美奂的界面?还是酷炫的效果?其实,网站功能和用户体验才是网站设计最该解决的问题。...那么问题又来了,什么样的网页设计才是好的网页...
1 2 3 4 5 ... 20
收藏数 428,517
精华内容 171,406
关键字:

网页设计